/* ============================================================
   O Thank Heaven 4 711
   Card/bento system modelled on the Axle reference: charcoal and
   frosted cards floating on a light ground, outlined pill nav,
   big numerals, orange accent.
   ============================================================ */

:root{
  --ground:#E6E5E1;
  --ground-2:#DEDDD8;
  --ink:#0C3D5C;
  --ink-2:#164F76;
  --card:#F3F2EF;
  --accent:#EE6B22;

  --on-dark:#FFFFFF;
  --on-dark-soft:rgba(255,255,255,.74);
  --on-light:#22272B;
  --on-light-soft:#4C555B;

  --f-display:"Fraunces",Georgia,serif;
  --f-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  --r-card:30px;
  --r-card-sm:22px;
  --gut:clamp(14px,2.4vw,30px);
  --ease:cubic-bezier(.22,1,.36,1);
  --nav-h:74px;
  --shadow:0 18px 44px rgba(12,61,92,.18);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0;font-family:var(--f-sans);color:var(--on-light);
  background:var(--ground);-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
::selection{background:var(--accent);color:#fff;}
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;}
.skip{position:absolute;left:-9999px;top:0;z-index:300;padding:12px 18px;
  background:var(--ink);color:#fff;text-decoration:none;border-radius:0 0 10px 0;}
.skip:focus{left:0;}

/* ---------- pills ---------- */
.pill,.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:13px 22px;border-radius:999px;font-size:.88rem;font-weight:500;
  text-decoration:none;white-space:nowrap;cursor:pointer;border:1px solid transparent;
  transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease);}
.pill--solid,.btn--primary{background:var(--ink);color:#fff;}
.pill--solid:hover,.btn--primary:hover{background:var(--accent);transform:translateY(-2px);}
.pill--ghost{border-color:rgba(255,255,255,.55);color:#fff;}
.pill--ghost:hover{background:rgba(255,255,255,.16);transform:translateY(-2px);}
.pill--lg{padding:16px 26px;font-size:.94rem;}
.btn{border-color:var(--ink);color:var(--on-light);}
.btn:hover{transform:translateY(-2px);}
.pill__dot{width:22px;height:22px;border-radius:50%;background:var(--accent);
  display:grid;place-items:center;flex:0 0 auto;}
.pill__dot::after{content:"";width:0;height:0;border:solid transparent;
  border-width:4px 0 4px 6px;border-left-color:#fff;margin-left:2px;}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;min-height:var(--nav-h);
  display:flex;align-items:center;gap:clamp(10px,1.6vw,18px);padding:14px var(--gut);}
.nav__brand{display:inline-flex;align-items:center;gap:10px;margin-right:auto;
  background:var(--ink);color:#fff;text-decoration:none;padding:12px 20px;
  border-radius:999px;font-family:var(--f-display);font-size:.98rem;
  white-space:nowrap;box-shadow:var(--shadow);}
.nav__four{color:var(--accent);}
.nav__mark,.rail__mark{width:16px;height:16px;flex:0 0 auto;background:var(--accent);
  clip-path:polygon(50% 0,100% 100%,72% 100%,50% 44%,28% 100%,0 100%);}
.rail__mark{width:26px;height:26px;}
.nav__links{display:flex;gap:8px;}
.nav__links a{display:inline-flex;align-items:center;padding:12px 18px;
  border-radius:999px;text-decoration:none;font-size:.85rem;color:var(--on-light);
  border:1px solid rgba(12,61,92,.28);background:rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  white-space:nowrap;transition:all .25s;}
.nav__links a:hover{border-color:var(--ink);}
.nav__links a.is-on{background:var(--ink);color:#fff;border-color:var(--ink);}
.nav__cta{box-shadow:var(--shadow);}
.nav__toggle{display:none;width:48px;height:48px;border:0;cursor:pointer;
  border-radius:999px;background:var(--ink);
  flex-direction:column;justify-content:center;gap:5px;align-items:center;}
.nav__toggle span{display:block;width:19px;height:1.5px;background:#fff;
  transition:transform .3s var(--ease);}
.nav.is-open .nav__toggle span:first-child{transform:translateY(3.25px) rotate(45deg);}
.nav.is-open .nav__toggle span:last-child{transform:translateY(-3.25px) rotate(-45deg);}

@media (max-width:1040px){
  .nav__cta{display:none;}
  .nav__toggle{display:flex;}
  .nav__links{position:absolute;top:calc(100% - 4px);left:var(--gut);right:var(--gut);
    flex-direction:column;gap:6px;padding:14px;border-radius:var(--r-card-sm);
    background:var(--ink);box-shadow:var(--shadow);clip-path:inset(0 0 100% 0);
    opacity:0;pointer-events:none;transition:clip-path .38s var(--ease),opacity .3s;}
  .nav.is-open .nav__links{clip-path:inset(0 0 0 0);opacity:1;pointer-events:auto;}
  .nav__links a{background:none;border-color:rgba(255,255,255,.18);color:#fff;
    justify-content:flex-start;font-size:.95rem;}
  .nav__links a.is-on{background:var(--accent);border-color:var(--accent);}
}

/* ---------- cards ---------- */
.card{border-radius:var(--r-card);position:relative;overflow:hidden;}
.card--dark{background:var(--ink);color:var(--on-dark);}
.card--frost{background:radial-gradient(120% 90% at 50% 0%,#FFFFFF 0%,
    var(--card) 58%,var(--ground-2) 100%);
  color:var(--on-light);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);}

/* ---------- hero bento ----------
   Twelve columns. The words have their own card; the film card holds
   nothing but film. */
.hero{padding:calc(var(--nav-h) + 4px) var(--gut) clamp(8px,1.2vw,14px);}
.bento{display:grid;gap:12px;grid-template-columns:repeat(12,1fr);
  grid-auto-rows:minmax(0,auto);}
.b-type{grid-column:span 5;display:flex;flex-direction:column;
  justify-content:center;gap:16px;padding:clamp(26px,2.6vw,44px);
  min-height:clamp(380px,50svh,560px);}
.b-film{grid-column:span 7;margin:0;overflow:hidden;
  min-height:clamp(380px,50svh,560px);background:var(--ink);
  display:flex;flex-direction:column;}
.b-stat{grid-column:span 3;}
.b-gauge{grid-column:span 3;}
.b-now{grid-column:span 3;}

/* the type card */
.b-type__kicker{margin:0;display:flex;align-items:center;gap:10px;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-soft);font-weight:600;}
.b-type__h1{margin:0;font-family:var(--f-display);font-weight:400;color:#fff;
  font-size:clamp(2.3rem,3.6vw,4.1rem);line-height:1;letter-spacing:-.03em;
  text-wrap:balance;}
.b-type__sub{margin:0;max-width:44ch;color:var(--on-dark-soft);
  font-size:clamp(.96rem,1.05vw,1.1rem);line-height:1.6;}
.b-type__act{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}
.pill--accent{background:var(--accent);color:#fff;}
.pill--accent:hover{background:#ff7d38;transform:translateY(-2px);}

/* the film card. The label is a strip of the card, not a chip floating on
   the footage: nothing on this page sits on top of an image. */
.b-film__media{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;}
.b-film__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s ease;}
.b-film__video.is-on{opacity:1;}
.b-film__cap{flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:13px 18px;background:var(--card);color:var(--on-light);
  font-size:.82rem;font-weight:600;letter-spacing:-.005em;}
.b-film__live{width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 rgba(238,107,34,.6);animation:livePulse 2.4s ease-out infinite;}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(238,107,34,.55);}
  70%{box-shadow:0 0 0 9px rgba(238,107,34,0);}
  100%{box-shadow:0 0 0 0 rgba(238,107,34,0);}
}

/* stat cards */
.stat__dots{display:flex;gap:7px;margin-bottom:12px;}
.stat__dots i{width:13px;height:13px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);}
.stat__dots i.on{background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(238,107,34,.22);}
.b-stat{display:flex;flex-direction:column;justify-content:flex-end;
  gap:10px;padding:24px;min-height:190px;}
.stat__fig{margin:0;font-size:clamp(2.6rem,4vw,3.6rem);font-weight:700;
  letter-spacing:-.04em;line-height:.86;color:#fff;font-variant-numeric:tabular-nums;}
.stat__fig em{font-style:normal;font-size:.34em;font-weight:500;margin-left:.14em;
  letter-spacing:0;color:var(--on-dark-soft);}
.stat__label{margin:0;font-size:.78rem;line-height:1.42;color:var(--on-dark-soft);}

/* gauge */
.b-gauge{padding:20px 22px 22px;display:flex;flex-direction:column;gap:12px;
  min-height:190px;}
.gauge__title{margin:0;font-size:.76rem;color:var(--on-light-soft);text-align:center;}
/* defaults to the true fill; JS animates from 0 only when it can
   actually finish, so a stalled frame loop cannot leave it empty */
.gauge__ring{--p:74%;position:relative;margin:2px auto 4px;width:min(140px,58%);
  aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--accent) 0 var(--p),rgba(12,61,92,.2) var(--p) 100%);}
.gauge__ring::after{content:"";position:absolute;inset:13%;border-radius:50%;
  background:var(--card);}
.gauge__ring span{position:relative;z-index:1;font-size:1.28rem;font-weight:700;
  letter-spacing:-.03em;color:var(--on-light);}
.gauge__ring i{font-style:normal;font-size:.56em;font-weight:500;margin-left:1px;}
.gauge__rows{margin:0;display:grid;gap:9px;}
.gauge__rows>div{display:grid;grid-template-columns:52px 1fr;gap:9px;align-items:center;}
.gauge__rows dt{font-size:.7rem;color:var(--on-light-soft);}
.gauge__rows dd{margin:0;display:flex;align-items:center;gap:8px;font-size:.74rem;
  font-weight:600;color:var(--on-light);}
.gauge__rows dd i{height:7px;border-radius:99px;background:var(--accent);
  width:var(--w);min-width:6px;max-width:70px;}
.gauge__rows .is-muted dd i{background:rgba(12,61,92,.3);}

/* the live card */
.b-now{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  gap:4px;padding:24px;min-height:190px;overflow:hidden;}
.b-now__label{margin:0;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark-soft);position:relative;z-index:1;}
.b-now__time{margin:4px 0 0;font-size:clamp(2.2rem,3.4vw,3rem);font-weight:700;
  letter-spacing:-.04em;line-height:.9;color:#fff;font-variant-numeric:tabular-nums;
  position:relative;z-index:1;}
.b-now__time em{font-style:normal;font-size:.34em;font-weight:500;margin-left:.16em;
  color:var(--on-dark-soft);}
.b-now__meta{margin:6px 0 0;font-size:.76rem;color:var(--accent);font-weight:600;
  position:relative;z-index:1;}
.b-now__sky{position:absolute;inset:0;z-index:0;opacity:.85;transition:background 1.2s ease;
  background:radial-gradient(120% 80% at 80% 0%,rgba(238,107,34,.32),transparent 62%);}
.b-now__sky[data-phase="day"]{background:
  radial-gradient(120% 80% at 80% 0%,rgba(90,170,220,.34),transparent 64%);}
.b-now__sky[data-phase="dusk"]{background:
  radial-gradient(120% 86% at 78% 4%,rgba(238,107,34,.46),transparent 66%);}
.b-now__sky[data-phase="night"]{background:
  radial-gradient(120% 80% at 78% 0%,rgba(70,96,140,.36),transparent 62%);}

@media (max-width:1100px){
  .b-type,.b-film{grid-column:span 12;min-height:auto;}
  .b-film{min-height:52svh;}
  .b-stat,.b-gauge,.b-now{grid-column:span 6;}
}
@media (max-width:620px){
  .b-stat,.b-gauge,.b-now{grid-column:span 12;}
  .b-type__act{width:100%;}
  .b-type__act .pill{flex:1 1 100%;}
  .b-film{min-height:46svh;}
}

/* ---------- sections ---------- */
.site{position:relative;z-index:2;}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--gut);}
.wrap--narrow{max-width:800px;}
.wrap--split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(16px,2.4vw,36px);align-items:center;}
.wrap--flip>*:first-child{order:-1;}
.sec{padding-block:clamp(28px,3.8vw,60px);position:relative;}
.sec--morning,.sec--lanai,.sec--inside,.sec--book{background:var(--ground);}
.sec--water,.sec--evening,.sec--gallery{background:var(--ink);color:var(--on-dark);}
.sec--faq{background:var(--ground-2);}

.eyebrow{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin:0 0 10px;
  display:flex;align-items:center;gap:10px;}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.8;}
.h2{font-family:var(--f-display);font-weight:400;line-height:1.05;
  font-size:clamp(1.9rem,4.2vw,3.2rem);letter-spacing:-.022em;margin:0 0 12px;
  color:inherit;text-wrap:balance;max-width:19ch;}
.lede{font-size:clamp(1rem,1.45vw,1.18rem);line-height:1.62;max-width:56ch;
  margin:0 0 10px;color:var(--on-light-soft);}
.note{font-size:.98rem;line-height:1.6;max-width:52ch;margin:0;color:var(--on-light-soft);}
.sec--water .lede,.sec--water .note,
.sec--evening .lede,.sec--evening .note,
.sec--gallery .lede{color:var(--on-dark-soft);}
.link{color:var(--accent);text-decoration:none;font-weight:600;
  border-bottom:1px solid currentColor;padding-bottom:1px;}
.link:hover{opacity:.75;}

/* ---------- figures are cards ---------- */
.shot,.band,.honu-stage{margin:0;border-radius:var(--r-card);overflow:hidden;
  background:var(--ink);box-shadow:var(--shadow);}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.shot--tall img{aspect-ratio:3/4;}
.band{margin-top:clamp(14px,2vw,24px);}
.band img{width:100%;aspect-ratio:21/9;object-fit:cover;}
.band--whale video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#000;}
.sec{--cap-bg:var(--card);--cap-fg:var(--on-light);}
.shot figcaption,.band figcaption,.honu-stage figcaption{
  padding:14px 18px;font-size:.85rem;line-height:1.4;font-weight:600;
  letter-spacing:-.005em;background:var(--cap-bg);color:var(--cap-fg);}
.duo{display:grid;gap:clamp(12px,1.6vw,18px);margin-top:clamp(12px,1.8vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
@media (max-width:880px){ .band img{aspect-ratio:16/10;} }

/* ---------- comparison + stats ---------- */
.compare{margin:clamp(14px,2vw,26px) 0;display:grid;gap:16px;max-width:720px;}
.compare__row{display:grid;grid-template-columns:minmax(110px,190px) 1fr;
  gap:clamp(12px,2vw,22px);align-items:center;}
.compare__label{font-size:.85rem;color:var(--on-light-soft);}
.compare__row--ours .compare__label{color:var(--on-light);font-weight:600;}
.compare__bar{display:flex;align-items:center;gap:13px;}
.compare__bar i{display:block;height:clamp(15px,2.2vw,24px);border-radius:99px;
  background:var(--accent);width:var(--w);transition:width 1.1s var(--ease);}
.compare__bar--muted i{background:rgba(12,61,92,.22);}
.compare__bar b{font-size:clamp(.95rem,1.7vw,1.2rem);font-weight:700;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.js-reveal .compare__bar i{width:0;}
.js-reveal .in-view .compare__bar i{width:var(--w);}

.stats{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.stats li{background:var(--ink);color:#fff;border-radius:var(--r-card-sm);
  padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.stats span{font-size:clamp(1.9rem,3.6vw,2.6rem);font-weight:700;line-height:.9;
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:#fff;}
.stats em{font-style:normal;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-dark-soft);}

/* ---------- honu ---------- */
.honu-stage{display:flex;flex-direction:column;isolation:isolate;}
.honu-stage__frame{position:relative;aspect-ratio:4/3;overflow:hidden;}
.honu-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  will-change:opacity,transform;backface-visibility:hidden;}
.honu-shot--a{animation:honuFadeA 20s ease-in-out infinite,honuDrift 20s ease-in-out infinite;}
.honu-shot--b{opacity:0;animation:honuFadeB 20s ease-in-out infinite,
  honuDrift 20s ease-in-out infinite reverse;}
@keyframes honuFadeA{0%,42%{opacity:1}52%,92%{opacity:0}100%{opacity:1}}
@keyframes honuFadeB{0%,42%{opacity:0}52%,92%{opacity:1}100%{opacity:0}}
@keyframes honuDrift{0%{transform:scale(1.05)}50%{transform:scale(1.13) translate3d(-1.6%,-1.2%,0)}100%{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){
  .honu-shot{animation:none!important;} .honu-shot--b{display:none;}
}

/* ---------- inside ---------- */
.inside__top{display:grid;gap:clamp(16px,2.4vw,34px);align-items:center;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);}
.spec{margin:clamp(12px,1.8vw,22px) 0 14px;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.spec>div{background:var(--card);border-radius:var(--r-card-sm);padding:18px 20px;
  display:grid;gap:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);}
.spec dt{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);font-weight:700;}
.spec dd{margin:0;color:var(--on-light-soft);line-height:1.55;font-size:.94rem;}
@media (max-width:880px){
  .inside__top{grid-template-columns:1fr;}
  .shot--tall{max-width:440px;}
  .shot--tall img{aspect-ratio:4/5;}
  .wrap--split{grid-template-columns:1fr;}
  .wrap--flip>*:first-child{order:0;}
  .compare__row{grid-template-columns:1fr;gap:6px;}
  .h2{max-width:none;}
}

/* ---------- gallery ---------- */
.sec--gallery{padding-top:clamp(22px,2.8vw,40px);padding-bottom:clamp(18px,2.2vw,32px);}
.gal__tabs{position:sticky;top:var(--nav-h);z-index:6;display:flex;gap:8px;
  overflow-x:auto;padding:14px var(--gut);margin-top:clamp(10px,1.4vw,18px);
  background:color-mix(in srgb,var(--ink) 92%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);scrollbar-width:none;}
.gal__tabs::-webkit-scrollbar{display:none;}
.gal__tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  padding:12px 17px;min-height:44px;border-radius:999px;text-decoration:none;
  font-size:.82rem;color:var(--on-dark-soft);border:1px solid rgba(255,255,255,.2);
  transition:all .25s;}
.gal__tab b{font-weight:500;font-size:.72rem;opacity:.7;}
.gal__tab:hover{color:#fff;border-color:rgba(255,255,255,.5);}
.gal__tab.is-on{color:#fff;background:var(--accent);border-color:var(--accent);}
.gal{padding-inline:var(--gut);}
.gcat{padding-block:clamp(14px,1.8vw,28px);scroll-margin-top:calc(var(--nav-h) + 74px);}
.gcat+.gcat{border-top:1px solid rgba(255,255,255,.1);}
.gcat__head{max-width:62ch;margin-bottom:clamp(10px,1.4vw,18px);}
.gcat__head h3{font-family:var(--f-display);font-weight:400;margin:0 0 8px;
  font-size:clamp(1.4rem,3vw,2.2rem);color:#fff;}
.gcat__head p{margin:0;color:var(--on-dark-soft);font-size:.96rem;line-height:1.55;}
.gcat__count{display:inline-block;margin-top:10px;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);}
.gcat__grid{display:grid;gap:clamp(10px,1.2vw,16px);
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));perspective:1100px;}
.gcard{margin:0;position:relative;border-radius:var(--r-card-sm);overflow:hidden;
  cursor:pointer;background:var(--card);display:flex;flex-direction:column;
  transform-style:preserve-3d;--rx:0deg;--ry:0deg;--lift:0px;
  transform:rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0,var(--lift),0);
  transition:transform .5s var(--ease),box-shadow .5s;will-change:transform;}
.gcard:focus-visible{outline:none;box-shadow:0 0 0 2px var(--accent),0 18px 44px rgba(0,0,0,.5);}
.gcard img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.gcard figcaption{flex:1 0 auto;padding:12px 14px 13px;font-size:.82rem;
  line-height:1.35;font-weight:600;letter-spacing:-.005em;
  color:var(--on-light);background:var(--card);}
@media (hover:hover) and (pointer:fine){
  .gcard:hover{--lift:-5px;box-shadow:0 22px 50px rgba(0,0,0,.5);}
}
@media (hover:none){ .gcard{transform:none;} .gcard:active{transform:scale(.985);} }
.gcard.is-video::after{content:"";position:absolute;top:10px;right:10px;
  width:28px;height:28px;border-radius:50%;background:var(--accent);}
.gcard.is-video::before{content:"";position:absolute;top:19px;right:19px;z-index:2;
  border:solid transparent;border-width:5px 0 5px 8px;border-left-color:#fff;}
@media (max-width:640px){
  .gcat__grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));}
  .gcard figcaption{font-size:.76rem;padding:10px 11px 11px;}
}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(20,24,27,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  padding:calc(env(safe-area-inset-top,0px) + clamp(56px,7vh,72px))
          calc(env(safe-area-inset-right,0px) + clamp(10px,4vw,48px))
          calc(env(safe-area-inset-bottom,0px) + clamp(56px,8vh,72px))
          calc(env(safe-area-inset-left,0px) + clamp(10px,4vw,48px));
  overscroll-behavior:contain;touch-action:pan-y;}
.lb[hidden]{display:none;}
.lb__stage{margin:0;width:100%;height:100%;min-height:0;display:flex;
  flex-direction:column;gap:12px;align-items:center;justify-content:center;}
.lb__media{position:relative;min-height:0;max-width:100%;max-height:100%;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-card-sm);overflow:hidden;background:#14181b;}
.lb__media img,.lb__media video{display:block;width:100%;height:100%;
  object-fit:contain;background:#14181b;}
.lb__pre{position:absolute;inset:0;filter:blur(14px);transform:scale(1.06);
  transition:opacity .4s ease;}
.lb__pre.is-off{opacity:0;}
.lb__full{position:relative;}
.lb__stage figcaption{flex:0 0 auto;display:flex;align-items:baseline;gap:10px;
  flex-wrap:wrap;justify-content:center;text-align:center;color:#fff;font-size:.86rem;}
.lb__stage figcaption span{color:rgba(255,255,255,.6);font-size:.78rem;
  font-variant-numeric:tabular-nums;}
.lb__x,.lb__nav{position:absolute;z-index:2;background:rgba(255,255,255,.14);
  color:#fff;border:1px solid rgba(255,255,255,.26);cursor:pointer;border-radius:50%;
  display:grid;place-items:center;line-height:1;transition:background .25s,transform .25s;}
.lb__x:hover,.lb__nav:hover{background:var(--accent);border-color:var(--accent);}
.lb__x:active,.lb__nav:active{transform:scale(.93);}
.lb__x{top:calc(env(safe-area-inset-top,0px) + 12px);
  right:calc(env(safe-area-inset-right,0px) + 12px);width:46px;height:46px;font-size:1.6rem;}
.lb__nav{top:50%;translate:0 -50%;width:48px;height:48px;font-size:1.9rem;}
.lb__nav--prev{left:calc(env(safe-area-inset-left,0px) + 10px);}
.lb__nav--next{right:calc(env(safe-area-inset-right,0px) + 10px);}
@media (max-width:700px){
  .lb__nav{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);
    translate:none;width:44px;height:44px;font-size:1.5rem;}
  .lb__nav--prev{left:calc(env(safe-area-inset-left,0px) + 16px);}
  .lb__nav--next{right:calc(env(safe-area-inset-right,0px) + 16px);}
  .lb__stage figcaption{max-width:58%;}
}
@media (hover:none){ .lb__x:hover,.lb__nav:hover{background:rgba(255,255,255,.14);} }

/* ---------- faq ---------- */
.faq{margin-top:clamp(10px,1.4vw,18px);display:grid;gap:10px;}
.faq__q{background:var(--card);border-radius:var(--r-card-sm);padding:2px 20px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);}
.faq__q summary{cursor:pointer;list-style:none;padding:17px 34px 17px 0;position:relative;
  font-family:var(--f-display);font-size:clamp(1rem,1.9vw,1.28rem);color:var(--on-light);}
.faq__q summary::-webkit-details-marker{display:none;}
.faq__q summary::after{content:"";position:absolute;right:4px;top:50%;width:9px;height:9px;
  border-right:1.6px solid var(--accent);border-bottom:1.6px solid var(--accent);
  translate:0 -60%;rotate:45deg;transition:rotate .3s,translate .3s;}
.faq__q[open] summary::after{rotate:225deg;translate:0 -25%;}
.faq__q p{margin:0 0 18px;max-width:68ch;color:var(--on-light-soft);line-height:1.62;}

/* ---------- book ---------- */
.sec--book{text-align:center;}
.sec--book .eyebrow{justify-content:center;}
.sec--book .h2,.sec--book .lede{margin-inline:auto;}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px;}
.fineprint{margin-top:26px;font-size:.78rem;color:var(--on-light-soft);}
.fineprint:empty{display:none;}
@media (max-width:430px){ .cta-row .pill,.cta-row .btn{flex:1 1 100%;} }

/* ---------- sticky bar ---------- */
.cta-bar{position:fixed;left:var(--gut);right:var(--gut);
  bottom:calc(var(--gut) + env(safe-area-inset-bottom,0px));z-index:120;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 12px 12px 22px;border-radius:999px;background:var(--ink);
  box-shadow:var(--shadow);
  transform:translateY(calc(100% + var(--gut) + 20px));
  transition:transform .45s var(--ease);}
.cta-bar.is-on{transform:none;}
.cta-bar[hidden]{display:none;}
.cta-bar p{margin:0;display:flex;flex-direction:column;line-height:1.3;min-width:0;}
.cta-bar strong{color:#fff;font-size:.9rem;}
.cta-bar span{color:var(--on-dark-soft);font-size:.74rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cta-bar .btn{flex:0 0 auto;background:var(--accent);color:#fff;border-color:var(--accent);
  padding:12px 20px;font-size:.84rem;}
@media (max-width:460px){ .cta-bar span{display:none;} }

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#fff;text-align:center;
  padding-block:clamp(26px,3.2vw,46px);padding-bottom:clamp(72px,7.5vw,96px);}
.foot__brand{font-family:var(--f-display);font-size:clamp(1.3rem,2.8vw,1.9rem);margin:0 0 10px;}
.foot__brand span{color:var(--accent);}
.foot__meta{margin:0;font-size:.85rem;color:var(--on-dark-soft);}
.foot__legal{margin:16px 0 0;font-size:.74rem;color:rgba(255,255,255,.5);}
.foot__legal:empty{display:none;}

/* ---------- reveal fallback ---------- */
.js-reveal .sec .wrap>*{opacity:0;transform:translateY(20px);
  transition:opacity .7s ease,transform .7s var(--ease);}
.js-reveal .sec.in-view .wrap>*{opacity:1;transform:none;}

/* ---------- scroll-driven depth ---------- */
@supports (animation-timeline: view()) {
  .css-depth .sec .wrap > *,
  .css-depth .gcat__head > *,
  .css-depth .spec > div,
  .css-depth .faq__q,
  .css-depth .duo > *,
  .css-depth .stats li {
    animation: swRise linear both;
    animation-timeline: view();
    animation-range: entry 4% cover 28%;
  }
  .css-depth .spec > div:nth-child(even){animation-range:entry 8% cover 34%;}
  .css-depth .faq__q:nth-child(even){animation-range:entry 7% cover 32%;}
  .css-depth .sec .wrap > .honu-stage,
  .css-depth .sec .wrap > .shot,
  .css-depth .sec .wrap > .band{
    animation: swDepth linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 42%;
  }
  .css-depth .gcard{
    animation: swFade linear both;
    animation-timeline: view();
    animation-range: entry 2% cover 20%;
  }
  .css-depth .compare__bar i{
    width:0;animation:swBar linear both;
    animation-timeline: view();
    animation-range: entry 18% cover 34%;
  }
}
@keyframes swRise{from{opacity:0;transform:translate3d(0,28px,0) scale(.986);}to{opacity:1;transform:none;}}
@keyframes swDepth{from{opacity:0;transform:perspective(1200px) rotateX(6deg) translate3d(0,44px,-80px);}to{opacity:1;transform:perspective(1200px) rotateX(0) translate3d(0,0,0);}}
@keyframes swFade{from{opacity:0;}to{opacity:1;}}
@keyframes swBar{from{width:0;}to{width:var(--w);}}