/* ───────────────────────── Self-hosted fonts ───────────────────────── */
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/marcellus-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/public-sans-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/public-sans-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/public-sans-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/public-sans-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ───────────────────────── Design tokens ─────────────────────────
   Matched to the live site: deep forest green + cream paper + brass.
   Dark surfaces (ticker, hero, stats, calculator, footer) use --ink;
   the body and most sections sit on cream --paper. */
:root{
  --ink:        #14301F;               /* green-deep — dark surfaces */
  --ink-2:      #1A3A26;               /* lifted green panel */
  --ink-3:      #23492F;               /* green-mid — hovers, links on paper */
  --line:       rgba(20,48,31,.16);    /* hairlines on paper */
  --line-gold:  rgba(232,199,102,.32); /* gold hairlines on green */
  --line-soft:  rgba(250,247,239,.12); /* soft hairlines on green */
  --gold:       #C9A227;
  --gold-bright:#E8C766;
  --gold-deep:  #8A6E1C;
  --ivory:      #FAF7EF;               /* paper — light text on green */
  --text:       rgba(250,247,239,.85); /* body text on green surfaces */
  --muted:      rgba(250,247,239,.68); /* muted text on green surfaces */
  --paper:      #FAF7EF;
  --paper-2:    #F1ECDE;
  --ink-on-paper:#1C2420;
  --muted-on-paper:#5C6B5E;
  --serif: "Marcellus", Georgia, serif;
  --sans:  "Public Sans", -apple-system, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;
  --ease:  cubic-bezier(.22,.7,.3,1);
  --maxw:  72rem;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink-on-paper);
  font:400 1rem/1.7 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:var(--ink-3); text-decoration:none; }
a:hover{ color:var(--gold-deep); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }
section,#faq,#visit,#offer,#top{ scroll-margin-top:6.5rem; }
#top{ outline:none; } /* skip-link target — focus lands here, no ring needed */
/* keyboard users: first Tab reveals a jump-to-content link; invisible otherwise */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--gold); color:var(--ink); padding:.75rem 1.3rem;
  font:600 .9rem/1 var(--sans); border-radius:0 0 6px 0; text-decoration:none;
}
.skip-link:focus{ left:0; }

h1,h2,h3{ font-family:var(--serif); color:var(--ink); font-weight:400; line-height:1.15; margin:0; letter-spacing:.005em; }
h1{ font-size:clamp(2.1rem,4.6vw,3.4rem); line-height:1.12; }
h2{ font-size:clamp(2rem,4vw,2.9rem); }
h3{ font-size:clamp(1.3rem,2.2vw,1.55rem); }
p{ margin:0 0 1rem; max-width:62ch; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.5rem); }
.kicker{
  font:500 .72rem/1 var(--mono); letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-deep); display:flex; align-items:center; gap:.85rem; margin-bottom:1.1rem;
}
.kicker::before{ content:""; width:2.2rem; height:1px; background:var(--gold); opacity:.7; }
/* gold accent text — darker brass tones so it reads on cream */
.gold-text{
  background:linear-gradient(100deg,#96761F 10%,var(--gold) 45%,#96761F 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% 100%;
}
/* on the green hero it brightens to pale gold and shimmers, like the live site */
.hero .gold-text{
  background:linear-gradient(100deg,var(--gold-bright) 20%,#FFF3C4 40%,var(--gold-bright) 60%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% 100%;
  animation:shimmer 5s ease-in-out infinite;
}
@keyframes shimmer{ 0%,100%{background-position:100% 0} 50%{background-position:0 0} }
@media (prefers-reduced-motion: reduce){
  .hero .gold-text{ animation:none; background:none; -webkit-text-fill-color:var(--gold-bright); color:var(--gold-bright); }
}
.lede{ font-size:1.11rem; color:var(--ink-on-paper); }

/* Rotating headline word (ported from the animated-hero component) */
.rotator{ position:relative; display:block; height:1.22em; overflow:hidden; }
.rotator-word{
  position:absolute; left:0; top:0; white-space:nowrap;
  transform:translateY(120%); opacity:0;
  /* slight overshoot easing approximates framer-motion's spring */
  transition:transform .6s cubic-bezier(.22,1.2,.36,1), opacity .45s ease;
  will-change:transform,opacity;
}
.rotator-word.is-active{ transform:translateY(0); opacity:1; }
.rotator-word.is-up{ transform:translateY(-120%); opacity:0; }
@media (max-width:880px){ .rotator{ text-align:left; } }
@media (prefers-reduced-motion: reduce){
  .rotator-word{ transition:none; }
}
/* secondary rotating catchphrase line under the headline */
.hero-rotator{ display:flex; align-items:flex-start; gap:.65rem; margin-top:.9rem; font:600 clamp(1rem,1.5vw,1.13rem)/1.4 var(--sans); }
.hero-rotator .hr-check{ width:1.2rem; height:1.2rem; flex:none; color:var(--gold-bright); margin-top:.18em; }
.hero-rotator .rotator{ flex:1; min-width:0; height:1.7em; }
.hero-rotator .rotator-word{ color:var(--ivory); }

/* ───────────────────────── Buttons ───────────────────────── */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:3rem; padding:.8rem 1.7rem; border-radius:2px;
  font:600 .92rem/1 var(--sans); letter-spacing:.02em; cursor:pointer;
  border:1px solid transparent; transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.btn svg{ width:1.05rem; height:1.05rem; flex:none; }
.btn-gold{ background:var(--gold); color:var(--ink); }
.btn-gold:hover{ background:var(--gold-bright); color:var(--ink); box-shadow:0 8px 30px -8px rgba(201,162,39,.5); }
.btn-gold:active{ transform:translateY(1px); }
/* a single light sweep crosses gold buttons on hover */
.btn-gold::after{
  content:""; position:absolute; top:0; bottom:0; left:-65%; width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-18deg); pointer-events:none; opacity:0;
}
.btn-gold:hover::after{ left:130%; opacity:1; transition:left .65s var(--ease), opacity .1s linear; }
.btn-ghost{ background:transparent; color:var(--ivory); border-color:rgba(250,247,239,.4); }
.btn-ghost:hover{ border-color:var(--gold-bright); color:var(--gold-bright); }
.btn-ink{ background:var(--ink); color:var(--paper); }
.btn-ink:hover{ background:var(--ink-3); color:#fff; }

/* ───────────────────────── Ticker ───────────────────────── */
.ticker{
  background:var(--ink); border-bottom:1px solid rgba(232,199,102,.25);
  color:rgba(232,199,102,.7);
  font:500 .74rem/1 var(--mono); letter-spacing:.06em;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  position:sticky; top:0; z-index:51;
}
.ticker::-webkit-scrollbar{ display:none; }
.ticker-in{
  max-width:var(--maxw); margin-inline:auto; padding:0 clamp(1.25rem,4vw,2.5rem);
  height:1.9rem;
  display:flex; align-items:center; gap:1.6rem; white-space:nowrap;
}
.ticker .lbl{ color:rgba(232,199,102,.7); }
.ticker .px{ color:#fff; }
.ticker .dot{ color:rgba(232,199,102,.45); }
.ticker .status{ margin-left:auto; color:var(--muted); display:flex; align-items:center; gap:.5rem; }
.ticker .pulse{
  width:.45rem; height:.45rem; border-radius:50%; background:#5BBF7A; flex:none;
  animation:pulse 2.4s ease-in-out infinite;
}
.ticker .pulse.closed{ background:#B07A4A; animation:none; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.ticker .status .open-state{ color:#9BD8A9; }
.ticker .status .open-state.closed{ color:#E8A582; }
.lang-toggle{
  flex:none; margin-left:.85rem; background:none; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center;
  border:1px solid var(--line-gold); border-radius:3px; color:var(--gold-bright);
  font:500 .72rem/1 var(--mono); letter-spacing:.08em; padding:.32rem .62rem;
  white-space:nowrap; transition:border-color .2s var(--ease), color .2s var(--ease);
}
.lang-toggle:hover{ border-color:var(--gold-bright); color:#fff; }
/* Mobile: the bar keeps only hours + Español (prices stay on desktop) */
@media (max-width:760px){
  .tk-price{ display:none; }
  .ticker-in{ gap:.8rem; }
  .ticker .status{ margin-left:0; }
  .lang-toggle{ margin-left:auto; padding:.22rem .55rem; }
  section,#faq,#visit,#offer{ scroll-margin-top:7.5rem; }
}
/* gentle language suggestion (JS-injected, dismissible, never auto-redirects) */
.langhint{
  position:fixed; left:1rem; bottom:1rem; z-index:55; max-width:min(23rem,calc(100vw - 2rem));
  display:flex; align-items:center; gap:.7rem;
  background:rgba(20,48,31,.96); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line-gold); border-left:3px solid var(--gold); border-radius:5px;
  padding:.75rem .8rem .75rem 1rem; box-shadow:0 22px 50px -20px rgba(9,22,14,.55);
  opacity:0; transform:translateY(12px); transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.langhint.show{ opacity:1; transform:none; }
.langhint-msg{ flex:1; font:500 .9rem/1.3 var(--sans); color:var(--text); }
.langhint-cta{ font:600 .9rem/1.2 var(--sans); color:var(--gold-bright); white-space:nowrap; text-decoration:none; }
.langhint-cta:hover{ color:#fff; }
.langhint-x{ flex:none; width:1.7rem; height:1.7rem; border-radius:3px; background:none; border:0; color:var(--muted); cursor:pointer; font-size:.8rem; line-height:1; }
.langhint-x:hover{ color:#fff; }
@media (max-width:760px){ .langhint{ left:.8rem; right:.8rem; bottom:calc(4.7rem + env(safe-area-inset-bottom)); max-width:none; } }
@media (prefers-reduced-motion: reduce){ .langhint{ transition:none; } }

/* ───────────────────────── Nav (cream, like the live site) ───────────────────────── */
.nav{
  position:sticky; top:calc(1.9rem + 1px); z-index:50;
  background:rgba(250,247,239,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s var(--ease);
}
.nav.scrolled{ box-shadow:0 10px 36px -18px rgba(20,48,31,.25); }
.nav-in{
  max-width:var(--maxw); margin-inline:auto; padding:.55rem clamp(1.25rem,4vw,2.5rem);
  display:flex; align-items:center; gap:1.5rem;
}
.brand{ display:flex; align-items:center; gap:.8rem; color:var(--ink); }
.brand:hover{ color:var(--ink); }
.brand-img{ height:2.6rem; width:auto; display:block; flex:none; }
.brand-name{ font:400 1.18rem/1.05 var(--serif); letter-spacing:.02em; }
.brand-sub{ font:500 .6rem/1 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--muted-on-paper); margin-top:.28rem; }
@media (max-width:560px){
  .brand-img{ height:2.6rem; }
}
.nav-links{ display:flex; align-items:center; gap:1.7rem; margin-left:auto; }
.nav-links a{
  font:600 .86rem/1 var(--sans); color:var(--ink-on-paper); padding:.45rem 0; position:relative;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold); transition:right .25s var(--ease);
}
.nav-links a:hover{ color:var(--ink-3); } .nav-links a:hover::after{ right:0; }
/* phone button — soft brass pill */
.nav-call{ margin-left:.4rem; min-height:2.5rem; padding:.5rem 1.15rem; background:rgba(201,162,39,.16); border-color:transparent; letter-spacing:.01em; border-radius:99px; }
.nav-links a.nav-call{ color:var(--ink); }
.nav-call svg{ color:var(--gold-deep); }
.nav-links a.nav-call:hover{ background:rgba(201,162,39,.28); border-color:transparent; color:var(--ink); }
.nav-call:hover svg{ color:var(--gold-deep); }
.menu-btn{
  display:none; margin-left:auto; background:none; border:1px solid var(--line);
  color:var(--ink); width:2.9rem; height:2.9rem; border-radius:2px; cursor:pointer;
  align-items:center; justify-content:center;
}
.menu-btn svg{ width:1.3rem; height:1.3rem; }
@media (max-width:880px){
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(250,247,239,.98); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line); padding:.5rem 1.25rem 1.25rem;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:.95rem .25rem; border-bottom:1px solid var(--line); font-size:1rem; }
  .nav-links a::after{ display:none; }
  .nav-call{ margin:1rem 0 0; }
  .menu-btn{ display:flex; }
}

/* ───────────────────────── Hero (storefront photo under a deep-green tint,
   like the live site) ───────────────────────── */
.hero{
  position:relative; padding:clamp(2.5rem,5vw,3.75rem) 0 clamp(2.25rem,4.5vw,3.25rem); overflow:hidden;
  background:linear-gradient(rgba(16,38,25,.93),rgba(13,32,21,.97)),
             url('/assets/storefront-street.webp') center 30%/cover no-repeat;
  color:var(--ivory);
}
.hero h1{ color:var(--ivory); }
.hero-grid{ position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(2rem,4.5vw,3.5rem); align-items:center; }
.hero .kicker{ color:var(--gold-bright); }
.hero .kicker::before{ background:var(--gold-bright); }
.hero .lede{ font-size:clamp(1rem,1.5vw,1.13rem); margin:1.2rem 0 1.6rem; color:var(--text); max-width:36rem; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:.9rem; }
.hero-note{
  font:500 .72rem/1.7 var(--mono); letter-spacing:.06em; text-transform:uppercase;
  color:rgba(232,199,102,.82); margin:1.4rem 0 0; max-width:none;
}
/* Spanish copy runs longer (the headline wraps to an extra line) — tighten the
   ES hero so both languages put the fold in the same place */
html[lang="es"] .hero{ padding:clamp(2rem,4vw,2.75rem) 0 clamp(1.75rem,3.5vw,2.25rem); }
html[lang="es"] .hero h1{ font-size:clamp(1.95rem,4.2vw,3.05rem); }
html[lang="es"] .hero .kicker{ letter-spacing:.14em; }
html[lang="es"] .hero .lede{ margin:1rem 0 1.4rem; }
html[lang="es"] .hero-note{ margin-top:1.1rem; }
/* the longer Spanish menu squeezes the brand onto two lines — tighten the nav
   so the header stays the same height as the English page */
html[lang="es"] .nav-links{ gap:1.15rem; }
html[lang="es"] .nav-links a{ font-size:.83rem; }
@media (min-width:1200px){
  html[lang="es"] .brand-name{ white-space:nowrap; }
}
html[lang="es"] .hero-offer-copy .hero-offer-tag{ font-size:.9rem; letter-spacing:.1em; }
@media (min-width:881px){
  html[lang="es"] .hero-offer-copy .hero-offer-tag{ white-space:nowrap; }
}
/* live gold spot card */
.hero-art{ display:flex; justify-content:center; }
.gold-card{
  background:rgba(250,247,239,.05); border:1px solid rgba(232,199,102,.35); border-radius:12px;
  padding:1.5rem 1.5rem; text-align:center; width:min(20rem,100%);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.gold-card .gc-balls{ margin:0 auto .4rem; }
.gc-label{ font:500 .68rem/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--gold-bright); }
.gc-price{ font:400 2.6rem/1.15 var(--serif); color:#fff; margin:.25rem 0 0; font-variant-numeric:tabular-nums; }
.gc-unit{ font:400 .7rem/1.4 var(--mono); color:rgba(250,247,239,.72); letter-spacing:.05em; }
.gc-div{ height:1px; background:rgba(232,199,102,.3); margin:1.1rem 0; }
.gc-pg{ font-size:.9rem; color:var(--text); min-height:2.6em; margin:0; max-width:none; }
.gc-pg b{ color:var(--gold-bright); }
.gc-btn{ display:flex; width:100%; margin-top:1rem; font-size:.88rem; padding:.7rem 1rem; min-height:2.9rem; }
@media (max-width:880px){
  .hero-grid{ grid-template-columns:1fr; }
  .gold-card{ width:100%; }
}

/* Contact / offer card — deep green panel on the cream page, gold-edged */
.offer-sec{ padding:clamp(2.5rem,5vw,3.5rem) 0 clamp(1.25rem,2.5vw,1.75rem); }
#buy.section{ padding-top:clamp(2rem,4vw,3rem); }
.hero-offer{
  position:relative;
  border:1px solid rgba(232,199,102,.4); border-radius:12px;
  background:var(--ink); color:var(--text);
  box-shadow:0 30px 70px -38px rgba(20,48,31,.55);
  padding:clamp(1.4rem,3vw,2.1rem) clamp(1.4rem,3vw,2.3rem);
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1.3rem,3vw,2.5rem); align-items:center;
}
.hero-offer-tag{
  display:inline-flex; align-items:center; gap:.5rem; margin:0 0 .7rem;
  font:500 .68rem/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--gold-bright);
}
.hero-offer-tag::before{ content:""; width:.45rem; height:.45rem; border-radius:50%; background:#5BBF7A; animation:pulse 2.4s ease-in-out infinite; }
.hero-offer-copy h2{ font-size:clamp(1.7rem,3vw,2.3rem); margin:0; color:var(--ivory); }
.hero-offer-copy p{ margin:.7rem 0 0; font-size:.97rem; color:var(--text); max-width:40ch; }
.hero-offer-form{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem .8rem; }
.hof-field{ display:flex; flex-direction:column; gap:.35rem; }
.hof-field label{ font:600 .72rem/1 var(--sans); letter-spacing:.02em; color:var(--muted); }
.hero-offer select,.hero-offer input{
  width:100%; min-height:3.1rem; padding:.7rem .85rem; border-radius:4px;
  border:1px solid rgba(250,247,239,.25); background:rgba(13,32,21,.55); color:var(--ivory);
  font:500 .95rem/1.3 var(--sans); transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.hero-offer select:focus,.hero-offer input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,39,.25); }
.hof-submit{ grid-column:1 / -1; width:100%; min-height:3.3rem; font-size:1rem; }
.hero-offer-alt{ grid-column:1 / -1; margin:.2rem 0 0; font-size:.84rem; color:var(--muted); }
.hero-offer-alt a{ color:var(--gold-bright); } .hero-offer-alt a:hover{ color:#fff; }
@media (max-width:880px){
  .hero-offer{ grid-template-columns:1fr; gap:1.3rem; }
}
@media (max-width:480px){
  .hero-offer-form{ grid-template-columns:1fr; }
}

/* ───────────────────────── Stats (green band under the hero) ───────────────────────── */
.stats{ border-block:1px solid rgba(232,199,102,.25); background:var(--ink); }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:1.9rem 1.5rem; text-align:center; border-left:1px solid var(--line-soft); }
.stat:first-child{ border-left:0; }
.stat-num{ font:400 clamp(2rem,3.6vw,2.9rem)/1 var(--serif); color:var(--gold-bright); }
.stat-num sub,.stat-num sup{ font-size:.5em; }
.stat-lbl{ font:500 .7rem/1.5 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:.7rem; }
.stat-lbl .hl{ color:var(--gold-bright); }
@media (max-width:760px){
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .stat{ border-top:1px solid var(--line-soft); padding:1.6rem 1rem; }
  .stat:nth-child(-n+2){ border-top:0; }
  .stat:nth-child(odd){ border-left:0; }
}

/* ───────────────────────── Sections ───────────────────────── */
.section{ padding:clamp(3.5rem,7vw,5.75rem) 0; }
.section-head{ max-width:46rem; margin-bottom:clamp(1.8rem,4vw,3rem); }
.section-head p{ margin-top:1.2rem; color:var(--muted-on-paper); }

/* Two paths: sell or pawn — white cards on cream */
.paths{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.path-card{
  border:1px solid var(--line); border-radius:6px; padding:clamp(1.6rem,3vw,2.2rem);
  background:#fff;
  display:flex; flex-direction:column;
}
.path-tag{ font:500 .68rem/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep); margin:0 0 .85rem; }
.path-card h3{ font-size:clamp(1.45rem,2.4vw,1.75rem); }
.path-card ul{ list-style:none; margin:1rem 0 1.5rem; padding:0; display:grid; gap:.6rem; }
.path-card li{ position:relative; padding-left:1.15rem; font-size:.93rem; color:var(--muted-on-paper); }
.path-card li::before{ content:"–"; position:absolute; left:0; color:var(--gold); }
.path-link{ margin-top:auto; font:600 .92rem/1 var(--sans); color:var(--ink-3); }
.path-link:hover{ color:var(--gold-deep); }
.paths-note{ margin:1.5rem 0 clamp(2.25rem,4.5vw,3rem); font-size:.97rem; color:var(--ink-on-paper); }
.paths-note strong{ color:var(--ink); }
.buy-intro{ font:500 .72rem/1.6 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--muted-on-paper); margin:0 0 1rem; }
@media (max-width:760px){ .paths{ grid-template-columns:1fr; } }

/* What we buy — white tiles, hairline grid */
.buy-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.buy-card{
  background:#fff; padding:2.1rem 1.8rem;
  transition:background-color .25s var(--ease);
}
.buy-card:hover{ background:#FFFDF6; }
.buy-card svg{ width:2rem; height:2rem; color:var(--gold); margin-bottom:1.2rem; }
.buy-card h3{ font-size:1.32rem; margin-bottom:.55rem; }
.buy-card p{ font-size:.92rem; color:var(--muted-on-paper); margin:0; }
@media (max-width:880px){ .buy-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .buy-grid{ grid-template-columns:1fr; } .buy-card{ padding:1.7rem 1.4rem; } }

/* ───────────────────────── Rate comparison (sits on the green calculator) ───────────────────────── */
.rates{ background:var(--paper-2); border-block:1px solid var(--line); }
.rate-rows{ display:grid; gap:1.9rem; max-width:54rem; }
.rate-row .rate-meta{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.6rem; }
.rate-row .who{ font:500 .8rem/1.4 var(--sans); color:var(--text); }
.rate-row .pct{ font:400 1.35rem/1 var(--serif); color:var(--ivory); }
.rate-track{ height:.55rem; background:rgba(250,247,239,.12); border-radius:1rem; overflow:hidden; }
.rate-fill{
  height:100%; border-radius:1rem; transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s var(--ease) .15s;
}
.rate-row.in .rate-fill{ transform:scaleX(1); }
.fill-dim{ background:rgba(250,247,239,.28); }
.fill-gold{ background:linear-gradient(90deg,var(--gold-deep),var(--gold) 55%,var(--gold-bright)); }
.rate-row .pct.gold{ color:var(--gold-bright); }
.rate-note{ font-size:.88rem; color:var(--muted); max-width:54rem; margin-top:1.6rem; }

/* ───────────────────────── Calculator (deep green, like the live site) ───────────────────────── */
.calc{ background:var(--ink); color:var(--text); }
.calc h2,.calc h3{ color:var(--ivory); }
.calc .kicker{ color:var(--gold-bright); } .calc .kicker::before{ background:var(--gold-bright); }
.calc .section-head p{ color:var(--text); }
.calc a{ color:var(--gold-bright); text-decoration:underline; text-underline-offset:3px; }
.calc a:hover{ color:#fff; }
.calc .calc-panel a{ color:var(--gold-deep); }
.calc .calc-panel a:hover{ color:var(--ink); }
.calc-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,4vw,3.5rem); align-items:start; }
.calc-panel{ background:var(--paper); color:var(--ink-on-paper); border:1px solid rgba(232,199,102,.25); border-radius:8px; padding:clamp(1.5rem,3vw,2.3rem); box-shadow:0 24px 60px -38px rgba(9,22,14,.6); }
.field{ margin-bottom:1.3rem; }
.field label{ display:block; font:600 .8rem/1 var(--sans); letter-spacing:.03em; margin-bottom:.5rem; color:var(--ink-on-paper); }
.field input,.field select,.field textarea{
  width:100%; min-height:3rem; padding:.7rem .9rem; border-radius:4px;
  border:1px solid rgba(20,48,31,.28); background:#fff; color:var(--ink-on-paper);
  font:500 1rem/1.4 var(--sans); transition:border-color .2s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,39,.2); }
.field .hint{ font-size:.78rem; color:var(--muted-on-paper); margin-top:.4rem; }
.seg{ display:flex; border:1px solid rgba(20,48,31,.28); border-radius:4px; overflow:hidden; }
.seg button{
  flex:1; min-height:3rem; border:0; background:#fff; cursor:pointer;
  font:600 .85rem/1 var(--sans); color:var(--muted-on-paper);
  border-left:1px solid var(--line); transition:background-color .18s var(--ease), color .18s var(--ease);
}
.seg button:first-child{ border-left:0; }
.seg button:hover{ color:var(--ink-on-paper); }
.seg button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }
.calc-out{ border-top:2px solid var(--gold); margin-top:1.7rem; padding-top:1.5rem; }
.calc-line{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.42rem 0; }
.calc-line .l{ font-size:.9rem; color:var(--muted-on-paper); }
.calc-line .v{ font:500 1.05rem/1 var(--mono); color:var(--ink-on-paper); }
.calc-line.big .l{ font:600 .95rem/1.3 var(--sans); color:var(--ink-on-paper); }
.calc-line.big .v{ font:600 clamp(1.7rem,3vw,2.2rem)/1 var(--serif); color:var(--gold-deep); }
.calc-line.dim .v{ color:#9A9380; text-decoration:line-through; text-decoration-thickness:1px; }
/* payout table — sits directly on the green, like the live site's */
.payout-table{ width:100%; border-collapse:collapse; font:500 .92rem/1.5 var(--sans); }
.payout-table caption{ text-align:left; font:500 .72rem/1.6 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--gold-bright); padding-bottom:.8rem; }
.payout-table th{ font:600 .74rem/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:rgba(250,247,239,.65); text-align:right; padding:.55rem .4rem; border-bottom:1px solid rgba(250,247,239,.22); }
.payout-table th:first-child,.payout-table td:first-child{ text-align:left; }
.payout-table td{ padding:.66rem .4rem; text-align:right; border-bottom:1px solid rgba(250,247,239,.1); font-family:var(--mono); color:var(--ivory); }
.payout-table td:first-child{ font:600 .95rem/1.4 var(--sans); color:var(--text); }
.payout-table td.best{ color:var(--gold-bright); font-weight:500; }
.calc-foot{ font-size:.82rem; color:rgba(250,247,239,.72); margin-top:1.4rem; }
/* rate comparison, tucked under the payout table (on the green) */
.rate-block{ margin-top:2.1rem; padding-top:1.8rem; border-top:1px solid rgba(250,247,239,.2); }
.rate-block h3{ font-size:clamp(1.2rem,1.9vw,1.45rem); color:var(--ivory); margin-bottom:1.2rem; }
.rate-block h3 .em{ color:var(--gold-bright); }
@media (max-width:880px){ .calc-grid{ grid-template-columns:1fr; } }

/* ───────────────────────── XRF / split feature (white card, brass edge) ───────────────────────── */
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2.5rem,5vw,4.5rem); align-items:center; }
.xrf-card{
  border:1px solid var(--line); border-left:4px solid var(--gold); background:#fff;
  border-radius:6px; padding:clamp(1.6rem,3vw,2.4rem); position:relative; overflow:hidden;
}
.xrf-card::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(24rem 14rem at 85% -10%, rgba(201,162,39,.07), transparent 60%);
  pointer-events:none;
}
.xrf-photo{
  width:100%; height:auto; border-radius:3px; margin-bottom:1.5rem;
  border:1px solid var(--line); position:relative;
}
.xrf-read{ font:500 .72rem/1.8 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--muted-on-paper); }
.xrf-big{ font:400 clamp(2.4rem,4.5vw,3.4rem)/1.1 var(--serif); color:var(--ink); margin:.6rem 0 .4rem; }
.xrf-sub{ font-size:.92rem; color:var(--muted-on-paper); margin:0; }
.xrf-divider{ height:1px; background:var(--line); margin:1.5rem 0; }
@media (max-width:880px){ .split{ grid-template-columns:1fr; } }

/* ───────────────────────── Steps (white cards, gold ghost numerals) ───────────────────────── */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); counter-reset:step; }
.step{ background:#fff; padding:2.2rem 1.9rem; position:relative; }
.step-no{ font:600 .78rem/1 var(--mono); letter-spacing:.2em; color:var(--gold-deep); }
.step h3{ margin:.9rem 0 .6rem; font-size:1.35rem; }
.step p{ font-size:.93rem; color:var(--muted-on-paper); margin:0; }
@media (max-width:880px){ .steps{ grid-template-columns:1fr; } }

.loans-grid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.5rem,3.5vw,3rem); margin-top:clamp(1.8rem,4vw,2.75rem); align-items:start;
}
.special{
  border:1px solid var(--line-gold); border-radius:8px;
  background:var(--ink); color:var(--text);
  padding:clamp(1.6rem,3vw,2.2rem);
}
.special h3{ font-size:clamp(1.4rem,2.3vw,1.7rem); color:var(--gold-bright); }
.special p{ margin:.6rem 0 1.4rem; color:var(--text); max-width:46ch; }
.special .kicker{ color:var(--gold-bright); } .special .kicker::before{ background:var(--gold-bright); }
@media (max-width:880px){ .loans-grid{ grid-template-columns:1fr; } }

/* ───────────────────────── Testimonials (white cards on cream) ───────────────────────── */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.quote{
  border:1px solid var(--line); border-top:2px solid var(--gold); border-radius:4px;
  background:#fff; padding:1.9rem 1.7rem; display:flex; flex-direction:column; gap:1.1rem;
}
.quote .strs{ display:flex; gap:.25rem; }
.quote .strs svg{ width:.95rem; height:.95rem; color:var(--gold); }
.quote blockquote{ margin:0; font:400 1.12rem/1.5 var(--serif); font-style:italic; color:var(--ink-on-paper); flex:1; }
.quote cite{ font:500 .68rem/1.6 var(--mono); letter-spacing:.16em; text-transform:uppercase; font-style:normal; color:var(--muted-on-paper); }
@media (max-width:880px){ .quotes{ grid-template-columns:1fr; } }

/* ───────────────────────── Shop: FAQ + visit (light) ───────────────────────── */
.faq{ background:var(--paper); color:var(--ink-on-paper); }
.faq a{ color:var(--ink-3); text-decoration:underline; text-underline-offset:3px; }
.faq a:hover{ color:var(--gold-deep); }
/* buttons keep their own colors — don't inherit the section's link style */
.faq a.btn{ text-decoration:none; }
.faq a.btn-ink{ color:var(--paper); }
.faq a.btn-ink:hover{ color:#fff; }
.faq a.btn-gold{ color:var(--ink); }
.faq a.btn-gold:hover{ color:var(--ink); }
.shop-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2rem,4.5vw,4rem); align-items:start; }
.shop-grid > div > h3{ font-size:1.45rem; margin-bottom:1.1rem; }
.visit-card{
  background:#fff; border:1px solid var(--line); border-radius:6px;
  padding:clamp(1.4rem,2.5vw,2rem); box-shadow:0 24px 60px -38px rgba(20,48,31,.25);
}
.visit-card dl{ margin:1.3rem 0; display:grid; gap:1.05rem; }
.visit-card dt{ font:500 .68rem/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:.3rem; }
.visit-card dd{ margin:0; color:var(--ink-on-paper); font-size:.95rem; }
.visit-card dd small{ display:block; color:var(--muted-on-paper); margin-top:.15rem; }
.visit-card .map-frame{ aspect-ratio:16/9; border-color:var(--line); }
@media (max-width:880px){ .shop-grid{ grid-template-columns:1fr; } }
.faq .section-head p{ color:var(--muted-on-paper); }
.faq-list{ max-width:50rem; border-top:1px solid rgba(20,48,31,.22); }
.faq-item{ border-bottom:1px solid rgba(20,48,31,.22); }
.faq-q{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  display:flex; justify-content:space-between; align-items:center; gap:1.4rem;
  padding:1.35rem .2rem; font:600 1.07rem/1.4 var(--sans); color:var(--ink);
}
.faq-q:hover{ color:var(--gold-deep); }
.faq-q svg{ width:1rem; height:1rem; flex:none; color:var(--gold-deep); transition:transform .3s var(--ease); }
.faq-item.open .faq-q svg{ transform:rotate(45deg); }
.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease); }
.faq-item.open .faq-a{ grid-template-rows:1fr; }
.faq-a > div{ overflow:hidden; }
.faq-a p{ color:#44534A; font-size:.96rem; padding:0 .2rem 1.4rem; margin:0; max-width:60ch; }
/* the accordion inside the pawn-loans section shares the same light styling */
.faq-dark{ border-top-color:rgba(20,48,31,.22); }
.faq-dark .faq-item{ border-bottom-color:rgba(20,48,31,.22); }

/* ───────────────────────── Sell form ───────────────────────── */
.sell-grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2.5rem,5vw,4.5rem); align-items:start; }
.sell-aside h3{ font-size:1.25rem; margin:1.5rem 0 .4rem; }
.sell-aside h3:first-of-type{ margin-top:1.6rem; }
.sell-aside p{ font-size:.93rem; color:var(--muted-on-paper); margin:0; }
.form-card{ background:#fff; border:1px solid var(--line); border-radius:6px; padding:clamp(1.5rem,3vw,2.3rem); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.form-msg{ margin-top:1.1rem; font-size:.92rem; display:none; }
.form-msg.ok{ display:block; color:#1E4620; }
.form-msg.err{ display:block; color:#8A3218; }

/* Sell inquiry dialog — white card on a dimmed green backdrop */
.sell-dialog{
  background:#FFFEFA; color:var(--ink-on-paper); border:1px solid var(--line); border-radius:8px;
  width:min(36rem,calc(100vw - 2rem)); padding:0; margin:auto;
  box-shadow:0 50px 140px -30px rgba(9,22,14,.6);
  opacity:0; transform:translateY(16px) scale(.985);
}
.sell-dialog[open]{ opacity:1; transform:none; transition:opacity .3s var(--ease), transform .3s var(--ease); }
@starting-style{ .sell-dialog[open]{ opacity:0; transform:translateY(16px) scale(.985); } }
.sell-dialog::backdrop{ background:rgba(13,30,20,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.sell-dialog-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.4rem 1.6rem 0; }
.sell-dialog-head h3{ font-size:1.65rem; }
.dialog-close{
  background:none; border:1px solid var(--line); border-radius:3px; color:var(--ink);
  width:2.7rem; height:2.7rem; flex:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.dialog-close:hover{ border-color:var(--gold); color:var(--gold-deep); }
.dialog-close svg{ width:1.1rem; height:1.1rem; }
.sell-dialog-body{ padding:.9rem 1.6rem 1.6rem; overflow-y:auto; max-height:calc(100dvh - 9rem); }
.sell-dialog input[type=file]{ width:100%; font:500 .88rem/1.4 var(--sans); color:var(--ink-on-paper); }
.sell-dialog input[type=file]::file-selector-button{
  margin-right:.85rem; padding:.6rem .95rem; border-radius:4px; cursor:pointer;
  border:1px solid rgba(20,48,31,.28); background:var(--paper); color:var(--ink);
  font:600 .82rem/1 var(--sans); transition:border-color .2s var(--ease), color .2s var(--ease);
}
.sell-dialog input[type=file]::file-selector-button:hover{ border-color:var(--gold); color:var(--gold-deep); }
.form-fine{ font-size:.78rem; color:var(--muted-on-paper); margin:.45rem 0 0; }
@media (max-width:880px){ .sell-grid{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } }

/* ───────────────────────── Map ───────────────────────── */
.map-frame{
  border:1px solid var(--line); border-radius:6px; overflow:hidden;
  aspect-ratio:4/3; background:var(--paper-2);
}
.map-frame iframe{ width:100%; height:100%; border:0; filter:grayscale(.2) contrast(1.02); }

/* ───────────────────────── Footer (deep green) ───────────────────────── */
footer{ background:var(--ink); border-top:1px solid rgba(232,199,102,.25); padding:2.6rem 0 5.4rem; }
.foot-in{ display:flex; flex-wrap:wrap; gap:1.5rem 3rem; align-items:center; justify-content:space-between; }
.foot-in p{ margin:0; font-size:.84rem; color:rgba(250,247,239,.7); }
.foot-links{ display:flex; gap:1.6rem; font-size:.86rem; }
.foot-links a{ color:var(--gold-bright); }
.foot-links a:hover{ color:#fff; }
/* quiet service/area links — feeds the landing pages without touching the nav */
.foot-serve{
  margin-top:1.2rem; padding-top:1rem; border-top:1px solid rgba(250,247,239,.12);
  font-size:.82rem; color:rgba(250,247,239,.78);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .65rem;
}
.foot-serve a{ color:rgba(232,199,102,.8); }
.foot-serve a:hover{ color:var(--gold-bright); }

/* ───────────────────────── Mobile call bar ───────────────────────── */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:60; display:none;
  background:rgba(20,48,31,.95); backdrop-filter:blur(12px);
  border-top:1px solid var(--line-gold); padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  gap:.7rem;
}
.callbar .btn{ flex:1; min-height:2.9rem; padding:.6rem .5rem; font-size:.86rem; }
@media (max-width:760px){ .callbar{ display:flex; } footer{ padding-bottom:7rem; } }

/* ───────────────────────── Then & now (crossfade) ───────────────────── */
.thennow{ margin:1.6rem 0; }
.tn-stage{
  position:relative; aspect-ratio:4/3; border:1px solid var(--line); border-radius:5px;
  overflow:hidden; cursor:pointer; box-shadow:0 24px 54px -30px rgba(20,48,31,.45); background:var(--ink);
}
.tn-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s var(--ease); }
.tn-slide.is-active{ opacity:1; }
/* blurred copy of the photo fills the letterbox so nothing is cropped */
.tn-slide::before{
  content:""; position:absolute; inset:0;
  background:var(--bg) center/cover no-repeat; filter:blur(26px) brightness(.5); transform:scale(1.14);
}
.tn-slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.tn-slide.is-historic img{ filter:sepia(.16); }
.tn-cap{
  position:absolute; left:.8rem; bottom:.8rem; z-index:2;
  font:500 .66rem/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--paper);
  background:rgba(20,48,31,.78); padding:.42rem .7rem; border-radius:2px; backdrop-filter:blur(2px);
}
.tn-dots{ position:absolute; right:.8rem; bottom:.8rem; z-index:3; display:flex; gap:.5rem; }
.tn-dot{
  width:.55rem; height:.55rem; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:rgba(244,239,227,.5); transition:background-color .25s var(--ease), transform .25s var(--ease);
}
.tn-dot:hover{ background:rgba(244,239,227,.85); }
.tn-dot.is-on{ background:var(--gold-bright); transform:scale(1.3); }

/* ───────────────────────── Handcrafted micro-interactions ─────────────
   Quiet, hover-driven touches that make the lower sections feel considered. */

/* Buy cards: the gold icon lifts and brightens as the tile warms */
.buy-card svg{ transition:transform .35s var(--ease), color .35s var(--ease); }
.buy-card:hover svg{ transform:translateY(-3px) scale(1.06); color:var(--gold-bright); }

/* Path cards: a gentle rise + gold edge */
.path-card{ transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); }
.path-card:hover{ border-color:rgba(201,162,39,.5); transform:translateY(-4px); box-shadow:0 26px 56px -34px rgba(20,48,31,.35); }
/* the link's arrow nudges forward */
.path-link .lnk-arr{ display:inline-block; transition:transform .28s var(--ease); }
.path-link:hover .lnk-arr{ transform:translateX(.35rem); }

/* Loan steps: an oversized ghost numeral, brightening on hover */
.step > *{ position:relative; z-index:1; }
.step{ counter-increment:step; transition:background-color .3s var(--ease); }
.step::after{
  content:counter(step, decimal-leading-zero); position:absolute; top:.9rem; right:1.3rem; z-index:0;
  font:400 3.4rem/1 var(--serif); color:rgba(201,162,39,.14); pointer-events:none;
  transition:color .4s var(--ease), transform .5s var(--ease);
}
.step:hover{ background:#FFFDF6; }
.step:hover::after{ color:rgba(201,162,39,.32); transform:translateY(-3px); }

/* Testimonials: an editorial quotation glyph + a soft lift */
.quote{ position:relative; overflow:hidden; transition:transform .35s var(--ease), border-top-color .35s var(--ease), box-shadow .35s var(--ease); }
.quote > *{ position:relative; z-index:1; }
.quote::before{
  content:"\201C"; position:absolute; top:-1.4rem; right:.6rem; z-index:0;
  font:700 7rem/1 var(--serif); color:rgba(201,162,39,.12); pointer-events:none;
}
.quote:hover{ transform:translateY(-5px); border-top-color:var(--gold); box-shadow:0 26px 54px -32px rgba(20,48,31,.3); }

/* FAQ: answer text settles in, and the open question turns gold */
.faq-a > div > p{ opacity:0; transform:translateY(-5px); transition:opacity .35s var(--ease) .04s, transform .35s var(--ease) .04s; }
.faq-item.open .faq-a > div > p{ opacity:1; transform:none; }
.faq-item.open .faq-q{ color:var(--gold-deep); }

@media (prefers-reduced-motion: reduce){
  .faq-a > div > p{ opacity:1; transform:none; }
}

/* ───────────────────────── Reveal animation ─────────────────────────
   One vocabulary, varied by role so nothing reads as a uniform AOS fade.
   • Text rises a short, soft distance.
   • Side panels glide in from the edge they sit on.
   • Grid cards settle up with a faint scale, so a row "lands".
   • Section kicker hairlines draw themselves in. */
[data-reveal]{ opacity:0; transform:translateY(13px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--d,0s); will-change:transform,opacity; }

/* settle + faint scale — repeating grid cards (safe at any width) */
.buy-card[data-reveal], .path-card[data-reveal], .quote[data-reveal]{ transform:translateY(22px) scale(.972); }

/* horizontal glides only where cards sit in a side column — on mobile they
   stack full-width, so a sideways start would poke past the viewport edge */
@media (min-width:881px){
  .hero-art[data-reveal], .xrf-card[data-reveal], .visit-card[data-reveal]{ transform:translateX(30px); }
  .calc-panel[data-reveal]{ transform:translateX(-24px); }
}

/* the kicker's gold hairline draws in left-to-right */
.kicker[data-reveal]::before{ transform:scaleX(0); transform-origin:left; transition:transform .85s var(--ease) calc(var(--d,0s) + .18s); }

/* landed state — listed last so it wins over every role start above */
[data-reveal].in{ opacity:1; transform:none; }
.kicker[data-reveal].in::before{ transform:scaleX(1); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  [data-reveal], .hero-art[data-reveal], .xrf-card[data-reveal], .visit-card[data-reveal],
  .calc-panel[data-reveal], .buy-card[data-reveal], .path-card[data-reveal], .quote[data-reveal]{ opacity:1; transform:none; }
  .kicker[data-reveal]::before{ transform:scaleX(1); }
  .rate-fill{ transform:scaleX(1); }
}

/* ───────────────────────── Mobile density ─────────────────────────
   Phones get a ~6% smaller rem plus tighter paddings and type, so each
   screenful shows meaningfully more. Inputs stay 16px so iOS doesn't
   auto-zoom on focus. Last in the sheet so it wins the cascade. */
@media (max-width:760px){
  html{ font-size:15px; }
  body{ line-height:1.6; }
  .field input,.field select,.field textarea,
  .hero-offer select,.hero-offer input,
  .sell-dialog input[type=file]{ font-size:16px; }

  /* type scale */
  h1{ font-size:2rem; }
  h2{ font-size:1.55rem; }
  h3{ font-size:1.22rem; }
  .lede{ font-size:.99rem; }
  .hero-offer-copy h2{ font-size:1.4rem; }
  .path-card h3{ font-size:1.25rem; }
  .buy-card h3{ font-size:1.12rem; }
  .step h3{ font-size:1.18rem; margin:.55rem 0 .4rem; }
  .shop-grid > div > h3{ font-size:1.2rem; margin-bottom:.7rem; }
  .rate-block h3{ font-size:1.1rem; margin-bottom:.9rem; }
  .sell-dialog-head h3{ font-size:1.35rem; }
  .xrf-big{ font-size:1.85rem; }
  .stat-num{ font-size:1.7rem; }
  .gc-price{ font-size:2.1rem; }

  /* rhythm — sections & wrappers */
  .section{ padding:2.3rem 0; }
  #buy.section{ padding-top:1.7rem; }
  .section-head{ margin-bottom:1.3rem; }
  .section-head p{ margin-top:.75rem; }
  .offer-sec{ padding:1.5rem 0 .9rem; }
  .hero{ padding:1.8rem 0 1.9rem; }
  .hero .lede{ margin:.9rem 0 1.15rem; }
  .hero-rotator{ margin-top:.6rem; font-size:.99rem; }
  .hero-note{ margin-top:.95rem; font-size:.68rem; }
  .hero-grid{ gap:1.4rem; }

  /* cards & components */
  .gold-card{ padding:1.05rem 1.1rem; }
  .gc-pg{ min-height:0; }
  .gc-btn{ margin-top:.75rem; }
  .stat{ padding:1rem .7rem; }
  .stat-lbl{ margin-top:.45rem; font-size:.64rem; }
  .paths{ gap:.8rem; }
  .path-card{ padding:1.15rem 1.2rem; }
  .path-card ul{ margin:.75rem 0 1rem; gap:.45rem; }
  .paths-note{ margin:1.1rem 0 1.6rem; }
  .buy-card{ padding:1.15rem 1.2rem; }
  .buy-card svg{ width:1.55rem; height:1.55rem; margin-bottom:.65rem; }
  .step{ padding:1.15rem 1.2rem; }
  .step::after{ font-size:2.5rem; top:.7rem; right:1rem; }
  .hero-offer{ padding:1.1rem 1.15rem; gap:1rem; }
  .hero-offer select,.hero-offer input{ min-height:2.8rem; }
  .hof-submit{ min-height:2.9rem; }
  .calc-panel{ padding:1.15rem 1.05rem; }
  .field{ margin-bottom:.9rem; }
  .calc-grid{ gap:1.5rem; }
  .loans-grid{ gap:1.2rem; }
  .xrf-card{ padding:1.15rem 1.1rem; }
  .xrf-photo{ margin-bottom:.9rem; }
  .quotes{ gap:.8rem; }
  .quote{ padding:1.15rem 1.1rem; gap:.65rem; }
  .shop-grid{ gap:1.5rem; }
  .visit-card{ padding:1.1rem 1rem; }
  .visit-card dl{ margin:1rem 0; gap:.8rem; }
  .faq-q{ padding:.95rem .2rem; font-size:.99rem; }
  .faq-a p{ padding-bottom:1.1rem; }
  footer{ padding-top:1.8rem; }
  .foot-serve{ margin-top:.9rem; padding-top:.8rem; }
}
/* the narrowest phones (320–350px): shrink the hours bar so it fits without scrolling */
@media (max-width:350px){
  .ticker{ font-size:.66rem; }
  .ticker-in{ padding-inline:1rem; gap:.5rem; }
  .lang-toggle{ font-size:.64rem; padding:.2rem .45rem; }
}

/* ───────────────────────── Short desktop viewports ─────────────────────────
   On monitors/windows under ~1150px tall, compress the above-the-fold stack so
   the hero, stats band, and the Reach Out card all land in the first screen.
   Tall monitors are untouched. */
@media (min-width:761px) and (max-height:1150px){
  html{ font-size:15px; }
  .field input,.field select,.field textarea,
  .hero-offer select,.hero-offer input{ font-size:16px; } /* iPad focus-zoom guard */

  .nav-in{ padding-block:.45rem; }
  .brand-img{ height:2.3rem; }

  .hero{ padding:1.3rem 0 1.2rem; }
  h1{ font-size:clamp(2rem,4vw,2.6rem); }
  .hero .lede{ margin:.7rem 0 .9rem; font-size:1.02rem; }
  .hero-rotator{ margin-top:.5rem; font-size:1.02rem; }
  .hero-note{ margin-top:.7rem; }
  .gold-card{ padding:1.05rem 1.2rem; }
  .gc-price{ font-size:2.1rem; }
  .gc-pg{ min-height:0; }
  .gc-btn{ margin-top:.7rem; }

  .stat{ padding:.8rem 1rem; }
  .stat-num{ font-size:2rem; }
  .stat-lbl{ margin-top:.4rem; }

  .offer-sec{ padding:.9rem 0; }
  .hero-offer{ padding:1.15rem 1.4rem; gap:1.2rem; }
  .hero-offer-copy h2{ font-size:1.55rem; }
  .hero-offer-copy p{ margin:.45rem 0 0; font-size:.92rem; }
  .hero-offer-tag{ margin-bottom:.5rem; }
  .hero-offer select,.hero-offer input{ min-height:2.7rem; }
  .hof-submit{ min-height:2.9rem; }
  .hero-offer-alt{ font-size:.8rem; }
}