/* Shared design system + homepage styles — extracted from index.html (Commit A). Single cached stylesheet linked by every page. */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* Legacy navy/gold tokens remapped onto the ink/paper/green/gray set (Commit 10 gold purge).
         SPA city/calc/legal templates reference these vars; remapping here purges them everywhere. */
      --navy-900: #0A0A0B;
      --navy-850: #151516;
      --navy-800: #151516;
      --navy-700: #151516;
      --navy-600: #151516;
      --navy-line: rgba(150, 147, 140, 0.15);
      --navy-line-strong: rgba(150, 147, 140, 0.28);

      --gold-500: #96938C;
      --gold-400: #96938C;
      --gold-300: #F4F1EA;
      --gold-200: #F4F1EA;
      --gold-glow: rgba(0, 0, 0, 0);

      --ink-100: #F4F1EA;
      --ink-200: #E9E4D9;
      --ink-300: #96938C;
      --ink-400: #96938C;
      --ink-500: rgba(150, 147, 140, 0.55);

      --success: #00D26A;
      --warn: #96938C;
      --danger: #96938C;
      --info: #96938C;

      --serif: Georgia, "Times New Roman", "Iowan Old Style", Palatino, serif;
      --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

      /* ── Rebuild design tokens (2026-07). Old navy/gold vars remain until sections are ported; removed in cleanup. ── */
      --ink: #0A0A0B;
      --paper: #F4F1EA;
      --green: #00D26A;
      --gray: #96938C;
      --ink-raised: #151516;
      --paper-dim: #E9E4D9;
    }

    html { scroll-behavior: smooth; }
    body {
      font-family: var(--sans);
      background: var(--navy-900);
      color: var(--ink-200);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      font-size: 15px;
      line-height: 1.6;
      background-image:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(150, 147, 140, 0.06), transparent 60%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(28, 46, 87, 0.3), transparent 70%);
    }

    /* ── Inline SVG icon system (replaces Font Awesome) ── */
    .icon {
      width: 1em; height: 1em;
      display: inline-block;
      vertical-align: -0.125em;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
    }
    .icon-solid { fill: currentColor; stroke: none; }

    /* ─────────── NAV ─────────── */
    nav.site-nav {
      position: fixed; top: 0; width: 100%; z-index: 1000;
      padding: 14px 5%;
      display: flex; justify-content: space-between; align-items: center;
      background: rgba(10, 10, 11, 0.92);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(244, 241, 234, 0.08);
      transition: box-shadow 0.3s, padding 0.3s;
    }
    nav.site-nav.scrolled { padding: 10px 5%; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); }
    .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
    .brand-lockup { height: 30px; width: auto; display: block; }

    .nav-links { display: flex; gap: 1.8rem; list-style: none; align-items: center; }
    .nav-links a {
      color: var(--gray); text-decoration: none;
      font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
      text-transform: uppercase; transition: color 0.2s;
      font-family: var(--sans);
    }
    .nav-links a:hover { color: var(--paper); }
    .nav-cta {
      background: var(--green) !important;
      color: var(--ink) !important;
      padding: 10px 18px !important;
      font-weight: 700 !important;
      border-radius: 8px;
    }
    .nav-cta:hover { filter: brightness(1.08); }
    .nav-login {
      border: 1px solid rgba(244, 241, 234, 0.25) !important;
      color: var(--paper) !important;
      padding: 9px 18px !important;
      border-radius: 8px;
      font-weight: 600 !important;
    }
    .nav-login:hover { border-color: var(--paper) !important; }

    /* ─────────── HAMBURGER + MOBILE NAV PANEL ─────────── */
    .nav-hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      flex-shrink: 0;
    }
    .nav-hamburger span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--paper);
      border-radius: 1px;
      transition: transform 0.22s ease, opacity 0.22s ease;
    }
    .nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .nav-mobile-panel {
      position: fixed;
      top: 65px;
      left: 0;
      width: 100%;
      background: var(--ink);
      border-bottom: 1px solid rgba(244, 241, 234, 0.12);
      z-index: 999;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.28s ease;
    }
    nav.site-nav.scrolled ~ .nav-mobile-panel { top: 58px; }
    .nav-mobile-panel.open { max-height: 460px; }
    .nav-mobile-panel ul { list-style: none; padding: 0; margin: 0; }
    .nav-mobile-panel ul li a {
      display: block;
      padding: 16px 5%;
      color: var(--gray);
      text-decoration: none;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-family: var(--sans);
      border-bottom: 1px solid rgba(244, 241, 234, 0.08);
      transition: color 0.2s, background 0.2s;
    }
    .nav-mobile-panel ul li:last-child a { border-bottom: none; }
    .nav-mobile-panel ul li a:hover { color: var(--paper); background: rgba(244, 241, 234, 0.04); }
    .nav-mobile-panel .nav-cta {
      padding: 16px 5% !important;
      border-radius: 0;
    }
    .nav-mobile-panel .nav-login {
      padding: 16px 5% !important;
      border: none !important;
      border-bottom: 1px solid rgba(244, 241, 234, 0.08) !important;
      border-radius: 0;
    }
    .nav-mobile-panel li:last-child .nav-login { border-bottom: none !important; }

    /* ─────────── REBUILD HERO + ESTIMATOR (2026-07) ─────────── */
    .v-hero { position: relative; background: var(--ink); color: var(--paper); overflow: hidden; padding: clamp(96px,14vh,150px) 5% clamp(56px,9vh,96px); }
    .v-hero::before { content:""; position:absolute; inset:0; z-index:0; background-image: linear-gradient(rgba(244,241,234,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(244,241,234,.05) 1px,transparent 1px); background-size:54px 54px; mask-image: radial-gradient(ellipse at 70% 30%,#000,transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 70% 30%,#000,transparent 75%); pointer-events:none; }
    .v-hero__inner { position:relative; z-index:1; max-width:1100px; margin:0 auto; }
    .v-hero__copy { max-width:780px; }
    .v-hero__h1 { font-family: var(--sans); font-size:clamp(34px,5vw,60px); line-height:1.04; font-weight:800; letter-spacing:-.02em; color:var(--paper); margin-bottom:18px; }
    .v-hero__sub { font-size:clamp(15px,1.4vw,19px); line-height:1.55; color:var(--gray); max-width:52ch; margin-bottom:26px; }
    .v-hero__cta { display:flex; flex-wrap:wrap; gap:12px; }
    .btn-green { background:var(--green); color:var(--ink); font-weight:700; font-size:15px; padding:14px 24px; border-radius:10px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:filter .12s, transform .12s; border:none; cursor:pointer; font-family:var(--sans); }
    .btn-green:hover { filter:brightness(1.08); transform:translateY(-1px); }
    .btn-green .icon { width:18px; height:18px; }
    .btn-phone { background:var(--ink-raised); color:var(--paper); border:1px solid rgba(244,241,234,.28); font-weight:700; font-size:15px; padding:13px 22px; border-radius:10px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:border-color .12s, transform .12s; }
    .btn-phone:hover { border-color:var(--paper); transform:translateY(-1px); }
    .btn-phone .icon { width:18px; height:18px; }
    .v-hero__reassure { margin-top:16px; font-size:14px; color:var(--gray); letter-spacing:.01em; }
    .v-hero__inner--split { display:grid; grid-template-columns:1fr; gap:clamp(36px,5vw,56px); align-items:center; }
    @media (min-width:920px){ .v-hero__inner--split { grid-template-columns:55% 45%; } .v-hero__copy { max-width:none; } }
    .v-hero__doc { display:flex; justify-content:center; }
    .v-hero__doc .v-stmt { transform:rotate(-2.2deg); width:100%; max-width:400px; box-shadow:0 44px 90px rgba(0,0,0,.6); }

    /* ─────────── SHARED STATEMENT COMPONENT (documents, not cards) ─────────── */
    .v-stmt { background:var(--paper); color:var(--ink); border:1px solid rgba(10,10,11,.14); border-radius:10px; box-shadow:0 16px 40px rgba(10,10,11,.10); font-family:var(--mono); overflow:hidden; }
    .v-stmt__head { display:flex; justify-content:space-between; align-items:baseline; padding:16px 20px 12px; border-bottom:1px solid rgba(10,10,11,.14); }
    .v-stmt__title { font-family:var(--sans); font-weight:800; font-size:15px; letter-spacing:-.01em; }
    .v-stmt__meta { font-size:10px; letter-spacing:.14em; color:rgba(10,10,11,.5); }
    .v-stmt__cols { display:flex; justify-content:space-between; padding:9px 20px; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(10,10,11,.45); border-bottom:1px solid rgba(10,10,11,.10); }
    .v-stmt__row { display:flex; justify-content:space-between; align-items:baseline; padding:9px 20px; font-size:13px; color:rgba(10,10,11,.72); border-bottom:1px dashed rgba(10,10,11,.12); }
    .v-stmt__row b { font-variant-numeric:tabular-nums; color:var(--ink); font-size:13.5px; font-weight:700; }
    .v-stmt__row--zero b { color:var(--green); }
    .v-stmt__total { display:flex; justify-content:space-between; align-items:baseline; padding:13px 20px; border-top:2px solid rgba(10,10,11,.28); }
    .v-stmt__total span { font-family:var(--sans); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); }
    .v-stmt__total b { font-variant-numeric:tabular-nums; font-size:22px; color:var(--ink); }
    .v-stmt__total--green b { color:var(--green); }
    .v-stmt__note { padding:11px 20px 14px; font-family:var(--sans); font-size:10.5px; color:rgba(10,10,11,.5); line-height:1.45; }

    /* ─────────── TRUST STRIP (2026-07) ─────────── */
    .v-trust { background:var(--ink); color:var(--paper); padding:clamp(48px,8vh,88px) 5%; border-top:1px solid rgba(244,241,234,.08); }
    .v-trust__inner { max-width:900px; margin:0 auto; text-align:center; }
    .v-trust__lead { font-size:clamp(20px,2.4vw,30px); font-weight:600; line-height:1.35; color:var(--gray); letter-spacing:-.01em; margin:0; }
    .v-trust__lead b { color:var(--paper); font-weight:800; }
    .v-trust__lineup { margin:clamp(18px,2.4vh,26px) 0 0; }
    .v-trust__lineup a { display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:clamp(14px,1.5vw,16px); font-weight:600; color:var(--paper); text-decoration:none; border-bottom:1px solid rgba(244,241,234,.28); padding-bottom:3px; transition:border-color .15s,color .15s; }
    .v-trust__lineup a:hover { color:var(--green); border-color:var(--green); }
    .v-trust__lineup .icon { width:16px; height:16px; }

    /* ─────────── PARTNER STRIP (BPS lead + 10 real logos, Commit 14) ─────────── */
    .v-partners { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(24px,3.2vw,44px); margin-top:clamp(30px,4vh,44px); }
    .v-partners__item { display:flex; flex-direction:column; align-items:center; gap:8px; }
    .v-partners__item--lead { padding-right:clamp(6px,2vw,24px); border-right:1px solid rgba(244,241,234,.14); }
    /* two balanced rows of five on desktop (10 logos don't fit one row at a legible size) */
    .v-partners__strip { display:grid; grid-template-columns:repeat(5,auto); align-items:center; justify-items:center; gap:22px clamp(18px,2.4vw,40px); max-width:900px; }
    .v-plogo { width:auto; object-fit:contain; filter:brightness(0) invert(1); opacity:.6; transition:opacity .16s ease; }
    .v-partners__item:hover .v-plogo { opacity:1; }
    /* normalized by optical weight, not fixed height */
    .v-plogo--bps { height:40px; }
    .v-plogo--clover { height:23px; }
    .v-plogo--square { height:22px; }
    .v-plogo--authnet { height:16px; }
    .v-plogo--valor { height:26px; }
    .v-plogo--dejavoo { height:22px; }
    .v-plogo--acceptblue { height:20px; }
    .v-plogo--cardpointe { height:18px; }
    .v-plogo--verifone { height:18px; }
    .v-plogo--firstdata { height:17px; }
    .v-plogo--pax { height:28px; }
    .v-partners__iso { font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--gray); opacity:.85; }
    @media (max-width:820px){ .v-partners__strip { grid-template-columns:repeat(4,auto); } }
    @media (max-width:640px){
      .v-partners { flex-direction:column; gap:22px; }
      .v-partners__item--lead { border-right:none; border-bottom:1px solid rgba(244,241,234,.14); padding:0 0 20px; }
      .v-partners__strip { grid-template-columns:repeat(3,auto); gap:22px 26px; }
      .v-plogo--bps{height:34px;}
    }

    /* ─────────── WHAT YOU GET (2026-07) ─────────── */
    .v-wyg { background:var(--ink); color:var(--paper); padding:clamp(56px,9vh,100px) 5%; border-top:1px solid rgba(244,241,234,.08); }
    .v-wyg__inner { max-width:1100px; margin:0 auto; }
    .v-wyg__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(244,241,234,.12); border:1px solid rgba(244,241,234,.12); border-radius:14px; overflow:hidden; }
    .v-wyg__cell { background:var(--ink); padding:clamp(28px,3vw,40px); }
    .v-wyg__ic { display:block; width:30px; height:30px; color:var(--paper); margin-bottom:16px; }
    .v-wyg__h { font-family:var(--sans); font-size:clamp(20px,2vw,24px); font-weight:800; letter-spacing:-.01em; color:var(--paper); margin:0 0 10px; }
    .v-wyg__p { font-size:15px; line-height:1.55; color:var(--gray); margin:0; }
    @media (max-width:760px){ .v-wyg__grid { grid-template-columns:1fr; } }

    /* ─────────── PILLARS (shared) + PAYMENTS (2026-07) ─────────── */
    .v-pillar { padding: clamp(56px,9vh,110px) 5%; }
    .v-pillar--paper { background:var(--paper); color:var(--ink); }
    .v-pillar--paper-dim { background:var(--paper-dim); color:var(--ink); }
    .v-pillar--ink { background:var(--ink); color:var(--paper); }
    .v-pillar__inner { max-width:1100px; margin:0 auto; }
    .v-eyebrow { font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:rgba(10,10,11,.45); margin-bottom:14px; }
    .v-pillar--ink .v-eyebrow { color:var(--gray); }
    .v-h2 { font-family:var(--sans); font-size:clamp(28px,3.6vw,44px); font-weight:800; letter-spacing:-.02em; line-height:1.08; margin-bottom:16px; color:inherit; }
    .v-lead { font-size:clamp(15px,1.4vw,18px); line-height:1.6; color:rgba(10,10,11,.7); max-width:62ch; margin-bottom:34px; }
    .v-lead b { color:var(--ink); font-weight:700; }
    .v-pillar--ink .v-lead { color:var(--gray); } .v-pillar--ink .v-lead b { color:var(--paper); }
    /* ─────────── PAYMENTS DECISION MODULE (Commit 12) ─────────── */
    .v-decide { max-width:600px; margin:0 auto 34px; }
    .v-decide__radio { position:absolute; width:1px; height:1px; opacity:0; }
    .v-decide__q { font-family:var(--sans); font-size:clamp(18px,2vw,22px); font-weight:800; letter-spacing:-.01em; color:var(--ink); padding:18px 20px 4px; }
    .v-decide__prompt { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#00A855; font-weight:700; padding:0 20px 12px; }
    .v-decide__toggle { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 20px 6px; }
    .v-decide__toggle label { display:flex; align-items:center; justify-content:center; text-align:center; min-height:48px; font-family:var(--sans); font-weight:700; font-size:14px; padding:12px; border-radius:10px; border:2px solid rgba(10,10,11,.22); background:rgba(10,10,11,.03); color:rgba(10,10,11,.62); cursor:pointer; transition:background .15s, color .15s, border-color .15s, box-shadow .15s; user-select:none; }
    .v-decide__toggle label:hover { border-color:var(--green); background:rgba(0,210,106,.10); color:var(--ink); }
    #pm-biz:checked ~ .v-decide__toggle label[for="pm-biz"],
    #pm-cust:checked ~ .v-decide__toggle label[for="pm-cust"] { background:var(--green); color:var(--ink); border-color:var(--green); box-shadow:0 6px 18px rgba(0,210,106,.30); }
    .v-decide__radio:focus-visible ~ .v-decide__toggle label[for="pm-biz"] { outline:2px solid var(--ink); outline-offset:2px; }
    #pm-cust:focus-visible ~ .v-decide__toggle label[for="pm-cust"] { outline:2px solid var(--ink); outline-offset:2px; }
    .v-decide__answers { display:grid; padding:10px 20px 6px; }
    .v-decide__out { grid-area:1 / 1; opacity:0; visibility:hidden; transition:opacity .15s ease; }
    #pm-biz:checked ~ .v-decide__answers .v-decide__out--biz,
    #pm-cust:checked ~ .v-decide__answers .v-decide__out--cust { opacity:1; visibility:visible; }
    .v-decide__tag { font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:rgba(10,10,11,.5); margin-bottom:4px; }
    .v-decide__out .v-stmt__row { padding-left:0; padding-right:0; }
    .v-decide__pay { display:flex; justify-content:space-between; align-items:baseline; padding:12px 0 2px; border-top:2px solid rgba(10,10,11,.28); margin-top:6px; }
    .v-decide__pay span { font-family:var(--sans); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); }
    .v-decide__pay b { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:clamp(34px,5vw,46px); line-height:1; color:var(--ink); }
    .v-decide__pay b em { font-style:normal; font-size:15px; font-weight:600; color:rgba(10,10,11,.55); margin-left:2px; }
    .v-decide__pay--green b { color:var(--green); }
    .v-decide__sub { font-family:var(--mono); font-size:12px; color:var(--green); font-weight:700; text-align:right; }
    .v-decide__note { font-family:var(--sans); font-size:12.5px; color:rgba(10,10,11,.6); line-height:1.5; margin-top:10px; }
    .v-pay__hw { font-size:14.5px; color:rgba(10,10,11,.7); line-height:1.7; max-width:72ch; margin-bottom:14px; }
    .v-pay__verticals { font-size:13px; letter-spacing:.02em; color:rgba(10,10,11,.55); margin-bottom:32px; }
    .v-steps { display:grid; grid-template-columns:1fr; gap:22px; margin:0 0 32px; }
    @media (min-width:760px){ .v-steps { grid-template-columns:repeat(3,1fr); } }
    .v-step__n { font-family:var(--mono); font-size:28px; font-weight:700; color:rgba(10,10,11,.26); display:block; margin-bottom:8px; }
    .v-step h4 { font-size:16px; margin-bottom:6px; color:var(--ink); }
    .v-step p { font-size:13.5px; color:rgba(10,10,11,.65); line-height:1.55; }

    /* ─────────── GET FOUND (SEO) + CONSULTING (2026-07) ─────────── */
    .v-pillar--thin { padding: clamp(40px,6vh,72px) 5%; }
    .v-seo__grid { display:grid; grid-template-columns:1fr; gap:18px; margin:0 0 32px; }
    @media (min-width:760px){ .v-seo__grid { grid-template-columns:repeat(3,1fr); } }
    .v-feature { background:var(--paper); border:1px solid rgba(10,10,11,.10); border-radius:14px; padding:22px; box-shadow:0 10px 26px rgba(10,10,11,.05); }
    .v-feature__ic { display:inline-grid; place-items:center; width:40px; height:40px; border-radius:10px; border:1px solid rgba(10,10,11,.12); background:rgba(10,10,11,.03); color:var(--ink); margin-bottom:14px; }
    .v-feature__ic .icon { width:20px; height:20px; }
    .v-feature h4 { font-size:16px; color:var(--ink); margin-bottom:6px; }
    .v-feature p { font-size:13.5px; color:rgba(10,10,11,.65); line-height:1.55; }
    /* ─────────── CONSULTING PILLAR (rebuilt Commit 10) ─────────── */
    .v-cons__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(244,241,234,.12); border:1px solid rgba(244,241,234,.12); border-radius:14px; overflow:hidden; margin:8px 0 32px; }
    @media (max-width:640px){ .v-cons__grid { grid-template-columns:1fr; } }
    .v-cons__cta { display:flex; flex-wrap:wrap; gap:12px; }
    .v-pillar--ink .v-lead { max-width:64ch; }

    /* ═══════════ COMMIT 13 — WEBSITES TIERS / PANELS / LEAD FORMS / SEO DEMO / GROWTH SESSION ═══════════ */
    /* Websites tiers — statement/document styling on the ink section */
    .v-tiers { display:grid; grid-template-columns:1fr; gap:1px; background:rgba(244,241,234,.12); border:1px solid rgba(244,241,234,.12); border-radius:14px; overflow:hidden; margin:clamp(36px,5vw,56px) auto 16px; max-width:1160px; }
    @media (min-width:820px){ .v-tiers { grid-template-columns:repeat(3,1fr); } }
    .v-tier { background:var(--ink); padding:26px 24px; position:relative; }
    .v-tier--featured { background:var(--ink-raised); }
    .v-tier__badge { position:absolute; top:14px; right:16px; font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); background:var(--green); padding:4px 9px; border-radius:999px; font-weight:700; }
    .v-tier__head { display:flex; flex-direction:column; gap:3px; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid rgba(244,241,234,.12); }
    .v-tier__name { font-family:var(--sans); font-size:20px; font-weight:800; letter-spacing:-.01em; color:var(--paper); }
    .v-tier__term { font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--gray); text-transform:uppercase; }
    .v-tier__prev { font-size:12.5px; color:var(--paper); font-weight:700; margin-bottom:8px; }
    .v-tier__list { list-style:none; display:flex; flex-direction:column; gap:9px; }
    .v-tier__list li { position:relative; padding-left:18px; font-size:13.5px; line-height:1.5; color:var(--gray); }
    .v-tier__list li::before { content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border-left:1.5px solid var(--green); border-bottom:1.5px solid var(--green); transform:rotate(-45deg); }
    .v-tiers__note { max-width:1160px; margin:0 auto; font-size:13px; color:var(--gray); line-height:1.6; }

    /* Slide-down panels */
    .v-panel { position:relative; max-width:1160px; margin:0 auto; max-height:0; overflow:hidden; transition:max-height .2s ease; }
    .v-panel.open { max-height:900px; }
    .v-panel__close { position:absolute; top:18px; right:14px; background:none; border:none; color:var(--gray); font-size:26px; line-height:1; cursor:pointer; padding:4px 8px; z-index:2; }
    .v-panel__close:hover { color:var(--paper); }
    .v-panel--ink .v-panel__close, .web-preview .v-panel__close { color:var(--gray); }
    .v-panel__lead { margin:22px 0 18px; font-family:var(--sans); font-size:clamp(15px,1.5vw,18px); font-weight:600; line-height:1.5; color:var(--paper); max-width:60ch; padding-right:40px; }
    /* panel body card (ink-raised, since panels sit in ink sections) */
    .v-panel .v-lead-form, .v-panel .v-form-success { background:var(--ink-raised); border:1px solid rgba(244,241,234,.12); border-radius:14px; padding:22px; margin-bottom:20px; }

    /* Lead forms (shared) */
    .v-lead-form { display:flex; flex-direction:column; gap:14px; }
    .v-lf__row { display:grid; grid-template-columns:1fr; gap:14px; }
    @media (min-width:640px){ .v-lf__row { grid-template-columns:1fr 1fr; } }
    .v-lf__field { display:flex; flex-direction:column; gap:6px; }
    .v-lf__field span { font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gray); font-weight:600; }
    .v-lf__field input, .v-lf__field select { background:rgba(0,0,0,.25); border:1px solid rgba(244,241,234,.16); border-radius:8px; padding:12px 13px; color:var(--paper); font-family:var(--sans); font-size:14px; outline:none; transition:border-color .15s; width:100%; }
    .v-lf__field input:focus, .v-lf__field select:focus { border-color:var(--green); }
    .v-lf__field select option { background:var(--ink-raised); color:var(--paper); }
    .v-lead-form .btn-green { align-self:flex-start; border:none; cursor:pointer; }
    /* File input (inside the ink-raised card) */
    .v-lf__field input[type=file] { padding:10px 12px; font-size:13px; color:var(--paper); }
    .v-lf__field input[type=file]::file-selector-button { background:rgba(244,241,234,.10); color:var(--paper); border:1px solid rgba(244,241,234,.28); border-radius:6px; padding:7px 12px; margin-right:12px; font-family:var(--sans); font-weight:600; font-size:12px; cursor:pointer; }
    .v-form-success { font-family:var(--sans); font-size:15px; font-weight:600; color:var(--paper); line-height:1.5; }
    .v-form-success::before { content:"✓ "; color:var(--green); font-weight:800; }
    /* Statement-upload panel sits in the PAPER payments section — dark form card, but ink framing text */
    #panel-upload .v-panel__lead { color:var(--ink); }
    #panel-upload .v-panel__close { color:var(--gray); }
    .v-upload-alt { margin:4px 0 20px; font-size:13.5px; color:rgba(10,10,11,.62); }
    .v-upload-alt a { color:var(--ink); font-weight:700; text-decoration:underline; }
    /* Lead-insert failure — never a fake success; phone fallback (no red token, uses a warm hairline) */
    .v-form-error { margin-top:14px; padding:12px 15px; border:1px solid rgba(150,147,140,.5); border-left:3px solid var(--gray); border-radius:8px; font-family:var(--sans); font-size:13.5px; font-weight:600; line-height:1.5; color:var(--paper); }
    .v-form-error a { color:var(--paper); text-decoration:underline; }
    #seo .v-form-error, .contact .v-form-error { color:var(--ink); border-color:rgba(10,10,11,.28); border-left-color:var(--ink); }
    #seo .v-form-error a, .contact .v-form-error a { color:var(--ink); }

    /* Get Found — light-context inputs (paper section, not in a panel) */
    .v-seo__try { background:var(--paper); border:1px solid rgba(10,10,11,.12); border-radius:14px; padding:22px 24px; margin:8px 0 22px; box-shadow:0 10px 26px rgba(10,10,11,.05); }
    .v-seo__title { font-family:var(--sans); font-size:18px; font-weight:800; letter-spacing:-.01em; color:var(--ink); margin-bottom:6px; }
    .v-seo__instr { font-size:13.5px; color:rgba(10,10,11,.66); line-height:1.55; margin-bottom:16px; max-width:66ch; }
    .v-seo__row { display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:14px; }
    @media (min-width:680px){ .v-seo__row { grid-template-columns:1.4fr .8fr auto; } }
    .v-seo__row input { background:var(--paper); border:1px solid rgba(10,10,11,.2); border-radius:8px; padding:12px 14px; color:var(--ink); font-family:var(--sans); font-size:14px; outline:none; }
    .v-seo__row input:focus { border-color:var(--ink); }
    .v-seo__row .btn-green { border:none; cursor:pointer; justify-content:center; }
    .v-seo__grade { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
    .v-seo__grade li { position:relative; padding-left:16px; font-size:13px; line-height:1.5; color:rgba(10,10,11,.62); }
    .v-seo__grade li::before { content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:rgba(10,10,11,.28); }
    .v-seo__grade li b { color:var(--ink); font-weight:700; }
    .v-seo__bridge { font-size:14.5px; font-weight:700; color:var(--ink); margin:0 0 14px; }
    .v-seo__audit { max-width:640px; }
    .v-seo__audit .v-lf__field span { color:rgba(10,10,11,.5); }
    .v-seo__audit .v-lf__field input { background:var(--paper); border:1px solid rgba(10,10,11,.2); color:var(--ink); }
    .v-seo__audit .v-lf__field input:focus { border-color:var(--ink); }
    .v-seo__audit .btn-green { border:none; cursor:pointer; }
    #seo .v-form-success { color:var(--ink); }
    #seo .v-form-success::before { content:"✓ "; color:var(--green); }

    /* Growth Session block (consulting, ink) */
    .v-growth { border:1px solid rgba(244,241,234,.14); border-radius:14px; padding:clamp(24px,3vw,34px); margin:0 0 28px; background:var(--ink-raised); }
    .v-growth__h { font-family:var(--sans); font-size:clamp(20px,2.2vw,24px); font-weight:800; letter-spacing:-.02em; color:var(--paper); margin-bottom:4px; }
    .v-growth__sub { font-size:14.5px; color:var(--gray); margin-bottom:24px; }
    .v-growth__steps { display:grid; grid-template-columns:1fr; gap:22px; margin-bottom:22px; }
    @media (min-width:720px){ .v-growth__steps { grid-template-columns:repeat(3,1fr); gap:26px; } }
    .v-growth__step { display:flex; flex-direction:column; gap:7px; padding-top:16px; border-top:2px solid var(--green); }
    .v-growth__step h4 { font-family:var(--sans); font-size:15.5px; font-weight:800; letter-spacing:-.01em; color:var(--paper); }
    .v-growth__step p { font-size:13.5px; color:var(--gray); line-height:1.55; }
    .v-growth__tag { font-family:var(--sans); font-size:clamp(17px,2vw,21px); font-weight:800; color:var(--paper); letter-spacing:-.02em; }

    /* Homepage About teaser — compact, sits to its content height (no half-page of dead space) */
    .v-pillar.v-about-teaser { padding-top:clamp(44px,6vw,72px); padding-bottom:clamp(44px,6vw,72px); }

    /* ─────────── AUTOMATION BAND (lighter than a pillar: smaller H2, tighter padding, no number/CTA) ─────────── */
    .v-band { background:var(--ink); color:var(--paper); border-top:1px solid rgba(244,241,234,.08); border-bottom:1px solid rgba(244,241,234,.08); padding:clamp(44px,6vh,72px) 5%; }
    .v-band__inner { max-width:1160px; margin:0 auto; }
    .v-band__h { font-family:var(--sans); font-size:clamp(22px,2.8vw,32px); font-weight:800; letter-spacing:-.02em; line-height:1.1; color:var(--paper); margin:0 0 clamp(26px,3.4vw,40px); max-width:24ch; }
    .v-band__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,40px); align-items:start; }
    @media (max-width:720px){ .v-band__grid { grid-template-columns:1fr; gap:22px; } }
    .v-band__item { border-top:2px solid var(--green); padding-top:14px; }
    .v-band__name { font-family:var(--sans); font-size:16px; font-weight:800; letter-spacing:-.01em; color:var(--paper); margin-bottom:7px; }
    .v-band__p { font-size:14px; line-height:1.6; color:var(--gray); }
    .v-band__close { max-width:62ch; margin:clamp(28px,3.6vw,44px) 0 0; font-family:var(--sans); font-size:clamp(16px,1.9vw,21px); font-weight:600; line-height:1.5; letter-spacing:-.01em; color:var(--paper); }
    .v-band__link { display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-family:var(--sans); font-size:14px; font-weight:700; color:var(--green); text-decoration:none; }
    .v-band__link:hover { text-decoration:underline; }
    .v-band__link .icon { width:16px; height:16px; }

    /* ─────────── ABOUT (ink; brand-film + guarantees) (2026-07) ─────────── */
    .v-about { display:grid; grid-template-columns:1.1fr 1fr; gap:4.5rem; align-items:center; }
    .v-about__bps { font-size:15px; color:var(--gray); margin:0 0 26px; }
    .v-about__bps b { color:var(--green); font-family:var(--mono); font-size:22px; font-weight:700; margin-right:6px; }
    .v-guarantees { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .v-guarantee { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--paper); }
    .v-guarantee .icon { width:20px; height:20px; color:var(--gray); flex-shrink:0; }
    .v-about__film { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/5; border:1px solid rgba(244,241,234,.12); background:var(--ink-raised); box-shadow:0 30px 70px rgba(0,0,0,.45); }
    .v-about__seal { position:absolute; inset:0; display:grid; place-items:center; }
    .v-about__seal img { width:52%; opacity:.85; }
    .v-about__video { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; display:block; }
    .v-about__filmcap { position:absolute; z-index:2; left:0; right:0; bottom:0; padding:14px 16px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--paper); background:linear-gradient(to top, rgba(10,10,11,.85), transparent); display:flex; align-items:center; gap:8px; }
    .v-about__filmcap .icon { width:14px; height:14px; flex-shrink:0; }
    @media (max-width:820px){ .v-about { grid-template-columns:1fr; gap:2.5rem; } .v-about__film { aspect-ratio:16/10; } }

    /* ─────────── SHARED KICKER ─────────── */
    .v-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--gray); margin-bottom: 14px; }

    /* ─────────── WEBSITES PILLAR (rebuilt Commit 10) ─────────── */
    .web-preview { background: var(--ink); color: var(--paper); border-top: 1px solid rgba(244,241,234,.08); border-bottom: 1px solid rgba(244,241,234,.08); padding: clamp(56px,9vh,110px) 5%; }
    .v-web__inner { max-width: 1160px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(20px,2.6vw,32px); }
    .v-web__copy { max-width: none; }
    .v-web__h2 { font-size: clamp(34px,5vw,58px); margin-bottom: clamp(22px,3vw,34px); }
    .v-web__cols { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(24px,3vw,44px); align-items: start; }
    @media (max-width: 720px){ .v-web__cols { grid-template-columns: 1fr; gap: 16px; } }
    .v-web__p { color: var(--gray); font-size: clamp(15px,1.4vw,17px); line-height: 1.65; margin-bottom: 16px; max-width: 46ch; }
    .v-web__cols .v-web__p { max-width: none; margin-bottom: 0; }
    .v-web__p b { color: var(--paper); font-weight: 700; }
    .v-web__copy .btn-green { margin-top: clamp(24px,3vw,34px); }

    /* browser frame */
    .v-browser { border-radius: 12px; overflow: hidden; border: 1px solid rgba(244,241,234,.14); box-shadow: 0 40px 90px rgba(0,0,0,.55); background: #fff; }
    .v-browser__bar { background: #1a1a1b; display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
    .v-browser__dots { display: flex; gap: 6px; }
    .v-browser__dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
    .v-browser__dots i:nth-child(1){ background: #ff5f57; }
    .v-browser__dots i:nth-child(2){ background: #febc2e; }
    .v-browser__dots i:nth-child(3){ background: #28c840; }
    .v-browser__url { flex: 1; background: #2a2a2c; color: #c7c4bd; border-radius: 6px; padding: 6px 12px; font-family: var(--mono); font-size: 11px; display: flex; align-items: center; gap: 7px; }
    .v-browser__url .icon { width: 12px; height: 12px; }
    .v-browser__view { background: #F3EFE9; position: relative; }

    /* Meridian Dental demo — premium practice site (product-shot palette, intentionally non-brand) */
    .dz { font-family: 'Helvetica Neue', Arial, sans-serif; color: #23211E; }
    .dz-nav { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; background: #F3EFE9; border-bottom: 1px solid #E2DACE; }
    .dz-brand { font-family: Georgia, serif; font-size: 18px; font-weight: 700; color: #23211E; letter-spacing: .01em; }
    .dz-brand em { font-style: normal; color: #B08D57; margin-left: 4px; }
    .dz-links { display: flex; gap: 15px; align-items: center; font-size: 12px; color: #6E6659; }
    .dz-links a { color: #6E6659; text-decoration: none; }
    .dz-book { background: #23211E; color: #F3EFE9 !important; padding: 7px 15px; border-radius: 999px; font-weight: 600; }
    .dz-hero { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 32px 24px 34px; color: #F5F1EA;
      background:
        linear-gradient(100deg, rgba(24,22,20,.90) 0%, rgba(24,22,20,.42) 56%, rgba(24,22,20,.12) 100%),
        radial-gradient(95% 85% at 86% 8%, #CFBD9E, transparent 55%),
        radial-gradient(80% 95% at 102% 104%, #7C6F5C, transparent 60%),
        linear-gradient(135deg, #2A2723 0%, #4B443B 100%); }
    .dz-hero__txt { max-width: 56%; }
    .dz-eyebrow { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #D9C7A6; margin-bottom: 10px; }
    .dz-h1 { font-family: Georgia, serif; font-size: 25px; line-height: 1.14; font-weight: 700; margin-bottom: 12px; }
    .dz-sub { font-size: 12px; line-height: 1.5; color: rgba(245,241,234,.82); }
    .dz-card { position: absolute; right: 22px; bottom: -34px; width: 208px; background: #FBF9F5; border: 1px solid #E2DACE; border-radius: 12px; box-shadow: 0 24px 52px rgba(28,26,23,.38); padding: 16px; z-index: 3; }
    .dz-card__h { font-family: Georgia, serif; font-size: 14px; font-weight: 700; color: #23211E; margin-bottom: 12px; }
    .dz-card__f { font-size: 11.5px; color: #6E6659; border: 1px solid #E2DACE; border-radius: 7px; padding: 8px 10px; margin-bottom: 8px; background: #F3EFE9; }
    .dz-card__f--sel { color: #23211E; border-color: #B08D57; }
    .dz-card__slot { font-size: 11px; color: #23211E; font-weight: 600; background: #EFE7D8; border-radius: 7px; padding: 8px 10px; margin-bottom: 12px; }
    .dz-card__cta { background: #B08D57; color: #23211E; text-align: center; font-weight: 700; font-size: 12px; padding: 10px; border-radius: 8px; }
    .dz-services { display: flex; padding-top: 46px; background: #F3EFE9; }
    .dz-svc { flex: 1; text-align: center; font-size: 10.5px; color: #4A443B; padding: 14px 6px; border-right: 1px solid #E2DACE; }
    .dz-svc:last-child { border-right: none; }
    .dz-quote { padding: 16px 24px 20px; font-family: Georgia, serif; font-style: italic; font-size: 13px; color: #3A352E; background: #ECE5DA; text-align: center; }
    .dz-quote span { display: block; font-family: var(--sans); font-style: normal; font-size: 9.5px; letter-spacing: .08em; color: #8A7F6D; margin-top: 6px; text-transform: uppercase; }
    .dz-sticky { position: absolute; bottom: 14px; right: 14px; background: #B08D57; color: #23211E; font-weight: 700; font-size: 12px; padding: 10px 16px; border-radius: 999px; box-shadow: 0 10px 24px rgba(28,26,23,.42); z-index: 4; }
    @media (max-width: 560px){
      .dz-hero { flex-direction: column; padding-bottom: 24px; }
      .dz-hero__txt { max-width: 100%; }
      .dz-card { position: static; width: auto; right: auto; bottom: auto; margin: 4px 0 0; box-shadow: 0 12px 30px rgba(28,26,23,.22); }
      .dz-services { padding-top: 14px; }
    }

    /* ═══════════ WEBSITES DEMO PORTFOLIO — four independent mini-sites ═══════════
       Constraint: each demo is its own type system / layout / palette / button shape.
       Only the browser chrome (.v-browser*) and the Veritas section labels are shared.
       Mini-sites deliberately use NO Veritas tokens — explicit font stacks + hex only. */
    .demoport__h { font-family: var(--sans); font-size: clamp(20px,2.4vw,28px); font-weight: 800; letter-spacing: -.02em; color: var(--paper); text-align: center; margin-bottom: clamp(24px,3.4vw,38px); }
    .demoport__grid { display: grid; grid-template-columns: 1fr; gap: clamp(22px,3vw,34px); }
    @media (min-width: 1000px){ .demoport__grid { grid-template-columns: 1fr 1fr; } }
    .demoport__item { margin: 0; display: flex; flex-direction: column; align-items: center; }
    .demoport__item .v-browser { width: 100%; max-width: 600px; }
    .demoport__item .v-browser__view { overflow: hidden; }
    /* allow the grid track + frame to shrink below the mini-site's intrinsic width on
       small phones so the page never scrolls sideways (frame clips its own content) */
    .demoport, .demoport__grid, .demoport__item, .demoport__item .v-browser { min-width: 0; }
    .demoport__label { margin-top: 13px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gray); font-weight: 600; text-align: center; }
    .demoport__outcome { display: block; margin-top: 6px; font-family: var(--sans); font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--paper); }
    .demoport__note { max-width: 760px; margin: clamp(26px,3.6vw,40px) auto 0; text-align: center; color: var(--gray); font-size: clamp(14px,1.4vw,16px); line-height: 1.6; }

    /* ── 2 · RESTAURANT — casaverderestaurant.com — condensed sans, espresso + red-orange, dense ── */
    .rs { font-family: 'Arial Narrow','Roboto Condensed',Arial,sans-serif; background: #1b1512; color: #F6EEE4; }
    .rs-hero { display: flex; align-items: stretch; min-height: 168px; }
    .rs-hero__img { flex: 0 0 40%; background:
        radial-gradient(120% 90% at 18% 22%, rgba(228,87,46,.55), transparent 60%),
        linear-gradient(150deg,#3a2318 0%,#7a3b1e 55%,#c25a2a 100%); }
    .rs-hero__panel { flex: 1; padding: 20px 20px 18px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(180deg,#221a15,#150f0c); }
    .rs-kick { font-family: 'Helvetica Neue',Arial,sans-serif; font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: #E9A05A; font-weight: 700; margin-bottom: 10px; }
    .rs-name { font-size: 40px; line-height: .84; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #F6EEE4; margin-bottom: 12px; transform: scaleY(1.1); transform-origin: left top; }
    .rs-tag { font-family: 'Helvetica Neue',Arial,sans-serif; font-size: 12px; line-height: 1.4; color: rgba(246,238,228,.72); margin-bottom: 16px; }
    .rs-btn { align-self: flex-start; background: #E4572E; color: #fff; font-family: 'Helvetica Neue',Arial,sans-serif; font-weight: 800; font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase; padding: 9px 16px; border-radius: 3px; }
    .rs-menu { background: #120c0a; }
    .rs-item { display: flex; align-items: baseline; gap: 10px; padding: 11px 20px; border-top: 1px solid rgba(246,238,228,.08); }
    .rs-item__n { font-family: 'Helvetica Neue',Arial,sans-serif; font-size: 13px; font-weight: 600; color: #F6EEE4; white-space: nowrap; }
    .rs-item__d { flex: 1; border-bottom: 1px dotted rgba(246,238,228,.30); transform: translateY(-3px); }
    .rs-item__p { font-size: 16px; font-weight: 700; color: #E9A05A; letter-spacing: .02em; }
    .rs-order { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: #E4572E; color: #fff; }
    .rs-order__t { font-family: 'Helvetica Neue',Arial,sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
    .rs-order__btn { font-family: 'Helvetica Neue',Arial,sans-serif; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: #150f0c; color: #fff; padding: 8px 13px; border-radius: 3px; }
    .rs-add { font-family: 'Helvetica Neue',Arial,sans-serif; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #E4572E; border: 1px solid rgba(228,87,46,.6); border-radius: 3px; padding: 5px 9px; }

    /* med-spa deposit bar (booking + deposits) */
    .dz-deposit { background: #EFE7D8; color: #6E5B36; font-family: 'Helvetica Neue',Arial,sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-align: center; padding: 10px 14px; border-top: 1px solid #E2DACE; }

    /* ── 3 · BOUTIQUE / RETAIL — verdeandco.com — ONLINE STORE — light fashion sans + italic serif, cream/blush + charcoal ── */
    .bt { font-family: 'Helvetica Neue',Arial,sans-serif; background: #F7F1EC; color: #2C2A28; }
    .bt-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid #E7DDD3; }
    .bt-brand { font-size: 15px; font-weight: 400; letter-spacing: .28em; color: #2C2A28; }
    .bt-cart { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #9A8E82; font-weight: 600; }
    .bt-cart b { color: #C08A6E; font-weight: 800; }
    .bt-hero { padding: 22px 20px 18px; text-align: center; background: linear-gradient(180deg,#F2E7DF,#F7F1EC); }
    .bt-hero__sm { display: block; font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: #B79C88; font-weight: 600; margin-bottom: 8px; }
    .bt-hero__h { font-family: Georgia,'Times New Roman',serif; font-size: 30px; font-style: italic; font-weight: 400; color: #2C2A28; letter-spacing: -.01em; }
    .bt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #E7DDD3; }
    .bt-prod { background: #F7F1EC; padding: 12px 12px 14px; }
    .bt-prod__img { height: 68px; border-radius: 6px; margin-bottom: 8px; }
    .bt-prod__img--1 { background: linear-gradient(135deg,#D9B7A6,#B98E77); }
    .bt-prod__img--2 { background: linear-gradient(135deg,#C9C3B4,#98917E); }
    .bt-prod__img--3 { background: linear-gradient(135deg,#E5CE9E,#C9A86A); }
    .bt-prod__img--4 { background: linear-gradient(135deg,#CBB9C6,#9E8296); }
    .bt-prod__n { font-family: Georgia,'Times New Roman',serif; font-size: 12.5px; color: #2C2A28; margin-bottom: 7px; }
    .bt-prod__row { display: flex; align-items: center; justify-content: space-between; }
    .bt-prod__p { font-size: 12.5px; font-weight: 700; color: #2C2A28; letter-spacing: .02em; }
    .bt-prod__b { font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: #7A6E62; border: 1px solid #C9BBAE; border-radius: 999px; padding: 5px 9px; font-weight: 600; }

    /* ── 4 · CONTRACTOR / PRO SERVICES — lonestarremodel.com — LEAD GENERATION — bold geometric sans, navy + amber ── */
    .cn { font-family: 'Helvetica Neue',Arial,sans-serif; background: #0F1E33; color: #EAF0F7; }
    .cn-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: #0B1526; border-bottom: 1px solid rgba(255,255,255,.08); }
    .cn-brand { font-size: 15px; font-weight: 900; letter-spacing: .02em; color: #fff; }
    .cn-brand span { color: #F5A623; }
    .cn-ph { font-size: 13px; font-weight: 800; color: #F5A623; letter-spacing: .01em; }
    .cn-hero { display: flex; gap: 14px; padding: 18px; background: linear-gradient(120deg,#12263f,#0f1e33 65%); }
    .cn-hero__l { flex: 1; min-width: 0; }
    .cn-hero__k { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #F5A623; margin-bottom: 8px; }
    .cn-hero__h { font-size: 22px; line-height: 1.08; font-weight: 900; letter-spacing: -.01em; color: #fff; margin-bottom: 12px; }
    .cn-hero__rev { font-size: 11px; color: #B7C4D4; font-weight: 600; }
    .cn-hero__rev b { color: #F5A623; letter-spacing: .08em; }
    .cn-form { flex: 0 0 42%; background: #fff; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 7px; }
    .cn-form__h { font-size: 12px; font-weight: 900; color: #0F1E33; text-transform: uppercase; letter-spacing: .04em; }
    .cn-form__f { font-size: 11px; color: #8892A0; background: #EEF1F5; border: 1px solid #DDE3EA; border-radius: 5px; padding: 8px 9px; }
    .cn-form__btn { background: #F5A623; color: #0F1E33; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; text-align: center; padding: 10px; border-radius: 5px; }
    .cn-gallery { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; }
    .cn-gallery span { height: 46px; display: block; }
    .cn-gallery .g1 { background: linear-gradient(135deg,#3a536f,#22384f); }
    .cn-gallery .g2 { background: linear-gradient(135deg,#6f5a3a,#4f3f22); }
    .cn-gallery .g3 { background: linear-gradient(135deg,#3a6f5a,#224f3f); }
    .cn-gallery .g4 { background: linear-gradient(135deg,#5a3a53,#3f2238); }
    .cn-areas { padding: 11px 18px; background: #0B1526; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: #B7C4D4; text-align: center; }

    /* spec row — borderless selling points, sits tight under the demo grid */
    .v-web__specs { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2.6vw,34px); margin-top: clamp(20px,2.8vw,30px); }
    .v-web__spec { display: flex; gap: 9px; align-items: flex-start; font-family: var(--sans); font-size: clamp(15px,1.7vw,19px); line-height: 1.35; color: var(--paper); font-weight: 700; letter-spacing: -.01em; }
    .v-web__spec::before { content: "✓"; color: var(--green); font-weight: 900; flex: none; }
    @media (max-width: 620px){ .v-web__specs { grid-template-columns: 1fr; gap: 12px; } }

    /* CTA SECTION */
    .cta-section {
      background: var(--ink);
      color: var(--paper);
      text-align: center;
      position: relative; overflow: hidden;
      padding: clamp(64px,10vh,120px) 5%;
      border-top: 1px solid rgba(244,241,234,.08);
    }
    .cta-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
    .cta-inner .sec-eye { justify-content: center; color: var(--gray); }
    .cta-inner .sec-eye::before { content: ""; display: block; width: 36px; height: 1px; background: rgba(150,147,140,.5); }
    .cta-inner h2 { font-family: var(--sans); font-weight: 800; letter-spacing: -.02em; color: var(--paper); font-size: clamp(28px,3.6vw,44px); line-height: 1.1; margin-bottom: 1.2rem; }
    .cta-inner h2 em { font-style: normal; color: var(--paper); }
    .cta-inner p { color: var(--gray); font-size: 17px; line-height: 1.75; margin-bottom: 2.6rem; }
    .cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
    .cta-btns .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: 10px; font-weight: 700; font-size: 13px; text-decoration: none; border: 1px solid rgba(244,241,234,.25); color: var(--paper); background: transparent; transition: all .15s; }
    .cta-btns .btn:hover { transform: translateY(-1px); }
    .cta-btns .btn-primary { background: var(--green); color: var(--ink); border: 1px solid var(--green); }
    .cta-btns .btn-primary:hover { filter: brightness(1.05); }

    /* CONTACT */
    .contact {
      background: var(--paper);
      color: var(--ink);
      border-top: 1px solid rgba(10,10,11,.08);
    }
    .contact-inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4.5rem; align-items: start; }
    .contact-info .sec-eye { color: rgba(10,10,11,.45); }
    .contact-info h2 { font-family: var(--sans); font-weight: 800; letter-spacing: -.02em; color: var(--ink); font-size: clamp(28px,3.4vw,40px); line-height: 1.1; margin-bottom: 1rem; }
    .contact-info h2 em { font-style: normal; color: var(--ink); }
    .contact-info p { color: rgba(10,10,11,.7); line-height: 1.75; margin-bottom: 2.2rem; font-size: 15px; }
    .c-methods { display: flex; flex-direction: column; gap: 1rem; }
    .c-method {
      display: flex; align-items: center; gap: 1rem;
      color: var(--ink); text-decoration: none;
      transition: border-color 0.2s;
      padding: 14px 18px;
      background: var(--paper);
      border: 1px solid rgba(10,10,11,.12);
      border-radius: 10px;
    }
    .c-method:hover { border-color: var(--ink); }
    .c-icon {
      width: 42px; height: 42px;
      border: 1px solid rgba(10,10,11,.14);
      background: rgba(10,10,11,.03);
      border-radius: 10px;
      display: grid; place-items: center;
      color: var(--ink); font-size: 14px;
      flex-shrink: 0;
    }
    .c-icon .icon { width: 18px; height: 18px; }
    .c-text { display: flex; flex-direction: column; line-height: 1.3; }
    .c-text .sub {
      font-family: var(--mono); font-size: 9px;
      color: rgba(10,10,11,.5); letter-spacing: 0.2em;
      text-transform: uppercase;
    }
    .c-text .val {
      font-family: var(--sans); font-weight: 700; font-size: 18px;
      color: var(--ink); margin-top: 4px;
    }
    .contact-tagline {
      margin-top: 2.4rem;
      font-style: italic;
      font-size: 18px; color: var(--ink);
      padding-left: 18px;
      border-left: 2px solid rgba(10,10,11,.2);
    }

    .contact-form {
      display: flex; flex-direction: column; gap: 1rem;
      padding: 2.6rem;
      background: var(--ink-raised);
      border: 1px solid rgba(244,241,234,.10);
      border-radius: 14px;
      position: relative;
      box-shadow: 0 30px 70px rgba(10,10,11,.14);
    }
    .form-title {
      font-family: var(--sans); font-size: 24px;
      font-weight: 800; color: var(--paper);
      margin-bottom: 0.4rem;
      letter-spacing: -.01em;
    }
    .form-sub {
      font-family: var(--mono); font-size: 10px;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--gray); margin-bottom: 1.4rem;
    }
    .fg { display: flex; flex-direction: column; gap: 0.4rem; }
    .fg label {
      font-family: var(--mono); font-size: 9px;
      color: var(--gray); font-weight: 600;
      letter-spacing: 0.2em; text-transform: uppercase;
    }
    .fg input, .fg select, .fg textarea {
      background: rgba(0,0,0,.25);
      border: 1px solid rgba(244,241,234,.14);
      border-radius: 8px;
      padding: 12px 14px;
      color: var(--paper);
      font-family: var(--sans); font-size: 14px;
      outline: none;
      transition: border-color 0.2s;
      width: 100%;
    }
    .fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--green); }
    .fg input::placeholder { color: rgba(150,147,140,.7); }
    .fg select option { background: var(--ink-raised); color: var(--paper); }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
    .form-btn {
      background: var(--green);
      color: var(--ink);
      border: none;
      padding: 15px 28px;
      border-radius: 10px;
      font-family: var(--sans);
      font-weight: 700; font-size: 12px;
      letter-spacing: 0.16em; text-transform: uppercase;
      cursor: pointer;
      transition: all 0.2s;
      margin-top: 0.5rem;
      box-shadow: 0 10px 30px -10px rgba(0,210,106,.4);
    }
    .form-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 36px -10px rgba(0,210,106,.5); }

    /* FOOTER */
    footer {
      background: #0A0A0B;
      padding: 32px 5%;
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 1.4rem;
      border-top: 1px solid var(--navy-line);
    }
    .footer-brand { display: flex; align-items: center; gap: 12px; }
    .footer-brand .brand-mark { width: 32px; height: 32px; }
    .footer-brand .brand-mark span { font-size: 18px; }
    .footer-text {
      font-family: var(--mono); font-size: 10px;
      letter-spacing: 0.14em; color: var(--ink-400);
      text-transform: uppercase;
    }
    .footer-cities { display: flex; gap: 1.2rem; flex-wrap: wrap; }
    .footer-cities a {
      font-family: var(--mono); font-size: 10px;
      letter-spacing: 0.16em; color: var(--ink-400);
      text-decoration: none; text-transform: uppercase;
      transition: color 0.2s;
    }
    .footer-cities a:hover { color: var(--gold-300); }

    /* SCROLL REVEAL */
    .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    /* ─── CINEMATIC EFFECTS ─── */
    /* Scroll progress bar */
    .scroll-progress {
      position: fixed; top: 0; left: 0; height: 2px;
      background: linear-gradient(90deg, transparent, var(--gold-500), var(--gold-300));
      z-index: 1500; width: 0;
      box-shadow: 0 0 10px var(--gold-glow);
      transition: width 0.08s linear;
      pointer-events: none;
    }

    /* Section dividers — flat 1px hairline (gold accent + marker removed, Commit 10) */
    .section-divider {
      height: 1px;
      max-width: 1320px;
      margin: 0 auto;
      background: rgba(150, 147, 140, 0.15);
    }
    .section-divider .marker { display: none; }

    /* Reveal — base + variants */
    .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-slow { transition-duration: 1.3s; }
    .reveal-left { transform: translateX(-40px); }
    .reveal-left.visible { transform: translateX(0); }
    .reveal-right { transform: translateX(40px); }
    .reveal-right.visible { transform: translateX(0); }
    .reveal-scale { transform: scale(0.94); opacity: 0; }
    .reveal-scale.visible { transform: scale(1); opacity: 1; }

    /* Stagger children */
    [data-stagger] > * { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
    [data-stagger].in > * { opacity: 1; transform: translateY(0); }
    [data-stagger].in > *:nth-child(1) { transition-delay: 0.05s; }
    [data-stagger].in > *:nth-child(2) { transition-delay: 0.15s; }
    [data-stagger].in > *:nth-child(3) { transition-delay: 0.25s; }
    [data-stagger].in > *:nth-child(4) { transition-delay: 0.35s; }
    [data-stagger].in > *:nth-child(5) { transition-delay: 0.45s; }
    [data-stagger].in > *:nth-child(6) { transition-delay: 0.55s; }
    [data-stagger].in > *:nth-child(7) { transition-delay: 0.65s; }

    /* Parallax containers */
    [data-parallax] { will-change: transform; }

    /* Letter-by-letter title reveal */
    .word-reveal { display: inline-block; }
    .word-reveal .word {
      display: inline-block;
      opacity: 0;
      transform: translateY(0.4em);
      transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .word-reveal.in .word { opacity: 1; transform: translateY(0); }
    .word-reveal.in .word:nth-child(1) { transition-delay: 0.05s; }
    .word-reveal.in .word:nth-child(2) { transition-delay: 0.12s; }
    .word-reveal.in .word:nth-child(3) { transition-delay: 0.19s; }
    .word-reveal.in .word:nth-child(4) { transition-delay: 0.26s; }
    .word-reveal.in .word:nth-child(5) { transition-delay: 0.33s; }
    .word-reveal.in .word:nth-child(6) { transition-delay: 0.40s; }
    .word-reveal.in .word:nth-child(7) { transition-delay: 0.47s; }
    .word-reveal.in .word:nth-child(8) { transition-delay: 0.54s; }
    .word-reveal.in .word:nth-child(9) { transition-delay: 0.61s; }
    .word-reveal.in .word:nth-child(10) { transition-delay: 0.68s; }

    /* Respect reduced-motion: show everything at its end-state, no reveal/parallax motion */
    @media (prefers-reduced-motion: reduce) {
      .reveal, [data-stagger] > *, .word-reveal .word { opacity: 1 !important; transform: none !important; transition: none !important; }
      [data-parallax] { transform: none !important; }
      html { scroll-behavior: auto !important; }
    }

    /* Counter target — locks layout */
    .stat-n[data-count] { display: inline-block; min-width: 80px; }

    /* Subtle ambient glow on certain cards */
    .ambient-glow { position: relative; }
    .ambient-glow::after {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: inherit;
      background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(150, 147, 140, 0.12), transparent 50%);
      opacity: 0;
      transition: opacity 0.4s;
      pointer-events: none;
      z-index: 0;
    }
    .ambient-glow:hover::after { opacity: 1; }
    .ambient-glow > * { position: relative; z-index: 1; }

    /* ─── CITY PAGES ─── */
    body.city-active .main-section { display: none !important; }
    body.city-active #cityView { display: block; }
    #cityView { display: none; }

    .city-page { animation: cityEnter 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
    @keyframes cityEnter {
      0% { opacity: 0; transform: translateY(20px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    .city-hero {
      min-height: 92vh;
      display: flex; align-items: center;
      padding: 160px 5% 110px;
      position: relative; overflow: hidden;
      background: radial-gradient(ellipse 80% 60% at 30% 30%, rgba(150, 147, 140, 0.1), transparent 60%);
    }
    .city-hero-grid {
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(150, 147, 140, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(150, 147, 140, 0.05) 1px, transparent 1px);
      background-size: 80px 80px;
      mask-image: radial-gradient(ellipse at 70% 50%, black 20%, transparent 75%);
      -webkit-mask-image: radial-gradient(ellipse at 70% 50%, black 20%, transparent 75%);
    }
    .city-hero-inner {
      max-width: 1320px; margin: 0 auto;
      display: grid; grid-template-columns: 1.3fr 1fr;
      gap: 80px; align-items: center;
      width: 100%;
      position: relative; z-index: 2;
    }
    .city-back {
      display: inline-flex; align-items: center; gap: 10px;
      color: var(--ink-300); font-family: var(--mono);
      font-size: 11px; letter-spacing: 0.2em;
      text-transform: uppercase;
      text-decoration: none;
      padding: 8px 16px;
      border: 1px solid var(--navy-line-strong);
      border-radius: 2px;
      transition: all 0.2s;
      margin-bottom: 2rem;
      cursor: pointer;
      background: transparent;
    }
    .city-back:hover { color: var(--gold-300); border-color: var(--gold-500); }

    .city-eyebrow {
      font-family: var(--mono);
      font-size: 11px; letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--gold-400);
      margin-bottom: 1.6rem;
      display: inline-flex; align-items: center; gap: 14px;
    }
    .city-eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--gold-500); }

    .city-h1 {
      font-family: var(--serif);
      font-size: clamp(3.8rem, 7vw, 7rem);
      font-weight: 500;
      line-height: 0.95;
      color: var(--ink-100);
      letter-spacing: -0.01em;
      margin-bottom: 0.6rem;
    }
    .city-h1 em { font-style: italic; color: var(--gold-400); font-weight: 500; }
    .city-region {
      font-family: var(--mono);
      font-size: 11px; letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--ink-400);
      margin-bottom: 1.8rem;
    }
    .city-region strong { color: var(--gold-300); font-weight: 600; }
    .city-sub {
      font-size: 18px; color: var(--ink-200);
      line-height: 1.7;
      max-width: 580px;
      margin-bottom: 2.4rem;
    }

    /* City stat panel */
    .city-panel {
      background: linear-gradient(180deg, rgba(19, 26, 36, 0.7), rgba(10, 10, 11, 0.4));
      border: 1px solid var(--navy-line);
      border-radius: 2px;
      padding: 36px;
      position: relative;
    }
    .city-panel::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
    }
    .city-panel-title {
      font-family: var(--serif); font-size: 22px;
      font-weight: 500; color: var(--ink-100);
      margin-bottom: 1.6rem;
      letter-spacing: 0.01em;
    }
    .city-stat-grid {
      display: grid; grid-template-columns: repeat(2, 1fr);
      gap: 22px 24px;
    }
    .city-stat-cell { display: flex; flex-direction: column; gap: 6px; }
    .city-stat-label {
      font-family: var(--mono); font-size: 9px;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--ink-400);
    }
    .city-stat-value {
      font-family: var(--serif); font-size: 24px;
      color: var(--gold-300); line-height: 1.1;
      font-weight: 500;
    }
    .city-stat-value.mono { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; color: var(--ink-200); }

    /* City content sections */
    .city-section { padding: 90px 5%; position: relative; }
    .city-section.alt { background: var(--navy-850); }
    .city-content-grid {
      max-width: 1320px; margin: 0 auto;
      display: grid; grid-template-columns: 1fr 1.4fr;
      gap: 80px; align-items: start;
    }
    .city-content-grid.single { display: block; }
    .city-block-title {
      font-family: var(--serif);
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      font-weight: 500;
      line-height: 1.1; color: var(--ink-100);
      margin-bottom: 1rem;
      letter-spacing: 0.005em;
    }
    .city-block-title em { font-style: italic; color: var(--gold-400); }
    .city-block-sub {
      font-family: var(--mono); font-size: 10px;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--gold-400);
      margin-bottom: 1rem;
    }
    .city-prose p {
      color: var(--ink-300); line-height: 1.8;
      margin-bottom: 1.2rem; font-size: 15px;
    }

    .area-chips { display: flex; flex-wrap: wrap; gap: 10px; }
    .area-chip {
      background: rgba(150, 147, 140, 0.05);
      border: 1px solid var(--navy-line-strong);
      border-radius: 2px;
      padding: 9px 16px;
      font-family: var(--mono); font-size: 11px;
      color: var(--ink-200); letter-spacing: 0.08em;
    }

    .city-ind-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 16px;
    }
    .city-ind-card {
      background: linear-gradient(180deg, rgba(19, 26, 36, 0.6), rgba(19, 26, 36, 0.3));
      border: 1px solid var(--navy-line);
      border-radius: 2px;
      padding: 22px 24px;
      display: flex; flex-direction: column; gap: 8px;
      transition: all 0.2s;
    }
    .city-ind-card:hover { border-color: var(--gold-500); transform: translateY(-2px); }
    .city-ind-icon { font-size: 1.6rem; }
    .city-ind-name {
      font-family: var(--serif); font-size: 17px;
      color: var(--ink-100); font-weight: 500;
      letter-spacing: 0.01em;
    }
    .city-ind-desc { font-size: 12px; color: var(--ink-400); font-family: var(--mono); letter-spacing: 0.06em; }

    .city-why-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 1.4rem;
      margin-top: 2rem;
    }
    .city-why-card {
      padding: 1.8rem;
      background: linear-gradient(180deg, rgba(19, 26, 36, 0.5), rgba(19, 26, 36, 0.2));
      border: 1px solid var(--navy-line);
      border-radius: 2px;
      position: relative;
    }
    .city-why-card::before {
      content: ""; position: absolute;
      top: 0; left: 0; bottom: 0;
      width: 2px; background: var(--gold-500);
      transform: scaleY(0); transform-origin: bottom;
      transition: transform 0.5s;
    }
    .city-why-card:hover::before { transform: scaleY(1); }
    .city-why-card h4 {
      font-family: var(--serif); font-size: 19px;
      font-weight: 500; color: var(--ink-100);
      margin-bottom: 0.5rem; letter-spacing: 0.005em;
    }
    .city-why-card p { color: var(--ink-300); font-size: 14px; line-height: 1.65; }

    .city-pull-quote {
      max-width: 980px; margin: 0 auto;
      padding: 60px 40px;
      text-align: center;
      position: relative;
    }
    .city-pull-quote::before, .city-pull-quote::after {
      content: "";
      position: absolute; left: 50%; transform: translateX(-50%);
      width: 64px; height: 1px; background: var(--gold-500);
    }
    .city-pull-quote::before { top: 0; }
    .city-pull-quote::after { bottom: 0; }
    .city-pull-quote p {
      font-family: var(--serif); font-style: italic;
      font-size: clamp(1.6rem, 2.4vw, 2.4rem);
      line-height: 1.35;
      color: var(--ink-100);
      font-weight: 400;
      margin-bottom: 1.4rem;
      letter-spacing: 0.005em;
    }
    .city-pull-quote .qmark {
      font-family: var(--serif);
      font-size: 80px;
      color: var(--gold-500);
      line-height: 0.5;
      opacity: 0.4;
      font-style: italic;
    }
    .city-pull-quote .attr {
      font-family: var(--mono); font-size: 10px;
      letter-spacing: 0.24em; text-transform: uppercase;
      color: var(--gold-400);
      margin-top: 1.4rem;
    }

    .city-cta-strip {
      background:
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(150, 147, 140, 0.12), transparent 70%),
        linear-gradient(140deg, var(--navy-900), var(--navy-700));
      padding: 90px 5%;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .city-cta-strip::before {
      content: ""; position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(150, 147, 140, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(150, 147, 140, 0.04) 1px, transparent 1px);
      background-size: 80px 80px;
      mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
      -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    }
    .city-cta-strip > * { position: relative; z-index: 1; }
    .city-cta-strip h2 { margin-bottom: 1rem; }
    .city-cta-strip p { color: var(--ink-300); max-width: 580px; margin: 0 auto 2rem; font-size: 16px; }

    @media (max-width: 980px) {
      .city-hero-inner { grid-template-columns: 1fr; gap: 40px; }
      .city-content-grid { grid-template-columns: 1fr; gap: 40px; }
    }
    @media (max-width: 640px) {
      .city-h1 { font-size: 3rem; }
      .city-stat-grid { grid-template-columns: 1fr; }
    }

    /* ═══════ SPA VIEW TOGGLES (city / legal / retired-calc view container) ═══════ */
    #calcView { display: none; }
    body.legal-active .main-section { display: none !important; }
    body.legal-active #cityView { display: none !important; }
    body.legal-active #calcView { display: none !important; }
    body.legal-active #legalView { display: block; }
    #legalView { display: none; }


    /* ═══════ FOOTER REDESIGN ═══════ */
    footer.site-footer {
      background: var(--ink);
      padding: 64px 5% 32px;
      border-top: 1px solid rgba(244,241,234,.08);
      position: relative;
    }
    .footer-grid {
      max-width: 1320px; margin: 0 auto;
      display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
      gap: 48px;
      padding-bottom: 40px;
      border-bottom: 1px solid rgba(244,241,234,.08);
    }
    .footer-col h5 {
      font-family: var(--mono); font-size: 10px;
      letter-spacing: 0.24em; text-transform: uppercase;
      color: var(--gray);
      margin-bottom: 1.4rem;
      font-weight: 700;
    }
    .footer-col a, .footer-col p {
      display: block;
      font-family: var(--sans); font-size: 13px;
      color: var(--gray); text-decoration: none;
      line-height: 1.7;
      margin-bottom: 8px;
      transition: color 0.2s;
    }
    .footer-col a:hover { color: var(--paper); }
    .footer-brand-col .brand {
      display: inline-flex; align-items: center;
      margin-bottom: 1.2rem;
      text-decoration: none;
    }
    .footer-lockup { height: 30px; width: auto; display: block; }
    .footer-tagline {
      font-style: italic;
      font-size: 16px; color: var(--paper);
      line-height: 1.55; margin-bottom: 1rem;
    }
    .footer-bps {
      display: flex; align-items: center; gap: 9px;
      font-size: 12.5px; color: var(--gray);
      line-height: 1.5; margin-bottom: 1.4rem;
      max-width: 40ch;
    }
    .footer-bps .icon { width: 18px; height: 18px; color: var(--gray); flex-shrink: 0; }
    .footer-contact-line {
      display: flex; align-items: center; gap: 10px;
      font-family: var(--mono); font-size: 12px;
      color: var(--paper); margin-bottom: 8px;
      letter-spacing: 0.06em;
    }
    .footer-contact-line .icon { width: 14px; height: 14px; color: var(--gray); flex-shrink: 0; }
    .footer-contact-line a { color: var(--paper); text-decoration: none; }
    .footer-contact-line a:hover { color: var(--gray); }
    .footer-bottom {
      max-width: 1320px; margin: 0 auto;
      padding-top: 26px;
      display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
      gap: 16px;
      font-family: var(--mono); font-size: 10px;
      letter-spacing: 0.16em;
      color: var(--gray);
      text-transform: uppercase;
    }
    .footer-legal-links { display: flex; gap: 24px; }
    .footer-legal-links a {
      color: var(--gray); text-decoration: none;
      font-family: var(--mono); font-size: 10px;
      letter-spacing: 0.16em; text-transform: uppercase;
      transition: color 0.2s;
    }
    .footer-legal-links a:hover { color: var(--paper); }
    @media (max-width: 900px) {
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    }
    @media (max-width: 560px) {
      .footer-grid { grid-template-columns: 1fr; }
    }

    /* ═══════ LEGAL PAGES (Privacy / Terms) ═══════ */
    .legal-page {
      max-width: 820px; margin: 0 auto;
      padding: 160px 5% 100px;
    }
    .legal-eyebrow {
      font-family: var(--mono); font-size: 10px;
      letter-spacing: 0.24em; text-transform: uppercase;
      color: var(--gold-400);
      margin-bottom: 1.2rem;
      display: inline-flex; align-items: center; gap: 14px;
    }
    .legal-eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--gold-500); }
    .legal-h1 {
      font-family: var(--serif);
      font-size: clamp(2.6rem, 4.2vw, 3.6rem);
      font-weight: 500;
      line-height: 1.05;
      color: var(--ink-100);
      letter-spacing: 0.005em;
      margin-bottom: 0.6rem;
    }
    .legal-h1 em { font-style: italic; color: var(--gold-400); }
    .legal-date {
      font-family: var(--mono); font-size: 10px;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--ink-400);
      margin-bottom: 2.6rem;
      padding-bottom: 2rem;
      border-bottom: 1px solid var(--navy-line);
    }
    .legal-page h2 {
      font-family: var(--serif); font-size: 26px;
      font-weight: 500; color: var(--ink-100);
      margin: 2rem 0 0.8rem;
      letter-spacing: 0.005em;
    }
    .legal-page p, .legal-page li {
      color: var(--ink-300); font-size: 15px;
      line-height: 1.8; margin-bottom: 1rem;
    }
    .legal-page ul { padding-left: 1.2rem; margin-bottom: 1rem; }
    .legal-page li { margin-bottom: 0.5rem; }
    .legal-page a { color: var(--gold-300); text-decoration: none; border-bottom: 1px dashed var(--gold-500); }
    .legal-page a:hover { color: var(--gold-200); }
    .legal-back {
      display: inline-flex; align-items: center; gap: 10px;
      color: var(--ink-300); font-family: var(--mono);
      font-size: 11px; letter-spacing: 0.2em;
      text-transform: uppercase;
      text-decoration: none;
      padding: 8px 16px;
      border: 1px solid var(--navy-line-strong);
      border-radius: 2px;
      margin-bottom: 2.4rem;
      cursor: pointer; background: transparent;
      transition: all 0.2s;
    }
    .legal-back:hover { color: var(--gold-300); border-color: var(--gold-500); }

    /* Scrollbar */
    ::-webkit-scrollbar { width: 10px; }
    ::-webkit-scrollbar-track { background: var(--navy-900); }
    ::-webkit-scrollbar-thumb { background: var(--navy-600); }
    ::-webkit-scrollbar-thumb:hover { background: var(--gold-500); }

    /* RESPONSIVE */
    @media (max-width: 980px) {
      .contact-inner, .v-web__inner { grid-template-columns: 1fr; gap: 3rem; }
    }
    @media (max-width: 640px) {
      .nav-hamburger { display: flex; }
      .nav-links { display: none; }
      .form-row { grid-template-columns: 1fr; }
    }

    /* ─────────── SPACING NORMALIZATION (Commit 11) — one scale: 72 mobile / 160 desktop ─────────── */
    .v-wyg, .v-pillar, .web-preview, .cta-section, .contact { padding-top: clamp(72px, 11vw, 160px); padding-bottom: clamp(72px, 11vw, 160px); }
    .contact { padding-left: 0; padding-right: 0; }
    .contact .inner { max-width: 1200px; margin: 0 auto; padding: 0 5%; width: 100%; }
    /* Closing CTA band + contact: distinct, full-bleed separation */
    .cta-section { border-bottom: 1px solid rgba(244,241,234,.08); }
    .cta-btns { flex-wrap: nowrap; }
    @media (max-width: 560px){
      .cta-btns { flex-direction: column; align-items: stretch; }
      .cta-btns .btn { justify-content: center; }
    }