/* Alex — style.css
   Mobile-first: base rules are for phones, wider screens are added with min-width media queries
   (360 / 640 / 860 / 1100 / 1500 / 1600).
   Palette: black / burgundy / ivory. The red gradient is used only as an accent.
   Fonts are self-hosted (assets/fonts), no external requests. */

@font-face{font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;src:url('../assets/fonts/montserrat-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/montserrat-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/montserrat-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/montserrat-latin-600-normal.woff2') format('woff2')}

:root{
  --ink:#060101;
  --ink-2:#0e0303;
  --burg:#2a0503;
  --ivory:#F4EFEA;
  --ivory-dim:rgba(244,239,234,.7);
  --line:rgba(244,239,234,.2);
  --grad:linear-gradient(100deg,#FF5A2A 0%,#E03A1B 38%,#B92612 72%,#8A1409 100%);
  --grad-line:linear-gradient(90deg,#E03A1B,rgba(224,58,27,0));
  --f:'Montserrat','Avenir Next','Helvetica Neue',Arial,sans-serif;
  --gl:max(16px,env(safe-area-inset-left,0px));
  --gr:max(16px,env(safe-area-inset-right,0px));
  --max:1680px;
  /* background of the first screen: fitted to the approved mockup, 16:9 canvas */
  --stage:
  radial-gradient(ellipse 41.6% 56.1% at 81.8% 72.1%,rgba(34,0,0,0.735) 0%,rgba(34,0,0,0.693) 10%,rgba(34,0,0,0.583) 20%,rgba(34,0,0,0.437) 30%,rgba(34,0,0,0.292) 40%,rgba(34,0,0,0.174) 50%,rgba(34,0,0,0.092) 60%,rgba(34,0,0,0.044) 70%,rgba(34,0,0,0.018) 80%,rgba(34,0,0,0.007) 90%,rgba(34,0,0,0.002) 100%),
  radial-gradient(ellipse 35.0% 55.7% at 104.2% 53.6%,rgba(255,37,0,0.912) 0%,rgba(255,37,0,0.861) 10%,rgba(255,37,0,0.724) 20%,rgba(255,37,0,0.543) 30%,rgba(255,37,0,0.363) 40%,rgba(255,37,0,0.216) 50%,rgba(255,37,0,0.115) 60%,rgba(255,37,0,0.054) 70%,rgba(255,37,0,0.023) 80%,rgba(255,37,0,0.008) 90%,rgba(255,37,0,0.002) 100%),
  radial-gradient(ellipse 55.2% 58.4% at 74.7% 67.7%,rgba(255,7,2,0.36) 0%,rgba(255,7,2,0.34) 10%,rgba(255,7,2,0.286) 20%,rgba(255,7,2,0.214) 30%,rgba(255,7,2,0.143) 40%,rgba(255,7,2,0.085) 50%,rgba(255,7,2,0.045) 60%,rgba(255,7,2,0.021) 70%,rgba(255,7,2,0.009) 80%,rgba(255,7,2,0.003) 90%,rgba(255,7,2,0.001) 100%),
  radial-gradient(ellipse 45.8% 62.2% at 52.7% 7%,rgba(87,2,1,0.375) 0%,rgba(87,2,1,0.354) 10%,rgba(87,2,1,0.298) 20%,rgba(87,2,1,0.223) 30%,rgba(87,2,1,0.149) 40%,rgba(87,2,1,0.089) 50%,rgba(87,2,1,0.047) 60%,rgba(87,2,1,0.022) 70%,rgba(87,2,1,0.009) 80%,rgba(87,2,1,0.004) 90%,rgba(87,2,1,0.001) 100%),
  rgb(7,0,0);
  color-scheme:dark;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--ivory);font-family:var(--f);font-size:16px;line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
main,.band{overflow-x:clip}
img{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--ivory);outline-offset:4px}
.acc{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ivory);color:var(--ink);padding:10px 16px;font:600 .7rem/1 var(--f);letter-spacing:.2em;text-transform:uppercase;text-decoration:none}
.skip:focus{left:8px}

/* ---------- Navigation (phone: Menu button + dropdown) ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:30;display:grid;grid-template-columns:1fr auto;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 16px) var(--gr) 16px var(--gl);transition:background .35s}
.nav.open,.nav.scrolled{background:rgba(6,1,1,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.brand{grid-row:1;grid-column:1;font:300 1.2rem/1 var(--f);letter-spacing:.6em;text-decoration:none;color:var(--ivory)}
.links{display:none;grid-row:2;grid-column:1/-1;flex-direction:column;padding-top:14px}
.nav.open .links{display:flex}
.links a{padding:16px 0;border-top:1px solid var(--line);font:500 .78rem/1 var(--f);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:var(--ivory)}
.nav-right{grid-row:1;grid-column:2;justify-self:end;display:flex;align-items:center;gap:6px}
.menu-btn{background:none;color:var(--ivory);border:0;padding:10px 4px;cursor:pointer;font:500 .66rem/1 var(--f);letter-spacing:.22em;text-transform:uppercase}
.pill{display:inline-block;font:600 .62rem/1 var(--f);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--ivory);border:1px solid var(--ivory);border-radius:999px;padding:1.1em 1.5em;transition:background .25s,color .25s,border-color .25s}

/* ---------- Hero (phone: photo on top, text below) ---------- */
.hero{position:relative;width:100%;overflow:hidden;background:var(--ink);isolation:isolate;display:flex;flex-direction:column}
.stage{position:relative;order:-1;width:100%;height:min(112.6vw,760px);overflow:hidden}
.stage::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(to bottom,transparent,var(--ink) 94%)}
.canvas{position:absolute;top:0;right:0;height:100%;aspect-ratio:16/9;background:var(--stage)}
.hero__figure{position:absolute;left:52.78%;top:5.55%;height:94.34%;width:auto;aspect-ratio:948/1109;max-width:none;display:block;animation:flyin 1.7s cubic-bezier(.16,1,.3,1) .1s both}
.hero__text{position:relative;z-index:2;margin:calc(-1 * clamp(80px,24vw,190px)) var(--gr) 0 var(--gl);padding-bottom:26px}
.eyebrow{display:flex;align-items:center;gap:10px;font:500 .62rem/1 var(--f);letter-spacing:.2em;text-transform:uppercase;animation:rise 1s .05s cubic-bezier(.2,.7,.2,1) both}
.eyebrow i{font-style:normal;margin-right:4px}
.eyebrow::after{content:"";width:60px;height:1px;background:var(--grad-line);margin-left:8px}
.hero__title{margin:16px 0 0;font:300 clamp(2.5rem,12.4vw,5.6rem)/.932 var(--f);text-transform:uppercase;letter-spacing:.005em}
.hero__title span{display:block;animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
.hero__title span+span{animation-delay:.12s}
.hero__title em{font-style:normal;display:inline-block;padding-right:.04em}
.tagline{margin:18px 0 0;font:400 1rem/1.4 var(--f);letter-spacing:.035em;animation:rise 1s .3s cubic-bezier(.2,.7,.2,1) both}
.chips{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;font:500 .62rem/1.4 var(--f);letter-spacing:.2em;text-transform:uppercase;animation:rise 1s .4s cubic-bezier(.2,.7,.2,1) both}
.chips li+li::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--grad);margin-right:14px;vertical-align:middle}
.cta{margin-top:24px;display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:var(--ivory);border:1px solid var(--ivory);border-radius:999px;padding:1.15em 2.2em;font:600 .66rem/1 var(--f);letter-spacing:.17em;text-transform:uppercase;transition:background .25s,border-color .25s;animation:rise 1s .5s cubic-bezier(.2,.7,.2,1) both}
.cta svg{width:16px;height:16px}
.strip{position:relative;z-index:2;margin:0 var(--gr) 0 var(--gl);padding:20px 0 28px;list-style:none;display:grid;grid-template-columns:1fr;gap:12px;border-top:1px solid var(--line);font:500 .6rem/1 var(--f);letter-spacing:.22em;text-transform:uppercase;animation:rise 1s .05s cubic-bezier(.2,.7,.2,1) both}
.strip li{display:flex;align-items:center;gap:14px}
.strip li::before{content:"";width:22px;height:1px;background:var(--line)}

/* ---------- Sections (phone) ---------- */
.band{position:relative;padding-top:clamp(64px,9vw,150px);padding-bottom:clamp(64px,9vw,150px);padding-left:max(var(--gl),calc((100% - var(--max)) / 2));padding-right:max(var(--gr),calc((100% - var(--max)) / 2))}
.label{display:flex;align-items:center;gap:14px;font:500 .62rem/1 var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-dim)}
.label::after{content:"";width:clamp(48px,8vw,130px);height:1px;background:var(--grad-line)}
.h2{margin:18px 0 0;font:300 clamp(2.1rem,9.4vw,5.6rem)/1 var(--f);letter-spacing:.005em;text-transform:uppercase;text-wrap:balance;overflow-wrap:anywhere}
.crop{background:radial-gradient(95% 80% at 85% 40%,rgba(150,22,8,.75),rgba(42,5,3,.9) 62%),#0e0303;aspect-ratio:var(--ar);position:relative;overflow:hidden}
.crop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.9s cubic-bezier(.16,1,.3,1)}
button.crop{display:block;width:100%;padding:0;border:0;color:inherit;font:inherit;cursor:zoom-in;text-align:left}

.about{display:grid;grid-template-columns:1fr;gap:36px;align-items:center}
.about .crop{--ar:.8548;width:100%}
.about p.lead{margin:24px 0 0;max-width:30ch;font:300 clamp(1.3rem,5.4vw,2.3rem)/1.3 var(--f)}
.about p.body{margin:20px 0 0;max-width:56ch;color:var(--ivory-dim)}
.facts{margin:32px 0 0;padding:0;display:grid;border-top:1px solid var(--line)}
.facts div{display:grid;grid-template-columns:1fr;gap:4px;padding:16px 0;border-bottom:1px solid var(--line)}
.facts dt{font:500 .66rem/1.6 var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-dim)}
.facts dd{margin:0}

.shows{background:linear-gradient(180deg,var(--ink),#0b0202 50%,var(--ink))}
.rows{margin:36px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:background .4s}
.row h3{margin:0;font:300 clamp(1.35rem,6.4vw,3.4rem)/1.1 var(--f);text-transform:uppercase;overflow-wrap:anywhere}
.row p{grid-column:1;grid-row:2;margin:0;color:var(--ivory-dim);max-width:40ch}
.row .go{grid-row:1/3;grid-column:2;font:600 .66rem/1 var(--f);letter-spacing:.2em;text-transform:uppercase;display:inline-flex;align-items:center;gap:12px;white-space:nowrap}
.row .go span{display:none}
.row .go svg{width:18px;height:18px;transition:transform .3s}
.row h3,.row p{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.row:hover{background:linear-gradient(90deg,rgba(110,12,6,.3),transparent 70%)}
.row:hover h3,.row:hover p{transform:translateX(10px)}
.row:hover .go svg{transform:translateX(6px)}
.row:hover h3{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

.mason{margin:36px 0 0;column-count:2;column-gap:12px}
.tile{break-inside:avoid;margin:0 0 12px;position:relative}
.tile figcaption{position:absolute;left:10px;bottom:10px;z-index:2;pointer-events:none;font:500 .54rem/1 var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--ivory);text-shadow:0 1px 12px rgba(6,1,1,.9)}

.booking{background:radial-gradient(70% 90% at 100% 0%,rgba(110,12,6,.4),transparent 65%),linear-gradient(180deg,var(--ink),var(--burg) 140%)}
.book{display:grid;grid-template-columns:1fr;gap:36px;align-items:start}
.book p.sub{margin:22px 0 0;max-width:36ch;color:var(--ivory-dim)}
form{display:grid;gap:24px 28px;grid-template-columns:1fr}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f label{font:500 .66rem/1 var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-dim)}
.f input,.f select,.f textarea{width:100%;background:transparent;color:var(--ivory);border:0;border-bottom:1px solid rgba(244,239,234,.34);border-radius:0;padding:.7em 0;font:400 1rem/1.4 var(--f);transition:border-color .25s}
.f textarea{resize:vertical;min-height:84px}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-color:#E03A1B}
.f input:focus-visible,.f select:focus-visible,.f textarea:focus-visible{outline:2px solid var(--ivory);outline-offset:6px}
.f option{background:#0e0303;color:var(--ivory)}
.f input::placeholder,.f textarea::placeholder{color:rgba(244,239,234,.4)}
.submit{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.submit button,.copy{cursor:pointer;background:transparent;color:var(--ivory);border:1px solid var(--ivory);border-radius:999px;padding:1.3em 2.4em;font:600 .68rem/1 var(--f);letter-spacing:.2em;text-transform:uppercase;transition:background .25s,border-color .25s}
.hint{margin:0;font-size:.85rem;color:var(--ivory-dim)}
.out{border:1px solid var(--line);padding:18px;background:rgba(6,1,1,.6);display:grid;gap:14px;min-width:0}
.out[hidden]{display:none}
.out textarea{width:100%;min-height:150px;background:transparent;color:var(--ivory);border:0;font:400 .92rem/1.6 var(--f);resize:vertical}
.out .row2{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.out .st{font-size:.85rem;color:var(--ivory-dim)}
.chan{display:flex;flex-wrap:wrap;gap:12px}
.chan a{font:600 .66rem/1 var(--f);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:1em 1.6em}

footer{padding-top:36px;padding-bottom:calc(36px + env(safe-area-inset-bottom,0px));padding-left:max(var(--gl),calc((100% - var(--max)) / 2));padding-right:max(var(--gr),calc((100% - var(--max)) / 2));border-top:1px solid var(--line);display:flex;flex-direction:column;gap:14px;font:500 .62rem/1.4 var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-dim)}
footer .brand{font-size:1.2rem}

/* ---------- Photo viewer (phone: arrows at the bottom) ---------- */
.lb{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(6,1,1,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:calc(env(safe-area-inset-top,0px) + 64px) max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 72px) max(16px,env(safe-area-inset-left,0px))}
.lb.open{display:flex;animation:lbin .35s ease both}
.lb img{max-width:100%;max-height:100%;object-fit:contain;touch-action:pan-y;background:radial-gradient(95% 80% at 85% 40%,rgba(150,22,8,.75),rgba(42,5,3,.9) 62%),#0e0303}
.lb button{position:absolute;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--line);border-radius:50%;background:rgba(6,1,1,.5);color:var(--ivory);cursor:pointer;transition:background .25s,border-color .25s}
.lb button:hover{background:var(--grad);border-color:transparent}
.lb button svg{width:20px;height:20px}
.lb .x{top:calc(env(safe-area-inset-top,0px) + 14px);right:max(14px,env(safe-area-inset-right,0px))}
.lb .p,.lb .n{bottom:calc(env(safe-area-inset-bottom,0px) + 14px)}
.lb .p{left:22%}
.lb .n{right:22%}
.lb .cnt{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 30px);left:0;right:0;text-align:center;font:500 .62rem/1 var(--f);letter-spacing:.22em;text-transform:uppercase;color:var(--ivory-dim);pointer-events:none}
body.lb-lock{overflow:hidden}

/* ---------- Motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes flyin{from{opacity:0;transform:translateX(7%) scale(.975)}to{opacity:1;transform:none}}
@keyframes lbin{from{opacity:0}to{opacity:1}}
/* Scroll motion is active only when the head script adds .js */
.js .up{opacity:0;transform:translateY(36px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0ms)}
.js .up.in{opacity:1;transform:none}
.js .label.up::after{transform:scaleX(0);transform-origin:left;transition:transform 1.3s cubic-bezier(.16,1,.3,1) .25s}
.js .label.up.in::after{transform:none}
.js .h2 .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em .02em .1em;margin:-.06em -.02em -.1em}
.js .h2 .w>span{display:inline-block;transform:translateY(112%) rotate(4deg);transform-origin:left bottom;transition:transform 1.2s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*75ms)}
.js .h2.in .w>span{transform:none}
.js .fly{opacity:0;transform:translate3d(calc(var(--fx,0px) * .5),var(--fy,90px),0) rotate(var(--fr,0deg)) scale(.9);clip-path:inset(14% 10% 14% 10%);transition:opacity .7s ease,transform 1.4s cubic-bezier(.16,1,.3,1),clip-path 1.4s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0ms);will-change:transform}
.js .fly.in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
.js .crop img{transform:scale(1.22)}
.js .fly.in .crop img,.js .crop.fly.in img{transform:none}
.js .tile figcaption{opacity:0;transform:translateY(10px);transition:opacity .8s ease .7s,transform .8s ease .7s}
.js .tile.in figcaption{opacity:1;transform:none}
/* Animations play on every device, regardless of the system motion setting */

/* ---------- Buttons: dark button with a thin red contour; on hover a bright red light runs around the contour ---------- */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.cta,.pill,.submit button,.copy,.chan a{position:relative;isolation:isolate;color:#fff;background:transparent;border:1px solid transparent;box-shadow:0 0 0 rgba(224,58,27,0);transition:background .35s,box-shadow .4s}
.cta::before,.pill::before,.submit button::before,.copy::before,.chan a::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--ang),rgba(224,58,27,.16) 0%,rgba(224,58,27,.16) 18%,#B92612 33%,#FF3B1F 42%,#FF7A45 46%,rgba(224,58,27,.16) 56%,rgba(224,58,27,.16) 68%,#B92612 83%,#FF3B1F 92%,#FF7A45 95%,rgba(224,58,27,.16) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:spin 2.8s linear -.9s infinite paused}
.cta:hover,.pill:hover,.submit button:hover,.copy:hover,.chan a:hover,.cta:focus-visible,.pill:focus-visible,.submit button:focus-visible,.copy:focus-visible,.chan a:focus-visible{background:rgba(185,38,18,.08);box-shadow:0 0 26px rgba(224,58,27,.3)}
.cta:hover::before,.pill:hover::before,.submit button:hover::before,.copy:hover::before,.chan a:hover::before,.cta:focus-visible::before,.pill:focus-visible::before,.submit button:focus-visible::before,.copy:focus-visible::before,.chan a:focus-visible::before{animation-play-state:running}
@keyframes spin{to{--ang:360deg}}
/* Phones and touch screens have no hover: the contour light runs all the time */
@media (hover:none),(max-width:859px){
  .cta::before,.pill::before,.submit button::before,.copy::before,.chan a::before{animation-play-state:running}
}

/* =====================================================================
   360+  small phones and up
   ===================================================================== */
@media (min-width:360px){
  .brand{font-size:1.3rem}
  .pill{padding:1.15em 1.7em;font-size:.64rem}
  .tile figcaption{left:12px;bottom:12px;font-size:.58rem}
  .mason{column-gap:14px}
  .tile{margin-bottom:14px}
}

/* =====================================================================
   640+  large phones, small tablets
   ===================================================================== */
@media (min-width:640px){
  :root{--gl:max(clamp(24px,4.2vw,84px),env(safe-area-inset-left,0px));--gr:max(clamp(24px,3.7vw,84px),env(safe-area-inset-right,0px))}
  .brand{font-size:1.4rem}
  .menu-btn{font-size:.7rem}
  .links a{font-size:.84rem}
  .tagline{font-size:1.15rem}
  .chips,.eyebrow,.strip{font-size:.7rem}
  .cta{font-size:.74rem}
  .stage{height:min(100vw,760px)}
  .hero__text{margin-top:calc(-1 * clamp(90px,16vw,170px))}
  .strip{grid-template-columns:repeat(3,auto);justify-content:space-between;gap:12px 24px}
  .strip li::before{width:28px}
  form{grid-template-columns:1fr 1fr}
  .f.full,.submit,.out{grid-column:1/-1}
  .facts div{grid-template-columns:minmax(110px,1fr) 2fr;gap:16px}
  .row .go span{display:inline}
  .tile figcaption{left:16px;bottom:14px;font-size:.62rem}
  .mason{column-gap:20px}
  .tile{margin-bottom:20px}
  footer{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 32px}
  /* viewer: arrows on the sides */
  .lb .p,.lb .n{top:50%;bottom:auto;transform:translateY(-50%)}
  .lb .p{left:max(14px,env(safe-area-inset-left,0px))}
  .lb .n{right:max(14px,env(safe-area-inset-right,0px))}
  .lb{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 64px)}
}

/* =====================================================================
   860+  tablets landscape, laptops: the 16:9 mockup layout
   ===================================================================== */
@media (min-width:860px){
  /* nav */
  .nav{grid-template-columns:1fr auto 1fr;padding:calc(env(safe-area-inset-top,0px) + 1.45vw) max(3.7vw,env(safe-area-inset-right,0px)) 1.45vw max(4.2vw,env(safe-area-inset-left,0px))}
  .nav.open{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav.scrolled{background:rgba(6,1,1,.86)}
  .brand{font-size:clamp(1.15rem,1.3vw,1.6rem);letter-spacing:.76em}
  .links{display:flex;flex-direction:row;grid-row:1;grid-column:2;gap:3.45vw;padding:0;transform:translateX(-1.4vw)}
  .links a{padding:8px 0;border-top:0;border-bottom:1px solid transparent;font-size:clamp(.62rem,.68vw,.82rem);opacity:.9;transition:border-color .2s}
  .links a:hover{border-color:var(--ivory)}
  .menu-btn{display:none}
  .nav-right{grid-column:3}
  .pill{padding:1.35em 2.4em;font-size:clamp(.62rem,.68vw,.82rem)}

  /* hero */
  .hero{display:block;aspect-ratio:16/9}
  .stage{position:absolute;inset:0;order:0;height:auto}
  .stage::after{display:none}
  .canvas{inset:0;height:auto;aspect-ratio:auto}
  .canvas::after{content:"";position:absolute;inset:auto 0 0 0;height:20%;background:linear-gradient(to bottom,transparent,rgba(6,1,1,.6) 55%,var(--ink))}
  .hero__text{position:absolute;left:max(4.2vw,env(safe-area-inset-left,0px));top:23.9%;width:56%;margin:0;padding:0}
  .eyebrow{gap:.6vw;font-size:clamp(.6rem,.66vw,.8rem)}
  .eyebrow i{margin-right:.4vw}
  .eyebrow::after{width:8.2vw;margin-left:1.1vw}
  .hero__title{margin:1.5vw 0 0;font-size:min(7.06vw,181px)}
  .tagline{margin:1.35vw 0 0;font-size:clamp(.95rem,1.25vw,1.6rem)}
  .chips{margin:2.4vw 0 0;gap:6px 1.3vw;font-size:clamp(.6rem,.68vw,.85rem)}
  .chips li+li::before{margin-right:1.3vw}
  .cta{margin-top:2.14vw;gap:1.1vw;font-size:clamp(.62rem,.72vw,.88rem)}
  .cta svg{width:1.1vw;min-width:16px;height:auto}
  .strip{position:absolute;left:3.2vw;right:3.2vw;bottom:0;margin:0;padding:2.4vw .8vw 3.5vw;grid-template-columns:1fr auto 1fr;gap:0;font-size:clamp(.58rem,.74vw,.88rem);letter-spacing:.22em}
  .strip li{gap:1.5vw}
  .strip li:first-child{gap:2vw}
  .strip li:last-child{gap:1.1vw;justify-content:flex-end}
  .strip li:nth-child(2){justify-content:center}
  .strip li::before,.strip li:last-child::after,.strip li:nth-child(2)::after{content:"";width:4.3vw;height:1px;background:var(--line)}
  .strip li:last-child::before{display:none}

  /* sections */
  .label{font-size:clamp(.62rem,.68vw,.8rem);gap:1.2vw}
  .h2{margin-top:clamp(18px,2vw,28px);font-size:clamp(2.2rem,5.2vw,5.6rem)}
  .about{grid-template-columns:5fr 7fr;gap:clamp(32px,7vw,120px)}
  .about .crop{max-width:520px}
  .about p.lead{font-size:clamp(1.4rem,2.2vw,2.3rem)}
  .row{grid-template-columns:minmax(0,6fr) minmax(0,5fr) auto;gap:clamp(16px,3vw,48px);padding:clamp(22px,2.6vw,38px) 0}
  .row p{grid-column:auto;grid-row:auto}
  .row .go{grid-row:auto;grid-column:auto}
  .row h3{font-size:clamp(1.6rem,3.3vw,3.4rem)}
  .row:hover h3,.row:hover p{transform:translateX(clamp(10px,1.6vw,26px))}
  .book{grid-template-columns:5fr 6fr;gap:clamp(36px,7vw,120px)}
  .out{padding:22px}
}

/* =====================================================================
   1100+  desktops
   ===================================================================== */
@media (min-width:1100px){
  .mason{column-count:3;column-gap:clamp(16px,1.6vw,24px);margin-top:clamp(36px,5vw,72px)}
  .tile{margin-bottom:clamp(16px,1.6vw,24px)}
  .rows,.facts{margin-top:clamp(36px,5vw,72px)}
  .facts{margin-top:clamp(32px,4vw,56px)}
  .tile:hover .crop img{transform:scale(1.03)}
}

/* =====================================================================
   1500+  large desktops
   ===================================================================== */
@media (min-width:1500px){
  .band{padding-top:clamp(110px,8vw,170px);padding-bottom:clamp(110px,8vw,170px)}
  .about .crop{max-width:560px}
  .book p.sub{font-size:1.1rem}
}

/* =====================================================================
   1600+  wide screens and 4K: first screen keeps scaling with the width, content stays centred
   ===================================================================== */
@media (min-width:1600px){
  body{font-size:17px}
  .tagline{font-size:clamp(1.25rem,1.25vw,1.9rem)}
  .eyebrow,.chips,.strip,.pill,.links a,.cta{font-size:max(.8rem,.66vw)}
}