/* Viva Events — the supply-side pages.
 *
 * ONE stylesheet for /suppliers and every category page under it
 * (/suppliers/restaurants, /suppliers/wineries, /suppliers/cafes). They are
 * meant to be the same page with different words; four inline copies of this
 * would have drifted the first time one of them was touched.
 *
 * Lifted verbatim out of get-bookings.html on 2026-09-07 — no rules changed,
 * so /suppliers renders exactly as it did inline.
 */
/* Viva Events — EA landing, direction 2b "Ink" — v20260904a
   Tokens are the planner's, inverted: this screen uses --ink as its ground so
   the demo card reads as paper on top of it. She moves between this page and
   /plan in one session, so the two must feel like one product. */
:root {
    --paper:#FAF4EC; --surface:#FFFDF9; --sunken:#FAF7F1;
    --ink:#241F1A; --ink-2:#554D45; --muted:#8C8378;
    --green:#1F5E45; --green-h:#174935; --terra:#B4531F;
    --near-black:#131110; --card-dark:#2E2823;
    --mint:#9CC5B1; --warm-grey:#D9CFC2; --line-dark:rgba(250,244,236,.14);
    --gutter:56px; --wrap:1240px;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
    background:var(--ink); color:var(--paper);
    font:400 16px/1.55 "Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.dsp { font-family:"Bricolage Grotesque",Georgia,serif; font-weight:500; letter-spacing:-.025em; }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }
a { color:inherit; }

/* ── Nav ─────────────────────────────────────────────────────────── */
.nav { position:sticky; top:0; z-index:40; padding:16px 16px 0; }
.nav-in {
    max-width:var(--wrap); margin:0 auto; background:var(--near-black);
    border-radius:999px; padding:12px 14px 12px 26px;
    display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.logo { font:600 22px "Bricolage Grotesque",serif; letter-spacing:-.02em; text-decoration:none; color:var(--paper); }
.nav-links { display:flex; align-items:center; gap:26px; }
/* Scoped away from the CTA: `.nav-links a` scores (0,1,1) and beat
   `.btn-light`'s (0,1,0), painting warm grey on a paper-coloured pill — the
   button was there and unreadable. Same shape as the sheet's blank-pill bug. */
.nav-links a:not(.btn) { font-size:14px; color:var(--warm-grey); text-decoration:none; }
.nav-links a:not(.btn):hover { color:var(--paper); }
.btn {
    font:600 16px "Public Sans",sans-serif; border:0; border-radius:999px;
    padding:16px 26px; cursor:pointer; text-decoration:none;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn-light { background:var(--paper); color:var(--ink); }
.btn-light:hover { background:#fff; }
.btn-outline { background:transparent; color:var(--paper); border:1.5px solid var(--paper); padding:14.5px 24.5px; }
.btn-outline:hover { background:rgba(250,244,236,.08); }
.btn-nav { font-size:14px; padding:10px 18px; }

/* ── Hero ────────────────────────────────────────────────────────── */
.hero { padding:96px var(--gutter) 80px; }
.hero-in { max-width:var(--wrap); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
/* Says what the site IS. The rotating line below it is charming but it names a
   REQUEST, not a service — someone landing cold could read the whole hero and
   still not know what is on offer. */
.kicker { font:600 15px "Public Sans",sans-serif; letter-spacing:.02em; color:var(--mint); margin:0 0 14px; }
.h1 { font:500 80px/1 "Bricolage Grotesque",serif; letter-spacing:-.035em; margin:0 0 26px; }
/* The rotating line is a fixed-height block: without it every cycle nudges the
   whole hero down by a few pixels, which reads as the page twitching. */
.rot { display:block; color:var(--mint); min-height:1em; }
.rot span { display:inline-block; animation:rise .5s ease-out; }
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.hero-body { font-size:19px; line-height:1.55; color:var(--warm-grey); max-width:460px; margin:0 0 30px; }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.hero-micro { font-size:14px; color:var(--muted); margin:0; }

/* ── The demo card — paper on ink ────────────────────────────────── */
.demo {
    background:var(--surface); color:var(--ink); border-radius:24px; padding:28px;
    box-shadow:0 40px 80px -30px rgba(0,0,0,.6);
}
.demo-l { font:600 12px "Public Sans",sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:10px; }
.demo textarea {
    width:100%; font:400 17px/1.5 "Public Sans",sans-serif; padding:16px;
    background:var(--sunken); border:1px solid #DDD5C9; border-radius:12px;
    color:var(--ink); resize:vertical; min-height:104px;
}
.demo textarea:focus { outline:2px solid var(--green); outline-offset:1px; border-color:var(--green); }
.chips { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 16px; }
.chip {
    font:400 12px "Public Sans",sans-serif; padding:7px 12px; border-radius:999px;
    border:1px solid #DDD5C9; background:none; color:var(--ink-2); cursor:pointer; text-align:left;
}
.chip:hover { border-color:var(--green); color:var(--green); }
.demo-go { width:100%; background:var(--green); color:#fff; border:0; border-radius:12px; padding:16px; font:600 16px "Public Sans",sans-serif; cursor:pointer; }
.demo-go:hover { background:var(--green-h); }
.demo-go:disabled { opacity:.6; cursor:default; }
.demo-foot { font-size:12px; color:var(--muted); text-align:center; margin:14px 0 0; }
.est { border-top:1px dashed #DDD5C9; margin-top:20px; padding-top:20px; }
.est-l { font-size:13px; color:var(--muted); margin:0 0 6px; }
.est-fig { font:500 44px "Bricolage Grotesque",serif; letter-spacing:-.025em; color:var(--green); margin:0 0 4px; }
.est-sub { font-size:13px; color:var(--ink-2); margin:0 0 16px; }
.est-lines { list-style:none; padding:0; margin:0 0 18px; }
.est-lines li { display:flex; justify-content:space-between; gap:16px; font-size:13px; padding:6px 0; border-bottom:1px solid #F0EAE0; }
.est-lines li:last-child { border-bottom:0; }
.est-lines .k { color:var(--ink-2); }
.est-lines .v { color:var(--ink); font-variant-numeric:tabular-nums; }
.btn-green-out { width:100%; background:transparent; color:var(--green); border:1.5px solid var(--green); border-radius:12px; padding:14.5px; font:600 16px "Public Sans",sans-serif; cursor:pointer; text-decoration:none; display:block; text-align:center; }
.btn-green-out:hover { background:rgba(31,94,69,.06); }
.est-err { font-size:13px; color:var(--terra); margin:14px 0 0; }

/* ── Coverage strip (replaces the unearned trust strip) ──────────── */
.strip { padding:0 var(--gutter) 56px; text-align:center; }
.strip-l { font:600 12px "Public Sans",sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 18px; }
.strip-row { display:flex; flex-wrap:wrap; justify-content:center; gap:20px 44px; }
.strip-row span { font:600 22px "Bricolage Grotesque",serif; color:var(--warm-grey); letter-spacing:-.02em; }

/* ── Ticker ──────────────────────────────────────────────────────── */
.tick { border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); padding:26px 0 30px; }
.tick-l { font:600 12px "Public Sans",sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); text-align:center; margin:0 0 18px; }
.tick-vp { overflow:hidden; }
.tick-run { display:flex; gap:12px; width:max-content; animation:slide 60s linear infinite; }
@keyframes slide { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.tick-chip { background:var(--card-dark); border:1px solid rgba(250,244,236,.2); color:var(--warm-grey); font-size:15px; padding:11px 18px; border-radius:999px; white-space:nowrap; }
/* Motion that never stops is a problem for some readers, and this one runs the
   full height of the page for as long as it is open. */
@media (prefers-reduced-motion:reduce) { .tick-run { animation:none; flex-wrap:wrap; width:auto; justify-content:center; } }

/* ── Sections ────────────────────────────────────────────────────── */
.sec { padding:88px var(--gutter); }
.h2 { font:500 60px/1.05 "Bricolage Grotesque",serif; letter-spacing:-.03em; margin:0 0 40px; max-width:900px; }
.h2.center { text-align:center; margin-left:auto; margin-right:auto; }
.grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

/* The four things. Photo band on top with the name sitting in a gradient that
   fades into the card, then the copy below — rather than stacking four pieces
   of text over an image, which at this card width is unreadable. */
.ask { background:var(--near-black); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; }
.ask-img { position:relative; height:200px; flex-shrink:0; overflow:hidden; }
.ask-img img { width:100%; height:100%; object-fit:cover; display:block; }
.ask-img::after {
    content:""; position:absolute; inset:0;
    background:linear-gradient(to top, var(--near-black) 6%, rgba(19,17,16,.25) 55%, transparent 100%);
}
.ask-n {
    position:absolute; left:22px; right:22px; bottom:16px; z-index:1;
    font:500 26px "Bricolage Grotesque",serif; letter-spacing:-.02em; margin:0; color:var(--paper);
}
.ask-body { padding:18px 22px 24px; display:flex; flex-direction:column; flex:1; }
.ask-k { font:600 11px "Public Sans",sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--mint); margin:0 0 10px; }
.ask-d { font-size:14px; color:var(--warm-grey); margin:0 0 16px; }
.ask-eg { font-size:14px; line-height:1.5; color:var(--paper); background:var(--card-dark); border-radius:12px; padding:14px; margin:0 0 auto; }
.ask-p { font-size:12px; color:var(--muted); margin:16px 0 0; }

.beat { background:var(--card-dark); border-radius:20px; padding:28px; display:flex; flex-direction:column; }
.beat-w { font:600 12px "Public Sans",sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 10px; }
.beat-t { font:500 34px "Bricolage Grotesque",serif; letter-spacing:-.025em; margin:0 0 12px; }
.beat-b { font-size:15px; color:var(--warm-grey); margin:0; }

.promise { list-style:none; padding:0; margin:0; max-width:820px; }
.promise li { display:flex; gap:18px; padding:18px 0; border-bottom:1px solid var(--line-dark); font-size:17px; color:var(--warm-grey); }
.promise li:last-child { border-bottom:0; }
.promise .n { font:500 20px "Bricolage Grotesque",serif; color:var(--mint); min-width:28px; }

.where { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.where-c { background:var(--near-black); border-radius:20px; padding:26px; }
.where-n { font:500 22px "Bricolage Grotesque",serif; margin:0 0 6px; }
.where-m { font-size:13px; color:var(--warm-grey); margin:0 0 14px; }
.where-t { display:inline-block; font-size:12px; background:rgba(250,244,236,.14); border-radius:999px; padding:5px 11px; color:var(--paper); }
.where-cap { text-align:center; font-size:15px; color:var(--muted); margin:36px auto 0; max-width:640px; }

.close { padding:0 var(--gutter) 96px; position:relative; }
.close-bg { position:absolute; inset:0 0 96px; overflow:hidden; border-radius:28px; margin:0 var(--gutter); }
.close-bg img { width:100%; height:100%; object-fit:cover; display:block; }
.close-bg::after { content:""; position:absolute; inset:0; background:rgba(19,17,16,.72); }
.close-card { position:relative; max-width:1000px; margin:0 auto; }
.close-card { background:var(--near-black); border-radius:28px; padding:64px 56px; text-align:center; max-width:var(--wrap); margin:0 auto; }
.close-h { font:500 64px/1.05 "Bricolage Grotesque",serif; letter-spacing:-.03em; margin:0 0 28px; }
.close-cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:16px; }
/* ── Supplier signup ─────────────────────────────────────────────────────
   Lives on the dark close-card, so the fields are drawn as light-on-dark
   rather than dropped into a white panel -- a white form here would read as
   a different site pasted onto the end of this one. */
.join-sub { font-size:17px; line-height:1.5; color:var(--warm-grey); max-width:520px; margin:-12px auto 30px; }
.join { max-width:620px; margin:0 auto; text-align:left; }
.join-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:22px; }
.fld { display:flex; flex-direction:column; gap:7px; }
.fld--wide { grid-column:1 / -1; }
.fld > span { font-size:13px; font-weight:600; letter-spacing:.01em; color:var(--warm-grey); }
.fld > span i { font-style:normal; font-weight:400; color:var(--muted); }
.fld input, .fld select {
    font:inherit; font-size:16px;           /* 16px: anything less zooms iOS on focus */
    width:100%; box-sizing:border-box; padding:13px 14px;
    background:rgba(250,244,236,.06); color:var(--paper);
    border:1.5px solid var(--line-dark); border-radius:12px;
    -webkit-appearance:none; appearance:none;
}
.fld select {
    /* Own chevron, since appearance:none removes the native one and a select
       with no affordance reads as a dead text box. */
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23D9CFC2' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
}
.fld select option { background:var(--near-black); color:var(--paper); }
.fld input::placeholder { color:var(--muted); }
.fld input:focus, .fld select:focus { outline:none; border-color:var(--paper); background:rgba(250,244,236,.1); }
.fld input:disabled, .fld select:disabled { opacity:.5; }
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
/* The assessment. Radios and checkboxes are drawn from scratch: a native
   control on this ground renders as a white box the browser paints, which is
   the one thing a dark form cannot absorb. Styles live here rather than being
   inherited, because this page loads no stylesheet of its own. */
.q { grid-column:1 / -1; }
.q-l { display:block; font-size:15px; font-weight:600; color:var(--paper); margin:0 0 12px; }
.q-l i { font-style:normal; font-weight:400; color:var(--muted); }
.opts { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.opt {
    display:flex; align-items:flex-start; gap:11px; padding:12px 14px;
    border:1.5px solid var(--line-dark); border-radius:12px;
    background:rgba(250,244,236,.04); cursor:pointer;
    font-size:15px; line-height:1.4; color:var(--warm-grey);
}
.opt:hover { border-color:rgba(250,244,236,.32); color:var(--paper); }
.opt:has(input:checked) { border-color:var(--mint); color:var(--paper); background:rgba(156,197,177,.1); }
.opt input {
    -webkit-appearance:none; appearance:none; margin:1px 0 0; flex-shrink:0;
    width:18px; height:18px; border:1.5px solid var(--warm-grey);
    background:transparent; cursor:pointer;
}
.opt input[type=radio] { border-radius:50%; }
.opt input[type=checkbox] { border-radius:5px; }
/* One rule for both: filling the box and insetting the ground leaves a dot in
   the circle and a square in the box, with no glyph to load or align. */
.opt input:checked { background:var(--mint); border-color:var(--mint); box-shadow:inset 0 0 0 3.5px var(--near-black); }
.opt input:focus-visible { outline:2px solid var(--paper); outline-offset:2px; }
.opt input:disabled { opacity:.5; cursor:default; }
.join-go { width:100%; justify-content:center; font-size:17px; padding:17px 24px; }
.join-go[disabled] { opacity:.6; cursor:default; }
.join-note { font-size:14px; line-height:1.5; color:var(--muted); margin:14px 0 0; text-align:center; }
.join-note.is-err { color:#F0B8A8; }
.join-alt { color:var(--warm-grey); margin-top:26px; }
.join-alt a { color:var(--warm-grey); }
.join-done { max-width:520px; margin:0 auto; }
.join-done p { font-size:18px; line-height:1.55; color:var(--warm-grey); margin:0 0 10px; }
.join-done strong { color:var(--paper); font-weight:600; }
@media (max-width:640px) {
    .join-grid { grid-template-columns:1fr; }
    .opts { grid-template-columns:1fr; }
}

/* ── Credibility strip: where we work, and who this is for ───────── */
.strip-cats { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:26px auto 0; max-width:900px; }
.strip-cat {
    font-size:14px; color:var(--warm-grey); background:var(--card-dark);
    border:1px solid var(--line-dark); border-radius:999px; padding:8px 15px;
}
/* Three of these chips are links to a trade page and the rest are plain spans.
   Without this the links arrive underlined and in the UA's link colour, and the
   row reads as broken rather than as a mix. Same chip, plus a hover. */
a.strip-cat {
    display:inline-block; text-decoration:none;
    transition:color .15s ease, border-color .15s ease, background .15s ease;
}
a.strip-cat:hover, a.strip-cat:focus-visible {
    color:var(--paper); background:var(--near-black); border-color:var(--mint);
}
a.strip-cat:focus-visible { outline:2px solid var(--mint); outline-offset:2px; }

/* ── "We meet you where you are" — the example under each mode ────── */
.beat-eg { font-size:14px; line-height:1.5; color:var(--paper); background:var(--near-black); border-radius:12px; padding:13px 14px; margin:18px 0 0; }
/* Pushes the example to the foot of the card so the three line up across the row. */
.beat-b { margin-bottom:auto; }

/* ── How Viva grows the channel — five steps ─────────────────────── */
.steps { list-style:none; padding:0; margin:0; max-width:900px; }
.steps li { display:flex; gap:20px; padding:22px 0; border-bottom:1px solid var(--line-dark); }
.steps li:last-child { border-bottom:0; }
.steps .n { font:500 20px "Bricolage Grotesque",serif; color:var(--mint); min-width:28px; padding-top:1px; }
.steps h3 { font:600 17px "Public Sans",sans-serif; color:var(--paper); margin:0 0 6px; }
.steps p { font-size:16px; line-height:1.6; color:var(--warm-grey); margin:0; max-width:62ch; }

/* ── Works with what they already run ────────────────────────────── */
.sys-row { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 32px; }
.sys-chip {
    font:600 15px "Public Sans",sans-serif; color:var(--paper); background:var(--near-black);
    border:1px solid rgba(250,244,236,.2); border-radius:999px; padding:10px 18px;
}

/* ── The relationship flywheel ───────────────────────────────────── */
.fly { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.fly-c { background:var(--near-black); border-radius:20px; padding:26px; }
.fly-n { font:500 20px "Bricolage Grotesque",serif; color:var(--mint); margin:0 0 12px; }
.fly-t { font:500 22px "Bricolage Grotesque",serif; letter-spacing:-.02em; margin:0 0 8px; }
.fly-b { font-size:14px; line-height:1.55; color:var(--warm-grey); margin:0; }

/* ── The commercial model ────────────────────────────────────────── */
.money-fig { font:500 92px/1 "Bricolage Grotesque",serif; letter-spacing:-.04em; color:var(--mint); margin:0 0 10px; }
/* The figure now carries words, not a number -- "Rev share" at 92px overflows
   the column on anything narrow, so the word variant sizes down. */
.money-fig-word { font-size:64px; }
.money-cap { font-size:17px; color:var(--warm-grey); margin:0 0 32px; max-width:52ch; }
.money-list { list-style:none; padding:0; margin:0; max-width:70ch; }
.money-list li { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line-dark); font-size:16px; line-height:1.55; color:var(--warm-grey); }
.money-list li:last-child { border-bottom:0; }
.money-list .arrow { color:var(--mint); flex-shrink:0; }
.money-list strong { color:var(--paper); font-weight:600; }

.foot { border-top:1px solid var(--line-dark); padding:72px var(--gutter) 0; }
.foot-in { max-width:var(--wrap); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.foot-l { font:600 12px "Public Sans",sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--mint); margin:0 0 16px; }
.foot ul { list-style:none; padding:0; margin:0; }
.foot li { margin-bottom:10px; }
.foot a, .foot li { font-size:15px; color:var(--warm-grey); text-decoration:none; }
.foot a:hover { color:var(--paper); }
.foot-legal { font-size:13px; color:var(--muted); margin-top:16px; }
.sub-row { display:flex; background:var(--card-dark); border-radius:999px; padding:5px 5px 5px 18px; max-width:340px; }
.sub-row input { flex:1; background:none; border:0; color:var(--paper); font:400 15px "Public Sans",sans-serif; outline:none; min-width:0; }
.sub-row input::placeholder { color:var(--muted); }
.sub-row button { background:var(--paper); color:var(--ink); border:0; border-radius:999px; padding:10px 18px; font:600 14px "Public Sans",sans-serif; cursor:pointer; }
.foot-band {
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    max-width:var(--wrap); margin:56px auto 0; padding:22px 26px;
    background:var(--card-dark); border-radius:16px; text-decoration:none;
    color:var(--warm-grey); font-size:16px;
}
.foot-band:hover { background:#37302A; color:var(--paper); }
.foot-band strong { color:var(--paper); font-weight:600; }
.foot-band-go { font-size:20px; color:var(--mint); flex-shrink:0; }
@media (max-width:560px) { .foot-band { flex-direction:column; align-items:flex-start; gap:10px; } }
/* Every in-page link lands under the sticky nav without this — jumping to
   #faq put the heading behind the bar. */
.sec, .hero, .close { scroll-margin-top:92px; }
/* The "why" — the argument under the product. Given its own ground so it does
   not read as another feature block. */
.why { background:var(--card-dark); border-radius:24px; padding:52px 48px; }
.why-k { font:600 11px "Public Sans",sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--mint); margin:0 0 16px; }
.why-lede { font:500 30px/1.3 "Bricolage Grotesque",serif; letter-spacing:-.02em; color:var(--paper); margin:0 0 34px; max-width:24ch; }
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.why-c h3 { font:600 15px "Public Sans",sans-serif; color:var(--paper); margin:0 0 8px; }
.why-c p { font-size:15px; line-height:1.6; color:var(--warm-grey); margin:0; }
.why-close { margin:34px 0 0; padding-top:26px; border-top:1px solid var(--line-dark);
             font-size:17px; line-height:1.6; color:var(--paper); max-width:62ch; }
@media (max-width:860px) {
    .why { padding:34px 24px; }
    .why-lede { font-size:24px; }
    .why-grid { grid-template-columns:1fr; gap:22px; }
}
.faq { max-width:820px; }
.faq-i { border-bottom:1px solid var(--line-dark); }
.faq-q { font:500 20px "Bricolage Grotesque",serif; letter-spacing:-.015em; color:var(--paper);
         padding:20px 0; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faq-q::-webkit-details-marker { display:none; }
.faq-q::after { content:"+"; color:var(--mint); font-size:24px; line-height:1; flex-shrink:0; }
.faq-i[open] .faq-q::after { content:"\2013"; }
.faq-a { font-size:16px; line-height:1.6; color:var(--warm-grey); margin:0 0 22px; max-width:70ch; }
.wordmark { font:600 320px "Bricolage Grotesque",serif; color:var(--card-dark); letter-spacing:-.04em; line-height:.75; margin:40px 0 0; height:150px; overflow:hidden; user-select:none; }

@media (max-width:1000px) {
    :root { --gutter:24px; }
    .hero-in { grid-template-columns:1fr; gap:40px; }
    .h1 { font-size:clamp(44px,10vw,64px); }
    .h2 { font-size:clamp(32px,7vw,44px); }
    .close-h { font-size:clamp(34px,8vw,48px); }
    .grid4, .where, .fly { grid-template-columns:repeat(2,1fr); }
    .grid3 { grid-template-columns:1fr; }
    .money-fig { font-size:64px; }
    .money-fig-word { font-size:44px; }
    .foot-in { grid-template-columns:1fr 1fr; }
    .wordmark { font-size:150px; height:80px; }
    /* Hide the section links, KEEP the CTA — hiding everything left the nav as
       an empty dark pill, which reads as a broken component rather than a
       deliberately lean bar. */
    /* Hide the section links, KEEP the CTA. Hiding everything left the nav as
       an empty dark pill, which reads as a broken component rather than a
       deliberately lean bar. */
    .nav-sec { display:none; }
}
@media (max-width:560px) {
    .hero { padding:56px var(--gutter) 56px; }
    .sec { padding:60px var(--gutter); }
    .grid4, .where, .fly { grid-template-columns:1fr; }
    .foot-in { grid-template-columns:1fr; }
    .close-card { padding:44px 24px; }
    .btn { width:100%; }
}