/* ============================================================
   Open in Charlotte: MV2 dark ground, hairline structure.
   Type is THICCCBOI, the brand face. Structure comes from
   rules, spacing and weight. No cards, no shadows, no icons.
   ============================================================ */

/* ---------- the brand face ---------- */
@font-face{font-family:"Thicccboi";src:url("/assets/fonts/thicccboi-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Thicccboi";src:url("/assets/fonts/thicccboi-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Thicccboi";src:url("/assets/fonts/thicccboi-900.woff2") format("woff2");
  font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";
  src:url("/assets/fonts/playfair-display-italic-variable-latin.woff2") format("woff2");
  font-weight:400 700;font-style:italic;font-display:swap}

:root{
  --ground:#0c0c0c;          /* MV2 near-black */
  --ground-lift:#141414;     /* one step up, for banded sections */
  --ink:#fff;
  --warm:#9a968f;            /* secondary text on dark */
  --rule:rgba(255,255,255,.14);
  --accent:#1f5c8b;          /* sampled from the MV2 hero grade */
  --accent-text:#3d8fc9;     /* the same blue, lifted to 5.6:1 on the ground */

  --gutter:clamp(1.25rem,5vw,4.5rem);
  --measure:65ch;

  --sans:"Thicccboi",-apple-system,"Segoe UI",sans-serif;
  --accent-face:"Playfair Display",Georgia,serif;

  --t-mega:clamp(2.75rem,10.5vw,8rem);
  --t-xl:clamp(2rem,5.5vw,4.25rem);
  --t-l:clamp(1.5rem,3.2vw,2.25rem);
  --t-m:1.0625rem;
  --t-s:.9375rem;
  --t-xs:.8125rem;
  --t-eyebrow:.75rem;

  --hair:1px solid var(--rule);

  /* Motion is deliberately unhurried. --ease-slow is a long tail: it moves
     early and settles late, which is what makes a fill or a panel feel
     considered rather than snappy. */
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-slow:cubic-bezier(.16,1,.3,1);
  --t-med:.75s;
  --t-slow:1.1s;
  --t-slower:1.5s;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font:500 var(--t-m)/1.62 var(--sans);
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
::selection{background:var(--accent);color:#fff}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--ground);
  padding:.7rem 1rem;z-index:99;text-decoration:none;font-size:var(--t-s)}
.skip:focus{left:0}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:1400px;margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:clamp(4.5rem,13vh,10rem)}
.band--rule{border-top:var(--hair)}
.band--lift{background:var(--ground-lift)}

/* ---------- type ---------- */
h1,h2,h3{margin:0;font-weight:900;line-height:.95;letter-spacing:-.035em;text-wrap:balance}
h1{font-size:var(--t-xl)}
h2{font-size:var(--t-l)}
h3{font-size:1.0625rem;font-weight:700;letter-spacing:-.015em;line-height:1.25}
p{margin:0 0 1.15em;max-width:var(--measure)}
.eyebrow{font-size:var(--t-eyebrow);letter-spacing:.2em;text-transform:uppercase;
  color:var(--warm);font-weight:700;margin:0 0 1.4rem}
.eyebrow::before{content:"";display:inline-block;width:1.6rem;height:1px;
  background:var(--accent);vertical-align:.32em;margin-right:.7rem}
.lede{font-size:clamp(1.1rem,2vw,1.4rem);line-height:1.45;max-width:30ch;color:var(--ink)}
.quiet{color:var(--warm);font-size:var(--t-s);max-width:var(--measure)}
.ital{font-family:var(--accent-face);font-style:italic;font-weight:400;letter-spacing:-.01em}
.accent-line{color:var(--accent-text)}
a.inline{color:var(--accent-text);text-decoration:none;border-bottom:1px solid var(--accent);
  padding-bottom:1px;transition:color .25s,border-color .25s}
a.inline:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- header: invisible, MV2 lockup left, nav right ---------- */
.top{position:fixed;inset:0 0 auto;z-index:70;background:transparent;
  padding:clamp(1.1rem,3.5vh,2.6rem) var(--gutter) 1rem;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  pointer-events:none}
.top > *{pointer-events:auto}
.top::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,12,12,.85),rgba(12,12,12,0));
  opacity:0;transition:opacity .4s ease}
.is-scrolled .top::before{opacity:1}
.lockup{display:block;line-height:0}
.lockup img{width:clamp(34px,4.4vw,44px);height:auto}
.nav{display:flex;gap:clamp(.9rem,2.4vw,2.1rem);font-size:var(--t-xs);
  letter-spacing:.16em;text-transform:uppercase;font-weight:700;padding-top:.35rem}
.nav a{text-decoration:none;color:var(--ink);opacity:.85;position:relative;
  padding-block:.25rem;transition:opacity .25s}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--accent-text);transition:right .35s var(--ease)}
.nav a:hover{opacity:1}
.nav a:hover::after,.nav a[aria-current]::after{right:0}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;
  border-bottom:var(--hair)}
.hero__frame{position:absolute;inset:0}
.hero__frame video,.hero__frame img{width:100%;height:100%;object-fit:cover}
/* An even scrim, not a fade into the page: the section ends on a rule. */
.hero__frame::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,12,12,.58),rgba(12,12,12,.34))}
.hero__say{position:relative;z-index:2;padding-block:clamp(2.5rem,9vh,6rem)}
.hero h1{font-size:var(--t-mega);max-width:11ch;text-transform:uppercase}
/* The city name carries the brand's italic, the way "with" does on mv2prod.co. */
.hero h1 .accent{font-family:var(--accent-face);font-style:italic;font-weight:400;
  color:var(--accent-text);text-transform:none;letter-spacing:-.01em;
  padding-right:.06em}
.hero__date{margin:1.2rem 0 0;font-size:clamp(1rem,2.2vw,1.45rem);letter-spacing:.01em;
  color:var(--ink);opacity:.86;max-width:none;font-weight:500}

/* ---------- motto ---------- */
/* The BTS strip sits between the motto and "What it is" with the same gap on
   both sides, and no rule under it. --bts-gap sets both. */
:root{--bts-gap:calc(clamp(5rem,16vh,12rem) + clamp(1.5rem,4vh,2.5rem))}
.motto{text-align:center;padding-top:clamp(5rem,16vh,12rem);padding-bottom:var(--bts-gap)}
.bts + .band{padding-top:var(--bts-gap)}
/* One fluid size from phone to 4K. It used to stop at 3.25rem below 1500px and
   then restart at 5vw above it, a jump from 52px to 75px at that line. */
.motto p{margin:0 auto;max-width:22ch;font-size:clamp(1.6rem,1rem + 2.6vw,6.5rem);
  line-height:1.12;letter-spacing:-.03em;font-weight:700;text-wrap:balance}
/* The closing clause carries the accent. The fill writes a colour onto every
   letter, so the accent has to be stated at the letter level to survive it. */
.motto .ital{color:var(--accent-text)}
.js .motto .ital .ltr{color:var(--accent-text)}

/* ---------- columns ---------- */
.cols{display:grid;gap:clamp(2rem,4vw,3.5rem);border-top:var(--hair);padding-top:2.5rem}
@media(min-width:760px){.cols--3{grid-template-columns:repeat(3,1fr)}
  .cols--4{grid-template-columns:repeat(4,1fr)}}
.col h3{margin-bottom:.7rem}
.col p{font-size:var(--t-s);color:var(--warm);margin:0;max-width:32ch}
.col .num{display:block;font-size:var(--t-xs);letter-spacing:.14em;color:var(--accent-text);
  font-variant-numeric:tabular-nums;padding-bottom:.9rem;margin-bottom:.9rem;
  border-bottom:var(--hair);font-weight:700}
.aside{margin-top:clamp(2.5rem,6vh,4rem);padding-top:1.5rem;border-top:var(--hair)}

/* ---------- BTS marquee ---------- */
.bts{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.bts__track{display:flex;gap:clamp(.5rem,1.2vw,1rem);width:max-content;
  animation:drift 64s linear infinite}
.bts:hover .bts__track{animation-play-state:paused}
.bts figure{margin:0;flex:0 0 auto}
.bts img{height:clamp(110px,18vw,190px);width:auto;object-fit:cover;
  filter:grayscale(1) contrast(1.05);transition:filter var(--t-slow) var(--ease-slow)}
.bts figure:hover img{filter:none}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------- tiers ---------- */
.tiers{display:grid;gap:0;border-top:var(--hair)}
@media(min-width:860px){.tiers{grid-template-columns:1fr 1fr}}
.tier{padding:clamp(2rem,4vw,3rem) 0;border-bottom:var(--hair);position:relative}
@media(min-width:860px){
  .tier{padding-inline:clamp(1.5rem,3vw,2.75rem);border-bottom:0}
  .tier:first-child{padding-left:0;border-right:var(--hair)}
  .tier:last-child{padding-right:0}
}
.tier--favoured::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--accent)}
.tier__name{font-size:var(--t-s);letter-spacing:.16em;text-transform:uppercase;
  color:var(--warm);font-weight:700;margin:0 0 .9rem}
.tier--favoured .tier__name{color:var(--accent-text)}
.tier__price{font-size:clamp(2.25rem,6vw,3.25rem);font-weight:900;letter-spacing:-.04em;
  line-height:1;margin:0 0 1.5rem}
.tier--favoured .tier__price{font-size:clamp(2.75rem,7.5vw,4rem)}
.tier ul{list-style:none;margin:0;padding:0;font-size:var(--t-s)}
.tier li{padding:.6rem 0;border-bottom:var(--hair);color:var(--warm)}
.tier li:first-child{border-top:var(--hair)}
.tier li.add{color:var(--ink);font-weight:700}
.excluded{margin-top:clamp(2rem,5vh,3rem);padding-top:1.5rem;border-top:var(--hair)}

/* ---------- the week ---------- */
.week{text-align:center}
.week p{margin-inline:auto}
.counter{font-size:clamp(3rem,12vw,7rem);font-weight:900;letter-spacing:-.05em;
  line-height:1;margin:1.5rem 0 .5rem;font-variant-numeric:tabular-nums;color:var(--accent-text)}
.counter + .quiet{margin-inline:auto;text-align:center;font-size:var(--t-eyebrow);
  letter-spacing:.2em;text-transform:uppercase;font-weight:700}

/* ---------- crew ---------- */
.crew{display:grid;gap:clamp(1.5rem,4vw,2.5rem);grid-template-columns:repeat(3,1fr)}
.crew figure{margin:0}
.crew img{aspect-ratio:4/5;object-fit:cover;width:100%;filter:grayscale(1);
  transition:filter var(--t-slow) var(--ease-slow)}
.crew figure:hover img{filter:none}
.crew h3{margin:.9rem 0 .2rem;font-size:clamp(.9rem,2.2vw,1.0625rem)}
.crew .role{margin:0;font-size:var(--t-xs);color:var(--warm)}

/* ---------- about page ---------- */
.bio{display:grid;gap:clamp(1.5rem,4vw,3rem);padding-block:clamp(2.5rem,6vh,4rem);
  border-top:var(--hair)}
@media(min-width:760px){.bio{grid-template-columns:minmax(0,20rem) minmax(0,1fr);align-items:start}}
.bio img{aspect-ratio:4/5;object-fit:cover;width:100%;filter:grayscale(1)}
.bio .role{font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-text);font-weight:700;margin:0 0 1rem}

/* ---------- faq ----------
   Buttons and panels rather than <details>, because a native disclosure
   snaps open and cannot be eased. The 0fr -> 1fr grid row is what animates. */
.faq{border-top:var(--hair)}
.faq__item{border-bottom:var(--hair)}
.faq__q{width:100%;display:block;text-align:left;background:none;border:0;
  color:var(--ink);font:inherit;font-weight:700;letter-spacing:-.015em;
  font-size:clamp(1rem,2.4vw,1.25rem);cursor:pointer;position:relative;
  padding:clamp(1.15rem,2.6vw,1.6rem) 3rem clamp(1.15rem,2.6vw,1.6rem) 0;
  transition:color var(--t-slow) var(--ease-slow)}
.faq__item.is-open .faq__q{color:var(--accent-text)}
/* Hover only where there is a pointer: a tap leaves :hover stuck on phones, so
   a question just closed stayed blue and still looked open. */
@media(hover:hover){.faq__q:hover{color:var(--accent-text)}}
.faq__q::before,.faq__q::after{content:"";position:absolute;right:.35rem;top:50%;
  width:.9rem;height:1px;background:currentColor;
  transition:transform var(--t-slow) var(--ease-slow)}
.faq__q::after{transform:rotate(90deg)}
.faq__item.is-open .faq__q::after{transform:rotate(0)}
.faq__panel{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--t-slow) var(--ease-slow)}
.faq__item.is-open .faq__panel{grid-template-rows:1fr}
.faq__panel > div{overflow:hidden;min-height:0}
.faq__panel p{margin:0 0 clamp(1.2rem,3vw,1.75rem);color:var(--warm);font-size:var(--t-s);
  opacity:0;transform:translateY(6px);
  transition:opacity var(--t-slow) var(--ease-slow),transform var(--t-slow) var(--ease-slow)}
.faq__item.is-open .faq__panel p{opacity:1;transform:none}

/* ---------- final cta ---------- */
.final{text-align:center;border-top:var(--hair)}
.final h2{font-size:var(--t-xl)}
.final .quiet{margin:1.75rem auto 0}

/* ---------- buttons ----------
   One rule for every button on the site: an outline that fills from the
   bottom on hover, slowly. */
.btn{position:relative;isolation:isolate;overflow:hidden;
  display:inline-block;margin-top:1.75rem;padding:1rem 2.1rem;
  background:transparent;color:var(--ink);border:1px solid var(--ink);
  text-decoration:none;font-weight:700;font-size:var(--t-s);letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;font-family:inherit;
  transition:color var(--t-slow) var(--ease-slow)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(101%);transition:transform var(--t-slow) var(--ease-slow)}
.btn:hover,.btn:focus-visible{color:var(--ground)}
.btn:hover::after,.btn:focus-visible::after{transform:translateY(0)}
.btn--ghost{border-color:var(--rule)}
.btn--ghost:hover{border-color:var(--ink)}
.btn[disabled]{opacity:.45;cursor:default}
.btn[disabled]::after{transform:translateY(101%)}

/* ---------- forms ---------- */
.form{display:grid;gap:clamp(1.4rem,3vw,1.9rem);max-width:38rem;margin-top:2.5rem}
.field > label,.field > legend,.field > .lbl{display:block;font-size:var(--t-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--warm);font-weight:700;
  margin-bottom:.55rem;padding:0}
.field .hint{font-size:var(--t-s);color:var(--warm);margin:.5rem 0 0;text-transform:none;
  letter-spacing:0}
.form input[type=text],.form input[type=email],.form input[type=tel],
.form input[type=url],.form input[type=file],.form textarea{
  width:100%;padding:.85rem .9rem;background:rgba(255,255,255,.04);border:var(--hair);
  color:var(--ink);font:inherit;font-size:var(--t-s);border-radius:0;
  min-height:3rem;transition:border-color .2s,background .2s}
.form input:focus,.form textarea:focus{border-color:var(--accent-text);outline:none;
  background:rgba(255,255,255,.07)}
.form input::placeholder,.form textarea::placeholder{color:rgba(255,255,255,.3)}
.form input[type=file]{padding:.55rem .6rem;cursor:pointer;line-height:1.9}
.form input[type=file]::file-selector-button{margin-right:.9rem;padding:.6rem 1.1rem;
  background:transparent;border:var(--hair);color:var(--ink);font:inherit;
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  border-radius:0;cursor:pointer;transition:border-color .2s,background .2s}
.form input[type=file]::file-selector-button:hover{border-color:var(--ink);
  background:rgba(255,255,255,.06)}
.form textarea{min-height:7rem;resize:vertical}
.form input[aria-invalid=true],.form textarea[aria-invalid=true]{border-color:var(--accent-text);
  border-width:2px}
.err{display:block;font-size:var(--t-xs);color:var(--accent-text);font-weight:700;
  margin-top:.45rem;text-transform:none;letter-spacing:0}
.err:empty{display:none}
fieldset{border:0;margin:0;padding:0;min-width:0}

.picks{display:grid;gap:0;border-top:var(--hair)}
@media(min-width:540px){.picks{grid-template-columns:1fr 1fr}}
.pick{position:relative;display:block;border-bottom:var(--hair);cursor:pointer}
@media(min-width:540px){.pick{border-bottom:0}.pick:first-child{border-right:var(--hair)}}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick span{display:block;padding:1.4rem 1.1rem;transition:background .2s,color .2s}
.pick .pick__name{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--warm);font-weight:700;padding-bottom:.45rem}
.pick .pick__price{font-size:1.75rem;font-weight:900;letter-spacing:-.03em;padding-top:0}
.pick:hover span{background:rgba(255,255,255,.04)}
.pick input:checked ~ span{background:var(--accent);color:#fff}
.pick input:checked ~ .pick__name{color:rgba(255,255,255,.75)}
.pick input:focus-visible ~ span{outline:2px solid var(--accent-text);outline-offset:-2px}

.checks{display:grid;gap:0;border-top:var(--hair)}
@media(min-width:540px){.checks--2{grid-template-columns:1fr 1fr}}
.check{display:flex;align-items:center;gap:.75rem;padding:.85rem .2rem;
  border-bottom:var(--hair);cursor:pointer;font-size:var(--t-s);min-height:3rem;
  text-transform:none;letter-spacing:0;color:var(--ink);font-weight:500;margin:0}
.check input{width:1.05rem;height:1.05rem;accent-color:var(--accent);flex:0 0 auto;margin:0}
.check input:disabled ~ *{opacity:.4}

/* The attached files, listed under the picker. The native control only ever
   says "3 files", and gives no way to drop one, so the list is drawn here. */
.filelist{list-style:none;margin:.85rem 0 0;padding:0;display:grid;gap:0}
.filelist:empty{display:none}
.filelist li{display:flex;align-items:center;gap:.75rem;padding:.7rem .2rem;
  border-bottom:var(--hair);font-size:var(--t-s);min-height:2.75rem}
.filelist li:first-child{border-top:var(--hair)}
.filelist__name{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.filelist__size{flex:0 0 auto;color:var(--warm);font-variant-numeric:tabular-nums}
.filelist__drop{flex:0 0 auto;background:none;border:0;color:var(--warm);cursor:pointer;
  font:inherit;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;padding:.5rem;min-height:2.75rem;
  transition:color var(--t-slow) var(--ease-slow)}
.filelist__drop:hover{color:var(--accent-text)}
.filelist li.filelist__total{color:var(--warm);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;border-bottom:0;min-height:0;padding-top:.85rem}

.form-note{font-size:var(--t-s);color:var(--warm);margin:.9rem 0 0;max-width:38rem}
.form-note.is-error{color:var(--accent-text);font-weight:700}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- the availability pop-up ----------
   A globe on one side, one question at a time on the other. No box around the
   choices: rules and a lot of air, so it reads as a conversation. */
.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:stretch;
  opacity:0;visibility:hidden;
  transition:opacity var(--t-slow) var(--ease-slow),visibility var(--t-slow)}
.modal.is-open{opacity:1;visibility:visible}
.modal__veil{position:absolute;inset:0;background:rgba(6,6,6,.965);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:0;padding:0;cursor:pointer}
.modal__box{position:relative;display:grid;grid-template-rows:auto 1fr auto;
  width:100%;height:100%;padding:clamp(1.25rem,4vw,2.5rem);overflow:hidden;
  opacity:0;transform:translateY(18px);
  transition:opacity var(--t-slow) var(--ease-slow),transform var(--t-slower) var(--ease-slow)}
.modal.is-open .modal__box{opacity:1;transform:none}
.confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;
  display:block}
.modal__bar{position:absolute;left:0;top:0;height:2px;background:var(--accent-text);
  width:0;transition:width var(--t-slow) var(--ease-slow)}
.modal__head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.modal__count{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;
  color:var(--warm);font-weight:700;font-variant-numeric:tabular-nums}
.modal__close{background:none;border:0;color:var(--warm);cursor:pointer;font:inherit;
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  padding:.5rem;transition:color var(--t-slow) var(--ease-slow)}
.modal__close:hover{color:var(--ink)}

.modal__grid{display:grid;align-content:center;gap:clamp(1.5rem,4vh,3rem);
  width:100%;max-width:64rem;margin-inline:auto;padding-block:clamp(1rem,3vh,2rem);
  min-height:0;overflow-y:auto;overscroll-behavior:contain}
@media(min-width:860px){
  .modal__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(2rem,4vw,4rem);align-items:center}
}

/* The globe. Square, centred, and it never drives the layout: the canvas is
   sized from the box in script, so a tall phone does not get a huge sphere. */
.globe{position:relative;display:grid;place-items:center;
  width:100%;aspect-ratio:1;max-width:min(38vh,26rem);margin-inline:auto}
.globe canvas{display:block;border-radius:50%}
.globe::before{content:"";position:absolute;inset:8%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(74,159,216,.16),transparent 68%);
  pointer-events:none}
.globe__tip{position:absolute;transform:translate(-50%,-2.4rem);
  background:rgba(10,10,10,.92);border:var(--hair);color:var(--ink);
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  padding:.4rem .7rem;white-space:nowrap;pointer-events:none;z-index:2}
.globe__tip[hidden]{display:none}
.globe__where{position:absolute;bottom:-.4rem;margin:0;font-size:var(--t-xs);
  letter-spacing:.2em;text-transform:uppercase;color:var(--warm);font-weight:700;
  text-align:center}
@media(max-width:859px){
  .globe{max-width:min(24vh,13rem)}
  .globe__where{display:none}
  .daypick--tight{max-height:none}
  .modal__grid{align-content:start}
}

.modal__stage{display:grid;align-content:center;justify-items:start;
  width:100%;min-height:0}
.step{grid-area:1/1;width:100%;opacity:0;transform:translateY(22px);
  pointer-events:none;visibility:hidden;
  transition:opacity var(--t-slow) var(--ease-slow),transform var(--t-slow) var(--ease-slow),
             visibility var(--t-slow)}
.step.is-current{opacity:1;transform:none;pointer-events:auto;visibility:visible}
/* visibility:visible on a child beats the hidden it inherits, so without this
   the closed pop-up's current step sat invisible over the middle of the page
   and swallowed taps meant for whatever was underneath (the FAQ, for one). */
.modal:not(.is-open) .step{visibility:hidden;pointer-events:none}
.step__ask{display:block;font-size:clamp(1.15rem,3.2vw,1.75rem);font-weight:900;
  letter-spacing:-.025em;line-height:1.15;margin:0 0 clamp(1rem,2.4vh,1.5rem);
  text-transform:none}
.step .err{margin-top:.8rem;font-size:var(--t-s)}

/* The neighborhood choices. A wrapped row of quiet chips. */
.hoods{display:flex;flex-wrap:wrap;gap:.5rem}
.hoods button{background:transparent;border:var(--hair);color:var(--ink);font:inherit;
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  padding:.7rem 1rem;min-height:2.75rem;cursor:pointer;border-radius:0;
  transition:border-color .2s,background .2s,color .2s}
.hoods button:hover{border-color:var(--ink);background:rgba(255,255,255,.06)}
.hoods button.is-on{border-color:var(--accent-text);color:#fff;background:var(--accent)}

.daypick--tight{max-height:min(44vh,26rem);overflow-y:auto;overscroll-behavior:contain}

.modal__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;width:100%;max-width:64rem;margin-inline:auto}
.modal__keys{font-size:var(--t-xs);color:var(--warm);letter-spacing:.04em;margin:0;
  display:flex;gap:1.1rem;flex-wrap:wrap}
.modal__keys kbd{font:inherit;font-weight:700;color:var(--ink);background:none;
  border:1px solid var(--rule);padding:.12rem .42rem;margin-right:.3rem}
.modal__back{background:none;border:0;color:var(--warm);cursor:pointer;font:inherit;
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  padding:.5rem 0;transition:color var(--t-slow) var(--ease-slow)}
.modal__back[hidden]{display:none}
.modal__back:hover{color:var(--ink)}
body.is-locked{overflow:hidden}

/* The step number above a gate question. All that survives of the old
   home-page pop-up, which is gone: /book is the only booking form now. */
.step__n{display:block;font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-text);font-weight:700;margin-bottom:1rem}

/* ---------- the booking gate ----------
   /book opens as two questions and an answer, then hands over to the full
   form. One question on screen at a time. */
.gate{display:grid;min-height:min(72svh,44rem);align-content:center;
  max-width:38rem;padding-block:clamp(2rem,6vh,4rem)}
.gate__step{grid-area:1/1;opacity:0;transform:translateY(20px);visibility:hidden;
  pointer-events:none;
  transition:opacity var(--t-slow) var(--ease-slow),
             transform var(--t-slow) var(--ease-slow),visibility var(--t-slow)}
.gate__step.is-current{opacity:1;transform:none;visibility:visible;pointer-events:auto}
.gate label,.gate .gate__ask{display:block;font-size:clamp(1.35rem,4vw,2.1rem);
  font-weight:900;letter-spacing:-.03em;line-height:1.12;
  margin-bottom:clamp(1rem,2.6vh,1.6rem);text-transform:none}
.gate input[type=text]{width:100%;background:transparent;border:0;
  border-bottom:1px solid var(--rule);color:var(--ink);font:inherit;
  font-size:clamp(1rem,2.2vw,1.25rem);padding:.7rem 0;min-height:3.1rem;border-radius:0;
  transition:border-color var(--t-slow) var(--ease-slow)}
.gate input[type=text]:focus{outline:none;border-bottom-color:var(--accent-text)}
.gate input::placeholder{color:rgba(255,255,255,.22)}

.daypick{display:grid;gap:0;border-top:var(--hair)}
@media(min-width:520px){.daypick{grid-template-columns:1fr 1fr}}
.daypick button{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:100%;background:none;border:0;border-bottom:var(--hair);color:var(--ink);
  font:inherit;font-size:var(--t-s);font-weight:700;text-align:left;cursor:pointer;
  padding:1rem .2rem;min-height:3.25rem;
  transition:background var(--t-med) var(--ease-slow),color var(--t-med) var(--ease-slow),
             padding-left var(--t-med) var(--ease-slow)}
@media(min-width:520px){.daypick button:nth-child(odd){border-right:var(--hair);
  padding-right:1rem}}
.daypick button:hover{background:rgba(255,255,255,.04);padding-left:.7rem}
.daypick button[aria-disabled=true]{color:var(--warm);cursor:not-allowed}
.daypick button[aria-disabled=true]:hover{background:none;padding-left:.2rem}
.daypick .tag{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-text);font-weight:700}
.daypick button[aria-disabled=true] .tag{color:var(--warm)}

.gate__yes{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-text);font-weight:700;margin:0 0 1rem}
.gate__win{font-size:clamp(1.6rem,5vw,2.75rem);font-weight:900;letter-spacing:-.03em;
  line-height:1.1;margin:0 0 1rem}
.gate__win .ital{color:var(--accent-text)}
.gate__note{color:var(--warm);font-size:var(--t-s);max-width:34ch}

/* The form is present but folded away until the gate is cleared. */
.booking{opacity:0;transform:translateY(24px);
  transition:opacity var(--t-slower) var(--ease-slow),
             transform var(--t-slower) var(--ease-slow)}
.booking[hidden]{display:none}
.booking.is-open{opacity:1;transform:none}

/* ---------- section rail: jump down the page ----------
   Sits against the right edge, vertically centred, quiet until you reach for
   it. Hidden on narrow screens, where it would crowd the content. */
.rail{position:fixed;right:clamp(.9rem,1.8vw,1.8rem);top:50%;transform:translateY(-50%);
  z-index:65;display:none;flex-direction:column;gap:1.1rem;align-items:flex-end}
@media(min-width:1000px){.rail{display:flex}}
.rail__item{display:flex;align-items:center;gap:.8rem;background:none;border:0;padding:0;
  cursor:pointer;color:var(--ink);font:inherit}
.rail__label{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;white-space:nowrap;opacity:0;transform:translateX(8px);
  transition:opacity var(--t-slow) var(--ease-slow),transform var(--t-slow) var(--ease-slow)}
.rail__tick{display:block;width:22px;height:1px;background:var(--ink);opacity:.34;
  transition:width var(--t-slow) var(--ease-slow),opacity var(--t-slow) var(--ease-slow),
             background var(--t-slow) var(--ease-slow)}
.rail__item:hover .rail__label,.rail__item:focus-visible .rail__label{opacity:.8;transform:none}
.rail__item:hover .rail__tick{width:40px;opacity:1}
.rail__item[aria-current="true"] .rail__tick{width:44px;opacity:1;background:var(--accent-text)}
.rail__item[aria-current="true"] .rail__label{opacity:1;transform:none;color:var(--accent-text)}


/* ---------- the value anchor: half-height film over a claim ---------- */
.value{position:relative;min-height:56svh;display:grid;align-items:center;overflow:hidden;
  border-block:var(--hair)}
.value__frame{position:absolute;inset:0}
.value__frame video,.value__frame img{width:100%;height:100%;object-fit:cover}
.value__frame::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(12,12,12,.9),rgba(12,12,12,.55) 60%,rgba(12,12,12,.75))}
.value__say{position:relative;z-index:2;padding-block:clamp(3rem,8vh,5rem)}
.value h2{font-size:clamp(1.75rem,4.6vw,3.25rem);max-width:16ch;text-transform:uppercase}
.value h2 .accent{color:var(--accent-text)}
.value p{margin-top:1.2rem;max-width:44ch;color:var(--warm)}

/* ---------- closing film with the CTA over it ---------- */
.closer{position:relative;min-height:82svh;display:grid;align-items:center;
  text-align:center;overflow:hidden}
.closer__frame{position:absolute;inset:0}
.closer__frame video,.closer__frame img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1)}
.closer__frame::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--ground),rgba(12,12,12,.62) 30%,rgba(12,12,12,.62) 70%,var(--ground))}
/* Hard top and bottom edges instead of a vignette: the film reads as its own
   band, with the section boundary stated by a rule rather than a fade. */
.closer--hard{border-block:var(--hair)}
.closer--hard .closer__frame::after{background:rgba(12,12,12,.52)}
.closer__say{position:relative;z-index:2;padding:clamp(2rem,6vh,4rem) var(--gutter)}
.closer h2{font-size:var(--t-xl);text-transform:uppercase}
/* The about banner states a claim rather than shouting a CTA, so it sits
   smaller and to the right, with the button under it. */
.closer--about .closer__say{text-align:right;margin-left:auto;
  max-width:min(38rem,88%);padding-inline:0}
.closer--about h2{font-size:clamp(1.4rem,3.4vw,2.35rem);margin-left:auto}
/* The italic clause is a lowercase aside, so it opts out of the shout. It sits
   on its own line with air above it, and carries the accent the way the mottos
   do, rather than reading as a run-on of the line above. */
.closer--about h2 .ital{display:block;margin-top:.5em;text-transform:none;
  color:var(--accent-text)}
.closer--about .btn{margin-top:1.6rem}
.closer .quiet{margin:1.75rem auto 0}

/* ---------- client pyramid ----------
   Heights are per logo, not uniform: a wordmark like WME reads twice as large
   as a roundel like NBC at the same height. The --s multipliers mirror the
   ones mv2prod.co already uses. */
.pyramid{display:flex;flex-direction:column;align-items:center;
  gap:clamp(2.2rem,5vw,3.6rem);border-top:var(--hair);
  padding-top:clamp(2.5rem,6vh,4.5rem);max-width:60rem;margin-inline:auto}
.pyramid__row{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:clamp(2.4rem,6.5vw,5.5rem)}
/* Each mark is a mask rather than an <img>, so the same white artwork can be
   painted in the accent on hover. background-color is the only thing that
   changes, which is why it cannot drift out of step with the artwork. */
.pyramid__logo{display:block;height:calc(clamp(19px,2.7vw,32px) * var(--s,1));
  aspect-ratio:var(--ar,3/1);width:auto;
  background-color:var(--ink);
  -webkit-mask-image:var(--src);mask-image:var(--src);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  opacity:0;transform:translateY(14px) scale(.96);
  transition:opacity var(--t-slow) var(--ease-slow),
             transform var(--t-slow) var(--ease-slow),
             background-color var(--t-med) var(--ease-slow);
  transition-delay:calc(var(--i,0) * 70ms)}
.pyramid.is-in .pyramid__logo{opacity:.68;transform:none}
.pyramid.is-in .pyramid__logo:hover,
.pyramid.is-in .pyramid__logo:focus-visible{opacity:1;background-color:var(--accent-text)}

/* ---------- footer ---------- */
.foot{border-top:var(--hair);padding-block:clamp(2.5rem,6vh,4rem);display:grid;gap:1.5rem}
@media(min-width:760px){.foot{grid-template-columns:1fr auto;align-items:end}}
.foot img{width:38px;height:auto;margin-bottom:1rem}
.foot a{text-decoration:none;color:var(--warm);transition:color .25s}
.foot a:hover{color:var(--ink)}
.foot .links{display:flex;gap:1.25rem;font-size:var(--t-s);flex-wrap:wrap;align-items:center}
.foot .social{display:inline-flex;align-items:center;justify-content:center;
  width:2.25rem;height:2.25rem;color:var(--warm);
  transition:color var(--t-slow) var(--ease-slow),transform var(--t-slow) var(--ease-slow)}
.foot .social svg{width:1.2rem;height:1.2rem;fill:currentColor;display:block}
.foot .social:hover{color:var(--ink);transform:translateY(-2px)}
.foot .fine{font-size:var(--t-xs);color:var(--warm);margin:.9rem 0 0;max-width:none}

/* ============================================================
   MOTION
   Three layers, all opt-in behind .js and all switched off by
   prefers-reduced-motion:
     1. reveal:   a section rises and fades once, on entry
     2. stagger:  its children arrive top-down, one after another
     3. fill:     a headline colours in letter by letter, scrubbed
                   to scroll position (the Get Reel effect)
   ============================================================ */

/* 1 + 2 */
.js [data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity var(--t-slower) var(--ease-slow),
             transform var(--t-slower) var(--ease-slow)}
.js [data-reveal].is-in{opacity:1;transform:none}

.js [data-stagger] > *{opacity:0;transform:translateY(20px);
  transition:opacity var(--t-slow) var(--ease-slow),
             transform var(--t-slow) var(--ease-slow);
  transition-delay:calc(var(--i,0) * 150ms)}
.js [data-stagger].is-in > *{opacity:1;transform:none}

/* The h1 rises on its own, in CSS, starting at first paint. It is the LCP
   element on every page: splitting it in JS and fading the pieces in would
   hold the largest paint back until the deferred script had run. */
@keyframes rise{from{transform:translateY(20px)}to{transform:none}}
/* The h1 is the LCP element on every page, so it moves without fading: the text
   is painted from the first frame. Measured both ways, its duration does not
   move the score, so it keeps the same unhurried easing as everything else. */
.js h1{animation:rise var(--t-slow) var(--ease-slow) both}

/* Above the fold there is nothing to wait for, so first-screen content animates
   in CSS on load rather than on an observer. Anything gated behind the deferred
   script risks becoming the LCP element and holding the largest paint back.
   --d staggers them without needing a class each. */
@keyframes liftIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.js .lift{animation:liftIn var(--t-slower) var(--ease-slow) both;animation-delay:var(--d,.2s)}

/* A split heading stays hidden until the script has actually split it, so the
   words never paint once at full strength and then blink out. */
.js [data-words]:not(.is-split){opacity:0}

/* words rise in sequence */
.js .wd{display:inline-block;opacity:0;transform:translateY(.55em);
  transition:opacity var(--t-slow) var(--ease-slow),
             transform var(--t-slow) var(--ease-slow);
  transition-delay:calc(var(--i,0) * 80ms)}
.js .is-in .wd,.js .wd.is-in{opacity:1;transform:none}

/* 3: the scrubbed letter fill. --p is written by the script on scroll,
   --i is the letter's index, --n the count. Each letter ramps from the
   floor to full over a few letters' worth of scroll, so the edge is soft
   rather than a hard wipe. */
.js .fill .ltr{color:var(--ink);
  opacity:clamp(.14,calc(((var(--p,0) * (var(--n,1) + 12)) - var(--i,0)) / 7),1)}
.fill .ltr{white-space:pre-wrap}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker__track{animation:none;transform:none}
  .btn::after{transition:none}
  .faq__panel{transition:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;
    animation-iteration-count:1!important}
  .js [data-reveal],.js [data-stagger] > *,.js .wd,
  .js [data-words]:not(.is-split){opacity:1;transform:none}
  .js h1,.js .lift{animation:none}
  .js .fill .ltr{opacity:1}
  .bts__track{animation:none;transform:none}
  .modal__box{transform:none}
}

/* ---------- very large screens ----------
   Above about 1500px the 1400px column stopped tracking the viewport while the
   header stayed full bleed, so on a 4K display the hero sat a third of the way
   in from a logo that was still sitting at the gutter, and every display size
   had already hit its clamp ceiling. From here the column runs to the gutter
   the way the header does, the gutter opens up with the viewport, and the
   display type keeps growing. Line lengths stay honest because the caps that
   matter are per element (11ch on the hero, 22ch on a motto, 65ch on body
   copy) rather than on the column. */
@media(min-width:1500px){
  :root{
    --gutter:clamp(4.5rem,5vw,10rem);
    --t-mega:clamp(8rem,9vw,17rem);
    --t-xl:clamp(4.25rem,5vw,9rem);
    --t-l:clamp(2.25rem,2.6vw,3.75rem);
    --t-m:clamp(1.0625rem,1.02vw,1.375rem);
    --t-s:clamp(.9375rem,.92vw,1.2rem);
    --t-xs:clamp(.8125rem,.8vw,1.05rem);
    --t-eyebrow:clamp(.75rem,.72vw,.95rem);
  }
  .wrap{max-width:none}
  .hero__date{font-size:clamp(1.45rem,1.7vw,2.3rem)}
  .lede{font-size:clamp(1.4rem,1.7vw,2.1rem)}
  .counter{font-size:clamp(7rem,10vw,15rem)}
  .value h2{font-size:clamp(3.25rem,4.4vw,6.5rem)}
  .btn{font-size:clamp(1.05rem,1.2vw,1.65rem);
    padding:clamp(1.15rem,1.05vw,1.7rem) clamp(2.6rem,2.6vw,4.2rem);
    margin-top:clamp(1.75rem,2vw,3rem)}
  .lockup img{width:clamp(44px,2.6vw,86px)}
  .nav{gap:clamp(2.1rem,2.6vw,4rem)}
  .bio{grid-template-columns:minmax(0,26rem) minmax(0,1fr)}
  /* A column track is over 1000px wide here, so a 32ch measure left each one
     looking like a caption stranded in the dark. The measure and the sub heads
     grow with it, while the rules stay full bleed. */
  h3{font-size:clamp(1.0625rem,1.2vw,1.85rem)}
  .col p{max-width:44ch}
  .col .num{font-size:clamp(.8125rem,.85vw,1.15rem)}
  .faq__q{font-size:clamp(1.25rem,1.45vw,2.15rem)}
  /* The about banner had a hard 2.35rem ceiling, so on a 4K display it shrank to
     a postage stamp in the middle of a very large frame. Its column was capped at
     38rem too, which is a sixth of the screen there. Both now track the viewport. */
  .closer--about .closer__say{max-width:min(52vw,72rem)}
  .closer--about h2{font-size:clamp(2.35rem,3.1vw,5rem)}
  .closer--about h2 .ital{margin-top:.42em}
  .closer--about .btn{margin-top:clamp(1.6rem,2vw,3rem)}
}

/* ---------- narrow screens ----------
   On a phone the about banner broke mid phrase, so it carries an extra break
   and a size that lets each line hold. The client wall was sized off vw, which
   bottoms out on a small screen and left the marks tight and small. */
.br-sm{display:none}
@media(max-width:640px){
  .br-sm{display:inline}
  /* The BTS strip in 4:5 frames, about two sevenths of the screen tall, tucked up
     under the motto. The narrower frames make a shorter track, so the loop is
     shorter too and the drift keeps the same pace as before. */
  :root{--bts-gap:clamp(2.2rem,5.75vh,3.2rem)}
  /* 16vh left a dead band of black between the hero film and the motto. */
  .motto{padding-top:clamp(2.75rem,7.5vh,4rem)}
  .bts img{height:clamp(200px,28vh,300px);height:clamp(200px,28svh,300px);aspect-ratio:4/5}
  .bts__track{animation-duration:80s}
  .closer--about h2{font-size:clamp(1.15rem,5.1vw,1.5rem);line-height:1.12}
  .pyramid{gap:clamp(2.5rem,7vw,3.6rem)}
  .pyramid__row{gap:clamp(2.6rem,8vw,5.5rem)}
  .pyramid__logo{height:calc(clamp(24px,6.2vw,32px) * var(--s,1))}
}
/* The widest row carries five marks. Below about 390px that row needs a tighter
   gap to stay one line, otherwise the pyramid loses its shape at the top. */
@media(max-width:389px){
  .pyramid__row{gap:clamp(1.5rem,5.4vw,2.6rem)}
  .pyramid__logo{height:calc(clamp(21px,5.6vw,24px) * var(--s,1))}
}