/* =========================================================================
   PAMUUC | STUDIO — site.css
   One stylesheet for every page, asked for plainly in <head> so that it is
   the first and only thing that paints. There is no critical subset: a
   second copy of these rules is a second thing to keep in step, and the one
   that used to be inlined had fallen a whole palette behind.

   Text width is set once, here, through --measure-*. Never cap a text block
   with an inline style: tools/build.mjs fails the build when a page does.
   ========================================================================= */

/* ---- Fonts --------------------------------------------------------------- */
@font-face{font-family:"Gilmer";src:url("/assets/fonts/gilmer-light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Gilmer";src:url("/assets/fonts/gilmer-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Gilmer";src:url("/assets/fonts/gilmer-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Gilmer";src:url("/assets/fonts/gilmer-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Gilmer";src:url("/assets/fonts/gilmer-heavy.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

/* ---- Tokens -------------------------------------------------------------
   One :root for the whole sheet. There used to be two, thirteen hundred
   lines apart: this one, and the pre-rebrand palette at the top of the file
   that it overrode. Every colour in that block was dead — cream paper, teal
   ink, a red accent the Studio side no longer uses — but the same block also
   owned the type scale and the measures, which were not dead at all, so it
   could not simply be deleted. The colours are gone and the type came here.

   It matters that it is one block: an inlined copy of the old one was what
   painted the first frame of every page for a while, and nobody noticed
   because the two were far enough apart to look like different concerns.

   The palette is locked — navy #011251, off-white #F4F2ED. It came from the
   mockup's stylesheet, along with the studio rules further down this file:
   473 of its 1,740. Regenerate from the mockup rather than hand-editing, or
   the two will drift apart.
   ========================================================================= */
:root{
  --paper:#F4F2ED;
  --surface:#FFFFFF;
  --surface-2:#EAE7DF;
  --surface-3:#DFDBD1;
  --ink:#0A1024;
  --muted:#59617A;
  /* The faint grey carries 11px labels — index numbers, kickers, captions.
     #8B92A6 measured 2.78:1 against the paper, under the 4.5:1 AA needs at
     that size; this clears it and still reads lighter than --muted. */
  --faint:#5F6679;
  --line:color-mix(in srgb,#011251 12%,transparent);
  --line-strong:color-mix(in srgb,#011251 24%,transparent);

  
  --navy:#011251;
  --navy-hover:#16307A;
  --navy-quiet:color-mix(in srgb,#011251 8%,transparent);
  --on-navy-dim:color-mix(in srgb,#F4F2ED 72%,transparent);

  
  --band:#011251;
  --on-band:#F4F2ED;
  --on-band-dim:color-mix(in srgb,#F4F2ED 66%,transparent);

  
  --red:#7F1D16;
  --red-text:#7F1D16;
  --red-quiet:color-mix(in srgb,#7F1D16 9%,transparent);

  
  --stop:#B92740;
  --stop-quiet:color-mix(in srgb,#B92740 10%,transparent);
  --go:#1F6B4A;
  --go-quiet:color-mix(in srgb,#1F6B4A 11%,transparent);
  --wait:#8A5A08;
  --wait-quiet:color-mix(in srgb,#B57F1B 15%,transparent);
  --flow:#1E5679;
  --flow-quiet:color-mix(in srgb,#1E5679 10%,transparent);
  --idle:#59617A;
  --idle-quiet:color-mix(in srgb,#59617A 10%,transparent);

  
  --ig-light:color-mix(in srgb,#F4F2ED 72%,transparent);
  --ig-navy:color-mix(in srgb,#011251 78%,transparent);
  --ig-media:color-mix(in srgb,#0A1024 42%,transparent);
  --ig-edge:color-mix(in srgb,#F4F2ED 38%,transparent);
  --ig-blur:18px;

  
  --shadow-1:0 1px 2px color-mix(in srgb,#011251 8%,transparent),0 1px 1px color-mix(in srgb,#011251 4%,transparent);
  --shadow-2:0 2px 6px color-mix(in srgb,#011251 10%,transparent);
  --shadow-3:0 8px 24px color-mix(in srgb,#011251 12%,transparent);
  --shadow-4:0 18px 48px color-mix(in srgb,#011251 18%,transparent);
  --card-shadow:var(--shadow-1);
  --card-border:1px solid var(--line);

  
  --radius-xs:2px;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:24px;
  --radius-xl:28px;
  --radius-full:999px;

  
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:56px; --sp-10:80px;

  
  --dur-press:90ms;
  --dur-focus:160ms;
  --dur-morph:260ms;
  --ease:cubic-bezier(.2,.8,.2,1);

  
  --f:"Gilmer","Helvetica Neue",Helvetica,Arial,sans-serif;
  --fs-micro:11px;
  --fs-xs:12px;
  --fs-sm:13px;
  --fs-base:14px;
  --fs-md:15px;
  --fs-lg:18px;
  --fs-xl:22px;
  --fs-2xl:28px;
  --fs-3xl:36px;

  
  --nav-w:240px;
  --nav-w-collapsed:72px;
  --app-max:1440px;
  --detail-max:1280px;
  --read-max:720px;
  --header-h:56px;

  --accent:#011251; --accent-ink:#F4F2ED;
  /* the old sheet's dark green survives in the CTA bar and a few rules that
     still read --deep; the locked palette has no green in it */
  --deep:#011251;

  /* ---- type, measure and layout --------------------------------------
     These came from the sheet that set the old palette above them, and
     unlike its colours they were never superseded: nothing else declares
     the type scale or the measures. They live here now so that :root is
     one block and not two, thirteen hundred lines apart. */
  --f-sans:"Gilmer","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-display:var(--f-sans);
  --step--1:clamp(.78rem,.76rem + .1vw,.84rem);
  --step-0:clamp(.98rem,.95rem + .15vw,1.06rem);
  --step-1:clamp(1.1rem,1.04rem + .3vw,1.3rem);
  --step-2:clamp(1.35rem,1.2rem + .7vw,1.85rem);
  --step-3:clamp(1.8rem,1.45rem + 1.6vw,3rem);
  --step-4:clamp(1.95rem,1.5rem + 1.9vw,3.05rem);
  --gutter:clamp(1.15rem,4vw,3rem);
  --max:75rem;
  --measure-title:32ch;
  --measure-lead:72ch;
  --measure-prose:66ch;
  --sp-section:clamp(3.5rem,7vw,6.5rem);
  --radius:14px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#080C18;
  --surface:#0F1426;
  --surface-2:#141A30;
  --surface-3:#1C2440;
  --ink:#ECEAE4;
  --muted:#A4AABE;
  --faint:#7B8298;
  --line:color-mix(in srgb,#ECEAE4 14%,transparent);
  --line-strong:color-mix(in srgb,#ECEAE4 28%,transparent);

  --navy:#9DB4EC;
  --navy-hover:#BACBF5;
  --navy-quiet:color-mix(in srgb,#9DB4EC 14%,transparent);
  --on-navy-dim:color-mix(in srgb,#080C18 72%,transparent);

  --red:#D98A80;
  --red-text:#E29A90;
  --red-quiet:color-mix(in srgb,#D98A80 14%,transparent);

  --stop:#DE6478;
  --stop-quiet:color-mix(in srgb,#DE6478 15%,transparent);
  --go:#6FBF95;
  --go-quiet:color-mix(in srgb,#6FBF95 15%,transparent);
  --wait:#D9A94E;
  --wait-quiet:color-mix(in srgb,#D9A94E 16%,transparent);
  --flow:#7FB4D8;
  --flow-quiet:color-mix(in srgb,#7FB4D8 14%,transparent);
  --idle:#A4AABE;
  --idle-quiet:color-mix(in srgb,#A4AABE 13%,transparent);

  --ig-light:color-mix(in srgb,#141A30 76%,transparent);
  --ig-navy:color-mix(in srgb,#011251 82%,transparent);
  --ig-media:color-mix(in srgb,#000 46%,transparent);
  --ig-edge:color-mix(in srgb,#ECEAE4 16%,transparent);

  --card-shadow:none;
  --card-border:1px solid var(--line);
  --shadow-3:0 8px 24px color-mix(in srgb,#000 40%,transparent);
  --shadow-4:0 18px 48px color-mix(in srgb,#000 55%,transparent);

  /* The last of the pre-rebrand palette: a coral accent and a cream "deep"
     from the sheet this one replaced. Carrying them over was meant to be a
     tidy rather than a restyle, and it left .section--dark and .cta putting
     #F5F1E8 text on a #EDE7DD ground — 1.09:1, which is invisible. The
     accent is the same lightened navy the merchandise sheet uses in the
     dark, because the brand navy #011251 cannot be read on #080C18. */
--deep:#F4F2ED;--accent:#9DB4EC;--accent-ink:#080C18;
}}
:root[data-theme="dark"]{
  --paper:#080C18;
  --surface:#0F1426;
  --surface-2:#141A30;
  --surface-3:#1C2440;
  --ink:#ECEAE4;
  --muted:#A4AABE;
  --faint:#7B8298;
  --line:color-mix(in srgb,#ECEAE4 14%,transparent);
  --line-strong:color-mix(in srgb,#ECEAE4 28%,transparent);
  --navy:#9DB4EC;
  --navy-hover:#BACBF5;
  --navy-quiet:color-mix(in srgb,#9DB4EC 14%,transparent);
  --on-navy-dim:color-mix(in srgb,#080C18 72%,transparent);
  --red:#D98A80;
  --red-text:#E29A90;
  --red-quiet:color-mix(in srgb,#D98A80 14%,transparent);
  --stop:#DE6478;
  --stop-quiet:color-mix(in srgb,#DE6478 15%,transparent);
  --go:#6FBF95;
  --go-quiet:color-mix(in srgb,#6FBF95 15%,transparent);
  --wait:#D9A94E;
  --wait-quiet:color-mix(in srgb,#D9A94E 16%,transparent);
  --flow:#7FB4D8;
  --flow-quiet:color-mix(in srgb,#7FB4D8 14%,transparent);
  --idle:#A4AABE;
  --idle-quiet:color-mix(in srgb,#A4AABE 13%,transparent);
  --ig-light:color-mix(in srgb,#141A30 76%,transparent);
  --ig-navy:color-mix(in srgb,#011251 82%,transparent);
  --ig-media:color-mix(in srgb,#000 46%,transparent);
  --ig-edge:color-mix(in srgb,#ECEAE4 16%,transparent);
  --card-shadow:none;
  --card-border:1px solid var(--line);
  --shadow-3:0 8px 24px color-mix(in srgb,#000 40%,transparent);
  --shadow-4:0 18px 48px color-mix(in srgb,#000 55%,transparent);

--deep:#F4F2ED;--accent:#9DB4EC;--accent-ink:#080C18;
}


/* ---- Base -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-sans);
  font-size:var(--step-0);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto;background:var(--surface-2)}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:var(--accent-ink)}
.wrap{width:min(var(--max),100% - var(--gutter)*2);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--deep);color:var(--paper);padding:.7rem 1.1rem;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ---- Type -------------------------------------------------------------- */
.eyebrow{font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--accent)}
.eyebrow--muted{color:var(--muted)}
.h1{font-family:var(--f-display);font-size:var(--step-4);line-height:1.04;letter-spacing:-.035em;font-weight:300;max-width:var(--measure-title);text-wrap:balance}
.h2{font-family:var(--f-display);font-size:var(--step-3);line-height:1.1;letter-spacing:-.028em;font-weight:300;max-width:var(--measure-title);text-wrap:balance}
.h3{font-size:var(--step-1);line-height:1.3;letter-spacing:-.012em;font-weight:500}
.lead{font-size:var(--step-1);line-height:1.55;color:var(--muted);max-width:var(--measure-lead)}
.muted{color:var(--muted)}
.small{font-size:var(--step--1)}

/* ---- Buttons ----------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;
  padding:.65rem 1.4rem;border-radius:999px;border:1px solid transparent;font-size:var(--step-0);
  font-weight:500;cursor:pointer;transition:transform .18s ease,background-color .18s ease,border-color .18s ease}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--accent);color:var(--accent-ink)}
.btn--primary:hover{background:color-mix(in srgb,var(--accent) 86%,#000)}
/* a <button> keeps the UA ButtonFace grey unless a background is declared,
   which left the consent reject button near-white on near-white in dark mode */
.btn--ghost{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 4%,transparent)}
.btn--sm{min-height:2.4rem;padding:.35rem 1rem;font-size:var(--step--1)}
.btn--full{width:100%}

/* ---- Header ------------------------------------------------------------ */
.hdr{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:1.25rem;min-height:4.5rem}
.brand{display:flex;align-items:center;gap:.55rem}
.brand__mark{width:1.75rem;height:1.75rem;flex:none;background:var(--ink);
  -webkit-mask:url("/assets/brand/pamuuc-icon.svg") center/contain no-repeat;
  mask:url("/assets/brand/pamuuc-icon.svg") center/contain no-repeat}
.brand__word{font-weight:800;font-size:.95rem;letter-spacing:.09em;line-height:1;white-space:nowrap}
.brand__word i{font-style:normal;font-weight:300;color:var(--muted);margin-inline:.18em}
.nav{margin-left:auto}
@media (min-width:901px){.nav[hidden]{display:block}}
.nav ul{display:flex;align-items:center;gap:clamp(.8rem,1.8vw,1.7rem)}
.nav a{font-size:var(--step--1);color:var(--muted);padding:.4rem 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current]{color:var(--ink);border-color:var(--ink)}
.hdr__end{display:flex;align-items:center;gap:.6rem}
.lang{position:relative}
.lang__btn{display:inline-flex;align-items:center;gap:.4rem;background:none;border:1px solid var(--line-strong);
  border-radius:999px;padding:.35rem .7rem;font-size:var(--step--1);font-weight:500;letter-spacing:.06em;cursor:pointer}
.lang__menu{position:absolute;right:0;top:calc(100% + .5rem);background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:.35rem;min-width:11rem;box-shadow:0 18px 40px -24px rgba(0,0,0,.5);z-index:60}
.lang__menu[hidden]{display:none}
.lang__menu a{display:flex;justify-content:space-between;gap:1rem;padding:.5rem .7rem;border-radius:8px;font-size:var(--step--1)}
.lang__menu a:hover{background:var(--surface-2)}
.lang__menu a[aria-current="true"]{color:var(--accent);font-weight:500}
.burger{display:none;width:2.6rem;height:2.6rem;border:1px solid var(--line-strong);border-radius:10px;background:none;cursor:pointer}
.burger i{display:block;width:1.05rem;height:1.5px;background:currentColor;margin:.22rem auto;border-radius:2px}
.nav__cta{display:none}
@media (max-width:900px){
  .burger{display:block}
  .nav{position:fixed;inset:4.5rem 0 auto;background:var(--paper);border-bottom:1px solid var(--line);
    padding:1rem var(--gutter) 1.5rem;margin:0;z-index:45}
  .nav[hidden]{display:none}
  .nav:not([hidden]){display:block}
  .nav ul{flex-direction:column;align-items:stretch;gap:0}
  .nav a{display:block;padding:.85rem 0;border-bottom:1px solid var(--line);font-size:var(--step-0)}
  /* The sheet drops over live content. Without a scrim the page behind reads as
     part of the menu; the pseudo-element covers from the sheet's own bottom
     edge down, so it needs no extra element and no JavaScript to place. */
  .nav:not([hidden])::after{content:"";position:absolute;top:100%;left:0;right:0;
    height:100vh;background:color-mix(in srgb,var(--paper) 72%,transparent);
    backdrop-filter:blur(2px);pointer-events:none}
}

/* The wordmark is set in nowrap, so below 375px the header row could not
   compress and pushed the burger off-screen: every page scrolled sideways by
   18px. The whole row steps down together rather than the brand truncating. */
@media (max-width:374px){
  .hdr__in{gap:.6rem}
  .brand{min-width:0}
  .brand__mark{width:1.5rem;height:1.5rem}
  .brand__word{font-size:.8rem;letter-spacing:.06em}
  .hdr__end{gap:.4rem}
  .lang__btn{padding:.35rem .5rem}
  .burger{width:2.4rem;height:2.4rem}
}

/* Both header controls are drawn smaller than the 44px a thumb needs. The hit
   area is grown with a pseudo-element so the drawn size does not change. */
.burger,.lang__btn{position:relative}
.burger::before,.lang__btn::before{content:"";position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:max(100%,44px);height:max(100%,44px)}

/* ---- Sections ---------------------------------------------------------- */
.section{padding-block:var(--sp-section)}
.section--tight{padding-block:clamp(2.25rem,4vw,3.5rem)}
.section--alt{background:var(--surface-2)}
.section--flush{padding-top:0}
.section__sub{margin-top:clamp(1.5rem,3vw,2.25rem)}
.page-head{display:grid;gap:1rem;max-width:var(--measure-lead)}
.page-head .h1{max-width:none}
.article-head{display:grid;gap:1rem;padding-block:1rem 2rem}
.related-title{margin-bottom:1.25rem}
.section--dark{background:var(--deep);color:var(--accent-ink)}
.section--dark .eyebrow{color:#D9A79F}
.section--dark .muted{color:rgba(245,241,232,.72)}
.section__head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(.9rem,2vw,1.25rem) clamp(2rem,5vw,4.5rem);align-items:start;
  margin-bottom:clamp(1.75rem,3.5vw,3rem)}
.section__head>.eyebrow{grid-column:1/-1}
.section__head .h2{max-width:none}
.section__head .lead{max-width:none;padding-top:.55rem;font-size:clamp(1rem,.96rem + .18vw,1.12rem)}
.section__head p:not(.lead):not(.eyebrow){max-width:var(--measure-lead)}
/* A head with no standfirst gets the whole row, not half of it. */
.section__head:not(:has(.lead)){grid-template-columns:minmax(0,1fr)}
.section__head:not(:has(.lead)) .h2{max-width:var(--measure-title)}
@media (max-width:860px){.section__head{grid-template-columns:minmax(0,1fr)}}

/* ---- Hero -------------------------------------------------------------- */
.hero{padding-block:clamp(2.25rem,5vw,4.5rem) clamp(2.25rem,4vw,3.5rem)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.75rem,4vw,3.5rem);align-items:center}
.hero__copy{display:grid;gap:1.25rem;align-content:start}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem}
.hero__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line)}
.hero__media img{width:100%;aspect-ratio:1120/887;object-fit:cover}
.proofs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-top:.85rem}
.proof{border:1px solid var(--line);border-radius:12px;padding:.85rem 1rem;background:var(--surface)}
.proof strong{display:block;font-weight:500;font-size:var(--step--1);letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin-bottom:.3rem}
.proof span{font-size:var(--step--1);color:var(--muted)}
@media (max-width:860px){.hero__grid{grid-template-columns:minmax(0,1fr)}.hero__media img{aspect-ratio:900/1100;max-height:75vh}.proofs{grid-template-columns:minmax(0,1fr)}}

/* ---- Chips / pills ----------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{border:1px solid var(--line-strong);border-radius:999px;padding:.3rem .7rem;font-size:.8rem;color:var(--muted);line-height:1.35}
.scope{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.scope>div{padding:clamp(1.15rem,2vw,1.6rem);display:grid;gap:.85rem;align-content:start;
  border-left:1px solid var(--line)}
.scope>div:first-child{border-left:0}
.scope h3{font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
@media (max-width:900px){.scope{grid-template-columns:minmax(0,1fr)}.scope>div{border-left:0;border-top:1px solid var(--line)}
  .scope>div:first-child{border-top:0}}
.chip--solid{background:var(--deep);color:var(--paper);border-color:transparent}

/* ---- Value band -------------------------------------------------------- */
.band{border-block:1px solid var(--line);padding-block:clamp(1.75rem,3.5vw,2.75rem)}
.band .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.25rem,3vw,4.5rem);align-items:start}
.band__text{font-size:var(--step-1);max-width:24ch;margin:0}
.band__points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 1.5rem}
@media (max-width:860px){.band .wrap{grid-template-columns:minmax(0,1fr)}.band__text{max-width:var(--measure-lead)}}
.band__points li{font-size:var(--step--1);color:var(--muted);padding-left:1rem;position:relative}
.band__points li::before{content:"";position:absolute;left:0;top:.66em;width:.42rem;height:1px;background:var(--accent)}
@media (max-width:820px){.band__points{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:520px){.band__points{grid-template-columns:minmax(0,1fr)}}

/* ---- Cards ------------------------------------------------------------- */
.grid{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.15rem,2vw,1.65rem);display:flex;flex-direction:column;gap:.65rem}
.card--wide{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1rem,2.5vw,3rem);padding:clamp(1.35rem,2.5vw,2.25rem);align-items:start}
.card--wide>*{min-width:0}
.card--wide .eyebrow,.card--wide .h3{grid-column:1}
.card--wide>p{grid-column:1;max-width:var(--measure-lead)}
.card--wide>ul{grid-column:2;grid-row:1/span 3;align-self:stretch;
  border-left:1px solid var(--line);padding-left:clamp(1rem,2.5vw,2rem)}
.card--wide>.more{grid-column:1/-1;margin-top:.35rem}
@media (max-width:860px){.card--wide{grid-template-columns:minmax(0,1fr)}
  .card--wide>ul{grid-column:1;grid-row:auto;border-left:0;padding-left:0}}
.card__num{font-family:var(--f-display);font-size:var(--step-2);color:var(--accent);line-height:1;font-weight:300}
.card ul,.ticks{display:grid;gap:.45rem;font-size:var(--step--1);color:var(--muted)}
.card li,.ticks li{padding-left:1rem;position:relative}
.card li::before,.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:.38rem;height:1px;background:var(--accent)}

/* ---- Sector rows ------------------------------------------------------- */
.sectors{border-top:1px solid var(--line)}
.sector{border-bottom:1px solid var(--line)}
.sector>details>summary{cursor:pointer;list-style:none;display:grid;
  grid-template-columns:3.25rem minmax(0,17rem) minmax(0,1fr) 1.5rem;gap:1.25rem;
  align-items:baseline;padding-block:1.35rem}
.sector>details>summary::-webkit-details-marker{display:none}
.sector>details>summary:hover .sector__name{color:var(--accent)}
.sector__idx{font-size:var(--step--1);color:var(--muted);font-variant-numeric:tabular-nums}
.sector__name{font-family:var(--f-display);font-size:var(--step-2);line-height:1.15;font-weight:300;letter-spacing:-.02em}
.sector__desc{color:var(--muted);font-size:var(--step--1)}
.sector__chev{justify-self:end;align-self:center;width:.62rem;height:.62rem;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.sector>details[open] .sector__chev{transform:rotate(-135deg) translate(-2px,-2px)}
.sector__detail{padding:0 0 1.75rem calc(3.25rem + 1.25rem)}
@media (max-width:760px){
  .sector>details>summary{grid-template-columns:2.5rem 1fr 1.5rem;gap:.5rem 1rem}
  .sector__desc{grid-column:2/-1}
  .sector__chev{grid-row:1}
  .sector__detail{padding-left:2.5rem}
}

/* ---- Disclosure -------------------------------------------------------- */
.more{margin-top:auto;padding-top:.9rem}
/* This is the only way into the detail on a phone, so the row is given a
   thumb's worth of height rather than the 28px the text alone came to. */
.more>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.45rem;
  font-size:var(--step--1);font-weight:500;color:var(--accent);padding:.3rem 0;min-height:44px}
.more>summary::-webkit-details-marker{display:none}
.more>summary::after{content:"";width:.42rem;height:.42rem;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.more[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
.more__body{padding-top:1rem}

/* ---- Detail bodies (disclosures) --------------------------------------
   Shared by the sector rows and every "read the full detail" panel. The
   markup is generated by tools/build.mjs, which recovers labels, key/value
   rows and lists from source content that is otherwise a run of <p>.       */
.detail{display:grid;gap:1rem;max-width:var(--measure-lead);container-type:inline-size}
.detail>h4{font-size:var(--step--1);letter-spacing:.01em;color:var(--ink);
  font-weight:500;padding-top:1rem;border-top:1px solid var(--line)}
.detail>h4:first-child{padding-top:0;border-top:0}
.detail>h4+*{margin-top:-.45rem}
/* a second label straight after the first is a subtitle, not a new section */
.detail>h4+h4{padding-top:0;border-top:0;margin-top:-.55rem;color:var(--muted);font-weight:400}
.detail>p{color:var(--muted);font-size:var(--step-0);line-height:1.65;max-width:var(--measure-prose)}
.detail>ul{display:grid;gap:.45rem;font-size:var(--step--1);color:var(--muted)}
/* two columns only where the panel is actually wide enough for them */
@container (min-width:32rem){.detail>ul.cols{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1rem,3vw,2.5rem)}}
.detail>ul li{padding-left:1rem;position:relative}
.detail>ul li::before{content:"";position:absolute;left:0;top:.62em;width:.38rem;height:1px;background:var(--accent)}
.detail .kv{display:grid;font-size:var(--step--1);border-top:1px solid var(--line)}
.detail .kv>div{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding:.55rem 0;border-bottom:1px solid var(--line)}
.detail .kv dt{color:var(--muted)}
.detail .kv dd{margin:0;font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.detail .kv--wide>div{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,2fr);gap:1.5rem}
.detail .kv--wide dd{text-align:left;font-weight:400;color:var(--ink)}
@media (max-width:560px){.detail .kv--wide>div{grid-template-columns:minmax(0,1fr);gap:.15rem}}


/* ---- Accordion (FAQ, customisation) ------------------------------------ */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{cursor:pointer;list-style:none;padding:1.1rem 2.5rem 1.1rem 0;position:relative;
  font-size:var(--step-1);font-weight:400;line-height:1.35}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";position:absolute;right:.35rem;top:1.55rem;width:.66rem;height:.66rem;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);transition:transform .2s}
.acc details[open] summary::after{transform:rotate(-135deg)}
.acc__body{padding-bottom:1.2rem;color:var(--muted);max-width:var(--measure-lead);display:grid;gap:.6rem}
.acc__body ul{display:grid;gap:.4rem;font-size:var(--step--1)}
.acc__body li{padding-left:1rem;position:relative}
.acc__body li::before{content:"";position:absolute;left:0;top:.62em;width:.38rem;height:1px;background:var(--accent)}
.acc__more{margin-top:1.1rem}
.acc__more>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.5rem;
  font-size:var(--step--1);letter-spacing:.02em;color:var(--ink);border:1px solid var(--line-strong);
  border-radius:999px;padding:.6rem 1.15rem;background:var(--surface)}
.acc__more>summary::-webkit-details-marker{display:none}
.acc__more>summary::after{content:"";width:.5rem;height:.5rem;border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;transform:rotate(45deg);margin-top:-.25rem}
.acc__more[open]>summary::after{transform:rotate(-135deg);margin-top:.2rem}
.acc__more>summary:hover{border-color:var(--accent);color:var(--accent)}
.acc__more>summary .is-less{display:none}
.acc__more[open]>summary .is-more{display:none}
.acc__more[open]>summary .is-less{display:inline}
.acc__more>.acc{margin-top:1.1rem;border-top:1px solid var(--line)}

/* ---- Stats ------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:clamp(1.5rem,3vw,2.25rem)}
.stats>div{background:var(--paper);padding:1.25rem clamp(.9rem,1.6vw,1.35rem);display:grid;gap:.3rem}
.section--alt .stats>div{background:var(--surface-2)}
.stats dt{font-size:var(--step--1);color:var(--muted);order:2}
.stats dd{font-family:var(--f-display);font-size:var(--step-2);line-height:1.1;font-weight:400;order:1}
@media (max-width:860px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.stats{grid-template-columns:minmax(0,1fr)}}

/* ---- Parameters -------------------------------------------------------- */
.param{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.15rem,2vw,1.65rem);display:flex;flex-direction:column;gap:.85rem}
.param__note{display:grid;gap:.2rem}
.param__note strong{font-family:var(--f-display);font-size:var(--step-1);font-weight:500;color:var(--accent)}
.param__note span{font-size:var(--step--1);color:var(--muted)}
.param__label{font-size:var(--step--1);font-weight:500;color:var(--ink)}

/* ---- Comparison table -------------------------------------------------- */
.compare{width:100%;border-collapse:collapse;font-size:var(--step--1)}
.compare caption{text-align:left;padding-bottom:.75rem;color:rgba(245,241,232,.72)}
.compare th,.compare td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid rgba(245,241,232,.16);vertical-align:top}
.compare thead th{font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:rgba(245,241,232,.6)}
.compare tbody th{font-weight:500;width:22%}
.compare tr:last-child td,.compare tr:last-child th{border-bottom:0}
.tablewrap{overflow-x:auto;border:1px solid rgba(245,241,232,.18);border-radius:var(--radius)}
.loop{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:1.25rem;font-size:var(--step--1)}
.loop span{border:1px solid rgba(245,241,232,.28);border-radius:999px;padding:.35rem .9rem}
.loop i{font-style:normal;color:rgba(245,241,232,.55)}

/* ---- Projects ---------------------------------------------------------- */
.project{display:flex;flex-direction:column;gap:.8rem}
a.project:hover .h3{color:var(--accent)}
a.project:hover img{opacity:.92}
.project img{transition:opacity .2s}
.project__link{font-size:var(--step--1);font-weight:500;color:var(--accent);display:inline-flex;
  align-items:center;gap:.4rem;margin-top:auto;padding-top:.2rem}
.project__link::after{content:"→";transition:transform .18s ease}
a.project:hover .project__link::after{transform:translateX(3px)}
.project img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line)}

/* ---- Contact form ------------------------------------------------------ */
.contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,4vw,4.5rem);align-items:start}
.contact__copy{position:sticky;top:6.5rem;display:grid;gap:.9rem;margin:0}
.contact__copy .h2{max-width:none}
@media (max-width:900px){.contact__copy{position:static}}
@media (max-width:900px){.contact{grid-template-columns:minmax(0,1fr)}}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.25rem,2.5vw,2rem)}
.field{display:grid;gap:.4rem}
.field--full{grid-column:1/-1}
/* a fixed label block keeps the controls of a row on one line even when one
   label wraps to two; help text then hangs below without shifting anything */
.field label{font-size:var(--step--1);font-weight:500;line-height:1.3;min-height:2.6em;display:flex;align-items:flex-end;gap:.25rem}
.field label i{font-style:normal;color:var(--accent)}
.field__help{font-size:.76rem;color:var(--muted);margin-top:-.1rem}
.field input,.field select,.field textarea{background:var(--paper);border:1px solid var(--line-strong);
  border-radius:10px;padding:.75rem .9rem;width:100%;
  /* iOS Safari zooms the viewport on focus below 16px; this floor prevents it */
  font-size:max(16px,var(--step-0))}
/* fixed, not minimum: a date input is intrinsically taller than a select and
   would sit a few pixels off its row partner */
.field input,.field select{height:3rem}
.field textarea{min-height:7rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--step--1);color:var(--muted);grid-column:1/-1}
.consent input{width:1.5rem;height:1.5rem;min-height:0;flex:none;margin-top:0;accent-color:var(--accent)}
.consent a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:var(--step--1);color:var(--muted);grid-column:1/-1}
.form-status{grid-column:1/-1;font-size:var(--step--1);border-radius:10px;padding:.75rem .9rem;border:1px solid var(--line-strong)}
.form-status[hidden]{display:none}
.form-status[data-state="ok"]{border-color:var(--accent);color:var(--accent)}
@media (max-width:640px){.form{grid-template-columns:minmax(0,1fr)}}

/* ---- Footer ------------------------------------------------------------ */
.ftr{border-top:1px solid var(--line);padding-block:clamp(2.5rem,5vw,4rem) 2rem;font-size:var(--step--1)}
.ftr__grid{display:grid;grid-template-columns:1.6fr repeat(3,minmax(0,1fr));gap:2rem}
.ftr__about{max-width:34ch;margin-top:.85rem;color:var(--muted)}
.ftr h2{font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:.85rem}
.ftr li{margin-bottom:.5rem}
.ftr a:hover{color:var(--accent)}
.ftr__legal{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--line);display:flex;
  flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;color:var(--muted)}
@media (max-width:820px){
  .ftr__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr__grid>div:first-child{grid-column:1/-1}
}

/* ---- Consent bar ------------------------------------------------------- */
/* Above the sticky buy bar (80) and the toasts (90), below the modal scrim
   (100). At 60 it sat UNDER the buy bar: on all 155 product pages the bar
   covered both consent buttons, elementFromPoint returned DIV.buybar for
   each of them, and neither Accept nor Reject could be clicked at all. */
.consent-bar{position:fixed;inset:auto 1rem 1rem auto;z-index:92;max-width:32rem;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:14px;padding:1rem 1.15rem;font-size:var(--step--1);
  box-shadow:0 20px 50px -30px rgba(0,0,0,.6)}
.consent-bar[hidden]{display:none}
.consent-bar p{margin-bottom:.75rem;color:var(--muted)}
.consent-bar div{display:flex;gap:.5rem;flex-wrap:wrap}

/* ---- Breadcrumbs ------------------------------------------------------- */
.crumbs{font-size:var(--step--1);color:var(--muted);padding-block:1rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.4rem}
.crumbs li+li::before{content:"/";margin-right:.4rem;color:var(--line-strong)}
.crumbs a:hover{color:var(--accent)}

/* ---- Blog index -------------------------------------------------------- */
.post-list{display:grid;border-top:1px solid var(--line)}
.post-row{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:clamp(1rem,3vw,2.5rem);
  padding-block:clamp(1.5rem,3vw,2.25rem);border-bottom:1px solid var(--line);align-items:start}
.post-row img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.post-row__body{display:grid;gap:.55rem}
.post-row h3,.post-row .post-row__h{margin:0;font-family:var(--f-display);font-size:var(--step-2);line-height:1.2;font-weight:300;letter-spacing:-.022em}
.post-row a:hover h3{color:var(--accent)}
.post-meta{font-size:var(--step--1);color:var(--muted);display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center}
.tag{border:1px solid var(--line-strong);border-radius:999px;padding:.15rem .6rem;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:700px){.post-row{grid-template-columns:minmax(0,1fr)}}

/* ---- Article ----------------------------------------------------------- */
/* The article title owns the full 75rem column, so it is not capped at
   --measure-title: that 32ch cap is 1016px against a 1200px container and
   forced a second line on titles that fit one, which text-wrap:balance then
   split into two half-width lines. Every other heading sits in a narrower
   grid column where the cap never binds. */
.post-title{font-family:var(--f-display);font-size:clamp(1.9rem,1.35rem + 2.4vw,3.15rem);line-height:1.1;
  letter-spacing:-.03em;font-weight:300;max-width:none;text-wrap:balance}
.article{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,16rem);gap:clamp(2rem,5vw,4rem);align-items:start}
.article__body{max-width:var(--measure-prose);font-size:1.04rem;line-height:1.75}
.article__body h2{font-family:var(--f-display);font-size:var(--step-2);font-weight:400;line-height:1.25;
  letter-spacing:-.02em;margin:2.4rem 0 .8rem;scroll-margin-top:6rem}
.article__body h3{font-size:var(--step-1);font-weight:500;margin:1.7rem 0 .55rem;scroll-margin-top:6rem}
.article__body p{margin-bottom:1.1rem}
.article__body ul{display:grid;gap:.5rem;margin-bottom:1.35rem}
.article__body ul li{padding-left:1.2rem;position:relative}
.article__body ul li::before{content:"";position:absolute;left:0;top:.75em;width:.45rem;height:1px;background:var(--accent)}
.article__body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.article__body figure{margin:2rem 0}
.article__body figcaption{font-size:var(--step--1);color:var(--muted);margin-top:.6rem}
.takeaways{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.5rem;margin-bottom:2rem}
.takeaways h2{font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  font-weight:500;margin:0 0 .75rem}
.takeaways ul{display:grid;gap:.5rem;margin:0}
.takeaways li{padding-left:1.2rem;position:relative;font-size:var(--step-0)}
.takeaways li::before{content:"";position:absolute;left:0;top:.75em;width:.45rem;height:1px;background:var(--accent)}
.toc{position:sticky;top:6rem;display:grid;gap:.5rem;font-size:var(--step--1);border-left:1px solid var(--line);padding-left:1.25rem}
.toc strong{letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;color:var(--muted);font-weight:500}
.toc a{color:var(--muted);display:block;padding:.15rem 0}
.toc a:hover,.toc a.is-active{color:var(--ink)}
@media (max-width:960px){.article{grid-template-columns:minmax(0,1fr)}.toc{position:static;border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:1rem}}
.author{display:flex;gap:1rem;align-items:center;border:1px solid var(--line);border-radius:var(--radius);padding:1.15rem;margin-top:2.5rem}
.author__av{width:3rem;height:3rem;border-radius:50%;background:var(--deep);color:var(--paper);display:grid;place-items:center;
  font-size:.95rem;font-weight:500;letter-spacing:.04em;flex:none}
.cover img{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:18px;border:1px solid var(--line)}
.cover figcaption{font-size:var(--step--1);color:var(--muted);margin-top:.6rem}

/* ---- CTA band ---------------------------------------------------------- */
.cta{background:var(--deep);color:var(--accent-ink);border-radius:var(--radius-lg);padding:clamp(1.75rem,3.5vw,3rem);
  display:grid;gap:1.1rem;justify-items:start}
.cta .h2{color:inherit}
.cta p{max-width:var(--measure-lead);color:rgba(245,241,232,.85)}
.cta .btn--primary{background:var(--accent-ink);color:var(--deep)}
.cta .btn--primary:hover{background:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cta{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}
  :root:not([data-theme="light"]) .cta p{color:var(--muted)}
  :root:not([data-theme="light"]) .cta .btn--primary{background:var(--accent);color:var(--accent-ink)}}
:root[data-theme="dark"] .cta{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}
:root[data-theme="dark"] .cta p{color:var(--muted)}
:root[data-theme="dark"] .cta .btn--primary{background:var(--accent);color:var(--accent-ink)}

/* ---- Legal hub --------------------------------------------------------- */
.legal{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
.legal__nav{position:sticky;top:6rem;display:grid;gap:.5rem;font-size:var(--step--1);border-left:1px solid var(--line);padding-left:1.15rem}
.legal__nav a{color:var(--muted);padding:.15rem 0}
.legal__nav a:hover{color:var(--ink)}
.legal__body{max-width:var(--measure-prose);display:grid;gap:2.5rem}
/* The fragment id is on the SECTION, not on the heading, so this is where the
   scroll margin has to be: declared on the h2 it did nothing, and the four
   legal aliases (/cookie-policy/, /privacy-policy/, /terms-and-conditions/,
   /legal-notice/) landed with their heading parked at y=0, entirely behind the
   73px sticky header — elementFromPoint at the heading returned the header. */
.legal__doc{scroll-margin-top:6rem}
.legal__doc h2{font-family:var(--f-display);font-size:var(--step-2);font-weight:300;letter-spacing:-.02em;
  margin-bottom:1rem;scroll-margin-top:6rem}
.legal__doc h3{font-size:var(--step-0);font-weight:500;margin:1.5rem 0 .5rem;letter-spacing:-.005em}
.legal__doc p{margin-bottom:.9rem;color:var(--muted)}
.legal__doc ul{display:grid;gap:.4rem;margin-bottom:1.1rem;color:var(--muted)}
.legal__doc li{padding-left:1.1rem;position:relative}
.legal__doc li::before{content:"";position:absolute;left:0;top:.7em;width:.42rem;height:1px;background:var(--accent)}
/* Stacked, the index loses the rule that separated it from the documents and
   reads as the first four lines of the privacy policy. The rule moves under
   it, and each entry gets a tappable row rather than a bare line of text. */
@media (max-width:860px){.legal{grid-template-columns:minmax(0,1fr)}
  .legal__nav{position:static;border-left:0;padding-left:0;gap:0;
    border-bottom:1px solid var(--line);padding-bottom:.35rem}
  .legal__nav a{display:block;padding:.7rem 0;border-top:1px solid var(--line)}
  .legal__nav a:first-child{border-top:0}}

/* ---- 404 --------------------------------------------------------------- */
.error{min-height:52vh;display:grid;align-content:center;gap:1.15rem;justify-items:start}

@media (max-width:900px){.nav__cta{display:block}.nav__cta a{color:var(--accent);font-weight:500}}
@media (max-width:560px){.hdr__cta{display:none}}

/* ── home: delivered-work band ───────────────────────────────────────────── */
.band .wrap{display:block}
.stats--band{margin-top:.9rem}

/* ── home: sector cards ──────────────────────────────────────────────────── */
.sector-grid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:clamp(.9rem,1.8vw,1.4rem)}
@media (max-width:860px){.sector-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sector-grid{grid-template-columns:minmax(0,1fr)}}
.sector-card{display:flex;flex-direction:column;gap:.35rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:clamp(.7rem,1.4vw,.9rem)}
.sector-card__img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px;display:block}
.sector-card__idx{margin:.6rem 0 0;font-size:.7rem;letter-spacing:.16em;color:var(--accent)}
.sector-card__name{margin:0;font-family:var(--f-display);font-size:var(--step-1);
  line-height:1.2;font-weight:300;letter-spacing:-.015em}
.sector-card__desc{margin:0;color:var(--muted);font-size:var(--step--1);line-height:1.55}
.sector-card .disclosure{margin-top:auto;padding-top:.7rem}

/* ── home: what you get ──────────────────────────────────────────────────── */
.getgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(.9rem,2vw,1.6rem);align-items:stretch}
@media (max-width:860px){.getgrid{grid-template-columns:minmax(0,1fr)}}
.getgrid__img{width:100%;height:100%;min-height:20rem;object-fit:cover;border-radius:var(--radius);display:block}
@media (max-width:860px){.getgrid__img{min-height:0;aspect-ratio:3/4;height:auto}}
.pillars{list-style:none;margin:0;padding:0 clamp(1rem,2.2vw,1.7rem);display:grid;
  grid-template-rows:repeat(3,1fr);border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface)}
.pillar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(.7rem,1.6vw,1.15rem);
  align-content:center;align-items:start;padding:clamp(.9rem,2vw,1.35rem) 0}
.pillar+.pillar{border-top:1px solid var(--line)}
.pillar__n{font-size:1.45rem;line-height:1.05;color:var(--accent);font-variant-numeric:tabular-nums;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.pillar__h{margin:0 0 .3rem;font-family:var(--f-display);font-size:var(--step-1);
  line-height:1.2;font-weight:300;letter-spacing:-.015em}
.pillar__p{margin:0;color:var(--muted);font-size:var(--step--1);line-height:1.55;max-width:var(--measure-prose)}
.garments__lead{margin:clamp(1.2rem,2.6vw,2rem) 0 .55rem;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.garments{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}
@media (max-width:520px){.garments{grid-template-columns:repeat(2,minmax(0,1fr))}}
.garment{border:1px solid var(--line-strong);border-radius:10px;padding:.72rem .6rem;
  font-size:var(--step--1);color:var(--ink);background:var(--surface);
  display:flex;align-items:center;gap:.55rem}
.garment::before{content:"";width:.34rem;height:.34rem;border-radius:50%;background:var(--accent);flex:none}
.ctabar{margin-top:clamp(1.2rem,2.6vw,2rem);background:var(--deep);color:var(--paper);
  border-radius:var(--radius);padding:clamp(1rem,2.4vw,1.5rem) clamp(1.1rem,2.6vw,1.9rem);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.4rem}
.ctabar__t{margin:0;font-size:var(--step-1);line-height:1.3;max-width:44ch;color:inherit}
.ctabar__a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;
  padding-bottom:.15rem;font-size:var(--step-0);white-space:nowrap}
.ctabar__a:hover{opacity:.75}

/* ── home: process phase images ──────────────────────────────────────────── */
.card__img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:8px;display:block;margin-bottom:.45rem}

/* ── home: section handoff link ──────────────────────────────────────────── */
.handoff{margin:clamp(1.1rem,2.4vw,1.8rem) 0 0}
.handoff a{color:var(--accent);text-decoration:none;font-size:var(--step-0);
  display:inline-block;min-height:24px;line-height:24px;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.handoff a::after{content:" \2192"}
.handoff a:hover{border-bottom-color:currentColor}

/* ── touch targets ───────────────────────────────────────────────────────── */
@media (max-width:900px){
  .ftr a,.ftr__legal a,.consent a{display:inline-block;min-height:24px;line-height:24px}
  .ftr__legal a{min-width:24px;text-align:center}
  .ftr li{margin-bottom:.35rem}
  .lang__menu a{min-height:2.75rem;display:flex;align-items:center}
}

/* ── section tabs ────────────────────────────────────────────────────────
   Mobile: each section is a bordered tab. The kicker and heading are the
   tab face; the lead and the whole body fold inside. Desktop: the tab is
   inert and the grid restores the two-column head used site-wide.
   Collapsed in CSS only, so the state is right at first paint, there is no
   layout shift, and it works with JavaScript off. Nothing leaves the HTML
   at either width. */
.sec-acc__cb{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sec-acc__chev{display:none}

/* desktop: rebuild the two-column head, tab chrome off */
@media (min-width:901px){
  .sec-acc{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    column-gap:clamp(1.5rem,4vw,4rem)}
  .sec-acc__tab{grid-column:1;grid-row:1;display:block}
  .sec-acc__lead{grid-column:2;grid-row:1;align-self:end;max-width:none;padding-top:.55rem;
    font-size:clamp(1rem,.96rem + .18vw,1.12rem)}
  .sec-acc__body{grid-column:1/-1;grid-row:2;margin-top:clamp(1.75rem,3.5vw,2.75rem)}
  .sec-acc__title{max-width:none}
}

@media (max-width:900px){
  /* the tab edge is the control boundary, so it needs 3:1 against the fill
     in both schemes — var(--line-strong) only reached 1.95:1 in dark */
  .sec-acc{border:1px solid color-mix(in srgb,var(--deep) 56%,transparent);
    border-radius:var(--radius);background:var(--surface);overflow:hidden}
  .sec-acc__tab{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
    gap:.35rem .9rem;cursor:pointer;padding:clamp(1rem,3.5vw,1.3rem) clamp(1rem,4vw,1.25rem)}
  .sec-acc__kicker{grid-column:1;margin:0}
  .sec-acc__title{grid-column:1;margin:0;max-width:none;
    font-size:clamp(1.25rem,1.1rem + 1.1vw,1.6rem);line-height:1.18}
  .sec-acc__chev{display:block;grid-column:2;grid-row:1/span 2;width:.62rem;height:.62rem;
    border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
    transform:rotate(45deg);margin-top:-.3rem;transition:transform .18s ease}
  .sec-acc__cb:checked ~ .sec-acc__tab .sec-acc__chev{transform:rotate(-135deg);margin-top:.24rem}
  .sec-acc__cb:focus-visible ~ .sec-acc__tab{outline:2px solid var(--accent);outline-offset:-2px}
  .sec-acc__tab:hover .sec-acc__title{color:var(--accent)}
  .sec-acc__cb:not(:checked) ~ .sec-acc__lead,
  .sec-acc__cb:not(:checked) ~ .sec-acc__body{display:none}
  .sec-acc__lead{margin:0;padding:0 clamp(1rem,4vw,1.25rem)}
  .sec-acc__body{padding:0 clamp(1rem,4vw,1.25rem) clamp(1.3rem,4vw,1.6rem);
    margin-top:clamp(1rem,3vw,1.3rem)}
  .sec-acc__cb:checked ~ .sec-acc__tab{border-bottom:1px solid var(--line)}
  /* the tab carries its own frame; the section only needs rhythm between tabs */
  .section:has(.sec-acc){padding-block:clamp(.6rem,2.5vw,1rem)}
  .section--alt:has(.sec-acc){background:none}
}



/* ===========================================================================
   THE STUDIO PAGE — the design language from the approved mockup.

   Its tokens are at the top of this file with everything else's; the rules
   are here, after the original sheet's, so that they win where the two
   describe the same element.
   =========================================================================== */
@media (min-width:769px){:root{--ig-blur:22px}}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--f);font-size:var(--fs-base);line-height:1.5;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.t-h3{font-size:var(--fs-xl);line-height:1.25;letter-spacing:-.018em;font-weight:400}
.t-h4{font-size:var(--fs-lg);line-height:1.3;letter-spacing:-.01em;font-weight:500}
.t-h5{font-size:var(--fs-md);line-height:1.35;font-weight:500}
.t-sm{font-size:var(--fs-sm);line-height:1.5}
.t-xs{font-size:var(--fs-xs);line-height:1.45}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.med{font-weight:500}
.num{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.eyebrow{font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:36px;padding:0 var(--sp-4);border-radius:var(--radius-full);
  border:1px solid transparent;background:transparent;color:var(--ink);
  font-size:var(--fs-sm);font-weight:500;cursor:pointer;white-space:nowrap;
  transition:background-color var(--dur-focus) var(--ease),border-color var(--dur-focus) var(--ease),transform var(--dur-press) var(--ease);
}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn:disabled:active{transform:none}
.btn--primary{background:var(--navy);color:var(--paper);border-color:var(--navy)}
.btn--primary:hover:not(:disabled){background:var(--navy-hover);border-color:var(--navy-hover)}
.btn--ghost{border-color:var(--line-strong);color:var(--ink);background:var(--surface)}
.btn--ghost:hover:not(:disabled){border-color:var(--ink);background:var(--surface-2)}
.btn--quiet{color:var(--muted)}
.btn--quiet:hover:not(:disabled){background:var(--surface-2);color:var(--ink)}
.btn--lg{min-height:46px;padding:0 var(--sp-6);font-size:var(--fs-md)}
.btn--sm{min-height:28px;padding:0 var(--sp-3);font-size:var(--fs-xs)}
.btn-row{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.card-head .t-h4{letter-spacing:-.01em}
.stack{display:flex;flex-direction:column}
.stack>*+*{margin-top:var(--sp-4)}
.stack-2>*+*{margin-top:var(--sp-2)}
.stack-3>*+*{margin-top:var(--sp-3)}
.row{display:flex;align-items:center;gap:var(--sp-3)}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.wrap-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.inp,select.inp,textarea.inp{
  width:100%;padding:9px var(--sp-3);border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--ink);font-size:var(--fs-sm);
  transition:border-color var(--dur-focus) var(--ease);
}
.inp:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-quiet)}
textarea.inp{min-height:84px;resize:vertical;line-height:1.5}
.inp--err{border-color:var(--stop)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--radius-full);background:var(--surface-2);font-size:var(--fs-xs);color:var(--muted)}
.chip--on{background:var(--navy-quiet);color:var(--navy)}
.pub-wrap{max-width:var(--app-max);margin:0 auto;padding:0 var(--sp-6)}
.pub-sec{padding:var(--sp-10) 0}
.pub-sec--tight{padding:var(--sp-9) 0}
.pub-band .t-lead,.pub-band .muted{color:var(--on-band-dim)}
.pub-band .eyebrow{color:var(--on-band-dim)}
@media (max-width:900px){.pub-sec{padding:var(--sp-9) 0}
.pub-wrap,.pub-hd-in{padding:0 var(--sp-4)}}
@media (max-width:900px){body.is-public .switch{bottom:var(--sp-4);top:auto}}
:root[data-theme="dark"] .pcard-img img{mix-blend-mode:normal}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pcard-img img{mix-blend-mode:normal}}
.pcard-meta .row{overflow:hidden;min-width:0}
body.has-bar{padding-bottom:84px}
@media (max-width:620px){body.has-bar{padding-bottom:132px}}
.pub-sec--top{padding-top:var(--sp-8)}
.surface-2{background:var(--surface-2)}
.card--num .t-sm{flex:1}
.proc .t-sm{margin-top:var(--sp-2)}
.crumb{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  font-size:var(--fs-xs);color:var(--muted);margin-bottom:var(--sp-5)}
.crumb a{cursor:pointer;color:var(--muted)}
.crumb a:hover{color:var(--ink)}
.crumb-sep{color:var(--line-strong)}
.crumb-here{color:var(--ink)}
.chip--lg{font-size:var(--fs-sm);padding:6px 14px}
.cta-band .eyebrow{color:var(--on-band-dim)}
.coll-b .t-sm{flex:1}
.ft-id .mk{margin-top:2px}
.coll-grid-lg[data-n="7"] > :nth-child(7) .t-sm{flex:0}
.pcard-b .row-between{gap:var(--sp-3)}
.pcard-meta .row{flex:0 1 auto}
.lnk{color:var(--navy);cursor:pointer;font-size:var(--fs-sm);font-weight:500;
  text-decoration:underline;text-underline-offset:3px}
.lnk:hover{color:var(--ink)}
.stack-3{display:flex;flex-direction:column;gap:var(--sp-3)}
.faq{margin-top:var(--sp-6);border-top:1px solid var(--line)}
.faq-i{border-bottom:1px solid var(--line)}
.faq-q{cursor:pointer;padding:var(--sp-4) var(--sp-7) var(--sp-4) 0;position:relative;
  font-size:var(--fs-md);font-weight:400;line-height:1.4;list-style:none;min-height:44px;
  display:flex;align-items:center}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{content:"+";position:absolute;right:var(--sp-2);top:50%;transform:translateY(-50%);
  font-size:var(--fs-xl);font-weight:300;color:var(--muted);line-height:1}
.faq-i[open] .faq-q::after{content:"–"}
.faq-q:hover{color:var(--navy)}
.faq-a{padding:0 var(--sp-7) var(--sp-5) 0}
.faq-more{margin-top:var(--sp-4)}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld-l{font-size:var(--fs-sm);font-weight:500}
.fld-h{line-height:1.45}
.fld--err .inp{border-color:var(--stop)}
@media (max-width:720px){.faq-a{padding-right:0}}
:root{
  --fs-display:clamp(38px,6.2vw,84px);
  --fs-mega:clamp(56px,11vw,150px);
  --rule:1px solid var(--line);
}
.sec--dark .sec-title,.sec--dark .page-title,.sec--dark .t-h3,.sec--dark .t-h4{color:var(--on-band)}
.sec--dark .sec-desc,.sec--dark .muted,.sec--dark .t-sm{color:var(--on-band-dim)}
.sec--dark .sec-ix-l,.sec--dark .sec-ix-n,.sec--dark .sec-ix-m,.sec--dark .eyebrow{color:var(--on-band-dim)}
.sec--dark .lnk{color:var(--on-band)}
.display{font-size:var(--fs-display);line-height:1.02;letter-spacing:-.04em;
  font-weight:300;text-wrap:pretty;margin:0}
.lede{font-size:clamp(16px,1.4vw,21px);line-height:1.55;font-weight:300;color:var(--muted)}
.cap{font-size:var(--fs-micro);color:var(--faint);margin-top:var(--sp-2);
  display:flex;gap:var(--sp-3);align-items:baseline}
.cap b{font-weight:500;color:var(--muted)}
.media{overflow:hidden;background:var(--surface-2);border:var(--rule)}
.media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease)}
.media--4x5{aspect-ratio:4/5}
.media--3x2{aspect-ratio:3/2}
.media--21x9{aspect-ratio:21/9}
.hovr:hover .media img{transform:scale(1.03)}
.bleed .display,.bleed .lede,.bleed .eyebrow,.bleed .cap{color:#F4F2ED}
.bleed .lede{color:rgba(244,242,237,.86)}
.bleed .eyebrow,.bleed .cap{color:rgba(244,242,237,.7)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-8);align-items:center}
.split--wide{grid-template-columns:1.35fr .65fr}
.split--narrow{grid-template-columns:.65fr 1.35fr}
.split-b{min-width:0}
.split--bottom>.split-b{display:flex;flex-direction:column}
.split--bottom>.split-b>.btn-row{margin-top:auto}
.split--sticky>.split-b:first-child{position:sticky;top:calc(var(--header-h) + var(--sp-7))}
@media (max-width:1000px){.split--sticky>.split-b:first-child{position:static}}
.lnk-a{display:inline-flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-sm);
  font-weight:500;color:var(--ink);cursor:pointer;min-height:44px}
.lnk-a span{width:22px;height:1px;background:var(--line-strong);
  transition:width var(--dur-morph) var(--ease),background-color var(--dur-morph) var(--ease)}
.lnk-a:hover span{width:36px;background:var(--ink)}
.sec--red .lnk-a:hover{color:var(--red-text)}
.sec--red .lnk-a:hover span{background:var(--red-text)}
.sec--dark .lnk-a{color:var(--on-band)}
.sec--dark .lnk-a span{background:color-mix(in srgb,#F4F2ED 50%,transparent)}
.sec--dark .lnk-a:hover span{background:#F4F2ED}
@media (max-width:1000px){.split,.split--wide,.split--narrow{grid-template-columns:minmax(0,1fr);gap:var(--sp-6)}}
@media (prefers-reduced-motion:reduce){.media img,.gate-img,.gate-veil,.gate-go span,.lnk-a span{transition:none}
.hovr:hover .media img,.gate-h:hover .gate-img{transform:none}}
.pcard-b .t-h5{margin-bottom:0}
.ticks{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.ticks li{font-size:var(--fs-sm);color:var(--muted);padding-left:var(--sp-6);position:relative;line-height:1.55}
.ticks li::before{content:"";position:absolute;left:0;top:.52em;width:10px;height:1px;background:var(--red)}
.shero{padding:var(--sp-9) 0 var(--sp-10);border-bottom:var(--rule)}
.shero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-9);align-items:center}
.shero-copy{min-width:0}
.news{display:inline-flex;align-items:center;gap:var(--sp-3);border:1px solid var(--line);
  background:var(--surface);padding:6px 14px;border-radius:var(--radius-full);
  font-size:var(--fs-xs);color:var(--muted)}
.news b{font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy);background:var(--navy-quiet);padding:3px 8px;border-radius:var(--radius-full)}
.shero-t{margin-top:var(--sp-6)}
.shero-d{margin-top:var(--sp-6);max-width:52ch}
.shero-media{position:relative;min-width:0}
/* Two rules below cap this photograph with max-height. Without object-fit the
   cap squashes it instead of cropping it, which on a short viewport stood the
   whole hero on its side. */
.shero-img{width:100%;object-fit:cover;object-position:center top}
.shero-card{position:absolute;left:calc(var(--sp-8) * -1);bottom:var(--sp-7);width:min(330px,78%);
  background:var(--surface);border:var(--card-border);box-shadow:var(--shadow-4);padding:var(--sp-5)}
.shero-card-h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.shero-card-t{font-size:var(--fs-md);font-weight:500;margin:var(--sp-3) 0 var(--sp-4)}
.art{margin-top:var(--sp-5);border:1px solid var(--line);background:var(--surface-2);
  padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2)}
.sol-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6)}
.sol{border:var(--card-border);background:var(--surface);box-shadow:var(--card-shadow);
  padding:var(--sp-6);display:flex;flex-direction:column}
@media (max-width:1100px){.sol-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1000px){.shero-in{grid-template-columns:minmax(0,1fr);gap:var(--sp-7)}
.shero-media{order:-1}
.shero-card{position:static;width:100%;margin-top:calc(var(--sp-6) * -1);
  padding-top:var(--sp-7);box-shadow:var(--shadow-3)}}
@media (max-width:720px){.sol-g{grid-template-columns:minmax(0,1fr)}}
.tf-below .lnk{display:inline-block;margin-top:var(--sp-2)}
.vat-row .inp{flex:1;min-width:0}
.vat-row .btn{flex:none}
@media (max-width:620px){.vat-row .inp{flex:1 1 100%;order:2}
.vat-row .btn{order:3}}
@media (max-width:400px){.gate2-ctl .btn{padding:0 10px;font-size:11px}}
:root{
  --measure:52ch;        
  --measure-sm:58ch;     
  --measure-prose:56ch;  
}
.page-head .pub-wrap{display:grid;grid-template-columns:1.1fr .9fr;
  column-gap:var(--sp-8);align-items:end}
.page-head .crumb,.page-head .eyebrow{grid-column:1 / -1}
.page-head .eyebrow{margin-bottom:var(--sp-3)}
.page-head .pub-wrap > *:not(.crumb):not(.eyebrow):not(.page-title):not(.page-desc){
  grid-column:1 / -1;margin-top:var(--sp-6)}
.page-head .pub-wrap:not(:has(.page-desc)) .page-title{grid-column:1 / -1}
.pub-wrap,.split-b,.co-left,.co-right{container-type:inline-size}
.lede{max-width:var(--measure)}
.read .t-body,.read .t-sm{max-width:var(--measure-prose)}
.split-b .lede,.split-b .page-desc,.split-b .sec-desc,.shead > p{max-width:var(--measure)}
@media (max-width:1000px){.page-head .pub-wrap{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}}
.pub-sec .display:not(.page-title){font-size:clamp(26px,2.9vw,42px);line-height:1.08}
.bleed .display,.shero-t,.page-title{font-size:clamp(30px,4.4vw,56px);line-height:1.04}
.tf-form .fld,.tf-form--wide .fld{max-width:560px}
:root{--col-guide:34rem}
.guide > .split-b:last-child{max-width:var(--col-guide)}
.guide .t-body,.guide .t-sm{max-width:none}
@media (max-width:900px){.guide > .split-b:first-child{position:static}}
.bleed-in .display{max-width:var(--hero-col)}
.bleed-in .lede{max-width:var(--hero-col)}
:root{
  --r-panel:28px;
  --r-card:20px;
  --r-media:16px;
}
.mk{width:1em;height:1em;flex:none;color:inherit}
.mk--lockup{width:19px;height:19px;color:var(--navy);align-self:center;margin-right:1px}
.mk--ft{width:17px;height:17px;color:var(--navy)}
.mk--ask{width:34px;height:34px;color:var(--on-band);margin:0 auto var(--sp-6)}
.btn--arrow{padding-right:var(--sp-3);gap:var(--sp-4)}
.btn-a{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:var(--radius-full);background:color-mix(in srgb,currentColor 16%,transparent);
  font-style:normal;font-size:var(--fs-sm);line-height:1;flex:none;
  transition:transform var(--dur-morph) var(--ease)}
.btn--arrow:hover .btn-a{transform:translateX(3px)}
.btn--ghost .btn-a{background:var(--surface-2)}
.tag{display:inline-flex;align-items:center;gap:var(--sp-3);border:1px solid var(--line);
  background:var(--surface);border-radius:var(--radius-full);padding:5px 14px 5px 5px;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
.tag i{font-style:normal;background:var(--navy-quiet);color:var(--navy);border-radius:var(--radius-full);
  padding:3px 8px;font-variant-numeric:tabular-nums;letter-spacing:.08em}
.tag--dark{border-color:color-mix(in srgb,#F4F2ED 26%,transparent);background:transparent;
  color:var(--on-band-dim)}
.tag--dark i{background:color-mix(in srgb,#F4F2ED 16%,transparent);color:var(--on-band)}
.shd{max-width:none;margin:0 auto var(--sp-9);text-align:center}
.shd-t{font-size:clamp(28px,3.4vw,52px);margin-top:var(--sp-5);text-wrap:balance}
.shd-d{margin-top:var(--sp-5);max-width:76ch;margin-left:auto;margin-right:auto}
.shd--left{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:var(--sp-5) var(--sp-8);align-items:end;text-align:left;max-width:none;margin-left:0}
.shd--left .tag{grid-column:1 / -1;justify-self:start}
.shd--left .shd-t{margin-top:0}
.shd--left .shd-d{margin:0 0 .4em;max-width:52ch}
.shd--left .shd-a{grid-column:1 / -1;margin-top:var(--sp-2)}
.shd--dark .shd-t{color:var(--on-band)}
.shd--dark .shd-d{color:var(--on-band-dim)}
.shero{padding:var(--sp-9) 0 var(--sp-9);border-bottom:0}
.shero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-9);align-items:center}
.shero-t{margin-top:var(--sp-6);font-size:clamp(40px,5.6vw,76px);line-height:1.02}
.shero-d{margin-top:var(--sp-6);max-width:50ch}
.shero-sup{margin-top:var(--sp-5)}
.news{padding:5px 14px 5px 8px}
.shero-img{border-radius:var(--r-panel);border:0}
@media (min-width:1001px){.shero-img{max-height:calc(100svh - 260px)}}
@media (min-width:1001px) and (max-width:1200px){.shero-d{max-width:42ch}}
/* .shero-img is the <img>, not a wrapper, so this had no element to match.
   The object-position it was reaching for is set on .shero-img itself. */
.shero-card{left:calc(var(--sp-9) * -1);bottom:var(--sp-8);width:min(320px,80%);
  border-radius:var(--r-card);border:1px solid var(--line);box-shadow:var(--shadow-4)}
.band{background:var(--band);color:var(--on-band);border-radius:var(--r-panel);
  padding:var(--sp-9) var(--sp-8) var(--sp-8)}
.band-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.band-v{font-size:clamp(40px,4.6vw,68px);line-height:1;font-weight:300;letter-spacing:-.045em;
  color:var(--on-band)}
.band-l{font-size:var(--fs-md);font-weight:500;margin-top:var(--sp-4);color:var(--on-band)}
.ind-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6)}
.ind{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--sp-4);display:flex;flex-direction:column;
  transition:border-color var(--dur-morph) var(--ease)}
.ind:hover{border-color:var(--line-strong)}
button.lnk-a{border:0;background:transparent;padding:0;font-family:inherit}
.ind-m{aspect-ratio:4/3;border-radius:var(--r-media);border:0;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line)}
.shero-img,.work-s .media{box-shadow:inset 0 0 0 1px var(--line)}
.ind-m img{object-position:center top}
.ind-b{padding:var(--sp-5) 0 var(--sp-2);display:flex;flex-direction:column;flex:1}
.ind-t{font-size:var(--fs-xl);font-weight:300;letter-spacing:-.02em;line-height:1.2}
.ind-tags .chip{border-radius:var(--radius-full)}
.panel .tag{background:var(--surface)}
.how-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6)}
.how{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--sp-6);display:flex;flex-direction:column}
.how-n{font-size:var(--fs-micro);font-weight:700;letter-spacing:.14em;color:var(--faint);
  font-variant-numeric:tabular-nums}
.how-t{font-size:var(--fs-lg);font-weight:500;letter-spacing:-.01em;margin-top:var(--sp-5)}
.pt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:var(--sp-8)}
.pt-i{display:flex;flex-direction:column}
.pt-b{padding-right:var(--sp-7);flex:1;display:flex;flex-direction:column}
.pt-rail{position:relative;height:1px;background:var(--line-strong);margin-bottom:var(--sp-6)}
.pt-i:last-child .pt-rail{background:linear-gradient(to right,var(--line-strong) 22px,transparent 22px)}
.pt-dot{position:absolute;left:0;top:50%;width:13px;height:13px;border-radius:50%;
  background:var(--navy);transform:translateY(-50%);
  box-shadow:0 0 0 4px var(--paper)}
.pt-n{font-size:var(--fs-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint)}
.pt-t{font-size:var(--fs-lg);font-weight:500;letter-spacing:-.01em;margin-top:var(--sp-3)}
.pt-p{font-size:var(--fs-sm);color:var(--muted);line-height:1.6;
  margin:var(--sp-3) 0 var(--sp-5)}
.sol{border-radius:var(--r-card);border:1px solid var(--line);box-shadow:none}
.sol:hover{box-shadow:var(--shadow-2)}
.art{border-radius:var(--r-media)}
.work-s{align-items:stretch;gap:var(--sp-9)}
.work-s>.split-b:first-child{display:flex;flex-direction:column}
.work-s #workfig{flex:1;display:flex;flex-direction:column;min-height:0}
.work-s .fig{flex:1;display:flex;flex-direction:column;min-height:0}
.work-s .media{border-radius:var(--r-panel);border:0;flex:1;aspect-ratio:auto;
  min-height:420px;position:relative}
.work-s .media img{position:absolute;inset:0}
.work-s .cap{flex:none}
.work-s .media img{object-position:center 25%}
.cases{border-top:var(--rule)}
.case{border-bottom:var(--rule)}
.case-q{cursor:pointer;list-style:none;display:flex;gap:0;align-items:baseline;
  padding:var(--sp-5) var(--sp-7) var(--sp-5) 0;position:relative;min-height:44px}
.case-q::-webkit-details-marker{display:none}
.case-q::after{content:"+";position:absolute;right:var(--sp-2);top:var(--sp-5);
  font-size:var(--fs-xl);font-weight:300;color:var(--muted);line-height:1}
.case[open] .case-q::after{content:"–"}
.case-q:hover .case-h{color:var(--navy)}
.case-n{font-size:var(--fs-md);font-weight:300;color:var(--faint);flex:none;width:36px;
  font-variant-numeric:tabular-nums}
.case-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.case-h{font-size:var(--fs-xl);font-weight:300;letter-spacing:-.02em;line-height:1.2;
  transition:color var(--dur-focus) var(--ease)}
.case-m{font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint)}
.case-b{padding:0 var(--sp-7) var(--sp-6) 36px}
.case-scope{font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--sp-5)}
.case-cta{margin-top:var(--sp-5)}
.ask{background:var(--band);color:var(--on-band);border-radius:var(--r-panel);
  padding:clamp(40px,5vw,80px) var(--sp-8);text-align:center;
  display:flex;flex-direction:column;align-items:center}
.ask-t{margin-top:var(--sp-5);font-size:clamp(30px,3.8vw,58px);color:var(--on-band)}
.ask-d{margin-top:var(--sp-5);max-width:56ch;color:var(--on-band-dim)}
.ask-btns{margin-top:var(--sp-7);justify-content:center}
.ask-sup{margin-top:var(--sp-5);color:var(--on-band-dim)}
.ask .btn--primary{background:var(--on-band);color:var(--band);border-color:var(--on-band)}
.ask .btn--primary:hover:not(:disabled){background:#FFFFFF;border-color:#FFFFFF}
.ask .btn--primary .btn-a{background:color-mix(in srgb,#011251 12%,transparent)}
.ask .btn--ghost{background:transparent;color:var(--on-band);
  border-color:color-mix(in srgb,#F4F2ED 42%,transparent)}
.ask .btn--ghost:hover:not(:disabled){background:color-mix(in srgb,#F4F2ED 12%,transparent);
  border-color:var(--on-band)}
.ask .btn--ghost .btn-a{background:color-mix(in srgb,#F4F2ED 18%,transparent)}
.ask-disc .fld-l{color:var(--on-band-dim)}
.ask-disc .inp{background:color-mix(in srgb,#F4F2ED 10%,transparent);color:var(--on-band);
  border-color:color-mix(in srgb,#F4F2ED 28%,transparent)}
.ask-disc .inp::placeholder{color:color-mix(in srgb,#F4F2ED 46%,transparent)}
.ask-disc .lnk{color:var(--on-band)}
.ask-disc .btn--ghost{background:transparent;color:var(--on-band);
  border-color:color-mix(in srgb,#F4F2ED 42%,transparent)}
.faq-s{margin-top:var(--sp-7)}
@media (max-width:1100px){.ind-g{grid-template-columns:repeat(2,minmax(0,1fr))}
.how-g{grid-template-columns:repeat(2,minmax(0,1fr))}
.pt{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-8) 0}
.pt-i:nth-child(2) .pt-rail{background:linear-gradient(to right,var(--line-strong) 22px,transparent 22px)}}
@media (max-width:1000px){.shero{padding-top:var(--sp-7)}
.shero-in{grid-template-columns:minmax(0,1fr);gap:var(--sp-7)}
.shero-media{order:0}
.shero-img{max-height:clamp(300px,46svh,560px)}
.shero-t{font-size:clamp(34px,7.4vw,56px)}
/* The card is pulled onto the bottom of the photograph, so the padding that
   clears its first line off that edge has to be bigger than the pull. At the
   shared --sp-5 the kicker sat a few pixels under the crop and read as
   printed on the picture. */
.shero-card{position:static;left:auto;bottom:auto;width:100%;
    margin-top:calc(var(--sp-6) * -1);padding-top:var(--sp-7);box-shadow:var(--shadow-3)}
.band{padding:var(--sp-8) var(--sp-6)}
.band-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-7) 0}
.work-s{gap:var(--sp-7)}}
@media (max-width:900px){.shd--left{grid-template-columns:minmax(0,1fr);align-items:start}
.shd--left .shd-d{margin:0;max-width:60ch}}
@media (max-width:720px){.shd{margin-bottom:var(--sp-8)}
.ind-g,.how-g{grid-template-columns:minmax(0,1fr)}
.pt{grid-template-columns:minmax(0,1fr);gap:0}
.pt-i{flex-direction:row;gap:var(--sp-6);padding:0 0 var(--sp-7)}
.pt-rail{width:1px;height:auto;align-self:stretch;margin:0;flex:none;
    background:var(--line-strong)}
.pt-i .pt-rail,.pt-i:nth-child(2) .pt-rail,.pt-i:last-child .pt-rail{background:var(--line-strong)}
.pt-i:last-child .pt-rail{background:linear-gradient(to bottom,var(--line-strong) 22px,transparent 22px)}
.pt-dot{left:50%;top:6px;transform:translateX(-50%)}
.news{align-items:flex-start;line-height:1.45}
.band-g{grid-template-columns:minmax(0,1fr)}
.ask{padding:var(--sp-8) var(--sp-5)}
.ask-btns{flex-direction:column;align-items:stretch;width:min(320px,100%)}
.ask-btns .btn{width:100%;justify-content:space-between}}
@media (max-width:520px){.shero .btn-row{flex-direction:column;align-items:stretch}
.shero .btn-row .btn{width:100%;justify-content:space-between}
.news{border-radius:18px;padding:8px 14px 8px 10px}}
@media (prefers-reduced-motion:reduce){.ind:hover{transform:none}
.btn--arrow:hover .btn-a{transform:none}}
.shd-a{margin-top:var(--sp-5)}
.faq-s .faq{max-width:none}
.faq-s .faq-q{font-size:var(--fs-lg);font-weight:300;letter-spacing:-.01em;padding-top:var(--sp-5);padding-bottom:var(--sp-5)}
@media (max-width:720px){.case-b{padding-left:0;padding-right:0}
.case-q{padding-right:var(--sp-6)}}
main[data-page="custom"] .pub-sec,
main[data-page="merch"] .pub-sec,
main[data-page="products"] .pub-sec,
main[data-page="collection"] .pub-sec,
main[data-page="collections"] .pub-sec,
main[data-page="product"] .pub-sec{padding:clamp(48px,7.5vh,80px) 0}
main[data-page="custom"] .shero,
main[data-page="merch"] .shero{padding:clamp(32px,5vh,56px) 0 clamp(40px,6vh,56px)}
.faq-s .faq-more{margin-left:calc(var(--sp-3) * -1)}
.tag--merch i{background:var(--red-quiet);color:var(--red-text)}
.shero--merch .shero-t{font-size:clamp(32px,4.3vw,58px)}
.mph .crumb{margin-bottom:var(--sp-5)}
.empty-p .btn-row{justify-content:center}
.cc .lnk-a{min-height:0}
.chk-c .ticks{margin-top:var(--sp-5)}
.pdp-cfg .tag{cursor:pointer;align-self:flex-start}
.pdp-sum .eyebrow{color:var(--on-band-dim)}
.pdp-sum .sum-note,.pdp-sum .muted,.pdp-sum .sum-eff,.pdp-sum .t-sm{color:var(--on-band-dim)}
.pdp-sum .chip{background:color-mix(in srgb,#F4F2ED 16%,transparent);color:var(--on-band)}
.pdp-sum .btn--quiet{color:var(--on-band-dim)}
.pdp-sum .btn--quiet:hover{background:color-mix(in srgb,#F4F2ED 12%,transparent);color:var(--on-band)}
.pdp-sum .t-xs.muted{color:var(--on-band-dim)}
main[data-page="product"] .pdp-cfg .btn--primary{margin-top:var(--sp-6)!important}
body.is-public.has-bar .switch{bottom:calc(var(--sp-4) + 72px)}
body.has-bar{padding-bottom:96px}
.media picture{display:block;width:100%;height:100%}
.sol-h{display:flex;align-items:baseline;gap:var(--sp-4)}
.sol-n{font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;flex:none;
  color:var(--navy);background:var(--navy-quiet);border-radius:var(--radius-full);
  padding:4px 9px;font-variant-numeric:tabular-nums}
.art{margin-top:var(--sp-6);padding:0;overflow:hidden;gap:0;
  border:1px solid var(--line);border-radius:var(--r-media);background:var(--surface)}
.art-h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  background:var(--band);color:var(--on-band);padding:9px var(--sp-4)}
.art-h-l{font-size:var(--fs-micro);font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.art-h-m{font-size:var(--fs-micro);color:var(--on-band-dim);text-align:right;
  font-variant-numeric:tabular-nums}
.art-b{padding:var(--sp-3) var(--sp-4) var(--sp-4);display:flex;flex-direction:column;gap:0}
.art--weights .art-b{gap:var(--sp-3);padding-top:var(--sp-4)}
.art--brand .art-b{gap:var(--sp-4);padding-top:var(--sp-4)}
.sol .art{margin-top:auto}
.chip--lg{padding:7px 14px;font-size:var(--fs-sm)}
.pick .btn--primary{background:var(--on-band);color:var(--band);border-color:var(--on-band)}
.pick .btn--primary:hover:not(:disabled){background:#FFFFFF;border-color:#FFFFFF}
.pick .btn--primary .btn-a{background:color-mix(in srgb,#011251 12%,transparent)}
.pick-f .lnk{color:var(--on-band)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) main[data-page="custom"]{
    --lift-1:0 1px 2px color-mix(in srgb,#000 30%,transparent);
    --lift-2:0 2px 6px color-mix(in srgb,#000 36%,transparent);
    --lift-3:0 10px 30px color-mix(in srgb,#000 46%,transparent);
    --well:inset 0 1px 3px color-mix(in srgb,#000 28%,transparent);
  }}
:root[data-theme="dark"] main[data-page="custom"]{
  --lift-1:0 1px 2px color-mix(in srgb,#000 30%,transparent);
  --lift-2:0 2px 6px color-mix(in srgb,#000 36%,transparent);
  --lift-3:0 10px 30px color-mix(in srgb,#000 46%,transparent);
  --well:inset 0 1px 3px color-mix(in srgb,#000 28%,transparent);
}
main[data-page="custom"] .ind,
main[data-page="custom"] .how,
main[data-page="custom"] .sol{box-shadow:var(--lift-1)}
main[data-page="custom"] .ind:hover,
main[data-page="custom"] .sol:hover{box-shadow:var(--lift-2)}
main[data-page="custom"] .band,
main[data-page="custom"] .ask{box-shadow:var(--lift-3),var(--edge-light);
  background-image:linear-gradient(180deg,color-mix(in srgb,#F4F2ED 5%,transparent) 0%,
    color-mix(in srgb,#F4F2ED 0%,transparent) 46%)}
main[data-page="custom"] .shero-img,
main[data-page="custom"] .work-s .media{box-shadow:inset 0 0 0 1px var(--line),var(--lift-2)}
main[data-page="custom"] .ind-m{box-shadow:inset 0 0 0 1px var(--line),
  0 1px 3px color-mix(in srgb,#011251 6%,transparent)}
main[data-page="custom"] .shero-card{box-shadow:var(--lift-3)}
main[data-page="custom"] .art{box-shadow:var(--well)}
main[data-page="custom"] .art-h{box-shadow:var(--edge-light),
  0 1px 2px color-mix(in srgb,#011251 14%,transparent)}
main[data-page="custom"] .btn--primary{box-shadow:0 1px 2px color-mix(in srgb,#011251 22%,transparent),
  0 6px 16px color-mix(in srgb,#011251 16%,transparent)}
main[data-page="custom"] .btn--primary:active{box-shadow:0 1px 2px color-mix(in srgb,#011251 22%,transparent)}
main[data-page="custom"] .btn--ghost,
main[data-page="custom"] .tag,
main[data-page="custom"] .news{box-shadow:0 1px 2px color-mix(in srgb,#011251 5%,transparent)}
main[data-page="custom"] .ask .btn--primary{box-shadow:0 2px 6px color-mix(in srgb,#010B2E 34%,transparent)}
main[data-page="custom"] .pt-dot{box-shadow:0 0 0 4px var(--paper),
  0 1px 3px color-mix(in srgb,#011251 30%,transparent)}
@media (prefers-reduced-motion:reduce){main[data-page="custom"] .btn--primary:active{box-shadow:none}}
.bo-g-a .btn{white-space:nowrap}
@media (max-width:900px){.pp-dec .btn{width:100%}
.pp-total .t-xs{text-align:left}}
.bo-ms-tot .num{margin-left:auto}
.bo-ms-tot .t-xs{flex:1 1 100%;margin-top:2px}
@media (max-width:700px){.bo-ms-tot .num{margin-left:0}}
.ask--form{text-align:left;align-items:stretch}
.ask--form .mk--ask{align-self:center}
.ask--form .tag{align-self:center}
.ask--form .ask-t,.ask--form .ask-d{text-align:center;margin-left:auto;margin-right:auto}
.bf{margin-top:clamp(28px,3.4vw,44px);width:min(880px,100%);margin-left:auto;margin-right:auto}
.bf-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5) var(--sp-6)}
.bf-full{grid-column:1 / -1}
.bf .fld-l{color:var(--on-band);font-size:var(--fs-xs);font-weight:500;letter-spacing:.01em}
.bf .fld--req .fld-l::after{content:"*";margin-left:4px;color:var(--on-band-dim)}
.bf .fld-h{color:var(--on-band-dim);font-size:var(--fs-micro)}
.bf .inp{background:rgba(244,242,237,.06);border:1px solid rgba(244,242,237,.28);
  color:var(--on-band);border-radius:var(--radius-md);min-height:46px}
.bf .inp::placeholder{color:rgba(244,242,237,.45)}
.bf .inp:hover{border-color:rgba(244,242,237,.45)}
.bf .inp:focus{border-color:#F4F2ED;background:rgba(244,242,237,.12);outline:none;
  box-shadow:0 0 0 3px rgba(244,242,237,.14)}
.bf .inp--err{border-color:#E5A0A0;background:rgba(229,160,160,.12)}
.bf select.inp{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,rgba(244,242,237,.7) 50%),
                   linear-gradient(135deg,rgba(244,242,237,.7) 50%,transparent 50%);
  background-position:calc(100% - 20px) 52%,calc(100% - 14px) 52%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:var(--sp-8)}
.bf select.inp option{background:var(--band);color:var(--on-band)}
.bf textarea.inp{min-height:118px;padding-top:12px;line-height:1.55}
.bf input[type="datetime-local"]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.6;cursor:pointer}
.bf input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover{opacity:1}
.bf-f{display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap;
  margin-top:var(--sp-7);padding-top:var(--sp-6);
  border-top:1px solid rgba(244,242,237,.18)}
.bf-f .btn{flex:none}
.bf-fi{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 280px}
.bf-fi p{color:var(--on-band-dim);margin:0;line-height:1.55}
.bf-meet{margin-top:var(--sp-4);max-width:64ch;margin-left:auto;margin-right:auto;
  text-align:center;color:var(--on-band-dim)}
.btn--onband{background:var(--on-band);border-color:var(--on-band);color:var(--band)}
.btn--onband:hover:not(:disabled){background:#fff;border-color:#fff}
.btn--onband .btn-a{background:var(--band);color:var(--on-band)}
.lnk--onband{color:var(--on-band);text-decoration-color:rgba(244,242,237,.5)}
.lnk--onband:hover{text-decoration-color:#F4F2ED}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:720px){.bf-g{grid-template-columns:minmax(0,1fr)}
.bf-f{flex-direction:column;align-items:stretch;gap:var(--sp-5)}
.bf-f .btn{width:100%;justify-content:center}
/* the 280px basis is a width while the row is a row; once it stacks it becomes
   a height, and left 215px of empty navy under the last line of the form. */
.bf-fi{flex:0 1 auto}}
.jr-lead{align-items:center;gap:var(--sp-9);margin-top:var(--sp-8);cursor:pointer}
.jr-lead-m{border-radius:var(--r-panel);overflow:hidden;background:var(--surface-2);
  aspect-ratio:3/2;transition:box-shadow var(--dur-morph) var(--ease)}
.jr-lead-m img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block;
  transition:transform 1.2s var(--ease)}
.jr-lead:hover .jr-lead-m img{transform:scale(1.03)}
.jr-lead:hover .jr-lead-m{box-shadow:var(--shadow-2)}
.jr-lead-b{display:flex;flex-direction:column;align-items:flex-start}
.jr-lead-t{margin-top:var(--sp-5);font-size:clamp(28px,3.2vw,46px);text-wrap:balance}
.jr-lead-d{margin-top:var(--sp-5);max-width:54ch}
.jr-lead-f{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);margin-top:var(--sp-6);
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint)}
.jr-lead-a{margin-top:var(--sp-5)}
.jr-lead:hover .lnk-a{color:var(--navy)}
.jr-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-6) var(--sp-6);margin-top:var(--sp-9)}
.jr{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);padding:var(--sp-3);cursor:pointer;
  transition:border-color var(--dur-morph) var(--ease),box-shadow var(--dur-morph) var(--ease)}
.jr:hover{border-color:var(--line-strong);box-shadow:var(--shadow-2)}
.jr:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.jr-m{aspect-ratio:3/2;border-radius:var(--r-media);overflow:hidden;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line)}
.jr-m img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block}
.jr-b{padding:var(--sp-5) var(--sp-2) var(--sp-2);display:flex;flex-direction:column;flex:1}
.jr-k{font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint)}
.jr-t{font-size:var(--fs-lg);font-weight:400;letter-spacing:-.012em;line-height:1.25;
  margin-top:var(--sp-3);text-wrap:pretty}
.jr:hover .jr-t{color:var(--navy)}
.jr-d{font-size:var(--fs-sm);color:var(--muted);line-height:1.6;margin-top:var(--sp-3);flex:1}
.jr-f{display:flex;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;
  margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line);
  font-size:var(--fs-micro);color:var(--faint);font-variant-numeric:tabular-nums}
.jr-note{margin-top:var(--sp-7);font-size:var(--fs-xs);color:var(--faint);max-width:60ch}
.po-hd{margin-top:var(--sp-6);max-width:none}
.po-t{margin-top:var(--sp-5);font-size:clamp(32px,4.2vw,62px);max-width:22ch;text-wrap:balance}
.po-d{margin-top:var(--sp-5);max-width:64ch}
.po-meta{display:flex;flex-wrap:wrap;gap:var(--sp-5) var(--sp-8);margin-top:var(--sp-7);
  padding-top:var(--sp-5);border-top:var(--rule)}
.po-meta span{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-sm)}
.po-meta b{font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint)}
/* The figcaption used to sit inside this clipped, ratio-locked box and was
   painted nowhere at all: 63px entirely outside the figure at 375, on every
   article in every language. What it carries is the AI-provenance disclosure,
   so it was the disclosure that was being silently deleted. The ratio and the
   clipping belong to the IMAGE; the figure just holds the image and its
   caption. */
.po-m{margin-top:var(--sp-8)}
.po-m img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:center 28%;display:block;
  border-radius:var(--r-panel);background:var(--surface-2)}
.po-cap{margin-top:var(--sp-3);color:var(--muted);font-size:var(--fs-xs);line-height:1.6}
.po-key{margin-top:var(--sp-8);background:var(--surface-2);border:1px solid var(--line);
  border-left:3px solid var(--navy);border-radius:0 var(--r-card) var(--r-card) 0;
  padding:var(--sp-7) var(--sp-7) var(--sp-6)}
.po-key-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);
  flex-wrap:wrap;margin-bottom:var(--sp-5)}
.po-key-l{display:flex;flex-direction:column;gap:var(--sp-4);list-style:none;padding:0;margin:0}
.po-key-l li{position:relative;padding-left:var(--sp-6);font-size:var(--fs-md);line-height:1.6;
  color:var(--ink)}
.po-key-l li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;
  background:var(--navy)}
.po-body{display:grid;grid-template-columns:minmax(0,.28fr) minmax(0,.72fr);
  gap:var(--sp-9);margin-top:var(--sp-9);align-items:start}
.po-rail{position:sticky;top:96px}
.po-toc{list-style:none;padding:0;margin:var(--sp-4) 0 0;counter-reset:toc;
  display:flex;flex-direction:column;gap:var(--sp-3)}
.po-toc li{counter-increment:toc;display:flex;gap:var(--sp-3);font-size:var(--fs-sm);line-height:1.45}
.po-toc li::before{content:counter(toc,decimal-leading-zero);color:var(--faint);
  font-variant-numeric:tabular-nums;flex:none}
.po-toc a{cursor:pointer;color:var(--muted);text-decoration:none}
.po-toc a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.po-rail-cta{margin-top:var(--sp-7)}
.po-read{max-width:72ch}
.po-s + .po-s{margin-top:var(--sp-8)}
.po-h{font-size:clamp(22px,2.2vw,30px);font-weight:300;letter-spacing:-.018em;line-height:1.25;
  text-wrap:balance;scroll-margin-top:96px}
.po-read p{font-size:var(--fs-md);line-height:1.72;color:var(--ink);margin-top:var(--sp-4)}
.po-l{margin-top:var(--sp-4);padding-left:0;list-style:none;display:flex;flex-direction:column;
  gap:var(--sp-3)}
.po-l li{position:relative;padding-left:var(--sp-6);font-size:var(--fs-sm);line-height:1.65;
  color:var(--muted)}
.po-l li::before{content:"";position:absolute;left:2px;top:.72em;width:5px;height:5px;
  border-radius:50%;background:var(--line-strong)}
@media (max-width:1000px){.po-body{grid-template-columns:minmax(0,1fr);gap:var(--sp-7)}
.po-rail{position:static;padding-bottom:var(--sp-6);border-bottom:var(--rule)}
.po-rail-cta{display:none}
.jr-g,.jr-g--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.jr-lead{gap:var(--sp-6)}
.jr-lead-m{aspect-ratio:16/9}}
@media (max-width:720px){.jr-g,.jr-g--3{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}
.po-m img{aspect-ratio:4/3}
.po-key{padding:var(--sp-5);border-radius:0 var(--radius-md) var(--radius-md) 0}
.po-meta{gap:var(--sp-4)}}
/* the site calls its container .wrap; the mockup calls it .pub-wrap */
.pub-wrap,.wrap{width:min(100% - var(--gutter) * 2,var(--max));margin-inline:auto}

/* ---------------------------------------------------------------------------
   Fitting the mockup's proportions to this site's copy.

   The mockup was drawn around a five-word headline; the real one runs to ten,
   and the hero card carries a definition list rather than the mockup's fixed
   rows. These are the adjustments that difference needs — nothing else from
   the sheet above is overridden.
   ------------------------------------------------------------------------ */

/* a ten-word headline cannot take the mockup's display size, and a display
   line reads better at two or three lines than at six */
.shero-t{font-size:clamp(34px,4.2vw,60px);max-width:16ch}
.shero-d{max-width:46ch}
@media (max-width:1000px){ .shero-t{max-width:none} }

/* the card's rows are a <dl>: label above, value under, in a tight stack */
.shero-card-l{display:flex;flex-direction:column;gap:var(--sp-4);margin:var(--sp-5) 0 0}
.shero-card-l > div{display:flex;flex-direction:column;gap:3px}
.shero-card-l dt{font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}
.shero-card-l dd{margin:0;font-size:var(--fs-sm);line-height:1.55;color:var(--ink)}

/* Four figures across one band. One of them is "12 months", which is twice
   the width of "20+", so the value scales with the track rather than being
   pinned to one size and running into its neighbour. */
.band-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-6) var(--sp-7)}
.band-v{font-size:clamp(30px,3.2vw,54px);line-height:1.05;text-wrap:balance}
.band-l{text-wrap:pretty}
@media (max-width:900px){ .band-g{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .band-g{grid-template-columns:minmax(0,1fr)} }

/* the timeline rail carries a phase name, not a duration, so the title has to
   be free to wrap: "Votre brief et le premier rendez-vous" is 37 characters and
   pinning it to one line pushed the whole page into a sideways scroll. */
.pt-t{font-size:var(--fs-xl);font-weight:300;letter-spacing:-.02em;text-wrap:pretty}

/* the six industry cards keep the disclosure the site already ships */
.ind-b .sec-acc,.how .sec-acc{margin-top:var(--sp-4)}
.ind-d{margin-bottom:0}

/* the studio page's own container rhythm, on this site's section class */
.pub-sec{padding:clamp(48px,7.5vh,80px) 0}
.pub-sec.surface-2{background:var(--surface-2)}

/* Red is the Merchandise line of business. This is the Studio site, so the
   accent the old sheet spent on links and rules becomes navy. */

/* the timeline sits under the three phases it measures */
.pt-h{margin-top:var(--sp-8)}
.pt-note{margin-top:var(--sp-5);max-width:72ch}

/* the "show all questions" disclosure keeps the list flush with the rest */
.faq .acc__more{border-bottom:1px solid var(--line)}
.faq .acc__more > summary{cursor:pointer;list-style:none;padding:var(--sp-5) var(--sp-7) var(--sp-5) 0;
  font-size:var(--fs-sm);color:var(--muted)}
.faq .acc__more > summary::-webkit-details-marker{display:none}
.faq .acc__more > summary:hover{color:var(--navy)}
.faq .acc__more[open] .is-more,.faq .acc__more:not([open]) .is-less{display:none}


/* --- the artefacts, the stage cards and the phase rail ------------------ */
.pill-s{font-size:var(--fs-micro);font-weight:500;padding:3px 9px;border-radius:var(--radius-full);
  white-space:nowrap;flex:none}
.pill-s--go{background:var(--go-quiet);color:var(--go)}
.pill-s--wait{background:var(--wait-quiet);color:var(--wait)}
.pill-s--flow{background:var(--flow-quiet);color:var(--flow)}
.art{margin-top:var(--sp-5);border:1px solid var(--line);background:var(--surface-2);
  padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2)}
.art-r{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  font-size:var(--fs-xs);padding:5px 0}
.art-r+.art-r{border-top:1px solid var(--line)}
.art-m{color:var(--muted)}
.art-label span{font-weight:400;letter-spacing:0;color:var(--muted);text-transform:none}
.sol-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6)}
.sol{border:var(--card-border);background:var(--surface);box-shadow:var(--card-shadow);
  padding:var(--sp-6);display:flex;flex-direction:column}
.sol-ht{font-size:var(--fs-xl);font-weight:300;letter-spacing:-.02em;line-height:1.2}
.sol-p{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-3);line-height:1.6;flex:1}
@media (max-width:1100px){.sol-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.sol-g{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--surface-2);border-radius:var(--r-panel);
  padding:var(--sp-10) var(--sp-8)}
.panel .tag{background:var(--surface)}
.how-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6)}
.how{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--sp-6);display:flex;flex-direction:column}
.how-h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.how-i{width:44px;height:44px;border-radius:14px;background:var(--navy);color:var(--paper);
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.how-i svg{width:22px;height:22px}
.how-n{font-size:var(--fs-micro);font-weight:700;letter-spacing:.14em;color:var(--faint);
  font-variant-numeric:tabular-nums}
.how-t{font-size:var(--fs-lg);font-weight:500;letter-spacing:-.01em;margin-top:var(--sp-5)}
.how-p{font-size:var(--fs-sm);color:var(--muted);line-height:1.6;margin-top:var(--sp-3)}
.how-cta{justify-content:center;margin-top:var(--sp-8)}
.pt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:var(--sp-8)}
.pt-i{display:flex;flex-direction:column}
.pt-b{padding-right:var(--sp-7);flex:1;display:flex;flex-direction:column}
.pt-rail{position:relative;height:1px;background:var(--line-strong);margin-bottom:var(--sp-6)}
.pt-i:last-child .pt-rail{background:linear-gradient(to right,var(--line-strong) 22px,transparent 22px)}
.pt-dot{position:absolute;left:0;top:50%;width:13px;height:13px;border-radius:50%;
  background:var(--navy);transform:translateY(-50%);
  box-shadow:0 0 0 4px var(--paper)}
.pt-n{font-size:var(--fs-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint)}
.pt-t{font-size:var(--fs-lg);font-weight:500;letter-spacing:-.01em;margin-top:var(--sp-3)}
.pt-p{font-size:var(--fs-sm);color:var(--muted);line-height:1.6;
  margin:var(--sp-3) 0 var(--sp-5)}
.pt-m{font-size:var(--fs-micro);color:var(--navy);margin-top:auto;
  padding-top:var(--sp-3);border-top:1px solid var(--line);display:block}
.sol{border-radius:var(--r-card);border:1px solid var(--line);box-shadow:none}
.sol:hover{box-shadow:var(--shadow-2)}
.art{border-radius:var(--r-media)}
@media (max-width:1100px){.how-g{grid-template-columns:repeat(2,minmax(0,1fr))}
.pt{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-8) 0}
.pt-i:nth-child(2) .pt-rail{background:linear-gradient(to right,var(--line-strong) 22px,transparent 22px)}}
@media (max-width:1000px){.panel{padding:var(--sp-9) var(--sp-6)}}
@media (max-width:720px){.ind-g,.how-g{grid-template-columns:minmax(0,1fr)}
/* minmax(0,1fr), not 1fr: a bare 1fr track is floored at min-content, so one
   long word in the phase body widened the column past the screen. */
.pt{grid-template-columns:minmax(0,1fr);gap:0}
.pt-i{flex-direction:row;gap:var(--sp-6);padding:0 0 var(--sp-7);min-width:0}
/* the right-hand padding is there to hold the next column off; stacked, there
   is no next column and it only pushes the text out of the gutter. */
.pt-b{padding-right:0;min-width:0}
.pt-rail{width:1px;height:auto;align-self:stretch;margin:0;flex:none;
    background:var(--line-strong)}
.pt-i .pt-rail,.pt-i:nth-child(2) .pt-rail,.pt-i:last-child .pt-rail{background:var(--line-strong)}
.pt-i:last-child .pt-rail{background:linear-gradient(to bottom,var(--line-strong) 22px,transparent 22px)}
.pt-dot{left:50%;top:6px;transform:translateX(-50%)}}
.sol-h{display:flex;align-items:baseline;gap:var(--sp-4)}
.sol-n{font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;flex:none;
  color:var(--navy);background:var(--navy-quiet);border-radius:var(--radius-full);
  padding:4px 9px;font-variant-numeric:tabular-nums}
.sol-ht{flex:1;min-width:0}
.sol-p{margin-top:var(--sp-4)}
.art{margin-top:var(--sp-6);padding:0;overflow:hidden;gap:0;
  border:1px solid var(--line);border-radius:var(--r-media);background:var(--surface)}
.art-h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  background:var(--band);color:var(--on-band);padding:9px var(--sp-4)}
.art-h-l{font-size:var(--fs-micro);font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.art-h-m{font-size:var(--fs-micro);color:var(--on-band-dim);text-align:right;
  font-variant-numeric:tabular-nums}
.art-b{padding:var(--sp-3) var(--sp-4) var(--sp-4);display:flex;flex-direction:column;gap:0}
.art-r{padding:9px 0}
.art-r+.art-r{border-top:1px solid var(--line)}
.art--weights .art-b{gap:var(--sp-3);padding-top:var(--sp-4)}
.art-w{display:grid;grid-template-columns:5.5em 1fr 4.6em;align-items:center;gap:var(--sp-3)}
.art-w-n{font-size:var(--fs-xs);font-weight:500}
.art-w-bar{height:6px;border-radius:var(--radius-full);background:var(--navy-quiet);display:block}
.art-w-bar i{display:block;height:100%;border-radius:var(--radius-full);background:var(--navy)}
.art-w-v{font-size:var(--fs-micro);color:var(--muted);text-align:right;
  font-variant-numeric:tabular-nums}
.art--brand .art-b{gap:var(--sp-4);padding-top:var(--sp-4)}
.art-label{border:1px dashed var(--line-strong);border-radius:var(--radius-sm);
  background:var(--surface-2);padding:var(--sp-3) var(--sp-4);align-self:flex-start;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.12em;display:flex;
  flex-direction:column;gap:4px}
.art-sw{display:flex;gap:8px;margin-top:0}
.art-sw span{width:30px;height:30px;border-radius:var(--radius-sm);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#011251 22%,transparent)}
.art-check{font-size:var(--fs-micro);color:var(--go);margin-top:var(--sp-3);
  padding-top:var(--sp-3);border-top:1px solid var(--line)}
@media (max-width:720px){.art-w{grid-template-columns:5em minmax(0,1fr) 4.4em}}
/* Below this the label and its meta each wrap to two lines and meet in the
   middle of the strip. Letting the row break puts the meta on its own line. */
@media (max-width:480px){
  .art-h{flex-wrap:wrap;gap:2px var(--sp-4);align-items:baseline}
  .art-h-m{text-align:left;flex-basis:100%}
}
.sol-p{flex:0 0 auto;margin-bottom:var(--sp-6)}
.sol .art{margin-top:auto}
main[data-page="custom"] .ind,
main[data-page="custom"] .how,
main[data-page="custom"] .sol{box-shadow:var(--lift-1)}
main[data-page="custom"] .ind:hover,
main[data-page="custom"] .sol:hover{box-shadow:var(--lift-2)}
main[data-page="custom"] .panel{box-shadow:var(--well)}
main[data-page="custom"] .art{box-shadow:var(--well)}
main[data-page="custom"] .art-h{box-shadow:var(--edge-light),
  0 1px 2px color-mix(in srgb,#011251 14%,transparent)}
main[data-page="custom"] .how-i{box-shadow:0 2px 6px color-mix(in srgb,#011251 26%,transparent),
  inset 0 1px 0 color-mix(in srgb,#FFFFFF 20%,transparent)}
main[data-page="custom"] .pt-dot{box-shadow:0 0 0 4px var(--paper),
  0 1px 3px color-mix(in srgb,#011251 30%,transparent)}
main[data-page="custom"] .art-sw span{box-shadow:inset 0 0 0 1px color-mix(in srgb,#011251 22%,transparent),
  0 1px 2px color-mix(in srgb,#011251 18%,transparent)}

/* ---------------------------------------------------------------------------
   Corrections after the first look at the live page.
   ------------------------------------------------------------------------ */

/* A chapter head bottom-aligns its two columns, which is right when the
   sentence beside the line runs to two lines. Across five languages it runs
   to four, and all the slack piled up above the headline. Align to the top
   and let the sentence hang instead, with its first line on the headline's. */
.shd--left{align-items:start}
.shd--left .shd-d{margin-top:.55em}
@media (max-width:900px){ .shd--left .shd-d{margin-top:0} }

/* the consent line sits on navy, so its links have to be read on navy */
.bf .consent{display:flex;gap:var(--sp-3);align-items:flex-start;margin-top:var(--sp-5);
  font-size:var(--fs-xs);color:var(--on-band-dim);line-height:1.55}
.bf .consent a{color:var(--on-band);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(244,242,237,.5)}
.bf .consent a:hover{text-decoration-color:#F4F2ED}
/* 24px is the smallest target WCAG 2.2 accepts, and the consent box is the
   one control on the page a person must hit to send the form. */
.bf .consent input[type="checkbox"]{flex:none;width:24px;height:24px;margin-top:0;
  accent-color:#F4F2ED;cursor:pointer}
.bf .form-status{color:var(--on-band);margin-top:var(--sp-4)}

/* "Show all questions" was inheriting a pill from the old sheet and came out
   as an ellipse. It is a quiet control on a rule, like the mockup's. */
.faq .acc__more > summary{display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);border-radius:var(--radius-full);
  padding:0 var(--sp-5);min-height:38px;margin:var(--sp-5) 0;
  font-size:var(--fs-xs);color:var(--muted);background:var(--surface);width:auto}
.faq .acc__more > summary:hover{border-color:var(--line-strong);color:var(--navy)}

/* ---------------------------------------------------------------------------
   MEASURE: a title and the sentence under it take the full width of the
   column they sit in.

   Both sheets capped them a second time inside that column — 22ch on an
   article headline, 52ch on a chapter lede — which produced a short line of
   type beside a wide empty space. The layout already decides the measure:
   the grid column, or the wrap. A cap inside it only breaks the symmetry.

   Body prose inside a disclosure keeps its own measure, because that is the
   one place where a long line genuinely costs the reader.
   ------------------------------------------------------------------------ */
.h1,.h2,.h3,.lead,
.shd-t,.shd-d,
.shero-t,.shero-d,
.ask-t,.ask-d,.bf-meet,
.jr-lead-t,.jr-lead-d,.jr-t,.jr-d,
.po-t,.po-d,.po-read,.po-key-l li,
.page-head,
.section__head p:not(.lead):not(.eyebrow),
.section__head:not(:has(.lead)) .h2{max-width:none}

/* a centred head keeps its centring; it simply no longer stops short */
.shd:not(.shd--left) .shd-d{margin-left:auto;margin-right:auto}

/* the two that carry a compound selector, and so outrank the rule above */
.shd--left .shd-d,
.shd--left .shd-t{max-width:none}

/* a lede inside a split column is capped by a two-class selector, which
   outranks the rule above; the column is already its measure */
.split-b .lede,.split-b .page-desc,.split-b .sec-desc,.shead > p{max-width:none}

/* ---------------------------------------------------------------------------
   VERTICAL RHYTHM

   The mockup spaces several stacks with flex `gap` rather than margins. Those
   containers came across but their gap did not, and this site's reset zeroes
   every child margin — so the stacks collapsed onto each other: the hero
   lede sat directly on the buttons, the industry title on its description,
   an article paragraph on the heading after it.

   Measured, not guessed: the audit compared the ink edge of each block with
   the one below it across the homepage, the journal, an article and the
   legal hub, and these were everything that came back under 12px.
   ------------------------------------------------------------------------ */

/* hero: the sentence, then the actions, then the note under them */
.shero-btns{margin-top:var(--sp-7)}
.shero-sup{margin-top:var(--sp-5)}

/* industry card: index, title, description */
.ind-b{gap:0}
.ind-n{margin-bottom:var(--sp-3)}
.ind-t{margin-bottom:var(--sp-3)}
.ind-d{margin-bottom:var(--sp-4)}

/* the work accordion's title and the line under it */
.case-t{gap:6px}

/* an article's body: a heading needs air above it, more than below */
.po-read h2{margin-top:var(--sp-8)}
.po-read h3{margin-top:var(--sp-6)}
.po-read h2:first-child,.po-read h3:first-child{margin-top:0}
.po-read p + p{margin-top:var(--sp-4)}
.po-read ul,.po-read ol{margin-top:var(--sp-4)}

/* the two notes beside the submit button */
.bf-fi{gap:var(--sp-2)}

/* legal hub: a subheading and the text under it */
.legal h3 + p,.legal h3 + ul,.detail h3 + p,.detail h3 + ul{margin-top:var(--sp-3)}

/* ---------------------------------------------------------------------------
   THE FIGURES BAND, as the mockup draws it

   Four measured figures, each in its own ruled cell: the number carries the
   unit it is measured in at a third the size, then the label, then the one
   sentence that says what the number counts. The hairlines are what make the
   four read as one instrument rather than four loose numbers.
   ------------------------------------------------------------------------ */
.band-c{padding:0 var(--sp-6)}
.band-c + .band-c{border-left:1px solid color-mix(in srgb,#F4F2ED 22%,transparent)}
.band-c:first-child{padding-left:0}
.band-v{margin:0}
/* .3em of a figure that shrinks to 30px on a phone is 9px. The floor keeps the
   unit legible once the number stops scaling. */
.band-u{font-size:max(11px,.3em);font-weight:400;letter-spacing:0;margin-left:.45em;
  color:var(--on-band-dim);white-space:nowrap}
.band-l{margin-top:var(--sp-4)}
.band-n{font-size:var(--fs-xs);line-height:1.6;color:var(--on-band-dim);
  margin:var(--sp-3) 0 0}

@media (max-width:900px){
  .band-c{padding:0 var(--sp-5)}
  .band-c:nth-child(odd){padding-left:0}
  .band-c:nth-child(odd){border-left:0}
}
@media (max-width:520px){
  .band-c,.band-c + .band-c{padding:0;border-left:0}
  .band-c + .band-c{padding-top:var(--sp-6);
    border-top:1px solid color-mix(in srgb,#F4F2ED 22%,transparent)}
}

/* ---------------------------------------------------------------------------
   THE CONSENT NOTICE

   It was a plain white box in a corner, in a different language from the rest
   of the site. It now uses the same panel: the page radius, a hairline, the
   navy action and a quiet decline of equal weight — a real choice, not a
   nudge — with a route to the cookie policy for anyone who wants the detail.
   ------------------------------------------------------------------------ */
.consent-bar{position:fixed;inset:auto var(--sp-6) var(--sp-6) auto;z-index:92;
  width:min(24rem,calc(100vw - var(--sp-6) * 2));
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--sp-6);font-size:var(--fs-sm);
  box-shadow:0 1px 2px color-mix(in srgb,#011251 6%,transparent),
             0 24px 48px -24px color-mix(in srgb,#011251 38%,transparent)}
.consent-bar__t{margin:0;color:var(--muted);line-height:1.6}
.consent-bar__l{margin:var(--sp-3) 0 0;font-size:var(--fs-xs)}
.consent-bar__l a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line-strong)}
.consent-bar__l a:hover{color:var(--navy);text-decoration-color:var(--navy)}
.consent-bar__a{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-5)}
.consent-bar__a .btn{flex:1 1 auto;justify-content:center}
@media (max-width:520px){
  .consent-bar{inset:auto var(--sp-4) var(--sp-4) var(--sp-4);width:auto}
  .consent-bar__a .btn{flex:1 1 100%}
}

/* The header's own mobile rule hides the CTA below 560px, but the mockup's
   .btn block is declared after it and carries the same specificity, so it
   won the cascade and the button reappeared on phones — wide enough to push
   the header past the viewport and put the whole page into a sideways
   scroll. Restated here, after that block, where it holds. */
@media (max-width:560px){.hdr__cta{display:none}}

/* Spanish, French, Italian and German set longer words than English, so in a
   narrow column a single compound can push a whole line down and leave the
   text block a line taller than the same block in English. Hyphenating the
   running text lets the word break instead — the way these languages are set
   in print. Headlines are left unhyphenated; a broken display line reads as a
   mistake. */
:is(:lang(es),:lang(fr),:lang(it),:lang(de)) :is(p,li,dd,dt,figcaption,blockquote,.t-sm,.t-xs){
  hyphens:auto;
  -webkit-hyphens:auto;
}
/* Headlines and the leads under them stay unbroken: at that size a hyphen
   reads as a mistake rather than as typesetting. The :lang() prefix is not
   decoration — without it this sits below the rule above on specificity and
   a lead set as <p class="lede"> hyphenates anyway. */
:is(:lang(es),:lang(fr),:lang(it),:lang(de)) :is(.display,.h1,.h2,.h3,h1,h2,h3,h4,
    .shero-t,.shd-t,.case-h,.sol-ht,.ind-t,.ask-t,.band-v,.band-l,.lede,.lead,
    .shero-d,.shd-d,.po-d,.page-desc,.jr-lead-d,summary){
  hyphens:manual;
  -webkit-hyphens:manual;
}