/* ==========================================================================
   MedaStaré — cinematic band system
   Warm champagne on black. Full-bleed scenes, glass overlays, quiet motion.
   ========================================================================== */

@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

:root{
  --ink:         #0A0806;
  --ink-2:       #100C08;
  --ivory:       #F6F1E7;
  --champagne:   #D6AE68;
  --champagne-l: #F0DCAF;
  --champagne-d: #8A6A30;

  --txt:   rgba(246,241,231,.94);
  --txt-2: rgba(246,241,231,.62);
  --txt-3: rgba(246,241,231,.40);
  --txt-4: rgba(246,241,231,.22);

  --line:      rgba(246,241,231,.11);
  --line-2:    rgba(246,241,231,.055);
  --gold-line: rgba(214,174,104,.34);
  --gold-soft: rgba(214,174,104,.14);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Bodoni Moda", "Didot", "Bodoni MT", "Playfair Display", Georgia, "Times New Roman", serif;

  --ease:      cubic-bezier(.16,1,.3,1);
  --ease-io:   cubic-bezier(.66,0,.34,1);
  --ease-soft: cubic-bezier(.33,1,.68,1);

  --hdr: 74px;
  --gut: clamp(18px, 3.4vw, 58px);
  --maxw: 1520px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ background:var(--ink); -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); color:var(--txt);
  font-family:var(--sans); font-size:16px; line-height:1.5; font-weight:380;
  letter-spacing:-.005em; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
body.is-locked{ overflow:hidden; }

img,picture,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:rgba(214,174,104,.30); color:#fff; }
:focus-visible{ outline:1px solid var(--champagne); outline-offset:3px; border-radius:3px; }

.u-wrap{ width:min(var(--maxw), calc(100% - var(--gut)*2)); margin-inline:auto; }
.u-sr{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link{
  position:fixed; left:14px; top:-100px; z-index:4000;
  background:var(--ivory); color:#000; padding:10px 16px; border-radius:6px;
  font-size:12px; font-weight:600; transition:top .25s var(--ease);
}
.skip-link:focus{ top:14px; }

/* ── Atmosphere ─────────────────────────────────────────────────────────── */
.grain{
  position:fixed; inset:-120px; z-index:900; pointer-events:none;
  opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='220' height='220' filter='url(%23n)' opacity='.55'/></svg>");
  animation:grainShift 7s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate3d(0,0,0)}   16%{transform:translate3d(-14px,8px,0)}
  33%{transform:translate3d(9px,-12px,0)} 50%{transform:translate3d(-7px,14px,0)}
  66%{transform:translate3d(12px,6px,0)} 83%{transform:translate3d(-10px,-9px,0)}
  100%{transform:translate3d(0,0,0)}
}

/* ── Type ───────────────────────────────────────────────────────────────── */
.eyebrow{
  display:block; font-size:clamp(9px,.68vw,10.5px); letter-spacing:.32em;
  text-transform:uppercase; font-weight:500; color:var(--txt-3);
}
.eyebrow--gold{ color:rgba(214,174,104,.86); }

.display{
  margin:0; font-family:var(--serif); font-weight:400; font-optical-sizing:auto;
  line-height:1.02; letter-spacing:-.022em; color:var(--ivory);
}
.d-1{ font-size:clamp(42px,5.6vw,86px); line-height:.98; }
.d-2{ font-size:clamp(30px,3.5vw,54px); }
.d-3{ font-size:clamp(22px,2.2vw,33px); }

.lede{ margin:0; max-width:44ch; font-size:clamp(13.5px,.98vw,15.5px); line-height:1.66; color:var(--txt-2); font-weight:360; }

.tm{ font-size:.44em; vertical-align:.9em; letter-spacing:.02em; opacity:.68; font-family:var(--sans); }
.display .tm{ font-size:.30em; vertical-align:1.15em; }
.eyebrow .tm{ font-size:.8em; vertical-align:.42em; letter-spacing:0; margin-left:-.2em; }

/* ── Reveal ─────────────────────────────────────────────────────────────── */
[data-rv]{
  transition:
    opacity 1s var(--ease) var(--rvd,0s),
    transform 1.1s var(--ease) var(--rvd,0s),
    scale 1.1s var(--ease) var(--rvd,0s),
    filter 1s var(--ease) var(--rvd,0s);
}
[data-rv="up"]   { opacity:0; transform:translate3d(0,26px,0); }
[data-rv="fade"] { opacity:0; }
[data-rv="right"]{ opacity:0; transform:translate3d(28px,0,0); }
[data-rv="left"] { opacity:0; transform:translate3d(-28px,0,0); }
[data-rv="card"] { opacity:0; scale:.95; filter:blur(12px); }
[data-rv].is-in  { opacity:1; transform:none; scale:1; filter:none; }

/* generous room for Bodoni's long descenders (the g in "Reimagined") */
.ln{ display:block; overflow:hidden; padding-bottom:.22em; margin-bottom:-.22em; }
.ln > i{
  display:block; font-style:inherit; opacity:0; transform:translate3d(0,102%,0);
  transition:transform 1.15s var(--ease) var(--lnd,0s), opacity .9s var(--ease) var(--lnd,0s);
}
.is-in .ln > i{ transform:none; opacity:1; }

/* ── Glass ──────────────────────────────────────────────────────────────── */
.glass{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:14px; border:1px solid rgba(246,241,231,.16);
  background:
    linear-gradient(150deg, rgba(246,241,231,.075) 0%, rgba(246,241,231,.015) 44%, rgba(214,174,104,.06) 100%),
    linear-gradient(180deg, rgba(14,10,7,.62) 0%, rgba(10,7,5,.78) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(125%); backdrop-filter:blur(14px) saturate(125%);
  box-shadow:
    inset 0 1px 0 rgba(246,241,231,.14),
    0 22px 48px -28px rgba(0,0,0,.95),
    0 0 40px -18px rgba(214,174,104,.32);
}
.glass::before{
  content:""; position:absolute; z-index:0; inset:-60% -30%;
  pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(104deg, transparent 40%, rgba(246,241,231,.09) 46%,
             rgba(240,220,175,.24) 50%, rgba(246,241,231,.09) 54%, transparent 60%);
  transform:translate3d(-62%,0,0);
  animation:sheen 9s var(--ease-soft) infinite; animation-delay:var(--sheen,0s);
}
@keyframes sheen{
  0%{ transform:translate3d(-62%,0,0); opacity:0 } 8%{ opacity:1 }
  46%{ transform:translate3d(62%,0,0); opacity:1 } 58%,100%{ transform:translate3d(62%,0,0); opacity:0 }
}
/* (rotating gold prismatic edge removed — cards carry no gold border effects) */
.glass > *{ position:relative; z-index:1; }

.float{ animation:floaty var(--fdur,12s) var(--ease-soft) infinite; animation-delay:var(--fdel,0s); }
@keyframes floaty{ 0%,100%{ transform:translate3d(0,0,0) } 50%{ transform:translate3d(0,var(--fy,-12px),0) } }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.pill{
  display:inline-flex; align-items:center; gap:12px;
  height:44px; padding:0 22px; border-radius:99px;
  border:1px solid var(--gold-line);
  font-size:12.5px; color:var(--ivory);
  position:relative; overflow:hidden; white-space:nowrap;
  background:linear-gradient(180deg, rgba(214,174,104,.10), rgba(214,174,104,.03));
  transition:border-color .5s var(--ease), background .5s var(--ease), transform .5s var(--ease);
}
.pill::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 34%, rgba(240,220,175,.28) 50%, transparent 66%);
  transform:translateX(-130%); transition:transform .95s var(--ease);
}
.pill i{ font-style:normal; font-size:14px; transition:transform .5s var(--ease); }
.pill:hover{ border-color:rgba(214,174,104,.7); background:linear-gradient(180deg, rgba(214,174,104,.2), rgba(214,174,104,.07)); }
.pill:hover::before{ transform:translateX(130%); }
.pill:hover i{ transform:translateX(4px); }

.arrowbtn{
  flex:none; width:38px; height:38px; border-radius:99px;
  border:1px solid var(--gold-line); color:var(--champagne-l);
  display:grid; place-items:center; font-size:14px;
  transition:border-color .5s var(--ease), background .5s var(--ease), transform .5s var(--ease);
}
.arrowbtn:hover{ border-color:rgba(214,174,104,.8); background:rgba(214,174,104,.12); transform:translateX(3px); }

.iconbtn{
  width:38px; height:38px; border-radius:99px; display:grid; place-items:center;
  color:var(--txt-2); border:1px solid transparent;
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.iconbtn:hover{ color:var(--ivory); border-color:var(--line); }
.iconbtn svg{ width:17px; height:17px; }

/* ── Store badges ───────────────────────────────────────────────────────── */
.stores{ display:flex; align-items:center; gap:clamp(9px,.9vw,13px); flex-wrap:wrap; }
.store{
  position:relative; display:block; width:clamp(132px,11.4vw,162px);
  border-radius:99px; overflow:hidden; isolation:isolate;
  transition:transform .55s var(--ease), filter .55s var(--ease);
}
.store img{ width:100%; height:auto; }
.store::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(100deg, transparent 38%, rgba(255,255,255,.32) 50%, transparent 62%);
  transform:translateX(-130%); transition:transform 1s var(--ease);
}
.store:hover{ transform:translateY(-2px); filter:brightness(1.1); }
.store:hover::after{ transform:translateX(130%); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.hdr{
  position:fixed; inset:0 0 auto; z-index:1000; height:var(--hdr);
  display:flex; align-items:center; border-bottom:1px solid transparent;
  transition:transform .65s var(--ease), background .45s ease, border-color .45s ease, height .45s var(--ease);
}
.hdr.is-solid{
  background:rgba(8,6,5,.76);
  -webkit-backdrop-filter:blur(24px) saturate(140%); backdrop-filter:blur(24px) saturate(140%);
  border-bottom-color:var(--line-2); height:62px;
}
.hdr.is-hidden{ transform:translate3d(0,-102%,0); }
body.is-locked .hdr{ transform:none; }
.hdr__in{
  width:min(var(--maxw), calc(100% - var(--gut)*2)); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:22px;
}
.brand{ display:flex; align-items:center; gap:10px; flex:none; }
.brand img{ width:28px; height:28px; object-fit:contain; }
.brand span{ font-size:14px; font-weight:400; letter-spacing:.34em; color:var(--ivory); font-family:var(--serif); }
.nav{ display:flex; align-items:center; gap:clamp(16px,2vw,32px); }
.nav a{ position:relative; font-size:12.5px; color:var(--txt-2); padding:6px 0; transition:color .35s var(--ease); }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--champagne); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .5s var(--ease);
}
.nav a:hover{ color:var(--ivory); }
.nav a:hover::after{ transform:scaleX(1); }
.hdr__tools{ display:flex; align-items:center; gap:10px; flex:none; }
.burger{ width:38px; height:38px; display:grid; place-items:center; }
.burger i{ display:block; width:19px; height:1px; background:var(--ivory); margin:4px 0;
  transition:transform .45s var(--ease), opacity .3s ease; }
.is-open .burger i:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.is-open .burger i:nth-child(2){ opacity:0; }
.is-open .burger i:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }
/* the drawer is mobile navigation only — desktop shows the inline nav */
@media (min-width:1025px){ .burger{ display:none; } }

.drawer{
  position:fixed; inset:0; z-index:999;
  background:rgba(6,4,3,.97);
  -webkit-backdrop-filter:blur(28px); backdrop-filter:blur(28px);
  padding:calc(var(--hdr) + 24px) var(--gut) 40px;
  display:flex; flex-direction:column; justify-content:space-between;
  opacity:0; visibility:hidden; transform:translate3d(0,-12px,0);
  transition:opacity .55s var(--ease), transform .65s var(--ease), visibility .55s;
  overflow-y:auto;
}
.drawer.is-open{ opacity:1; visibility:visible; transform:none; }
.drawer__nav{ display:flex; flex-direction:column; gap:2px; }
.drawer__nav a{
  font-family:var(--serif); font-size:clamp(26px,7vw,38px); line-height:1.3; color:var(--ivory);
  opacity:0; transform:translateY(16px);
  transition:opacity .65s var(--ease), transform .65s var(--ease), color .3s ease;
}
.drawer.is-open .drawer__nav a{ opacity:1; transform:none; }
.drawer__nav a:hover{ color:var(--champagne-l); }
.drawer__foot{ margin-top:34px; }
.drawer__foot .stores{ margin-top:16px; }

/* ── Full-bleed scene shell ─────────────────────────────────────────────── */
.scene{ position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; }
.scene__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
/* <picture> is an inline wrapper by default, so an inner img's height:100%
   would resolve against it rather than the section — make it fill. */
.scene__bg picture{ display:block; width:100%; height:100%; }
.hero__visual picture, .final__visual picture{ display:block; width:100%; }
.scene__bg img{
  width:100%; height:100%; object-fit:cover; object-position:var(--focus,50% 40%);
  /* no extra zoom — the section is full-height, so `cover` already shows
     essentially the whole 16:9 frame. Scaling up would crop the composition. */
  opacity:.62; scale:1; translate:0 calc(var(--pp,0) * .12px);
  transition:opacity 1.4s var(--ease);
}
.scene.is-near .scene__bg img{ opacity:.78; }
.scene__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, var(--ink) 1%, rgba(10,8,6,.92) 20%, rgba(10,8,6,.42) 46%, rgba(10,8,6,.16) 66%, rgba(10,8,6,.58) 86%, rgba(10,8,6,.82) 100%),
    linear-gradient(180deg, rgba(10,8,6,.66), transparent 24%, transparent 74%, rgba(10,8,6,.72));
}
.scene__seam{
  position:absolute; left:0; right:0; top:0; height:1px; z-index:3; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--gold-soft) 22%, var(--gold-line) 50%, var(--gold-soft) 78%, transparent);
}

/* ── Right-hand editorial note column ───────────────────────────────────── */
.note{ display:grid; gap:14px; justify-items:start; }
.note__caps{
  font-size:clamp(9.5px,.74vw,11px); letter-spacing:.26em; text-transform:uppercase;
  color:var(--txt-2); line-height:2;
}
.note__quote{
  font-size:clamp(9.5px,.74vw,11px); letter-spacing:.22em; text-transform:uppercase;
  color:var(--txt-2); line-height:2.1;
}
.note hr{ border:0; width:52px; height:1px; background:var(--gold-line); margin:4px 0; }
.note__sub{ font-size:12.5px; line-height:1.85; color:var(--txt-3); }
.note__list{ display:grid; gap:9px; }
.note__list li{ font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--txt-3); }

/* ══ HERO ═══════════════════════════════════════════════════════════════ */
.hero{ min-height:100svh; padding:calc(var(--hdr) + clamp(26px,4vh,58px)) 0 clamp(30px,4.6vh,64px); }
.hero .scene__veil{
  background:
    linear-gradient(90deg, var(--ink) 2%, rgba(10,8,6,.88) 22%, rgba(10,8,6,.34) 48%, rgba(10,8,6,.22) 72%, rgba(10,8,6,.70) 100%),
    linear-gradient(180deg, rgba(10,8,6,.80) 0%, transparent 28%, transparent 66%, var(--ink) 100%);
}
.hero__glow{
  position:absolute; z-index:1; left:50%; top:16%; width:54vw; height:54vw; translate:-50% 0; pointer-events:none;
  background:radial-gradient(circle, rgba(214,174,104,.20), transparent 64%);
  filter:blur(46px); animation:pulse 10s ease-in-out infinite alternate;
}
@keyframes pulse{ from{ opacity:.5; scale:.96 } to{ opacity:1; scale:1.06 } }

.hero__in{
  position:relative; z-index:8;
  width:min(var(--maxw), calc(100% - var(--gut)*2)); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.24fr) minmax(0,.58fr);
  gap:clamp(18px,2.4vw,44px); align-items:center;
}
.hero__copy{ max-width:520px; }
.hero__copy .display{ margin:16px 0 16px; }
.hero__sub{ margin:0; font-size:clamp(14px,1.05vw,17px); line-height:1.5; color:var(--txt-2); }
.hero__copy .stores{ margin-top:clamp(22px,3vh,34px); }

/* the podium visual is feathered so it reads as part of the scene */
.hero__visual, .final__visual{ position:relative; }
.hero__visual img, .final__visual img{
  width:100%; height:auto;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:
    linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
          mask-composite:intersect;
}

/* hero index rail */
.idx{
  margin-top:clamp(26px,3.6vh,42px);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.4vw,26px);
  max-width:440px;
}
.idx__i{ display:grid; gap:9px; }
.idx__l{ font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--txt-3); line-height:1.5;
  transition:color .6s var(--ease); }
.idx__n{ font-size:10px; letter-spacing:.18em; color:var(--txt-4); font-variant-numeric:tabular-nums;
  transition:color .6s var(--ease); }
.idx__bar{ height:1px; background:var(--line); position:relative; overflow:hidden; }
.idx__bar::after{
  content:""; position:absolute; inset:0; background:var(--champagne);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .8s var(--ease);
}
.idx__i.on .idx__l{ color:var(--ivory); }
.idx__i.on .idx__n{ color:var(--champagne-l); }
.idx__i.on .idx__bar::after{ transform:scaleX(1); }

/* ══ FEATURE BAND ═══════════════════════════════════════════════════════ */
.fband{
  min-height:100svh;
  padding:clamp(40px,5.2vh,72px) 0;
  border-top:1px solid var(--line-2);
}
.fband__in{
  position:relative; z-index:8;
  width:min(var(--maxw), calc(100% - var(--gut)*2)); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,.56fr);
  gap:clamp(18px,2.6vw,48px); align-items:center;
}
.fband__copy{ max-width:440px; }
.fname{
  display:block; font-family:var(--serif); font-size:clamp(14px,1.15vw,17px);
  color:var(--ivory); letter-spacing:.01em; margin-bottom:12px;
}
.fband__copy .display{ margin:0 0 16px; }
.fband__copy .lede{ max-width:34ch; }
.fband__copy .pill{ margin-top:clamp(18px,2.4vh,28px); }
.fband__stage{ position:relative; display:flex; align-items:center; justify-content:center; }

/* ══ QUAD CARD ROW ══════════════════════════════════════════════════════ */
.quad{ border-top:1px solid var(--line-2); background:var(--ink); }
.quad__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line-2); }
.qcard{ position:relative; isolation:isolate; overflow:hidden; background:var(--ink); aspect-ratio:4/5; display:block; }
.qcard img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.66; scale:1.02;
  transition:opacity .8s var(--ease), scale 1.4s var(--ease);
}
.qcard::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(8,6,4,.88) 0%, rgba(8,6,4,.28) 46%, rgba(8,6,4,.58) 100%);
}
.qcard__body{ position:relative; z-index:3; padding:clamp(18px,1.7vw,28px); }
.qcard__n{ display:block; font-family:var(--serif); font-size:clamp(13px,1vw,15px); color:var(--txt-2); margin-bottom:10px; }
.qcard__t{
  margin:0; font-family:var(--serif); font-weight:400; color:var(--ivory);
  font-size:clamp(17px,1.5vw,24px); line-height:1.16; letter-spacing:-.015em;
}
.qcard__i{
  position:absolute; z-index:3; right:clamp(16px,1.5vw,24px); bottom:clamp(16px,1.5vw,24px);
  width:34px; height:34px; border-radius:99px; border:1px solid var(--gold-line);
  display:grid; place-items:center; color:var(--champagne-l); background:rgba(10,7,5,.5);
  transition:border-color .6s var(--ease), background .6s var(--ease), transform .6s var(--ease);
}
.qcard__i svg{ width:15px; height:15px; }
.qcard:hover img{ opacity:.82; scale:1.07; }
.qcard:hover .qcard__i{ border-color:rgba(214,174,104,.8); background:rgba(214,174,104,.16); transform:translateY(-3px); }

/* ══ MINI CARDS ═════════════════════════════════════════════════════════ */
.minis{ display:grid; gap:clamp(8px,.9vw,12px); }
.mini{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center;
  padding:13px 13px 13px 16px; border-radius:12px;
  transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.mini:hover{ transform:translateX(3px); }
.mini b{ display:block; font-family:var(--serif); font-weight:400; font-size:15px;
  color:var(--ivory); letter-spacing:.005em; white-space:nowrap; }
.mini span{ display:block; margin-top:5px; font-size:11px; line-height:1.55; color:var(--txt-3); }
.mini figure{ margin:0; width:52px; height:52px; border-radius:9px; overflow:hidden; flex:none; border:1px solid var(--line); }
.mini figure img{ width:100%; height:100%; object-fit:cover; opacity:.85; }

/* ══ CITIES ═════════════════════════════════════════════════════════════ */
.cities{ position:relative; border-top:1px solid var(--line-2); padding:clamp(56px,7vh,96px) 0; }
.cities__head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
  gap:clamp(20px,3vw,56px); align-items:end; margin-bottom:clamp(28px,4vh,48px);
}
.cities__head .display{ margin:16px 0 0; }
.cities__grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(8px,1vw,16px); }
/* photographic city panels — supplied art on top, HTML caption below,
   the photo fading into the card's black so the two read as one piece */
.citytile{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:14px; border:1px solid rgba(246,241,231,.14);
  background:#0B0805; display:flex; flex-direction:column;
  transition:transform .7s var(--ease), border-color .7s var(--ease), box-shadow .7s var(--ease);
}
.citytile img{
  width:100%; height:auto; aspect-ratio:243/760; object-fit:cover;
  -webkit-mask-image:linear-gradient(180deg,#000 76%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 76%,transparent 100%);
}
.citytile__b{ position:relative; z-index:2; display:block; margin-top:-30px; padding:0 16px 22px; }
.citytile__c{ display:block; font-size:8.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--txt-3); }
.citytile__c::after{ content:""; display:block; width:24px; height:1px; margin-top:11px;
  background:rgba(246,241,231,.32); }
.citytile__n{ display:block; margin-top:13px; font-family:var(--serif);
  font-size:clamp(17px,1.5vw,23px); color:var(--ivory); letter-spacing:.01em; line-height:1.1; }
.citytile__d{ display:block; margin-top:11px; font-size:8.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--txt-3); line-height:1.95; }
.citytile:hover{ transform:translateY(-5px); border-color:rgba(246,241,231,.34);
  box-shadow:0 26px 50px -28px rgba(0,0,0,1), 0 0 44px -18px rgba(214,174,104,.4); }

/* ══ FINAL ══════════════════════════════════════════════════════════════ */
.final{ min-height:100svh; padding:clamp(50px,7vh,100px) 0; border-top:1px solid var(--line-2); }
.final .scene__veil{
  background:
    linear-gradient(90deg, var(--ink) 2%, rgba(10,8,6,.86) 22%, rgba(10,8,6,.30) 48%, rgba(10,8,6,.22) 72%, rgba(10,8,6,.70) 100%),
    linear-gradient(180deg, var(--ink) 0%, rgba(10,8,6,.34) 22%, rgba(10,8,6,.34) 74%, var(--ink) 100%);
}
.final__in{
  position:relative; z-index:8;
  width:min(var(--maxw), calc(100% - var(--gut)*2)); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,.58fr);
  gap:clamp(18px,2.6vw,48px); align-items:center;
}
.final__in .display{ margin:0 0 16px; }
.final__in .stores{ margin-top:clamp(22px,3vh,34px); }

/* ══ FOOTER ═════════════════════════════════════════════════════════════ */
.ftr{ position:relative; background:var(--ink); border-top:1px solid var(--line-2); padding:clamp(44px,5.6vh,70px) 0 28px; }
.ftr__top{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr) minmax(0,1.9fr) auto;
  gap:clamp(24px,3vw,56px);
}
.ftr__brand{ display:flex; align-items:center; gap:11px; }
.ftr__brand img{ width:34px; height:34px; }
.ftr__brand span{ font-family:var(--serif); font-size:17px; letter-spacing:.3em; color:var(--ivory); }
.ftr__tag{ margin:14px 0 0; font-size:12.5px; line-height:1.8; color:var(--txt-3); max-width:30ch; }
.ftr h3{ margin:0 0 15px; font-size:8.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--txt-4); font-weight:500; }
.ftr__list{ display:grid; gap:9px; }
.ftr__list a{ font-size:12.5px; color:var(--txt-2); transition:color .35s var(--ease); width:max-content; }
.ftr__list a:hover{ color:var(--ivory); }
.ftr__legal{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.8vw,30px); }
.ftr__list a.is-key{ color:var(--champagne-l); display:inline-flex; align-items:center; gap:8px; }
.ftr__list a.is-key::before{ content:""; width:4px; height:4px; border-radius:99px; flex:none;
  background:var(--champagne); box-shadow:0 0 8px rgba(214,174,104,.9); }

.social{ display:flex; gap:9px; flex-wrap:wrap; }
.social a{
  width:34px; height:34px; border-radius:99px; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--txt-2);
  transition:border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.social a:hover{ border-color:var(--gold-line); color:var(--champagne-l); transform:translateY(-2px); }
.social svg{ width:15px; height:15px; }
.ftr__right .stores{ margin-top:18px; }

.ftr__bar{
  margin-top:clamp(32px,4.2vh,50px); padding-top:20px; border-top:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.ftr__bar p{ margin:0; font-size:11px; color:var(--txt-4); }
.ftr__bar .caps{ font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; }

/* ── Preloader ──────────────────────────────────────────────────────────── */
.boot{ position:fixed; inset:0; z-index:3000; background:var(--ink); display:grid; place-items:center;
  transition:opacity .9s var(--ease), visibility .9s; }
.boot.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.boot__mark{ display:grid; place-items:center; gap:20px; }
.boot__mark img{ width:46px; height:46px; animation:bootPulse 2.2s var(--ease-io) infinite; }
@keyframes bootPulse{ 0%,100%{opacity:.4; scale:.96} 50%{opacity:1; scale:1} }
.boot__bar{ width:110px; height:1px; background:rgba(246,241,231,.12); overflow:hidden; }
.boot__bar i{ display:block; height:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--champagne-d), var(--champagne-l)); animation:bootBar 1.4s var(--ease) forwards; }
@keyframes bootBar{ to{ transform:scaleX(1) } }

/* ══ RESPONSIVE ═════════════════════════════════════════════════════════ */
@media (max-width:1280px){
  .hero__in{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); }
  .hero .note, .final .note{ display:none; }
  .fband__in{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); }
  .fband .note{ grid-column:1 / -1; grid-auto-flow:column; justify-content:start; align-items:center; gap:24px; }
  .fband .note hr{ display:none; }
  .fband .note__list{ grid-auto-flow:column; gap:18px; }
  .final__in{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); }
  .minis{ grid-column:1 / -1; grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:1024px){
  :root{ --hdr:64px; }
  .nav{ display:none; }
  .quad__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* tall city panels become a swipe rail instead of stacking */
  .cities__grid{
    display:flex; gap:12px; overflow-x:auto; padding-bottom:16px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .cities__grid::-webkit-scrollbar{ display:none; }
  .citytile{ flex:0 0 clamp(190px,27vw,235px); scroll-snap-align:start; }
  .cities__head{ grid-template-columns:minmax(0,1fr); gap:18px; align-items:start; }
}

@media (max-width:760px){
  :root{ --gut:18px; }
  body{ font-size:15.5px; }
  .d-1{ font-size:clamp(38px,11vw,56px); }
  .d-2{ font-size:clamp(27px,8vw,38px); }

  .hero{ min-height:100svh; padding-top:calc(var(--hdr) + 26px); }
  .hero__in{ grid-template-columns:minmax(0,1fr); gap:clamp(26px,4vh,40px); }
  .hero .scene__bg img{ opacity:.4; }
  .hero .scene__veil{ background:linear-gradient(180deg, rgba(10,8,6,.9) 0%, rgba(10,8,6,.5) 32%, rgba(10,8,6,.9) 100%); }
  .idx{ max-width:100%; }

  .fband{ min-height:100svh; padding:clamp(34px,5vh,54px) 0; }
  .fband__in{ grid-template-columns:minmax(0,1fr); gap:26px; }
  .fband .scene__bg img{ opacity:.42; }
  .fband.is-near .scene__bg img{ opacity:.54; }
  .scene__veil{ background:linear-gradient(180deg, rgba(10,8,6,.88) 0%, rgba(10,8,6,.44) 34%, rgba(10,8,6,.88) 100%)!important; }
  .fband__copy .lede{ max-width:100%; }
  .fband .note{ grid-auto-flow:row; gap:12px; }
  .fband .note__list{ grid-auto-flow:column; flex-wrap:wrap; gap:14px; }
  .minis{ grid-template-columns:minmax(0,1fr); }

  .quad__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .citytile{ flex-basis:clamp(165px,45vw,205px); }

  .final{ min-height:100svh; padding:clamp(40px,6vh,64px) 0; }
  .final__in{ grid-template-columns:minmax(0,1fr); gap:26px; }

  .stores{ display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:360px; }
  .store{ width:100%; }

  .ftr__top{ grid-template-columns:minmax(0,1fr); gap:34px; }
  .ftr__legal{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ftr__bar{ flex-direction:column; align-items:flex-start; gap:10px; }
}

/* Below this the wordmark + CTA + globe + burger no longer fit on one line;
   the drawer carries Download and the launch markets instead. */
@media (max-width:620px){
  .hdr__tools .pill,
  .hdr__tools .iconbtn{ display:none; }
}

@media (max-width:420px){
  .quad__grid{ grid-template-columns:minmax(0,1fr); }
  .idx{ grid-template-columns:minmax(0,1fr); gap:14px; }
}

@media (max-width:340px){
  .stores{ grid-template-columns:1fr; max-width:230px; }
  .ftr__legal{ grid-template-columns:minmax(0,1fr); }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  [data-rv]{ opacity:1!important; transform:none!important; scale:1!important; filter:none!important; }
  .ln > i{ transform:none!important; opacity:1!important; }
  .grain{ display:none; }
  .scene__bg img{ scale:1.03!important; translate:none!important; }
}

@media (prefers-contrast:more){
  :root{ --txt-2:rgba(246,241,231,.84); --txt-3:rgba(246,241,231,.66); --txt-4:rgba(246,241,231,.48); }
  .scene__bg img{ opacity:.24!important; }
  .qcard img{ opacity:.3!important; }
}

@media print{
  .grain,.boot,.hdr,.drawer{ display:none!important; }
  body{ background:#fff; color:#000; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BRIEF COMPLIANCE ADDITIONS
   Every feature gets a full section with its own visual personality; the
   MedArena experiences get dedicated visual areas; extra holographic motion.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Alternating band direction ─────────────────────────────────────────── */
.fband--rev .fband__in{ grid-template-columns:minmax(0,.56fr) minmax(0,1.1fr) minmax(0,1fr); }
.fband--rev .note{ grid-column:1; grid-row:1; justify-items:start; }
.fband--rev .fband__stage{ grid-column:2; grid-row:1; }
.fband--rev .fband__copy{ grid-column:3; grid-row:1; justify-self:end; }
.fband--rev .scene__veil{
  background:
    linear-gradient(270deg, var(--ink) 1%, rgba(10,8,6,.92) 20%, rgba(10,8,6,.42) 46%, rgba(10,8,6,.16) 66%, rgba(10,8,6,.58) 86%, rgba(10,8,6,.82) 100%),
    linear-gradient(180deg, rgba(10,8,6,.66), transparent 24%, transparent 74%, rgba(10,8,6,.72));
}

/* ── Holographic scan line (architectural, not neon) ────────────────────── */
.holoscan{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.holoscan::before{
  content:""; position:absolute; left:8%; right:8%; height:1px; top:0;
  background:linear-gradient(90deg, transparent, rgba(240,220,175,.5), transparent);
  box-shadow:0 0 18px rgba(214,174,104,.4);
  animation:holoscan 11s var(--ease-io) infinite;
  opacity:0;
}
@keyframes holoscan{
  0%,100%{ top:12%; opacity:0 }
  8%{ opacity:.7 }
  48%{ top:86%; opacity:.7 }
  60%{ opacity:0; top:86% }
}

/* stage cards lift softly under the pointer */
@media (hover:hover){
  .fband__stage .glass{ transition:translate .7s var(--ease), box-shadow .7s var(--ease), border-color .7s var(--ease); }
  .fband__stage .glass:hover{
    translate:0 -5px; border-color:rgba(246,241,231,.34);
    box-shadow:inset 0 1px 0 rgba(246,241,231,.14), 0 30px 56px -28px rgba(0,0,0,1), 0 0 56px -16px rgba(214,174,104,.45);
  }
}

/* ── MedaVision — detection cards ───────────────────────────────────────── */
.reticle{ padding:18px; width:clamp(190px,17vw,240px); border-radius:16px; }
.reticle__f{ position:relative; aspect-ratio:1; display:grid; place-items:center; }
.reticle__f img{ width:70%; height:70%; object-fit:contain; filter:drop-shadow(0 14px 22px rgba(0,0,0,.85)); }
.reticle__f b{ position:absolute; width:22px; height:22px; border:1px solid rgba(240,220,175,.75); animation:retpulse 4.2s var(--ease-io) infinite; }
.reticle__f b:nth-child(1){ left:0; top:0; border-right:0; border-bottom:0 }
.reticle__f b:nth-child(2){ right:0; top:0; border-left:0; border-bottom:0; animation-delay:.2s }
.reticle__f b:nth-child(3){ left:0; bottom:0; border-right:0; border-top:0; animation-delay:.4s }
.reticle__f b:nth-child(4){ right:0; bottom:0; border-left:0; border-top:0; animation-delay:.6s }
@keyframes retpulse{ 0%,100%{ opacity:.4 } 50%{ opacity:1 } }
.reticle ul{ margin-top:14px; display:grid; gap:7px; }
.reticle li{ font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ivory); }

.detect{ width:clamp(170px,15vw,210px); border-radius:13px; }
.detect .kvp{ padding:14px 16px 15px; }
.detect .kvp b{ display:block; font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:rgba(214,174,104,.9); font-weight:500; }
.detect .kvp span{ display:block; margin-top:7px; font-size:13px; color:var(--ivory); letter-spacing:-.01em; }
.detect .bar{ margin-top:10px; height:1.5px; background:rgba(246,241,231,.13); border-radius:2px; overflow:hidden; }
.detect .bar i{ display:block; height:100%; width:var(--pct,80%);
  background:linear-gradient(90deg, var(--champagne-d), var(--champagne-l));
  transform-origin:0 50%; animation:barpulse 2.6s var(--ease) infinite alternate; }
@keyframes barpulse{ from{ transform:scaleX(.6) } to{ transform:scaleX(1) } }

/* ── StaréMatch — resonance ring ────────────────────────────────────────── */
.ring{
  width:clamp(150px,14vw,190px); aspect-ratio:1; border-radius:99px; flex:none;
  border:1px solid rgba(214,174,104,.4); display:grid; place-items:center; text-align:center;
  background:radial-gradient(circle, rgba(8,6,4,.82) 0%, rgba(8,6,4,.4) 60%, transparent 80%);
  position:relative;
}
.ring::before{
  content:""; position:absolute; inset:-10px; border-radius:99px;
  border:1px solid rgba(214,174,104,.16); animation:ringpulse 5s var(--ease-io) infinite;
}
.ring::after{
  content:""; position:absolute; width:5px; height:5px; border-radius:99px; top:-3px; left:calc(50% - 2.5px);
  background:var(--champagne-l); box-shadow:0 0 12px rgba(240,220,175,.95);
  transform-origin:50% calc(50% + clamp(75px,7vw,95px));
  animation:orbit 9s linear infinite;
}
@keyframes ringpulse{ 0%,100%{ transform:scale(1); opacity:.8 } 50%{ transform:scale(1.08); opacity:.25 } }
@keyframes orbit{ to{ transform:rotate(360deg) } }
.ring__v{ font-family:var(--serif); font-size:clamp(30px,3vw,42px); color:var(--ivory); line-height:1; }
.ring__v small{ font-size:.44em; }
.ring__k{ margin-top:8px; font-size:8.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--txt-2); }
/* Desktop: the ring sits exactly on the luminous orb in the backdrop.
   The orb is ~183 image-px wide at (827,393) in the 1672×941 art; `cover`
   scales it by max(vw/1672, svh/941), so the same max() keeps the ring
   matched to the orb at any window shape. The margin keeps the flow
   footprint at the old size so the info cards beside it don't move. */
@media (min-width:761px){
  #starematch .ring{
    --rw:clamp(150px, max(10.93vw, 19.42svh), 236px);
    width:var(--rw);
    margin:calc((clamp(150px,14vw,190px) - var(--rw)) / 2);
    /* net -9px: the wider info cards shift the ring's flow slot ~11px left */
    translate:2px -45px;
  }
  /* the info column rides along so the cluster stays aligned with the ring */
  #starematch .fband__stage > div[data-rv-group]{ translate:-9px -45px; }
  #starematch .ring::after{
    transform-origin:50% calc(50% + var(--rw)/2 + 8px);
  }
}

/* ── MuseMatch — aesthetic grid ─────────────────────────────────────────── */
.agrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(9px,1vw,14px); width:100%; max-width:420px; }
.agrid figure{ margin:0; position:relative; aspect-ratio:4/5; border-radius:12px; overflow:hidden;
  border:1px solid rgba(246,241,231,.16); }
.agrid img{ width:100%; height:100%; object-fit:cover; opacity:.9;
  transition:transform 1.1s var(--ease), opacity .6s ease; }
.agrid figcaption{
  position:absolute; left:10px; bottom:10px; z-index:2;
  font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ivory);
  padding:6px 11px; border-radius:99px; border:1px solid rgba(246,241,231,.22);
  background:rgba(8,6,4,.62); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.agrid figure:hover img{ transform:scale(1.06); opacity:1; }

/* ── EraFusion — era rail ───────────────────────────────────────────────── */
.erarail{ padding:22px 26px; border-radius:16px; width:clamp(230px,21vw,290px); }
.erarail ul{ position:relative; display:grid; gap:clamp(13px,1.6vh,19px); padding-left:24px; }
.erarail ul::before{
  content:""; position:absolute; left:0; top:2%; bottom:2%; width:1px;
  background:linear-gradient(180deg, transparent, var(--gold-line), transparent);
}
.erarail ul::after{
  content:""; position:absolute; left:-2px; width:5px; height:5px; border-radius:99px;
  background:var(--champagne); box-shadow:0 0 12px rgba(214,174,104,.9);
  animation:eradot 9s var(--ease-io) infinite;
}
@keyframes eradot{ 0%,100%{ top:4% } 50%{ top:92% } }
.erarail li{ display:flex; align-items:baseline; gap:13px; }
.erarail li b{ font-family:var(--serif); font-weight:400; font-size:clamp(18px,1.7vw,23px);
  color:var(--ivory); min-width:3.2ch; font-variant-numeric:tabular-nums; }
.erarail li span{ font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-3); }
.erarail li:last-child span{ color:rgba(214,174,104,.9); }

/* ── MedArena — dedicated experience areas ──────────────────────────────── */
.xwrap{ position:relative; z-index:8; width:min(var(--maxw), calc(100% - var(--gut)*2)); margin-inline:auto;
  padding-bottom:clamp(46px,6vh,84px); }
.xhead{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-bottom:clamp(22px,3vh,36px); }
.xhead h3{ margin:0; font-family:var(--serif); font-weight:400; color:var(--ivory);
  font-size:clamp(20px,2vw,30px); letter-spacing:-.015em; }
.xgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.5vw,24px); }
.xcard{
  position:relative; isolation:isolate; overflow:hidden; border-radius:16px;
  border:1px solid rgba(246,241,231,.10);
  transition:transform .8s var(--ease), border-color .8s var(--ease), box-shadow .8s var(--ease);
}
.xcard__m{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.xcard__m img{ width:100%; height:100%; object-fit:cover; opacity:.72; transform:scale(1.02);
  transition:transform 1.4s var(--ease), opacity .8s var(--ease); }
.xcard__m::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,6,4,.44) 0%, transparent 32%, rgba(8,6,4,.58) 68%, rgba(8,6,4,.95) 100%);
}
.xcard__sweep{
  position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(112deg, transparent 42%, rgba(240,220,175,.18) 50%, transparent 58%);
  transform:translateX(-130%); transition:transform 1.3s var(--ease);
}
.xcard:hover .xcard__sweep{ transform:translateX(130%); }
.xcard__b{ position:absolute; z-index:3; left:0; right:0; bottom:0; padding:clamp(18px,1.8vw,28px); }
.xcard__k{ display:flex; align-items:center; gap:9px;
  font-size:8.5px; letter-spacing:.26em; text-transform:uppercase; color:rgba(214,174,104,.9); }
.xcard__k::before{ content:""; width:18px; height:1px; background:var(--gold-line); }
.xcard__t{ margin:12px 0 8px; font-family:var(--serif); font-weight:400; color:var(--ivory);
  font-size:clamp(20px,1.9vw,28px); line-height:1.08; letter-spacing:-.015em; }
.xcard__d{ margin:0; font-size:12.5px; line-height:1.6; color:var(--txt-2); max-width:32ch; }
.xcard__tags{ margin-top:14px; display:flex; gap:7px; flex-wrap:wrap; }
.xcard__tags span{ font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-3);
  border:1px solid var(--line); border-radius:99px; padding:5px 10px; }
.xcard:hover{ transform:translateY(-6px); border-color:rgba(246,241,231,.30);
  box-shadow:0 34px 66px -36px rgba(0,0,0,1), 0 0 60px -22px rgba(214,174,104,.4); }
.xcard:hover .xcard__m img{ transform:scale(1.08); opacity:.86; }

/* ── Responsive for the new components ──────────────────────────────────── */
@media (max-width:1280px){
  .fband--rev .fband__in{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); }
  .fband--rev .fband__copy{ grid-column:1; grid-row:1; justify-self:start; }
  .fband--rev .fband__stage{ grid-column:2; grid-row:1; }
  .fband--rev .note{ grid-column:1 / -1; grid-row:auto; }
}
@media (max-width:760px){
  .fband--rev .fband__in{ grid-template-columns:minmax(0,1fr); }
  .fband--rev .fband__copy, .fband--rev .fband__stage, .fband--rev .note{ grid-column:auto; grid-row:auto; justify-self:start; }
  .fband--rev .scene__veil{ background:linear-gradient(180deg, rgba(10,8,6,.88) 0%, rgba(10,8,6,.44) 34%, rgba(10,8,6,.88) 100%)!important; }
  .xgrid{ grid-template-columns:minmax(0,1fr); }
  .xcard__m{ aspect-ratio:3/4; }
  .agrid{ max-width:100%; }
  .holoscan{ display:none; }
}

/* MedArena stacks its band + the three experience areas in one section */
.fband--stack{ flex-direction:column; justify-content:center; gap:clamp(24px,4vh,44px); }
.fband--stack .fband__in{ align-items:center; }

/* ══ Closeté — free-floating 3D wardrobe cards ═══════════════════════════
   Each garment is its own glass card, standing diagonally in perspective
   (rotateY/rotateX like the tilted panels inside the photography), floating
   on its own cycle, and drifting at its own rate as the page scrolls so the
   cards visibly change positions relative to one another.
   Composition rules (no property fights):
     .wcard    → placement + scroll drift (translate/rotate properties)
     .wcard__f → float loop (transform keyframes)
     .wcard__t → the static 3D stance (transform) + glass material          */

.wstage{
  position:relative; width:100%; max-width:560px; margin-inline:auto;
  height:clamp(400px,60vh,580px);
  perspective:1300px; perspective-origin:50% 40%;
  transform-style:preserve-3d;
}
.wcard{
  position:absolute; left:var(--wx,0%); top:var(--wy,0%); z-index:var(--zl,1);
  width:var(--ww, clamp(116px,10.6vw,156px));
  transform-style:preserve-3d;
  /* scroll drift: --pp (set per-frame on the section) runs +100 → -100 as the
     band crosses the viewport; each card gets its own rate and spin */
  translate:0 calc(var(--pp,0) * var(--wd,.22) * -1px);
  rotate:calc(var(--pp,0) * var(--wr,.018) * 1deg);
  will-change:translate;
}
.wcard__f{ transform-style:preserve-3d; animation:floaty var(--fdur,12s) var(--ease-soft) infinite; animation-delay:var(--fdel,0s); }
.wcard__t{
  transform:rotateY(var(--ry,-18deg)) rotateX(var(--rx,6deg)) rotateZ(var(--rz,0deg)) translateZ(var(--wz,0px));
  transform-style:preserve-3d;
  border-radius:13px;
}
.wcard__t{ margin:0; }
.wcard__t img{
  width:100%; height:auto; aspect-ratio:3/4; object-fit:contain; padding:13% 13% 9%;
  background:radial-gradient(72% 64% at 50% 36%, rgba(246,241,231,.13), rgba(246,241,231,.02) 64%, transparent 100%);
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.85));
}
.wcard__t figcaption{
  padding:8px 11px 11px; text-align:center;
  font-size:8px; letter-spacing:.22em; text-transform:uppercase; color:var(--txt-3);
  border-top:1px solid var(--line-2);
}
/* soft ground shadow that sells the levitation */
.wcard::after{
  content:""; position:absolute; left:12%; right:12%; bottom:-16px; height:14px;
  border-radius:99px; background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.55), transparent 72%);
  filter:blur(4px); z-index:-1;
}
/* small floating label chip, tilted with the rest */
.wchip{ position:absolute; left:var(--wx); top:var(--wy); z-index:8;
  translate:0 calc(var(--pp,0) * var(--wd,.14) * -1px);
  transform-style:preserve-3d; }
.wchip > span{
  display:inline-flex; align-items:center; gap:9px; padding:9px 14px; border-radius:99px;
  transform:rotateY(var(--ry,-14deg)) rotateX(4deg);
  font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--champagne-l);
  white-space:nowrap;
}
.wchip i{ font-style:normal; color:var(--txt-3); letter-spacing:.1em; }

@media (max-width:1280px){
  .wstage{ max-width:500px; height:clamp(380px,52vh,520px); }
}
@media (max-width:760px){
  .wstage{ max-width:100%; height:clamp(360px,54vh,440px); perspective:1000px; }
  .wcard{ width:var(--wwm, clamp(100px,26vw,128px)); }
  .wcard::after{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .wcard, .wchip{ translate:none!important; rotate:none!important; }
}

/* Floating wardrobe cards read as true glass: the body is far more
   transparent and relies on backdrop blur, while the product image itself
   stays fully opaque. */
.wcard__t.glass{
  background:
    linear-gradient(150deg, rgba(246,241,231,.10) 0%, rgba(246,241,231,.025) 46%, rgba(214,174,104,.07) 100%),
    linear-gradient(180deg, rgba(20,14,9,.20) 0%, rgba(12,8,5,.28) 100%);
  -webkit-backdrop-filter:blur(9px) saturate(135%);
  backdrop-filter:blur(9px) saturate(135%);
  border-color:rgba(246,241,231,.26);
  box-shadow:
    inset 0 1px 0 rgba(246,241,231,.22),
    0 22px 48px -26px rgba(0,0,0,.9),
    0 0 44px -18px rgba(214,174,104,.30);
}
.wcard__t img{ opacity:1; }
.wcard__t figcaption{
  color:var(--txt-2);
  border-top-color:rgba(246,241,231,.14);
  background:rgba(10,7,5,.22);
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}

/* Scroll-staged appearance: cards pop one by one as the Closeté screen
   enters, all visible once the section fills the viewport. Uses the
   independent scale property, so the 3D stance and drift are untouched. */
[data-appear]{
  opacity:0; scale:.92; filter:blur(10px);
  transition:opacity .75s var(--ease), scale .85s var(--ease), filter .75s var(--ease);
}
[data-appear].is-in{ opacity:1; scale:1; filter:none; }
@media (prefers-reduced-motion:reduce){
  [data-appear]{ opacity:1!important; scale:1!important; filter:none!important; }
}

/* ══ Site-wide 3D glass pass ═════════════════════════════════════════════
   Every card stands in gentle perspective like the Closeté wardrobe wall.
   The stance uses the independent `rotate` property so the reveal system
   (transform) and the float loop (transform keyframes) are untouched, and
   photo cards that are not .glass gain the same prismatic running edge and
   inner highlight so the whole page speaks one glass language. */

/* depth contexts — perspective on each card row's parent */
.fband__stage{ perspective:1200px; }
.fband__stage > div:not(.ring){ transform-style:preserve-3d; }
.xgrid{ perspective:1500px; }
.cities__grid{ perspective:1700px; }

/* the stance — same turn direction as the Closeté wall */
.mini{ rotate:y 13deg; }
.detect{ rotate:y 16deg; }
.reticle{ rotate:y 18deg; }
.erarail{ rotate:y 18deg; }
.agrid figure{ rotate:y 13deg; }
.xcard{ rotate:y 9deg; }
.citytile{ rotate:y 11deg; }

/* larger stage cards */
.detect{ width:clamp(188px,16.4vw,232px); }
.detect .kvp{ padding:16px 18px 17px; }
.detect .kvp span{ font-size:14px; }
.reticle{ padding:20px; width:clamp(210px,18.6vw,266px); }
.erarail{ padding:25px 30px; width:clamp(250px,22.6vw,320px); }
.erarail li b{ font-size:clamp(19px,1.85vw,25px); }
.agrid{ max-width:470px; }
.mini{ padding:15px 15px 15px 18px; }
.mini figure{ width:60px; height:60px; }
.mini b{ font-size:16px; }

/* glass depth for the photo cards (no gold border effects) */
.agrid figure{
  box-shadow:inset 0 1px 0 rgba(246,241,231,.16), 0 26px 50px -30px rgba(0,0,0,.9);
}
.xcard{
  box-shadow:inset 0 1px 0 rgba(246,241,231,.12), 0 26px 54px -32px rgba(0,0,0,.9);
}
.xcard:hover{
  box-shadow:inset 0 1px 0 rgba(246,241,231,.16),
    0 34px 66px -36px rgba(0,0,0,1), 0 0 60px -22px rgba(214,174,104,.4);
}
.citytile{ box-shadow:0 22px 44px -30px rgba(0,0,0,.85); }

/* gentler angles where the columns are narrow */
@media (max-width:760px){
  .mini,.agrid figure,.xcard,.citytile{ rotate:y 8deg; }
  .detect,.reticle,.erarail{ rotate:y 10deg; }
}