@font-face {
    font-family: 'Fraunces';
    src: url('/assets/fonts/fraunces-var-normal.woff2') format('woff2');
    font-weight: 300 700; font-style: normal; font-display: swap;
  }
  @font-face {
    font-family: 'Fraunces';
    src: url('/assets/fonts/fraunces-var-italic.woff2') format('woff2');
    font-weight: 300 700; font-style: italic; font-display: swap;
  }
  @font-face {
    font-family: 'Archivo';
    src: url('/assets/fonts/archivo-italic-500.woff2') format('woff2');
    font-weight: 500; font-style: italic; font-display: swap;
  }

  :root {
    --bg: #050d18;
    --bg-2: #081422;
    --ink: #f4f1e9;
    --ink-dim: rgba(244, 241, 233, 0.64);
    --ink-faint: rgba(244, 241, 233, 0.38);
    --gold: #c9a24b;
    --gold-bright: #ddb75f;
    --hairline: rgba(244, 241, 233, 0.1);
    --hairline-2: rgba(244, 241, 233, 0.16);
    --cream: #f4f1e9;
    --cream-ink: #0d1826;
    --cream-dim: rgba(13, 24, 38, 0.62);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --accent: 'Archivo', sans-serif;
  }

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

  body {
    background: var(--bg); color: var(--ink);
    font-family: var(--sans); font-size: 17px; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }
  ::selection { background: var(--gold); color: var(--bg); }
  a { color: inherit; }
  svg { display: block; }
  img { max-width: 100%; display: block; }
  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

  .grain {
    position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  }

  .eyebrow {
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--gold);
  }
  .eyebrow .ghost-num {
    color: transparent; -webkit-text-stroke: 1px var(--hairline-2);
    font-family: var(--serif); font-size: 15px; letter-spacing: 0.06em; margin-right: 10px;
  }

  h1, h2, h3 { font-family: var(--serif); font-weight: 480; }
  h2.section-title {
    font-size: clamp(2.1rem, 4.6vw, 3.6rem);
    line-height: 1.06; letter-spacing: -0.015em;
    text-wrap: balance; margin: 18px 0 20px;
  }
  h2.section-title em, h1 em, .page-hero h1 em {
    font-family: var(--accent); font-style: italic; font-weight: 500;
    letter-spacing: -0.01em; color: var(--gold);
  }
  .body-copy { color: var(--ink-dim); max-width: 58ch; }
  .body-copy strong { color: var(--ink); font-weight: 600; }

  .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
  .reveal.in { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  }

  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--sans); font-size: 16px; font-weight: 600;
    padding: 16px 30px; border-radius: 999px;
    text-decoration: none; cursor: pointer; border: none;
    transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
    white-space: nowrap;
  }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: scale(0.97); }
  .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .btn svg { width: 17px; height: 17px; flex-shrink: 0; }
  .btn-gold { background: var(--gold); color: #14100a; box-shadow: 0 4px 24px rgba(201, 162, 75, 0.32); }
  .btn-gold:hover { background: var(--gold-bright); box-shadow: 0 8px 32px rgba(201, 162, 75, 0.42); }
  .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--hairline-2); }
  .btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright); }
  /* --ink is the light text color. On a cream band that is cream-on-cream: a measured 1.0
     contrast ratio, so the button label is invisible while its border still shows. This was
     live on 7 area guides ("Price a Titusville buy, all-in", "All Area Guides"). */
  .cream-band .btn-ghost { color: var(--cream-ink); border-color: rgba(13, 24, 38, 0.22); }
  .cream-band .btn-ghost:hover { border-color: #a07f2f; color: #a07f2f; }
  .btn-navy { background: var(--cream-ink); color: var(--cream); box-shadow: 0 4px 24px rgba(13, 24, 38, 0.28); }
  .btn-navy:hover { background: #16263c; }

  /* ---------- header ---------- */
  .site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 80;
    transition: background 0.3s ease, border-color 0.3s ease;
    border-bottom: 1px solid transparent;
  }
  .site-header.scrolled {
    background: rgba(5, 13, 24, 0.82);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom-color: var(--hairline);
  }
  .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 74px; }
  .wordmark { display: flex; flex-direction: column; text-decoration: none; line-height: 1.15; }
  .wordmark .wm-name { font-family: var(--serif); font-size: 19px; font-weight: 520; letter-spacing: 0.01em; }
  .wordmark .wm-sub { font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
  .site-nav { display: flex; align-items: center; gap: 30px; }
  .site-nav a.navlink {
    font-size: 13.5px; font-weight: 600; text-decoration: none;
    color: var(--ink-dim); letter-spacing: 0.04em; transition: color 0.15s ease;
    padding-bottom: 3px; border-bottom: 1px solid transparent;
  }
  .site-nav a.navlink:hover { color: var(--gold-bright); }
  .site-nav a.navlink.active { color: var(--ink); border-bottom-color: var(--gold); }
  .header-phone {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600; text-decoration: none;
    color: var(--ink); font-variant-numeric: tabular-nums;
  }
  .header-phone svg { width: 15px; height: 15px; color: var(--gold); }
  .header-phone:hover { color: var(--gold-bright); }
  .header-cta {
    font-size: 13.5px; font-weight: 700; text-decoration: none;
    background: var(--gold); color: #14100a;
    padding: 11px 22px; border-radius: 999px;
    transition: background 0.18s ease, transform 0.18s var(--ease);
  }
  .header-cta:hover { background: var(--gold-bright); transform: translateY(-1px); }
  @media (max-width: 900px) {
    .site-nav a.navlink { display: none; }
    .header-phone { display: none; }
    .header-cta { display: none; }
  }

  /* ---------- mobile hamburger + overlay menu ---------- */
  .nav-toggle {
    display: none;
    width: 44px; height: 44px; margin-right: -8px;
    flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    background: transparent; border: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent; position: relative; z-index: 2;
  }
  .nav-toggle .nt-bar {
    width: 24px; height: 2px; border-radius: 2px; background: var(--ink);
    transition: transform 0.3s var(--ease), opacity 0.2s ease;
  }
  .nav-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
  body.menu-open .nav-toggle .nt-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.menu-open .nav-toggle .nt-bar:nth-child(2) { opacity: 0; }
  body.menu-open .nav-toggle .nt-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  body.menu-open { overflow: hidden; }

  .mobile-menu {
    position: fixed; inset: 0; z-index: 78;
    background: rgba(5, 13, 24, 0.97);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    display: flex; flex-direction: column;
    padding: 88px 32px calc(28px + env(safe-area-inset-bottom));
    /* Centered by auto margins on the children rather than justify-content:
       center. When the links are taller than the screen, justify-content
       overflows symmetrically and shoves the first link up under the fixed
       header, with no way to scroll to it. Auto margins collapse to 0 instead. */
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    opacity: 0; visibility: hidden;
    transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
  }
  body.menu-open .mobile-menu { opacity: 1; visibility: visible; }
  .mm-links { display: flex; flex-direction: column; margin-top: auto; }
  .mm-links a {
    display: flex; align-items: center; justify-content: space-between;
    /* Sized to fit 7 links + the actions on a real handset. Mobile browsers with
       font boosting on (Samsung Internet) render this ~1.3x larger than desktop
       emulation shows, so leave headroom rather than filling the viewport. */
    font-family: var(--serif); font-size: clamp(1.5rem, 6.2vw, 1.9rem);
    font-weight: 480; letter-spacing: -0.01em; color: var(--ink);
    text-decoration: none; padding: 11px 0;
    border-bottom: 1px solid var(--hairline);
    opacity: 0; transform: translateY(16px);
  }
  body.menu-open .mm-links a { animation: mmIn 0.5s var(--ease) forwards; }
  body.menu-open .mm-links a:nth-child(1) { animation-delay: 0.05s; }
  body.menu-open .mm-links a:nth-child(2) { animation-delay: 0.09s; }
  body.menu-open .mm-links a:nth-child(3) { animation-delay: 0.13s; }
  body.menu-open .mm-links a:nth-child(4) { animation-delay: 0.17s; }
  body.menu-open .mm-links a:nth-child(5) { animation-delay: 0.21s; }
  body.menu-open .mm-links a:nth-child(6) { animation-delay: 0.25s; }
  body.menu-open .mm-links a:nth-child(7) { animation-delay: 0.29s; }
  .mm-links a:active { color: var(--gold-bright); }
  .mm-links a .mm-chev { width: 22px; height: 22px; color: var(--gold); opacity: 0.55; flex-shrink: 0; }
  @keyframes mmIn { to { opacity: 1; transform: none; } }

  .mm-actions { margin-top: 22px; margin-bottom: auto; display: flex; flex-direction: column; gap: 10px; }
  .mm-call {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none;
    padding: 13px; border-radius: 999px; border: 1px solid var(--hairline-2);
    font-variant-numeric: tabular-nums;
  }
  .mm-call svg { width: 17px; height: 17px; color: var(--gold); }
  .mm-cta {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700; text-decoration: none;
    background: var(--gold); color: #14100a; padding: 14px; border-radius: 999px;
    box-shadow: 0 4px 24px rgba(201, 162, 75, 0.3);
  }
  @media (max-width: 900px) { .nav-toggle { display: inline-flex; } }
  @media (min-width: 901px) { .mobile-menu { display: none; } }
  /* keep the chat launcher/panel out of the way while the menu overlay is open */
  body.menu-open .jdc-launcher, body.menu-open .jdc-panel { display: none; }
  @media (prefers-reduced-motion: reduce) {
    .mm-links a { animation: none !important; opacity: 1; transform: none; }
    .mobile-menu { transition: opacity 0.01s; }
  }

  /* ---------- router pages ---------- */
  

  /* ---------- home hero ---------- */
  .hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 120px 0 80px; overflow: hidden; }
  .hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(700px circle at var(--mx, 70%) var(--my, 35%), rgba(201, 162, 75, 0.09), transparent 60%);
    pointer-events: none;
  }
  .hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 60px; align-items: center; width: 100%; }
  .hero-copy .eyebrow { display: block; margin-bottom: 26px; }
  .hero h1 {
    font-size: clamp(3.2rem, 8.4vw, 7.2rem);
    line-height: 0.98; letter-spacing: -0.025em;
    text-wrap: balance; margin-bottom: 30px;
  }
  .hero-lede { font-size: 18px; line-height: 1.65; color: var(--ink-dim); max-width: 50ch; margin-bottom: 38px; }
  .hero-lede strong { color: var(--ink); font-weight: 600; }
  .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 42px; }
  .hero-trust {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0;
    padding-top: 26px; border-top: 1px solid var(--hairline);
    font-size: 13px; color: var(--ink-faint); letter-spacing: 0.05em;
  }
  .hero-trust .tt { white-space: nowrap; }
  .hero-trust .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); margin: 0 14px; flex-shrink: 0; }
  .hero-trust strong { color: var(--ink-dim); font-weight: 600; }

  .load-seq { opacity: 0; transform: translateY(34px); animation: loadin 0.9s var(--ease) forwards; }
  .load-seq.d1 { animation-delay: 0.08s; }
  .load-seq.d2 { animation-delay: 0.2s; }
  .load-seq.d3 { animation-delay: 0.34s; }
  .load-seq.d4 { animation-delay: 0.48s; }
  .load-seq.d5 { animation-delay: 0.62s; }
  @keyframes loadin { to { opacity: 1; transform: none; } }

  /* Home hero: Josh anchored to the hero's bottom edge, so the section line
     always clips him (never floats, at any viewport height). */
  .hero-portrait {
    position: absolute; z-index: 2; pointer-events: none;
    bottom: 0; right: max(0px, calc((100% - 1180px) / 2));
    width: auto; margin: 0;
  }
  .hero-portrait .cutout.full {
    display: block; width: auto;
    /* last term keeps his head clear of the nav on short viewports */
    height: min(90vh, calc(100svh - 100px), 980px); max-width: 38vw;
    filter: drop-shadow(-16px 18px 26px rgba(0, 0, 0, 0.45)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
  }
  .hero-portrait .cutout.head { display: none; }
  @media (max-width: 900px) {
    .hero { padding: 108px 0 60px; min-height: auto; }
    .hero-grid { grid-template-columns: 1fr; gap: 44px; }
    /* Mobile: stack a faded headshot above the copy (no full body) */
    .hero { flex-direction: column; justify-content: center; }
    .hero-portrait {
      position: static; bottom: auto; right: auto;
      width: min(64%, 250px); height: auto; overflow: visible;
      margin: 0 auto 6px;
      -webkit-mask-image: radial-gradient(ellipse 68% 78% at 50% 32%, #000 55%, transparent 100%);
      mask-image: radial-gradient(ellipse 68% 78% at 50% 32%, #000 55%, transparent 100%);
    }
    .hero-portrait::after { display: none; }
    .hero-portrait .cutout.full { display: none; }
    .hero-portrait .cutout.head {
      display: block; width: 100%; height: auto; margin: 0 auto;
      filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.4));
    }
    .hero h1 { font-size: clamp(2.9rem, 12.5vw, 4.6rem); }
    .hero-copy { text-align: center; }
    .hero-lede { margin-left: auto; margin-right: auto; }
    .hero-ctas { justify-content: center; }
    .hero-trust { justify-content: center; }
  }

  /* ---------- page heroes (sub pages) ---------- */
  .page-hero {
    position: relative;
    min-height: 62vh;
    display: flex; align-items: flex-end;
    padding: 150px 0 64px;
    overflow: hidden;
  }
  .page-hero .ph-bg {
    position: absolute; inset: 0; z-index: 0;
  }
  .page-hero .ph-bg img {
    width: 100%; height: 100%; object-fit: cover;
    filter: saturate(0.88) contrast(1.02);
  }
  .page-hero .ph-bg::after {
    content: '';
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgba(5,13,24,0.72) 0%, rgba(5,13,24,0.38) 45%, rgba(5,13,24,0.88) 100%),
      linear-gradient(90deg, rgba(5,13,24,0.55), rgba(5,13,24,0.1));
  }
  .page-hero .wrap { position: relative; z-index: 1; width: 100%; }
  .crumbs {
    display: flex; align-items: center; gap: 10px;
    font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em;
    color: var(--ink-faint); margin-bottom: 22px;
  }
  .crumbs a {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--ink-dim); text-decoration: none;
    transition: color 0.15s ease;
  }
  .crumbs a:hover { color: var(--gold-bright); }
  .crumbs a svg { width: 13px; height: 13px; }
  .crumbs .sep { color: var(--ink-faint); opacity: 0.6; }
  .crumbs .here { color: var(--gold); text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; }
  .page-hero h1 {
    font-size: clamp(2.7rem, 6.4vw, 5.2rem);
    line-height: 1.0; letter-spacing: -0.02em;
    text-wrap: balance; margin: 18px 0 16px;
    max-width: 16ch;
  }
  .page-hero .ph-sub { font-size: 17.5px; color: var(--ink-dim); max-width: 52ch; }
  .page-hero .ph-sub strong { color: var(--ink); }
  @media (max-width: 700px) { .page-hero { min-height: 54vh; padding: 130px 0 44px; } }

  /* ---------- shared bands ---------- */
  section.band { padding: 110px 0; }
  @media (max-width: 800px) { section.band { padding: 68px 0; } }
  section.band-tight { padding: 76px 0; }
  @media (max-width: 800px) { section.band-tight { padding: 52px 0; } }

  .proof { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--bg-2); }
  .proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
  .proof-cell { padding: 54px 28px; text-align: center; border-left: 1px solid var(--hairline); }
  .proof-cell:first-child { border-left: none; }
  .proof-num {
    font-family: var(--serif); font-weight: 520;
    font-size: clamp(2.6rem, 5.4vw, 4.4rem);
    line-height: 1; color: var(--gold);
    font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  }
  .proof-label { margin-top: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
  @media (max-width: 800px) {
    .proof-grid { grid-template-columns: 1fr 1fr; }
    .proof-cell { padding: 34px 16px; }
    .proof-cell:nth-child(3) { border-left: none; }
    .proof-cell:nth-child(1), .proof-cell:nth-child(2) { border-bottom: 1px solid var(--hairline); }
  }

  .marquee-band { overflow: hidden; padding: 34px 0; border-bottom: 1px solid var(--hairline); display: flex; }
  .marquee-track { display: flex; align-items: center; flex-shrink: 0; animation: marquee 42s linear infinite; white-space: nowrap; }
  .marquee-band:hover .marquee-track { animation-play-state: paused; }
  @keyframes marquee { to { transform: translateX(-100%); } }
  .mq-item {
    font-family: var(--serif); font-weight: 420;
    font-size: clamp(1.3rem, 2.6vw, 2rem);
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-faint); display: inline-flex; align-items: center;
  }
  .mq-item svg { width: 9px; height: 9px; margin: 0 28px; color: var(--gold); opacity: 0.8; }

  /* ---------- router cards ---------- */
  .router-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 54px; }
  @media (max-width: 860px) { .router-grid { grid-template-columns: 1fr; } }
  .router-card {
    position: relative; border: 1px solid var(--hairline); border-radius: 18px;
    padding: 38px 32px; text-decoration: none;
    display: flex; flex-direction: column; gap: 16px;
    background: linear-gradient(180deg, rgba(244,241,233,0.02), rgba(244,241,233,0));
    transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
    overflow: hidden;
  }
  .router-card:hover {
    transform: translateY(-5px);
    border-color: rgba(201, 162, 75, 0.45);
    background: linear-gradient(180deg, rgba(201,162,75,0.045), rgba(244,241,233,0));
  }
  .router-thumb { margin: -38px -32px 4px; aspect-ratio: 16/8; overflow: hidden; }
  .router-thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); transition: transform 0.5s var(--ease); }
  .router-card:hover .router-thumb img { transform: scale(1.04); }
  .router-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(201, 162, 75, 0.09); color: var(--gold);
  }
  .router-icon svg { width: 24px; height: 24px; }
  .router-card h3 { font-size: 24px; font-weight: 500; letter-spacing: -0.01em; }
  .router-card p { font-size: 15px; color: var(--ink-dim); line-height: 1.6; flex: 1; }
  .router-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--gold); letter-spacing: 0.04em; }
  .router-cta svg { width: 15px; height: 15px; transition: transform 0.2s var(--ease); }
  .router-card:hover .router-cta svg { transform: translateX(4px); }

  /* ---------- image interlude ---------- */
  .interlude { position: relative; min-height: 480px; display: flex; align-items: center; overflow: hidden; }
  .interlude img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); }
  .interlude::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(5,13,24,0.82) 0%, rgba(5,13,24,0.25) 50%, rgba(5,13,24,0.85) 100%);
  }
  .interlude .wrap { position: relative; z-index: 1; }
  .interlude h2 {
    font-size: clamp(1.9rem, 4vw, 3.1rem);
    line-height: 1.1; letter-spacing: -0.015em;
    max-width: 22ch; margin-top: 16px;
    text-shadow: 0 2px 24px rgba(5,13,24,0.6);
  }
  .interlude h2 em { font-family: var(--accent); font-style: italic; font-weight: 500; letter-spacing: -0.01em; color: var(--gold-bright); }

  /* ---------- cream sections ---------- */
  .cream-band { background: var(--cream); color: var(--cream-ink); }
  .cream-band .eyebrow { color: #a07f2f; }
  .cream-band .eyebrow .ghost-num { -webkit-text-stroke-color: rgba(13,24,38,0.22); }
  .cream-band h2.section-title em { color: #a07f2f; }
  .cream-band .body-copy { color: var(--cream-dim); }
  .cream-band .body-copy strong { color: var(--cream-ink); }

  .val-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 70px; align-items: start; }
  @media (max-width: 900px) { .val-grid { grid-template-columns: 1fr; gap: 44px; } }

  .val-form-card {
    background: #fff; border-radius: 22px; padding: 44px;
    box-shadow: 0 30px 80px -18px rgba(13, 24, 38, 0.22), 0 8px 24px rgba(13, 24, 38, 0.07);
  }
  @media (max-width: 600px) { .val-form-card { padding: 30px 24px; } }

  .val-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; }
  .val-progress .bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(13,24,38,0.1); overflow: hidden; }
  .val-progress .bar i { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 3px; transition: width 0.4s var(--ease); }
  .val-progress .step-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-dim); white-space: nowrap; }

  .val-step { display: none; }
  .val-step.active { display: block; animation: stepin 0.4s var(--ease); }
  @keyframes stepin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

  .field { margin-bottom: 22px; }
  .field label { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream-dim); margin-bottom: 8px; }
  .field input, .field textarea {
    width: 100%; font-family: var(--sans); font-size: 16.5px; color: var(--cream-ink);
    background: transparent; border: none; border-bottom: 1.5px solid rgba(13, 24, 38, 0.22);
    padding: 12px 2px; border-radius: 0;
    transition: border-color 0.2s ease;
  }
  .field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--gold); }
  .field input::placeholder, .field textarea::placeholder { color: rgba(13,24,38,0.32); }

  .chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
  .chip {
    font-family: var(--sans); font-size: 14.5px; font-weight: 600;
    padding: 11px 20px; border-radius: 999px;
    border: 1.5px solid rgba(13, 24, 38, 0.18);
    background: transparent; color: var(--cream-ink);
    cursor: pointer; transition: all 0.15s ease;
  }
  .chip:hover { border-color: var(--gold); }
  .chip.sel { background: var(--cream-ink); color: var(--cream); border-color: var(--cream-ink); }
  .chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  .val-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 32px; }
  .val-back {
    background: none; border: none; cursor: pointer;
    font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--cream-dim);
    padding: 10px 4px; display: inline-flex; align-items: center; gap: 6px;
  }
  .val-back:hover { color: var(--cream-ink); }
  .val-back svg { width: 15px; height: 15px; }

  .val-microcopy { margin-top: 20px; font-size: 13px; color: var(--cream-dim); line-height: 1.6; }
  .val-microcopy svg { display: inline-block; width: 13px; height: 13px; vertical-align: -2px; margin-right: 5px; color: #2e7a39; }

  .val-confirm { text-align: center; padding: 26px 0 10px; }
  .val-confirm svg { width: 40px; height: 40px; color: #2e7a39; margin: 0 auto 18px; }
  .val-confirm h3 { font-size: 26px; font-weight: 500; margin-bottom: 12px; }
  .val-confirm p { font-size: 15px; color: var(--cream-dim); max-width: 40ch; margin: 0 auto; }

  .sell-points { display: flex; flex-direction: column; gap: 22px; margin-top: 40px; }
  .sell-point { display: flex; gap: 16px; align-items: flex-start; }
  .sell-point svg { width: 20px; height: 20px; color: #a07f2f; flex-shrink: 0; margin-top: 3px; }
  .sell-point .sp-text { font-size: 15.5px; color: var(--cream-dim); line-height: 1.55; }
  .sell-point .sp-text strong { color: var(--cream-ink); font-weight: 600; display: block; margin-bottom: 2px; font-size: 16px; }

  /* ---------- process ledger (numbered steps) ---------- */
  .process-list { margin-top: 50px; border-top: 1px solid var(--hairline); }
  .cream-band .process-list { border-top-color: var(--cream-hairline, rgba(13,24,38,0.14)); }
  /* .process-row p hardcodes --ink-dim (light, for dark bands). Inside a cream band that
     renders cream-on-cream: a measured 1.0:1 contrast ratio, i.e. the paragraph is fully
     invisible while its h4 above it stays readable. The border above got the cream
     treatment; the body text never did, so the explanation under every "realities to price
     in" heading has been blank on all 8 area guides. h4 needs no rule: it has no color of
     its own and inherits --cream-ink from .cream-band. */
  .cream-band .process-row p { color: var(--cream-dim); }
  .cream-band .process-row p strong { color: var(--cream-ink); }
  .cream-band .process-row { border-bottom-color: rgba(13, 24, 38, 0.1); }
  .process-row {
    display: grid; grid-template-columns: 90px 1fr 1.4fr; gap: 28px;
    padding: 34px 0; border-bottom: 1px solid var(--hairline);
    align-items: baseline;
  }
  @media (max-width: 700px) { .process-row { grid-template-columns: 56px 1fr; } .process-row p { grid-column: 2; } }
  .process-num {
    font-family: var(--serif); font-size: 2.4rem; font-weight: 440;
    color: transparent; -webkit-text-stroke: 1px rgba(201, 162, 75, 0.55);
    line-height: 1;
  }
  .process-row h4 { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
  .process-row p { font-size: 15px; color: var(--ink-dim); line-height: 1.65; }

  /* ---------- drone band ---------- */
  .drone-band { background: var(--bg); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); position: relative; overflow: hidden; }
  .drone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
  @media (max-width: 900px) { .drone-grid { grid-template-columns: 1fr; } }
  .drone-chip {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gold); border: 1px solid rgba(201, 162, 75, 0.4);
    padding: 9px 18px; border-radius: 999px; margin-top: 30px;
  }
  .drone-chip svg { width: 14px; height: 14px; }
  .drone-scene svg { width: 100%; height: auto; }
  .drone-scene .draw { stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 2s var(--ease) 0.3s; }
  .drone-scene.in .draw { stroke-dashoffset: 0; }
  .drone-scene .drone-fly { animation: dronefly 7s ease-in-out infinite alternate; }
  @keyframes dronefly { from { transform: translate(0, 0); } to { transform: translate(26px, -14px); } }

  /* ---------- buy page ---------- */
  .buy-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 70px; align-items: center; }
  @media (max-width: 900px) { .buy-grid { grid-template-columns: 1fr; gap: 40px; } }
  .buy-list { display: flex; flex-direction: column; margin-top: 8px; }
  .buy-item { display: flex; gap: 18px; padding: 26px 0; border-bottom: 1px solid var(--hairline); }
  .buy-item:last-child { border-bottom: none; }
  .buy-item svg { width: 22px; height: 22px; color: var(--gold); flex-shrink: 0; margin-top: 3px; }
  .buy-item h4 { font-family: var(--sans); font-size: 16.5px; font-weight: 600; margin-bottom: 4px; }
  .buy-item p { font-size: 14.5px; color: var(--ink-dim); line-height: 1.6; }

  .areas-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 44px; }
  .area-chip {
    font-size: 14px; font-weight: 600; text-decoration: none;
    padding: 12px 22px; border-radius: 999px;
    border: 1px solid var(--hairline-2); color: var(--ink-dim);
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .area-chip:hover { border-color: var(--gold); color: var(--gold-bright); }

  /* zillow band */
  .zillow-band {
    display: flex; align-items: center; justify-content: space-between; gap: 30px;
    border: 1px solid var(--hairline-2); border-radius: 20px;
    padding: 40px 46px; flex-wrap: wrap;
    background: linear-gradient(180deg, rgba(244,241,233,0.025), rgba(244,241,233,0));
  }
  .zillow-band h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 480; letter-spacing: -0.01em; max-width: 24ch; }
  .zillow-band h3 em { font-family: var(--accent); font-style: italic; font-weight: 500; letter-spacing: -0.01em; color: var(--gold); }
  .zillow-band p { font-size: 14px; color: var(--ink-faint); margin-top: 8px; }

  /* ---------- investor gate ---------- */
  .gate-card {
    border: 1px solid rgba(201, 162, 75, 0.35); border-radius: 22px;
    padding: 64px 56px; position: relative;
    background:
      radial-gradient(600px circle at 85% 10%, rgba(201, 162, 75, 0.07), transparent 55%),
      linear-gradient(180deg, rgba(244,241,233,0.02), rgba(244,241,233,0));
  }
  @media (max-width: 700px) { .gate-card { padding: 40px 26px; } }
  .gate-inner { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 50px; align-items: center; }
  @media (max-width: 860px) { .gate-inner { grid-template-columns: 1fr; } }
  .gate-form { display: flex; gap: 10px; }
  .gate-form input {
    flex: 1; min-width: 0;
    font-family: var(--sans); font-size: 16px; color: var(--ink);
    background: rgba(244, 241, 233, 0.05);
    border: 1px solid var(--hairline-2); border-radius: 999px;
    padding: 15px 24px; transition: border-color 0.2s ease;
  }
  .gate-form input:focus { outline: none; border-color: var(--gold); }
  .gate-form input::placeholder { color: var(--ink-faint); }
  @media (max-width: 560px) { .gate-form { flex-direction: column; } }
  .gate-note { margin-top: 16px; font-size: 12.5px; color: var(--ink-faint); }

  /* ---------- quote ---------- */
  .quote-band { text-align: center; position: relative; }
  .quote-band blockquote {
    font-family: var(--serif); font-style: italic; font-weight: 420;
    font-size: clamp(1.7rem, 4vw, 3rem);
    line-height: 1.25; letter-spacing: -0.01em;
    max-width: 26ch; margin: 0 auto; position: relative;
  }
  .quote-band blockquote::before {
    content: '\201C';
    position: absolute; top: -0.55em; left: 50%; transform: translateX(-50%);
    font-size: 8rem; line-height: 1;
    color: transparent; -webkit-text-stroke: 1px var(--hairline-2);
    font-style: normal; pointer-events: none;
  }
  .quote-attr { margin-top: 30px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
  .quote-stars { display: flex; justify-content: center; gap: 5px; margin-top: 16px; color: var(--gold); }
  .quote-stars svg { width: 16px; height: 16px; }
  .quote-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font-size: 14px; font-weight: 600; color: var(--gold); text-decoration: none; }
  .quote-link:hover { color: var(--gold-bright); }
  .quote-link svg { width: 15px; height: 15px; }

  /* ---------- about ---------- */
  .about-band { background: var(--bg-2); border-top: 1px solid var(--hairline); }
  .about-grid { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 70px; align-items: center; }
  @media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: 40px; } }
  .about-portrait { position: relative; }
  .about-portrait img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 16px; filter: contrast(1.05) saturate(0.85); }
  .about-portrait::after {
    content: '';
    position: absolute; inset: 12px -12px -12px 12px;
    border: 1px solid rgba(201, 162, 75, 0.3);
    border-radius: 18px; z-index: -1;
  }
  .cred-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; margin-top: 38px; }
  @media (max-width: 560px) { .cred-list { grid-template-columns: 1fr; } }
  .cred-item { background: var(--bg-2); padding: 20px 22px; }
  .cred-item dt { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; margin-bottom: 5px; }
  .cred-item dd { font-size: 14.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

  /* ---------- contact ---------- */
  .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; margin-top: 10px; }
  @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 44px; } }
  .contact-rows { display: flex; flex-direction: column; gap: 12px; margin-top: 40px; }
  .contact-row {
    display: flex; align-items: center; gap: 16px;
    padding: 20px 24px; border: 1px solid var(--hairline); border-radius: 16px;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s var(--ease);
  }
  .contact-row:hover { border-color: rgba(201, 162, 75, 0.45); transform: translateY(-2px); }
  .contact-row svg { width: 19px; height: 19px; color: var(--gold); flex-shrink: 0; }
  .contact-row .cr-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; display: block; }
  .contact-row .cr-value { font-size: 16px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
  .response-promise {
    margin-top: 26px; padding: 18px 22px;
    border-left: 2px solid var(--gold);
    background: rgba(201, 162, 75, 0.05);
    border-radius: 0 12px 12px 0;
    font-size: 14px; color: var(--ink-dim); line-height: 1.6;
  }
  .response-promise strong { color: var(--ink); }
  .contact-form-card {
    border: 1px solid var(--hairline); border-radius: 22px; padding: 40px;
    background: linear-gradient(180deg, rgba(244,241,233,0.025), rgba(244,241,233,0));
  }
  @media (max-width: 600px) { .contact-form-card { padding: 28px 22px; } }
  .contact-form-card .field label { color: var(--ink-faint); }
  .contact-form-card .field input, .contact-form-card .field textarea { color: var(--ink); border-bottom-color: var(--hairline-2); }
  .contact-form-card .field input:focus, .contact-form-card .field textarea:focus { border-bottom-color: var(--gold); }
  .contact-form-card .field input::placeholder, .contact-form-card .field textarea::placeholder { color: var(--ink-faint); }
  .contact-form-card textarea { resize: vertical; min-height: 88px; }
  .cf-confirm { text-align: center; padding: 30px 6px; }
  .cf-confirm svg { width: 36px; height: 36px; color: #6fb07a; margin: 0 auto 16px; }
  .cf-confirm h3 { font-size: 24px; font-weight: 500; margin-bottom: 10px; }
  .cf-confirm p { font-size: 14.5px; color: var(--ink-dim); max-width: 38ch; margin: 0 auto; }

  /* ---------- closing CTA band (sub pages) ---------- */
  .closer {
    text-align: center;
    border-top: 1px solid var(--hairline);
    background: radial-gradient(700px circle at 50% 0%, rgba(201,162,75,0.06), transparent 60%);
  }
  .closer h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); letter-spacing: -0.015em; margin-bottom: 16px; }
  .closer h2 em { font-family: var(--accent); font-style: italic; font-weight: 500; letter-spacing: -0.01em; color: var(--gold); }
  .closer p { color: var(--ink-dim); max-width: 46ch; margin: 0 auto 34px; }
  .closer .btn-row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

  /* ---------- footer ---------- */
  .site-footer { border-top: 1px solid var(--hairline); padding: 64px 0 120px; background: var(--bg); }
  .footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; flex-wrap: wrap; margin-bottom: 44px; }
  .footer-brand .fb-name { font-family: var(--serif); font-size: 24px; font-weight: 500; }
  .footer-brand .fb-tag { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-top: 4px; }
  .footer-social { display: flex; gap: 10px; }
  .footer-social a {
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--hairline-2); color: var(--ink-dim);
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s var(--ease);
  }
  .footer-social a:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
  .footer-social svg { width: 17px; height: 17px; }
  .footer-legal { display: flex; gap: 20px; align-items: flex-start; padding-top: 34px; border-top: 1px solid var(--hairline); }
  .footer-legal .marks { display: flex; gap: 14px; flex-shrink: 0; color: var(--ink-faint); }
  .footer-legal .marks svg { width: 30px; height: 30px; }
  .footer-legal p { font-size: 12.5px; line-height: 1.7; color: var(--ink-faint); max-width: 72ch; }
  .footer-legal strong { color: var(--ink-dim); }

  /* ---------- mobile bar ---------- */
  .mobile-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 85;
    display: none;
    grid-template-columns: 1fr 1fr 1.35fr; gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(5, 13, 24, 0.92);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--hairline);
    transform: translateY(110%);
    transition: transform 0.35s var(--ease);
  }
  .mobile-bar.show { transform: none; }
  .mobile-bar a {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 48px; border-radius: 12px;
    font-size: 14px; font-weight: 700; text-decoration: none;
  }
  .mobile-bar a svg { width: 16px; height: 16px; }
  .mb-ghost { border: 1px solid var(--hairline-2); color: var(--ink); }
  .mb-gold { background: var(--gold); color: #14100a; }
  @media (max-width: 900px) { .mobile-bar { display: grid; } }
/* ============ FOOTER LINKS ============ */
.footer-links {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  padding: 22px 0; margin-bottom: 8px;
  border-top: 1px solid var(--hairline);
}
.footer-links a {
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--ink-faint); transition: color 0.15s ease;
}
.footer-links a:hover { color: var(--gold-bright); }

/* ============ URGENCY BAND ============ */
.urgency {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  border: 1px solid rgba(201, 162, 75, 0.5);
  background: rgba(201, 162, 75, 0.07);
  border-radius: 16px; padding: 22px 26px;
  margin: 0 0 40px;
}
.urgency svg { width: 26px; height: 26px; color: var(--gold); flex-shrink: 0; }
.urgency p { font-size: 15px; line-height: 1.55; color: var(--ink-dim); margin: 0; flex: 1; min-width: 240px; }
.urgency p strong { color: var(--ink); }
.cream-band .urgency { background: rgba(201, 162, 75, 0.1); }
.cream-band .urgency p { color: var(--cream-dim); }
.cream-band .urgency p strong { color: var(--cream-ink); }

/* ============ QUIZ / VERDICT ============ */
.quiz-q { margin-bottom: 26px; }
.quiz-q .q-label { display: block; font-size: 15px; font-weight: 600; color: var(--cream-ink); margin-bottom: 12px; }
.quiz-q .q-label .q-num { color: #a07f2f; font-family: var(--serif); margin-right: 8px; }

.verdict-card {
  border-radius: 14px; padding: 22px 24px; margin-bottom: 14px;
  border: 1.5px solid rgba(13, 24, 38, 0.12);
}
.verdict-card.v-likely { border-color: #2e7a39; background: rgba(46, 122, 57, 0.06); }
.verdict-card.v-maybe { border-color: var(--gold); background: rgba(201, 162, 75, 0.08); }
.verdict-card.v-unlikely { border-color: rgba(13, 24, 38, 0.2); background: rgba(13, 24, 38, 0.03); }
.verdict-card h4 { font-family: var(--sans); font-size: 15.5px; font-weight: 700; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--cream-ink); }
.verdict-card .v-badge { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.v-likely .v-badge { background: #2e7a39; color: #fff; }
.v-maybe .v-badge { background: var(--gold); color: #14100a; }
.v-unlikely .v-badge { background: rgba(13, 24, 38, 0.5); color: #fff; }
.verdict-card p { font-size: 14px; color: var(--cream-dim); line-height: 1.6; margin: 0; }

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

.calc-card {
  background: #fff; border-radius: 22px; padding: 40px;
  box-shadow: 0 30px 80px -18px rgba(13, 24, 38, 0.22), 0 8px 24px rgba(13, 24, 38, 0.07);
}
@media (max-width: 600px) { .calc-card { padding: 28px 22px; } }

.calc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(13, 24, 38, 0.08); font-size: 14.5px; }
.calc-row .cr-name { color: var(--cream-dim); }
.calc-row .cr-val { font-weight: 700; color: var(--cream-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-row.total { border-bottom: none; border-top: 2px solid var(--cream-ink); margin-top: 6px; padding-top: 16px; }
.calc-row.total .cr-name { color: var(--cream-ink); font-weight: 700; font-size: 15.5px; }
.calc-row.total .cr-val { font-family: var(--serif); font-size: 26px; color: #a07f2f; }
.calc-note { margin-top: 18px; font-size: 12.5px; color: var(--cream-dim); line-height: 1.6; }

.range-field { margin-bottom: 24px; }
.range-field .rf-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.range-field label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream-dim); }
.range-field output { font-size: 16px; font-weight: 700; color: var(--cream-ink); font-variant-numeric: tabular-nums; }
.range-field input[type=range] { width: 100%; accent-color: #a07f2f; }

.tax-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
@media (max-width: 560px) { .tax-compare { grid-template-columns: 1fr; } }
.tax-box { border-radius: 14px; padding: 22px; text-align: center; }
.tax-box.seller { background: rgba(13, 24, 38, 0.04); border: 1px solid rgba(13, 24, 38, 0.12); }
.tax-box.buyer { background: rgba(201, 162, 75, 0.09); border: 1.5px solid var(--gold); }
.tax-box .tb-label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-dim); }
.tax-box .tb-num { font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 520; color: var(--cream-ink); font-variant-numeric: tabular-nums; margin-top: 8px; }
.tax-box.buyer .tb-num { color: #a07f2f; }
.tax-box .tb-sub { font-size: 12px; color: var(--cream-dim); margin-top: 6px; }

/* ============ ZONE PICKER (flood) ============ */
.zone-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0; }
.zone-result { border: 1px solid var(--hairline-2); border-radius: 18px; padding: 34px; margin-top: 10px; }
.zone-result h3 { font-size: 24px; margin-bottom: 10px; }
.zone-result h3 em { font-family: var(--accent); font-style: italic; font-weight: 500; letter-spacing: -0.01em; color: var(--gold); }
.zone-result .zr-premium { font-family: var(--serif); font-size: clamp(1.9rem, 4vw, 2.8rem); color: var(--gold); font-variant-numeric: tabular-nums; margin: 14px 0 4px; }
.zone-result .zr-sub { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.zone-result ul { margin: 20px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.zone-result li { display: flex; gap: 12px; font-size: 14.5px; color: var(--ink-dim); line-height: 1.6; }
.zone-result li svg { width: 17px; height: 17px; color: var(--gold); flex-shrink: 0; margin-top: 3px; }
.dark-chips .chip { border-color: var(--hairline-2); color: var(--ink); }
.dark-chips .chip:hover { border-color: var(--gold); }
.dark-chips .chip.sel { background: var(--gold); color: #14100a; border-color: var(--gold); }

/* ============ RESOURCE CARDS ============ */
.resource-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 50px; }
@media (max-width: 800px) { .resource-grid { grid-template-columns: 1fr; } }
.resource-card {
  border: 1px solid var(--hairline); border-radius: 18px; padding: 34px 32px;
  text-decoration: none; display: flex; flex-direction: column; gap: 14px;
  background: linear-gradient(180deg, rgba(244,241,233,0.02), rgba(244,241,233,0));
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
  position: relative;
}
.resource-card:hover { transform: translateY(-4px); border-color: rgba(201, 162, 75, 0.45); }
.resource-card .rc-badge {
  position: absolute; top: 22px; right: 22px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--gold); color: #14100a; padding: 5px 11px; border-radius: 999px;
}
.resource-card h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; padding-right: 70px; }
.resource-card p { font-size: 14.5px; color: var(--ink-dim); line-height: 1.6; flex: 1; }

/* ============ TOOLS STRIP (home) ============ */
.tools-strip { border-top: 1px solid var(--hairline); background: var(--bg-2); }
.tools-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; padding-top: 44px; padding-bottom: 44px; }
.tools-strip h3 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); font-weight: 480; }
.tools-strip h3 em { font-family: var(--accent); font-style: italic; font-weight: 500; letter-spacing: -0.01em; color: var(--gold); }
.tools-strip p { font-size: 14px; color: var(--ink-faint); margin-top: 6px; }

/* ============ DPA CALLOUT (buy page) ============ */
.dpa-callout {
  display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
  border: 1.5px solid var(--gold); border-radius: 20px; padding: 36px 42px;
  background: radial-gradient(500px circle at 10% 0%, rgba(201,162,75,0.1), transparent 60%);
}
@media (max-width: 700px) { .dpa-callout { padding: 28px 24px; } }
.dpa-callout h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 480; max-width: 26ch; }
.dpa-callout h3 em { font-family: var(--accent); font-style: italic; font-weight: 500; letter-spacing: -0.01em; color: var(--gold); }
.dpa-callout p { font-size: 14px; color: var(--ink-dim); margin-top: 8px; max-width: 48ch; }

/* mobile: never let a long button label force overflow */
@media (max-width: 600px) {
  .btn { white-space: normal; text-align: center; justify-content: center; }
}

/* ============ COMPACT PAGE HERO (tool pages: form above the fold) ============ */
.page-hero.compact { min-height: auto; padding: 128px 0 44px; }
.page-hero.compact h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
@media (max-width: 700px) { .page-hero.compact { padding: 112px 0 36px; } }

/* ============ STICKY EXPLAINER COLUMN + FORM-FIRST MOBILE ============ */
@media (min-width: 901px) {
  /* sticky the SHORTER column so it rides along while the taller one scrolls */
  .calc-grid > div:first-child { position: sticky; top: 104px; }
  .val-grid > .val-side { position: sticky; top: 104px; }
}
@media (max-width: 900px) {
  .calc-grid > .calc-card { order: -1; }
}

/* ============ LINKS PAGE ============ */
.links-page { max-width: 460px; margin: 0 auto; padding: 116px 24px 60px; display: flex; flex-direction: column; gap: 26px; }
.links-identity { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.links-identity .badge { width: 118px; height: 118px; border-radius: 50%; padding: 4px; background: var(--bg-2); position: relative; }
.links-identity .badge::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(201, 162, 75, 0.4); }
.links-identity .badge img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); }
.links-identity h1 { font-size: 27px; font-weight: 500; }
.links-identity .li-cred { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.links-identity .li-tag { font-size: 14px; color: var(--ink-dim); max-width: 30ch; }
.link-btns { display: flex; flex-direction: column; gap: 11px; }
.link-btn {
  display: flex; align-items: center; gap: 13px;
  padding: 17px 20px; border-radius: 15px;
  font-size: 15.5px; font-weight: 600; text-decoration: none;
  transition: transform 0.16s var(--ease), border-color 0.16s ease, filter 0.16s ease;
  position: relative;
}
.link-btn:hover { transform: translateY(-2px); }
.link-btn:active { transform: scale(0.98); }
.link-btn svg.ic { width: 19px; height: 19px; flex-shrink: 0; }
.link-btn .lb-label { flex: 1; }
.link-btn .lb-sub { display: block; font-size: 12px; font-weight: 500; opacity: 0.7; margin-top: 1px; }
.link-btn svg.chev { width: 15px; height: 15px; opacity: 0.5; flex-shrink: 0; }
.link-btn.lb-gold { background: var(--gold); color: #14100a; box-shadow: 0 4px 22px rgba(201, 162, 75, 0.3); }
.link-btn.lb-gold:hover { filter: brightness(1.06); }
.link-btn.lb-dark { background: var(--bg-2); color: var(--ink); border: 1px solid var(--hairline-2); }
.link-btn.lb-dark:hover { border-color: var(--gold); }
.link-btn .lb-urgent {
  position: absolute; top: -9px; right: 14px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  background: #e85a3d; color: #fff; padding: 4px 10px; border-radius: 999px;
}
.links-row { display: flex; justify-content: center; gap: 10px; }
.links-row a {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline-2); color: var(--ink-dim);
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s var(--ease);
}
.links-row a:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.links-row svg { width: 18px; height: 18px; }
.links-compliance { text-align: center; font-size: 11px; line-height: 1.65; color: var(--ink-faint); border-top: 1px solid var(--hairline); padding-top: 20px; }
.links-compliance strong { color: var(--ink-dim); }

/* ============ UTILITY DIRECTORY (moving page) ============ */
.util-group { margin-top: 46px; }
.util-group > h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.util-group > h3 svg { width: 22px; height: 22px; color: var(--gold); }
.util-rows { border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; }
.util-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 22px; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
.util-row:last-child { border-bottom: none; }
.util-row .ur-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.util-row .ur-area { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-faint); margin-top: 2px; }
.util-row a {
  font-size: 13px; font-weight: 700; color: var(--gold); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.util-row a:hover { color: var(--gold-bright); }
.util-row a svg { width: 13px; height: 13px; }

/* ============ CHECKLIST (localStorage) ============ */
.check-list { display: flex; flex-direction: column; gap: 10px; margin-top: 34px; }
.check-item {
  display: flex; align-items: flex-start; gap: 15px;
  padding: 17px 20px; border: 1px solid var(--hairline); border-radius: 14px;
  cursor: pointer; transition: border-color 0.15s ease, opacity 0.2s ease;
}
.check-item:hover { border-color: rgba(201, 162, 75, 0.4); }
.check-item .box {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; margin-top: 1px;
  border: 1.5px solid var(--hairline-2);
  display: flex; align-items: center; justify-content: center;
  color: transparent; transition: all 0.15s ease;
}
.check-item .box svg { width: 13px; height: 13px; }
.check-item.done { opacity: 0.55; }
.check-item.done .box { background: var(--gold); border-color: var(--gold); color: #14100a; }
.check-item.done .ci-title { text-decoration: line-through; }
.check-item .ci-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.check-item .ci-sub { display: block; font-size: 13px; font-weight: 400; color: var(--ink-dim); margin-top: 3px; line-height: 1.5; }
.check-item .ci-sub strong { color: var(--gold); }

/* ============ INTERACTIVE ON-PAGE CHECKLIST (tools/checklists) ============
   Namespaced ichk- to avoid colliding with .check-item above (the /moving/
   page's div+data-ck done-toggle checklist, a different component). */
.ichk-toggle-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 8px; }
.ichk-panel {
  border: 1px solid var(--hairline-2); border-radius: 20px; padding: 30px 32px;
  margin: 26px auto 0; max-width: 620px;
}
.cream-band .ichk-panel { border-color: rgba(13, 24, 38, 0.14); background: rgba(13, 24, 38, 0.02); }
@media (max-width: 600px) { .ichk-panel { padding: 24px 20px; } }

.ichk-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.ichk-progress .ichk-track { flex: 1; height: 6px; border-radius: 999px; background: var(--hairline-2); overflow: hidden; }
.cream-band .ichk-progress .ichk-track { background: rgba(13, 24, 38, 0.12); }
.ichk-progress .ichk-fill { height: 100%; width: 0; background: var(--gold); border-radius: 999px; transition: width 0.3s var(--ease); }
.ichk-progress .ichk-label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-faint); white-space: nowrap; }
.cream-band .ichk-progress .ichk-label { color: var(--cream-dim); }

.ichk-section {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold); margin: 24px 0 10px;
}
.ichk-section:first-of-type { margin-top: 0; }
.cream-band .ichk-section { color: #a07f2f; }

.ichk-item { display: flex; align-items: flex-start; gap: 13px; padding: 9px 0; cursor: pointer; }
.ichk-item input {
  width: 20px; height: 20px; margin-top: 2px; accent-color: var(--gold);
  flex-shrink: 0; cursor: pointer;
}
.ichk-item span { flex: 1; min-width: 0; font-size: 15px; line-height: 1.55; color: var(--ink-dim); transition: color 0.15s ease, opacity 0.15s ease; word-break: break-word; }
.cream-band .ichk-item span { color: var(--cream-dim); }
.ichk-item input:checked ~ span { color: var(--ink-faint); text-decoration: line-through; }
.cream-band .ichk-item input:checked ~ span { color: var(--cream-dim); }

.ichk-reset {
  display: block; margin-top: 24px; background: none; border: none; padding: 0;
  font-size: 12.5px; font-weight: 600; color: var(--ink-faint); text-decoration: underline;
  cursor: pointer; font-family: var(--sans);
}
.cream-band .ichk-reset { color: var(--cream-dim); }
.ichk-reset:hover { color: var(--gold-bright); }

/* ============ BLOG ============ */
.post-list { display: flex; flex-direction: column; margin-top: 44px; }
.post-card { display: block; text-decoration: none; padding: 34px 6px; border-bottom: 1px solid var(--hairline); transition: background 0.15s ease; }
.post-card:hover h3 { color: var(--gold-bright); }
.post-card .pc-date { font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
.post-card h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 480; letter-spacing: -0.01em; margin: 10px 0 8px; transition: color 0.15s ease; }
.post-card p { font-size: 15px; color: var(--ink-dim); line-height: 1.65; max-width: 68ch; }
.post-body { max-width: 720px; }
.post-body .post-date { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 30px; }
.post-body h2 { font-family: var(--serif); font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 500; letter-spacing: -0.01em; margin: 44px 0 16px; }
.post-body h2 em { font-family: var(--accent); font-style: italic; font-weight: 500; letter-spacing: -0.01em; color: var(--gold); }
.post-body p { font-size: 16.5px; line-height: 1.75; color: var(--ink-dim); margin-bottom: 20px; }
.post-body p strong { color: var(--ink); }
.post-body ul, .post-body ol { margin: 0 0 20px 22px; }
.post-body li { font-size: 16px; line-height: 1.7; color: var(--ink-dim); margin-bottom: 10px; }
.post-body li strong { color: var(--ink); }
.post-body a { color: var(--gold); }
.post-body a:hover { color: var(--gold-bright); }

/* links page is a self-contained bio hub, so suppress redundant chrome */
body:has(.links-page) .mobile-bar, body:has(.links-page) .site-footer { display: none; }

/* consent checkbox row on lead forms */
.consent-row {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.5; color: var(--cream-dim);
  margin: 2px 0 20px; cursor: pointer;
}
.consent-row input { accent-color: #a07f2f; margin-top: 2px; flex-shrink: 0; }
.contact-form-card .consent-row { color: var(--ink-faint); }
.contact-form-card .consent-row input { accent-color: var(--gold); }

/* ============ PROGRAMS LEDGER ============ */
.prog-row { display: grid; grid-template-columns: 128px 1fr 1.35fr; gap: 26px; padding: 30px 0; border-bottom: 1px solid var(--hairline); align-items: baseline; }
@media (max-width: 700px) { .prog-row { grid-template-columns: 1fr; gap: 8px; } }
.prog-amt { font-family: var(--serif); font-weight: 520; font-size: clamp(1.5rem, 2.6vw, 1.9rem); color: var(--gold); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.prog-amt small { display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 5px; }
.prog-row h4 { font-family: var(--serif); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prog-row .prog-sub { font-size: 13px; color: var(--ink-faint); margin-top: 6px; line-height: 1.55; }
.prog-row p { font-size: 14.5px; color: var(--ink-dim); line-height: 1.65; }
.prog-row p a { color: var(--gold); text-decoration: none; }
.prog-row p a:hover { color: var(--gold-bright); }

.pill { font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pill-live { background: rgba(46, 122, 57, 0.18); color: #7fc48a; border: 1px solid rgba(46,122,57,0.45); }
.pill-window { background: rgba(201, 162, 75, 0.14); color: var(--gold-bright); border: 1px solid rgba(201,162,75,0.5); }
.pill-verify { background: rgba(201, 125, 42, 0.12); color: #d9a15e; border: 1px solid rgba(201,125,42,0.45); }
.pill-limited { background: rgba(244,241,233,0.06); color: var(--ink-faint); border: 1px solid var(--hairline-2); }

.mythbust {
  border: 1px solid rgba(232, 90, 61, 0.4); border-radius: 18px;
  padding: 34px 36px; margin-top: 20px;
  background: radial-gradient(500px circle at 8% 0%, rgba(232,90,61,0.07), transparent 60%);
}
@media (max-width: 700px) { .mythbust { padding: 26px 22px; } }
.mythbust h3 { font-size: 22px; font-weight: 500; margin-bottom: 16px; }
.mythbust h3 em { font-family: var(--accent); font-style: italic; font-weight: 500; letter-spacing: -0.01em; color: #e88a70; }
.mythbust ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mythbust li { display: flex; gap: 12px; font-size: 14.5px; color: var(--ink-dim); line-height: 1.6; }
.mythbust li svg { width: 17px; height: 17px; color: #e88a70; flex-shrink: 0; margin-top: 3px; }
.mythbust li strong { color: var(--ink); }

/* ============ FAQ (rendered FROM the FAQPage schema, never hand-written) ============
   Google's structured data policy: "Don't mark up content that is not visible to readers
   of the page", and violating it can "possibly cause it to be marked as spam". The FAQ
   schema on this site declared Q&A that appeared nowhere on the page. build.py now renders
   the schema object itself, so the markup and the copy cannot drift apart.
   (FAQ *rich results* were retired by Google in May 2026, so this is for compliance and
   machine-readability, not for a rich snippet. The visible Q&A is worth having regardless.)
   Both band palettes defined up front, on purpose - see the .process-row p / .fs-label
   incidents where a component only had colors for one band and vanished in the other. */
.faq-list { margin-top: 34px; border-top: 1px solid var(--hairline); }
.faq-item { padding: 26px 0; border-bottom: 1px solid var(--hairline); }
.faq-item h3 { font-family: var(--serif); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 9px; }
.faq-item p { font-size: 15px; color: var(--ink-dim); line-height: 1.65; max-width: 78ch; }
.cream-band .faq-list { border-top-color: rgba(13, 24, 38, 0.14); }
.cream-band .faq-item { border-bottom-color: rgba(13, 24, 38, 0.1); }
.cream-band .faq-item h3 { color: var(--cream-ink); }
.cream-band .faq-item p { color: var(--cream-dim); }

/* ============ FACT STACK (balances text columns beside tall form cards) ============ */
.fact-stack { margin-top: 38px; border-top: 1px solid rgba(13, 24, 38, 0.14); }
.fact-stack .fs-row { display: flex; align-items: baseline; gap: 22px; padding: 20px 0; border-bottom: 1px solid rgba(13, 24, 38, 0.1); }
/* flex-shrink:0 is load-bearing: min-width alone does NOT stop a flex item shrinking
   below its content, so a long value ("~$4,300", box 118px vs text 142px) overflowed its
   box and clipped into .fs-label at every width from 1600 down. The narrow-viewport stack
   below 520px treats the same cause; this treats it everywhere else. */
.fact-stack .fs-amt { font-family: var(--serif); font-weight: 520; font-size: clamp(1.7rem, 3vw, 2.3rem); color: #a07f2f; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; min-width: 118px; flex-shrink: 0; line-height: 1; }
.fact-stack .fs-label { font-size: 13.5px; color: var(--cream-dim); line-height: 1.5; }
.fact-stack .fs-label strong { display: block; color: var(--cream-ink); font-weight: 700; font-size: 14.5px; margin-bottom: 2px; }
.fact-stack .fs-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13.5px; font-weight: 700; color: #a07f2f; text-decoration: none; }
.fact-stack .fs-more:hover { color: var(--gold-bright); }
.fact-stack .fs-more svg { width: 15px; height: 15px; }
/* dark-band variant.
   .fact-stack and .calc-note default to the CREAM palette (--cream-dim / --cream-ink),
   because they were built for cream bands. On a dark band that put the label text at
   rgba(13,24,38,.62) over rgb(5,13,24) = a measured 1.09:1 contrast ratio, i.e. invisible.
   Only the border was being corrected here; the text never was, so every fact-stack label
   on all 8 area guides was unreadable while the gold number above it (5.17:1) looked fine.
   Measured with getComputedStyle + WCAG relative luminance, not eyeballed. */
.drone-band .fact-stack, .band:not(.cream-band) .fact-stack { border-top-color: var(--hairline); }
.drone-band .fact-stack .fs-row,
.band:not(.cream-band) .fact-stack .fs-row { border-bottom-color: var(--hairline); }
/* .fs-amt sets min-width:118px but never flex-shrink:0, so on a narrow viewport the flex
   row squeezes the box below its text and the number renders straight over .fs-label
   ("~$4,300/yrTypical insurance"). Measured: text starts spilling its box at 480px and
   actually collides with the label at 440px and below. Josh's S24 Ultra runs a 384px CSS
   viewport (1440 physical at density override 600), so it is squarely in the broken range,
   while a 457px Fold 7 sits just above it - which is why desktop and Fold testing both
   missed this and only the real phone showed it. Stack the row instead of shrinking it. */
@media (max-width: 520px) {
  .fact-stack .fs-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .fact-stack .fs-amt { min-width: 0; }
}
.drone-band .fact-stack .fs-label,
.band:not(.cream-band) .fact-stack .fs-label { color: var(--ink-dim); }        /* 1.09 -> 12.4 */
.drone-band .fact-stack .fs-label strong,
.band:not(.cream-band) .fact-stack .fs-label strong { color: var(--ink); }      /* 1.09 -> 17.9 */
.drone-band .calc-note,
.band:not(.cream-band) .calc-note { color: var(--ink-dim); }                    /* 1.09 -> 12.4 */

/* ============ ADMIN COCKPIT ============ */
.adm-card { border: 1px solid var(--hairline); border-radius: 16px; padding: 22px 24px; margin-bottom: 12px; background: linear-gradient(180deg, rgba(244,241,233,0.02), rgba(244,241,233,0)); }
.adm-card.adm-hot { border-color: rgba(232, 90, 61, 0.45); }
.adm-card-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.adm-card-head strong { font-size: 16.5px; }
.adm-src { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid rgba(201,162,75,0.5); color: var(--gold); padding: 3px 9px; border-radius: 999px; margin-left: 8px; vertical-align: 2px; }
.adm-meta { font-size: 12.5px; color: var(--ink-faint); margin-top: 4px; }
.adm-msg { font-size: 14.5px; color: var(--ink-dim); margin-top: 12px; line-height: 1.6; }
.adm-actions { display: flex; gap: 8px; }
.adm-actions a { font-size: 12.5px; font-weight: 700; text-decoration: none; color: #14100a; background: var(--gold); padding: 8px 16px; border-radius: 999px; }
.adm-actions a:hover { background: var(--gold-bright); }
.adm-timeline { margin-top: 14px; border-left: 2px solid rgba(201, 162, 75, 0.35); padding-left: 14px; display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--ink-dim); }
.adm-statusrow { display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.adm-st { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--hairline-2); background: transparent; color: var(--ink-faint); cursor: pointer; }
.adm-st:hover { border-color: var(--gold); color: var(--gold-bright); }
.adm-st.on { background: var(--gold); border-color: var(--gold); color: #14100a; }
body:has(#adm-app) .mobile-bar, body:has(#adm-app) .site-footer .footer-links { display: none; }

/* ---------- branded scrollbar ---------- */
html { scrollbar-color: var(--gold) #0a1626; scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #0a1626; }
::-webkit-scrollbar-thumb { background: var(--gold); background-image: linear-gradient(180deg, var(--gold-bright), #a07f2f); border-radius: 999px; border: 3px solid #0a1626; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-bright); }
::-webkit-scrollbar-corner { background: #0a1626; }
/* keep the light cream cards readable if they ever scroll internally */
.calc-card, .val-form-card { scrollbar-color: #a07f2f rgba(13,24,38,0.08); }

/* ---------- branded call/text toast (desktop, replaces the OS app-picker) ---------- */
.jd-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  background: #0a1626; color: var(--ink); border: 1px solid var(--gold);
  padding: 14px 22px; border-radius: 12px; font-family: var(--sans); font-size: 15px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45); z-index: 9999;
  opacity: 0; pointer-events: none; text-align: center; max-width: calc(100vw - 40px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.jd-toast strong { color: var(--gold-bright); font-weight: 700; }
.jd-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- home hero motion background (smooth GPU pan/zoom on the still) ---------- */
.hero-media { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: #050d18; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); animation: heroPan 34s ease-in-out infinite alternate; will-change: transform; }
@keyframes heroPan { from { transform: scale(1.05); } to { transform: scale(1.15); } }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(5, 13, 24, 0.94) 0%, rgba(5, 13, 24, 0.82) 46%, rgba(5, 13, 24, 0.6) 100%); }
.hero::before { z-index: 2; }
.hero > .hero-grid { position: relative; z-index: 3; }
@media (prefers-reduced-motion: reduce) { .hero-img { animation: none; transform: scale(1.05); } }

/* ---------- process journey (visual flow diagrams) ---------- */
.jump-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.jump-nav a { font-family: var(--sans); font-size: 13.5px; font-weight: 600; padding: 9px 17px; border-radius: 999px; border: 1px solid rgba(13,24,38,0.18); color: var(--cream-dim); text-decoration: none; transition: all 0.15s ease; }
.jump-nav a:hover { border-color: var(--gold); color: #a07f2f; }
.band:not(.cream-band) .jump-nav a { border-color: var(--hairline-2); color: var(--ink-dim); }
.band:not(.cream-band) .jump-nav a:hover { border-color: var(--gold); color: var(--gold-bright); }

.journey { margin-top: 44px; max-width: 720px; }
.journey-step { display: grid; grid-template-columns: 58px 1fr; gap: 22px; padding-bottom: 34px; position: relative; }
.journey-step:last-child { padding-bottom: 0; }
.journey-step::before { content: ''; position: absolute; left: 28px; top: 62px; bottom: -2px; width: 2px; background: linear-gradient(var(--gold), rgba(201, 162, 75, 0.22)); }
.journey-step:last-child::before { display: none; }
.js-node { width: 58px; height: 58px; border-radius: 50%; border: 1.5px solid var(--gold); background: rgba(201, 162, 75, 0.09); color: var(--gold); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.js-node svg { width: 26px; height: 26px; }
.js-body { padding-top: 5px; min-width: 0; }
.js-kicker { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.band:not(.cream-band) .js-kicker { color: var(--gold-bright); }
.js-tag { font-weight: 600; letter-spacing: 0.03em; text-transform: none; color: var(--cream-dim); background: rgba(13, 24, 38, 0.06); padding: 3px 10px; border-radius: 999px; }
.band:not(.cream-band) .js-tag { color: var(--ink-faint); background: rgba(255, 255, 255, 0.06); }
.js-body h4 { font-family: var(--serif); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; margin: 7px 0 6px; color: var(--cream-ink); }
.band:not(.cream-band) .js-body h4 { color: var(--ink); }
.js-body p { font-size: 14.5px; color: var(--cream-dim); line-height: 1.62; margin: 0; }
.band:not(.cream-band) .js-body p { color: var(--ink-dim); }
.js-body a { color: #a07f2f; text-decoration: none; font-weight: 600; }
.band:not(.cream-band) .js-body a { color: var(--gold); }
.js-body a:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .journey-step { grid-template-columns: 48px 1fr; gap: 16px; }
  .js-node { width: 48px; height: 48px; }
  .js-node svg { width: 22px; height: 22px; }
  .journey-step::before { left: 23px; top: 52px; }
}