/* =================================================================
   YELLOWBIRDIE GOLF CO. — Global Design System
   Style: Precision studio / technical luxury. Golf as engineering.
   Tokens matched to the 3D builder so the tool feels native.
   ================================================================= */

/* ---------- Tokens ---------- */
:root {
  /* surfaces (logo cream, warm) */
  --bg:        #FAF3EF;
  --bg-1:      #F2E7E0;
  --bg-2:      #E9DBD2;
  --bg-3:      #DFCEC3;
  --bg-4:      #D3BFB2;

  /* brand */
  --accent:    #FECE00;   /* gold, primary */
  --accent-2:  #C9900A;
  --accent-dim:#A87A07;
  --glow:      rgba(254,206,0,0.16);
  --crimson:   #B70114;   /* Alabama-flag crimson — the one hot accent, used rarely */
  --accent-text: var(--crimson); /* accent TEXT on paper; the dark bands remap it to gold */
  --turf:      #C9900A;
  --turf-deep: #A87A07;   /* gold band */
  --turf-glow: rgba(254,206,0,0.18);

  /* text */
  --text:      #141210;
  --text-2:    #463F3A;
  --text-3:    #6B615A;
  --text-dim:  #AFA298;   /* decorative only — never readable body */

  /* lines */
  --line:      rgba(20,18,16,0.14);
  --line-2:    rgba(20,18,16,0.26);
  --line-3:    rgba(20,18,16,0.42);

  /* type */
  --serif: 'Bricolage Grotesque', Georgia, 'Times New Roman', serif;
  --sans:  'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* fluid type scale — 1.25 ratio */
  --fs-eyebrow: 0.72rem;
  --fs-small:   clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem);
  --fs-body:    clamp(1rem, 0.97rem + 0.18vw, 1.12rem);
  --fs-lead:    clamp(1.18rem, 1.05rem + 0.6vw, 1.45rem);
  --fs-h4:      clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  --fs-h3:      clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
  --fs-h2:      clamp(2rem, 1.5rem + 2.5vw, 3.4rem);
  --fs-h1:      clamp(2.9rem, 1.9rem + 5vw, 6rem);
  --fs-display: clamp(4rem, 2rem + 11vw, 12rem);

  /* spacing (4px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --maxw: 1280px;
  --radius: 10px;
  --radius-sm: 6px;

  /* motion */
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --quick: 180ms;

  /* lighter band surfaces (for two-tone mid-page sections) */
  --lit-bg:    #141210;   /* charcoal band on paper site */
  --lit-bg-2:  #221E1B;
  --lit-line:  rgba(250,243,239,0.18);
  --lit-line-2:rgba(250,243,239,0.30);
  --lit-text:  #FAF3EF;
  --lit-text-2:#DED5CE;
  --lit-text-3:#AFA49B;
  --lit-accent:#FECE00;   /* warm gold so it reads on charcoal */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 300;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-feature-settings: 'tnum' 0;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }
:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 3px;
}

/* atmospheric backdrop: faint milled grid + radial glow */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(1100px 600px at 78% -8%, rgba(254,206,0,0.10), transparent 60%),
    radial-gradient(900px 700px at 5% 108%, rgba(254,206,0,0.06), transparent 55%);
  pointer-events: none;
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 0%, transparent 75%);
  opacity: 0.5;
  pointer-events: none;
}
/* fine film grain for tactile depth */
html::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout helpers ---------- */
.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.section { padding-block: clamp(var(--s-8), 9vw, var(--s-10)); position: relative; }
.section--tight { padding-block: clamp(var(--s-7), 6vw, var(--s-9)); }

/* ---------- Type primitives ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-text);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--accent);
  opacity: 0.7;
}
.eyebrow--plain::before { display: none; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.04; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
.serif-italic { font-style: italic; font-weight: 400; color: var(--accent-text); }
.lead { font-size: var(--fs-lead); color: var(--text-2); font-weight: 300; line-height: 1.5; }
.muted { color: var(--text-2); }
.tnum { font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; }

p { max-width: 64ch; }
.section p + p { margin-top: var(--s-4); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--mono);
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 15px 26px;
  border-radius: var(--radius-sm);
  transition: transform var(--quick) var(--ease-out),
              background var(--quick) var(--ease-out),
              border-color var(--quick) var(--ease-out),
              color var(--quick) var(--ease-out),
              box-shadow var(--quick) var(--ease-out);
  will-change: transform;
}
.btn .arrow { transition: transform var(--quick) var(--spring); }
.btn:hover .arrow { transform: translateX(5px); }

.btn--primary {
  background: var(--accent);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 0 0 0 var(--glow);
}
.btn--primary:hover {
  background: var(--accent-2);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -12px rgba(254,206,0,0.55);
}
.btn--ghost {
  border: 1px solid var(--line-2);
  color: var(--text);
  background: rgba(254,206,0,0.06);
}
.btn--ghost:hover { border-color: var(--accent-text); color: var(--accent-text); transform: translateY(-2px); }
.btn--lg { padding: 18px 32px; font-size: 0.82rem; }

/* link with animated underline */
/* crimson on paper, gold on ink (BRAND.md): gold link text on paper was 1.75:1 */
.link-u { color: var(--crimson); position: relative; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.1em; }
.link-u::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}
.link-u:hover::after { transform: scaleX(1); transform-origin: left; }
section.lit .link-u, .band--lit .link-u, .band--turf .link-u { color: var(--accent); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px clamp(1.25rem, 4vw, 3rem);
  transition: padding var(--quick) var(--ease-out),
              background var(--quick) var(--ease-out),
              border-color var(--quick) var(--ease-out),
              backdrop-filter var(--quick) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  padding: 12px clamp(1.25rem, 4vw, 3rem);
  background: rgba(250,243,239,0.86);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.brand {
  font-family: var(--serif);
  font-size: 1.25rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text); font-weight: 600;
  display: inline-flex; align-items: baseline; gap: 1px;
}
.brand em { color: var(--text); font-style: italic; font-weight: 400; }
.brand .tick { color: var(--text-3); font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0; margin-left: 6px; align-self: center; }

.nav { display: flex; align-items: center; gap: clamp(var(--s-5), 2.5vw, var(--s-7)); }
.nav-links { display: flex; gap: clamp(var(--s-5), 2vw, var(--s-6)); align-items: center; }
.nav-links a {
  font-family: var(--mono);
  font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-2);
  transition: color var(--quick) var(--ease-out);
  position: relative; padding: 4px 0;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--accent);
}

.nav-cta {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text); background: var(--accent); font-weight: 600;
  padding: 11px 20px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform var(--quick) var(--ease-out), background var(--quick) var(--ease-out), box-shadow var(--quick) var(--ease-out);
}
.nav-cta:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: 0 10px 28px -10px rgba(254,206,0,0.5); }
.nav-cta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text); }

.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); position: relative; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 50%; width: 18px; height: 1.5px; background: var(--text);
  transform: translateX(-50%); transition: transform var(--quick) var(--ease-out), opacity var(--quick);
}
.nav-toggle span { top: 50%; margin-top: -0.75px; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateX(-50%) translateY(6px) rotate(45deg); }
.nav-open .nav-toggle span::after { transform: translateX(-50%) translateY(-6px) rotate(-45deg); }

/* mobile menu is hidden on desktop; the mobile breakpoint switches it to flex */
.mobile-menu { display: none; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: var(--s-9) var(--s-6); position: relative; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--s-7); }
.footer-brand .brand { font-size: 1.5rem; }
.footer-tag { color: var(--text-2); margin-top: var(--s-4); max-width: 34ch; font-size: var(--fs-small); }
.footer-col h2 { font-family: var(--mono); font-size: 0.7rem; line-height: inherit; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s-4); font-weight: 500; }
.footer-col a { display: block; color: var(--text-2); padding: 6px 0; font-size: var(--fs-small); transition: color var(--quick); }
.footer-col a:hover { color: var(--accent-text); }
.footer-base { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); flex-wrap: wrap; }
.footer-base p, .footer-base span { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--text-3); }

/* ---------- Scroll reveal (scoped to .js so content shows without JS) ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.js .reveal.visible { opacity: 1; transform: translateY(0); }
.reveal[data-d="1"] { transition-delay: 60ms; }
.reveal[data-d="2"] { transition-delay: 130ms; }
.reveal[data-d="3"] { transition-delay: 190ms; }
.reveal[data-d="4"] { transition-delay: 270ms; }
.reveal[data-d="5"] { transition-delay: 330ms; }

/* ---------- Signature: technical corner marks / render slots ---------- */
.spec-tag {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-3);
}
.spec-tag b { color: var(--accent-text); font-weight: 500; }

/* render-slot placeholder (Path B) — looks like a CAD viewport awaiting a shot */
.render-slot {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(254,206,0,0.10), transparent 55%),
    linear-gradient(135deg, rgba(254,206,0,0.05), transparent 45%),
    var(--bg-1);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 30px 80px -50px rgba(0,0,0,0.8);
}
.render-slot::before {
  /* grid texture inside the slot */
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.6;
}
.render-slot__cross { position: absolute; width: 14px; height: 14px; opacity: 0.55; }
.render-slot__cross::before, .render-slot__cross::after { content: ""; position: absolute; background: var(--accent); }
.render-slot__cross::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.render-slot__cross::after { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); }
.render-slot__cross.tl { top: 14px; left: 14px; } .render-slot__cross.tr { top: 14px; right: 14px; }
.render-slot__cross.bl { bottom: 14px; left: 14px; } .render-slot__cross.br { bottom: 14px; right: 14px; }
.render-slot__label {
  position: absolute; left: 16px; bottom: 14px;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3);
}
.render-slot__label b { color: var(--accent-2); font-weight: 500; }
.render-slot__center {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--s-5);
}
.render-slot__center .ring {
  width: 56px; height: 56px; border-radius: 50%; border: 1px dashed var(--line-3);
  display: grid; place-items: center; margin: 0 auto var(--s-4); color: var(--accent);
}
.render-slot__center p { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); max-width: 26ch; }
/* when a photo is dropped in: it fills the frame and the placeholder chrome hides */
.render-slot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.render-slot:has(> img) .render-slot__center,
.render-slot:has(> img) .render-slot__cross { display: none; }
.render-slot:has(> img) .render-slot__label { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.8); z-index: 1; }
/* the dark gold half of the label vanishes on grass; on a photo the whole label is white */
.render-slot:has(> img) .render-slot__label b { color: inherit; }

/* ---------- Divide-y spec rows (density 3, anti-card) ---------- */
.spec-rows { border-top: 1px solid var(--line); }
.spec-row {
  display: grid; grid-template-columns: 64px 1fr auto; gap: var(--s-5); align-items: start;
  padding: var(--s-6) 0; border-bottom: 1px solid var(--line);
}
.spec-row__idx { font-family: var(--mono); font-size: 0.72rem; color: var(--accent-text); letter-spacing: 0.1em; padding-top: 6px; }
.spec-row__title { font-family: var(--serif); font-size: var(--fs-h4); color: var(--text); }
.spec-row__body { color: var(--text-2); margin-top: var(--s-3); font-size: var(--fs-small); max-width: 58ch; }
.spec-row__meta { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); text-align: right; white-space: nowrap; }
.spec-row:hover .spec-row__title { color: var(--accent-2); }
.spec-row__title { transition: color var(--quick) var(--ease-out); }

/* option chips (echo the builder UI on marketing pages) */
.opt-cloud { display: flex; flex-wrap: wrap; gap: 7px; margin-top: var(--s-4); }
.opt-chip {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em;
  padding: 6px 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--bg-2); color: var(--text-2);
  transition: border-color var(--quick), color var(--quick), background var(--quick);
}
.opt-chip:hover { border-color: var(--accent); color: var(--text); background: rgba(254,206,0,0.07); }
.opt-chip .n { color: var(--text-3); margin-left: 6px; }

/* ---------- Cards (used sparingly; each varied) ---------- */
.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-1), var(--bg));
  padding: var(--s-6);
  transition: transform 0.3s var(--spring), border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  position: relative; overflow: hidden;
}
.card:hover { transform: translateY(-5px); border-color: var(--line-2); box-shadow: 0 24px 50px -28px rgba(0,0,0,0.8); }
.card__k { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; color: var(--accent-text); text-transform: uppercase; }
.card h3 { font-size: var(--fs-h4); margin: var(--s-4) 0 var(--s-3); }
.card p { color: var(--text-2); font-size: var(--fs-small); }

/* big background numeral */
.ghost-num {
  font-family: var(--serif); font-weight: 600; color: var(--text-dim);
  font-size: clamp(6rem, 18vw, 16rem); line-height: 0.8; opacity: 0.5;
  pointer-events: none; user-select: none;
}

/* ---------- Accordion (FAQ → FAQPage schema) ---------- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--s-5);
  padding: var(--s-6) 0; text-align: left;
  font-family: var(--serif); font-size: var(--fs-h4); color: var(--text);
  transition: color var(--quick) var(--ease-out);
}
.acc__btn:hover { color: var(--accent-2); }
.acc__sign { position: relative; width: 18px; height: 18px; flex: none; }
.acc__sign::before, .acc__sign::after { content: ""; position: absolute; background: var(--accent); transition: transform 0.3s var(--ease-in-out), opacity 0.3s; }
.acc__sign::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.acc__sign::after { left: 50%; top: 0; height: 100%; width: 1.5px; transform: translateX(-50%); }
.acc__btn[aria-expanded="true"] .acc__sign::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
.acc__panel { overflow: hidden; max-height: 0; transition: max-height 0.4s var(--ease-in-out); }
.acc__panel-inner { padding-bottom: var(--s-6); color: var(--text-2); font-size: var(--fs-small); max-width: 70ch; }

/* ---------- CTA banner ---------- */
.cta-banner { position: relative; border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; padding: clamp(var(--s-7), 6vw, var(--s-9)); background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); box-shadow: 0 50px 120px -50px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.05); }
.cta-banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 300px at 85% 120%, rgba(254,206,0,0.18), transparent 60%); pointer-events: none; }
.cta-banner::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.6; }
.cta-banner__inner { position: relative; display: grid; grid-template-columns: 1.5fr auto; gap: var(--s-6); align-items: center; }
/* photo variant: a stock green (credits in BRAND.md) under an ink scrim, so the type flips to paper */
.cta-banner--photo { background: var(--lit-bg); border-color: transparent; color: var(--lit-text);
  --text: var(--lit-text); --text-2: var(--lit-text-2); --text-3: var(--lit-text-3); --accent-2: #FECE00; }
.cta-banner--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; z-index: 0; }
.cta-banner--photo::before { z-index: 1; background: linear-gradient(90deg, rgba(20,18,16,0.9) 0%, rgba(20,18,16,0.66) 55%, rgba(20,18,16,0.3) 100%); }
.cta-banner--photo .cta-banner__inner { z-index: 2; }
.cta-banner--photo .muted { color: var(--lit-text-2); }
@media (max-width: 720px) { .cta-banner--photo::before { background: linear-gradient(0deg, rgba(20,18,16,0.92) 0%, rgba(20,18,16,0.7) 60%, rgba(20,18,16,0.4) 100%); } }

/* ---------- Forms ---------- */
.field { margin-bottom: var(--s-5); }
.field label { display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); margin-bottom: var(--s-3); }
.field label .req { color: var(--accent-text); }
.field input, .field textarea, .field select {
  width: 100%; background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--sans); font-size: var(--fs-small); padding: 13px 15px;
  transition: border-color var(--quick) var(--ease-out), box-shadow var(--quick) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 3px rgba(254,206,0,0.14); }
.field.invalid input, .field.invalid textarea { border-color: #ef6a6a; }
.field__err { display: none; color: #ef8a8a; font-family: var(--mono); font-size: 0.66rem; margin-top: 7px; letter-spacing: 0.04em; }
.field.invalid .field__err { display: block; }
.form-note { font-family: var(--mono); font-size: 0.66rem; color: var(--text-3); letter-spacing: 0.04em; margin-top: var(--s-4); }
.form-ok { display: none; border: 1px solid var(--accent-dim); background: rgba(254,206,0,0.07); border-radius: var(--radius); padding: var(--s-6); }
.form-ok.show { display: block; }
.form-ok h3 { font-size: var(--fs-h4); color: var(--text); margin-bottom: var(--s-3); }
.form-ok p { color: var(--text-2); font-size: var(--fs-small); }

/* ---------- Misc atmosphere ---------- */
.hairline { height: 1px; background: var(--line); border: 0; }
.kicker-row { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.pill { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); border: 1px solid var(--line-2); border-radius: 30px; padding: 5px 13px; }
.pill--crimson { color: var(--crimson); border-color: rgba(184,134,11,0.4); }

/* ---------- Light band: two-tone mid-page section ---------- */
.band--lit {
  position: relative;
  background: linear-gradient(180deg, var(--lit-bg-2), var(--lit-bg));
  color: var(--lit-text);
  /* remap tokens locally so nested components restyle automatically */
  --text: var(--lit-text);
  --text-2: var(--lit-text-2);
  --text-3: var(--lit-text-3);
  --accent: var(--lit-accent);
  --accent-text: var(--accent);
  --accent-2: #FECE00;
  --line: var(--lit-line);
  --line-2: var(--lit-line-2);
  --line-3: rgba(20,18,16,0.4);
  --bg: var(--lit-bg);
  --bg-1: #ffffff;
  --bg-2: #fbfcfe;
  --bg-3: #f0f4f9;
  --glow: rgba(254,206,0,0.14);
}
/* soft seam so the band meets the page cleanly */
.band--lit::before,
.band--lit::after {
  content: ""; position: absolute; left: 0; right: 0; height: 64px; pointer-events: none;
}
.band--lit::before { top: 0;    background: linear-gradient(180deg, rgba(250,243,239,0.5), transparent); }
.band--lit::after  { bottom: 0; background: linear-gradient(0deg,   rgba(250,243,239,0.5), transparent); }
.band--lit > .wrap { position: relative; z-index: 1; }
.band--lit .muted { color: var(--lit-text-2); }
.band--lit .eyebrow { color: var(--lit-accent); }
.band--lit .opt-chip { background: rgba(254,206,0,0.07); }
.band--lit .card,
.band--lit .feel,
.band--lit .spec-cell { box-shadow: 0 18px 40px -28px rgba(20,18,16,0.4); }

/* ---------- .lit : light panel applied directly to a .wrap section (full-bleed bg) ---------- */
section.lit {
  position: relative;
  color: var(--lit-text);
  --text: var(--lit-text);
  --text-2: var(--lit-text-2);
  --text-3: var(--lit-text-3);
  --accent: var(--lit-accent);
  --accent-text: var(--accent);
  --accent-2: #FECE00;
  --line: var(--lit-line);
  --line-2: var(--lit-line-2);
  --line-3: rgba(20,18,16,0.4);
  --bg: var(--lit-bg);
  --bg-1: #ffffff;
  --bg-2: #fbfcfe;
  --bg-3: #f0f4f9;
  --glow: rgba(254,206,0,0.14);
}
section.lit::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0;
  left: 50%; width: 100vw; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--lit-bg-2), var(--lit-bg));
}
section.lit::after {
  content: ""; position: absolute; z-index: -1; left: 50%; width: 100vw; transform: translateX(-50%);
  top: 0; height: 56px; background: linear-gradient(180deg, rgba(20,18,16,0.45), transparent); pointer-events: none;
}
section.lit > *:first-child { position: relative; }
section.lit .muted { color: var(--lit-text-2); }
section.lit .eyebrow { color: var(--lit-accent); }
section.lit .opt-chip { background: rgba(254,206,0,0.07); }
section.lit .card,
section.lit .feel,
section.lit .spec-cell { box-shadow: 0 18px 40px -28px rgba(20,18,16,0.4); }

/* ---------- Charcoal band: a single deep-toned dark section ---------- */
.band--turf {
  position: relative;
  background:
    radial-gradient(900px 380px at 80% 0%, var(--turf-glow), transparent 60%),
    linear-gradient(180deg, #141210, var(--turf-deep));
  --accent: #FECE00;
  --accent-2: #FECE00;
  --accent-text: var(--accent);
  --line: rgba(250,243,239,0.16);
  --line-2: rgba(250,243,239,0.28);
  --glow: var(--turf-glow);
  --bg-1: #221E1B;
  --bg-2: #1F1F1C;
}
.band--turf::before,
.band--turf::after { content:""; position:absolute; left:0; right:0; height:64px; pointer-events:none; }
.band--turf::before { top:0;    background: linear-gradient(180deg, rgba(20,18,16,0.6), transparent); }
.band--turf::after  { bottom:0; background: linear-gradient(0deg,   rgba(20,18,16,0.6), transparent); }
.band--turf > .wrap, .band--turf > .section { position: relative; z-index: 1; }
.band--turf .eyebrow { color: #FECE00; }

/* small "in play" gold status dot — a quiet brand cue */
.turf-dot { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-2); }
.turf-dot::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--turf); box-shadow:0 0 0 0 var(--turf-glow); animation: turfPulse 2.6s var(--ease-in-out) infinite; }
@keyframes turfPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(254,206,0,0.5);} 50%{ box-shadow:0 0 0 6px rgba(254,206,0,0);} }
.split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(var(--s-6), 5vw, var(--s-9)); align-items: start; }
.split__head { position: sticky; top: 110px; }

.process-row { display: grid; grid-template-columns: 70px 1fr; gap: var(--s-5); padding: var(--s-6) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.process-row:first-child { border-top: 1px solid var(--line); }
.process-row__n { font-family: var(--mono); font-size: 0.8rem; color: var(--accent-text); letter-spacing: 0.08em; }
.process-row h3 { font-size: var(--fs-h4); margin-bottom: var(--s-3); }
.process-row p { color: var(--text-2); font-size: var(--fs-small); }

.price-band { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s-7); align-items: center; border: 1px solid var(--line-2); border-radius: 14px; padding: clamp(var(--s-6), 5vw, var(--s-8)); background: linear-gradient(180deg, var(--bg-2), var(--bg)); position: relative; overflow: hidden; box-shadow: 0 40px 100px -50px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.04); }
.price-band::before { content:""; position:absolute; inset:0; background: radial-gradient(500px 240px at 100% 0%, rgba(254,206,0,0.12), transparent 60%); pointer-events:none; }
.price-band__num { font-family: var(--serif); font-size: clamp(2.6rem, 1.5rem + 4vw, 4.6rem); line-height: 1; color: var(--text); }
.price-band__num small { font-size: 0.32em; color: var(--text-3); font-family: var(--mono); letter-spacing: 0.1em; display: block; margin-bottom: 10px; text-transform: uppercase; }
.price-band ul li { display: flex; gap: var(--s-3); align-items: flex-start; padding: 9px 0; color: var(--text-2); font-size: var(--fs-small); }
.price-band ul li svg { flex: none; margin-top: 4px; color: var(--accent); }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--s-6); }
  .split__head { position: static; }
  .price-band { grid-template-columns: 1fr; gap: var(--s-6); }
}
@media (max-width: 768px) {
  .nav-links, .nav > .nav-cta { display: none; }
  /* flex:none is load-bearing. .site-header is a flex row and .nav-toggle had
     the default flex-shrink:1, so the 349px unbreakable .brand squeezed the
     42px button down to 3.3px — the whole mobile nav hung off an ~18x14 strip. */
  .nav-toggle { display: block; flex: none; }
  .brand { min-width: 0; font-size: 1.05rem; }
  .brand .tick { display: none; }

  /* every label style on the site landed between 8.0 and 11.8px */
  .tick, small, .turf-dot, .lab, .render-slot__label, .spec-tag, .pill,
  .form-note, h5, .opt-chip, .field label, .eyebrow, .nav-links a,
  .nav-cta, .btn-mini, .field__err { font-size: 0.75rem; }

  /* 16px or iOS silently zooms the page on focus */
  .field input, .field select, .field textarea,
  input[type=text], input[type=email], input[type=tel], select, textarea { font-size: 16px; }

  .footer-col a { padding: 12px 0; }
  /* 70px of a 390px row spent on a two-character step number */
  .process-row { grid-template-columns: 34px 1fr; gap: var(--s-4); }
  .btn-mini { padding: 12px 16px; min-height: 44px; display: inline-flex;
              align-items: center; justify-content: center; }
  .site-header.nav-open { background: rgba(250,243,239,0.96); backdrop-filter: blur(18px); border-bottom-color: var(--line); }
  .mobile-menu {
    /* was fixed with a hard top:64px, but the header is ~85px tall (69px once
       scrolled), so the first item sat behind it. absolute + top:100% anchors to
       the fixed header's real bottom edge and tracks its padding change. */
    position: absolute; inset: 100% 0 auto 0; z-index: 99;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: var(--s-5) clamp(1.25rem, 4vw, 3rem) var(--s-7);
    display: flex; flex-direction: column; gap: var(--s-2);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
  }
  .nav-open .mobile-menu { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .mobile-menu a { font-family: var(--mono); font-size: 0.84rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); padding: 14px 0; border-bottom: 1px solid var(--line); }
  .mobile-menu a:last-of-type { border-bottom: none; }
  .mobile-menu .nav-cta { display: inline-flex; justify-content: center; margin-top: var(--s-4); padding: 15px; }
  /* 44px was sized for the 2-char .spec-row__idx; fitting.html puts phrases
     there, which wrapped "Toe hangs partway down" onto four lines */
  .spec-row { grid-template-columns: 1fr; }
  .spec-row__meta { grid-column: 2; text-align: left; margin-top: var(--s-3); }
  .cta-banner__inner { grid-template-columns: 1fr; }

  /* The 0.75rem label floor above loses to later page-level rules, so these still rendered
     at 9.6-11.2px on a 390px phone. The body prefix just outranks them. */
  body .footer-col h2, body .footer-base p, body .footer-base span, body .render-slot__center p,
  body .callout-panel .cp-title, body .callout-panel .cp-note, body .cat__opts h4,
  body .contact-aside h3, body .measure .k, body .fit-step__n small, body .fit-step__aside .lab,
  body .wz__prog-top, body .wz__t em, body .wz__sofar h4 { font-size: 0.75rem; }
  /* fitting's engraving field was 13px, so iOS zoomed the page on focus */
  body .wz__field input[type="text"] { font-size: 16px; }
}
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .footer-base { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .btn { width: 100%; justify-content: center; }
  .hero-actions .btn { width: auto; }
}
/* The header is fixed, so an in-page anchor lands its target underneath it.
   There was no scroll-margin anywhere on the site: fitting.html#step-1 buried
   its own question ("How tall are you?") behind ~70px of header. */
[id] { scroll-margin-top: 96px; }

@media print { .site-header, .nav-toggle, .mobile-menu { display: none; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* Phones keep a short gold Build button in the header, next to the menu, so the main action is
   never more than one tap away. The brand stacks to two lines to make room; under 360px there
   is no room at all, so the button lives only in the menu there. */
@media (max-width: 768px) {
  .nav { margin-left: auto; margin-right: 10px; }
  .nav > .nav-cta { display: inline-flex; min-height: 44px; padding: 0 14px; white-space: nowrap; }
  .nav-cta__more { display: none; }
  .site-header .brand { display: grid; grid-template-columns: auto auto; column-gap: 8px; line-height: 1.1; }
  .site-header .brand .yb-mark { grid-row: span 2; align-self: center; }
}
@media (max-width: 400px) {
  .nav { margin-right: 8px; }
  .nav > .nav-cta { padding: 0 12px; }
  .nav > .nav-cta .dot { display: none; }
  .site-header .brand { letter-spacing: 0.08em; }
}
@media (max-width: 359px) { .nav > .nav-cta { display: none; } }