/* =====================================================================
   The Griffith Collective · hi-fi design system
   Layout numbers are the DDC starter's, unchanged (starter.designinx.com/guide).
   Hi-fi swaps token VALUES, not the layout rules.
   States  phone 0-639 · tablet 640-1023 · laptop 1024+ (+ <380, 1650+)
   ===================================================================== */
:root{
  /* --- layout: starter numbers, phone first --- */
  --container:1240px; --gutter:20px; --header-h:60px; --logo-h:32px;
  --section:56px; --section-hero:48px; --gap:24px;
  --radius:4px; --radius-lg:10px; --prose:72ch; --measure:640px;

  /* --- colour --- */
  --ink:#171310; --ink-2:#413A32; --muted:#6E6558;
  --line:#E7E0D4; --line-strong:#CFC4B1;
  --surface:#F9F6F0; --surface-2:#F1EADE; --white:#ffffff;
  --accent:#8A5E2F; --accent-hover:#6E4A23; --accent-tint:#F3EADD;
  --gold:#C9A46A; --dark:#171310; --focus:#8A5E2F;

  /* --- type: starter scale --- */
  --t-display:40px; --t-h1:38px; --t-h2:30px; --t-h3:22px; --t-h4:18px;
  --t-lead:19px; --t-body:17px; --t-small:14px;
  --font-display:"Instrument Sans",system-ui,-apple-system,sans-serif;
  --font-ui:var(--font-display);
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display-weight:600; --display-track:-.035em;

  /* --- motion --- */
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow:0 1px 2px rgba(23,19,16,.04), 0 14px 36px -20px rgba(23,19,16,.22);
  --shadow-lg:0 2px 6px rgba(23,19,16,.05), 0 34px 60px -26px rgba(23,19,16,.32);

  /* distance from the viewport edge to the container edge */
  --edge:var(--gutter);
}
@media (max-width:379px){ :root{ --gutter:16px; --t-h1:34px; --t-display:36px; --t-h2:28px; } }
@media (min-width:640px){ :root{ --gutter:32px; --section:64px; --section-hero:64px;
  --t-display:52px; --t-h1:48px; --t-h2:34px; } }
@media (min-width:1024px){ :root{ --gutter:40px; --section:80px; --section-hero:96px;
  --header-h:72px; --logo-h:40px;
  --t-display:64px; --t-h1:60px; --t-h2:40px; --t-h3:24px; --t-lead:21px; } }
@media (min-width:1320px){ :root{ --edge:calc((100vw - var(--container))/2); } }
@media (min-width:1650px){ :root{ --container:1440px; --gutter:48px; --t-display:76px; } }

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px)}
body{margin:0;font-family:var(--font-body);font-size:var(--t-body);line-height:1.6;
  color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:2px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- layout ---------- */
.container{width:min(var(--container),calc(100% - var(--gutter)*2));margin-inline:auto}
.section{padding-block:var(--section)}
.section-lg{padding-block:calc(var(--section)*1.5)}
.section-hero{padding-block:var(--section-hero)}
.band-surface{background:var(--surface)}
.band-dark{background:var(--dark);color:var(--white)}
.band-dark .t-lead,.band-dark .t-body{color:rgba(255,255,255,.74)}
.band-dark .t-eyebrow{color:var(--gold)}
.band-dark .t-eyebrow::before{background:var(--gold)}
.grid-3{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:640px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.split{display:grid;gap:40px}
@media (min-width:1024px){.split{grid-template-columns:1fr 1fr;gap:72px}
  .split-wide{grid-template-columns:1.12fr 1fr}
  .split-mid{align-items:center}}

/* ---------- type ---------- */
.t-display,.t-h1,.t-h2{font-family:var(--font-display);font-weight:var(--display-weight);text-wrap:balance}
.t-h3,.t-h4,.prow h3,.post-lead h3,.cta-head{text-wrap:balance}
.t-lead,.t-body,p{text-wrap:pretty}
.t-display{font-size:var(--t-display);line-height:1.02;letter-spacing:var(--display-track)}
.t-h1{font-size:var(--t-h1);line-height:1.06;letter-spacing:var(--display-track)}
.t-h2{font-size:var(--t-h2);line-height:1.1;letter-spacing:var(--display-track)}
.t-display em,.t-h1 em,.t-h2 em{font-style:normal;color:var(--accent)}
.band-dark .t-display em,.band-dark .t-h1 em,.band-dark .t-h2 em{color:var(--gold)}
.t-h3{font-family:var(--font-ui);font-size:var(--t-h3);line-height:1.26;font-weight:600;letter-spacing:-.012em}
.t-h4{font-family:var(--font-ui);font-size:var(--t-h4);line-height:1.32;font-weight:600;letter-spacing:-.008em}
.t-lead{font-size:var(--t-lead);line-height:1.52;color:var(--ink-2)}
.t-body{font-size:var(--t-body);color:var(--ink-2)}
.t-small{font-size:var(--t-small);color:var(--muted)}
.t-eyebrow{font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:12px}
.t-eyebrow::before{content:"";width:28px;height:1px;background:var(--accent);flex:none}
.measure{max-width:var(--measure)}
.s-head>.t-eyebrow+*{margin-top:12px}
.s-head>.t-h2+.t-lead,.s-head>.t-display+.t-lead,.s-head>.t-h1+.t-lead{margin-top:16px}
.s-body{margin-top:40px}
.s-action{margin-top:32px}
@media (max-width:639px){.s-body{margin-top:32px}}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;
  padding:0 26px;border-radius:999px;border:1px solid transparent;font-family:var(--font-ui);
  font-weight:600;font-size:15px;letter-spacing:.005em;line-height:1;text-decoration:none;
  cursor:pointer;white-space:nowrap;transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .2s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-outline:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--surface-2)}
.btn-lg{min-height:56px;padding:0 32px;font-size:16px}
.btns{display:flex;flex-wrap:wrap;gap:12px}
/* arrow link, the w2 pattern */
.alink{display:inline-flex;align-items:baseline;gap:10px;font-family:var(--font-ui);font-weight:600;
  color:var(--accent);text-decoration:none;position:relative}
.alink .ar{display:inline-block;transition:transform .3s var(--ease)}
.alink::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.alink:hover::after{transform:scaleX(1)}
.alink:hover .ar{transform:translate(4px,-4px)}

/* ---------- patterns ---------- */
.pat-grid{background-image:linear-gradient(var(--line) 1px,transparent 1px),
  linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px}
.pat-rule{background-image:repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px 11px)}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E")}

/* ---------- header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;transition:background-color .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s}
.site-header::after{content:"";position:absolute;inset:0;border-bottom:1px solid transparent;pointer-events:none;transition:border-color .4s}
.site-header-bar{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-header.is-stuck{background:#fff}
.site-header.is-stuck::after{border-bottom-color:var(--line)}
.site-logo{display:flex;flex-direction:column;justify-content:center;height:var(--logo-h);flex:none;
  text-decoration:none;color:var(--ink)}
.site-logo b{font-family:var(--font-display);font-weight:var(--display-weight);font-size:calc(var(--logo-h)*.5);
  letter-spacing:-.03em;line-height:1}
.site-logo i{font-style:normal;font-family:var(--font-ui);font-size:9px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-top:4px}
.nav-desktop{display:none;align-items:center;gap:4px}
.nav-link{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;font-family:var(--font-ui);
  font-weight:500;font-size:15px;color:var(--ink);text-decoration:none;white-space:nowrap;position:relative}
.nav-link::after{content:"";position:absolute;left:13px;right:13px;bottom:16px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-link:hover::after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:14px;flex:none}
.header-cta{display:none}
.menu-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:44px;height:44px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;cursor:pointer}
.menu-button span{display:block;width:17px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
body.nav-open .menu-button span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.nav-open .menu-button span:nth-child(2){opacity:0}
body.nav-open .menu-button span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* header sits over the dark hero until it sticks */
body:not(.inner) .site-header:not(.is-stuck):not(.is-scrolled):not(:hover):not(:focus-within) .site-logo,body:not(.inner) .site-header:not(.is-stuck):not(.is-scrolled):not(:hover):not(:focus-within) .nav-link{color:#fff}
body:not(.inner) .site-header:not(.is-stuck):not(.is-scrolled):not(:hover):not(:focus-within) .site-logo i{color:var(--gold)}
body:not(.inner) .site-header:not(.is-stuck):not(.is-scrolled):not(:hover):not(:focus-within) .menu-button{border-color:rgba(255,255,255,.4)}
body:not(.inner) .site-header:not(.is-stuck):not(.is-scrolled):not(:hover):not(:focus-within) .menu-button span{background:#fff}
body:not(.inner) .site-header:not(.is-stuck):not(.is-scrolled):not(:hover):not(:focus-within) .header-cta{color:#fff;border-color:rgba(255,255,255,.45)}
body:not(.inner) .site-header:not(.is-stuck):not(.is-scrolled):not(:hover):not(:focus-within) .header-cta:hover{background:#fff;color:var(--ink)}
@media (min-width:640px){.header-cta{display:inline-flex}}
@media (min-width:1024px){.nav-desktop{display:flex}.menu-button{display:none}}
@media (max-width:1023px){
  .nav-desktop{position:fixed;inset:var(--header-h) 0 auto 0;display:none;flex-direction:column;
    align-items:stretch;gap:0;background:var(--surface);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg);padding:8px var(--gutter) 24px}
  body.nav-open{overflow:hidden}
  body.nav-open .nav-desktop{display:flex}
  body.nav-open .site-header{background:#fff}
  .nav-desktop .nav-link{min-height:54px;padding:0;font-size:19px;font-family:var(--font-display);
    font-weight:400;border-bottom:1px solid var(--line);color:var(--ink)!important}
  .nav-desktop .nav-link::after{display:none}
  .nav-desktop .nav-link:last-of-type{border-bottom:0}
  .nav-cta{margin-top:18px;width:100%}
}
@media (min-width:1024px){.nav-cta{display:none}}
@media (min-width:640px) and (max-width:1023px){.nav-cta{display:none}}

/* ---------- hero: superseded block removed; see "hero, video background" below ---------- */
/* credential rail under the hero */
.credrail{position:relative;z-index:2;background:var(--dark);border-top:1px solid rgba(255,255,255,.12)}
.credrail-grid{display:grid}
@media (min-width:640px){.credrail-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.credrail-grid{grid-template-columns:repeat(4,1fr)}}
.cred{padding:28px 0;border-bottom:1px solid rgba(255,255,255,.1)}
@media (min-width:640px){.cred{padding:30px 32px 30px 0;border-right:1px solid rgba(255,255,255,.1)}
  .cred:nth-child(2n){border-right:0;padding-left:32px}}
@media (min-width:1024px){.cred{padding:34px 28px;border-bottom:0}
  .cred:nth-child(2n){border-right:1px solid rgba(255,255,255,.1);padding-left:28px}
  .cred:first-child{padding-left:0}.cred:last-child{border-right:0;padding-right:0}}
.cred .n{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--gold)}
.cred b{display:block;margin-top:12px;font-family:var(--font-display);font-weight:var(--display-weight);font-size:20px;
  line-height:1.16;letter-spacing:-.01em;color:#fff}
.cred span{display:block;margin-top:10px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.58)}

/* ---------- certifications strip ---------- */
.certband{background:var(--surface-2);border-bottom:1px solid var(--line)}
.certband-inner{display:flex;flex-wrap:wrap;align-items:center;gap:14px 40px;padding-block:20px}
.certband-label{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);flex:none}
.certband-list{display:flex;flex-wrap:wrap;gap:10px 30px}
.certband-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-size:14px;color:var(--ink-2)}
.certband-list b{font-family:var(--font-ui);font-weight:600;color:var(--ink)}
.certband-list span{color:var(--muted);font-variant-numeric:tabular-nums;font-size:13px}

/* =====================================================================
   WHO WE SERVE — one continuous rule above the group rather than three
   broken segments, and an icon per audience instead of a numeral.
   The icons are built from the logo's own language: bars and rules.
   ===================================================================== */
.serve-head{display:grid;gap:18px;align-items:start}
@media (min-width:1024px){
  .serve-head{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:64px}
  .serve-head .t-lead{padding-top:6px}
}
.serve-head h2{margin-top:12px;max-width:15ch}
.serve-head .t-lead{max-width:54ch}

.serve{position:relative;display:grid;gap:var(--gap);
  margin-top:clamp(38px,4.6vw,56px);padding-top:clamp(34px,4vw,48px);
  border-top:1px solid var(--line-strong)}
@media (min-width:768px){.serve{grid-template-columns:repeat(3,1fr);gap:clamp(28px,3.4vw,48px)}}
.serve-item{position:relative;padding:0;border:0}
.serve-item::before{display:none}
.sicon{width:34px;height:34px;color:var(--accent);display:block;
  transition:transform .5s var(--ease),color .4s var(--ease)}
.serve-item:hover .sicon{transform:translateY(-3px);color:var(--ink)}
.serve-item h3{margin-top:20px;font-family:var(--font-ui);font-weight:600;font-size:var(--t-h3);
  line-height:1.24;letter-spacing:-.018em;color:var(--ink)}
.serve-item p{margin-top:11px;font-size:16px;line-height:1.62;color:var(--muted);max-width:40ch}

/* ---------- cards ---------- */
.card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:28px;transition:border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease)}
.card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.card .n{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--accent)}
.card .n+*{margin-top:14px}
.cardp{margin-top:12px}
.card .alink{margin-top:auto;padding-top:22px}
@media (min-width:1024px){.card{padding:32px}}

/* ---------- practice: clean rows, description animates in on hover ---------- */
.practice{border-top:0}
.prow{position:relative;display:grid;gap:14px;padding:26px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;grid-template-columns:40px minmax(0,1fr) 34px;align-items:start}
.prow .n{grid-column:1;grid-row:1;font-family:var(--font-ui);font-size:12px;font-weight:600;
  letter-spacing:.14em;color:var(--accent);padding-top:9px}
.prow h3{grid-column:2;grid-row:1;font-family:var(--font-display);font-weight:var(--display-weight);font-size:clamp(23px,2.9vw,36px);line-height:1.12;
  letter-spacing:var(--display-track);transition:color .45s var(--ease),transform .45s var(--ease)}
.prow .descwrap{grid-column:2;grid-row:2}
.prow .desc{font-size:16px;line-height:1.6;color:var(--muted);max-width:68ch}
.prow .go{grid-column:3;grid-row:1;justify-self:end;align-self:start;margin-top:4px;
  width:30px;height:30px;color:var(--ink);transition:transform .45s var(--ease),color .45s var(--ease)}
.prow .go svg{width:100%;height:100%;display:block}
.prow::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--accent);
  transition:width .55s var(--ease)}
.prow.is-static .go{display:none}

@media (min-width:1024px){
  .prow{grid-template-columns:56px minmax(0,1fr) 44px;padding:34px 0;gap:24px}
  .prow .n{padding-top:16px}
  .prow .go{width:40px;height:40px;margin-top:8px}
  /* the description is present for everyone, but on pointer screens it opens on hover */
  .prow .descwrap{display:grid;grid-template-rows:0fr;opacity:0;
    transition:grid-template-rows .55s var(--ease),opacity .4s var(--ease),margin-top .55s var(--ease)}
  .prow .descwrap>div{overflow:hidden;min-height:0}
  a.prow:hover .descwrap,a.prow:focus-visible .descwrap{grid-template-rows:1fr;opacity:1;margin-top:12px}
  .prow.is-static .descwrap{grid-template-rows:1fr;opacity:1;margin-top:12px}
  a.prow:hover h3,a.prow:focus-visible h3{color:var(--accent);transform:translateX(10px)}
  a.prow:hover .go,a.prow:focus-visible .go{color:var(--accent);transform:translate(5px,-5px)}
  a.prow:hover::before,a.prow:focus-visible::before{width:100%}
}
@media (max-width:1023px){.prow .descwrap{margin-top:10px}}
.support{margin-top:52px;padding-top:0}
.support-label{font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.support-grid{margin-top:26px;display:grid;gap:var(--gap)}
@media (min-width:640px){.support-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.support-grid{grid-template-columns:repeat(3,1fr)}}
.support-item h3+p,.support-item h4+p{margin-top:8px}

/* ---------- full-bleed image band ---------- */
.band-image{position:relative;overflow:hidden;background:var(--dark);color:#fff;isolation:isolate}
.band-image .bg{position:absolute;inset:-12% 0;z-index:-2;will-change:transform}
.band-image .bg img{width:100%;height:100%;object-fit:cover;opacity:.46}
.band-image::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(23,19,16,.80),rgba(23,19,16,.90))}
.far-head{margin-top:18px}
.farp{margin-top:18px}
.farp-strong{color:#fff}
.far-note{margin-top:22px;color:rgba(255,255,255,.42)}
.band-image .btn-light{margin-top:4px}

/* ---------- steps ---------- */
.steps{display:grid;gap:var(--gap);counter-reset:step}
@media (min-width:1024px){.steps{grid-template-columns:repeat(3,1fr);gap:48px}}
.step{padding-top:24px;border-top:1px solid var(--line-strong)}
.step::before{counter-increment:step;content:"0" counter(step);display:block;font-family:var(--font-ui);
  font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--accent);margin-bottom:16px}
.step h3+p{margin-top:12px}

/* ---------- founder ---------- */
.pull{position:relative;padding:40px 0 0}
.pull::before{content:"\201C";position:absolute;top:-26px;left:-6px;font-family:var(--font-body);
  font-size:110px;line-height:1;color:var(--accent);opacity:.16}
.quote{font-family:var(--font-display);font-weight:500;font-size:clamp(22px,2.3vw,29px);
  line-height:1.34;letter-spacing:-.028em;color:var(--ink)}
.pull-cite{margin-top:28px;padding-top:20px;border-top:1px solid var(--line-strong);display:flex;
  align-items:baseline;gap:12px;flex-wrap:wrap}
.pull-cite b{font-family:var(--font-ui);font-weight:600;font-size:15px}
.pull-cite span{font-size:14px;color:var(--muted)}
.founderp{margin-top:18px}

/* ---------- ticks ---------- */
.ticks{border-top:1px solid var(--line-strong)}
.ticks li{position:relative;padding:20px 0 20px 36px;border-bottom:1px solid var(--line);
  font-size:16px;line-height:1.55;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:2px;top:27px;width:10px;height:10px;
  border:1px solid var(--accent);transform:rotate(45deg)}

/* ---------- leadership ---------- */
.portrait{position:relative}
.portrait>span{display:block;position:relative;z-index:1}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-radius:var(--radius)}
.portrait::before{content:"";position:absolute;left:-22px;bottom:-22px;width:58%;height:54%;
  background-image:repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px 10px);
  z-index:0;border-radius:var(--radius)}
.creds{margin-top:28px;padding-top:22px;border-top:1px solid var(--line-strong)}
.creds dt{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.creds dd{margin-top:10px;font-family:var(--font-display);font-size:19px;line-height:1.45;letter-spacing:-.005em}
.leadp{margin-top:18px}

/* ---------- selected work + insights ---------- */
.pill{display:inline-flex;align-self:flex-start;max-width:100%;padding:6px 13px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);font-family:var(--font-ui);font-size:11px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.band-surface .pill{background:#fff}
.pill-accent,.band-surface .pill-accent{background:var(--accent);border-color:var(--accent);color:#fff}
.attrib{margin-top:18px;line-height:1.65}
.insights{display:grid;gap:var(--gap)}
@media (min-width:1024px){.insights{grid-template-columns:1.22fr 1fr}}
.insights-side{display:grid;gap:var(--gap);align-content:stretch}
.post{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:28px;text-decoration:none;color:inherit;overflow:hidden;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease)}
.post:hover{border-color:var(--line-strong);box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.post .pill+*{margin-top:18px}
.post .alink{margin-top:auto;padding-top:24px}
.post-lead{justify-content:flex-end;min-height:300px;color:#fff;border-color:transparent;
  background:var(--dark);isolation:isolate}
.post-lead .pmedia{position:absolute;inset:0;z-index:0}
.post-lead .pmedia img{width:100%;height:100%;object-fit:cover}
.post-lead::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(23,19,16,.28) 0%,rgba(23,19,16,.93) 74%)}
.post-lead>*:not(.pmedia){position:relative;z-index:2}
.post-lead h3{font-family:var(--font-display);font-weight:var(--display-weight);font-size:var(--t-h2);line-height:1.1;
  letter-spacing:var(--display-track);max-width:22ch}
.post-lead p{color:rgba(255,255,255,.78);margin-top:14px;max-width:46ch}
.post-lead .alink{color:var(--gold)}
@media (min-width:1024px){.post-lead{min-height:440px;padding:40px}}
.insights-side .post h3{max-width:20ch}

/* ---------- mega CTA (the clean w2 pattern) ---------- */
.cta-mega{padding-block:calc(var(--section)*1.4)}
.cta-rule{width:120px;height:2px;background:var(--accent)}
.cta-q{margin-top:40px;font-family:var(--font-ui);font-size:var(--t-h3);font-weight:500;color:var(--muted)}
.cta-link{display:inline-flex;align-items:baseline;gap:.3em;margin-top:14px;font-family:var(--font-display);
  font-weight:var(--display-weight);font-size:var(--t-display);line-height:1.04;letter-spacing:-.02em;color:var(--accent);
  text-decoration:none;transition:color .3s var(--ease)}
.cta-link .ar{display:inline-block;font-size:.62em;transition:transform .4s var(--ease)}
.cta-link:hover{color:var(--accent-hover)}
.cta-link:hover .ar{transform:translate(8px,-8px)}
.cta-note{margin-top:28px;max-width:46ch}

/* ---------- footer (w2 pattern) ---------- */
.site-footer{background:var(--dark);color:#fff;position:relative;overflow:hidden}
.footer-top{display:grid;gap:48px;padding-block:72px 56px}
@media (min-width:1024px){.footer-top{grid-template-columns:1.1fr auto;gap:64px;align-items:start}}
.fnav{display:grid;gap:4px}
@media (min-width:640px){.fnav{grid-template-columns:repeat(2,1fr);gap:4px 48px}}
.fnav a{display:inline-flex;align-items:baseline;gap:14px;padding:11px 0;font-family:var(--font-display);
  font-weight:var(--display-weight);font-size:clamp(20px,1.9vw,25px);line-height:1.2;letter-spacing:-.03em;
  color:rgba(255,255,255,.92);text-decoration:none;transition:color .3s var(--ease)}
.fnav a .ar{color:var(--gold);font-size:.62em;transition:transform .35s var(--ease)}
.fnav a:hover{color:var(--gold)}
.fnav a:hover .ar{transform:translate(4px,-4px)}
.fside{display:flex;flex-direction:column;gap:28px}
@media (min-width:1024px){.fside{align-items:flex-end;text-align:right}}
.fmark b{display:block;font-family:var(--font-display);font-weight:var(--display-weight);font-size:24px;line-height:1.05;letter-spacing:-.03em;color:#fff}
.fmark i{display:block;font-style:normal;font-family:var(--font-ui);font-size:9.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-top:6px}
.fcontact{display:flex;flex-direction:column;gap:12px}
.fcontact a,.fcontact span{font-family:var(--font-ui);font-size:14px;font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;color:rgba(255,255,255,.8);text-decoration:none}
.fcontact a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.35);
  transition:color .3s,text-decoration-color .3s}
.fcontact a:hover{color:#fff;text-decoration-color:#fff}
.cert-row{border-top:1px solid rgba(255,255,255,.14);padding-block:26px;display:flex;flex-wrap:wrap;
  gap:8px 28px;font-size:13.5px;color:rgba(255,255,255,.6)}
.cert-row b{font-family:var(--font-ui);font-weight:600;color:var(--gold)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding-block:24px;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:10px 24px;font-family:var(--font-ui);font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.footer-bottom a{color:rgba(255,255,255,.62);text-decoration:none}
.footer-bottom a:hover{color:#fff}

/* ---------- motion (gated on html.js so no-JS still shows everything) ---------- */
@media (prefers-reduced-motion:no-preference){
  html.js .rv{opacity:0;transform:translateY(22px);
    transition:opacity .9s var(--ease),transform .9s var(--ease)}
  html.js .rv.in{opacity:1;transform:none}
  html.js .rv-wipe{clip-path:inset(0 0 102% 0);transform:translateY(.14em);
    transition:clip-path 1.05s var(--ease),transform 1.05s var(--ease)}
  html.js .rv-wipe.in{clip-path:inset(0 0 0 0);transform:none}
  html.js .rv-img{clip-path:inset(0 0 0 100%);overflow:hidden;transition:clip-path 1.15s var(--ease)}
  html.js .rv-img.in{clip-path:inset(0 0 0 0%)}
  html.js .rv-img>img{transform:scale(1.12);transition:transform 1.6s var(--ease)}
  html.js .rv-img.in>img{transform:scale(1)}
}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:10px;z-index:100;background:#fff;padding:12px 18px;border-radius:999px;box-shadow:var(--shadow-lg)}



/* =====================================================================
   hero, video background
   ===================================================================== */
.hero{position:relative;isolation:isolate;background:var(--dark);color:#fff;overflow:hidden;
  display:grid;align-items:center;min-height:100vh;min-height:100svh}
/* short landscape screens: let the content set the height instead of squashing */
@media (max-height:620px){.hero{min-height:auto}}
.hero-media{position:absolute;inset:0;z-index:0;background:var(--dark)}
.hero-media .hero-video{width:100%;height:100%;object-fit:cover;object-position:50% 56%;display:block}
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(23,19,16,.62) 0%,rgba(23,19,16,.34) 36%,rgba(23,19,16,.80) 100%),
             linear-gradient(90deg,rgba(23,19,16,.80) 0%,rgba(23,19,16,.30) 52%,rgba(23,19,16,.10) 100%)}
.hero-bg{position:absolute;inset:0;z-index:2;opacity:.07;
  background-image:linear-gradient(rgba(255,255,255,.75) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.75) 1px,transparent 1px);background-size:72px 72px;
  mask-image:linear-gradient(180deg,#000,transparent 82%)}
.hero-inner{position:relative;z-index:3;width:min(var(--container),calc(100% - var(--gutter)*2));
  margin-inline:auto;padding-top:calc(var(--header-h) + 16px);padding-bottom:calc(var(--section) + 28px)}
.hero-copy{max-width:min(100%,780px)}
.hero h1{margin-top:20px}
.hero-lead{margin-top:22px;max-width:34ch;color:rgba(255,255,255,.84);font-size:var(--t-lead);line-height:1.5}
.hero .t-eyebrow{color:var(--gold)}
.hero .t-eyebrow::before{background:var(--gold)}
.hero .btns{margin-top:36px}
.hero .btn-outline{color:#fff;border-color:rgba(255,255,255,.45)}
.hero .btn-outline:hover{background:#fff;color:var(--ink);border-color:#fff}
/* motion control, required when a background moves on its own */
.vid-toggle{position:absolute;right:var(--gutter);bottom:20px;z-index:4;display:inline-flex;align-items:center;gap:9px;
  min-height:36px;padding:0 14px;border:1px solid rgba(255,255,255,.34);border-radius:999px;background:rgba(23,19,16,.42);
  backdrop-filter:blur(8px);color:rgba(255,255,255,.86);font-family:var(--font-ui);font-size:12px;font-weight:600;
  letter-spacing:.02em;cursor:pointer;transition:background-color .25s,border-color .25s,color .25s}
.vid-toggle:hover{background:rgba(23,19,16,.72);border-color:rgba(255,255,255,.6);color:#fff}
.vid-toggle[hidden]{display:none}
.vt-ico{width:9px;height:11px;flex:none;border-left:3px solid currentColor;border-right:3px solid currentColor}
.vid-toggle.is-paused .vt-ico{border:0;width:0;height:0;border-left:9px solid currentColor;
  border-top:6px solid transparent;border-bottom:6px solid transparent}
@media (max-width:639px){.vid-toggle{right:var(--gutter);bottom:14px;font-size:11px;padding:0 11px}}
@media (prefers-reduced-motion:reduce){.hero-video{display:none}
  .hero-media{background:var(--dark) url("video/hero-poster.jpg") center/cover no-repeat}}

/* ---------- logo lockup: concept 03, the stacked rules ---------- */
.site-logo{flex-direction:row;align-items:center;gap:11px}
.lmark{width:calc(var(--logo-h)*.62);height:calc(var(--logo-h)*.62);flex:none;color:var(--accent);display:block}
.lwords{display:flex;flex-direction:column;justify-content:center}
body:not(.inner) .site-header:not(.is-stuck):not(.is-scrolled):not(:hover):not(:focus-within) .lmark{color:var(--gold)}
.fmark{display:flex;align-items:center;gap:12px}
.fmark .lmark{width:34px;height:34px;color:var(--gold)}
@media (max-width:639px){.lmark{width:26px;height:26px}}

/* =====================================================================
   ELEVATION — "the rule draws itself"
   The logo is four stacked rules. That is the brand's one mark, so the
   page repeats it at five scales: the eyebrow tick, the section opener,
   the card edge, the row underline, and the hero scroll cue. Each one
   draws left-to-right on arrival instead of appearing. One idea, no
   decoration. Everything below is additive and collapses to nothing
   under prefers-reduced-motion.
   ===================================================================== */
@media (prefers-reduced-motion:no-preference){

  /* 1. the eyebrow tick — the smallest instance of the mark */
  html.js .t-eyebrow::before{transform:scaleX(0);transform-origin:left center;
    transition:transform .75s var(--ease) .1s}
  html.js .t-eyebrow.in::before,
  html.js .rv.in .t-eyebrow::before,
  html.js .in .t-eyebrow::before{transform:scaleX(1)}

  /* 2. the section opener — an accent rule drawing over the structural hairline */
  html.js .serve,html.js .ticks,html.js .creds{position:relative}
  html.js .serve::before,
  html.js .ticks::before,html.js .creds::before{
    content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--accent);
    transform:scaleX(0);transform-origin:left center;
    transition:transform 1.1s var(--ease) .15s}
  html.js .serve.in::before,
  html.js .ticks.in::before,html.js .creds.in::before{transform:scaleX(1)}

  /* 3. the card edge — same gesture, card scale, on hover */
  .card,.post{position:relative}
  .card::after,.post::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
    background:var(--accent);transform:scaleX(0);transform-origin:left center;
    transition:transform .55s var(--ease);border-radius:var(--radius) var(--radius) 0 0}
  .card:hover::after,.post:hover::after,
  .card:focus-within::after,.post:focus-within::after{transform:scaleX(1)}
  .post-lead::after{z-index:3}

  /* 4. the numeral underline in "three ways to work with us" */
  html.js .serve-item .n{position:relative;display:inline-block;padding-bottom:10px}
  html.js .serve-item .n::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:34px;
    background:var(--accent);opacity:.45;transform:scaleX(0);transform-origin:left center;
    transition:transform .7s var(--ease) .25s}
  html.js .serve-item.in .n::after{transform:scaleX(1)}

  /* 5. the hero scroll cue — the mark turned on its side, drawing downward */
  .scrollcue i{animation:cuedraw 2.6s var(--ease) infinite}
  @keyframes cuedraw{0%{transform:scaleY(0);opacity:0}
    28%{transform:scaleY(1);opacity:1}
    72%{transform:scaleY(1);opacity:1}
    100%{transform:scaleY(1) translateY(46px);opacity:0}}


  /* 6. entrance direction varies by role, so 46 reveals stop reading as one */
  /* below 1024 there is no side room, so it rises like everything else */
  html.js .rv-side{opacity:0;transform:translateY(22px);
    transition:opacity .9s var(--ease),transform .9s var(--ease)}
  html.js .rv-side.in{opacity:1;transform:none}
  @media (min-width:1024px){html.js .rv-side{transform:translateX(26px)}
    html.js .rv-side.in{transform:none}}

  /* 7. the hero plate breathes, very slowly, so a still frame never looks frozen */
  .hero-media .hero-video{animation:plate 34s ease-in-out infinite alternate}
  @keyframes plate{from{transform:scale(1)}to{transform:scale(1.055)}}

  /* 8. featured insight image answers the hover like the cards do */
  .post-lead .pmedia img{transition:transform 1.1s var(--ease)}
  .post-lead:hover .pmedia img{transform:scale(1.045)}
}

/* grain gives the dark bands material instead of flat ink */
.credrail,.site-footer{position:relative;isolation:isolate}
.credrail>.grain,.site-footer>.grain{z-index:0;opacity:.34}
.credrail>*:not(.grain),.site-footer>*:not(.grain){position:relative;z-index:1}

/* =====================================================================
   FAR BAND — rebuilt. The photograph no longer sits under the body copy;
   it becomes a plate that fills the column instead. Copy gets a ladder:
   lede, detail, then the pitch as a bordered callout.
   ===================================================================== */
.farband{position:relative;overflow:hidden;background:var(--dark);color:#fff;isolation:isolate}
.farband-pattern{position:absolute;inset:0;z-index:0;opacity:.14;pointer-events:none;
  background-image:repeating-linear-gradient(180deg,rgba(201,164,106,.55) 0 1px,transparent 1px 13px);
  mask-image:radial-gradient(120ch 70ch at 82% 10%,#000 0%,transparent 72%)}
.farband>.grain{z-index:1}
.farband>.container{position:relative;z-index:2}
.far-grid{display:grid;gap:40px}
@media (min-width:1024px){.far-grid{grid-template-columns:1fr 1fr;gap:72px;align-items:start}}
.far-head{margin-top:16px;max-width:17ch}
.far-plate{margin:36px 0 0;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);overflow:hidden;
  position:relative;display:block}
.far-plate img{width:100%;height:clamp(200px,26vw,320px);object-fit:cover;opacity:.9;display:block}
.far-plate::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,19,16,0) 40%,rgba(23,19,16,.55) 100%)}
/* body copy now sits on flat ink, so it can be read */
.far-lede{font-size:17.5px;line-height:1.56;color:#fff;max-width:56ch}
.far-body{margin-top:16px;font-size:15.5px;line-height:1.62;color:rgba(255,255,255,.76);max-width:56ch}
.far-callout{margin:24px 0 0;padding:16px 0 16px 20px;border-left:2px solid var(--gold);
  font-size:16px;line-height:1.55;color:#fff;max-width:54ch}
.far-foot{margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px}
.far-stamp{font-family:var(--font-ui);font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.45)}

/* the patterned grounds drift, very slowly, so the dark bands are alive */
@media (prefers-reduced-motion:no-preference){
  .farband-pattern{animation:drifty 26s linear infinite}
  .cta-pattern{animation:driftx 32s linear infinite}
  @keyframes drifty{to{background-position:0 13px}}
  @keyframes driftx{to{background-position:15px 0}}
}

/* =====================================================================
   LEADERSHIP — portrait brought down to a supporting scale and graded to
   the palette. The stray ruled block behind it was reading as a glitch.
   ===================================================================== */
@media (min-width:1024px){
  .leadership{grid-template-columns:.58fr 1fr!important;gap:64px!important;align-items:center}
}
.portrait{max-width:480px}
.portrait img{aspect-ratio:4/5;max-height:clamp(360px,43vw,540px);object-position:50% 18%}
.portrait::before{left:-14px;bottom:-14px;width:46%;height:42%;opacity:.5}
.portrait figcaption{margin-top:12px;font-family:var(--font-ui);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* =====================================================================
   SLIDER — native scroll-snap, drag to pan, arrows, progress rule.
   The next card peeks so it reads as a track, not a grid.
   ===================================================================== */
.work-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.slider-nav{display:none;gap:8px}
@media (min-width:1024px){.slider-nav{display:flex}}
.snav{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;
  color:var(--ink);font-size:15px;cursor:pointer;display:grid;place-items:center;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),opacity .3s}
.snav:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff}
.snav:disabled{opacity:.3;cursor:default}
.slider{position:relative}
.slider-track{display:flex;gap:var(--gap);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px}
.slider-track>.card{flex:0 0 86%}
.slider-track::-webkit-scrollbar{display:none}
.slider-track:focus-visible{outline:2px solid var(--focus);outline-offset:6px}
.slider-track.dragging{cursor:grabbing;scroll-snap-type:none}
.slider-track>.card{scroll-snap-align:start;height:100%}
@media (min-width:640px){.slider-track>.card{flex-basis:52%}}
@media (min-width:1024px){.slider-track>.card{flex-basis:36%}}
.wcard .num+.pill{margin-top:12px}
.wcard .pill+h3{margin-top:14px}
.slider-bar{margin-top:26px;height:2px;background:var(--line);position:relative;overflow:hidden;border-radius:2px}
.slider-bar span{position:absolute;inset:0;background:var(--accent);transform-origin:left center;
  transform:scaleX(0);transition:transform .25s linear}
@media (prefers-reduced-motion:reduce){.slider-track{scroll-behavior:auto}}

/* ---------- Selected Work cards carry an image ---------- */
.wcard{padding:0;overflow:hidden}
.wmedia{position:relative;margin:0;overflow:hidden;background:var(--surface-2)}
.wmedia img{width:100%;height:clamp(150px,15vw,186px);object-fit:cover;display:block;
  transition:transform 1.1s var(--ease)}
.card:hover .wmedia img{transform:scale(1.05)}
.wmedia::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,19,16,0) 45%,rgba(23,19,16,.42) 100%)}
.wnum{position:absolute;left:18px;bottom:14px;z-index:1;font-family:var(--font-display);
  font-weight:var(--display-weight);font-size:26px;letter-spacing:-.03em;color:#fff;line-height:1}
.wbody{padding:24px}
@media (min-width:1024px){.wbody{padding:28px}}
.wbody .pill+h3{margin-top:14px}

/* =====================================================================
   CLOSING CTA — inset panel on the cream ground, after the CiviClick
   pattern: brand-filled card, mark on top, centred, facts along the base.
   ===================================================================== */
.cta-mega{padding-block:calc(var(--section)*.95)}
.cta-mega>.container{width:min(1420px,calc(100% - var(--gutter)*2))}
.ctapanel{position:relative;isolation:isolate;overflow:hidden;border-radius:24px;
  background:
    radial-gradient(95ch 62ch at 82% 8%, rgba(138,94,47,.62) 0%, rgba(138,94,47,0) 70%),
    radial-gradient(80ch 52ch at 10% 100%, rgba(201,164,106,.26) 0%, rgba(201,164,106,0) 72%),
    linear-gradient(150deg,#2B2118 0%,#1E1813 55%,#191410 100%);
  color:#fff;padding:clamp(36px,4.2vw,58px) clamp(22px,4.5vw,60px);text-align:center;
  box-shadow:0 36px 80px -48px rgba(23,19,16,.75)}
.ctapanel-pattern{position:absolute;inset:-30% -10%;z-index:0;pointer-events:none;opacity:.22;
  background-image:repeating-linear-gradient(90deg,rgba(201,164,106,.55) 0 1px,transparent 1px 16px);
  mask-image:radial-gradient(80ch 50ch at 50% 118%,#000 0%,transparent 70%)}
.ctapanel>.grain{z-index:1;opacity:.3;mix-blend-mode:soft-light}
.ctapanel-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.ctamark{width:44px;height:44px;color:var(--gold)}
.cta-mega .cta-head{margin-top:20px;font-family:var(--font-display);font-weight:var(--display-weight);
  font-size:clamp(28px,3.6vw,48px);line-height:1.05;letter-spacing:var(--display-track);max-width:17ch;color:#fff}
.cta-mega .cta-note{margin-top:16px;max-width:50ch;font-size:var(--t-body);line-height:1.6;color:rgba(255,255,255,.80)}
.ctabtn{margin-top:26px}
.ctabtn .ar{transition:transform .35s var(--ease)}
.ctabtn:hover .ar{transform:translate(4px,-4px)}
.cta-facts{margin-top:clamp(28px,3.4vw,40px);padding-top:24px;width:100%;
  border-top:1px solid rgba(255,255,255,.22);display:grid;gap:22px;text-align:left}
@media (min-width:768px){.cta-facts{grid-template-columns:repeat(3,1fr);gap:32px}}
.cta-facts li{display:flex;flex-direction:column}
.cta-facts span{font-family:var(--font-ui);font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold)}
.cta-facts b{margin-top:7px;font-family:var(--font-display);font-weight:var(--display-weight);
  font-size:16px;line-height:1.35;letter-spacing:-.02em;color:#fff}
@media (prefers-reduced-motion:no-preference){.ctapanel-pattern{animation:driftx 30s linear infinite}}

/* ---------- certification lockups (typographic, not imitation seals) ---------- */
.cert-row{display:block;padding-block:30px}
.cert-lab{font-family:var(--font-ui);font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:18px}
.certmarks{display:grid;gap:14px}
@media (min-width:700px){.certmarks{grid-template-columns:repeat(3,1fr);gap:18px}}
.certmark{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:2px 16px;
  align-items:center;padding:16px 18px;border:1px solid rgba(255,255,255,.18);border-radius:10px;
  background:rgba(255,255,255,.03);transition:border-color .35s var(--ease),background-color .35s var(--ease)}
.certmark:hover{border-color:rgba(201,164,106,.5);background:rgba(201,164,106,.07)}
.certmark b{grid-row:1/3;font-family:var(--font-display);font-weight:var(--display-weight);
  font-size:21px;letter-spacing:-.02em;color:var(--gold);line-height:1;
  padding-right:16px;border-right:1px solid rgba(255,255,255,.16);white-space:nowrap}
.certmark b span{opacity:.5;margin:0 1px}
.certmark i{font-style:normal;font-size:13px;line-height:1.35;color:rgba(255,255,255,.88)}
.certmark em{font-style:normal;font-family:var(--font-ui);font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums}

/* the scroll cue's layout is layout, not motion, so it lives outside the motion query */
.scrollcue{position:absolute;left:var(--gutter);bottom:22px;z-index:4;display:flex;align-items:center;
  gap:12px;font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.52);pointer-events:none;
  transition:opacity .5s var(--ease)}
.scrollcue i{display:block;width:1px;height:46px;background:linear-gradient(180deg,var(--gold),transparent);
  transform-origin:top center}
@media (min-width:1024px){.scrollcue{left:var(--edge)}}
body.scrolled .scrollcue{opacity:0}

/* 4. one control must stop every looping animation, not just the video (WCAG 2.2.2) */
html.motion-paused .scrollcue i,
html.motion-paused .hero-media .hero-video,
html.motion-paused .farband-pattern,
html.motion-paused .ctapanel-pattern{animation-play-state:paused!important}

/* =====================================================================
   INNER PAGE MASTHEAD — lighter than the home hero so the homepage keeps
   its weight, but the same vocabulary: eyebrow tick, plate, ruled ground.
   ===================================================================== */
.pagehero{position:relative;overflow:hidden;background:var(--surface);isolation:isolate;
  padding-top:calc(var(--header-h) + var(--section));padding-bottom:var(--section)}
.pagehero-pattern{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 15px);
  mask-image:radial-gradient(90ch 56ch at 86% 0%,#000 0%,transparent 72%)}
.pagehero-inner{position:relative;z-index:1;display:grid;gap:36px;align-items:center}
@media (min-width:1024px){.pagehero-inner{grid-template-columns:1.08fr .92fr;gap:64px}}
.pagehero-copy h1{margin-top:14px;max-width:18ch}
.pagehero-lead{margin-top:18px;max-width:52ch}
.pagehero-plate{margin:0;border-radius:var(--radius);overflow:hidden;position:relative}
.pagehero-plate img{width:100%;height:clamp(190px,24vw,330px);object-fit:cover;display:block}
.pagehero-plate::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,19,16,0) 55%,rgba(23,19,16,.28) 100%)}
@media (max-width:639px){.pagehero-plate{display:none}}

/* wireframe leftovers that need a hi-fi home */
/* "Ideal for" is a qualifying note, so it reads as a labelled footer to the
   card rather than a highlighted box, which looked like an internal comment. */
.idealfor{margin-top:0;padding-top:18px;border-top:1px solid var(--line-strong);
  font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.idealfor b{display:block;margin-bottom:8px;font-family:var(--font-ui);font-size:11px;
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.farband .idealfor{border-top-color:rgba(255,255,255,.18);color:rgba(255,255,255,.78)}
.farband .idealfor b{color:var(--gold)}
.grid-2{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:768px){.grid-2{grid-template-columns:repeat(2,1fr)}}
.farband .card{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.14);color:#fff}
.farband .card p,.farband .t-body{color:rgba(255,255,255,.76)}
.farband .card h3,.farband .card h4{color:#fff}
.farband .t-h2,.farband h2{color:#fff}
.farband .step{border-top-color:rgba(255,255,255,.22)}
.farband .step h3{color:#fff}
.inner .site-header{position:sticky;background:#fff;
  border-bottom:1px solid var(--line)}
.inner .site-header .site-logo,.inner .site-header .nav-link{color:var(--ink)}
.inner .site-header .site-logo i{color:var(--accent)}
.inner .site-header .lmark{color:var(--accent)}
.inner .site-header .header-cta{color:var(--ink);border-color:var(--line-strong)}
.inner .site-header .menu-button span{background:var(--ink)}
.inner .site-header .menu-button{border-color:var(--line-strong)}
.nav-link[aria-current="page"]{color:var(--accent)}

/* =====================================================================
   INNER PAGE CONTENT RHYTHM
   The hi-fi resets p{margin:0} for the homepage's hand-built sections.
   Transformed wireframe prose needs its spacing back.
   ===================================================================== */
.inner main p + p{margin-top:14px}
.inner main .measure p + p,
.inner main .t-lead + p{margin-top:15px}
.inner main h2 + p,.inner main h2 + div,
.inner main h3 + p,.inner main h4 + p{margin-top:12px}
.inner main .t-eyebrow + h2,.inner main .t-eyebrow + h3{margin-top:12px}
.inner main h2.t-h2{margin-top:0}
.inner main section .container > .t-eyebrow + h2{margin-top:12px}
.inner main .measure{max-width:62ch}
.inner main .grid-2,.inner main .grid-3,.inner main .steps{margin-top:34px}
.inner main .btns{margin-top:28px}
.inner main .card p + p{margin-top:12px}
.inner main .idealfor{margin-top:30px}
.inner main ul:not(.ticks):not(.certmarks):not(.cta-facts):not(.fnav):not(.capacity-points):not(.join-points) li{position:relative;
  padding-left:22px;margin-top:10px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.inner main ul:not(.ticks):not(.certmarks):not(.cta-facts):not(.fnav):not(.capacity-points):not(.join-points) li::before{content:"";
  position:absolute;left:2px;top:11px;width:7px;height:1px;background:var(--accent)}
/* two-column prose blocks need air between the columns */
.inner main .split,.inner main .split-wide{gap:40px}
@media (min-width:1024px){.inner main .split,.inner main .split-wide{gap:64px}}
.inner main section + section{border-top:0}
.inner main .t-lead{color:var(--ink-2)}
.farband .t-lead,.farband p{color:rgba(255,255,255,.78)}
.farband .t-eyebrow{color:var(--gold)}
.farband .t-eyebrow::before{background:var(--gold)}

/* prose-only sections: heading left, the reading column right */
.prose-split{display:grid;gap:22px}
@media (min-width:1024px){.prose-split{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:64px;align-items:start}}
.prose-head h2{margin-top:12px;max-width:16ch}
.prose-body{max-width:64ch;font-size:var(--t-body);line-height:1.68;color:var(--ink-2)}
.prose-body > *:first-child{margin-top:0}
.farband .prose-body{color:rgba(255,255,255,.78)}

/* ---------- contact: routes + form ---------- */
.contact-grid{display:grid;gap:40px;align-items:start}
@media (min-width:1024px){.contact-grid{grid-template-columns:1fr .92fr;gap:64px}}
.routes{margin-top:34px;border-top:1px solid var(--line-strong)}
.routes > div{padding:18px 0;border-bottom:1px solid var(--line)}
.routes dt{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}
.routes dd{margin:8px 0 0;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.routes dd a:not(.alink){color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(24px,3vw,34px);box-shadow:var(--shadow)}
.frow{display:grid;gap:0}
@media (min-width:560px){.frow{grid-template-columns:1fr 1fr;gap:0 18px}}
.field{margin:0 0 18px}
.field label{display:block;font-family:var(--font-ui);font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field input,.field textarea{width:100%;font:inherit;font-size:15.5px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm,6px);
  padding:13px 14px;transition:border-color .25s var(--ease),background-color .25s var(--ease)}
.field textarea{resize:vertical;min-height:120px}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.75}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:#fff}
.btn-block{width:100%}
.formnote{margin-top:14px;font-size:13px;color:var(--muted);text-align:center}
@media (min-width:1024px){.steps-4{grid-template-columns:repeat(4,1fr);gap:32px}}

/* the CTA ground breathes on its own, slowly, so the panel is never static */
@media (prefers-reduced-motion:no-preference){
  /* larger glows, a longer and curved path, a quicker cycle: visible, still calm */
  /* the glow is larger than the panel and only ever travels within it, so there is no dark phase */
  .ctapanel{background-size:150% 150%,150% 150%,100% 100%;animation:ctadrift 26s ease-in-out infinite alternate}
  @keyframes ctadrift{
    0%{background-position:84% 6%, 8% 96%, 0 0}
    50%{background-position:60% 34%, 34% 66%, 0 0}
    100%{background-position:42% 12%, 22% 88%, 0 0}}
  html.motion-paused .ctapanel{animation-play-state:paused!important}
}

/* =====================================================================
   AREAS OF PRACTICE — full-width mega menu, card panel, no imagery
   ===================================================================== */
.navitem{position:static;display:flex;align-items:center}
.nav-toggle{background:none;border:0;cursor:pointer;gap:7px;color:inherit;
  font-family:var(--font-ui);font-size:15px;font-weight:500;line-height:24px;letter-spacing:normal}
.caret{font-size:9px;opacity:.6;transition:transform .3s var(--ease)}
.navitem.open .caret{transform:rotate(180deg)}
.megamenu{display:none}

@media (min-width:1024px){
  .megamenu{display:block;position:absolute;left:0;right:0;top:100%;
    background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    box-shadow:0 34px 60px -34px rgba(23,19,16,.28);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
  .navitem.open .megamenu{opacity:1;visibility:visible;transform:none}
  .megamenu-inner{width:min(var(--container),calc(100% - var(--gutter)*2));margin-inline:auto;
    padding:28px 0 24px}
  .mm-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
  .mm-card{display:flex;flex-direction:column;padding:20px 18px;border:1px solid var(--line);
    border-radius:var(--radius);background:var(--white);text-decoration:none;color:var(--ink);
    transition:border-color .3s var(--ease),background-color .3s var(--ease),transform .3s var(--ease)}
  .mm-card:hover{border-color:var(--accent);background:var(--surface);transform:translateY(-3px)}
  .mm-icon{width:26px;height:26px;color:var(--accent);margin-bottom:14px;flex:none}
  .mm-card b{font-family:var(--font-ui);font-weight:600;font-size:14.5px;line-height:1.3;letter-spacing:-.015em}
  .mm-card span{margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--muted)}
  .mm-all{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:16px;
    padding:16px 18px;border-radius:var(--radius);background:var(--accent-tint);
    text-decoration:none;color:var(--ink);transition:background-color .3s var(--ease)}
  .mm-all:hover{background:#EBDFCC}
  .mm-all b{display:block;font-family:var(--font-ui);font-weight:600;font-size:14.5px}
  .mm-all em{display:block;font-style:normal;margin-top:3px;font-size:12.5px;color:var(--muted)}
  .mm-all .ar{color:var(--accent);font-size:15px;transition:transform .3s var(--ease)}
  .mm-all:hover .ar{transform:translate(3px,-3px)}
}
@media (max-width:1023px){
  .navitem{display:block;position:relative}
  .nav-toggle{width:100%;justify-content:space-between;min-height:54px;border-bottom:1px solid var(--line);
    display:flex;align-items:center;padding:0;font-size:19px;font-family:var(--font-display);color:var(--ink)}
  .navitem.open .megamenu{display:block;padding:8px 0 14px}
  .mm-grid{display:grid;gap:2px}
  .mm-card{display:block;padding:12px 0;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line)}
  .mm-icon{display:none}
  .mm-card b{display:block;font-family:var(--font-ui);font-weight:600;font-size:15px}
  .mm-card span{display:block;margin-top:3px;font-size:13px;color:var(--muted)}
  .mm-all{display:flex;justify-content:space-between;gap:16px;margin-top:12px;padding:12px 0;
    text-decoration:none;color:var(--accent)}
  .mm-all b{font-family:var(--font-ui);font-weight:600;font-size:15px}
  .mm-all em{display:block;font-style:normal;margin-top:3px;font-size:13px;color:var(--muted)}
}

/* ---------- About: bio with a portrait that stays with you ---------- */
.biolayout{display:grid;gap:40px}
@media (min-width:1024px){.biolayout{grid-template-columns:minmax(0,1fr) 330px;gap:64px;align-items:start}}
.bio-copy > .t-eyebrow{margin-bottom:12px}
.bio-copy h2{margin-bottom:18px;max-width:18ch}
.bio-copy p + p{margin-top:15px}
.bio-aside{position:relative}
@media (min-width:1024px){
  .bio-aside{position:sticky;top:calc(var(--header-h) + 28px)}
}
.bio-portrait{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)}
.bio-portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 16%;display:block}
.bio-creds{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-strong)}
.bio-creds dt{font-family:var(--font-ui);font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.bio-creds dd{margin:9px 0 0;font-family:var(--font-ui);font-weight:600;font-size:14.5px;
  line-height:1.5;letter-spacing:-.015em;color:var(--ink)}
/* four roles, four columns */
.grid-4{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:640px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.grid-4{grid-template-columns:repeat(4,1fr)}}
.rolegrid{margin-top:30px}
.rolegrid .card{padding:22px}
.rolegrid .card p{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--muted)}

/* ---------- about: credential strip + role cards ---------- */
/* The at-a-glance strip under the bio reads as four parallel facts, not a list. */
.credstrip{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:640px){.credstrip{grid-template-columns:repeat(2,1fr);gap:32px 40px}}
@media (min-width:1024px){.credstrip{grid-template-columns:repeat(4,1fr);gap:40px}}
.credstrip>div{padding-top:20px;border-top:1px solid var(--line-strong)}
.credstrip dt{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent)}
.credstrip dd{margin:12px 0 0;font-family:var(--font-display);font-size:17px;line-height:1.5;
  letter-spacing:-.005em;color:var(--ink-2)}

/* Role cards carry long titles, so they size to content rather than a fixed row. */
.rolegrid{align-items:start}
.rolegrid .card h3,.rolegrid .card h4{text-wrap:balance}
@media (min-width:1024px){.rolegrid{gap:24px}}

/* A field inside a form row must not inherit the paragraph-stacking margin. */
.frow>.field{margin-top:0}


/* A five-item set in a two-column grid leaves one alone; centre it. */
@media (min-width:768px){
  .grid-2 > :last-child:nth-child(odd){grid-column:1 / -1;
    width:calc(50% - (var(--gap) / 2));margin-inline:auto}
}

/* ---------- practice rows: a thumbnail that arrives with the description ---------- */
/* Below 1024 the rows are always open, so the thumbnail would be dead weight. */
.prow-thumb{display:none}
@media (min-width:1024px){
  /* absolute, so a collapsed row keeps its original height */
  .prow-thumb{display:block;position:absolute;right:64px;top:50%;
    width:118px;height:118px;margin-top:-59px;overflow:hidden;border-radius:var(--radius);
    pointer-events:none;opacity:0;transform:translateX(16px) scale(.95);
    transition:opacity .45s var(--ease),transform .55s var(--ease)}
  .prow-thumb img{width:100%;height:100%;object-fit:cover;display:block;
    transform:scale(1.09);transition:transform .9s var(--ease)}
  a.prow:hover .prow-thumb,a.prow:focus-visible .prow-thumb{opacity:1;transform:none}
  a.prow:hover .prow-thumb img,a.prow:focus-visible .prow-thumb img{transform:scale(1)}
  /* keep the copy clear of the thumbnail while it is showing */
  a.prow:hover .descwrap,a.prow:focus-visible .descwrap{padding-right:200px}
}
@media (prefers-reduced-motion:reduce){
  .prow-thumb,.prow-thumb img{transition:none}
  .prow-thumb img{transform:none}
}

/* =====================================================================
   FILM STAGE — the video is pinned behind both the hero and the
   credential rail, so it reads as one continuous shot that the copy
   travels over. It ends where the certification band begins.
   ===================================================================== */
.filmstage{position:relative;background:var(--dark);color:#fff}
.filmstage-media{position:sticky;top:0;height:100vh;height:100svh;z-index:0;overflow:hidden;background:var(--dark)}
.filmstage-media .hero-video{width:100%;height:100%;object-fit:cover;object-position:50% 56%;display:block}
.filmstage-media .hero-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,19,16,.62) 0%,rgba(23,19,16,.34) 36%,rgba(23,19,16,.86) 100%),
             linear-gradient(90deg,rgba(23,19,16,.80) 0%,rgba(23,19,16,.30) 52%,rgba(23,19,16,.10) 100%)}
/* every stage child after the media is pulled back up over it */
.filmstage>.hero{margin-top:-100vh;margin-top:-100svh}
.filmstage>.hero,.filmstage>.credrail{position:relative;z-index:1;background:transparent}
.filmstage>.credrail{border-top:1px solid rgba(255,255,255,.16)}
/* the rail no longer needs its own dark plate or grain, the video is the ground */
.filmstage>.credrail>.grain{display:none}

/* short landscape screens: the pinned shot would eat the whole viewport */
@media (max-height:620px){
  .filmstage-media{position:relative;height:auto;min-height:420px}
  .filmstage>.hero{margin-top:0;position:absolute;inset:0}
  .filmstage>.credrail{background:var(--dark)}
}
/* no pinning when motion is unwelcome: fall back to a static plate */
@media (prefers-reduced-motion:reduce){
  .filmstage-media{position:absolute;inset:0;height:100%}
  .filmstage>.hero{margin-top:0}
}

/* ---------- how we work: icons, and a progress run across the three steps ---------- */
.step-icon{display:block;width:30px;height:30px;margin-bottom:14px;color:var(--accent)}
.step-icon svg{width:100%;height:100%;display:block}
.step h3{margin-top:0}

/* The rule above each step fills left to right in turn, then the run restarts,
   so the section reads as a sequence rather than three parallel columns. */
.steps-run .step{position:relative}
.steps-run .step::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:left center}
@media (prefers-reduced-motion:no-preference){
  html.js .steps-run .step::after{animation:steprun 10.5s var(--ease) infinite}
  html.js .steps-run .step:nth-child(2)::after{animation-delay:1.6s}
  html.js .steps-run .step:nth-child(3)::after{animation-delay:3.2s}
}
@keyframes steprun{
  0%{transform:scaleX(0);transform-origin:left center}
  15%{transform:scaleX(1);transform-origin:left center}
  58%{transform:scaleX(1);transform-origin:right center}
  72%,100%{transform:scaleX(0);transform-origin:right center}
}
/* the pause control stops this too, same as the video */
html.motion-paused .steps-run .step::after{animation-play-state:paused}

/* ---------- cards that carry an icon ---------- */
.icard .cicon{display:block;width:28px;height:28px;margin-bottom:14px;color:var(--accent)}
.icard .cicon svg{width:100%;height:100%;display:block}

/* ---------- capacity: the teaming ask, built as a call to action ---------- */
.capacity-panel{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius-lg);
  background:var(--dark);color:#fff;text-align:center;padding:clamp(44px,6vw,76px) var(--gutter)}
.capacity-art{position:absolute;inset:0;z-index:0}
.capacity-art img{width:100%;height:100%;object-fit:cover;display:block;opacity:.34}
.capacity-art::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 0%,rgba(23,19,16,.52) 0%,rgba(23,19,16,.88) 62%,rgba(23,19,16,.96) 100%)}
.capacity-body{position:relative;z-index:1;max-width:760px;margin-inline:auto}
.capacity-body .t-eyebrow{color:var(--gold);justify-content:center}
.capacity-body .t-eyebrow::before{background:var(--gold)}
.capacity-head{margin-top:16px;color:#fff}
.capacity-lead{margin-top:20px;color:rgba(255,255,255,.82)}
.capacity-points{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:18px;text-align:left}
@media (min-width:860px){.capacity-points{grid-template-columns:repeat(3,1fr);gap:28px}}
.capacity-points li{display:grid;gap:12px;padding-top:18px;border-top:1px solid rgba(255,255,255,.2);
  font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.80)}
.cp-ico{display:block;width:26px;height:26px;color:var(--gold)}
.cp-ico svg{width:100%;height:100%;display:block}
.capacity-cta{margin-top:38px;justify-content:center}
.capacity .btn-outline{color:#fff;border-color:rgba(255,255,255,.45)}
.capacity .btn-outline:hover{background:#fff;color:var(--ink);border-color:#fff}
/* the eyebrow is a flex row elsewhere; centre it here without disturbing that */
.capacity-body .t-eyebrow{display:flex;align-items:center;gap:12px}

/* ---------- capability statement: centred, with a cover of the document ---------- */
.capability-inner{max-width:760px;margin-inline:auto;text-align:center}
.capability-copy .t-eyebrow{display:flex;align-items:center;gap:12px;justify-content:center}
.capability-lead{margin-top:18px;margin-inline:auto;max-width:56ch}
.capcover-wrap{margin-top:44px;padding:14px 20px 34px;display:flex;justify-content:center;perspective:1200px}
.capcover{position:relative;width:min(100%,318px)}
.capcover svg{display:block;width:100%;height:auto;border-radius:4px;
  box-shadow:0 2px 4px rgba(23,19,16,.08),0 18px 44px rgba(23,19,16,.18),0 42px 88px rgba(23,19,16,.12)}
/* the sheet sits at a slight angle so it reads as an object, not an illustration */
.capcover{transform:rotate(-2.2deg)}
@media (prefers-reduced-motion:no-preference){
  .capcover{transition:transform .7s var(--ease)}
  .capability-inner:hover .capcover{transform:rotate(0deg) translateY(-6px)}
}
.capcover-tag{position:absolute;right:-10px;bottom:16px;padding:7px 13px;border-radius:999px;
  background:var(--accent);color:#fff;font-family:var(--font-ui);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;box-shadow:0 6px 18px rgba(23,19,16,.22)}
.capability-cta{margin-top:40px;justify-content:center}

/* ---------- insights: featured article, cards, topics, subscribe ---------- */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.feature{display:grid;gap:36px;align-items:center}
@media (min-width:1024px){.feature{grid-template-columns:1fr 1fr;gap:64px}}
.feature-lead{margin-top:20px;color:rgba(255,255,255,.80)}
.feature .btns{margin-top:30px}
.feature-meta{margin-top:22px;font-family:var(--font-ui);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.52)}
.feature-art{margin:0;overflow:hidden;border-radius:var(--radius-lg)}
.feature-art img{width:100%;height:100%;aspect-ratio:8/5;object-fit:cover;display:block}

.pcards{display:grid;gap:var(--gap)}
@media (min-width:768px){.pcards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.pcards{grid-template-columns:repeat(3,1fr)}}
.pcard{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);
  border-radius:var(--radius-lg);background:#fff;text-decoration:none;color:inherit;
  transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
.pcard:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.pcard-art{margin:0;overflow:hidden}
.pcard-art img{width:100%;aspect-ratio:8/5;object-fit:cover;display:block;
  transition:transform .8s var(--ease)}
.pcard:hover .pcard-art img{transform:scale(1.05)}
.pcard-body{display:flex;flex-direction:column;gap:12px;padding:26px 24px 28px;flex:1}
.pcard-lead{font-size:15.5px;line-height:1.6;color:var(--muted);flex:1}
.pcard .alink{margin-top:4px}

.topicgrid{display:grid;gap:var(--gap)}
@media (min-width:640px){.topicgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.topicgrid{grid-template-columns:repeat(4,1fr)}}
.topic{padding-top:20px;border-top:1px solid var(--line-strong)}
.topic p{margin-top:10px;font-size:15.5px;line-height:1.6;color:var(--muted)}

.subscribe{margin-top:52px;padding:34px;border-radius:var(--radius-lg);background:#fff;
  border:1px solid var(--line);display:grid;gap:24px;align-items:center}
@media (min-width:860px){.subscribe{grid-template-columns:1fr auto;gap:40px;padding:40px}}
.subscribe-copy p{margin-top:10px;color:var(--muted);font-size:15.5px}
.subscribe-form{display:flex;flex-wrap:wrap;gap:12px}
.subscribe-form input{min-width:min(100%,260px);flex:1;min-height:52px;padding:0 18px;
  border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);
  font-family:inherit;font-size:16px;color:var(--ink)}
.subscribe-form input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* homepage side cards, now with a thumbnail */
.post-img{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:start}
.post-img .pthumb{overflow:hidden;border-radius:var(--radius)}
.post-img .pthumb img{width:100%;aspect-ratio:1;object-fit:cover;display:block;
  transition:transform .8s var(--ease)}
.post-img:hover .pthumb img{transform:scale(1.06)}
.post-img .pbody{display:flex;flex-direction:column;gap:10px}

/* ---------- article pages ---------- */
.art-head{padding-top:calc(var(--header-h) + 56px)}
.art-head .t-h1{margin-top:16px;max-width:19ch}
.art-stand{margin-top:22px;max-width:60ch;color:var(--ink-2)}
.art-meta{margin-top:24px;font-family:var(--font-ui);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.art-art{margin:44px 0 0}
.art-art img{width:100%;aspect-ratio:8/5;object-fit:cover;display:block;border-radius:var(--radius-lg)}
.art-body{max-width:68ch;margin:56px auto 0;font-size:17.5px;line-height:1.72;color:var(--ink-2)}
.art-body p+p{margin-top:22px}
.art-h{margin-top:40px;color:var(--ink)}
.art-h+p{margin-top:14px}
.art-next{max-width:68ch;margin:64px auto 0;padding-top:34px;border-top:1px solid var(--line-strong);
  display:flex;flex-direction:column;gap:22px}
.nextcard{display:grid;grid-template-columns:1fr auto;gap:8px 20px;align-items:center;
  padding:26px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;
  text-decoration:none;color:inherit;transition:border-color .4s var(--ease),transform .4s var(--ease)}
.nextcard:hover{border-color:var(--accent);transform:translateY(-3px)}
.nextcard-label{grid-column:1;font-family:var(--font-ui);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.nextcard-title{grid-column:1;font-family:var(--font-display);font-size:20px;line-height:1.3;
  letter-spacing:var(--display-track)}
.nextcard .ar{grid-column:2;grid-row:1 / span 2;font-size:22px;color:var(--accent)}
.art-back{align-self:flex-start}

/* The inner-page body colour is more specific than the dark-band rule, so any
   lead inside a dark band was inheriting dark ink on a near-black ground.
   These restate it at matching specificity. */
.inner main .farband .t-lead,.inner main .farband p,
.inner main .farband .feature-lead{color:rgba(255,255,255,.80)}
.inner main .farband .t-h2,.inner main .farband h2,.inner main .farband h3{color:#fff}
.inner main .farband .feature-meta{color:rgba(255,255,255,.55)}
.inner main .capacity-lead,.inner main .capacity-points li{color:rgba(255,255,255,.82)}
.inner main .capacity-head{color:#fff}

/* ---------- joining the Collective: a light plate, not another dark band ---------- */
.join{background:var(--surface)}
.join-panel{display:grid;gap:40px;align-items:center}
@media (min-width:1024px){.join-panel{grid-template-columns:1fr .92fr;gap:72px}}
.join-lead{margin-top:20px;color:var(--ink-2)}
.join-points{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:18px}
.join-points li{padding-top:18px;border-top:1px solid var(--line-strong);
  font-size:16px;line-height:1.6;color:var(--muted)}
.join-points b{display:block;margin-bottom:6px;font-family:var(--font-ui);font-size:13px;
  font-weight:600;letter-spacing:.04em;color:var(--ink)}
.join .btns{margin-top:34px}
.join-art{margin:0;overflow:hidden;border-radius:var(--radius-lg)}
.join-art img{width:100%;aspect-ratio:11/9;object-fit:cover;display:block}

/* ---------- selected work: one case study per card ---------- */
.cases{display:grid;gap:clamp(32px,5vw,64px)}
.case{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;
  scroll-margin-top:calc(var(--header-h) + 24px)}
.case-art{margin:0;overflow:hidden}
.case-art img{width:100%;aspect-ratio:17/10;max-height:380px;object-fit:cover;display:block}
.case-inner{padding:clamp(28px,4vw,52px)}
.case-head{max-width:72ch}
.case-title{margin-top:16px}
.case-note{margin-top:18px;padding-left:16px;border-left:2px solid var(--accent);
  font-size:14.5px;line-height:1.6;color:var(--muted)}
.case-body{margin-top:38px;display:grid;gap:28px}
@media (min-width:1024px){
  .case-block{display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px;align-items:start}
  .case-body{gap:34px}
}
.case-block{padding-top:22px;border-top:1px solid var(--line)}
.case-label{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin:0}
.case-text{font-size:16.5px;line-height:1.7;color:var(--ink-2);max-width:72ch}
@media (max-width:1023px){.case-text{margin-top:12px}}
.case-foot{margin-top:40px;padding-top:26px;border-top:1px solid var(--line-strong)}
.case-next{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 26px;
  border:1px solid var(--line-strong);border-radius:999px;text-decoration:none;color:var(--ink);
  transition:border-color .4s var(--ease),background .4s var(--ease),color .4s var(--ease)}
.case-next:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.case-next-label{font-family:var(--font-ui);font-size:14px;font-weight:600;letter-spacing:.02em}
.case-next .ar{font-size:17px;color:var(--accent);transition:color .4s var(--ease),transform .4s var(--ease)}
.case-next:hover .ar{color:var(--gold);transform:translateY(2px)}

/* the standalone disclaimer under the Selected Work hero */
.section-tight{padding-block:clamp(28px,4vw,44px)}
.disclaimer{max-width:76ch;padding-left:18px;border-left:2px solid var(--line-strong);
  font-size:14.5px;line-height:1.7;color:var(--muted)}

/* ---------- final polish, 20 Oct ---------- */
/* 1. how we work: the icon sits on the number's row instead of stacking under it */
.steps-run .step .step-icon{position:absolute;top:22px;right:0;margin:0;width:26px;height:26px}
@media (min-width:1024px){.steps-run .step .step-icon{top:24px}}
/* 3. roles held: cards share a row height so the row reads as one piece */
.rolegrid{align-items:stretch}
/* 7. mobile: every text link and the small controls meet the 24px target minimum with room to spare */
@media (max-width:1023px){
  .alink{min-height:40px;align-items:center}
  .fcontact a,.footer-bottom a{display:inline-block;padding:8px 0;min-height:36px}
  .vid-toggle{min-height:44px}
  .skip:focus{min-height:44px;display:inline-flex;align-items:center}
}
/* 8. about on small screens: the portrait leads, the bio follows */
@media (max-width:1023px){.biolayout .bio-aside{order:-1}}
/* 4. a quote's attribution is its own line, not a tail on the last sentence */
main blockquote cite{display:block;margin-top:16px;font-style:normal;font-family:var(--font-ui);
  font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--muted)}
/* 5. the standalone "Ideal for" note on practice pages: a quiet statement, not an empty room */
.idealfor-standalone{max-width:72ch;font-size:17px;line-height:1.65;padding-top:24px;border-top:1px solid var(--line-strong)}
.idealfor-standalone b{margin-bottom:10px}
/* 6. the hatched flourish behind the portrait has no room to read on a phone */
@media (max-width:639px){.portrait::before{display:none}}
.nowrap{white-space:nowrap}

/* ---------- header: solid fast on scroll ---------- */
.site-header{transition:background-color .22s var(--ease),border-color .22s var(--ease),backdrop-filter .22s,box-shadow .22s var(--ease)}
/* every non-transparent state is the same solid white bar: scrolled, past the band, hovered, or holding focus */
.site-header.is-scrolled,.site-header.is-stuck,.site-header:hover,.site-header:focus-within{
  background:#fff;backdrop-filter:none;box-shadow:0 1px 0 var(--line),0 10px 30px -18px rgba(23,19,16,.22)}
.site-header.is-scrolled::after,.site-header:hover::after,.site-header:focus-within::after{border-bottom-color:var(--line)}
@media (prefers-reduced-motion:reduce){.site-header{transition:none}}

/* ---------- mega menu footer: a row with a real button, not a tinted bar ---------- */
@media (min-width:1024px){
  .mm-all{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;margin-top:18px;
    padding:18px 2px 2px;border-top:1px solid var(--line);border-radius:0;background:none}
  .mm-all:hover{background:none}
  .mm-all b{font-size:15px;color:var(--ink);transition:color .3s var(--ease)}
  .mm-all:hover b{color:var(--accent)}
  .mm-go{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:0 18px 0 20px;border-radius:999px;
    background:var(--accent);color:#fff;font-family:var(--font-ui);font-size:13.5px;font-weight:600;letter-spacing:.02em;
    transition:background-color .3s var(--ease),transform .3s var(--ease)}
  .mm-all .ar{color:#fff;font-size:14px}
  .mm-all:hover .mm-go{background:var(--accent-hover);transform:translateY(-1px)}
  .mm-all:hover .ar{transform:translate(2px,-2px)}
}
@media (max-width:1023px){
  .mm-go{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-ui);font-weight:600;font-size:14px;color:var(--accent)}
}

/* ---------- "Ideal for" as the closing row of the engagement section ---------- */
.idealfor-row{margin-top:44px;padding-top:26px;border-top:1px solid var(--line-strong);display:grid;gap:8px 40px}
@media (min-width:768px){.idealfor-row{grid-template-columns:200px minmax(0,1fr);align-items:start}}
.idealfor-row b{display:block;margin:0;padding-top:3px;font-family:var(--font-ui);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.idealfor-row p{margin:0;max-width:66ch;font-size:17px;line-height:1.65;color:var(--ink-2)}
.inner main .idealfor-row{margin-top:44px}

/* ---------- selected work: case card refinements ---------- */
.case-art{position:relative}
.case-art::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;pointer-events:none;
  background:linear-gradient(180deg,rgba(23,19,16,0) 0%,rgba(23,19,16,.42) 100%)}
.case-num{position:absolute;left:clamp(20px,3vw,40px);bottom:22px;z-index:1;font-family:var(--font-display);
  font-weight:var(--display-weight);font-size:clamp(28px,3vw,40px);line-height:1;color:#fff;letter-spacing:var(--display-track)}
.case-meta{display:flex;align-items:center;justify-content:space-between;gap:16px}
.case-count{font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--muted);font-variant-numeric:tabular-nums}
.case-body{margin-top:30px}
.case-head{max-width:none}

/* ---------- capacity panel: image plate on the left, ask on the right ---------- */
.capacity-panel{display:grid;padding:0;text-align:left}
.capacity-art{position:relative;inset:auto;z-index:0;margin:0;overflow:hidden;min-height:240px}
.capacity-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;display:block}
.capacity-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,19,16,.05) 0%,rgba(23,19,16,.55) 100%)}
.capacity-body{position:relative;z-index:1;max-width:none;margin:0;padding:clamp(36px,5vw,64px) clamp(24px,4vw,56px)}
.capacity-body .t-eyebrow{justify-content:flex-start}
.capacity-points{text-align:left}
.capacity-cta{justify-content:flex-start}
@media (min-width:1024px){
  .capacity-panel{grid-template-columns:minmax(300px,.82fr) 1.18fr}
  .capacity-art{min-height:100%}
  .capacity-art::after{background:linear-gradient(90deg,rgba(23,19,16,.08) 0%,rgba(23,19,16,.10) 70%,rgba(23,19,16,.92) 100%)}
  .capacity-points{grid-template-columns:repeat(3,1fr);gap:22px}
}
@media (max-width:1023px){.capacity-art{aspect-ratio:16/9;min-height:0}.capacity-art img{position:absolute}}

/* =====================================================================
   HEADER, larger at rest and compact once the page moves (all pages)
   ===================================================================== */
:root{--header-h:72px;--logo-h:36px}
@media (min-width:1024px){:root{--header-h:96px;--logo-h:44px}}
.site-header-bar{transition:height .28s var(--ease)}
.site-logo{transition:height .28s var(--ease)}
.site-logo b{transition:font-size .28s var(--ease)}
.site-header.is-compact{--header-h:58px;--logo-h:30px}
@media (min-width:1024px){.site-header.is-compact{--header-h:66px;--logo-h:36px}}
/* the open mobile panel hangs off the bar, so the bar keeps its full size while it is open */
body.nav-open .site-header{--header-h:72px;--logo-h:36px}

/* ---------- header CTA hover in any solid state: ink fill, white text ---------- */
.inner .site-header .header-cta:hover,
.site-header.is-scrolled .header-cta:hover,.site-header.is-stuck .header-cta:hover,
.site-header:hover .header-cta:hover{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- mega menu: six cards, the sixth leads to the full list ---------- */
@media (min-width:1024px){
  .mm-grid{grid-template-columns:repeat(3,1fr);gap:14px}
  .mm-card-all{background:var(--accent-tint);border-color:rgba(138,94,47,.35)}
  .mm-card-all .mm-icon{color:var(--accent)}
  .mm-card-all:hover{background:var(--accent);border-color:var(--accent)}
  .mm-card-all:hover b,.mm-card-all:hover span,.mm-card-all:hover .mm-icon{color:#fff}
}
@media (min-width:1240px){.mm-grid{grid-template-columns:repeat(6,1fr);gap:12px}.mm-card{padding:18px 16px}.mm-card b{font-size:14px}.mm-card span{font-size:12.5px}}

/* ---------- contact: the country, quietly, behind "Where we are" ---------- */
.wherewe{position:relative;overflow:hidden;isolation:isolate}
.map-bg{position:absolute;z-index:0;right:-6%;top:50%;transform:translateY(-50%);width:min(62%,900px);pointer-events:none;opacity:.55;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 32%);mask-image:linear-gradient(90deg,transparent 0%,#000 32%)}
.map-bg img{width:100%;height:auto;display:block}
.wherewe .container{position:relative;z-index:1}
@media (max-width:1023px){.map-bg{width:120%;right:-40%;top:auto;bottom:-10%;transform:none;opacity:.35}}

/* =====================================================================
   INNER HEROES: the plate bleeds to the right edge, sits on an offset
   hairline frame, and shows on phones too.
   ===================================================================== */
.pagehero-inner{align-items:center}
@media (min-width:1024px){.pagehero-inner{grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);gap:72px}}
.pagehero-plate{margin:0;padding:0 18px 18px 0;border-radius:0;overflow:visible;position:relative;isolation:isolate}
.pagehero-plate img{width:100%;height:clamp(240px,31vw,460px);object-fit:cover;display:block;border-radius:var(--radius-lg)}
.pagehero-plate::after{inset:0 18px 18px 0;border-radius:var(--radius-lg)}
/* the frame: a hairline rectangle offset down and right, behind the photograph */
.pagehero-plate::before{content:"";position:absolute;inset:18px 0 0 18px;border:1px solid var(--accent);opacity:.5;
  border-radius:var(--radius-lg);z-index:-1}
@media (min-width:1024px){
  .pagehero-plate{margin-right:calc(-1 * max(var(--gutter),(100vw - var(--container)) / 2))}
  .pagehero-plate img,.pagehero-plate::after{border-top-right-radius:0;border-bottom-right-radius:0}
  .pagehero-plate::before{right:0;border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}
  .pagehero-plate{padding-right:0}
  .pagehero-plate::after{right:0}
  /* a thin rule between the copy and the plate */
  .pagehero-copy{position:relative;padding-right:36px}
  .pagehero-copy::after{content:"";position:absolute;right:0;top:8%;height:84%;width:1px;background:var(--line-strong)}
}
@media (max-width:639px){
  .pagehero-plate{display:block;margin:28px calc(-1 * var(--gutter)) 0;padding:0}
  .pagehero-plate img{height:56vw;border-radius:0}
  .pagehero-plate::before{display:none}
  .pagehero-plate::after{inset:0;border-radius:0}
}

/* capability cover, a touch larger */
.capcover{width:min(100%,392px)}
.capability-inner{max-width:820px}

/* capacity plate: a long, eased blend into the panel instead of a hard edge */
@media (min-width:1024px){
  .capacity-panel{grid-template-columns:minmax(320px,.92fr) 1.08fr}
  .capacity-art::after{background:linear-gradient(90deg,
    rgba(23,19,16,.04) 0%,rgba(23,19,16,.06) 40%,rgba(23,19,16,.14) 56%,rgba(23,19,16,.32) 68%,
    rgba(23,19,16,.58) 80%,rgba(23,19,16,.82) 90%,rgba(23,19,16,.97) 100%)}
}

/* ---------- about: a larger portrait that holds while the bio scrolls past it ---------- */
@media (min-width:1024px){
  .biolayout{grid-template-columns:minmax(0,1fr) 460px;gap:72px;align-items:start}
  .bio-aside{position:sticky;top:calc(66px + 28px)}
  .bio-copy p{font-size:17.5px;line-height:1.7}
}
.bio-portrait img{aspect-ratio:4/5;object-position:50% 12%}

/* credential strip: the items draw their own rule, so the list does not need one */
.credstrip{border-top:0;padding-top:0;margin-top:0}
html.js .credstrip::before{display:none}


/* about portrait: wider column, photo only, so there is text to scroll past it */
@media (min-width:1024px){
  .biolayout{grid-template-columns:minmax(0,1fr) 500px;gap:80px}
  .bio-portrait img{aspect-ratio:4/5.1}
}

/* ---------- capability download gate ---------- */
.capability-cta{display:flex;flex-direction:column;align-items:center;gap:18px}
.capability-cta .btn.is-open{background:var(--ink)}
.capgate{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:min(100%,520px);margin-top:4px;
  animation:capgate-in .35s var(--ease)}
.capgate[hidden]{display:none}
.capgate input{flex:1;min-width:min(100%,260px);min-height:52px;padding:0 18px;border:1px solid var(--line-strong);border-radius:999px;
  background:#fff;font-family:inherit;font-size:16px;color:var(--ink)}
.capgate input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.capgate input.is-invalid{border-color:#B3402B}
.capgate-note,.capgate-done{width:100%;margin:4px 0 0;text-align:center;font-size:13.5px;color:var(--muted)}
.capgate-done{font-size:16px;color:var(--ink)}
@keyframes capgate-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* =====================================================================
   CAPACITY, rebuilt as a shorter panel. Photo fills the left column to a
   clean edge; no fade. Copy column is tighter so the whole thing sits in
   roughly half a screen.
   ===================================================================== */
.capacity-art::after{display:none}
.capacity-art img{opacity:1;object-position:50% 32%}
@media (min-width:1024px){
  .capacity-panel{grid-template-columns:minmax(320px,43%) 1fr}
  .capacity-body{padding:40px 48px 40px 52px}
  .capacity-body .t-eyebrow{font-size:11px}
  .capacity-head{font-size:clamp(28px,2.5vw,34px);line-height:1.1;margin-top:12px}
  .capacity-lead{margin-top:14px;font-size:17px;line-height:1.55;max-width:50ch}
  .capacity-points{margin-top:24px;gap:18px}
  .capacity-points li{padding-top:14px;gap:10px;font-size:14.5px;line-height:1.5}
  .cp-ico{width:22px;height:22px}
  .capacity-cta{margin-top:26px}
  .capacity-cta .btn-lg{min-height:50px;padding:0 26px;font-size:15px}
}
@media (max-width:1023px){.capacity-art{aspect-ratio:3/2}}

/* ---------- homepage work cards are links ---------- */
a.wcard{text-decoration:none;color:inherit;transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
a.wcard:hover,a.wcard:focus-visible{border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--shadow-lg)}
a.wcard .wmedia img{transition:transform .8s var(--ease)}
a.wcard:hover .wmedia img{transform:scale(1.04)}
a.wcard h3{transition:color .35s var(--ease)}
a.wcard:hover h3{color:var(--accent)}

/* ---------- article template: a 16:9 banner, a touch wider than the reading column ---------- */
.art-art .container{max-width:980px}
.art-art img{aspect-ratio:16/9;max-height:560px}

/* Inner pages: the header is sticky and in flow, so nothing below it pads for its height. */
.inner .pagehero{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(40px,5vw,64px)}
.inner .art-head{padding-top:clamp(32px,4vw,48px)}

/* =====================================================================
   INNER HERO, rethought. Copy sits at the top beside a shorter plate.
   The background device is the mark itself: four bars in the logo's
   proportions and weights, fading out to the right. No stray rules.
   ===================================================================== */
.inner .pagehero{padding-top:clamp(36px,4.5vw,56px);padding-bottom:clamp(44px,5vw,64px)}
.inner .pagehero-pattern{display:none}
.pagehero-mark{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:0;pointer-events:none;
  width:min(58vw,820px);height:auto;opacity:.22}
.pagehero-inner{align-items:start}
.pagehero-copy{padding-top:10px}
.pagehero-copy::after{display:none}
.pagehero-plate{padding:0}
.pagehero-plate::before{display:none}
.pagehero-plate::after{inset:0}
.pagehero-plate img{height:clamp(220px,25vw,360px)}
@media (min-width:1024px){
  .pagehero-copy{padding-right:0}
  .pagehero-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}
}
@media (max-width:639px){.pagehero-mark{width:70vw;opacity:.18}}

/* =====================================================================
   INNER HERO: back to the centred composition with the tall bleed plate.
   Only the dead header padding stays fixed. No divider, no frame.
   ===================================================================== */
.pagehero-inner{align-items:center}
.pagehero-copy{padding-top:0}
.pagehero-plate img{height:clamp(240px,31vw,460px)}
.pagehero-mark{display:none}
.inner .pagehero{padding-top:clamp(36px,4.5vw,56px);padding-bottom:clamp(36px,4.5vw,56px)}


/* ---------- selected work: the case head stays put while its body scrolls ---------- */
.case{overflow:visible}
.case-art{border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow:hidden}
.case-head{position:sticky;top:66px;z-index:3;background:#fff;padding:16px 0 14px;border-bottom:1px solid var(--line)}
@media (max-width:1023px){.case-head{top:58px}}
.case-title{font-size:clamp(24px,2.4vw,32px);margin-top:10px}
.case-body{margin-top:26px}


/* =====================================================================
   INNER HERO, committed. Warm grained surface; the mark folded into the
   eyebrow; the photograph resting on a stack of four tonal slabs whose
   left edges step in the logo's proportions. Nothing drawn under text.
   ===================================================================== */
.pagehero--rich{background:
  radial-gradient(110ch 70ch at 100% -20%, rgba(201,164,106,.18) 0%, rgba(201,164,106,0) 70%),
  radial-gradient(70ch 48ch at -4% 112%, rgba(138,94,47,.09) 0%, rgba(138,94,47,0) 70%),
  var(--surface)}
.pagehero--rich .pagehero-copy .t-eyebrow::before{width:22px;height:16px;background:none;flex:none;
  background-image:linear-gradient(var(--accent),var(--accent)),linear-gradient(rgba(138,94,47,.55),rgba(138,94,47,.55)),
    linear-gradient(rgba(138,94,47,.78),rgba(138,94,47,.78)),linear-gradient(rgba(138,94,47,.35),rgba(138,94,47,.35));
  background-size:22px 2px,14px 2px,18px 2px,9px 2px;background-position:0 0,0 4.5px,0 9px,0 13.5px;background-repeat:no-repeat}

/* =====================================================================
   FORMS, live wiring. Honeypot parked off screen; inline error and
   success states for the contact card, capability gate and subscribe.
   ===================================================================== */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{margin:10px 0 0;font-size:14px;color:#9a2f22}
.form-done{margin:0;font-size:17px;line-height:1.55;color:var(--ink)}
.formcard .form-done{padding:8px 0}
.subscribe-form .form-done{font-size:15px}
.is-invalid{border-color:#9a2f22 !important;box-shadow:0 0 0 3px rgba(154,47,34,.12)}
/* four insight cards sit 2x2 on desktop instead of 3+1 */
@media (min-width:1024px){.pcards-4{grid-template-columns:repeat(2,1fr)}}

/* =====================================================================
   POST-APPROVAL FIXES (9 Nov 2026, approved by Yury). Not in design/hifi.
   ===================================================================== */
/* 1. Header at 1024-1179px: the full desktop bar was ~90px wider than the screen and the
      "Start a conversation" button ran off the right edge. Tighten it in that range only. */
@media (min-width:1024px) and (max-width:1179px){
  :root{--logo-h:38px}
  .site-header-bar{gap:12px}
  .nav-link{padding:0 8px;font-size:14.5px}
  .nav-link::after{left:8px;right:8px}
  .nav-toggle{font-size:14.5px}
  .header-actions{gap:10px}
  .header-cta{padding-left:20px;padding-right:20px}
}
/* 2. First-screen text is painted at once (Largest Contentful Paint on phones): the hero /
      page-hero / article heading keeps its slide-in, but no longer starts invisible. */
@media (prefers-reduced-motion:no-preference){
  html.js :is(.hero,.pagehero,.art-head) :is(.rv,.rv-wipe){opacity:1;clip-path:none}
}