/* Shared by the three inner pages (how-it-works, use-cases, case-studies). Motion: shared core (css/site-motion.css) + this page's own pieces.
   Builds on ../css/home.css?v=e4aa017aba (tokens, .sec/.wrap/.sec-head, .win, .fig, .chain, .sc, .mega, .marks, .btn). */

/* current page in the nav */
.nav ul a[aria-current="page"]{color:rgb(var(--ink))}

/* ---------- page hero: shorter than Home, centred, a quiet radial glow (the .hero-lift look) and no wave ---------- */
.phero{position:relative;min-height:max(64svh,520px);display:flex;align-items:center;justify-content:center;overflow:hidden;isolation:isolate;padding:calc(var(--nav) + 40px) 0 72px}
.phero .hero-field{position:absolute;inset:0;z-index:-2;pointer-events:none}
.phero::after{content:"";position:absolute;inset:auto 0 0 0;height:140px;z-index:-1;background:linear-gradient(rgb(var(--bg)/0),rgb(var(--bg)));pointer-events:none}
.phero .hero-stack h1{max-width:920px}
.phero .hero-stack .sub{max-width:640px}


/* shared bits */
.sec-head p,.sub,.cs-body,.cs-line{text-wrap:pretty}
.centre-src{margin-top:28px;text-align:center}
.sec-head .eyebrow{margin-bottom:0}
@media (max-width:760px){
  footer nav{gap:12px 20px;font-size:14px}
  .phero{min-height:auto;padding:calc(var(--nav) + 48px) 0 56px}
}
@media (max-width:420px){
  .phero .hero-stack .eyebrow{letter-spacing:.14em;font-size:11px;gap:10px}
  .phero .hero-stack .eyebrow::before,.phero .hero-stack .eyebrow::after{width:16px}
}


/* ================= CASE STUDIES =================
   Four clients, each a full-width band with its own colour wash, told the same short way: logo + headline, what we made beside the film
   (or a quote plate where there is no film) with the figures under the copy, then the client's own words. FutureSafe adds the full Trustpilot review.
   Stories 02 and 04 flip so the page zig-zags. */
.sec-head p:not(.eyebrow){max-width:720px}

/* hero: the four stories as a row of chips */
.cs-chips{margin-top:48px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;width:min(1080px,100%);margin-inline:auto;text-align:left}
.cs-chip{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:var(--r1);border:1px solid rgb(var(--c)/.4);text-decoration:none;
  background:linear-gradient(180deg,rgb(var(--c)/.16),rgb(var(--s1)/.7))}
.cs-chip span{font:700 11px/1 Inter,sans-serif;letter-spacing:.16em;color:rgb(var(--muted))}
.cs-chip b{font:800 20px/1.1 Cabinet,sans-serif;letter-spacing:-.02em;color:rgb(var(--ink))}
.cs-chip small{font-size:13px;line-height:1.35;color:rgb(var(--body))}
.cs-chip.lift::after{box-shadow:inset 0 0 0 1px rgb(var(--c)/.8),0 14px 40px -8px rgb(0 0 0/.6),0 0 28px -4px rgb(var(--c)/.35)}
.cs-chip:focus-visible{border-color:rgb(var(--c)/.8)}

/* one story = one band with its own wash */
.cs{overflow-x:clip;border-top:1px solid rgb(var(--line)/.7);padding-block:clamp(64px,7vw,104px);scroll-margin-top:calc(var(--nav) - 1px);
  background:radial-gradient(70% 520px at 50% 0,rgb(var(--c)/.2),transparent 70%),linear-gradient(180deg,rgb(var(--c)/.07),transparent 55%)}
.cs .wrap{display:flex;flex-direction:column;align-items:center;gap:clamp(48px,5vw,72px)}
.cs .wrap>*{width:100%}
.hl{color:rgb(var(--c))}
/* the highlighted phrase in a story head gets an underline that draws in 900ms, 350ms after the head arrives */
.cs-head .hl{position:relative;display:inline-block}
.cs-head .hl::after{content:"";position:absolute;left:0;right:0;bottom:-.04em;height:.055em;border-radius:3px;background:rgb(var(--c));transform-origin:left center;transition:transform .9s var(--m-ease) .35s}
html.js.ssm .cs-head:not(.is-in) .hl::after{transform:scaleX(0);transition:none}
.cs-k{display:flex;align-items:center;gap:10px;font:700 12px/1.3 Inter,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:rgb(var(--muted))}
.cs-k::before{content:"";width:6px;height:6px;border-radius:50%;background:rgb(var(--c))}

.cs-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.cs-story{display:flex;align-items:center;gap:14px;font:600 12px/1 Inter,sans-serif;letter-spacing:.06em;color:rgb(var(--muted))}
.cs-logo{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;border:1px solid rgb(var(--c)/.55);background:rgb(var(--bg)/.55)}
.cs-logo img{height:20px;width:auto;max-width:110px;object-fit:contain;filter:brightness(0) invert(1);opacity:.95}
.cs-logo.txt{font:700 13px/1 Inter,sans-serif;letter-spacing:0;color:rgb(var(--ink))}
.cs-head h2{max-width:960px;font-size:clamp(38px,4.8vw,76px);line-height:1;letter-spacing:-.04em}
.cs-body{max-width:700px;font-size:clamp(16px,1.3vw,19px);line-height:1.6;color:rgb(var(--body))}
.cs-tags{font-size:13px;color:rgb(var(--faint))}

/* what we made (copy and figures left, film right) */
.cs-b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:40px clamp(40px,6vw,88px);align-items:center}
.cs-copy{display:flex;flex-direction:column;gap:18px;align-items:flex-start;text-align:left}
.cs-copy h3{font-size:clamp(28px,3vw,46px);line-height:1.04;letter-spacing:-.035em}
.cs-copy>p:not(.cs-k){font-size:clamp(16px,1.25vw,18px);line-height:1.55;color:rgb(var(--muted));max-width:36ch}
.cs-media{position:relative;margin:0;aspect-ratio:16/9;border-radius:var(--r2);overflow:hidden;background:rgb(var(--s1));border:1px solid rgb(var(--c)/.5);
  box-shadow:0 50px 100px -50px rgb(var(--c)/.6),0 30px 70px -40px rgb(0 0 0/.8)}
.cs-media video,.cs-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-poster{z-index:1;opacity:1;transition:opacity .3s var(--m-ease)}
.cs-media.playing .cs-poster{opacity:0;transition-duration:.6s}
.cs-hit{position:absolute;inset:0;z-index:2;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}
.cs-media .film-play::before{content:"";position:absolute;border-left:17px solid rgb(var(--ink));border-top:12px solid transparent;border-bottom:12px solid transparent}
.cs-media .film-play{position:absolute;left:50%;top:50%;right:auto;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgb(var(--bg)/.62);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgb(var(--ink)/.45)}
.cs-media .film-play::before{left:26px;top:20px}
.cs-media .film-play,.cs-media figcaption{transition:opacity .3s var(--m-ease),transform .3s var(--m-ease)}
.cs-media.playing .film-play{opacity:0;transform:scale(.9)}
.cs-media.playing figcaption{opacity:0}
/* "Tap for sound": only while it plays muted on its own */
.cs-snd{position:absolute;right:14px;bottom:14px;padding:8px 12px;border-radius:999px;font:600 12px/1 Inter,sans-serif;color:rgb(var(--ink));background:rgb(var(--bg)/.7);box-shadow:inset 0 0 0 1px rgb(var(--ink)/.3);opacity:0;pointer-events:none;transition:opacity .3s var(--m-ease)}
.cs-media.playing:not(.sound) .cs-snd{opacity:1;transition-delay:.6s}
.cs-media figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:30px 20px 14px;font:600 12px/1.3 Inter,sans-serif;color:rgb(var(--body));pointer-events:none;background:linear-gradient(transparent,rgb(var(--bg)/.85))}
/* quote plate (FutureSafe: no film, so their logo on brand ground with the founder's own words) */
.cs-plate{display:grid;place-items:center;background:radial-gradient(80% 90% at 50% 0,rgb(var(--c)/.28),transparent),rgb(var(--s1))}
.cs-plate-logo img{height:40px;width:auto;max-width:220px;filter:brightness(0) invert(1);opacity:.9}
.cs-plate-q{align-content:center;justify-items:center;gap:20px;padding:clamp(20px,4vw,48px) clamp(20px,5vw,56px);text-align:center}
.cs-plate-line{max-width:18ch;font:800 clamp(24px,2.8vw,42px)/1.12 Cabinet,sans-serif;letter-spacing:-.025em;color:rgb(var(--ink));text-wrap:balance}
.cs-media .cs-plate-by{position:static;padding:0;background:none;font:600 13px/1.4 Inter,sans-serif;color:rgb(var(--muted))}

@media (min-width:1001px){
  .cs-flip .cs-b{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .cs-flip .cs-b .cs-media{order:-1}
}

/* the figures sit under the copy, one row, divided by hairlines */
.cs-stats{width:100%;display:flex;flex-wrap:wrap;gap:22px 0;margin-top:10px}
.cs-stats li{flex:1 1 0;min-width:120px;padding:2px 16px;border-left:1px solid rgb(var(--line))}
.cs-stats li:first-child{padding-left:0;border-left:0}
.cs-stats b{display:block;font:800 clamp(30px,2.9vw,48px)/.95 Cabinet,sans-serif;letter-spacing:-.045em;color:rgb(var(--ink));white-space:nowrap}
.cs-stats span{display:block;margin-top:10px;font-size:14px;line-height:1.4;color:rgb(var(--body));max-width:20ch}

/* what we ran (FutureSafe): a short ruled list */
.cs-did{display:grid;gap:0;width:100%;margin-top:4px}
.cs-did li{display:grid;gap:3px;padding:14px 0 14px 20px;border-top:1px solid rgb(var(--line)/.8);position:relative}
.cs-did li:last-child{border-bottom:1px solid rgb(var(--line)/.8)}
.cs-did li::before{content:"";position:absolute;left:0;top:22px;width:7px;height:7px;border-radius:50%;background:rgb(var(--c))}
.cs-did b{font:700 17px/1.3 Inter,sans-serif;color:rgb(var(--ink))}
.cs-did span{font-size:15px;line-height:1.5;color:rgb(var(--muted))}

/* the client's words */
.cs-quote{position:relative;margin:0;width:min(1000px,100%);border-radius:var(--r2);padding:clamp(32px,4.5vw,64px);text-align:left;
  background:linear-gradient(180deg,rgb(var(--ink)/.95),rgb(var(--ink)/.86));color:rgb(var(--bg));overflow:hidden}
.cs .wrap>.cs-quote{width:min(1000px,100%)}
.cs-quote::before{content:"“";position:absolute;right:28px;top:6px;font:800 160px/1 Cabinet,sans-serif;color:rgb(var(--c)/.35);pointer-events:none}
.cs-quote p{position:relative;font:800 clamp(22px,2.4vw,34px)/1.2 Cabinet,sans-serif;letter-spacing:-.025em;color:rgb(var(--bg));text-wrap:balance}
.cs-quote cite{display:block;margin-top:24px;font:700 14px/1.4 Inter,sans-serif;font-style:normal;color:rgb(var(--bg)/.85)}

/* the full FutureSafe review: lead line, byline, then the whole text in two columns with the key lines marked */
.cs .wrap>.csr{width:min(1080px,100%)}
.csr{border-radius:var(--r2);border:1px solid rgb(var(--c)/.45);padding:clamp(28px,4.5vw,64px);
  background:linear-gradient(180deg,rgb(var(--c)/.12),rgb(var(--s1)/.82) 40%);scroll-margin-top:calc(var(--nav) + 16px)}
.csr-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.csr-date{font-size:13px;color:rgb(var(--faint))}
.csr-lead{margin-top:22px;max-width:22ch;font:800 clamp(32px,4.2vw,64px)/1.02 Cabinet,sans-serif;letter-spacing:-.04em;color:rgb(var(--ink));text-wrap:balance}
.csr-by{margin-top:20px;display:flex;gap:10px;align-items:baseline;font-size:15px;color:rgb(var(--muted))}
.csr-by b{color:rgb(var(--ink));font-weight:600}
.csr-by span::before{content:"·";margin-right:10px}
.csr-body{margin-top:clamp(28px,3.5vw,44px);padding-top:clamp(28px,3.5vw,44px);border-top:1px solid rgb(var(--line)/.8);columns:2 340px;column-gap:56px}
.csr-full{display:none}
html:not(.js) .csr-full,.csr.open .csr-full{display:block}
.csr.open .csr-best,html:not(.js) .csr-best{display:none}
.csr-body p{margin:0 0 18px;font-size:16.5px;line-height:1.65;color:rgb(var(--body))}
.csr-body mark{background:none;color:rgb(var(--ink));font-weight:600;box-shadow:inset 0 -.42em 0 rgb(var(--c)/.32)}
.csr-foot{margin-top:12px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-size:14px}
.csr-foot a{color:rgb(var(--ink));text-underline-offset:4px}
.csr-more{display:none}
html.js .csr-more{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgb(var(--c)/.6);background:rgb(var(--c)/.14);color:rgb(var(--ink));font:600 14px/1 Inter,sans-serif;cursor:pointer;transition:transform .16s var(--m-ease)}
html.js .csr-more:active{transform:scale(.97)}
html.js .csr.open .csr-more{display:none}

/* more voices */
.csv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:1080px;margin-inline:auto}
.csv li{display:flex;flex-direction:column;gap:14px;padding:28px 26px;border-radius:var(--r2);border:1px solid rgb(var(--line-br)/.55);background:rgb(var(--s1)/.6)}
.csv p{font:700 clamp(19px,1.6vw,23px)/1.3 Cabinet,sans-serif;letter-spacing:-.015em;color:rgb(var(--ink));text-wrap:pretty}
.csv cite{margin-top:auto;display:grid;gap:3px;font-style:normal;font-size:13.5px;line-height:1.4;color:rgb(var(--muted))}
.csv cite b{font-weight:600;color:rgb(var(--ink))}
.csv + .src a{color:rgb(var(--body));text-underline-offset:4px}

/* across every client */
.cs-watch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:880px;margin-inline:auto}
.cs-watch li{text-align:center;border-radius:var(--r2);border:1px solid rgb(var(--c)/.4);padding:40px 28px;background:linear-gradient(180deg,rgb(var(--c)/.15),rgb(var(--s1)/.72) 62%)}
.cs-watch li>b{display:block;font:800 clamp(64px,8vw,112px)/.9 Cabinet,sans-serif;letter-spacing:-.055em;color:rgb(var(--ink));white-space:nowrap}
.cs-watch li>b small{font-size:.4em;letter-spacing:-.02em}
.cs-watch span{display:block;margin:16px auto 14px;max-width:28ch;font-size:16px;line-height:1.45;color:rgb(var(--body))}
.denom{max-width:760px;margin-inline:auto}
.cs-watch + .denom{margin-top:28px}
#voices{padding-bottom:0}
#figures + .closer{padding-top:0}
.marks{margin-top:88px}

@media (max-width:1000px){
  .cs-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-b{grid-template-columns:1fr;gap:32px}
  .cs-media .film-play{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(var(--bg)/.78)}
  .cs-copy{align-items:center;text-align:center}
  .cs-copy>p:not(.cs-k){max-width:46ch}
  .cs-stats{justify-content:center}
  .cs-stats li{flex:0 1 auto;padding-inline:22px}
  .cs-stats li:first-child{padding-left:22px}
  .cs-stats span{margin-inline:auto}
  .cs-did{max-width:560px;text-align:left}
  .csv{grid-template-columns:1fr;max-width:620px}
}
@media (max-width:760px){
  .cs-chips{margin-top:36px}
  .cs-stats{gap:20px 0}
  .cs-stats li{min-width:0;flex:1 1 40%;padding-inline:12px}
  .cs-stats li:first-child{padding-left:12px}
  .cs-stats li:nth-child(odd){border-left:0}
  .cs-stats li:nth-child(3):last-child{flex-basis:100%}
  .cs-stats b{font-size:clamp(32px,9vw,44px)}
  .cs-quote{padding:64px 22px 28px}
  .cs-quote::before{font-size:110px;right:14px;top:6px}
  .csr{padding:26px 20px}
  .csr-body{columns:auto}
  .csr-body p{font-size:16px}
  /* on a phone the first three paragraphs show; the rest opens on a tap */
  .cs-watch{grid-template-columns:1fr}
  .marks{margin-top:64px}
}
@media (max-width:420px){
  .cs-chips{gap:10px}
  .cs-chip{padding:14px 14px}
  .cs-chip b{font-size:18px}
  .cs-head h2{font-size:38px}
}