/* BIP — Miami Editorial. Forest + cream two-tone, stitched leather cards.
   Deliberately unlike neal.mfautomations.ai (obsidian/platinum, Cormorant/Inter Tight/Plex Mono, hairline grids).
   TYPE (revised 2026-09-26, Patrick: "the font is kind of trippy with the green and the outline of gold. I
   want something more visually appealing. You get to choose.") — the old hollow/transparent-fill + gold-stroke
   display type is retired site-wide. Decided by a rendered three-way bake-off; see DESIGN-TYPE.md for the
   winner ("Miami Editorial" — Newsreader) and why over the runners-up. Display is now solid, high-contrast
   Newsreader (a big editorial serif with a true italic, used for the one-word gold emphasis device and the
   About-page drop cap) — reads like a premium magazine headline, not a fashion-mag hollow effect, and shares
   nothing with Caviar Pixels' Cormorant Garamond. Gold moved back to being an accent beside type (hairlines,
   stamps, one italic emphasis word, underlines), never the letterforms themselves. */
:root{
  --forest:#0F3D2E; --forest-deep:#0A2B20; --emerald:#17614A;
  --cream:#F4EAD5; --tan:#C08A52; --ink:#13261E;
  --gold:#D6AE45; --gold-deep:#9C7A2B; --gold-soft:#E9CD86;
  /* --gold-ink: gold for SMALL text (stamps/eyebrows/card-eyebrows) on the cream field. --gold-deep alone
     measures 3.36:1 on --cream — fails AA at the 11-13px sizes those labels actually render at. This
     darker bronze measures 4.90:1. Never use --gold-ink for large display type; it's a small-label fix only. */
  --gold-ink:#7C6122;
  --flamingo:#FF5FA2; --aqua:#22D3C5; --sunset:#FF8C42;
  --radius-card:22px; --radius-pill:999px;
  --gutter:16px; --maxw:1180px;
  --shadow-deep:0 18px 50px -20px rgba(0,0,0,.55);
  --font-display:'Newsreader',Georgia,serif;
  --font-stamp:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-body:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-script:'Yellowtail',cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--forest); color:var(--cream);
  font-family:var(--font-body); font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}
section{padding:clamp(56px,9vw,108px) 0; position:relative}
.on-cream{background:var(--cream); color:var(--ink)}
.on-forest{background:var(--forest); color:var(--cream)}
.on-deep{background:var(--forest-deep); color:var(--cream)}

/* ---------- type ---------- */
/* Solid, high-contrast editorial display type (Newsreader). Mixed case, tight tracking/leading —
   no outline, no stroke, no echo shadow needed for legibility or for personality; reads as a
   confident magazine headline instead of the retired "trippy" hollow-gold-outline effect. */
h1,h2,h3,.display{
  font-family:var(--font-display); font-weight:600; text-transform:none;
  letter-spacing:-.01em; line-height:1.05; margin:0 0 .4em;
}
h1{font-size:clamp(40px,7.2vw,92px); letter-spacing:-.015em}
h2{font-size:clamp(28px,5vw,52px)}
h3{font-size:clamp(19px,2.6vw,26px); letter-spacing:-.005em}
p{margin:0 0 1em}
.lede{font-size:clamp(17px,2vw,21px); font-weight:300; max-width:640px; font-family:var(--font-body)}
/* One emphasised word per heading, in italic gold — the accent that stands in for the retired
   hollow treatment. Never the whole heading: the brief calls for gold as a THIN accent beside solid
   type. Scoped to headings/lede only, never a bare `em` — a stray <em> in body copy (About Neal's
   markdown) stays plain italic at the surrounding text colour; gold at body-text size risks failing AA. */
h1 em,h2 em,h3 em,.display em,.lede em,.accent{
  font-style:italic; font-weight:500; color:var(--gold); font-family:var(--font-display);
}
.on-cream h1 em,.on-cream h2 em,.on-cream h3 em,.on-cream .display em,.on-cream .lede em,.on-cream .accent{
  color:var(--gold-deep);
}
.stamp{
  display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-stamp); font-weight:600;
  font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
  padding:.55em 1.1em; border:1px solid var(--gold-deep); border-radius:var(--radius-pill);
  background:rgba(214,174,69,.08);
}
/* --gold on --cream measures 3.36:1 at this 12px/600 weight (fails AA) — on-cream stamps switch to
   --gold-ink (4.90:1). */
.on-cream .stamp{color:var(--gold-ink); border-color:var(--gold-ink)}
.script{font-family:var(--font-script); font-weight:400; text-transform:none; letter-spacing:0;
  color:var(--flamingo); text-shadow:0 0 18px rgba(255,95,162,.55), 0 0 40px rgba(255,95,162,.25);
  font-size:1.5em; display:inline-block;}
@keyframes flicker{0%,100%{opacity:1}45%{opacity:.82}50%{opacity:1}52%{opacity:.6}55%{opacity:1}}
.script.flicker{animation:flicker 4.5s ease-in-out 1}

/* .display-h — solid display headings (formerly .hollow: transparent fill + gold outline, retired
   2026-09-26). Solid, high-contrast, no stroke, no echo shadow. Gold shows up beside the words as a
   short hairline rule (::after below, standing in for a hand-placed .head-rule element on every
   heading — automatic and markup-risk-free across all ~15 call sites) and, on a few headlines, as
   the one italic emphasis word above — never as the letterforms themselves. */
.display-h{ color:var(--cream); position:relative; }
.on-cream .display-h{ color:var(--ink); }
/* Left-aligned by default (matching left-aligned hero/body headings); centered inside .section-head
   or .center, which is where the brief's "centered SOLID section heads" apply. */
.display-h::after{
  content:""; display:block; width:56px; height:2px; border-radius:2px; margin:.4em 0 0;
  background:var(--gold);
}
.on-cream .display-h::after{ background:var(--gold-deep); }
.section-head .display-h::after, .center .display-h::after{ margin-left:auto; margin-right:auto; }

/* Drop cap for the About Neal long-form page only — the one flourish this direction spends its gold
   on besides hairlines/stamps/emphasis. Float-based so it works with no JS or initial-letter support;
   scoped to .dropcap-block so ordinary paragraphs elsewhere are unaffected. */
.dropcap-block p:first-of-type::first-letter{
  font-family:var(--font-display); font-style:italic; font-weight:600; color:var(--gold-deep);
  float:left; line-height:.82; font-size:3.6em; padding:.03em .08em 0 0;
}

.section-head{text-align:center; max-width:760px; margin:0 auto clamp(36px,5vw,64px)}
.section-head .stamp{margin-bottom:0}
.section-head p{font-size:17px; opacity:.85; max-width:520px; margin:14px auto 0; font-family:var(--font-body)}
.on-cream .section-head p{opacity:.72}

/* ---------- sunset arc (hero motion) ---------- */
/* .arc-clip wraps .sunset-arc wherever hero_arc() is used: the arc bleeds ~180% width by design
   (Miami After-Hours full-bleed glow) but must never expand the page's own scrollable width, so it
   is clipped to its section's box here instead of requiring every calling section to opt in. */
.arc-clip{position:absolute; inset:0; overflow:clip; pointer-events:none; z-index:0}
.sunset-arc{position:absolute; left:50%; bottom:-20%; width:180%; max-width:1600px; height:60%;
  transform:translateX(-50%); pointer-events:none; z-index:0; opacity:.9;
  background:radial-gradient(ellipse at 50% 100%, var(--arc-a,var(--flamingo)) 0%, var(--arc-b,var(--sunset)) 35%, transparent 70%);
  filter:blur(40px); animation:arcshift 16s ease-in-out infinite;}
@keyframes arcshift{
  0%{--arc-a:var(--flamingo); --arc-b:var(--sunset)}
  33%{--arc-a:var(--sunset); --arc-b:var(--gold)}
  66%{--arc-a:var(--gold); --arc-b:var(--aqua)}
  100%{--arc-a:var(--flamingo); --arc-b:var(--sunset)}
}
.horizon-line{position:absolute; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold-soft),transparent); opacity:.5; z-index:0}
@media (prefers-reduced-motion:reduce){ .sunset-arc{animation:none} .script.flicker{animation:none} }

/* ---------- leather grain (subtle CSS noise) ---------- */
.grain{position:relative}
.grain::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em; cursor:pointer;
  font-family:var(--font-body); font-weight:600; font-size:15px; letter-spacing:.01em;
  padding:15px 30px; border-radius:var(--radius-pill); border:0; text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; position:relative; overflow:hidden;
}
.btn:active{transform:scale(.98)}
/* gold-soft -> gold-deep measured 3.79:1 with forest-deep text at the dark stop (fails AA). Both
   stops light (gold-soft -> gold) so the label clears 4.5:1 across the whole fill (7.25-9.82:1). */
.btn-primary{background:linear-gradient(135deg,var(--gold-soft),var(--gold)); color:var(--forest-deep); box-shadow:0 10px 30px -12px rgba(214,174,69,.55)}
.btn-primary:hover{filter:brightness(1.06); box-shadow:0 14px 34px -10px rgba(214,174,69,.7)}
.btn-primary::before{content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-20deg);}
.btn-secondary{background:transparent; color:var(--gold); border:1.5px solid var(--gold)}
.btn-secondary:hover{box-shadow:0 0 0 6px rgba(255,95,162,.14); border-color:var(--flamingo); color:var(--flamingo)}
/* --gold-deep text on --cream measured 3.36:1 (fails AA at this button's 15px/600 weight) — border
   stays gold-deep, label goes ink so the button clears 4.5:1 on the cream field. */
.on-cream .btn-secondary{color:var(--ink); border-color:var(--gold-deep)}
.btn-block{width:100%}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.btn-sm{padding:10px 20px; font-size:13px}

/* ---------- cards (stitched leather) ---------- */
.card{
  border-radius:var(--radius-card); padding:28px; position:relative; box-shadow:var(--shadow-deep);
}
.card::before{
  content:""; position:absolute; inset:8px; border-radius:calc(var(--radius-card) - 8px);
  border:1.5px dashed var(--gold); opacity:.55; pointer-events:none;
}
.card.on-cream, .on-forest .card{background:var(--cream); color:var(--ink)}
.card.on-forest, .on-cream .card{background:var(--forest); color:var(--cream)}
.on-cream .card::before, .card.on-cream::before{border-color:var(--gold-deep)}
.card h3{margin-bottom:.35em}
.card .card-eyebrow{font-family:var(--font-stamp); font-size:11px; letter-spacing:.24em; color:var(--gold); text-transform:uppercase; display:block; margin-bottom:10px}
/* Same rule as .card.on-cream/.on-forest .card above: whichever combination puts the card on a
   cream field needs the AA-safe --gold-ink (4.90:1), not the bright --gold tuned for dark fields
   (3.36:1 on cream at this 11px size). */
.card.on-cream .card-eyebrow, .on-forest .card .card-eyebrow{color:var(--gold-ink)}

.grid{display:grid; gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.photo-card{border-radius:var(--radius-card); overflow:hidden; position:relative; box-shadow:var(--shadow-deep)}
.photo-card img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}
.photo-card.wide img{aspect-ratio:16/9}
.photo-card .cap{position:absolute; left:0; right:0; bottom:0; padding:18px 20px; background:linear-gradient(0deg,rgba(10,43,32,.88),transparent)}

/* ---------- welcome video (home, "Hear it from Neal") ---------- */
/* A visible gold frame so the player reads as an unmissable, tappable video, not a stray image —
   Patrick asked where the welcome video was; the fix is discoverability, not just a working <video>. */
.video-frame{border-radius:24px; overflow:hidden; box-shadow:var(--shadow-deep); border:1.5px solid rgba(214,174,69,.45); position:relative}
.video-frame video{width:100%; display:block; background:var(--forest-deep)}

/* ---------- nav ---------- */
/* header.site-nav must NOT itself carry `backdrop-filter` (or `filter`/`transform`/`perspective`):
   any of those on an ancestor makes it the containing block for a `position:fixed` descendant —
   here, the mobile nav drawer below — which then sizes/positions itself against header's own
   ~64px-tall box instead of the viewport. That silently reproduced the "opened menu is only 64px
   tall" blocker even after the drawer markup was fixed. The blur is painted on a ::before behind
   the header's content instead, so header stays filter-free. */
header.site-nav{position:sticky; top:0; z-index:40; border-bottom:1px solid rgba(214,174,69,.22)}
header.site-nav::before{content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(15,61,46,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px var(--gutter); max-width:var(--maxw); margin:0 auto}
/* Solid italic wordmark with a thin gold underline — same "gold as a thin accent beside solid type"
   language as the rest of the page, in place of the retired transparent-fill + gold-stroke mark. */
.brandmark{font-family:var(--font-display); font-weight:600; font-style:italic; font-size:24px; letter-spacing:.01em;
  text-decoration:none; color:var(--cream); position:relative; padding-bottom:2px; border-bottom:2px solid var(--gold);}
.on-cream .brandmark{color:var(--ink)}
.nav-links{display:flex; gap:28px; align-items:center; list-style:none; margin:0; padding:0}
.nav-links a{text-decoration:none; font-size:14px; font-weight:500; color:var(--cream); opacity:.85}
.nav-links a:hover{opacity:1; color:var(--gold)}
.nav-cta{display:flex; gap:12px; align-items:center}
.nav-toggle{display:none; background:none; border:0; color:var(--cream); font-size:26px; cursor:pointer}
@media(max-width:860px){
  /* .nav-drawer (the <nav> wrapping #nav-links) is the fixed, viewport-bounded clipping box.
     .nav-links is what actually slides in/out INSIDE it. Without this split, translateX(100%)
     on a position:fixed box still paints a real 390px-wide box past the right edge of the
     viewport — invisible, but still counted in document.documentElement.scrollWidth, which is
     exactly what doubled scrollWidth on every page at mobile widths. Clipping via an ancestor
     whose own box never exceeds the viewport (inset:64px 0 0 0 == left:0;right:0) fixes that. */
  .nav-drawer{position:fixed; inset:64px 0 0 0; overflow:hidden; pointer-events:none; z-index:39}
  .nav-links{position:relative; height:100%; background:var(--forest-deep); flex-direction:column; padding:32px 24px;
    transform:translateX(100%); transition:transform .25s ease; overflow-y:auto; pointer-events:auto}
  .nav-links.open{transform:translateX(0)}
  .nav-links a{font-size:20px}
  .nav-toggle{display:block}
}

/* ---------- footer ---------- */
footer.site-footer{background:var(--forest-deep); padding:56px 0 28px; border-top:1px solid rgba(214,174,69,.2)}
.footer-grid{display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between}
.footer-group{display:flex; flex-direction:column; gap:14px}
.footer-group-title{font-family:var(--font-stamp); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); opacity:.85}
.footer-links{display:flex; flex-direction:column; gap:10px; list-style:none; padding:0; margin:0}
.footer-links a{text-decoration:none; font-size:13px; opacity:.7}
.footer-links a:hover{opacity:1; color:var(--gold)}
.footer-fine{font-size:12px; opacity:.5; margin-top:28px}

/* ---------- forms ---------- */
label{display:block; font-size:13px; font-weight:600; margin-bottom:6px; letter-spacing:.01em}
.field-help{font-size:12px; opacity:.65; margin-top:6px}
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],input[type=date],
textarea,select{
  width:100%; font-family:var(--font-body); font-size:15px; padding:13px 16px; border-radius:14px;
  border:1.5px solid rgba(214,174,69,.35); background:rgba(244,234,213,.06); color:inherit;
  outline:none; transition:border-color .15s ease, background .15s ease;
}
.on-cream input[type=text],.on-cream input[type=email],.on-cream input[type=tel],.on-cream input[type=url],
.on-cream input[type=number],.on-cream input[type=date],.on-cream textarea,.on-cream select{
  background:#fff; border-color:rgba(19,38,30,.18); color:var(--ink);
}
input:focus,textarea:focus,select:focus{border-color:var(--gold); box-shadow:0 0 0 4px rgba(214,174,69,.16)}
textarea{min-height:100px; resize:vertical}
.field{margin-bottom:20px}
.checkbox-row{display:flex; gap:10px; align-items:flex-start; font-size:14px; font-weight:400}
.checkbox-row input{width:auto; margin-top:3px}
.field-label{display:block; font-size:13px; font-weight:600; margin-bottom:6px; letter-spacing:.01em}
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.multi-options{display:flex; flex-wrap:wrap; gap:10px; border:0; margin:0; padding:0}
/* .chip / .scale-opt are real <button>s (siteqa F3_chips_not_keyboard) — reset the browser button chrome
   so they still look like the original pill/circle, and let color inherit so they don't render black-on-black. */
.chip,.scale-opt{font:inherit; color:inherit; background:none; -webkit-appearance:none; appearance:none}
.chip{border:1.5px solid rgba(214,174,69,.4); border-radius:var(--radius-pill); padding:9px 16px; font-size:14px; cursor:pointer; user-select:none}
.chip.selected{background:var(--gold); color:var(--forest-deep); border-color:var(--gold); font-weight:600}
.chip:focus-visible,.scale-opt:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.scale-row{display:flex; gap:10px}
.scale-opt{width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(214,174,69,.4); display:flex; align-items:center; justify-content:center; cursor:pointer}
.scale-opt.selected{background:var(--gold); color:var(--forest-deep); border-color:var(--gold); font-weight:700}
.error-text{color:var(--sunset); font-size:13px; margin-top:6px}
.form-msg{border-radius:14px; padding:14px 18px; font-size:14px; margin-top:16px}
.form-msg.ok{background:rgba(34,211,197,.15); color:var(--aqua); border:1px solid rgba(34,211,197,.4)}
.form-msg.err{background:rgba(255,140,66,.15); color:var(--sunset); border:1px solid rgba(255,140,66,.4)}

/* ---------- badges / steps ---------- */
.steps{display:flex; align-items:center; gap:0; margin-bottom:8px; flex-wrap:wrap}
.progress-track{height:8px; border-radius:99px; background:rgba(214,174,69,.18); overflow:hidden; margin:18px 0 8px}
.progress-fill{height:100%; background:linear-gradient(90deg,var(--flamingo),var(--gold)); border-radius:99px; transition:width .3s ease}
.progress-label{font-size:12px; font-family:var(--font-stamp); letter-spacing:.14em; text-transform:uppercase; opacity:.75}

/* ---------- track tiles ---------- */
.track-tile{border-radius:var(--radius-card); padding:26px; cursor:pointer; border:2px solid transparent; position:relative}
.track-tile.selected{border-color:var(--gold); box-shadow:0 0 0 4px rgba(214,174,69,.18)}

/* ---------- status pill ---------- */
.status-pill{display:inline-block; padding:5px 14px; border-radius:99px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase}
.status-draft{background:rgba(255,255,255,.12); color:var(--cream)}
.status-submitted{background:rgba(34,211,197,.18); color:var(--aqua)}
.status-building{background:rgba(255,140,66,.2); color:var(--sunset)}
.status-delivered{background:rgba(214,174,69,.22); color:var(--gold)}
.status-failed{background:rgba(255,95,162,.2); color:var(--flamingo)}

/* ---------- chat panel ---------- */
#bip-chat-launcher{position:fixed; right:20px; bottom:20px; z-index:80; width:60px; height:60px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold-deep)); border:0; box-shadow:0 12px 30px -8px rgba(0,0,0,.5);
  cursor:pointer; font-size:26px; display:flex; align-items:center; justify-content:center; color:var(--forest-deep)}
#bip-chat-panel{position:fixed; right:20px; bottom:92px; z-index:80; width:340px; max-width:calc(100vw - 32px);
  height:460px; max-height:70vh; background:var(--forest-deep); border-radius:20px; border:1.5px solid rgba(214,174,69,.35);
  box-shadow:var(--shadow-deep); display:none; flex-direction:column; overflow:hidden}
#bip-chat-panel.open{display:flex}
.chat-head{padding:14px 16px; border-bottom:1px solid rgba(214,174,69,.25); font-family:var(--font-stamp); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); display:flex; justify-content:space-between; align-items:center}
.chat-body{flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px}
.chat-msg{max-width:82%; padding:10px 14px; border-radius:16px; font-size:14px; line-height:1.45}
.chat-msg.user{align-self:flex-end; background:var(--gold); color:var(--forest-deep); border-bottom-right-radius:4px}
.chat-msg.maui{align-self:flex-start; background:rgba(244,234,213,.08); border:1px solid rgba(214,174,69,.25); border-bottom-left-radius:4px}
.chat-typing{align-self:flex-start; font-size:12px; opacity:.6; font-style:italic}
.chat-input-row{display:flex; gap:8px; padding:12px; border-top:1px solid rgba(214,174,69,.25)}
.chat-input-row input{flex:1; padding:10px 14px; font-size:14px}
.chat-input-row button{border:0; background:var(--gold); color:var(--forest-deep); border-radius:99px; padding:0 16px; font-weight:700; cursor:pointer}

/* ---------- misc ---------- */
.eyebrow{font-family:var(--font-stamp); font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold)}
.on-cream .eyebrow{color:var(--gold-ink)}
hr.stitch{border:0; border-top:1.5px dashed rgba(214,174,69,.4); margin:28px 0}
.kicker-list{list-style:none; padding:0; margin:0; display:grid; gap:16px}
.kicker-list li{display:flex; gap:14px; align-items:flex-start}
.kicker-num{font-family:var(--font-stamp); font-weight:700; color:var(--gold); font-size:20px; width:34px; flex:none}
.muted{opacity:.72}
.center{text-align:center}
.mt-0{margin-top:0} .mb-0{margin-bottom:0}
.skip-link{position:absolute; left:-999px; top:0; background:var(--gold); color:var(--forest-deep); padding:10px 16px; border-radius:8px; z-index:100}
.skip-link:focus{left:16px; top:16px}
:focus-visible{outline:2px solid var(--flamingo); outline-offset:2px}
/* ---------- /faq (main session) ---------- */
.faq-list{display:grid;gap:14px}
.faq-item{border-radius:20px;padding:4px 22px;background:rgba(244,234,213,.06);outline:1.5px dashed rgba(214,174,69,.55);outline-offset:-7px}
.on-cream .faq-item{background:#fff8ea;outline-color:rgba(156,122,43,.55)}
.faq-item summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;position:relative;font-weight:600;font-size:1.05rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:2px;top:14px;font-size:1.5rem;color:#D6AE45;line-height:1}
.faq-item[open] summary::after{content:"\2212"}
.faq-a{padding:0 0 18px}.faq-a p{margin:0;opacity:.9}

/* ---------- /for/<track> — track landing pages (main session) ---------- */
/* hero_arc()'s .horizon-line is fixed at top:42% inline, sized for a short one-line hero. The
   track hero is a tall two-column grid (3-line headline + image), so 42% lands mid-headline on
   desktop. Push it down to sit low behind the headline, matching the brief's intent, without
   touching the shared helper other pages rely on. Mobile stacks hero text above the image and
   the default position already clears the text, so this only applies at the two-column width. */
@media (min-width:861px){
  .tr-hero-section .horizon-line{top:auto!important; bottom:14%}
}
/* Track-switch pills: a touch more breathing room from the numbered list above them. */
.tr-switch{margin-top:30px}

/* ---------- home page only (fixer: home) ---------- */
/* At narrow widths a 2-line cream heading (e.g. "One questionnaire. / A whole business.") wraps
   tight enough that the site's default line-height:1.02 crowds the descenders. Loosen just this
   page's cream headings below the breakpoint where that wrap happens. */
@media (max-width:560px){
  .page-home .on-cream .display-h{ line-height:1.28; }
}
/* Deliverable cards: a small gold rivet/stud badge — no running index numerals (Caviar Pixels device). */
.page-home .deliverable-badge{
  display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  border-radius:50%; margin-bottom:12px;
  background:radial-gradient(circle at 34% 30%, var(--gold-soft), var(--gold-deep) 72%);
  box-shadow:0 2px 6px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.55);
}
.page-home .deliverable-badge::after{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--forest-deep);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45);
}
.page-home .card.on-cream:has(.deliverable-badge){display:flex; flex-direction:column; align-items:flex-start}
/* Home hero image gets a touch more presence + a faint gold edge, in keeping with the leather-goods frame. */
.page-home .hero-shot{border:1px solid rgba(214,174,69,.35)}
/* Slightly heavier lift on home's leather cards for a premium hover moment (respects reduced motion via existing rule). */
.page-home .card{transition:transform .22s ease, box-shadow .22s ease}
.page-home .card:hover{transform:translateY(-4px); box-shadow:0 22px 46px -18px rgba(0,0,0,.55)}
@media (prefers-reduced-motion:reduce){.page-home .card:hover{transform:none}}

/* ---------- forms & questionnaire — leather restyle (fixer: forms) ---------- */
/* Every text-like field gets a consistent warm cream fill + ink text + thin tan border regardless
   of the section it sits in (on-forest or on-cream), so a form always reads like a leather ledger
   insert instead of near-invisible dark-on-dark fields. Ancestor-qualified selectors are repeated so
   this beats the older .on-cream-scoped rule above on specificity, not just source order. */
input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number],
input[type=date], input[type=password], textarea, select,
.on-forest input[type=text], .on-forest input[type=email], .on-forest input[type=tel], .on-forest input[type=url],
.on-forest input[type=number], .on-forest input[type=date], .on-forest input[type=password], .on-forest textarea, .on-forest select,
.on-cream input[type=text], .on-cream input[type=email], .on-cream input[type=tel], .on-cream input[type=url],
.on-cream input[type=number], .on-cream input[type=date], .on-cream input[type=password], .on-cream textarea, .on-cream select{
  background:var(--cream); border:1.5px solid var(--tan); color:var(--ink);
}
input::placeholder, textarea::placeholder{color:rgba(19,38,30,.45)}
input:focus, textarea:focus, select:focus{border-color:var(--gold-deep); box-shadow:0 0 0 4px rgba(156,122,43,.24)}
/* Custom gold-deep chevron in place of the browser default, which is unreadable once the field is
   force-filled cream above (some browsers keep a light-on-light native arrow). */
select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path d='M1 1l6 6 6-6' fill='none' stroke='%239C7A2B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:44px; cursor:pointer;
}
/* Checkboxes (the questionnaire's per-question checkbox type, plus the SMS-consent boxes) get a
   bigger native box and a full-row tap target of at least 44px instead of a bare unstyled square. */
input[type=checkbox]{width:22px; height:22px; flex:none; accent-color:var(--gold-deep); cursor:pointer; margin-top:0}
.checkbox-row{
  display:flex; align-items:flex-start; gap:12px; cursor:pointer; min-height:44px; box-sizing:border-box;
  padding:11px 14px; border-radius:14px; border:1.5px solid rgba(214,174,69,.3); background:rgba(244,234,213,.06);
  transition:border-color .15s ease, background .15s ease;
}
.checkbox-row:hover{border-color:var(--gold-deep)}
.on-cream .checkbox-row{background:rgba(19,38,30,.04); border-color:rgba(156,122,43,.3)}
/* The SMS-consent row specifically: a warmer tan-tinted card so the one legally-load-bearing
   checkbox in the whole questionnaire doesn't look like every other optional field. */
.consent-row{background:rgba(214,174,69,.12); border-color:var(--gold-deep)}
.on-cream .consent-row{background:rgba(192,138,82,.14)}
/* Multi-select chips + scale circles: guarantee a 44px tap target (was ~42px) and a visible hover
   state, since some sections offer 9-12 chips in a row on a phone-width screen. */
.chip{min-height:44px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; transition:border-color .15s ease, background .15s ease}
.chip:hover{border-color:var(--gold-deep)}
.on-forest .chip:hover{border-color:var(--gold)}
.scale-row{gap:12px; flex-wrap:wrap}
.scale-opt{transition:border-color .15s ease}
.scale-opt:hover{border-color:var(--gold-deep)}
.on-forest .scale-opt:hover{border-color:var(--gold)}
/* Track picker tiles: a small lift on hover/focus so "pick your path" feels tappable, matching the
   card-lift language used elsewhere in the identity. */
.track-tile{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.track-tile:hover, .track-tile:focus-visible{transform:translateY(-3px); box-shadow:0 16px 34px -14px rgba(0,0,0,.45); border-color:rgba(214,174,69,.55)}
@media (prefers-reduced-motion:reduce){.track-tile:hover{transform:none}}
/* Review screen: each section card is a jump-back-and-edit control, not just a static summary —
   needs an obvious affordance since nothing else on the card suggests it's clickable. */
.review-card{cursor:pointer; position:relative; padding-right:64px; transition:transform .15s ease, box-shadow .15s ease}
.review-card:hover, .review-card:focus-visible{transform:translateY(-2px); box-shadow:0 14px 30px -16px rgba(0,0,0,.4)}
.review-card:focus-visible{outline:2px solid var(--gold-deep); outline-offset:2px}
.review-card .review-edit{
  position:absolute; top:20px; right:20px; font-family:var(--font-stamp); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-deep);
}
.review-card .review-empty{opacity:.6; font-style:italic; font-size:13px; margin:4px 0 0}
@media (prefers-reduced-motion:reduce){.review-card:hover{transform:none}}
@media (max-width:480px){
  .review-card{padding-right:28px}
  .review-card .review-edit{position:static; display:inline-block; margin-bottom:6px}
}

/* ==================================================================================
   GUIDE (Sol) — voice guide entry + panel on /start. Owned by the guide workstream
   (build.py page_start(), site.js guide()). Inherits type + color from the :root
   variables above — never hard-code a font or color here. Contract: ../../GUIDE-SPEC.md.
   ================================================================================== */
/* .visually-hidden already exists above (added by the accessibility pass) — reused as-is, not redefined. */
.link-btn{background:none; border:0; padding:0; font:inherit; color:var(--gold); text-decoration:underline; cursor:pointer; min-height:44px; display:inline-flex; align-items:center}
.on-cream .link-btn{color:var(--gold-deep)}

/* ---- entry CTA on /start, above the typed wizard ---- */
.guide-entry{
  background:var(--forest-deep); border:1.5px solid rgba(214,174,69,.35); border-radius:20px;
  padding:28px 24px; text-align:center; margin-bottom:28px;
}
.guide-entry-btn{width:100%; max-width:360px; font-size:16px; padding:16px 24px; gap:10px}
.guide-entry-icon{display:inline-flex;align-items:center}
.guide-entry-icon .ico,.guide-talk-icon .ico{display:block}
.guide-icon-btn .ico{display:block}
.guide-entry-sub{margin:14px 0 0; font-size:14px; opacity:.85; max-width:440px; margin-inline:auto}

/* ---- full-screen panel ---- */
body.guide-panel-open{overflow:hidden}
.guide-panel{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(10,25,18,.78); padding:16px;
}
.guide-panel[hidden]{display:none}
.guide-panel-inner{
  width:100%; max-width:560px; max-height:min(720px,92vh); display:flex; flex-direction:column;
  background:var(--cream); color:var(--ink); border-radius:22px; border:1.5px dashed var(--gold-deep);
  box-shadow:var(--shadow-deep); overflow:hidden;
}
.guide-head{
  display:flex; align-items:center; justify-content:space-between; padding:16px 18px;
  background:var(--forest); color:var(--cream); flex:none;
}
.guide-head-title{font-family:var(--font-stamp); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
.guide-head-actions{display:flex; gap:6px}
.guide-icon-btn{
  min-width:44px; min-height:44px; border-radius:50%; border:1px solid rgba(214,174,69,.4); background:transparent;
  color:var(--cream); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s ease;
}
.guide-icon-btn:hover, .guide-icon-btn:focus-visible{background:rgba(214,174,69,.18)}

.guide-progress{padding:14px 18px 0}
.guide-progress .progress-label{color:var(--gold-deep)}

.guide-transcript{
  flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:12px; min-height:180px;
}
.guide-msg{max-width:86%; padding:11px 15px; border-radius:16px; font-size:15px; line-height:1.5}
.guide-msg.guide{align-self:flex-start; background:var(--forest); color:var(--cream); border-bottom-left-radius:4px}
.guide-msg.user{align-self:flex-end; background:var(--gold); color:var(--forest-deep); font-weight:600; border-bottom-right-radius:4px}
.guide-msg.interim{opacity:.6; font-style:italic; border:1.5px dashed var(--gold-deep); background:transparent; color:var(--ink)}
.guide-msg.thinking{opacity:.65; font-style:italic}

/* ---- upload prompt: one obvious primary action, per Rule Zero (a tap, not typing) ----
   [hidden] must be re-stated here: an author stylesheet's `display` always beats the UA
   stylesheet's `[hidden]{display:none}` in the cascade (same origin/specificity tie broken
   by source order otherwise, but author-normal simply outranks UA-normal outright) — without
   this the panel renders even while the `hidden` attribute is set. */
.guide-upload[hidden], .guide-review-cta[hidden]{display:none}
.guide-upload{
  margin:0 18px 14px; padding:16px; border-radius:16px; background:rgba(192,138,82,.14);
  border:1.5px dashed var(--gold-deep); display:flex; flex-direction:column; gap:10px; flex:none;
}
.guide-upload-q{margin:0; font-weight:600}
.guide-upload-btn{width:100%; min-height:48px}
.guide-dropzone{
  border:1.5px dashed var(--gold-deep); border-radius:12px; padding:16px; text-align:center; font-size:13px;
  opacity:.75; cursor:pointer; min-height:44px; display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, opacity .15s ease;
}
.guide-dropzone:hover, .guide-dropzone:focus-visible, .guide-dropzone.drag-over{opacity:1; background:rgba(214,174,69,.16)}
.guide-upload-dismiss{align-self:flex-start}
.guide-upload-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.guide-upload-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px;
  background:var(--cream); border:1px solid rgba(156,122,43,.3); border-radius:10px; padding:8px 10px;
}
.guide-upload-item-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.guide-upload-item-remove{
  background:none; border:0; color:var(--gold-deep); font-size:18px; cursor:pointer; min-width:32px; min-height:32px; flex:none;
}

.guide-review-cta{margin:0 18px 14px; padding:14px 16px; border-radius:14px; background:rgba(15,61,46,.08); text-align:center; flex:none}
.guide-review-cta p{margin:0 0 10px; font-weight:600}

.guide-status{min-height:20px; padding:0 18px; font-size:13px; color:var(--gold-deep); flex:none}

/* ---- input row: push-to-talk + typed fallback, always both visible (never a dead end) ---- */
.guide-input-row{display:flex; align-items:center; gap:10px; padding:12px 18px 8px; flex:none}
.guide-talk-btn{
  display:flex; align-items:center; gap:8px; min-height:48px; padding:0 18px; border-radius:99px; border:0;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold-deep)); color:var(--forest-deep); font-weight:700;
  font-size:13px; cursor:pointer; flex:none; box-shadow:0 8px 20px -8px rgba(0,0,0,.35);
  transition:box-shadow .15s ease, transform .1s ease;
  /* press-and-hold on a phone: no scroll/zoom stealing the press (pointercancel), no text-selection
     callout or magnifier on a long press, no grey tap flash */
  touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
.guide-talk-icon{display:inline-flex;align-items:center}
.guide-talk-btn.listening{
  background:linear-gradient(135deg,var(--flamingo),var(--sunset)); color:var(--forest-deep);
  animation:guide-pulse 1.1s ease-in-out infinite;
}
@keyframes guide-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,95,162,.45)} 50%{box-shadow:0 0 0 10px rgba(255,95,162,0)}}
@media (prefers-reduced-motion:reduce){.guide-talk-btn.listening{animation:none}}
.guide-text-input{flex:1; min-width:0; min-height:44px; padding:10px 14px; font-size:14px}
.guide-send-btn{
  min-width:44px; min-height:44px; border-radius:50%; border:0; background:var(--forest); color:var(--gold);
  font-size:17px; cursor:pointer; flex:none;
}
.guide-send-btn:hover, .guide-send-btn:focus-visible{background:var(--forest-deep)}

.guide-footer-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 18px 16px;
  font-size:12px; flex:none;
}
.guide-mode-indicator{opacity:.65; font-family:var(--font-stamp); letter-spacing:.06em}

@media (max-width:480px){
  .guide-panel{padding:0}
  .guide-panel-inner{max-width:100%; max-height:100%; height:100%; border-radius:0}
  /* Visually hidden, not display:none — the label is still the button's accessible name. */
  .guide-talk-label{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap}
  .guide-talk-btn{position:relative; padding:0 16px; min-width:56px; justify-content:center}
}