/* ────────────────────────────────────────────────────────────────
   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} }

/* ── case study detail ──────────────────────────────────────────────
   A key-figures header, because a case study is opened for outcomes; a
   narrow prose measure with artwork allowed to break wider; a contents
   rail that tracks position. */
:root{
  /* The artwork ceilings. Portrait screenshots are the common case in a
     case study, so height is the binding constraint, not width. */
  --fig-cap:  clamp(320px, 58svh, 600px);
  --hero-cap: clamp(240px, 44svh, 460px);
}
.crumb{margin-bottom:22px}

.hero-shot{
  margin-top:clamp(30px,4vw,52px);border-radius:4px;overflow:hidden;background:var(--paper-2);
  box-shadow:0 1px 2px rgba(6,36,60,.06), 0 20px 44px -24px rgba(6,36,60,.3);
  display:grid;place-items:center;
}
.hero-shot img{
  width:auto;height:auto;
  max-width:100%;max-height:var(--hero-cap);
  display:block;
}

/* the contents rail */
.rail{position:sticky;top:var(--barh);z-index:50;background:var(--paper);border-block:1px solid var(--line)}
.rail-in{display:flex;align-items:center;gap:18px;padding-block:12px}
.rail-lab{font-family:var(--f-util);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);white-space:nowrap;flex:none}
.scroller{position:relative;flex:1;min-width:0}
.chips{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding-block:2px}
.chips::-webkit-scrollbar{display:none}
.scroller::before,.scroller::after{content:"";position:absolute;top:0;bottom:0;width:34px;pointer-events:none;z-index:2;opacity:0;transition:opacity .2s ease}
.scroller::before{left:0;background:linear-gradient(90deg, var(--paper) 15%, rgba(255,255,255,0))}
.scroller::after{right:0;background:linear-gradient(270deg, var(--paper) 15%, rgba(255,255,255,0))}
.scroller.more-l::before,.scroller.more-r::after{opacity:1}
.chip{
  flex:none;scroll-snap-align:start;text-decoration:none;
  font-family:var(--f-util);font-size:.76rem;letter-spacing:.06em;
  border:1px solid var(--line);border-radius:999px;color:var(--muted);
  padding:.5em 1em;min-height:34px;display:inline-flex;align-items:center;white-space:nowrap;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
@media (max-width:720px){
  .rail-in{gap:0}
  .rail-lab{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .chips{gap:7px}
  .chip{font-size:.78rem;padding:.55em .95em;min-height:38px}
  .scroller::before,.scroller::after{width:26px}
}

/* the read. `.part` is display:contents so its children become grid items
   of .col - which also means `.col > *` does NOT match them. Both levels
   have to be named. */
.body{padding-block:clamp(44px,6vw,78px)}
.col{display:grid;grid-template-columns:min(100%, 880px);justify-content:center;gap:0}
.col > *,
.part > *{max-width:var(--measure);width:100%;justify-self:center}
.col > .wide,
.part > .wide{max-width:100%}
section.part{display:contents}
.part-head{
  /* the floor stays above the paragraph-to-paragraph gap, so a heading
     never sits tighter to its text than two paragraphs do */
  margin-top:clamp(46px,6vw,80px);margin-bottom:clamp(21px,1.9vw,24px);
  display:grid;gap:10px;scroll-margin-top:calc(var(--barh) + 66px);
}
.part:first-of-type .part-head{margin-top:0}
.part-head .eyebrow{color:var(--accent)}
.col p + p{margin-top:1.05em}
/* the h2 lives inside .part-head, so `h2 + p` cannot reach the paragraph
   that follows the block - that gap is .part-head's bottom margin */
.col h3 + p{margin-top:1.15em}
.col p{color:var(--ink-2);font-size:1.04rem}
.col h3{margin-top:1.9em}
.col ul{margin:1.15em 0 0;padding-left:1.3em;display:grid;gap:.55em;color:var(--ink-2);font-size:1.02rem}

/* ── artwork ────────────────────────────────────────────────────────
   Constrained on BOTH axes, and never upscaled. `width:100%` here is what
   stretched a 490x884 phone screenshot to 880x1586 - 1.8x its own pixels
   and taller than the viewport. `width:auto` plus max-width and max-height
   means an image renders at its natural size or smaller whatever shape it
   is, so the template is safe for portrait and landscape alike.
   Symmetric margins also cover the gap `.col p + p` cannot reach after a
   figure. */
figure,.pull{margin-block:clamp(34px,4.6vw,58px)}
figure{margin-inline:0;display:grid;gap:11px;justify-items:center}
figure img{
  width:auto;height:auto;
  max-width:100%;max-height:var(--fig-cap);
  display:block;border-radius:4px;
}
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;
}

/* two portrait shots side by side - the natural pairing once single
   figures are height-capped */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,30px);margin-block:clamp(34px,4.6vw,58px);align-items:end}
.duo figure{margin:0}
.duo figure img{max-height:calc(var(--fig-cap) * 0.92)}
@media (max-width:640px){ .duo{grid-template-columns:1fr} }

/* an ad creative paired with its own platform readout. Same artwork rule
   as .duo and figure: bounded on both axes, never upscaled. */
.creatives{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px);
  margin-block:clamp(34px,4.6vw,58px);
}
@media (max-width:640px){ .creatives{grid-template-columns:1fr} }
.creative{display:grid;gap:0}
.creative img{
  width:auto;height:auto;
  max-width:100%;max-height:var(--fig-cap);
  display:block;margin-inline:auto;
  border-radius:4px;
}
.creative .roas{
  display:flex;align-items:baseline;gap:.5em;margin-top:11px;
  font-family:var(--f-util);font-size:.74rem;letter-spacing:.04em;color:var(--muted-2);
}
.creative .roas b{
  font-family:var(--f-display);font-weight:400;font-size:1.35rem;line-height:1;
  color:var(--accent);letter-spacing:-0.01em;font-variant-numeric:tabular-nums;
}

.pull{padding:clamp(20px,2.4vw,28px) 0;border-block:1px solid var(--line);display:grid;gap:6px}
.pull b{
  font-family:var(--f-display);font-weight:400;font-size:clamp(2rem,4vw,3rem);line-height:1;
  color:var(--ink);letter-spacing:-0.02em;font-variant-numeric:tabular-nums;
}
.pull span{font-size:.98rem;color:var(--muted)}

/* every published figure, in one place */
.results{background:var(--paper-2);border-block:1px solid var(--line)}
.results .wrap{padding-block:clamp(46px,6vw,78px)}
.results h2{margin-bottom:clamp(24px,3vw,36px)}
.rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,30px)}
.rcell{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:clamp(16px,1.8vw,22px);display:grid;gap:5px;align-content:start}
.rcell b{
  font-family:var(--f-display);font-weight:400;font-size:clamp(1.4rem,2.4vw,1.95rem);line-height:1;
  color:var(--accent);letter-spacing:-0.02em;font-variant-numeric:tabular-nums;
}
.rcell span{font-family:var(--f-util);font-size:.71rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);line-height:1.5}
@media (max-width:900px){ .rgrid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .rgrid{grid-template-columns:1fr} }

/* scope-style key figures: a word, not a numeral, so it sits smaller */
.kf.word b{font-size:clamp(1.15rem,2vw,1.6rem);line-height:1.15;padding-top:.25em}
.rcell.word b{font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.2}
.col ul{list-style:disc}
.masthead .lede{max-width:62ch}
figure.plain{margin-block:clamp(28px,4vw,48px)}