/* =========================================================
   GV Notary — Design System
   Ameera Shums Notary Corporation
   ========================================================= */

/* ---- Font imports: loaded via <link> in header.php for performance ---- */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ---- Design tokens ---- */
:root {
  /* Colors */
  --navy-950: #081527;
  --navy-900: #0d2036;
  --navy-800: #132c48;
  --navy-700: #1c3a5e;
  --navy-600: #2a4d78;
  --gold-600: #a97e3f;
  --gold-500: #c39a5c;
  --gold-400: #d4b483;
  --gold-100: #f4ead9;
  --cream: #faf7f2;
  --cream-100: #f2ede4;
  --white: #ffffff;
  --ink-900: #1a2230;
  --ink-700: #3b4657;
  --ink-500: #647089;
  --ink-300: #a8b0bf;
  --border: #e5e0d5;
  --border-dark: #24405f;
  --success: #2f7a4f;

  /* Type */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 7rem;

  /* Misc */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --shadow-sm: 0 2px 8px rgba(8, 21, 39, 0.06);
  --shadow-md: 0 8px 30px rgba(8, 21, 39, 0.10);
  --shadow-lg: 0 20px 60px rgba(8, 21, 39, 0.16);
  --container: 1180px;
  --transition: 220ms cubic-bezier(.4,0,.2,1);

  /* Fine film-grain, tiled — laid over dark navy surfaces for tactile depth.
     Mid-gray turbulence + overlay blend mode keeps it neutral (no tint/darkening). */
  --noise-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Notarial seal-ring watermark — plain element background (not a pseudo),
     so it always paints behind content with zero stacking-order risk. */
  --seal-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 420'%3E%3Ccircle cx='210' cy='210' r='196' fill='none' stroke='%23c39a5c' stroke-opacity='0.55' stroke-width='1'/%3E%3Ccircle cx='210' cy='210' r='170' fill='none' stroke='%23c39a5c' stroke-opacity='0.55' stroke-width='9' stroke-dasharray='1.5 15'/%3E%3Ccircle cx='210' cy='210' r='140' fill='none' stroke='%23c39a5c' stroke-opacity='0.5' stroke-width='1'/%3E%3C/svg%3E");
}

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

/* ---- Focus visibility ---- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: 2px;
}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: none; /* the bespoke box-shadow ring below already covers this */
}

body {
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Image reveals start scaled up (motion.js), which on a phone pushed the
   page ~13px wider than the screen and let it wobble sideways. `clip`
   rather than `hidden`: it trims the overflow without turning html/body
   into scroll containers, so the sticky header keeps working. */
html, body { overflow-x: clip; }

::selection { background: var(--gold-500); color: var(--white); }

html { scrollbar-color: var(--gold-400) var(--cream-100); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--cream-100); }
::-webkit-scrollbar-thumb { background: var(--gold-400); border-radius: 999px; border: 3px solid var(--cream-100); }
::-webkit-scrollbar-thumb:hover { background: var(--gold-600); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--navy-950);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.1rem; }

p { color: var(--ink-700); }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
}

section { padding: var(--space-12) 0; }
@media (max-width: 768px) { section { padding: var(--space-10) 0; } }

.section-tight { padding: var(--space-8) 0; }

/* ---- Eyebrow / kicker ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--gold-500);
  display: inline-block;
}

.section-head { max-width: 680px; margin-bottom: var(--space-8); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { margin-top: var(--space-3); font-size: 1.08rem; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.8rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
/* Light sweep on hover — a quiet glint rather than a full shimmer */
.btn::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 35%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-18deg);
  transition: left 650ms cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.btn:hover::after { left: 130%; }
.btn-gold {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline {
  background: transparent;
  border-color: rgba(255,255,255,0.4);
  color: var(--white);
}
.btn-outline:hover { background: rgba(255,255,255,0.12); border-color: var(--white); }
.btn-navy {
  background: var(--navy-900);
  color: var(--white);
}
.btn-navy:hover { background: var(--navy-800); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost-navy {
  background: transparent;
  border-color: var(--navy-700);
  color: var(--navy-900);
}
.btn-ghost-navy:hover { background: var(--navy-950); color: var(--white); }
.btn-block { width: 100%; }
.btn-sm { padding: 0.6rem 1.2rem; font-size: 0.85rem; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  /* Above .mobile-cta-bar (150) and .scroll-top-btn (140): the mobile nav
     drawer lives inside this header and runs the full height of the
     screen, so a lower value let the bottom CTA bar sit on top of it. */
  z-index: 200;
  background: var(--navy-950);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  /* padding-block, not the `0.85rem 0` shorthand: this element is also a
     .container, and the shorthand zeroed the container's 1.5rem side
     gutter, so the logo and nav sat flush against the screen edge. */
  padding-block: 0.85rem;
}
.brand { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; }
/* Enlarged from 42px at the client's request, so the logo artwork
   rather than the wordmark beside it carries the header. */
.brand img { height: 56px; width: auto; transition: transform var(--transition); }
.brand:hover img { transform: scale(1.05) rotate(-2deg); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text .name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--white); letter-spacing: 0.01em; }
.brand-text .sub { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-400); }

.main-nav { display: flex; align-items: center; gap: var(--space-8); }
.nav-links { display: flex; align-items: center; gap: var(--space-6); }
/* Nav labels and the phone number must never wrap: a two-word item like
   "Start a File" breaking onto three lines wrecks the header height. */
.nav-links > li > a, .nav-dropdown-toggle, .header-phone { white-space: nowrap; }
.nav-links a {
  color: rgba(255,255,255,0.82);
  font-size: 0.94rem;
  font-weight: 500;
  padding: 0.4rem 0.1rem;
  position: relative;
  transition: color var(--transition);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--gold-500);
  transition: width var(--transition);
}
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { width: 100%; }
.nav-links a.active { color: var(--white); }
.nav-links a.active::after { width: 100%; }

.header-cta { display: flex; align-items: center; gap: var(--space-4); }
.header-phone {
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--white); font-weight: 600; font-size: 0.92rem;
  transition: color var(--transition);
}
.header-phone:hover { color: var(--gold-400); }
.header-phone svg { flex-shrink: 0; color: var(--gold-500); }

.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  padding: 0.4rem;
  z-index: 110;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  margin: 5px 0;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Eight nav items plus the phone and the CTA button need roughly 1340px
   at full spacing. Tightening the gaps and label size across this band
   keeps the horizontal bar usable on ordinary laptops instead of
   dropping them to the hamburger. */
@media (min-width: 1161px) and (max-width: 1360px) {
  .main-nav { gap: var(--space-5); }
  .nav-links { gap: 1rem; }
  .nav-links a { font-size: 0.85rem; }
  .nav-dropdown-toggle { font-size: 0.85rem; }
  .header-cta { gap: 0.7rem; }
}

/* Raised from 1080px: the brand block is wider now (bigger logo plus
   "Ameera Shums / Notary Corporation"), so the bar runs out of room
   sooner than it used to, even at the tightened spacing above. */
@media (max-width: 1160px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed;
    inset: 0 0 0 30%;
    z-index: 150; /* above .nav-scrim (140), below .nav-toggle (160) */
    background: var(--navy-950);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 6rem 2rem 2rem;
    gap: var(--space-8);
    transform: translateX(100%);
    transition: transform 320ms cubic-bezier(.4,0,.2,1);
    box-shadow: -20px 0 60px rgba(0,0,0,0.3);
  }
  .main-nav.open { transform: translateX(0); }
  .nav-links { flex-direction: column; align-items: flex-start; gap: var(--space-5); width: 100%; }
  .nav-links a { font-size: 1.1rem; }
  .header-cta { flex-direction: column; align-items: flex-start; gap: var(--space-4); width: 100%; }
  .header-cta .btn { width: 100%; }
}
@media (max-width: 420px) {
  .main-nav { inset: 0; }
}

/* Must stay BELOW .main-nav (150). The scrim is written after the nav in
   the markup, so without an explicit pair of z-indexes it painted over
   the open drawer and dimmed the menu itself. */
.nav-scrim {
  display: none;
  position: fixed; inset: 0;
  background: rgba(8,21,39,0.5);
  z-index: 140;
}
.nav-scrim.open { display: block; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  color: var(--white);
  background: var(--navy-950);
  overflow: hidden;
}
.hero-media {
  position: absolute; inset: 0;
  z-index: 0;
}
/* The settle-in zoom and scroll parallax are GSAP's (motion.js) so that a
   single engine owns this transform; a CSS keyframe here would fight it. */
.hero-media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background-image: linear-gradient(180deg, rgba(8,15,27,0.78) 0%, rgba(8,20,39,0.88) 55%, rgba(8,21,39,0.97) 100%), var(--noise-grain);
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 200px 200px;
  background-blend-mode: normal, overlay;
}
/* The seal-ring watermark that used to sit here on wide screens was
   removed with the hero seal itself, at the client's request. Without
   this override the base .hero-media::after gradient above applies at
   every width. */
.hero-content {
  position: relative;
  z-index: 1;
  /* padding-block only — see .header-inner above. */
  padding-block: var(--space-16) var(--space-12);
  max-width: 720px;
}
.hero.hero-page .hero-content { padding-block: var(--space-10); max-width: 680px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: var(--space-5); }
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold-100);
}
/* Legal practice name, set as a two-line wordmark at the very top of the
   hero, above the credential badges. Champagne gold matches the logo
   subtitle and stat numbers, and stays clear of the white headline. */
.hero-firm {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: var(--gold-400);
  margin-bottom: var(--space-5);
}
.hero-firm span { display: block; }
.hero h1 { color: var(--white); margin-bottom: var(--space-5); }
.hero .lede { font-size: 1.18rem; color: rgba(255,255,255,0.82); max-width: 560px; margin-bottom: var(--space-6); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-8); }
.hero-breadcrumb { font-size: 0.85rem; color: rgba(255,255,255,0.55); margin-bottom: var(--space-4); }
.hero-breadcrumb a:hover { color: var(--white); }
.hero-breadcrumb span { margin: 0 0.5rem; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: 640px;
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.15);
}
.hero-stats .stat-num { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--gold-400); font-variant-numeric: tabular-nums; }
.hero-stats .stat-label { font-size: 0.82rem; color: rgba(255,255,255,0.68); margin-top: 0.15rem; }

@media (max-width: 640px) {
  .hero-stats { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   TRUST STRIP
   ========================================================= */
.trust-strip {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: var(--space-6) 0;
}
.trust-strip .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); }
.trust-item { display: flex; align-items: center; gap: 0.65rem; color: var(--ink-700); font-size: 0.92rem; font-weight: 500; }
.trust-item svg { color: var(--gold-600); flex-shrink: 0; }

/* =========================================================
   CARDS
   ========================================================= */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.service-card {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.service-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-600));
  transform: scaleX(0); transform-origin: left;
  transition: transform 320ms ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.service-card:hover::before { transform: scaleX(1); }
.service-card .icon-badge {
  width: 54px; height: 54px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-400);
  margin-bottom: var(--space-5);
}
.service-card h3 { margin-bottom: var(--space-3); }
.service-card p { font-size: 0.95rem; margin-bottom: var(--space-4); }
.service-card ul { margin-top: auto; padding-top: var(--space-4); border-top: 1px dashed var(--border); }
.service-card ul li {
  font-size: 0.88rem;
  color: var(--ink-700);
  padding: 0.3rem 0 0.3rem 1.35rem;
  position: relative;
}
.service-card ul li::before {
  content: "";
  position: absolute; left: 0; top: 0.75rem;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-500);
}
.service-card .card-link {
  margin-top: var(--space-4);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--navy-900);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.service-card .card-link svg { transition: transform var(--transition); }
.service-card:hover .card-link svg { transform: translateX(4px); }

/* Photo-topped service block (services page) */
.service-block {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  margin-bottom: var(--space-8);
  transition: box-shadow 320ms ease, border-color 320ms ease;
}
.service-block:hover { box-shadow: var(--shadow-lg); border-color: rgba(195,154,92,0.3); }
.service-block:nth-child(even) { grid-template-columns: 1.15fr 0.85fr; }
.service-block:nth-child(even) .service-block-media { order: 2; }
.service-block-media { position: relative; min-height: 320px; overflow: hidden; }
.service-block-media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform 600ms cubic-bezier(.4,0,.2,1); }
.service-block:hover .service-block-media img { transform: scale(1.06); }
.service-block-body { padding: var(--space-8); display: flex; flex-direction: column; justify-content: center; }
.service-block-body .num { font-family: var(--font-display); color: var(--gold-500); font-size: 1rem; font-weight: 700; margin-bottom: var(--space-3); }
.service-block-body h3 { margin-bottom: var(--space-3); }
.service-block-body p { margin-bottom: var(--space-5); }
.service-block-body .tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.service-block-body .tag-list span {
  background: var(--cream-100);
  border: 1px solid var(--border);
  color: var(--ink-700);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
}
@media (max-width: 800px) {
  .service-block, .service-block:nth-child(even) { grid-template-columns: 1fr; }
  .service-block:nth-child(even) .service-block-media { order: 0; }
  .service-block-media { min-height: 220px; }
  .service-block-body { padding: var(--space-6); }
}

/* =========================================================
   ABOUT / SPLIT SECTIONS
   ========================================================= */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--space-8); } }
.split-media { position: relative; }
.split-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.split-media .badge-float {
  position: absolute;
  bottom: -1.5rem; left: -1.5rem;
  background-color: var(--navy-950);
  background-image: var(--noise-grain); background-blend-mode: overlay;
  color: var(--white);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-width: 220px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.split-media:hover .badge-float { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(8,21,39,0.32); }
.split-media .badge-float .stat-num { font-family: var(--font-display); font-size: 2.2rem; color: var(--gold-400); font-weight: 700; line-height: 1; }
.split-media .badge-float .stat-label { font-size: 0.82rem; color: rgba(255,255,255,0.75); margin-top: 0.35rem; }
@media (max-width: 500px) { .split-media .badge-float { position: static; margin-top: 1rem; max-width: none; } }

.credential-list { margin-top: var(--space-5); display: grid; gap: var(--space-3); }
.credential-list li {
  display: flex; gap: 0.75rem; align-items: flex-start;
  font-size: 0.95rem; color: var(--ink-700);
}
.credential-list svg { flex-shrink: 0; color: var(--gold-600); margin-top: 0.2rem; }

blockquote.pull-quote {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--navy-950);
  border-left: 3px solid var(--gold-500);
  padding-left: var(--space-5);
  margin: var(--space-6) 0;
  line-height: 1.5;
}
blockquote.pull-quote::before {
  content: "\201C";
  position: absolute;
  z-index: -1;
  top: -1.6rem; left: 0.6rem;
  font-family: var(--font-display); font-weight: 700; font-size: 5rem; line-height: 1;
  color: var(--gold-100);
}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testimonials-section {
  background-color: var(--navy-950); color: var(--white);
  background-image: var(--noise-grain); background-blend-mode: overlay;
}
.testimonials-section .section-head p { color: rgba(255,255,255,0.7); }
.testimonials-section .eyebrow { color: var(--gold-400); }
.testimonials-section h2 { color: var(--white); }
.testi-card {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  height: 100%;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
}
.testi-card:hover {
  transform: translateY(-5px);
  border-color: rgba(195,154,92,0.4);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 20px 40px rgba(0,0,0,0.28);
}
.testi-card::after {
  content: "\201C";
  position: absolute; top: -0.6rem; right: 1.25rem;
  font-family: var(--font-display); font-weight: 700; font-size: 5rem; line-height: 1;
  color: rgba(255,255,255,0.06);
  pointer-events: none;
}
.testi-card .stars { color: var(--gold-500); font-size: 0.95rem; margin-bottom: var(--space-4); letter-spacing: 0.15em; }
.testi-card p.quote { color: rgba(255,255,255,0.88); font-size: 1rem; margin-bottom: var(--space-5); }
.testi-card .author { display: flex; align-items: center; gap: 0.75rem; }
.testi-card .avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; color: var(--white);
}
.testi-card .author-name { font-weight: 600; font-size: 0.92rem; color: var(--white); }
.testi-card .author-role { font-size: 0.78rem; color: rgba(255,255,255,0.55); }

/* =========================================================
   CTA BAND
   ========================================================= */
/* Flat navy. The gold radial wash + noise-grain overlay that used to sit
   on ::before made the panel look mottled and hurt text contrast. */
.cta-band {
  position: relative;
  background: var(--navy-900);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-8);
  overflow: hidden;
}
.cta-band-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.cta-band h2 { color: var(--white); margin-bottom: var(--space-2); }
.cta-band p { color: rgba(255,255,255,0.75); max-width: 480px; }
.cta-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* =========================================================
   FAQ ACCORDION
   ========================================================= */
.faq-list { max-width: 800px; margin: 0 auto; display: grid; gap: var(--space-3); }
.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.faq-item.open { border-color: rgba(195,154,92,0.4); box-shadow: var(--shadow-sm); }
.faq-question {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: transparent;
  border: none;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy-950);
}
.faq-question .icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--cream-100); display: flex; align-items: center; justify-content: center; transition: transform var(--transition), background var(--transition); color: var(--gold-600); }
.faq-item.open .faq-question .icon { background: var(--gold-500); color: var(--white); transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 320ms cubic-bezier(.4,0,.2,1); }
.faq-answer-inner { padding: 0 var(--space-6) var(--space-5); color: var(--ink-700); font-size: 0.96rem; }
.faq-item.open .faq-answer { max-height: 1200px; }
/* When GSAP drives the accordion it tweens real heights, so the max-height
   fallback has to step aside or it would clamp long answers. */
.faq-list[data-gsap-heights] .faq-answer { max-height: none; height: 0; transition: none; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--space-10); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.info-card {
  background-color: var(--navy-950);
  background-image: var(--noise-grain); background-blend-mode: overlay;
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.info-card h3 { color: var(--white); margin-bottom: var(--space-5); }
.info-row { display: flex; gap: 1rem; align-items: flex-start; padding: var(--space-4) 0; border-top: 1px solid rgba(255,255,255,0.1); }
.info-row:first-of-type { border-top: none; }
.info-row .icon-circle {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(195,154,92,0.16);
  color: var(--gold-400);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.info-row .label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); margin-bottom: 0.2rem; }
.info-row .value { font-weight: 500; color: var(--white); font-size: 0.98rem; }
.info-row .value a:hover { color: var(--gold-400); }
.hours-table { width: 100%; margin-top: 0.25rem; }
.hours-table tr td { padding: 0.15rem 0; font-size: 0.92rem; }
.hours-table tr td:first-child { color: rgba(255,255,255,0.65); }
.hours-table tr td:last-child { text-align: right; font-weight: 600; color: var(--white); }

.form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
/* Stacked, each .field's own bottom margin already spaces the rows; the
   grid gap on top made paired fields sit further apart than the rest. */
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; row-gap: 0; } }
.field { margin-bottom: var(--space-5); }
.field label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--navy-950); margin-bottom: 0.4rem; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--cream);
  font-size: 0.95rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(195,154,92,0.18);
  background: var(--white);
}
.field textarea { min-height: 130px; resize: vertical; }
.field .error-msg { color: #b3432b; font-size: 0.8rem; margin-top: 0.35rem; display: none; }
.field.has-error input, .field.has-error textarea { border-color: #b3432b; }
.field.has-error .error-msg { display: block; }
.form-note { font-size: 0.8rem; color: var(--ink-500); margin-top: var(--space-4); }
.form-success {
  display: none;
  align-items: center;
  gap: 0.75rem;
  background: #eaf4ee;
  border: 1px solid #bfe0cc;
  color: var(--success);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 0.92rem;
  margin-bottom: var(--space-5);
}
.form-success.show { display: flex; }

.form-error-banner {
  display: none;
  align-items: center;
  gap: 0.75rem;
  background: #fbeae5;
  border: 1px solid #f0c4b8;
  color: #b3432b;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 0.92rem;
  margin-bottom: var(--space-5);
}
.form-error-banner.show { display: flex; }
.form-error-banner a { font-weight: 700; text-decoration: underline; }
.form-error-banner svg { flex-shrink: 0; }

/* Honeypot — present in the DOM for bots, invisible and unreachable for people */
.hp-field {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.map-frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); margin-top: var(--space-6); }
.map-frame iframe { width: 100%; height: 320px; border: 0; display: block; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background-color: var(--navy-950);
  background-image: var(--noise-grain); background-blend-mode: overlay;
  color: rgba(255,255,255,0.7); padding-top: var(--space-12);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--space-8);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand img { height: 40px; margin-bottom: var(--space-4); }
.footer-brand p { color: rgba(255,255,255,0.6); font-size: 0.9rem; max-width: 280px; }
.footer-heading { color: var(--white); font-family: var(--font-display); font-size: 1rem; font-weight: 600; margin-bottom: var(--space-4); }
.footer-links { display: grid; gap: 0.65rem; }
.footer-links a { font-size: 0.9rem; color: rgba(255,255,255,0.65); transition: color var(--transition); }
.footer-links a:hover { color: var(--gold-400); }
.footer-contact { display: grid; gap: 0.75rem; font-size: 0.9rem; }
.footer-contact a:hover { color: var(--gold-400); }
.footer-social { display: flex; gap: 0.6rem; margin-top: var(--space-5); }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), border-color var(--transition);
}
.footer-social a:hover { background: var(--gold-500); border-color: var(--gold-500); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-5) 0;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
}
.footer-bottom a:hover { color: var(--gold-400); }
.footer-bottom-links { display: flex; gap: var(--space-5); }

/* =========================================================
   MISC PAGE ELEMENTS
   ========================================================= */
.two-col-text { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
@media (max-width: 800px) { .two-col-text { grid-template-columns: 1fr; } }

.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); counter-reset: step; }
@media (max-width: 900px) { .process-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .process-steps { grid-template-columns: 1fr; } }
.process-step { position: relative; padding-top: var(--space-8); }
/* Solid gold rather than the outlined pale-fill-plus-stroke treatment —
   the outline read as washed out against the cream section. */
/* Room for the number is sized from the number itself (2.2rem at line-height
   1), not from --space-8: that token shrinks on phones, and the headings
   slid up underneath the numerals. */
.process-step { padding-top: calc(2.2rem + var(--space-3)); }
.process-step .step-num {
  line-height: 1;
  position: absolute; top: 0; left: 0;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--gold-600);
}
.process-step h4 { margin-bottom: var(--space-2); }
.process-step p { font-size: 0.92rem; }

.bg-white { background: var(--white); }
.bg-cream-100 { background: var(--cream-100); }
.bg-navy { background: var(--navy-950); color: var(--white); }
.bg-navy h2, .bg-navy h3 { color: var(--white); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }

.page-content h2 { margin-top: var(--space-10); margin-bottom: var(--space-4); }
.page-content h2:first-child { margin-top: 0; }
.page-content p { margin-bottom: var(--space-4); font-size: 1.02rem; }
.page-content ul { margin: var(--space-4) 0; display: grid; gap: 0.5rem; }
.page-content ul li { padding-left: 1.5rem; position: relative; color: var(--ink-700); }
.page-content ul li::before { content: "—"; position: absolute; left: 0; color: var(--gold-600); }

/* Reveal-on-scroll.
   Visible by default — that's the no-JS and reduced-motion state. The
   hidden start state is armed only once `js-motion` is on <html>, which
   guarantees GSAP is present to animate them back in. */
.reveal { opacity: 1; }
.js-motion .reveal { opacity: 0; }

/* =========================================================
   MOBILE STICKY CTA BAR
   ========================================================= */
.mobile-cta-bar { display: none; }
@media (max-width: 640px) {
  body { padding-bottom: 68px; }
  .mobile-cta-bar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    gap: 0.6rem;
    background: var(--navy-950);
    border-top: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 -8px 24px rgba(8,21,39,0.28);
    padding: 0.6rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom));
  }
  .mobile-cta-btn {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    padding: 0.8rem; border-radius: var(--radius-sm);
    font-weight: 600; font-size: 0.9rem;
  }
  .mobile-cta-btn.call { background: transparent; border: 1px solid rgba(255,255,255,0.32); color: var(--white); }
  .mobile-cta-btn.book { background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); color: var(--white); }
}

/* =========================================================
   SCROLL TO TOP
   ========================================================= */
.scroll-top-btn {
  /* bottom offset clears the Netlify badge when one is present (0 otherwise) */
  position: fixed; right: 1.5rem; bottom: calc(2rem + var(--netlify-badge-h, 0px)); z-index: 140;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--navy-950); color: var(--white); border: 1px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition), background var(--transition);
}
.scroll-top-btn.show { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top-btn:hover { background: var(--gold-600); }
@media (max-width: 640px) { .scroll-top-btn { right: 1rem; bottom: 84px; width: 42px; height: 42px; } }

/* Skip link */
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--gold-500); color: var(--white);
  padding: 0.75rem 1.25rem; z-index: 1000; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* =========================================================
   PRINT
   ========================================================= */
@media print {
  .no-print, .site-header, .site-footer, .mobile-cta-bar, .scroll-top-btn,
  .nav-scrim, .skip-link, .hero, .hero-actions, .cta-band, .map-frame {
    display: none !important;
  }

  body::before {
    content: "GV Notary \2014 Ameera Shums Notary Corporation \2014 604-449-7766 \2014 gvnotary.com";
    display: block; text-align: center; font-size: 11px; color: #666;
    padding-bottom: 8px; margin-bottom: 16px; border-bottom: 1px solid #ccc;
  }
  body { background: #fff; padding-bottom: 0; }
  .container { max-width: 100%; }
  section { padding: 0.4rem 0; }
  a { color: #000; text-decoration: underline; }
  h1, h2, h3, h4 { color: #000; }
  p { color: #222; }

  /* Flatten dark-background components to ink-friendly light ones */
  .calc-results, .info-card, .bg-navy, .testimonials-section, .article-cta-box {
    background: #fff !important; color: #000 !important;
    border: 1px solid #ccc !important; box-shadow: none !important;
  }
  .calc-results::before { display: none !important; }
  .calc-results *, .info-card *, .bg-navy *, .testimonials-section *, .article-cta-box * {
    color: #000 !important;
  }
  .calc-row, .calc-row.calc-row-final { border-color: #ccc !important; }
  .calc-note-box { background: #f5f5f5 !important; border-color: #ccc !important; }
  .calc-mode-tabs, .calc-range { display: none !important; }
  .calc-layout { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .calc-panel { border: 1px solid #ccc !important; box-shadow: none !important; position: static !important; }
  .calc-money input {
    border: 1px solid #999 !important; background: #fff !important; color: #000 !important;
  }
}

/* =========================================================
   NAV DROPDOWN (Calculators)
   ========================================================= */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: transparent; border: none; font-family: inherit;
  color: rgba(255,255,255,0.82); font-size: 0.94rem; font-weight: 500;
  padding: 0.4rem 0.1rem; transition: color var(--transition);
}
.nav-dropdown-toggle:hover, .nav-dropdown.open .nav-dropdown-toggle, .nav-dropdown-toggle.active { color: var(--white); }
.nav-dropdown-toggle.active { position: relative; }
.nav-dropdown-toggle.active::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--gold-500); }
.nav-links .nav-dropdown-menu a.active { background: var(--cream-100); color: var(--ink-900); }
.nav-dropdown-menu a.active .icon-circle { background: var(--gold-500); color: var(--white); }
.nav-dropdown-toggle .chev { transition: transform var(--transition); flex-shrink: 0; }
.nav-dropdown.open .nav-dropdown-toggle .chev { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 16px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  min-width: 260px; padding: 0.5rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 120;
}
/* Invisible bridge over the gap between the toggle and the menu, so the
   hover chain doesn't break while the cursor travels down to the links. */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -20px; left: 0; right: 0; height: 20px;
}
.nav-dropdown.open .nav-dropdown-menu,
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.7rem 0.8rem; border-radius: var(--radius-sm);
  color: var(--ink-900); font-size: 0.9rem; font-weight: 600;
  transition: background var(--transition), color var(--transition);
}
.nav-dropdown-menu a:hover { background: var(--cream-100); }
.nav-dropdown-menu a .icon-circle {
  width: 34px; height: 34px; flex-shrink: 0;
  background: var(--cream-100); color: var(--gold-600);
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
}
.nav-dropdown-menu a:hover .icon-circle { background: var(--gold-500); color: var(--white); }
.nav-dropdown-menu a small { display: block; font-weight: 400; font-size: 0.78rem; color: var(--ink-500); margin-top: 0.1rem; }

@media (max-width: 1160px) {
  .nav-dropdown-toggle { width: 100%; justify-content: space-between; font-size: 1.1rem; padding: 0; }
  .nav-dropdown-menu {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    background: transparent; border: none; box-shadow: none; min-width: 0;
    padding: 0.25rem 0 0 0.5rem; margin-top: 0.5rem;
    max-height: 0; overflow: hidden; transition: max-height 320ms cubic-bezier(.4,0,.2,1);
  }
  .nav-dropdown.open .nav-dropdown-menu { max-height: 220px; transform: none; }
  .nav-dropdown-menu a { color: rgba(255,255,255,0.8); }
  .nav-dropdown-menu a:hover { background: rgba(255,255,255,0.06); }
  .nav-dropdown-menu a small { color: rgba(255,255,255,0.45); }
}

/* =========================================================
   CALCULATORS
   ========================================================= */
.calc-layout { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: var(--space-8); align-items: start; }
@media (max-width: 900px) { .calc-layout { grid-template-columns: 1fr; } }

.calc-panel {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 901px) { .calc-panel { position: sticky; top: 100px; } }

.calc-mode-tabs {
  display: flex; gap: 0.3rem; background: var(--cream-100);
  padding: 0.35rem; border-radius: 999px; margin-bottom: var(--space-6);
}
.calc-mode-tabs button {
  flex: 1; padding: 0.65rem 0.75rem; border: none; border-radius: 999px;
  background: transparent; font-weight: 600; font-size: 0.84rem;
  color: var(--ink-700); transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.calc-mode-tabs button.active { background: var(--navy-950); color: var(--white); box-shadow: var(--shadow-sm); }

.calc-field { margin-bottom: var(--space-5); }
.calc-field label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--navy-950); margin-bottom: 0.5rem; }
.calc-field .hint { font-size: 0.8rem; color: var(--ink-500); margin-top: 0.4rem; }

.calc-money { position: relative; }
.calc-money::before {
  content: "$"; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--ink-500); font-weight: 700; font-size: 1.05rem; pointer-events: none;
}
.calc-money input {
  width: 100%; padding: 0.9rem 1rem 0.9rem 2rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--cream); font-size: 1.15rem; font-weight: 700; color: var(--navy-950);
  font-family: var(--font-display); transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.calc-money input:focus {
  outline: none; border-color: var(--gold-500); background: var(--white);
  box-shadow: 0 0 0 3px rgba(195,154,92,0.18);
}

.calc-range { width: 100%; margin-top: var(--space-3); accent-color: var(--gold-500); height: 4px; }

.calc-pill-group { display: flex; gap: 0.6rem; flex-wrap: wrap; }
/* Vertical variant, for option labels too long to sit side by side
   (the exemption picker on the PTT calculator). */
.calc-pill-group-stack { flex-direction: column; }
.calc-pill-group-stack .calc-pill { flex: none; text-align: left; justify-content: flex-start; }
.calc-pill {
  flex: 1; text-align: center; padding: 0.75rem 1rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 0.88rem; font-weight: 600; color: var(--ink-700);
  background: var(--cream); transition: border-color var(--transition), background var(--transition), color var(--transition);
  cursor: pointer; user-select: none;
}
.calc-pill input { position: absolute; opacity: 0; pointer-events: none; }
.calc-pill.active { border-color: var(--gold-500); background: var(--navy-950); color: var(--white); }

/* Flat navy — the results panel carries dense figures, and the grain
   overlay that used to sit on ::before made them hard to read. */
.calc-results {
  background: var(--navy-950); color: var(--white);
  border-radius: var(--radius-lg); padding: var(--space-8);
  position: relative; overflow: hidden;
}
.calc-results > * { position: relative; }
.calc-results .calc-results-label { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-400); font-weight: 700; margin-bottom: 0.5rem; }
.calc-results .calc-total {
  font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 700;
  color: var(--white); line-height: 1.1; margin-bottom: var(--space-6);
  font-variant-numeric: tabular-nums;
}
.calc-total .calc-total-sub { display: block; font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; color: rgba(255,255,255,0.55); margin-top: 0.5rem; }

.calc-breakdown { display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,0.12); }
.calc-row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding: var(--space-4) 0; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.calc-row .calc-row-label { font-size: 0.9rem; color: rgba(255,255,255,0.78); }
.calc-row .calc-row-label small { display: block; font-size: 0.76rem; color: rgba(255,255,255,0.45); margin-top: 0.15rem; }
.calc-row .calc-row-value { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--white); white-space: nowrap; }
.calc-row.calc-row-highlight .calc-row-value { color: var(--gold-400); }
.calc-row.calc-row-final { border-bottom: none; border-top: 2px solid rgba(255,255,255,0.25); margin-top: 0.25rem; padding-top: var(--space-5); }
.calc-row.calc-row-final .calc-row-label { font-weight: 700; color: var(--white); font-size: 1rem; }
.calc-row.calc-row-final .calc-row-value { font-size: 1.5rem; color: var(--gold-400); }

.calc-disclaimer {
  font-size: 0.82rem; color: var(--ink-500); margin-top: var(--space-6);
  padding-top: var(--space-6); border-top: 1px dashed var(--border);
}
.calc-disclaimer a { color: var(--gold-600); font-weight: 600; }
.calc-disclaimer a:hover { text-decoration: underline; }

.calc-note-box {
  margin-top: var(--space-6); padding: var(--space-5);
  background: rgba(195,154,92,0.14); border: 1px solid rgba(195,154,92,0.35);
  border-radius: var(--radius-md); font-size: 0.88rem; color: rgba(255,255,255,0.85);
}
.calc-note-box strong { color: var(--gold-400); }
.calc-note-box a { color: var(--gold-400); font-weight: 600; }

.calc-eligibility { margin-top: var(--space-6); display: grid; gap: 0.6rem; }
.calc-eligibility li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.88rem; color: rgba(255,255,255,0.75); }
.calc-eligibility svg { flex-shrink: 0; color: var(--gold-400); margin-top: 0.15rem; }
.calc-print-btn { margin-top: var(--space-6); width: 100%; }

/* =========================================================
   BLOG
   ========================================================= */
.blog-featured {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-8);
  align-items: center; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-10);
}
.blog-featured-media { position: relative; min-height: 320px; }
.blog-featured-media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.blog-featured-body { padding: var(--space-8) var(--space-8) var(--space-8) 0; }
@media (max-width: 900px) {
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured-media { min-height: 220px; }
  .blog-featured-body { padding: var(--space-6); }
}

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
  position: relative;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm); height: 100%;
  display: flex; flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}
.blog-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-600));
  transform: scaleX(0); transform-origin: left;
  transition: transform 320ms ease;
}
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.blog-card:hover::before { transform: scaleX(1); }
.blog-card-media { position: relative; height: 190px; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-cat {
  position: absolute; top: 1rem; left: 1rem;
  background: rgba(8,21,39,0.85); color: var(--gold-400);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.35rem 0.75rem; border-radius: 999px;
}
.blog-card-body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; }
.blog-card-meta { font-size: 0.78rem; color: var(--ink-500); margin-bottom: 0.6rem; }
.blog-card h3 { font-size: 1.18rem; margin-bottom: 0.6rem; }
.blog-card p { font-size: 0.92rem; margin-bottom: var(--space-4); flex: 1; }
.blog-card .card-link { font-weight: 600; font-size: 0.88rem; color: var(--navy-900); display: inline-flex; align-items: center; gap: 0.35rem; }
.blog-card .card-link svg { transition: transform var(--transition); }
.blog-card:hover .card-link svg { transform: translateX(4px); }

.eyebrow.cat-tag { background: rgba(195,154,92,0.16); color: var(--gold-100); padding: 0.35rem 0.85rem; border-radius: 999px; font-size: 0.72rem; }
.eyebrow.cat-tag::before { display: none; }

.article-body { max-width: 740px; margin: 0 auto; }
.article-byline { display: flex; align-items: center; gap: 0.85rem; margin-bottom: var(--space-8); padding-bottom: var(--space-6); border-bottom: 1px solid var(--border); }
.article-byline .avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; color: var(--white); flex-shrink: 0; }
.article-byline .name { font-weight: 600; color: var(--navy-950); font-size: 0.95rem; }
.article-byline .meta { font-size: 0.82rem; color: var(--ink-500); }
.article-back { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; font-weight: 600; color: var(--gold-600); margin-bottom: var(--space-6); }
.article-back:hover { color: var(--gold-500); }
.article-cta-box {
  background: var(--cream-100); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-6); margin: var(--space-8) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap;
}
.article-cta-box h4 { margin-bottom: 0.3rem; }
.article-cta-box p { margin: 0; font-size: 0.92rem; }
blockquote.pull-quote.article-quote { margin: var(--space-8) 0; }

/* =========================================================
   MAP — full width (contact page)
   ========================================================= */
.map-frame-full { margin-top: 0; }
.map-frame-full iframe { height: 440px; }
@media (max-width: 640px) { .map-frame-full iframe { height: 320px; } }

/* =========================================================
   MOTION LAYER
   Everything below is driven by motion.js (GSAP). Each block
   degrades to a sensible static state when `js-motion` is absent.
   ========================================================= */

/* GSAP's ScrollToPlugin owns anchor easing when motion is on; native
   smooth scrolling on top of it produces a fight, so hand it over. */
.js-motion { scroll-behavior: auto; }

/* ---- Scroll progress rule (sits on the header's bottom edge) ---- */
.scroll-progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400));
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 2;
  pointer-events: none;
}

/* ---- Header condense on scroll ---- */
.site-header { transition: background var(--transition), box-shadow var(--transition); }
.site-header .header-inner { transition: padding var(--transition); }
.site-header.condensed {
  background: rgba(8, 21, 39, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 10px 30px rgba(8, 21, 39, 0.28);
}
.site-header.condensed .header-inner { padding-block: 0.5rem; }
.site-header.condensed .brand img { height: 46px; }
.brand img { transition: height var(--transition), transform var(--transition); }

/* ---- Notary seal (injected into .hero-media by motion.js) ---- */
.seal-wrap {
  position: absolute;
  top: 12%; right: 4%;
  width: clamp(220px, 22vw, 340px);
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.5;
}
.seal { width: 100%; height: auto; overflow: visible; }
.seal .seal-ring,
.seal .seal-ticks { fill: none; stroke: var(--gold-400); }
.seal .seal-ring { stroke-width: 1; }
.seal .seal-ring-hair { stroke-width: 0.5; opacity: 0.6; }
.seal .seal-ticks { stroke-width: 7; stroke-dasharray: 1.5 11; opacity: 0.75; }
.seal .seal-text {
  fill: var(--gold-400);
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.seal .seal-mark { fill: var(--gold-400); opacity: 0.85; }
/* The hero column must stay above the seal on narrow screens where they
   would otherwise overlap the headline. */
.hero-content { z-index: 2; }
@media (max-width: 1100px) { .seal-wrap { display: none; } }

/* ---- Intro curtain (homepage, once per session) ---- */
.intro-curtain { display: none; }
.js-motion.intro-armed .intro-curtain {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 500;
  align-items: center;
  justify-content: center;
  background-color: var(--navy-950);
  background-image: var(--noise-grain);
  background-blend-mode: overlay;
}
/* Hold the page still underneath while the curtain is up. */
.js-motion.intro-armed body { overflow: hidden; }
.intro-inner { text-align: center; padding: 2rem; }
.intro-seal { width: 132px; height: 132px; display: block; margin: 0 auto 1.75rem; overflow: visible; }
.intro-ring { fill: none; stroke: var(--gold-500); stroke-width: 1.25; }
.intro-sweep { fill: none; stroke: var(--gold-400); stroke-width: 6; stroke-dasharray: 1.5 10; opacity: 0.7; }
.intro-glyph { fill: var(--gold-400); }
.intro-word-mask { overflow: hidden; }
.intro-word {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.intro-sub {
  margin-top: 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-400);
}

/* ---- Process connector rule ---- */
.process-steps { position: relative; }
@media (min-width: 901px) {
  .process-steps::before {
    content: "";
    position: absolute;
    top: 1.1rem; left: 6%; right: 6%;
    height: 1px;
    background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
    transform: scaleX(var(--process-scale, 1));
    transform-origin: left center;
    opacity: 0.5;
  }
  .js-motion .process-steps::before { transform: scaleX(var(--process-scale, 0)); }
}
.process-step { z-index: 1; }

/* ---- Calculator proportion bar ---- */
.calc-viz { margin: 0 0 var(--space-6); }
.calc-viz-bar {
  display: flex;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}
.calc-viz-seg { display: block; height: 100%; width: 0; }
.calc-viz-seg.is-empty { width: 0 !important; }
.calc-viz-seg.seg-1, .calc-viz-seg.seg-rebate { background: linear-gradient(180deg, var(--gold-400), var(--gold-500)); }
.calc-viz-seg.seg-2 { background: linear-gradient(180deg, #7e93b4, #5d7395); }
.calc-viz-seg.seg-3 { background: linear-gradient(180deg, #3d5a7f, #2a4165); }
.calc-viz-seg.seg-net { background: linear-gradient(180deg, #46618a, #31486c); }
.calc-viz-legend {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem;
  margin-top: var(--space-3);
}
.calc-viz-key {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.76rem; color: rgba(255, 255, 255, 0.6);
}
.calc-viz-key i { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.calc-viz-key i.seg-1, .calc-viz-key i.seg-rebate { background: var(--gold-500); }
.calc-viz-key i.seg-2 { background: #6d84a8; }
.calc-viz-key i.seg-3 { background: #355075; }
.calc-viz-key i.seg-net { background: #46618a; }
.calc-viz-caption {
  margin-top: var(--space-2);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}

/* Rows are keyed and reordered with `order`, so the grid must lay them
   out in a single column for that ordering to read top-to-bottom. */
.calc-breakdown { grid-template-columns: 1fr; }
.calc-row { overflow: hidden; }

/* ---- Cards get a 3D context for the pointer tilt ---- */
.service-card, .blog-card { transform-style: preserve-3d; }

/* =========================================================
   PRINT — neutralise the motion layer
   ========================================================= */
@media print {
  .intro-curtain, .seal-wrap, .scroll-progress { display: none !important; }
  .reveal, .js-motion .reveal { opacity: 1 !important; transform: none !important; }
  .calc-viz { display: none !important; }
  .faq-answer, .faq-list[data-gsap-heights] .faq-answer {
    max-height: none !important; height: auto !important; overflow: visible !important;
  }
}

/* =========================================================
   RESPONSIVE & MOBILE REFINEMENT
   ---------------------------------------------------------
   Appended last so these rules win over the base layer at equal
   specificity. Organised largest breakpoint to smallest.
   ========================================================= */

/* ---------------------------------------------------------
   1. Fluid spacing scale
   The large tokens double as card and section padding. Held at
   their desktop values they eat most of a phone's width — a 327px
   card was spending 96px of it on padding alone — so the top of
   the scale compresses as the viewport narrows.
--------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --space-8: 2.25rem;
    --space-10: 3rem;
    --space-12: 3.75rem;
    --space-16: 5rem;
  }
}
@media (max-width: 700px) {
  :root {
    --space-6: 1.5rem;
    --space-8: 1.75rem;
    --space-10: 2.25rem;
    --space-12: 2.75rem;
    --space-16: 3.25rem;
  }
  .container { padding: 0 1.15rem; }
}

/* ---------------------------------------------------------
   2. Form controls
   Anything under 16px makes iOS Safari zoom the viewport on focus
   and leaves the user pinching back out, so controls hold at 16px
   on touch-sized screens even though the label scale does not.
--------------------------------------------------------- */
@media (max-width: 900px) {
  .field input, .field select, .field textarea,
  .calc-money input {
    font-size: 16px;
  }
  .field input, .field select { min-height: 48px; }
}

/* ---------------------------------------------------------
   3. Touch targets
   Pointer-coarse only, so desktop keeps its tighter rhythm.
--------------------------------------------------------- */
@media (pointer: coarse) {
  .nav-links a,
  .nav-dropdown-toggle {
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .nav-dropdown-menu a { min-height: 52px; }
  .card-link, .article-back { min-height: 44px; align-items: center; }
  .footer-links a { min-height: 40px; display: flex; align-items: center; }
  .footer-social a { width: 44px; height: 44px; }
  .nav-toggle { width: 48px; height: 48px; display: grid; place-content: center; }
  .faq-question { min-height: 56px; }
  /* Immediate press feedback instead of hover states that stick on touch. */
  .btn:active { transform: scale(0.97); }
  .service-card:hover, .blog-card:hover { transform: none; }
  .service-block:hover .service-block-media img { transform: none; }
}
/* Soften the tap flash without removing visible focus. */
a, button, .calc-pill, .faq-question { -webkit-tap-highlight-color: rgba(195,154,92,0.18); }

/* ---------------------------------------------------------
   4. Mobile action bar
   The bar is fixed, so the page needs matching bottom padding or
   the end of the footer sits underneath it. The height is a token
   rather than a repeated magic number, and the safe-area inset is
   applied in both places so notched devices agree.
--------------------------------------------------------- */
:root { --cta-bar-h: 5rem; } /* must clear the rendered bar (~75px) */

/* Height reserved for Netlify's "Powered by Netlify" badge. It is a fixed
   197x64 iframe pinned bottom-right with z-index 2147483645, so it cannot be
   layered under anything — the only way to stop it covering the CTA buttons
   is to leave room for it. main.js sets the class and the measured height on
   <html>; while the badge is absent this stays 0 and nothing shifts. */
:root { --netlify-badge-h: 0px; }
.has-netlify-badge { --netlify-badge-h: 64px; }

@media (max-width: 640px) {
  body { padding-bottom: calc(var(--cta-bar-h) + env(safe-area-inset-bottom, 0px) + var(--netlify-badge-h)); }
  .mobile-cta-bar { padding: 0.65rem 0.85rem calc(0.65rem + env(safe-area-inset-bottom, 0px) + var(--netlify-badge-h)); }
  .mobile-cta-btn { padding: 0.85rem; font-size: 0.95rem; min-height: 48px; }
  .scroll-top-btn {
    right: 1rem;
    bottom: calc(var(--cta-bar-h) + env(safe-area-inset-bottom, 0px) + 0.75rem + var(--netlify-badge-h));
    width: 44px; height: 44px;
  }
}

/* ---------------------------------------------------------
   5. Header
--------------------------------------------------------- */
@media (max-width: 1160px) {
  /* The number is the whole point of the header on a phone. */
  .header-phone { white-space: nowrap; }
  .header-inner { padding-block: 0.7rem; }
}
@media (max-width: 640px) {
  .brand img { height: 44px; }
  .brand-text .name { font-size: 1rem; }
  .brand-text .sub { font-size: 0.6rem; letter-spacing: 0.06em; }
  .site-header.condensed .brand img { height: 38px; }
}

/* Drawer — full-bleed, scrollable, with the CTA anchored at the base.
   Must match the breakpoint where .nav-toggle appears (1160px), or the
   band just above it gets a half-styled drawer with no scrolling. */
@media (max-width: 1160px) {
  .main-nav {
    inset: 0 0 0 auto;
    width: min(88vw, 380px);
    padding: 5.5rem 1.75rem calc(2rem + env(safe-area-inset-bottom, 0px));
    gap: var(--space-6);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links { gap: 0.15rem; }
  .nav-links > li { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.07); }
  .nav-links a { font-size: 1.05rem; width: 100%; padding: 0.5rem 0; }
  /* The desktop underline reads as a stray dash in a stacked list. */
  .nav-links a::after { display: none; }
  .nav-links a.active { color: var(--gold-400); }
  .header-cta {
    margin-top: auto;
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .header-phone { font-size: 1rem; }
  .nav-toggle { position: relative; z-index: 160; }
}
@media (max-width: 420px) {
  .main-nav { width: 100%; }
}

/* ---------------------------------------------------------
   6. Hero
--------------------------------------------------------- */
@media (max-width: 900px) {
  .hero-content { padding-block: var(--space-12) var(--space-10); }
  .hero.hero-page .hero-content { padding-block: var(--space-10) var(--space-8); }
  .hero .lede { font-size: 1.05rem; }
  .hero-actions { gap: 0.75rem; }
}
@media (max-width: 560px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero-badges { gap: 0.45rem; }
  .hero-badge { font-size: 0.72rem; padding: 0.35rem 0.7rem; }
  /* Three stats across two columns strands the third on its own row;
     one tightened row of three keeps them reading as a set. */
  .hero-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    padding-top: var(--space-5);
  }
  .hero-stats .stat-num { font-size: 1.4rem; }
  .hero-stats .stat-label { font-size: 0.68rem; line-height: 1.3; }
}

/* ---------------------------------------------------------
   7. Trust strip — a compact grid rather than four tall rows
--------------------------------------------------------- */
@media (max-width: 900px) {
  .trust-strip .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4) var(--space-5);
  }
  .trust-item { font-size: 0.85rem; align-items: flex-start; }
  .trust-item svg { margin-top: 0.15rem; }
}
@media (max-width: 520px) {
  .trust-strip .container { grid-template-columns: 1fr; gap: 0.75rem; }
  .trust-item { font-size: 0.88rem; }
}

/* ---------------------------------------------------------
   8. Calculators
--------------------------------------------------------- */
@media (max-width: 900px) {
  .calc-panel, .calc-results { padding: var(--space-6); }
  .calc-results .calc-total { font-size: clamp(2rem, 9vw, 2.6rem); }
  .calc-viz-legend { gap: 0.35rem 0.9rem; }

  /* A 4px track is not a touch target. Give the input real height,
     paint the track inside it, and enlarge the thumb. */
  .calc-range {
    height: 44px;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    margin-top: var(--space-2);
  }
  .calc-range::-webkit-slider-runnable-track {
    height: 6px; border-radius: 999px; background: var(--cream-100);
    border: 1px solid var(--border);
  }
  .calc-range::-moz-range-track {
    height: 6px; border-radius: 999px; background: var(--cream-100);
    border: 1px solid var(--border);
  }
  .calc-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 26px; height: 26px; margin-top: -11px;
    border-radius: 50%; background: var(--gold-500);
    border: 2px solid var(--white);
    box-shadow: 0 2px 6px rgba(8,21,39,0.3);
  }
  .calc-range::-moz-range-thumb {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--gold-500); border: 2px solid var(--white);
    box-shadow: 0 2px 6px rgba(8,21,39,0.3);
  }
  .calc-pill { min-height: 52px; display: flex; align-items: center; justify-content: center; }
  .calc-mode-tabs button { min-height: 46px; }
  .calc-row { padding: var(--space-3) 0; }
  .calc-row .calc-row-value { font-size: 1rem; }
  .calc-row.calc-row-final .calc-row-value { font-size: 1.25rem; }
}
@media (max-width: 480px) {
  /* A breakdown reads as a receipt: label left, figure right. Stacking
     them loses that alignment and makes every row taller, so instead the
     label is allowed to wrap while the figure holds its line. */
  .calc-row { gap: var(--space-3); align-items: baseline; }
  .calc-row .calc-row-label { font-size: 0.84rem; line-height: 1.35; }
  .calc-row .calc-row-value { font-size: 0.98rem; }
  .calc-row.calc-row-final .calc-row-label { font-size: 0.92rem; }
  .calc-row.calc-row-final .calc-row-value { font-size: 1.2rem; }
}
@media (max-width: 330px) {
  /* Below this the two genuinely cannot share a line. */
  .calc-row { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
}

/* ---------------------------------------------------------
   9. Cards, blocks, footer
--------------------------------------------------------- */
@media (max-width: 900px) {
  .service-card { padding: var(--space-5); }
  .service-card .icon-badge { width: 46px; height: 46px; margin-bottom: var(--space-4); }
  .blog-card-media { height: 170px; }
  .article-cta-box { flex-direction: column; align-items: flex-start; }
  .info-card, .form-card { padding: var(--space-6); }
}
@media (max-width: 560px) {
  /* Two columns of short links beat four stacked blocks. */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-5); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { max-width: none; }
  .footer-contact { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.5rem; text-align: left; }
  .footer-links a { font-size: 0.88rem; }
}
@media (max-width: 340px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   10. Type rhythm
--------------------------------------------------------- */
@media (max-width: 640px) {
  h1 { font-size: clamp(1.95rem, 8.5vw, 2.6rem); line-height: 1.12; }
  h2 { font-size: clamp(1.55rem, 6.4vw, 2rem); }
  h3 { font-size: clamp(1.15rem, 4.8vw, 1.35rem); }
  .section-head p { font-size: 1rem; }
  .page-content p { font-size: 1rem; }
  blockquote.pull-quote { font-size: 1.12rem; padding-left: var(--space-4); }
  blockquote.pull-quote::before { font-size: 3.5rem; top: -1rem; }
  .eyebrow { font-size: 0.72rem; letter-spacing: 0.1em; }
  .hours-table tr td { font-size: 0.88rem; }
}

/* Long unbroken strings (emails, addresses) must never force a sideways scroll. */
.footer-contact a, .info-row .value, .article-body a { overflow-wrap: anywhere; }

/* A 3-step variant of the process grid (services.php). Scoped to desktop so
   the responsive collapse below still applies — this was previously an inline
   style, which outranked every media query and overflowed narrow screens. */
@media (min-width: 901px) {
  .process-steps-3 { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   VISUAL REFINEMENT
   ========================================================= */

/* ---- Focus: one consistent, visible ring everywhere ----
   The old rule skipped form fields entirely, so keyboard users lost the
   outline on exactly the controls where position matters most. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 1px;
}
/* Dark surfaces need the lighter gold to clear contrast. */
.site-header :focus-visible,
.site-footer :focus-visible,
.info-card :focus-visible,
.calc-results :focus-visible { outline-color: var(--gold-400); }

/* ---- Header: a hairline of gold once it lifts off the page ---- */
.site-header.condensed { border-bottom-color: rgba(195, 154, 92, 0.22); }

/* ---- Mobile drawer ---- */
@media (max-width: 1160px) {
  /* Plain dim, no backdrop-filter: the blur was both unwanted and a
     needless compositing cost on phones. */
  .nav-scrim {
    background: rgba(8, 21, 39, 0.62);
  }
  /* The drawer is position:fixed inside the header, and a backdrop-filter
     makes the header its containing block — so once the page scrolled and
     the header condensed, the "full-screen" drawer shrank to the header's
     ~120px and showed only "Home". Solid navy instead of the blur here. */
  .site-header.condensed {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--navy-950);
  }
  /* Mark the current page with an accent rather than colour alone. */
  .nav-links > li { position: relative; padding-left: 0.9rem; }
  .nav-links > li::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 3px; height: 0;
    background: var(--gold-500);
    border-radius: 999px;
    transform: translateY(-50%);
    transition: height var(--transition);
  }
  .nav-links > li:has(a.active)::before { height: 22px; }
  .nav-dropdown-menu { padding-left: 0.35rem; }
}

/* Make the toggle a comfortable target whenever the drawer is in play,
   not only when the pointer reports coarse. */
@media (max-width: 1160px) {
  .nav-toggle { width: 46px; height: 46px; display: grid; place-content: center; }
  /* As grid items the bars' 5px margins no longer collapse, so they sit
     12px apart rather than 7px — the X has to travel that far to meet. */
  .nav-toggle.open span:nth-child(1) { transform: translateY(12px) rotate(45deg); }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-12px) rotate(-45deg); }
}

/* ---- Trust strip: hairline separators instead of floating text ---- */
@media (min-width: 901px) {
  .trust-strip .container { gap: 0; }
  .trust-item { flex: 1; padding: 0 var(--space-5); border-left: 1px solid var(--border); }
  .trust-item:first-child { padding-left: 0; border-left: none; }
  .trust-item:last-child { padding-right: 0; }
}
@media (max-width: 900px) {
  .trust-strip { padding: var(--space-5) 0; }
}

/* ---- Mobile action bar: lift it off the content ---- */
@media (max-width: 640px) {
  .mobile-cta-bar {
    background: rgba(8, 21, 39, 0.92);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
  }
  .mobile-cta-btn.call { border-color: rgba(255, 255, 255, 0.38); }
}

/* ---- Cards: a warmer resting state, so the hover has somewhere to go ---- */
.service-card, .blog-card, .form-card, .calc-panel {
  box-shadow: 0 1px 2px rgba(8, 21, 39, 0.04), 0 8px 24px -18px rgba(8, 21, 39, 0.5);
}

/* ---- Section rhythm: a small centred mark under centred headings ---- */
.section-head.center h2 { position: relative; padding-bottom: var(--space-4); }
.section-head.center h2::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 42px; height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--gold-400), var(--gold-600));
  border-radius: 999px;
}

/* ---- Calculator: let the headline figure carry a little more weight ---- */
.calc-results .calc-total { letter-spacing: -0.015em; }
.calc-viz-bar { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.06); }

/* ---- Selection / scrollbar already themed; round off the range control ---- */
.calc-range:focus-visible { outline-offset: 6px; }

/* ---- Print: the new ornaments and bars add nothing on paper ---- */
@media print {
  .section-head.center h2::after { display: none !important; }
  .trust-item { border-left: none !important; }
}


/* =========================================================
   START A FILE
   Hub page (file-type cards) and the step-by-step intake forms.
   The steps only collapse into one-at-a-time once intake.js has
   set `intake-ready` on <html>; without it the whole form shows.
   ========================================================= */

/* ---- Hub: 3 real estate cards over 2 wider ones ---- */
.file-type-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-6); }
.file-card { grid-column: span 2; color: inherit; }
.file-card.wide { grid-column: span 3; }
.file-card p { flex: 1; }
.file-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
  padding-top: var(--space-4); border-top: 1px dashed var(--border);
}
.file-card-time { font-size: 0.8rem; color: var(--ink-500); }
.file-card .card-link { margin-top: 0; }
.file-card:hover .card-link svg { transform: translateX(4px); }
.file-card:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; border-radius: var(--radius-lg); }
@media (max-width: 900px) {
  .file-type-grid { grid-template-columns: 1fr 1fr; }
  .file-card, .file-card.wide { grid-column: span 1; }
  .file-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .file-type-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

.process-steps.process-steps-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .process-steps.process-steps-3 { grid-template-columns: 1fr; } }

/* ---- Form page layout ---- */
.intake-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-8); align-items: start; }
.intake-aside { position: sticky; top: 110px; }
.intake-aside .info-card { padding: var(--space-6); }
.intake-aside h3 { font-size: 1.2rem; margin-bottom: var(--space-4); }
.intake-needs { display: grid; gap: 0.55rem; margin-bottom: var(--space-4); }
.intake-needs li { position: relative; padding-left: 1.4rem; font-size: 0.9rem; color: rgba(255,255,255,0.82); }
.intake-needs li::before {
  content: ""; position: absolute; left: 0; top: 0.45rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500);
}
.intake-aside .info-row { border-top: 1px solid rgba(255,255,255,0.1); }
.intake-aside-note { font-size: 0.85rem; color: rgba(255,255,255,0.6); margin-top: var(--space-3); }
@media (max-width: 1000px) {
  .intake-layout { grid-template-columns: 1fr; }
  .intake-aside { position: static; }
}

.intake-card { padding: var(--space-8); }
.intake-notice {
  display: flex; gap: 0.75rem; align-items: flex-start;
  background: var(--cream-100); border-left: 3px solid var(--gold-500);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
}
.intake-notice svg { flex-shrink: 0; color: var(--gold-600); margin-top: 0.15rem; }
.intake-notice p { font-size: 0.86rem; }
.intake-notice strong { color: var(--navy-950); }

/* ---- Progress ---- */
.intake-progress { margin-bottom: var(--space-6); }
.intake-progress-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.6rem; }
.intake-progress-count { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-600); }
.intake-progress-title { font-family: var(--font-display); font-weight: 600; color: var(--navy-950); }
.intake-meter { height: 4px; border-radius: 999px; background: var(--cream-100); overflow: hidden; }
.intake-meter span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-400), var(--gold-600)); border-radius: inherit; transition: width 400ms cubic-bezier(.4,0,.2,1); }
.intake-steps-list { display: flex; gap: 0.35rem; margin-top: var(--space-4); }
.intake-steps-list li { flex: 1; min-width: 0; }
.intake-steps-list button {
  width: 100%; display: flex; align-items: center; gap: 0.45rem;
  background: none; border: none; padding: 0.25rem 0; text-align: left;
  font-size: 0.78rem; font-weight: 600; color: var(--ink-500);
}
.intake-steps-list button:disabled { cursor: default; opacity: 0.6; }
.intake-steps-list .num {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--white); font-size: 0.75rem;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.intake-steps-list .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.intake-steps-list .is-done .num { background: var(--gold-500); border-color: var(--gold-500); color: var(--white); }
.intake-steps-list .is-current button { color: var(--navy-950); }
.intake-steps-list .is-current .num { background: var(--navy-950); border-color: var(--navy-950); color: var(--white); }
.intake-steps-list button:not(:disabled):hover .num { border-color: var(--gold-500); }
/* Too narrow for every label: keep the numbers, name only the current step. */
@media (max-width: 760px) {
  .intake-steps-list li:not(.is-current) .label { display: none; }
  .intake-steps-list li { flex: 0 0 auto; }
  .intake-steps-list li.is-current { flex: 1; }
}

/* ---- Steps ---- */
.intake-form fieldset { border: 0; min-width: 0; }
/* Legends don't take part in normal flow; floating them full-width does. */
.intake-form legend { float: left; width: 100%; padding: 0; }
.intake-form legend ~ * { clear: both; }
.intake-step + .intake-step { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--border); }
.intake-ready .intake-step:not(.is-current) { display: none; }
.intake-ready .intake-step + .intake-step { margin-top: 0; padding-top: 0; border-top: 0; }
.step-legend {
  font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.75rem); font-weight: 600;
  color: var(--navy-950); line-height: 1.2; margin-bottom: var(--space-3);
}
.step-legend:focus { outline: none; }
.step-kicker { display: block; font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-600); margin-bottom: 0.3rem; }
.intake-ready .step-kicker { display: none; } /* the progress header already says it */
.step-intro { font-size: 0.95rem; margin-bottom: var(--space-5); clear: both; }
.intake-form .step-legend + :not(.step-intro) { margin-top: var(--space-3); }

.step-nav {
  display: none; align-items: center; justify-content: space-between; gap: var(--space-4);
  margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border);
}
.intake-ready .step-nav, .step-nav-final { display: flex; }
.step-nav-final [data-step-back] { visibility: hidden; }
.intake-ready .step-nav-final [data-step-back] { visibility: visible; }
.step-nav .btn svg { transition: transform var(--transition); }
.step-nav .btn:hover svg { transform: translateX(3px); }
@media (max-width: 560px) {
  .step-nav { flex-direction: column-reverse; align-items: stretch; }
  .step-nav .btn { width: 100%; }
  .step-nav > span { display: none; }
}

/* ---- Field additions ---- */
.req { color: var(--gold-600); font-weight: 700; }
.field-hint { font-size: 0.8rem; color: var(--ink-500); margin: -0.15rem 0 0.5rem; line-height: 1.5; }
.form-row-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) { .form-row-3 { grid-template-columns: 1fr; row-gap: 0; } }
.field.has-error select { border-color: #b3432b; }

.field-group { margin: var(--space-2) 0 var(--space-5); }
.group-legend {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-500); margin-bottom: var(--space-3);
  display: flex; align-items: center; gap: 0.75rem;
}
.group-legend::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.group-hint { clear: both; margin-top: 0; }
.group-body { clear: both; }
.cond > .field-group:first-child, .cond > .person-block:first-child { margin-top: 0; }

/* Pill radios / checkboxes */
.choice-field legend { font-size: 0.85rem; font-weight: 600; color: var(--navy-950); margin-bottom: 0.5rem; line-height: 1.45; }
.choice-group { display: flex; flex-wrap: wrap; gap: 0.5rem; clear: both; }
.choice { position: relative; display: inline-flex; }
.field .choice input {
  position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; margin: 0; pointer-events: none;
}
.choice span {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.6rem 1.05rem; min-height: 44px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--cream);
  font-size: 0.9rem; font-weight: 500; color: var(--ink-700); cursor: pointer; line-height: 1.3;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.choice span:hover { border-color: var(--gold-500); }
.choice input:checked + span { background: var(--navy-950); border-color: var(--navy-950); color: var(--white); }
.choice input:focus-visible + span { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.choice-check span::before {
  content: ""; width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0;
  border: 1.5px solid var(--ink-300); background: var(--white);
}
.choice-check input:checked + span::before {
  border-color: var(--gold-400); background: var(--gold-400) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23081527' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.field.has-error .choice span { border-color: #b3432b; }

/* Consent checkbox */
.confirm { display: flex; gap: 0.75rem; align-items: flex-start; cursor: pointer; font-size: 0.9rem; color: var(--ink-700); font-weight: 400; }
.field .confirm input {
  width: 20px; height: 20px; min-height: 0; padding: 0; flex-shrink: 0; margin-top: 0.15rem;
  accent-color: var(--navy-950); cursor: pointer;
}
.confirm-field { margin-top: var(--space-2); padding: var(--space-4); background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius-md); }
.confirm-field.has-error { border-color: #b3432b; }

/* People blocks */
.person-block {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-5) var(--space-2);
  margin-bottom: var(--space-4);
}
.block-legend { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--navy-950); margin-bottom: var(--space-4); padding-right: 5rem !important; }
.block-legend small { font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-600); margin-left: 0.5rem; vertical-align: middle; }
.person-remove {
  position: absolute; top: 1.15rem; right: 1.25rem;
  background: none; border: none; font-size: 0.82rem; font-weight: 600; color: var(--ink-500);
  text-decoration: underline; text-underline-offset: 3px;
}
.person-remove:hover { color: #b3432b; }
.person-adder { margin-bottom: var(--space-5); }
.btn-add {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1.2rem; border-radius: var(--radius-md);
  background: transparent; border: 1.5px dashed var(--gold-500); color: var(--gold-600);
  font-weight: 600; font-size: 0.92rem;
  transition: background var(--transition), color var(--transition);
}
.btn-add:hover { background: var(--gold-100); color: var(--navy-950); }
.btn-add[hidden], .person-remove[hidden] { display: none; }

/* ---- After sending ---- */
.intake-success { display: none; text-align: center; padding: var(--space-6) 0; }
.intake-success.show { display: block; }
.intake-success:focus { outline: none; }
.intake-success .icon-badge {
  width: 64px; height: 64px; margin: 0 auto var(--space-5);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); color: var(--gold-400);
}
.intake-success h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: var(--space-4); }
.intake-success p { max-width: 520px; margin: 0 auto var(--space-4); }
.intake-success .hero-actions { justify-content: center; margin: var(--space-6) 0 0; }
.intake-card.is-sent .intake-progress,
.intake-card.is-sent .intake-notice,
.intake-card.is-sent .intake-form,
.intake-card.is-sent .form-error-banner { display: none; }

@media (max-width: 640px) {
  .intake-card { padding: var(--space-5); }
  .person-block { padding: var(--space-4) var(--space-4) var(--space-1); }
}

@media print {
  .intake-progress, .step-nav, .person-adder, .person-remove, .intake-aside { display: none !important; }
  .intake-step { display: block !important; }
}