/* ────────────────────────────────────────────────────────────────
   Castle Light - the shared chrome.
   Castle navy on white paper, Castle blue as the single accent,
   Fraunces / Hanken / Jost. These pages mock up live castle.co.uk
   pages, so they commit to the light world and paint every colour
   explicitly rather than inheriting a host theme.
   ──────────────────────────────────────────────────────────────── */
:root{
  color-scheme:light;

  --paper:      #FFFFFF;
  --paper-2:    #F2F5F8;
  --ink:        #06243C;   /* Castle navy */
  --ink-2:      #0B3453;
  --muted:      #5C7488;
  --muted-2:    #93A5B4;
  --line:       #DEE6ED;
  --line-2:     #EDF1F5;
  --accent:     #1C70EE;   /* Castle blue */
  --accent-dk:  #0F55C4;
  --night:      #050506;
  --night-ink:  #F4F7FA;
  --night-mute: #97A3AD;

  --f-display: "Fraunces", "Juana", Georgia, serif;
  --f-body:    "Hanken Grotesk", "Avenir", "Segoe UI", system-ui, sans-serif;
  --f-util:    "Jost", "Avenir", system-ui, sans-serif;

  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1180px;
  --measure: 68ch;
  --barh: 72px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;background:var(--paper)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-weight:300;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
img{max-width:100%;display:block}

h1,h2,h3{font-family:var(--f-display);font-weight:300;text-wrap:balance;margin:0;letter-spacing:-0.015em;color:var(--ink)}
h1{font-size:clamp(2.3rem,6vw,4.6rem);line-height:1.04}
h2{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.12}
h3{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.3}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.eyebrow{
  font-family:var(--f-util);font-size:.72rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2);margin:0;
}
.lede{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--muted)}

.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--f-util);font-size:.84rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:1em 1.9em;border:1px solid transparent;border-radius:2px;
  text-decoration:none;cursor:pointer;background:none;color:var(--ink);
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dk);border-color:var(--accent-dk)}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-light{border-color:rgba(244,247,250,.32);color:var(--night-ink)}
.btn-light:hover{border-color:var(--night-ink);background:rgba(244,247,250,.08)}

/* ── header ─────────────────────────────────────────────────── */
header{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:16px}
.logo{display:block;height:100%;width:100%}
.mark{display:block;text-decoration:none;color:var(--ink);width:clamp(100px,10.5vw,128px);aspect-ratio:69.94/12.45}
nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
nav a{font-family:var(--f-util);font-size:.82rem;letter-spacing:.06em;text-decoration:none;color:var(--muted);transition:color .2s ease}
nav a:hover{color:var(--ink)}
nav a[aria-current="page"]{color:var(--ink)}
nav a[aria-current="page"]::after{content:"";display:block;height:1px;background:var(--accent);margin-top:5px}
.bar .btn{padding:.72em 1.3em;font-size:.74rem}
/* the site shell adds the hamburger below this width */
@media (max-width:900px){ .bar nav{display:none} }

/* ── masthead ───────────────────────────────────────────────── */
.masthead{padding-top:calc(var(--barh) + clamp(44px,6.5vw,88px));padding-bottom:clamp(30px,3.6vw,46px)}
.masthead .inner{display:grid;gap:clamp(16px,2vw,24px)}
.masthead h1{max-width:20ch}
.masthead .lede{max-width:58ch}
.crumb{
  font-family:var(--f-util);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);text-decoration:none;display:inline-flex;gap:.6em;align-items:center;
  transition:color .2s ease;margin-bottom:22px;
}
.crumb:hover{color:var(--accent)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.tag{
  font-family:var(--f-util);font-size:.72rem;letter-spacing:.06em;
  border:1px solid var(--line);border-radius:999px;color:var(--muted);padding:.42em .95em;
}

.keyfigs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.5vw,34px);
  margin-top:clamp(30px,3.5vw,44px);padding-top:24px;border-top:1px solid var(--line);
}
.kf{display:grid;gap:3px}
.kf b{
  font-family:var(--f-display);font-weight:400;font-size:clamp(1.55rem,3vw,2.5rem);
  line-height:1;color:var(--ink);letter-spacing:-0.02em;font-variant-numeric:tabular-nums;
}
.kf span{font-family:var(--f-util);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);line-height:1.5}
@media (max-width:760px){ .keyfigs{grid-template-columns:1fr 1fr;gap:22px} }

/* ── bands ──────────────────────────────────────────────────── */
.band{padding-block:clamp(46px,6.2vw,84px)}
.band.tint{background:var(--paper-2);border-block:1px solid var(--line)}
.head{display:grid;gap:11px;max-width:60ch;margin-bottom:clamp(26px,3.2vw,42px)}
.head .eyebrow{color:var(--accent)}
.prose{display:grid;gap:1.05em;max-width:var(--measure)}
.prose p{color:var(--ink-2);font-size:1.04rem}
.prose ul{margin:0;padding-left:1.15em;display:grid;gap:.5em;color:var(--ink-2)}

/* ── close band ─────────────────────────────────────────────── */
.close{background:var(--night);color:var(--night-ink)}
.close-in{display:grid;grid-template-columns:1.2fr auto;gap:clamp(24px,4vw,60px);align-items:center;padding-block:clamp(52px,7vw,92px)}
.close h2{color:#fff;max-width:26ch;margin-top:14px}
.close p{color:var(--night-mute);margin-top:16px;max-width:48ch}
.close .eyebrow{color:rgba(244,247,250,.5)}
@media (max-width:760px){ .close-in{grid-template-columns:1fr} }

/* ── footer ─────────────────────────────────────────────────── */
footer{background:var(--night);color:var(--night-mute);border-top:1px solid #14181C}
footer .wrap{padding-block:clamp(44px,5vw,68px) 30px}
/* brand block plus four link columns, the last of which is Legal */
.fgrid{display:grid;grid-template-columns:1.25fr repeat(4,1fr);gap:clamp(22px,2.6vw,38px)}
@media (max-width:1040px){ .fgrid{grid-template-columns:1fr 1fr 1fr} }
footer .mark{color:var(--night-ink)}
footer h4{font-family:var(--f-util);font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--night-ink);margin:0 0 14px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer a{color:var(--night-mute);text-decoration:none;font-size:.92rem;transition:color .2s ease}
footer a:hover{color:var(--night-ink)}
.fnote{font-size:.92rem;display:grid;gap:6px;margin-top:18px}
/* the social row - present on every footer */
.socials{display:flex;gap:10px;margin-top:20px}
.socials a{
  width:38px;height:38px;border:1px solid #1B2027;border-radius:999px;
  display:grid;place-items:center;color:var(--night-mute);
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.socials a:hover{color:#fff;border-color:var(--night-mute);background:#12161B}
.socials svg{width:16px;height:16px;display:block;fill:currentColor}
.legal{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px;margin-top:clamp(34px,4vw,52px);
  padding-top:22px;border-top:1px solid #16191D;
  font-family:var(--f-util);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#6C7A85;
}
/* the four policies: one canonical group, pushed to the end of the strip on
   wide screens and wrapping underneath on narrow ones */
.legal-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-left:auto}
.legal-links a{color:#6C7A85;text-decoration:none;transition:color .2s ease}
.legal-links a:hover{color:var(--night-ink)}
/* on a phone the strip stacks, and the links get enough vertical padding to
   be a real tap target rather than a 24px sliver */
@media (max-width:760px){
  .legal-links{margin-left:0;gap:0 18px}
  .legal-links a{padding-block:9px}
}
@media (max-width:760px){ .fgrid{grid-template-columns:1fr 1fr} }

/* ── one motion device, shared across the site ──────────────── */
.rise{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){ .rise{opacity:1;transform:none;transition:none} }

/* ── service page components ────────────────────────────────────────
   Built on the shared Castle Light chrome. Each component below earns
   its place from the content: a results table where the source page
   publishes campaign metrics, portrait story cards where it publishes
   client work, an accordion only where there is a real FAQ. */

/* ── full-bleed banner masthead ─────────────────────────────────────
   The homepage composition, reused: artwork edge to edge with the copy
   sitting on it, and a scrim weighted to the left so the words land on
   darkness while the light break stays visible on the right. The section
   itself is unconstrained; only the .wrap inside holds the measure. */
.banner{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(560px, 80svh, 770px);
  display:grid;align-items:end;
  background:var(--night);
}
.banner-bg{position:absolute;inset:0;z-index:-2}
.banner-bg img{
  width:100%;height:100%;
  object-fit:cover;object-position:50% 46%;
  display:block;
}
/* The falloff has to clear the copy before it reaches the light break, or
   the end of each line lands on the brightest part of the frame. */
.banner-scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(5,5,6,.92) 0%, rgba(5,5,6,.80) 34%, rgba(5,5,6,.42) 58%, rgba(5,5,6,.04) 84%, rgba(5,5,6,0) 100%),
    linear-gradient(to top, rgba(5,5,6,.76) 0%, rgba(5,5,6,0) 50%);
}
/* for artwork that is bright where the copy lands: a deeper left wash and
   a taller floor, so the words keep their contrast without flattening the
   whole frame */
.banner.heavy .banner-scrim{
  background:
    linear-gradient(100deg, rgba(5,5,6,.94) 0%, rgba(5,5,6,.88) 38%, rgba(5,5,6,.66) 62%, rgba(5,5,6,.30) 86%, rgba(5,5,6,.16) 100%),
    linear-gradient(to top, rgba(5,5,6,.82) 0%, rgba(5,5,6,.10) 62%);
}
@media (max-width:700px){
  .banner.heavy .banner-scrim{background:linear-gradient(to top, rgba(5,5,6,.92) 0%, rgba(5,5,6,.60) 52%, rgba(5,5,6,.46) 100%)}
}
.banner-in{padding-block:calc(var(--barh) + clamp(56px,6vw,86px)) clamp(76px,8.6vw,120px);display:grid;gap:clamp(19px,2.4vw,30px)}
.banner-in > div{display:grid;gap:clamp(15px,1.9vw,24px);justify-items:start}
.banner .eyebrow{color:rgba(244,247,250,.66)}
.banner h1{color:#fff;max-width:18ch;margin:0;line-height:1.06;text-shadow:0 1px 24px rgba(5,5,6,.45)}
/* held short so the line ends stay on the dark side of the frame */
.banner .lede{color:#CFD7DE;max-width:44ch;margin:0;line-height:1.62;text-shadow:0 1px 18px rgba(5,5,6,.5)}
.banner .tag{border-color:rgba(244,247,250,.30);color:rgba(244,247,250,.84)}
.banner .tags,.banner .pills{margin-top:clamp(8px,1.2vw,14px)}
.banner .keyfigs{border-top-color:rgba(244,247,250,.22);margin-top:clamp(34px,4vw,50px);padding-top:clamp(24px,2.6vw,30px);row-gap:22px}
.banner .kf b{color:#fff}
.banner .kf span{color:rgba(244,247,250,.58)}
@media (max-width:700px){
  /* on a phone the beam is off-frame at this crop, so pull the focus in
     and lean on the vertical scrim instead of the diagonal one */
  .banner{min-height:clamp(520px,76svh,650px)}
  .banner-in{padding-block:calc(var(--barh) + 44px) 60px;gap:18px}
  .banner .keyfigs{margin-top:32px;row-gap:20px}
  .banner-bg img{object-position:62% 46%}
  .banner-scrim{background:linear-gradient(to top, rgba(5,5,6,.86) 0%, rgba(5,5,6,.42) 52%, rgba(5,5,6,.30) 100%)}
}

/* the split hero: claim on the left, the page's own artwork on the right */
.shero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,64px);align-items:center}
@media (max-width:900px){ .shero{grid-template-columns:1fr} }
.shero-art{
  border-radius:4px;overflow:hidden;background:var(--paper-2);
  box-shadow:0 1px 2px rgba(6,36,60,.06), 0 22px 46px -26px rgba(6,36,60,.32);
}
.shero-art img,.shero-art video{width:100%;height:auto;display:block}
/* the ChatGPT hero clip is a portrait phone recording, so it is capped
   rather than allowed to run the full column height */
.shero-art.tall{max-width:330px;margin-inline:auto;border-radius:22px}

/* ── in-body artwork ────────────────────────────────────────────────
   Bounded on BOTH axes and never upscaled, the same rule the case study
   template uses. Without a height ceiling a squarish screenshot fills the
   whole viewport: the ChatGPT ad mockup is 1200x1126, which rendered
   967x907 before this. Scoped to `figure img` so the full-bleed banner
   and the cover-cropped card art are untouched. */
figure{margin-block:clamp(30px,3.6vw,48px);margin-inline:0;display:grid;gap:11px;justify-items:center}
figure img{
  width:auto;height:auto;
  max-width:100%;max-height:clamp(300px,52svh,540px);
  display:block;
}
figcaption{
  font-family:var(--f-util);font-size:.72rem;line-height:1.5;letter-spacing:.04em;
  color:var(--muted-2);max-width:64ch;text-align:center;
}
/* the split hero art gets the same protection, so a portrait image on a
   future service page cannot run away either */
.shero-art img{max-height:clamp(280px,58svh,560px);width:auto;margin-inline:auto}
.shero-art.tall img{max-height:clamp(320px,62svh,620px)}

/* a metric table - used where the source page publishes campaign numbers */
.metrics{overflow-x:auto;border:1px solid var(--line);border-radius:4px;background:var(--paper)}
.metrics table{border-collapse:collapse;width:100%;min-width:620px}
.metrics th,.metrics td{text-align:left;padding:14px clamp(12px,1.4vw,18px);border-bottom:1px solid var(--line)}
.metrics thead th{
  background:var(--paper-2);color:var(--muted-2);font-weight:500;
  font-family:var(--f-util);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
}
.metrics tbody th{
  font-family:var(--f-body);font-weight:400;font-size:1rem;color:var(--ink);
}
.metrics tbody td{
  font-family:var(--f-display);font-weight:400;font-size:1.15rem;color:var(--ink);
  letter-spacing:-0.01em;font-variant-numeric:tabular-nums;
}
.metrics tbody td.lead{color:var(--accent)}
.metrics tbody tr:last-child th,.metrics tbody tr:last-child td{border-bottom:0}

/* sector / capability chips - a plain list, not controls */
.pills{display:flex;flex-wrap:wrap;gap:9px}
.pills span{
  font-family:var(--f-util);font-size:.78rem;letter-spacing:.04em;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:.5em 1em;background:var(--paper);
}

/* the capability grid */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,36px)}
@media (max-width:900px){ .feats{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .feats{grid-template-columns:1fr} }
.feat{display:grid;gap:9px;align-content:start;padding-top:20px;border-top:2px solid var(--ink)}
.feat h3{font-size:1.12rem}
.feat p{color:var(--muted);font-size:.97rem;line-height:1.6}

/* client result cards: logo, the numbers, what we did, the client's art */
.results{display:grid;gap:clamp(22px,2.8vw,38px)}
.result{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,44px);align-items:center;
  border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--paper);
}
.result:nth-child(even) .result-art{order:-1}
@media (max-width:820px){ .result{grid-template-columns:1fr} .result:nth-child(even) .result-art{order:0} }
.result-body{padding:clamp(22px,2.6vw,34px);display:grid;gap:14px}
.result-logo{height:30px;width:auto;max-width:150px;object-fit:contain}
.result-body h3{font-size:1.3rem}
.result-body p{color:var(--muted);font-size:.98rem;line-height:1.6}
.result-art{background:var(--paper-2);align-self:stretch;min-height:220px}
.result-art img{width:100%;height:100%;object-fit:cover}
.figs{display:flex;flex-wrap:wrap;gap:14px 30px;margin-top:2px}
.fig{display:grid;gap:1px}
.fig b{
  font-family:var(--f-display);font-weight:400;font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1;
  color:var(--accent);letter-spacing:-0.02em;font-variant-numeric:tabular-nums;
}
.fig span{font-family:var(--f-util);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2)}

/* portrait story cards */
.stories{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px)}
@media (max-width:900px){ .stories{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .stories{grid-template-columns:1fr} }
.story{
  display:grid;gap:0;text-decoration:none;border-radius:4px;overflow:hidden;background:var(--paper);
  box-shadow:0 1px 2px rgba(6,36,60,.06), 0 12px 26px -18px rgba(6,36,60,.26);
  transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
}
.story:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(6,36,60,.07), 0 22px 42px -22px rgba(6,36,60,.3)}
.story-shot{aspect-ratio:3/4;overflow:hidden;background:var(--paper-2)}
.story-shot img{width:100%;height:100%;object-fit:cover}
.story-cap{padding:15px 17px 18px;display:grid;gap:5px}
.story-cap b{font-family:var(--f-display);font-weight:400;font-size:1.06rem;color:var(--ink)}
.story:hover .story-cap b{color:var(--accent)}
.story-cap span{font-family:var(--f-util);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}

/* copy and film side by side. The prose keeps its own measure, so the
   column is sized from the text rather than split down the middle, and
   the video sticks to the top of its column when the copy runs long. */
.withvid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.82fr);
  gap:clamp(28px,4vw,60px);align-items:start;
}
.withvid .prose{max-width:none}
.withvid .vid-solo{max-width:none;width:100%;position:sticky;top:calc(var(--barh) + 24px)}
@media (max-width:900px){
  .withvid{grid-template-columns:1fr;gap:clamp(26px,4vw,38px)}
  .withvid .vid-solo{position:static;max-width:560px}
}

/* video: the site's YouTube clips in a player frame showing each video's
   own thumbnail. The artifact CSP blocks third-party iframes, so the
   frame is a link out to YouTube rather than an embedded player - but it
   now looks like the video it is, which a bare link card did not. */
.vid-shot{
  position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  background:#0A0E12;border-bottom:1px solid var(--line-2);
}
.vid-shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1), filter .3s ease}
.vid:hover .vid-shot img{transform:scale(1.03);filter:brightness(.92)}
.vid-shot::after{  /* a soft floor so the caption below reads as one piece */
  content:"";position:absolute;inset:auto 0 0 0;height:38%;
  background:linear-gradient(to top, rgba(5,5,6,.42), rgba(5,5,6,0));
}
.vid-btn{
  position:absolute;inset:0;margin:auto;width:62px;height:62px;border-radius:999px;
  display:grid;place-items:center;background:rgba(5,5,6,.55);
  border:1px solid rgba(255,255,255,.34);
  transition:background .25s ease, border-color .25s ease, transform .3s ease;
}
.vid-btn::after{content:"";width:0;height:0;border-left:15px solid #fff;
  border-block:9px solid transparent;margin-left:4px}
.vid:hover .vid-btn{background:#E2B266;border-color:#E2B266;transform:scale(1.06)}
.vid:hover .vid-btn::after{border-left-color:#3A2708}
@media (max-width:520px){
  .vid-btn{width:52px;height:52px}
  .vid-btn::after{border-left-width:13px;border-block-width:8px}
}
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,30px)}
@media (max-width:860px){ .vids{grid-template-columns:1fr} }
.vid{
  display:grid;gap:0;text-decoration:none;border:1px solid var(--line);border-radius:4px;
  background:var(--paper);overflow:hidden;transition:border-color .25s ease, transform .35s cubic-bezier(.2,.7,.3,1);
}
.vid:hover{border-color:#E2B266;transform:translateY(-3px)}
.vid-top{display:flex;align-items:center;gap:14px;padding:clamp(18px,2vw,24px)}
.vid-av{width:52px;height:52px;border-radius:999px;overflow:hidden;background:var(--paper-2);flex:none}
.vid-av img{width:100%;height:100%;object-fit:cover}
.vid-who{display:grid;gap:2px}
.vid-who b{font-family:var(--f-body);font-weight:400;font-size:1rem;color:var(--ink)}
.vid-who span{font-family:var(--f-util);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.vid-foot{
  display:flex;align-items:center;gap:.6em;
  padding:12px clamp(18px,2vw,24px) clamp(16px,1.8vw,20px);
  border-top:1px solid var(--line-2);
  font-family:var(--f-util);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#8A5F16;
}
.play{width:20px;height:20px;border-radius:999px;background:#E2B266;display:grid;place-items:center;flex:none}
.play::after{content:"";width:0;height:0;border-left:6px solid #3A2708;border-block:4px solid transparent;margin-left:2px}

/* a single feature video card, full width */
.vid-solo{max-width:640px}

/* process: a real ordered sequence */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,24px);counter-reset:s}
@media (max-width:900px){ .flow{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .flow{grid-template-columns:1fr} }
.flow div{
  counter-increment:s;padding:16px 0 0;border-top:1px solid var(--line);
  font-family:var(--f-body);font-size:.99rem;color:var(--ink);display:grid;gap:6px;
}
.flow div::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--f-util);font-size:.68rem;letter-spacing:.16em;color:var(--accent);
}

/* FAQ - only on the page that publishes one */
.faq{display:grid;gap:0;max-width:var(--measure)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font-family:var(--f-display);font-weight:400;font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:8px;height:8px;
  border-right:1px solid var(--muted);border-bottom:1px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq summary:hover{color:var(--accent)}
.faq .ans{padding:0 0 22px;color:var(--ink-2);font-size:1.01rem;max-width:62ch}

/* a client logo strip */
.strip{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(22px,3vw,48px)}
.strip img{height:30px;width:auto;filter:grayscale(1);opacity:.55;transition:filter .3s ease, opacity .3s ease}
.strip img:hover{filter:none;opacity:1}