@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light only;
  --navy-950: #0a1230;
  --navy-900: #0f1a3d;
  --navy-800: #16234f;
  --navy-700: #1e2f66;
  --gold-600: #9a7a34;
  --gold-500: #b08d3c;
  --gold-400: #c9a94f;
  --tan-300: #cfae74;
  --cream-50: #fdfcfa;
  --cream-100: #f7f4ee;
  --ink-900: #1c2333;
  --ink-600: #5b6275;
  --ink-400: #8b93a6;
  --line: rgba(20,28,55,0.09);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--cream-50); color-scheme: light only; }

body {
  font-family: 'Inter', sans-serif;
  color: var(--ink-900);
  background: var(--cream-50) !important;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: 'Playfair Display', serif; font-weight: 600; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 32px; }

a { color: inherit; text-decoration: none; }

/* ---------- TOP BAND — solid navy, logo + tagline ---------- */
.topband {
  position: relative;
  background: linear-gradient(165deg, var(--navy-900) 0%, var(--navy-950) 55%, #060a1c 100%);
  padding: 28px 0 32px;
  text-align: center;
  overflow: hidden;
}
.topband::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 15% 0%, rgba(201,169,79,0.14), transparent 55%);
  pointer-events: none;
}
.topband::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 90px, rgba(201,169,79,0.05) 90px 91px);
  pointer-events: none;
}
.topband .mark { position: relative; z-index: 1; height: 112px; width: auto; margin-bottom: 0; }
.topband .brandname { display: none; }
.topband .tagline {
  position: relative; z-index: 1;
  font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500;
  color: var(--gold-400); font-size: 0.98rem; letter-spacing: 0.02em;
  margin-top: 14px;
}

/* ---------- GOLD NAV BAR ---------- */
.navbar { background: var(--tan-300); box-shadow: inset 0 -1px 0 rgba(10,18,48,0.08); position: relative; }
@media (min-width: 781px) {
  .navbar.sticky-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    box-shadow: 0 4px 20px rgba(10,18,48,0.18);
    animation: navSlideDown 0.3s ease;
  }
  @keyframes navSlideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
  }
}
nav.navlist {
  display: flex; align-items: center; justify-content: center; gap: 48px;
  padding: 17px 0; flex-wrap: wrap;
}
nav.navlist a {
  position: relative;
  font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: var(--navy-950);
  padding: 6px 2px;
  display: inline-block;
  transition: color 0.22s ease, transform 0.22s ease;
}
nav.navlist a::after {
  content: "";
  position: absolute; left: 50%; bottom: -2px;
  width: 0; height: 2px; background: var(--navy-950);
  transition: width 0.25s ease, left 0.25s ease;
}
nav.navlist a:hover {
  color: var(--navy-950);
  transform: translateY(-2px) scale(1.08);
}
nav.navlist a:hover::after { width: 100%; left: 0; }
nav.navlist a.nav-highlight {
  background: var(--navy-950); color: white;
  padding: 10px 20px; border-radius: 100px;
}
nav.navlist a.nav-highlight::after { display: none; }
nav.navlist a.nav-highlight:hover {
  background: var(--navy-700); transform: translateY(-2px) scale(1.05);
}

/* ---------- MOBILE NAV TOGGLE ---------- */
.nav-toggle-checkbox { display: none; }
.nav-toggle-btn {
  display: none; position: absolute; right: 24px; top: calc(50% + 10px); transform: translateY(-50%);
  width: 42px; height: 42px; cursor: pointer; z-index: 30;
  flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  background: var(--navy-950); border-radius: 8px;
}
.nav-toggle-btn span {
  display: block; height: 3px; width: 22px; background: white;
  border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease;
}
@media (max-width: 780px) {
  .navbar { position: relative; min-height: 0; background: transparent; box-shadow: none; }
  .nav-toggle-btn {
    display: flex; position: fixed; top: 8px; right: 8px; transform: none;
  }
  nav.navlist {
    display: none; flex-direction: column; align-items: center; gap: 6px;
    padding: 8px 0 20px;
    position: fixed; top: 70px; left: 16px; right: 16px;
    background: var(--tan-300); border-radius: 8px; z-index: 29;
    box-shadow: 0 12px 30px rgba(10,18,48,0.3);
  }
  .nav-toggle-checkbox:checked ~ nav.navlist { display: flex; }
  nav.navlist a { padding: 12px 0; width: 100%; text-align: center; }
  nav.navlist a::after { display: none; }
  nav.navlist a.nav-highlight { margin-top: 8px; }
  .nav-toggle-checkbox:checked ~ .nav-toggle-btn span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .nav-toggle-checkbox:checked ~ .nav-toggle-btn span:nth-child(2) { opacity: 0; }
  .nav-toggle-checkbox:checked ~ .nav-toggle-btn span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
}

/* ---------- PHOTO HERO ---------- */
.photo-hero {
  position: relative;
  min-height: 560px;
  background:
    linear-gradient(rgba(10,18,48,0.82), rgba(10,18,48,0.82)),
    url('assets/hero-house.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.photo-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 75% 30%, rgba(201,169,79,0.25), transparent 55%),
    repeating-linear-gradient(115deg, transparent 0 90px, rgba(255,255,255,0.03) 90px 91px);
}
.hero-graphic {
  position: absolute; z-index: 1;
  right: -60px; top: 50%; transform: translateY(-50%);
  width: 460px; height: 460px;
  color: rgba(255,255,255,0.16);
  pointer-events: none;
}
@media (max-width: 900px) { .hero-graphic { display: none; } }
.photo-hero-inner {
  position: relative; z-index: 2;
  max-width: 620px; padding: 80px 32px;
  margin: 0 auto;
  color: white;
  text-align: center;
}
.photo-hero .eyebrow {
  color: var(--gold-400); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; margin-bottom: 18px; display: block;
}
.photo-hero h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.3rem); line-height: 1.15; margin-bottom: 18px;
  color: white;
}
.photo-hero h1 em { font-style: italic; color: var(--gold-400); }
.photo-hero .sub {
  font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.15rem;
  color: var(--tan-300); margin-bottom: 18px;
}
.photo-hero p.lead {
  color: rgba(255,255,255,0.82); font-size: 1.02rem; max-width: 46ch; margin: 0 auto 32px;
}
.photo-hero .btn-cta {
  display: inline-block; background: var(--tan-300); color: var(--navy-950);
  font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.82rem;
  padding: 16px 34px; border-radius: 3px;
}
.photo-hero .btn-cta:hover { background: var(--gold-400); }
.hero-badge {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  margin: 22px auto 0; font-size: 0.82rem; color: rgba(255,255,255,0.75); font-weight: 500;
  width: fit-content;
}
.hero-badge svg { width: 16px; height: 16px; color: var(--gold-400); flex-shrink: 0; }

/* ---------- SECTION SHARED ---------- */
section { padding: 92px 0; }
.section-head { max-width: 640px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-eyebrow {
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-600); font-weight: 700; margin-bottom: 14px; display: block;
}
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 600; color: var(--navy-950); line-height: 1.28; }
.section-head p { color: var(--ink-600); margin-top: 16px; font-size: 1.02rem; }

/* ---------- HOW IT WORKS ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; gap: 36px; } }
.step-card {
  background: var(--navy-950); color: white; padding: 40px 32px; border-radius: 4px;
  border-top: 3px solid var(--gold-500);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.3s ease;
  cursor: default;
}
.step-card:hover , .step-card.tapped  {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 20px 40px -12px rgba(10,18,48,0.4);
}
.step-card:hover , .step-card.tapped  { background: #e4dcc8; }
.step-card h3 {
  position: relative; display: inline-block;
  font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; color: white;
  transition: color 0.3s ease;
}
.step-card:hover h3 , .step-card.tapped h3  { color: var(--navy-950); }
.step-card h3::after {
  content: ""; position: absolute; left: 0; bottom: -4px;
  width: 0; height: 2px; background: var(--navy-950);
  transition: width 0.3s ease, background 0.3s ease;
}
.step-card:hover h3::after , .step-card.tapped h3::after  { width: 100%; }
.step-card .step-icon { width: 42px; height: 42px; color: var(--gold-400); margin-bottom: 16px; display: block; transition: transform 0.25s ease, color 0.3s ease; }
.step-card:hover .step-icon , .step-card.tapped .step-icon  { transform: scale(1.1); color: var(--navy-950); }
.step-card .num {
  font-family: 'Playfair Display', serif; font-size: 0.9rem; color: var(--gold-400);
  font-weight: 700; letter-spacing: 0.08em; margin-bottom: 16px; display: block;
  transition: color 0.3s ease;
}
.step-card:hover .num , .step-card.tapped .num  { color: var(--gold-600); }
.step-card p { color: rgba(255,255,255,0.68); font-size: 0.94rem; transition: color 0.3s ease; }
.step-card:hover p , .step-card.tapped p  { color: rgba(10,18,48,0.75); }

/* ---------- TRANSPARENCY — tan band ---------- */
/* ---------- WHY CHOOSE US ---------- */
.why-section {
  background:
    radial-gradient(circle at 92% 8%, rgba(176,141,60,0.06), transparent 45%),
    var(--cream-50);
  position: relative;
}
.why-graphic {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: -20px; transform: translateX(-50%);
  width: 300px; height: 300px;
  color: var(--gold-500); opacity: 0.14;
}
@media (max-width: 900px) { .why-graphic { width: 200px; height: 200px; top: -10px; } }
.why-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; position: relative; z-index: 1; }
@media (max-width: 900px) { .why-layout { grid-template-columns: 1fr; gap: 40px; } }
.why-photo {
  position: sticky; top: 100px;
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 24px 48px -12px rgba(10,18,48,0.28);
  border: 6px solid white;
}
@media (max-width: 900px) { .why-photo { position: static; } }
.why-photo img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4/3; }
@media (max-width: 900px) { .why-photo img { aspect-ratio: 16/10; } }

.why-grid { display: flex; flex-direction: column; gap: 36px; }
.why-card {
  text-align: left; transition: transform 0.25s ease, background 0.3s ease, box-shadow 0.3s ease;
  display: flex; gap: 20px; align-items: flex-start;
  padding: 24px; border-radius: 8px; margin: -24px;
}
.why-text { flex: 1; min-width: 0; }
@media (max-width: 560px) { .why-card { flex-direction: column; } }
.why-card:hover , .why-card.tapped  {
  transform: translateY(-4px);
  background: var(--navy-950);
  box-shadow: 0 20px 40px -12px rgba(10,18,48,0.35);
}
.why-card:hover .why-icon , .why-card.tapped .why-icon  { background: var(--gold-500); color: white; border-color: var(--gold-500); }
.why-icon {
  width: 56px; height: 56px; border: 1.5px solid var(--gold-500); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-600); margin-bottom: 0; flex-shrink: 0;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.why-icon svg { width: 30px; height: 30px; }
.why-card h3 { font-size: 1.1rem; font-weight: 600; color: var(--navy-950); margin-bottom: 10px; transition: color 0.3s ease; }
.why-card:hover h3 , .why-card.tapped h3  { color: white; }
.why-card p { color: var(--ink-600); font-size: 0.95rem; margin-bottom: 14px; transition: color 0.3s ease; }
.why-card:hover p , .why-card.tapped p  { color: rgba(255,255,255,0.75); }
.why-detail {
  display: block; font-size: 0.82rem; font-weight: 600; color: var(--gold-600);
  padding-top: 14px; border-top: 1px solid var(--line);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.why-card:hover .why-detail , .why-card.tapped .why-detail  { color: var(--gold-400); border-color: rgba(255,255,255,0.15); }

.stats-strip {
  margin-top: 72px; background: var(--navy-950); border-radius: 6px;
  display: grid; grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 700px) { .stats-strip { grid-template-columns: 1fr; margin-top: 48px; } }
.stat { padding: 40px 28px; text-align: center; border-right: 1px solid rgba(255,255,255,0.1); }
.stat:last-child { border-right: none; }
@media (max-width: 700px) {
  .stat {
    padding: 20px 24px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: space-between; text-align: left; gap: 16px;
  }
  .stat:last-child { border-bottom: none; }
  .stat-num { margin-bottom: 0; font-size: 1.8rem; flex-shrink: 0; }
  .stat-label { margin: 0; max-width: none; text-align: right; }
}
.stat-num { font-family: 'Playfair Display', serif; font-size: 2.4rem; font-weight: 700; color: var(--gold-400); margin-bottom: 8px; }
.stat-label { font-size: 0.86rem; color: rgba(255,255,255,0.7); max-width: 22ch; margin: 0 auto; }

.transparency-section { background: var(--tan-300); }
.transparency-section .section-eyebrow { color: var(--navy-950); }
.transparency-section .section-head p { color: rgba(10,18,48,0.72); }
.fee-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(10,18,48,0.15); margin-top: 12px; }
@media (max-width: 820px) { .fee-grid { grid-template-columns: repeat(2, 1fr); } }
.fee-item { background: var(--tan-300); padding: 30px 20px; text-align: center; }
.fee-value { font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 600; color: var(--navy-950); }
.fee-label { font-size: 0.82rem; color: var(--navy-900); margin-bottom: 8px; }

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; }
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item summary {
  padding: 22px 4px; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-size: 1.02rem; font-weight: 600; color: var(--navy-950);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex-shrink: 0;
  font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 600;
  color: var(--gold-600); transition: transform 0.25s ease;
  width: 28px; height: 28px; border: 1.5px solid var(--gold-500); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.faq-item[open] summary::after { content: "\2212"; transform: rotate(180deg); }
.faq-item p { color: var(--ink-600); font-size: 0.96rem; max-width: 62ch; padding: 0 4px 22px; }
.faq-item[open] summary { padding-bottom: 10px; }

/* ---------- CONTACT FORM ---------- */
.contact-section { background: var(--navy-950); color: white; }
.contact-section .section-eyebrow { color: var(--gold-400); }
.contact-section .section-head h2 { color: white; }
.contact-section .section-head p { color: rgba(255,255,255,0.65); }

.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; gap: 36px; } }
.contact-photo {
  position: relative; border-radius: 8px; overflow: hidden;
  box-shadow: 0 24px 48px -12px rgba(0,0,0,0.5);
}
.contact-photo img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover; }
.contact-photo-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(10,18,48,0.92), transparent);
  color: white; font-family: 'Playfair Display', serif; font-style: italic;
  font-size: 1.02rem; padding: 32px 24px 18px;
  text-align: center;
}

form.contact-form, form.claim-form {
  max-width: 560px; display: grid; gap: 14px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
form.contact-form input,
form.contact-form textarea,
form.claim-form input {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18);
  color: white; padding: 14px 16px; border-radius: 4px; font-size: 0.94rem; font-family: inherit;
}
form.claim-form input {
  background: white; border: 1px solid var(--line); color: var(--navy-950);
}
form.contact-form input::placeholder, form.contact-form textarea::placeholder { color: rgba(255,255,255,0.4); }
form.claim-form input::placeholder { color: var(--ink-400); }
form.contact-form input:focus, form.contact-form textarea:focus, form.claim-form input:focus { outline: none; border-color: var(--gold-500); }
form.contact-form textarea { min-height: 120px; resize: vertical; }

.consent {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 0.78rem; color: rgba(255,255,255,0.55); line-height: 1.5; padding: 6px 2px;
}
.claim-section .consent { color: var(--ink-600); }
.consent input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--gold-500); }
.consent a { color: var(--gold-400); text-decoration: underline; }
.claim-section .consent a { color: var(--navy-950); }

form.contact-form button, form.claim-form button {
  background: var(--gold-500); color: var(--navy-950); font-weight: 700; padding: 15px; border-radius: 4px; border: none;
  font-size: 0.92rem; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; margin-top: 6px;
}
form.contact-form button:hover, form.claim-form button:hover { background: var(--gold-400); }
.form-note { font-size: 0.8rem; color: rgba(255,255,255,0.45); margin-top: 4px; text-align: center; }
.claim-section .form-note { color: var(--ink-400); }
/* Empty until Turnstile actually renders a widget into it, so an
   unconfigured site key leaves no visible gap in the form. */
.cf-turnstile-slot:empty { display: none; }
.cf-turnstile-slot { margin-top: 0; display: flex; justify-content: center; }
/* With appearance: interaction-only the widget stays invisible unless Cloudflare needs a click. */
.cf-turnstile-slot iframe { max-width: 100%; }
.form-status { display: none; font-size: 0.86rem; text-align: center; margin-top: 14px; padding: 12px 16px; border-radius: 4px; line-height: 1.5; }
.form-status.visible { display: block; }
.form-status.success { background: rgba(60,140,90,0.12); color: #2f6b46; }
.form-status.error { background: rgba(180,60,60,0.1); color: #a13a3a; }
.form-status.warn { background: rgba(176,141,60,0.12); color: #8a6d28; }
.contact-section .form-status.success { background: rgba(60,140,90,0.18); color: #8fd6a6; }
.contact-section .form-status.error { background: rgba(200,80,80,0.18); color: #f0a3a3; }
.contact-section .form-status.warn { background: rgba(176,141,60,0.2); color: #e8cd8a; }
.field-hint { font-size: 0.8rem; color: var(--ink-400); margin: -8px 2px 4px; line-height: 1.4; }

.claim-section { background: var(--cream-100); }

/* ---------- FOOTER ---------- */
footer {
  position: relative; overflow: hidden; color: white; padding: 44px 0;
  background: linear-gradient(165deg, var(--navy-900) 0%, var(--navy-950) 55%, #060a1c 100%);
}
footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 15% 0%, rgba(201,169,79,0.14), transparent 55%);
}
footer::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg, transparent 0 90px, rgba(201,169,79,0.05) 90px 91px);
}
footer > .wrap { position: relative; z-index: 1; }
footer { border-top: 1px solid rgba(201,169,79,0.75); }
footer .foot-response { font-size: 0.76rem; color: rgba(255,255,255,0.35); max-width: 320px; margin: 16px auto 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.14); text-align: center; }
.foot-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.foot-inner .brand { display: flex; align-items: center; justify-content: center; gap: 11px; font-weight: 600; font-size: 0.92rem; }
.foot-inner .brand .mark { height: 50px; width: auto; }
.foot-inner .brand .brandtext { display: none; }
.foot-contact { font-size: 0.86rem; color: rgba(255,255,255,0.6); text-align: center; }
.foot-links { display: flex; justify-content: center; gap: 10px; font-size: 0.82rem; color: rgba(255,255,255,0.6); margin-top: 20px; }
.foot-links a:hover { color: var(--gold-400); }
.foot-links span { color: rgba(255,255,255,0.3); }
footer .copyright { font-size: 0.78rem; color: rgba(255,255,255,0.5); margin-top: 22px; text-align: center; }
footer .legal { font-size: 0.76rem; color: rgba(255,255,255,0.35); max-width: 660px; margin: 8px auto 0; text-align: center; }

/* ---------- LEGAL PAGES ---------- */
.legal-page { padding: 80px 0 100px; }
.legal-wrap { max-width: 760px; }
.legal-page h1 { font-size: clamp(2rem, 3.4vw, 2.6rem); color: var(--navy-950); margin: 18px 0 10px; }
.legal-page .updated { font-size: 0.86rem; color: var(--ink-400); margin-bottom: 44px; }
.legal-page h2 { font-family: 'Inter', sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--navy-950); margin: 40px 0 14px; }
.legal-page h3 { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 600; color: var(--navy-950); margin: 24px 0 10px; }
.legal-page p { color: var(--ink-600); font-size: 0.98rem; margin-bottom: 14px; }
.legal-page ul { color: var(--ink-600); font-size: 0.98rem; margin: 0 0 14px 22px; }
.legal-page li { margin-bottom: 8px; }
.legal-page a { color: var(--navy-950); text-decoration: underline; }

/* ---------- claim-section eyebrow override for light bg ---------- */
.claim-section .section-eyebrow { color: var(--gold-600); }
.claim-section .section-head h2 { color: var(--navy-950); }
.claim-section .section-head p { color: var(--ink-600); }

/* ---------- nav current-page indicator ---------- */
nav.navlist a.nav-current { color: var(--navy-950); }
nav.navlist a.nav-current::after { left: 0; width: 100%; }

/* ---------- about page: inner-page hero band ---------- */
.page-hero {
  background: linear-gradient(165deg, var(--navy-900) 0%, var(--navy-950) 55%, #060a1c 100%);
  padding: 76px 0 68px;
  text-align: center;
}
.page-hero .eyebrow {
  color: var(--gold-400); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; margin-bottom: 18px; display: block;
}
.page-hero h1 {
  font-size: clamp(2rem, 4.2vw, 2.8rem); line-height: 1.2; color: white;
  max-width: 760px; margin: 0 auto 20px;
}
.page-hero .lead {
  color: rgba(255,255,255,0.78); font-size: 1.05rem; max-width: 620px; margin: 0 auto;
}

/* ---------- about page: story section ---------- */
.about-photo img { aspect-ratio: 4/5 !important; object-position: center 20%; }
@media (max-width: 900px) { .about-photo img { aspect-ratio: 4/5 !important; } }
.about-story { background: var(--cream-50); }
.about-text h2 { font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 600; color: var(--navy-950); margin: 8px 0 20px; }
.about-text p { color: var(--ink-600); font-size: 1.02rem; margin-bottom: 18px; }
.about-text p:last-child { margin-bottom: 0; }

/* ---------- about page: mission section ---------- */
.about-mission {
  background:
    radial-gradient(circle at 8% 92%, rgba(176,141,60,0.06), transparent 45%),
    var(--cream-100);
}
.mission-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
@media (max-width: 860px) { .mission-grid { grid-template-columns: 1fr; gap: 52px; } }
.mission-card {
  text-align: left; padding: 24px; border-radius: 8px; margin: -24px;
  transition: transform 0.25s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.mission-card:hover , .mission-card.tapped  {
  transform: translateY(-4px);
  background: var(--navy-950);
  box-shadow: 0 20px 40px -12px rgba(10,18,48,0.35);
}
.mission-card:hover .why-icon , .mission-card.tapped .why-icon  { background: var(--gold-500); color: white; border-color: var(--gold-500); }
.mission-card h3 { font-size: 1.1rem; font-weight: 600; color: var(--navy-950); margin: 18px 0 10px; transition: color 0.3s ease; }
.mission-card:hover h3 , .mission-card.tapped h3  { color: white; }
.mission-card p { color: var(--ink-600); font-size: 0.95rem; transition: color 0.3s ease; }
.mission-card:hover p , .mission-card.tapped p  { color: rgba(255,255,255,0.75); }

/* ---------- about page: closing CTA ---------- */
.about-cta {
  background: var(--navy-950);
  text-align: center;
}
.about-cta h2 { color: white; font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 600; margin-bottom: 12px; }
.about-cta p { color: rgba(255,255,255,0.72); margin-bottom: 32px; }
.about-cta .btn-cta {
  display: inline-block; background: var(--tan-300); color: var(--navy-950);
  font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.82rem;
  padding: 16px 34px; border-radius: 3px;
}
.about-cta .btn-cta:hover { background: var(--gold-400); }

/* ---------- popup overlay shared styles ---------- */
.popup-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6,10,28,0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.popup-overlay.visible { opacity: 1; visibility: visible; }
.popup-card {
  position: relative;
  background: var(--cream-50);
  border-radius: 10px;
  max-width: 480px; width: 100%;
  padding: 44px 40px 36px;
  text-align: center;
  box-shadow: 0 40px 80px -20px rgba(6,10,28,0.5);
  transform: translateY(16px) scale(0.97);
  transition: transform 0.3s ease;
}
.popup-overlay.visible .popup-card { transform: translateY(0) scale(1); }
.popup-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: 1.5px solid var(--line);
  color: var(--ink-400); font-size: 1.1rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.popup-close:hover { background: var(--navy-950); color: white; border-color: var(--navy-950); }
.popup-card .popup-eyebrow {
  color: var(--gold-600); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; margin-bottom: 14px; display: block;
}
.popup-card h3 {
  font-size: 1.5rem; font-weight: 600; color: var(--navy-950); margin-bottom: 12px; line-height: 1.25;
}
.popup-card p { color: var(--ink-600); font-size: 0.98rem; margin-bottom: 26px; line-height: 1.55; }
.popup-card .btn-cta {
  display: inline-block; background: var(--navy-950); color: white;
  font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.82rem;
  padding: 15px 34px; border-radius: 3px; width: 100%; box-sizing: border-box;
  transition: background 0.2s ease;
}
.popup-card .btn-cta:hover { background: var(--gold-600); }
.popup-card .popup-dismiss {
  display: block; margin-top: 16px; font-size: 0.82rem; color: var(--ink-400);
  text-decoration: underline; cursor: pointer; background: none; border: none;
}
.popup-card .popup-dismiss:hover { color: var(--ink-600); }

/* exit popup accent */
#exitPopup .popup-card { border-top: 4px solid var(--gold-500); }
/* consult popup accent */
#consultPopup .popup-card { border-top: 4px solid var(--navy-700); }

@media (max-width: 560px) {
  .popup-card { padding: 36px 26px 28px; }
  .popup-card h3 { font-size: 1.28rem; }
}

/* ---------- cookie consent banner ---------- */
/* Outer strip is a full-width, invisible positioning wrapper flush to the
   viewport bottom; the actual visual is the floating, glass-blend card
   centered inside it. The chat launcher and back-to-top button always
   render on top of it (see z-index 260/261 above), so they're never
   actually hidden by it. */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
  display: flex; justify-content: center;
  padding: 0 20px 18px;
  pointer-events: none;
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
.cookie-banner.visible { transform: translateY(0); opacity: 1; pointer-events: auto; }

/* Wide, short bar rather than a tall card, and a translucent, blurred
   background so it reads as sitting IN the page rather than a solid block
   dropped on top of it. */
.cookie-card {
  pointer-events: auto;
  width: 100%; max-width: 760px;
  background: rgba(10,18,48,0.82);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  color: rgba(255,255,255,0.85);
  border-radius: 44px;
  border: 1px solid rgba(176,141,60,0.4);
  box-shadow: 0 16px 40px -14px rgba(6,10,28,0.5);
  padding: 12px 22px 12px 20px;
  position: relative;
  transition: border-radius 0.3s ease;
}
/* Once preferences are open the card grows tall, so the pill radius from
   the short collapsed state is swapped for a normal rounded-rectangle
   radius instead of stretching into a capsule. */
.cookie-card.prefs-expanded {
  border-radius: 22px;
}

.cookie-card-row { display: flex; align-items: center; gap: 18px; }
.cookie-card-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.cookie-icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
  background: rgba(176,141,60,0.16); border: 1px solid rgba(176,141,60,0.4);
  color: var(--gold-400);
  display: flex; align-items: center; justify-content: center;
}
.cookie-icon svg { width: 16px; height: 16px; }
.cookie-card-main p { font-size: 0.79rem; line-height: 1.4; margin: 0; color: rgba(255,255,255,0.75); }
.cookie-card-main p a { color: var(--gold-400); text-decoration: underline; }
.cookie-link {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  color: var(--gold-400); text-decoration: underline; font-size: inherit; font-family: inherit;
}
.cookie-link:hover { color: var(--gold-300, var(--gold-400)); }

.cookie-prefs {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s ease, margin-top 0.35s ease, padding-top 0.35s ease;
  margin-top: 0;
}
.cookie-prefs.open { max-height: 280px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.1); }

.cookie-prefs-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.cookie-prefs-heading {
  font-size: 0.78rem; font-weight: 700; color: white; letter-spacing: 0.01em;
}
.cookie-prefs-back {
  display: flex; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer; padding: 4px 8px; margin-right: -8px;
  border-radius: 100px;
  font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.65);
  transition: background 0.2s ease, color 0.2s ease;
}
.cookie-prefs-back svg { width: 13px; height: 13px; flex-shrink: 0; }
.cookie-prefs-back:hover { background: rgba(255,255,255,0.08); color: var(--gold-400); }
.cookie-toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 0;
}
.cookie-toggle-label { display: block; font-size: 0.76rem; font-weight: 700; color: white; }
.cookie-toggle-desc { display: block; font-size: 0.68rem; color: rgba(255,255,255,0.55); margin-top: 1px; line-height: 1.35; }
.cookie-switch {
  flex-shrink: 0; width: 36px; height: 20px; border-radius: 100px;
  background: rgba(255,255,255,0.18); position: relative; cursor: pointer;
  transition: background 0.2s ease;
}
.cookie-switch-thumb {
  position: absolute; top: 2.5px; left: 2.5px; width: 15px; height: 15px; border-radius: 50%;
  background: white; transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.cookie-switch.checked { background: var(--gold-500); }
.cookie-switch.checked .cookie-switch-thumb { transform: translateX(16px); }
.cookie-switch.disabled { opacity: 0.5; cursor: not-allowed; }
.cookie-prefs-save {
  display: flex; justify-content: flex-end; padding-top: 4px;
}
.cookie-prefs-save button {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  background: none; border: 1px solid rgba(176,141,60,0.5); color: var(--gold-400);
  padding: 5px 11px; border-radius: 100px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
.cookie-prefs-save button:hover { background: var(--gold-500); color: var(--navy-950); }

.cookie-card-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-btn {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 10px 16px; border-radius: 100px; cursor: pointer; border: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
}
.cookie-btn:active { transform: scale(0.97); }
.cookie-btn-accept { background: var(--gold-500); color: var(--navy-950); }
.cookie-btn-accept:hover { background: var(--gold-400); }
.cookie-btn-decline { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75); border: 1.5px solid rgba(255,255,255,0.2); }
.cookie-btn-decline:hover { border-color: rgba(255,255,255,0.45); color: white; }

/* Below the row-fits-on-one-line breakpoint, stack it like a normal
   compact card: text on top, buttons full-width below. */
@media (max-width: 720px) {
  .cookie-card { border-radius: 16px; padding: 15px 16px 13px; }
  .cookie-card-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .cookie-card-actions { width: 100%; }
  .cookie-btn { flex: 1; }
}
@media (max-width: 460px) {
  .cookie-card { padding: 13px 14px 12px; border-radius: 14px; }
}

/* ---------- homepage founder teaser section ---------- */
.founder-teaser {
  background:
    radial-gradient(circle at 8% 92%, rgba(176,141,60,0.06), transparent 45%),
    var(--cream-100);
  box-shadow: inset 0 1px 0 rgba(20,28,55,0.06);
}
.founder-teaser-inner {
  display: grid; grid-template-columns: 0.55fr 1fr; gap: 48px; align-items: center;
}
@media (max-width: 780px) {
  .founder-teaser-inner { grid-template-columns: 1fr; gap: 28px; text-align: center; }
}
.founder-teaser-photo img {
  width: 100%; max-width: 280px; aspect-ratio: 1/1; object-fit: cover; object-position: center 20%;
  border-radius: 50%; border: 6px solid white;
  box-shadow: 0 24px 48px -12px rgba(10,18,48,0.28);
  display: block; margin: 0 auto;
}
.founder-teaser-text h2 { font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 600; color: var(--navy-950); margin: 8px 0 16px; }
.founder-teaser-text p { color: var(--ink-600); font-size: 1.02rem; margin-bottom: 20px; }
.founder-teaser-link {
  font-weight: 700; font-size: 0.88rem; letter-spacing: 0.03em; color: var(--gold-600);
  text-decoration: none; border-bottom: 1.5px solid var(--gold-500); padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.founder-teaser-link:hover { color: var(--navy-950); border-color: var(--navy-950); }

/* ---------- homepage: what are surplus funds explainer ---------- */
.explainer-section { background: var(--cream-50); }
.explainer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
@media (max-width: 860px) { .explainer-grid { grid-template-columns: 1fr; gap: 52px; } }
.explainer-card {
  text-align: left; padding: 24px; border-radius: 8px; margin: -24px;
  transition: transform 0.25s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.explainer-card:hover, .explainer-card.tapped {
  transform: translateY(-4px);
  background: var(--navy-950);
  box-shadow: 0 20px 40px -12px rgba(10,18,48,0.35);
}
.explainer-card:hover .why-icon, .explainer-card.tapped .why-icon { background: var(--gold-500); color: white; border-color: var(--gold-500); }
.explainer-card h3 { font-size: 1.1rem; font-weight: 600; color: var(--navy-950); margin: 18px 0 10px; transition: color 0.3s ease; }
.explainer-card:hover h3, .explainer-card.tapped h3 { color: white; }
.explainer-card p { color: var(--ink-600); font-size: 0.95rem; transition: color 0.3s ease; }
.explainer-card:hover p, .explainer-card.tapped p { color: rgba(255,255,255,0.75); }

/* ---------- about page: DIY vs. hire-us value section ---------- */
.about-value {
  background:
    radial-gradient(circle at 92% 8%, rgba(176,141,60,0.06), transparent 45%),
    var(--cream-100);
}
.value-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px; }
@media (max-width: 780px) { .value-grid { grid-template-columns: 1fr; gap: 52px; } }
.value-card {
  text-align: left; padding: 24px; border-radius: 8px; margin: -24px;
  transition: transform 0.25s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.value-card:hover, .value-card.tapped {
  transform: translateY(-4px);
  background: var(--navy-950);
  box-shadow: 0 20px 40px -12px rgba(10,18,48,0.35);
}
.value-card:hover .why-icon, .value-card.tapped .why-icon { background: var(--gold-500); color: white; border-color: var(--gold-500); }
.value-card h3 { font-size: 1.1rem; font-weight: 600; color: var(--navy-950); margin: 18px 0 10px; transition: color 0.3s ease; }
.value-card:hover h3, .value-card.tapped h3 { color: white; }
.value-card p { color: var(--ink-600); font-size: 0.95rem; transition: color 0.3s ease; }
.value-card:hover p, .value-card.tapped p { color: rgba(255,255,255,0.75); }

/* ---------- header logo as home link ---------- */
.topband-logo-link { display: inline-block; cursor: pointer; transition: transform 0.2s ease; }
.topband-logo-link:hover { transform: scale(1.03); }
a.brand { cursor: pointer; }

/* ---------- demo chat widget ---------- */
/* Sits bottom-right, stacked directly above the back-to-top button, which
   is the layout most people already expect from chat widgets. z-index
   sits above the cookie card (250) so the launcher and back-to-top button
   always stay visible and clickable, even if the card is tall enough
   (preferences expanded, narrow screens) to reach their corner, rather
   than being hidden underneath it or shoved up the page. */
.lca-chat-launcher {
  /* right: 20px (not 24px) centers this 56px circle on the 48px
     back-to-top button below it, since they're different sizes but both
     anchored from the right edge. */
  position: fixed; bottom: 96px; right: 20px; z-index: 260;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--gold-500); color: var(--navy-950);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 8px 24px rgba(10,18,48,0.28);
  transition: transform 0.2s ease, bottom 0.25s ease;
}
.lca-chat-launcher:hover { transform: scale(1.06); }
.lca-chat-launcher svg { width: 26px; height: 26px; }
.lca-chat-panel {
  position: fixed; bottom: 164px; right: 20px; z-index: 261;
  width: 340px; max-width: calc(100vw - 32px); height: 460px; max-height: calc(100vh - 200px);
  background: white; border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 64px -12px rgba(10,18,48,0.35);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, bottom 0.25s ease;
}
.lca-chat-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }
.lca-chat-header {
  background: var(--navy-950); color: white; padding: 16px 18px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.lca-chat-title { font-weight: 700; font-size: 0.98rem; }
.lca-chat-subtitle { font-size: 0.74rem; color: rgba(255,255,255,0.6); margin-top: 3px; }
.lca-chat-close { background: none; border: none; color: white; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.lca-chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--cream-50); }
.lca-chat-msg { max-width: 84%; padding: 9px 13px; border-radius: 10px; font-size: 0.87rem; line-height: 1.45; }
.lca-chat-msg.bot { background: white; border: 1px solid var(--line); color: var(--ink-900); align-self: flex-start; border-bottom-left-radius: 2px; }
.lca-chat-msg.bot a { color: var(--gold-600); font-weight: 700; text-decoration: underline; }
.lca-chat-msg.bot a:hover { color: var(--navy-950); }
.lca-chat-msg.user { background: var(--navy-950); color: white; align-self: flex-end; border-bottom-right-radius: 2px; }
.lca-chat-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; background: var(--cream-50); }
.lca-chat-quick-btn {
  font-size: 0.76rem; padding: 6px 10px; border-radius: 100px; border: 1px solid var(--gold-500);
  background: white; color: var(--navy-950); cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
.lca-chat-quick-btn:hover { background: var(--gold-500); }
.lca-chat-input-row { display: flex; border-top: 1px solid var(--line); }
.lca-chat-input-row input { flex: 1; border: none; padding: 12px 14px; font-size: 0.87rem; font-family: inherit; outline: none; }
.lca-chat-input-row button {
  background: var(--gold-500); color: var(--navy-950); border: none; padding: 0 18px; font-weight: 700; font-size: 0.85rem; cursor: pointer;
}
@media (max-width: 560px) {
  .lca-chat-launcher { bottom: 82px; right: 16px; width: 48px; height: 48px; }
  .lca-chat-panel { bottom: 138px; right: 16px; }
}

/* ---------- back to top button ---------- */
.back-to-top {
  position: fixed; bottom: 24px; right: 24px; z-index: 260;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--navy-950); color: var(--gold-400);
  border: 1.5px solid var(--gold-500);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.2s ease, bottom 0.25s ease;
  box-shadow: 0 8px 24px rgba(10,18,48,0.28);
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--gold-500); color: white; border-color: var(--gold-500); }
.back-to-top svg { width: 20px; height: 20px; }
@media (max-width: 560px) {
  .back-to-top { bottom: 18px; right: 18px; width: 44px; height: 44px; }
}

.cf-verified-badge { display: none; width: 100%; box-sizing: border-box; text-align: center; justify-self: stretch; justify-content: center; align-items: center; gap: 6px; font-size: 0.85rem; color: #2e7d32; margin: 12px 0 14px; }
.cf-verified-badge.show { display: flex !important; justify-content: center !important; }
.cf-verified-badge span { color: #22a355; font-weight: 700; font-size: 1.1rem; line-height: 1; }
.claim-section .cf-verified-badge { color: var(--ink-400, #5b6470); }
.contact-section .cf-verified-badge { color: rgba(255,255,255,0.75); }
.contact-section .cf-verified-badge span { color: #4cd07d; }

.value-item span { color: var(--ink-600); font-size: 0.9rem; line-height: 1.55; }
.value-note { margin: 26px auto 0; max-width: 620px; font-size: 0.92rem; color: var(--ink-600); }

.mark-hello { background: var(--cream-100); border-bottom: 1px solid rgba(10,18,48,0.08); padding: 22px 0; }
.mark-hello-inner { display: flex; align-items: center; justify-content: center; gap: 18px; max-width: 820px; margin: 0 auto; }
.mark-hello-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: center top; border: 2px solid var(--gold-400); flex-shrink: 0; }
.mark-hello p { margin: 0; color: var(--ink-600); font-size: 1rem; line-height: 1.55; }
.mark-hello strong { color: var(--navy-950); }
.mark-hello a { color: var(--gold-600); font-weight: 600; white-space: nowrap; }
.mark-hello a:hover { color: var(--navy-950); }
@media (max-width: 560px) { .mark-hello-inner { flex-direction: column; text-align: center; gap: 12px; } }
.form-next { font-size: 0.8rem; text-align: center; margin-top: 10px; color: var(--ink-400); line-height: 1.5; }
.contact-section .form-next { color: rgba(255,255,255,0.55); }

.meet-mark { position: fixed; left: 20px; bottom: 24px; z-index: 258; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.meet-mark.is-hidden { display: none; }
.meet-mark-btn { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border: 1px solid rgba(10,18,48,0.15); border-radius: 999px; background: #fff; color: var(--navy-950); font: 600 0.9rem 'Inter', sans-serif; cursor: pointer; box-shadow: 0 6px 20px rgba(10,18,48,0.18); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.meet-mark-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(10,18,48,0.24); }
.meet-mark-btn img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: center top; border: 2px solid var(--gold-400); }
.meet-mark-card { position: relative; width: 300px; max-width: calc(100vw - 40px); padding: 22px 20px 18px; background: #fff; border-radius: 16px; box-shadow: 0 14px 40px rgba(10,18,48,0.25); text-align: center; }
.meet-mark-card[hidden] { display: none; }
.meet-mark-card img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center top; border: 2px solid var(--gold-400); margin-bottom: 10px; }
.meet-mark-card p { margin: 0 0 12px; color: var(--ink-600); font-size: 0.92rem; line-height: 1.55; }
.meet-mark-card strong { color: var(--navy-950); }
.meet-mark-card a { color: var(--gold-600); font-weight: 600; font-size: 0.92rem; }
.meet-mark-close { position: absolute; top: 6px; right: 10px; border: 0; background: none; font-size: 1.4rem; line-height: 1; color: var(--ink-400); cursor: pointer; }
@media (max-width: 560px) { .meet-mark { left: 16px; bottom: 18px; } }

/* Pages without a back-to-top button: the chat icon sits at the bottom corner instead of stacked above it. */
.lca-no-btt .lca-chat-launcher { bottom: 24px; }
.lca-no-btt .lca-chat-panel { bottom: 92px; }
@media (max-width: 560px) {
  .lca-no-btt .lca-chat-launcher { bottom: 18px; }
  .lca-no-btt .lca-chat-panel { bottom: 74px; }
}


.foot-links { flex-wrap: wrap; align-items: center; }
.foot-links a { white-space: nowrap; }
@media (max-width: 560px) {
  .foot-links { flex-direction: column; gap: 10px; }
  .foot-links span { display: none; }
  footer > .wrap { padding-left: 60px; padding-right: 60px; }
}

/* ---------- homepage: what a county surplus record shows ---------- */
.record-section { background: var(--cream-100); }
.record-card { max-width: 820px; margin: 8px auto 0; background: #fff; border: 1px solid rgba(10,18,48,0.1); border-radius: 6px; box-shadow: 0 10px 30px rgba(10,18,48,0.08); overflow: hidden; }
.record-list { margin: 0; counter-reset: rec; }
.record-row { display: grid; grid-template-columns: 250px 1fr; gap: 20px; padding: 16px 26px; border-bottom: 1px solid rgba(10,18,48,0.08); }
.record-row:last-child { border-bottom: 0; }
.record-row dt { font-weight: 600; color: var(--navy-950); font-size: 0.96rem; }
.record-row dd { margin: 0; color: var(--ink-600); font-size: 0.95rem; line-height: 1.55; }
.record-note { max-width: 640px; margin: 24px auto 0; text-align: center; color: var(--ink-600); font-size: 0.92rem; }
@media (max-width: 640px) {
  .record-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 20px; }
}

/* ---------- "Heard from us?" page: note from Mark + three quick facts ---------- */
.hfu-note { display: flex; align-items: center; gap: 20px; margin: 30px 0 26px; padding: 22px 24px; background: var(--cream-100); border-left: 3px solid var(--gold-400); border-radius: 4px; }
.hfu-note img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: center top; border: 2px solid var(--gold-400); flex-shrink: 0; }
.hfu-note p { margin: 0; color: var(--ink-600); line-height: 1.6; }
.hfu-note strong { color: var(--navy-950); }
.hfu-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 14px; }
.hfu-fact { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 20px 14px; border: 1px solid rgba(10,18,48,0.1); border-radius: 4px; background: #fff; }
.hfu-fact svg { width: 40px; height: 40px; color: var(--gold-500); margin-bottom: 4px; }
.hfu-fact strong { color: var(--navy-950); font-size: 0.98rem; }
.hfu-fact span { color: var(--ink-600); font-size: 0.88rem; line-height: 1.5; }
@media (max-width: 640px) {
  .hfu-note { flex-direction: column; text-align: center; }
  .hfu-facts { grid-template-columns: 1fr; }
}

.hfu-fact { transition: transform 0.25s ease, background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; cursor: default; }
.hfu-fact:hover, .hfu-fact.tapped { transform: translateY(-4px); background: var(--navy-950); border-color: var(--navy-950); box-shadow: 0 20px 40px -12px rgba(10,18,48,0.35); }
.hfu-fact svg { transition: color 0.3s ease; }
.hfu-fact:hover svg, .hfu-fact.tapped svg { color: var(--gold-400); }
.hfu-fact strong { transition: color 0.3s ease; }
.hfu-fact:hover strong, .hfu-fact.tapped strong { color: #fff; }
.hfu-fact span { transition: color 0.3s ease; }
.hfu-fact:hover span, .hfu-fact.tapped span { color: rgba(255,255,255,0.75); }

.record-head { display: flex; align-items: center; gap: 12px; padding: 14px 26px; background: linear-gradient(165deg, var(--navy-900) 0%, var(--navy-950) 100%); color: #fff; border-bottom: 3px solid var(--gold-400); }
.record-head svg { width: 24px; height: 24px; color: var(--gold-400); flex-shrink: 0; }
.record-head span { font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.82rem; }
.record-head em { margin-left: auto; font-style: normal; font-size: 0.74rem; color: rgba(255,255,255,0.6); letter-spacing: 0.06em; text-transform: uppercase; }
.record-row { counter-increment: rec; position: relative; transition: background 0.25s ease; }
.record-row dt { display: flex; align-items: flex-start; gap: 12px; }
.record-row dt::before { content: counter(rec); flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--cream-100); color: var(--gold-600); border: 1px solid var(--gold-400); font-size: 0.74rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; transition: background 0.25s ease, color 0.25s ease; }
.record-row dd { transition: color 0.25s ease; }
.record-key { background: rgba(201,169,79,0.12); }
.record-tag { display: inline-block; margin-left: 10px; padding: 2px 10px; border-radius: 999px; background: var(--gold-500); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
@media (hover: hover) {
  .record-row:hover { background: var(--navy-950); }
  .record-row:hover dt { color: #fff; }
  .record-row:hover dd { color: rgba(255,255,255,0.78); }
  .record-row:hover dt::before { background: var(--gold-500); color: #fff; }
}
@media (max-width: 640px) {
  .record-head { padding: 12px 20px; }
  .record-tag { margin: 6px 0 0; display: table; }
}
.record-head span, .record-head em { white-space: nowrap; }
@media (max-width: 480px) { .record-head em { display: none; } }

.record-row.tapped { background: var(--navy-950); }
.record-row.tapped dt { color: #fff; }
.record-row.tapped dd { color: rgba(255,255,255,0.78); }
.record-row.tapped dt::before { background: var(--gold-500); color: #fff; }
.record-row { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* Our Fee tiles: same hover and tap treatment as the other cards */
.fee-item { transition: background 0.3s ease, transform 0.25s ease, box-shadow 0.3s ease; cursor: default; -webkit-tap-highlight-color: transparent; }
.fee-item .fee-label, .fee-item .fee-value { transition: color 0.3s ease; }
.fee-item:hover, .fee-item.tapped { background: var(--navy-950); transform: translateY(-3px); box-shadow: 0 14px 30px -10px rgba(10,18,48,0.4); position: relative; z-index: 1; }
.fee-item:hover .fee-label, .fee-item.tapped .fee-label { color: rgba(255,255,255,0.75); }
.fee-item:hover .fee-value, .fee-item.tapped .fee-value { color: var(--gold-400); }

/* FAQ: gentle color change on hover (computers) and while a question is open (phones and computers) */
.faq-item summary { transition: color 0.25s ease; }
.faq-item summary::after { transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.faq-item[open] summary { color: var(--gold-600); }
.faq-item[open] summary::after { background: var(--gold-500); color: #fff; border-color: var(--gold-500); }
@media (hover: hover) {
  .faq-item summary:hover { color: var(--gold-600); }
  .faq-item summary:hover::after { background: var(--gold-500); color: #fff; border-color: var(--gold-500); }
}

/* FAQ: open item reads as one highlighted block */
.faq-item { transition: background 0.25s ease, box-shadow 0.25s ease; }
.faq-item[open] { background: var(--cream-100); box-shadow: inset 4px 0 0 var(--gold-500); }
.faq-item[open] summary, .faq-item[open] > :not(summary) { padding-left: 20px; padding-right: 16px; }