/* === TOKENS — Crisp ================================================== */
    :root {
      --paper: oklch(0.985 0.005 240);          /* near-white, slight cool tint */
      --surface: oklch(0.97 0.008 240);         /* alt sections */
      --surface-deep: oklch(0.94 0.012 240);    /* cards */
      --ink: oklch(0.18 0.022 235);             /* sharp navy-black */
      --ink-soft: oklch(0.40 0.020 235);        /* secondary text */
      --ink-faded: oklch(0.55 0.015 235);       /* tertiary */
      --rule: oklch(0.90 0.012 240);            /* hairlines */
      --rule-strong: oklch(0.82 0.015 240);

      --accent: oklch(0.46 0.18 235);           /* Vellum-leaning blue, darkened for WCAG AA on small text */
      --accent-deep: oklch(0.40 0.20 240);
      --accent-soft: oklch(0.95 0.04 235);      /* tinted background fill */
      --spark: oklch(0.66 0.20 35);             /* coral spark, used rarely */

      --display: "Newsreader", "Iowan Old Style", Georgia, serif;
      --sans: "Lato", -apple-system, system-ui, "Helvetica Neue", sans-serif;

      --measure: 65ch;
      --gutter-x: max(1.5rem, 6vw);
    }

    /* === RESET ============================================================ */
    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--paper);
      color: var(--ink);
      font-family: var(--sans);
      font-size: 17px;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    img { max-width: 100%; display: block; height: auto; }
    a { color: inherit; text-decoration: none; transition: color 180ms ease-out; }
    a:hover { color: var(--accent); }

    ::selection { background: var(--accent); color: var(--paper); }

    /* === TYPE ============================================================= */
    .display {
      font-family: var(--display);
      font-weight: 800;
      font-size: clamp(2.8rem, 7vw, 6.4rem);
      line-height: 0.96;
      letter-spacing: -0.035em;
      color: var(--ink);
    }
    .display .accent { color: var(--accent); }
    .h2 {
      font-family: var(--display);
      font-weight: 700;
      font-size: clamp(2rem, 3.4vw, 3rem);
      line-height: 1.05;
      letter-spacing: -0.025em;
      color: var(--ink);
    }
    .h3 {
      font-family: var(--display);
      font-weight: 600;
      font-size: 1.35rem;
      line-height: 1.2;
      letter-spacing: -0.015em;
      color: var(--ink);
    }
    .eyebrow {
      font-family: var(--sans);
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--accent);
    }
    .lede {
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(1.15rem, 1.5vw, 1.35rem);
      line-height: 1.55;
      color: var(--ink-soft);
      max-width: 50ch;
    }
    .body { max-width: var(--measure); }

    /* === LAYOUT =========================================================== */
    main, header, footer { padding-inline: var(--gutter-x); }

    /* === MASTHEAD (sticky) =============================================== */
    header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: oklch(0.985 0.005 240 / 0.92);
      backdrop-filter: saturate(180%) blur(8px);
      -webkit-backdrop-filter: saturate(180%) blur(8px);
      border-bottom: 1px solid transparent;
      transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
    }
    header.scrolled {
      border-bottom-color: var(--rule);
      box-shadow: 0 1px 0 var(--rule);
    }
    .masthead {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-block: 1.1rem;
    }
    .mark-block {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 1.1rem;
      text-decoration: none;
    }
    .mark-block:hover { text-decoration: none; }
    .mark-stack {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.25rem;
    }
    .mark {
      font-family: var(--display);
      font-weight: 800;
      font-size: clamp(1.7rem, 2.8vw, 2.4rem);
      letter-spacing: -0.035em;
      color: var(--ink);
      line-height: 0.95;
    }
    .mark .dot { color: var(--accent); }
    .mark-meta-logo {
      height: clamp(36px, 4.1vw, 54px);
      width: auto;
      display: block;
    }
    .mark-meta {
      font-size: 0.82rem;
      color: var(--ink-faded);
      font-weight: 500;
      letter-spacing: 0.01em;
    }
    .nav {
      display: flex;
      gap: 2.2rem;
      font-size: 0.92rem;
      font-weight: 500;
      color: var(--ink-soft);
    }
    .nav a:hover { color: var(--ink); }
    .header-cta {
      padding: 0.55rem 1.05rem;
      background: var(--ink);
      color: var(--paper);
      border-radius: 6px;
      font-size: 0.86rem;
      font-weight: 500;
      transition: background 180ms ease-out;
    }
    .header-cta:hover { background: var(--accent-deep); color: var(--paper); }
    .header-actions { display: flex; gap: 1.2rem; align-items: center; }
    .header-actions .nav-signin { color: var(--ink-faded); font-size: 0.88rem; font-weight: 500; }
    .header-actions .nav-signin:hover { color: var(--ink); }

    /* === HERO ============================================================= */
    .hero {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: clamp(2rem, 5vw, 5rem);
      padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem);
      align-items: center;
    }
    @media (max-width: 850px) {
      .hero { grid-template-columns: 1fr; gap: 2.5rem; padding-block: 2.5rem 2rem; }
    }
    .hero-text { display: flex; flex-direction: column; gap: 1.5rem; }
    .hero-text > .display { margin: 0; }
    .hero-text > .lede { margin: 0; max-width: 42ch; }
    .photo-frame {
      position: relative;
      aspect-ratio: 4 / 5;
      background: var(--surface-deep);
      overflow: hidden;
      border-radius: 12px;
      box-shadow: 0 1px 0 var(--rule), 0 30px 60px -30px oklch(0.18 0.022 235 / 0.18);
    }
    .photo-frame img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: 60% 30%;
      filter: contrast(1.05) saturate(1.05);
    }
    .photo-tag {
      position: absolute;
      bottom: 1rem; left: 1rem;
      background: var(--paper);
      padding: 0.5rem 0.9rem;
      border-radius: 999px;
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--ink);
      box-shadow: 0 4px 16px -4px oklch(0.18 0.022 235 / 0.20);
    }
    .photo-tag::before {
      content: "";
      display: inline-block;
      width: 6px; height: 6px;
      background: oklch(0.65 0.18 145);
      border-radius: 50%;
      margin-right: 0.5rem;
      vertical-align: middle;
    }

    /* === CTA ============================================================== */
    .cta-row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-top: 0.5rem; }
    .btn {
      display: inline-flex; align-items: center; gap: 0.5rem;
      padding: 0.95rem 1.5rem;
      font-family: var(--sans);
      font-size: 0.95rem;
      font-weight: 600;
      letter-spacing: -0.005em;
      border-radius: 8px;
      border: 1px solid transparent;
      background: var(--ink);
      color: var(--paper);
      transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1), background 180ms ease-out;
    }
    .btn:hover { background: var(--accent-deep); color: var(--paper); transform: translateY(-1px); }
    .btn-ghost {
      background: transparent;
      color: var(--ink);
      border: 1px solid var(--rule-strong);
    }
    .btn-ghost:hover { background: var(--surface); color: var(--ink); border-color: var(--ink); }
    .btn .arrow { font-size: 1.05em; transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1); }
    .btn:hover .arrow { transform: translateX(2px); }

    /* === STATS BAR ======================================================== */
    .stats {
      padding-block: 2rem;
      border-block: 1px solid var(--rule);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem 2rem;
    }
    @media (max-width: 800px) { .stats { grid-template-columns: repeat(2, 1fr); } }
    .stat-num {
      font-family: var(--display);
      font-weight: 800;
      font-size: clamp(1.8rem, 2.6vw, 2.6rem);
      letter-spacing: -0.03em;
      line-height: 1;
      color: var(--ink);
    }
    .stat-num .unit { color: var(--accent); font-weight: 700; }
    .stat-label {
      margin-top: 0.4rem;
      font-size: 0.82rem;
      color: var(--ink-soft);
      font-weight: 500;
      letter-spacing: 0.02em;
    }

    /* === ABOUT ============================================================ */
    .about {
      padding-block: clamp(4rem, 8vw, 7rem);
      display: grid;
      grid-template-columns: 0.85fr 1.4fr;
      gap: clamp(2rem, 5vw, 5rem);
      align-items: start;
    }
    @media (max-width: 850px) { .about { grid-template-columns: 1fr; } }
    .about-eyebrow { display: block; margin-bottom: 0.9rem; }
    .about .h2 { margin: 0; max-width: 14ch; }
    .about-body p {
      font-size: 1.08rem;
      line-height: 1.65;
      max-width: 60ch;
      margin: 0 0 1.3rem;
      color: var(--ink-soft);
    }
    .about-body p:first-of-type { color: var(--ink); font-size: 1.15rem; }
    .about-body strong {
      color: var(--ink);
      font-weight: 700;
      background: linear-gradient(to bottom, transparent 60%, var(--accent-soft) 60%);
      padding: 0 2px;
    }
    .signature {
      display: flex; align-items: center; gap: 1rem;
      margin-top: 2rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--rule);
    }
    .signature-name { font-family: var(--display); font-weight: 700; color: var(--ink); }
    .signature-role { color: var(--ink-faded); font-size: 0.9rem; }

    /* === SERVICES ========================================================= */
    .services {
      padding-block: clamp(4rem, 8vw, 7rem);
      border-top: 1px solid var(--rule);
    }
    .services-head { margin-bottom: 3rem; }
    .services-head .eyebrow { display: block; margin-bottom: 0.9rem; }
    .services-head .h2 { margin: 0; max-width: 22ch; }
    .services-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.25rem;
    }
    @media (max-width: 800px) { .services-grid { grid-template-columns: 1fr; } }
    .service-card {
      padding: 2rem 1.8rem 2.2rem;
      background: var(--surface);
      border: 1px solid var(--rule);
      border-radius: 14px;
      display: flex;
      flex-direction: column;
      gap: 0.9rem;
      transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease-out, background 220ms ease-out;
    }
    .service-card:hover { transform: translateY(-3px); border-color: var(--accent); background: var(--paper); }
    .service-num {
      font-family: var(--display);
      font-weight: 800;
      font-size: 0.78rem;
      color: var(--accent);
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }
    .service-name {
      font-family: var(--display);
      font-weight: 700;
      font-size: 1.7rem;
      line-height: 1.1;
      letter-spacing: -0.025em;
      margin: 0;
      color: var(--ink);
    }
    .service-desc {
      color: var(--ink-soft);
      font-size: 1rem;
      line-height: 1.6;
      margin: 0;
    }

    /* === WHY VELLUM ======================================================= */
    .vellum {
      padding-block: clamp(4rem, 8vw, 7rem);
      background: var(--ink);
      color: var(--paper);
      margin-inline: calc(var(--gutter-x) * -1);
      padding-inline: var(--gutter-x);
    }
    .vellum-inner {
      display: grid;
      grid-template-columns: 0.85fr 1.4fr;
      gap: clamp(2rem, 5vw, 5rem);
      align-items: start;
    }
    @media (max-width: 850px) { .vellum-inner { grid-template-columns: 1fr; } }
    .vellum .eyebrow { color: oklch(0.85 0.18 235); display: block; margin-bottom: 0.9rem; }
    .vellum .h2 { color: var(--paper); margin: 0; max-width: 14ch; }
    .vellum-body p {
      font-size: 1.18rem;
      line-height: 1.55;
      color: oklch(0.85 0.018 240);
      margin: 0 0 1.4rem;
      max-width: 56ch;
    }
    .vellum-body p:first-of-type { color: var(--paper); font-size: 1.32rem; line-height: 1.5; }
    .vellum-pull {
      font-family: var(--display);
      font-weight: 700;
      font-size: clamp(1.5rem, 2.4vw, 2rem);
      line-height: 1.25;
      letter-spacing: -0.02em;
      color: var(--paper);
      max-width: 30ch;
      margin-top: 2rem;
      padding-top: 1.5rem;
      border-top: 1px solid oklch(0.30 0.022 240);
    }

    /* === FOR REALTORS (deep) ============================================== */
    .for-realtors {
      padding-block: clamp(4rem, 8vw, 7rem);
      border-top: 1px solid var(--rule);
    }
    .for-realtors-inner {
      display: grid;
      grid-template-columns: 0.85fr 1.4fr;
      gap: clamp(2rem, 5vw, 5rem);
      align-items: start;
    }
    @media (max-width: 850px) { .for-realtors-inner { grid-template-columns: 1fr; } }
    .for-realtors .eyebrow { display: block; margin-bottom: 0.9rem; }
    .for-realtors .h2 { margin: 0; max-width: 18ch; }
    .for-realtors-body p {
      font-size: 1.1rem;
      line-height: 1.6;
      color: var(--ink-soft);
      margin: 0 0 1.3rem;
      max-width: 58ch;
    }
    .for-realtors-body p:first-of-type { color: var(--ink); font-size: 1.2rem; }
    .for-realtors-body strong { color: var(--ink); font-weight: 600; }
    .for-realtors-body .btn { margin-top: 0.6rem; }

    /* === PROCESS ========================================================== */
    .process {
      padding-block: clamp(4rem, 8vw, 7rem);
      border-top: 1px solid var(--rule);
      background: var(--surface);
      margin-inline: calc(var(--gutter-x) * -1);
      padding-inline: var(--gutter-x);
    }
    .process-head {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 2rem;
      align-items: end;
      margin-bottom: 3rem;
    }
    @media (max-width: 700px) { .process-head { grid-template-columns: 1fr; align-items: start; } }
    .process-head .eyebrow { display: block; margin-bottom: 0.9rem; }
    .process-head .h2 { margin: 0; max-width: 18ch; }
    .process-head .lede { margin-top: 0.8rem; max-width: 50ch; }
    .process-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.25rem;
      counter-reset: step;
    }
    @media (max-width: 950px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 600px) { .process-grid { grid-template-columns: 1fr; } }
    .process-step {
      padding: 1.8rem 1.6rem 2rem;
      background: var(--paper);
      border: 1px solid var(--rule);
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
      position: relative;
      transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease-out;
    }
    .process-step:hover { transform: translateY(-3px); border-color: var(--accent); }
    .process-step-num {
      font-family: var(--display);
      font-weight: 800;
      font-size: 0.78rem;
      letter-spacing: 0.18em;
      color: var(--accent);
      text-transform: uppercase;
    }
    .process-step-name {
      font-family: var(--display);
      font-weight: 700;
      font-size: 1.6rem;
      line-height: 1.1;
      letter-spacing: -0.025em;
      color: var(--ink);
    }
    .process-step-desc {
      color: var(--ink-soft);
      font-size: 0.96rem;
      line-height: 1.55;
      max-width: 32ch;
    }

    /* === REVIEWS ========================================================== */
    .reviews {
      padding-block: clamp(4rem, 8vw, 7rem);
      background: var(--surface);
      margin-inline: calc(var(--gutter-x) * -1);
      padding-inline: var(--gutter-x);
      border-block: 1px solid var(--rule);
    }
    .reviews-head {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 2rem;
      align-items: end;
      margin-bottom: 3rem;
    }
    @media (max-width: 700px) { .reviews-head { grid-template-columns: 1fr; align-items: start; } }
    .reviews-head .eyebrow { display: block; margin-bottom: 0.9rem; }
    .reviews-head .h2 { margin: 0; max-width: 18ch; }
    .reviews-source {
      font-size: 0.86rem;
      color: var(--ink-faded);
      font-weight: 500;
    }
    .review-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
    }
    @media (max-width: 950px) { .review-grid { grid-template-columns: 1fr; } }
    .review-card {
      background: var(--paper);
      border: 1px solid var(--rule);
      border-radius: 12px;
      padding: 1.8rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), border-color 200ms ease-out;
    }
    .review-card:hover { transform: translateY(-3px); border-color: var(--accent); }
    .stars {
      display: flex;
      gap: 2px;
      color: var(--accent);
      font-size: 1.1rem;
      letter-spacing: 0.05em;
    }
    .review-text {
      font-family: var(--display);
      font-weight: 500;
      font-size: 1.1rem;
      line-height: 1.45;
      color: var(--ink);
      letter-spacing: -0.01em;
    }
    .review-attr {
      margin-top: auto;
      padding-top: 1rem;
      border-top: 1px solid var(--rule);
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: 0.86rem;
    }
    .review-name { font-weight: 600; color: var(--ink); }
    .review-context { color: var(--ink-faded); }
    .review-placeholder-tag {
      position: absolute;
      top: 0.8rem; right: 0.8rem;
      font-size: 0.6rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--spark);
      font-weight: 700;
    }
    .review-card { position: relative; }

    /* === AUDIENCE SPLIT =================================================== */
    .audience {
      padding-block: clamp(4rem, 8vw, 7rem);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.25rem;
    }
    @media (max-width: 850px) { .audience { grid-template-columns: 1fr; } }
    .audience-card {
      padding: clamp(2rem, 3vw, 3rem);
      background: var(--paper);
      border: 1px solid var(--rule);
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease-out, background 220ms ease-out;
    }
    .audience-card:hover { transform: translateY(-3px); border-color: var(--accent); }
    .audience-card.dark {
      background: var(--ink);
      color: var(--paper);
      border-color: var(--ink);
    }
    .audience-card.dark .h3 { color: var(--paper); }
    .audience-card.dark p { color: oklch(0.85 0.018 235); }
    .audience-card.dark .arrow { color: oklch(0.78 0.10 235); }
    .audience-card.dark .eyebrow { color: oklch(0.80 0.14 235); }
    .audience-card.dark:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
    .audience-card .h3 { margin: 0.4rem 0 0; font-size: 1.6rem; }
    .audience-card p { margin: 0; max-width: 36ch; line-height: 1.55; color: var(--ink-soft); }
    .audience-card .arrow {
      margin-top: 0.6rem;
      font-weight: 600;
      color: var(--accent);
      font-size: 0.95rem;
    }

    /* === PROGRAMS ========================================================= */
    .programs {
      padding-block: clamp(4rem, 8vw, 7rem);
      border-top: 1px solid var(--rule);
    }
    .programs > .eyebrow { display: block; margin-bottom: 0.9rem; }
    .programs > .h2 { max-width: 22ch; margin: 0 0 0.8rem; }
    .programs > .lede { margin: 0 0 3rem; }

    .program-grid {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      border-top: 1px solid var(--rule);
    }
    @media (max-width: 700px) { .program-grid { grid-template-columns: 1fr; } }
    .program {
      padding: 1.6rem 1rem;
      border-bottom: 1px solid var(--rule);
      border-right: 1px solid var(--rule);
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 0.4rem 1.2rem;
      align-items: baseline;
    }
    .program:nth-child(2n) { border-right: 0; }
    @media (max-width: 700px) { .program { border-right: 0; } }
    .program-num {
      font-family: var(--display);
      font-weight: 700;
      font-size: 0.78rem;
      color: var(--accent);
      letter-spacing: 0.04em;
      grid-column: 1;
      grid-row: 1;
    }
    .program-name {
      font-family: var(--display);
      font-weight: 700;
      font-size: 1.25rem;
      line-height: 1.2;
      letter-spacing: -0.015em;
      color: var(--ink);
      grid-column: 2;
    }
    .program-desc {
      grid-column: 2;
      color: var(--ink-soft);
      font-size: 0.94rem;
      line-height: 1.55;
      max-width: 44ch;
    }

    /* === LEAD ============================================================= */
    .lead {
      padding-block: clamp(4rem, 8vw, 7rem);
      background: var(--ink);
      margin-inline: calc(var(--gutter-x) * -1);
      padding-inline: var(--gutter-x);
      color: var(--paper);
    }
    .lead-inner {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: clamp(2.5rem, 5vw, 5rem);
      align-items: start;
    }
    @media (max-width: 850px) { .lead-inner { grid-template-columns: 1fr; } }
    .lead .eyebrow { color: oklch(0.80 0.14 235); display: block; margin-bottom: 0.9rem; }
    .lead .h2 { color: var(--paper); margin: 0 0 1.4rem; max-width: 16ch; }
    .lead .h2 .accent { color: oklch(0.80 0.14 235); }
    .lead .lede { color: oklch(0.85 0.018 235); }
    .booking-card {
      margin-top: 2.4rem;
      padding: 1.4rem 1.5rem;
      background: oklch(0.24 0.022 235);
      border-radius: 10px;
      border: 1px solid oklch(0.30 0.022 235);
    }
    .booking-card-label {
      font-size: 0.74rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: oklch(0.70 0.018 235);
      font-weight: 600;
      display: block;
      margin-bottom: 0.4rem;
    }
    .booking-card a {
      color: oklch(0.85 0.14 235);
      font-weight: 600;
      font-size: 1.05rem;
      border-bottom: 1px solid oklch(0.55 0.18 235);
      padding-bottom: 1px;
    }

    form { display: flex; flex-direction: column; gap: 1.1rem; }
    .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
    @media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
    .field { display: flex; flex-direction: column; gap: 0.4rem; }
    .field label {
      font-family: var(--sans);
      font-size: 0.74rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: oklch(0.70 0.018 235);
      font-weight: 600;
    }
    .field input, .field select, .field textarea {
      font-family: var(--sans);
      font-size: 1rem;
      padding: 0.85rem 1rem;
      border: 1px solid oklch(0.30 0.022 235);
      background: oklch(0.22 0.022 235);
      color: var(--paper);
      border-radius: 8px;
    }
    .field input::placeholder, .field textarea::placeholder { color: oklch(0.55 0.018 235); }
    .field input:focus, .field select:focus, .field textarea:focus {
      outline: 2px solid var(--accent);
      outline-offset: 1px;
      border-color: var(--accent);
    }
    .field textarea { resize: vertical; min-height: 5.5rem; }
    .checkbox {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 0.7rem;
      align-items: start;
      font-size: 0.85rem;
      color: oklch(0.78 0.018 235);
      line-height: 1.5;
    }
    .checkbox input { margin-top: 0.25rem; accent-color: var(--accent); }
    .checkbox a { color: oklch(0.85 0.14 235); border-bottom: 1px solid oklch(0.50 0.18 235); }
    form .btn {
      align-self: flex-start;
      margin-top: 0.5rem;
      background: var(--paper);
      color: var(--ink);
    }
    form .btn:hover { background: oklch(0.85 0.14 235); color: var(--ink); }

    /* === COMPLIANCE FOOTER ================================================ */
    footer {
      padding-block: 3rem 4rem;
      font-size: 0.86rem;
      color: var(--ink-soft);
      line-height: 1.55;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 2rem 3rem;
      align-items: start;
      margin-bottom: 2rem;
    }
    @media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; } }
    .ehl { width: 64px; height: auto; display: block; }
    .compliance-text strong { color: var(--ink); display: block; margin-bottom: 0.4rem; }
    .compliance-disclaimer {
      font-size: 0.78rem;
      color: var(--ink-faded);
      max-width: 70ch;
      margin: 1.5rem 0 0;
    }
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding-top: 1.5rem;
      border-top: 1px solid var(--rule);
      font-size: 0.78rem;
      color: var(--ink-faded);
    }
    .vellum-badge img { width: 110px; }

    /* === MOCKUP NOTICE ==================================================== */
    .notice {
      position: fixed; top: 12px; right: 12px;
      background: var(--accent); color: var(--paper);
      font-family: var(--sans); font-size: 0.7rem;
      letter-spacing: 0.12em; text-transform: uppercase;
      padding: 0.5rem 0.95rem; z-index: 99;
      border-radius: 999px;
      font-weight: 700;
    }

    /* === EDITORIAL TYPE OVERRIDES =========================================== */
    /* Newsreader is a variable serif (opsz 6..72, wght 200..800). */
    /* Negative tracking is wrong on serif; tracking soften from the Inter baseline. */
    body { font-size: 17px; }
    .display { font-weight: 600; line-height: 1.0; letter-spacing: -0.018em; }
    /* Hero needs more line-height — Newsreader ascenders at large opsz can crowd otherwise */
    .hero .display { line-height: 1.05; }
    .h2 { font-weight: 600; line-height: 1.1; letter-spacing: -0.012em; }
    .h3 { font-weight: 600; line-height: 1.25; letter-spacing: -0.005em; }
    .mark { font-weight: 700; line-height: 1.0; letter-spacing: -0.012em; }
    .stat-num { font-weight: 600; letter-spacing: -0.005em; font-feature-settings: "lnum" 1, "ss01" 1; }
    .service-name { font-weight: 600; line-height: 1.15; letter-spacing: -0.008em; }
    .process-step-name { font-weight: 600; line-height: 1.15; letter-spacing: -0.008em; }
    .signature-name { font-weight: 600; }
    .program-name { font-weight: 600; letter-spacing: -0.005em; }
    /* Pull-quote and review feel — italic Newsreader works well */
    .review-text { font-weight: 400; font-size: 1.18rem; line-height: 1.5; letter-spacing: 0; font-style: italic; }
    .vellum-pull { font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; font-style: italic; }
    /* Sans label rails — uppercase trackers stay on Lato, not Newsreader */
    .service-num, .process-step-num, .program-num { font-family: var(--sans); font-weight: 700; letter-spacing: 0.18em; }
    /* Lato weight fallback: ships 400/700/900 only — remap missing 500/600 */
    .nav, .stat-label, .signature-role, .review-context, .mark-meta, .reviews-source { font-weight: 400; }
    .eyebrow, .field label, .booking-card-label, .header-cta, .review-name, .btn, .nav-signin, .photo-tag { font-weight: 700; }

    /* === LAYOUT C: PROCESS PROSE (HYBRID) =================================== */
    /* Services kept as 4-up cards (the comparison-shopping case). */
    /* Process becomes a vertical numbered prose list — confident, paged-magazine */
    /* rhythm rather than a SaaS onboarding flow. */
    .process-prose {
      list-style: none;
      padding: 0;
      margin: 1.5rem 0 0;
      display: flex;
      flex-direction: column;
    }
    .process-step-prose {
      display: grid;
      grid-template-columns: 5rem 1fr;
      gap: clamp(1rem, 2.5vw, 2rem);
      padding-block: 2rem;
      border-top: 1px solid var(--rule);
      align-items: baseline;
    }
    .process-step-prose:last-child { border-bottom: 1px solid var(--rule); }
    .process-step-prose-num {
      font-family: var(--display);
      font-weight: 600;
      font-size: clamp(2.4rem, 4vw, 3.4rem);
      line-height: 1;
      color: var(--accent);
      letter-spacing: -0.01em;

      font-feature-settings: "lnum" 1;
    }
    .process-step-prose-body { display: flex; flex-direction: column; gap: 0.5rem; }
    .process-step-prose-title {
      font-family: var(--display);
      font-weight: 600;
      font-size: 1.4rem;
      line-height: 1.15;
      letter-spacing: -0.01em;
      color: var(--ink);
      margin: 0;

    }
    .process-step-prose-desc {
      color: var(--ink-soft);
      font-size: 1.05rem;
      line-height: 1.6;
      max-width: 60ch;
      margin: 0;
    }
    @media (max-width: 600px) {
      .process-step-prose { grid-template-columns: 1fr; gap: 0.75rem; }
    }

    /* === REVIEWS WIDGET (Trustindex.io) ===================================== */
    /* The widget renders its own rating header + carousel as one unit. */
    /* Min-height prevents layout shift while the widget script async-loads. */
    .reviews-widget { min-height: 320px; }

    /* === FORM 10DLC DISCLOSURE STYLING ====================================== */
    /* Mirrors Vellum's wpforms field-description structure for SMS A2P consent. */
    .form-disclosure {
      font-size: 0.78rem;
      line-height: 1.55;
      color: oklch(0.70 0.018 235);
      margin: 0;
    }
    .form-policy { font-size: 0.88rem; margin: 0.2rem 0 0; }
    .form-policy a {
      color: oklch(0.85 0.14 235);
      border-bottom: 1px solid oklch(0.50 0.18 235);
      font-weight: 600;
      padding-bottom: 1px;
    }

    /* === SUBPAGE NAV (active link on legal/contact pages) ================= */
    .nav a.is-active { color: var(--ink); }

    /* === LEGAL / DOC PAGES ================================================ */
    .legal {
      padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 8vw, 7rem);
      max-width: 78ch;
    }
    .legal .eyebrow { display: block; margin-bottom: 0.9rem; }
    .legal h1 {
      font-family: var(--display);
      font-weight: 600;
      font-size: clamp(2.2rem, 4.5vw, 3.2rem);
      line-height: 1.04;
      letter-spacing: -0.018em;
      color: var(--ink);
      margin: 0 0 1rem;
    }
    .legal .legal-updated {
      font-size: 0.82rem;
      letter-spacing: 0.04em;
      color: var(--ink-faded);
      margin: 0 0 2.2rem;
    }
    .legal .legal-intro {
      font-size: 1.12rem;
      line-height: 1.65;
      color: var(--ink-soft);
      margin: 0 0 2.4rem;
    }
    .legal h2 {
      font-family: var(--display);
      font-weight: 600;
      font-size: 1.4rem;
      line-height: 1.2;
      letter-spacing: -0.01em;
      color: var(--ink);
      margin: 2.6rem 0 0.8rem;
    }
    .legal p {
      color: var(--ink-soft);
      line-height: 1.66;
      margin: 0 0 1.1rem;
    }
    .legal ul {
      color: var(--ink-soft);
      line-height: 1.66;
      margin: 0 0 1.2rem;
      padding-left: 1.25rem;
    }
    .legal li { margin-bottom: 0.45rem; }
    .legal strong { color: var(--ink); font-weight: 700; }
    .legal a {
      color: var(--accent);
      border-bottom: 1px solid currentColor;
      padding-bottom: 1px;
    }
    .legal a:hover { color: var(--accent-deep); }

    /* === CONTACT PAGE ===================================================== */
    /* Reuses the dark .lead form treatment as the page's primary content. */
    .contact-lead { margin-top: 0; }

    /* Inline form status (AJAX submit) — sits inside the dark .lead section. */
    .form-status {
      font-size: 0.9rem;
      line-height: 1.5;
      margin: 0.2rem 0 0;
      color: oklch(0.82 0.018 235);
    }
    .form-status[hidden] { display: none; }
    .form-status.is-error { color: oklch(0.74 0.16 25); }
    .form-success {
      background: oklch(0.24 0.022 235);
      border: 1px solid oklch(0.45 0.10 150);
      border-radius: 10px;
      padding: 1.4rem 1.5rem;
    }
    .form-success h3 {
      font-family: var(--display);
      font-weight: 600;
      font-size: 1.3rem;
      line-height: 1.2;
      letter-spacing: -0.01em;
      margin: 0 0 0.4rem;
      color: var(--paper);
    }
    .form-success p {
      margin: 0;
      font-size: 0.95rem;
      line-height: 1.55;
      color: oklch(0.82 0.018 235);
    }