/* The home page, round six (2026-10-01): one look, top to bottom.
   Ian on round five: "I like all the stuff you're bringing in... all the videos... the ideas. It's just the way you're
   putting them together... not visually appealing... you have everything you need."
   Studied against the sites he approved (Mike's, CHIdrate, Good Life, IV Revival, Desert Rose), which all share:
   one big real image filling the first screen with one huge headline on it; ONE headline style on every section with one
   highlight move (a box behind the key words); strong grounds that alternate; centred openers; real photos laid out in
   clean rows. So this round drops the gadgets (tilted cards, stickers, seals, collages, profile widgets) for:
   - a full-screen film cut from their May photo shoot and their lounge (tools/hero-film.sh), the line on it;
   - every headline one of their captions, one size, the key words in a box (beige on black, black on nude/beige);
   - every section centred, its photos and reels in clean equal-height rows, one corner radius;
   - every reel opens full screen with its sound.
   Palette and type unchanged: black / beige #D6C8AF / nude #FAF5F2; Marcellus + Tenor Sans; the 1240 column. */

body[data-page="home"], body[data-page="menu-options"], body[data-page="light"], body[data-page="rooms"], body[data-page="space"] {
  --gold: #d6c8af; --gold-2: #e6dccb; --gold-d: #7f6f53; --line: rgba(214, 200, 175, .3);
  --maxw: calc(1240px + 2 * var(--gutter));
  --inner: 1240px;
}
.lx { --pad: clamp(92px, 7vw, 140px); --r: 20px; --paper: #fbf8f3; --head-gap: clamp(46px, 4.2vw, 76px); }

/* ── type ── */
.hrt { display: inline-block; width: 1em; height: .92em; fill: currentColor; vertical-align: -.08em; }
.kick { font: 400 12.5px/1.4 var(--body); letter-spacing: .28em; text-transform: uppercase; color: var(--taupe); }
.kick .hrt { margin-right: .6em; }
.kick--light { color: var(--beige); }
.kick--small { font-size: 11.5px; }
.zh { text-align: center; max-width: 1000px; margin: 0 auto var(--head-gap); }
.zh--tight { margin-bottom: clamp(30px, 2.6vw, 44px); }
.zh__h { margin-top: 18px; font: 400 clamp(42px, 4.3vw, 86px)/1.07 var(--display); letter-spacing: .004em; text-wrap: balance; }
.zh__p { max-width: 54ch; margin: 22px auto 0; font-size: clamp(16px, 1.1vw, 19px); line-height: 1.7; color: var(--text-n); text-wrap: balance; }
/* the one signature move: the key words of every headline sit in a box */
.lx mark { padding: 0 .16em .03em; border-radius: .13em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: var(--black); color: var(--nude); }
.sec--k mark, .hf mark, .close mark { background: var(--beige); color: var(--black); }
/* in the big headlines the box hugs the letters (an inline box would be as tall as the whole font) */
.zh__h mark, .hf__h mark { display: inline-block; line-height: 1.02; padding: .03em .15em .11em; border-radius: .11em; }
.fd__q mark { padding: 0 .12em .04em; border-radius: .1em; }
.stz { letter-spacing: .14em; }

/* things arrive as you reach them: a soft rise and fade, once (only what is still below the screen waits) */
.rv-wait { opacity: 0; transform: translateY(26px); }
.rv-in { opacity: 1; transform: none; transition: opacity 1.1s ease, transform 1.3s cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) { .rv-wait { transform: none; } .rv-in { transition: opacity 1.1s ease; } }

/* ── grounds ── */
.sec { position: relative; padding-block: var(--pad); }
.sec--k { background: var(--black); color: #fff; --taupe: rgba(214, 200, 175, .86); --text-n: rgba(255, 255, 255, .76); --rule-n: rgba(214, 200, 175, .2); }
.sec--n { background: var(--nude); color: var(--black); }
.sec--b { background: var(--beige); color: var(--black); --taupe: #4f4538; --text-n: #2e2820; --rule-n: rgba(11, 10, 9, .18); }
.cta { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: clamp(40px, 3.6vw, 60px); }
.lx-btn--line-w { border-color: rgba(255, 255, 255, .45); color: #fff; }

/* the play mark used on watch buttons */
.play { position: relative; display: inline-block; width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }

/* ── media: one radius; photos fill their box; reels are 9:16 and open full screen with sound ── */
.ph { margin: 0; overflow: hidden; border-radius: var(--r); background: #1a1815; }
.ph img { display: block; width: 100%; height: 100% !important; object-fit: cover; }
.rl { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--r); background: #15130f; }
.rl__v { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.rl:hover .rl__v { transform: scale(1.03); }
.wt { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; background: none; cursor: pointer; border-radius: inherit; }
.wt__chip { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px 8px 12px; border-radius: 999px;
  background: rgba(11, 10, 9, .62); color: #fff; font: 400 10.5px/1 var(--body); letter-spacing: .18em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .35s, color .35s; }
.wt__chip::before { content: ''; width: 0; height: 0; border-left: 7px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.wt:hover .wt__chip, .wt:focus-visible .wt__chip { background: var(--beige); color: var(--black); }
.wt:focus-visible { outline: 2px solid var(--beige); outline-offset: 3px; }
/* rows of media with equal heights: each column's width follows its picture's shape */
.row { display: grid; gap: clamp(12px, 1.2vw, 20px); align-items: stretch; }
.row--lounge { grid-template-columns: .5625fr 1.62fr .5625fr; }
.row--lounge .ph { aspect-ratio: 1.62; }

/* ════════ the hero: their film, the line on it ════════ */
.hf { position: relative; display: grid; align-items: end; min-height: 640px; height: calc(100svh - var(--hd) - var(--strip)); max-height: 1180px; overflow: hidden; background: #0b0a09; color: #fff; }
.hf__poster img, .hf__film { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.hf__film { opacity: 0; transition: opacity 1.4s ease; }
.hf__film.is-on { opacity: 1; }
/* a soft pool of dark right behind the words (their door glass and white walls pass behind them), the film clear above */
.hf__shade { position: absolute; inset: 0; background:
  radial-gradient(ellipse 46% 42% at 50% 66%, rgba(11, 10, 9, .66), rgba(11, 10, 9, 0) 100%),
  linear-gradient(180deg, rgba(11, 10, 9, .45) 0%, rgba(11, 10, 9, 0) 20%, rgba(11, 10, 9, 0) 32%, rgba(11, 10, 9, .6) 58%, rgba(11, 10, 9, .9) 100%); }
.hf__in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: clamp(56px, 6vh, 96px); }
.hf__in > .kick, .hf__p, .hf__rate { text-shadow: 0 1px 14px rgba(0, 0, 0, .6), 0 0 2px rgba(0, 0, 0, .5); }
.hf__h { margin-top: 26px; font: 400 clamp(58px, 6vw, 122px)/1 var(--display); white-space: nowrap; letter-spacing: .002em; text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.hf__p { max-width: 50ch; margin-top: 22px; font-size: clamp(16px, 1.15vw, 20px); line-height: 1.65; color: rgba(255, 255, 255, .86); text-wrap: balance; }
.hf__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hf__watch { gap: 12px; border-color: rgba(255, 255, 255, .55); color: #fff; background: rgba(11, 10, 9, .25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hf__watch:hover { background: #fff; color: var(--black); border-color: #fff; }
.hf__rate { margin-top: 24px; color: rgba(255, 255, 255, .8); font-size: 14px; letter-spacing: .05em; text-decoration: none; }
.hf__rate .stz { color: var(--beige); margin-right: 6px; }
.hf__rate:hover { color: #fff; }

/* ════════ their lines, drifting by ════════ */
/* a slim band (Ian, 2026-10-01: "a little too thick"; its hearts had no height of their own, so each one stood an
   invisible 150px tall and held the band open) */
.mq { overflow: hidden; background: var(--beige); color: var(--black); padding-block: clamp(14px, 1.1vw, 22px); }
.mq__track { display: flex; align-items: center; gap: clamp(20px, 1.9vw, 34px); width: max-content; will-change: transform; }
.mq__track span { font: 400 clamp(22px, 1.9vw, 38px)/1.2 var(--display); white-space: nowrap; }
.mq__track .hrt { flex: none; width: clamp(13px, 1.05vw, 19px); height: clamp(12px, .96vw, 17.5px); }

/* ════════ the drips ════════ */
.bags { --bagH: clamp(300px, 19vw, 400px); position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 64px); max-width: 1080px; margin: 0 auto; }
.bags::after { content: ''; position: absolute; left: 6%; right: 6%; top: calc(var(--bagH) + 2px); height: 1px; background: rgba(214, 200, 175, .24); }
.bag { display: flex; flex-direction: column; align-items: center; text-align: center; }
.bag__img { position: relative; }
.bag__img img { display: block; width: auto; height: var(--bagH); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.bag:hover .bag__img img { transform: translateY(-8px); }
.tag { position: absolute; top: 15%; right: -16%; display: flex; flex-direction: column; align-items: center; min-width: 78px; padding: 19px 12px 12px; border-radius: 10px;
  background: var(--beige); color: var(--black); transform: rotate(8deg); transform-origin: 50% 0; box-shadow: 0 14px 28px rgba(0, 0, 0, .35); transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.tag::before { content: ''; position: absolute; top: 7px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--black); }
.bag:hover .tag { transform: rotate(2deg); }
.tag b { font: 400 25px/1 var(--display); }
.tag span { margin-top: 4px; font: 400 9px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; }
.bag__n { margin-top: clamp(28px, 2.4vw, 40px); font: 400 clamp(34px, 2.7vw, 52px)/1 var(--display); }
.bag__l { margin-top: 12px; max-width: 28ch; font-size: 15.5px; line-height: 1.6; color: var(--text-n); }

/* the whole menu, printed like a bill, beside a picture of the drip you're on */
.mn { margin-top: clamp(70px, 6vw, 110px); }
.hd-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(30px, 2.6vw, 44px); }
.hd-tabs [role="tab"] { min-height: 46px; padding: 0 24px; border-radius: 999px; border: 1px solid rgba(214, 200, 175, .4); color: #fff;
  font: 400 12px/1 var(--body); letter-spacing: .22em; text-transform: uppercase; transition: background .4s, color .4s, border-color .4s; }
.hd-tabs [role="tab"]:hover { border-color: var(--beige); }
.hd-tabs [aria-selected="true"] { background: var(--beige); border-color: var(--beige); color: var(--black); }
.mn__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: clamp(40px, 5vw, 90px); align-items: start; max-width: 1140px; margin-inline: auto; }
.mn[data-tab="p-inj"] .mn__body, .mn[data-tab="p-add"] .mn__body { grid-template-columns: minmax(0, 860px); justify-content: center; }
.mn[data-tab="p-inj"] .mn__preview, .mn[data-tab="p-add"] .mn__preview { display: none; }
.rc { position: relative; padding: 42px clamp(24px, 3.2vw, 54px) 46px; background: var(--paper); color: var(--black);
  -webkit-mask: radial-gradient(circle 7px at 50% 0, transparent 96%, #000) 0 0 / 20px 51% repeat-x, radial-gradient(circle 7px at 50% 100%, transparent 96%, #000) 0 100% / 20px 51% repeat-x;
  mask: radial-gradient(circle 7px at 50% 0, transparent 96%, #000) 0 0 / 20px 51% repeat-x, radial-gradient(circle 7px at 50% 100%, transparent 96%, #000) 0 100% / 20px 51% repeat-x; }
.rc__head { padding-bottom: 20px; margin-bottom: 6px; border-bottom: 1px dashed rgba(11, 10, 9, .35); text-align: center; }
.rc__brand { font: 400 26px/1.1 var(--display); }
.rc__addr { margin-top: 8px; font: 400 10.5px/1.5 var(--body); letter-spacing: .16em; text-transform: uppercase; color: #6b6156; }
.rc__title { margin-top: 16px; font: 400 12px/1 var(--body); letter-spacing: .32em; text-transform: uppercase; }
.rc__foot { margin-top: 24px; padding-top: 20px; border-top: 1px dashed rgba(11, 10, 9, .35); text-align: center; font: 400 10.5px/1.7 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #4a433b; }
.rc__thanks { margin-top: 12px; font: 400 21px/1.2 var(--display); letter-spacing: 0; text-transform: none; color: var(--black); }
.rc__bar { display: block; width: min(250px, 70%); height: 44px; margin: 18px auto 0; opacity: .9;
  background: repeating-linear-gradient(90deg, #0b0a09 0 2px, transparent 2px 4px, #0b0a09 4px 5px, transparent 5px 8px, #0b0a09 8px 11px, transparent 11px 12px, #0b0a09 12px 13px, transparent 13px 16px); }
.mr { position: relative; display: flex; align-items: flex-start; gap: 16px; width: 100%; padding: 17px 12px 17px 0; border-bottom: 1px dashed rgba(11, 10, 9, .22); color: var(--black); text-align: left; transition: background .5s; }
.mr__bag { display: none; flex: none; width: 34px; height: auto; margin-top: 2px; }
.mr__main { flex: 1; min-width: 0; }
.mr__top { display: flex; align-items: baseline; gap: 14px; }
.mr__name { font: 400 21px/1.2 var(--display); }
.mr__dots { flex: 1; min-width: 20px; border-bottom: 1px dotted rgba(11, 10, 9, .35); transform: translateY(-5px); }
.mr__price { font: 400 20px/1 var(--display); white-space: nowrap; }
.mr__note { display: block; margin-top: 6px; font: 400 10.5px/1.3 var(--body); letter-spacing: .22em; text-transform: uppercase; color: #8a7652; }
.mr__line { display: none; margin-top: 6px; font-size: 14px; line-height: 1.55; color: #4a433b; }
.mr::before { content: ''; position: absolute; left: -16px; top: 26px; width: 7px; height: 7px; border-radius: 50%; background: var(--black); opacity: 0; transition: opacity .5s; }
.mr.is-on { background: linear-gradient(90deg, rgba(214, 200, 175, .55), rgba(214, 200, 175, 0) 85%); }
.mr.is-on::before { opacity: 1; }
.mr:focus-visible { outline: 1px solid var(--black); outline-offset: 2px; }
.mn__preview { position: sticky; top: calc(var(--hd) + 30px); }
.mc-stack { display: grid; }
.mc { grid-area: 1 / 1; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 24px; align-items: start; padding: 28px; border-radius: var(--r); background: #171512; border: 1px solid rgba(214, 200, 175, .16);
  opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.mc.is-on { opacity: 1; visibility: visible; transition: opacity .9s ease .2s, visibility 0s; }
.mc__img { width: 100%; height: auto; transform: translateY(12px); transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.mc.is-on .mc__img { transform: none; }
.mc__name { font: 400 30px/1.08 var(--display); color: #fff; }
.mc__price { margin-top: 10px; font: 400 22px/1 var(--display); color: var(--beige); }
.mc__price span { margin-left: 6px; font: 400 11px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: rgba(214, 200, 175, .7); }
.mc__note { margin-top: 10px; font: 400 10.5px/1.3 var(--body); letter-spacing: .24em; text-transform: uppercase; color: var(--beige); }
.mc__line { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .76); }
.mc__in { margin-top: 14px; border-top: 1px solid rgba(214, 200, 175, .2); }
.mc__in li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(214, 200, 175, .12); font-size: 12.5px; }
.mc__in b { font-weight: 400; color: #fff; white-space: nowrap; }
.mc__in span { color: rgba(255, 255, 255, .6); text-align: right; }
.rc .dl__cols, .rc .ao { columns: 2; column-gap: clamp(36px, 4vw, 70px); }
.rc .dl__row { padding: 18px 0; border-top: 0; border-bottom: 1px dashed rgba(11, 10, 9, .22); break-inside: avoid; }
.rc .dl__top { display: flex; align-items: baseline; gap: 14px; }
.rc .dl__name { font: 400 21px/1.2 var(--display); text-transform: none; letter-spacing: 0; color: var(--black); }
.rc .dl__dots { flex: 1; min-width: 20px; border-bottom: 1px dotted rgba(11, 10, 9, .35); transform: translateY(-5px); }
.rc .dl__price { font: 400 20px/1 var(--display); color: var(--black); white-space: nowrap; }
.rc .dl__line { margin-top: 6px; font-size: 14px; line-height: 1.55; color: #4a433b; }
.rc .ao li { display: flex; align-items: baseline; gap: 12px; padding: 15px 0; border-top: 0; border-bottom: 1px dashed rgba(11, 10, 9, .22); break-inside: avoid; }
.rc .ao__n { font: 400 19px/1.2 var(--display); text-transform: none; color: var(--black); }
.rc .ao__how { flex: 1; font: 400 10.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #8a7652; }
.rc .ao__p { font: 400 18px/1 var(--display); color: var(--black); }

/* ════════ the nurses ════════ */
.strip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-top: clamp(70px, 6vw, 110px); padding-bottom: 18px; border-bottom: 1px solid rgba(11, 10, 9, .2); }
.strip-head__h { font: 400 clamp(24px, 1.9vw, 34px)/1.15 var(--display); }
.ncs { display: flex; gap: clamp(14px, 1.3vw, 22px); margin-top: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.ncs::-webkit-scrollbar { display: none; }
.nc { flex: 0 0 clamp(200px, 17vw, 240px); scroll-snap-align: start; }
/* the whole team leads the row on big screens; phones see it above the row, in its natural shape (never stretched) */
.nc--team { display: none; }
.nteam { aspect-ratio: 1100 / 1021; }
.nteam img { object-position: 50% 40%; }
.nc__team img { object-position: 50% 40%; }
.nc__btn { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--r); background: #000; cursor: pointer; }
.nc__btn img { width: 100%; height: 100% !important; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.nc__btn:hover img { transform: scale(1.03); }
.nc__btn .play { position: absolute; left: 50%; bottom: 16px; width: 44px; height: 44px; margin-left: -22px; border: 0; border-radius: 50%; background: rgba(214, 200, 175, .95); transition: transform .4s; }
.nc__btn .play::after { content: ''; position: absolute; left: 17px; top: 14px; border-left: 12px solid var(--black); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.nc__btn:hover .play { transform: scale(1.08); }
.nc__n { margin-top: 14px; text-align: center; font: 400 22px/1.2 var(--display); }
.nc__r, .nc__fav { margin-top: 4px; text-align: center; font: 400 10.5px/1.4 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); }
.nc__fav { color: #8a7652; }

/* ════════ the lounge ════════ */
.perks { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 0; max-width: 1100px; margin: clamp(46px, 4vw, 70px) auto 0; }
.perks li { display: flex; align-items: center; font: 400 clamp(17px, 1.25vw, 21px)/1.3 var(--display); color: rgba(255, 255, 255, .92); }
.perks li + li::before { content: '\2665'; margin: 0 clamp(14px, 1.4vw, 24px); font-size: 13px; color: var(--beige); }
.cta--now .lx-now { margin: 0 18px 0 0; color: rgba(255, 255, 255, .8); }
.sec--k .lx-now .dot { background: rgba(255, 255, 255, .35); }
.sec--k .lx-now[data-state="open"] .dot { background: #7fcf8e; }

/* ════════ the founder ════════ */
.fd { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: clamp(46px, 6vw, 110px); align-items: center; max-width: 1180px; }
.fd__pic { aspect-ratio: 4 / 5; }
.fd__q { margin: 20px 0 0; }
.fd__q p { font: 400 clamp(34px, 2.8vw, 54px)/1.16 var(--display); text-wrap: balance; }
.fd__p { margin-top: 24px; max-width: 46ch; font-size: 18px; line-height: 1.7; color: var(--text-n); }
.fd__who { margin-top: 26px; font: 400 12.5px/1.5 var(--body); letter-spacing: .22em; text-transform: uppercase; }
.fd__who span { display: block; margin-top: 4px; color: var(--taupe); }
.link-watch { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; padding: 0 0 6px; border-bottom: 1px solid rgba(11, 10, 9, .35); color: var(--black);
  font: 400 12.5px/1 var(--body); letter-spacing: .22em; text-transform: uppercase; transition: border-color .3s; }
.link-watch:hover { border-bottom-color: var(--black); }

/* ════════ beyond the drip ════════ */
.bd { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(46px, 6vw, 110px); align-items: start; max-width: 1180px; }
.bd__media { position: sticky; top: calc(var(--hd) + 40px); }
.bd__cap { margin-top: 16px; text-align: center; font: 400 11.5px/1.5 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); }
.ix { border-top: 1px solid rgba(214, 200, 175, .4); }
.ix li { padding: 24px 0 22px; border-bottom: 1px solid rgba(214, 200, 175, .18); }
.ix__top { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.ix__n { font: 400 clamp(26px, 2.1vw, 38px)/1.1 var(--display); }
.ix__new { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 6px 10px 5px; border: 1px solid var(--beige); border-radius: 999px; font: 400 10px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--beige); }
.ix__p { flex: none; font: 400 20px/1.2 var(--display); color: var(--beige); text-align: right; }
.ix__p a { color: inherit; text-underline-offset: 5px; }
.ix__l { margin-top: 8px; max-width: 62ch; font-size: 15.5px; line-height: 1.65; color: rgba(255, 255, 255, .74); }

/* ════════ reviews ════════ */
.rw { display: flex; flex-direction: column; align-items: center; text-align: center; }
.rw__score { display: inline-flex; flex-direction: column; align-items: center; color: var(--black); text-decoration: none; }
.rw__score b { font: 400 clamp(90px, 8vw, 150px)/.9 var(--display); }
.rw__score .stz { margin-top: 10px; font-size: 18px; letter-spacing: .3em; }
.rw__n { margin-top: 10px; font: 400 12px/1.3 var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); }
.rw__qs { display: grid; width: 100%; max-width: 960px; margin-top: clamp(40px, 3.4vw, 60px); }
.rw__qs > .lx-q { grid-area: 1 / 1; align-self: center; margin: 0; }
[data-deck].is-live .rw__qs > .lx-q { visibility: hidden; opacity: 0; transition: opacity 1s ease, visibility 0s linear 1s; }
[data-deck].is-live .rw__qs > .lx-q.is-on { visibility: visible; opacity: 1; transition: opacity 1s ease .35s, visibility 0s; }
.rw__qs .lx-q blockquote p { font: 400 clamp(26px, 2.3vw, 42px)/1.36 var(--display); text-wrap: balance; }
.rw__qs .lx-q figcaption { margin-top: 22px; font: 400 12px/1.2 var(--body); letter-spacing: .24em; text-transform: uppercase; color: var(--taupe); }
.rw__tabs { display: none; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
[data-deck].is-live .rw__tabs { display: flex; }
.rw__tabs button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(11, 10, 9, .3); font: 400 11px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--black); transition: background .6s, color .6s, border-color .6s; }
.rw__tabs button:hover { border-color: var(--black); }
.rw__tabs button.is-on { background: var(--black); border-color: var(--black); color: var(--nude); }

/* ════════ their feed: one row of their reels, drifting slowly so it is plain there are more ════════ */
.feed { display: flex; gap: clamp(14px, 1.3vw, 22px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.feed::-webkit-scrollbar { display: none; }
.feed li { flex: 0 0 clamp(220px, 19vw, 270px); scroll-snap-align: start; }
.feed__v { margin-top: 10px; text-align: center; font: 400 10.5px/1.3 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--taupe); }

/* the arrows beside every row that moves sideways: each press glides the row one card along (Ian, 2026-10-01: "we
   should have left and right arrows to go through them quicker"); they sit level with the middle of the pictures */
.sx { position: relative; --sx-size: clamp(48px, 2.7vw, 58px); }
.sx__btn { position: absolute; top: var(--sx-mid, 50%); z-index: 3; display: grid; place-items: center; width: var(--sx-size); height: var(--sx-size); margin-top: calc(var(--sx-size) / -2); border-radius: 50%;
  border: 1px solid rgba(11, 10, 9, .12); background: var(--nude); color: var(--black); box-shadow: 0 8px 22px rgba(0, 0, 0, .2); cursor: pointer;
  transition: opacity 1.1s ease, background .3s, transform .3s; }
.sx__btn svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sx__btn:hover { background: var(--beige); }
.sx__btn:active { transform: scale(.94); }
.sx__btn:focus-visible { outline: 2px solid var(--beige); outline-offset: 3px; }
.sx__btn--prev { left: calc(var(--sx-size) / -2); }
.sx__btn--next { right: calc(var(--sx-size) / -2); }
.rv-wait ~ .sx__btn { opacity: 0; }

/* ════════ reviews, big screens: 5.0, then their words drifting by between two of their clients mid-drip ════════ */
.rvd { display: none; }
.rvd__score { display: flex; justify-content: center; align-items: center; gap: 26px; color: var(--black); text-decoration: none; }
.rvd__score b { font: 400 clamp(84px, 6.4vw, 124px)/.9 var(--display); }
.rvd__right { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.rvd__right .stz { font-size: 20px; letter-spacing: .3em; }
.rvd__n { font: 400 12px/1.3 var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); }
.rvd__score:hover .rvd__n { color: var(--black); }
.rvd__row { display: flex; gap: 22px; margin-top: clamp(40px, 3.4vw, 60px); overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.rvd__row::-webkit-scrollbar { display: none; }
.rvc { flex: 0 0 410px; display: flex; flex-direction: column; height: 360px; padding: 34px 36px 30px; border-radius: var(--r); background: var(--nude); color: var(--black); }
.rvc .stz { font-size: 15px; letter-spacing: .26em; color: #8a7652; }
.rvc p { flex: 1; margin-top: 18px; font: 400 21px/1.45 var(--display); }
.rvc__who { margin-top: 18px; font: 400 11.5px/1.3 var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); }
.rvp { flex: 0 0 288px; height: 360px; overflow: hidden; border-radius: var(--r); background: #1a1815; }
.rvp img { display: block; width: 100%; height: 100% !important; object-fit: cover; }

/* ════════ visit ════════ */
.vs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 2.6vw, 44px); align-items: stretch; }
.vs__info { display: flex; flex-direction: column; }
.vs__info .lx-now { margin-top: 0; }
.vs__hours { margin-top: 18px; border-top: 1px solid var(--black); }
.vs__hours li { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--rule-n); font-size: 15.5px; color: var(--text-n); }
.vs__hours li.is-today { color: var(--black); font-weight: 700; }
.vs__addr { margin-top: 20px; font: 400 21px/1.4 var(--display); }
.vs__addr a { color: var(--black); text-decoration: none; }
.vs__addr a:hover { text-decoration: underline; text-underline-offset: 5px; }
.vs__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.vs__line { border-color: rgba(11, 10, 9, .35); color: var(--black); }
.vs__line:hover { border-color: var(--black); }
.vs__terms { margin-top: 18px; font-size: 14px; line-height: 1.6; color: var(--text-n); }
.vs__pic { min-height: 100%; }
.vs__side { display: flex; flex-direction: column; gap: clamp(20px, 2vw, 30px); }
.pc { padding: 22px 24px 24px; border-radius: var(--r); background: var(--black); color: #fff; }
.pc__brand { display: flex; align-items: center; gap: 10px; font: 400 20px/1 var(--display); }
.pc__mark .mark { width: 28px; background: var(--beige); }
.pc__holes { display: flex; justify-content: space-between; gap: 6px; margin: 20px 0 16px; }
.pc__holes li { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px dashed rgba(214, 200, 175, .6); color: var(--beige); }
.pc__holes li .hrt { width: 22px; height: 20px; opacity: 0; transform: scale(.3); transition: opacity .5s ease, transform .7s cubic-bezier(.3, 1.6, .5, 1); }
.pc.is-punched li .hrt { opacity: 1; transform: none; }
.pc.is-punched li:nth-child(1) .hrt { transition-delay: .2s; }
.pc.is-punched li:nth-child(2) .hrt { transition-delay: .6s; }
.pc.is-punched li:nth-child(3) .hrt { transition-delay: 1s; }
.pc.is-punched li:nth-child(4) .hrt { transition-delay: 1.4s; }
.pc__five { border-style: solid !important; background: var(--beige); color: var(--black) !important; font: 400 10.5px/1.1 var(--body); letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.pc__t { font: 400 19px/1.3 var(--display); }
.pc__s { margin-top: 4px; font-size: 13.5px; color: rgba(255, 255, 255, .72); }
.vs__map { flex: 1; min-height: 220px; overflow: hidden; border-radius: var(--r); }
.vs__map iframe { display: block; width: 100%; height: 100%; min-height: 220px; border: 0; filter: grayscale(.5) contrast(1.02); }

/* ════════ questions ════════ */
.sec--b .faq__cols { max-width: 1080px; }
.sec--b .qa { border-bottom-color: var(--rule-n); }
.sec--b .qa summary { padding: 24px 0; font: 400 21px/1.3 var(--display); }
.sec--b .qa summary::after { font-family: var(--body); color: var(--black); }
.sec--b .qa p { font-size: 15.5px; line-height: 1.7; color: var(--text-n); }
.sec--b .lx-faq__more { color: var(--text-n); }

/* ════════ to close: their line on their gold bag ════════ */
.close { position: relative; display: grid; place-items: center; min-height: clamp(520px, 62vh, 760px); overflow: hidden; background: var(--black); color: #fff; text-align: center; }
.close__bg img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.close__shade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(11, 10, 9, .55), rgba(11, 10, 9, .82)); }
.close__in { position: relative; z-index: 2; padding-block: var(--pad); }
.close__h { margin-top: 0; font-size: clamp(46px, 5.2vw, 104px); }

/* ════════ the full-screen reel player (their reels with sound) ════════ */
.vw { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px;
  background: rgba(8, 7, 6, .95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .35s ease; color: #fff; }
.vw[hidden] { display: none; }
.vw.is-open { opacity: 1; }
.vw__row { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px); }
.vw__stage { position: relative; height: min(82svh, 860px); aspect-ratio: 9 / 16; max-width: calc(100vw - 40px); border-radius: 22px; overflow: hidden; background: #000; }
.vw__v { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.vw__bar { position: absolute; z-index: 3; top: 12px; left: 12px; right: 12px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.vw__bar b { position: absolute; inset: 0; background: #fff; transform: scaleX(var(--p, 0)); transform-origin: left; }
.vw__zone { position: absolute; z-index: 2; top: 10%; bottom: 14%; width: 33%; background: none; cursor: pointer; }
.vw__zone--prev { left: 0; }
.vw__zone--next { right: 0; }
.vw__mute { position: absolute; z-index: 4; right: 12px; bottom: 12px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(11, 10, 9, .6); color: #fff; }
.vw__mute svg, .vw__arrow svg, .vw__close svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vw__arrow { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); color: #fff; transition: background .3s, color .3s; }
.vw__arrow:hover { background: var(--beige); color: var(--black); }
.vw__close { position: absolute; z-index: 5; top: 16px; right: 16px; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; }
.vw__close:hover { background: var(--beige); color: var(--black); }
.vw__meta { max-width: min(560px, 92vw); text-align: center; }
.vw__cap { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.vw__info { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font: 400 10.5px/1.4 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--beige); }
.vw__info a { color: inherit; text-underline-offset: 4px; }
.vw__info [hidden] { display: none; }

/* ════════ big screens ════════
   Round 13 (Ian, 2026-10-01: "a lot better on the phone... on desktop, I'm just not feeling it"): every section fills
   the house column (1240) the way the approved sites do, and ends at about one screen.
   Round 14 (Ian, same day): the menu's stepping highlight with a bag sliding beside it ("not a big fan"), the nurses as a
   lopsided team photo + a reel + a quote splitting the section ("weird"), the side-scrolling rows nobody would know were
   there, and a "bland" review. So: the bill shows every drip with its bag and its line, standing still; the nurses are
   one slow parade led by the whole team; their reels and their words drift by. Phones keep the layout Ian likes. */
@media (min-width: 900px) {
  /* rows that drift sit inside the column and fade out softly at its edges instead of being cut */
  .ncs, .feed, .rvd__row { -webkit-mask: linear-gradient(90deg, transparent, #000 4.5%, #000 95.5%, transparent); mask: linear-gradient(90deg, transparent, #000 4.5%, #000 95.5%, transparent); }
  /* the nurses: one slow parade, the whole team first (in its own shape), then each of them on her own card */
  .nteam { display: none; }
  .strip-head { margin-top: 0; }
  .ncs { gap: clamp(18px, 1.6vw, 24px); margin-top: 34px; }
  .nc { --cw: clamp(210px, 17vw, 300px); flex: 0 0 var(--cw); }
  .nc--team { display: block; flex: 0 0 auto; }
  .nc__team { width: auto; height: calc(var(--cw) * 16 / 9); aspect-ratio: 1100 / 1021; }
}
@media (min-width: 1200px) {
  /* the drips: the whole bill in two columns, every drip with its little bag and its line; nothing steps or slides */
  .mn__body { grid-template-columns: minmax(0, 1120px); justify-content: center; max-width: none; }
  .mn__preview { display: none; }
  .rc { padding-inline: clamp(40px, 3.4vw, 64px); }
  .mr-list { columns: 2; column-gap: clamp(48px, 4.2vw, 80px); }
  .mr { break-inside: avoid; gap: 18px; padding: 18px 0; cursor: default; }
  .mr::before { display: none; }
  .mr.is-on { background: none; }
  .mr__bag { display: block; width: 30px; }
  .mr__line { display: block; font-size: 13.5px; }
  /* reviews: their words drifting by instead of one at a time */
  .rw { display: none; }
  .rvd { display: block; }
  /* the founder: the full column, her words calmer beside her portrait */
  .fd { grid-template-columns: minmax(0, 470px) minmax(0, 1fr); max-width: var(--maxw); gap: clamp(60px, 6vw, 120px); }
  .fd__q p { max-width: 17em; }
  /* beyond the drip: the list in two columns beside the reel, so it ends where the reel ends */
  .bd { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); max-width: var(--maxw); gap: clamp(50px, 5vw, 90px); }
  .ix { columns: 2; column-gap: clamp(40px, 3.6vw, 64px); }
  .ix li { break-inside: avoid; padding: 22px 0 20px; }
  .ix__top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ix__n { font-size: clamp(24px, 1.6vw, 30px); }
  .ix__p { text-align: left; font-size: 18px; }
}

/* ════════ smaller windows ════════ */
@media (max-width: 1199px) {
  .mn__body { grid-template-columns: minmax(0, 1fr) minmax(0, 330px); }
  .mc { grid-template-columns: 1fr; }
  .mc__bag { max-width: 120px; }
  .vs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vs__side { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .lx { --pad: clamp(72px, 16vw, 104px); --r: 18px; }
  .hf { height: calc(100svh - var(--hd)); min-height: 600px; }
  .hf__shade { background: linear-gradient(180deg, rgba(11, 10, 9, .3) 0%, rgba(11, 10, 9, 0) 20%, rgba(11, 10, 9, 0) 34%, rgba(11, 10, 9, .7) 62%, rgba(11, 10, 9, .94) 100%); }
  .hf__h { font-size: clamp(50px, 14vw, 66px); white-space: normal; }
  /* phones: a shorter block, so the faces in the film stay clear of the words */
  .hf__p, .hf__in > .kick { display: none; }
  .hf__h { margin-top: 0; }
  .hf__in { padding-bottom: 40px; }
  .hf__cta { margin-top: 26px; }
  .hf__cta { flex-direction: column; width: 100%; }
  .hf__cta .lx-btn { width: 100%; }
  /* phones: Book only; a second button took room from the film (Ian, 2026-10-01) */
  .hf__watch { display: none; }
  .zh__h { font-size: clamp(38px, 10.4vw, 50px); }

  .bags { --bagH: 150px; grid-template-columns: 1fr; gap: 0; max-width: 560px; }
  .bags::after { display: none; }
  .bag { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 30px; align-items: start; padding: 24px 0; border-top: 1px solid rgba(214, 200, 175, .2); text-align: left; }
  .bag__img { grid-row: 1 / span 2; }
  .tag { right: -32%; top: 8%; min-width: 60px; padding: 15px 9px 8px; }
  .tag b { font-size: 19px; }
  .bag__n { margin-top: 18px; padding-left: 12px; font-size: 32px; }
  .bag__l { max-width: none; padding-left: 12px; }
  .mn__body { grid-template-columns: 1fr; }
  .mn__preview { display: none; }
  .rc { padding-inline: 18px; }
  .mr { gap: 14px; padding-right: 0; }
  .mr::before { display: none; }
  .mr__bag { display: block; }
  .mr__line { display: block; }
  .hd-tabs [role="tab"] { padding: 0 16px; font-size: 11px; letter-spacing: .16em; }
  .rc .dl__cols, .rc .ao { columns: 1; }

  .strip-head { margin-top: clamp(44px, 12vw, 64px); }
  .row--lounge { grid-template-columns: 1fr 1fr; }
  .row--lounge .ph { grid-column: 1 / -1; grid-row: 1; }
  .perks { flex-direction: column; align-items: center; gap: 10px; }
  .perks li { text-align: center; }
  .perks li + li::before { display: none; }
  .cta--now { flex-direction: column; }
  .cta--now .lx-now { margin: 0; }
  .cta .lx-btn { width: 100%; }
  .strip-head { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  .ncs, .feed { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .nc { flex-basis: 58%; }
  .feed { gap: 14px; }
  .feed li { flex: 0 0 58%; }

  .fd { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .fd__p { margin-inline: auto; }
  .bd { grid-template-columns: 1fr; gap: 40px; }
  .bd__media { position: static; width: min(64%, 300px); justify-self: center; }
  .ix__top { flex-direction: column; gap: 6px; }
  .ix__p { text-align: left; }
  .vs { grid-template-columns: 1fr; }
  .vs__pic { aspect-ratio: 4 / 4.4; min-height: 0; }
  .vs__side { grid-template-columns: 1fr; }
  .vs__btns .lx-btn { flex: 1; }
  .pc__holes li { width: 46px; height: 46px; }
  .close__h { font-size: clamp(40px, 11vw, 54px); }
  .vw { padding: 10px; }
  /* phones: the player's arrows sit on the film's edges (a swipe still works too) */
  .vw__row { position: relative; }
  .vw__arrow { position: absolute; top: 50%; z-index: 6; width: 44px; height: 44px; margin-top: -22px; border-color: rgba(255, 255, 255, .4); background: rgba(11, 10, 9, .5); }
  .vw__arrow[data-go="-1"] { left: 8px; }
  .vw__arrow[data-go="1"] { right: 8px; }
  .vw__stage { height: min(80svh, 168vw); }
  /* the row arrows sit just inside the screen edge, over the first and last cards showing */
  .sx { --sx-size: 44px; }
  .sx__btn--prev { left: -8px; }
  .sx__btn--next { right: -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .bag__img img, .bag:hover .bag__img img, .mc__img, .rl__v, .nc__btn img, .tag { transition: none; }
  .pc__holes li .hrt { transform: none; transition: opacity .6s ease; }
}