/* ============================================================
   Case study — page-specific decoration.

   Named for the TYPE, not the client: IceHQ is the first case study
   rebuilt on the design system, and MIHWA + GSHL are the same shape
   (hero glance card, growing-together timeline, challenge/approach/
   outcome, results band, recap beats). Everything here is generic
   enough for all three — only the copy and figures differ.

   CYAN leads this page (the case-study accent), blue is secondary,
   green marks outcomes and red the challenge.

   Keyframes are global, so everything here is `cs`-prefixed.

   NOTE on <p>/<b>/<a>: the theme and the DS neutraliser style bare
   elements at specificity 0,1,1, which beats any single-class rule
   here (0,1,0). Every rule below that lands on one of those elements
   is scoped under `.xs-page` for that reason.
   ============================================================ */

@keyframes csGlow{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.85;transform:scale(1.06)}}
@keyframes csDraw{to{stroke-dashoffset:0}}
@keyframes csDot{from{opacity:0}to{opacity:1}}

/* ---------- hero ---------- */
.cs-hero{position:relative;min-height:78vh;display:flex;align-items:center;overflow:hidden;color:#fff;
	background:radial-gradient(circle at 76% 30%,#0d1a33,#04070f 62%)}
/* The site header is fixed and transparent over the hero — hold solid
   black for its height before fading, same convention as every other
   flagship page. */
.cs-hero__fade{position:absolute;inset:0 0 auto 0;height:300px;pointer-events:none;
	background:linear-gradient(180deg,var(--ink-900) 0,var(--ink-900) 130px,transparent 100%)}
.cs-hero__inner{position:relative;width:100%;padding-top:calc(130px + clamp(2rem,4vw,3.5rem))}
.cs-blob{position:absolute;border-radius:50%;pointer-events:none}
.cs-blob--cyan{bottom:-170px;right:-130px;width:600px;height:600px;filter:blur(32px);
	background:radial-gradient(circle,rgba(0,212,255,.22),transparent 62%);animation:csGlow 9s ease-in-out infinite}
.cs-blob--blue{top:-130px;left:-110px;width:440px;height:440px;filter:blur(28px);
	background:radial-gradient(circle,rgba(33,153,232,.18),transparent 64%)}

/* breadcrumb */
.cs-crumb{display:flex;align-items:center;gap:.6rem;font-size:.72rem;font-weight:700;letter-spacing:.14em;
	text-transform:uppercase;margin-bottom:1.3rem}
.xs-page .cs-crumb__link,
.xs-page .cs-crumb__link:link,
.xs-page .cs-crumb__link:visited{color:rgba(255,255,255,.45);text-decoration:none}
.xs-page .cs-crumb__link:hover{color:#fff}
.cs-crumb__sep{color:rgba(255,255,255,.25)}
.cs-crumb__here{color:var(--cyan)}

/* "at a glance" card */
.cs-glance{background:#0b1120;border:1px solid rgba(255,255,255,.14);border-radius:18px;overflow:hidden;
	box-shadow:0 34px 80px rgba(0,0,0,.62)}
.cs-glance__head{display:flex;align-items:center;gap:.9rem;padding:18px 22px;background:#111a2e;
	border-bottom:1px solid rgba(255,255,255,.06)}
/* the client logo is light artwork — it needs the white tile to read */
.cs-glance__logo{width:52px;height:52px;flex:none;background:#fff;border-radius:11px;display:flex;
	align-items:center;justify-content:center;padding:7px}
.cs-glance__logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.xs-page .cs-glance__title{font-family:var(--font-display);color:#fff;font-size:1.2rem;line-height:1}
.cs-glance__loc{font-size:.72rem;color:var(--cyan)}
.cs-glance__body{padding:20px 22px;display:flex;flex-direction:column;gap:11px}
.cs-glance__row{display:flex;gap:.8rem;align-items:baseline}
.cs-glance__key{font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
	color:rgba(255,255,255,.45);width:98px;flex:none}
.cs-glance__val{font-size:.92rem;color:rgba(255,255,255,.85)}
.cs-glance__note{display:flex;gap:.8rem;align-items:baseline;background:rgba(0,212,255,.08);
	border:1px solid rgba(0,212,255,.3);border-radius:10px;padding:10px 12px;margin-top:.3rem;
	font-size:.9rem;color:#fff}
.cs-glance__note i{color:var(--cyan);flex:none}

/* ---------- growing-together timeline ---------- */
.cs-timeline{position:relative;margin-top:2.8rem}
/* the connector sits behind the nodes; each node's ring punches a hole
   in it with a band-coloured box-shadow rather than a gap in the line */
.cs-timeline__line{position:absolute;left:6%;right:6%;top:26px;height:2px;
	background:linear-gradient(90deg,rgba(0,212,255,.15),rgba(0,212,255,.7),rgba(0,212,255,.15))}
.cs-timeline__grid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.cs-node{text-align:center;padding:0 .5rem}
.cs-node__dot{width:54px;height:54px;margin:0 auto;border-radius:50%;background:#0b1120;
	border:2px solid rgba(0,212,255,.55);display:flex;align-items:center;justify-content:center;
	color:var(--cyan);font-size:1.15rem;box-shadow:0 0 0 6px #070d1c}
.xs-page .cs-node__title{font-family:var(--font-display);color:#fff;font-size:1.12rem;margin-top:.9rem}
.cs-node__tag{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
	color:var(--cyan);margin-top:.2rem}
.xs-page .cs-node__blurb{font-size:.9rem;line-height:1.45;color:rgba(255,255,255,.62);margin:.5rem 0 0}

/* ---------- hero glance: 2x2 stat grid (used where a case study has no client logo) ---------- */
.cs-glance__grid{padding:20px 22px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cs-glance__n{font-family:var(--font-display);color:#fff;font-size:1.7rem;line-height:1}
.cs-glance__lbl{font-size:.76rem;color:rgba(255,255,255,.55)}

/* ---------- step flow diagram ---------- */
.cs-flow{background:#0b1120;border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:26px}
.cs-flow__row{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center}
.cs-flow__step{flex:1 1 220px;min-width:200px;padding:16px;text-align:center}
/* Four steps don't fit on one row at the default basis — they wrap 3+1
   and strand the last step under a dangling arrow. --four tightens the
   basis so all four sit on one line, and drops to two-up on narrow
   screens (which reads fine, unlike 3+1). */
.cs-flow--four .cs-flow__step{flex:1 1 150px;min-width:140px;padding:14px 8px}
.cs-flow--four .cs-flow__arrow{padding:0 .15rem}
.cs-flow__ring{width:46px;height:46px;margin:0 auto;border-radius:11px;background:rgba(0,212,255,.12);
	border:1px solid rgba(0,212,255,.3);display:flex;align-items:center;justify-content:center;color:var(--cyan)}
.cs-flow__ring--done{background:rgba(58,219,118,.12);border-color:rgba(58,219,118,.3);color:var(--success)}
.cs-flow__title{font-family:var(--font-display);color:#fff;font-size:1rem;margin-top:.7rem}
.xs-page .cs-flow__body{font-size:.82rem;color:rgba(255,255,255,.6);margin:.3rem 0 0;line-height:1.5}
/* the connector hides itself when the steps wrap to one column */
.cs-flow__arrow{flex:0 0 auto;align-self:center;color:var(--cyan);padding:0 .4rem}
.cs-flow__chips{margin-top:1.2rem;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.cs-chip{font-size:.72rem;border-radius:999px;padding:.35rem .8rem;display:inline-flex;align-items:center;gap:.35rem}
.cs-chip--cyan{color:var(--cyan);background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.3)}
.cs-chip--plain{color:rgba(255,255,255,.7);background:#0f1830;border:1px solid rgba(255,255,255,.1)}

/* ---------- browser-chrome frame for product screenshots ---------- */
.cs-browser{background:#0b1120;border:1px solid rgba(255,255,255,.14);border-radius:16px;overflow:hidden;
	box-shadow:0 30px 70px rgba(0,0,0,.6)}
.cs-browser__bar{display:flex;align-items:center;gap:.5rem;padding:11px 14px;background:#111a2e;
	border-bottom:1px solid rgba(255,255,255,.06)}
.cs-browser__dot{width:11px;height:11px;border-radius:50%}
.cs-browser__dot--r{background:#ff5f57}
.cs-browser__dot--y{background:#febc2e}
.cs-browser__dot--g{background:#28c840}
.cs-browser__url{margin-left:.6rem;font-size:.68rem;color:rgba(255,255,255,.45);
	font-family:ui-monospace,Menlo,monospace}
/* the capture is a tall full-page shot — cap it and let it scroll */
.cs-browser__view{max-height:520px;overflow-y:auto}
.cs-browser__view img{width:100%;height:auto;display:block}

/* ---------- challenge / approach / outcome ---------- */
.cs-part{background:#0b1120;border-radius:15px;padding:24px}
.cs-part--red{border:1px solid rgba(255,107,107,.3)}
.cs-part--blue{border:1px solid rgba(33,153,232,.35)}
.cs-part--green{border:1px solid rgba(58,219,118,.35)}
.cs-part__head{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.cs-part__n{font-family:var(--font-display);font-size:1.6rem}
.cs-part__k{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.cs-part--red .cs-part__n,.cs-part--red .cs-part__k{color:var(--coral)}
.cs-part--blue .cs-part__n,.cs-part--blue .cs-part__k{color:var(--blue-500)}
.cs-part--green .cs-part__n,.cs-part--green .cs-part__k{color:var(--success)}
.xs-page .cs-part__body{font-size:.98rem;line-height:1.6;color:rgba(255,255,255,.78);margin:0}

/* ---------- key results band ---------- */
/* Its own surface rather than the DS `--ink-radial`, which is red-tinted
   (#1a0608) for the pages that lead with red. This design's results band
   is a cool blue-black glow. */
.cs-results{background:radial-gradient(circle at 50% 0%,#0a1526,#020409 70%);color:#fff}

/* ---------- key results: chart ---------- */
.cs-chart{background:#0b1120;border:1px solid rgba(255,255,255,.12);border-radius:18px;
	padding:26px 26px 18px;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.cs-chart__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.4rem}
.cs-chart__k{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.cs-chart__range{font-size:.66rem;color:var(--cyan)}
.cs-chart svg{width:100%;height:auto;display:block}
/* the line and dots start hidden and are animated in by the page script;
   with JS off or reduced motion the fallback below shows them at once */
.cs-chart__line{stroke-dasharray:560;stroke-dashoffset:560}
.cs-chart__area{opacity:0;transition:opacity .8s var(--ease) .5s}
.cs-chart.is-drawn .cs-chart__line{animation:csDraw 1.3s var(--ease) forwards}
.cs-chart.is-drawn .cs-chart__area{opacity:1}
.cs-chart.is-drawn .cs-chart__node{animation:csDot .3s var(--ease) forwards}
.cs-chart__node{opacity:0}

/* ---------- key results: year columns ---------- */
.cs-year{background:#0b1120;border:1px solid rgba(255,255,255,.1);border-radius:15px;padding:22px}
.cs-year--now{background:linear-gradient(160deg,#0a2233,#0b1120);border-color:rgba(0,212,255,.45)}
.cs-year__label{font-family:var(--font-display);color:var(--cyan);font-size:1.1rem;margin-bottom:.9rem}
.cs-year__part{font-size:.72rem;color:rgba(255,255,255,.5)}
.cs-year__big{font-family:var(--font-display);color:#fff;font-size:2rem;line-height:1}
.cs-year__mid{font-family:var(--font-display);color:#fff;font-size:1.5rem;line-height:1}
.cs-year__small{font-family:var(--font-display);color:#fff;font-size:1.2rem;line-height:1}
.cs-year__unit{font-size:.82rem;color:rgba(255,255,255,.55)}
.cs-year__unit--gap{margin-bottom:.9rem}

.cs-total{display:inline-flex;align-items:center;gap:.7rem;background:rgba(0,212,255,.1);
	border:1px solid rgba(0,212,255,.4);border-radius:999px;padding:.7rem 1.4rem;
	font-size:1.02rem;color:#fff;text-align:left}
.cs-total i{color:var(--cyan);flex:none}
.xs-page .cs-total b{color:var(--cyan)}

/* ---------- feature cards (one platform / store / sponsors) ---------- */
.cs-feat{background:#0b1120;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:26px}
.cs-feat--accent{background:linear-gradient(160deg,#0a2233,#0b1120);border-color:rgba(0,212,255,.4);
	display:flex;flex-direction:column;justify-content:center}
.cs-feat__head{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
.cs-feat__head i{font-size:1.1rem}
.xs-page .cs-feat__title{font-family:var(--font-display);font-weight:400;font-size:1.3rem;margin:0;color:#fff}
.xs-page .cs-feat__body{font-size:.98rem;line-height:1.6;color:rgba(255,255,255,.78);margin:0 0 .8rem}
.xs-page .cs-feat__body--last{margin-bottom:0}
.xs-page .cs-feat__body b{color:#fff}

/* tournament list */
.cs-evts{display:flex;flex-direction:column;gap:10px;margin-bottom:1.2rem}
.cs-evt{display:flex;gap:.7rem;align-items:center;font-size:.96rem;color:rgba(255,255,255,.85)}
.cs-evt i{color:var(--cyan);font-size:.8rem;flex:none}
.xs-page .cs-evt b{color:#fff}

/* ---------- mid CTA band ---------- */
.cs-midcta{position:relative;overflow:hidden;background:linear-gradient(135deg,#0a3a8c,#1276c4)}
.cs-midcta__glow{position:absolute;top:-100px;right:-80px;width:420px;height:420px;border-radius:50%;
	background:radial-gradient(circle,rgba(0,212,255,.35),transparent 65%);filter:blur(28px);
	pointer-events:none;animation:csGlow 9s ease-in-out infinite}
.cs-midcta__inner{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:2rem;
	justify-content:space-between}
.xs-page .cs-midcta__body{font-size:1.14rem;line-height:1.6;color:rgba(255,255,255,.9);margin:1.2rem 0 0;max-width:40rem}

/* ---------- recap beats ---------- */
.cs-recap{background:#0b1120;border:1px solid rgba(255,255,255,.1);border-radius:15px;padding:24px}
.cs-recap__head{display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem}
.cs-recap__n{font-family:var(--font-display);font-size:1.5rem;color:var(--cyan)}
.cs-recap__title{font-family:var(--font-display);font-size:1.2rem;color:#fff}
.xs-page .cs-recap__body{font-size:.96rem;line-height:1.6;color:rgba(255,255,255,.72);margin:0}

/* ---------- final CTA ---------- */
.cs-close{position:relative;overflow:hidden;text-align:center;
	background:linear-gradient(150deg,var(--navy-900),#0d1a33)}
.cs-close__glow{position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:680px;height:440px;
	background:radial-gradient(circle,rgba(0,212,255,.3),transparent 65%);filter:blur(28px);
	pointer-events:none;animation:csGlow 9s ease-in-out infinite}
.cs-close__links{margin-top:1.8rem;display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem;font-size:.9rem}
.xs-page .cs-close__link,
.xs-page .cs-close__link:link,
.xs-page .cs-close__link:visited{color:rgba(255,255,255,.6);text-decoration:none}
.xs-page .cs-close__link:hover{color:#fff;text-decoration:underline}

@media (prefers-reduced-motion:reduce){
	.cs-blob--cyan,.cs-midcta__glow,.cs-close__glow{animation:none}
	.cs-chart__line{stroke-dashoffset:0}
	.cs-chart__area,.cs-chart__node{opacity:1}
	.cs-chart.is-drawn .cs-chart__line,
	.cs-chart.is-drawn .cs-chart__node{animation:none}
}