/* ==========================================================================
   Clairvynt homepage v2
   --------------------------------------------------------------------------
   Every rule is scoped under .hv2. styles.css already owns .hero, .container,
   .btn, .section, .news and .cta, so an unscoped port would restyle every
   other page on the site.

   Brand values are declared here as literals rather than consumed from
   brand-tokens.css on purpose: the design-system-alignment branch is
   rewriting that file concurrently, and coupling to token names that are
   mid-change would guarantee a merge conflict. Values match the Brand
   Guidelines Quick Reference and the August 2026 contrast fix.
   ========================================================================== */

.hv2{
  /* Six authorised brand colours */
  --hv2-dark-navy:#000432;
  --hv2-deep-navy:#03264E;
  --hv2-deep-teal:#004262;
  --hv2-slate-blue:#4B7696;
  --hv2-sage:#A2BDBD;
  --hv2-ice:#D8EAE9;

  /* Derived text and surfaces, post-contrast-fix */
  --hv2-fg-1:#004262;
  --hv2-fg-2:#416581;          /* 6.17:1 on white, 5.56:1 on surface */
  --hv2-on-dark-1:#EAF4F7;
  --hv2-on-dark-2:#94AFBC;
  --hv2-on-dark-3:#7C9DB5;
  --hv2-surface:#EFF4F5;
  --hv2-border:#C6D5D5;
  --hv2-border-default:rgba(162,189,189,.18);

  --hv2-success:#1A7A4C;

  --hv2-font-body:"Clarity City",Verdana,ui-sans-serif,system-ui,sans-serif;
  --hv2-font-head:"Archivo",Verdana,ui-sans-serif,system-ui,sans-serif;
  --hv2-font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --hv2-radius-sm:4px; --hv2-radius-md:8px; --hv2-radius-lg:12px; --hv2-radius-xl:16px;
  --hv2-shadow-md:0 4px 16px rgba(0,4,50,.08);
  --hv2-shadow-lg:0 8px 32px rgba(0,4,50,.12);
  --hv2-ease:cubic-bezier(.25,.1,.25,1);
  --hv2-dur:200ms;
}

.hv2 *{box-sizing:border-box}
.hv2{font-family:var(--hv2-font-body);font-weight:300;color:var(--hv2-fg-1);line-height:1.6}
.hv2 .hv2-container{
  width:min(var(--container),calc(100% - 2 * var(--gutter)));
  margin-inline:auto;
}

/* ---------- shared bits ---------- */
.hv2 h1,.hv2 h2,.hv2 h3{
  font-family:var(--clv-font-heading);font-weight:var(--clv-weight-regular);
}
.hv2 h1{font-size:var(--clv-size-2xl)}
.hv2 h2{font-size:var(--clv-size-xl)}
.hv2 h3{font-size:var(--clv-size-md)}
.hv2 .hv2-overline{
  font-family:var(--hv2-font-head);font-weight:500;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--hv2-slate-blue);
  display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;
}
.hv2 .hv2-overline::before{content:"";width:24px;height:1px;background:var(--hv2-slate-blue)}
.hv2 .hv2-on-dark .hv2-overline{color:var(--hv2-sage)}
.hv2 .hv2-on-dark .hv2-overline::before{background:var(--hv2-sage)}

/* Buttons: brand variants 1, 2, 6 only. An eighth variant is a defect. */
.hv2 .hv2-btn{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--hv2-font-body);
  font-weight:500;font-size:15px;padding:12px 24px;border-radius:var(--hv2-radius-md);
  border:none;cursor:pointer;text-decoration:none;min-height:44px;
  transition:all var(--hv2-dur) var(--hv2-ease);
}
.hv2 .hv2-btn--primary{background:var(--hv2-deep-teal);color:#fff}
.hv2 .hv2-btn--primary:hover{background:var(--hv2-slate-blue);color:#fff}
.hv2 .hv2-btn--secondary{background:transparent;color:var(--hv2-deep-teal);border:1.5px solid var(--hv2-deep-teal)}
.hv2 .hv2-btn--secondary:hover{background:var(--hv2-deep-teal);color:#fff}
.hv2 .hv2-btn--rev{background:#fff;color:var(--hv2-deep-teal)}
.hv2 .hv2-btn--rev:hover{background:var(--hv2-ice);color:var(--hv2-deep-teal)}
.hv2 .hv2-btn--ghost{background:transparent;color:var(--hv2-on-dark-1);border:1.5px solid rgba(255,255,255,.3)}
.hv2 .hv2-btn--ghost:hover{border-color:var(--hv2-sage);color:var(--hv2-sage)}
.hv2 .hv2-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #416581}

/* ---------- hero ---------- */
/* Photographic hero: the offshore-at-dusk image (AI-generated, from main),
   graded to the brand. Three stacked layers over the webp:
   (1) a left-weighted navy scrim so the headline clears WCAG AA regardless of
   what sits behind it, (2) a bottom-up navy wash for depth into the section
   below, (3) a low navy multiply that cools the warm sunset toward Dark Navy.
   The navy background-color is the reduced-motion / slow-connection fallback.

   Grade C (2026-08-19). The multiply previously ran .55/.30 across the whole
   photograph, which darkened the operator and sky rather than the text area
   and made the band read as a silhouette. Because the copy sits in the left
   column, layer 1 keeps its .92 head and only its tail is opened up, so the
   text keeps its protection while the image lifts. Measured worst case (the
   lightest pixel inside each text box at 2560): headline 5.46, lead 5.41,
   proof 13.01, against required 3.0 / 4.5 / 4.5. A further step down on the
   multiply drops the lead to 3.37 and fails AA, so this is near the floor.

   Grade D (2026-09-09). The daylight wind-farm frame is far brighter than the
   dawn one, and the lead fell to 3.54 at 1440 under grade C. Layer 1's head
   and tail both come up (.94 / .72 at 40% / .30 at 70%) so the copy column
   darkens while the turbines on the right stay in daylight. Measured the same
   way: at 2560 headline 8.58, lead 5.52; at 1440 headline 8.42, lead 5.33.
   Below 1440 the two banded rules further down take over. */
.hv2 .hv2-hero{
  position:relative;
  background-color:var(--hv2-dark-navy);
  /* Stacked grade first (the narrowest layout), then min-width bands below, so any
     fractional viewport width lands in exactly one band. */
  background-image:
    linear-gradient(180deg, rgba(0,4,50,.66) 0%, rgba(0,4,50,.58) 58%, rgba(0,4,50,.46) 100%),
    linear-gradient(0deg, rgba(0,4,50,.52) 0%, rgba(0,4,50,0) 45%),
    linear-gradient(0deg, rgba(3,38,78,.28), rgba(0,4,50,.10)),
    url("/assets/img/heroes/offshore-windfarm-day.webp");
  background-repeat:no-repeat;
  background-size:cover,cover,cover,cover;
  background-position:center,center,center,center 30%;
  background-blend-mode:normal,normal,multiply,normal;
  color:var(--hv2-on-dark-1);
  padding:104px 0 clamp(80px,10vw,132px);
}
/* Between the stacked layout and the wide desktop the copy column still reaches
   far across the frame (the lead ends at 95% of the width at 768, 72% at 1024,
   58% at 1280), so grade D's release at 70% would sit under the lead. Two bands
   hold the ramp further right; grade D takes over from 1440, where the lead ends
   before 55%. Probed 2026-09-09 the same way as grade D at 768, 919, 920, 1024,
   1194, 1279, 1280, 1440, 1920 and 2560: headline and lead pass on every width;
   the tightest is the stacked layout at 390 (lead 4.94). */
@media (min-width:768px){
  .hv2 .hv2-hero{
    background-image:
      linear-gradient(102deg, rgba(0,4,50,.94) 0%, rgba(0,4,50,.86) 40%, rgba(0,4,50,.78) 70%, rgba(0,4,50,.66) 92%, rgba(0,4,50,.50) 100%),
      linear-gradient(0deg, rgba(0,4,50,.82) 0%, rgba(0,4,50,.20) 26%, rgba(0,4,50,0) 55%),
      linear-gradient(0deg, rgba(3,38,78,.28), rgba(0,4,50,.10)),
      url("/assets/img/heroes/offshore-windfarm-day.webp");
    background-position:center,center,center,center 38%;
  }
}
@media (min-width:1024px){
  .hv2 .hv2-hero{
    background-image:
      linear-gradient(102deg, rgba(0,4,50,.94) 0%, rgba(0,4,50,.82) 40%, rgba(0,4,50,.70) 70%, rgba(0,4,50,.40) 88%, rgba(0,4,50,.16) 100%),
      linear-gradient(0deg, rgba(0,4,50,.82) 0%, rgba(0,4,50,.20) 26%, rgba(0,4,50,0) 55%),
      linear-gradient(0deg, rgba(3,38,78,.28), rgba(0,4,50,.10)),
      url("/assets/img/heroes/offshore-windfarm-day.webp");
  }
}
/* Grade D, the wide desktop grade described above. */
@media (min-width:1440px){
  .hv2 .hv2-hero{
    background-image:
      linear-gradient(102deg, rgba(0,4,50,.94) 0%, rgba(0,4,50,.72) 40%, rgba(0,4,50,.30) 70%, rgba(0,4,50,0) 100%),
      linear-gradient(0deg, rgba(0,4,50,.82) 0%, rgba(0,4,50,.20) 26%, rgba(0,4,50,0) 55%),
      linear-gradient(0deg, rgba(3,38,78,.28), rgba(0,4,50,.10)),
      url("/assets/img/heroes/offshore-windfarm-day.webp");
  }
}
.hv2 .hv2-hero__inner{
  width:min(var(--container),calc(100% - 2 * var(--gutter)));
  margin-inline:auto;text-align:left;padding:0;
}
/* One clamp, no breakpoint multipliers: the old calc(--clv-size-2xl * 1.24)
   with 1.1/1.05 media overrides stepped the rendered size at 768, 1024 and
   1440. 40 -> 64px continuously, ceiling reached near 1345px. */
.hv2 .hv2-hero h1{
  font-size:clamp(2.5rem, 1.55rem + 2.9vw, 4rem);line-height:1.04;
  letter-spacing:-.02em;color:#fff;margin:0 0 22px;text-wrap:balance;max-width:17ch;
  text-shadow:0 2px 28px rgba(0,4,50,.5);
}
.hv2 .hv2-hero__lead{
  font-size:20px;font-weight:400;line-height:1.55;color:var(--hv2-on-dark-1);
  max-width:50ch;margin:0 0 36px;text-shadow:0 1px 16px rgba(0,4,50,.55);
}
.hv2 .hv2-hero__ctas{display:flex;gap:12px;justify-content:flex-start;flex-wrap:wrap}
/* Evidence-gutter proof line: a slate rule + verbatim/reference/review markers
   echo what Synapse does to documents, and give JetBrains Mono a real job. */
.hv2 .hv2-hero__proof{
  font-size:15px;color:var(--hv2-ice);margin:30px 0 0;max-width:56ch;
  padding-left:18px;border-left:2px solid var(--hv2-sage);
  text-shadow:0 1px 12px rgba(0,4,50,.55);
}
.hv2 .hv2-hero__proof a{color:var(--hv2-sage);font-weight:500}
.hv2 .hv2-hero__proof a:hover{color:#fff}

/* ---------- sections ---------- */
.hv2 .hv2-section{padding:96px 0}
.hv2 .hv2-section--surface{background:var(--hv2-surface)}
.hv2 .hv2-section--dark{background:var(--hv2-dark-navy);color:var(--hv2-on-dark-1)}
.hv2 .hv2-section h2{
  line-height:1.12;
  letter-spacing:-.015em;margin:0 0 18px;color:var(--hv2-fg-1);max-width:720px;text-wrap:balance;
}
.hv2 .hv2-section--dark h2{color:#fff}
.hv2 .hv2-section__sub{font-size:18px;font-weight:300;color:var(--hv2-fg-2);max-width:620px;line-height:1.55;margin:0}
.hv2 .hv2-section--dark .hv2-section__sub{color:var(--hv2-on-dark-2)}

/* ---------- feature blocks ---------- */
.hv2 .hv2-feature{display:grid;grid-template-columns:1.05fr 1fr;gap:72px;align-items:center}
.hv2 .hv2-feature--flip{grid-template-columns:1fr 1.05fr}
.hv2 .hv2-feature__lead{font-size:17px;line-height:1.65;color:var(--hv2-fg-2);margin:0 0 28px}
.hv2 .hv2-feature ul{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:14px}
.hv2 .hv2-feature li{
  display:grid;grid-template-columns:20px 1fr;gap:12px;font-size:15px;
  color:var(--hv2-fg-1);line-height:1.55;align-items:start;
}
.hv2 .hv2-feature li::before{
  content:"";width:14px;height:14px;border:1.5px solid var(--hv2-sage);border-radius:50%;margin-top:5px;
  background:radial-gradient(circle,var(--hv2-sage) 0%,var(--hv2-sage) 30%,transparent 32%);
}
.hv2 .hv2-feature__ctas{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.hv2 .hv2-caselink{
  display:inline-flex;align-items:center;gap:8px;font-size:15px;color:#416581;
  text-decoration:none;margin:0 0 28px;
}
.hv2 .hv2-caselink:hover{color:var(--hv2-fg-1)}
.hv2 .hv2-caselink svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.75;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:transform var(--hv2-dur)}
.hv2 .hv2-caselink:hover svg{transform:translateX(3px)}
.hv2 .hv2-status{
  display:flex;width:fit-content;align-items:center;gap:8px;font-family:var(--hv2-font-head);
  font-weight:500;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  /* fg-2, not slate-blue. Slate blue clears 4.5:1 on white but only reaches 4.37:1 on
     --hv2-surface, and this badge only ever appears on a surface-tinted section. */
  color:var(--hv2-fg-2);margin:0 0 14px;
}
.hv2 .hv2-status .dot{width:7px;height:7px;border-radius:50%;background:var(--hv2-success)}

/* ---------- workpack strip ---------- */
.hv2 .hv2-workpack{
  margin-top:64px;border:1px dashed var(--hv2-border);border-radius:var(--hv2-radius-xl);
  padding:32px 36px;display:flex;align-items:center;gap:32px;justify-content:space-between;flex-wrap:wrap;
}
.hv2 .hv2-workpack h3{margin:0 0 6px;color:var(--hv2-fg-1)}
.hv2 .hv2-workpack p{font-size:14.5px;color:var(--hv2-fg-2);margin:0;max-width:640px}
.hv2 .hv2-workpack__soon{
  font-family:var(--hv2-font-head);font-weight:500;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--hv2-fg-2);border:1px solid var(--hv2-border);
  border-radius:9999px;padding:7px 16px;white-space:nowrap;
}

/* ---------- security ---------- */
.hv2 .hv2-secgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.hv2 .hv2-seccard{
  background:var(--hv2-deep-navy);border:1px solid #0D3B54;
  border-radius:var(--hv2-radius-lg);padding:28px;
}
.hv2 .hv2-seccard svg{width:24px;height:24px;stroke:var(--hv2-sage);stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px}
.hv2 .hv2-seccard h3{color:var(--hv2-on-dark-1);margin:0 0 8px}
.hv2 .hv2-seccard p{font-size:14px;line-height:1.6;color:var(--hv2-on-dark-2);margin:0}
.hv2 .hv2-seclink{display:inline-flex;align-items:center;gap:8px;margin-top:36px;color:var(--hv2-sage);
  text-decoration:none;font-size:15px}
.hv2 .hv2-seclink:hover{color:var(--hv2-on-dark-1)}
.hv2 .hv2-seclink svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.75;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- insights ---------- */
.hv2 .hv2-news{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin-top:56px}
.hv2 .hv2-newslead,.hv2 .hv2-newsmini{text-decoration:none;background:#fff;
  border:1px solid rgba(3,38,78,.10);border-radius:var(--hv2-radius-lg);overflow:hidden;
  box-shadow:0 1px 2px rgba(0,4,50,.05);transition:transform var(--hv2-dur),box-shadow var(--hv2-dur)}
.hv2 .hv2-newslead:hover,.hv2 .hv2-newsmini:hover{transform:translateY(-3px);
  box-shadow:0 4px 16px rgba(0,4,50,.08)}
.hv2 .hv2-newslead{display:flex;flex-direction:column}
.hv2 .hv2-newslead__img{display:block;aspect-ratio:2/1;overflow:hidden}
.hv2 .hv2-newslead__img img,.hv2 .hv2-newsmini__img img{width:100%;height:100%;object-fit:cover;display:block}
.hv2 .hv2-newslead__body{display:flex;flex-direction:column;gap:8px;padding:20px 20px 24px}
.hv2 .hv2-newslead__body h3{font-size:24px;line-height:1.25;letter-spacing:-.005em;color:var(--hv2-fg-1);margin:0}
.hv2 .hv2-news__side{display:flex;flex-direction:column;gap:24px}
.hv2 .hv2-newsmini{display:grid;grid-template-columns:160px 1fr;flex:1}
.hv2 .hv2-newsmini__img{display:block;overflow:hidden}
.hv2 .hv2-newsmini__img--contain{background:var(--hv2-surface);padding:8px}
.hv2 .hv2-newsmini__img--contain img{object-fit:contain}
.hv2 .hv2-newsmini__body{display:flex;flex-direction:column;gap:6px;padding:16px}
.hv2 .hv2-newsmini__body h3{font-size:16px;line-height:1.3;color:var(--hv2-fg-1);margin:0}
.hv2 .hv2-news__eyebrow{font-family:var(--hv2-font-mono);font-weight:500;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--hv2-fg-2)}
.hv2 .hv2-news__date{font-family:var(--hv2-font-mono);font-size:12px;color:var(--hv2-fg-2);letter-spacing:.03em}
.hv2 .hv2-allnews{margin-top:40px}

/* ---------- closing CTA ---------- */
/* Split panel: copy on solid navy, the photograph beside it without a scrim.
   The photo column is the taller of the two and sets the panel height; the
   copy centres against it. */
.hv2 .hv2-cta{padding:0 0 96px}
.hv2 .hv2-cta__panel{
  background:var(--hv2-dark-navy);border-radius:var(--hv2-radius-xl);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:stretch;
}
.hv2 .hv2-cta__copy{
  display:flex;flex-direction:column;justify-content:center;gap:16px;
  padding:64px 56px 64px 64px;
}
.hv2 .hv2-cta h2{letter-spacing:-.015em;color:#fff;margin:0;font-size:clamp(34px,3.2vw,44px)}
.hv2 .hv2-cta p{font-size:17px;line-height:1.6;color:var(--hv2-on-dark-1);margin:0;max-width:440px}
.hv2 .hv2-cta__actions{display:flex;flex-direction:column;gap:14px;align-items:flex-start;margin-top:12px}
.hv2 .hv2-cta__small{font-size:14px;color:var(--hv2-on-dark-2)}
.hv2 .hv2-cta__small a{color:var(--hv2-ice)}
.hv2 .hv2-cta__small a:hover{color:#fff}
.hv2 .hv2-cta__photo{display:block;width:100%;height:100%;min-height:400px;object-fit:cover;object-position:center 45%}

/* ---------- photography ---------- */
/* Exhibit figure. Mirrors .photo in styles.css on the hv2 tokens. */
.hv2 .hv2-photo{
  position:relative;display:block;margin:0;border-radius:var(--hv2-radius-xl);overflow:hidden;
  aspect-ratio:3/2;background:var(--hv2-dark-navy);
}
.hv2 .hv2-photo img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .hv2 .hv2-feature,.hv2 .hv2-feature--flip{grid-template-columns:1fr;gap:40px}
  .hv2 .hv2-secgrid{grid-template-columns:1fr}
  .hv2 .hv2-news{grid-template-columns:1fr}
  .hv2 .hv2-news__side{flex-direction:row}
  .hv2 .hv2-newsmini{flex:1}
  .hv2 .hv2-cta__panel{grid-template-columns:1fr}
  .hv2 .hv2-cta__copy{padding:44px 36px 48px;order:2}
  .hv2 .hv2-cta__photo{min-height:0;aspect-ratio:16/9;order:1}
}
@media (max-width:767px){
  /* Stacked, the headline sits over the horizon, the brightest band in the frame,
     so the hero's base grade above is vertical. It was probed at 390 like the panel
     below: with the dawn frame worst-case h1 5.63, lead 5.69, buttons 12.88 against
     3.0 / 4.5 / 4.5, and one step lighter (.46/.38/.28) put the lead at 4.67, too
     close to the floor. 2026-09-09: the daylight frame needed one step up
     (.66/.58/.46, +.52 kept); probed at 390: h1 7.70, lead 4.94. */
  .hv2 .hv2-hero__lead{font-size:17px}
  .hv2 .hv2-section{padding:64px 0}
  .hv2 .hv2-news__side{flex-direction:column}
  .hv2 .hv2-newsmini{grid-template-columns:120px 1fr}
  .hv2 .hv2-cta__copy{padding:32px 24px 36px}
  .hv2 .hv2-cta__photo{aspect-ratio:4/3}
}

/* ==========================================================================
   Homepage v3 additions (2026-09): client marks, sector rows, the Synapse
   workbench animation. Same .hv2 scope and literal tokens as above.
   ========================================================================== */

/* ---------- client marks ---------- */
/* One official colour file per mark. At rest the mark runs through the
   #hv2-mark-tone filter declared in client-marks.njk (luminance to deep navy,
   gamma 2.2 so mid tones stay dark). That keeps the layering inside marks
   such as the bp helios, which a flat recolour turns into a blob. The colour
   copy sits on top and fades in on hover. Heights come per mark from
   clients.json because the five aspect ratios differ. Below 768px the two
   list copies scroll as a loop (see the phone block and reduced-motion rule). */
.hv2 .hv2-marks{padding:48px 0 0}
.hv2 .hv2-marks__defs{position:absolute;width:0;height:0;overflow:hidden}
.hv2 .hv2-marks__label{
  margin:0 0 18px;font-family:var(--hv2-font-mono);font-weight:500;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--hv2-fg-2);
}
.hv2 .hv2-marks__track{border-top:1px solid var(--hv2-border);border-bottom:1px solid var(--hv2-border)}
.hv2 .hv2-marks__track:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #416581}
.hv2 .hv2-marks__list{
  list-style:none;margin:0;padding:30px 0;display:flex;align-items:center;
  justify-content:space-between;gap:24px clamp(24px,4vw,56px);flex-wrap:wrap;
}
.hv2 .hv2-marks__list[aria-hidden]{display:none}
.hv2 .hv2-marks__item{position:relative;display:flex;align-items:center;flex:none}
.hv2 .hv2-marks__item img{display:block;height:var(--hv2-mark-h);width:auto;max-width:100%}
.hv2 .hv2-marks__mono{filter:url(#hv2-mark-tone)}
.hv2 .hv2-marks__colour{position:absolute;left:0;top:0;opacity:0;transition:opacity var(--hv2-dur) var(--hv2-ease)}
@media (hover:hover){
  .hv2 .hv2-marks__item:hover .hv2-marks__colour{opacity:1}
}
@keyframes hv2-marks-loop{to{transform:translateX(-100%)}}

/* ---------- sector rows ---------- */
.hv2 .hv2-sectors{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;
  margin-top:48px;align-items:stretch;
}
.hv2 .hv2-sectors__rows{display:flex;flex-direction:column;border-top:1px solid var(--hv2-border)}
.hv2 .hv2-sectors__tab{
  position:relative;display:block;width:100%;text-align:left;background:transparent;
  border:0;border-bottom:1px solid var(--hv2-border);padding:14px 16px 14px 22px;
  font:inherit;color:var(--hv2-fg-1);cursor:pointer;
  transition:background var(--hv2-dur) var(--hv2-ease);
}
.hv2 .hv2-sectors__tab::before{
  content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;
  background:var(--hv2-deep-teal);transform:scaleY(0);transform-origin:top;
  transition:transform 300ms var(--hv2-ease);
}
.hv2 .hv2-sectors__tab[aria-selected="true"]::before{transform:scaleY(1)}
@media (hover:hover){.hv2 .hv2-sectors__tab:hover{background:var(--hv2-surface)}}
.hv2 .hv2-sectors__tab:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #416581}
.hv2 .hv2-sectors__name{display:block;font-size:17px;font-weight:400;line-height:1.3;color:var(--hv2-fg-1)}
.hv2 .hv2-sectors__detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows 300ms var(--hv2-ease)}
.hv2 .hv2-sectors__detail > span{display:block;overflow:hidden;min-height:0}
.hv2 .hv2-sectors__tab[aria-selected="true"] .hv2-sectors__detail{grid-template-rows:1fr}
.hv2 .hv2-sectors__work{display:block;padding-top:6px;font-size:15px;line-height:1.5;color:var(--hv2-fg-1)}
.hv2 .hv2-sectors__docs{display:block;padding-top:4px;font-size:13px;line-height:1.5;color:var(--hv2-fg-2)}
/* The photograph takes the full height of the rows column, so the two
   columns share one baseline whichever row is open. */
.hv2 .hv2-sectors__panel{display:flex}
.hv2 .hv2-sectors__photo{
  position:relative;flex:1;min-height:360px;border-radius:var(--hv2-radius-xl);overflow:hidden;
  background:var(--hv2-dark-navy);
}
.hv2 .hv2-sectors__photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity 300ms var(--hv2-ease);
}
.hv2 .hv2-sectors__photo img.is-active{opacity:1}

/* ---------- Synapse animation: an acquisition, played as a video ---------- */
/* A white 16:9 frame with a brand bar, a slow dot grid, one full-frame
   scene at a time and a caption inside the frame (the Workpack animation's
   pattern). Scenes 0 and 5 are title cards; 1 to 4 tell the story. Scenes are
   stacked and crossfade on data-scene (450ms with a 0.8% scale). Entrance keyframes run only on the active
   scene, so each loop replays them without a reset frame. Scenes 3 and 4
   share the responsibilities card, so it stays put while the remap happens
   on it. Crossfade and entrances sit on the 200 to 500ms scale; the scan and
   the cursor path are longer on purpose, they are the footage. Nothing is
   dimmed by opacity while it is readable: waiting elements sit at 0 and
   arrive at 1. Colour changes (the unmatched role, the select focus, Confirm's
   fill) use step-start: the ui-check samples computed colours at an
   arbitrary instant and rejects any interpolated value as off-brand. */
.hv2 .hv2-wb{margin-top:8px}
/* Capped at 1040px and centred: at the full container width the scenes sat
   small in a 740px-tall field of dots. */
.hv2 .hv2-wb__frame{
  position:relative;display:flex;flex-direction:column;aspect-ratio:16/9;overflow:hidden;
  width:min(100%,1040px);margin-inline:auto;
  background:#fff;border:1px solid var(--hv2-border);border-radius:var(--hv2-radius-xl);
  box-shadow:var(--hv2-shadow-md);
}
.hv2 .hv2-wb__bar{
  position:relative;z-index:2;display:flex;align-items:center;gap:12px;padding:12px 22px;
  border-bottom:1px solid var(--hv2-border);background:rgba(255,255,255,.9);
}
.hv2 .hv2-wb__bar-mark{width:auto;height:22px;display:block}
.hv2 .hv2-wb__bar-sep{width:1px;height:20px;background:var(--hv2-border)}
.hv2 .hv2-wb__bar-prod{
  font-family:var(--hv2-font-head);font-weight:600;font-size:14px;letter-spacing:.01em;
  color:var(--hv2-deep-teal);white-space:nowrap;
}
.hv2 .hv2-wb__bar-prod span{font-family:var(--hv2-font-body);font-weight:400;color:var(--hv2-fg-2);margin-left:8px}
.hv2 .hv2-wb__bar-right{
  margin-left:auto;font-family:var(--hv2-font-mono);font-weight:500;font-size:11.5px;
  letter-spacing:.04em;color:var(--hv2-fg-2);white-space:nowrap;
}
.hv2 .hv2-wb__bar-right b{font-weight:500;color:var(--hv2-deep-teal)}
.hv2 .hv2-wb__stage{position:relative;flex:1;min-height:0}
.hv2 .hv2-wb__stage::before{
  content:"";position:absolute;inset:-2px;pointer-events:none;
  background-image:radial-gradient(rgba(75,118,150,.1) 1px,transparent 1px);background-size:36px 36px;
}
/* Bottom padding keeps the composition clear of the caption. */
.hv2 .hv2-wb__scene{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;padding:28px 40px 104px;opacity:0;visibility:hidden;transform:scale(.992);
  transition:opacity 450ms var(--hv2-ease),transform 450ms var(--hv2-ease),visibility 0s linear 450ms;
}
.hv2 .hv2-wb[data-scene="0"] .hv2-wb__scene[data-wb-scene="0"],
.hv2 .hv2-wb[data-scene="1"] .hv2-wb__scene[data-wb-scene="1"],
.hv2 .hv2-wb[data-scene="2"] .hv2-wb__scene[data-wb-scene="2"],
.hv2 .hv2-wb[data-scene="3"] .hv2-wb__scene[data-wb-scene="3"],
.hv2 .hv2-wb[data-scene="4"] .hv2-wb__scene[data-wb-scene="3"],
.hv2 .hv2-wb[data-scene="5"] .hv2-wb__scene[data-wb-scene="5"]{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.hv2 .hv2-wb__eyebrow{
  display:flex;align-items:center;gap:10px;margin:0;
  font-family:var(--hv2-font-mono);font-weight:500;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--hv2-fg-2);
}
.hv2 .hv2-wb__pill{
  font-family:var(--hv2-font-mono);font-weight:500;background:#fff;border:1px solid var(--hv2-deep-teal);
  color:var(--hv2-deep-teal);border-radius:9999px;padding:1px 8px;font-size:10.5px;letter-spacing:.04em;text-transform:none;
}
/* Scene 0: title card. The Workpack animation opens the same way, so the
   two product films read as one family. */
.hv2 .hv2-wb__scene--title{gap:0;justify-content:center;padding-bottom:28px}
.hv2 .hv2-wb__logo{width:auto;height:clamp(22px,2.2vw,28px);display:block}
.hv2 .hv2-wb__wordmark{
  margin:18px 0 0;font-family:var(--hv2-font-head);font-weight:600;
  font-size:clamp(38px,5.4vw,64px);line-height:1.05;letter-spacing:-.02em;color:var(--hv2-deep-navy);
}
.hv2 .hv2-wb__tagline{margin:8px 0 0;font-size:clamp(15px,1.5vw,18px);color:var(--hv2-fg-2)}
.hv2 .hv2-wb__rule{display:block;width:min(280px,40%);height:2px;margin:20px 0;background:var(--hv2-deep-teal)}
.hv2 .hv2-wb__question{
  margin:0;max-width:44ch;text-align:center;font-size:clamp(15px,1.6vw,19px);
  line-height:1.5;color:var(--hv2-fg-1);
}
.hv2 .hv2-wb__closing-sub{margin:12px 0 0;max-width:44ch;text-align:center;font-size:clamp(14px,1.4vw,16px);line-height:1.5;color:var(--hv2-fg-2)}
/* Entrances land inside the first second so the finished card holds for most
   of its dwell; the first cut read as a flash. */
.hv2 .hv2-wb[data-scene="0"] .hv2-wb__logo,
.hv2 .hv2-wb[data-scene="5"] .hv2-wb__logo{animation:hv2-wb-in 400ms var(--hv2-ease) 80ms both}
.hv2 .hv2-wb[data-scene="0"] .hv2-wb__wordmark,
.hv2 .hv2-wb[data-scene="5"] .hv2-wb__wordmark{animation:hv2-wb-in 450ms var(--hv2-ease) 220ms both}
.hv2 .hv2-wb[data-scene="0"] .hv2-wb__tagline{animation:hv2-wb-in 400ms var(--hv2-ease) 400ms both}
.hv2 .hv2-wb[data-scene="0"] .hv2-wb__rule,
.hv2 .hv2-wb[data-scene="5"] .hv2-wb__rule{animation:hv2-wb-rule 400ms var(--hv2-ease) 520ms both}
@keyframes hv2-wb-rule{from{opacity:0;transform:scaleX(.2)}to{opacity:1;transform:none}}
.hv2 .hv2-wb[data-scene="0"] .hv2-wb__question,
.hv2 .hv2-wb[data-scene="5"] .hv2-wb__question{animation:hv2-wb-in 450ms var(--hv2-ease) 700ms both}
.hv2 .hv2-wb[data-scene="5"] .hv2-wb__closing-sub{animation:hv2-wb-in 450ms var(--hv2-ease) 950ms both}

.hv2 .hv2-wb__caption{
  position:absolute;left:24px;right:24px;bottom:26px;margin:0 auto;width:fit-content;max-width:min(100%,760px);
  padding:11px 18px;background:rgba(255,255,255,.94);border:1px solid var(--hv2-border);
  border-left:3px solid var(--hv2-deep-teal);border-radius:10px;box-shadow:0 10px 30px rgba(0,66,98,.1);
  font-size:16px;font-weight:400;line-height:1.45;color:var(--hv2-fg-1);text-align:center;
}
.hv2 .hv2-wb[data-scene="1"] .hv2-wb__scene[data-wb-scene="1"] .hv2-wb__caption,
.hv2 .hv2-wb[data-scene="2"] .hv2-wb__scene[data-wb-scene="2"] .hv2-wb__caption{animation:hv2-wb-in 350ms var(--hv2-ease) 150ms both}
.hv2 .hv2-wb__caption--3,.hv2 .hv2-wb__caption--4{opacity:0}
.hv2 .hv2-wb[data-scene="3"] .hv2-wb__caption--3{animation:hv2-wb-in 350ms var(--hv2-ease) 150ms forwards}
.hv2 .hv2-wb[data-scene="4"] .hv2-wb__caption--4{animation:hv2-wb-in 350ms var(--hv2-ease) 100ms forwards}
@keyframes hv2-wb-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes hv2-wb-pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes hv2-wb-show{to{opacity:1}}
@keyframes hv2-wb-hide{to{opacity:0}}

/* Cards shared by scenes 1 and 3. */
.hv2 .hv2-wb__card{
  background:#fff;border:1px solid var(--hv2-border);border-radius:var(--hv2-radius-md);
  padding:16px 20px;box-shadow:0 2px 8px rgba(0,4,50,.06);
}
.hv2 .hv2-wb__card-head{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 12px;
  font-family:var(--hv2-font-head);font-weight:600;font-size:14px;letter-spacing:.01em;color:var(--hv2-deep-teal);
}
.hv2 .hv2-wb__card-sub{font-family:var(--hv2-font-body);font-weight:400;font-size:13px;color:var(--hv2-fg-2)}

/* Scene 1: two organisations come together. Yours is already there; Operator
   B's card slides in beside it and one of its roles is marked unmatched. The
   event is supplied, nothing here is Synapse acting. */
.hv2 .hv2-wb__orgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;width:min(100%,760px)}
.hv2 .hv2-wb__card--yours{border-top:3px solid var(--hv2-slate-blue)}
.hv2 .hv2-wb__card--theirs{border-top:3px solid var(--hv2-deep-teal)}
.hv2 .hv2-wb__roles{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.hv2 .hv2-wb__role{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;
  border:1px solid var(--hv2-border);border-radius:var(--hv2-radius-sm);background:var(--hv2-surface);
  font-size:15px;line-height:1.35;color:var(--hv2-fg-1);
}
.hv2 .hv2-wb__role--more{
  justify-content:center;padding:2px 12px 0;background:transparent;border:0;color:var(--hv2-fg-2);
  font-family:var(--hv2-font-mono);font-weight:500;font-size:12px;letter-spacing:.03em;
}
.hv2 .hv2-wb__nomatch{
  flex:none;font-family:var(--hv2-font-mono);font-weight:500;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--hv2-fg-2);background:#fff;border:1px solid var(--hv2-border);
  border-radius:9999px;padding:1px 7px;opacity:0;white-space:nowrap;
}
.hv2 .hv2-wb[data-scene="1"] .hv2-wb__card--yours{animation:hv2-wb-in 400ms var(--hv2-ease) both}
.hv2 .hv2-wb[data-scene="1"] .hv2-wb__card--theirs{animation:hv2-wb-join 600ms var(--hv2-ease) 500ms both}
@keyframes hv2-wb-join{from{opacity:0;transform:translateX(min(56px,4vw))}to{opacity:1;transform:none}}
.hv2 .hv2-wb[data-scene="1"] .hv2-wb__role{animation:hv2-wb-in 300ms var(--hv2-ease) calc(250ms + var(--i) * 110ms) both}
.hv2 .hv2-wb[data-scene="1"] .hv2-wb__card--theirs .hv2-wb__role{animation-delay:calc(1000ms + var(--i) * 110ms)}
.hv2 .hv2-wb[data-scene="1"] .hv2-wb__role--unmatched{
  animation:hv2-wb-in 300ms var(--hv2-ease) 1000ms both,hv2-wb-unmatch 1ms step-start 2200ms forwards;
}
@keyframes hv2-wb-unmatch{to{border-style:dashed;border-color:var(--hv2-slate-blue);background:#fff}}
.hv2 .hv2-wb[data-scene="1"] .hv2-wb__nomatch{animation:hv2-wb-pop 250ms var(--hv2-ease) 2250ms forwards}

/* Scene 2: their documents. Three rows come up, a scan passes over each (a
   gradient layer on the row's own background, so nothing leaves the row)
   and the responsibility count pops. */
.hv2 .hv2-wb__docs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;width:min(100%,700px)}
.hv2 .hv2-wb__doc{
  display:flex;align-items:center;gap:12px;border:1px solid var(--hv2-border);
  border-radius:var(--hv2-radius-md);padding:13px 18px;font-size:16px;line-height:1.35;color:var(--hv2-fg-1);
  background:linear-gradient(90deg,rgba(0,66,98,0),rgba(0,66,98,.1),rgba(0,66,98,0)) no-repeat -42.86% 0 / 30% 100%,#fff;
  box-shadow:0 2px 8px rgba(0,4,50,.06);
}
.hv2 .hv2-wb__doc-icon{width:15px;height:19px;flex:none;color:var(--hv2-slate-blue)}
.hv2 .hv2-wb__doc-id{
  font-family:var(--hv2-font-mono);font-weight:500;font-size:12px;letter-spacing:.03em;color:var(--hv2-fg-2);white-space:nowrap;
}
.hv2 .hv2-wb__doc-name{flex:1;min-width:0}
.hv2 .hv2-wb__doc-badge{
  flex:none;font-family:var(--hv2-font-mono);font-weight:500;font-size:11px;letter-spacing:.03em;white-space:nowrap;
  color:#fff;background:var(--hv2-deep-teal);border:1px solid var(--hv2-deep-teal);border-radius:9999px;padding:2px 9px;opacity:0;
}
.hv2 .hv2-wb__doc-badge--none{color:var(--hv2-fg-2);background:var(--hv2-surface);border-color:var(--hv2-border)}
.hv2 .hv2-wb[data-scene="2"] .hv2-wb__doc{
  animation:hv2-wb-in 400ms var(--hv2-ease) calc(var(--i) * 200ms) both,hv2-wb-scan 900ms ease-in-out calc(1100ms + var(--i) * 950ms) none;
}
@keyframes hv2-wb-scan{from{background-position-x:-42.86%}to{background-position-x:142.86%}}
.hv2 .hv2-wb[data-scene="2"] .hv2-wb__doc-badge{animation:hv2-wb-pop 300ms var(--hv2-ease) calc(1850ms + var(--i) * 950ms) forwards}

/* Scenes 3 and 4: the responsibilities with their sources, then the remap.
   The card draws in with its rows top to bottom and the role name is
   highlighted in each sentence. In scene 4 a cursor opens the role select,
   picks Production Supervisor and presses Confirm; each row then carries
   its new role and the outcome line arrives in space already reserved.
   The cursor path is measured by the script into --c1..--c3 on the card. */
.hv2 .hv2-wb__resp{position:relative;width:min(100%,760px);border-left:3px solid var(--hv2-deep-teal);padding:16px 22px;box-shadow:var(--hv2-shadow-md)}
.hv2 .hv2-wb__items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.hv2 .hv2-wb__item{padding-bottom:10px;border-bottom:1px dashed var(--hv2-border)}
.hv2 .hv2-wb__item:last-child{padding-bottom:0;border-bottom:0}
.hv2 .hv2-wb__item--more{
  padding:8px 0 0;border-bottom:0;font-family:var(--hv2-font-mono);font-weight:500;
  font-size:12px;letter-spacing:.03em;color:var(--hv2-fg-2);
}
.hv2 .hv2-wb__source{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 6px;font-size:13px;color:var(--hv2-fg-2)}
.hv2 .hv2-wb__ref{
  display:inline-block;font-family:var(--hv2-font-mono);font-weight:500;font-size:11px;
  letter-spacing:.03em;line-height:1.4;color:var(--hv2-deep-teal);background:#fff;
  border:1px solid var(--hv2-deep-teal);border-radius:4px;padding:1px 6px;
}
.hv2 .hv2-wb__mapped{
  margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-family:var(--hv2-font-mono);font-weight:500;
  font-size:11px;letter-spacing:.03em;line-height:1.4;color:#fff;background:var(--hv2-deep-teal);
  border-radius:9999px;padding:2px 9px;opacity:0;white-space:nowrap;
}
.hv2 .hv2-wb__mapped::before{content:"\2192"}
.hv2 .hv2-wb__quote{margin:0;font-size:15.5px;line-height:1.5;color:var(--hv2-fg-1)}
.hv2 .hv2-wb__quote mark{
  color:inherit;border-radius:2px;padding:0 2px;margin:0 -2px;
  background:linear-gradient(rgba(162,189,189,.5),rgba(162,189,189,.5)) no-repeat 0 0 / 0% 100%;
}
.hv2 .hv2-wb__remap{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;padding-top:14px;
  border-top:1px dashed var(--hv2-border);
}
.hv2 .hv2-wb__remap-label{font-family:var(--hv2-font-mono);font-weight:500;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--hv2-fg-2)}
.hv2 .hv2-wb__select{
  position:relative;display:inline-flex;align-items:center;gap:10px;min-height:34px;min-width:230px;padding:4px 12px;
  border:1px solid var(--hv2-border);border-radius:var(--hv2-radius-sm);background:#fff;font-size:14px;color:var(--hv2-fg-1);
}
.hv2 .hv2-wb__select-placeholder{color:var(--hv2-fg-2)}
.hv2 .hv2-wb__select-value{position:absolute;left:12px;right:34px;top:50%;transform:translateY(-50%);opacity:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hv2 .hv2-wb__select-caret{margin-left:auto;width:12px;height:12px;flex:none;color:var(--hv2-fg-2)}
.hv2 .hv2-wb__menu{
  position:absolute;left:-1px;right:-1px;bottom:calc(100% + 4px);z-index:2;display:flex;flex-direction:column;gap:2px;padding:4px;
  background:#fff;border:1px solid var(--hv2-border);border-radius:var(--hv2-radius-sm);box-shadow:var(--hv2-shadow-md);
  opacity:0;visibility:hidden;
}
.hv2 .hv2-wb__menu-item{padding:7px 10px;border-radius:4px;font-size:14px;line-height:1.35;color:var(--hv2-fg-1)}
.hv2 .hv2-wb__btn{
  position:relative;display:inline-flex;align-items:center;min-height:34px;padding:4px 16px;
  border:1px solid var(--hv2-deep-teal);border-radius:9999px;background:#fff;font-size:14px;color:var(--hv2-deep-teal);
}
.hv2 .hv2-wb__outcome{
  display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:14.5px;line-height:1.4;color:var(--hv2-fg-1);opacity:0;
}
.hv2 .hv2-wb__outcome svg{width:16px;height:16px;flex:none;color:var(--hv2-deep-teal)}
.hv2 .hv2-wb__cursor{
  position:absolute;left:0;top:0;z-index:3;width:14px;height:18px;opacity:0;pointer-events:none;
  filter:drop-shadow(0 1px 2px rgba(0,4,50,.35));transform:translate(var(--c3x,0px),var(--c3y,0px));
}
.hv2 .hv2-wb[data-scene="3"] .hv2-wb__resp{animation:hv2-wb-draw 450ms var(--hv2-ease) both}
@keyframes hv2-wb-draw{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.hv2 .hv2-wb[data-scene="3"] .hv2-wb__card-head{animation:hv2-wb-in 350ms var(--hv2-ease) 150ms both}
.hv2 .hv2-wb[data-scene="3"] .hv2-wb__item{animation:hv2-wb-in 350ms var(--hv2-ease) calc(350ms + var(--i) * 220ms) both}
.hv2 .hv2-wb[data-scene="3"] .hv2-wb__item--more{animation-delay:1100ms}
.hv2 .hv2-wb[data-scene="3"] .hv2-wb__remap{animation:hv2-wb-in 350ms var(--hv2-ease) 1000ms both}
.hv2 .hv2-wb[data-scene="3"] .hv2-wb__quote mark{animation:hv2-wb-hl 450ms var(--hv2-ease) calc(1700ms + var(--i) * 320ms) forwards}
@keyframes hv2-wb-hl{to{background-size:100% 100%}}
.hv2 .hv2-wb[data-scene="4"] .hv2-wb__quote mark{background-size:100% 100%}
.hv2 .hv2-wb[data-scene="4"] .hv2-wb__cursor{animation:hv2-wb-cursor 4200ms cubic-bezier(.4,.05,.3,1) 200ms both}
@keyframes hv2-wb-cursor{
  0%{opacity:0;transform:translate(calc(var(--c1x) + 120px),calc(var(--c1y) + 80px))}
  8%{opacity:1}
  31%{transform:translate(var(--c1x),var(--c1y))}
  40%{transform:translate(var(--c1x),var(--c1y))}
  50%{transform:translate(var(--c2x),var(--c2y))}
  57%{transform:translate(var(--c2x),var(--c2y))}
  81%{transform:translate(var(--c3x),var(--c3y))}
  100%{opacity:1;transform:translate(var(--c3x),var(--c3y))}
}
.hv2 .hv2-wb[data-scene="4"] .hv2-wb__select{animation:hv2-wb-focus 1ms step-start 1600ms forwards}
@keyframes hv2-wb-focus{to{border-color:var(--hv2-deep-teal)}}
.hv2 .hv2-wb[data-scene="4"] .hv2-wb__menu{animation:hv2-wb-open 1050ms step-start 1600ms none}
@keyframes hv2-wb-open{from,to{opacity:1;visibility:visible}}
.hv2 .hv2-wb[data-scene="4"] .hv2-wb__menu-item--pick{animation:hv2-wb-hover 300ms step-start 2350ms none}
@keyframes hv2-wb-hover{from,to{background:var(--hv2-surface)}}
.hv2 .hv2-wb[data-scene="4"] .hv2-wb__select-placeholder{animation:hv2-wb-hide 1ms step-start 2650ms forwards}
.hv2 .hv2-wb[data-scene="4"] .hv2-wb__select-value{animation:hv2-wb-show 1ms step-start 2650ms forwards}
.hv2 .hv2-wb[data-scene="4"] .hv2-wb__confirm{animation:hv2-wb-press 240ms var(--hv2-ease) 3700ms both,hv2-wb-fill 1ms step-start 3800ms forwards}
@keyframes hv2-wb-press{0%{transform:none}50%{transform:scale(.95)}100%{transform:none}}
@keyframes hv2-wb-fill{to{background:var(--hv2-deep-teal);color:#fff}}
.hv2 .hv2-wb[data-scene="4"] .hv2-wb__mapped{animation:hv2-wb-pop 300ms var(--hv2-ease) calc(4200ms + var(--i) * 180ms) forwards}
.hv2 .hv2-wb[data-scene="4"] .hv2-wb__outcome{animation:hv2-wb-in 350ms var(--hv2-ease) 4900ms forwards}

/* Player chrome: a progress line along the bottom edge (one linear width
   transition per scene, set by the script) and a corner pause button that
   shows on hover, on focus, or while paused. */
.hv2 .hv2-wb__progress{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;background:rgba(75,118,150,.15)}
.hv2 .hv2-wb__progress span{display:block;height:100%;width:0;background:var(--hv2-deep-teal);transition:width 0ms linear}
.hv2 .hv2-wb__pause{
  position:absolute;right:14px;bottom:16px;z-index:4;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--hv2-border);background:rgba(255,255,255,.94);color:var(--hv2-deep-teal);
  cursor:pointer;padding:0;display:grid;place-items:center;font:inherit;opacity:0;
  transition:opacity 200ms var(--hv2-ease),border-color 200ms var(--hv2-ease);
}
.hv2 .hv2-wb__frame:hover .hv2-wb__pause,
.hv2 .hv2-wb__pause:focus-visible,
.hv2 .hv2-wb[data-paused] .hv2-wb__pause{opacity:1}
.hv2 .hv2-wb__pause:hover{border-color:var(--hv2-deep-teal)}
.hv2 .hv2-wb__pause:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #416581}
.hv2 .hv2-wb__pause svg{width:14px;height:14px;display:block}
.hv2 .hv2-wb__pause .i-play{display:none}
.hv2 .hv2-wb[data-paused] .hv2-wb__pause .i-play{display:block}
.hv2 .hv2-wb[data-paused] .hv2-wb__pause .i-pause{display:none}
/* Pause every frame keyframe when user-paused or outside the viewport. */
.hv2 .hv2-wb[data-motion-paused] .hv2-wb__frame *,
.hv2 .hv2-wb[data-motion-paused] .hv2-wb__frame *::before,
.hv2 .hv2-wb[data-motion-paused] .hv2-wb__frame *::after{animation-play-state:paused}

/* ---------- v3 responsive ---------- */
@media (max-width:1023px){
  .hv2 .hv2-marks__item img{height:calc(var(--hv2-mark-h) * .85)}
  .hv2 .hv2-sectors{grid-template-columns:1fr;gap:32px}
  .hv2 .hv2-sectors__photo{flex:none;width:100%;aspect-ratio:3/2;min-height:0}
  .hv2 .hv2-wb__frame{aspect-ratio:4/3}
  .hv2 .hv2-wb__scene{padding:24px 28px 100px}
}
@media (max-width:767px){
  .hv2 .hv2-marks{padding-top:36px}
  .hv2 .hv2-marks__track:focus-visible{margin-right:calc(4px - var(--gutter))}
  .hv2 .hv2-marks__track{
    display:flex;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  }
  .hv2 .hv2-marks__list{
    flex:none;flex-wrap:nowrap;justify-content:flex-start;gap:44px;
    padding:22px 44px 22px 0;animation:hv2-marks-loop 28s linear infinite;
  }
  .hv2 .hv2-marks__list[aria-hidden]{display:flex}
  .hv2 .hv2-marks__track:hover .hv2-marks__list,
  .hv2 .hv2-marks__track:focus-within .hv2-marks__list{animation-play-state:paused}
  .hv2 .hv2-marks__item img{height:calc(var(--hv2-mark-h) * .8)}
  .hv2 .hv2-sectors{margin-top:36px}
  .hv2 .hv2-sectors__tab{padding:12px 12px 12px 18px}
  .hv2 .hv2-wb__frame{aspect-ratio:auto;height:660px}
  .hv2 .hv2-wb__bar{gap:10px;padding:10px 14px}
  .hv2 .hv2-wb__bar-prod span{display:none}
  .hv2 .hv2-wb__scene{gap:14px;padding:18px 14px 96px}
  .hv2 .hv2-wb__scene--title{padding:18px 20px}
  .hv2 .hv2-wb__wordmark{font-size:40px;margin-top:14px}
  .hv2 .hv2-wb__tagline{font-size:14px}
  .hv2 .hv2-wb__rule{margin:16px 0}
  .hv2 .hv2-wb__question{font-size:15px}
  /* Right edge clears the corner pause button, which sits over the caption
     at this width when the loop is paused. */
  .hv2 .hv2-wb__caption{left:12px;right:56px;bottom:14px;padding:9px 12px;font-size:14px}
  .hv2 .hv2-wb__orgs{grid-template-columns:1fr;gap:12px}
  .hv2 .hv2-wb__card{padding:12px 14px}
  .hv2 .hv2-wb__card-head{margin-bottom:8px}
  .hv2 .hv2-wb__roles{gap:6px}
  .hv2 .hv2-wb__role{padding:7px 10px;font-size:13.5px}
  .hv2 .hv2-wb__role--more{padding:2px 10px 0}
  .hv2 .hv2-wb__doc{flex-wrap:wrap;gap:6px 8px;padding:10px 12px;font-size:14px}
  /* The count badge drops under the name when the row cannot hold both. */
  .hv2 .hv2-wb__doc-name{flex:1 1 auto}
  .hv2 .hv2-wb__doc-badge{margin-left:auto}
  .hv2 .hv2-wb__resp{padding:14px 14px}
  .hv2 .hv2-wb__items{gap:10px}
  .hv2 .hv2-wb__item{padding-bottom:10px}
  .hv2 .hv2-wb__source{gap:6px;font-size:12.5px;margin-bottom:4px}
  /* The document name gives way to the remapped-role chip on one line. */
  .hv2 .hv2-wb__source > span:not([class]){display:none}
  .hv2 .hv2-wb__ref{padding:1px 5px}
  .hv2 .hv2-wb__mapped{font-size:10px;padding:2px 8px}
  .hv2 .hv2-wb__quote{font-size:14px}
  .hv2 .hv2-wb__remap{gap:8px;margin-top:10px;padding-top:10px}
  .hv2 .hv2-wb__remap-label{display:none}
  .hv2 .hv2-wb__select{min-width:0;flex:1;font-size:13px}
  .hv2 .hv2-wb__select-value{right:30px}
  .hv2 .hv2-wb__btn{padding:4px 14px}
  .hv2 .hv2-wb__outcome{font-size:13px}
  .hv2 .hv2-wb__pause{right:10px;bottom:12px}
}
@media (prefers-reduced-motion:reduce){
  .hv2 .hv2-marks__list{animation:none}
  .hv2 .hv2-marks__list[aria-hidden]{display:none}
  .hv2 .hv2-marks__track{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .hv2 .hv2-wb *,.hv2 .hv2-wb *::before,.hv2 .hv2-wb *::after,
  .hv2 .hv2-sectors *,.hv2 .hv2-sectors *::before{transition:none !important;animation:none !important}
  /* The script lands on scene 4, the completed remap; these are its end
     states. The closing card is motion, so it is not the still. */
  .hv2 .hv2-wb__pause,.hv2 .hv2-wb__progress{display:none}
  .hv2 .hv2-wb[data-scene="4"] .hv2-wb__caption--4,
  .hv2 .hv2-wb[data-scene="4"] .hv2-wb__outcome,
  .hv2 .hv2-wb[data-scene="4"] .hv2-wb__mapped,
  .hv2 .hv2-wb[data-scene="4"] .hv2-wb__select-value{opacity:1}
  .hv2 .hv2-wb[data-scene="4"] .hv2-wb__select-placeholder{opacity:0}
  .hv2 .hv2-wb[data-scene="4"] .hv2-wb__quote mark{background-size:100% 100%}
  .hv2 .hv2-wb[data-scene="4"] .hv2-wb__confirm{background:var(--hv2-deep-teal);color:#fff}
}