/* ==========================================================================
   DDL Partners — site.css
   Design tokens: ink / paper / magenta. Newsreader + IBM Plex Sans + Plex Mono.
   ========================================================================== */

/* ---------- self-hosted webfonts (no third-party requests) ---------------- */
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Bodoni Moda";src:url("../fonts/bodoni-moda-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Bodoni Moda";src:url("../fonts/bodoni-moda-latin-500-italic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap;}
@font-face{font-family:"Bodoni Moda";src:url("../fonts/bodoni-moda-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}

:root{
  /* colour */
  --ink:        #0B0B0D;
  --ink-soft:   #15151A;
  --ink-raise:  #1D1D23;
  --ink-line:   rgba(255,255,255,.14);
  --ink-text:   #E9E5E7;
  --ink-muted:  #9A949A;

  --paper:      #FBF9F9;
  --paper-2:    #F2EDEF;
  --paper-line: rgba(11,11,13,.13);
  --text:       #101014;
  --muted:      #5C565E;

  --magenta:      #DF39BC;   /* brand */
  --magenta-deep: #8E1C77;   /* accessible on paper */
  --magenta-dim:  rgba(223,57,188,.16);

  /* type */
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --brand:   "Bodoni Moda", Didot, "Times New Roman", serif;

  /* metrics */
  --gutter: clamp(20px, 5vw, 72px);
  --maxw:   1280px;
  --readw:  68ch;
  --rule:   1px;
}

*,*::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:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
figure{ margin:0; }
a{ color:inherit; }

::selection{ background:var(--magenta); color:#fff; }

:focus-visible{
  outline:2px solid var(--magenta);
  outline-offset:3px;
}

/* ---------- shared blocks ------------------------------------------------ */

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

.band{ padding-block:clamp(64px,9vw,132px); position:relative; }
.band--tight{ padding-block:clamp(48px,6vw,84px); }
.band--ink{ background:var(--ink); color:var(--ink-text); }
.band--paper2{ background:var(--paper-2); }

/* the plumb line: a hairline that runs the full height of ink sections */
.band--ink::before{
  content:"";
  position:absolute; top:0; bottom:0;
  left:var(--gutter);
  width:var(--rule);
  background:linear-gradient(180deg, transparent, var(--ink-line) 12%, var(--ink-line) 88%, transparent);
  pointer-events:none;
}
@media (max-width:720px){ .band--ink::before{ display:none; } }

.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--magenta-deep);
  margin:0 0 22px;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--magenta); flex:none;
}
.band--ink .eyebrow{ color:var(--magenta); }

.h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.5rem,5.3vw,4.7rem);
  line-height:1.06;
  letter-spacing:-.022em;
  margin:0;
}
.h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2rem,3.9vw,3.35rem);
  line-height:1.09;
  letter-spacing:-.018em;
  margin:0 0 24px;
}
.h3{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.35rem,2.1vw,1.72rem);
  line-height:1.22;
  letter-spacing:-.012em;
  margin:0 0 12px;
}
.h4{
  font-family:var(--sans);
  font-weight:600;
  font-size:1.02rem;
  letter-spacing:-.005em;
  margin:0 0 8px;
}
.lede{
  font-size:clamp(1.1rem,1.5vw,1.32rem);
  line-height:1.55;
  color:var(--muted);
  max-width:60ch;
  margin:0 0 32px;
}
.band--ink .lede{ color:var(--ink-muted); }
.prose{ max-width:var(--readw); }
.prose p{ margin:0 0 1.15em; }
.prose p:last-child{ margin-bottom:0; }
.em{ color:var(--text); font-weight:500; }
.band--ink .em{ color:#fff; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:.95rem; font-weight:500;
  letter-spacing:.005em;
  padding:15px 26px;
  border:1px solid transparent;
  border-radius:2px;
  text-decoration:none;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn--primary{ background:var(--magenta); color:#fff; }
.btn--primary:hover{ background:#c22ea2; }
.btn--ghost{ border-color:var(--paper-line); color:var(--text); background:transparent; }
.btn--ghost:hover{ border-color:var(--text); }
.band--ink .btn--ghost, .hero .btn--ghost, .phero .btn--ghost{
  border-color:rgba(255,255,255,.32); color:#fff; }
.band--ink .btn--ghost:hover, .hero .btn--ghost:hover, .phero .btn--ghost:hover{
  border-color:#fff; background:rgba(255,255,255,.06); }
.btn__arrow{ transition:transform .18s ease; }
.btn:hover .btn__arrow{ transform:translateX(3px); }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }

/* inline text link with magenta rule */
.tlink{
  text-decoration:none;
  border-bottom:1px solid var(--magenta);
  padding-bottom:1px;
  transition:color .18s ease;
}
.tlink:hover{ color:var(--magenta-deep); }
.band--ink .tlink:hover{ color:var(--magenta); }

/* ---------- header ------------------------------------------------------- */

.site-head{
  background:var(--ink);
  color:var(--ink-text);
  position:relative;
  z-index:50;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.head-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  min-height:76px;
}
.mark{
  display:inline-flex; align-items:center; gap:12px;
  text-decoration:none; color:#fff;
}
.mark__hex{ height:40px; width:auto; flex:none; }
.mark__word{
  font-family:var(--brand); font-weight:500;
  font-size:1.42rem; line-height:1; letter-spacing:-.015em;
  white-space:nowrap;
}
.mark__word i{ font-style:italic; }
.mark__tag{
  font-family:var(--brand); font-weight:500;
  font-size:.58rem; letter-spacing:.30em; text-transform:uppercase;
  color:var(--ink-muted); margin-top:5px; white-space:nowrap;
}
.mark__tag em{ font-style:normal; color:var(--magenta); }
.mark--stack{ align-items:flex-start; }
.mark--stack .mark__hex{ height:52px; }
.mark--stack .mark__word{ font-size:1.7rem; }

.nav{ display:flex; align-items:center; gap:30px; }
.nav a{
  font-size:.92rem; text-decoration:none; color:var(--ink-text);
  position:relative; padding-block:4px;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--magenta); transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease;
}
.nav a:hover::after, .nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav .btn{ padding:11px 20px; }

.navtoggle{
  display:none; background:none; border:1px solid var(--ink-line);
  color:var(--ink-text); border-radius:2px; padding:9px 14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer;
}
@media (max-width:900px){
  .navtoggle{ display:block; }
  .nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--ink-soft); border-bottom:1px solid var(--ink-line);
    flex-direction:column; align-items:stretch; gap:0;
    padding:8px var(--gutter) 24px;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding-block:14px; border-bottom:1px solid rgba(255,255,255,.07); }
  .nav .btn{ margin-top:18px; justify-content:center; }
}

/* ---------- hero --------------------------------------------------------- */

.hero{ background:var(--ink); color:var(--ink-text); position:relative; overflow:hidden; }
.hero::before{
  content:""; position:absolute; top:0; bottom:0; left:var(--gutter);
  width:var(--rule); background:var(--ink-line);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.28fr .92fr;
  gap:clamp(28px,5vw,72px);
  align-items:end;
  padding-block:clamp(56px,7.5vw,104px) 0;
}
.hero-copy{ padding-bottom:clamp(48px,6vw,96px); }
.hero .h1{ color:#fff; }
.hero .h1 .accent{ color:var(--magenta); }
.hero-sub{
  font-size:clamp(1.06rem,1.4vw,1.24rem);
  line-height:1.55; color:var(--ink-muted);
  max-width:46ch; margin:28px 0 36px;
}
.hero-figure{ position:relative; align-self:end; }
.hero-figure img{
  width:100%; height:auto;
  filter:saturate(.92) contrast(1.02);
}
.hero-figure::after{
  content:""; position:absolute; inset:auto 0 0 0; height:22%;
  background:linear-gradient(180deg,transparent,var(--ink));
  pointer-events:none;
}
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; padding-block:clamp(44px,8vw,72px) 0; }
  .hero-copy{ padding-bottom:36px; }
  .hero-figure{ max-width:420px; }
}

/* credential strip */
.credbar{ border-top:1px solid var(--ink-line); background:var(--ink); }
.credbar-in{
  display:flex; flex-wrap:wrap; gap:10px 34px;
  padding-block:20px;
  font-family:var(--mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-muted);
}
.credbar-in span{ display:inline-flex; align-items:center; gap:10px; }
.credbar-in span::before{
  content:""; width:4px; height:4px; background:var(--magenta); border-radius:50%; flex:none;
}

/* ---------- generic layout helpers -------------------------------------- */

.split{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(28px,5vw,80px); align-items:start;
}
.split--even{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,80px); align-items:center;
}
@media (max-width:860px){ .split, .split--even{ grid-template-columns:1fr; } }

.sticky-h{ position:sticky; top:32px; }
@media (max-width:860px){ .sticky-h{ position:static; } }

.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--paper-line); border-block:1px solid var(--paper-line); }
.grid3 > *{ background:var(--paper); padding:clamp(26px,3vw,40px) clamp(22px,2.4vw,34px); }
.band--paper2 .grid3 > *{ background:var(--paper-2); }
@media (max-width:860px){ .grid3{ grid-template-columns:1fr; } }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--paper-line); border-block:1px solid var(--paper-line); }
.grid2 > *{ background:var(--paper); padding:clamp(26px,3vw,40px) clamp(22px,2.4vw,34px); }
@media (max-width:760px){ .grid2{ grid-template-columns:1fr; } }

.tile__label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--magenta-deep); margin:0 0 16px;
}
.tile p{ margin:0; color:var(--muted); font-size:.97rem; }

/* ---------- the three levels -------------------------------------------- */

.levels{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,34px); margin-top:8px; }
.level{
  border-top:2px solid var(--text);
  padding-top:20px;
}
.level:nth-child(2){ border-top-color:var(--magenta); }
.level:nth-child(3){ border-top-color:var(--magenta-deep); }
.level__scope{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted); margin:0 0 10px;
}
.level h3{ font-family:var(--display); font-size:clamp(1.28rem,1.7vw,1.5rem); font-weight:500; margin:0 0 12px; letter-spacing:-.01em; line-height:1.2; }
.level p{ margin:0; font-size:.96rem; color:var(--muted); }
@media (max-width:760px){ .levels{ grid-template-columns:1fr; } }

/* ---------- SIGNATURE: the capacity column ------------------------------- */

.column{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(28px,5vw,72px);
  align-items:start;
}
@media (max-width:900px){ .column{ grid-template-columns:1fr; } }

.strata{ position:relative; padding-left:34px; }
.strata::before{           /* the plumb line */
  content:""; position:absolute; left:9px; top:14px; bottom:14px; width:1px;
  background:var(--ink-line);
}
.strata::after{            /* the magenta load indicator */
  content:""; position:absolute; left:8px; top:14px; width:3px;
  height:var(--load,25%);
  background:var(--magenta);
  transition:height .45s cubic-bezier(.2,.7,.2,1), top .45s cubic-bezier(.2,.7,.2,1);
  top:var(--loadtop,14px);
}
.stratum{
  width:100%; text-align:left; cursor:pointer;
  background:transparent; color:inherit;
  border:0; border-top:1px solid var(--ink-line);
  padding:22px 0 22px 0;
  font-family:inherit;
  display:block; position:relative;
  transition:padding-left .3s ease;
}
.stratum:last-child{ border-bottom:1px solid var(--ink-line); }
.stratum__top{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.stratum__name{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.3rem,2.2vw,1.75rem); letter-spacing:-.012em;
  color:var(--ink-muted);
  transition:color .25s ease;
}
.stratum__scope{
  font-family:var(--mono); font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color:#6E686E; flex:none;
}
.stratum__body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .38s cubic-bezier(.2,.7,.2,1);
}
.stratum__body > *{ overflow:hidden; min-height:0; }
.stratum__body p{
  margin:14px 0 0; font-size:.99rem; line-height:1.6;
  color:var(--ink-muted); max-width:52ch;
}
.stratum[aria-expanded="true"] .stratum__name{ color:#fff; }
.stratum[aria-expanded="true"] .stratum__scope{ color:var(--magenta); }
.stratum[aria-expanded="true"] .stratum__body{ grid-template-rows:1fr; }
.stratum:hover .stratum__name{ color:#fff; }

.column__aside{
  border:1px solid var(--ink-line);
  padding:clamp(26px,3vw,40px);
  background:var(--ink-soft);
}
.column__aside .h3{ color:#fff; }
.column__aside p{ color:var(--ink-muted); font-size:.98rem; margin:0 0 1em; }
.column__aside p:last-child{ margin-bottom:0; }
.tm{ font-size:.30em; vertical-align:.95em; letter-spacing:.04em; }

/* ---------- outcomes list ------------------------------------------------ */

.outcomes{ list-style:none; margin:0; padding:0; border-top:1px solid var(--paper-line); }
.outcomes li{
  display:grid; grid-template-columns:11em 1fr;
  gap:0 clamp(16px,3vw,40px); align-items:baseline;
  padding:22px 0; border-bottom:1px solid var(--paper-line);
}
@media (max-width:640px){
  .outcomes li{ grid-template-columns:1fr; gap:6px; }
}
.outcomes .n{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--magenta-deep); padding-top:9px;
}
.outcomes .t{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.25rem,2.3vw,1.85rem); line-height:1.2; letter-spacing:-.014em;
}
.band--ink .outcomes{ border-top-color:var(--ink-line); }
.band--ink .outcomes li{ border-bottom-color:var(--ink-line); }
.band--ink .outcomes .n{ color:var(--magenta); }

/* ---------- full-bleed image band ---------------------------------------- */

.bleed{ position:relative; min-height:clamp(380px,52vw,620px); display:flex; align-items:flex-end; }
.bleed__img{ position:absolute; inset:0; }
.bleed__img img{ width:100%; height:100%; object-fit:cover; }
.bleed__scrim{
  position:absolute; inset:0;
  /* Shiyen stands on the left of both room shots, so the scrim weights right */
  background:
    linear-gradient(270deg, rgba(11,11,13,.95) 0%, rgba(11,11,13,.88) 30%,
                    rgba(11,11,13,.55) 58%, rgba(11,11,13,.12) 82%, rgba(11,11,13,0) 100%),
    linear-gradient(180deg, rgba(11,11,13,.18), rgba(11,11,13,.30));
}
.bleed__in{
  position:relative; padding-block:clamp(48px,7vw,88px); width:100%;
  display:flex; justify-content:flex-end;
}
.bleed__col{ width:min(100%, 46ch); }
.bleed blockquote{
  margin:0; max-width:24ch;
  font-family:var(--display); font-weight:400; color:#fff;
  font-size:clamp(1.7rem,3.5vw,3rem); line-height:1.13; letter-spacing:-.018em;
}
.bleed figcaption{
  margin-top:22px; font-family:var(--mono); font-size:11px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-muted);
}

/* ---------- media / gallery ---------------------------------------------- */

.gal{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.4vw,18px); }
.gal img{ width:100%; height:100%; object-fit:cover; aspect-ratio:3/2; }
.gal .tall{ grid-row:span 2; }
.gal .tall img{ aspect-ratio:3/4; }
@media (max-width:760px){ .gal{ grid-template-columns:1fr 1fr; } }
@media (max-width:820px){
  .bleed__scrim{
    background:linear-gradient(180deg, rgba(11,11,13,.28) 0%, rgba(11,11,13,.55) 45%, rgba(11,11,13,.92) 100%);
  }
  .bleed{ align-items:flex-end; }
  .bleed__in{ justify-content:flex-start; }
  /* narrow viewports crop to the centre, which loses her entirely */
  .bleed{ min-height:clamp(440px,105vw,600px); }
  .bleed__img img{ object-position:7% 50% !important; }
}

.videos{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,28px); }
@media (max-width:760px){ .videos{ grid-template-columns:1fr; } }
.vcard{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--ink-line); background:var(--ink-soft);
  overflow:hidden; transition:border-color .2s ease;
}
.vcard:hover{ border-color:var(--magenta); }
.vcard__img{ position:relative; display:block; }
.vcard__img img{ width:100%; aspect-ratio:16/9; object-fit:cover; filter:grayscale(60%); transition:filter .3s ease; }
.vcard:hover .vcard__img img{ filter:grayscale(0%); }
.vcard__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:62px; height:62px; border-radius:50%;
  background:var(--magenta); display:grid; place-items:center;
}
.vcard__play svg{ margin-left:3px; display:block; }
.vcard__meta{ display:block; padding:20px 22px; }
.vcard__meta .h4{ display:block; }
.vcard__meta .h4{ color:#fff; }
.vcard__meta p{ margin:0; font-size:.9rem; color:var(--ink-muted); }

/* ---------- credentials / two-col lists ---------------------------------- */

.deflist{ list-style:none; margin:0; padding:0; }
.deflist li{
  padding:13px 0; border-bottom:1px solid var(--paper-line);
  font-size:.98rem; display:flex; gap:14px; align-items:baseline;
}
.deflist li::before{ content:""; width:5px; height:5px; background:var(--magenta); flex:none; transform:translateY(-3px); }
.band--ink .deflist li{ border-bottom-color:var(--ink-line); color:var(--ink-text); }
.cols2{ columns:2; column-gap:clamp(24px,4vw,56px); }
@media (max-width:700px){ .cols2{ columns:1; } }
.cols2 .deflist li{ break-inside:avoid; }

/* ---------- engagement cards --------------------------------------------- */

.engage{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--paper-line); border:1px solid var(--paper-line); }
.engage > article{ background:var(--paper); padding:clamp(28px,3.2vw,44px); display:flex; flex-direction:column; }
.engage__idx{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--magenta-deep); margin:0 0 18px;
}
.engage__for{
  margin-top:auto; padding-top:22px; border-top:1px solid var(--paper-line);
  font-size:.88rem; color:var(--muted);
}
.engage__for b{ font-weight:600; color:var(--text); }
@media (max-width:820px){ .engage{ grid-template-columns:1fr; } }

/* ---------- form ---------------------------------------------------------- */

.form{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field--full{ grid-column:1 / -1; }
.field label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); }
.field input, .field select, .field textarea{
  font-family:var(--sans); font-size:1rem; color:#fff;
  background:var(--ink-soft); border:1px solid var(--ink-line);
  border-radius:2px; padding:13px 14px; width:100%;
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--magenta); outline:none; }
.form__note{ grid-column:1/-1; font-size:.85rem; color:var(--ink-muted); margin:0; }
@media (max-width:700px){ .form{ grid-template-columns:1fr; } }

/* ---------- CTA ----------------------------------------------------------- */

.cta{ text-align:left; }
.cta .h2{ max-width:18ch; color:#fff; }

/* ---------- footer -------------------------------------------------------- */

.site-foot{ background:var(--ink); color:var(--ink-muted); border-top:1px solid var(--ink-line); }
.foot-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:clamp(24px,4vw,56px);
  padding-block:clamp(48px,6vw,80px) 40px;
}
@media (max-width:860px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-tag{
  font-family:var(--brand); font-weight:500; font-size:1.35rem; color:#fff;
  margin:24px 0 10px; letter-spacing:.01em;
}
.foot-tag .dot{ color:var(--magenta); }
.foot h5{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:#7C767C; margin:0 0 16px; font-weight:400;
}
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li{ margin-bottom:11px; }
.foot a{ text-decoration:none; font-size:.94rem; color:var(--ink-text); }
.foot a:hover{ color:var(--magenta); }
.foot-base{
  border-top:1px solid var(--ink-line);
  padding-block:22px;
  display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:space-between;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
}
.foot-base a{ text-decoration:none; color:var(--ink-muted); }
.foot-base a:hover{ color:#fff; }

/* ---------- page hero (inner pages) -------------------------------------- */

.phero{ background:var(--ink); color:var(--ink-text); position:relative; }
.phero::before{ content:""; position:absolute; top:0; bottom:0; left:var(--gutter); width:1px; background:var(--ink-line); }
.phero-in{ padding-block:clamp(56px,7vw,110px); }
.phero .h1{ color:#fff; max-width:16ch; }
.phero .lede{ color:var(--ink-muted); margin-top:26px; }

/* ---------- reveal on scroll --------------------------------------------- */

.rv{ opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .rv{ opacity:1; transform:none; } }

/* ---------- legal pages --------------------------------------------------- */

.legal{ max-width:74ch; }
.legal h2{ font-family:var(--display); font-weight:500; font-size:1.5rem; margin:44px 0 12px; letter-spacing:-.01em; }
.legal h2:first-child{ margin-top:0; }
.legal p, .legal li{ color:var(--muted); font-size:1rem; }
.legal ul{ padding-left:18px; }
.legal li{ margin-bottom:8px; }
.legal .stamp{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--magenta-deep); border:1px solid var(--paper-line); padding:14px 16px; margin-bottom:34px;
}

/* ---------- video lightbox ------------------------------------------------ */

.vbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(6,6,8,.94);
  display:grid; place-items:center;
  padding:clamp(16px,4vw,56px);
}
.vbox[hidden]{ display:none; }
.vbox__frame{ width:min(1100px,100%); aspect-ratio:16/9; background:#000; }
.vbox__frame iframe{ width:100%; height:100%; border:0; }
.vbox__close{
  position:absolute; top:clamp(12px,2vw,24px); right:clamp(12px,2vw,24px);
  background:transparent; border:1px solid rgba(255,255,255,.3); color:#fff;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:10px 16px; border-radius:2px; cursor:pointer;
}
.vbox__close:hover{ border-color:var(--magenta); color:var(--magenta); }


/* ---------- full-width rows under a split header -------------------------- */
.row-full{ margin-top:clamp(44px,5vw,72px); }
.section-head{ margin-bottom:clamp(32px,4vw,54px); }
.section-head .h2{ max-width:22ch; }
.section-head .lede{ max-width:58ch; margin-bottom:0; }

/* ---------- capacity / engagement detail rows ---------------------------- */

.capacities .capacity{ padding-block:clamp(40px,5vw,64px); border-top:1px solid var(--paper-line); }
.capacities .capacity:first-of-type{ border-top:0; padding-top:clamp(32px,4vw,48px); }
.capacity__change{
  margin:30px 0 0; padding-top:18px; border-top:1px solid var(--paper-line);
  font-size:.98rem; color:var(--muted);
}
.capacity__change span{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--magenta-deep); margin-bottom:8px;
}

/* ---------- numbered steps ----------------------------------------------- */

.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--paper-line); border:1px solid var(--paper-line); }
.step{ background:var(--paper); padding:clamp(26px,3vw,38px) clamp(20px,2.2vw,30px); }
.band--paper2 .step{ background:var(--paper-2); }
.step__n{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  color:var(--magenta-deep); margin:0 0 22px;
}
.step p:not(.step__n){ margin:0; font-size:.96rem; color:var(--muted); }
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }

/* ---------- levels on ink ------------------------------------------------- */

.levels--ink .level{ border-top-color:#fff; }
.levels--ink .level:nth-child(2){ border-top-color:var(--magenta); }
.levels--ink .level:nth-child(3){ border-top-color:var(--magenta-deep); }
.levels--ink .level__scope{ color:#7C767C; }
.levels--ink .level h3{ color:#fff; }
.levels--ink .level p{ color:var(--ink-muted); }

/* ---------- mission / vision statements ---------------------------------- */

.statement{
  font-family:var(--display); font-weight:400; color:#fff;
  font-size:clamp(1.45rem,2.9vw,2.3rem); line-height:1.22; letter-spacing:-.015em;
  margin:0; max-width:26ch;
}
.statement__label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--magenta); margin:16px 0 0;
}

/* ---------- ink surfaces inherit tile + list colours ---------------------- */

.band--ink .tile__label{ color:var(--magenta); }
.band--ink .capacity__change{ border-top-color:var(--ink-line); color:var(--ink-muted); }
.band--ink .capacity__change span{ color:var(--magenta); }

.field--full .btn{ align-self:flex-start; }


/* ---------- testimonials -------------------------------------------------- */

.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--paper-line); border:1px solid var(--paper-line); }
.quotes > figure{ background:var(--paper); padding:clamp(28px,3vw,40px); display:flex; flex-direction:column; }
.band--paper2 .quotes > figure{ background:var(--paper-2); }
.quotes blockquote{
  margin:0 0 26px; font-family:var(--display); font-weight:400;
  font-size:clamp(1.05rem,1.35vw,1.18rem); line-height:1.45; letter-spacing:-.006em;
}
.quotes figcaption{ margin-top:auto; padding-top:20px; border-top:1px solid var(--paper-line); }
.quotes figcaption b{ display:block; font-size:.95rem; font-weight:600; }
.quotes figcaption span{ display:block; font-size:.85rem; color:var(--muted); margin-top:3px; }
@media (max-width:900px){ .quotes{ grid-template-columns:1fr; } }

.band--ink .quotes{ background:var(--ink-line); border-color:var(--ink-line); }
.band--ink .quotes > figure{ background:var(--ink); }
.band--ink .quotes blockquote{ color:#fff; }
.band--ink .quotes figcaption{ border-top-color:var(--ink-line); }
.band--ink .quotes figcaption span{ color:var(--ink-muted); }

/* ---------- trust / credential rows -------------------------------------- */

.trust{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
  gap:0 clamp(16px,2vw,28px);
  border-block:1px solid var(--paper-line);
  margin:0; padding:0;
}
.trust li{
  list-style:none; padding:22px 0;
  font-family:var(--display); font-size:clamp(1.02rem,1.3vw,1.18rem);
  line-height:1.25; letter-spacing:-.008em;
}
.band--ink .trust{ border-block-color:var(--ink-line); }
.band--ink .trust li{ color:#fff; }

.badges{ display:flex; flex-wrap:wrap; gap:10px; }
.badges span{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  border:1px solid var(--paper-line); padding:11px 15px; color:var(--muted);
}
.band--ink .badges span{ border-color:var(--ink-line); color:var(--ink-text); }

/* ---------- stat pair ----------------------------------------------------- */

.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px); }
.stat__n{
  font-family:var(--display); font-weight:400; color:#fff;
  font-size:clamp(2.4rem,4.4vw,3.6rem); line-height:1; letter-spacing:-.02em; margin:0;
}
.stat__l{ margin:12px 0 0; font-size:.95rem; color:var(--ink-muted); max-width:24ch; }
@media (max-width:720px){ .stats{ grid-template-columns:1fr; } }

/* ---------- interview series list ---------------------------------------- */

.series{ list-style:none; margin:0; padding:0; border-top:1px solid var(--ink-line); }
.series li{
  display:grid; grid-template-columns:1fr auto; gap:16px; align-items:baseline;
  padding:16px 0; border-bottom:1px solid var(--ink-line);
}
.series b{ font-family:var(--display); font-weight:500; font-size:1.14rem; color:#fff; letter-spacing:-.008em; }
.series span{ font-size:.88rem; color:var(--ink-muted); text-align:right; }
@media (max-width:620px){ .series li{ grid-template-columns:1fr; } .series span{ text-align:left; } }

/* ---------- featured video ------------------------------------------------ */

.vfeature{
  display:grid; grid-template-columns:1.45fr 1fr;
  text-decoration:none; color:inherit;
  border:1px solid var(--ink-line); background:var(--ink-soft);
  overflow:hidden; transition:border-color .22s ease;
}
.vfeature:hover{ border-color:var(--magenta); }
.vfeature__img{ position:relative; display:block; }
.vfeature__img img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:16/9;
  filter:grayscale(45%); transition:filter .35s ease;
}
.vfeature:hover .vfeature__img img{ filter:grayscale(0%); }
.vfeature__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,11,13,.10), rgba(11,11,13,.42));
}
.vfeature__img .vcard__play{ width:78px; height:78px; }
.vfeature__meta{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(26px,3vw,42px);
}
.vfeature__meta .h3{ display:block; color:#fff; margin-bottom:12px; }
.vfeature__note{ display:block; font-size:.96rem; line-height:1.55; color:var(--ink-muted); }
@media (max-width:820px){ .vfeature{ grid-template-columns:1fr; } }

/* ---------- portrait figures in even splits ------------------------------ */

.split--even figure{ max-width:560px; justify-self:start; width:100%; }
.split--even figure img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
@media (max-width:860px){ .split--even figure{ max-width:440px; } }

/* ---------- client logo wall --------------------------------------------- */

.logowall{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(168px, 1fr));
  gap:clamp(26px,3.2vw,44px) clamp(18px,2.4vw,32px);
  align-items:center;
  border-block:1px solid var(--paper-line);
  padding-block:clamp(30px,4vw,46px);
  margin:0;
  list-style:none;
}
.logowall li{ display:flex; align-items:center; justify-content:center; }
.logowall img{
  max-height:50px; max-width:100%; width:auto; height:auto;
  object-fit:contain;
  opacity:.82;
  transition:opacity .2s ease;
}
.logowall li:hover img{ opacity:1; }
@media (max-width:520px){
  .logowall{ grid-template-columns:repeat(2,1fr); }
  .logowall img{ max-height:38px; }
}

/* ---------- tile grids sitting on ink ------------------------------------ */

.band--ink .grid2,
.band--ink .grid3{
  background:var(--ink-line);
  border-block-color:var(--ink-line);
}
.band--ink .grid2 > *,
.band--ink .grid3 > *{ background:var(--ink); }
.band--ink .tile p{ color:var(--ink-muted); }

/* ---------- video: duration badge + flipped layout ----------------------- */

.vfeature + .vfeature{ margin-top:clamp(16px,2.2vw,26px); }
.vfeature--flip{ grid-template-columns:1fr 1.45fr; }
.vfeature--flip .vfeature__img{ order:2; }
.vfeature--flip .vfeature__meta{ order:1; }
@media (max-width:820px){
  .vfeature--flip{ grid-template-columns:1fr; }
  .vfeature--flip .vfeature__img{ order:1; }
  .vfeature--flip .vfeature__meta{ order:2; }
}
.vfeature__dur{
  position:absolute; left:16px; top:16px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(11,11,13,.72); color:#fff;
  padding:7px 11px; border-radius:2px;
}

/* =========================================================================
   v3 — client feedback pass, 13 Aug 2026
   Grouped here on purpose so every change from this round can be found,
   tuned, or lifted out in one place.
   ========================================================================= */

/* ---- 1. Eyebrow readability -------------------------------------------
   The 11px mono eyebrow in brand magenta was hard to read, especially on
   ink. Slightly larger, slightly less tracking, and a lighter magenta on
   dark surfaces: 8:1 contrast instead of 5:1. */
.eyebrow{ font-size:13px; letter-spacing:.12em; font-weight:500; }
/* On dark surfaces the magenta was the problem, not the size alone. Type
   goes white for maximum legibility; the magenta rule to its left keeps
   the brand accent. */
.band--ink .eyebrow,
.phero .eyebrow,
.hero .eyebrow{ color:#FFFFFF; }
.band--ink .eyebrow::before,
.phero .eyebrow::before,
.hero .eyebrow::before{ background:var(--magenta); width:32px; }
/* On paper, the deep magenta already clears contrast. Darkened one more
   step so it reads at this size on a bright screen. */
.eyebrow{ color:#7A1665; }
.band--ink .statement__label,
.band--ink .tile__label,
.band--ink .engage__idx{ color:#F07FD4; }

/* Secondary mono labels were set at 10.5px, small enough to be a squint
   on a laptop. Up to 11.5px across the board. */
.tile__label, .engage__idx, .statement__label, .model__k, .jumps__k,
.capacity__change span, .model__lvl{ font-size:11.5px; letter-spacing:.14em; }
.badges span{ font-size:11px; letter-spacing:.12em; }

/* ---- 2. Headline line breaking ----------------------------------------
   Stops orphans like "lead in." falling alone on the last line. */
.h1, .h2, .h3{ text-wrap:balance; }
.lede{ text-wrap:pretty; }
.nowrap{ white-space:nowrap; }

/* ---- 3. Portraits and image whitespace --------------------------------
   Tall portraits were rendering at full natural height, towering over the
   text beside them and leaving a column of dead space. Cap the height,
   crop from the top of the frame so the face stays in shot. */
.portrait{
  width:100%;
  max-height:min(64vh, 560px);
  object-fit:cover;
  object-position:50% 18%;
}
.split--even figure{ margin:0; align-self:stretch; }
.split--even figure img{
  width:100%;
  max-height:min(64vh, 560px);
  object-fit:cover;
  object-position:50% 18%;
}
.hero-figure img{ max-height:min(72vh, 640px); object-fit:cover; object-position:50% 15%; }

/* Full-bleed banners were eating a screen and a half before the next
   piece of content. */
.bleed{ min-height:clamp(300px,34vw,440px); }
@media (max-width:820px){
  .bleed{ min-height:clamp(300px,62vw,400px); }
}

/* ---- 4. Repeating call to action --------------------------------------
   One wording, repeated at intervals, rather than competing asks. */
.ctastrip{
  border-top:1px solid var(--paper-line);
  border-bottom:1px solid var(--paper-line);
  padding-block:clamp(28px,3.4vw,44px);
}
.ctastrip-in{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:20px;
}
.ctastrip p{
  margin:0; max-width:46ch;
  font-family:var(--display); font-size:clamp(1.15rem,1.9vw,1.5rem);
  line-height:1.3; letter-spacing:-.012em; color:var(--text);
}
.band--ink .ctastrip{ border-color:var(--ink-line); }
.band--ink .ctastrip p{ color:#fff; }

/* ---- 5. Anchor rail: preview the four areas before scrolling ---------- */
.jumps{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--paper-line);
  border:1px solid var(--paper-line);
}
.jumps a{
  background:var(--paper); padding:clamp(20px,2.2vw,28px);
  text-decoration:none; color:var(--text); display:flex; flex-direction:column; gap:8px;
  transition:background .18s ease;
}
.jumps a:hover{ background:var(--paper-2); }
.jumps .jumps__k{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--magenta-deep);
}
.jumps .jumps__t{ font-family:var(--display); font-size:1.18rem; line-height:1.2; letter-spacing:-.01em; }
.jumps .jumps__d{ font-size:.9rem; color:var(--muted); }
@media (max-width:860px){ .jumps{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .jumps{ grid-template-columns:1fr; } }

/* ---- 6. Scale rail: individual / team / organization ------------------ */
.scales{
  display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-muted);
}
.scales b{ color:#fff; font-weight:400; }
.scales span{ color:#F07FD4; }

/* ---- 7. System model --------------------------------------------------
   One visual for the whole methodology: four capacities as stacked
   load-bearing plates on the left, the three levels they carry on the
   right. Built in CSS grid rather than a fixed SVG so it reflows on a
   phone instead of shrinking to unreadable type. */
.model{ margin:0; }
.model__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(190px,280px);
  gap:14px clamp(24px,4vw,64px);
}
.model__plate{
  grid-column:1;
  border:1px solid var(--paper-line);
  border-left:3px solid var(--magenta);
  background:var(--paper);
  padding:clamp(18px,2vw,26px) clamp(18px,2vw,28px);
  display:grid; gap:6px;
}
.band--paper2 .model__plate{ background:var(--paper-2); }
.model__k{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--magenta-deep);
}
.model__n{
  font-family:var(--display); font-size:clamp(1.22rem,1.8vw,1.5rem);
  line-height:1.2; letter-spacing:-.012em; color:var(--text);
}
.model__d{ font-size:.94rem; color:var(--muted); }
.model__node{
  grid-column:2;
  border-top:1px solid var(--paper-line);
  padding-top:16px;
  display:grid; align-content:start; gap:6px;
  position:relative;
}
.model__node::before{
  content:""; position:absolute; top:-4px; left:0;
  width:7px; height:7px; border-radius:50%; background:var(--magenta);
}
.model__lvl{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--magenta-deep);
}
.model__lvln{
  font-family:var(--display); font-size:1.14rem; line-height:1.25;
  letter-spacing:-.01em; color:var(--text);
}
.model__lvld{ font-size:.9rem; color:var(--muted); }
.model__base{
  margin-top:16px; border-top:1px solid var(--paper-line); padding-top:16px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
  display:flex; flex-wrap:wrap; gap:8px 18px;
}
.model__base b{ color:var(--magenta-deep); font-weight:400; }
.model figcaption{ margin-top:20px; font-size:.94rem; color:var(--muted); max-width:72ch; }
@media (max-width:820px){
  .model__grid{ grid-template-columns:1fr; }
  .model__plate, .model__node{ grid-column:1; grid-row:auto !important; }
  .model__node{ border-top:0; padding-top:0; padding-left:16px; margin:2px 0 12px; }
  .model__node::before{ top:6px; }
}

/* Mission and vision statements were competing with the page headings.
   Pulled down a step so the hierarchy reads h1 > h2 > statement. */
.statement{ font-size:clamp(1.32rem,2.3vw,1.95rem); max-width:30ch; }

/* ---- 8. Team placeholders --------------------------------------------- */
.team{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--paper-line); border-block:1px solid var(--paper-line); }
.team > *{ background:var(--paper); padding:clamp(26px,3vw,40px) clamp(22px,2.4vw,34px); }
.band--paper2 .team > *{ background:var(--paper-2); }
@media (max-width:860px){ .team{ grid-template-columns:1fr; } }
.team h3{ font-family:var(--display); font-weight:500; font-size:1.3rem; margin:0 0 6px; letter-spacing:-.01em; }
.team .team__role{ font-size:.9rem; color:var(--muted); margin:0 0 14px; }
.team .team__todo{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--magenta-deep); border:1px dashed rgba(142,28,119,.45);
  padding:8px 10px; display:inline-block; margin-top:14px;
}

/* ---- 9. Mobile density -------------------------------------------------
   Feedback was that mobile reads text-heavy. Tighter vertical rhythm and
   a slightly smaller lede so a section fits the thumb, not the scroll. */
@media (max-width:720px){
  .band{ padding-block:clamp(48px,11vw,72px); }
  .band--tight{ padding-block:clamp(36px,8vw,56px); }
  .lede{ font-size:1.04rem; line-height:1.5; margin-bottom:24px; }
  .h1{ font-size:clamp(2.15rem,8.4vw,2.9rem); }
  .h2{ font-size:clamp(1.72rem,7vw,2.3rem); }
  .prose p{ margin-bottom:1em; }
  .eyebrow{ margin-bottom:16px; }
  .stats{ gap:28px; }
  .stat__l{ max-width:34ch; }
  .ctastrip-in{ flex-direction:column; align-items:flex-start; }
  .btn{ min-height:46px; }
}

/* ---- 10. Skip link ----------------------------------------------------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--magenta); color:#fff; padding:12px 18px;
  font-family:var(--sans); font-size:.95rem; text-decoration:none;
}
.skip:focus{ left:12px; top:12px; }

/* ---- 11. Seams between same-coloured bands -----------------------------
   Two bands of the same colour back to back read as one section with a
   canyon down the middle. Client flagged the empty space; this closes it
   without touching the rhythm where the background actually changes. */
.band--paper2 + .band--paper2,
.band:not(.band--ink):not(.band--paper2) + .band:not(.band--ink):not(.band--paper2){
  padding-top:clamp(24px,3vw,44px);
}

/* =========================================================================
   v3.1 — legibility pass
   The whole small-type scale was set for a design portfolio, not for a
   hospital CEO reading on a laptop at the end of the day. Every mono
   label, caption, and secondary line moves up a step, and the uppercase
   tracking comes down so the letterforms group into words instead of
   drifting apart. Base body copy goes from 17px to 18px.
   ========================================================================= */

body{ font-size:18px; line-height:1.6; }

/* --- mono labels: the worst offenders at 10.5px ------------------------- */
.eyebrow{ font-size:14px; letter-spacing:.10em; }
.tile__label,
.engage__idx,
.statement__label,
.model__k,
.model__lvl,
.jumps__k,
.capacity__change span,
.level__scope,
.outcomes .n,
.foot-base,
.credbar-in,
.vfeature__dur,
.form__note,
.mark__tag,
.legal .stamp,
.step__n{
  font-size:13px;
  letter-spacing:.09em;
}
.badges span{ font-size:12.5px; letter-spacing:.07em; padding:12px 16px; }
.site-foot h5{ font-size:13px; letter-spacing:.09em; }

/* --- secondary body copy ------------------------------------------------ */
.tile p,
.stat__l,
.engage__for,
.series span,
.jumps__d,
.model__d,
.model__lvld,
.team__role,
.capacity__change,
.column__aside p,
.legal p, .legal li{
  font-size:1.02rem;
}
.deflist li{ font-size:1.02rem; }
.model__base{ font-size:12.5px; letter-spacing:.09em; }
.model figcaption{ font-size:1.02rem; }
.series b{ font-size:1.22rem; }
.jumps .jumps__t{ font-size:1.26rem; }

/* Inline font-size overrides live in the page markup for a handful of
   footer and note lines. Caught here rather than edited in six files. */
.site-foot p[style],
.band--ink p[style*="font-size"],
p[style*=".92rem"],
p[style*=".97rem"],
p[style*=".95rem"],
p[style*=".9rem"]{ font-size:1.02rem !important; }

/* --- mobile: same treatment, tuned for the narrower measure ------------- */
@media (max-width:720px){
  body{ font-size:17.5px; }
  .eyebrow{ font-size:13px; }
  .tile__label, .engage__idx, .statement__label, .model__k, .model__lvl,
  .jumps__k, .capacity__change span, .level__scope, .outcomes .n,
  .credbar-in, .foot-base, .site-foot h5{ font-size:12.5px; }
  .tile p, .stat__l, .engage__for, .series span, .jumps__d, .model__d,
  .model__lvld, .deflist li, .legal p, .legal li{ font-size:1rem; }
}

/* ---- 12. Contrast fixes (WCAG 2.1 AA) ----------------------------------
   White on the brand magenta measured 3.08:1, under the 4.5:1 needed for
   button text. The button now uses the deeper magenta that was already
   the hover state, which clears 5:1. Brand magenta #DF39BC is untouched
   everywhere it appears as an accent, rule, or heading colour. */
.btn--primary,
a.btn--primary,
.nav a.btn--primary{ background:#C22EA2; color:#fff; }
.btn--primary:hover, a.btn--primary:hover{ background:#A82590; color:#fff; }
/* Footer column headings were 4.43:1. */
.site-foot h5{ color:#B6AFB6; }

/* ---- 13. Inline video players ------------------------------------------
   Videos play in place rather than opening a lightbox. The Drive player
   provides its own controls and fullscreen button, so a visitor can go
   fullscreen if they want to without the page taking over their screen.
   The iframes are lazy so they cost nothing until scrolled to. */
.vfeature{ align-items:stretch; }
.vfeature__player{
  position:relative;
  align-self:stretch;
  background:#000;
  min-height:100%;
}
.vfeature__player::before{ content:""; display:block; padding-top:56.25%; }
.vfeature__player iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0; display:block;
}
.vfeature--flip .vfeature__player{ order:2; }
.vfeature--flip .vfeature__meta{ order:1; }
@media (max-width:820px){
  .vfeature--flip .vfeature__player{ order:1; }
  .vfeature--flip .vfeature__meta{ order:2; }
}
/* Duration now sits with the label rather than over the poster frame. */
.vdur{
  display:inline-block; margin-left:10px;
  border:1px solid var(--ink-line); border-radius:2px;
  padding:3px 8px; color:var(--ink-text); letter-spacing:.08em;
}
.vfeature__meta .tile__label{ display:flex; align-items:center; }

/* ---- 14. Interview series list ----------------------------------------
   Names were wrapping tight against the dividers and the right-aligned
   roles left a ragged left edge that was hard to scan. More room per row,
   a name column wide enough for two-word names, and roles set left so the
   column reads as a list rather than as two separate ones. */
.series li{
  grid-template-columns:minmax(10.5em, .85fr) 1.15fr;
  gap:10px clamp(20px,3vw,44px);
  padding:22px 0;
  align-items:baseline;
}
.series b{ line-height:1.28; display:block; }
.series span{ text-align:left; line-height:1.45; }
@media (max-width:760px){
  .series li{ grid-template-columns:1fr; gap:4px; padding:18px 0; }
}

/* =========================================================================
   v3.2 — client feedback pass, 11 Sep 2026
   Grouped like the earlier rounds so this round can be found or lifted
   out in one place.
   ========================================================================= */

/* ---- 1. Methodology teaser: aside removed ------------------------------
   The explanatory paragraph beside the capacity column was cut, so the
   column now runs full width with the link beneath it. */
.column--solo{ grid-template-columns:1fr; }
.column--solo .strata{ max-width:none; }
.column__link{ margin:26px 0 0; }

/* ---- 2. The system model as a drawing ----------------------------------
   Four overlapping capacity fields, brand palette, multiply blended so the
   overlaps deepen on their own. Inline SVG: sharp at any size, editable as
   text, no image request. Below 760px the circle type would be unreadable,
   so the stacked list takes over. */
.model__svg{
  display:block; width:100%; max-width:860px; margin:0 auto;
  height:auto;
}
.model__svgname{
  font-family:var(--display); font-weight:500; font-size:30px;
  letter-spacing:1.5px; fill:#101014;
}
.model__svgscope{
  font-family:var(--display); font-style:italic; font-size:23px;
  fill:#2B2630;
}
.model__svgdesc{
  font-family:var(--mono); font-size:14px; letter-spacing:1.6px;
  fill:#4A434C;
}
.model__core text{
  font-family:var(--mono); font-weight:500; font-size:13px;
  letter-spacing:1.4px; fill:#101014;
}

.model__stack{ display:none; list-style:none; margin:0; padding:0; }
.model__stack li{
  border:1px solid var(--paper-line);
  border-left:3px solid var(--magenta);
  background:var(--paper);
  padding:clamp(18px,2vw,26px) clamp(18px,2vw,28px);
  display:grid; gap:6px;
}
.band--paper2 .model__stack li{ background:var(--paper-2); }
.model__stack li + li{ margin-top:12px; }

.model__levels{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,3vw,34px);
  margin-top:clamp(28px,3.5vw,44px);
}
.model__levels > div{
  border-top:2px solid var(--text); padding-top:16px;
  display:grid; align-content:start; gap:6px;
}
.model__levels > div:nth-child(2){ border-top-color:var(--magenta); }
.model__levels > div:nth-child(3){ border-top-color:var(--magenta-deep); }

/* Phone: the labelled circles stay, at type sized for the width. The
   descriptors move out of the drawing and into the list beneath it. */
.model__svg--compact{ display:none; }
.model__cname{
  font-family:var(--display); font-weight:500; font-size:40px;
  letter-spacing:1px; fill:#101014;
}
.model__cscope{
  font-family:var(--display); font-style:italic; font-size:31px;
  fill:#2B2630;
}
.model__core--compact text{ font-size:23px; letter-spacing:1px; }
@media (max-width:760px){
  .model__svg{ display:none; }
  .model__svg--compact{ display:block; max-width:none; }
  .model__stack{ display:block; margin-top:22px; }
  .model__levels{ grid-template-columns:1fr; }
}

/* ---- 3. Team cards without bios ----------------------------------------
   Names and titles only until bios and headshots land. Without body copy
   the cards were collapsing to a thin strip. */
.team > div{ min-height:118px; align-content:center; }

/* ---- 4. Two ledes stacked in a capacity header -------------------------
   Several engagement blocks now carry a second paragraph. */
.capacity .sticky-h .lede + .lede{ margin-top:-14px; }

/* ---- 5. Tile labels and the list beneath them --------------------------
   Where one label in a row wrapped to two lines and its neighbours did
   not, the lists started at three different heights and the first bullet
   sat tight under the label. Labels now reserve two lines so every list
   in a row starts level, with a clear gap before the first item. The
   reservation is dropped once the grid stacks. */
.grid2 .tile__label,
.grid3 .tile__label{
  line-height:1.5;
  min-height:3em;
  margin-bottom:20px;
}
.tile__label + .deflist{ margin-top:2px; }
.tile__label + .deflist > li:first-child{ padding-top:2px; }
@media (max-width:860px){
  .grid2 .tile__label,
  .grid3 .tile__label{ min-height:0; margin-bottom:16px; }
}

/* ---- 6. Anchor rail: align the three rows across the cards -------------
   Where one card's label or title wrapped to two lines and its neighbours
   did not, the scale line at the foot of each card sat at a different
   height right across the row. Label and title each reserve two lines so
   all four cards read on the same baselines. Dropped once they stack. */
.jumps .jumps__k{ line-height:1.5; min-height:3em; }
.jumps .jumps__t{ line-height:1.2; min-height:2.4em; }
.jumps a{ gap:6px; }
@media (max-width:860px){
  .jumps .jumps__k,
  .jumps .jumps__t{ min-height:0; }
  .jumps a{ gap:8px; }
}

/* ---- 7. Legal pages ----------------------------------------------------
   The privacy policy and terms are long by necessity. An effective-date
   line, a plain-language summary, and a contents list make them navigable
   rather than a wall a procurement officer has to read end to end. */
.legal__eff{
  font-family:var(--mono); font-size:13px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted);
  border-block:1px solid var(--paper-line);
  padding-block:14px; margin:0 0 clamp(28px,3.5vw,40px);
}
.legal__box{
  background:var(--paper-2);
  border-left:3px solid var(--magenta);
  padding:clamp(22px,2.6vw,32px);
  margin:0 0 clamp(32px,4vw,44px);
}
.legal__box-h{
  font-family:var(--mono); font-size:13px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--magenta-deep); margin:0 0 14px;
}
.legal__box p{ margin:0 0 1em; color:var(--text); }
.legal__box p:last-child{ margin-bottom:0; }

.legal__toc{
  border:1px solid var(--paper-line);
  padding:clamp(22px,2.6vw,30px);
  margin:0 0 clamp(36px,4.5vw,56px);
}
.legal__toc-h{
  font-family:var(--mono); font-size:13px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--magenta-deep); margin:0 0 16px;
}
.legal__toc ul{ list-style:none; margin:0; padding:0; columns:2; column-gap:clamp(24px,4vw,48px); }
.legal__toc li{ break-inside:avoid; margin:0 0 9px; }
.legal__toc a{
  text-decoration:none; font-size:1rem; color:var(--text);
  border-bottom:1px solid transparent;
}
.legal__toc a:hover{ border-bottom-color:var(--magenta); }
@media (max-width:640px){ .legal__toc ul{ columns:1; } }

.legal h2{ scroll-margin-top:20px; }
.legal h3{
  font-family:var(--display); font-weight:500; font-size:1.16rem;
  letter-spacing:-.008em; margin:30px 0 8px;
}
.legal ul{ margin:0 0 1.15em; }
/* The legal column left-aligns with the page heading above it rather than
   centring in the viewport. */
.legal{ margin-inline:0; }

/* ---- 8. Accessibility fixes, audit of 11 Sep 2026 ----------------------
   Two items the audit caught. The scope label in the capacity column was
   #6E686E at 10px on ink, which measures 3.62:1 and fails AA for small
   text. It now uses the same muted ink as every other secondary label,
   at 6.4:1. The full-bleed caption was still at the old 11px and missed
   the v3.1 legibility pass. */
.stratum__scope{ font-size:13px; letter-spacing:.09em; color:var(--ink-muted); }
.stratum[aria-expanded="true"] .stratum__scope{ color:#F07FD4; }
.bleed figcaption{ font-size:13px; letter-spacing:.09em; }

/* ---- 9. System page hero: the silent mark ------------------------------
   The four capacities with the labels stripped out, sitting in the empty
   right half of the methodology hero. It reads as a brand mark on first
   sight and as the model once the reader meets the full diagram further
   down. Screen blending so the overlaps brighten on ink the way they
   deepen on paper. Hidden when the hero stacks, where it would only push
   the copy down. */
.phero-in--split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(24px,3vw,48px); align-items:center;
}
.phero__mark{ width:100%; max-width:580px; height:auto; justify-self:end; }
.phero__name{
  font-family:var(--display); font-weight:500; font-size:33px;
  letter-spacing:1.2px; fill:#FFFFFF;
}
.phero__scope{
  font-family:var(--display); font-style:italic; font-size:25px;
  fill:#F0ECF0;
}
.phero__core text{
  font-family:var(--mono); font-weight:500; font-size:17px;
  letter-spacing:1px; fill:#FFFFFF;
}
@media (max-width:900px){
  .phero-in--split{ grid-template-columns:1fr; }
  .phero__mark{ display:none; }
}

/* ---- 10. Mobile pass, 11 Sep 2026 --------------------------------------
   Two labels were never picked up by the v3.1 legibility round because a
   two-class selector from v3 outranked it. The anchor rail eyebrow was
   still 10.5px on every screen, and the scale rail on the work page was
   11.5px. Both now sit on the same scale as every other mono label. */
.jumps .jumps__k{ font-size:13px; letter-spacing:.09em; }
.scales{ font-size:13px; letter-spacing:.10em; }
@media (max-width:720px){
  .jumps .jumps__k{ font-size:12.5px; }
  .scales{ font-size:12.5px; gap:8px 18px; }
}

/* ========================================================================
   v3.3 — Our team: headshots and bios (17 Sep 2026)
   Additive only. Nothing above this block is modified.
   ==================================================================== */
.team__photo{
  display:block; width:100%; height:auto; aspect-ratio:1/1;
  object-fit:cover; object-position:50% 22%;
  margin:0 0 20px; background:var(--paper);
  border:1px solid var(--paper-line);
}
.team__bio{
  font-size:.98rem; line-height:1.62; color:var(--muted);
  margin:0; max-width:46ch;
}
/* Cells are top aligned so the three photos share a baseline even when the
   bios run to different lengths. */
.team > *{ display:flex; flex-direction:column; align-items:stretch; }
@media (max-width:860px){
  .team__photo{ max-width:320px; }
}

/* Booking block, replaces the enquiry form on work.html (17 Sep 2026). */
.booking{ border:1px solid var(--ink-line); padding:clamp(28px,3.4vw,44px); }
.booking__k{
  font-family:var(--display); font-size:clamp(1.5rem,2.6vw,2rem);
  line-height:1.18; color:#fff; margin:0 0 14px; letter-spacing:-.012em;
}
.booking__l{ color:var(--ink-muted); font-size:1.02rem; line-height:1.6; margin:0 0 28px; max-width:42ch; }