/* ═══════════════════════════════════════════════════════════════════════════
   HERO RING · the four-panel carousel that sits beside the hero copy.

   Shared by every division. The markup a page needs is one element:

       <div class="hero__ring" data-hero-ring data-division="ib"></div>

   inside a  <section class="hero hero--split">  whose copy is wrapped in
   .hero__copy. hero-ring.js builds the rest: word, stage, scenery, cards,
   dots. Panel content per division lives in hero-panels.js.

   Depends on the division stylesheet for --navy-950, --gold-400, --gold-500,
   --cream and --line.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The hero becomes two columns ─────────────────────────────────────────── */
.hero--split .container{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,0.92fr);
  gap:clamp(24px,4vw,64px);
  align-items:center;
}
.hero--split .hero__copy{min-width:0}
.hero--split .hero-stats{grid-column:1 / -1}
.hero--split h1{max-width:14ch}
.hero--split p.lede{max-width:52ch}
.hero__ring{position:relative;min-width:0}

/* ── Stage ────────────────────────────────────────────────────────────────── */
.hstage{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1.12;
  max-height:660px;
  min-height:420px;
  perspective:1150px;
  perspective-origin:50% 92%;      /* the low eye line: we are looking up */
  touch-action:pan-y;
  cursor:grab;
  isolation:isolate;
}
.hstage:focus-visible{outline:2px solid var(--gold-400);outline-offset:8px;border-radius:18px}
.hstage.is-drag{cursor:grabbing}
.hstage__tilt{
  position:absolute;inset:0;z-index:10;transform-style:preserve-3d;
  transform:rotateX(calc(var(--ty,0) * -2.2deg)) rotateY(calc(var(--tx,0) * 3.4deg));
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.hring{position:absolute;inset:0;transform-style:preserve-3d}

/* Scenery sits OUTSIDE the 3D context on purpose: inside preserve-3d the
   cards' translateZ decides paint order and z-index is ignored, so a figure
   that must stay in front has to be a plain sibling with its own layer. */
.hscene{position:absolute;inset:0;pointer-events:none}
.hscene--back{z-index:1}
.hscene--front{z-index:60}

.hword{
  position:absolute;left:0;right:0;top:2%;z-index:2;text-align:center;
  pointer-events:none;user-select:none;
}
.hword b{
  display:block;font-family:"Fraunces","Playfair Display",Georgia,serif;font-weight:600;
  font-size:clamp(1.35rem,3.1vw,2.5rem);line-height:1;letter-spacing:-.02em;
  color:rgba(250,247,241,.9);white-space:nowrap;
}
.hword small{
  display:block;margin-bottom:9px;font-size:.6rem;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(250,247,241,.4);
}
.hword .swap{
  display:inline-block;transform-origin:50% 100%;will-change:transform,opacity;
  transition:opacity .22s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1);
}
.hword.is-out .swap{opacity:0;transform:translateY(-.12em) rotateX(34deg)}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.hcard{
  position:absolute;left:50%;top:50%;margin:-173px 0 0 -130px;
  width:260px;height:346px;transform-style:preserve-3d;
  will-change:transform,opacity;text-decoration:none;color:var(--cream);
}
.hcard *{text-decoration:none}
.hcard__face{
  position:relative;width:100%;height:100%;border-radius:18px;overflow:hidden;
  background:linear-gradient(168deg, rgba(48,70,112,.95), rgba(29,44,74,.97));
  border:1px solid rgba(250,247,241,.2);
  box-shadow:0 34px 70px -26px rgba(0,0,0,.8), inset 0 1px 0 rgba(250,247,241,.14);
  backdrop-filter:blur(12px) saturate(1.1);
  display:flex;flex-direction:column;
}
.hcard.is-lead .hcard__face{
  border-color:rgba(128,121,255,.5);
  box-shadow:0 38px 80px -24px rgba(0,0,0,.85), 0 0 34px -10px rgba(99,91,255,.5),
             inset 0 1px 0 rgba(250,247,241,.2);
}
.hcard.is-soon{cursor:default}
.hcard__soon{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:9px 10px 10px;text-align:center;
  font-size:.52rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-400);
  background:linear-gradient(180deg, rgba(23,35,61,0) 0%,
             rgba(23,35,61,.88) 42%, rgba(18,26,47,.97) 100%);
}
.hcard__tag{
  position:absolute;left:0;right:0;top:calc(100% + 12px);text-align:center;
  font-size:.58rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(250,247,241,.45);
}
.hcard.is-lead .hcard__tag{color:var(--gold-400)}

/* ── The miniature product screens ───────────────────────────────────────── */
.scr{display:flex;flex-direction:column;height:100%;font-size:10px;line-height:1.45}
.scr__head{display:flex;align-items:center;gap:6px;padding:11px 13px;
  border-bottom:1px solid rgba(250,247,241,.1)}
.scr__head b{font-size:10px;font-weight:700}
.scr__dot{width:6px;height:6px;border-radius:50%;background:var(--gold-400);flex:none;
  box-shadow:0 0 8px var(--gold-400)}
.scr__head span{margin-left:auto;font-size:8.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(250,247,241,.45)}
.scr__body{padding:12px 13px;display:flex;flex-direction:column;gap:9px;flex:1}
.scr__tabs{display:flex;gap:4px;flex-wrap:wrap}
.scr__tab{padding:3px 8px;border-radius:999px;background:rgba(250,247,241,.09);
  font-size:8.5px;font-weight:600;color:rgba(250,247,241,.75);white-space:nowrap}
.scr__tab.is-on{background:var(--cream);color:var(--navy-950)}
.scr__q{margin:0;font-size:11px;font-weight:600;line-height:1.38;color:var(--cream)}
.scr__opts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.scr__opts li{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:8px;
  border:1px solid rgba(250,247,241,.1);color:rgba(250,247,241,.72);font-size:9.5px}
.scr__opts li i{font-style:normal;font-weight:700;font-size:8px;width:14px;height:14px;flex:none;
  display:grid;place-items:center;border-radius:4px;background:rgba(250,247,241,.1)}
.scr__opts li.is-on{border-color:rgba(128,121,255,.6);background:rgba(128,121,255,.18);color:var(--cream)}
.scr__opts li.is-on i{background:var(--gold-500);color:#fff}
.scr__lines{display:flex;flex-direction:column;gap:5px}
.scr__lines s{display:block;height:4px;border-radius:2px;background:rgba(250,247,241,.13)}
.scr__lines s.w70{width:70%} .scr__lines s.w45{width:45%}
.scr__lines s.mark{background:linear-gradient(90deg,rgba(255,196,99,.8),rgba(255,196,99,.4))}
.scr__note{display:block;font-style:normal;font-size:8.5px;font-weight:600;color:#ffc463;
  background:rgba(255,196,99,.12);border-left:2px solid #ffc463;padding:5px 7px;
  border-radius:0 6px 6px 0}
.scr__rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.scr__rows li{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center}
.scr__rows b{font-size:9.5px;font-weight:600;color:var(--cream)}
.scr__rows em{font-style:normal;font-size:8.5px;color:rgba(250,247,241,.45);font-weight:600}
.scr__rows i{grid-column:1/-1;display:block;height:4px;border-radius:2px;
  background:rgba(250,247,241,.11);position:relative;overflow:hidden}
.scr__rows i::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--v)*100%);
  border-radius:2px;background:rgba(250,247,241,.4)}
.scr__rows li.is-on i::after{background:linear-gradient(90deg,var(--gold-400),var(--gold-500))}
.scr__rows li.is-on b{color:var(--gold-400)}
.scr__who{display:flex;align-items:center;gap:8px}
.scr__ava{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--gold-400),var(--gold-500));color:#fff;
  font-size:9px;font-weight:700}
.scr__who b{display:block;font-size:10px;color:var(--cream)}
.scr__who em{display:block;font-style:normal;font-size:8.5px;color:rgba(250,247,241,.45);font-weight:600}
.scr__slot{display:flex;align-items:baseline;gap:7px;padding:6px 8px;border-radius:8px;
  background:rgba(250,247,241,.07)}
.scr__slot b{font-size:9.5px;font-weight:700;flex:none;color:var(--cream)}
.scr__slot span{font-size:8.5px;color:rgba(250,247,241,.7)}
.scr__slot.is-on{background:rgba(128,121,255,.2)}
.scr__spark{display:block;width:100%;height:36px;margin-top:auto}
.scr__foot{margin-top:auto;display:flex;align-items:center;gap:6px;padding:9px 13px;
  border-top:1px solid rgba(250,247,241,.1)}
.scr__pill{font-size:8.5px;font-weight:700;padding:4px 9px;border-radius:999px;
  background:rgba(250,247,241,.09);color:rgba(250,247,241,.75)}
.scr__pill--go{margin-left:auto;background:var(--cream);color:var(--navy-950)}

/* ── Controls ─────────────────────────────────────────────────────────────── */
.hdots{
  position:absolute;left:0;right:0;bottom:-2px;z-index:70;
  display:flex;align-items:center;justify-content:center;gap:12px;
}
.hdots__set{display:flex;gap:6px}
.hdots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;
  background:rgba(250,247,241,.25);cursor:pointer;
  transition:transform .25s cubic-bezier(.16,1,.3,1),background .25s}
.hdots button.is-on{background:var(--gold-400);transform:scale(1.5)}
.hdots__hint{font-size:.56rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(250,247,241,.35)}

/* ── Scenery ──────────────────────────────────────────────────────────────── */
.sc-massif{
  position:absolute;inset:0;
  /* the massif fills the stage exactly, so without this its edges cut a
     visible rectangle out of the hero */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%),
                      linear-gradient(180deg,transparent 0,#000 16%,#000 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%),
             linear-gradient(180deg,transparent 0,#000 16%,#000 100%);
  mask-composite:intersect;
}
.sc-massif svg{width:100%;height:100%;display:block}
.sc-ground{
  position:absolute;left:0;right:0;bottom:0;height:30%;
  background:linear-gradient(180deg, rgba(18,26,47,0) 0%, rgba(18,26,47,.72) 52%, var(--navy-950) 100%);
}
.sc-fig{position:absolute;left:50%;bottom:0;height:52%;transform:translateX(-50%)}
.sc-fig svg{height:100%;width:auto;display:block}
.hscene--front .sc-fig{filter:drop-shadow(0 24px 30px rgba(6,10,22,.75))}

.sc-far{fill:#33436f}
.sc-mid{fill:#2a3961}
.sc-near{fill:#22315a}
.sc-face{fill:#1b2949}
.sc-lit{fill:#2f4272}
.sc-snow{fill:#e9e8f5}
.sc-strata{stroke:rgba(250,247,241,.14);stroke-width:4;fill:none;stroke-linecap:round}
.sc-route{stroke:var(--gold-400);stroke-width:5;stroke-linecap:round;stroke-dasharray:1 14;fill:none}
.sc-flag{fill:var(--gold-500)}
.sc-pole{stroke:rgba(250,247,241,.8);stroke-width:6;stroke-linecap:round}

.fig-body{fill:#080e1d}
.fig-pack{fill:#16224a}
.fig-strap{stroke:rgba(250,247,241,.28);stroke-width:5;fill:none;stroke-linecap:round}
.fig-seam{stroke:rgba(250,247,241,.12);stroke-width:4;fill:none;stroke-linecap:round}
.fig-rim{stroke:rgba(250,247,241,.75);stroke-width:5;fill:none;stroke-linecap:round}
.fig-rim--glow{stroke:var(--gold-400);stroke-width:14;opacity:.3;filter:blur(6px)}

@media (max-width:900px){
  .hero--split .container{grid-template-columns:minmax(0,1fr)}
  .hero--split .hero__ring{margin-top:36px}
  .hero--split .hstage{max-height:520px}
  .hero--split h1{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .hstage__tilt,.hword .swap{transition-duration:.01ms}
}