/* ==========================================================
   REDDISHPINK — site styles
   One file, used by every page. Change it once, changes everywhere.
   ========================================================== */

/* ==========================================================
   TOKENS — the single source of truth.

   There used to be two :root blocks in this file. The second one
   silently overrode the first, so the values at the top of the
   stylesheet were not the ones the site actually used — and the
   second block asked for Poppins and Source Serif 4, which
   base.njk never loads. Headings rendered in the system font and
   every serif accent rendered in Georgia, while Outfit and
   Spectral were downloaded on every page and left unused.

   Merged into one block on 17 Sept 2026. Every value here is the
   one that was already winning, EXCEPT --sans and --serif, which
   now point at the faces that are actually loaded.

   If you add a token, add it here. Do not start a second block.
   ========================================================== */
:root{
  /* Backgrounds, darkest to lightest. Anything with a film on it
     belongs on --bg-0, because the clips are shot on true black. */
  --bg-0:#000; --bg-1:#0D0D0D; --bg-2:#141414; --bg-3:#1A1A1A;

  /* Brand colours from the Illustrator artwork, not sampled from
     a screen. Dave's files use #F5007A / #D01519 — that is his
     screen-sampled version, and these are the correct ones. */
  --magenta:#D6007E; --red:#CD1618;
  --accent:linear-gradient(96deg,var(--magenta) 0%,var(--red) 100%);

  /* Text, brightest to faintest. */
  --white:#fff; --body:#C6BCC2; --dim:#8A8087; --faint:#5F5760;
  --serif-ink:#E6DDE1;
  --line:rgba(255,255,255,.10);

  /* Type. These three are the ones base.njk loads — keep them in
     step with the <link> in the layout or the page falls back to
     system fonts without telling you. */
  --sans:"Outfit",system-ui,-apple-system,sans-serif;
  --ui:"Manrope",system-ui,sans-serif;
  --serif:"Spectral",Georgia,serif;

  --gut:clamp(1.25rem,5vw,5.5rem);

  /* Where left-aligned text starts, measured from the window edge.
     Reproduces exactly where a heading inside .wrap lands: the shell is
     1280px centred, plus the gutter. Full-bleed sections that carry text
     against a window edge use this so every heading down the page lines
     up. Media that is meant to bleed does not use it. */
  --inset:calc(max(0px, (100vw - 1280px) / 2) + var(--gut));

  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
/* (pre-restyle body rule removed — superseded below) */
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;color:var(--white);font-weight:500;line-height:1.1;letter-spacing:-.022em}
p{margin:0 0 1.15em}p:last-child{margin-bottom:0}
:focus-visible{outline:2px solid var(--magenta);outline-offset:4px}
.wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--gut)}
.hot{background:var(--accent);-webkit-background-clip:text;background-clip:text;color:transparent}
 /* replaced by radial-gradient backgrounds — a blurred div
   renders as a hard rectangle if the filter is unsupported or clipped */
/* overflow:clip, NOT hidden.

   hidden makes an element a scroll container, and position:sticky
   resolves against its nearest scrolling ancestor — so a sticky child
   of any <section> sticks to that section instead of the viewport,
   which looks exactly like "sticky is broken" and sends you hunting
   through the child's CSS where the fault is not.

   clip clips identically but creates no scroll container, so sticky
   keeps working. Verified with a controlled A/B in a real browser:
   with clip the test column pinned, with hidden it did not.

   This rule appeared twice in this file, identically. The duplicate
   has been removed. */
/* display:flow-root restores the block formatting context that
   overflow:hidden used to create. Without it, margins collapse
   through section boundaries and every page height shifts by a
   few dozen pixels. flow-root gives the BFC back without making
   a scroll container, so sticky still works. */
section{position:relative;overflow:clip;display:flow-root}
.eyebrow{font-family:var(--serif);font-weight:500;font-style:italic;font-size:16.5px;
  line-height:1.35;color:var(--magenta);margin:0 0 1.1rem}
.lede{font-family:var(--serif);font-weight:400;font-size:clamp(15.5px,1.25vw,18px);
  line-height:1.6;color:var(--serif-ink)}
.sub{font-weight:500;color:var(--white);font-size:.88rem;margin:0 0 1rem}

/* nav */
.bar{position:fixed;inset:0 0 auto;z-index:80;padding:.85rem var(--gut);transition:padding .4s var(--ease)}
.bar.stuck{padding-top:.45rem}
.pill{max-width:1280px;margin-inline:auto;display:flex;align-items:center;gap:1.5rem;
  background:rgba(16,16,16,.76);backdrop-filter:blur(18px);border:1px solid var(--line);
  border-radius:100px;padding:.5rem .55rem .5rem 1.7rem}
/* The logo is an <img>, not inline SVG, so it is one hard-cached request
   (the /assets/media/* rule in _headers pins it for a year) rather than
   11KB of markup repeated on every page. Height is fixed and the width
   follows, so the mark never distorts. */
.brand{display:block;line-height:0;text-decoration:none;flex:0 0 auto}
.brand img{display:block;height:clamp(19px,1.9vw,25px);width:auto}
.pnav{margin-left:auto;display:flex;align-items:center;gap:clamp(.9rem,1.7vw,1.8rem)}
.pnav a{text-decoration:none;font-family:var(--ui);font-weight:500;font-size:15px;color:var(--dim);transition:color .3s var(--ease)}
.pnav a:hover{color:var(--white)}
.cta{background:var(--accent);color:var(--white)!important;padding:.7em 1.5em;border-radius:100px;
  font-family:var(--ui);font-size:15px;font-weight:700;white-space:nowrap;transition:filter .3s var(--ease),transform .3s var(--ease)}
.cta:hover{filter:brightness(1.14);transform:translateY(-1px)}
@media(max-width:1040px){.pnav a:not(.cta){display:none}}
.btn{display:inline-block;background:var(--accent);color:var(--white);text-decoration:none;
  font-family:var(--ui);padding:.9em 1.9em;border-radius:6px;font-size:15px;font-weight:700;
  transition:filter .3s var(--ease),transform .3s var(--ease)}
.btn:hover{filter:brightness(1.14);transform:translateY(-2px)}
.btn--line{background:none;border:1px solid var(--line);color:var(--white)}
.btn--line:hover{border-color:var(--magenta)}

.rv{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.on{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}.rv[data-d="4"]{transition-delay:.32s}
.rv[data-d="5"]{transition-delay:.4s}.rv[data-d="6"]{transition-delay:.48s}

/* ============ HERO ============
   The homepage hero is now Dave's own markup with his inline styles, so
   there is nothing for us to style here — any rule we added would fight
   his. The plain hero for every other page is defined below.
   ============================================================ */

/* The homepage no longer uses .hero at all — it carries Dave's block —
   so these rules are safe and apply only to the other pages. */
.hero{position:relative;padding-block:clamp(6.5rem,11vh,8.5rem) clamp(2rem,5vw,3.5rem);
  text-align:center;
  background:radial-gradient(120% 60% at 50% -10%,
    rgba(214,0,126,.24) 0%, rgba(205,22,24,.07) 45%, transparent 72%), var(--bg-0)}
.hero .hero__in{position:relative;z-index:3}
.hero h1{max-width:24ch;margin-inline:auto}
.hero .eyebrow{max-width:44ch;margin:0 auto 1.1rem}
.hero .crumb{margin-bottom:1.2rem}
.hero .hero__sub{font-family:var(--serif);font-style:italic;
  font-size:clamp(15.5px,1.25vw,18px);line-height:1.6;color:var(--serif-ink);
  max-width:52ch;margin:1.3rem auto 0}
.hero .hero__dog{position:relative;z-index:2;line-height:0;
  margin:clamp(1rem,3vw,2rem) auto 0;
  width:min(96vw, calc(min(72svh, 100svh - 220px) * 16 / 9));aspect-ratio:16/9}
.hero .hero__dog video{width:100%;height:100%;object-fit:contain;display:block;
  background:var(--bg-0);opacity:1}
/* THE HOMEPAGE HERO FADE.

   Dave's hero block was transplanted verbatim, and it came over without
   the edge fade that every other hero on the site has. Measured: the
   consultant clip's top three rows average 11/255 and peak at 171 where
   the spotlight clips the frame, so a hard line shows against the page
   whenever that part of the loop is on screen.

   The fade colour is taken from --hero-ground rather than --bg-0,
   because the transplanted block sets its own backdrop of #0A0608
   inline — Dave's warm near-black — while the rest of the site is #000.
   Matching the fade to the real backdrop is what makes the edge vanish.
   If that inline background is ever aligned to #000, change this too. */
#hero [data-hero-image]{--hero-ground:#0A0608}
#hero [data-hero-image]::before{content:"";position:absolute;
  left:-2px;right:-2px;top:-2px;height:9%;z-index:3;pointer-events:none;
  background:linear-gradient(to bottom,
    var(--hero-ground) 0%, var(--hero-ground) 28%,
    rgba(10,6,8,.85) 58%, transparent 100%)}

.hero .hero__dog::before{content:"";position:absolute;left:-2px;right:-2px;top:-2px;
  height:7%;z-index:3;pointer-events:none;
  background:linear-gradient(to bottom,var(--bg-0) 0%,var(--bg-0) 30%,rgba(0,0,0,.85) 60%,transparent 100%)}
.hero .hero__dog::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to right,var(--bg-0) 0%,transparent 3%,transparent 97%,var(--bg-0) 100%),
             linear-gradient(to top,var(--bg-0) 0%,transparent 6%)}
.hero .hero__cta{position:relative;z-index:3;margin-top:clamp(1rem,3vw,2rem);
  display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}

/* ==========================================================
   SERVICES — Dave's overlapping panels
   Full-height sticky panels, full bleed, split in half. The film
   fills its side entirely; the copy sits centred on the other.
   Sides alternate and each panel slides up over the last.

   The hierarchy is Dave's: the category name is a small pink label
   and the STRAPLINE is the heading — which reads far better than
   the category name as a title.
   ========================================================== */
.svc-intro{padding-block:clamp(4rem,9vw,7rem) clamp(2.5rem,5vw,4rem);
  background:var(--bg-0);position:relative;z-index:1}
.svc-intro .lede{max-width:56ch;margin-top:1rem}

.cat-sec{position:sticky;top:0;min-height:100svh;overflow:hidden;
  display:flex;flex-wrap:wrap;background:#0A0A0A; /* 3 levels off --bg-1; left as-is to keep this pass behaviour-preserving */
  box-shadow:0 -30px 60px rgba(0,0,0,.55)}
.cat-sec--alt{background:var(--bg-0)}

/* the film half — full bleed, fills its side */
.cat-sec__media{flex:0 0 50%;min-width:0;position:relative;background:var(--bg-0);order:1;
  display:grid;place-items:center}
.cat-sec--flip .cat-sec__media{order:2}
/* The clip sits inside black rather than being cropped to fill, so the
   terrier is whole and the frame edges disappear into the panel —
   the same treatment as the page headers. */
.cat-sec__media .cat__pic{position:relative;width:min(92%,560px);aspect-ratio:16/9;
  background:var(--bg-0);overflow:hidden;line-height:0}
.cat-sec__media video{width:100%;height:100%;object-fit:contain;display:block;background:var(--bg-0)}
.cat-sec__media .cat__pic::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;
  height:8%;background:linear-gradient(to bottom,var(--bg-0) 0%,rgba(0,0,0,.75) 45%,transparent 100%);
  z-index:3;pointer-events:none}
/* --lit: a clip thrown by a spotlight that clips the top of frame needs a
   deeper fade than the standard 8%. The chess clip measures 158/255 across
   its top three rows. 12% clears the glow and stops well short of the
   terriers' ears, which start around 15% down. */
.cat-sec__media .cat__pic--lit::before{height:12%;
  background:linear-gradient(to bottom,var(--bg-0) 0%,rgba(0,0,0,.85) 40%,transparent 100%)}
.cat-sec__media .cat__pic::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to right,var(--bg-0) 0%,transparent 4%,transparent 96%,var(--bg-0) 100%),
             linear-gradient(to top,var(--bg-0) 0%,transparent 8%)}

/* the copy half */
/* The copy column can overflow on the longest category (Marketing has
   seven services). overscroll-behavior:contain used to trap the scroll
   there — once the column hit its own bottom the page would not move.
   Scrolling now chains to the page as it should, and the padding is
   tighter so most viewports will not need to scroll at all. */
/* The outer edge of a panel's text column sits on the page gutter, the
   same place every other left-aligned heading on the site starts. The
   inner edge — the one against the film — keeps its own tighter padding,
   because that is an internal join, not a page edge.

   This is the rule: TEXT against a window edge respects --inset;
   full-bleed media does not. It is not applied to everything, only to
   the edge that touches the window.

   Before this, panel text sat 49px from the window while every .wrap
   heading sat at 130px, and the two gutters scaled at different rates,
   so the mismatch wandered as the window resized. */
.cat-sec__body{flex:1 1 50%;min-width:0;order:2;box-sizing:border-box;
  display:flex;align-items:center;max-height:100svh;overflow-y:auto;
  scrollbar-width:thin;
  padding-block:clamp(1.75rem,3.5vw,3.5rem);
  /* body sits on the RIGHT by default: inner edge first, outer second */
  padding-inline:clamp(1.5rem,3.5vw,4rem) var(--inset)}
.cat-sec--flip .cat-sec__body{order:1;
  /* flipped: body on the LEFT, so the outer edge comes first */
  padding-inline:var(--inset) clamp(1.5rem,3.5vw,4rem)}
.cat-sec__inner{width:100%;max-width:620px}

/* category name leads, the strapline is its subhead */
/* The category name now carries the same weight as a page headline,
   gradient word included, so each panel opens properly rather than
   with a quiet label. */
.cat-sec__label{font-family:var(--sans);font-weight:400;
  font-size:clamp(30px,3.4vw,48px);line-height:1.1;letter-spacing:-.9px;
  color:var(--white);margin:0 0 .6rem}
.cat-sec__head{font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(16px,1.35vw,19px);line-height:1.35;color:var(--magenta);
  margin:0 0 .8rem;max-width:30ch}
.cat-sec__sum{font-family:var(--ui);font-weight:500;font-size:15px;line-height:24px;
  color:var(--dim);margin:0 0 1.3rem;max-width:52ch}

.cat-sec__inner ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cat-sec__inner li{border-bottom:1px solid var(--line)}

@media(max-width:900px){
  .cat-sec{position:relative;min-height:0;display:block;box-shadow:none;
    border-top:1px solid var(--line)}
  .cat-sec__media{height:auto;padding:1.5rem 0}
  .cat-sec__media .cat__pic{width:min(92%,460px)}
  /* stacked: both sides are window edges now, so both take the gutter */
  .cat-sec__body{max-height:none;overflow:visible;display:block;
    padding-block:2rem 2.5rem;padding-inline:var(--inset)}
  .cat-sec--flip .cat-sec__body{padding-inline:var(--inset)}
  .cat-sec__inner{max-width:none}
}

/* Full service marketing — the flagship feature above the category
   panels. Uses .split for its layout; this rule only sets the band. */
/* --bg-0, not --bg-1. CONVENTIONS: "Anything with a video on it must be
   pure #000." This band was #0D0D0D while the film box inside it was
   #000, so the box showed as a rectangle and the fades faded to the
   wrong black — a hard edge on all four sides.

   It also runs straight on from .svc-intro, which is already #000, so
   the intro and the flagship offer now read as one block. The first
   category panel below is #0A0A0A, which is what separates them. */
.fs{position:relative;z-index:2;background:var(--bg-0);
  padding-block:clamp(3rem,7vw,6rem) clamp(3.5rem,8vw,7rem)}
.fs__cta{margin-top:.6rem;display:flex;gap:.8rem;flex-wrap:wrap}

/* .split__fig — optional film inside a pinned .split column.

   Fades top and bottom only. Left and right are deliberately NOT faded
   here: the one clip that uses this component has its side ramps baked
   into the encode instead, because it needed them asymmetrically and
   baking keeps the component free of per-clip overrides.

   Depths are measured, not guessed. The boardroom clip reads 0/255 across
   its top rows and 20/255 across its bottom three.

   The top fade is only 4% — just enough to hide encode noise. It was 11%
   when the tailor clip lived here (that one was bright at the top); left
   at 11% against a clip that is already black it did nothing but dim the
   painting on the back wall.

   The bottom fade stays at 6%. Any deeper and it starts eating the table
   the terriers are sitting at — which is exactly the trap in CONVENTIONS:
   a fade can eat the thing the clip is about. */
.split__fig{position:relative;width:100%;aspect-ratio:16/9;margin-top:.5rem;
  overflow:hidden;background:var(--bg-0);line-height:0}
.split__fig video{width:100%;height:100%;object-fit:contain;display:block;
  background:var(--bg-0)}
.split__fig::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;
  height:4%;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,var(--bg-0) 0%,rgba(0,0,0,.6) 45%,transparent 100%)}
.split__fig::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-1px;
  height:6%;z-index:2;pointer-events:none;
  background:linear-gradient(to top,var(--bg-0) 0%,rgba(0,0,0,.7) 40%,transparent 100%)}

.svc-end{position:relative;z-index:2;padding-block:clamp(3rem,6vw,4.5rem) clamp(4rem,8vw,6rem);
  background:var(--bg-0)}

.svc__help{position:relative;z-index:2;margin-top:clamp(2rem,4vw,3rem);border:1px solid var(--line);
  border-radius:8px;padding:1.6rem 1.7rem;display:flex;flex-wrap:wrap;gap:1.2rem;
  align-items:center;justify-content:space-between;background:var(--bg-0)}
.svc__help b{color:var(--white);font-weight:500;display:block;font-size:1.05rem}
.svc__help span{font-size:.88rem;color:var(--dim);display:block;margin-top:.25rem}

/* ============ FULL SERVICE BAND ============ */
.full{padding-block:clamp(4rem,9vw,8rem);background:var(--bg-2)}
.full__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,5vw,5rem);align-items:center}
.full h2{font-size:clamp(1.6rem,1.15rem+2.2vw,2.8rem);max-width:15ch}
.steps{display:grid;gap:0;margin-top:1.8rem;border-top:1px solid var(--line)}
.steps div{display:grid;grid-template-columns:4.5rem 1fr;gap:1.2rem;padding-block:1.2rem;
  border-bottom:1px solid var(--line);align-items:baseline}
.steps dt{font-family:var(--serif);font-style:italic;color:var(--magenta);font-size:1.05rem}
.steps h3{font-size:1.05rem;margin-bottom:.25rem}
.steps p{font-size:.86rem;color:var(--dim);margin:0;line-height:1.65}
@media(max-width:880px){.full__grid{grid-template-columns:1fr}.steps div{grid-template-columns:1fr;gap:.3rem}}

/* ============ POSITIONING BAND ============ */
.pos{padding-block:clamp(4.5rem,10vw,9rem);text-align:center;
  background:radial-gradient(85% 70% at 50% 0%, rgba(214,0,126,.22) 0%, transparent 68%), var(--bg-0)}
.pos h2{position:relative;z-index:2;font-size:clamp(1.9rem,1.2rem+3.4vw,4rem);letter-spacing:-.035em;
  max-width:17ch;margin-inline:auto;line-height:1.08}
.pos p{position:relative;z-index:2;max-width:50ch;margin:1.8rem auto 0}
.pos__list{position:relative;z-index:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  margin-top:clamp(2.5rem,5vw,3.5rem);text-align:left}
.pos__list div{background:var(--bg-0);padding:1.5rem 1.4rem}
.pos__list b{display:block;color:var(--white);font-weight:500;font-size:.98rem;margin-bottom:.4rem}
.pos__list span{font-size:.83rem;color:var(--dim);line-height:1.65;display:block}

/* ============ WORK ============ */
.work{padding-block:clamp(4rem,9vw,8rem) clamp(3rem,6vw,5rem);background:var(--bg-1)}
.work h2{font-size:clamp(1.7rem,1.2rem+2.3vw,3rem);max-width:15ch}
.strip{display:flex;gap:clamp(.9rem,2vw,1.6rem);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 var(--gut) 1.5rem;margin-top:clamp(2rem,4vw,3rem);cursor:grab;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip.grabbing{cursor:grabbing;scroll-snap-type:none}
.wcard{flex:0 0 clamp(250px,30vw,400px);scroll-snap-align:start;text-decoration:none;color:inherit}
.wcard__i{aspect-ratio:4/3;overflow:hidden;border-radius:6px;background:var(--bg-3);border:1px solid var(--line)}
.wcard__i img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.wcard:hover .wcard__i img{transform:scale(1.07)}
.wcard h3{font-size:1.03rem;margin:.95rem 0 .3rem}
.wcard p{font-size:.84rem;margin:0}
.wcard .tg{font-size:.72rem;margin-top:.5rem;font-weight:500}

/* ============ CAMPAIGN BAND ============ */
.camp{padding-block:clamp(4rem,9vw,7rem);text-align:center;
  background:radial-gradient(80% 60% at 50% 0%, rgba(214,0,126,.18) 0%, transparent 65%), var(--bg-0)}
.camp h2{font-size:clamp(2rem,1.3rem+3.4vw,4rem);letter-spacing:-.035em}
.camp__line{font-family:var(--serif);font-size:clamp(1.1rem,1rem+.6vw,1.5rem);color:var(--white);
  margin-top:1rem}
.camp__vid{width:min(100%,860px);margin:clamp(.5rem,2vw,1.5rem) auto 0}
.camp__vid video{width:100%;display:block}

/* ============ BRAND BRAIN ============ */
.brain{padding-block:clamp(4rem,9vw,8rem);
  background:radial-gradient(60% 55% at 100% 10%, rgba(205,22,24,.13) 0%, transparent 62%), var(--bg-2)}
.brain__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(1.8rem,5vw,5rem);align-items:center}
.brain h2{font-size:clamp(1.6rem,1.15rem+2.2vw,2.8rem);max-width:16ch}
.brain__vis{position:relative;aspect-ratio:1;display:grid;place-items:center}
.brain__ring{position:absolute;border:1px solid var(--line);border-radius:50%}
.brain__ring:nth-child(1){inset:0;animation:spin 46s linear infinite}
.brain__ring:nth-child(2){inset:13%;animation:spin 34s linear infinite reverse}
.brain__ring:nth-child(3){inset:26%;animation:spin 26s linear infinite}
.brain__ring span{position:absolute;top:-5px;left:50%;width:9px;height:9px;border-radius:50%;background:var(--magenta)}
.brain__ring:nth-child(2) span{background:var(--red)}
.brain__core{position:relative;width:48%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 45%, rgba(214,0,126,.34), rgba(214,0,126,0) 70%);text-align:center;padding:1rem}
.brain__core b{display:block;font-size:.95rem;color:var(--white);font-weight:500;line-height:1.35}
.brain__core em{display:block;font-family:var(--serif);font-size:.78rem;color:var(--dim);margin-top:.3rem}
@keyframes spin{to{transform:rotate(360deg)}}
.brain__tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.6rem}
.brain__tags span{font-size:.72rem;border:1px solid var(--line);border-radius:100px;padding:.35em .95em;color:var(--dim)}
@media(max-width:880px){.brain__grid{grid-template-columns:1fr}.brain__vis{max-width:320px;margin-inline:auto}}

/* ============ PROGRAMMES ============ */
.prog{padding-block:clamp(4rem,9vw,8rem);
  background:radial-gradient(62% 50% at 0% 100%, rgba(214,0,126,.12) 0%, transparent 62%), var(--bg-1)}
.prog__top{position:relative;z-index:2;max-width:56ch}
.prog__top h2{font-size:clamp(1.7rem,1.2rem+2.3vw,3rem);max-width:15ch}
.prog__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));
  gap:clamp(1rem,2.5vw,1.7rem);margin-top:clamp(2.2rem,4.5vw,3.4rem);position:relative;z-index:2}
.card{border:1px solid var(--line);border-radius:8px;padding:1.8rem 1.6rem;background:var(--bg-0);
  display:flex;flex-direction:column;transition:border-color .4s var(--ease),transform .4s var(--ease)}
.card:hover{border-color:rgba(214,0,126,.5);transform:translateY(-3px)}
.card h3{font-size:1.1rem;margin-bottom:.5rem}
/* .price and .price small removed 17 Sept — no prices appear anywhere on
   the site by decision, so the rules had nothing left to style. If that
   ever changes, they went here. */
.card p{font-size:.86rem;line-height:1.7;margin:0}
.card ul{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.45rem}
.card li{font-size:.82rem;color:var(--dim);padding-left:1rem;position:relative}
.card li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--magenta)}

/* ============ TEAM ============ */
.team{padding-block:clamp(4rem,9vw,8rem);background:var(--bg-0)}
.team__h{font-size:clamp(1.7rem,1.2rem+2.3vw,3rem);max-width:16ch;position:relative;z-index:2}
.team__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));
  gap:clamp(1.1rem,3vw,2rem);margin-top:clamp(2.2rem,4.5vw,3.6rem);position:relative;z-index:2}
.member{background:var(--bg-0);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.member__pic{position:relative;aspect-ratio:1;background:var(--bg-0);overflow:hidden;display:grid;place-items:center}
.member__pic video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.member__pic .ph{position:relative;color:var(--faint);font-family:var(--serif);font-style:italic;
  font-size:.8rem;text-align:center;padding:1rem;line-height:1.5}
.member__txt{padding:1.3rem 1.4rem 1.6rem}
.member h3{font-size:1.05rem;margin-bottom:.2rem}
.member .role{font-size:.72rem;color:var(--magenta);margin-bottom:.8rem;font-weight:500;letter-spacing:.03em}
.member p{font-size:.85rem;line-height:1.7;margin:0 0 .7em}
.member .yrs{display:block;margin-top:.9rem;font-family:var(--serif);font-style:italic;color:var(--faint);font-size:.8rem}

/* ============ CONTACT + FOOTER ============ */
.contact{padding-block:clamp(4.5rem,10vw,9rem);text-align:center;
  background:radial-gradient(90% 80% at 50% 120%, rgba(214,0,126,.28) 0%, transparent 70%), var(--bg-0)}
.contact h2{position:relative;z-index:2;font-size:clamp(2rem,1.3rem+3.4vw,4rem);max-width:16ch;
  margin-inline:auto;letter-spacing:-.035em}
.contact p{position:relative;z-index:2;max-width:48ch;margin:1.5rem auto 0;color:var(--white);
  font-family:var(--serif);font-size:1.08rem;line-height:1.6}
.contact .row{position:relative;z-index:2;margin-top:2.2rem;display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.deets{position:relative;z-index:2;margin-top:2.8rem;display:flex;gap:2.5rem;justify-content:center;flex-wrap:wrap;font-size:.9rem}
.deets a{color:var(--white);text-decoration:none;border-bottom:1px solid var(--magenta);padding-bottom:2px}

footer{background:var(--bg-0);padding-block:clamp(2.5rem,5vw,4rem) 2rem;font-size:.84rem;border-top:1px solid var(--line)}
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2rem 1.5rem;padding-bottom:2.5rem;border-bottom:1px solid var(--line)}
/* was .fcols h4 — now a <p>, see the comment in base.njk */
.fcols__h{font-size:.73rem;margin:0 0 1rem;font-weight:500;color:var(--white);
  font-family:var(--sans);letter-spacing:-.3px}
.fcols ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.fcols a{color:var(--dim);text-decoration:none;font-size:.82rem}
.fcols a:hover{color:var(--white)}
.fbot{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;padding-top:1.5rem;font-size:.77rem;color:var(--faint)}

/* the cameo sits BEHIND the nav (z-index 80) so he appears to drop from
   behind the menu bar. Fires once, at an unpredictable point. */
#cameo{position:fixed;top:0;width:min(210px,30vw);z-index:40;
  pointer-events:none;transform:translateY(-104%);
  transition:transform 1.35s cubic-bezier(.34,1.32,.5,1)}
#cameo.down{transform:translateY(-4%)}
#cameo.up{transition:transform 1s cubic-bezier(.5,0,.75,0)}
#cameo video{width:100%;mix-blend-mode:screen}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .hero__dog video,.hero__sub,.hero__cta,.hero .eyebrow{opacity:1;transform:none}
  #cameo{display:none}
}

/* ---------- page-specific: service pages ----------
   The second :root block that used to sit here has been merged
   into the one at the top of the file. See the note there. */
body{margin:0;background:var(--bg-0);color:var(--dim);font-family:var(--ui);font-weight:500;
  font-size:16px;line-height:26px;-webkit-font-smoothing:antialiased;
  text-wrap:pretty}
h1,h2,h3,h4{margin:0;color:var(--white);font-family:var(--sans);font-weight:400}
/* THE h1 SCALE — one rule, and it is this one.

   The size used to be declared in nine places: this rule, four
   page-specific overrides that just restated it, and four older
   overrides that those in turn killed. Every h1 on the site rendered
   at the same size anyway, so eight of the nine were noise.

   Adopted the larger scale from the block-library pages, which is the
   one Mark preferred. Tighter leading because bigger headings need
   less of it. */
h1{font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.02;letter-spacing:-.9px}
h2{font-size:clamp(26px,2.5vw,36px);line-height:1.08;letter-spacing:-.6px}
h3{font-size:clamp(21px,1.85vw,27px);line-height:1.12;letter-spacing:-.6px}
h4{font-size:clamp(17px,1.4vw,20px);line-height:1.2;letter-spacing:-.3px}
/* progress bar */
#prog{position:fixed;top:0;left:0;height:2px;background:var(--accent);width:0;z-index:90;transition:width .1s linear}
/* breadcrumb */
.crumb{position:relative;z-index:2;font-size:.75rem;color:var(--faint);
  margin:0 auto 1.6rem;letter-spacing:.02em;display:flex;flex-wrap:wrap;
  justify-content:center;align-items:center;gap:.1rem}
.crumb a{text-decoration:none;color:var(--faint)}
.crumb a:hover{color:var(--magenta)}
.crumb span{margin:0 .45em}
/* (Pre-restyle hero block removed in full. It set opacity:0 on the eyebrow
   and standfirst with nothing to turn them back on, which made the pink
   eyebrow invisible on every page but the homepage, and it carried the old
   type scale. The scroll hero and the plain hero are both defined above.) */
/* ============ INTRO ============ */
.intro{padding-block:clamp(3.5rem,8vw,7rem);background:var(--bg-1)}
.intro__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,5vw,5rem);align-items:start}
.intro h2{font-size:clamp(1.5rem,1.1rem+2vw,2.6rem);max-width:17ch}
@media(max-width:880px){.intro__grid{grid-template-columns:1fr}}
/* ============ WORK — filterable ============ */
.work{padding-block:clamp(4rem,9vw,8rem);background:var(--bg-0)}
.work__top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:end;
  margin-bottom:clamp(1.8rem,3.5vw,2.6rem)}
.work__top h2{font-size:clamp(1.6rem,1.15rem+2.2vw,2.9rem);max-width:14ch}
@media(max-width:880px){.work__top{grid-template-columns:1fr}}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(1.5rem,3vw,2.2rem)}
.filters button{font-family:inherit;font-size:.78rem;font-weight:400;color:var(--dim);
  background:none;border:1px solid var(--line);border-radius:100px;padding:.5em 1.15em;
  cursor:pointer;transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.filters button:hover{color:var(--white);border-color:var(--faint)}
.filters button[aria-pressed="true"]{color:var(--white);border-color:transparent;background:var(--accent)}
.filters .count{font-size:.68rem;opacity:.6;margin-left:.4em}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(1rem,2.2vw,1.7rem)}
.proj{position:relative;text-decoration:none;color:inherit;display:block;
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.proj.hide{display:none}
.proj.fade{opacity:0;transform:scale(.97)}
.proj__i{aspect-ratio:16/11;overflow:hidden;border-radius:6px;background:var(--bg-3);
  border:1px solid var(--line);position:relative}
.proj__i img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.proj:hover .proj__i img{transform:scale(1.06)}
.proj__i::after{content:"";position:absolute;inset:0;background:var(--accent);opacity:0;
  mix-blend-mode:overlay;transition:opacity .5s var(--ease)}
.proj:hover .proj__i::after{opacity:.28}
.proj__tag{position:absolute;left:.7rem;top:.7rem;z-index:2;font-size:.64rem;letter-spacing:.06em;
  text-transform:uppercase;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:100px;padding:.3em .8em;color:var(--body)}
.proj h3{font-size:1rem;margin:.9rem 0 .35rem;line-height:1.35}
.proj p{font-size:.84rem;color:var(--dim);line-height:1.65;margin:0}
.work__empty{color:var(--faint);font-family:var(--serif);font-style:italic;padding:2rem 0}
/* ============ WHAT WE DO — sticky scroll ============ */
.what{padding-block:clamp(4rem,9vw,8rem);
  background:radial-gradient(65% 50% at 100% 20%, rgba(205,22,24,.12) 0%, transparent 62%), var(--bg-1)}
.what__grid{display:grid;grid-template-columns:1fr min(42%,460px);gap:clamp(1.8rem,5vw,4.5rem);
  align-items:start;position:relative;z-index:2}
.what__list{list-style:none;margin:2rem 0 0;padding:0;counter-reset:w;border-top:1px solid var(--line)}
.what__list li{border-bottom:1px solid var(--line);padding:1.35rem 0;display:grid;
  grid-template-columns:2.6rem 1fr;gap:1rem;align-items:start;
  transition:padding-left .45s var(--ease)}
.what__list li:hover{padding-left:.7rem}
.what__list li::before{counter-increment:w;content:"0" counter(w);font-family:var(--serif);
  font-style:italic;font-size:.85rem;color:var(--faint);padding-top:.18rem}
.what__list h3{font-size:clamp(1.05rem,.95rem+.5vw,1.32rem);margin-bottom:.3rem}
.what__list p{font-size:.86rem;color:var(--dim);line-height:1.7;margin:0 0 .5rem}
.what__list a{font-size:.76rem;font-weight:500;color:var(--magenta);text-decoration:none;
  border-bottom:1px solid rgba(214,0,126,.35);padding-bottom:1px}
.what__list a:hover{border-color:var(--magenta)}
.what__side{position:sticky;top:6.5rem}
.what__side img{width:100%;border-radius:6px;border:1px solid var(--line)}
.what__stat{margin-top:1.5rem;border:1px solid var(--line);border-radius:6px;padding:1.4rem 1.5rem;background:var(--bg-0)}
.what__stat b{display:block;font-size:2.6rem;font-weight:500;letter-spacing:-.04em;line-height:1;
  background:var(--accent);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums}
.what__stat span{display:block;font-size:.83rem;color:var(--dim);margin-top:.5rem;line-height:1.6}
@media(max-width:900px){.what__grid{grid-template-columns:1fr}.what__side{position:static}}
/* ============ DETAIL ROWS ============ */
.rows{padding-block:clamp(4rem,9vw,8rem);background:var(--bg-2)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,5vw,5rem);align-items:center}
.row+.row{margin-top:clamp(3rem,6vw,5.5rem)}
.row--flip .row__m{order:-1}
.row h2{font-size:clamp(1.4rem,1.1rem+1.6vw,2.3rem);max-width:16ch}
.row .sub{font-weight:500;color:var(--white);font-size:.88rem;margin:.9rem 0 .9rem}
.row__m{border-radius:6px;overflow:hidden;border:1px solid var(--line);background:var(--bg-0)}
.row__m img{width:100%;transition:transform 1.2s var(--ease)}
.row:hover .row__m img{transform:scale(1.04)}
.row a.more{font-size:.78rem;font-weight:500;color:var(--magenta);text-decoration:none;
  border-bottom:1px solid rgba(214,0,126,.35);padding-bottom:1px}
@media(max-width:880px){.row{grid-template-columns:1fr}.row--flip .row__m{order:0}}
/* ============ CTA ============ */
.end{padding-block:clamp(4.5rem,10vw,9rem);text-align:center;
  background:radial-gradient(90% 80% at 50% 120%, rgba(214,0,126,.28) 0%, transparent 70%), var(--bg-0)}
.end h2{position:relative;z-index:2;font-size:clamp(1.9rem,1.3rem+3.2vw,3.8rem);max-width:17ch;
  margin-inline:auto;letter-spacing:-.035em}
.end p{position:relative;z-index:2;max-width:48ch;margin:1.5rem auto 0;color:var(--white);
  font-family:var(--serif);font-size:1.08rem;line-height:1.6}
.end .row2{position:relative;z-index:2;margin-top:2.2rem;display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
footer{background:var(--bg-0);padding-block:clamp(2.5rem,5vw,4rem) 2rem;font-size:.84rem;border-top:1px solid var(--line)}
/* (duplicate reduced-motion block removed — the fuller one above covers it) */

/* ==========================================================
   WORK LIGHTBOX
   Click a project to see it properly. Keyboard: Esc closes,
   left/right move through whatever the filter is showing.
   ========================================================== */
.lb{position:fixed;inset:0;z-index:200;display:none;background:rgba(0,0,0,.94);
  backdrop-filter:blur(8px);padding:clamp(1rem,4vw,3rem)}
.lb.open{display:grid;place-items:center}
.lb__inner{position:relative;width:min(1180px,100%);max-height:92vh;display:grid;
  grid-template-columns:1.35fr .65fr;gap:clamp(1.2rem,3vw,2.5rem);align-items:center;
  opacity:0;transform:scale(.97);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.lb.shown .lb__inner{opacity:1;transform:none}
.lb__fig{background:var(--bg-0);border:1px solid var(--line);border-radius:8px;overflow:hidden;
  display:grid;place-items:center;max-height:88vh}
.lb__fig img{width:100%;height:auto;max-height:88vh;object-fit:contain;display:block}
.lb__txt{color:var(--body)}
.lb__tag{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--magenta);
  font-weight:500;margin-bottom:.7rem;display:block}
.lb__txt h3{font-size:clamp(1.3rem,1.1rem+1vw,1.9rem);margin-bottom:.8rem;line-height:1.2}
.lb__txt p{font-size:.92rem;line-height:1.75;margin-bottom:1.1rem}
.lb__svc{list-style:none;margin:0 0 1.4rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.lb__svc li{font-size:.72rem;color:var(--dim);border:1px solid var(--line);
  border-radius:100px;padding:.32em .85em}
.lb__cta{display:inline-block;background:var(--accent);color:var(--white);text-decoration:none;
  padding:.72em 1.5em;border-radius:5px;font-size:.78rem;font-weight:500;
  transition:filter .3s var(--ease),transform .3s var(--ease)}
.lb__cta:hover{filter:brightness(1.14);transform:translateY(-2px)}
.lb__soon{font-family:var(--serif);font-style:italic;font-size:.85rem;color:var(--faint)}

.lb__close,.lb__nav{position:absolute;background:rgba(20,20,20,.85);border:1px solid var(--line);
  color:var(--white);width:44px;height:44px;border-radius:50%;cursor:pointer;display:grid;
  place-items:center;font-size:1.1rem;line-height:1;font-family:inherit;
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.lb__close:hover,.lb__nav:hover{background:var(--bg-0);border-color:var(--magenta)}
.lb__close{top:-14px;right:-14px;z-index:3}
.lb__nav{top:50%;transform:translateY(-50%);z-index:3}
.lb__nav--prev{left:-14px}
.lb__nav--next{left:auto;right:calc(35% + .6rem)}
.lb__count{position:absolute;bottom:-30px;left:0;font-size:.74rem;color:var(--faint);
  font-variant-numeric:tabular-nums}

.proj{cursor:zoom-in}
.proj__zoom{position:absolute;right:.7rem;bottom:.7rem;z-index:2;width:32px;height:32px;
  border-radius:50%;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);
  border:1px solid var(--line);display:grid;place-items:center;
  opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.proj:hover .proj__zoom{opacity:1;transform:none}
.proj__zoom::before,.proj__zoom::after{content:"";position:absolute;background:var(--white)}
.proj__zoom::before{width:12px;height:1.5px}
.proj__zoom::after{width:1.5px;height:12px}

@media(max-width:900px){
  .lb__inner{grid-template-columns:1fr;max-height:none;overflow-y:auto}
  .lb__nav--next{right:-14px}
  .lb__fig img{max-height:52vh}
  .lb__close{top:0;right:0}
}
@media(prefers-reduced-motion:reduce){
  .lb__inner{transition-duration:.01ms}
}

/* ==========================================================
   CASE STUDY PAGES
   ========================================================== */
.cs-hero{padding-block:clamp(7.5rem,13vh,10rem) 0;
  background:radial-gradient(120% 55% at 50% -10%, rgba(214,0,126,.26) 0%, transparent 70%), var(--bg-0)}

.cs-hero .eyebrow{font-size:1.05rem}
.cs-meta{list-style:none;margin:2.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:clamp(1.5rem,4vw,3.5rem);border-top:1px solid var(--line);padding-top:1.4rem}
.cs-meta span{display:block;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);margin-bottom:.3rem}
.cs-meta b{font-size:.95rem;font-weight:400;color:var(--white)}
.cs-lead{margin:clamp(2rem,5vw,3.5rem) 0 0;padding:0;background:var(--bg-0)}
.cs-lead img{width:100%;display:block}

.cs-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(1.8rem,5vw,5rem);align-items:start}
.cs-split h2{font-size:clamp(1.5rem,1.15rem+1.8vw,2.5rem);max-width:12ch}
@media(max-width:880px){.cs-split{grid-template-columns:1fr}}

.cs-intro{padding-block:clamp(3.5rem,8vw,7rem);background:var(--bg-1)}

.cs-scope{padding-block:clamp(3.5rem,8vw,7rem);background:var(--bg-0)}
.cs-scope h2{font-size:clamp(1.5rem,1.15rem+1.8vw,2.5rem);margin-bottom:1.8rem}
.cs-list{list-style:none;margin:0;padding:0;counter-reset:cs;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:0 clamp(1.5rem,3vw,3rem);border-top:1px solid var(--line)}
/* The number is positioned rather than being a grid item — otherwise the
   paragraph wraps into the number's column and sets one word per line. */
.cs-list li{border-bottom:1px solid var(--line);padding:1.4rem 0 1.4rem 2.8rem;
  position:relative}
.cs-list li::before{counter-increment:cs;content:"0" counter(cs);
  position:absolute;left:0;top:1.6rem;
  font-family:var(--serif);font-style:italic;font-size:.82rem;color:var(--faint)}
.cs-list h3{font-size:1.02rem;margin-bottom:.3rem;line-height:1.35}
.cs-list p{font-size:.85rem;color:var(--dim);line-height:1.65;margin:0}

.cs-think{padding-block:clamp(3.5rem,8vw,7rem);
  background:radial-gradient(70% 60% at 20% 30%, rgba(205,22,24,.14) 0%, transparent 65%), var(--bg-2)}
.cs-think blockquote{margin:0 0 1.6rem;font-family:var(--serif);
  font-size:clamp(1.3rem,1.05rem+1.5vw,2.2rem);line-height:1.4;color:var(--white);max-width:26ch}
.cs-think p{max-width:56ch}

.cs-work{padding-block:clamp(3.5rem,8vw,7rem) clamp(2rem,4vw,3rem);background:var(--bg-0)}
.cs-work h2{font-size:clamp(1.5rem,1.15rem+1.8vw,2.5rem)}
/* align-items:start matters. Grid items stretch by default, so a shorter
   image in a row left a black band inside its bordered box below the
   picture. Haymarket never showed it because every one of its grids used a
   single aspect ratio. Mixed shapes are normal once real client artwork
   arrives, so the grid no longer stretches. Still: keep one aspect ratio
   per grid where you can — it reads better than a ragged row. */
.cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  align-items:start;
  gap:clamp(.6rem,1.4vw,1rem);padding:clamp(1.5rem,3vw,2.5rem) var(--gut) 0}
.cs-grid--3{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.cs-shot{position:relative;display:block;background:var(--bg-0);border:1px solid var(--line);
  border-radius:5px;overflow:hidden;cursor:zoom-in}
.cs-shot img{width:100%;display:block;transition:transform 1.1s var(--ease)}
.cs-shot:hover img{transform:scale(1.05)}
.cs-zoom{position:absolute;right:.6rem;bottom:.6rem;width:30px;height:30px;border-radius:50%;
  background:rgba(0,0,0,.72);border:1px solid var(--line);display:grid;place-items:center;
  opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.cs-shot:hover .cs-zoom{opacity:1;transform:none}
.cs-zoom::before,.cs-zoom::after{content:"";position:absolute;background:var(--white)}
.cs-zoom::before{width:11px;height:1.5px}
.cs-zoom::after{width:1.5px;height:11px}

.cs-photo{padding-block:clamp(3.5rem,8vw,7rem) clamp(2rem,4vw,3rem);background:var(--bg-1)}

.cs-result{padding-block:clamp(3rem,6vw,5rem);background:var(--bg-0)}
.cs-result__note{border:1px dashed rgba(214,0,126,.45);border-radius:6px;padding:1.4rem 1.6rem;
  color:var(--dim);font-size:.9rem;line-height:1.75;max-width:60ch}

.cs-next{padding-block:clamp(3rem,6vw,5rem);background:var(--bg-2);border-top:1px solid var(--line)}
.cs-next__row{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:end;justify-content:space-between}
.cs-next h2{font-size:clamp(1.3rem,1.05rem+1.4vw,2.1rem);max-width:18ch}
.cs-next h2 a{text-decoration:none;transition:color .3s var(--ease)}
.cs-next h2 a:hover{color:var(--magenta)}

/* ==========================================================
   PREVIEW BAR — staging only. Delete at launch.
   ========================================================== */
.prev-bar{position:fixed;bottom:0;left:0;right:0;z-index:120;
  background:rgba(10,10,10,.94);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);padding:.6rem clamp(1rem,4vw,2rem);
  display:flex;flex-wrap:wrap;align-items:center;gap:.3rem 1.3rem;
  font-family:var(--sans);font-size:.76rem}
.prev-bar span{color:var(--faint);letter-spacing:.1em;text-transform:uppercase;
  font-size:.64rem;font-weight:500}
.prev-bar a{color:var(--body);text-decoration:none;padding:.25rem 0;
  border-bottom:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease)}
.prev-bar a:hover{color:var(--white);border-color:var(--magenta)}
body{padding-bottom:2.6rem}

/* ==========================================================
   404
   ========================================================== */
.nf{padding-block:clamp(7.5rem,13vh,10rem) clamp(3rem,6vw,5rem);text-align:center;
  background:radial-gradient(120% 55% at 50% -10%, rgba(214,0,126,.26) 0%, transparent 70%), var(--bg-0)}
.nf__in{position:relative;z-index:2;text-align:center}

.nf .eyebrow{text-align:center}
.nf__sub{font-family:var(--serif);font-size:clamp(1.02rem,.95rem+.45vw,1.3rem);color:var(--white);
  max-width:46ch;margin-left:auto;margin-right:auto;margin-top:1.4rem;line-height:1.6;
  text-align:center}
.nf__dog{width:min(100%,540px);margin:clamp(.5rem,2vw,1.5rem) auto 0;position:relative;z-index:2;
  line-height:0}
.nf__dog video{width:100%;display:block}
/* The rope runs to the top of frame, so fading it out is an improvement —
   he now drops out of darkness rather than out of a visible edge. */
.nf__dog::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:14%;
  background:linear-gradient(to bottom,var(--bg-0) 0%,var(--bg-0) 8%,rgba(0,0,0,.85) 40%,transparent 100%);
  z-index:3;pointer-events:none}
.nf__dog::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(to right,var(--bg-0) 0%,transparent 4%,transparent 96%,var(--bg-0) 100%)}
.nf__after{position:relative;z-index:2}
.nf__note{font-size:.92rem;color:var(--dim);margin-bottom:1.6rem}
.nf__links{list-style:none;margin:0 auto;padding:0;max-width:760px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;text-align:left}
.nf__links a{display:block;background:var(--bg-0);padding:1.2rem 1.3rem;text-decoration:none;
  transition:background .35s var(--ease)}
.nf__links a:hover{background:var(--bg-2)}
.nf__links b{display:block;color:var(--white);font-weight:400;font-size:1rem;margin-bottom:.25rem}
.nf__links span{display:block;font-size:.82rem;color:var(--dim);line-height:1.55}
.nf__foot{margin-top:1.8rem;font-size:.82rem;color:var(--faint);font-family:var(--serif);font-style:italic}

/* ==========================================================
   BRAND BRAIN PAGE
   ========================================================== */
.bb-why{padding-block:clamp(3.5rem,8vw,7rem);background:var(--bg-1)}
.bb-idea{padding-block:clamp(3.5rem,8vw,7rem);
  background:radial-gradient(60% 55% at 100% 20%, rgba(205,22,24,.13) 0%, transparent 62%), var(--bg-0)}
.bb-idea__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.8rem,5vw,5rem);align-items:center}
.bb-idea h2{font-size:clamp(1.5rem,1.15rem+1.9vw,2.6rem);max-width:17ch}
@media(max-width:880px){.bb-idea__grid{grid-template-columns:1fr}}

.bb-vis{position:relative;aspect-ratio:1;display:grid;place-items:center}
.bb-ring{position:absolute;border:1px solid var(--line);border-radius:50%}
.bb-ring:nth-child(1){inset:0;animation:spin 46s linear infinite}
.bb-ring:nth-child(2){inset:13%;animation:spin 34s linear infinite reverse}
.bb-ring:nth-child(3){inset:26%;animation:spin 26s linear infinite}
.bb-ring span{position:absolute;top:-5px;left:50%;width:9px;height:9px;border-radius:50%;background:var(--magenta)}
.bb-ring:nth-child(2) span{background:var(--red)}
.bb-core{position:relative;width:48%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 45%, rgba(214,0,126,.34), rgba(214,0,126,0) 70%);
  text-align:center;padding:1rem}
.bb-core b{display:block;font-size:.98rem;color:var(--white);font-weight:500;line-height:1.35}
.bb-core em{display:block;font-family:var(--serif);font-size:.78rem;color:var(--dim);margin-top:.3rem}
@media(max-width:880px){.bb-vis{max-width:320px;margin-inline:auto}}

.bb-what{padding-block:clamp(3.5rem,8vw,7rem);background:var(--bg-2)}
.bb-what h2{font-size:clamp(1.5rem,1.15rem+1.9vw,2.6rem)}
/* The .bb-grid / .bb-card block that used to live here is gone. "What's in
   it" was restyled onto .split on 17 September and these rules matched
   nothing after that — dead weight in every page's stylesheet. */

/* ==========================================================
   .split — STICKY SPLIT FEATURE
   Promoted from the block library (/templates/, block 04) on
   17 Sept 2026. First component to come out of it.

   A pinned column of framing on one side, a numbered list that
   scrolls past it on the other. Use it where a section has one
   idea and several parts — a process, a contents list, a set of
   stages. Not for two columns of equal weight.

   TWO THINGS THAT WILL BITE YOU:

   1. The sticky element needs somewhere to travel. A grid item's
      containing block is its own grid area, so with
      align-items:start that area shrinks to the content height
      and sticky has nowhere to go — it looks broken but the rule
      is fine. Hence .split__col, which stretches to the row
      height with the sticky child inside it. Do not add
      align-items:start to .split__grid.

   2. Sticky dies inside any ancestor with overflow:hidden,
      because that makes a scroll container. The global section
      rule uses overflow:clip for exactly this reason.

   Add --flip to put the pinned column on the right.
   ========================================================== */
.split__grid{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:clamp(2rem,5vw,5rem);margin-top:clamp(2rem,4vw,3rem)}
.split__col{min-width:0}
.split--flip .split__col{order:2}
.split__pin{position:sticky;top:104px;display:flex;flex-direction:column;gap:1.1rem}
.split__pin h2{margin:0}
.split__pin p{color:var(--dim);line-height:1.62;margin:0;max-width:34ch}

/* The strapline under the heading, in the serif italic that marks every
   other strapline on the site.

   It needs BOTH classes in the selector. `.split__pin p` above is a class
   plus a type selector, which outranks a single class — so a one-class
   rule here would lose and the line would render dim grey instead of
   pink. That is exactly what happened first time.

   The component owns its own strapline rather than borrowing
   .cat-sec__head from the service panels, so the two are not coupled. */
.split__pin .split__strap{font-family:var(--serif);font-style:italic;
  font-weight:500;font-size:clamp(16px,1.35vw,19px);line-height:1.35;
  color:var(--magenta);margin:0;max-width:30ch}

.split__list{min-width:0}
.split__step{display:flex;flex-direction:column;gap:.7rem;
  padding-block:clamp(1.5rem,3vw,2.3rem);border-top:1px solid var(--line)}
.split__step:last-child{border-bottom:1px solid var(--line)}
.split__num{font-family:ui-monospace,Menlo,monospace;font-size:11px;
  letter-spacing:.08em;color:var(--magenta)}
.split__step h3{font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.15;margin:0}
.split__step p{color:var(--dim);line-height:1.7;margin:0;max-width:52ch;
  text-wrap:pretty}
.split__step em{color:var(--body);font-style:italic}

/* --hot RETIRED, 17 Sept.

   One row used to be singled out — a background wash first, then a rule
   down the left edge. Both read as a fault rather than emphasis: every
   other row is identical, so the odd one looks like something has gone
   wrong rather than like something matters.

   A hover state was considered and rejected. These rows are text, not
   links or buttons — putting a hover response on them tells people they
   can click something they cannot.

   The emphasis is not lost. That row's own first sentence is "The part
   almost nobody is building", which is a stronger claim than any line of
   CSS was making. The words were always doing the work.

   The modifier is kept as a no-op so existing markup does not break.
   If a row ever genuinely needs lifting, do it in the copy. */

@media(max-width:820px){
  /* pinning a column on a phone traps the scroll */
  .split__pin{position:static}
  .split--flip .split__col{order:0}
}

.bb-routes{padding-block:clamp(3.5rem,8vw,7rem);background:var(--bg-0)}
.bb-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(1rem,2.5vw,1.8rem);margin-top:clamp(2rem,4vw,3rem)}
.bb-route{border:1px solid var(--line);border-radius:8px;padding:1.8rem 1.7rem;background:var(--bg-1)}
.bb-route h3{font-size:1.15rem;margin-bottom:.8rem}
.bb-route p{font-size:.88rem;line-height:1.75;color:var(--dim)}
.bb-quote{font-family:var(--serif);font-style:italic;color:var(--white)!important;
  border-left:2px solid var(--magenta);padding-left:1rem;margin-top:1.2rem!important}

.bb-living{padding-block:clamp(3.5rem,8vw,7rem);background:var(--bg-1)}
.bb-moat{margin:1.6rem 0 0;font-family:var(--serif);font-size:clamp(1.1rem,1rem+.7vw,1.5rem);
  line-height:1.5;color:var(--white);border-left:2px solid var(--magenta);padding-left:1.2rem}

.bb-price{padding-block:clamp(3.5rem,8vw,7rem);
  background:radial-gradient(62% 50% at 0% 100%, rgba(214,0,126,.13) 0%, transparent 62%), var(--bg-0)}
.bb-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(1rem,2.5vw,1.7rem);margin-top:clamp(2rem,4vw,3rem)}
.bb-note{margin-top:1.6rem;font-size:.85rem;color:var(--faint);max-width:64ch;font-style:italic;
  font-family:var(--serif)}

/* Links to pages that do not exist yet — visible, but plainly not ready. */
/* Links to pages that do not exist yet. Text links dim quietly.
   Buttons are left alone — a greyed-out call to action reads as broken. */
.soon{opacity:.5;cursor:default;pointer-events:none}
.btn.soon,.cta.soon,.lb__cta.soon{opacity:1;cursor:pointer;pointer-events:auto}

/* ==========================================================
   CONTACT
   ========================================================== */
.ct{padding-block:clamp(7.5rem,13vh,10rem) clamp(3.5rem,8vw,7rem);
  background:radial-gradient(120% 55% at 50% -10%, rgba(214,0,126,.26) 0%, transparent 70%), var(--bg-0)}
.ct__in{position:relative;z-index:2;text-align:center}

.ct__sub{font-family:var(--serif);font-size:clamp(1.02rem,.95rem+.45vw,1.3rem);color:var(--white);
  max-width:52ch;margin:1.4rem auto 0;line-height:1.6}
.ct__grid{position:relative;z-index:2;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;
  margin-top:clamp(2.5rem,5vw,4rem)}
.ct__card{background:var(--bg-0);padding:1.8rem 1.7rem;text-decoration:none;display:block;
  transition:background .35s var(--ease)}
a.ct__card:hover{background:var(--bg-2)}
.ct__label{display:block;font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--magenta);font-weight:500;margin-bottom:.7rem}
.ct__card b{display:block;color:var(--white);font-size:1.05rem;font-weight:400;line-height:1.5;
  margin-bottom:.7rem}
.ct__note{display:block;font-size:.83rem;color:var(--dim);line-height:1.7}
.ct__after{position:relative;z-index:2;margin-top:clamp(2.5rem,5vw,4rem)}
.ct__ask{max-width:60ch}

/* .ct__film — the header film, same job as .hero__dog on the service pages.

   Sized with the SAME formula as .hero__dog on the service pages, so this
   header matches the rest of the site rather than being a smaller cousin.

   It was capped much harder at first (52svh, 560px) to keep the phone card
   on the first screen — this page exists to get somebody to ring. Mark
   asked for it to match the other pages, which is the right call for
   consistency: the trade-off is that on a laptop the contact cards now sit
   just below the fold, exactly as the service pages' content does. If that
   ever needs reversing, the cap is the only line to change.

   No ::before or ::after. Every other film container on the site fades its
   edges to #000; this one must not, because .ct lays a magenta radial glow
   over exactly this part of the page and a fade to black would draw a dark
   box against the pink. The clip's edges are baked black at encode instead
   — see the comment beside the <video> in contact.html. If you swap the
   clip, bake its edges too or you will get that box. */
.ct__film{position:relative;z-index:2;line-height:0;
  margin:clamp(1.2rem,3vw,2.2rem) auto 0;
  width:min(96vw, calc(min(72svh, 100svh - 220px) * 16 / 9));
  aspect-ratio:16/9}
.ct__film video{width:100%;height:100%;object-fit:contain;display:block;
  background:transparent}
.ct__ask h2{font-size:clamp(1.3rem,1.05rem+1.3vw,1.9rem);margin-bottom:.8rem}
.ct__ask p{font-size:.92rem;color:var(--dim)}
.ct__ask ul{list-style:none;margin:1.2rem 0;padding:0;display:grid;gap:.6rem}
.ct__ask li{font-size:.92rem;color:var(--body);padding-left:1.2rem;position:relative;line-height:1.65}
.ct__ask li::before{content:"";position:absolute;left:0;top:.65em;width:5px;height:5px;
  border-radius:50%;background:var(--magenta)}
.ct__foot{font-family:var(--serif);font-style:italic;color:var(--faint);font-size:.88rem}

/* The chess clip carries a spotlight at the top of frame. Both terriers sit
   low in the shot, so a deeper fade is safe here than on the homepage. */
.bb-hero .hero__dog::before{height:5%;
  background:linear-gradient(to bottom,var(--bg-0) 0%,rgba(0,0,0,.55) 55%,transparent 100%)}

/* The cameo appears from behind the header, so its top edge is visible too. */
#cameo{line-height:0}
#cameo::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:16%;
  background:linear-gradient(to bottom,var(--bg-0) 0%,rgba(0,0,0,.8) 45%,transparent 100%);
  z-index:3;pointer-events:none}

/* The parachute clip: canopy fills the top of frame as he enters, so the fade
   must stay shallow or it eats the arrival. */
.camp__vid{position:relative;line-height:0}
/* He enters as a small figure at the very top of frame, so the top fade
   has to be shallow or it swallows the arrival entirely. */
.camp__vid::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3%;
  background:linear-gradient(to bottom,var(--bg-0) 0%,rgba(0,0,0,.45) 50%,transparent 100%);
  z-index:3;pointer-events:none}
.camp__vid::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(to right,var(--bg-0) 0%,transparent 4%,transparent 96%,var(--bg-0) 100%)}

/* ==========================================================
   MOBILE MENU
   Drawer-style, matching the language of the services list.
   ========================================================== */
.burger{display:none;flex:none;width:44px;height:44px;background:none;border:0;
  cursor:pointer;padding:0;position:relative;margin-left:auto}
.burger span{position:absolute;left:12px;width:20px;height:1.5px;background:var(--white);
  transition:transform .4s var(--ease),opacity .3s var(--ease)}
.burger span:nth-child(1){top:19px}
.burger span:nth-child(2){top:25px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:75;background:var(--bg-0);overflow-y:auto;
  padding:5.5rem var(--gut) 3rem;opacity:0;transition:opacity .35s var(--ease);
  -webkit-overflow-scrolling:touch}
.menu.open{opacity:1}
.menu__in{max-width:600px;margin-inline:auto}
.menu__grp{border-bottom:1px solid var(--line)}
.menu__grp:first-child{border-top:1px solid var(--line)}
.menu__h{width:100%;background:none;border:0;padding:1.15rem 0;cursor:pointer;
  font-family:inherit;display:flex;align-items:center;justify-content:space-between;
  color:var(--magenta);font-size:.72rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase}
.menu__chev{flex:none;width:.6rem;height:.6rem;border-right:1.5px solid var(--faint);
  border-bottom:1.5px solid var(--faint);transform:rotate(45deg) translateY(-.1rem);
  transition:transform .4s var(--ease),border-color .3s var(--ease)}
.menu__h[aria-expanded="true"] .menu__chev{transform:rotate(225deg) translateY(-.1rem);
  border-color:var(--magenta)}
.menu__list{list-style:none;margin:0;padding:0;overflow:hidden;max-height:0;opacity:0;
  transition:max-height .45s var(--ease),opacity .35s var(--ease),padding .45s var(--ease)}
.menu__list.open{max-height:26rem;opacity:1;padding-bottom:1rem}
.menu__list a{display:block;padding:.6rem 0;text-decoration:none;color:var(--white);
  font-size:1.05rem;font-weight:300;transition:color .3s var(--ease),padding-left .35s var(--ease)}
.menu__list a:hover,.menu__list a:active{color:var(--magenta);padding-left:.5rem}
.menu__cta{display:block;text-align:center;background:var(--accent);color:var(--white);
  text-decoration:none;padding:.95em 1.5em;border-radius:5px;font-size:.9rem;
  font-weight:500;margin-top:2rem}
.menu__foot{text-align:center;margin-top:1.4rem;font-size:.8rem;color:var(--faint)}

@media(max-width:1040px){
  .burger{display:block}
  .pill{padding-right:.35rem}
}
@media(min-width:1041px){
  .menu{display:none!important}
}
body.menu-open{overflow:hidden}

/* --- category strapline and summary, above each service list --- */


/* --- category videos: same box as the stills they replace --- */
/* (stale four-column tile rules removed — they were forcing object-fit:cover
   onto the panel films, which is why they looked cropped) */

/* ==========================================================
   THANK YOU
   ========================================================== */
.ty{padding-block:clamp(7.5rem,13vh,10rem) clamp(3rem,6vw,5rem);text-align:center;
  background:radial-gradient(120% 55% at 50% -10%, rgba(214,0,126,.26) 0%, transparent 70%), var(--bg-0)}
.ty__in{position:relative;z-index:2}

.ty__sub{font-family:var(--serif);font-size:clamp(1.02rem,.95rem+.45vw,1.3rem);color:var(--white);
  max-width:44ch;margin:1.4rem auto 0;line-height:1.6}
.ty__dog{position:relative;z-index:2;width:min(100%,720px);
  margin:clamp(.5rem,2vw,1.5rem) auto 0;line-height:0}
.ty__dog video{width:100%;display:block}
/* rain reaches the top of frame, so keep this shallow */
.ty__dog::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:5%;
  background:linear-gradient(to bottom,var(--bg-0) 0%,rgba(0,0,0,.7) 50%,transparent 100%);
  z-index:3;pointer-events:none}
.ty__dog::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(to right,var(--bg-0) 0%,transparent 4%,transparent 96%,var(--bg-0) 100%)}
.ty__after{position:relative;z-index:2}
.ty__note{font-family:var(--serif);font-style:italic;color:var(--faint);font-size:.92rem;
  margin-top:1.2rem}
.ty__meanwhile{max-width:720px;margin:clamp(2rem,4vw,3rem) auto 0;text-align:left}
.ty__meanwhile h2{font-size:1.15rem;margin-bottom:1rem;text-align:center}
.ty__meanwhile ul{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.ty__meanwhile a{display:block;background:var(--bg-0);padding:1.1rem 1.3rem;text-decoration:none;
  transition:background .35s var(--ease)}
.ty__meanwhile a:hover{background:var(--bg-2)}
.ty__meanwhile b{display:block;color:var(--white);font-weight:400;font-size:1rem;margin-bottom:.2rem}
.ty__meanwhile span{display:block;font-size:.82rem;color:var(--dim);line-height:1.55}
.ty__foot{margin-top:1.8rem;font-size:.88rem;color:var(--dim)}
.ty__foot a{color:var(--white);border-bottom:1px solid var(--magenta);text-decoration:none;padding-bottom:1px}

/* ==========================================================
   ABOUT
   ========================================================== */
.ab-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.8rem,5vw,5rem);align-items:start}
.ab-split h2{font-size:clamp(1.5rem,1.15rem+1.9vw,2.6rem);max-width:16ch}
@media(max-width:880px){.ab-split{grid-template-columns:1fr}}
.ab-more{font-size:.82rem;font-weight:500;color:var(--magenta);text-decoration:none;
  border-bottom:1px solid rgba(214,0,126,.35);padding-bottom:1px;transition:border-color .3s var(--ease)}
.ab-more:hover{border-color:var(--magenta)}

.ab-story{padding-block:clamp(3.5rem,8vw,7rem);background:var(--bg-1)}
.ab-fig{margin:0;background:var(--bg-0);border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.ab-fig img{width:100%;display:block}
/* The film variant of .ab-fig. 16:9 rather than the portrait still it
   replaced, so the box is declared here and the video fills it. */
.ab-fig--film{aspect-ratio:16/9;line-height:0}
.ab-fig--film video{width:100%;height:100%;object-fit:cover;display:block}

.ab-quote{padding-block:clamp(4.5rem,10vw,8rem);
  background:radial-gradient(70% 60% at 20% 30%, rgba(205,22,24,.13) 0%, transparent 65%), var(--bg-0)}

/* .stmt — the scroll-reveal statement, promoted out of the block library at
   /templates-2/ (block 06) so it survives when those pages are deleted at
   launch. One sentence, set large, whose words light up as it crosses the
   viewport. It is a full stop, not a paragraph — if it needs two sentences
   it is the wrong component.

   The words are NOT wrapped in spans in the markup, which is where this
   differs from the library version. There the spans ship pre-dimmed at 16%
   opacity, so with JavaScript off the statement is very nearly invisible.
   Here site.js splits the text and adds the spans itself, so the no-JS
   fallback is plain legible white type. Write the sentence as a sentence.

   Lighting is one-way. Re-dimming on the way back up reads as a fault. */
.stmt{font-family:var(--sans);font-weight:400;letter-spacing:-.022em;
  font-size:clamp(1.55rem,4.2vw,3.1rem);line-height:1.24;max-width:22ch;
  margin:clamp(1.6rem,3vw,2.5rem) 0 0;color:var(--white);text-wrap:pretty}
.stmt span{color:rgba(255,255,255,.16);transition:color .35s linear}
.stmt span.lit{color:var(--white)}
@media(prefers-reduced-motion:reduce){
  .stmt span,.stmt span.lit{color:var(--white);transition:none}
}

/* .ab-frank / .ab-three / .ab-card removed. The About page's Proud, Bold
   and Confident block was rebuilt as full-width .frank-sec panels with the
   three terrier images, and these card rules have matched nothing since. */

.ab-talent{padding-block:clamp(3.5rem,8vw,7rem);background:var(--bg-0)}
.ab-pair{display:grid;gap:clamp(.7rem,1.5vw,1.1rem)}
.ab-pair img{width:100%;display:block;border-radius:6px;border:1px solid var(--line)}

.ab-exp{padding-block:clamp(3.5rem,8vw,7rem);background:var(--bg-1)}
.ab-big{margin-bottom:1.2rem}
.ab-big b{display:block;font-size:clamp(3rem,2rem+4vw,5.5rem);font-weight:500;line-height:1;
  letter-spacing:-.045em;font-variant-numeric:tabular-nums;
  background:var(--accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.ab-big span{display:block;font-size:.9rem;color:var(--dim);margin-top:.6rem;max-width:30ch;line-height:1.6}

.ab-team{padding-block:clamp(3.5rem,8vw,7rem);background:var(--bg-0)}
.ab-team h2{font-size:clamp(1.5rem,1.15rem+1.9vw,2.6rem);margin-bottom:clamp(2rem,4vw,3rem)}
.ab-people{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(1rem,2.5vw,1.8rem)}
.ab-person__pic{aspect-ratio:1;background:var(--bg-3);border:1px solid var(--line);
  border-radius:8px;overflow:hidden;margin-bottom:1rem}
.ab-person__pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.ab-person:hover .ab-person__pic img{transform:scale(1.05)}
.ab-person h3{font-size:1.05rem;margin-bottom:.2rem}
.ab-role{font-size:.8rem;color:var(--magenta);margin:0}

.ab-values{padding-block:clamp(3.5rem,8vw,7rem);
  background:radial-gradient(62% 50% at 100% 20%, rgba(214,0,126,.12) 0%, transparent 62%), var(--bg-2)}
.ab-values h2{font-size:clamp(1.5rem,1.15rem+1.9vw,2.6rem);max-width:22ch}
.ab-vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;
  overflow:hidden;margin-top:clamp(2rem,4vw,3rem)}
.ab-val{background:var(--bg-0);padding:1.8rem 1.7rem}
.ab-val h3{font-size:1.25rem;margin-bottom:.5rem}
.ab-def{font-family:var(--serif);font-style:italic;color:var(--white);font-size:.9rem;
  line-height:1.6;margin-bottom:.8rem}
.ab-val p{font-size:.85rem;color:var(--dim);line-height:1.7;margin:0}

.ab-enjoy{padding-block:clamp(3.5rem,8vw,7rem);background:var(--bg-0)}

.ab-work{padding-block:clamp(3.5rem,8vw,7rem) clamp(2rem,4vw,3rem);background:var(--bg-1)}
.ab-work h2{font-size:clamp(1.5rem,1.15rem+1.9vw,2.6rem);max-width:20ch}
.ab-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(.7rem,1.5vw,1.1rem);padding:clamp(1.5rem,3vw,2.5rem) var(--gut) 0}
.ab-strip img{width:100%;display:block;border-radius:6px;border:1px solid var(--line)}

.ab-mission{padding-block:clamp(3.5rem,8vw,7rem);background:var(--bg-2)}
.ab-mission h2{font-size:clamp(1.6rem,1.15rem+2.2vw,2.9rem);max-width:18ch}

/* the About hero carries no video, so its headline can breathe */
.ab-hero h1{max-width:26ch}


/* ==========================================================
   PAW CURSOR
   Mouse users only. Touch devices ignore it entirely, and it is
   switched off for anyone who prefers reduced motion or is using
   a coarse pointer. Text fields keep the standard caret so the
   affordance is not lost.
   ========================================================== */
@media (hover:hover) and (pointer:fine) {
  body {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%0A%3Cg%20fill%3D%22%23FFFFFF%22%20stroke%3D%22rgba%280%2C0%2C0%2C.55%29%22%20stroke-width%3D%221.1%22%3E%0A%3Cellipse%20cx%3D%229.4%22%20cy%3D%2210.2%22%20rx%3D%223.5%22%20ry%3D%224.4%22%20transform%3D%22rotate%28-18%209.4%2010.2%29%22%2F%3E%0A%3Cellipse%20cx%3D%2216%22%20cy%3D%227.6%22%20rx%3D%223.6%22%20ry%3D%224.6%22%2F%3E%0A%3Cellipse%20cx%3D%2222.6%22%20cy%3D%2210.2%22%20rx%3D%223.5%22%20ry%3D%224.4%22%20transform%3D%22rotate%2818%2022.6%2010.2%29%22%2F%3E%0A%3Cellipse%20cx%3D%2227%22%20cy%3D%2216.6%22%20rx%3D%223.1%22%20ry%3D%223.9%22%20transform%3D%22rotate%2834%2027%2016.6%29%22%2F%3E%0A%3Cpath%20d%3D%22M16%2015.4c4.6%200%208.4%203.2%208.4%207.1%200%203.3-2.8%205.2-5.6%205.2-1.2%200-1.9-.5-2.8-.5s-1.6.5-2.8.5c-2.8%200-5.6-1.9-5.6-5.2%200-3.9%203.8-7.1%208.4-7.1z%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E") 6 4, auto;
  }
  a, button, .srv, .proj, .cs-shot, summary,
  [role="button"], .filters button, .burger, .menu__h {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%0A%3Cg%20fill%3D%22%23D6007E%22%20stroke%3D%22rgba%28255%2C255%2C255%2C.75%29%22%20stroke-width%3D%221.1%22%3E%0A%3Cellipse%20cx%3D%229.4%22%20cy%3D%2210.2%22%20rx%3D%223.5%22%20ry%3D%224.4%22%20transform%3D%22rotate%28-18%209.4%2010.2%29%22%2F%3E%0A%3Cellipse%20cx%3D%2216%22%20cy%3D%227.6%22%20rx%3D%223.6%22%20ry%3D%224.6%22%2F%3E%0A%3Cellipse%20cx%3D%2222.6%22%20cy%3D%2210.2%22%20rx%3D%223.5%22%20ry%3D%224.4%22%20transform%3D%22rotate%2818%2022.6%2010.2%29%22%2F%3E%0A%3Cellipse%20cx%3D%2227%22%20cy%3D%2216.6%22%20rx%3D%223.1%22%20ry%3D%223.9%22%20transform%3D%22rotate%2834%2027%2016.6%29%22%2F%3E%0A%3Cpath%20d%3D%22M16%2015.4c4.6%200%208.4%203.2%208.4%207.1%200%203.3-2.8%205.2-5.6%205.2-1.2%200-1.9-.5-2.8-.5s-1.6.5-2.8.5c-2.8%200-5.6-1.9-5.6-5.2%200-3.9%203.8-7.1%208.4-7.1z%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E") 6 4, pointer;
  }
  input, textarea, select { cursor: text; }
  .lb, .lb__nav, .lb__close { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%0A%3Cg%20fill%3D%22%23D6007E%22%20stroke%3D%22rgba%28255%2C255%2C255%2C.75%29%22%20stroke-width%3D%221.1%22%3E%0A%3Cellipse%20cx%3D%229.4%22%20cy%3D%2210.2%22%20rx%3D%223.5%22%20ry%3D%224.4%22%20transform%3D%22rotate%28-18%209.4%2010.2%29%22%2F%3E%0A%3Cellipse%20cx%3D%2216%22%20cy%3D%227.6%22%20rx%3D%223.6%22%20ry%3D%224.6%22%2F%3E%0A%3Cellipse%20cx%3D%2222.6%22%20cy%3D%2210.2%22%20rx%3D%223.5%22%20ry%3D%224.4%22%20transform%3D%22rotate%2818%2022.6%2010.2%29%22%2F%3E%0A%3Cellipse%20cx%3D%2227%22%20cy%3D%2216.6%22%20rx%3D%223.1%22%20ry%3D%223.9%22%20transform%3D%22rotate%2834%2027%2016.6%29%22%2F%3E%0A%3Cpath%20d%3D%22M16%2015.4c4.6%200%208.4%203.2%208.4%207.1%200%203.3-2.8%205.2-5.6%205.2-1.2%200-1.9-.5-2.8-.5s-1.6.5-2.8.5c-2.8%200-5.6-1.9-5.6-5.2%200-3.9%203.8-7.1%208.4-7.1z%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E") 6 4, pointer; }
}

/* Print pieces are portrait. Cropping them to a landscape card cuts the
   headline off, so they letterbox on black instead of filling the frame. */
.proj__i[data-fit="contain"] img,
.wcard__i[data-fit="contain"] img{object-fit:contain;background:var(--bg-0)}
.proj__i[data-fit="contain"],
.wcard__i[data-fit="contain"]{background:var(--bg-0)}

/* Safari draws its own play button over any video it decides not to
   autoplay. These are decorative loops with no controls, so hide it. */
video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
video::-webkit-media-controls{display:none!important}
video::-webkit-media-controls-panel{display:none!important}

/* ==========================================================
   IMAGE ASPECT RATIO
   Every image carries width and height attributes so the browser
   can reserve space and the page does not jump as things load.
   But an attribute height wins over an unset CSS height, so any
   image scaled with width:100% also needs height:auto or it gets
   squashed to the attribute's pixel height.
   ========================================================== */
.what__side img,
.row__m img,
.cs-lead img,
.cs-shot img,
.ab-fig img,
.ab-pair img,
.ab-strip img,
.lb__fig img,
.nf__links img{height:auto}

/* Images that deliberately fill a fixed box keep their own sizing. */
.proj__i img,.wcard__i img,
.ab-person__pic img,.ab-card__pic img,.member__pic video{height:100%}

/* ==========================================================
   WORK CARD ZOOM
   The card grows from where it sits to a larger centred version,
   rather than a separate modal appearing over the top. The element
   itself moves, so it reads as the picture opening out.
   ========================================================== */
.zoom-veil{position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.9);
  backdrop-filter:blur(6px);opacity:0;pointer-events:none;
  transition:opacity .45s var(--ease)}
.zoom-veil.on{opacity:1;pointer-events:auto;cursor:zoom-out}

.wcard__i{cursor:zoom-in}
.wcard__i.zooming{position:fixed;z-index:160;margin:0;
  transition:top .55s var(--ease),left .55s var(--ease),
             width .55s var(--ease),height .55s var(--ease),
             border-radius .55s var(--ease);
  will-change:top,left,width,height}
.wcard__i.zooming img{object-fit:contain;background:var(--bg-0)}
.wcard__i.zoomed{border-radius:8px}
/* the space the card leaves behind, so the strip does not collapse */
.wcard__ghost{visibility:hidden}

.zoom-cap{position:fixed;left:0;right:0;bottom:0;z-index:161;
  padding:1.2rem clamp(1rem,4vw,3rem) 1.6rem;text-align:center;
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .4s var(--ease) .2s,transform .4s var(--ease) .2s;
  background:linear-gradient(to top,rgba(0,0,0,.85),transparent)}
.zoom-cap.on{opacity:1;transform:none}
.zoom-cap b{display:block;color:var(--white);font-size:1.05rem;font-weight:400;margin-bottom:.25rem}
.zoom-cap span{display:block;font-size:.85rem;color:var(--dim);max-width:52ch;margin-inline:auto;line-height:1.6}
.zoom-cap em{display:block;font-size:.72rem;color:var(--faint);font-style:normal;
  letter-spacing:.1em;text-transform:uppercase;margin-top:.6rem}

@media(prefers-reduced-motion:reduce){
  .wcard__i.zooming{transition:none}
  .zoom-veil,.zoom-cap{transition:none}
}

/* ==========================================================
   SERVICE DRAWERS
   The row shows the service name and its one-line strapline.
   The chevron opens the fuller description and the Explore link.
   The detail is always in the HTML — collapsed, never removed —
   so search engines and AI crawlers read all of it.
   ========================================================== */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.srv{width:100%;background:none;border:0;text-align:left;cursor:pointer;
  padding:.85rem 0;font-family:inherit;color:inherit;display:block;
  -webkit-appearance:none;appearance:none}
.srv__row{display:flex;align-items:baseline;gap:1rem}
.srv__name{font-family:var(--sans);font-size:clamp(17px,1.4vw,20px);font-weight:400;
  color:var(--white);letter-spacing:-.3px;line-height:1.35;
  transition:color .3s var(--ease)}
.srv__chev{margin-left:auto;flex:none;width:.66rem;height:.66rem;
  border-right:1.5px solid var(--faint);border-bottom:1.5px solid var(--faint);
  transform:rotate(45deg) translateY(-.12rem);
  transition:transform .45s var(--ease),border-color .3s var(--ease)}
.srv__line{display:block;font-family:var(--ui);font-size:14.5px;color:var(--dim);
  margin-top:.35rem;line-height:22px;font-weight:500}
.srv:hover .srv__name,.srv[aria-expanded="true"] .srv__name{color:var(--white)}
.srv:hover .srv__chev{border-color:var(--magenta)}
.srv[aria-expanded="true"] .srv__chev{transform:rotate(225deg) translateY(-.12rem);
  border-color:var(--magenta)}

.srv__more{overflow:hidden;max-height:0;opacity:0;
  transition:max-height .55s var(--ease),opacity .4s var(--ease),padding .55s var(--ease)}
.srv__more.open{max-height:32rem;opacity:1;padding-bottom:1.2rem}
.srv__more p{font-family:var(--ui);font-size:14.5px;color:var(--dim);line-height:22px;
  margin:0 0 .9rem}
.srv__more a{font-family:var(--ui);font-size:14px;font-weight:700;color:var(--magenta);
  text-decoration:none;border-bottom:1px solid rgba(214,0,126,.35);padding-bottom:1px;
  transition:border-color .3s var(--ease)}
.srv__more a:hover{border-color:var(--magenta)}

/* .cat-cta — the way out of a category panel for someone who has read
   enough and wants to talk.

   Deliberately NOT the gradient .btn. Within the run of service panels the
   Full service button is the only one, and being the only one is what makes
   it read as the flagship offer. Seven more and it is just another pink
   slab. (There are other .btn instances further down the homepage, but they
   are in separate bands with content between them, so they do not compete.)

   Sits in the same family as the "Explore X" links inside the drawers —
   magenta, underlined, arrow — but one step up in weight and size because
   it speaks for the whole category rather than one service.

   Each link carries ?about=<category> so the contact form can pre-fill and
   the enquiry says which category brought them. That is the part that earns
   its keep: it tells you which of the seven actually generates work. */
/* margin-bottom 0 because this is a <p> and would otherwise carry the
   body paragraph margin at the foot of the column, where nothing follows
   it. Note for anyone measuring: .cat-sec__inner reports a 20px overflow
   on every panel whether this element is present or not. That is the .rv
   reveal transform — un-revealed children sit on translateY(20px) — not
   a layout fault, and not caused by this. */
.cat-cta{margin:1.4rem 0 0}
/* The link is inline, NOT inline-flex. Three of the seven labels wrap to two
   lines on a phone, and as a flex item the arrow stayed pinned to the end of
   the first line with the text running on underneath it. Inline keeps the
   arrow attached to the last word, and the non-breaking space stops it from
   ever being orphaned onto a line of its own. */
.cat-cta a{font-family:var(--ui);font-size:15px;font-weight:700;color:var(--magenta);
  text-decoration:none;line-height:1.5;
  border-bottom:1px solid rgba(214,0,126,.35);padding-bottom:2px;
  transition:border-color .3s var(--ease)}
.cat-cta a::after{content:"\00a0\2192";display:inline-block;
  transition:transform .3s var(--ease)}
.cat-cta a:hover{border-color:var(--magenta)}
.cat-cta a:hover::after{transform:translateX(4px)}

/* Written in by site.js on the contact page when it arrives with
   ?about=<category>. Absent otherwise, so nothing reserves space for it. */
.ct__about{font-family:var(--serif);font-style:italic;color:var(--magenta);
  font-size:clamp(15px,1.2vw,17px);margin:.9rem 0 0}

/* ==========================================================
   PAGE HEADERS — the hero treatment applied across the site
   Every page header now uses the same type scale and the same
   larger film size as the homepage, with the same edge fades.
   ========================================================== */

/* Case study header */
.cs-hero{padding-block:clamp(6.5rem,11vh,8rem) 0;
  background:radial-gradient(120% 60% at 50% -10%,
    rgba(214,0,126,.26) 0%, rgba(205,22,24,.08) 45%, transparent 72%), var(--bg-0)}
.cs-hero h1{max-width:22ch}
.cs-hero .eyebrow{font-size:16.5px}
.cs-meta b{font-family:var(--sans);font-weight:400}
.cs-meta span{font-family:var(--ui);font-weight:700}
/* the lead image gets the same containment as a header film */
.cs-lead{margin:clamp(2rem,5vw,3.5rem) auto 0;padding:0;background:var(--bg-0);
  position:relative;width:min(96vw,1400px);line-height:0}
.cs-lead::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:6%;
  background:linear-gradient(to bottom,var(--bg-0) 0%,rgba(0,0,0,.7) 45%,transparent 100%);
  z-index:3;pointer-events:none}
.cs-lead::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to right,var(--bg-0) 0%,transparent 3%,transparent 97%,var(--bg-0) 100%)}

/* About header */
.ab-hero h1{max-width:24ch}

/* Brand Brain header — the chess clip runs brighter at the top */

/* 404 — bigger, matching the hero scale */
.nf__dog{width:min(96vw, calc(min(60vh, 100vh - 300px) * 16 / 9));
  height:min(60vh, calc(100vh - 300px));
  margin:clamp(.5rem,2vw,1.5rem) auto 0;position:relative;z-index:2;line-height:0}
.nf__dog video{width:100%;height:100%;object-fit:contain;display:block;background:var(--bg-0)}

.nf__sub{font-family:var(--serif);font-size:clamp(15.5px,1.25vw,18px);line-height:1.6;
  color:var(--serif-ink)}

/* Thank you — same treatment */
.ty__dog{width:min(96vw, calc(min(62vh, 100vh - 300px) * 16 / 9));
  height:min(62vh, calc(100vh - 300px))}
.ty__dog video{object-fit:contain;background:var(--bg-0)}

.ty__sub{font-family:var(--serif);font-size:clamp(15.5px,1.25vw,18px);line-height:1.6;
  color:var(--serif-ink)}

/* Contact header */

.ct__sub{font-family:var(--serif);font-size:clamp(15.5px,1.25vw,18px);line-height:1.6;
  color:var(--serif-ink)}
.ct__card b{font-family:var(--sans);font-weight:400;font-size:clamp(17px,1.4vw,20px)}
.ct__note{font-family:var(--ui);font-weight:500;font-size:14.5px;line-height:22px}

/* section headings across every page follow the same scale */
.cs-split h2,.ab-split h2,.bb-idea h2,.bb-what h2,.bb-routes h2,.bb-price h2,
.ab-team h2,.ab-values h2,.ab-work h2,.ab-mission h2,
.cs-scope h2,.work__top h2,.intro h2,.end h2,.camp h2{
  font-size:clamp(26px,2.5vw,36px);line-height:1.08;letter-spacing:-.6px}
.end h2,.camp h2{font-size:clamp(30px,3.4vw,48px);line-height:1.1;letter-spacing:-.9px}

/* Sideways scroll is contained on the sections that can cause it, rather
   than on body — overflow on body propagates to the viewport and that is
   what interferes with position:sticky. Dave's file does the same thing
   on an inner wrapper. */
section,footer,header{max-width:100%}
.work,.cat-sec,.camp,.prog{overflow-x:clip}

/* The About film is a retro TV set on a genuinely black field — measured
   0.0 mean, 0 max on every edge — so it needs no fade at all. Adding one
   would only dull the set's colours where they meet the page. */
.ab-hero__dog::before,
.ab-hero__dog::after{display:none}
.ab-hero__dog{width:min(96vw, calc(min(64svh, 100svh - 300px) * 16 / 9))}

/* ==========================================================
   FRANKLY DIFFERENT — Proud · Bold · Confident
   The same overlapping sticky panels as the homepage services,
   so the three values get the room they deserve rather than
   sitting as three small cards.
   ========================================================== */
.frank-intro{padding-block:clamp(4rem,9vw,7rem) clamp(2.5rem,5vw,4rem);
  background:var(--bg-0);position:relative;z-index:1}
.frank-intro h2{max-width:20ch}
.frank-intro .lede{max-width:48ch;margin-top:1rem}

.frank-sec .cat-sec__media .cat__pic{width:min(92%,560px);aspect-ratio:1;
  border-radius:10px}
.frank-sec .cat-sec__media img{width:100%;height:100%;object-fit:cover;display:block}
/* these are photographs rather than film on black, so they get a soft
   vignette instead of the edge fades the clips use */
.frank-sec .cat-sec__media .cat__pic::before{display:none}
.frank-sec .cat-sec__media .cat__pic::after{content:"";position:absolute;inset:0;
  z-index:2;pointer-events:none;border-radius:10px;
  background:radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(0,0,0,.45) 100%)}
.frank-sec .cat-sec__label{margin-bottom:1rem}
.frank-sec .cat-sec__sum{font-family:var(--serif);font-size:clamp(17px,1.5vw,21px);
  line-height:1.55;color:var(--serif-ink);max-width:34ch;margin:0}

/* ==========================================================
   .csx — CASE STUDY HUB
   The index at /marketing-case-studies-edinburgh/. Cards are
   generated from src/_data/caseStudies.json, so this styles a
   list of unknown length — hence auto-fit rather than a fixed
   column count. Whole card is the link; nothing nested inside
   it is interactive, so it stays a single tab stop.
   ========================================================== */
.csx{position:relative;z-index:2;padding-block:clamp(2.5rem,6vw,5rem) clamp(4rem,9vw,7rem);
  background:var(--bg-0)}
.csx__grid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  gap:clamp(1.5rem,3vw,2.6rem)}
.csx__item{min-width:0}
.csx__card{display:flex;flex-direction:column;height:100%;text-decoration:none;
  border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg-1);
  transition:border-color .4s var(--ease),transform .4s var(--ease)}
.csx__card:hover{border-color:var(--magenta);transform:translateY(-3px)}
.csx__pic{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bg-0);line-height:0}
.csx__pic img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease)}
.csx__card:hover .csx__pic img{transform:scale(1.04)}
.csx__body{display:flex;flex-direction:column;gap:.5rem;padding:1.5rem 1.5rem 1.7rem}
.csx__sector{font-family:var(--ui);font-size:.66rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--magenta)}
.csx__name{font-family:var(--sans);font-weight:400;font-size:clamp(1.15rem,1rem+.7vw,1.5rem);
  line-height:1.15;letter-spacing:-.3px;color:var(--white)}
.csx__line{font-family:var(--ui);font-weight:500;font-size:.88rem;line-height:1.65;color:var(--dim)}
.csx__svc{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
.csx__svc span{font-family:var(--ui);font-size:11px;letter-spacing:.04em;color:var(--faint);
  border:1px solid var(--line);border-radius:3px;padding:.24em .6em}
.csx__more{margin-top:clamp(2.5rem,5vw,3.5rem);font-family:var(--serif);font-style:italic;
  font-size:clamp(15px,1.2vw,17px);line-height:1.6;color:var(--dim);max-width:56ch}
.csx__more a{color:var(--magenta);text-decoration:none;
  border-bottom:1px solid rgba(214,0,126,.35);transition:border-color .3s var(--ease)}
.csx__more a:hover{border-color:var(--magenta)}