/* =========================================================
   Free But Not Free LLC — Maryland Home Detention Services
   Global stylesheet
   Light theme built on the brand navy + gold from the logo.
   ========================================================= */

:root {
  /* ---- brand, sampled from the logo ---- */
  --navy-deep:   #08192F;
  --navy:        #11294D;
  --navy-mid:    #1B3F73;
  --navy-soft:   #E9EEF7;

  --gold:        #C0913F;
  --gold-light:  #D8AE63;
  --gold-pale:   #EFE0C4;
  --gold-dark:   #8A6522;
  --gold-tint:   #FBF7EF;

  /* ---- surfaces ---- */
  --bg:          #ffffff;
  --bg-alt:      #F6F8FC;
  --surface:     #ffffff;
  --surface-2:   #EEF2F9;
  --border:      #E4E9F2;
  --border-lit:  #C8D3E5;

  /* ---- type ---- */
  --text:        #11294D;
  --text-mid:    #47536B;
  --text-dim:    #77839A;

  /* ---- status ---- */
  --ok:          #1F7A4D;
  --warn:        #8A6522;

  /* ---- dark band (top bar + CTA strip) ---- */
  --band:        #0C2043;
  --band-2:      #16325C;
  --band-text:   #DCE5F3;

  --radius:      14px;
  --radius-sm:   9px;
  --shadow:      0 14px 38px rgba(17, 41, 77, .12);
  --shadow-sm:   0 4px 14px rgba(17, 41, 77, .08);
  --shadow-gold: 0 10px 28px rgba(192, 145, 63, .28);

  --maxw:        1180px;
  --font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-head:   'Plus Jakarta Sans', var(--font);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--navy-mid); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--gold-dark); }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.2;
  margin: 0 0 .6em;
  letter-spacing: -.02em;
  font-weight: 700;
  color: var(--navy);
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1.1em; color: var(--text-mid); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Screen-reader only ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.topbar {
  background: linear-gradient(90deg, var(--band), var(--band-2));
  font-size: .84rem;
  color: var(--band-text);
  border-bottom: 2px solid var(--gold);
}
.topbar .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 7px; padding-bottom: 7px; flex-wrap: wrap;
}
.topbar a { color: #fff; font-weight: 600; }
.topbar a:hover { color: var(--gold-light); }
.topbar-items { display: flex; gap: 20px; flex-wrap: wrap; }

.nav-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-top: 10px; padding-bottom: 10px;
  position: relative;
}

/* ---- brand lockup: badge mark + legible wordmark ---- */
.brand { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.brand:hover { color: inherit; }
.brand-logo { height: 62px; width: auto; display: block; transition: height .3s ease; }
.site-header.scrolled .brand-logo { height: 50px; }

.brand-text {
  display: flex; flex-direction: column; line-height: 1.18;
  padding-left: 14px; border-left: 1px solid var(--border-lit);
}
.brand-name {
  font-family: var(--font-head); font-weight: 800; font-size: 1.12rem;
  color: var(--navy); letter-spacing: -.025em; white-space: nowrap;
}
.brand-llc {
  font-size: .58em; font-weight: 700; color: var(--gold-dark);
  letter-spacing: .12em; margin-left: 6px; vertical-align: .28em;
}
.brand-tag {
  font-size: .64rem; color: var(--gold-dark); font-weight: 700;
  text-transform: uppercase; letter-spacing: .17em; white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  color: var(--text-mid); font-size: .93rem; font-weight: 600;
  padding: 9px 12px; border-radius: 8px; white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.nav a:hover { background: var(--surface-2); color: var(--navy); }
.nav a.active { color: var(--navy); background: var(--gold-tint); }

.nav-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.nav-toggle {
  display: none; background: var(--surface-2); border: 1px solid var(--border-lit);
  color: var(--navy); width: 44px; height: 42px; border-radius: 10px;
  cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle svg { width: 22px; height: 22px; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border-radius: 10px; font-weight: 650; font-size: .95rem;
  font-family: var(--font); cursor: pointer; border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  text-align: center; line-height: 1.2;
}
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn:hover { transform: translateY(-2px); }

/* primary = navy, white text (14.5:1) */
.btn-primary {
  background: linear-gradient(135deg, var(--navy-mid), var(--navy));
  color: #fff; box-shadow: 0 8px 22px rgba(17, 41, 77, .28);
}
.btn-primary:hover { color: #fff; box-shadow: 0 14px 30px rgba(17, 41, 77, .38); }

/* gold = navy text (5.1:1) — never white on gold */
.btn-gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--navy); box-shadow: var(--shadow-gold); font-weight: 700;
}
.btn-gold:hover { color: var(--navy-deep); box-shadow: 0 14px 32px rgba(192, 145, 63, .42); }

.btn-outline { background: #fff; border-color: var(--border-lit); color: var(--navy); }
.btn-outline:hover { border-color: var(--gold); background: var(--gold-tint); color: var(--navy); }

.btn-ghost { background: var(--surface-2); color: var(--navy); border-color: var(--border); }
.btn-ghost:hover { background: var(--navy-soft); color: var(--navy); border-color: var(--border-lit); }

.btn-sm { padding: 9px 17px; font-size: .87rem; }
.btn-lg { padding: 16px 32px; font-size: 1.02rem; }
.btn-block { width: 100%; }

/* =========================================================
   SECTIONS
   ========================================================= */
section { position: relative; }
.section { padding: 88px 0; }
.section-sm { padding: 58px 0; }
.section-alt { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.section-head { max-width: 760px; margin: 0 auto 52px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.section-head p { font-size: 1.05rem; margin-bottom: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .76rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-dark); margin-bottom: 14px;
}
.eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--gold); border-radius: 2px; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative; overflow: hidden;
  padding: 96px 0 88px;
  background:
    radial-gradient(1000px 480px at 80% -10%, rgba(192, 145, 63, .14), transparent 62%),
    radial-gradient(760px 420px at 5% 105%, rgba(17, 41, 77, .08), transparent 60%),
    linear-gradient(180deg, #F8FAFE, #ffffff 62%);
  border-bottom: 1px solid var(--border);
}
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .75;
  background-image:
    linear-gradient(rgba(17, 41, 77, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 41, 77, .045) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 25%, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 25%, transparent 72%);
}
.hero .container { position: relative; z-index: 2; }

.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 60px; align-items: center; }
.hero h1 { margin-bottom: .35em; }
.hero h1 .accent {
  background: linear-gradient(100deg, var(--gold-dark), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { font-size: 1.14rem; max-width: 560px; margin-bottom: 32px; }
.hero-actions { display: flex; gap: 13px; flex-wrap: wrap; margin-bottom: 34px; }

.hero-stats { display: flex; gap: 34px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--border); }
.hero-stat .n { font-family: var(--font-head); font-size: 1.75rem; font-weight: 800; color: var(--navy); line-height: 1.1; }
.hero-stat .l { font-size: .81rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .1em; }

/* Hero card */
.hero-card {
  background: linear-gradient(165deg, #ffffff, var(--bg-alt));
  border: 1px solid var(--border-lit); border-radius: 18px;
  padding: 28px; box-shadow: var(--shadow);
  border-top: 3px solid var(--gold);
}
.hero-card h3 { font-size: 1.08rem; margin-bottom: 4px; }
.hero-card .muted { font-size: .87rem; color: var(--text-dim); margin-bottom: 20px; }
.hero-card ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 13px; }
.hero-card li { display: flex; gap: 12px; align-items: flex-start; font-size: .93rem; color: var(--text-mid); }
.hero-card li svg { width: 19px; height: 19px; color: var(--ok); flex-shrink: 0; margin-top: 2px; }

/* =========================================================
   TRUST BANNER
   ========================================================= */
.trust-banner { background: var(--bg-alt); border-bottom: 1px solid var(--border); padding: 22px 0; }
.trust-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 14px 38px; flex-wrap: wrap; justify-content: center;
}
.trust-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: .9rem; font-weight: 600; color: var(--text-mid);
}
.trust-list svg { width: 18px; height: 18px; color: var(--gold-dark); flex-shrink: 0; }

/* =========================================================
   BRAND SHOWCASE  (logo only — the artwork carries the words)
   ========================================================= */
.brand-showcase {
  position: relative; overflow: hidden;
  padding: 96px 24px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(900px 500px at 50% 45%, rgba(192, 145, 63, .11), transparent 68%),
    linear-gradient(180deg, #ffffff, #FDFBF7 50%, #ffffff);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* the stage is the only child, centred by the flex parent */
.brand-stage {
  position: relative;
  width: min(430px, 78vw);
  aspect-ratio: 820 / 892;      /* matches the artwork so the rings stay concentric */
  display: grid; place-items: center;
  flex: 0 0 auto;
}

.brand-badge {
  position: relative; z-index: 4;
  width: 100%; height: auto;
  filter: drop-shadow(0 18px 34px rgba(17, 41, 77, .16));
}

/* --- layered decoration, all centred on the badge --- */
.brand-halo,
.brand-radar,
.brand-dial {
  position: absolute; left: 50%; top: 50%;
  translate: -50% -50%;
  pointer-events: none;
}

/* soft rotating gold light behind the mark */
.brand-halo {
  width: 118%; aspect-ratio: 1; border-radius: 50%; z-index: 1;
  background: conic-gradient(from 0deg,
              rgba(192, 145, 63, 0) 0deg,
              rgba(192, 145, 63, .30) 70deg,
              rgba(17, 41, 77, .14) 150deg,
              rgba(192, 145, 63, 0) 250deg,
              rgba(192, 145, 63, .22) 330deg,
              rgba(192, 145, 63, 0) 360deg);
  filter: blur(26px);
  opacity: 0;
}

/* radar pulses — a nod to what the business actually does */
.brand-radar { width: 100%; aspect-ratio: 1; z-index: 2; }
.brand-radar i {
  position: absolute; inset: 0; margin: auto;
  width: 100%; height: 100%; border-radius: 50%;
  border: 1px solid rgba(192, 145, 63, .55);
  opacity: 0;
}

/* precision dial: a slow dashed ring with a travelling gold marker */
.brand-dial {
  width: 126%; aspect-ratio: 1; border-radius: 50%; z-index: 1;
  border: 1px dashed rgba(192, 145, 63, .38);
  opacity: 0;
}
.brand-dial b {
  position: absolute; top: -6px; left: 50%; margin-left: -6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(192, 145, 63, .18), 0 0 16px rgba(192, 145, 63, .85);
}

/* =========================================================
   CARDS / GRIDS
   ========================================================= */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px;
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--gold-pale); box-shadow: var(--shadow); }
.card h3 { margin-bottom: .45em; }
.card p:last-child { margin-bottom: 0; }
.card p { font-size: .94rem; }

.card-icon {
  width: 48px; height: 48px; border-radius: 12px; margin-bottom: 18px;
  display: grid; place-items: center;
  background: var(--gold-tint); border: 1px solid var(--gold-pale);
}
.card-icon svg { width: 23px; height: 23px; color: var(--gold-dark); }

.card-link { display: inline-flex; align-items: center; gap: 6px; font-size: .89rem; font-weight: 700; margin-top: 14px; color: var(--navy-mid); }
.card-link svg { width: 15px; height: 15px; transition: transform .2s ease; }
.card-link:hover { color: var(--gold-dark); }
.card-link:hover svg { transform: translateX(4px); }

/* Feature list */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.check-list li { display: flex; gap: 13px; align-items: flex-start; color: var(--text-mid); }
.check-list li svg { width: 20px; height: 20px; color: var(--ok); flex-shrink: 0; margin-top: 3px; }
.check-list strong { color: var(--navy); display: block; font-weight: 700; }

/* Who we serve */
.audience-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.audience {
  text-align: center; padding: 24px 12px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.audience:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: var(--shadow); }
.audience svg { width: 30px; height: 30px; color: var(--gold-dark); margin: 0 auto 12px; }
.audience span { font-size: .88rem; font-weight: 700; color: var(--navy); }

/* =========================================================
   PROCESS / STEPS
   ========================================================= */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; position: relative; }
.steps::before {
  content: ''; position: absolute; top: 26px; left: 8%; right: 8%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-pale), var(--gold-pale), transparent);
}
.step { position: relative; text-align: center; }
.step-num {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 16px;
  display: grid; place-items: center; position: relative; z-index: 2;
  background: linear-gradient(135deg, var(--navy-mid), var(--navy));
  color: var(--gold-light); font-family: var(--font-head); font-weight: 800; font-size: 1.15rem;
  box-shadow: 0 0 0 6px var(--bg), 0 8px 18px rgba(17, 41, 77, .28);
}
.section-alt .step-num { box-shadow: 0 0 0 6px var(--bg-alt), 0 8px 18px rgba(17, 41, 77, .28); }
.step h3 { font-size: 1rem; margin-bottom: .35em; }
.step p { font-size: .88rem; margin: 0; }

/* =========================================================
   COUNTIES / SERVICE AREA
   ========================================================= */
.county-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px;
}
.county {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 15px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border);
  font-size: .89rem; color: var(--text-mid);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.county:hover { border-color: var(--gold); color: var(--navy); background: var(--gold-tint); }
.county svg { width: 15px; height: 15px; color: var(--gold-dark); flex-shrink: 0; }

.area-banner {
  margin-top: 30px; text-align: center; padding: 22px;
  border-radius: var(--radius); border: 1px dashed var(--gold);
  background: var(--gold-tint);
}
.area-banner strong { color: var(--navy); font-size: 1.06rem; }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.quote {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--gold); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-sm);
}
.quote p { font-style: italic; color: var(--navy); font-size: .98rem; }
.quote footer { font-size: .85rem; color: var(--text-dim); font-style: normal; }
.quote footer strong { color: var(--text-mid); display: block; font-style: normal; }

.placeholder-note {
  padding: 30px; text-align: center; border-radius: var(--radius);
  border: 1px dashed var(--border-lit); background: var(--bg-alt); color: var(--text-dim);
  font-size: .93rem;
}

/* =========================================================
   FAQ ACCORDION
   ========================================================= */
.faq { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }
.faq-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease;
}
.faq-item.open { border-color: var(--gold-pale); }
.faq-q {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 19px 22px; text-align: left;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--navy);
}
.faq-q:hover { color: var(--gold-dark); }
.faq-icon {
  width: 22px; height: 22px; flex-shrink: 0; color: var(--gold);
  transition: transform .25s ease;
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a-inner { padding: 0 22px 20px; }
.faq-a p { font-size: .94rem; margin: 0; }

/* =========================================================
   FORMS
   ========================================================= */
.form-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 32px;
  box-shadow: var(--shadow);
}
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .86rem; font-weight: 700; color: var(--navy); }
.field .req { color: var(--gold-dark); }
.field input, .field select, .field textarea {
  background: #fff; border: 1px solid var(--border-lit); border-radius: var(--radius-sm);
  padding: 12px 14px; color: var(--navy); font-family: var(--font); font-size: .94rem;
  transition: border-color .18s ease, box-shadow .18s ease; width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: #9AA5B8; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(192, 145, 63, .18);
}
.field textarea { resize: vertical; min-height: 130px; }
.field .hint { font-size: .78rem; color: var(--text-dim); }
.checkbox-row { display: flex; gap: 11px; align-items: flex-start; }
.checkbox-row input { width: auto; margin-top: 4px; flex-shrink: 0; }
.checkbox-row label { font-weight: 400; font-size: .87rem; color: var(--text-mid); }

.form-note {
  margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--gold-tint); border: 1px solid var(--gold-pale);
  font-size: .84rem; color: #6B4F1A;
}
.form-note a { color: var(--gold-dark); text-decoration: underline; }
.form-status {
  margin-top: 18px; font-size: .9rem; display: none;
  padding: 13px 16px; border-radius: var(--radius-sm); font-weight: 600;
  border: 1px solid transparent;
}
.form-status.show { display: block; }
.form-status.ok  { color: #145C39; background: #EDF7F1; border-color: #B4DCC6; }
.form-status.err { color: #8A2A20; background: #FDF1EF; border-color: #F0C6BF; }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* =========================================================
   PAYMENTS — fee cards
   ========================================================= */
.fee-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }

.fee-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.fee-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--gold-pale); }

.fee-thumb { position: relative; overflow: hidden; background: var(--navy); }
.fee-thumb img { width: 100%; height: auto; display: block; transition: transform .5s ease; }
.fee-card:hover .fee-thumb img { transform: scale(1.04); }

.fee-body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.fee-body h3 { font-size: 1.18rem; margin-bottom: .35em; }

.fee-price {
  font-family: var(--font-head); font-weight: 800;
  font-size: 2rem; color: var(--navy); line-height: 1.1;
  margin: 0 0 4px;
}
.fee-price .cur { font-size: .62em; vertical-align: .42em; margin-right: 2px; color: var(--gold-dark); }
.fee-price.variable { font-size: 1.35rem; }
.fee-meta {
  display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-dark);
  background: var(--gold-tint); border: 1px solid var(--gold-pale);
  padding: 4px 10px; border-radius: 999px; margin-bottom: 16px;
}
.fee-body p { font-size: .93rem; }
.fee-body .btn { margin-top: auto; }

.fee-secure {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 12px; font-size: .78rem; color: var(--text-dim);
}
.fee-secure svg { width: 14px; height: 14px; color: var(--ok); flex-shrink: 0; }

/* PDO / funding notice */
.notice-panel {
  background: linear-gradient(160deg, var(--gold-tint), #ffffff);
  border: 1px solid var(--gold-pale); border-left: 4px solid var(--gold);
  border-radius: var(--radius); padding: 26px 30px;
  display: flex; gap: 20px; align-items: flex-start;
}
.notice-panel .ni {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--gold-pale);
}
.notice-panel .ni svg { width: 23px; height: 23px; color: var(--gold-dark); }
.notice-panel h3 { font-size: 1.02rem; margin-bottom: .4em; }
.notice-panel p:last-child { margin-bottom: 0; }
.notice-panel p { font-size: .93rem; }

/* =========================================================
   PAYMENT CONFIRMATION MODAL
   ========================================================= */
.pay-modal {
  position: fixed; inset: 0; z-index: 300;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(8, 25, 47, .62);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.pay-modal.open { display: flex; }

.pay-modal-box {
  background: #fff; border-radius: 20px; max-width: 480px; width: 100%;
  padding: 40px 34px 32px; text-align: center; position: relative;
  border-top: 4px solid var(--gold);
  box-shadow: 0 30px 70px rgba(8, 25, 47, .45);
}
.pay-modal-box h2 { font-size: 1.55rem; margin-bottom: .4em; }
.pay-modal-box p { font-size: .95rem; }
.pay-modal-box .paid-for {
  display: inline-block; margin: 4px 0 18px;
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
  color: var(--navy); background: var(--gold-tint);
  border: 1px solid var(--gold-pale); border-radius: 999px; padding: 7px 18px;
}
.pay-modal-actions { display: grid; gap: 10px; margin-top: 24px; }

.pay-check {
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 22px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, #E9F6EF, #D3EEE0);
  border: 2px solid #9BD9BC;
}
.pay-check svg { width: 40px; height: 40px; color: var(--ok); }

.pay-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-mid); display: grid; place-items: center;
}
.pay-modal-close:hover { background: var(--navy-soft); color: var(--navy); }
.pay-modal-close svg { width: 17px; height: 17px; }

/* =========================================================
   CONTACT CARDS
   ========================================================= */
.contact-methods { display: grid; gap: 16px; }
.contact-method {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm);
}
.contact-method .ci {
  width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--gold-tint); border: 1px solid var(--gold-pale);
}
.contact-method .ci svg { width: 21px; height: 21px; color: var(--gold-dark); }
.contact-method h3 { font-size: .97rem; margin-bottom: .2em; }
.contact-method p { font-size: .91rem; margin: 0; }
.contact-method a { font-weight: 700; }

/* =========================================================
   CTA STRIP
   ========================================================= */
.cta-strip {
  background: linear-gradient(120deg, var(--band), var(--band-2) 55%, #0E2649);
  padding: 62px 0; text-align: center; position: relative; overflow: hidden;
  border-top: 3px solid var(--gold);
}
.cta-strip::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(700px 320px at 50% 0%, rgba(192, 145, 63, .26), transparent 70%);
}
.cta-strip .container { position: relative; z-index: 2; }
.cta-strip h2 { margin-bottom: .4em; color: #fff; }
.cta-strip p { max-width: 620px; margin: 0 auto 28px; color: var(--band-text); }
.cta-actions { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }
.cta-strip .btn-primary {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--navy); box-shadow: 0 8px 24px rgba(0, 0, 0, .28); font-weight: 700;
}
.cta-strip .btn-primary:hover { color: var(--navy-deep); background: var(--gold-light); }
.cta-strip .btn-outline { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.cta-strip .btn-outline:hover { background: rgba(255, 255, 255, .12); border-color: var(--gold-light); color: #fff; }

/* =========================================================
   PAGE HEADER (inner pages)
   ========================================================= */
.page-header {
  padding: 62px 0 52px; border-bottom: 1px solid var(--border);
  background:
    radial-gradient(760px 340px at 22% -20%, rgba(192, 145, 63, .14), transparent 65%),
    linear-gradient(180deg, #F8FAFE, var(--bg-alt));
}
.page-header h1 { margin-bottom: .3em; }
.page-header p { font-size: 1.08rem; max-width: 700px; margin: 0; }
.breadcrumb { font-size: .82rem; color: var(--text-dim); margin-bottom: 16px; }
.breadcrumb a { color: var(--text-dim); }
.breadcrumb a:hover { color: var(--gold-dark); }
.breadcrumb span { margin: 0 7px; opacity: .5; }

/* =========================================================
   PROSE (legal pages)
   ========================================================= */
.prose { max-width: 820px; }
.prose h2 {
  font-size: 1.35rem; margin-top: 2.2em; padding-bottom: .4em;
  border-bottom: 1px solid var(--border);
}
.prose h3 { font-size: 1.05rem; margin-top: 1.7em; color: var(--navy-mid); }
.prose ul, .prose ol { color: var(--text-mid); padding-left: 22px; margin-bottom: 1.2em; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--gold); }
.prose .updated { font-size: .87rem; color: var(--text-dim); }
.prose strong { color: var(--navy); }

.legal-toc {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-left: 3px solid var(--gold); border-radius: var(--radius);
  padding: 22px 26px; margin-bottom: 40px;
}
.legal-toc h2 { margin: 0 0 12px; font-size: 1rem; border: 0; padding: 0; }
.legal-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.legal-toc li { margin-bottom: 6px; font-size: .9rem; }

/* Split layout */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.wide-left { grid-template-columns: 1.2fr .8fr; }
.split.wide-right { grid-template-columns: .8fr 1.2fr; }
.split.top { align-items: start; }

.stat-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px; text-align: center;
  box-shadow: var(--shadow-sm); border-top: 3px solid var(--gold);
}
.stat-box .n { font-family: var(--font-head); font-size: 2rem; font-weight: 800; color: var(--navy); line-height: 1.1; }
.stat-box .l { font-size: .82rem; color: var(--text-dim); }

/* spec table used on the services page */
.spec-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.spec-table th, .spec-table td {
  text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--border);
}
.spec-table th { color: var(--navy); font-family: var(--font-head); font-weight: 700; width: 42%; }
.spec-table td { color: var(--text-mid); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.spec-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--gold);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: linear-gradient(180deg, var(--band), var(--navy-deep));
  border-top: 3px solid var(--gold);
  padding: 62px 0 0; color: var(--band-text);
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }

/* The badge is navy + gold. On a navy footer the navy vanishes, so it sits
   on a light plate — same trick print designers use for a dark background. */
.footer-brand-link { display: inline-block; }
.footer-logo-plate {
  display: inline-grid; place-items: center;
  padding: 20px 30px; border-radius: 20px;
  background: linear-gradient(160deg, #ffffff, #F7F3EA);
  border: 1px solid rgba(192, 145, 63, .55);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .38), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  position: relative; overflow: hidden;
}
.footer-logo-plate::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, rgba(192, 145, 63, .16), transparent 70%);
  pointer-events: none;
}
.footer-logo { height: 132px; width: auto; position: relative; z-index: 1; }
.footer-brand p { font-size: .9rem; margin-top: 22px; max-width: 330px; color: #AEBDD6; }
.footer-col h4 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--gold-light); margin-bottom: 16px; font-weight: 800;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { color: #C3D0E6; font-size: .92rem; }
.footer-col a:hover { color: var(--gold-light); }
.footer-contact li { font-size: .92rem; color: #C3D0E6; display: flex; gap: 10px; align-items: flex-start; }
.footer-contact svg { width: 16px; height: 16px; color: var(--gold); flex-shrink: 0; margin-top: 4px; }
.footer-contact a { color: #fff; font-weight: 600; }
.footer-contact a:hover { color: var(--gold-light); }

.footer-bottom {
  margin-top: 48px; padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap;
  font-size: .85rem; color: #93A5C2;
}
.footer-bottom nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom a { color: #93A5C2; }
.footer-bottom a:hover { color: var(--gold-light); }

/* =========================================================
   FLOATING REFER BUTTON
   ========================================================= */
.float-refer {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  box-shadow: 0 12px 30px rgba(192, 145, 63, .45);
}

/* =========================================================
   REVEAL (base)
   ========================================================= */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  * { animation: none !important; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px) {
  .audience-grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 30px 18px; }
  .steps::before { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .legal-toc ol { columns: 1; }
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: #fff; border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 12px 20px 20px; display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 14px; font-size: 1rem; }
  .nav-cta .btn { display: none; }

  .brand-logo { height: 52px; }
  .site-header.scrolled .brand-logo { height: 44px; }
  .brand-name { font-size: 1rem; }
  .brand-tag { font-size: .58rem; letter-spacing: .14em; }

  .hero-grid, .split, .split.wide-left, .split.wide-right { grid-template-columns: 1fr; gap: 40px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 66px 0 60px; }
  .section, .brand-showcase { padding: 66px 0; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .container { padding: 0 18px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .audience-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .topbar .container { justify-content: center; }
  .hero-actions .btn, .cta-actions .btn { flex: 1 1 100%; }
  .hero-stats { gap: 22px; }
  .float-refer { right: 14px; bottom: 14px; }
  .form-card { padding: 22px; }
  .county-grid { grid-template-columns: 1fr 1fr; }
  .fee-grid { grid-template-columns: 1fr; }
  .notice-panel { flex-direction: column; gap: 14px; padding: 22px; }
  .pay-modal-box { padding: 32px 22px 26px; }
  .brand-logo { height: 46px; }
  .footer-logo { height: 104px; }
  .footer-logo-plate { padding: 16px 22px; border-radius: 16px; }
  .brand-showcase { padding: 66px 18px; }
  /* below 420px the wordmark would crowd the burger — keep it tight */
  .brand-text { padding-left: 11px; }
  .brand-name { font-size: .93rem; }
  .brand-tag { font-size: .53rem; letter-spacing: .1em; }
  .spec-table th, .spec-table td { display: block; width: 100%; }
  .spec-table th { border-bottom: 0; padding-bottom: 0; }
}