:root {
    --paper: #faf7f2;
    --paper-deep: #f1ebe1;
    --ink: #1c1917;
    --ink-soft: #57534e;
    --ink-faint: #a8a29e;
    --green: #1e5e46;
    --green-soft: #2d7258;
    --green-pale: #e9f0ec;
    --line: #e2dbcf;
    /* Aurora headline inks — CPFG greens + gold. Every one is deliberately
       darker than --paper and lighter than --ink; see .aurora for why. */
    --aur-1: #1e5e46;  /* editorial deep green */
    --aur-2: #286c36;  /* CPFG forest green */
    --aur-3: #8f8340;  /* CPFG gold, deepened to hold contrast on cream */
    --aur-4: #14483a;  /* deep pine */
    --header-h: 72px;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Outfit', sans-serif;
    background: var(--paper);
    color: var(--ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  ::selection { background: var(--green); color: var(--paper); }
  img { max-width: 100%; display: block; }

  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--ink); color: var(--paper);
    padding: 0.75rem 1.25rem; z-index: 100; border-radius: 0 0 8px 0;
  }
  .skip-link:focus { left: 0; }

  .serif { font-family: 'Fraunces', serif; }
  .wrap { max-width: 1400px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 4rem); }
  [id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

  /* ---------- Nav ---------- */
  header.site {
    position: sticky; top: 0; z-index: 50;
    background: rgba(250, 247, 242, 0.82);
    backdrop-filter: blur(16px) saturate(160%);
    border-bottom: 1px solid var(--line);
  }
  .nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.1rem clamp(1.25rem, 4vw, 4rem);
    max-width: 1400px; margin: 0 auto;
  }
  .nav-name {
    font-family: 'Fraunces', serif; font-size: 1.2rem; font-weight: 600;
    color: var(--ink); text-decoration: none; letter-spacing: -0.01em;
  }
  .nav-links { display: flex; gap: 2rem; align-items: center; list-style: none; }
  .nav-links > li { position: relative; }
  .nav-links a:not(.btn) {
    color: var(--ink-soft); text-decoration: none; font-size: 0.95rem; font-weight: 500;
    position: relative; padding: 0.25rem 0; display: inline-block;
  }
  .nav-links > li > a:not(.btn)::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%;
    background: var(--green); transform: scaleX(0); transform-origin: right;
    transition: transform 220ms var(--ease-out);
  }
  .nav-links a[aria-current="page"],
  .nav-links a[aria-current="true"] { color: var(--ink); }
  .nav-links > li > a[aria-current]::after { transform: scaleX(1); }
  @media (hover: hover) and (pointer: fine) {
    .nav-links a:not(.btn):hover { color: var(--ink); }
    .nav-links > li > a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }
  }

  /* Desktop dropdown.
     Opening is driven by [data-open], set by an explicit toggle button —
     hover alone is only a progressive enhancement. A hover-only menu leaves
     the sub-links unreachable on any device where hover doesn't apply
     (touch laptops, hybrids, pen input), which is exactly the failure mode
     this replaced. */
  .has-sub { display: inline-flex; align-items: center; gap: 0.15rem; }
  .has-sub > a::before {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1.1rem;
  }
  .sub-toggle {
    display: inline-grid; place-items: center;
    width: 1.5rem; height: 1.5rem; padding: 0;
    background: none; border: none; cursor: pointer; color: var(--ink-faint);
    border-radius: 999px;
    transition: color 200ms ease, background 200ms ease;
  }
  .sub-toggle svg { width: 10px; height: 10px; transition: transform 240ms var(--ease-out); }
  .has-sub[data-open="true"] .sub-toggle svg { transform: rotate(180deg); }
  @media (hover: hover) and (pointer: fine) {
    .sub-toggle:hover { color: var(--green); background: var(--green-pale); }
  }
  .sub-toggle:active { transform: scale(0.92); }
  /* NOTE: this class is `nav-sub`, never plain `sub`. The subpage <main> is
     `class="wrap sub"`, so a bare `.sub` selector matches it and absolutely
     positions + hides the entire page body. That is exactly what broke every
     subpage on desktop; the mobile block happened to override it, which is
     why only desktop was affected. Do not shorten this name. */
  .nav-sub {
    list-style: none; position: absolute; top: calc(100% + 1rem); left: -1rem;
    min-width: 13rem; background: var(--paper);
    border: 1px solid var(--line); border-radius: 3px;
    box-shadow: 0 22px 40px -26px rgba(60, 48, 30, 0.45);
    padding: 0.5rem; opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 200ms;
  }
  .nav-sub li a {
    display: block !important; padding: 0.55rem 0.75rem !important;
    border-radius: 2px; font-size: 0.92rem !important;
  }
  .nav-sub li a::after { display: none; }
  @media (hover: hover) and (pointer: fine) {
    .nav-sub li a:hover { background: var(--green-pale); color: var(--green); }
  }
  .has-sub[data-open="true"] > .nav-sub,
  .has-sub:focus-within > .nav-sub { opacity: 1; visibility: visible; transform: translateY(0); }
  @media (hover: hover) and (pointer: fine) {
    .has-sub:hover > .nav-sub { opacity: 1; visibility: visible; transform: translateY(0); }
  }

  .btn {
    display: inline-block; background: var(--green); color: var(--paper);
    text-decoration: none; font-weight: 500; font-size: 0.95rem;
    padding: 0.7rem 1.4rem; border-radius: 999px; border: none; cursor: pointer;
    transition: background 200ms ease, transform 160ms var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .btn:hover { background: var(--green-soft); }
  }
  .btn:active { transform: scale(0.97); }
  a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px;
  }
  .btn:focus-visible { border-radius: 999px; }

  /* Mobile toggle */
  .nav-toggle {
    display: none; background: none; border: 1px solid var(--line);
    border-radius: 999px; padding: 0.5rem 0.9rem; cursor: pointer;
    align-items: center; gap: 0.5rem; color: var(--ink);
    font: inherit; font-size: 0.88rem; font-weight: 500;
  }
  .nav-toggle .bars { display: grid; gap: 4px; width: 15px; }
  .nav-toggle .bars i {
    display: block; height: 1.5px; background: var(--ink); border-radius: 2px;
    transition: transform 240ms var(--ease-out), opacity 160ms ease;
  }
  .nav-toggle[aria-expanded="true"] .bars i:first-child { transform: translateY(2.75px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bars i:last-child { transform: translateY(-2.75px) rotate(-45deg); }

  /* ---------- Hero ---------- */
  .hero {
    display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 5rem);
    align-items: center; min-height: calc(100dvh - var(--header-h));
    padding-top: clamp(2rem, 6vh, 5rem); padding-bottom: clamp(3rem, 8vh, 6rem);
  }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--green); margin-bottom: 1.5rem;
  }
  .eyebrow::before { content: ""; width: 2rem; height: 1.5px; background: var(--green); }
  .hero h1 {
    font-family: 'Fraunces', serif; font-weight: 500;
    font-size: clamp(2.6rem, 5.2vw, 4.6rem);
    line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance;
  }
  .hero h1 em { font-style: italic; color: var(--green); }
  /* ---------- Aurora headline ----------
     Blurred CPFG-coloured blobs drift behind the headline. `mix-blend-mode:
     lighten` is the whole trick: each blob is darker than the cream page, so
     the paper is left untouched, and lighter than the ink glyphs, so it only
     tints the letterforms. The familiar version of this effect runs on black
     with `darken`; on a light editorial page it has to be inverted. */
  .aurora-type {
    position: relative;
    isolation: isolate;      /* blending stays inside the headline */
    overflow: hidden;
    background: var(--paper);
    padding-bottom: 0.1em;   /* italic descenders clear the overflow clip */
    /* Hug the text. A block-level h1 spans the whole container, so the clipped
       blob field renders as a wide rectangle floating past the end of a short
       headline — very visible on subpages like "Insurance". */
    width: fit-content;
    max-width: 100%;
  }
  /* Beats `.hero h1 em`, which hard-codes green — the aurora owns colour now,
     so the italic carries emphasis by form alone. */
  .hero h1.aurora-type em, .aurora-type em { color: inherit; }
  .aurora {
    position: absolute; inset: 0; z-index: 2;
    mix-blend-mode: lighten;
    pointer-events: none;
  }
  .aurora__item {
    display: block; position: absolute;
    width: 60%; height: 300%;
    background-color: var(--aur-1);
    border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    filter: blur(1.25rem);
    /* No per-blob blend: `overlay` against the transparent aurora layer can
       push pixels lighter than the paper, which then survives the container's
       `lighten` and prints a faint rectangle over the page. Plain blobs stay
       darker than paper by construction, so only the glyphs ever pick them up. */
  }
  /* Drift tempo. One knob for the whole effect: lower is faster, higher is
     calmer. The four blobs keep deliberately mismatched periods so the loop
     never visibly resets — scale this rather than editing them individually. */
  .aurora { --aur-speed: 1; }
  .aurora__item:nth-of-type(1) {
    top: -50%;
    animation: aurora-border calc(4s * var(--aur-speed)) ease-in-out infinite,
               aurora-1 calc(7s * var(--aur-speed)) ease-in-out infinite alternate;
  }
  .aurora__item:nth-of-type(2) {
    background-color: var(--aur-3); right: 0; top: 0;
    animation: aurora-border calc(4s * var(--aur-speed)) ease-in-out infinite,
               aurora-2 calc(7s * var(--aur-speed)) ease-in-out infinite alternate;
  }
  .aurora__item:nth-of-type(3) {
    background-color: var(--aur-2); left: 0; bottom: 0;
    animation: aurora-border calc(4s * var(--aur-speed)) ease-in-out infinite,
               aurora-3 calc(5s * var(--aur-speed)) ease-in-out infinite alternate;
  }
  .aurora__item:nth-of-type(4) {
    background-color: var(--aur-4); right: 0; bottom: -50%;
    animation: aurora-border calc(4s * var(--aur-speed)) ease-in-out infinite,
               aurora-4 calc(14s * var(--aur-speed)) ease-in-out infinite alternate;
  }
  @keyframes aurora-1 {
    0%   { top: 0;    right: 0; }
    50%  { top: 100%; right: 75%; }
    75%  { top: 100%; right: 25%; }
    100% { top: 0;    right: 0; }
  }
  @keyframes aurora-2 {
    0%   { top: -50%; left: 0; }
    60%  { top: 100%; left: 75%; }
    85%  { top: 100%; left: 25%; }
    100% { top: -50%; left: 0; }
  }
  @keyframes aurora-3 {
    0%   { bottom: 0;    left: 0; }
    40%  { bottom: 100%; left: 75%; }
    65%  { bottom: 40%;  left: 50%; }
    100% { bottom: 0;    left: 0; }
  }
  @keyframes aurora-4 {
    0%   { bottom: -50%; right: 0; }
    50%  { bottom: 0;    right: 40%; }
    90%  { bottom: 50%;  right: 25%; }
    100% { bottom: -50%; right: 0; }
  }
  @keyframes aurora-border {
    0%   { border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%; }
    25%  { border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%; }
    50%  { border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%; }
    75%  { border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%; }
    100% { border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%; }
  }

  .hero p.lede {
    margin-top: 1.75rem; font-size: 1.1rem; color: var(--ink-soft);
    max-width: 46ch; line-height: 1.65;
  }
  .hero-actions { margin-top: 2.5rem; display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
  .text-link {
    color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.98rem;
    border-bottom: 1.5px solid var(--ink-faint); padding-bottom: 2px;
    transition: border-color 200ms ease, color 200ms ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .text-link:hover { color: var(--green); border-color: var(--green); }
  }
  .hero-figure { position: relative; }
  .hero-figure .frame {
    position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem;
    border: 1.5px solid var(--green); border-radius: 2px; z-index: 0;
  }
  .hero-figure img {
    position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 4 / 5;
    object-fit: cover; border-radius: 2px;
  }
  /* Caption sits inside the offset frame, past its left rule (1.25rem). */
  .hero-figure figcaption {
    position: relative; z-index: 1; margin-top: 2.25rem; font-size: 0.85rem;
    padding: 0 0.5rem 0.25rem 2.5rem;
    color: var(--ink-faint);
  }
  /* Hero placeholder — the same designed panel as .portrait-media.is-placeholder
     on the subpages, scaled to the hero's 4:5 frame. Deliberately not a stock
     photo: nothing on this site presents a stranger as Chase, and an obviously
     empty slot keeps the office shoot on the schedule instead of quietly
     looking finished. Swap instructions are in the markup. */
  .hero-placeholder {
    position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5;
    border-radius: 2px; display: grid; place-items: center; text-align: center;
    background:
      radial-gradient(120% 90% at 28% 18%, rgba(30, 94, 70, 0.18), transparent 62%),
      radial-gradient(100% 80% at 82% 88%, rgba(143, 131, 64, 0.20), transparent 58%),
      var(--paper-deep);
  }
  .hero-mono {
    font-family: 'Fraunces', serif; font-weight: 500; line-height: 1;
    font-size: clamp(3.5rem, 8vw, 6rem); color: var(--green); opacity: 0.3;
  }
  .hero-tag {
    position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.6rem;
    font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-faint); line-height: 1.6;
  }

  /* ---------- Trust bar ---------- */
  .trustbar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper-deep); }
  .trustbar .inner {
    display: grid; grid-template-columns: repeat(3, 1fr);
    max-width: 1400px; margin: 0 auto;
  }
  .trust-item { padding: 2rem clamp(1.25rem, 3vw, 3rem); border-left: 1px solid var(--line); }
  .trust-item:first-child { border-left: none; }
  .trust-item .num {
    font-family: 'Fraunces', serif; font-size: 2.2rem; font-weight: 500;
    letter-spacing: -0.02em; color: var(--ink);
  }
  .trust-item .cap { margin-top: 0.35rem; font-size: 0.9rem; color: var(--ink-soft); max-width: 24ch; }

  /* ---------- Sections ---------- */
  section { padding: clamp(4rem, 10vh, 7.5rem) 0; }
  .section-head { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; margin-bottom: 3.5rem; }
  .section-head h2 {
    font-family: 'Fraunces', serif; font-weight: 500;
    font-size: clamp(1.9rem, 3.2vw, 2.8rem); letter-spacing: -0.02em; line-height: 1.1;
  }
  .section-head p { color: var(--ink-soft); max-width: 55ch; align-self: end; }
  .section-foot { margin-top: 2.5rem; }

  /* Services — numbered editorial rows */
  .service-row {
    display: grid; grid-template-columns: 5rem 1fr 1.5fr auto; gap: 2rem;
    align-items: baseline; padding: 2.25rem 0; border-top: 1px solid var(--line);
    text-decoration: none; color: inherit; position: relative;
  }
  .service-row:last-of-type { border-bottom: 1px solid var(--line); }
  .service-row .idx {
    font-family: 'Fraunces', serif; font-size: 1rem; color: var(--ink-faint); font-style: italic;
  }
  .service-row h3 {
    font-family: 'Fraunces', serif; font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: 500; letter-spacing: -0.01em;
    transition: color 200ms ease;
  }
  .service-row ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
  .service-row ul li { font-size: 0.92rem; color: var(--ink-soft); }
  .service-row ul li::before { content: "· "; color: var(--green); }
  .service-row .go {
    font-size: 1.3rem; color: var(--ink-faint);
    transition: transform 220ms var(--ease-out), color 200ms ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .service-row:hover h3 { color: var(--green); }
    .service-row:hover .go { transform: translateX(6px); color: var(--green); }
  }
  .service-row:active h3 { color: var(--green-soft); }

  /* ---------- CPFG band ---------- */
  .cpfg { background: var(--ink); color: var(--paper); }
  .cpfg .grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
  .cpfg blockquote {
    font-family: 'Fraunces', serif; font-weight: 400; font-style: italic;
    font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.3; letter-spacing: -0.01em;
    text-wrap: balance;
  }
  .cpfg blockquote strong { color: #8fc7ae; font-style: normal; font-weight: 500; }
  .cpfg .detail p { color: #d6d1c7; font-size: 0.98rem; line-height: 1.7; }
  .cpfg .detail p + p { margin-top: 1rem; }
  .cpfg .since {
    margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(250,247,242,0.18);
    display: flex; gap: 3rem;
  }
  .cpfg .since div .n { font-family: 'Fraunces', serif; font-size: 1.8rem; }
  .cpfg .since div .c { font-size: 0.82rem; color: #a8a29e; margin-top: 0.15rem; }
  .cpfg a { color: #8fc7ae; }

  /* ---------- About ---------- */
  .about .grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2.5rem, 6vw, 6rem); }
  .about img {
    width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 2px;
    margin-top: 3rem;
  }
  .about h2 {
    font-family: 'Fraunces', serif; font-weight: 500;
    font-size: clamp(1.9rem, 3.2vw, 2.8rem); letter-spacing: -0.02em; margin-bottom: 1.75rem;
  }
  .about p { color: var(--ink-soft); line-height: 1.7; max-width: 60ch; }
  .about p + p { margin-top: 1.25rem; }
  .about .aside-note {
    margin-top: 2rem; padding: 1.5rem; background: var(--paper-deep);
    border-left: 2px solid var(--green); font-size: 0.95rem; color: var(--ink-soft);
  }

  /* ---------- Panel list (segments / service index) ---------- */
  .panel-list { display: grid; }
  .panel-list > * {
    display: grid; grid-template-columns: 1fr 1.8fr; gap: clamp(1.5rem, 4vw, 4rem);
    padding: 2.25rem 0; border-top: 1px solid var(--line);
    text-decoration: none; color: inherit;
  }
  .panel-list > *:last-child { border-bottom: 1px solid var(--line); }
  .panel-list h3 {
    font-family: 'Fraunces', serif; font-weight: 500;
    font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: -0.01em;
    transition: color 200ms ease;
  }
  .panel-list p { color: var(--ink-soft); line-height: 1.7; max-width: 62ch; }
  .panel-list .more {
    display: inline-block; margin-top: 1rem; font-size: 0.92rem; font-weight: 500;
    color: var(--green); border-bottom: 1.5px solid var(--green); padding-bottom: 2px;
  }
  @media (hover: hover) and (pointer: fine) {
    a.panel:hover h3 { color: var(--green); }
  }

  /* ---------- Testimonials ---------- */
  .quotes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
  .quote {
    background: var(--paper-deep); border-radius: 2px; padding: clamp(1.75rem, 3vw, 2.75rem);
    box-shadow: 0 18px 36px -24px rgba(60, 48, 30, 0.25);
  }
  .quote:nth-child(2) { margin-top: 3rem; }
  .quote p {
    font-family: 'Fraunces', serif; font-size: 1.15rem; line-height: 1.55; font-weight: 400;
  }
  .quote p::before { content: "\201C"; color: var(--green); }
  .quote p::after { content: "\201D"; color: var(--green); }
  .quote cite { display: block; margin-top: 1.5rem; font-style: normal; font-size: 0.9rem; color: var(--ink-soft); font-weight: 500; }

  /* ---------- Contact ---------- */
  .contact { background: var(--paper-deep); border-top: 1px solid var(--line); }
  .contact .grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(2.5rem, 6vw, 6rem); }
  .contact h2 {
    font-family: 'Fraunces', serif; font-weight: 500;
    font-size: clamp(2.2rem, 4vw, 3.4rem); letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance;
  }
  .contact .sub { margin-top: 1.25rem; color: var(--ink-soft); max-width: 46ch; }
  .contact .cta-row { margin-top: 2.25rem; display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
  .contact dl { display: grid; gap: 1.4rem; align-content: start; }
  .contact dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); font-weight: 600; }
  .contact dd { margin-top: 0.25rem; font-size: 1rem; color: var(--ink); }
  .contact dd a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--ink-faint); }
  @media (hover: hover) and (pointer: fine) {
    .contact dd a:hover { color: var(--green); border-color: var(--green); }
  }

  /* ---------- Footer ---------- */
  .site-foot { border-top: 1px solid var(--line); background: var(--paper); }
  .foot-grid {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: clamp(2rem, 4vw, 4rem);
    padding-top: clamp(3rem, 6vh, 4.5rem); padding-bottom: clamp(2.5rem, 5vh, 3.5rem);
  }
  .foot-brand p { margin: 1rem 0 1.75rem; font-size: 0.9rem; color: var(--ink-soft); max-width: 34ch; line-height: 1.65; }
  .site-foot h3 {
    font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--ink-faint); font-weight: 600; margin-bottom: 1.1rem;
  }
  .site-foot ul { list-style: none; display: grid; gap: 0.65rem; }
  .site-foot ul a, .foot-contact a {
    color: var(--ink-soft); text-decoration: none; font-size: 0.92rem;
    transition: color 200ms ease;
  }
  .site-foot ul a:hover, .foot-contact a:hover { color: var(--green); }
  .foot-contact address { font-style: normal; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.7; }
  .foot-contact address + address { margin-top: 0.9rem; }
  .foot-legal {
    border-top: 1px solid var(--line); padding-top: 1.5rem; padding-bottom: 1.75rem;
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    font-size: 0.82rem; color: var(--ink-faint);
  }
  .foot-legal a { color: var(--ink-soft); text-decoration: none; }
  .foot-legal a:hover { color: var(--green); }

  /* ---------- Reveal motion ---------- */
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
  .reveal.in { opacity: 1; transform: translateY(0); }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { transform: none; transition: opacity 250ms ease; }
    .service-row .go, .btn, .nav-links a::after, .nav-toggle .bars i, .nav-sub { transition: none; }
    /* Drop the drifting blobs entirely — headline falls back to solid ink. */
    .aurora { display: none; }
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 1000px) {
    .foot-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; min-height: auto; }
    .section-head { grid-template-columns: 1fr; }
    .cpfg .grid, .about .grid, .contact .grid { grid-template-columns: 1fr; }
    .quotes { grid-template-columns: 1fr; }
    .quote:nth-child(2) { margin-top: 0; }
    .service-row { grid-template-columns: 3rem 1fr auto; }
    .service-row ul { grid-column: 2 / -1; }
    .panel-list > * { grid-template-columns: 1fr; gap: 0.9rem; }
  }

  /* Mobile drawer */
  @media (max-width: 940px) {
    .nav-toggle { display: inline-flex; }
    .nav-links {
      position: fixed; inset: var(--header-h) 0 auto 0;
      flex-direction: column; align-items: stretch; gap: 0;
      background: var(--paper); border-bottom: 1px solid var(--line);
      padding: 0.5rem clamp(1.25rem, 4vw, 4rem) 1.5rem;
      max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
      transform: translateY(-8px); opacity: 0; visibility: hidden;
      transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 240ms;
      box-shadow: 0 24px 40px -30px rgba(60, 48, 30, 0.5);
    }
    .nav-links.open { transform: translateY(0); opacity: 1; visibility: visible; }
    .nav-links > li { border-top: 1px solid var(--line); display: block; }
    .nav-links > li:first-child { border-top: none; }
    /* Sub-items are listed inline in the drawer, so the disclosure toggle
       has nothing left to disclose. */
    .sub-toggle { display: none; }
    .nav-links > li > a:not(.btn) { padding: 0.95rem 0; font-size: 1.05rem; width: 100%; }
    .nav-links > li > a:not(.btn)::after { display: none; }
    /* `visibility: inherit` (not `visible`) is load-bearing: the closed drawer
       hides itself with visibility:hidden, and a descendant setting
       `visibility: visible` would re-expose these links as an invisible,
       still-clickable overlay sitting across the top of the page. */
    .nav-sub {
      position: static; opacity: 1; visibility: inherit; transform: none;
      box-shadow: none; border: none; background: none; padding: 0 0 0.9rem 0.9rem;
      min-width: 0; border-left: 1.5px solid var(--line);
    }
    .nav-sub li a { padding: 0.45rem 0 !important; color: var(--ink-soft) !important; }
    .nav-links > li:last-child { border-top: none; padding-top: 1.25rem; }
    .nav-links .btn { display: block; text-align: center; }
  }
  @media (max-width: 767px) {
    .trustbar .inner { grid-template-columns: 1fr; }
    .trust-item { border-left: none; border-top: 1px solid var(--line); }
    .trust-item:first-child { border-top: none; }
    .hero-figure .frame { display: none; }
    .hero-figure figcaption { padding-left: 0; margin-top: 0.9rem; }
    section { padding: 3.5rem 0; }
    .foot-grid { grid-template-columns: 1fr; }
  }

/* ---------- Subpages ---------- */
main.sub { padding-bottom: clamp(3rem, 7vh, 5rem); }
.sub-hero { padding: clamp(3rem, 8vh, 5.5rem) 0 0; }
.crumb { font-size: 0.82rem; color: var(--ink-faint); margin-bottom: 1.5rem; }
.crumb a { color: var(--ink-soft); text-decoration: none; }
.crumb a:hover { color: var(--green); }
.crumb span { margin: 0 0.35rem; }
.sub-hero h1 { font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: -0.02em; line-height: 1.05; }
.sub-lede { margin-top: 1.25rem; font-size: 1.1rem; color: var(--ink-soft); max-width: 52ch; line-height: 1.65; }
.svc-switch { margin-top: 2.25rem; display: flex; gap: 1.75rem; border-bottom: 1px solid var(--line); }
.svc-switch a { padding: 0 0 0.85rem; color: var(--ink-soft); text-decoration: none; font-size: 0.95rem; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.svc-switch a[aria-current="page"] { color: var(--green); border-color: var(--green); }
@media (hover: hover) and (pointer: fine) { .svc-switch a:hover { color: var(--ink); } }
/* Measure. Prose stays at a readable ~68ch, but figures (card grids, callout
   rows, step lists) use the full column. Capping the whole section at 70ch —
   as this did — left 594px of dead space on a 1385px screen and squeezed the
   card grids into a narrow ribbon down the left edge. Narrow text against wide
   figures is the rhythm this page wants. */
main.sub { max-width: 1120px; }
.sub-section { padding: clamp(2.75rem, 6vh, 4.5rem) 0 0; max-width: none; }
/* .faq and .big-quote are deliberately absent — they carry their own
   two-column layouts and cap their body text internally. */
.sub-section > h2,
.sub-section > p,
.sub-section > .pull,
.sub-section > .kv { max-width: 68ch; }
.sub-section h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(1.6rem, 2.8vw, 2.2rem); letter-spacing: -0.015em; margin-bottom: 1.25rem; }
.sub-section > p { color: var(--ink-soft); line-height: 1.7; margin-bottom: 1rem; }
.sub-section .panel-list { max-width: none; }
.sub-section .panel-list > *:first-child { border-top: none; padding-top: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: 1.75rem 0; }
.mini-card { background: var(--paper-deep); border-radius: 2px; padding: 1.5rem 1.6rem; border-top: 2px solid var(--green); }
.mini-card h3 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.15rem; margin-bottom: 0.75rem; }
.mini-card ul { list-style: none; }
.mini-card li { padding: 0.4rem 0; font-size: 0.93rem; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.mini-card li:last-child { border-bottom: none; }
.steps { list-style: none; counter-reset: step; margin: 1.75rem 0; display: grid; gap: 0; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 3.25rem 1fr; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: 'Fraunces', serif; font-style: italic; color: var(--green); font-size: 1.1rem; }
.steps h3 { font-size: 1rem; font-weight: 600; }
.steps p { margin-top: 0.25rem; font-size: 0.92rem; color: var(--ink-soft); }
.callouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 1.75rem 0; }
.callout { border-top: 1px solid var(--line); padding-top: 1rem; }
.callout .big { font-family: 'Fraunces', serif; font-size: 2rem; color: var(--green); }
.callout h3 { font-size: 1rem; font-weight: 600; }
.callout p { margin-top: 0.4rem; font-size: 0.88rem; color: var(--ink-soft); }
.big-quote { background: var(--paper-deep); border-radius: 2px; padding: 1.75rem 2rem; margin-bottom: 1.5rem; box-shadow: 0 18px 36px -24px rgba(60,48,30,0.25); }
.big-quote p { font-family: 'Fraunces', serif; font-size: 1.08rem; line-height: 1.6; }
.big-quote p::before { content: "\201C"; color: var(--green); }
.big-quote p::after { content: "\201D"; color: var(--green); }
.big-quote cite { display: block; margin-top: 1.1rem; font-style: normal; font-size: 0.88rem; color: var(--ink-soft); font-weight: 500; }
/* Question left, answer right — the same label/body rhythm as .panel-list.
   A page built only of 68ch text blocks leaves a third of the column empty. */
.faq {
  display: grid; grid-template-columns: 1fr 1.8fr; gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: 1.9rem 0; border-top: 1px solid var(--line);
}
.faq h3 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.2rem; margin-bottom: 0; }
.faq p { color: var(--ink-soft); line-height: 1.7; max-width: 62ch; }

/* Testimonials sit two-up, echoing the offset quote cards on the home page. */
.quotes-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start;
}
.quotes-grid .big-quote { margin-bottom: 0; }
.quotes-grid .big-quote:nth-child(2) { margin-top: 2.5rem; }
.kv { display: grid; gap: 1.4rem; }
.kv dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); font-weight: 600; }
.kv dd { margin-top: 0.25rem; color: var(--ink); }
.kv dd a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--ink-faint); }
.kv dd a:hover { color: var(--green); border-color: var(--green); }
.text-more { color: var(--green); text-decoration: none; border-bottom: 1.5px solid var(--green); padding-bottom: 2px; font-weight: 500; }
.cta-band { margin-top: clamp(3rem, 7vh, 5rem); background: var(--ink); color: var(--paper); border-radius: 2px; padding: clamp(2.25rem, 4vw, 3.5rem); }
.cta-band h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -0.015em; text-wrap: balance; }
.cta-band p { margin-top: 0.75rem; color: #d6d1c7; }
.cta-band > div { margin-top: 1.75rem; display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.cta-btn { display: inline-block; background: var(--green); color: var(--paper); text-decoration: none; font-weight: 500; padding: 0.7rem 1.4rem; border-radius: 999px; transition: background 200ms ease, transform 160ms var(--ease-out); }
.cta-btn:hover { background: var(--green-soft); }
.cta-btn:active { transform: scale(0.97); }
.cta-alt { color: #8fc7ae; text-decoration: none; border-bottom: 1px solid #8fc7ae; padding-bottom: 2px; }

/* ---------- Portrait ---------- */
.portrait { position: relative; margin: 0; --frame-off: 1rem; }
.portrait .frame {
  position: absolute; inset: var(--frame-off) calc(var(--frame-off) * -1) calc(var(--frame-off) * -1) var(--frame-off);
  border: 1.5px solid var(--green); border-radius: 2px; z-index: 0;
}
.portrait-media {
  position: relative; z-index: 1; aspect-ratio: 4 / 5; border-radius: 2px;
  overflow: hidden; display: grid; place-items: center;
}
.portrait-media img { width: 100%; height: 100%; object-fit: cover; }
/* Needs analysis embed */
.lda-embed-container { max-width: 56rem; }
iframe.lda-embed { display: block; width: 1px; min-width: 100%; min-height: 640px; border: none; }
iframe.lda-embed[hidden] { display: none; }
.lda-note { padding: 2rem; border: 1px dashed var(--line); border-radius: 2px; background: var(--paper-deep); color: var(--ink-soft); line-height: 1.6; }
.lda-credit { margin-top: 1.25rem; font-size: 0.85rem; color: var(--ink-faint); line-height: 1.6; max-width: 60ch; }
/* Contact form */
.contact-form { position: relative; display: grid; gap: 1.15rem; max-width: 42rem; margin-top: 1.75rem; }
.contact-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.field { display: grid; gap: 0.45rem; align-content: start; }
.field label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); font-weight: 600; }
.field label .opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-faint); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--ink); background: #fffdf9; width: 100%;
  border: 1px solid var(--line); border-radius: 2px; padding: 0.75rem 0.85rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-pale);
}
.field .hint { font-size: 0.82rem; color: var(--ink-faint); line-height: 1.5; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; margin-top: 0.3rem; }
.contact-form button.cta-btn { border: 0; cursor: pointer; font: inherit; font-weight: 500; }
.contact-form button[disabled] { opacity: 0.6; cursor: progress; }
.form-privacy { font-size: 0.82rem; color: var(--ink-faint); max-width: 40ch; line-height: 1.5; }
.form-status { font-size: 0.95rem; min-height: 1.5em; }
.form-status.ok { color: var(--green); }
.form-status.error { color: #9a3412; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 767px) { .contact-form .row2 { grid-template-columns: 1fr; } }
/* Placeholder field — reads as a deliberate panel, not a broken image. */
.portrait-media.is-placeholder {
  background:
    radial-gradient(120% 90% at 28% 18%, rgba(30, 94, 70, 0.18), transparent 62%),
    radial-gradient(100% 80% at 82% 88%, rgba(143, 131, 64, 0.20), transparent 58%),
    var(--paper-deep);
}
.portrait-mono {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: clamp(2.8rem, 6vw, 4.5rem); color: var(--green); opacity: 0.3;
}
.portrait-tag {
  position: absolute; left: 0; right: 0; bottom: 1.1rem; text-align: center;
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
}
/* Caption sits inside the offset frame: indented past the frame's left
   rule, with room before its bottom rule. */
.portrait figcaption {
  position: relative; z-index: 1; margin-top: 1.9rem;
  padding: 0 0.5rem 0.35rem calc(var(--frame-off) + 1rem);
  font-size: 0.85rem; color: var(--ink-faint); line-height: 1.6;
}
.portrait figcaption strong {
  display: block; font-family: 'Fraunces', serif; font-weight: 500;
  font-size: 1rem; color: var(--ink); margin-bottom: 0.2rem;
}

/* ---------- Split layout ---------- */
.sub-section.wide { max-width: none; }
.split { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.split-body { max-width: 62ch; }
.split-body > p { color: var(--ink-soft); line-height: 1.7; margin-bottom: 1rem; }

/* ---------- Editorial section numbering ----------
   Applied only on pages with several sections (see the "numbered" flag in
   buildSubpage) — a lone "No. 01" on a short page reads like an error. */
main.numbered { counter-reset: sec; }
main.numbered .sub-section { counter-increment: sec; }
main.numbered .sub-section > h2::before {
  content: "No. " counter(sec, decimal-leading-zero);
  display: block; font-family: 'Fraunces', serif; font-style: italic;
  font-size: 0.85rem; color: var(--ink-faint); margin-bottom: 0.55rem;
}

/* ---------- Lead paragraph with drop cap ---------- */
.lead { font-size: 1.06rem; }
.lead::first-letter {
  float: left; font-family: 'Fraunces', serif; font-weight: 500;
  font-size: 3.4em; line-height: 0.82; padding: 0.06em 0.12em 0 0; color: var(--green);
}

/* ---------- Pull quote ---------- */
.pull {
  margin: 2.25rem 0; padding-left: 1.6rem; border-left: 2px solid var(--green);
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 400;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem); line-height: 1.4;
  letter-spacing: -0.01em; color: var(--ink); text-wrap: balance;
}

/* ---------- Jump chips ---------- */
.jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.jump a {
  font-size: 0.85rem; color: var(--ink-soft); text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 0.42rem 0.95rem;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .jump a:hover { border-color: var(--green); color: var(--green); background: var(--green-pale); }
}
.jump a:active { transform: scale(0.97); }

/* ---------- Feature panel ---------- */
.feature-panel {
  background: var(--paper-deep); border-radius: 2px; border-top: 2px solid var(--green);
  padding: clamp(1.75rem, 3.5vw, 2.6rem); margin-top: 2rem;
}
.feature-panel h3 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.25rem; margin-bottom: 0.7rem; }
.feature-panel p { color: var(--ink-soft); line-height: 1.7; }
.feature-panel p + p { margin-top: 0.9rem; }

/* Steps read as three columns once there is room — stacked full-width rows
   repeated twice on one page is what made this feel like a wall. */
@media (min-width: 901px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); }
  .steps li { grid-template-columns: 1fr; gap: 0; padding: 1.1rem 0 0; }
  .steps li::before { display: block; margin-bottom: 0.55rem; }
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 2.5rem; }
  .faq { grid-template-columns: 1fr; gap: 0.65rem; }
  .quotes-grid { grid-template-columns: 1fr; }
  .quotes-grid .big-quote:nth-child(2) { margin-top: 0; }
  .portrait { max-width: 22rem; }
  .portrait { --frame-off: 0.75rem; }
}
@media (max-width: 767px) {
  .grid2, .callouts { grid-template-columns: 1fr; }
  /* The section switcher becomes a two-up index rather than a horizontal
     scroll strip — a scrollbar hides destinations behind a gesture and
     puts a grey bar through the middle of the page. Every link is visible
     and tappable at once here. */
  .svc-switch {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0 1.5rem; margin-top: 2rem; border-bottom: none;
  }
  .svc-switch a {
    padding: 0.85rem 0; white-space: normal;
    border-bottom: none; border-top: 1px solid var(--line); margin-bottom: 0;
  }
  .svc-switch a[aria-current="page"] { border-top-color: var(--green); }
}