/* ============================================================
   CAPE Advisory v2 — homepage bands
   Anything here that a second page needs moves to site.css first.
   ============================================================ */

/* ---------- hero slider ---------- */
.hs{position:relative;overflow:hidden;background:var(--dark-900);--rail:88px}
.hs__viewport{overflow:hidden}
.hs__track{display:flex;transition:transform var(--t-slide) var(--ease)}
.hs__slide{flex:0 0 100%;min-width:0}
.hs .hero{min-height:clamp(600px,calc(100vh - 108px),860px)}
.hs .hero__inner{padding-block:var(--s8) calc(var(--rail) + var(--s6))}
.hs .hero__h{max-width:21ch}
.hs .hero__lede{max-width:52ch;font-size:clamp(17px,1.4vw,20px)}

/* the Budget Review slide: the publication shown as an object on ink */
.hero--object .hero__inner{padding-right:clamp(0px,34vw,480px)}
.hero__object{position:absolute;z-index:-1;right:max(var(--gutter),calc((100vw - var(--container))/2 + var(--gutter)));
  top:50%;transform:translateY(calc(-50% - var(--rail)/2))}
.hero__object img{width:clamp(180px,22vw,300px);height:auto;border-radius:4px;
  transform:rotate(-3deg);outline:1px solid rgba(255,255,255,.08)}

/* the control rail: named tabs with a progress line, then count and buttons */
.hs__rail{position:absolute;left:0;right:0;bottom:0;z-index:2;border-top:1px solid var(--line-dark);
  background:linear-gradient(0deg,rgb(var(--scrim) / .55),rgb(var(--scrim) / 0));color:#fff;--focus:#fff}
.hs__rail-inner{display:flex;align-items:stretch;gap:var(--s6);min-height:var(--rail)}
.hs__tabs{flex:1;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--s5)}
.hs__tab{position:relative;display:flex;align-items:flex-start;padding:18px 0 0;border:0;background:none;
  color:var(--on-dark-2);font:600 14px/1.35 var(--font);text-align:left;cursor:pointer}
.hs__tab::before,.hs__tab::after{content:"";position:absolute;left:0;top:-1px;height:3px;border-radius:2px}
.hs__tab::before{right:0;background:transparent}
.hs__tab[aria-current="true"]{color:#fff}
.hs__tab[aria-current="true"]::before{background:rgba(255,255,255,.35)}
.hs__tab:hover{color:#fff}
.hs__tab-label{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* The red line runs the autoplay interval (slider.js sets --slider-delay). */
.hs__tab::after{width:0;background:var(--red)}
.hs__tab[aria-current="true"]::after{width:100%}
.is-rotating .hs__tab.is-timing::after{width:0;animation:hs-progress var(--slider-delay,8000ms) linear forwards}
@keyframes hs-progress{from{width:0}to{width:100%}}
.hs__ctrl{flex:none;display:flex;align-items:center;gap:var(--s3)}
.hs__count{margin-right:var(--s3);color:#fff;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.04em}

@media (max-width:760px){
  .hs{--rail:76px}
  .hs__tab{padding-top:0}
  .hs__tab-label{display:none}
  .hs__tabs{align-self:center;gap:8px}
  .hs__tab{height:24px}
  .hs__tab::before,.hs__tab::after{top:10px}
  .hs__tab::before{background:rgba(255,255,255,.3)}
  .hs__count{display:none}
  .hero--object .hero__inner{padding-right:0}
  .hero__object{top:var(--s7);right:var(--gutter);transform:none}
  .hero__object img{width:120px}
}

/* ---------- v2.3 · the video hero, after pwc.com/gx ----------
   One video under all four messages. The messages take turns in place -
   stacked in a single grid cell and crossfading - instead of sliding, and
   each headline focuses in word by word out of a blur. The rail (tabs,
   count, pause, prev/next) is the slider's own. Only v2.3 uses .hv. */
.hv{--rail:88px;min-height:clamp(600px,calc(100vh - 108px),860px)}
/* The summit loop's Academy watermark is burned into its top-right corner
   (x 72-96%, y 6-14% of the frame). Lifting the box 22% clips it however
   cover crops - the agenda band does the same. Delete with the clean master. */
.hv__media{top:-22%}
.hv__media video{width:100%;height:100%;object-fit:cover}
/* The photo scrim plus a flat dim across the whole frame. The loop has
   near-white frames (the Senate building, the staircase) that the stills'
   scrim was never tuned for, and its event branding reads quieter dimmed.
   Measured over the full 44s loop (v2.3: worst headline 6.33:1) - the
   method is build-v2/qa_video_contrast.js. */
.hv::before{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%),
  rgb(var(--scrim) / .4)}
.hv .hero__inner{padding-block:var(--s8) calc(var(--rail) + var(--s6))}
.hv__track{display:grid;transform:none!important}   /* the engine's translateX is not used here */
.hv__slide{grid-area:1 / 1;min-width:0;opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease),visibility 0s linear .5s}
.hv__slide.is-active{opacity:1;visibility:visible;transition:opacity .5s var(--ease)}
.hv .hero__h{max-width:21ch}
.hv .hero__lede{max-width:52ch;font-size:clamp(17px,1.4vw,20px)}
.hv__w{display:inline-block}
.hv__slide.is-active .hv__w{animation:hv-word .9s var(--ease) both;animation-delay:calc(var(--i) * 90ms + 120ms)}
.hv__slide.is-active .eyebrow{animation:hv-fade .5s var(--ease) both}
.hv__slide.is-active .hero__lede,
.hv__slide.is-active .hero__ctas{animation:hv-fade .7s var(--ease) both;animation-delay:calc(var(--n) * 90ms + 300ms)}
@keyframes hv-word{from{opacity:0;filter:blur(14px);transform:translateY(.15em)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes hv-fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:760px){
  .hv{--rail:76px}
  /* no left-hand text zone on a phone: flat, like the photo heroes, plus the dim */
  .hv::before{background:linear-gradient(0deg,rgb(var(--scrim) / .9) 0%,rgb(var(--scrim) / .62) 55%,rgb(var(--scrim) / .5) 100%),
    rgb(var(--scrim) / .4)}
}

/* ---------- v2.3 · thumbnail cards (What We Do, Latest Insights) ----------
   The Industries story card's 16:10 photograph, with the card's own copy and
   named link beneath; the link stretches over the whole card. */
.wcard{position:relative;display:flex;flex-direction:column;gap:var(--s3);color:var(--fg)}
.wcard .story__media{margin-bottom:var(--s2)}
.wcard .textlink{margin-top:auto}
.wcard:hover .story__media img{transform:scale(1.04)}
.wwd--thumbs .wwd__grid{row-gap:var(--s7)}

/* ---------- v3 · the pwc.com-style hero ----------
   Fills the screen under the header (utility bar + masthead), on any
   device: 100svh, so a phone's browser bars never cover the foot. min-height,
   not height - on a very short screen the hero grows rather than clips.
   Three rows: Pause loop (top right), the headline (centred), the foot
   (scroll cue centre, Watch film right). Only the loop button and the
   headlines are inside the slider root (.hpw__rot). */
html:has(.hpw){scroll-behavior:smooth}
.hpw{--veil:0 0 0;flex-direction:column;align-items:stretch;background:#000;
  min-height:calc(100vh - var(--util-h) - var(--mast-h));
  min-height:calc(100svh - var(--util-h) - var(--mast-h))}
/* PwC's overlay is pure black: the top half darkening to .8 at the edge, and
   the bottom fifth. Here the bottom band is a fixed 220px, so the small
   labels in the foot keep 4.5:1 on short screens too, and a flat .55 sits
   under both because this footage is far brighter than PwC's (theirs is
   graded dark): alone it holds white type at 4.5:1 even on a pure-white
   frame. At .45 the headline measured 3.4:1 on the loop's brightest frames
   (the aerial campus shots) - legal for large type, but no margin. */
.hpw::before{background:
  linear-gradient(to bottom,rgb(var(--veil) / .8) 0%,rgb(var(--veil) / 0) 50%),
  linear-gradient(to top,rgb(var(--veil) / .8) 0px,rgb(var(--veil) / 0) 220px),
  rgb(var(--veil) / .55)}
.hpw__rot{flex:1;display:flex;flex-direction:column;min-height:0}
.hpw__top{width:100%;display:flex;justify-content:flex-end;padding-top:var(--s4)}
.hpw__body{width:100%;flex:1;display:flex;align-items:center;padding-block:var(--s6)}
.hpw__track{display:grid;width:100%;transform:none!important}   /* slider.js writes a translateX */
/* pwc.com's size: 6.8vw (97.9px at 1440), line-height .95, in three
   left-aligned rows that never wrap (HPW_ROWS in build_home.py). The size
   is the smallest of: PwC's 6.8vw; 12svh, so the three rows fit a short
   screen; and the size at which the longest row (11.19em, "Turning
   Regulatory" in uppercase Figtree 800; in v3.1 "Business Advantage" plus
   its full stop, 11.34em; 11.4 leaves slack) fills the
   container inside its gutters - that one caps wide screens and sets
   phones, where 6.8vw would be too small. PwC is 42px at 390 with
   shorter, lower-case rows; ours reach 29px there. */
.hpw__line{grid-area:1 / 1;align-self:center;margin:0;line-height:.95;
  font-size:min(max(6.8vw,34px),12svh,calc((min(100vw,var(--container)) - 2 * var(--gutter) - 16px) / 11.4));
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s linear .4s}
.hpw__row{display:block;white-space:nowrap}
/* v3.1 · the trustline's red full stop (.persp__trust) closing each headline:
   the same .32em disc on the baseline, after the last word, revealed one
   beat after it (a .hv__w of its own). Decorative - the track is aria-hidden
   and the spoken headline has no full stop (client, 4 Oct 2026). */
.hpw__dot{width:.32em;height:.32em;margin-left:.08em;border-radius:50%;background:var(--red);vertical-align:baseline}
.hpw__line.is-active{opacity:1;visibility:visible;transition:opacity .4s var(--ease)}
/* the outgoing headline blurs out; the next one's words then focus in, one by one */
.hpw__line:not(.is-active) .hv__w{opacity:0;filter:blur(14px);transition:opacity .4s var(--ease),filter .4s var(--ease)}
.hpw__line.is-active .hv__w{animation:hv-word .9s var(--ease) both;animation-delay:calc(var(--i) * 90ms + 420ms)}
.hpw__foot{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:var(--s5);padding-bottom:var(--s6)}
.hpw__cue{grid-column:2;justify-self:center;display:inline-flex;align-items:center;gap:12px;min-height:44px;
  color:#fff;font-size:16px;font-weight:600;text-decoration:none;--focus:#fff;--fg:#fff}
/* the arrow is red at rest; hover underlines the words only (client, 4 Oct 2026) */
.hpw__cue .arr{background:var(--red);border-color:var(--red);color:#fff}
.hpw__cue:hover .hpw__cue-label{text-decoration:underline 1.5px;text-underline-offset:4px}
.hpw__film{grid-column:3;justify-self:end;display:grid;justify-items:center;gap:6px}
/* red outline and red play icon; hover fills it red (client, 4 Oct 2026) */
.hpw__filmbtn{border-color:var(--red)}
.hpw__filmbtn svg{width:16px;height:16px;fill:var(--red);transition:fill var(--t-fast)}
.hpw__filmbtn:hover{background:var(--red);border-color:var(--red);color:#fff}
.hpw__filmbtn:hover svg{fill:#fff}
.hpw__time{color:#fff;font-size:15px;font-variant-numeric:tabular-nums}
@media (max-width:760px){
  /* the arrow alone on small screens; the words stay as its name */
  .hpw__cue-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:480px){
  .hpw__foot{grid-template-columns:minmax(0,1fr);justify-items:center;gap:var(--s3)}
  .hpw__spacer{display:none}
  .hpw__film,.hpw__cue{grid-column:1;justify-self:center}
  .hpw__film{order:-1;grid-auto-flow:column;align-items:center;gap:12px}   /* the cue stays at the very bottom */
}

/* ---------- v3 · the agenda's video loop button ----------
   Outside the slider root, top right of the band, on the masthead's edge. */
.agenda__top{position:absolute;top:var(--s3);left:0;right:0;z-index:2;display:flex;justify-content:flex-end}
/* The red label needs 3:1; over this band's .78 wash the loop's bright
   frames leave it at 1.74:1. A pill of the wash colour, solid, holds 3.57:1
   whatever the video shows. The hero needs none: its black overlay is
   denser at the top (3.37:1 at worst, qa_video_contrast.js). */
.agenda__top .loopbtn{padding:0 20px;border-radius:var(--r-pill);background:rgb(var(--scrim))}
/* on small screens the band's padding is shorter than the pill's row */
.agenda.agenda--split{padding-top:max(var(--band),calc(var(--s3) + 44px + var(--s5)))}   /* .agenda is set later in this file */

/* ---------- v3 · one-line What We Do descriptions ---------- */
.card__copy--short{text-wrap:balance}

/* ---------- v3 · the film dialog (video-blocks.js, [data-vfilm]) ---------- */
.vmodal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:clamp(16px,4vw,56px);
  background:rgb(0 0 0 / .92);color:#fff;--focus:#fff}
.vmodal video{width:min(1200px,100%);max-height:calc(100vh - 140px);aspect-ratio:16 / 9;border-radius:var(--r-card);background:#000}
.vmodal__close{position:absolute;top:var(--s4);right:var(--s4);min-height:44px;padding:8px 22px;border:1.5px solid #fff;
  border-radius:var(--r-pill);background:transparent;color:#fff;font:600 15px/1.2 var(--font);cursor:pointer}
.vmodal__close:hover{background:#fff;color:var(--ink)}
.vmodal__note{max-width:52ch;font-size:17px;line-height:1.5;text-align:center}

/* ---------- practice-area strip ---------- */
.strip{border-bottom:1px solid var(--line)}
.strip__list{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:0;padding:22px 0;list-style:none;
  font-size:clamp(17px,1.6vw,22px);font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.strip__sep{color:var(--red);font-weight:300}

/* ---------- What We Do: the heading is the grid's first cell ---------- */
.wwd__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}
.wwd__intro{padding:var(--s2) var(--s5) var(--s5) 0}
.wwd__intro .sechead__intro{font-size:17px}
.wwd .card{min-height:320px}
@media (max-width:1024px){ .wwd__grid{grid-template-columns:repeat(2,minmax(0,1fr))} .wwd__intro{grid-column:1/-1} .wwd .card{min-height:0} }
@media (max-width:600px){ .wwd__grid{grid-template-columns:minmax(0,1fr)} }

/* ---------- at a glance: ink, numbers as the shout ---------- */
.glance__head{display:flex;align-items:center;gap:12px;margin-bottom:var(--s7)}
.glance__head::before{content:"";flex:none;width:28px;height:3px;border-radius:2px;background:var(--red)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;column-gap:0}
.stat{display:grid;grid-row:span 2;grid-template-rows:subgrid;align-items:end;padding:0 var(--s5);
  border-left:1px solid var(--line-dark)}
.stat:first-child{padding-left:0;border-left:0}
.stat__figure{font-size:clamp(64px,8.4vw,128px);font-weight:800;line-height:.86;letter-spacing:-.03em}
.stat__figure--text{font-size:clamp(26px,2.6vw,38px);line-height:1;letter-spacing:0;text-transform:uppercase}
.stat__label{align-self:start;max-width:26ch;margin-top:var(--s4);color:var(--on-dark-2);font-size:16px;line-height:1.45}
@media (max-width:1024px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s7)}
  .stat:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:600px){
  .stats{grid-template-columns:minmax(0,1fr)}
  .stat{padding:0;border-left:0;padding-top:var(--s5);border-top:1px solid var(--line-dark)}
  .stat:first-child{border-top:0;padding-top:0}
}

/* ---------- Featured Practice ---------- */
.fp__viewport{overflow:hidden}
.fp__track{display:flex;transition:transform var(--t-slide) var(--ease)}
.fp__slide{flex:0 0 100%;min-width:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:var(--s8);align-items:center}
.fp__media{overflow:hidden;aspect-ratio:1/1;border-radius:var(--r-card);background:var(--canvas-soft)}
.fp__media img{width:100%;height:100%;object-fit:cover}
.fp__lede{margin-top:var(--s5)}
.fp__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s6);margin:var(--s6) 0 var(--s5);
  padding:0;list-style:none;border-top:1px solid var(--line)}
.fp__list li{padding:12px 0 12px 22px;border-bottom:1px solid var(--line);font-size:16px;line-height:1.4;position:relative}
.fp__list li::before{content:"";position:absolute;left:0;top:19px;width:8px;height:8px;border-radius:50%;background:var(--red)}
.fp__ctrl{display:flex;align-items:center;justify-content:flex-end;gap:var(--s3);margin-top:var(--s6)}
.fp__dots{display:flex;gap:8px;margin-right:auto}
.fp__dot{width:36px;height:24px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.fp__dot::before{content:"";position:absolute;left:0;right:0;top:10px;height:4px;border-radius:2px;background:var(--line)}
.fp__dot[aria-current="true"]::before{background:var(--red)}
.fp__count{margin-right:var(--s3);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
@media (max-width:1024px){ .fp__slide{grid-template-columns:minmax(0,1fr);gap:var(--s6)} .fp__media{aspect-ratio:16/10} }
@media (max-width:600px){ .fp__list{grid-template-columns:minmax(0,1fr)} .fp__count{display:none} }

/* ---------- The CAPE Perspective ---------- */
.persp__cols{gap:var(--s6)}
.persp__col{padding-top:var(--s5);border-top:1px solid var(--line-dark)}
.persp__n{display:block;margin-bottom:var(--s5);font-size:14px;font-weight:800;letter-spacing:.06em}
.persp__col h3{margin-bottom:var(--s3)}
.persp__col p{color:var(--on-dark-2);font-size:17px;line-height:1.55}
.persp__trust{margin-top:var(--s9)}
.persp__trust span{display:block}
.persp__trust span:last-child{color:var(--on-dark)}
.persp__trust span:last-child::after{content:"";display:inline-block;width:.32em;height:.32em;margin-left:.08em;border-radius:50%;
  background:var(--red);vertical-align:baseline}

/* ---------- the film split ---------- */
.vsplit__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8);align-items:center}
.vsplit__copy .lede{margin-top:var(--s5)}
.vsplit__copy .btn{margin-top:var(--s6)}
.vsplit__cap{margin-top:var(--s3)}
.vsplit__more{margin-top:var(--s2)}
@media (max-width:1024px){ .vsplit__grid{grid-template-columns:minmax(0,1fr)} }

/* ---------- Industries on ink ---------- */
.stories{row-gap:var(--s7)}

/* ---------- On the regulatory agenda ---------- */
.agenda{position:relative;isolation:isolate;overflow:hidden;padding-block:var(--band);background:var(--dark-900);
  color:#fff;--fg:#fff;--fg-2:var(--on-dark-2);--focus:#fff}
.agenda__media{position:absolute;inset:0;z-index:-2}
/* The summit loop has an Academy watermark burned into its top-right corner
   (x 72-96%, y 6-14% of the frame). Lifting the box 22% clips it however
   cover crops. v1 does the same (.vband--hidemark). Delete when the
   unbranded master arrives. */
.agenda__media{top:-22%}
.agenda__media video{width:100%;height:100%;object-fit:cover}
.agenda::before{content:"";position:absolute;inset:0;z-index:-1;background:rgb(var(--scrim) / .78)}
.agenda__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s5)}
.agenda__ctrl{display:flex;align-items:center;gap:var(--s3)}
.agenda__tabs{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s6) 0 var(--s5)}
.agenda__tab{min-height:40px;padding:6px 18px;border:1.5px solid rgba(255,255,255,.4);border-radius:var(--r-chip);
  background:transparent;color:#fff;font:700 14px/1.2 var(--font);cursor:pointer}
.agenda__tab:hover{border-color:#fff}
.agenda__tab[aria-current="true"]{background:#fff;border-color:#fff;color:var(--ink)}
.agenda__viewport{overflow:hidden}
.agenda__track{display:flex;transition:transform var(--t-slide) var(--ease)}
.agenda__slide{flex:0 0 100%;min-width:0}
.agenda__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-dark)}
.agenda__item{display:flex;flex-direction:column;gap:var(--s3);min-height:240px;padding:var(--s6) var(--s5) var(--s5);
  border-right:1px solid var(--line-dark);color:#fff;text-decoration:none;transition:background-color var(--t-fast)}
.agenda__item:last-child{border-right:0}
.agenda__item:hover{background:rgba(255,255,255,.06)}
.agenda__title{font-size:var(--fs-sm);font-weight:700;line-height:1.15}
.agenda__sub{color:var(--on-dark-2);font-size:16px;line-height:1.5}
.agenda__go{display:inline-flex;align-items:center;gap:12px;margin-top:auto;font-size:15px;font-weight:700}
.agenda__item:hover .arr{background:var(--red);border-color:var(--red);color:#fff}
@media (max-width:1024px){
  .agenda__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .agenda__item:nth-child(2){border-right:0}
  .agenda__item:nth-child(n+3){border-top:1px solid var(--line-dark)}
}
@media (max-width:600px){
  .agenda__grid{grid-template-columns:minmax(0,1fr)}
  .agenda__item{min-height:0;border-right:0;border-top:1px solid var(--line-dark)}
  .agenda__item:first-child{border-top:0}
}

/* ---------- leadership: the team block ---------- */
.lead .sechead{margin-bottom:var(--s7)}
.team{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5) var(--s8);margin-top:var(--s8);
  padding-top:var(--s7);border-top:1px solid var(--line)}
.team__copy{margin-top:var(--s4);max-width:60ch;color:var(--text-2);font-size:17px}
.team__more{margin-top:var(--s5)}
@media (max-width:880px){ .team{grid-template-columns:minmax(0,1fr)} }