/* ============================================================
   CAPE Advisory v2 — shared components
   Every page loads this. A component moves here the moment a
   second page needs it (v1 learned that four times over).
   Order: base · type · layout · actions · chrome · hero ·
          sections · cards · media · footer · motion
   ============================================================ */

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--mast-h) + 16px)}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 var(--fs-body)/1.6 var(--font);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
a{color:inherit}
button{font:inherit}
[lang="bn"]{font-family:var(--font-bn)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:var(--gutter);top:-100px;z-index:200;background:#fff;color:var(--ink);
  padding:12px 20px;border-radius:var(--r-pill);font-weight:700;text-decoration:none}
.skip:focus{top:8px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- type ---------- */
/* The shout: 800, uppercase, tight. */
.t-hero{font-size:var(--fs-hero);font-weight:800;line-height:.92;letter-spacing:-.01em;text-transform:uppercase}
.t-xl{font-size:var(--fs-xl);font-weight:800;line-height:.95;letter-spacing:-.005em;text-transform:uppercase}
.t-xl--long{font-size:clamp(34px,4.1vw,58px);line-height:.98}
.t-shout{font-size:var(--fs-shout);font-weight:800;line-height:.96;text-transform:uppercase}
/* The calm sentence: 300, sentence case. */
.t-lg{font-size:var(--fs-lg);font-weight:300;line-height:1.1;letter-spacing:-.01em}
.t-md{font-size:var(--fs-md);font-weight:300;line-height:1.22}
.t-sm{font-size:var(--fs-sm);font-weight:700;line-height:1.2}
.t-xs{font-size:var(--fs-xs);font-weight:700;line-height:1.25}
.t-hero,.t-xl,.t-shout{overflow-wrap:break-word}

.eyebrow{font-size:14px;font-weight:800;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg);margin:0 0 var(--s4)}
.lede{font-size:var(--fs-body-lg);line-height:1.5;color:var(--fg);max-width:var(--measure)}
.caption{font-size:var(--fs-cap);line-height:1.45;color:var(--fg-2)}
.prose p{max-width:var(--measure)}
.prose p+p{margin-top:1em}

/* ---------- layout ---------- */
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:var(--band);background:var(--canvas);color:var(--fg);--accent-text:var(--red)}
/* Two white bands in a row are divided by a hairline on the content edge,
   never by a grey band (DESIGN.md: no mid-grey bands). */
.band:not(.band--dark)+.band:not(.band--dark){padding-top:0}
.band:not(.band--dark)+.band:not(.band--dark)>.wrap::before{content:"";display:block;height:1px;
  background:var(--line);margin-bottom:var(--band)}
.band--dark{background:var(--dark);color:#fff;--fg:#fff;--fg-2:var(--on-dark-2);--rule:var(--line-dark);
  --focus:#fff;--accent-text:#fff}
.band--flush{padding-block:0}

.grid{display:grid;gap:var(--s5)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1024px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}
}

/* ---------- actions ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;
  padding:12px 28px;border:1.5px solid transparent;border-radius:var(--r-pill);
  font:600 17px/1.4 var(--font);text-align:center;text-decoration:none;cursor:pointer;
  transition:background-color var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.btn--primary{background:var(--red);border-color:var(--red);color:var(--on-red)}
.btn--primary:hover{background:var(--red-hover);border-color:var(--red-hover)}
.btn--primary:active{background:var(--red-pressed);border-color:var(--red-pressed)}
.btn--outline{background:transparent;border-color:var(--red);color:var(--red)}
.btn--outline:hover{background:var(--red);color:#fff}
.btn--dark{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn--dark:hover{background:var(--ink);color:#fff}
.btn--light{background:transparent;border-color:#fff;color:#fff}
.btn--light:hover{background:#fff;color:var(--ink)}
.btn--sm{min-height:44px;padding:8px 20px;font-size:15px}
.band--dark .btn--outline{border-color:#fff;color:#fff}
.band--dark .btn--outline:hover{background:#fff;color:var(--ink)}

/* The text link: bold label, arrow in a circle that fills red on hover.
   inline-flex gives it a real 44px box, so no overlay tricks are needed
   for the hit target (v1 D13 needed three). */
.textlink{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0;border:0;background:none;
  color:var(--fg);font:700 16px/1.35 var(--font);text-decoration:none;cursor:pointer;text-align:left}
.textlink__label{text-decoration:underline 2px transparent;text-underline-offset:5px;
  transition:text-decoration-color var(--t-fast)}
.textlink:hover .textlink__label{text-decoration-color:currentColor}
.arr{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;border:1.5px solid currentColor;
  border-radius:50%;color:var(--fg);transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.arr svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.textlink--inline{color:inherit;font-weight:700;text-decoration:underline 1.5px;text-underline-offset:3px}
.textlink--inline:hover{text-decoration-color:var(--red)}
.textlink:hover .arr,.is-link:hover .arr{background:var(--red);border-color:var(--red);color:#fff}

.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;min-height:32px;padding:4px 14px;border-radius:var(--r-chip);
  background:var(--canvas-soft);color:var(--ink);font-size:14px;font-weight:700;line-height:1.35}
.band--dark .chip{background:rgba(255,255,255,.1);color:#fff}
.card .chip{background:#fff}
.chip--red{background:var(--red);color:#fff}

.iconbtn{flex:none;display:inline-grid;place-items:center;width:48px;height:48px;padding:0;border:1.5px solid #fff;
  border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;
  transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.iconbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.iconbtn:hover{background:var(--red);border-color:var(--red);color:#fff}
.iconbtn--line{background:transparent;border-color:var(--ink);color:var(--ink)}
.iconbtn--toggle svg{fill:currentColor;stroke:none}
.iconbtn--toggle .i-play,.iconbtn--toggle[data-paused="true"] .i-pause{display:none}
.iconbtn--toggle[data-paused="true"] .i-play{display:block}
.iconbtn[hidden]{display:none}
/* v3 · an outlined control on a dark ground (the agenda's arrows and pause) */
.iconbtn--ondark{border-color:#fff;color:#fff}

/* v3 · Pause loop / Play loop, after pwc.com: words and an icon, no frame,
   in red (client, 4 Oct 2026). slider.js or video-blocks.js keep data-paused
   and the name in step; the label shown follows data-paused. 19px bold is
   WCAG "large text" on purpose: red on near-black is under 4.5:1, so the
   label must be large to need only 3:1. Do not take it below 18.66px. */
.loopbtn{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 2px;border:0;background:none;
  color:var(--red);font:700 19px/1.2 var(--font);cursor:pointer;--focus:#fff}
.loopbtn svg{display:inline-block;width:18px;height:18px;fill:currentColor;stroke:none}
.loopbtn .i-play,.loopbtn__label--play,
.loopbtn[data-paused="true"] .i-pause,.loopbtn[data-paused="true"] .loopbtn__label--pause{display:none}
.loopbtn[data-paused="true"] .i-play,.loopbtn[data-paused="true"] .loopbtn__label--play{display:inline-block}
.loopbtn:hover .loopbtn__label{text-decoration:underline 1.5px;text-underline-offset:4px}
.loopbtn[hidden]{display:none}

/* ---------- utility bar ---------- */
.utilbar{background:var(--dark-900);color:var(--on-dark-2);font-size:13px;line-height:1;--focus:#fff}
.utilbar__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:36px}
.utilbar__group{display:flex;align-items:center;gap:10px}
.utilbar__icon{fill:none;stroke:currentColor;stroke-width:1.6}
.utilbar__item{display:inline-flex;align-items:center;gap:6px;min-height:36px;color:inherit;text-decoration:none}
.utilbar__item--current{color:#fff;font-weight:600}
.utilbar__item--soon{opacity:.75;cursor:default}
.utilbar__sep{width:1px;height:12px;background:var(--line-dark)}
.utilbar__account:hover{color:#fff}

/* ---------- masthead ---------- */
.masthead{position:sticky;top:0;z-index:100;background:var(--dark);color:#fff;--fg:#fff;--focus:#fff}
.masthead__inner{display:flex;align-items:center;gap:var(--s5);min-height:var(--mast-h)}
.masthead__logo{flex:none;display:block}
.masthead__logo img{width:auto;height:40px}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav > a:not(.btn){position:relative;display:inline-flex;align-items:center;min-height:var(--mast-h);padding:0 11px;
  color:#fff;font-size:16px;font-weight:500;text-decoration:none;white-space:nowrap}
.nav > a:not(.btn)::after{content:"";position:absolute;left:11px;right:11px;bottom:14px;height:3px;border-radius:2px;
  background:transparent;transition:background-color var(--t-fast)}
.nav > a:not(.btn):hover::after{background:var(--mute)}
.nav > a[aria-current]::after{background:var(--red)}
.nav__cta{display:none}
.masthead__cta{flex:none}
.burger{display:none}

@media (max-width:1180px){
  .masthead__cta{margin-left:auto}
  .burger{display:inline-grid;place-items:center;width:48px;height:48px;padding:0;border:0;background:none;color:#fff;cursor:pointer}
  .burger svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .burger .i-close,.burger[aria-expanded="true"] .i-open{display:none}
  .burger[aria-expanded="true"] .i-close{display:block}
  .nav{position:fixed;inset:var(--nav-top,108px) 0 0 0;z-index:99;flex-direction:column;align-items:stretch;gap:0;
    margin:0;padding:var(--s5) var(--gutter) var(--s8);background:var(--dark);overflow-y:auto;
    visibility:hidden;opacity:0;transition:opacity .22s,visibility .22s}
  .nav[data-open="true"]{visibility:visible;opacity:1}
  .nav > a:not(.btn){min-height:60px;padding:0;border-bottom:1px solid var(--line-dark);font-size:24px;font-weight:700}
  .nav > a:not(.btn)::after{left:0;right:auto;width:32px;bottom:10px}
  .nav__cta{display:inline-flex;align-self:flex-start;margin-top:var(--s6)}
}
@media (max-width:600px){
  .masthead__cta{display:none}
  .burger{margin-left:auto}
  .masthead__logo img{height:34px}
}

/* ---------- mega menu - Tabs (v3.1, client 5 Oct 2026; megamenu.py, megamenu.js) ----------
   What We Do, Industries and Insights are disclosure buttons; each opens a
   panel the width of the masthead, laid over the page, which dims. A rail of
   items at the left; the detail of the one under the pointer or focus fills
   the right. Below 1180px the panels are accordions in the burger drawer. */
.nav__item{display:flex}
.nav__btn{position:relative;display:inline-flex;align-items:center;gap:4px;min-height:var(--mast-h);padding:0 11px;border:0;
  background:none;color:#fff;font:500 16px/1 var(--font);white-space:nowrap;cursor:pointer}
.nav__btn::after{content:"";position:absolute;left:11px;right:11px;bottom:14px;height:3px;border-radius:2px;
  background:transparent;transition:background-color var(--t-fast)}
.nav__btn:hover::after{background:var(--mute)}
.nav__btn[data-current]::after,.nav__btn[aria-expanded="true"]::after{background:var(--red)}
.nav__chev{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;
  stroke-linejoin:round;transition:transform var(--t-fast)}
.nav__btn[aria-expanded="true"] .nav__chev{transform:rotate(180deg)}
.mega{position:absolute;left:0;right:0;top:100%;z-index:2;max-height:calc(100vh - var(--mast-h));overflow-y:auto;text-align:left}
.mega[hidden]{display:none}
.mega-dim{position:fixed;inset:0;z-index:99;background:rgb(0 0 0 / .4)}
.mega-dim[hidden]{display:none}
/* the chevrons widen the bar ~45px; it only just fits at 1181px */
@media (min-width:1181px) and (max-width:1260px){
  .nav--mega > a:not(.btn),.nav__btn{padding:0 7px}
  .nav--mega > a:not(.btn)::after,.nav__btn::after{left:7px;right:7px}
}

/* ---------- 02 · tabs ----------
   The rail keeps the panel's height; the active item's pane is laid over
   the space to its right. Each pane follows its rail link in the source, so
   Tab walks link, its pane, the next link (megamenu-preview.js activates an
   item on focus as well as on hover). */
.mmt{--rail:320px;border-top:1px solid var(--line);background:#fff;color:var(--ink);--fg:var(--ink);--focus:var(--red)}
.mmt__grid{position:relative;padding-block:var(--s5)}
.mmt__rail{width:var(--rail);min-height:420px;margin:0;padding:0 var(--s4) 0 0;border-right:1px solid var(--line);list-style:none}
.mmt__tab{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:52px;padding:0 var(--s3) 0 var(--s4);
  border-left:3px solid transparent;border-radius:0 var(--r-card) var(--r-card) 0;color:var(--ink);font-size:17px;font-weight:600;
  line-height:1.25;text-decoration:none}
.mmt__tab svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;transform:translateX(-4px);transition:opacity var(--t-fast),transform var(--t-fast)}
.mmt__item.is-active .mmt__tab{border-left-color:var(--red);background:var(--canvas-soft)}
.mmt__item.is-active .mmt__tab svg{opacity:1;transform:none}
.mmt__pane{position:absolute;top:var(--s5);bottom:var(--s5);left:calc(var(--gutter) + var(--rail) + var(--s6));right:var(--gutter);
  display:none;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:var(--s6);align-items:start}
.mmt__item.is-active .mmt__pane{display:grid}
.mmt__text{display:grid;justify-items:start;gap:var(--s3)}
.mmt__title{font-size:clamp(26px,2.2vw,32px);font-weight:300;line-height:1.15}
.mmt__desc{max-width:50ch;color:var(--text-2);font-size:17px;line-height:1.55}
.mmt__subs{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.mmt__subs a{display:inline-flex;align-items:center;min-height:40px;padding-block:6px;color:var(--ink);font-weight:600;line-height:1.35;
  text-decoration:none}
.mmt__subs a:hover{text-decoration:underline 2px var(--red);text-underline-offset:5px}
.mmt__img{overflow:hidden;aspect-ratio:4 / 3;border-radius:var(--r-card);background:var(--canvas-soft)}
.mmt__img img{width:100%;height:100%;object-fit:cover}
.mmt__foot{border-top:1px solid var(--line);background:var(--canvas-soft)}
.mmt__foot .wrap{padding-block:var(--s2)}

@media (max-width:1180px){
  .nav__item{display:block}
  .nav__btn{width:100%;justify-content:space-between;min-height:60px;padding:0;border-bottom:1px solid var(--line-dark);
    font-size:24px;font-weight:700}
  .nav__btn::after{left:0;right:auto;width:32px;bottom:10px}
  .nav__btn[aria-expanded="true"]::after{background:transparent}
  .nav__btn[data-current]::after{background:var(--red)}
  .nav__chev{width:20px;height:20px}
  .nav .mega{position:static;max-height:none;overflow:visible;border:0;background:transparent;color:#fff;--fg:#fff;--focus:#fff}
  .nav .mega .wrap{padding-inline:0}
  .mega-dim{display:none}
  .mmt__foot{border:0;background:transparent}
  .mmt__foot .wrap{padding:0 0 var(--s4)}
  .mmt__grid{padding-block:var(--s2)}
  .mmt__rail{width:auto;min-height:0;padding:0;border:0}
  .mmt__tab,.mmt__item.is-active .mmt__tab{min-height:48px;padding:0;border:0;background:none;color:#fff;font-weight:500}
  .mmt__tab svg{opacity:1;transform:none}
  .mmt__pane,.mmt__item.is-active .mmt__pane{position:static;display:block;padding:0 0 var(--s3) var(--s4)}
  .mmt__pane--plain,.mmt__item.is-active .mmt__pane--plain,.mmt__title,.mmt__desc,.mmt__img,.mmt__pane .textlink{display:none}
  .mmt__subs a{color:var(--on-dark-2);font-weight:500}
}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;overflow:hidden;
  min-height:clamp(560px,78vh,760px);background:var(--dark-900);color:#fff;
  --fg:#fff;--fg-2:var(--on-dark-2);--focus:#fff}
.hero--tall{min-height:clamp(600px,86vh,820px)}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
/* The scrim is what the type sits on: ink-900 at .9 under the headline's
   first third, fading to clear on the right where the photograph lives. */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(0deg,rgb(var(--scrim) / .82) 0%,rgb(var(--scrim) / 0) 50%),
  linear-gradient(90deg,rgb(var(--scrim) / .92) 0%,rgb(var(--scrim) / .8) 38%,rgb(var(--scrim) / .42) 70%,rgb(var(--scrim) / .08) 100%)}
.hero--busy::before{background:
  linear-gradient(0deg,rgb(var(--scrim) / .85) 0%,rgb(var(--scrim) / .2) 60%),
  linear-gradient(90deg,rgb(var(--scrim) / .94) 0%,rgb(var(--scrim) / .84) 40%,rgb(var(--scrim) / .45) 70%,rgb(var(--scrim) / .3) 100%)}
.hero--solid{background:var(--dark)}
.hero--solid::before{display:none}
.hero__inner{width:100%;padding-block:var(--s9) var(--s8)}
.hero__h{max-width:21ch;margin:0}
.hero__h.t-xl--long{max-width:25ch}
.hero .eyebrow{display:flex;align-items:center;gap:12px;color:#fff;margin-bottom:var(--s5)}
.hero .eyebrow::before{content:"";flex:none;width:28px;height:3px;border-radius:2px;background:var(--red)}
.hero__lede{max-width:46ch;margin-top:var(--s5);font-size:var(--fs-body-lg);line-height:1.5;color:#fff}
.hero__ctas{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.hero__mark{position:absolute;z-index:-1;right:var(--gutter);top:50%;transform:translateY(-50%);opacity:.95}
.hero__cube{width:clamp(120px,18vw,260px);height:auto}

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:var(--s6);font-size:14px;color:var(--on-dark-2)}
.crumbs a{display:inline-flex;align-items:center;min-height:24px;color:#fff;text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.45);text-underline-offset:3px}
.crumbs a:hover{text-decoration-color:#fff}
.crumbs__sep{opacity:.6}

@media (max-width:760px){
  /* No left-hand text zone on a phone: the copy lands wherever the
     photograph happens to be, so the scrim goes flat (v1 D15, same reason). */
  .hero::before{background:linear-gradient(0deg,rgb(var(--scrim) / .9) 0%,rgb(var(--scrim) / .62) 55%,rgb(var(--scrim) / .5) 100%)}
  .hero__mark{top:var(--s6);transform:none;opacity:.35}
  .hero__inner{padding-block:var(--s8) var(--s7)}
}

/* ---------- section heading ---------- */
.sechead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s5) var(--s7);
  margin-bottom:var(--s7)}
.sechead__main{max-width:64ch}
.sechead__num{display:block;margin-bottom:var(--s3);color:var(--accent-text);font-size:14px;font-weight:800;
  letter-spacing:.06em;font-variant-numeric:tabular-nums}
.sechead__intro{max-width:60ch;margin-top:var(--s4);color:var(--fg-2);font-size:var(--fs-body-lg);line-height:1.5}
.sechead__aside{flex:none}

/* ---------- statement band: the shout ---------- */
.statement .wrap{display:grid;justify-items:start;gap:var(--s5)}
.statement h2{max-width:20ch}
.statement__copy{max-width:52ch;color:var(--fg-2);font-size:var(--fs-body-lg);line-height:1.5}
.statement__ctas{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s3)}

/* ---------- cards ---------- */
.card{position:relative;display:flex;flex-direction:column;gap:var(--s3);padding:28px;border-radius:var(--r-card);
  background:var(--canvas-soft);color:var(--ink);--fg:var(--ink);--fg-2:var(--text-2);--focus:var(--red)}
.band--dark .card{background:var(--dark-800);color:#fff;--fg:#fff;--fg-2:var(--on-dark-2);--focus:#fff}
.card__num{color:var(--fg-2);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  font-variant-numeric:tabular-nums}
.card__title{font-size:var(--fs-xs);font-weight:700;line-height:1.25}
.card__copy{color:var(--fg-2);font-size:16px;line-height:1.55}
.card>.textlink,.card__foot{margin-top:auto;padding-top:var(--s3)}
/* A whole-card link: the named link stretches over the card. */
.is-link .textlink::after,.is-link .stretch::after{content:"";position:absolute;inset:0;border-radius:inherit}
.is-link:hover .card__title{text-decoration:underline 2px;text-underline-offset:5px}

/* numbered rows on hairlines — read down the first column, then the second */
.rows{margin:0;padding:0;list-style:none;columns:2;column-gap:var(--s8);border-top:1px solid var(--rule)}
.row{display:flex;align-items:baseline;gap:var(--s5);padding:22px 0;border-bottom:1px solid var(--rule);break-inside:avoid}
.row__num{flex:none;min-width:2.2ch;color:var(--accent-text);font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.row__name{font-size:20px;font-weight:600;line-height:1.35}
@media (max-width:760px){ .rows{columns:1} }

/* case card */
.case .chip{align-self:flex-start}
.case__title{font-size:var(--fs-xs);font-weight:700;line-height:1.25}
.case dl{display:grid;gap:var(--s4);margin-top:var(--s2)}
.case dt{color:var(--fg-2);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.case dd{margin:4px 0 0;font-size:16px;line-height:1.55}
.case__block--value{padding-left:var(--s4);border-left:3px solid var(--red)}

/* ---------- media cards ---------- */
.story{position:relative;display:flex;flex-direction:column;gap:var(--s3);color:var(--fg);text-decoration:none}
.story__media{overflow:hidden;aspect-ratio:16/10;border-radius:var(--r-card);background:var(--canvas-soft)}
.story__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.story:hover .story__media img{transform:scale(1.04)}
.story__title{margin-top:var(--s2);font-size:20px;font-weight:700;line-height:1.3}
.story__copy{color:var(--fg-2);font-size:15px;line-height:1.5}
.story .arr{margin-top:auto}
.story__copy{margin-bottom:var(--s3)}
.band--dark .story__media{background:var(--dark-800)}
.story:hover .arr{background:var(--red);border-color:var(--red);color:#fff}
.story:hover .story__title{text-decoration:underline 2px;text-underline-offset:5px}

.vidcard{display:flex;flex-direction:column;gap:var(--s3)}
.vidcard__thumb{position:relative;display:block;width:100%;overflow:hidden;aspect-ratio:16/9;padding:0;border:0;
  border-radius:var(--r-card);background:var(--dark);cursor:pointer}
.vidcard__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.vidcard__thumb:hover img{transform:scale(1.04)}
.vidcard__play,.vfacade__play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:64px;height:64px;
  border-radius:50%;background:#fff;transform:translate(-50%,-50%);transition:background-color var(--t-fast)}
.vidcard__play svg,.vfacade__play svg{width:24px;height:24px;margin-left:3px;fill:var(--ink);transition:fill var(--t-fast)}
.vidcard__thumb:hover .vidcard__play,.vfacade:hover .vfacade__play{background:var(--red)}
.vidcard__thumb:hover .vidcard__play svg,.vfacade:hover .vfacade__play svg{fill:#fff}
.vidcard__player{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:var(--r-card);background:#000}
.vidcard__guest{color:var(--fg-2);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.vidcard__title{font-size:20px;font-weight:700;line-height:1.3}

.vfacade{position:relative;display:block;width:100%;overflow:hidden;aspect-ratio:16/9;padding:0;border:0;
  border-radius:var(--r-card);background:var(--dark);cursor:pointer}
.vfacade img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.vfacade:hover img{transform:scale(1.03)}
.vfacade__play{width:80px;height:80px}
.vfacade__dur{position:absolute;right:16px;bottom:16px;padding:4px 12px;border-radius:var(--r-chip);
  background:rgb(var(--scrim) / .8);color:#fff;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.vsplit__player{display:block;width:100%;aspect-ratio:16/9;border-radius:var(--r-card);background:#000}
.vsplit__unavailable{margin-top:var(--s3);color:var(--fg-2);font-size:14px}

/* people: three equal cards, never a carousel */
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6)}
.person{display:flex;flex-direction:column}
.person__portrait{overflow:hidden;aspect-ratio:4/5;border-radius:var(--r-card);background:var(--canvas-soft)}
.person__portrait img{width:100%;height:100%;object-fit:cover}
.person__name{margin:var(--s5) 0 var(--s1);font-size:var(--fs-xs);font-weight:700;line-height:1.25}
.person__role{margin-bottom:var(--s4);color:var(--fg-2);font-size:15px;font-weight:600;line-height:1.4}
.person__bio{margin-bottom:var(--s3);font-size:16px;line-height:1.55}
.person__creds{margin-bottom:var(--s3);color:var(--fg-2);font-size:14px;line-height:1.5}
.person .textlink{margin-top:auto}
@media (max-width:1024px){ .people{grid-template-columns:minmax(0,1fr)} .person{display:grid;grid-template-columns:minmax(0,220px) 1fr;column-gap:var(--s6)} .person__portrait{grid-row:span 6} .person__name{margin-top:0} }
@media (max-width:600px){ .person{display:flex} .person__portrait{max-width:360px} .person__name{margin-top:var(--s5)} }

/* publications — the cover stands on a soft plinth, like a product */
.pub{display:flex;flex-direction:column;gap:var(--s3)}
.pub__plinth{display:grid;place-items:center;aspect-ratio:5/4;padding:var(--s6);border-radius:var(--r-card);background:var(--canvas-soft)}
.pub__plinth img{width:auto;max-height:100%;max-width:62%}
.pub__plinth img.pub__cover--art{box-shadow:none}
.pub__title{margin-top:var(--s2);font-size:var(--fs-xs);font-weight:700;line-height:1.25}
.pub__by{color:var(--fg-2);font-size:14px;font-weight:600;line-height:1.45}
.pub__copy{font-size:16px;line-height:1.55}
.pub__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);margin-top:auto;padding-top:var(--s3)}

/* ---------- quote band ---------- */
.quote__grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s7);align-items:start}
.cube{width:64px;height:64px}
.quote blockquote p{max-width:34ch;font-size:var(--fs-md);font-weight:300;line-height:1.25}
@media (max-width:600px){ .quote__grid{grid-template-columns:1fr;gap:var(--s5)} .cube{width:48px;height:48px} }

/* a list of short statements on hairlines, each with a red dot */
.dotlist{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.dotlist li{position:relative;padding:12px 0 12px 22px;border-bottom:1px solid var(--rule);font-size:16px;line-height:1.45}
.dotlist li::before{content:"";position:absolute;left:0;top:19px;width:8px;height:8px;border-radius:50%;background:var(--red)}
.band--dark .dotlist li::before{background:#fff}

/* ---------- two columns ---------- */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7) var(--s9)}
.pair h2{margin-bottom:var(--s5)}
.pair .lede{color:var(--fg-2)}
.subcard{min-height:200px}
.subcard .chip{align-self:flex-start}
@media (max-width:880px){ .pair{grid-template-columns:minmax(0,1fr)} }

/* related work & reading: rows of links */
.links{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.links li{border-bottom:1px solid var(--rule)}
.links .textlink{display:flex;justify-content:space-between;width:100%;min-height:64px}
.links-h{margin-bottom:var(--s4);color:var(--fg-2);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}

/* ---------- footer ---------- */
.site-footer{padding-top:var(--s9);background:var(--dark);color:#fff;--fg:#fff;--focus:#fff}
.footer__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s6);
  padding-bottom:var(--s7);border-bottom:1px solid var(--line-dark)}
.footer__brand img{width:auto;height:48px}
.footer__family{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4)}
.footer__family-label{color:var(--on-dark-2);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.footer__family img{width:auto;height:40px}
.footer__cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s6);padding-block:var(--s7)}
.footer__h{margin-bottom:var(--s4);color:var(--on-dark-2);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.footer__col ul{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.footer__col a{display:inline-block;padding:6px 0;color:#fff;font-size:15px;line-height:1.4;text-decoration:none}
.footer__col a:hover{text-decoration:underline;text-underline-offset:3px}
.footer__legal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6);padding-block:var(--s6);
  border-top:1px solid var(--line-dark)}
.footer__legal p{color:var(--on-dark-2);font-size:13px;line-height:1.65}
.footer__base{padding-block:var(--s4);background:var(--dark-900);color:var(--on-dark-2);font-size:13px}
.footer__base a{color:#fff}
@media (max-width:1024px){ .footer__cols{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:600px){ .footer__cols{grid-template-columns:repeat(2,minmax(0,1fr))} .footer__legal{grid-template-columns:1fr} }

/* ---------- prototype note (removed before launch) ---------- */
.proto-note{padding-block:var(--s4);background:#FFF6CC;color:var(--ink);font-size:14px;line-height:1.5}
.proto-note code{font-size:13px}

/* ---------- design-preview pages (prototype only; build-v2/preview.py) ----------
   The frame of cta-preview.html and megamenu-preview.html: an intro with an
   index of the options, and a label strip above each one. */
.pv-intro .wrap{display:grid;justify-items:start;gap:var(--s4)}
.pv-intro .eyebrow{margin:0}
.pv-intro__lede{max-width:64ch;color:var(--text-2);font-size:var(--fs-body-lg);line-height:1.5}
.pv-index{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);margin:var(--s3) 0 0;padding:0;list-style:none}
.pv-index a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 18px;border:1.5px solid var(--ink);
  border-radius:var(--r-pill);color:var(--ink);font-size:15px;font-weight:600;text-decoration:none;
  transition:background-color var(--t-fast),color var(--t-fast)}
.pv-index a:hover{background:var(--ink);color:#fff}
.pv-index b{font-weight:800;font-variant-numeric:tabular-nums}
.pv-label{border-top:1px solid var(--line);background:var(--canvas-soft);color:var(--ink)}
.pv-label .wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px var(--s4);padding-block:var(--s4)}
.pv-label__n{grid-row:span 2;font-size:30px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.pv-label__t{font-size:17px;font-weight:700;line-height:1.3}
.pv-label__d{max-width:100ch;color:var(--text-2);font-size:15px;line-height:1.5}


/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}