/* ============================================================================
   Heartland Business Buyers — Premium Theme Layer
   Loaded AFTER styles.css (compiled Tailwind) to elevate the whole site to an
   agency-grade, top-tier acquisitions-firm aesthetic without rewriting markup.
   Direction: Clean Editorial + Refined Minimal, cinematic dark hero.
   Type: Fraunces (serif display) · Hanken Grotesk (body) · Barlow Condensed (numerals/eyebrows)
   ============================================================================ */

:root{
  --navy:#0e2438; --navy-2:#123049; --navy-d:#081722; --ink:#17293a;
  --gold:#c79a4e; --gold-lt:#dcb56d; --gold-d:#a87e34;
  --bone:#faf7f1; --paper:#fdfbf6; --mist:#f2eee4;
  --line:rgba(20,40,58,.10); --line-gold:rgba(199,154,78,.28);
  --trust:#2f7d5b;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --cond:'Barlow Condensed',sans-serif;
}

/* ---------- Base ---------- */
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
body{ font-family:var(--sans); background:var(--bone); font-size:1.02rem; line-height:1.65; letter-spacing:-.004em; }
::selection{ background:rgba(199,154,78,.28); }

/* ---------- Typography roles ---------- */
/* .font-display is used on headlines sitewide → editorial serif */
.font-display{ font-family:var(--serif) !important; font-weight:540; letter-spacing:-.02em; font-optical-sizing:auto; }
h1.font-display{ letter-spacing:-.035em; line-height:1.03; font-weight:560; }
.text-3xl.font-display,.text-4xl.font-display{ letter-spacing:-.03em; line-height:1.06; }
/* Wordmark stays tight + confident */
header .font-display{ font-weight:600; letter-spacing:-.01em; }
/* Numerals + eyebrow labels use condensed for operator precision */
.stat-num,.eyebrow{ font-family:var(--cond) !important; }

/* Refined hero + section type scale */
.text-4xl{ font-size:2.45rem; line-height:1.07; }
.text-3xl{ line-height:1.12; }
@media(min-width:768px){
  .md\:text-5xl{ font-size:3.4rem; line-height:1.0; }
  .md\:text-4xl{ font-size:2.6rem; }
}
p{ text-wrap:pretty; }
h1,h2,h3{ text-wrap:balance; }

/* ---------- Color re-tone (override compiled utilities) ---------- */
body.bg-white,.bg-white{ background-color:var(--paper) !important; }
.bg-mist{ background-color:#f3efe6 !important; }
.bg-navy{ background-color:var(--navy) !important; }
.bg-navy\/95{ background-color:rgba(14,36,56,.92) !important; }
.bg-navy\/5{ background-color:rgba(14,36,56,.05) !important; }
.bg-navyDark,.bg-navyDark\/60{ background-color:var(--navy-d) !important; }
.text-navy{ color:var(--navy) !important; }
.text-ink{ color:var(--ink) !important; }
.bg-gold{ background-color:var(--gold) !important; }
.text-gold{ color:#cfa457 !important; }
.hover\:bg-goldLt:hover{ background-color:var(--gold-lt) !important; }
.hover\:text-gold:hover{ color:var(--gold-lt) !important; }
.bg-trust{ background-color:var(--trust) !important; }
.text-trust{ color:#2c7c59 !important; }
.border-slate\/25{ border-color:var(--line) !important; }
.border-white\/10,.border-white\/15{ border-color:rgba(255,255,255,.12) !important; }

/* ---------- Sections: rhythm + breathing ---------- */
section{ position:relative; }
.py-14{ padding-top:clamp(4.25rem,7.5vw,7rem) !important; padding-bottom:clamp(4.25rem,7.5vw,7rem) !important; }
.py-12{ padding-top:clamp(3.5rem,6vw,5.5rem) !important; padding-bottom:clamp(3.5rem,6vw,5.5rem) !important; }

/* ---------- Cinematic hero ---------- */
.hero-bg{
  background:
    radial-gradient(1150px 520px at 82% -12%, rgba(199,154,78,.24), transparent 62%),
    radial-gradient(820px 460px at -5% 112%, rgba(47,125,91,.12), transparent 55%),
    linear-gradient(162deg, #0e2438 0%, #123049 46%, #0a1d2c 100%) !important;
}
/* faint architectural hairline grid inside dark heroes */
.hero-bg::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(70% 60% at 70% 0%,#000,transparent 75%);
}
/* grain on dark surfaces */
.hero-bg::after,.bg-navy::after,.bg-navyDark::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-bg > *,.bg-navy > *,.bg-navyDark > *{ position:relative; z-index:1; }

/* eyebrow pill (the little status chip) → refined */
.hero-bg .rounded-full.border{ backdrop-filter:blur(4px); letter-spacing:.09em; font-family:var(--cond); font-weight:600; font-size:.78rem; }

/* ---------- Buttons ---------- */
a.bg-gold, button.bg-gold, .bg-gold[type=submit]{
  font-family:var(--sans) !important; font-weight:700 !important; letter-spacing:.01em !important;
  color:#20140a !important; border-radius:.65rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 24px -10px rgba(199,154,78,.65);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
a.bg-gold:hover, button.bg-gold:hover{ transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 16px 30px -10px rgba(199,154,78,.72); }
a.bg-gold:active, button.bg-gold:active{ transform:translateY(0); }
/* navy secondary button */
a.bg-navy.hover\:bg-slate:hover{ background-color:#1a3958 !important; }
a.bg-navy{ border-radius:.65rem; }

/* ---------- Cards & surfaces ---------- */
.card-shadow{ box-shadow:0 24px 60px -30px rgba(8,23,34,.34), 0 3px 10px -5px rgba(8,23,34,.12) !important; }
.bg-mist.rounded-2xl,.bg-mist.rounded-xl{ border:1px solid var(--line); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.bg-mist.rounded-2xl:hover,.bg-mist.rounded-xl:hover{ border-color:var(--line-gold); }
.rounded-2xl.card-shadow{ border:1px solid rgba(255,255,255,.6); }

/* the ladder rows: premium hover + gold rail */
a.card-shadow.rounded-xl{ border-left:3px solid transparent; }
a.card-shadow.rounded-xl:hover{ border-left-color:var(--gold); box-shadow:0 26px 60px -28px rgba(8,23,34,.4) !important; }

/* ---------- Forms ---------- */
.form-field{ background:#fff; border-radius:.6rem !important; transition:border-color .15s, box-shadow .15s; }
.form-field:focus{ box-shadow:0 0 0 3px rgba(199,154,78,.24) !important; border-color:var(--gold) !important; }
select.form-field{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a1ad' fill='none' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.4rem; }

/* ---------- Tags / chips ---------- */
.tag{ font-family:var(--cond) !important; text-transform:uppercase; letter-spacing:.1em; font-weight:600; }

/* ---------- Sticky header polish ---------- */
header.sticky{ transition:background-color .3s ease, box-shadow .3s ease, border-color .3s; }
header.sticky.scrolled{ box-shadow:0 10px 30px -18px rgba(8,23,34,.55); border-bottom-color:var(--line-gold); }

/* ---------- Scorecard polish ---------- */
#scorecard{ border:1px solid rgba(255,255,255,.7); }
.sc-opt{ font-family:var(--sans); border-radius:.62rem; }
.sc-opt:hover{ box-shadow:0 8px 20px -12px rgba(199,154,78,.6); }
.sc-prog>i{ background:linear-gradient(90deg,var(--gold),var(--gold-lt)); }

/* ---------- Comparison table ---------- */
table.min-w-\[640px\] td{ border-color:rgba(255,255,255,.09) !important; }

/* ---------- Details / FAQ ---------- */
details.group{ border:1px solid var(--line); transition:border-color .2s, background-color .2s; }
details.group[open]{ border-color:var(--line-gold); }
details.group summary{ font-family:var(--sans); }

/* ---------- Scroll reveal (progressive enhancement) ---------- */
.js .reveal{ opacity:0; transform:translateY(24px); transition:opacity .75s cubic-bezier(.2,.6,.2,1), transform .75s cubic-bezier(.2,.6,.2,1); will-change:opacity,transform; }
.js .reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .js .reveal{ opacity:1 !important; transform:none !important; } }

/* ---------- Footer refinement ---------- */
footer.bg-navyDark{ border-top:1px solid var(--line-gold); }
footer a:hover{ color:var(--gold-lt) !important; }

/* ---------- Fine details ---------- */
a{ transition:color .15s ease; }
.underline{ text-underline-offset:3px; text-decoration-thickness:1px; }