/* ============================================================
   MEDIA BRIDGE — "CROSSING" edition (v2)
   A fresh design direction, built against seven references:

   Seed .......... education-first Learn hub, topic sub-nav,
                   advisory board, science-grade credibility
   Curology ...... the quiz is the door, not a contact form
   Vacation ...... one brand system on every surface, no drift
   Our Place ..... restrained editorial serif + real photography
   Hiya .......... dense copy that still breathes; checkmarks
                   and small icon accents beside the words
   Fable Health .. the icon system carries the story
   Ro ............ short, seamless, beautifully shot motion

   The three grounds are NIGHT, PAPER and PHOTOGRAPH. The
   photograph is a ground, not a decoration: every section
   change happens inside a full-bleed Twin Cities frame.
   No warm neutrals anywhere. All the warmth comes from the
   photography, which is where it is actually beautiful.
   ============================================================ */

:root{
  --navh:72px;
  /* grounds */
  --night:#1A1617;
  --night-2:#241F20;
  --night-3:#2C2627;
  --night-line:#3B3536;
  --paper:#FFFFFF;
  --paper-2:#F4F3F3;
  --line:#E2E0E0;

  /* ink */
  --ink:#241F20;
  --body:#4F4C4D;
  --muted:#6C6869;   /* was #767273: 4.29:1 on the off-white ground, under AA */
  --on-night:#F5F3F3;
  --on-night-mid:#BFB9BA;
  --on-night-dim:#8A8384;

  /* brand accents (MB mini brand guide) */
  --cinnabar:#FF4931;   /* the icon-circle colour, the energy */
  --cinnabar-lt:#FF6A5F;
  --rose:#BC0C42;       /* action on light grounds */
  --rose-hover:#9E0035;
  --forest:#0A7F4E;
  --lime:#73C632;
  --grape:#6646C1;

  --sans:'Montserrat',system-ui,-apple-system,sans-serif;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;

  --pad:clamp(20px,5vw,64px);
  --wide:1280px;
  --read:660px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--cinnabar);outline-offset:3px;border-radius:2px}

/* ---------- type scale ---------- */
.d1,.d2,.d3{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;line-height:1.03;margin:0}
.d1{font-size:clamp(3rem,7.4vw,6.4rem)}
.d2{font-size:clamp(2.3rem,5vw,4.2rem);line-height:1.06}
.d3{font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.12}
.d1 em,.d2 em,.d3 em{font-style:italic;color:var(--cinnabar)}
.on-paper .d1 em,.on-paper .d2 em,.on-paper .d3 em{color:var(--rose)}

.eyebrow{
  font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  margin:0 0 1.4rem;color:var(--cinnabar);
}
.on-paper .eyebrow{color:var(--rose)}
.lede{font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.6;color:var(--body);max-width:var(--read)}
.on-night .lede{color:var(--on-night-mid)}

/* ---------- grounds ---------- */
.on-night{background:var(--night);color:var(--on-night)}
.on-night-2{background:var(--night-2);color:var(--on-night)}
.on-paper{background:var(--paper);color:var(--ink)}
.on-paper-2{background:var(--paper-2);color:var(--ink)}

section{position:relative}
.wrap{max-width:var(--wide);margin:0 auto;padding-inline:var(--pad)}
.band{padding-block:clamp(80px,11vw,150px)}
.band-sm{padding-block:clamp(56px,7vw,92px)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--sans);font-size:.82rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
  padding:1.15em 2em;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:.25s var(--ease);
}
.btn-primary{background:var(--cinnabar);color:var(--ink)}
.btn-primary:hover{background:#FF6A5F;transform:translateY(-2px)}
.on-paper .btn-primary{background:var(--rose);color:#fff}
.on-paper .btn-primary:hover{background:var(--rose-hover)}
.btn-ghost{border-color:currentColor;color:inherit;background:transparent}
.btn-ghost:hover{background:currentColor;color:var(--night)}
.on-paper .btn-ghost:hover{color:#fff}
.btn .arw{transition:transform .25s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

.tlink{
  display:inline-flex;align-items:center;gap:.6em;text-decoration:none;
  font-weight:700;font-size:.86rem;letter-spacing:.04em;
  border-bottom:1.5px solid currentColor;padding-bottom:3px;
  transition:gap .25s var(--ease);
}
.tlink:hover{gap:1em}

/* ============================================================
   THE MB ICON SYSTEM  (Fable Health reference)
   The deck's real icons: Font Awesome Classic Light glyphs on a
   filled brand circle. Delivered here as CSS masks so a single
   PNG can be painted any brand colour at any size, and inverted
   for dark grounds, without ever redrawing an icon.
   ============================================================ */
.ico{
  --ring:var(--cinnabar);
  --glyph:var(--ink);
  --size:76px;
  width:var(--size);height:var(--size);flex:none;
  border-radius:50%;background:var(--ring);
  display:grid;place-items:center;
}
.ico i{
  width:56%;height:56%;display:block;background:var(--glyph);
  -webkit-mask:var(--g) center/contain no-repeat;
          mask:var(--g) center/contain no-repeat;
}
.ico.sm{--size:44px}
.ico.xs{--size:30px}
.ico.lg{--size:104px}
.ico.plain{background:none;--glyph:currentColor}
.ico.plain i{width:100%;height:100%}

/* the check that runs beside copy (Hiya reference) */
.checks{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:1rem}
.checks li{display:grid;grid-template-columns:26px 1fr;gap:.9rem;align-items:start;line-height:1.55}
.checks .ico{--size:26px;margin-top:.15em}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto;z-index:80;
  display:flex;align-items:center;gap:2rem;
  padding:1.1rem var(--pad);
  color:#fff;transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s;
}
/* fully opaque, not 97%: at 97% with a backdrop blur the copy scrolling
   underneath stayed faintly visible and smeared, which reads as the page
   fading behind the logo and menu. Nothing should show through a header. */
.nav.solid{background:#fff;color:var(--ink);box-shadow:0 1px 0 var(--line)}
.nav .mark{height:26px;width:auto;filter:brightness(0) invert(1);transition:filter .3s}
.nav.solid .mark{filter:none}
.nav ul{display:flex;gap:1.9rem;list-style:none;margin:0;padding:0;margin-inline-start:auto}
.nav a{text-decoration:none;font-size:.79rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;opacity:.86}
/* The 86% opacity above also landed on the CTA, blending its fill and its text
   into the page behind and dropping it to 4.39:1. The button is a solid object,
   not a nav word. (WCAG 1.4.3) */
.nav a.btn{opacity:1}
.nav a:hover{opacity:1}
.nav .btn{padding:.85em 1.5em;font-size:.72rem}
.nav-toggle{display:none;margin-inline-start:auto;background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:.5rem}
@media(max-width:940px){
  .nav ul{display:none}
  .nav-toggle{display:block;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
}

/* ============================================================
   HERO — Ro reference: short, seamless, beautifully shot.
   Three Twin Cities frames cross-dissolving over a slow push.
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero-stage{position:absolute;inset:0;background:var(--night)}
.hero-stage figure{
  position:absolute;inset:0;margin:0;opacity:0;
  transition:opacity 2.4s var(--ease);
}
.hero-stage figure.on{opacity:1}
/* The photograph is a ground, so it is graded like one: pulled back in
   saturation and brightness until the headline is unambiguously the loudest
   thing on the screen. Vivid stock behind white type is what makes a page
   read like a listing instead of an agency. */
.hero-stage img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);
  filter:saturate(.62) contrast(.95) brightness(.74);
  animation:push 16s linear infinite alternate}
@keyframes push{from{transform:scale(1.03)}to{transform:scale(1.14)}}
.hero-stage::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,22,23,.82) 0%,rgba(26,22,23,.42) 30%,rgba(26,22,23,.72) 62%,rgba(26,22,23,.97) 100%);
}
/* The hero is bottom-aligned with min-height:100svh. On a short window the
   content is taller than the viewport, so the section grows and the top of
   .hero-in lands at y=0, putting the credential row straight underneath the
   fixed header (the logo and 'INDEPENDENT' printed over each other). A top
   pad the height of the header guarantees it can never rise under it, at any
   window height. On a tall window there is slack, so it changes nothing. */
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--wide);margin:0 auto;padding:calc(var(--navh) + 20px) var(--pad) clamp(52px,8vh,96px)}
.hero .d1{max-width:16ch;text-shadow:0 2px 40px rgba(0,0,0,.4)}
.hero .lede{color:rgba(255,255,255,.9);margin-top:1.6rem;max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.4rem;align-items:center}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-bottom:1.8rem;
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.75)
}
.hero-meta span{display:flex;align-items:center;gap:.6rem}
.hero-meta span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cinnabar)}
.hero-dots{position:absolute;right:var(--pad);bottom:clamp(52px,8vh,96px);z-index:3;display:flex;gap:.5rem}
.hero-dots button{width:34px;height:3px;border:0;padding:0;background:rgba(255,255,255,.35);cursor:pointer;transition:background .3s}
.hero-dots button[aria-current="true"]{background:var(--cinnabar)}
.hero-credit{position:absolute;left:var(--pad);bottom:14px;z-index:3;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)}

/* ============================================================
   PHOTO BANDS — the photograph as a ground, not an ornament
   ============================================================ */
.plate{position:relative;min-height:clamp(420px,68vh,720px);display:flex;align-items:center;color:#fff;overflow:hidden}
.plate>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.6) contrast(.95) brightness(.7)}
.plate::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,22,23,.95) 0%,rgba(26,22,23,.78) 42%,rgba(26,22,23,.42) 100%)}
.plate .wrap{position:relative;z-index:2}
.plate.center::after{background:linear-gradient(180deg,rgba(26,22,23,.74),rgba(26,22,23,.9))}
.plate.center{text-align:center;justify-content:center}
.plate.center .lede{margin-inline:auto}

/* thin cinematic rule of photos between sections */
.filmstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--night)}
.filmstrip img{height:clamp(150px,20vw,260px);width:100%;object-fit:cover;filter:saturate(.9)}
@media(max-width:720px){.filmstrip{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   SECTION FURNITURE
   ============================================================ */
.head{max-width:820px;margin-bottom:clamp(40px,5vw,72px)}
.split{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,6vw,88px);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.split img.shot{width:100%;height:clamp(320px,48vw,620px);object-fit:cover}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,48px)}
@media(max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid-3,.grid-2{grid-template-columns:1fr}}

/* service cards — icon carries the story (Fable Health) */
.svc{display:grid;gap:1.1rem;padding-top:1.8rem;border-top:1px solid var(--line)}
.on-night .svc{border-color:var(--night-line)}
.svc h3{font-family:var(--serif);font-size:1.55rem;font-weight:400;margin:0;letter-spacing:-.01em}
.svc p{margin:0;color:var(--body);font-size:.95rem;line-height:1.6}
.on-night .svc p{color:var(--on-night-mid)}
.svc .tlink{margin-top:.3rem;align-self:start;border-bottom-color:var(--line)}
.svc:hover .ico{transform:translateY(-4px)}
.svc .ico{transition:transform .3s var(--ease)}

/* stats over photography */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{padding:clamp(28px,3.5vw,48px);background:rgba(26,22,23,.55);backdrop-filter:blur(3px)}
.stat b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(2.3rem,4.4vw,3.5rem);line-height:1;letter-spacing:-.03em}
.stat span{display:block;margin-top:.8rem;font-size:.8rem;line-height:1.5;color:rgba(255,255,255,.8)}

/* editorial cards (Seed Learn reference) */
.pills{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:clamp(32px,4vw,54px)}
.pill{
  border:1.5px solid var(--line);background:transparent;color:var(--body);
  font:600 .77rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  padding:.75em 1.2em;border-radius:999px;cursor:pointer;transition:.2s var(--ease);
}
.pill:hover{border-color:var(--ink);color:var(--ink)}
.pill[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

.card{display:flex;flex-direction:column;gap:1rem;text-decoration:none;color:inherit}
.card .thumb{aspect-ratio:1.91/1;overflow:hidden;background:var(--paper-2)}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card:hover .thumb img{transform:scale(1.045)}
.card .kicker{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rose);
  max-width:100%}
.card h3,.card h2{font-family:var(--serif);font-weight:400;font-size:1.4rem;line-height:1.22;margin:0;letter-spacing:-.01em}
.card .meta{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.card.wide{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.card.wide .thumb{aspect-ratio:16/10}
@media(max-width:820px){.card.wide{grid-template-columns:1fr}}

/* board grid (Seed medical advisory board) */
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px)}
@media(max-width:900px){.board{grid-template-columns:repeat(2,1fr)}}
.board figure{margin:0}
.board img{width:100%;aspect-ratio:1/1;object-fit:cover;filter:grayscale(1) contrast(1.03)}
.board figcaption{margin-top:.9rem}
.board b{display:block;font-family:var(--serif);font-weight:400;font-size:1.1rem}
.board span{display:block;font-size:.78rem;color:var(--muted);line-height:1.45;margin-top:.2rem}
.on-night .board span{color:var(--on-night-dim)}

/* logo wall */
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(18px,2.4vw,40px);align-items:center}
@media(max-width:900px){.logos{grid-template-columns:repeat(3,1fr)}}
.logos img{width:100%;height:44px;object-fit:contain;filter:grayscale(1) opacity(.5);transition:.3s}
.logos img:hover{filter:none}
.on-night .logos img{filter:brightness(0) invert(1) opacity(.55)}
.on-night .logos img:hover{filter:brightness(0) invert(1) opacity(1)}

/* quotes */
.quote{max-width:900px}
.quote blockquote{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,3.1vw,2.5rem);line-height:1.25;margin:0;letter-spacing:-.015em}
.quote cite{display:block;margin-top:1.6rem;font-style:normal;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;color:var(--on-night-dim)}

/* faq */
.faq{border-top:1px solid var(--line)}
.on-night .faq{border-color:var(--night-line)}
.faq details{border-bottom:1px solid var(--line)}
.on-night .faq details{border-color:var(--night-line)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.5rem 3rem 1.5rem 0;position:relative;
  font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.5rem);font-weight:400;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-family:var(--sans);font-weight:300;font-size:1.6rem;color:var(--rose);transition:transform .25s}
.on-night .faq summary::after{color:var(--cinnabar)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq p{margin:0 0 1.6rem;max-width:var(--read);color:var(--body)}
.on-night .faq p{color:var(--on-night-mid)}

/* footer */
.foot{background:var(--night);color:var(--on-night);padding-block:clamp(56px,7vw,92px) 2.5rem}
.foot a{text-decoration:none;color:var(--on-night-mid);font-size:.87rem;line-height:2}
.foot a:hover{color:#fff}
.foot h2{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--on-night-dim);margin:0 0 .9rem;font-weight:700}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:clamp(24px,3vw,48px)}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-base{margin-top:clamp(40px,5vw,72px);padding-top:1.8rem;border-top:1px solid var(--night-line);display:flex;flex-wrap:wrap;gap:1rem 2rem;font-size:.74rem;color:var(--on-night-dim)}
.social{display:flex;gap:.6rem;margin-top:1.4rem}
.social .ico{--size:36px;--ring:var(--night-3);--glyph:var(--on-night);transition:.25s var(--ease)}
.social a:hover .ico{--ring:var(--cinnabar);--glyph:var(--ink)}

/* reveal on scroll */
.rise{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  .hero-stage img{animation:none}
  .hero-stage figure{transition:none}
}

/* ============================================================
   THE ARCHES — the MB bridge strip, used as a section divider.
   Masked so one asset paints in any brand colour, at any width.
   ============================================================ */
.arches{
  --arch:var(--cinnabar);
  height:clamp(34px,4.6vw,62px);width:100%;
  background:var(--arch);
  -webkit-mask:url(/assets/bridge-black.png?v=e41a0c64) repeat-x center/auto 100%;
          mask:url(/assets/bridge-black.png?v=e41a0c64) repeat-x center/auto 100%;
}
.arches.flip{transform:scaleY(-1)}

/* brand-board thumbnails: contained on a tinted ground, never cropped */
.thumb.board-shot{
  display:grid;place-items:center;padding:clamp(22px,3vw,44px);
  background:var(--paper-2);aspect-ratio:16/10;
}
.on-night .thumb.board-shot{background:var(--night-3)}
.thumb.board-shot img{width:100%;height:100%;object-fit:contain;transition:transform .6s var(--ease)}

/* a tighter statement band, so a short centred block never leaves a void */
.band-statement{padding-block:clamp(72px,9vw,120px) 0}

/* ------------------------------------------------------------
   MOBILE DRAWER
   The header collapses under 940px, so the links have to go
   somewhere. They go here, full screen, thumb-reachable, with
   the primary action last where the hand actually is.
   ------------------------------------------------------------ */
.drawer{
  position:fixed;inset:0;z-index:90;background:var(--night);color:var(--on-night);
  display:flex;flex-direction:column;padding:1.1rem var(--pad) calc(var(--pad) + 24px);
  transform:translateY(-100%);transition:transform .4s var(--ease);
  visibility:hidden;
}
.drawer.open{transform:none;visibility:visible}
.drawer-top{display:flex;align-items:center;gap:1rem}
.drawer-top img{height:26px;filter:brightness(0) invert(1)}
.drawer-close{margin-inline-start:auto;background:none;border:0;color:inherit;font:700 .78rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;padding:.6rem}
.drawer nav{display:grid;gap:.2rem;margin-top:auto;margin-bottom:auto}
.drawer nav a{
  font-family:var(--serif);font-size:clamp(1.9rem,8vw,2.6rem);font-weight:400;
  text-decoration:none;color:var(--on-night);padding:.35em 0;border-bottom:1px solid var(--night-line);
}
.drawer nav a:last-child{border-bottom:0}
.drawer .btn{width:100%;justify-content:center}
body.locked{overflow:hidden}

/* ============================================================
   FORM KIT
   Used by the Let's Connect router. Deliberately quiet: a field
   should look like a line to write on, not a box to be trapped in.
   ============================================================ */
.field{display:grid;gap:.5rem}
.field label{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--on-night-mid)}
.field .opt-note{font-size:.82rem;color:var(--on-night-dim);text-transform:none;letter-spacing:0;font-weight:500}
.field input,.field textarea,.field select{
  width:100%;background:rgba(255,255,255,.05);color:var(--on-night);
  border:1.5px solid rgba(255,255,255,.18);border-radius:12px;
  padding:.95em 1.1em;font:500 1rem/1.5 var(--sans);
}
.field textarea{min-height:130px;resize:vertical}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--on-night-mid) 50%),linear-gradient(135deg,var(--on-night-mid) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.field select option{background:var(--night-2);color:var(--on-night)}
.field input::placeholder,.field textarea::placeholder{color:var(--on-night-dim)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--cinnabar);background:rgba(255,255,255,.08)}
.field.bad input,.field.bad textarea,.field.bad select{border-color:var(--cinnabar-lt)}
.field .err{font-size:.78rem;color:var(--cinnabar-lt);display:none}
.field.bad .err{display:block}
.opt-req{color:var(--on-night-dim);font-weight:500;text-transform:none;letter-spacing:0}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.fields .span{grid-column:1/-1}
@media(max-width:720px){.fields{grid-template-columns:1fr}.fields .span{grid-column:auto}}

/* file drop */
.drop{
  grid-column:1/-1;display:flex;align-items:center;gap:1rem;
  border:1.5px dashed rgba(255,255,255,.28);border-radius:14px;
  padding:1.2rem 1.3rem;cursor:pointer;transition:.2s var(--ease);
}
.drop:hover,.drop.over{border-color:var(--cinnabar);background:rgba(255,255,255,.05)}
.drop input{display:none}
.drop b{display:block;font-size:.95rem}
.drop span{display:block;font-size:.82rem;color:var(--on-night-dim)}
.drop .ico{--size:44px;--ring:rgba(255,255,255,.12);--glyph:#fff}
.filelist{grid-column:1/-1;display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
.filelist li{display:flex;align-items:center;gap:.7rem;font-size:.86rem;color:var(--on-night-mid);background:rgba(255,255,255,.05);border-radius:10px;padding:.6rem .9rem}
.filelist button{margin-inline-start:auto;background:none;border:0;color:var(--on-night-dim);cursor:pointer;font-size:1rem;line-height:1}
.filelist button:hover{color:var(--cinnabar)}

/* progressive disclosure block */
.reveal-block{
  grid-column:1/-1;border-inline-start:2px solid var(--cinnabar);
  padding-inline-start:1.4rem;display:grid;gap:1.1rem;
  animation:qin .45s var(--ease) both;
}
.reveal-block .fields{gap:1.1rem}


/* ============================================================
   CREATIVE WORK — the rebrand strip
   Replaces the four city photographs that used to sit above the
   work section. Our own creative belongs there far more than a
   skyline does, and a before/after is the fastest way to show it.
   ============================================================ */
.rebrands{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--night-line)}
@media(max-width:900px){.rebrands{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.rebrands{grid-template-columns:1fr}}
.rb{position:relative;background:var(--night-2);padding:clamp(22px,2.6vw,34px);display:grid;gap:14px;overflow:hidden}
.rb .pair{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.rb figure{margin:0;display:grid;place-items:center;background:#fff;border-radius:10px;height:clamp(84px,9vw,116px);padding:14px}
.rb figure img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.rb figure.before{background:var(--plate);filter:saturate(.35) opacity(.72)}
.rb .arw2{color:var(--cinnabar);font-size:1.1rem;line-height:1}
.rb b{font-family:var(--serif);font-weight:400;font-size:1.2rem;letter-spacing:-.01em;color:var(--on-night)}
.rb span{font-size:.78rem;color:var(--on-night-dim);line-height:1.5}
.rb .tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.1rem}
.rb .tags i{font-style:normal;font-size:.63rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cinnabar);border:1px solid var(--night-line);border-radius:99px;padding:.4em .7em}

/* ============================================================
   PROOF CARDS — the number is the picture
   We have no case-study photography, and inventing some would be
   worse than none. The result IS the image: a large figure on a
   ground, which is also the treatment that works hardest here.
   ============================================================ */
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line)}
@media(max-width:900px){.proof{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.proof{grid-template-columns:1fr}}
.pc{
  display:flex;flex-direction:column;gap:.9rem;text-decoration:none;color:inherit;
  background:var(--paper);padding:clamp(26px,3vw,40px);min-height:clamp(220px,22vw,280px);
  transition:background .25s var(--ease);
}
.pc:hover{background:var(--paper-2)}
.pc .cat{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rose)}
.pc .fig{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,4.2vw,3.4rem);line-height:.95;letter-spacing:-.035em}
.pc h3{font-size:.98rem;font-weight:600;line-height:1.45;margin:0;color:var(--body)}
.pc .who{margin-top:auto;padding-top:1rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line)}
.pc.dark{background:var(--night);color:var(--on-night)}
.pc.dark:hover{background:var(--night-2)}
.pc.dark .cat{color:var(--cinnabar)}
.pc.dark h3{color:var(--on-night-mid)}
.pc.dark .who{color:var(--on-night-dim);border-top-color:var(--night-line)}

/* ============================================================
   CULTURE — who we actually are
   The office is genuinely distinctive, so it does the work a
   stock "team at a whiteboard" photograph never could.
   ============================================================ */
.reel{
  position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:var(--night-2);
  display:grid;place-items:center;cursor:pointer;
}
.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.75) brightness(.6);transition:.6s var(--ease)}
.reel:hover img{transform:scale(1.03);filter:saturate(.85) brightness(.68)}
.reel .play{
  position:relative;z-index:2;width:clamp(72px,8vw,104px);height:clamp(72px,8vw,104px);border-radius:50%;
  background:var(--cinnabar);display:grid;place-items:center;transition:transform .3s var(--ease);
}
.reel:hover .play{transform:scale(1.07)}
.reel .play::after{content:"";border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent var(--ink);margin-left:5px}
.reel .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(18px,2.4vw,30px);
  background:linear-gradient(180deg,transparent,rgba(26,22,23,.85));color:#fff}
.reel .cap b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.2rem,2.2vw,1.7rem)}
.reel .cap span{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}

.collage{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(110px,13vw,180px);gap:2px}
@media(max-width:820px){.collage{grid-template-columns:repeat(2,1fr)}}
.collage img{width:100%;height:100%;object-fit:cover;filter:saturate(.78)}
.collage .t2{grid-column:span 2}
.collage .r2{grid-row:span 2}

.team{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--night-line)}
@media(max-width:900px){.team{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.team{grid-template-columns:1fr}}
.tm{background:var(--night-2);padding:clamp(24px,2.8vw,36px);display:grid;gap:.9rem;align-content:start}
.tm h3{font-family:var(--serif);font-weight:400;font-size:1.35rem;margin:0;letter-spacing:-.01em}
.tm .role{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cinnabar)}
.tm ul{list-style:none;margin:.2rem 0 0;padding:0;display:grid;gap:.5rem}
.tm li{font-size:.88rem;line-height:1.5;color:var(--on-night-mid);padding-inline-start:1.1rem;position:relative}
.tm li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--cinnabar)}

/* a slot that is honestly a slot, rather than a fabricated person */
.slot{border:1.5px dashed var(--night-line);background:transparent;display:grid;place-items:center;text-align:center;padding:clamp(24px,2.8vw,36px);gap:.6rem;align-content:center}
.slot b{font-family:var(--serif);font-weight:400;font-size:1.1rem;color:var(--on-night-mid)}
.slot span{font-size:.8rem;color:var(--on-night-dim);line-height:1.5;max-width:26ch}


/* ════════════════════════════════════════════════════════════════
   V3 LAYER — "the merge"
   Results clarity + Crossing sophistication, pushed into
   advertising-agency energy. Everything below either adds a
   component the merge needs or overrides a Crossing rule that
   read as architecture-firm rather than ad agency.
   ════════════════════════════════════════════════════════════════ */

:root{
  /* the palette, expanded but governed. Cinnabar is still the
     energy; the rest are section accents, one per band, never
     two in the same band. */
  --amber:#E0952A;
  --teal:#0E6E78;
  --plum:#7A2E5C;
  --forest-dp:#0A6B43;   /* MB Health, AA on white */
  --accent:var(--cinnabar);

  --hair:1px;
}

/* accent plumbing: a band sets --accent once and the eyebrow,
   rules, icon rings and links all follow. */
.eyebrow{color:var(--accent)}
.on-paper .eyebrow,.on-paper-2 .eyebrow{color:var(--accent)}
.on-paper .d1 em,.on-paper .d2 em,.on-paper .d3 em,
.on-paper-2 .d1 em,.on-paper-2 .d2 em,.on-paper-2 .d3 em{color:var(--accent)}
.a-rose{--accent:var(--rose)}
.a-amber{--accent:var(--amber)}
.a-teal{--accent:var(--teal)}
.a-plum{--accent:var(--plum)}
.a-forest{--accent:var(--forest-dp)}
.a-grape{--accent:var(--grape)}
.a-cinnabar{--accent:var(--cinnabar)}

/* ---------- the second display voice ----------
   Crossing set everything in Newsreader, which is what made it
   feel like an architecture practice. The merge alternates:
   Montserrat Black for the statements that should hit, Newsreader
   italic for the word that should sing. */
.k1,.k2,.k3{
  font-family:var(--sans);font-weight:800;
  letter-spacing:-.038em;line-height:.93;margin:0;
}
.k1{font-size:clamp(2.9rem,7.6vw,6.6rem)}
.k2{font-size:clamp(2.1rem,5vw,4.1rem);line-height:.98}
.k3{font-size:clamp(1.5rem,2.7vw,2.3rem);line-height:1.06;letter-spacing:-.025em}
/* 500 rather than 400: against Montserrat 800 the lighter cut read as a
   different level of emphasis instead of a pairing. */
.ser{font-family:var(--serif);font-weight:500;font-style:italic;letter-spacing:-.015em;color:var(--accent)}
.k1 .ser,.k2 .ser{display:inline-block}

/* ---------- client ticker: the fastest possible proof ---------- */
.marq{overflow:hidden;padding-block:clamp(26px,3vw,40px);border-block:var(--hair) solid var(--line);background:var(--paper)}
.on-night .marq,.marq.dark{background:var(--night-2);border-color:var(--night-line)}
.marq-row{display:flex;align-items:center;gap:clamp(28px,3.2vw,52px);width:max-content;animation:marq 62s linear infinite}
.marq:hover .marq-row{animation-play-state:paused}
.marq img{filter:grayscale(1) opacity(.46);transition:.3s}
.marq img:hover{filter:none}
.marq.dark img{filter:brightness(0) invert(1) opacity(.5)}
.marq.dark img:hover{filter:brightness(0) invert(1) opacity(1)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marq-row{animation:none}}

/* ---------- overlapping composition ----------
   Not a rectangular photo beside a rectangular box of copy. The
   panel sits ON the photograph and breaks its edge. */
.olap{display:grid;grid-template-columns:repeat(12,1fr);align-items:center}
.olap>.shot{grid-area:1/4/2/13;height:clamp(380px,54vw,660px);width:100%;object-fit:cover;filter:saturate(.72) brightness(.86)}
.olap>.say{
  grid-area:1/1/2/7;z-index:2;background:var(--night);color:var(--on-night);
  padding:clamp(30px,4vw,64px);
}
.olap>.say .lede{color:var(--on-night-mid)}
.olap.flip>.shot{grid-area:1/1/2/10}
.olap.flip>.say{grid-area:1/7/2/13}
@media(max-width:900px){
  .olap{grid-template-columns:1fr}
  .olap>.shot,.olap>.say,.olap.flip>.shot,.olap.flip>.say{grid-area:auto}
  .olap>.shot{height:clamp(240px,52vw,380px)}
  .olap>.say{margin-top:-48px;margin-inline:var(--pad);position:relative}
}

/* ---------- capability cards: introduce simply, go deeper ----------
   No stats, no receipts. The capability copy and a way in. */
.disc{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--hair);background:var(--line)}
@media(max-width:900px){.disc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.disc{grid-template-columns:1fr}}
.dcard{
  background:var(--paper);color:inherit;text-decoration:none;
  padding:clamp(28px,3.2vw,44px);display:grid;gap:1.05rem;align-content:start;
  position:relative;transition:background .3s var(--ease);
}
.dcard::before{
  content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.dcard:hover{background:var(--paper-2)}
.dcard:hover::before{transform:scaleX(1)}
.dcard .n{font:700 .66rem/1 var(--sans);letter-spacing:.2em;color:var(--muted)}
.dcard h3{font-family:var(--sans);font-weight:800;font-size:1.24rem;line-height:1.18;letter-spacing:-.02em;margin:0}
.dcard p{margin:0;color:var(--body);font-size:.94rem;line-height:1.62}
.dcard .tlink{align-self:start;margin-top:.2rem;border-bottom-color:var(--accent);color:var(--accent)}
.dcard .ico{--ring:var(--accent);--size:56px}

/* ---------- work: show the work ----------
   Real creative, edge to edge. The client is unmistakable and the
   picture does the arguing. */
.showcase{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--hair);background:var(--night-line)}
.wk{
  position:relative;overflow:hidden;text-decoration:none;color:#fff;
  grid-column:span 2;min-height:clamp(230px,25vw,340px);display:flex;align-items:flex-end;
  background:var(--night-2);
}
.wk.w3{grid-column:span 3;min-height:clamp(300px,32vw,470px)}
.wk.w6{grid-column:span 6;min-height:clamp(320px,36vw,540px)}
.wk>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);filter:saturate(.92)}
.wk:hover>img{transform:scale(1.055)}
.wk::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,17,18,.05) 34%,rgba(20,17,18,.62) 74%,rgba(20,17,18,.92) 100%)}
.wk .cap{position:relative;z-index:2;padding:clamp(20px,2.4vw,34px);display:grid;gap:.4rem}
.wk .who{font:700 .68rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--cinnabar)}
.wk h3{font-family:var(--sans);font-weight:800;font-size:clamp(1.05rem,1.7vw,1.5rem);line-height:1.16;letter-spacing:-.02em;margin:0}
.wk p{margin:0;font-size:.86rem;line-height:1.5;color:rgba(255,255,255,.78);max-width:44ch}
@media(max-width:900px){
  .showcase{grid-template-columns:repeat(2,1fr)}
  .wk,.wk.w3,.wk.w6{grid-column:span 1}
  .wk.w6{grid-column:span 2}
}

/* ---------- rebrands, expanded ---------- */
.rebrands.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.rebrands.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.rebrands.four{grid-template-columns:1fr}}

/* ---------- MB Health advisory badge ----------
   Sits beside the board, on its own ground, so it never covers a
   single face. */
.boardhead{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,56px);align-items:end;margin-bottom:clamp(30px,4vw,50px)}
.boardhead img{height:clamp(96px,11vw,140px);width:auto}
@media(max-width:760px){.boardhead{grid-template-columns:1fr}.boardhead img{height:96px}}

/* ---------- people: get to know the people ----------
   A collage per person, not a grid of headshots. One portrait
   anchors it, the candids surround it, the words sit inside the
   composition rather than under it. */
.per{
  display:grid;grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(76px,8.4vw,124px);gap:var(--hair);
  background:var(--night-line);
}
.per>*{position:relative;overflow:hidden;background:var(--night-2)}
.per img{width:100%;height:100%;object-fit:cover;filter:saturate(.82)}
.per .p-main{grid-column:span 5;grid-row:span 4}
.per .p-say{
  grid-column:span 4;grid-row:span 4;background:var(--night);
  padding:clamp(22px,2.6vw,38px);display:grid;align-content:center;gap:.9rem;
}
.per .p-say .role{font:700 .66rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.per .p-say h3{font-family:var(--sans);font-weight:800;font-size:clamp(1.5rem,2.6vw,2.2rem);letter-spacing:-.03em;line-height:1;margin:0}
.per .p-say p{margin:0;font-size:.9rem;line-height:1.6;color:var(--on-night-mid)}
.per .p-a{grid-column:span 3;grid-row:span 2}
.per .p-b{grid-column:span 3;grid-row:span 2}
.per .p-c{grid-column:span 4;grid-row:span 2}
.per .p-d{grid-column:span 4;grid-row:span 2}
.per .p-e{grid-column:span 4;grid-row:span 2}
@media(max-width:820px){
  .per{grid-template-columns:repeat(6,1fr)}
  .per .p-main{grid-column:span 6;grid-row:span 4}
  .per .p-say{grid-column:span 6;grid-row:span 3}
  .per .p-a,.per .p-b,.per .p-c,.per .p-d,.per .p-e{grid-column:span 3;grid-row:span 2}
}
/* honest label on a stand-in frame */
.per .ph::after{
  content:attr(data-ph);position:absolute;left:10px;bottom:9px;z-index:2;
  font:700 .56rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.82);background:rgba(20,17,18,.62);padding:.45em .6em;border-radius:3px;
  backdrop-filter:blur(2px);
}

/* ---------- POV ---------- */
.povgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3vw,44px)}
@media(max-width:900px){.povgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.povgrid{grid-template-columns:1fr}}
.povgrid .card .kicker{color:var(--accent)}
.povgrid .card h3,.povgrid .card h2{font-family:var(--sans);font-weight:800;font-size:1.12rem;line-height:1.28;letter-spacing:-.015em}

/* ---------- memberships ---------- */
.memb{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(20px,3vw,44px);align-items:center}
@media(max-width:900px){.memb{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.memb{grid-template-columns:repeat(2,1fr)}}
.memb img{width:100%;height:clamp(44px,5vw,62px);object-fit:contain;filter:grayscale(1) opacity(.55);transition:.3s}
.memb img:hover{filter:none}
.on-night .memb img{filter:brightness(0) invert(1) opacity(.6)}
.on-night .memb img:hover{filter:brightness(0) invert(1) opacity(1)}

/* ---------- big pull statement over a colour ---------- */
.statement{background:var(--accent);color:#fff;padding-block:clamp(64px,8vw,120px)}
.statement .k2{max-width:22ch}
.statement .ser{color:#fff;opacity:.92}

/* ---------- checks on paper ---------- */
.on-paper .checks .ico,.on-paper-2 .checks .ico{--ring:var(--accent);--glyph:#fff}

/* ---------- no bubbles ----------
   Topic pills and every other text-in-a-bubble navigation device
   are removed from this build. If a filter is ever needed again it
   is an underlined text row, not a bubble. */
.pill,.pills{display:none !important}

/* nav: capabilities dropdown, plain, no bubbles */
.nav .has-sub{position:relative}
.nav .sub{
  position:absolute;top:calc(100% + 14px);left:-18px;min-width:270px;
  background:#fff;color:var(--ink);padding:.7rem 0;border-radius:2px;
  box-shadow:0 20px 60px rgba(20,17,18,.18);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.22s var(--ease);
  list-style:none;margin:0;
}
.nav .has-sub:hover .sub,.nav .has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.nav .sub li{display:block}
.nav .sub a{
  display:block;padding:.62rem 1.2rem;font-size:.76rem;letter-spacing:.06em;
  text-transform:none;font-weight:600;opacity:1;color:var(--ink);
}
.nav .sub a:hover{background:var(--paper-2);color:var(--accent)}
.nav .hlth{color:var(--lime)}
.nav.solid .hlth{color:var(--forest-dp)}

/* MB Health band keeps its own accent everywhere inside it */
#health{--accent:var(--lime)}
#health .btn-primary{background:var(--lime);color:var(--ink-deep)}
#health .btn-primary:hover{background:#86D845}

/* the arch divider, used as a colour change between bands */
.arches.thin{height:clamp(20px,2.4vw,34px)}

/* ---------- live Instagram: culture, updating itself ----------
   Culture is the one thing on a website that goes stale fastest. This section
   is wired to the real account so it never does.

   The posts ride in phones, and the phones scroll. A still grid of squares
   reads as a screenshot of a feed; movement is what makes it read as live.
   Frames cycle through the six brand accents, which is the fun without
   inventing a colour that is not ours. */
.igstrip{overflow:hidden;padding-block:clamp(10px,1.4vw,20px)}

.ig{
  display:flex;align-items:center;width:max-content;
  gap:clamp(14px,1.6vw,26px);
  padding-inline:clamp(14px,1.6vw,26px);
  animation:marq var(--marq-time,84s) linear infinite;
}
/* Stop on hover, and on keyboard focus, so anyone reading a caption or tabbing
   through has control of it rather than chasing a moving target. */
.igstrip:hover .ig,.igstrip:focus-within .ig{animation-play-state:paused}

.ig .phone{
  position:relative;flex:0 0 auto;display:block;text-decoration:none;
  width:clamp(196px,17vw,268px);aspect-ratio:9/17.4;
  border-radius:clamp(26px,2.6vw,38px);
  background:var(--frame,#FF4931);
  padding:clamp(6px,.55vw,9px);
  box-shadow:0 14px 34px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.22);
  transition:transform .45s var(--ease);
}
.ig .phone:hover,.ig .phone:focus-visible{transform:translateY(-6px)}
.ig .screen{
  position:absolute;inset:clamp(6px,.55vw,9px);overflow:hidden;background:#0B0909;
  border-radius:clamp(20px,2.1vw,30px);
}
/* the earpiece bar, enough of a cue to read as a handset without being fussy */
.ig .phone::after{
  content:"";position:absolute;z-index:3;top:clamp(13px,1.2vw,18px);left:50%;
  transform:translateX(-50%);width:30%;height:clamp(5px,.5vw,7px);
  border-radius:99px;background:rgba(0,0,0,.5);
}
/* Filling the screen and not cropping the creative are opposites, so the post
   is drawn twice. The back copy covers the screen and is blurred past reading,
   which kills the dead black bars that made the row look ragged. The front
   copy is contained, so a headline is never sliced and a square post is never
   halved. Every handset still reads as the same size of lit screen. */
.ig .screen img{position:absolute;inset:0;width:100%;height:100%}
.ig img.bg{
  object-fit:cover;transform:scale(1.25);
  filter:blur(26px) saturate(1.25) brightness(.55);
}
.ig img.shot{object-fit:contain;transition:transform .7s var(--ease)}
.ig .phone:hover img.shot{transform:scale(1.03)}
/* The whole screen shades over on hover so the caption is readable against any
   photo underneath. The lightest the scrim can composite to is a mid grey even
   over pure white, which keeps white type above 8:1 whatever the post is. */
.ig .cap{
  position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;
  padding:clamp(.9rem,1vw,1.15rem);
  font-size:.76rem;line-height:1.5;color:#fff;
  background:linear-gradient(180deg,rgba(11,9,9,.74),rgba(11,9,9,.93));
  opacity:0;transition:opacity .3s var(--ease);
}
.ig .cap span{display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden}
.ig .phone:hover .cap,.ig .phone:focus-visible .cap{opacity:1}
.ig .tag{position:absolute;top:10px;right:10px;z-index:2;width:20px;height:20px;background:#fff;opacity:.85;
  -webkit-mask:var(--g) center/contain no-repeat;mask:var(--g) center/contain no-repeat}

/* the six brand accents, in order. Twelve posts is two clean cycles, so the
   duplicated half continues the sequence and the loop seam is invisible. */
.ig .phone:nth-child(6n+1){--frame:#BC0C42}
.ig .phone:nth-child(6n+2){--frame:#FF4931}
.ig .phone:nth-child(6n+3){--frame:#6646C1}
.ig .phone:nth-child(6n+4){--frame:#0A7F4E}
.ig .phone:nth-child(6n+5){--frame:#73C632}
.ig .phone:nth-child(6n+6){--frame:#C44DFF}

@media(prefers-reduced-motion:reduce){
  .ig{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .ig .phone.clone{display:none}
  .ig .phone:hover,.ig .phone:focus-visible{transform:none}
  .ig img,.ig .phone{transition:none}
  .ig .phone:hover img.shot{transform:none}
}

.ig-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.9rem 1.6rem;margin-bottom:clamp(20px,2.4vw,32px)}
.ig-head .handle{font:700 .78rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);text-decoration:none}
.ig-head .handle:hover{text-decoration:underline}
.ig-note{font-size:.78rem;color:var(--on-night-dim);margin-top:1rem}

/* placeholder frame: designed, labelled, never an ugly gap */
.phbox{
  position:relative;display:grid;place-items:center;text-align:center;gap:.5rem;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 12px,transparent 12px 24px),
    var(--night-3);
  padding:1rem;
}
.phbox b{font:700 .6rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--on-night-mid)}
.phbox span{font-size:.72rem;line-height:1.45;color:var(--on-night-dim);max-width:24ch}

/* ---------- contrast discipline for the expanded palette ----------
   A colour can be a fill and still be illegal as text. Every accent
   therefore carries two values: --accent for fills, rings and rules,
   and --accent-ink for anything the eye has to read on white. */
.a-cinnabar{--accent:#FF4931;--accent-ink:#C2301B}
.a-amber   {--accent:#E0952A;--accent-ink:#8A5C0E}
.a-rose    {--accent:#BC0C42;--accent-ink:#BC0C42}
.a-teal    {--accent:#0E6E78;--accent-ink:#0E6E78}
.a-plum    {--accent:#7A2E5C;--accent-ink:#7A2E5C}
.a-grape   {--accent:#6646C1;--accent-ink:#5138AD}   /* both values from the brand guide */
/* Grape on the dark bands. The guide's LIGHT tone #7866D3 clears the 3:1 that
   large display type needs, so the serif accents and the big numerals use it
   straight from the guide. The 12px eyebrows need 4.5:1, which no guide tone
   reaches on this ground, so they take a lighter tint of the same hue. That
   tint is an accessibility variant of grape, not a new brand colour. */
.on-night .a-grape,.on-night-2 .a-grape,.on-night-3 .a-grape,
.on-night.a-grape,.on-night-2.a-grape,.on-night-3.a-grape{--accent:#7866D3}
.on-night .a-grape .eyebrow,.on-night-2 .a-grape .eyebrow,.on-night-3 .a-grape .eyebrow,
.on-night.a-grape .eyebrow,.on-night-2.a-grape .eyebrow,.on-night-3.a-grape .eyebrow{color:#A08FDC}
/* Cinnabar cleared 4.5 on the darkest ground but sat at 4.35 on the dark
   CARDS, which are a step lighter. A 2% lift covers every dark surface. */
.on-night .a-cinnabar,.on-night-2 .a-cinnabar,.on-night-3 .a-cinnabar,
.on-night.a-cinnabar,.on-night-2.a-cinnabar,.on-night-3.a-cinnabar{--accent:#FF543D}
.a-forest  {--accent:#0A6B43;--accent-ink:#0A6B43}

.on-paper .eyebrow,.on-paper-2 .eyebrow,
.on-paper .dcard .tlink,.on-paper-2 .dcard .tlink,
.on-paper .card .kicker,.on-paper-2 .card .kicker{color:var(--accent-ink,var(--accent))}
.on-paper .d1 em,.on-paper .d2 em,.on-paper .d3 em,
.on-paper .k1 .ser,.on-paper .k2 .ser,.on-paper .k3 .ser,
.on-paper-2 .k1 .ser,.on-paper-2 .k2 .ser,.on-paper-2 .k3 .ser{color:var(--accent-ink,var(--accent))}
/* glyphs sit on a filled circle, so they are white everywhere the
   circle is a real colour */
.dcard .ico{--glyph:#fff}
.a-cinnabar .ico,.a-amber .ico{--glyph:var(--ink)}

/* hero display */
.hero .k1{max-width:14ch;text-shadow:0 2px 40px rgba(0,0,0,.45)}
.hero .k1 .ser{color:var(--cinnabar)}

/* the placeholder label belongs to an empty frame only */
.per .ph::after{content:none}
.per .phbox::after{
  content:attr(data-ph);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font:700 .6rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-night-mid);text-align:center;white-space:pre-line;
}
/* a frame with no photo hides the broken image entirely */
.per .phbox img{display:none}

/* Work tiles carry flat ad creative as well as photography. Flat creative
   is often light, so the scrim has to be strong enough to hold white type
   over a white ad, and some frames need their own crop. */




/* memberships read as credentials, so they are not whispered */
.memb img{filter:grayscale(1) opacity(.78)}
/* the Entry frame is composed around the CARE wall on its right side, so the
   crop is anchored there rather than at the center */
.olap>.shot{object-position:66% center}

/* ---------- hero treatment for the wide aerial ----------
   The frame is now a photograph rather than a snapshot, so it is graded far
   less: the dusk color is the point. Legibility comes from a scrim that is
   heavy where the type sits (lower left) and lifts off the right, where the
   bridge itself has to stay readable. */
.hero-stage img{
  filter:saturate(.88) contrast(1.03) brightness(.84);
  object-position:center 58%;
}
.hero-stage::after{
  background:
    linear-gradient(102deg,rgba(20,17,18,.86) 0%,rgba(20,17,18,.55) 34%,rgba(20,17,18,.06) 66%,rgba(20,17,18,0) 100%),
    linear-gradient(180deg,rgba(20,17,18,.62) 0%,rgba(20,17,18,.12) 24%,rgba(20,17,18,.30) 58%,rgba(20,17,18,.86) 100%);
}
/* the slow push is dialed back so the arc of the bridge stays in frame for the
   whole cycle rather than drifting out of the crop */
@keyframes push{from{transform:scale(1.02)}to{transform:scale(1.08)}}

/* ============================================================
   THE CARE BAND — "Who we are"
   The room already says the line, so the photograph is not an
   illustration next to the copy: it is the ground the copy lives
   in, and the wall's own words do the arguing. Display is set in
   the serif here, deliberately. The page runs two registers:
   Montserrat Black where it asserts, Newsreader where it breathes.
   ============================================================ */
.careband{
  position:relative;overflow:hidden;color:#fff;
  min-height:clamp(640px,92vh,980px);
  display:flex;align-items:center;
}
.careband>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:64% center;
  /* barely graded. The wall is the subject and it is already beautiful. */
  filter:saturate(.96) contrast(1.02) brightness(.9);
}
.careband::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(96deg,rgba(14,11,12,.94) 0%,rgba(14,11,12,.82) 24%,rgba(14,11,12,.40) 48%,rgba(14,11,12,.06) 66%,rgba(14,11,12,0) 100%),
    linear-gradient(180deg,rgba(14,11,12,.44) 0%,rgba(14,11,12,0) 26%,rgba(14,11,12,0) 62%,rgba(14,11,12,.55) 100%);
}
.careband .wrap{position:relative;z-index:2}
.careband .say{max-width:min(30ch,46vw)}
.careband .eyebrow{color:var(--cinnabar)}
.careband .d2{text-shadow:0 2px 34px rgba(14,11,12,.55)}
.careband .d2 em{color:var(--cinnabar);font-style:italic}
.careband .lede{color:rgba(255,255,255,.9);margin-top:1.6rem}
.careband .careline{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.15rem,1.9vw,1.55rem);line-height:1.3;
  margin:2rem 0 0;padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.28);
  color:#fff;
}
@media(max-width:900px){
  .careband{align-items:flex-end;min-height:clamp(560px,82vh,780px)}
  .careband>img{object-position:60% center}
  .careband::after{
    background:linear-gradient(180deg,rgba(14,11,12,.24) 0%,rgba(14,11,12,.04) 24%,rgba(14,11,12,.74) 60%,rgba(14,11,12,.96) 100%);
  }
  .careband .say{max-width:none;padding-block:0 clamp(32px,6vw,60px)}
}
/* the wrap is a flex child here, so it has to be told to take the full width
   or `margin:0 auto` centers it and drops the copy on top of the wall */
.careband .wrap{width:100%}
.careband .say{max-width:min(30rem,42vw)}
/* a touch smaller than the page's other serif display, so the block stays
   three lines and never crowds the wall it is sitting on */
.careband .d2{font-size:clamp(1.95rem,3.3vw,3rem);line-height:1.08}
/* push the crop right so the room's words clear the copy entirely */
.careband>img{object-position:76% center}
.careband::after{
  background:
    linear-gradient(96deg,rgba(14,11,12,.95) 0%,rgba(14,11,12,.88) 30%,rgba(14,11,12,.52) 46%,rgba(14,11,12,.10) 62%,rgba(14,11,12,0) 76%),
    linear-gradient(180deg,rgba(14,11,12,.46) 0%,rgba(14,11,12,0) 26%,rgba(14,11,12,0) 62%,rgba(14,11,12,.55) 100%);
}
/* final balance: the copy column stops short of the wall's first letter, and
   the scrim clears off faster so the room's words are fully readable */
.careband .say{max-width:min(29rem,40vw)}
.careband::after{
  background:
    linear-gradient(96deg,rgba(14,11,12,.95) 0%,rgba(14,11,12,.90) 26%,rgba(14,11,12,.60) 38%,rgba(14,11,12,.16) 52%,rgba(14,11,12,0) 66%),
    linear-gradient(180deg,rgba(14,11,12,.46) 0%,rgba(14,11,12,0) 26%,rgba(14,11,12,0) 62%,rgba(14,11,12,.55) 100%);
}

/* ============================================================
   THE PERSON COLLAGE — final layout, built around Tracy's frames
   Cell shapes follow the photographs rather than the other way
   round: the tall storytelling frames (the billboard, the museum)
   get tall cells, the wide one (the book) gets a wide cell, and
   the near-square candids get square cells. Nothing important
   gets cropped off.
   ============================================================ */
.per{grid-auto-rows:clamp(74px,7.6vw,116px)}
.per>*{grid-column:auto;grid-row:auto}
.per .p-main{grid-column:1/6;grid-row:1/5}
.per .p-say {grid-column:6/10;grid-row:1/5}
.per .p-a   {grid-column:10/13;grid-row:1/3}
.per .p-b   {grid-column:10/13;grid-row:3/5}
.per .p-c   {grid-column:1/4;grid-row:5/9}
.per .p-d   {grid-column:4/7;grid-row:5/9}
.per .p-e   {grid-column:7/13;grid-row:5/7}
.per .p-f   {grid-column:7/10;grid-row:7/9}
.per .p-g   {grid-column:10/13;grid-row:7/9}

/* faces sit above center in most of these, so square cells crop from the top */
.per .p-a img{object-position:center 34%}
.per .p-f img{object-position:center 28%}
.per .p-g img{object-position:center 30%}
.per .p-b img{object-position:center 40%}
/* the billboard is the point of that frame, so the crop holds the top */
.per .p-c img{object-position:center 26%}

@media(max-width:820px){
  .per{grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(66px,11vw,104px)}
  .per .p-main{grid-column:1/7;grid-row:1/5}
  .per .p-say {grid-column:1/7;grid-row:5/8}
  .per .p-a   {grid-column:1/4;grid-row:8/10}
  .per .p-b   {grid-column:4/7;grid-row:8/10}
  .per .p-c   {grid-column:1/4;grid-row:10/13}
  .per .p-d   {grid-column:4/7;grid-row:10/13}
  .per .p-e   {grid-column:1/7;grid-row:13/15}
  .per .p-f   {grid-column:1/4;grid-row:15/17}
  .per .p-g   {grid-column:4/7;grid-row:15/17}
}

/* MB Health runs green throughout, icons included, as it did in the
   Crossing edition */
#health .ico{--ring:var(--lime);--glyph:var(--ink-deep)}

/* ============================================================
   QUOTE CARDS
   Three voices, not one paragraph of grey text. Each gets its own
   card, its own accent rule and a real signature block, so the eye
   can tell where Barbara ends and Zaynab begins.
   ============================================================ */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,34px)}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}
.qc{
  margin:0;background:var(--paper);padding:clamp(28px,3vw,42px);
  display:flex;flex-direction:column;gap:1.4rem;
  border-top:4px solid var(--accent);
  box-shadow:0 1px 0 var(--line),0 18px 40px rgba(20,17,18,.05);
  position:relative;
}
.qc::before{
  content:"\\201C";position:absolute;top:.18em;right:.34em;
  font-family:var(--serif);font-size:clamp(4rem,7vw,6rem);line-height:1;
  color:var(--accent);opacity:.16;pointer-events:none;
}
.qc blockquote{
  margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.12rem,1.7vw,1.42rem);line-height:1.36;
  letter-spacing:-.012em;color:var(--ink);
}
.qc blockquote::before{content:"\\201C"}
.qc blockquote::after{content:"\\201D"}
.qc figcaption{
  margin-top:auto;padding-top:1.2rem;border-top:1px solid var(--line);
  display:grid;gap:.2rem;
}
.qc figcaption b{
  font-family:var(--sans);font-weight:800;font-size:.95rem;
  letter-spacing:-.01em;color:var(--ink);
}
.qc figcaption span{
  font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-ink,var(--accent));
}

/* memberships: full color, one line. These are credentials, so they are shown
   the way a credential should be, not whispered in grey. */
.memb{grid-template-columns:repeat(8,1fr);gap:clamp(16px,2.2vw,38px)}
.memb img{filter:none;opacity:1;height:clamp(40px,4.4vw,64px)}
.memb img:hover{filter:none}
.on-night .memb img,.on-night .memb img:hover{filter:none}
@media(max-width:1000px){
  /* still one line, it just scrolls rather than wrapping into a ragged block */
  .memb{
    display:flex;gap:clamp(20px,4vw,40px);overflow-x:auto;
    padding-bottom:.8rem;scrollbar-width:thin;
  }
  .memb img{flex:0 0 auto;width:auto;height:48px}
}

/* ============================================================
   REBRAND ROTATOR
   One rebrand at a time, so the logos can be big enough to
   actually read. The grid version made eight pairs share a row
   and every mark ended up thumbnail-sized.
   ============================================================ */
.rbx{margin-top:clamp(28px,4vw,52px)}
.rbx-stage{
  position:relative;
  min-height:clamp(420px,44vw,580px);
  background:var(--night-2);
  border-top:1px solid var(--night-line);
  border-bottom:1px solid var(--night-line);
}
.rbs{
  position:absolute;inset:0;margin:0;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(22px,3vw,42px);
  padding:clamp(30px,4vw,60px) var(--pad);
  opacity:0;visibility:hidden;transition:opacity .55s var(--ease);
}
.rbs.on{opacity:1;visibility:visible}
.pairbig{
  display:grid;grid-template-columns:1fr auto 1fr;
  gap:clamp(18px,3vw,52px);align-items:center;
  max-width:var(--wide);margin-inline:auto;width:100%;
}
.pairbig figure{
  margin:0;display:grid;place-items:center;gap:0;
  background:#fff;border-radius:6px;
  height:clamp(200px,24vw,320px);
  padding:clamp(24px,3vw,48px);
  position:relative;
}
.pairbig figure.before{background:var(--plate)}
.pairbig figure.before img{filter:saturate(.3) opacity(.78)}
.pairbig img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.pairbig .lbl{
  position:absolute;top:12px;left:14px;
  font:700 .62rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);
}
.pairbig figure.after .lbl{color:var(--cinnabar)}
.tobig{
  display:grid;place-items:center;
  width:clamp(38px,4vw,58px);height:clamp(38px,4vw,58px);border-radius:50%;
  background:var(--cinnabar);
}
.tobig::after{
  content:"";border-style:solid;
  border-width:8px 0 8px 13px;border-color:transparent transparent transparent var(--ink);
  margin-left:3px;
}
.rbs-cap{max-width:var(--wide);margin-inline:auto;width:100%;display:grid;gap:.4rem;text-align:center}
.rbs-cap b{font-family:var(--sans);font-weight:800;font-size:clamp(1.3rem,2.4vw,2rem);letter-spacing:-.03em;color:var(--on-night)}
.rbs-cap span{font-size:.92rem;color:var(--on-night-mid)}

/* the tab row: names, underlined. Not bubbles. */
.rbx-nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem 1.6rem;
  max-width:var(--wide);margin:clamp(24px,3vw,40px) auto 0;padding-inline:var(--pad);
}
.rbx-nav button{
  background:none;border:0;cursor:pointer;padding:.6rem 0;
  font:700 .72rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-night-dim);border-bottom:2px solid transparent;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.rbx-nav button:hover{color:var(--on-night)}
.rbx-nav button[aria-selected="true"]{color:var(--on-night);border-bottom-color:var(--grape)}

@media(max-width:760px){
  .pairbig{grid-template-columns:1fr;gap:14px}
  .tobig{transform:rotate(90deg);margin-inline:auto}
  .pairbig figure{height:clamp(150px,34vw,210px)}
  .rbs{position:relative;inset:auto}
  .rbs:not(.on){display:none}
}
@media(prefers-reduced-motion:reduce){.rbs{transition:none}}

/* ============================================================
   CONTRAST ON DARK GROUNDS
   The Crossing greys were set for atmosphere and they read as
   washed out at body size. These are lifted well clear of the
   ground while staying warm greys rather than pure white, so the
   page never goes black-and-white.
   Against #1A1617: mid is now about 12:1, dim about 7:1.
   ============================================================ */
:root{
  --on-night:#FAF9F8;
  --on-night-mid:#DBD6D6;
  --on-night-dim:#ABA4A5;
}
.on-night .lede,.on-night-2 .lede{color:var(--on-night-mid)}
.on-night .svc p,.on-night-2 .svc p{color:var(--on-night-mid)}
.tm li{color:var(--on-night-mid)}
.wk p{color:rgba(255,255,255,.86)}
.foot a{color:#CFC9C9}
.foot p{color:var(--on-night-mid) !important}
.rbs-cap span{color:var(--on-night-mid)}
.per .p-say p{color:var(--on-night-mid)}
.stat span{color:rgba(255,255,255,.88)}
.quote cite{color:var(--on-night-mid)}
.board span,.on-night .board span{color:var(--on-night-dim)}

/* board grid carries real titles and one line of expertise each, which is the
   depth that made the Results version's MB Health worth reading */
.board.bios{grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,36px) clamp(18px,2.4vw,34px)}
@media(max-width:1000px){.board.bios{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.board.bios{grid-template-columns:1fr}}
.board.bios img{aspect-ratio:4/5}
.board.bios figcaption{margin-top:1rem;display:grid;gap:.3rem}
.board.bios b{font-family:var(--sans);font-weight:800;font-size:1rem;letter-spacing:-.01em;color:var(--on-night)}
.board.bios .ttl{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lime)}
.board.bios span{font-size:.84rem;line-height:1.5;color:var(--on-night-mid)}
.boardhead h3{margin:0}
#health .checks .ico{--ring:var(--lime);--glyph:var(--ink-deep)}

/* ============================================================
   POV — the Crossing edition's editorial card, restored
   Serif headline, real category kicker, a read line. The
   Montserrat version had drifted back toward the Results look.
   ============================================================ */
.povgrid{grid-template-columns:repeat(3,1fr);gap:clamp(30px,3.4vw,52px)}
@media(max-width:900px){.povgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.povgrid{grid-template-columns:1fr}}
.povgrid .card{gap:1.05rem}
.povgrid .card .thumb{aspect-ratio:16/10}
.povgrid .card h3,.povgrid .card h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.24rem,1.8vw,1.5rem);
  line-height:1.2;letter-spacing:-.015em;color:var(--ink);margin:0;
}
.povgrid .card .kicker{
  font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-ink,var(--accent));margin:0;
}
.povgrid .card .meta{
  margin:0;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  transition:color .25s var(--ease);
}
.povgrid .card:hover .meta{color:var(--accent-ink,var(--accent))}
/* the badge takes the eighth cell of a seven-person grid, which fills the row
   and keeps it off the photography entirely */
.board-badge{display:grid;place-items:center;padding:clamp(18px,2.4vw,34px)}
.board-badge img{width:100%;max-width:210px;height:auto}
@media(max-width:560px){.board-badge{padding-block:8px}}
/* crop corrections now that the real frames are in: hold the face, not the
   middle of a very tall or very wide original */
.per .p-main img{object-position:center 33%}
.per .p-e img{object-position:center 28%}
.per .p-b img{object-position:center 46%}
/* the hero carries both paragraphs of the Results copy. The second is set a
   step down so the block still reads as one thought rather than a wall. */
.hero .lede{max-width:58ch}
.hero .lede-2{
  font-size:clamp(.95rem,1.15vw,1.06rem);line-height:1.62;
  color:rgba(255,255,255,.82);margin-top:1rem;max-width:62ch;
}
.hero .lede-2 b{color:#fff;font-weight:700}
.hero-cta{margin-top:2rem}
/* both marks shown true. Desaturating the "before" flatters the after but
   misrepresents the client's actual old identity, and the comparison is more
   convincing when both are honest. */
.pairbig figure{background:#fff}
.pairbig figure.before{background:var(--plate)}
.pairbig figure.before img{filter:none}
.pairbig .lbl{color:var(--muted)}
.pairbig figure.before .lbl{color:var(--muted)}
/* the badge is not a portrait: it must not inherit the board's 4:5 crop,
   cover fit or grayscale */
.board .board-badge img{
  aspect-ratio:auto;object-fit:contain;filter:none;
  width:auto;height:auto;max-width:100%;max-height:clamp(150px,16vw,215px);
}
/* the ticker and the What we do band were each carrying a full band's worth of
   air, which stacked into a hole under the hero */
.marq{padding-block:clamp(20px,2.2vw,30px)}
#what{padding-top:clamp(48px,5.4vw,80px)}

/* ============================================================
   CAPABILITIES PAGE
   Six disciplines, each introduced simply on the homepage and
   explained in full here. No receipts: the Work section proves it.
   ============================================================ */
.hero-short{min-height:clamp(520px,66vh,720px)}
.hero-short .k1{font-size:clamp(2.5rem,5.6vw,4.6rem);max-width:18ch}
.hero-short .lede{color:rgba(255,255,255,.88);margin-top:1.5rem;max-width:60ch}

/* the sticky discipline row: names, underlined on hover. Not bubbles. */
.dnav{
  position:sticky;top:0;z-index:60;
  background:#fff;
  border-bottom:1px solid var(--line);
}
/* Six names did not fit the 1280px row at ANY viewport, and the row scrolled
   with its scrollbar hidden, so the last one ("AI & MB Spark") was cut mid-word
   on every screen and read as a typo rather than as something to scroll.
   It now WRAPS instead of scrolling from 760px up, so a name can never be
   clipped; the tighter tracking and gap keep all six on one line at desktop. */
.dnav-in{
  max-width:var(--wide);margin:0 auto;padding:0 var(--pad);
  display:flex;flex-wrap:wrap;gap:0 clamp(14px,1.8vw,24px);
}
.dnav-in::-webkit-scrollbar{display:none}
.dnav a{
  flex:0 0 auto;padding:1.05rem 0;text-decoration:none;
  font:700 .72rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border-bottom:2px solid transparent;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
@media(max-width:759px){
  /* a phone cannot hold six names without becoming a wall, so scroll here,
     with a fade at the edge so it is obvious there is more to the right */
  /* NB: do not set position here. .dnav is position:sticky, which already
     establishes the containing block for the fade, and overriding it to
     relative would silently un-stick the nav on phones. */
  .dnav-in{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .dnav-in::after{content:'';flex:0 0 28px}
  .dnav::after{
    content:'';position:absolute;inset-block:0;right:0;width:56px;pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.92) 55%,#fff);
  }
}
.dnav a:hover,.dnav a.here{color:var(--ink);border-bottom-color:var(--rose)}

.cap-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(32px,5vw,80px);align-items:center;
}
.cap-head.flip>div:first-child{order:2}
.cap-head.flip>figure{order:1}
@media(max-width:940px){
  .cap-head{grid-template-columns:1fr}
  .cap-head.flip>div:first-child,.cap-head.flip>figure{order:0}
}
.cap-shot{margin:0}
.cap-shot img{
  width:100%;height:clamp(300px,40vw,520px);object-fit:cover;
  background:var(--paper-2);
}
.cap-shot figcaption{
  margin-top:.9rem;font-size:.8rem;line-height:1.5;color:var(--muted);
}
.on-night .cap-shot figcaption{color:var(--on-night-dim)}
.cap .checks{margin-top:2rem}
.cap .checks li{font-size:.95rem}
/* the discipline row has to sit under the fixed header, not behind it, and
   anchor jumps have to clear both bars */
.dnav{top:var(--navh,72px)}
:root{--navh:72px}
@media(min-width:941px){:root{--navh:78px}}
.cap[id],#healthptr{scroll-margin-top:calc(var(--navh) + 58px)}

/* ============================================================
   CAPABILITY BANDS — the photograph is the ground
   Replaces the copy-column-plus-rectangle layout. The image is
   full-bleed, the copy lives inside it behind a directional
   scrim, and the side alternates so the page has a rhythm.
   Where there is no photograph worth showing (data, AI) the
   section is honestly type-led rather than padded with a stock
   rectangle.
   ============================================================ */
.capband{
  position:relative;overflow:hidden;color:#fff;
  min-height:clamp(660px,92vh,940px);
  display:flex;align-items:center;
}
.capband>.ground{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.9) contrast(1.02) brightness(.88);
}
.capband::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(96deg,rgba(14,11,12,.95) 0%,rgba(14,11,12,.90) 26%,rgba(14,11,12,.58) 40%,rgba(14,11,12,.12) 56%,rgba(14,11,12,0) 70%),
    linear-gradient(180deg,rgba(14,11,12,.5) 0%,rgba(14,11,12,.06) 26%,rgba(14,11,12,.06) 60%,rgba(14,11,12,.6) 100%);
}
.capband.right::after{
  background:
    linear-gradient(264deg,rgba(14,11,12,.95) 0%,rgba(14,11,12,.90) 26%,rgba(14,11,12,.58) 40%,rgba(14,11,12,.12) 56%,rgba(14,11,12,0) 70%),
    linear-gradient(180deg,rgba(14,11,12,.5) 0%,rgba(14,11,12,.06) 26%,rgba(14,11,12,.06) 60%,rgba(14,11,12,.6) 100%);
}
.capband .wrap{position:relative;z-index:2;width:100%}
.capband .say{max-width:min(34rem,44vw)}
.capband.right .say{margin-inline-start:auto}
.capband .eyebrow{color:var(--accent)}
.capband .k2{font-size:clamp(2rem,3.5vw,3.2rem);text-shadow:0 2px 34px rgba(14,11,12,.6)}
.capband .k2 .ser{color:var(--accent)}
.capband .lede{color:rgba(255,255,255,.9);margin-top:1.4rem;max-width:46ch}
.capband .checks{margin-top:2rem}
.capband .checks li{font-size:.94rem;color:rgba(255,255,255,.92)}
.capband .checks .ico{--ring:var(--accent);--glyph:var(--ink-deep)}
.capband.a-plum .checks .ico,.capband.a-rose .checks .ico{--glyph:#fff}
.ground-credit{
  position:absolute;left:var(--pad);bottom:14px;z-index:3;margin:0;
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);
}
.capband.right .ground-credit{left:auto;right:var(--pad)}

/* the two type-led disciplines */
.capsolid-in{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,84px);align-items:start;
}
@media(max-width:940px){.capsolid-in{grid-template-columns:1fr}}
.checks.big{margin-top:0}
.checks.big li{
  font-size:clamp(1rem,1.4vw,1.15rem);padding-block:1rem;
  border-bottom:1px solid var(--line);align-items:center;
}
.on-night .checks.big li{border-bottom-color:var(--night-line)}
.checks.big li:first-child{border-top:1px solid var(--line)}
.on-night .checks.big li:first-child{border-top-color:var(--night-line)}
.capsolid .checks .ico{--ring:var(--accent);--glyph:#fff}
.capsolid.on-paper-2 .k2 .ser{color:var(--accent-ink,var(--accent))}

@media(max-width:900px){
  .capband{align-items:flex-end;min-height:clamp(600px,82vh,820px)}
  .capband .say{max-width:none}
  .capband.right .say{margin-inline-start:0}
  .capband::after,.capband.right::after{
    background:linear-gradient(180deg,rgba(14,11,12,.3) 0%,rgba(14,11,12,.06) 20%,rgba(14,11,12,.8) 52%,rgba(14,11,12,.97) 100%);
  }
  .capband .wrap{padding-block:clamp(30px,6vw,56px)}
}
.capband[id]{scroll-margin-top:calc(var(--navh) + 58px)}

/* ============================================================
   QUOTE BAND — rebuilt
   No boxes. Three voices on a night ground, separated by a
   hairline rule and marked with the MB arch in their own colour.
   The previous version printed a literal \201C because the escape
   was doubled on the way into this file; the quotation marks are
   now real characters in the markup where they belong.
   ============================================================ */
.a-lime{--accent:#73C632;--accent-ink:#3F7A15}
.a-sky {--accent:#4EA8DE;--accent-ink:#1C6BA0}

.quoteband{background:var(--night-2)}
.quotes{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-block:1px solid var(--night-line);
}
@media(max-width:900px){
  .quotes{grid-template-columns:1fr}
}
.qc{
  margin:0;padding:clamp(30px,3.4vw,52px) clamp(24px,2.6vw,44px);
  display:flex;flex-direction:column;gap:1.5rem;
  border-inline-start:1px solid var(--night-line);
  background:none;box-shadow:none;border-top:0;
  position:relative;
}
.qc:first-child{border-inline-start:0}
@media(max-width:900px){
  .qc{border-inline-start:0;border-top:1px solid var(--night-line)}
  .qc:first-child{border-top:0}
}
.qc::before{content:none}

/* the MB arch, painted in this voice's colour */
.qc .arch{
  display:block;width:64px;height:16px;background:var(--accent);
  -webkit-mask:url(/assets/bridge-black.png?v=e41a0c64) no-repeat left center/auto 100%;
          mask:url(/assets/bridge-black.png?v=e41a0c64) no-repeat left center/auto 100%;
}
.qc blockquote{
  margin:0;font-family:var(--serif);font-weight:400;font-style:normal;
  font-size:clamp(1.18rem,1.85vw,1.55rem);line-height:1.34;
  letter-spacing:-.012em;color:var(--on-night);
}
.qc blockquote::before,.qc blockquote::after{content:none}
.qc figcaption{
  margin-top:auto;padding-top:1.3rem;border-top:1px solid var(--night-line);
  display:grid;gap:.25rem;
}
.qc figcaption b{
  font-family:var(--sans);font-weight:800;font-size:.95rem;
  letter-spacing:-.01em;color:var(--on-night);
}
.qc figcaption span{
  font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);
}

/* memberships: bigger, and spanning the full measure of the page rather than
   sitting small in the middle of it */
#memberships .wrap{max-width:1560px}
.memb{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(18px,2.6vw,44px);grid-template-columns:none;
}
.memb img{
  flex:1 1 0;min-width:0;width:auto;
  height:clamp(58px,6.4vw,92px);object-fit:contain;object-position:center;
}
@media(max-width:1000px){
  .memb{overflow-x:auto;justify-content:flex-start;padding-bottom:.8rem}
  .memb img{flex:0 0 auto;height:62px}
}
/* the arch mark reads as a bridge, not as two spikes: flipped so the openings
   face down, and given enough width to show a real span */
/* The mask paints only the spandrels between the arches: each repeat is one
   spike, full height at its peak and tapering to nothing 100px either side. A
   complete spike therefore occupies a whole 200px period, not the span between
   two peaks. At 24px tall the mask scales to 240px wide (48px period), so a
   96px window from the left edge is exactly two whole spikes, points hanging
   down, with no clipped third. */
.qc .arch{
  width:96px;height:24px;
  -webkit-mask:url(/assets/bridge-black.png?v=e41a0c64) no-repeat left center/auto 100%;
          mask:url(/assets/bridge-black.png?v=e41a0c64) no-repeat left center/auto 100%;
}

/* The header rule `.nav ul{display:flex}` was also catching the Capabilities
   submenu, laying it out as a row of narrow wrapping columns. The submenu is a
   stacked list and has to say so explicitly. */
.nav .sub{
  display:block;gap:0;margin-inline-start:0;
  min-width:290px;padding:.6rem 0;
}
.nav .sub li{display:block;white-space:nowrap}
.nav .sub a{
  display:block;padding:.62rem 1.25rem;text-transform:none;
  font-size:.79rem;font-weight:600;letter-spacing:.01em;line-height:1.3;
}
/* a hover bridge so the menu does not close while the pointer crosses the gap */
.nav .has-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px}

/* ============================================================
   POV PAGE — the Crossing insights layout
   A featured pair carried by full-bleed photography, then a calm
   editorial feed. No topic pills: that filter was the bubble
   navigation Tracy asked us to remove everywhere.
   ============================================================ */
.povpage{background:var(--paper)}
.povpage .nav{position:fixed}

.start{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
@media(max-width:820px){.start{grid-template-columns:1fr}}
.start a{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(340px,42vw,520px);padding:clamp(26px,3.4vw,52px);
  text-decoration:none;color:#fff;overflow:hidden;background:var(--night);
}
.start a img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease);
}
.start a::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,17,18,.12) 0%,rgba(20,17,18,.52) 44%,rgba(20,17,18,.94) 100%);
}
.start a:hover img{transform:scale(1.04)}
.start a>*{position:relative;z-index:2}
.start .kicker{
  margin:0;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cinnabar);
}
.start h3{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.75rem,3.1vw,2.6rem);
  margin:.5rem 0 .55rem;letter-spacing:-.018em;line-height:1.1;
}
.start p{margin:0;color:rgba(255,255,255,.86);max-width:44ch;font-size:.95rem;line-height:1.55}

.feed{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,3.4vw,54px) clamp(24px,3vw,44px)}
@media(max-width:900px){.feed{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.feed{grid-template-columns:1fr}}
.feed .card{gap:1rem}
.feed .card .thumb{aspect-ratio:16/10}
.feed .card h3,.feed .card h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.2rem,1.7vw,1.44rem);
  line-height:1.22;letter-spacing:-.015em;color:var(--ink);margin:0;
}
.feed .card .kicker{
  margin:0;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-ink,var(--accent));
}
.feed .card .meta{
  margin:0;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  transition:color .25s var(--ease);
}
.feed .card:hover .meta{color:var(--accent-ink,var(--accent))}

.signup{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
@media(max-width:820px){.signup{grid-template-columns:1fr}}
.signup form{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.6rem}
.signup input{
  flex:1;min-width:240px;background:transparent;border:1.5px solid var(--night-line);
  color:var(--on-night);border-radius:999px;padding:1.05em 1.5em;font:500 .95rem/1 var(--sans);
}
.signup input::placeholder{color:var(--on-night-dim)}
.signup input:focus{border-color:var(--cinnabar)}   /* WCAG 2.4.7: outline:none
   removed. A 1.5px border colour change is too weak a focus cue on its own,
   and the site already defines a 3px ring everywhere else. */
/* These POV frames are article artwork that already carries its own headline,
   so the scrim has to build a genuinely solid lower half for our type rather
   than a light wash, and the art is anchored high so its own words stay clear. */
.start a img{object-position:center 18%}
.start a::after{
  background:linear-gradient(180deg,
    rgba(20,17,18,0) 0%,
    rgba(20,17,18,.10) 26%,
    rgba(20,17,18,.72) 52%,
    rgba(20,17,18,.94) 72%,
    rgba(20,17,18,.98) 100%);
}
.start h3{text-shadow:0 2px 24px rgba(20,17,18,.7)}

/* The featured pair: the artwork owns its frame at full bleed, and the
   headline sits on the night ground beneath it. These POV graphics already
   carry their own type, so nothing of ours is ever laid over them. */
.start a{
  display:grid;grid-template-rows:auto 1fr;padding:0;min-height:0;
  background:var(--night);align-content:start;
}
.start a::after{content:none}
.start .art{position:relative;display:block;aspect-ratio:16/10;overflow:hidden}
.start .art img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .8s var(--ease);
}
.start a:hover .art img{transform:scale(1.04)}
.start .cap{
  display:grid;gap:.55rem;align-content:start;
  padding:clamp(24px,3vw,44px);
}
.start .cap .kicker{
  font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cinnabar);
}
.start .cap .h{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.7vw,2.3rem);
  line-height:1.12;letter-spacing:-.018em;color:var(--on-night);text-shadow:none;
}
.start .cap .sub{
  font-size:.95rem;line-height:1.55;color:var(--on-night-mid);max-width:46ch;
}
.start .cap .meta{
  margin-top:.6rem;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-night-dim);transition:color .25s var(--ease);
}
.start a:hover .cap .meta{color:var(--cinnabar)}

/* the client ticker reads as proof, so the marks need to be legible at a
   glance rather than a decorative grey ribbon */
.marq{padding-block:clamp(24px,2.6vw,36px)}
.marq img{filter:grayscale(1) opacity(.78)}
.marq img:hover{filter:none}

/* ============================================================
   THE HANDOFF
   Replaces the strip of arches that sat between two dark
   sections. Because the arch strip is a mask, its open area
   showed the page's white background, which read as a gap in the
   page rather than a transition. This keeps the MB arch as the
   mark of the change but sets it on the dark ground, flanked by
   a hairline that carries the eye across.
   ============================================================ */
.handoff{background:var(--night-2);line-height:0;padding:0}
/* A bridge, not a row of triangles. The mask only paints the spandrels, so on
   its own it reads as spikes. Adding a solid deck above it turns the same
   asset into what it actually is: a span with arches under it. */
.handoff::before{
  content:"";display:block;
  height:clamp(9px,1.1vw,15px);background:var(--lime);
}
.handoff .arch{
  display:block;width:100%;height:clamp(26px,3.2vw,46px);
  background:var(--lime);
  -webkit-mask:url(/assets/bridge-black.png?v=e41a0c64) repeat-x center/auto 100%;
          mask:url(/assets/bridge-black.png?v=e41a0c64) repeat-x center/auto 100%;
}
.handoff.teal{background:var(--night)}
.handoff.teal::before,.handoff.teal .arch{background:var(--teal)}

/* ---------- the discipline icon on Capabilities ----------
   The same glyph the homepage card uses, so a visitor moving from
   the card to the page sees one system rather than two. */
.cap-ico{margin-bottom:1.6rem;--ring:var(--accent);--glyph:var(--ink-deep)}
.capband .cap-ico{--glyph:var(--ink-deep)}
.capband.a-plum .cap-ico,.capband.a-rose .cap-ico{--glyph:#fff}
.capsolid .cap-ico{--glyph:#fff}
.capsolid.a-teal .cap-ico{--glyph:#fff}

/* ============================================================
   MB HEALTH PAGE
   Green is the differentiator, so it runs through every accent,
   icon ring and rule on this page rather than being a badge on
   one section.
   ============================================================ */
.mbh{--accent:var(--lime);--accent-ink:var(--forest-dp)}
.mbh .eyebrow{color:var(--lime)}
.mbh .ser,.mbh .k1 .ser,.mbh .k2 .ser,.mbh .k3 .ser{color:var(--lime)}
.mbh .ico{--ring:var(--lime);--glyph:var(--ink-deep)}
.mbh .btn-primary{background:var(--lime);color:var(--ink-deep)}
.mbh .btn-primary:hover{background:#86D845}
.mbh .tlink{border-bottom-color:var(--lime);color:var(--lime)}
.mbh-hero .hero-meta span::before{background:var(--lime)}
.mbh-lockup{height:clamp(38px,4.4vw,58px);width:auto;margin-bottom:1.6rem}
/* the hero runs the same two-up as the homepage block. The hero copy sets its
   own widths, so the shared .head cap and the wide hero lede are both released
   here and the grid column does the constraining instead. */
/* Why MB Health: the checks sat centred in their column, leaving ~136px of
   dead space above and below and lining up with nothing. The Inspire system
   now sits above them and takes the slack, so both columns end level and the
   device is sized by the copy opposite it exactly as on the homepage. */
#why .split{align-items:stretch}
#why .why-col{display:flex;flex-direction:column;gap:clamp(16px,2.2vw,28px);min-height:0}
#why .why-col .mbh-device{
  flex:1 1 auto;min-height:clamp(150px,17vw,250px);
  /* capped: left uncapped it grew to ~590px and towered next to the headline.
     margin-block:auto centres it in whatever slack is left, so it reads as a
     supporting image sitting above the checks rather than a full-height slab. */
  max-height:clamp(260px,29vw,400px);margin-block:auto;
}
#why .why-col .checks{margin:0;flex:0 0 auto}
@media(max-width:900px){
  /* stacked: the device leads the column, as it does on the homepage */
  #why .split{align-items:start}
  #why .why-col .mbh-device{flex:0 0 auto;min-height:0;margin-bottom:clamp(18px,4vw,30px)}
}
.mbh-hero .k1{font-size:clamp(2.4rem,5.4vw,4.4rem)}

/* the three numbers, as a rule-separated row rather than three boxes */
.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
@media(max-width:820px){.statrow{grid-template-columns:1fr}}
.statrow .st{
  padding:clamp(24px,3vw,44px) clamp(20px,2.4vw,40px);
  border-inline-start:1px solid var(--night-line);
  display:grid;gap:.7rem;align-content:start;
}
.statrow .st:first-child{border-inline-start:0;padding-inline-start:0}
@media(max-width:820px){
  .statrow .st{border-inline-start:0;border-top:1px solid var(--night-line);padding-inline:0}
  .statrow .st:first-child{border-top:0}
}
.statrow b{
  font-family:var(--sans);font-weight:800;letter-spacing:-.04em;line-height:.92;
  font-size:clamp(2.6rem,5vw,4rem);color:var(--lime);
}
.statrow span{font-size:.95rem;line-height:1.55;color:var(--on-night-mid);max-width:34ch}
.statrow em{font-style:normal;color:var(--on-night)}

/* the two trajectories */
.traj{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,72px)}
@media(max-width:900px){.traj{grid-template-columns:1fr}}
.traj article{
  border-top:3px solid var(--lime);padding-top:clamp(22px,2.6vw,34px);
  display:grid;gap:1.1rem;align-content:start;
}
.traj .kick{
  margin:0;font:700 .7rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--lime);
}
.traj .lede{margin:0;max-width:44ch}
.traj .tl{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:1.1rem}
.traj .tl li{
  display:grid;gap:.25rem;padding-inline-start:1.4rem;position:relative;
}
.traj .tl li::before{
  content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;
  background:var(--lime);
}
.traj .tl li::after{
  content:"";position:absolute;left:3px;top:1.5em;bottom:-1.1rem;width:1px;background:var(--night-line);
}
.traj .tl li:last-child::after{display:none}
.traj .tl b{font-family:var(--sans);font-weight:800;font-size:.9rem;letter-spacing:.01em;color:var(--on-night)}
.traj .tl span{font-size:.9rem;line-height:1.5;color:var(--on-night-mid)}
.traj .big{
  margin:.8rem 0 0;padding-top:1.4rem;border-top:1px solid var(--night-line);
  display:grid;gap:.3rem;
}
.traj .big b{
  font-family:var(--sans);font-weight:800;letter-spacing:-.04em;line-height:.92;
  font-size:clamp(2.2rem,4vw,3.2rem);color:var(--lime);
}
.traj .big span{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-night-dim)}

/* ---------- logo normalization ----------
   Scaling logos to a common HEIGHT is what made Allina Health tower over
   Jersey Mike's: a five-to-one wordmark and a compact badge have nothing in
   common vertically. Every mark now gets an identical bounding box and is
   contained inside it, so a wide logo shrinks to fit the width and a compact
   one fills the height. Same footprint, same optical weight. */
.marq img{
  /* Each file is already area-normalised at a fixed canvas height, so a single
     display height gives every mark the same amount of ink. Width is left to
     follow the artwork: a wide wordmark simply occupies a wider slot, and the
     flex gap keeps the spaces between marks identical. */
  height:clamp(58px,6.4vw,96px);
  width:auto;
  flex:0 0 auto;
}

/* ---------- restored Results sections ---------- */
.shortver{
  margin-top:clamp(44px,5vw,72px);padding-top:clamp(28px,3vw,44px);
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,44px);align-items:center;justify-content:space-between;
}
.shortver .lede{max-width:52ch}

.inds{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--hair);background:var(--line)}
@media(max-width:900px){.inds{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.inds{grid-template-columns:1fr}}
.ind{
  background:var(--paper-2);padding:clamp(24px,2.8vw,38px);
  display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;
}
.ind .ico{--ring:var(--accent);--glyph:#fff;margin-top:.15rem}
.ind h3{font-family:var(--sans);font-weight:800;font-size:1.05rem;letter-spacing:-.015em;margin:0 0 .45rem}
.ind p{margin:0;font-size:.92rem;line-height:1.6;color:var(--body)}

/* ============================================================
   GET TO KNOW THE PEOPLE
   One hero frame per person, a bio with some life in it, and a
   click-through of fun facts about them and their department.
   The photographs that used to make up the collage now earn
   their place by illustrating a specific fact.
   ============================================================ */
.ppl{display:grid;gap:clamp(40px,5vw,72px)}
.person{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(28px,4vw,66px);
  /* the portrait is sized by the bio beside it, so both columns start and end
     on the same line rather than the photo running past the copy */
  align-items:stretch;
}
@media(max-width:900px){.person{grid-template-columns:1fr;align-items:start}
  .p-hero{aspect-ratio:.87}}

.p-hero{margin:0;position:relative;overflow:hidden;background:var(--night-2);min-height:0}
.p-hero img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center center;display:block;
}
.p-hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:38%;
  background:linear-gradient(180deg,transparent,rgba(20,17,18,.5));
  pointer-events:none;
}

.p-bio .role{
  margin:0 0 .5rem;font:700 .68rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--cinnabar);
}
.p-bio h3{
  font-family:var(--sans);font-weight:800;letter-spacing:-.035em;line-height:.96;
  font-size:clamp(2.1rem,4.2vw,3.4rem);margin:0 0 1.1rem;color:var(--on-night);
}
.p-bio .hook{
  margin:0 0 1.3rem;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.3;color:var(--cinnabar);
}
.p-bio .body{margin:0 0 1rem;font-size:.98rem;line-height:1.68;color:var(--on-night-mid);max-width:52ch}
.p-bio .body b{color:var(--on-night)}

/* the control */
.ktoggle{
  margin-top:1.4rem;display:inline-flex;align-items:center;gap:.8rem;
  background:none;border:0;border-bottom:2px solid var(--cinnabar);
  color:var(--on-night);cursor:pointer;padding:.7rem 0;
  font:800 .82rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  transition:gap .25s var(--ease);
}
.ktoggle:hover{gap:1.2rem}
.ktoggle .chev{
  width:11px;height:11px;border-right:2px solid var(--cinnabar);border-bottom:2px solid var(--cinnabar);
  transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease);
}
.ktoggle[aria-expanded="true"] .chev{transform:rotate(-135deg) translateY(-2px)}

/* the facts */
.p-facts{
  grid-column:1/-1;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--hair);
  background:var(--night-line);margin-top:clamp(10px,1.6vw,22px);
}
@media(max-width:900px){.p-facts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.p-facts{grid-template-columns:1fr}}
.p-facts[hidden]{display:none}
.fact{
  background:var(--night-2);padding:clamp(22px,2.6vw,34px);
  display:grid;gap:.8rem;align-content:start;position:relative;overflow:hidden;
}
.fact .ico{--ring:var(--cinnabar);--glyph:var(--ink)}
.fact h4{
  font-family:var(--sans);font-weight:800;font-size:1.02rem;line-height:1.25;
  letter-spacing:-.015em;margin:0;color:var(--on-night);
}
.fact p{margin:0;font-size:.9rem;line-height:1.6;color:var(--on-night-mid)}
.fact p em{font-style:italic;color:var(--on-night)}
.fact.has-shot img{
  width:calc(100% + 2 * clamp(22px,2.6vw,34px));
  margin:.6rem calc(-1 * clamp(22px,2.6vw,34px)) calc(-1 * clamp(22px,2.6vw,34px));
  height:clamp(180px,20vw,250px);object-fit:cover;display:block;
  transition:transform .7s var(--ease);
}
.fact.has-shot:hover img{transform:scale(1.04)}
.fact:nth-child(2) .ico{--ring:var(--lime)}
.fact:nth-child(3) .ico{--ring:var(--amber)}
.fact:nth-child(4) .ico{--ring:var(--sky,#4EA8DE)}
.fact:nth-child(5) .ico{--ring:var(--rose);--glyph:#fff}
.fact:nth-child(6) .ico{--ring:var(--grape);--glyph:#fff}

/* the animation is a height reveal, so it stays cheap and never janks */
@media(prefers-reduced-motion:no-preference){
  .p-facts{animation:factsin .5s var(--ease) both}
  @keyframes factsin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}
/* the base `img{max-width:100%}` was capping the bleed, so the fact photos sat
   inset instead of running to the card edges */
.fact.has-shot img{max-width:none}

/* ============================================================
   SPACING SYSTEM
   The gap under a heading was being set inline in five different
   values across four pages. It is one decision, so it lives here
   once and every page inherits it.
   ============================================================ */
.k1 + .lede,.k2 + .lede,.k3 + .lede,
.d1 + .lede,.d2 + .lede,.d3 + .lede,
h1 + .lede,h2 + .lede,h3 + .lede{margin-top:1.45rem}
.lede + .lede{margin-top:1.05rem}
.lede + .checks,.lede + .hero-cta{margin-top:2rem}
.eyebrow + .k1,.eyebrow + .k2,.eyebrow + .k3,
.eyebrow + .d1,.eyebrow + .d2,.eyebrow + .d3{margin-top:0}

/* section rhythm: every band gets the same air, and a band that follows
   another of the same ground collapses the doubled padding */
.band + .band,.band-sm + .band-sm{padding-top:clamp(48px,5.4vw,80px)}

/* ============================================================
   MOBILE PASS
   Audited in a 390px frame across all five pages. No page
   scrolled horizontally, so the grid work holds. Two real
   problems showed up on every page and are fixed here.
   ============================================================ */

/* ---- 1. the type floor ----
   Forty-odd labels were rendering between 9.6px and 12.2px. Uppercase
   letterspaced text is the hardest thing to read small, and these are the
   eyebrows and kickers that tell you where you are. Nothing goes below 12px
   on a phone. */
@media(max-width:900px){
  .eyebrow,
  .card .kicker,.povgrid .card .kicker,.feed .card .kicker,.start .cap .kicker,
  .card .meta,.feed .card .meta,.start .cap .meta,
  .wk .who,.dcard .n,.p-bio .role,.tm .role,.traj .kick,
  .board.bios .ttl,.qc figcaption span,.statrow span,
  .rbx-nav button,.dnav a,.nav a,.drawer nav a,
  .foot h2,.foot-base,.hero-credit,.ground-credit,.ig-note,
  .slot span,.fact p,.rbs-cap span{
    font-size:max(0.78rem,12px);
    letter-spacing:.1em;
  }
  .fact p,.slot span,.statrow span,.rbs-cap span{letter-spacing:0;font-size:max(0.92rem,14px)}
  .hero-credit,.ground-credit{letter-spacing:.12em;font-size:max(0.7rem,11px)}
  .foot a{font-size:max(0.92rem,14px)}
  .lede{font-size:max(1rem,16px)}
  .svc p,.dcard p,.ind p,.pc h3{font-size:max(0.95rem,15px)}
}

/* ---- 2. tap targets ----
   Menu was 37px, Close 32px, the rebrand tabs 33px. Anything a thumb has to
   hit gets at least 44px of height on a touch screen. */
@media(max-width:900px){
  .nav-toggle,.drawer-close{min-height:44px;display:inline-flex;align-items:center;padding-inline:.4rem}
  .ktoggle{min-height:48px}
  .rbx-nav button{min-height:44px;padding-block:.9rem}
  .dnav a{min-height:44px;display:inline-flex;align-items:center}
  .btn{min-height:48px;padding-block:1rem}
  .tlink{min-height:44px;display:inline-flex;align-items:center}
  .nav ul a,.drawer nav a{min-height:44px;display:flex;align-items:center}
  .foot a{display:inline-block;padding-block:.3rem}
  .memb img{min-height:44px}
}

/* ---- 3. mobile rhythm ----
   Bands were carrying desktop-sized air on a 390px screen, which turns the
   page into a lot of scrolling past nothing. */
@media(max-width:700px){
  .band{padding-block:clamp(52px,11vw,72px)}
  .band-sm{padding-block:clamp(40px,8vw,56px)}
  .hero{min-height:88svh}
  .hero .k1{font-size:clamp(2.4rem,11vw,3.2rem)}
  .k2{font-size:clamp(1.9rem,8.4vw,2.6rem)}
  .k3{font-size:clamp(1.4rem,6.2vw,1.9rem)}
  .head{margin-bottom:clamp(28px,7vw,40px)}
  .handoff{padding:clamp(18px,5vw,28px) 0}
  .handoff .arch{height:clamp(22px,6vw,32px)}
  .statrow .st{padding-block:clamp(20px,5vw,28px)}
}

/* the hero on a phone: two paragraphs plus two buttons is a lot of column, so
   the second paragraph steps back rather than competing */
@media(max-width:620px){
  .hero .lede-2{font-size:max(0.92rem,14.5px);line-height:1.6}
  .hero-cta{gap:.7rem;width:100%}
  .hero-cta .btn{flex:1 1 auto;justify-content:center}
  .hero-meta{gap:.4rem 1rem;font-size:max(0.66rem,10.5px)}
}

/* POV kickers carry the icon of the discipline the piece belongs to, so the
   categories tie back to Capabilities instead of floating as loose labels */
.povgrid .card .kicker,.feed .card .kicker,.start .cap .kicker{
  display:inline-flex;align-items:center;gap:.5rem;
}
.card .kicker .ico,.start .cap .kicker .ico{
  --size:20px;--ring:var(--accent-ink,var(--accent));--glyph:#fff;flex:none;
}
.start .cap .kicker .ico{--ring:var(--cinnabar);--glyph:var(--ink)}

/* the last three items the audit still flagged on a phone */
@media(max-width:900px){
  .nav .btn{font-size:max(0.76rem,12px);padding:.9em 1.3em}
  .hero-meta{font-size:max(0.72rem,11.5px)}
  /* the logo is a 26px image inside a link with no padding, which is a small
     target for a thumb even though it looks large */
  .nav > a:first-child{display:inline-flex;align-items:center;min-height:44px}
}

/* ============================================================
   MOBILE HEADER FIX
   Under 940px the nav links hide and the Menu button takes over,
   but the Let's connect button was never hidden with them. Logo,
   button and Menu were all competing for the same row and
   overlapping. The button already lives in the drawer, so it
   comes out of the bar.
   ============================================================ */
@media(max-width:940px){
  .nav > .btn{display:none}
  .nav-toggle{margin-inline-start:auto}
  /* the bar needs its own ground on a phone: it sits over a photograph and
     the hero copy runs right up under it */
  .nav{background:linear-gradient(180deg,rgba(20,17,18,.82),rgba(20,17,18,0));padding-block:.85rem}
  .nav.solid{background:#fff}
}

/* the hero has to clear the fixed bar. It is bottom-aligned, so on a phone
   where the copy is tall it was pushing up underneath the header. */
@media(max-width:900px){
  .hero-in{padding-top:calc(var(--navh) + 26px)}
  .hero{min-height:auto;padding-block:0 clamp(28px,7vw,44px)}
  .hero-short{min-height:auto}
}

/* the rebrand tab row wrapped to five lines on a phone, which buried the
   rotator. It scrolls on one line instead, the same pattern the discipline
   nav and the membership row already use. */
@media(max-width:760px){
  .rbx-nav{
    flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;scrollbar-width:none;gap:1.4rem;
    -webkit-overflow-scrolling:touch;
  }
  .rbx-nav::-webkit-scrollbar{display:none}
  .rbx-nav button{flex:0 0 auto;white-space:nowrap}
}

/* ============================================================
   PALETTE CONSOLIDATION
   The audit found forty distinct hex values, including three
   near-identical greys doing the same job and two inks repeated
   eighteen times as literals. Everything now resolves to a token,
   so a palette change is one edit rather than a search.
   ============================================================ */
:root{
  --plate:#F1EFEE;      /* the ground a "before" logo sits on */
  --ink-deep:#14110F;   /* ink on lime, amber and other light accents */
}

/* ============================================================
   CARE BAND — photo slid right, headline on two lines
   The frame is 3:2 and the band is wider than it is tall, so
   object-position had almost no horizontal slack to work with:
   shifting the crop barely moved the wall. The photograph is
   given the right three quarters of the band instead, and the
   band's own dark ground holds the left. That is a real slide
   rather than a crop nudge.
   ============================================================ */
.careband{background:var(--night)}
.careband > img{
  left:auto;right:0;width:76%;
  object-position:center center;
}
/* the photo's left edge dissolves into the dark ground so the join never
   reads as a hard seam */
.careband::after{
  background:
    linear-gradient(90deg,
      var(--night) 0%,
      var(--night) 20%,
      rgba(14,11,12,.92) 28%,
      rgba(14,11,12,.55) 38%,
      rgba(14,11,12,.12) 50%,
      rgba(14,11,12,0) 62%),
    linear-gradient(180deg,rgba(14,11,12,.42) 0%,rgba(14,11,12,0) 24%,rgba(14,11,12,0) 64%,rgba(14,11,12,.55) 100%);
}
/* two lines, so the measure widens and the display steps down to fit */
.careband .say{max-width:min(40rem,47vw)}
.careband .d2{font-size:clamp(1.75rem,2.75vw,2.5rem);line-height:1.12}
.careband .lede{max-width:42ch}

@media(max-width:900px){
  .careband > img{left:0;right:0;width:100%}
  .careband::after{
    background:linear-gradient(180deg,rgba(14,11,12,.28) 0%,rgba(14,11,12,.06) 22%,rgba(14,11,12,.76) 58%,rgba(14,11,12,.96) 100%);
  }
  .careband .say{max-width:none}
}

/* more black on the left: the photograph gives up another slice of the band,
   and the solid ground now runs past the copy measure rather than starting to
   dissolve underneath it. The word "investment" sits on black, not on a
   dimmed picture. */
.careband > img{width:66%}
.careband::after{
  background:
    linear-gradient(90deg,
      var(--night) 0%,
      var(--night) 48%,
      rgba(14,11,12,.96) 55%,
      rgba(14,11,12,.72) 62%,
      rgba(14,11,12,.28) 71%,
      rgba(14,11,12,0) 82%),
    linear-gradient(180deg,rgba(14,11,12,.42) 0%,rgba(14,11,12,0) 24%,rgba(14,11,12,0) 64%,rgba(14,11,12,.55) 100%);
}
.careband .lede{max-width:40ch}
@media(max-width:900px){
  .careband > img{width:100%}
}

/* ============================================================
   CARE BAND — back to a full-bleed photograph
   The solid black panel went too far: it cropped the wall and
   replaced the photo's own left side with flat colour. The frame
   is full width again, so the whole of THE BEST STRATEGY IS TO
   CARE is in view and the room still reads on the left. The
   scrim is rgba throughout, never the solid ground, so the
   photograph shows through behind the copy instead of being
   painted over.
   ============================================================ */
.careband > img{
  left:0;right:0;width:100%;
  object-position:62% center;
}
.careband::after{
  background:
    linear-gradient(90deg,
      rgba(14,11,12,.93) 0%,
      rgba(14,11,12,.88) 24%,
      rgba(14,11,12,.66) 38%,
      rgba(14,11,12,.30) 50%,
      rgba(14,11,12,.06) 62%,
      rgba(14,11,12,0) 72%),
    linear-gradient(180deg,rgba(14,11,12,.44) 0%,rgba(14,11,12,0) 24%,rgba(14,11,12,0) 62%,rgba(14,11,12,.58) 100%);
}
.careband .say{max-width:min(36rem,43vw)}
.careband .lede{max-width:38ch}
@media(max-width:900px){
  .careband > img{object-position:60% center}
}

/* ============================================================
   THE WORK COLLAGE
   Replaces the office-and-city collage under "Who we are". After
   a headline that says what we built is much bigger, the honest
   proof is the work itself.

   Every piece is shown WHOLE. A uniform grid cropped billboards
   into nonsense and letterboxed the vertical pieces, so the rows
   are justified instead: within a row all tiles share one height
   and each tile's width is proportional to that image's own
   aspect ratio, which is exactly the shape the picture wants.
   ============================================================ */
.work-collage{display:grid;gap:2px;background:var(--night-line)}
.cc-row{
  display:flex;gap:2px;
  /* the row's height falls out of the ratios: total width divided by the sum
     of the aspect ratios. Capped so a wide screen does not make one row
     enormous. */
  max-height:420px;
}
.work-collage .cc{
  position:relative;display:block;overflow:hidden;text-decoration:none;
  background:var(--night-2);
  flex:var(--ar) 1 0;
  aspect-ratio:var(--ar);
  min-width:0;
}
.work-collage .cc img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.94);transition:transform .8s var(--ease),filter .5s var(--ease);
}
.work-collage .cc:hover img{transform:scale(1.035);filter:saturate(1.06)}
.work-collage .cc span{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:.85rem .95rem;
  font:700 .66rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:#fff;
  background:linear-gradient(180deg,transparent,rgba(20,17,18,.86));
  opacity:0;transform:translateY(6px);transition:.3s var(--ease);
}
.work-collage .cc:hover span,.work-collage .cc:focus-visible span{opacity:1;transform:none}

@media(max-width:820px){
  /* on a phone a justified row makes every piece tiny, so each one gets the
     full width at its own aspect ratio and is shown whole that way */
  .cc-row{flex-direction:column;max-height:none}
  .work-collage .cc{flex:0 0 auto;width:100%}
  .work-collage .cc span{opacity:1;transform:none;font-size:max(0.75rem,12px)}
}

/* ============================================================
   CARE BAND — trimmed frame, slid right
   The glass partition on the far right is gone from the source
   (art-care-wall-trim.jpg), which is the least interesting part
   of the room and was eating width.

   Why the frame cannot simply be full-bleed and still clear the
   copy: the wall occupies roughly 28% to 90% of the picture, so
   at full width its left edge lands around 375px, which is inside
   the copy column. Anchoring the picture to the right at 88%
   pushes that edge past 490px while keeping the whole wall in
   view. The remaining sliver on the left is dissolved with an
   rgba scrim, not filled with flat colour, so the room still
   reads behind the words.
   ============================================================ */
.careband > img{
  left:auto;right:0;width:88%;
  object-position:right center;
}
.careband::after{
  background:
    linear-gradient(90deg,
      rgba(14,11,12,.96) 0%,
      rgba(14,11,12,.94) 22%,
      rgba(14,11,12,.80) 34%,
      rgba(14,11,12,.44) 45%,
      rgba(14,11,12,.12) 56%,
      rgba(14,11,12,0) 68%),
    linear-gradient(180deg,rgba(14,11,12,.44) 0%,rgba(14,11,12,0) 24%,rgba(14,11,12,0) 62%,rgba(14,11,12,.58) 100%);
}
@media(max-width:900px){
  .careband > img{left:0;right:0;width:100%;object-position:60% center}
}

/* smaller: the collage was running the full bleed of the page. It now sits in
   a centred measure, which drops each row's height by roughly a fifth and
   gives the section a frame instead of letting the work fight the edges */
.work-collage{
  max-width:min(1140px,100% - (var(--pad) * 2));
  margin-inline:auto;
}
.cc-row{max-height:none}

/* more condensed: a tighter measure and a hairline gutter. The work still
   reads at a glance; it just stops dominating the section. */
.work-collage{max-width:min(980px,100% - (var(--pad) * 2));gap:3px}
.cc-row{gap:3px}

/* ============================================================
   THE WORK COLLAGE — as a page separator
   Narrowing it made it tall and skinny. What this section wants
   is the opposite: full width and shallow, the way the original
   office collage read. Two justified rows across the whole page.
   Row height is width divided by the sum of that row's aspect
   ratios, so adding a piece to a row makes the band shorter.
   ============================================================ */
.work-collage{max-width:none;margin-inline:0;gap:3px}

/* an honest empty slot rather than a stretched photo */
.slot-open{
  display:grid;place-items:center;align-content:center;gap:.3rem;text-align:center;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 10px,transparent 10px 20px),
    var(--night-3);
  box-shadow:inset 0 0 0 1px var(--night-line);
}
.slot-open b{
  font:700 .64rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-night-mid);
}
.slot-open span{font-size:.72rem;color:var(--on-night-dim);letter-spacing:0}
@media(max-width:820px){
  .slot-open{min-height:150px}
}

/* an honest empty slot rather than a stretched photo */
.slot-open{
  display:grid;place-items:center;align-content:center;gap:.3rem;text-align:center;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 10px,transparent 10px 20px),
    var(--night-3);
  box-shadow:inset 0 0 0 1px var(--night-line);
}
.slot-open b{
  font:700 .64rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-night-mid);
}
.slot-open span{font-size:.72rem;color:var(--on-night-dim);letter-spacing:0}
@media(max-width:820px){.slot-open{min-height:150px}}

/* the agency film, sitting above the team on the homepage */
#people .reel{max-width:min(1020px,100%);margin-inline:auto}
.reel-note{font-size:.8rem;color:var(--on-night-dim);margin:.9rem auto 0;max-width:min(1020px,100%)}
.reel-gap{margin-top:clamp(52px,6vw,90px)}
@media(max-width:700px){.reel-note{font-size:max(0.78rem,12px)}}

/* the film is a real button now, so it needs the button reset */
button.reel{border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;width:100%}
button.reel .cap{display:block}

/* ============================================================
   TEAM & CULTURE
   The discipline grid that used to sit here repeated the
   Capabilities page. This area waits for the team and culture
   photography, grouped by category.
   ============================================================ */
.culture-wrap{margin-top:clamp(56px,7vw,96px)}
.cat-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--hair);background:var(--night-line)}
@media(max-width:820px){.cat-slots{grid-template-columns:1fr}}
.cat-slot{
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 10px,transparent 10px 20px),
    var(--night-3);
  box-shadow:inset 0 0 0 1px var(--night-line);
  min-height:clamp(160px,18vw,220px);
  display:grid;place-items:center;align-content:center;gap:.45rem;text-align:center;
  padding:clamp(20px,2.4vw,32px);
}
.cat-slot b{
  font:700 .68rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-night-mid);
}
.cat-slot span{font-size:.84rem;line-height:1.5;color:var(--on-night-dim);max-width:26ch}
/* the badge sits level with the portraits rather than floating low in a cell
   that is as tall as photo plus caption */
.board-badge{place-items:start center;padding:0}
.board .board-badge img{margin-top:clamp(6px,1.2vw,18px)}

/* ============================================================
   TEAM & CULTURE CATEGORIES
   Three stories rather than a wall of thumbnails. Each category
   gets a heading, a line of copy, and its photographs in
   justified rows, so every frame is shown whole exactly as the
   work band does. The captions are the point: without them a
   crochet carrot means nothing to a stranger.
   ============================================================ */
.cats{display:grid;gap:clamp(46px,5.5vw,78px);margin-top:clamp(38px,4.5vw,64px)}
.cat-head{
  max-width:var(--wide);margin:0 auto clamp(16px,1.8vw,24px);
  padding-inline:var(--pad);
}
/* These three headlines introduce the personality photography, and set in flat
   sans they read like section labels. Serif italic in the accent, with a short
   rule leading into them, gives them the warmer register the pictures already
   have, using the type pairing the rest of the site already uses. */
.cat-head h4{
  font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.015em;
  font-size:clamp(1.55rem,2.7vw,2.35rem);line-height:1.1;
  margin:0 0 .55rem;color:var(--accent);
  display:flex;align-items:center;gap:.75rem;
}
.cat-head h4::before{
  content:"";flex:0 0 auto;width:clamp(22px,3vw,44px);height:2px;
  background:currentColor;opacity:.65;
}
/* the pet captions name the owner in a quieter cut */
.dog figcaption i{font-style:normal;color:var(--on-night-dim)}
.cat-head p{margin:0;font-size:.95rem;line-height:1.6;color:var(--on-night-mid);max-width:60ch}

.cu-row{display:flex;gap:3px}
.cu-row + .cu-row{margin-top:3px}
.cu{
  position:relative;margin:0;overflow:hidden;background:var(--night-2);
  flex:var(--ar) 1 0;aspect-ratio:var(--ar);min-width:0;
}
.cu img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.95);transition:transform .8s var(--ease),filter .5s var(--ease);
}
.cu:hover img{transform:scale(1.04);filter:saturate(1.05)}
.cu figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:.8rem .9rem;
  font:700 .64rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(20,17,18,.86));
  opacity:0;transform:translateY(6px);transition:.3s var(--ease);
}
.cu:hover figcaption{opacity:1;transform:none}

@media(max-width:820px){
  .cu-row{flex-wrap:wrap}
  .cu{flex:1 1 calc(50% - 3px)}
  .cu figcaption{opacity:1;transform:none;font-size:max(0.62rem,10.5px);padding:.6rem .65rem}
}

/* ============================================================
   REBRAND SCROLL
   The rotator showed one pair every five seconds, so a visitor
   saw two of eight before moving on. All eight now run past
   continuously and the range registers at a glance.
   ============================================================ */
.rbscroll{overflow:hidden;padding-block:clamp(10px,1.4vw,20px)}
.rbscroll-row{display:flex;width:max-content;gap:3px;animation:rbmarch 46s linear infinite}
.rbscroll:hover .rbscroll-row{animation-play-state:paused}
@keyframes rbmarch{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .rbscroll{overflow-x:auto}
  .rbscroll-row{animation:none}
}
.rbp{
  flex:0 0 auto;width:clamp(320px,30vw,430px);
  background:var(--night-2);padding:clamp(18px,2vw,26px);
  display:grid;gap:.9rem;align-content:start;
}
.rbp-pair{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(10px,1.2vw,16px);align-items:center}
/* the white window keeps its size; the padding comes down so each mark reads
   as large as it can inside it. Every logo has been trimmed to its ink, so
   none of them waste the box on baked-in margin any more. */
.rbp figure{
  margin:0;display:grid;place-items:center;background:#fff;border-radius:5px;
  height:clamp(96px,10vw,132px);padding:clamp(7px,.8vw,11px);
}
.rbp figure.before{background:var(--plate)}
.rbp img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.rbp-arw{
  width:clamp(22px,2.4vw,30px);height:clamp(22px,2.4vw,30px);border-radius:50%;
  background:var(--cinnabar);display:grid;place-items:center;
}
.rbp-arw::after{content:"";border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--ink);margin-left:2px}
.rbp b{font-family:var(--sans);font-weight:800;font-size:.92rem;letter-spacing:-.01em;color:var(--on-night)}
.rbscroll-key{display:flex;gap:1.6rem;margin:clamp(16px,2vw,26px) 0 0;font:700 .66rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.rbscroll-key span{display:flex;align-items:center;gap:.5rem;color:var(--on-night-dim)}
.rbscroll-key span::before{content:"";width:14px;height:14px;border-radius:3px}
.rbscroll-key .k-b::before{background:var(--plate)}
.rbscroll-key .k-a::before{background:#fff}
@media(max-width:700px){
  .rbp{width:clamp(260px,78vw,320px)}
  .rbscroll-row{animation-duration:34s}
}

/* ============================================================
   THE MEDTECH GROWTH BLUEPRINT
   Two named trajectories, each on its own accent, matching the
   MB Health deck. This is the one place a receipt belongs on the
   homepage: it is not a capability claim, it is the practice's
   whole credential.
   ============================================================ */
.blueprint{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,38px);
  margin-bottom:clamp(56px,7vw,96px);
}
@media(max-width:900px){.blueprint{grid-template-columns:1fr}}
.bp{
  --bp:var(--lime);
  background:var(--night);padding:clamp(26px,3vw,42px);
  border-top:4px solid var(--bp);
  display:flex;flex-direction:column;gap:1.1rem;
}
.bp-amber{--bp:#D9A03C}
.bp-green{--bp:#4FA87B}
.bp-logo{height:clamp(28px,3vw,38px);width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.92}
.bp-kick{
  margin:0;font:700 .68rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--bp);
}
.bp-lede{margin:0;font-size:.98rem;line-height:1.62;color:var(--on-night-mid);max-width:46ch}
.bp-tl{margin:.4rem 0 0;display:grid;grid-template-columns:auto 1fr;gap:.75rem 1.2rem;align-items:baseline}
.bp-tl dt{
  font:700 .68rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--bp);white-space:nowrap;
}
.bp-tl dd{margin:0;font-size:.92rem;line-height:1.5;color:var(--on-night-mid)}
.bp-tl dd b{color:var(--on-night);font-weight:700}
/* the headline figure is pushed to the bottom of its card, so the two
   sides always line up no matter how much copy sits above them */
.bp-big{
  margin:auto 0 0;padding-top:1.4rem;border-top:1px solid var(--night-line);
  display:grid;gap:.3rem;
}
.bp-big b{
  font-family:var(--sans);font-weight:800;letter-spacing:-.04em;line-height:.92;
  font-size:clamp(2.4rem,4.4vw,3.4rem);color:var(--bp);
}
.bp-big span{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-dim)}
@media(max-width:560px){
  .bp-tl{grid-template-columns:1fr;gap:.3rem}
  .bp-tl dd{margin-bottom:.6rem}
}

/* ============================================================
   POV ARTWORK SHOWN WHOLE
   Every POV cover is 1200x630, the standard share-image ratio
   (1.905). The thumbnails were 16:10, so `cover` was slicing the
   sides off and cutting headlines in half. The frames now match
   the artwork, so nothing crops.
   ============================================================ */
.povgrid .card .thumb,
.feed .card .thumb{aspect-ratio:1200/630}
.start .art{aspect-ratio:1200/630}
.card .thumb img,.feed .card .thumb img{object-fit:cover;object-position:center}

/* ============================================================
   POV POST
   The pieces used to link out to the old site, which meant the
   new design ended the moment anyone actually read something.
   One template, the agency's own copy, set for reading: a single
   measure, serif body, and generous line height.
   ============================================================ */
.postpage{background:var(--paper)}
.postpage .nav{position:fixed}

.readbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:90;background:transparent;pointer-events:none}
.readbar span{
  display:block;height:100%;background:var(--cinnabar);
  transform:scaleX(0);transform-origin:left;will-change:transform;
}

.post{max-width:var(--wide);margin:0 auto;padding:calc(var(--navh) + clamp(48px,7vw,90px)) var(--pad) 0}
.post-head{max-width:var(--read);margin:0 auto clamp(28px,3.4vw,44px)}
.crumb{margin:0 0 1.6rem;font:700 .7rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--rose)}
.post-head .kicker{
  display:inline-flex;align-items:center;gap:.55rem;margin:0 0 1.1rem;
  font:700 .7rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--teal);
}
.post-head .kicker .ico{--size:22px;--ring:var(--teal);--glyph:#fff}
.post-head .d1{font-size:clamp(2.1rem,4.4vw,3.5rem);letter-spacing:-.02em;line-height:1.06}
.post-meta{
  margin:1.4rem 0 0;font:700 .74rem/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);
}

.post-art{margin:0 0 clamp(32px,4vw,56px);aspect-ratio:1200/630;overflow:hidden;background:var(--paper-2)}
.post-art img{width:100%;height:100%;object-fit:cover;display:block}

.post-body{max-width:var(--read);margin:0 auto}
.post-body p{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.08rem,1.35vw,1.22rem);line-height:1.72;
  color:var(--ink);margin:0 0 1.35em;
}
.post-body p:first-of-type{font-size:clamp(1.2rem,1.6vw,1.4rem);line-height:1.6;color:var(--ink)}
.post-body h2,.post-body h3,.post-body h4{
  font-family:var(--sans);font-weight:800;letter-spacing:-.02em;
  margin:2.2em 0 .7em;color:var(--ink);
}
.post-body h2{font-size:clamp(1.4rem,2.2vw,1.85rem)}
.post-body h3{font-size:clamp(1.2rem,1.7vw,1.45rem)}
.post-body ul{margin:0 0 1.5em;padding:0;list-style:none;display:grid;gap:.8rem}
.post-body li{
  font-family:var(--serif);font-size:clamp(1.02rem,1.25vw,1.14rem);line-height:1.62;
  padding-inline-start:1.5rem;position:relative;color:var(--ink);
}
.post-body li::before{
  content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;
  background:var(--teal);
}
.post-body blockquote{
  margin:2em 0;padding:0 0 0 1.6rem;border-inline-start:3px solid var(--teal);
}
.post-body blockquote p{font-style:italic;color:var(--body);margin:0}

.post-foot{
  max-width:var(--read);margin:clamp(40px,5vw,70px) auto 0;
  padding-top:1.8rem;border-top:1px solid var(--line);
}
.post-next{
  max-width:var(--wide);margin:clamp(56px,7vw,100px) auto 0;
  padding-top:clamp(36px,4vw,60px);border-top:1px solid var(--line);
}
.post-next .eyebrow{color:var(--teal)}
.post-next .povgrid{--accent:var(--teal);--accent-ink:var(--teal)}
.postpage main.post{padding-bottom:clamp(56px,7vw,100px)}

@media(max-width:700px){
  .post-body p{font-size:max(1.05rem,17px)}
  .post-body li{font-size:max(1rem,16px)}
}

/* The fact photos vary a lot in shape now: a wide bobsled frame, a square
   rugby crop, a tall family shot. A fixed height with cover keeps the cards
   even, and each one is positioned on its subject rather than its middle. */
.fact.has-shot img{object-position:center 42%}
.fact:nth-child(1) img{object-position:center 38%}  /* the book */
.fact:nth-child(2) img{object-position:center 62%}  /* Machu Picchu: the people are low in frame */
.fact:nth-child(3) img{object-position:center center} /* bobsled */
.fact:nth-child(4) img{object-position:center 30%}  /* rugby */
/* headline lengths differ, so without this the photos start at different
   heights across a row and the strip looks ragged. Bottom-aligning them lines
   the images up regardless of how the copy wraps. */
.fact.has-shot{grid-template-rows:auto auto 1fr auto}
.fact.has-shot img{align-self:end}

/* ============================================================
   FUN FACTS — symmetrical by construction
   Text-first cards lined their photographs up only when the
   headlines happened to wrap the same way. The photograph now
   leads every card at one fixed ratio, so every image sits at the
   same height and the same size no matter what the copy does.
   ============================================================ */
.fact{
  grid-template-rows:auto auto auto 1fr;
  gap:.75rem;padding:0 0 clamp(22px,2.4vw,32px);
}
.fact-shot{
  margin:0 0 clamp(14px,1.6vw,20px);
  aspect-ratio:16/10;overflow:hidden;background:var(--night-3);
}
.fact-shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease);
}
.fact:hover .fact-shot img{transform:scale(1.04)}
.fact .ico,.fact h4,.fact p{margin-inline:clamp(22px,2.6vw,34px)}
.fact .ico{margin-top:0}
/* each frame is positioned on its subject rather than its geometric middle */
.fact:nth-child(1) .fact-shot img{object-position:center 34%}
.fact:nth-child(2) .fact-shot img{object-position:center center}
.fact:nth-child(3) .fact-shot img{object-position:center center}
.fact:nth-child(4) .fact-shot img{object-position:center 58%}
.fact:nth-child(5) .fact-shot img{object-position:center 42%}
.fact:nth-child(6) .fact-shot img{object-position:center 40%}
/* the two rows sized independently and landed 3px apart. Equal rows makes the
   block exact rather than nearly exact. */
.p-facts{grid-auto-rows:1fr}

/* ============================================================
   CULTURE ROWS — bounded height
   Justified rows size themselves as width divided by the sum of
   the row's aspect ratios, which is fine for four landscape
   stills (188px) and absurd for three portrait frames (580px).
   Rows now run at a set height with each frame sized from its own
   aspect, and a row that does not fill the width is centred.
   Every photograph is still shown whole; none can run away.
   ============================================================ */
.cu-row{
  --h:clamp(190px,20vw,290px);
  justify-content:center;height:var(--h);
}
.cu{
  flex:0 0 auto;height:100%;width:calc(var(--ar) * var(--h));
  aspect-ratio:auto;min-width:0;
}
/* portrait-led categories get a taller row so faces are not postage stamps */
.cat-tall .cu-row{--h:clamp(240px,26vw,360px)}

@media(max-width:820px){
  .cu-row{--h:auto;height:auto;flex-wrap:wrap;justify-content:flex-start}
  .cu{width:calc(50% - 2px);height:auto;aspect-ratio:var(--ar)}
}

/* Rows are justified again, but inside a measure chosen so the resulting
   height can never exceed the cap: width = capHeight x sum(aspects). A row of
   four 16:9 stills wants 2065px, so it simply fills the page and comes out
   188px tall; three portrait frames want 832px, so the row centres at its cap
   instead of stretching to 580px. */
.cu-row{
  height:auto;justify-content:flex-start;
  max-width:calc(var(--hmax,290px) * var(--sum,5));
  margin-inline:auto;
}
.cu{flex:var(--ar) 1 0;width:auto;height:auto;aspect-ratio:var(--ar)}
.cat-tall .cu-row{--hmax:clamp(250px,26vw,360px)}
.cu-row{--hmax:clamp(190px,20vw,290px)}
@media(max-width:820px){
  .cu-row{max-width:none;flex-wrap:wrap}
  .cu{flex:1 1 calc(50% - 3px);aspect-ratio:var(--ar)}
}

/* a work tile can carry motion instead of a still. Same box, same crop, same
   hover, so the grid does not know the difference. */
.wk > .wk-vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;background:#83DE8F;
  transition:transform .9s var(--ease);
}
.wk:hover > .wk-vid{transform:scale(1.055)}
/* the animation is a logo on a flat ground, so it does not need the scrim as
   heavily as a photograph does */
.wk:has(> .wk-vid)::after{
  background:linear-gradient(180deg,rgba(20,17,18,0) 40%,rgba(20,17,18,.30) 62%,rgba(20,17,18,.80) 86%,rgba(20,17,18,.93) 100%);
}
/* the TEDx creative is a square ad whose headline sits in the middle band, so
   the tile crop is anchored there rather than at the top */

/* the Morrie's spot is photographic, so it keeps the full scrim; only the flat
   logo animation gets the lighter one */
.wk:has(> .wk-vid[poster$="morries-poster.jpg"])::after{
  background:linear-gradient(180deg,rgba(20,17,18,.05) 34%,rgba(20,17,18,.62) 74%,rgba(20,17,18,.92) 100%);
}
.wk > .wk-vid[poster$="morries-poster.jpg"]{background:#111}

/* ============================================================
   REBRAND SCROLL — containment and separation
   Two fixes.

   1. A tall logo (Secondhand Hounds is 1352x2048) was spilling
      out of its plate. `max-height:100%` alone does not hold a
      grid child once the parent has padding, so the plate clips
      and the image is given an explicit box to fit inside.

   2. Each pair sat 3px from the next, so eight cards read as one
      continuous strip. They are now separated cards: real space
      between them, a hairline edge, and their own ground.

   The spacing moves from `gap` to a margin on each card on
   purpose. With `gap`, the duplicated set is one gap short of
   half the row, so the -50% loop jumps a few pixels every cycle.
   A per-card margin makes each item contribute exactly the same
   width and the loop is seamless.
   ============================================================ */
.rbscroll{padding-block:clamp(14px,1.8vw,26px)}
.rbscroll-row{gap:0}
.rbp{
  margin-inline-end:clamp(14px,1.6vw,26px);
  border:1px solid var(--night-line);
  border-radius:8px;
  background:var(--night-2);
  padding:clamp(20px,2.2vw,28px);
}
.rbp-pair{gap:clamp(12px,1.4vw,18px)}
.rbp figure{
  overflow:hidden;
  height:clamp(104px,11vw,142px);
  border-radius:6px;
}
/* the explicit box the logo must fit inside, whatever its shape */
.rbp figure img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  object-fit:contain;
  display:block;
}
/* a white-out filter only works on a logo with a transparent ground. Guard
   against a future swap re-introducing an opaque one by giving the logos a
   floor of contrast rather than relying on the filter alone. */
.bp-logo{filter:brightness(0) invert(1);opacity:.92}

/* The tall Secondhand Hounds mark was still rendering 154px inside a 142px
   plate: a percentage max-height on a grid child was not resolving against the
   padded area. Sizing the image box to the plate and letting `contain` scale
   the artwork inside it removes the ambiguity entirely, whatever the logo's
   proportions. */
.rbp figure{display:flex;align-items:center;justify-content:center}
.rbp figure img{
  width:100%;height:100%;
  max-width:none;max-height:none;
  object-fit:contain;object-position:center;
}

/* the quote band sat a full band's padding below the pull quote above it,
   which read as a gap rather than a sequence */
.quoteband{padding-top:clamp(28px,3.2vw,46px)}
.plate + .quoteband{margin-top:0}

/* ============================================================
   CAPABILITIES — type-led
   No photographic grounds. Six sections built from the same
   parts, so the scroll is predictable: a rule-topped header with
   the number, the icon and the headline, then the argument on the
   left and the list of what that means on the right. Ground
   alternates paper / paper-2 / night so sections separate
   without needing pictures to do it.
   ============================================================ */
.cap2{padding-block:clamp(64px,7.5vw,116px)}
.cap2 + .cap2{padding-top:clamp(64px,7.5vw,116px)}

.cap2-top{
  display:grid;grid-template-columns:auto auto minmax(0,1fr);
  gap:clamp(18px,2.6vw,40px);align-items:center;
  padding-bottom:clamp(26px,3vw,42px);
  border-bottom:1px solid var(--line);
}
.on-night .cap2-top{border-bottom-color:var(--night-line)}
.cap2-num{
  font-family:var(--sans);font-weight:800;letter-spacing:-.05em;line-height:.8;
  font-size:clamp(2.6rem,5.4vw,4.4rem);
  color:var(--accent);opacity:.28;
}
.cap2-top .ico{--ring:var(--accent);--glyph:#fff;--size:clamp(56px,6vw,86px)}
.a-cinnabar .cap2-top .ico,.a-amber .cap2-top .ico{--glyph:var(--ink)}
.cap2-title .eyebrow{margin-bottom:.7rem}
.cap2-title .k2{font-size:clamp(1.8rem,3.4vw,3rem);line-height:1.04}

.cap2-body{
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(30px,5vw,84px);
  margin-top:clamp(30px,3.4vw,50px);
}
.cap2-lede .lede{max-width:46ch}
.cap2-lede .lede + .lede{margin-top:1.1rem}

/* the list reads as an index, not as bullets */
.caplist{list-style:none;margin:0;padding:0;display:grid}
/* No rules between the items. The bullet already separates them, so a hairline
   on top of it is a second separator doing the same job, and at this width it
   reads as a stray grid line rather than a deliberate device. Spacing is
   unchanged, so the column still fills the same height as the lede beside it. */
.caplist li{
  padding:clamp(12px,1.5vw,18px) 0;
  font-size:clamp(.98rem,1.2vw,1.08rem);line-height:1.45;
  color:var(--body);
  display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:baseline;
}
.on-night .caplist li{color:var(--on-night-mid)}
.caplist li::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);
  transform:translateY(-2px);
}

@media(max-width:900px){
  .cap2-top{grid-template-columns:auto 1fr;row-gap:14px}
  .cap2-top .ico{grid-row:1;grid-column:2;justify-self:start}
  .cap2-title{grid-column:1/-1}
  .cap2-body{grid-template-columns:1fr;gap:clamp(24px,5vw,36px)}
  .caplist li{font-size:max(1rem,16px)}
}

/* ============================================================
   THE DASHBOARD
   The single image on the Capabilities page. Data is the only
   discipline whose product is a screen, so the screen is the
   argument. Framed like an application window on the light
   ground, which is why it reads as a product rather than a
   screenshot dropped into a page.
   ============================================================ */
.dash{margin:clamp(40px,5vw,72px) 0 0}
.dash-frame{
  border-radius:12px;overflow:hidden;background:#14110F;
  box-shadow:0 2px 6px rgba(20,17,18,.08),0 30px 70px rgba(20,17,18,.20);
  border:1px solid var(--line);
}
.on-night .dash-frame,.on-paper-2 .dash-frame{border-color:rgba(20,17,18,.14)}
.dash-bar{
  display:flex;align-items:center;gap:7px;
  padding:11px 14px;background:#1E1A1B;border-bottom:1px solid rgba(255,255,255,.07);
}
.dash-bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.16)}
.dash-bar i:first-child{background:rgba(255,255,255,.26)}
.dash img{display:block;width:100%;height:auto}
.dash figcaption{
  margin-top:1rem;font-size:.86rem;line-height:1.55;color:var(--muted);max-width:62ch;
}
.on-night .dash figcaption{color:var(--on-night-dim)}
@media(max-width:700px){
  .dash-frame{border-radius:8px}
  .dash figcaption{font-size:max(0.82rem,13px)}
}

/* ============================================================
   THE DOGS
   The cards are already art-directed, so this frames them and
   does nothing else: one row at the cards' own proportions,
   scrolling on a phone rather than shrinking to stamps.
   ============================================================ */
.dogrow{
  display:flex;gap:3px;
  max-width:var(--wide);margin:3px auto 0;
}
.dogrow:first-of-type{margin-top:clamp(24px,3vw,40px);
  padding-inline:var(--pad);
}
.dog{
  /* width follows the photo's own shape so a row justifies at one height,
     the same trick the work collage uses. Seventeen pets in a single flex row
     made every one of them a sliver. */
  margin:0;position:relative;flex:var(--ar,.75) 1 0;min-width:0;
  aspect-ratio:var(--ar,.75);overflow:hidden;background:var(--night-3);border-radius:6px;
}
.dog img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease);
}
.dog:hover img{transform:scale(1.04)}
.dog figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:.7rem .8rem;
  font:700 .62rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(20,17,18,.86));
  opacity:0;transition:opacity .3s var(--ease);
}
.dog:hover figcaption{opacity:1}
/* a card whose file has not landed yet keeps its shape and says so */
.dog-slot{
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 10px,transparent 10px 20px),
    var(--night-3);
  box-shadow:inset 0 0 0 1px var(--night-line);
}
.dog-slot img{display:none}
.dog-slot figcaption{
  opacity:1;position:static;background:none;color:var(--on-night-dim);
  display:grid;place-items:center;height:100%;padding:1rem;text-align:center;
  letter-spacing:.12em;
}
/* One pet at a time on a phone.
   Three justified rows of seventeen animals turned every tile into a 103x73
   thumbnail with the name laid over the top, and at that size the name won:
   RUMO, HALSI, WINNI, all clipped mid-word across a photo nobody could see.
   So the rows collapse into a single snapping carousel, the photo gets most of
   the screen, and the caption moves off the animal to underneath it, where it
   has room to be read whole. */
@media(max-width:820px){
  .dogs{
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:0 var(--pad) .6rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .dogs::-webkit-scrollbar{display:none}
  .dogs .dogrow{display:contents}          /* the three rows stop being rows */
  .dogs .dogrow:first-of-type{padding-inline:0;margin-top:0}
  .dogs .dog{
    flex:0 0 76vw;max-width:330px;scroll-snap-align:center;
    aspect-ratio:auto;overflow:visible;background:none;border-radius:0;
  }
  .dogs .dog img{aspect-ratio:4/5;height:auto;border-radius:10px}
  .dogs .dog figcaption{
    position:static;opacity:1;background:none;
    padding:.62rem .1rem 0;color:#fff;text-align:left;white-space:normal;
    font:800 max(.78rem,12.5px)/1.35 var(--sans);letter-spacing:.1em;
  }
  .dogs .dog figcaption i{display:block;letter-spacing:.08em;margin-top:.15rem;font-style:normal}
  .dogs .dog:hover img{transform:none}
  .dogs .dog-slot{aspect-ratio:4/5}
}
/* the dashboard is a supporting graphic, not the subject: it sits inside the
   copy column at the same width as the argument it illustrates */
.cap2-side .dash{margin:clamp(26px,3vw,40px) 0 0}
.cap2-side .dash-frame{border-radius:8px;box-shadow:0 1px 3px rgba(20,17,18,.07),0 14px 34px rgba(20,17,18,.14)}
.cap2-side .dash-bar{padding:7px 10px;gap:5px}
.cap2-side .dash-bar i{width:7px;height:7px}
.cap2-side .dash figcaption{margin-top:.7rem;font-size:.8rem;max-width:none}
/* the list is a grid, so in a section with a taller copy column its rows were
   stretching to fill the height and the items drifted apart */
.caplist{align-content:start}
.cap2-body{align-items:start}
/* the cards are designed pieces with names near their edges, and one arrived a
   little shorter than the rest. A justified row keeps each at its own
   proportions, so no card is ever cropped through a name. */
.dog{aspect-ratio:var(--ar,.76);flex:var(--ar,.76) 1 0}

/* The Pedal Pub and TEDx creative are complete compositions with type running
   close to their edges, so those tiles contain the artwork rather than
   cropping it. The tile's ground is sampled from each piece so the letterbox
   is invisible rather than a black bar. */



/* with the artwork contained, the scrim would sit over empty ground, so it
   only darkens the very bottom where the caption sits */
.wk:has(> img[src$="pedal-pub.jpg"])::after,
.wk:has(> img[src$="tedx.jpg"])::after{
  background:linear-gradient(180deg,rgba(20,17,18,0) 58%,rgba(20,17,18,.55) 78%,rgba(20,17,18,.92) 100%);
}
/* the Impulse explainer is photographic, so it keeps the full scrim */
.wk > .wk-vid[poster$="impulse-poster.jpg"]{background:#111}

/* ============================================================
   WORK TILES — copy below the creative, not on top of it
   The caption used to sit over the artwork behind a gradient,
   which meant every headline covered part of the piece it was
   describing, and on flat creative like the Pedal Pub lockup it
   covered the artwork's own type. The creative now owns its
   frame and the copy sits underneath it on solid ground. Both
   are fully visible, which is the whole point of the section.
   ============================================================ */
.wk{
  display:grid;grid-template-rows:auto 1fr;
  min-height:0;align-items:stretch;
  background:var(--night-2);
}
.wk::after{content:none}          /* no scrim: nothing sits over the art now */
.wk-shot{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:16/10;background:var(--night-3);
}
/* a near-square piece of creative cropped to fill a 16:10 card loses about
   40% of its height, which here would cut either the headline or the device.
   This shows the whole thing on a ground sampled from the artwork. */
.wk-shot.wk-whole{background:#EDEDEB}
.wk-shot.wk-whole > img{object-fit:contain}
.wk-shot > img,.wk-shot > .wk-vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform .8s var(--ease);
}
.wk:hover .wk-shot > img,.wk:hover .wk-shot > .wk-vid{transform:scale(1.045)}
.wk .cap{
  position:static;padding:clamp(20px,2.2vw,30px);
  display:grid;gap:.45rem;align-content:start;
}
.wk h3{color:var(--on-night)}
.wk p{color:var(--on-night-mid)}
.wk .who{text-shadow:none}

/* the two flat, self-contained pieces show whole on their own ground */





/* the big pair at the top get a wider frame, since a half-width tile can
   afford a more cinematic crop */
.wk.w3 .wk-shot{aspect-ratio:16/9}

@media(max-width:900px){
  .wk-shot{aspect-ratio:16/10}
  .wk .cap{padding:clamp(16px,4vw,22px)}
}
/* Every piece is now authored at the tile's own 16:10, padded with a blurred
   extension of itself where the original was a different shape. So `cover`
   fits each one exactly: nothing crops, nothing letterboxes, and the fill is
   invisible because it is made from the artwork rather than a flat colour
   guessed at its edge. */
.wk-shot > img,.wk-shot > .wk-vid{object-fit:cover}

/* ============================================================
   VERTICAL RHYTHM, TIGHTENED
   Measured: section padding ran to 150px top and bottom, so two
   adjacent bands put 300px of nothing between them, and padding
   alone accounted for 15% of the page's height. Pulled back by
   roughly a third. The page still breathes; it just stops making
   you scroll past empty ground to get to the next idea.
   ============================================================ */
.band{padding-block:clamp(40px,4.4vw,68px)}
.band-sm{padding-block:clamp(30px,3.4vw,50px)}
.band + .band,.band-sm + .band-sm{padding-top:clamp(32px,3vw,46px)}
.head{margin-bottom:clamp(26px,3.2vw,46px)}

/* sections that carry their own top rule or divider do not need the band's
   full lead-in as well */
.arches + .band,.handoff + .band,.marq + .band{padding-top:clamp(34px,3.4vw,52px)}

@media(max-width:700px){
  .band{padding-block:clamp(44px,9vw,60px)}
  .band-sm{padding-block:clamp(32px,7vw,44px)}
  .head{margin-bottom:clamp(22px,5.5vw,32px)}
}

/* Data & Performance: the copy column and the product shot should finish on
   the same line. Both columns are stretched to the row and the dashboard is
   pinned to the bottom of its column, so the two edges meet whatever the copy
   does. */
#data .cap2-body{align-items:stretch}
#data .cap2-side{display:flex;flex-direction:column}
#data .cap2-side .dash{margin-top:auto}
/* the trailing paragraph margin was the only thing left between the two
   columns' last lines, so it goes */
#data .cap2-lede .lede:last-child{margin-bottom:0}
#data .dash figcaption{margin-bottom:0}

/* ============================================================
   COPY HIERARCHY IN A LONG SECTION
   Every section on this page uses the same type sizes. Data &
   Performance only felt heavier because it carries six paragraphs
   where the others carry two, so the same size read as a wall.
   The two opening paragraphs stay at lede size and carry the
   argument; the supporting claims step down to the size of the
   list opposite them, which also visually ties the two columns
   together. Nothing else on the page changes.
   ============================================================ */
.cap2-lede .point{
  font-size:clamp(.98rem,1.2vw,1.08rem);
  line-height:1.6;
  color:var(--body);
  max-width:52ch;
}
.cap2-lede .point + .point{margin-top:.9rem}
.cap2-lede .point b{color:var(--ink)}
.cap2-lede .close{
  font-size:clamp(1.02rem,1.3vw,1.14rem);
  line-height:1.55;
  margin-top:1.5rem;padding-top:1.3rem;
  border-top:1px solid var(--line);
  color:var(--ink);
}
.on-night .cap2-lede .close{border-top-color:var(--night-line);color:var(--on-night)}
@media(max-width:700px){
  .cap2-lede .point{font-size:max(1rem,16px)}
  .cap2-lede .close{font-size:max(1.02rem,16.5px)}
}

/* ============================================================
   CAPABILITY CARDS — the Go deeper line sits on the floor
   The link followed the paragraph, so its position moved with the
   length of the copy above it and no two rules lined up. The card
   is a column now with the link pushed to the bottom, and all six
   cards share one height, so every rule sits on the same line
   across the row and between the two rows.
   ============================================================ */
.disc{grid-auto-rows:1fr}
.dcard{
  display:flex;flex-direction:column;gap:1.05rem;
  align-content:stretch;
}
.dcard .tlink{margin-top:auto;align-self:stretch}
@media(max-width:620px){
  .disc{grid-auto-rows:auto}
  .dcard .tlink{margin-top:.4rem}
}

/* ============================================================
   WORK
   Modelled on the existing Work page ("Work that dares to
   deliver"), with three studies pulled out as a best-of and the
   rest in one grid. No category toolbar: the category is printed
   on each card instead of being a second navigation system.
   ============================================================ */
.workpage{background:var(--paper)}
.workpage .nav{position:fixed}

/* the three we would show first */
.csbigs{display:grid;grid-auto-rows:1fr;gap:var(--hair);background:var(--line);margin-top:clamp(28px,3.4vw,46px)}
.csbig{
  background:var(--paper);display:grid;height:100%;
  /* equal halves. At 1.05fr/1fr the seam sat 36px off centre, and because
     every second card flips direction it landed on the opposite side each
     time, so the middle zig-zagged down the page. */
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
}
.csbig:nth-child(even){direction:rtl}
.csbig:nth-child(even) > *{direction:ltr}
/* The panel holds a fixed 3:2 and is centred in its half, so the artwork is
   always shown at the same scale. Before this it stretched to whatever the
   tallest block of copy needed, which meant one long paragraph silently blew
   up every image on the page. Any leftover height is card background, not a
   visible band. */
.csbig .cs-shot{
  position:relative;overflow:hidden;background:var(--night-3);
  aspect-ratio:3/2;height:auto;align-self:center;
  min-height:clamp(240px,26vw,360px);
}
.csbig .cs-shot img,
.csbig .cs-shot .cs-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
/* A 3.5:1 out-of-home board cropped to fill a 1.5:1 panel loses 57% of its
   width, which on the Giants board means losing either the portrait or the
   word GIANTS. This shows the whole board instead, on a black ground that
   matches the creative so the fit reads as the frame, not as letterboxing. */
/* Letterboxing a wide board into this panel left grey bars, which read as a
   mistake rather than a frame. The artwork is prepared to suit the panel
   instead: the OOH board is trimmed of its crop marks and padded out in its
   own black to a 1.5:1 canvas, so the panel fills edge to edge with margin
   around the board and nothing cropped. The ground here only covers the sliver
   revealed at the widest breakpoint. */
/* Every asset for this campaign is out-of-home, 2.1:1 at the narrowest, so a
   3:2 panel can only crop it or pad it. The panel takes the board's own shape
   instead and centres in its half; the space above and below is card
   background, which reads as margin rather than as a band. */
/* The Giants poster is portrait and this panel is landscape, so it is shown
   WHOLE on a ground sampled from the poster's own red. The panel then reads as
   one red field with the poster centred in it, rather than as letterboxing.
   min-height is released so nothing can stretch the panel out of shape. */
.csbig .cs-board{background:#000;aspect-ratio:2.23;min-height:0}
.csbig:hover .cs-shot .cs-vid{transform:scale(1.04)}
/* the spot is decoration around the numbers, so anyone who has asked for less
   motion gets the poster frame instead of a loop they cannot stop */
@media(prefers-reduced-motion:reduce){
  .csbig .cs-shot .cs-vid{transition:none}
  .csbig:hover .cs-shot .cs-vid{transform:none}
}
.csbig:hover .cs-shot img{transform:scale(1.04)}
.csbig-in{
  padding:clamp(28px,3.6vw,60px);
  display:flex;flex-direction:column;gap:.7rem;justify-content:center;
}
.csbig .k3{margin:.2rem 0 .3rem}
.cs-body{margin:0;font-size:.98rem;line-height:1.62;color:var(--body);max-width:46ch}
@media(max-width:900px){
  .csbig,.csbig:nth-child(even){grid-template-columns:1fr;direction:ltr}
  /* stacked, the panel spans the full width, so 3:2 would be enormous */
  .csbig .cs-shot{aspect-ratio:16/9;min-height:clamp(190px,42vw,280px)}
  .csbig .cs-shot.cs-board{aspect-ratio:2.23;min-height:0}   /* the board's own shape at every width */
}

/* everything else */
.csgrid{
  display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:var(--hair);
  background:var(--line);margin-top:clamp(26px,3vw,42px);
}
@media(max-width:960px){.csgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.csgrid{grid-template-columns:1fr}}
.cs{background:var(--paper);display:flex;flex-direction:column;height:100%}
.cs .cs-shot{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--night-3)}
.cs .cs-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.cs:hover .cs-shot img{transform:scale(1.045)}
/* A study with no campaign creative shows its mark instead; a designed ad unit
   is shown whole rather than cropped. Both keep the same 16:10 frame as every
   other card so the grid never breaks rhythm.
   The image stays absolutely positioned (as .cs .cs-shot img sets it) because a
   percentage height cannot resolve against an aspect-ratio box; it would fall
   back to the image's natural size and overflow the frame. Padding on the image
   plus object-fit:contain does the insetting instead. */
.cs .cs-mark{
  background:color-mix(in srgb,var(--accent) 4%,#fff);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
}
.cs .cs-mark img{
  object-fit:contain;padding:15% 19%;
  transition:transform .5s var(--ease);
}
.cs:hover .cs-mark img{transform:scale(1.04)}
.cs .cs-ad{
  background:color-mix(in srgb,var(--accent) 11%,var(--paper));
  border-bottom:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
}
.cs .cs-ad img{object-fit:contain;padding:5% 6%;transition:transform .6s var(--ease)}
.cs:hover .cs-ad img{transform:scale(1.03)}
/* 23 studies in a 3-column grid leave one cell empty; close it on purpose
   rather than letting the grid's hairline background show as a hole. */
.cs-end{text-decoration:none;color:inherit}
.cs .cs-endart{background:var(--night-2);border-bottom:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.cs .cs-endart img{filter:saturate(.72) brightness(.82);transition:transform .7s var(--ease),filter .7s var(--ease)}
.cs-end:hover .cs-endart img{transform:scale(1.05);filter:saturate(.88) brightness(.95)}
.cs-end .cs-in h3{color:var(--accent-ink,var(--accent))}
.cs-in{padding:clamp(20px,2.2vw,30px);display:flex;flex-direction:column;gap:.5rem;flex:1}
.cs-in h3{
  font-family:var(--sans);font-weight:800;font-size:1.02rem;line-height:1.3;
  letter-spacing:-.015em;margin:auto 0 0;color:var(--ink);padding-top:.7rem;
}

/* shared card furniture */
.cs-cat{
  margin:0;font:700 .64rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-ink,var(--accent));
}
.cs-client{
  margin:0;font-family:var(--sans);font-weight:800;font-size:.95rem;
  letter-spacing:-.01em;color:var(--ink);
}
.cs-fig{margin:.3rem 0 0;display:grid;gap:.25rem}
.cs-fig b{
  font-family:var(--sans);font-weight:800;letter-spacing:-.04em;line-height:.95;
  font-size:clamp(1.9rem,3.4vw,2.9rem);color:var(--accent-ink,var(--accent));
}
.csbig .cs-fig b{font-size:clamp(2.4rem,4.4vw,3.6rem)}
.cs-fig span{font-size:.84rem;line-height:1.45;color:var(--body);max-width:34ch}
/* each number is now attributed with its client's mark as well as its name */
.st-logo{
  height:clamp(22px,2.4vw,30px);width:auto;max-width:160px;object-fit:contain;
  object-position:left center;
  filter:brightness(0) invert(1);opacity:.85;
  margin-bottom:.2rem;
}
.statrow .st{gap:.85rem}
@media(max-width:820px){.st-logo{height:26px}}

/* ── Work page: tighter section rhythm ──────────────────────────────
   The page is long (27 studies plus the rebrand scroll), so the default
   band spacing left 155px between every section. Pulled to ~105px so the
   scroll moves. Scoped to .workpage; the homepage keeps its own pacing. */
.head{margin-bottom:clamp(20px,2.4vw,34px)}
.workpage .csbigs{margin-top:clamp(20px,2.4vw,34px)}
.workpage .csgrid{margin-top:clamp(20px,2.4vw,34px)}
@media(max-width:760px){
  .band{padding-block:clamp(34px,7vw,48px)}
  .band + .band,.band-sm + .band-sm{padding-top:clamp(26px,5vw,38px)}
}

/* the legal row: privacy policy sits beside the locality line, so the
   footer base reads as one strip rather than two stranded ends */
.foot-legal{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.foot-legal a{color:var(--on-night-mid);text-decoration:none;border-bottom:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease)}
.foot-legal a:hover{color:#fff;border-bottom-color:var(--cinnabar)}
/* connect.html is a full-height router; its footer must clear the shell */
body:not(.workpage) .q-shell + .foot{position:relative;z-index:3}
@media(max-width:620px){
  .foot-legal{gap:.9rem}
}

/* Off the clock now runs to twelve photographs. Two balanced rows keep it a
   wide page-break rather than a tall column, so the row height comes down. */
.cat-2row .cu-row{--h:clamp(180px,19vw,262px)}

/* ── Legal pages ────────────────────────────────────────────────────
   Long-form prose: one measured column, generous leading, and the
   serif reserved for the page title so it reads as a document rather
   than a marketing page. */
.legalpage{background:var(--paper)}
.legalpage .nav{position:fixed}
.legal-date{margin:1.1rem 0 0;font:700 .7rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink,var(--accent))}
.legal{max-width:74ch}
.legal h2{
  font-family:var(--sans);font-weight:800;font-size:clamp(1.05rem,1.5vw,1.28rem);
  letter-spacing:-.015em;line-height:1.25;color:var(--ink);
  margin:clamp(30px,3.4vw,48px) 0 .7rem;padding-top:clamp(20px,2.2vw,30px);
  border-top:1px solid var(--line);
}
.legal h2:first-child{margin-top:0;padding-top:0;border-top:none}
.legal p{margin:0 0 1.05rem;font-size:.97rem;line-height:1.75;color:var(--body)}
.legal ul{margin:0 0 1.05rem;padding-left:1.15rem;display:grid;gap:.55rem}
.legal li{font-size:.97rem;line-height:1.7;color:var(--body)}
.legal li::marker{color:var(--accent-ink,var(--accent))}
.legal a{color:var(--accent-ink,var(--accent));text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.legal a:hover{border-bottom-color:var(--accent)}
@media(max-width:620px){
  .legal p,.legal li{font-size:.94rem}
}

/* The advisory-board seal fills the eighth grid cell. It is not a headshot, so
   it gets no caption; centring it inside a square the same size as a portrait
   keeps it level with the faces beside it instead of floating high. */
.board-badge{position:relative;aspect-ratio:4/5;align-self:start}
/* `.board.bios img` is a 3-class selector and was still forcing 4/5 and
   width:100% on the seal, pushing it off centre. Match its weight and reset. */
.board.bios .board-badge img{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  aspect-ratio:auto;width:auto;height:auto;
  max-width:86%;max-height:72%;object-fit:contain;filter:none;display:block;
  margin:0;   /* an inherited margin-top:18px was pushing the seal off centre */
}
@media(max-width:900px){
  .board-badge img{width:72%}
}

/* ── Mobile hardening ───────────────────────────────────────────────
   Measured on iPhone SE/14/Pro Max and iPad mini/Pro via device
   emulation, not by eyeballing a narrow window. Three real faults:
   the footer grid could not shrink below its columns and pushed the
   page ~10px wide on every page; the hero image is scaled 1.06 and
   was never clipped; and a handful of labels fell under a 12px floor. */

/* 1. footer: grid children default to min-width:auto, so a long link
      kept the column from shrinking and widened the whole document. */
.foot-grid > *{min-width:0}
.foot-grid a,.foot-grid p,.foot-grid span{overflow-wrap:anywhere}
@media(max-width:560px){
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .foot-base{flex-direction:column;align-items:flex-start;gap:.6rem}
}

/* 2. the hero photograph is transform:scale(1.06); clip it to its stage */
.hero-stage{overflow:hidden}

/* 3. nothing on a phone drops below 12px */
@media(max-width:820px){
  .eyebrow,.kicker,.crumb,.cs-cat,.hero-credit,.legal-date,
  .bp-kick,.rbscroll-key,.q-exit,.foot-base,.cats,.lbl{font-size:12px}
  .btn{font-size:12.5px}
  .cs-fig span,.cu figcaption{font-size:12px}
}

/* 4. tap targets: the footer and legal links were 20-26px tall */
@media(max-width:820px){
  .foot-grid a,.foot-legal a,.legal a{display:inline-block;min-height:44px;line-height:44px}
  .foot-grid p,.foot-grid span{line-height:1.6}
  .foot-grid span[style]{line-height:1.9}
}

/* ── Mobile hardening, second pass ──────────────────────────────────
   Re-measured after the first pass. Three things left. */

/* 1. the privacy policy quotes a long URL and a street address, which cannot
      break and pushed the page 20px wide on a 375px screen. */
.legal,.legal p,.legal li,.legal a{overflow-wrap:anywhere}

/* 2. a 12px floor everywhere, not just under 820px. The hero credit was 9.6px
      on a tablet, which is unreadable at arm's length. */
.hero-credit,.eyebrow,.kicker,.crumb,.cs-cat,.legal-date,
.bp-kick,.rbscroll-key,.q-exit,.post-meta,.lbl{font-size:max(12px,.72rem)}

/* 3. tap targets. Icon links and inline legal links were 15-26px tall; the
      recommendation is 44px, and thumbs do not get more accurate on a phone. */
.social a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
@media(max-width:820px){
  .q-exit,.crumb a,.post-foot a,.tlink{display:inline-flex;align-items:center;min-height:44px}
  .qa a,.q-card a:not(.btn){min-height:44px;display:inline-flex;align-items:center}
}

/* the last two labels under the 12px floor: the hero's credential chips and
   the client-collage captions */
.hero-meta span,.cc span{font-size:max(12px,.72rem)}

/* ── POV: lead + editorial index ────────────────────────────────────
   The old page put two posts in mismatched dark frames where the
   artwork floated in black, then ran a 3-up grid over six items,
   orphaning the fourth. This is one lead with the artwork filling its
   frame, then a dated list that stays right at any number of posts. */

/* the lead */
.povlead{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  align-items:stretch;text-decoration:none;color:inherit;
  background:var(--paper);border:1px solid var(--line);
  overflow:hidden;transition:box-shadow .5s var(--ease),transform .5s var(--ease);
}
.povlead:hover{box-shadow:0 22px 60px rgba(20,17,18,.10);transform:translateY(-2px)}
.povlead-art{position:relative;overflow:hidden;background:var(--night-3);aspect-ratio:1200/630}
.povlead-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.povlead:hover .povlead-art img{transform:scale(1.04)}
.povlead-in{
  padding:clamp(26px,3.2vw,52px);
  display:flex;flex-direction:column;justify-content:center;gap:.85rem;
}
.povlead-in .h{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.15rem);
  line-height:1.2;letter-spacing:-.015em;color:var(--ink);
}
.povlead-in .sub{font-size:.97rem;line-height:1.62;color:var(--body);max-width:44ch}
.povlead-in .tlink{margin-top:.3rem}
@media(max-width:860px){
  .povlead{grid-template-columns:1fr}
}

/* shared meta line: topic on the left, date on the right */
.povmeta{display:flex;align-items:center;gap:.5rem 1.1rem;flex-wrap:wrap}
.povmeta .kicker{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}
.povmeta .kicker .ico{flex:none}
.povmeta .kicker{margin:0}
.povmeta time{
  font:700 max(12px,.68rem)/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);
}

/* the index */
.povlist{display:grid;gap:0;margin-top:clamp(22px,2.6vw,36px);border-top:1px solid var(--line)}
.povrow{
  display:grid;grid-template-columns:clamp(150px,17vw,232px) minmax(0,1fr) auto;
  gap:clamp(18px,2.4vw,36px);align-items:center;
  padding:clamp(18px,2vw,26px) 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;transition:background .35s var(--ease);
}
.povrow:hover{background:color-mix(in srgb,var(--accent) 4%,transparent)}
.povrow-art{position:relative;overflow:hidden;aspect-ratio:1200/630;background:var(--night-3)}
.povrow-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.povrow:hover .povrow-art img{transform:scale(1.05)}
.povrow-in{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.povrow-in .h{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.12rem,1.7vw,1.42rem);
  line-height:1.25;letter-spacing:-.012em;color:var(--ink);
}
.povrow-in .sub{font-size:.9rem;line-height:1.55;color:var(--body);max-width:56ch}
.povrow-go{
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);color:var(--accent-ink,var(--accent));
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.povrow:hover .povrow-go{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateX(3px)}
@media(max-width:760px){
  .povrow{grid-template-columns:110px minmax(0,1fr);gap:16px;align-items:start}
  .povrow-go{display:none}
  .povrow-in .sub{display:none}
}

/* ── MB Health clients, a moving strip ──────────────────────────────
   White tiles with gridlines read as a wall of boxes. Every mark is
   pre-knocked to a single ink instead, normalised to an even cap
   height on a common canvas, so the logos need nothing behind them
   individually. The strip sits on ONE quiet band, not 22 boxes.
   Two rows drift against each other, edges fade rather than cut, and
   it pauses on hover. Reduced motion gets a plain scroll. */
.hscroll{
  overflow:hidden;display:grid;gap:clamp(2px,0.3vw,6px);
  margin-top:clamp(26px,3.2vw,44px);
  background:rgba(255,255,255,.045);
  padding:clamp(20px,2.2vw,32px) 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.hstrip{display:flex;width:max-content;align-items:center;gap:clamp(30px,3.4vw,54px)}
.hstrip.a{animation:hmarch 58s linear infinite}
.hstrip.b{animation:hmarch 58s linear infinite reverse}
.hscroll:hover .hstrip{animation-play-state:paused}
@keyframes hmarch{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .hscroll{overflow-x:auto;-webkit-mask:none;mask:none}
  .hstrip{animation:none}
}
/* the tile matches the artwork's canvas ratio, so contain fitting wastes
   nothing and every mark lands as large as the row allows */
/* height-driven like the client strip on the homepage: the files are
   area-normalised, so one height gives every mark the same visual weight and
   the width simply follows the artwork. */
.hlogo{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.hlogo img{
  height:clamp(58px,6.4vw,96px);width:auto;
  /* same behaviour as the client strip on the homepage: a mono mark at rest
     that comes up in the client's own colour on hover. On this dark ground the
     rest state is a white silhouette rather than greyscale. */
  filter:brightness(0) invert(1) opacity(.55);
  transition:filter .4s var(--ease),transform .4s var(--ease);
}
.hlogo:hover img{filter:none;transform:scale(1.05)}
@media(prefers-reduced-motion:reduce){.hlogo img{transition:none}.hlogo:hover img{transform:none}}

/* last two labels under the 12px floor: the POV article kicker and the
   router's inline links, both of which had a more specific rule winning */
.postpage .kicker,.post-head .kicker,.q-card .kicker{font-size:max(12px,.72rem)}

/* ══════════════════ MOBILE: SWIPE INSTEAD OF STACK ══════════════════
   The homepage ran to nearly 40 phone screens because every grid
   collapsed to one column and stacked. These groups become a single
   thumb-scrolled row instead. Each card is 82% wide so the next one
   peeks, which is what tells a thumb there is more to the right.

   No negative margins: an edge-to-edge bleed only works for a direct
   child of .wrap, and .cu-row sits two levels deeper, so bleeding it
   pushed the document 700px wide. Cosmetic gain, real bug. Desktop is
   untouched. */

/* ---------- swipe affordance ----------
   On mobile the grids above become horizontal carousels with the scrollbar
   hidden, which looks clean and tells the visitor nothing. Two cues: the right
   edge fades while there is more to come, and a small hint sits underneath
   until the first swipe. The hint is decorative, so it is hidden from screen
   readers; the carousels themselves are focusable so they can also be scrolled
   from a keyboard. */
@media(max-width:820px){
  .swipeable{
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%);
            mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%);
  }
  .swipeable.at-end{-webkit-mask-image:none;mask-image:none}
  .swipehint{
    display:flex;align-items:center;gap:.45rem;
    margin:.55rem 0 0;padding-inline:var(--pad);
    font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    color:var(--muted);transition:opacity .3s var(--ease);
  }
  .swipehint.gone{opacity:0;pointer-events:none}
  .swipehint .sw-arw{
    display:inline-block;animation:swipenudge 1.6s var(--ease) infinite;
  }
  @keyframes swipenudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
  .on-night .swipehint,.on-night-2 .swipehint,.on-night-3 .swipehint{color:var(--on-night-dim)}
}
@media(prefers-reduced-motion:reduce){.swipehint .sw-arw{animation:none}}

@media(max-width:820px){
  .disc,.showcase,.povgrid,.blueprint,.csgrid,.csbigs,.board.bios,.feed,.grid-3,
  .cu-row,.cc-row{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    max-width:100%;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:.6rem;
  }
  .disc::-webkit-scrollbar,.showcase::-webkit-scrollbar,.povgrid::-webkit-scrollbar,
  .blueprint::-webkit-scrollbar,.csgrid::-webkit-scrollbar,.csbigs::-webkit-scrollbar,
  .board.bios::-webkit-scrollbar,.feed::-webkit-scrollbar,.grid-3::-webkit-scrollbar,
  .cu-row::-webkit-scrollbar,.cc-row::-webkit-scrollbar{display:none}

  .disc,.showcase,.povgrid,.blueprint,.csgrid,.csbigs,.board.bios,.feed,.grid-3{gap:12px}

  .disc > *,.showcase > *,.povgrid > *,.csgrid > *,.csbigs > *,
  .feed > *,.grid-3 > *{
    flex:0 0 82%;scroll-snap-align:start;min-width:0;
  }
  .blueprint > *{flex:0 0 88%;scroll-snap-align:start;min-width:0}
  .board.bios > *{flex:0 0 46%;scroll-snap-align:start;min-width:0}

  /* the culture and work collages already carry their own aspect ratios;
     an earlier mobile rule sets --h:auto for the wrapping layout, which makes
     height:var(--h) resolve to auto and each tile fall back to the image's
     natural width. Pin a real height per category. */
  /* the ancestors are flex/grid items, which default to min-width:auto, so a
     wide tile widens THEM and .cu-row's max-width:100% then resolves against
     an already-blown-out parent. Same trap as the footer grid and the MB
     Health logo wall. Cap the whole chain. */
  .cats,.cat,.cat > *,.cc-row,.showcase,.disc{min-width:0}
  .cats > *,.cat{max-width:100%}
  .cu-row{--h:200px}
  .cat-tall .cu-row{--h:210px}
  .cat-2row .cu-row{--h:165px}
  .cu-row .cu{
    width:auto;height:var(--h);aspect-ratio:var(--ar);
    flex:0 0 auto;scroll-snap-align:start;
  }
  .cc-row{max-height:none;flex-direction:row}
  .cc-row .cc{
    width:auto;height:200px;aspect-ratio:var(--ar);
    flex:0 0 auto;scroll-snap-align:start;
  }
  .memb > *{flex:0 0 auto}

  /* a quiet cue under any swipeable row */
  .swipe-hint{
    display:block;margin:.5rem 0 0;
    font:700 max(12px,.66rem)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);opacity:.75;
  }
  .on-night .swipe-hint,.on-night-2 .swipe-hint{color:var(--on-night-dim)}
}
@media(min-width:821px){.swipe-hint{display:none}}

/* ── MOBILE: condense long copy behind a disclosure ──────────────────
   Only applied where a paragraph actually runs past four lines on a
   phone, so short copy is never hidden behind a needless tap. The
   toggle is plain text, not a boxed accordion. */
@media(max-width:820px){
  .mclamp{
    display:-webkit-box;-webkit-box-orient:vertical;
    -webkit-line-clamp:var(--lines,4);overflow:hidden;
  }
  .mclamp.is-open{display:block;-webkit-line-clamp:unset;overflow:visible}
  .mtoggle{
    display:inline-flex;align-items:center;gap:.4rem;
    margin:.5rem 0 0;padding:0;background:none;border:0;cursor:pointer;
    font:700 max(12px,.68rem)/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
    color:var(--accent-ink,var(--accent));min-height:44px;
  }
  .on-night .mtoggle,.on-night-2 .mtoggle{color:var(--accent)}
  .mtoggle .chev{transition:transform .3s var(--ease)}
  .mtoggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
}
@media(min-width:821px){.mtoggle{display:none}}

/* ── MB Health intro on the homepage ─────────────────────────────────
   The head sat alone in the left half with the right half empty. It now
   runs two-up against real client hardware, cut out of its white studio
   background so it sits on the dark ground instead of in a box. */
.mbh-intro{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(24px,4vw,64px);align-items:stretch;
}
.mbh-intro .head{margin-bottom:0}
/* the paragraph's trailing margin sat inside the head box and pushed the
   device ~20px below the last line; drop it so the two bottoms are flush */
.mbh-intro .head>:last-child{margin-bottom:0}
/* The device is sized BY the copy, not by a fixed pixel width: the figure
   stretches to the row height, so the graphic's top and bottom land on the
   top of the MB Health lockup and the bottom of the intro paragraph. A fixed
   width let it overhang the copy by ~50px at each end. */
.mbh-device{margin:0;position:relative;min-height:0}
.mbh-device img{
  position:absolute;inset:0;height:100%;width:100%;
  object-fit:contain;object-position:center;
  filter:drop-shadow(0 24px 48px rgba(0,0,0,.45));
}
@media(max-width:900px){
  .mbh-intro{grid-template-columns:1fr;gap:clamp(18px,3vw,30px)}
  /* stacked: nothing to line up with, so go back to a plain centred image */
  .mbh-device{margin-bottom:clamp(24px,4vw,38px);position:static}
  .mbh-device img{position:static;width:100%;height:auto;max-width:290px;margin-inline:auto}
}




/* WCAG 1.4.10: these labels would not wrap at a 320px viewport and pushed the
   page into horizontal scroll. Applies wherever a kicker is used, not just
   inside .card. */
.kicker{max-width:100%;overflow-wrap:anywhere}


/* ---------- skip link ----------
   It existed only as an off-screen link, so a keyboard user could activate it
   but never see it. It now sits above the viewport until focused and then
   lands in the top-left corner as a normal button (WCAG 2.4.1 and 2.4.7). */
.skip{
  position:fixed;left:12px;top:12px;z-index:300;
  transform:translateY(-200%);transition:transform .18s var(--ease);
  background:var(--ink);color:var(--paper);border:0;opacity:1;
  padding:.75rem 1.1rem;border-radius:999px;text-decoration:none;
  font:700 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
}
.skip:focus,.skip:focus-visible{transform:none;outline:3px solid var(--cinnabar);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.skip{transition:none}}

/* Cinnabar sits at 4.35:1 on the dark CARDS, just under AA for the small
   eyebrows. Lifting the token 2% inside dark contexts clears every one of
   them and is indistinguishable side by side. Light grounds are untouched. */
.on-night,.on-night-2,.on-night-3{--cinnabar:#FF543D}


/* ---------- nonprofit ribbon ----------
   The separation between the care wall and the work collage. Same streaming
   behaviour as the client strip at the top of the page, but full colour: these
   are the causes, not the roster, so the marks keep their own brands. */
.ribbon-say{margin:clamp(38px,4.6vw,66px) 0 clamp(18px,2.2vw,28px);max-width:60ch}
.ribbon-say h3{
  font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);margin:0 0 .6rem;
}
.ribbon-say p{margin:0;font-size:.95rem;line-height:1.6;color:var(--body)}
.ribbon{
  overflow:hidden;padding-block:clamp(18px,2.2vw,30px);
  border-block:1px solid var(--line);
  margin-bottom:clamp(34px,4vw,58px);
}
.ribbon-row{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;width:max-content;
  gap:clamp(34px,4vw,64px);
  animation:marq 54s linear infinite;
}
.ribbon:hover .ribbon-row{animation-play-state:paused}
.ribbon img{height:clamp(38px,4vw,58px);width:auto;flex:0 0 auto}
@media(prefers-reduced-motion:reduce){
  .ribbon-row{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
}


/* the signpost between the nonprofit ribbon and the work collage. Sized as a
   label, not a headline, so it orients without competing. */
.worknote{
  margin:0 0 clamp(18px,2.2vw,28px);
  font-size:clamp(.92rem,1.15vw,1.12rem);font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);
}

/* a client's own words, sitting with the numbers they belong to */
.cs-quote{
  margin:clamp(14px,1.6vw,20px) 0 0;padding-left:clamp(12px,1.2vw,18px);
  border-left:2px solid var(--accent);
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(.95rem,1.05vw,1.08rem);line-height:1.45;color:var(--ink);
  max-width:44ch;
}
.cs-quote cite{
  display:block;margin-top:.5rem;font-family:var(--sans);font-style:normal;
  font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}

/* ---------- contextual CTA ----------
   A short, section-specific invitation sitting at the end of each block, so a
   visitor never has to scroll back to the nav to act. One line and one button,
   deliberately quiet: it is an offer, not a banner. */
.ctaline{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,1.6vw,22px);
  margin-top:clamp(30px,3.6vw,52px);padding-top:clamp(22px,2.6vw,34px);
  border-top:1px solid var(--line);
}
.on-night .ctaline,.on-night-2 .ctaline,.on-night-3 .ctaline{border-top-color:var(--night-line)}
.ctaline p{
  margin:0;flex:1 1 22ch;min-width:0;
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(1.05rem,1.6vw,1.45rem);line-height:1.25;
  /* sits just under the 24px large-text threshold, so on light grounds it takes
     the ink variant of the accent rather than the bright one */
  color:var(--accent-ink,var(--accent));
}
.on-night .ctaline p,.on-night-2 .ctaline p,.on-night-3 .ctaline p{color:var(--accent)}
/* The grape bands: this serif sits at 23px, just under the large-text
   threshold, so it needs 4.5:1 and takes the same accessible grape tint the
   eyebrows use rather than the guide's light tone. */
.on-night .a-grape .ctaline p,.on-night-2 .a-grape .ctaline p,.on-night-3 .a-grape .ctaline p,
.on-night.a-grape .ctaline p,.on-night-2.a-grape .ctaline p,.on-night-3.a-grape .ctaline p{color:#A08FDC}
.ctaline .btn{flex:0 0 auto}
@media(max-width:620px){.ctaline p{flex-basis:100%}}

/* Rose is 2.5:1 on the dark grounds, so a card carrying it inside a dark band
   takes cinnabar instead. Both are parent-brand colours. */
.on-night .qc.a-rose,.on-night-2 .qc.a-rose,.on-night-3 .qc.a-rose{--accent:var(--cinnabar)}

/* the POV signup's one line of feedback */
.subnote{margin:.7rem 0 0;font-size:max(.9rem,14px);line-height:1.45;min-height:1.2em}
.subnote.good{color:var(--accent)}
.subnote.bad{color:#FFC9BF}
.on-paper .subnote.bad,.on-paper-2 .subnote.bad{color:var(--accent-ink,var(--accent))}

/* the work tease: the setup line and the way through, side by side */
.teaseline{display:flex;align-items:center;gap:clamp(20px,3vw,46px);flex-wrap:wrap}
.teaseline .lede{flex:1 1 38ch;min-width:0;margin:0}
.teaseline .btn{flex:0 0 auto}
@media(max-width:680px){.teaseline .lede{flex:1 1 100%}}