/* Group Buying Edge — "Hearth" design system
   Forest green, cream and brass, like a fine restaurant after service.
   Young Serif display, Bricolage Grotesque text, DM Mono for labels and numbers.
   Signature: the menu card — dotted leaders, double rules and ticket-cut corners. */
@font-face { font-family: "Young Serif"; src: url(../fonts/YoungSerif-Regular.woff) format("woff"); font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url(../fonts/BricolageGrotesque-Regular.woff) format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url(../fonts/BricolageGrotesque-Bold.woff) format("woff"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url(../fonts/DMMono-Regular.woff) format("woff"); font-display: swap; }

:root {
  --cream: #F4EEE2; --linen: #EAE2D3; --oat: #DCD1BD;
  --forest: #10291B; --forest-2: #15331F; --green: #1C4A33; --sage: #86A890; --gold: #C9962B; --gold-l: #E3BE6A; --tomato: #B8261E;
  --ink: #18201B; --ink-2: rgba(24, 32, 27, .72); --ink-3: rgba(24, 32, 27, .48);
  --lt: #F4EEE2; --lt-2: rgba(244, 238, 226, .72); --lt-3: rgba(244, 238, 226, .46);
  --hair: rgba(24, 32, 27, .14); --hair-d: rgba(244, 238, 226, .16);
  --serif: "Young Serif", Georgia, serif; --sans: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif; --mono: "DM Mono", ui-monospace, monospace;
  --gut: clamp(20px, 4.4vw, 72px); --max: 1340px; --ease: cubic-bezier(.22, 1, .36, 1); --io: cubic-bezier(.76, 0, .24, 1);
  --notch: radial-gradient(circle at 0 0, transparent 14px, #000 14.5px) top left, radial-gradient(circle at 100% 0, transparent 14px, #000 14.5px) top right, radial-gradient(circle at 0 100%, transparent 14px, #000 14.5px) bottom left, radial-gradient(circle at 100% 100%, transparent 14px, #000 14.5px) bottom right;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 100px; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 clamp(1.02rem, .97rem + .22vw, 1.12rem)/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; line-height: 1.04; }
h1 i, h2 i, h3 i { font-style: normal; color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
::selection { background: var(--gold-l); color: var(--forest); }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.skip { position: absolute; left: 12px; top: -80px; z-index: 300; background: var(--forest); color: var(--lt); padding: 10px 16px; border-radius: 99px; }
.skip:focus { top: 12px; }

/* ---------- type ---------- */
.label { display: inline-flex; align-items: center; gap: 12px; font: 400 .76rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(201, 150, 43, .22); }
.label.plain::before { content: ""; width: 18px; height: 1px; background: var(--gold); }
.dark .label, .label.lt { color: var(--sage); }
.h-xl { font-size: clamp(3rem, 1.4rem + 6vw, 8rem); }
.h-l { font-size: clamp(2.5rem, 1.4rem + 4vw, 5.6rem); }
.h-m { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.9rem); }
.h-s { font-size: clamp(1.4rem, 1.15rem + .9vw, 2rem); line-height: 1.15; }
.lede { font-size: clamp(1.1rem, 1rem + .45vw, 1.34rem); line-height: 1.6; color: var(--ink-2); max-width: 34em; }
.dark .lede { color: var(--lt-2); }
.dbl { height: 5px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; opacity: .25; }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; border-radius: 99px; background: var(--green); color: var(--lt); font: 600 .9rem/1 var(--sans); letter-spacing: .01em; overflow: hidden; isolation: isolate; transition: color .4s, transform .5s var(--ease); }
.btn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-radius: 50%; background: var(--gold); transform: translate(-50%, -50%); transition: width .6s var(--ease), height .6s var(--ease); z-index: -1; }
.btn:hover::before { width: 260%; height: 600%; }
.btn:hover { color: var(--forest); transform: translateY(-1px); }
.btn svg { width: 16px; height: 16px; }
.btn.cream { background: var(--cream); color: var(--forest); }
.btn.ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.lk { display: inline-flex; align-items: center; gap: 10px; font: 600 .9rem/1 var(--sans); padding-bottom: 5px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; transition: background-size .5s var(--io), color .3s; }
.lk:hover { background-size: 0 1.5px; background-position: 100% 100%; color: var(--gold); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* ---------- header: capsule nav ---------- */
.hd { position: fixed; inset: 16px 0 auto; z-index: 100; pointer-events: none; transition: transform .6s var(--ease); }
.hd .bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.hd .bar > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 99px; color: var(--lt); transition: background .5s, color .5s; }
.brand svg { width: 42px; height: 42px; flex: none; }
.brand b { display: block; font: 400 1.05rem/1 var(--serif); letter-spacing: .01em; }
.brand small { display: block; margin-top: 4px; font: 400 .6rem/1 var(--mono); letter-spacing: .2em; opacity: .7; text-transform: uppercase; }
.caps { display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 99px; background: rgba(16, 41, 27, .55); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: inset 0 0 0 1px rgba(244, 238, 226, .14); color: var(--lt); }
.caps a { padding: 10px 16px; border-radius: 99px; font: 500 .86rem/1 var(--sans); color: var(--lt-2); transition: background .35s, color .35s; white-space: nowrap; }
.caps a:hover { color: var(--lt); background: rgba(244, 238, 226, .08); }
.caps a[aria-current] { color: var(--forest); background: var(--gold-l); }
.hd .join { padding: 14px 22px; }
.hd.solid .brand { background: rgba(16, 41, 27, .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hd.hide { transform: translateY(-140%); }
.mb { display: none; width: 52px; height: 52px; border-radius: 50%; background: rgba(16, 41, 27, .7); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--lt); place-items: center; }
.mb i { width: 18px; height: 8px; position: relative; display: block; }
.mb i::before, .mb i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .5s var(--ease); }
.mb i::before { top: 0; } .mb i::after { bottom: 0; }
.drawer-open .mb i::before { transform: translateY(3.25px) rotate(45deg); }
.drawer-open .mb i::after { transform: translateY(-3.25px) rotate(-45deg); }
.drawer { position: fixed; inset: 0; z-index: 90; background: var(--forest); color: var(--lt); padding: 110px var(--gut) 40px; display: flex; flex-direction: column; transform: translateY(-100%); visibility: hidden; transition: transform .8s var(--io), visibility 0s .8s; }
.drawer-open .drawer { transform: none; visibility: visible; transition: transform .8s var(--io); }
.drawer nav a { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px dotted var(--hair-d); font: 400 clamp(1.8rem, 1.2rem + 3vw, 2.6rem)/1.1 var(--serif); opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.drawer nav a small { font: 400 .74rem/1 var(--mono); color: var(--gold-l); letter-spacing: .1em; }
.drawer nav a[aria-current] { color: var(--gold-l); }
.drawer-open .drawer nav a { opacity: 1; transform: none; transition-delay: calc(.25s + var(--i) * .05s); }
.drawer .df { margin-top: auto; color: var(--lt-2); font-size: .95rem; padding-top: 24px; }
.drawer-open { overflow: hidden; }

/* ---------- curtain transition ---------- */
.curtain { position: fixed; inset: 0; z-index: 200; pointer-events: none; background: var(--forest); transform: translateY(0); transition: transform .9s var(--io) .05s; display: grid; place-items: center; }
.curtain svg { width: 64px; height: 64px; }
.ready .curtain { transform: translateY(-101%); visibility: hidden; transition: transform .9s var(--io) .05s, visibility 0s 1s; }
.leaving .curtain { visibility: visible; }
.leaving .curtain { transform: translateY(0); transition-duration: .5s; transition-delay: 0s; }
.no-js .curtain { display: none; }

/* ---------- reveals ---------- */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }
.js .split-in .c { display: inline-block; opacity: 0; transform: translateY(.5em) rotate(4deg); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0s) + var(--i) * .018s); }
.js .split-in.in .c { opacity: 1; transform: none; }
.js .split-in .wd { display: inline-block; white-space: nowrap; }
.js .lead-in .dots { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.2s var(--io); transition-delay: var(--d, 0s); }
.js .lead-in.in .dots { transform: none; }
.js .plate-in { clip-path: circle(0% at 50% 50%); transition: clip-path 1.6s var(--io); transition-delay: var(--d, 0s); }
.js .plate-in.in { clip-path: circle(75% at 50% 50%); }

/* ---------- 3D stage ---------- */
.stage { position: relative; overflow: hidden; background: var(--forest); }
.stage .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 1.2s var(--ease); }
.stage .poster.is-hidden { opacity: 0; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s var(--ease); touch-action: pan-y; }
.stage canvas.is-live { opacity: 1; }
.stage canvas.gl-fallback { display: none; }
.stage .shade { position: absolute; inset: 0; pointer-events: none; }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 99px; background: rgba(16, 41, 27, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--lt-2); font: 400 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-l); box-shadow: 0 0 0 4px rgba(227, 190, 106, .2); }

/* ---------- sections ---------- */
.sec { position: relative; padding: clamp(96px, 11vw, 165px) 0; }
.dark { background: var(--forest); color: var(--lt); }
.linen { background: var(--linen); }
.hd2 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 26px 70px; align-items: end; margin-bottom: clamp(50px, 6vw, 86px); }
.hd2 .lede { justify-self: end; }

/* the menu card */
.menu { max-width: 860px; margin: 0 auto; padding: clamp(36px, 5vw, 70px) clamp(26px, 5vw, 80px); background: #FBF8F1; color: var(--ink); -webkit-mask: var(--notch); mask: var(--notch); -webkit-mask-size: 51% 51%; mask-size: 51% 51%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; box-shadow: 0 40px 80px -40px rgba(16, 41, 27, .4); position: relative; }
.menu::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(201, 150, 43, .4); pointer-events: none; }
.menu .top { text-align: center; margin-bottom: 34px; }
.menu .top h2 { margin: 14px 0 10px; }
.menu .top p { color: var(--ink-3); font: 400 .8rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.lead-row { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); }
.lead-row b { font: 400 1em/1.2 var(--serif); }
.lead-row .dots { flex: 1; border-bottom: 2px dotted rgba(24, 32, 27, .3); transform-origin: 0 50%; margin-bottom: 6px; }
.lead-row span:last-child { font: 400 .95em/1 var(--mono); color: var(--green); white-space: nowrap; }

/* tickets (steps) */
.tickets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.ticket { position: relative; padding: clamp(30px, 3.4vw, 46px); background: #FBF8F1; -webkit-mask: var(--notch); mask: var(--notch); -webkit-mask-size: 51% 51%; mask-size: 51% 51%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: transform .6s var(--ease); }
.ticket:hover { transform: translateY(-6px); }
.ticket .no { display: flex; justify-content: space-between; align-items: center; padding-bottom: 22px; margin-bottom: 26px; border-bottom: 2px dotted var(--hair); font: 400 .8rem/1 var(--mono); letter-spacing: .12em; color: var(--ink-3); }
.ticket .no b { font: 400 2.6rem/1 var(--serif); color: var(--gold); letter-spacing: 0; }
.ticket h3 { margin-bottom: 12px; }
.ticket p { color: var(--ink-2); }
.dark .ticket { background: var(--forest-2); color: var(--lt); }
.dark .ticket p { color: var(--lt-2); }
.dark .ticket .no { border-color: var(--hair-d); color: var(--lt-3); }

/* ===== HOME ===== */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 680px; color: var(--lt); }
.hero > .stage { position: absolute; inset: 0; }
.hero .shade { background: linear-gradient(90deg, rgba(12, 22, 16, .85), rgba(12, 22, 16, .45) 40%, rgba(12, 22, 16, 0) 66%), linear-gradient(0deg, rgba(12, 22, 16, .7), transparent 32%); }
.hero .copy { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: 90px; padding-bottom: 90px; pointer-events: none; }
.hero .copy > * { pointer-events: auto; max-width: 760px; }
.hero h1 { margin: 22px 0 24px; font-size: clamp(2.9rem, min(1.2rem + 5.2vw, 10.5vh), 7rem); }
.hero .lede { max-width: 30em; margin-bottom: 34px; }
.hero .chips { position: absolute; z-index: 2; left: 0; right: 0; bottom: 30px; }
.hero .chips .wrap { display: flex; flex-wrap: wrap; gap: 10px; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.split.flip > :first-child { order: 2; }
.plate { position: relative; }
.plate .disc { aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 10px #FBF8F1, 0 0 0 11px rgba(201, 150, 43, .45), 0 50px 90px -40px rgba(16, 41, 27, .55); }
.plate .disc img { width: 100%; height: 100%; object-fit: cover; }
.plate .tagline { position: absolute; right: -6px; bottom: 8%; padding: 14px 18px; background: var(--forest); color: var(--lt); font: 400 .74rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; border-radius: 99px; }
.dark .plate .disc { box-shadow: 0 0 0 10px var(--forest-2), 0 0 0 11px rgba(227, 190, 106, .45); }
.ticks { margin-top: 30px; }
.ticks li { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 2px dotted var(--hair); }
.ticks li::before { content: "✓"; font: 400 .9rem/1 var(--mono); color: var(--gold); }
.dark .ticks li { border-color: var(--hair-d); }

.band { position: relative; height: clamp(520px, 84vh, 860px); overflow: hidden; color: var(--lt); }
.band img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12, 22, 16, .88), rgba(12, 22, 16, .15) 58%), linear-gradient(90deg, rgba(12, 22, 16, .5), transparent 60%); }
.band .wrap { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(56px, 7vw, 100px); }
.band h2 { max-width: 15ch; margin: 18px 0 26px; }

.join-cta { text-align: center; }
.join-cta h2 { max-width: 16ch; margin: 22px auto 22px; }
.join-cta .lede { margin: 0 auto 36px; }
.join-cta .row { justify-content: center; }
.join-cta .fine { margin-top: 24px; font: 400 .78rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lt-3); }

/* ===== interior heroes ===== */
.ih { position: relative; height: 92vh; height: 92svh; min-height: 640px; color: var(--lt); }
.ih > .stage { position: absolute; inset: 0; }
.ih .shade { background: linear-gradient(0deg, rgba(12, 22, 16, .9) 0%, rgba(12, 22, 16, .3) 50%, rgba(12, 22, 16, .3)); }
.ih .copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(40px, 6vw, 80px); pointer-events: none; }
.ih .copy .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 26px 60px; align-items: end; }
.ih h1 { margin-top: 18px; font-size: clamp(2.8rem, min(1.3rem + 5vw, 11vh), 6.8rem); }
.ih .lede { pointer-events: auto; }
.ih .pill { position: absolute; z-index: 3; right: var(--gut); top: 110px; }
.ih.left .shade { background: linear-gradient(90deg, rgba(12, 22, 16, .88), rgba(12, 22, 16, .35) 46%, transparent 70%); }
.ih.left .copy { top: 0; bottom: 0; display: flex; align-items: center; }
.ih.left .copy .wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.ih.left .copy .wrap > div { display: flex; flex-direction: column; gap: 22px; }
.ih.centre .shade { background: radial-gradient(ellipse at 50% 60%, transparent 20%, rgba(12, 22, 16, .6) 75%), linear-gradient(180deg, rgba(12, 22, 16, .75), transparent 40%); }
.ih.centre .copy { top: clamp(130px, 17vh, 180px); bottom: auto; text-align: center; }
.ih.centre .copy .wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.ih.centre .lede { margin: 0 auto; }

/* pinned journey */
.pin-host { position: relative; height: 380vh; }
.pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; color: var(--lt); }
.pin > .stage { position: absolute; inset: 0; }
.pin .shade { background: linear-gradient(90deg, rgba(12, 22, 16, .86), rgba(12, 22, 16, .4) 38%, transparent 62%); }
.pin .copy { position: absolute; z-index: 2; inset: 0; display: flex; align-items: center; pointer-events: none; }
.pin .copy .wrap > * { pointer-events: auto; }
.pin h1 { margin-top: 18px; max-width: 9ch; font-size: clamp(2.8rem, min(1.3rem + 4.6vw, 11vh), 6.4rem); }
.steps { position: relative; margin-top: 40px; max-width: 420px; min-height: 180px; }
.steps .s { position: absolute; inset: 0 0 auto; opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.steps .s.on { opacity: 1; transform: none; }
.steps .s .n { font: 400 .78rem/1 var(--mono); letter-spacing: .14em; color: var(--gold-l); }
.steps .s b { display: block; margin: 12px 0 10px; font: 400 2.1rem/1.1 var(--serif); }
.steps .s p { color: var(--lt-2); }
.rail { position: absolute; z-index: 3; left: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); right: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); bottom: 34px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rail span { padding-top: 12px; border-top: 2px solid var(--hair-d); font: 400 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lt-3); transition: color .4s, border-color .4s; }
.rail span.on { color: var(--gold-l); border-color: var(--gold-l); }

/* stat-free facts strip */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.facts > div { padding: 34px 26px 36px 0; }
.facts > div + div { padding-left: 26px; border-left: 1px solid var(--hair); }
.facts b { display: block; font: 400 clamp(1.6rem, 1.3rem + 1vw, 2.3rem)/1.05 var(--serif); color: var(--green); margin-bottom: 8px; }
.facts p { color: var(--ink-2); font-size: .96rem; }
.dark .facts, .dark .facts > div { border-color: var(--hair-d); }
.dark .facts b { color: var(--gold-l); }
.dark .facts p { color: var(--lt-2); }
.quote { font: 400 clamp(1.9rem, 1.2rem + 2.6vw, 3.7rem)/1.18 var(--serif); letter-spacing: -.02em; max-width: 22ch; }
.quote i { color: var(--gold); font-style: normal; }
.mates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.mate { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 22px; background: var(--forest); color: var(--lt); }
.mate img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.mate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12, 22, 16, .85), transparent 55%); }
.mate .t { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 20px; }
.mate .t small { display: block; font: 400 .7rem/1 var(--mono); letter-spacing: .14em; color: var(--gold-l); margin-bottom: 8px; text-transform: uppercase; }
.mate .t b { font: 400 1.6rem/1.1 var(--serif); }
.mate:hover img { transform: scale(1.06); }

/* ===== CONTACT ===== */
.ct { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); min-height: 100vh; }
.ct .l { position: relative; }
.ct .l .stick { position: sticky; top: 0; height: 100vh; height: 100svh; }
.ct .l .stage { position: absolute; inset: 0; }
.ct .l .shade { background: linear-gradient(0deg, rgba(12, 22, 16, .85), transparent 45%); }
.ct .l .over { position: absolute; z-index: 2; left: var(--gut); right: var(--gut); bottom: 46px; color: var(--lt); }
.ct .l h1 { font-size: clamp(2.8rem, 1.4rem + 4vw, 5.6rem); margin-top: 14px; }
.ct .r { padding: clamp(120px, 12vw, 160px) var(--gut) clamp(70px, 8vw, 110px); max-width: 680px; }
.ct .card { padding: 30px 32px; background: #FBF8F1; -webkit-mask: var(--notch); mask: var(--notch); -webkit-mask-size: 51% 51%; mask-size: 51% 51%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; margin-bottom: 40px; }
.ct .card .lead-row { font-size: 1.1rem; padding: 12px 0; }
.ct .card .lead-row a { font: 400 1rem/1.2 var(--mono); color: var(--green); overflow-wrap: anywhere; text-align: right; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.form .full { grid-column: 1 / -1; }
.f label { display: block; font: 400 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px 2px; }
.f input, .f textarea { width: 100%; padding: 14px 16px; border-radius: 14px; background: #FBF8F1; border: 1px solid var(--oat); outline: none; font-size: 1rem; color: var(--ink); transition: border-color .3s, box-shadow .3s; }
.f textarea { min-height: 140px; resize: vertical; }
.f input:focus, .f textarea:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(28, 74, 51, .12); }
.f.bad input, .f.bad textarea { border-color: var(--tomato); }
.status { grid-column: 1 / -1; padding: 14px 16px; border-radius: 14px; background: rgba(28, 74, 51, .1); color: var(--green); }
.fine-s { font: 400 .76rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- footer ---------- */
.ft { background: var(--forest); color: var(--lt); padding: clamp(80px, 9vw, 130px) 0 30px; overflow: hidden; }
.ft .top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.ft .brand { padding: 0; }
.ft p { color: var(--lt-2); max-width: 28em; margin-top: 22px; font-size: .96rem; }
.ft h4 { font: 400 .74rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-l); margin-bottom: 20px; }
.ft li + li { margin-top: 10px; }
.ft a { color: var(--lt-2); transition: color .3s; }
.ft a:hover { color: var(--lt); }
.ft .motto { margin: clamp(60px, 8vw, 110px) 0 28px; text-align: center; font: 400 clamp(2.4rem, .8rem + 7vw, 7.6rem)/1 var(--serif); letter-spacing: -.03em; color: rgba(244, 238, 226, .12); }
.ft .motto span { color: rgba(227, 190, 106, .4); }
.ft .bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 22px; border-top: 1px solid var(--hair-d); font-size: .84rem; color: var(--lt-3); }

/* ---------- responsive ---------- */
@media (max-width: 1150px) {
  .caps { display: none; }
  .mb { display: grid; }
  .hd .join { display: none; }
  .ft .top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .facts > div:nth-child(n+3) { border-top: 1px solid var(--hair); }
}
@media (max-width: 860px) {
  .hd2, .split, .ct, .ih .copy .wrap, .ih.left .copy .wrap { grid-template-columns: minmax(0, 1fr); }
  .hd2 .lede { justify-self: start; }
  .split.flip > :first-child { order: 0; }
  .tickets, .mates { grid-template-columns: minmax(0, 1fr); }
  .hero .shade { background: linear-gradient(0deg, rgba(12, 22, 16, .94) 22%, rgba(12, 22, 16, .45) 60%, rgba(12, 22, 16, .25)); }
  .hero .copy { justify-content: flex-end; padding-bottom: 150px; }
  .hero h1 { font-size: clamp(2.6rem, 1.3rem + 6.4vw, 4rem); }
  .ih.left .shade { background: linear-gradient(0deg, rgba(12, 22, 16, .92) 25%, rgba(12, 22, 16, .3) 65%); }
  .ih.left .copy { align-items: flex-end; padding-bottom: 60px; }
  .ih .pill { display: none; }
  .pin .shade { background: linear-gradient(0deg, rgba(12, 22, 16, .92) 20%, rgba(12, 22, 16, .35) 60%, rgba(12, 22, 16, .15)); }
  .pin .copy { align-items: flex-end; padding-bottom: 90px; }
  .steps { margin-top: 20px; min-height: 160px; }
  .ct .l .stick { position: relative; height: 72vh; }
  .ct .r { padding-top: 60px; }
  .lead-row { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts > div, .facts > div + div { padding: 24px 0; border-left: 0; border-top: 1px solid var(--hair); }
  .form { grid-template-columns: minmax(0, 1fr); }
  .ft .top { grid-template-columns: minmax(0, 1fr); }
  .brand small { display: none; }
  .hero .chips { display: none; }
  .hero .copy { padding-bottom: 60px; }
  .menu { padding: 34px 22px; }
  .lead-row { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .rv, .js .split-in .c, .js .lead-in .dots, .js .plate-in { opacity: 1; transform: none; clip-path: none; }
}