/* ==========================================================================
   Case study components — reusable across case study pages
   - Hero stats band (glance / metaline / stats)
   - CSS/SVG banner graphics (journey, phones, agent window, dashboard)
   Palette + type tuned to the eleveneleven site (HK Grotesk).
   ========================================================================== */

:root{
  --cs-ink:#0c0c0c;
  --cs-ink-2:#5a5a5a;
  --cs-ink-3:#6f6f6f;
  --cs-paper:#ffffff;
  --cs-wash:#f5f5f3;
  --cs-line:#e6e6e2;
  --cs-accent:#d37731;        /* bronze — display + non-text: icons, borders, fills, large text (>=3:1) */
  --cs-accent-text:#9a5620;   /* darker bronze — links + small text, 5.6:1 AA */
  --cs-accent-soft:#f6e7d6;   /* light bronze tint — soft backgrounds */
  --cs-before:#c0392b;   /* before — red, 5.4:1 AA */
  --cs-after:#158a5c;    /* after — green, 4.4:1 (AA for large/bold) */
  --cs-ink-panel:#26262b;
  --cs-mono:"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
}

/* ---------- Hero stats band (reusable lockup) ---------- */
/* Case-study hero: title + standfirst fill their col-xs-12 col-md-8 column. */
@media(min-width:768px){
  /* typography.css centres h1 with margin:0 auto; keep the title flush-left in its column */
  .cs-hero-title{margin-left:0;margin-right:auto;}
}

/* Meta line — sits in the hero, under the standfirst */
.cs-metaline{
  display:flex;flex-wrap:wrap;gap:6px 44px;
  margin-top:40px;
  padding:20px 0 0;
  border-top:2px solid var(--cs-ink);
  font-size:0.875em;line-height:1.25;
}
.cs-metaline span b{
  font-family:'HKGrotesk-regular','Helvetica','Arial',sans-serif;font-weight:normal;
  color:var(--cs-ink-3);margin-right:8px;
}

/* Stats band — its own band, placed after the hero image */
.cs-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
}
.cs-stat{border-top:1px solid var(--cs-ink);padding-top:12px;}
/* .n scales fluidly but is bounded to the site's .heading-2 range (1.625em–2.25em),
   so it stays on-system while fitting the tiles nicely. */
.cs-stat .n{
  font-family:'HKGrotesk-bold','Helvetica','Arial',sans-serif;
  font-size:clamp(1.625em, 3.5vw, 1.75em);line-height:1.25;color:var(--cs-ink);margin:0;
  white-space:nowrap;
}
.cs-stat .n .a{color:var(--cs-accent-text);}
/* inline arrow glyph — lighter + more consistent than a bold → character */
.cs-arrow{display:inline-block;width:0.75em;height:0.4em;margin:0 0.14em;vertical-align:0.08em;}
.cs-arrow path{fill:none;stroke:var(--cs-accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.cs-stat .l{font-size:0.875em;line-height:1.25;color:var(--cs-ink-2);margin-top:6px;max-width:24ch;}

/* ==========================================================================
   Banner graphics
   ========================================================================== */
.cs-banner{
  background:var(--cs-wash);
  border-radius:4px;
  padding:44px 34px;
  margin:36px 0;
  font-family:'HKGrotesk-regular','Helvetica','Arial',sans-serif;
  color:var(--cs-ink);
}
.cs-banner *{box-sizing:border-box;}
.cs-banner-inner{max-width:1000px;margin:0 auto;}

/* ---------- Responsive ---------- */
@media(max-width:680px){
  .cs-banner{padding:28px 18px;}
}

/* ==========================================================================
   Reader enhancements + prose components
   ========================================================================== */

/* Byline — read time + last updated, sits under the standfirst */
.cs-byline{
  margin-top:20px;font-size:0.875em;line-height:1.25;color:var(--cs-ink-2);
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.cs-readtime{display:inline-flex;align-items:center;gap:6px;color:var(--cs-accent-text);}
.cs-readtime .cs-clock{width:15px;height:15px;flex:0 0 auto;}
.cs-readtime .cs-clock circle,
.cs-readtime .cs-clock path{fill:none;stroke:var(--cs-accent-text);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.cs-byline-sep{color:var(--cs-ink-3);}

/* Scroll progress bar */
.cs-progress{position:fixed;top:0;left:0;right:0;height:5px;background:var(--cs-line);z-index:10000;}
.cs-progress span{display:block;height:100%;width:0;background:var(--cs-accent);}

/* "On this page" — static contents row (not sticky) */
.cs-onpage{border-top:1px solid var(--cs-line);border-bottom:1px solid var(--cs-line);}
.cs-onpage-inner{
  max-width:1170px;margin:0 auto;padding:14px 30px;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;font-size:0.875em;
}
.cs-onpage a{text-decoration:none;color:var(--cs-ink-2);padding:2px 0;border-bottom:2px solid transparent;white-space:nowrap;}
.cs-onpage a:hover{color:var(--cs-accent-text);border-bottom-color:var(--cs-accent);}
/* clears the fixed site menu (~75px) when jumping to a section */
.cs-anchor{scroll-margin-top:95px;}

/* At a glance — page summary bullets + stats combined into one module.
   Heading uses native heading-3. Stats sit inside, 2-up, with one divider. */
.cs-inshort{background:var(--cs-wash);border-radius:16px;padding:40px;}
.cs-inshort ul{margin:0;padding-left:20px;}
.cs-inshort li{margin-bottom:10px;max-width:74ch;}
.cs-inshort li:last-child{margin-bottom:0;}
.cs-inshort .cs-stats{
  grid-template-columns:repeat(2,1fr);gap:20px 40px;
  margin-top:40px;padding-top:40px;border-top:1px solid var(--cs-line);
}
.cs-inshort .cs-stat{border-top:none;padding-top:0;}
@media(max-width:600px){.cs-inshort .cs-stats{grid-template-columns:1fr;}}

/* Pull quote — uses the site's blockquote size ratio (1.25em) and body line-height */
.cs-quote{border-left:3px solid var(--cs-accent);padding:4px 0 4px 24px;margin:40px 0;max-width:60ch;}
.cs-quote p{
  font-family:'HKGrotesk-bold','Helvetica','Arial',sans-serif;
  font-size:1.375em;line-height:1.25;margin:0 0 10px;
}
.cs-quote cite{font-size:0.875em;line-height:1.25;color:var(--cs-ink-2);font-style:normal;}

/* Before / after flow — full-width banner block (white cards on wash).
   Headings use the site's native heading-3; body/list uses body copy rhythm
   (1em / 1.25 line-height = 20px baseline). Only colours are overridden. */
.cs-flow{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.cs-flow .col{background:var(--cs-paper);border-radius:16px;padding:40px;display:flex;flex-direction:column;}
.cs-flow .col.before h3{color:var(--cs-before);}
.cs-flow .col.after h3{color:var(--cs-after);}
/* numbered steps: bold number flush-left, aligned to the heading edge */
.cs-flow ol{list-style:none;margin:0;padding:0;counter-reset:step;font-size:1em;line-height:1.25;}
.cs-flow ol li{counter-increment:step;position:relative;padding-left:1.9em;margin-bottom:0.6em;}
.cs-flow ol li:before{
  content:counter(step)".";position:absolute;left:0;top:0;
  font-family:'HKGrotesk-bold','Helvetica','Arial',sans-serif;color:var(--cs-ink);
}
.cs-flow .time{
  margin-top:auto;padding-top:18px;border-top:1px solid var(--cs-line);
  font-size:1em;line-height:1.25;font-family:'HKGrotesk-bold','Helvetica','Arial',sans-serif;
}
@media(max-width:680px){.cs-flow{grid-template-columns:1fr;}}

/* Plain list (learnings, etc.) */
.cs-list{max-width:74ch;margin:0;padding-left:20px;}
.cs-list li{margin-bottom:12px;}

/* Sub-heading inside a section body (e.g. CCaaS "The pitch", "Belgium") */
.cs-subhead{
  font-family:'HKGrotesk-bold','Helvetica','Arial',sans-serif;
  font-size:1.125em;line-height:1.25;color:var(--cs-ink);margin:20px 0 8px;
}
.cs-subhead:first-child{margin-top:0;}

/* Visual-era gallery — 2-up image grid for the older, image-led case studies
   (e.g. Clarks). Sequenced, not captioned; sits inside a fluid-row col so it
   inherits the band spacing. Stacks to one column on narrow screens. */
.cs-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.cs-gallery img,.cs-gallery video{display:block;width:100%;height:auto;}
@media(max-width:680px){.cs-gallery{grid-template-columns:1fr;}}

/* Equation block (e.g. SSE "Measuring it" totals) */
.cs-eq{list-style:none;margin:0 0 16px;padding:0;max-width:66ch;}
.cs-eq li{display:flex;align-items:baseline;gap:10px;padding:4px 0;font-size:1em;line-height:1.25;}
.cs-eq .op{display:inline-block;width:0.8em;flex:0 0 auto;font-family:'HKGrotesk-bold','Helvetica','Arial',sans-serif;color:var(--cs-accent-text);}
.cs-eq b{font-family:'HKGrotesk-bold','Helvetica','Arial',sans-serif;font-weight:normal;font-size:1.375em;letter-spacing:-0.01em;}

/* Inline prose link (cross-links within body copy) */
.cs-inlink{color:var(--cs-accent-text);text-decoration:underline;text-underline-offset:2px;}
.cs-inlink:hover{text-decoration:none;}

/* Related / cross-link callout */
.cs-related{
  border:1px solid var(--cs-line);border-left:3px solid var(--cs-accent);
  border-radius:4px;padding:20px 24px;margin:20px 0 0;font-size:1em;line-height:1.25;max-width:66ch;
}
.cs-related b{font-family:'HKGrotesk-bold','Helvetica','Arial',sans-serif;font-weight:normal;}
.cs-related a{color:var(--cs-accent-text);text-decoration:none;font-family:'HKGrotesk-bold','Helvetica','Arial',sans-serif;}
.cs-related a:hover{text-decoration:underline;}

/* Password gate lock screen (php/gate.php) — public-safe header + blurred, fading
   placeholder + floating prompt. Non-scrollable. */
.cs-lock{position:relative;min-height:100vh;overflow:hidden;background:var(--cs-paper);}
/* the hero above uses the real .hero-img / .text-container / h1 / .cs-* classes */
/* blurred, fading preview of the body: lead banner + stat band + copy (placeholder, not real content) */
.cs-lock-preview{
  margin-top:36px;filter:blur(8px);opacity:0.9;pointer-events:none;user-select:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 40%,transparent 92%);
          mask-image:linear-gradient(to bottom,#000 0,#000 40%,transparent 92%);
}
.cs-lock-banner{height:300px;border-radius:6px;background:var(--cs-wash);background-size:cover;background-position:center top;margin-bottom:28px;}
.cs-lock-preview .p-line{height:16px;border-radius:6px;background:var(--cs-line);margin-bottom:16px;}
.cs-lock-preview .p-line.w-90{width:90%;}
.cs-lock-preview .p-line.w-80{width:80%;}
.cs-lock-preview .p-line.w-40{width:40%;}
.cs-lock-preview .p-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:26px 0 28px;}
.cs-lock-preview .p-stats span{height:56px;border-radius:6px;background:var(--cs-wash);border-top:2px solid var(--cs-line);}
/* floating prompt card */
.cs-lock-panel{
  position:fixed;left:50%;bottom:14vh;transform:translateX(-50%);
  width:calc(100% - 48px);max-width:460px;
  background:var(--cs-paper);border:1px solid var(--cs-line);border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,0.12);padding:26px 26px 24px;
}
.cs-lock-ask{font-family:'HKGrotesk-bold','Helvetica','Arial',sans-serif;font-size:1.125em;line-height:1.3;margin:0 0 16px;color:var(--cs-ink);}
.cs-lock-row{display:flex;gap:10px;flex-wrap:wrap;}
.cs-lock-input{flex:1 1 200px;padding:12px 14px;border:1px solid var(--cs-line);border-radius:8px;font-size:16px;font-family:'HKGrotesk-regular','Helvetica','Arial',sans-serif;color:var(--cs-ink);}
.cs-lock-input:focus{outline:none;border-color:var(--cs-accent);}
.cs-lock-btn{padding:12px 24px;border:0;border-radius:8px;background:var(--cs-accent-text);color:#fff;font-family:'HKGrotesk-bold','Helvetica','Arial',sans-serif;font-size:15px;cursor:pointer;}
.cs-lock-btn:hover{background:var(--cs-ink);}
.cs-lock-msg{color:#c0392b;font-size:0.875em;margin:14px 0 0;}

/* Placeholder banner (awaiting a real Miro/Figma export) */
.cs-banner--ph{background:transparent;border:2px dashed #d7d2ea;}
.cs-banner--ph .cs-ph-inner{text-align:center;padding:26px 0;}
.cs-banner--ph .l{font-family:'HKGrotesk-bold','Helvetica','Arial',sans-serif;color:var(--cs-ink-2);margin-bottom:4px;}
.cs-banner--ph .s{font-size:13px;color:var(--cs-ink-3);}

/* ==========================================================================
   CCP device animation (ccaas) — layered browser mock. The Contact Control
   Panel starts minimised, slides up on scroll into view (incoming call), holds,
   then crossfades to the connected state. All geometry/timing lives in the vars
   below. Background is a CSS gradient (no image). Reduced-motion + no-IO fall
   back to the connected resting state.
   ========================================================================== */
.cs-ccp{
  /* Window + CCP are both anchored to the BOTTOM of this gradient container, so
     nothing needs vertical calibration. The screen sits flush on the bottom (only
     side + top padding show blue); the dock pins to bottom:0. Only the dock's
     horizontal placement/width are tunable. */
  --ccp-pad-top:5.5%;             /* blue above the screen (% of width) */
  --ccp-pad-side:10.9%;           /* blue left/right of the screen */
  --ccp-dock-right:12.4%;         /* dock right edge inset from container right */
  --ccp-dock-w:23.1%;             /* dock width */
  --ccp-peek:91%;                 /* start: only the header sliver shows */
  --ccp-rise-dur:.25s; --ccp-rise-delay:.5s;   /* slide up: ease-in 0.25s, after 0.5s */
  --ccp-fade-delay:1.55s;         /* = rise-delay + rise-dur + 0.8s hold */
  --ccp-fade-dur:.3s;             /* incoming -> connected crossfade */
  position:relative; overflow:hidden;
  padding:var(--ccp-pad-top) var(--ccp-pad-side) 0;
  margin:36px 0;
  background:radial-gradient(130% 120% at 64% 32%, #98c2e6 0%, #8bb9e1 42%, #74abda 100%);
}
.cs-ccp img{display:block; max-width:none; width:100%; height:auto; -webkit-user-drag:none; user-select:none;}
.cs-ccp-screen{position:relative;}   /* in flow → defines height, sits flush on the bottom */
/* invisible sentinel on the bottom edge — the animation fires when THIS scrolls into view */
.cs-ccp-trigger{position:absolute; left:0; bottom:0; width:1px; height:1px; pointer-events:none;}
.cs-ccp-dock{position:absolute; right:var(--ccp-dock-right); bottom:0; width:var(--ccp-dock-w); overflow:hidden;}
.cs-ccp-lift{position:relative; transform:translateY(var(--ccp-peek)); will-change:transform;}
.cs-ccp-connected{position:absolute; inset:0; opacity:0;}
/* transitions on .is-in only → forward animates, reset (scroll-out) is instant */
.cs-ccp.is-in .cs-ccp-lift{transform:translateY(0);
  transition:transform var(--ccp-rise-dur) ease-in var(--ccp-rise-delay);}
.cs-ccp.is-in .cs-ccp-connected{opacity:1;
  transition:opacity var(--ccp-fade-dur) ease var(--ccp-fade-delay);}
@media (prefers-reduced-motion: reduce){
  .cs-ccp-lift{transition:none; transform:translateY(0);}
  .cs-ccp-connected{transition:none; opacity:1;}
}

/* ==========================================================================
   Knowledge Base sequence (ccaas) — four stacked, centred layers on a greener
   gradient. On scroll into view: crossfade to the button-hover state (2), hold,
   fade in the opened KB panel (3), hold, fade in the conversation (4). Reduced-
   motion + no-IO fall back to the final (4) state.
   ========================================================================== */
.cs-kb{
  --kb-pad-v:6%; --kb-pad-side:9%;      /* green margin all round → everything centred */
  --kb2-delay:0s;   --kb2-dur:.25s;     /* ease in to hover state (2) */
  --kb3-delay:.75s; --kb3-dur:.25s;     /* + 0.5s hold → opened KB panel (3) */
  --kb4-delay:2.4s; --kb4-dur:.2s;      /* conversation (4) fades in FIRST (by 2.6s)… */
  position:relative; overflow:hidden;
  padding:var(--kb-pad-v) var(--kb-pad-side);
  margin:0 0 36px;
  background:radial-gradient(130% 120% at 64% 32%, #93d3bf 0%, #74c2a6 42%, #4fa789 100%);
}
.cs-kb-stage{position:relative;}
.cs-kb img{display:block; max-width:none; width:100%; height:auto; -webkit-user-drag:none; user-select:none;}
.cs-kb-1{position:relative;}            /* base (default) in flow → sizes the stage */
.cs-kb-2,.cs-kb-3,.cs-kb-4{position:absolute; top:0; left:0; width:100%; height:auto; opacity:0; will-change:opacity;}
/* transitions live on .is-in so the forward sequence animates but the reset
   (scroll-out / re-arm) is instant — no staggered fade-out on screen */
.cs-kb.is-in .cs-kb-2{opacity:1; transition:opacity var(--kb2-dur) ease-in var(--kb2-delay);}
.cs-kb.is-in .cs-kb-4{opacity:1; transition:opacity var(--kb4-dur) ease-in var(--kb4-delay);}
/* kb-3 (opened panel) and kb-4 (conversation) each carry their own semi-transparent
   scrim over the page. If both stay visible the scrims stack and the final step reads
   too dark, so fade kb-3 back OUT exactly as kb-4 fades in — same panel geometry, so it
   crossfades to a single scrim. Timeline over 2.75s matches --kb3/--kb4 delay+dur:
   hidden → fade in ~.75–1.0s → hold → fade out ~2.5–2.75s (in lockstep with kb-4 in). */
.cs-kb.is-in .cs-kb-3{animation:cs-kb3-seq 2.75s linear forwards;}
@keyframes cs-kb3-seq{
  0%, 27%  {opacity:0;}
  36%, 95% {opacity:1;}   /* …hold panel (3) solid until conversation (4) is fully in (2.61s), */
  100%     {opacity:0;}   /* then drop it UNDER the now-opaque (4) — no bright base flashing through */
}
.cs-kb-trigger{position:absolute; left:0; bottom:0; width:1px; height:1px; pointer-events:none;}
@media (prefers-reduced-motion: reduce){
  .cs-kb-2,.cs-kb.is-in .cs-kb-2,
  .cs-kb-4,.cs-kb.is-in .cs-kb-4{opacity:1; transition:none;}
  .cs-kb-3,.cs-kb.is-in .cs-kb-3{opacity:0; animation:none; transition:none;}
}

/* Stack the two ccaas animations flush — no gap between account-home and KB */
.cs-ccp--flush-b{margin-bottom:0;}
.cs-kb--flush-t{margin-top:0;}

/* ==========================================================================
   Before/after comparison (ccaas — killing the iFrame). Two screens side by
   side, each with a live-text pill label using the before/after tokens.
   Stacks to one column on narrow screens.
   ========================================================================== */
.cs-compare{display:grid; grid-template-columns:1fr 1fr; gap:2%; margin:0 0 36px;
  padding:0 2%; box-sizing:border-box;}   /* match the middle gap on the L/R so the pair is framed */
.cs-compare-item{position:relative; margin:0;}
.cs-compare-item img{display:block; width:100%; height:auto;}
.cs-compare-label{
  position:absolute; top:6%; left:6%; z-index:6;   /* sit above the fluid-stretch WebGL canvas (z-index 5), which hides the real <img> */
  font-family:'HKGrotesk-regular','Helvetica','Arial',sans-serif;
  font-size:16px; line-height:1; color:#fff;
  padding:.5em .85em; border-radius:999px; white-space:nowrap;
}
.cs-compare-item--before .cs-compare-label{background:var(--cs-before);}
.cs-compare-item--after  .cs-compare-label{background:var(--cs-after);}
@media (max-width:680px){ .cs-compare{grid-template-columns:1fr; gap:14px;} }

/* ==========================================================================
   Card-scenarios matrix (ccaas — the card system). Labelled rows by card type,
   each showing its state variants. Card size scales with the 3:2 frame via
   container units; row (vertical) spacing is double the card (horizontal) gap.
   ========================================================================== */
.cs-cardmatrix{
  --cm-gap:10px;                          /* horizontal gap between cards */
  container-type:size;
  position:relative; width:100%; aspect-ratio:3/2; overflow:hidden;
  box-sizing:border-box; margin:0 0 36px; padding:4cqh 3.5cqw;
  display:flex; flex-direction:column; justify-content:center;
  gap:calc(var(--cm-gap) * 2);            /* rows: double the card gap */
  background:radial-gradient(130% 120% at 64% 32%, #ece7f4 0%, #dcd4ec 45%, #c3b8de 100%);
}
.cs-cardmatrix-row{display:flex; align-items:flex-start; gap:var(--cm-gap);}  /* top-aligned */
.cs-cardmatrix-label{flex:0 0 12%; text-align:right; line-height:1.2; padding-top:2px;
  font-family:'HKGrotesk-bold','Helvetica','Arial',sans-serif;
  font-size:clamp(11px, 1.4cqw, 18px); color:#4a4460;}
.cs-cardmatrix-cards{display:flex; align-items:flex-start; gap:var(--cm-gap); flex:1; min-width:0;}
.cs-cardmatrix-cards img{height:11cqh; width:auto; display:block;
  filter:drop-shadow(0 4px 12px rgba(30,20,60,.12));}