:root {
        --bg: #f5f5f5;
        --surface: #ffffff;
        --surface-2: #ebebeb;
        --ink: #111111;
        --ink-soft: #4a4a4a;
        --line: #ded3c3;
        --accent: #9b6324;
        --accent-ink: #ffffff;
        --accent-soft: #f4e9da;
        --pin: #9b6324;
        --pin-on: #111111;
        --notice-bg: #f8efe0;
        --notice-line: #a97c46;
        --notice-ink: #4a3010;
        --shadow: 0 10px 30px rgba(17, 17, 17, 0.1);
      }
      @media (prefers-color-scheme: dark) {
        :root {
          --bg: #0d0d0d;
          --surface: #171717;
          --surface-2: #242424;
          --ink: #f5f5f5;
          --ink-soft: #bbbbbb;
          --line: #3a382c;
          --accent: #d09a52;
          --accent-ink: #111111;
          --accent-soft: #2d1e0c;
          --pin: #d09a52;
          --pin-on: #ffffff;
          --notice-bg: #2a1d0b;
          --notice-line: #9a6c2c;
          --notice-ink: #eac88f;
          --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
        }
      }
      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; scroll-padding-top: 84px; }
      /* On phones the header is position: fixed (see the site-header
         rules below), so anchor jumps clear it by its measured height,
         published as --header-h by the header script at the end of the
         body. The fallback covers the moment before that script runs. */
      @media (max-width: 900px) {
        html { scroll-padding-top: calc(var(--header-h, 148px) + 12px); }
      }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--ink);
        font-family: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
        font-size: 17px;
        line-height: 1.55;
      }
      .wrap {
        max-width: 1180px;
        margin: 0 auto;
        padding: clamp(20px, 4vw, 48px) clamp(16px, 4vw, 40px) 56px;
      }

      /* ---------- Section head ---------- */
      .kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 600;
        font-size: 15px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--accent);
        margin: 0 0 10px;
      }
      .kicker::before {
        content: "";
        width: 26px;
        height: 3px;
        background: var(--accent);
        border-radius: 2px;
      }
      h1 {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: clamp(38px, 6vw, 58px);
        line-height: 1.02;
        letter-spacing: 0.01em;
        text-transform: uppercase;
        margin: 0 0 14px;
        max-width: 14em;
      }
      .lede {
        max-width: 62ch;
        color: var(--ink-soft);
        font-size: clamp(17px, 2vw, 19px);
        margin: 0 0 20px;
      }
      .lede strong { color: var(--ink); }

      .notice {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        background: var(--notice-bg);
        border: 1px solid var(--notice-line);
        color: var(--notice-ink);
        border-radius: 10px;
        padding: 12px 16px;
        font-size: 15px;
        margin: 0 0 28px;
        max-width: 860px;
      }
      .notice svg { flex: 0 0 auto; margin-top: 2px; }
      .notice p { margin: 0; }
      .notice strong { font-weight: 700; }

      /* ---------- Layout ---------- */
      .layout {
        display: grid;
        grid-template-columns: minmax(320px, 430px) 1fr;
        gap: 22px;
        align-items: stretch;
      }
      @media (max-width: 900px) {
        .layout { grid-template-columns: 1fr; }
      }

      .panel {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 14px;
        box-shadow: var(--shadow);
      }

      /* ---------- Finder + list ---------- */
      .finder { padding: 18px 18px 8px; display: flex; flex-direction: column; }
      .finder label {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-size: 15px;
        margin-bottom: 8px;
      }
      .search-row { display: flex; gap: 8px; }
      .search-row input {
        flex: 1 1 auto;
        min-width: 0;
        font: inherit;
        font-size: 16px;
        padding: 10px 12px;
        border: 1.5px solid var(--line);
        border-radius: 9px;
        background: var(--surface);
        color: var(--ink);
      }
      .search-row input:focus-visible {
        outline: 3px solid var(--accent);
        outline-offset: 1px;
        border-color: var(--accent);
      }
      .chips {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin: 14px 0 6px;
      }
      .chip {
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        padding: 5px 12px;
        border-radius: 999px;
        border: 1.5px solid var(--line);
        background: var(--surface);
        color: var(--ink-soft);
        cursor: pointer;
      }
      .chip:hover { border-color: var(--accent); color: var(--ink); }
      .chip[aria-pressed="true"] {
        background: var(--ink);
        border-color: var(--ink);
        color: var(--bg);
      }
      .chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }

      .area-list {
        list-style: none;
        margin: 6px 0 0;
        padding: 0 0 10px;
        overflow-y: auto;
        max-height: 430px;
      }
      .area-row {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        text-align: left;
        font: inherit;
        background: none;
        border: 0;
        border-top: 1px solid var(--line);
        padding: 11px 6px;
        cursor: pointer;
        color: var(--ink);
      }
      .area-row:hover { background: var(--surface-2); }
      .area-row:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
      .area-row .num {
        flex: 0 0 auto;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--pin);
        color: #fff;
        font-size: 13.5px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      @media (prefers-color-scheme: dark) {
        .area-row .num { color: #16181a; }
      }
      .area-row .town { font-weight: 600; font-size: 16.5px; }
      .area-row .region { color: var(--ink-soft); font-size: 14px; margin-left: auto; white-space: nowrap; }
      .area-row.map-selected { background: var(--accent-soft); }
      .area-row.map-selected .num { background: var(--pin-on); }
      .area-row[hidden] { display: none; }
      .no-match {
        padding: 16px 6px 20px;
        color: var(--ink-soft);
        font-size: 15.5px;
      }
      .no-match[hidden] { display: none; }

      /* ---------- Served result + towns inside the perimeter ---------- */
      .served-result {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        background: var(--accent-soft);
        border: 1.5px solid var(--accent);
        border-radius: 10px;
        padding: 12px 14px;
        margin: 12px 0 4px;
        font-size: 15.5px;
      }
      .served-result[hidden] { display: none; }
      .served-result svg { flex: 0 0 auto; margin-top: 2px; color: var(--accent); }
      .served-result p { margin: 0; }
      .served-result strong {
        font-family: "Barlow Condensed", sans-serif;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-size: 17px;
      }
      .inside-block { border-top: 1px solid var(--line); margin-top: 14px; padding: 14px 0 12px; }
      .inside-block h3 {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-size: 17px;
        margin: 0 0 4px;
      }
      .inside-note { color: var(--ink-soft); font-size: 14.5px; margin: 0 0 10px; }
      .inside-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
      }
      .inside-list li[hidden] { display: none; }
      .inside-chip {
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        padding: 6px 11px;
        border-radius: 999px;
        border: 1.5px solid var(--line);
        background: var(--surface);
        color: var(--ink);
        cursor: pointer;
        min-height: 36px;
      }
      .inside-chip:hover { border-color: var(--accent); }
      .inside-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
      .inside-chip.is-on { background: var(--accent-soft); border-color: var(--accent); }

      /* ---------- Map legend ---------- */
      .map-legend {
        border-top: 1px solid var(--line);
        padding: 10px 18px;
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 14.5px;
        color: var(--ink-soft);
      }
      .map-legend .swatch {
        flex: 0 0 auto;
        width: 22px;
        height: 14px;
        border-radius: 3px;
        background: var(--accent);
        opacity: 0.45;
        border: 2px solid var(--accent);
      }

      /* ---------- Map ---------- */
      .map-panel { overflow: hidden; display: flex; flex-direction: column; }
      #map {
        width: 100%;
        height: 520px;
        min-height: 340px;
        flex: 1 1 auto;
      }
      @media (max-width: 900px) {
        #map { height: 360px; flex: none; }
      }
      .map-fallback {
        padding: 28px 22px;
        color: var(--ink-soft);
        flex: 1 1 auto;
        display: flex;
        align-items: center;
      }
      .map-fallback[hidden] { display: none; }
      .selected-bar {
        border-top: 1px solid var(--line);
        padding: 14px 18px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px 18px;
        align-items: baseline;
        min-height: 58px;
      }
      .selected-bar .sel-town {
        font-family: "Barlow Condensed", sans-serif;
        font-size: 24px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
      }
      .selected-bar .sel-note { color: var(--ink-soft); font-size: 15.5px; }

      /* ---------- Pins (map markers) ---------- */
      .pin {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--pin);
        border: 2px solid #fff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
        color: #fff;
        font-family: "Barlow", sans-serif;
        font-size: 13px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .pin--on { background: var(--pin-on); width: 34px; height: 34px; font-size: 15px; z-index: 2; }
      @media (prefers-color-scheme: dark) {
        /* Bright gold / white pins in dark mode need black numerals */
        .pin { color: #111111; }
      }

      /* ---------- Below: how it works + CTA ---------- */
      .below {
        display: grid;
        grid-template-columns: 1.4fr 1fr;
        gap: 22px;
        margin-top: 22px;
      }
      @media (max-width: 900px) {
        .below { grid-template-columns: 1fr; }
      }
      .steps { padding: 22px 24px 10px; }
      .steps h2, .cta-card h2 {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        font-size: 27px;
        margin: 0 0 14px;
      }
      .steps ol { list-style: none; counter-reset: step; margin: 0; padding: 0; }
      .steps li {
        counter-increment: step;
        display: flex;
        gap: 14px;
        padding: 10px 0 14px;
        border-top: 1px solid var(--line);
      }
      .steps li:first-child { border-top: 0; }
      .steps li::before {
        content: counter(step);
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        background: var(--ink);
        color: var(--bg);
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: 17px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-top: 2px;
      }
      .steps li p { margin: 0; }
      .steps li strong { display: block; font-size: 16.5px; }
      .steps li span { color: var(--ink-soft); font-size: 15.5px; }

      .cta-card {
        scroll-margin-top: 96px;
        padding: 22px 24px 24px;
        background: var(--ink);
        color: var(--bg);
        border-radius: 14px;
        box-shadow: var(--shadow);
        display: flex;
        flex-direction: column;
      }
      .cta-card p { margin: 0 0 18px; opacity: 0.85; font-size: 16px; }
      .cta-actions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        font: inherit;
        font-weight: 700;
        font-size: 16.5px;
        padding: 13px 18px;
        border-radius: 10px;
        text-decoration: none;
        cursor: pointer;
        border: 0;
      }
      .btn-accent { background: var(--accent); color: var(--accent-ink); }
      @media (prefers-color-scheme: light) {
        .btn-accent { color: #fff; }
      }
      .btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
      .cta-fine { font-size: 14px; opacity: 0.7; margin: 12px 0 0; }
      .cta-social { font-size: 15px; margin: 16px 0 0; opacity: 0.92; }
      .cta-social a {
        color: #d09a52;
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
      }
      .cta-social a:hover { text-decoration: underline; }
      .cta-social a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
      @media (prefers-color-scheme: dark) {
        .cta-social a { color: #9b6324; }
      }

      /* ---------- Homepage sections: services, Google reviews, section intro ---------- */
      .section-intro { margin: 34px 0 16px; }
      .section-intro .kicker { margin-bottom: 8px; }
      .section-title {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        font-size: clamp(30px, 4vw, 38px);
        line-height: 1.05;
        margin: 0 0 8px;
      }
      .section-copy { max-width: 62ch; color: var(--ink-soft); margin: 0; }

      .services-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin: 26px 0 6px;
      }
      @media (max-width: 900px) {
        .services-grid { grid-template-columns: 1fr; }
      }
      .service-card {
        display: flex;
        flex-direction: column;
        padding: 20px 20px 18px;
        text-decoration: none;
        color: var(--ink);
      }
      .service-card h2 {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        font-size: 24px;
        margin: 0 0 8px;
      }
      .service-card p { margin: 0 0 14px; color: var(--ink-soft); font-size: 15.5px; }
      .service-card .service-link {
        margin-top: auto;
        color: var(--accent);
        font-weight: 700;
        font-size: 15.5px;
      }
      .service-card:hover .service-link { text-decoration: underline; }
      .service-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

      /* ---------- Problems we can fix (homepage) ---------- */
      .problems-grid {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
      }
      .problem-item {
        background: var(--surface);
        border: 1px solid var(--line);
        border-top: 5px solid var(--accent);
        border-radius: 6px;
        box-shadow: var(--shadow);
        padding: 18px 18px 16px 18px;
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-size: 19px;
        line-height: 1.15;
        color: var(--ink);
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 64px;
      }
      .problem-item::before {
        content: "";
        flex: 0 0 auto;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--accent);
      }
      .problems-grid .problem-item:nth-child(3n+2) {
        background: var(--ink);
        color: var(--bg);
        border-color: var(--ink);
        border-top-color: var(--accent);
      }
      .problems-grid .problem-item:nth-child(3n) {
        background: var(--accent-soft);
        border-top-color: var(--ink);
      }
      @media (prefers-color-scheme: dark) {
        .problems-grid .problem-item:nth-child(3n+2) { background: var(--surface-2); color: var(--ink); border-color: var(--line); border-top-color: var(--accent); }
      }
      @media (max-width: 900px) {
        .problems-grid { grid-template-columns: repeat(2, 1fr); }
        .problems-grid .problem-item:nth-child(3n+2) { background: var(--surface); color: var(--ink); border-color: var(--line); border-top-color: var(--accent); }
        .problems-grid .problem-item:nth-child(3n) { background: var(--accent-soft); }
        .problems-grid .problem-item:nth-child(even) { background: var(--ink); color: var(--bg); border-color: var(--ink); border-top-color: var(--accent); }
        @media (prefers-color-scheme: dark) {
          .problems-grid .problem-item:nth-child(even) { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
        }
      }
      @media (max-width: 600px) {
        .problems-grid { grid-template-columns: 1fr; }
        .problem-item { min-height: 0; padding: 16px 16px 14px; font-size: 18px; }
        .problems-grid .problem-item:nth-child(even) { background: var(--surface); color: var(--ink); border-color: var(--line); border-top-color: var(--accent); }
        .problems-grid .problem-item:nth-child(3n) { background: var(--accent-soft); }
        @media (prefers-color-scheme: dark) {
          .problems-grid .problem-item:nth-child(even) { background: var(--surface); color: var(--ink); }
        }
      }

      /* ---------- Google reviews (the review section; it replaced
         the old on-page testimonials) ---------- */
      .google-reviews { margin-top: 22px; padding: 26px 24px 24px; }
      .google-reviews h2 {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        font-size: clamp(30px, 4vw, 38px);
        line-height: 1.05;
        margin: 0;
      }
      .greviews-head {
        display: flex;
        flex-wrap: wrap;
        gap: 14px 24px;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 10px;
      }
      .greviews-copy { max-width: 62ch; margin: 0 0 20px; }
      .greviews-rating {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 18px;
        margin: 0 0 18px;
      }
      .greviews-rating-score {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: 52px;
        line-height: 1;
        letter-spacing: 0.01em;
      }
      .greviews-rating-meta { display: flex; flex-direction: column; gap: 3px; }
      .greviews-rating-count { font-weight: 700; font-size: 16.5px; }
      .greviews-rating-sub { font-size: 14.5px; opacity: 0.92; }
      .greview-stars {
        color: var(--accent);
        font-size: 18px;
        letter-spacing: 2px;
        line-height: 1;
        white-space: nowrap;
      }
      @media (max-width: 900px) {
        .google-reviews { padding: 22px 18px 20px; }
      }
      .greview-name {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        font-size: 15px;
      }
      .greview-source {
        font-size: 13.5px;
        opacity: 0.85;
        margin-top: 10px;
      }

      /* ---------- Instagram feed ---------- */
      .instagram-section {
        margin-top: 48px;
        padding: 30px 28px 28px;
        border-radius: 6px;
        border-top: 6px solid var(--accent);
      }
      .instagram-head {
        display: flex;
        flex-wrap: wrap;
        gap: 14px 24px;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 8px;
      }
      .instagram-head h2 {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        font-size: clamp(30px, 4vw, 38px);
        line-height: 1.05;
        margin: 0;
      }
      .instagram-copy { max-width: 62ch; color: var(--ink-soft); margin: 0 0 20px; }
      .instagram-copy a {
        color: var(--accent);
        font-weight: 700;
        text-decoration: none;
      }
      .instagram-copy a:hover { text-decoration: underline; }
      .instagram-copy a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
      .btn-follow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        font: inherit;
        font-weight: 700;
        font-size: 16px;
        padding: 11px 18px;
        border-radius: 10px;
        text-decoration: none;
        border: 1.5px solid var(--accent);
        color: var(--accent);
        background: transparent;
        white-space: nowrap;
      }
      .btn-follow:hover { background: var(--accent-soft); }
      .btn-follow:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
      /* Photo tiles: each tile is just the post's own photo (or reel
         cover), filling the tile — no per-post header and no summary
         text; the photo is the content. Like the live ak9.ca site's
         GoDaddy Instagram section, each photo loads from Instagram
         at page load: the img src is the post's Instagram media URL,
         which redirects to a fresh Instagram CDN image on every
         load, so there is no embed frame and no header. The saved
         copies in assets/ are kept as the fallback (data-fallback):
         if an Instagram image fails to load or has expired, the
         tile swaps to its saved copy so it never shows broken. The
         whole tile links to the post on Instagram. */
      .ig-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
      }
      @media (max-width: 900px) {
        .ig-grid { grid-template-columns: repeat(2, 1fr); }
      }
      @media (max-width: 600px) {
        .instagram-section { padding: 26px 18px 22px; }
        .ig-grid { grid-template-columns: 1fr; gap: 12px; }
        .btn-follow { width: 100%; }
      }
      .ig-tile {
        position: relative;
        display: block;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        border-radius: 8px;
        border: 1px solid var(--line);
        background: var(--surface-2);
        text-decoration: none;
      }
      .ig-tile img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        background: var(--surface-2);
      }
      /* Reel marker, overlaid on the photo's top-right corner */
      .ig-tile .ig-badge {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 2;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: rgba(17, 17, 17, 0.72);
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
      }
      .ig-tile:hover { border-color: var(--accent); }
      .ig-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

      /* ---------- Blog preview (trimmed) ---------- */
      .blog-preview-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.7fr) minmax(240px, 1fr);
        gap: 28px;
        align-items: start;
      }
      @media (max-width: 900px) {
        .blog-preview-grid { grid-template-columns: 1fr; }
      }
      .preview-card h3 {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: clamp(28px, 3.4vw, 34px);
        line-height: 1.08;
        margin: 0 0 8px;
      }
      .preview-card p { margin: 0 0 14px; max-width: 58ch; }
      .post .read-link, .preview-card .read-link {
        color: var(--accent);
        font-weight: 700;
        text-decoration: none;
      }
      .post .read-link:hover { text-decoration: underline; }
      .post .read-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
      .preview-card .read-link:hover { text-decoration: underline; }
      .preview-card .read-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

      /* ---------- Blog / resources (SEO section) ---------- */
      .blog-section {
        scroll-margin-top: 96px;
        margin-top: 22px;
        padding: 26px 24px 24px;
      }
      .blog-section h2 {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        font-size: clamp(30px, 4vw, 38px);
        line-height: 1.05;
        margin: 0 0 10px;
      }
      .blog-intro {
        max-width: 62ch;
        color: var(--ink-soft);
        margin: 0 0 22px;
      }
      .blog-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.7fr) minmax(240px, 1fr);
        gap: 28px;
        align-items: start;
      }
      .post-tag {
        display: inline-block;
        background: var(--accent-soft);
        color: var(--accent);
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        padding: 4px 10px;
        border-radius: 999px;
        margin: 0 0 10px;
      }
      .post h3 {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: clamp(28px, 3.4vw, 34px);
        line-height: 1.08;
        letter-spacing: 0.01em;
        margin: 0 0 6px;
      }
      .post-meta { color: var(--ink-soft); font-size: 14.5px; margin: 0 0 14px; }
      .post p { margin: 0 0 14px; }
      .post h4 {
        font-size: 17px;
        font-weight: 700;
        margin: 20px 0 6px;
      }
      .post h4:first-of-type { margin-top: 4px; }
      .post-cta {
        border-top: 1px solid var(--line);
        padding-top: 14px;
        margin-top: 20px !important;
      }
      .post-cta a, .aside-cta a {
        color: var(--accent);
        font-weight: 700;
        text-decoration: none;
      }
      .post-cta a:hover, .aside-cta a:hover { text-decoration: underline; }
      .post-cta a:focus-visible, .aside-cta a:focus-visible {
        outline: 3px solid var(--accent);
        outline-offset: 2px;
      }
      .blog-aside { display: flex; flex-direction: column; gap: 20px; }
      .aside-block h3 {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-size: 19px;
        margin: 0 0 10px;
        padding-bottom: 8px;
        border-bottom: 2px solid var(--accent);
      }
      .aside-block ul { list-style: none; margin: 0; padding: 0; }
      .aside-block li {
        padding: 7px 0;
        border-top: 1px solid var(--line);
        font-size: 15.5px;
      }
      .aside-block li:first-child { border-top: 0; }
      .aside-block li span { color: var(--ink-soft); font-size: 14px; }
      .aside-block li a {
        color: var(--ink);
        font-weight: 600;
        text-decoration: none;
      }
      .aside-block li a:hover { color: var(--accent); text-decoration: underline; }
      .aside-block li a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
      .aside-cta {
        background: var(--surface-2);
        border-radius: 10px;
        padding: 16px 18px;
      }
      .aside-cta p { margin: 0; font-size: 15.5px; }
      .aside-cta strong { display: block; font-size: 16.5px; margin-bottom: 4px; }
      @media (max-width: 900px) {
        .blog-section { scroll-margin-top: calc(var(--header-h, 148px) + 12px); }
        .blog-grid { grid-template-columns: 1fr; }
      }
      @media (max-width: 600px) {
        .blog-section { padding: 22px 18px 20px; }
      }

      /* ---------- Site header (static links, no pullout menu) ---------- */
      /* Pinned so navigation stays visible while scrolling: sticky on
         desktop, fixed at phone widths (see the max-width: 900px block
         at the end of the header rules). position: sticky alone was
         not holding on the owner's phone — sticky is resolved against
         the nearest scrolling ancestor, and in the phone webview the
         page is presented inside a wrapper that scrolls the document
         itself, so the header scrolled away with the page. Fixed pins
         to the viewport in every mobile browser, wrapper or not. */
      .site-header {
        position: sticky;
        top: 0;
        z-index: 100;
        background: var(--surface);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 6px 18px rgba(17, 17, 17, 0.08);
      }
      #service-area { scroll-margin-top: 96px; }
      @media (prefers-color-scheme: dark) {
        .site-header { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }
      }
      @media (max-width: 900px) {
        #service-area, .cta-card { scroll-margin-top: calc(var(--header-h, 148px) + 12px); }
      }
      .site-header .header-in {
        max-width: 1180px;
        margin: 0 auto;
        padding: 12px clamp(16px, 4vw, 40px);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 28px;
      }
      .brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: 24px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--ink);
        text-decoration: none;
        white-space: nowrap;
      }
      .brand picture { display: block; line-height: 0; flex: 0 0 auto; }
      .brand img {
        display: block;
        width: auto;
        height: 38px;
      }
      .brand .brand-text > span { color: var(--accent); }
      .brand:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
      @media (max-width: 600px) {
        .brand { font-size: 21px; gap: 8px; }
        .brand img { height: 32px; }
      }
      .site-nav { display: flex; flex-wrap: wrap; gap: 2px 4px; margin-left: auto; }
      .site-nav a {
        color: var(--ink-soft);
        text-decoration: none;
        font-weight: 600;
        font-size: 15.5px;
        padding: 9px 11px;
        border-radius: 8px;
        white-space: nowrap;
      }
      .site-nav a:hover { color: var(--ink); background: var(--surface-2); }
      .site-nav a[aria-current="page"] { color: var(--accent); }
      .site-nav a.nav-cta {
        background: var(--accent);
        color: #fff;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1.1;
        padding: 10px 16px;
      }
      .nav-cta-title { font-weight: 700; font-size: 15.5px; line-height: 1.1; white-space: nowrap; }
      .site-nav a.nav-cta:hover { background: var(--ink); color: var(--bg); }
      /* Current-page state for the CTA: wins over the normal CTA
         colours and over any sticky :hover / :focus / :active left
         by a tap on a touch screen, so the button never stays pale
         or white (with white text) while on the booking page. It
         uses the same dark fill as the hover state; the router also
         blurs the tapped link on navigation so no tap state sticks.
         Leaving the booking page removes aria-current in the router,
         which clears this state again. */
      .site-nav a.nav-cta[aria-current="page"],
      .site-nav a.nav-cta[aria-current="page"]:hover,
      .site-nav a.nav-cta[aria-current="page"]:focus,
      .site-nav a.nav-cta[aria-current="page"]:active {
        background: var(--ink);
        color: var(--bg);
        box-shadow: inset 0 0 0 2px var(--accent);
      }
      @media (hover: none) {
        /* Touch screens: no sticky hover — a tapped CTA returns to
           its normal colour, or to its current-page colour above. */
        .site-nav a.nav-cta:hover { background: var(--accent); color: #fff; }
        .site-nav a.nav-cta[aria-current="page"]:hover { background: var(--ink); color: var(--bg); }
      }
      @media (prefers-color-scheme: dark) {
        .site-nav a.nav-cta { color: #16181a; }
        .site-nav a.nav-cta:hover { color: var(--ink); }
        .site-nav a.nav-cta[aria-current="page"],
        .site-nav a.nav-cta[aria-current="page"]:hover,
        .site-nav a.nav-cta[aria-current="page"]:focus,
        .site-nav a.nav-cta[aria-current="page"]:active { color: var(--bg); }
      }
      @media (prefers-color-scheme: dark) and (hover: none) {
        .site-nav a.nav-cta:hover { color: #16181a; }
        .site-nav a.nav-cta[aria-current="page"]:hover { color: var(--bg); }
      }
      .site-nav a:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }

      /* ---------- Testimonials nav link (Google reviews) ----------
         A plain navigation entry — not a page. It carries the Google
         "G" and links straight out to AK9 Inc.'s verified Google
         Maps profile, where the full review list lives. It is a
         normal link in the nav flow, so on mobile it sits in the
         centred nav like every other link — no extra menu. */
      .site-nav a.nav-testimonials,
      .footer-nav a.nav-testimonials {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-align: left;
      }
      .nav-testimonials .g-mark svg { display: block; }
      .nav-testimonials-text {
        display: flex;
        flex-direction: column;
        line-height: 1.15;
        white-space: nowrap;
      }
      .nav-testimonials-title { font-weight: 700; font-size: 15.5px; color: var(--ink); }
      .footer-nav .nav-testimonials-title { font-size: 15px; }

      /* ---------- Services grouping in the header nav ---------- */
      /* Desktop: the three service links sit inline like any other
         nav link (the wrapper is transparent to layout) and there is
         no toggle. Mobile: the wrapper becomes a dropdown — see the
         max-width: 900px block below. */
      .nav-services { display: contents; }
      .nav-services-menu { display: contents; }
      .nav-services-toggle { display: none; }

      @media (max-width: 900px) {
        /* Pinned, centred mobile header: brand on its own line, nav
           centred underneath it. On phones the header switches from
           sticky to fixed: sticky is resolved against the nearest
           scrolling ancestor, and in the phone webview this page sits
           inside a wrapper that scrolls the document itself, which
           left the header scrolling away with the page. Fixed pins to
           the viewport regardless of wrapper. The header leaves the
           flow, so the body gets top padding equal to the header's
           measured height (--header-h, published by the header script
           at the end of the body) and the hero's negative top margin
           is neutralised, so the first screen looks exactly as it did
           with the header in flow. */
        .site-header { position: fixed; left: 0; right: 0; }
        body { padding-top: var(--header-h, 148px); }
        .hero { margin-top: 0; }
        .site-header .header-in {
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          gap: 2px 12px;
          padding-top: 10px;
          padding-bottom: 10px;
        }
        .brand { justify-content: center; margin: 0 auto; }
        .site-nav {
          margin-left: 0;
          margin-right: 0;
          width: 100%;
          justify-content: center;
          align-items: center;
          text-align: center;
        }
        /* Services dropdown (mobile only) */
        .nav-services { display: inline-flex; position: relative; }
        .nav-services-toggle {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          font: inherit;
          font-weight: 600;
          font-size: 15.5px;
          color: var(--ink-soft);
          background: none;
          border: 0;
          padding: 10px 9px;
          border-radius: 8px;
          white-space: nowrap;
          cursor: pointer;
        }
        .nav-services-toggle:hover { color: var(--ink); background: var(--surface-2); }
        .nav-services-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
        .nav-services-toggle svg { flex: 0 0 auto; transition: transform 160ms ease; }
        .nav-services-toggle[aria-expanded="true"] { color: var(--accent); }
        .nav-services-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
        .nav-services-menu {
          display: none;
          position: absolute;
          top: calc(100% + 8px);
          left: 50%;
          transform: translateX(-50%);
          z-index: 120;
          min-width: 216px;
          flex-direction: column;
          gap: 2px;
          padding: 6px;
          background: var(--surface);
          border: 1px solid var(--line);
          border-top: 3px solid var(--accent);
          border-radius: 10px;
          box-shadow: var(--shadow);
          text-align: center;
        }
        .nav-services-menu.is-open { display: flex; }
        .site-nav .nav-services-menu a {
          display: block;
          text-align: center;
          padding: 11px 14px;
          border-radius: 7px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .nav-services-toggle svg { transition: none; }
      }

      /* ---------- Site footer (existing AK9 Inc. logo lives here) ---------- */
      .site-footer {
        background: var(--surface);
        border-top: 1px solid var(--line);
      }
      .site-footer .footer-in {
        max-width: 1180px;
        margin: 0 auto;
        padding: 30px clamp(16px, 4vw, 40px) 34px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
      }
      .footer-logo {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        border-radius: 12px;
      }
      .footer-logo picture { display: block; line-height: 0; }
      .footer-logo img {
        display: block;
        width: auto;
        height: 78px;
      }
      .footer-logo:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
      /* Light/dark logo versions: the <picture> in the footer swaps
         ak9-logo-light.png for ak9-logo-dark.png under
         prefers-color-scheme: dark. The dark version re-renders the same
         silhouette as a white to #d09a52 bronze gradient mapped along
         the original logo's own diagonal axis (darkest at the top-right,
         brightest copper at the bottom-left) — each pixel keeps its
         original gradient position — so no light plate is needed. */
      .footer-name {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: 21px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        margin: 2px 0 0;
      }
      .footer-name span { color: var(--accent); }
      .footer-meta {
        color: var(--ink-soft);
        font-size: 15px;
        margin: 0;
        max-width: 54ch;
      }
      .footer-meta a {
        color: var(--accent);
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
      }
      .footer-meta a:hover { text-decoration: underline; }
      .footer-meta a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
      .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; }
      .footer-nav a {
        color: var(--ink-soft);
        text-decoration: none;
        font-weight: 600;
        font-size: 15px;
        padding: 8px 10px;
        border-radius: 8px;
        white-space: nowrap;
      }
      .footer-nav a:hover { color: var(--ink); background: var(--surface-2); }
      .footer-nav a:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
      .footer-fine { color: var(--ink-soft); font-size: 13.5px; margin: 2px 0 0; }
      .footer-social {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--accent);
        font-weight: 700;
        font-size: 15.5px;
        text-decoration: none;
        padding: 8px 14px;
        border: 1.5px solid var(--line);
        border-radius: 999px;
      }
      .footer-social:hover { border-color: var(--accent); background: var(--surface-2); text-decoration: underline; }
      .footer-social:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

      /* ---------- Quick actions (shown on small screens, under the intro) ---------- */
      .quick-actions { display: none; }
      @media (max-width: 900px) {
        .quick-actions { display: flex; margin: 0 0 22px; }
        .quick-actions .btn { flex: 1 1 auto; min-height: 54px; font-size: 16px; padding: 12px 8px; }
        .quick-actions .btn-contact-book { background: var(--accent); color: #fff; }
        @media (prefers-color-scheme: dark) {
          .quick-actions .btn-contact-book { color: #16181a; }
        }
        /* No nested scroll region on touch screens — the list flows with the page */
        .area-list { max-height: none; overflow: visible; }
        /* Bigger, easier touch targets on small screens */
        .chip { min-height: 42px; padding: 8px 14px; }
        .area-row { min-height: 54px; }
        .site-nav { margin-left: 0; }
        .site-nav a { padding: 10px 9px; }
        .kicker { font-size: 13px; letter-spacing: 0.11em; }
        .footer-logo img { height: 64px; }
        .footer-nav a { padding: 10px 9px; }
      }
      @media (max-width: 600px) {
        #map { height: 330px; min-height: 300px; }
      }

      /* ============================================================
         Section rhythm — each part of the homepage gets its own
         treatment so the page no longer reads as one repeated
         white panel: black hero band, three differently-finished
         service cards, a tinted band for the service area, an
         unboxed How It Works, a solid gold Google reviews band,
         and an editorial blog section. Palette unchanged.
         ============================================================ */

      /* ---------- Hero: solid black band, flush to the header ---------- */
      .hero {
        background: #111111;
        color: #f5f5f5;
        border-bottom: 6px solid var(--accent);
        margin: calc(-1 * clamp(20px, 4vw, 48px)) calc(-1 * clamp(16px, 4vw, 40px)) 0;
        padding: clamp(30px, 5vw, 54px) clamp(16px, 4vw, 40px) clamp(28px, 4vw, 44px);
      }
      .hero .kicker { color: #d09a52; }
      .hero .kicker::before { background: #d09a52; }
      .hero h1 { color: #ffffff; font-size: clamp(44px, 7vw, 74px); max-width: 13em; }
      .hero .lede { color: #c9c9c9; }
      .hero .lede strong { color: #ffffff; }
      .hero .quick-actions { margin-bottom: 0; }
      /* Problems-list CTA (under the 12-item list in the hero):
         shown on desktop as well as mobile — unlike the other
         pages' mobile-only quick actions — centred under the list,
         with the same accent-button styling it has on mobile. */
      .hero .problems-cta {
        display: flex;
        justify-content: center;
        margin-top: 22px;
        margin-bottom: 0;
      }
      .hero .problems-cta .btn {
        flex: 0 1 auto;
        flex-direction: column;
        min-height: 54px;
        font-size: 16px;
        padding: 10px 28px 11px;
        gap: 2px;
      }
      .problems-cta-main {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        line-height: 1.1;
      }
      .problems-cta-title {
        font-weight: 700;
        font-size: 16px;
        line-height: 1.1;
        white-space: nowrap;
      }
      .problems-cta-sub {
        font-weight: 600;
        font-size: 12.5px;
        line-height: 1.1;
        letter-spacing: 0.03em;
        white-space: nowrap;
        opacity: 0.92;
      }
      .hero .problems-cta .btn-contact-book { background: var(--accent); color: #fff; }
      @media (prefers-color-scheme: dark) {
        .hero .problems-cta .btn-contact-book { color: #16181a; }
      }
      /* Problems list combined into the hero, directly under the blurb:
         same tiles and finishes as before, lifted off the black band
         with a faint light edge so the black tiles stay distinct. */
      .hero .problems-grid { margin-top: 24px; }
      .hero .problem-item { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 10px 30px rgba(0, 0, 0, 0.35); }
      @media (max-width: 900px) {
        .hero .quick-actions { margin-top: 18px; }
      }
      @media (prefers-color-scheme: dark) {
        .hero { background: #000000; border-bottom-color: #d09a52; }
      }

      /* ---------- Services: three cards, three finishes ---------- */
      .services-grid { gap: 18px; margin: 36px 0 10px; counter-reset: svc; }
      .service-card {
        border-radius: 6px;
        border-top: 6px solid var(--accent);
        padding: 22px 22px 20px;
      }
      .service-card::before {
        counter-increment: svc;
        content: "0" counter(svc);
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: 34px;
        line-height: 1;
        color: var(--accent);
        margin-bottom: 12px;
      }
      .service-card:nth-child(2) {
        background: var(--ink);
        color: var(--bg);
        border-color: var(--ink);
        border-top-color: var(--accent);
        box-shadow: var(--shadow);
      }
      .service-card:nth-child(2) p { color: var(--bg); opacity: 0.82; }
      .service-card:nth-child(2) .service-link { color: #d09a52; }
      @media (prefers-color-scheme: dark) {
        /* Card 2 inverts to near-white in dark mode, so its link uses deep gold */
        .service-card:nth-child(2) .service-link { color: #9b6324; }
        .service-card:nth-child(2)::before { color: #9b6324; }
      }
      .service-card:nth-child(3) {
        background: var(--accent-soft);
        border-top-color: var(--ink);
      }
      @media (min-width: 901px) {
        .service-card:nth-child(2) { transform: translateY(16px); }
        .services-grid { margin-bottom: 26px; }
      }

      /* ---------- Service area: tinted full-width band ---------- */
      .area-band {
        background: #eee2cf;
        border-top: 3px solid var(--accent);
        border-bottom: 1px solid var(--line);
        margin: 44px calc(-1 * clamp(16px, 4vw, 40px)) 0;
        padding: 34px clamp(16px, 4vw, 40px) 40px;
      }
      @media (prefers-color-scheme: dark) {
        .area-band { background: #241a0f; }
      }
      .area-band .section-intro { margin-top: 0; }
      .area-band .notice { background: var(--surface); }

      /* ---------- How it works: unboxed, beside the black CTA ---------- */
      .below { margin-top: 44px; }
      .steps.panel {
        background: transparent;
        border: 0;
        box-shadow: none;
        border-radius: 0;
        padding: 4px 8px 0 2px;
      }
      .steps li::before {
        border-radius: 50%;
        background: var(--accent);
        color: #ffffff;
      }
      @media (prefers-color-scheme: dark) {
        .steps li::before { color: #111111; }
      }
      .cta-card { border-radius: 6px; border-top: 6px solid var(--accent); }

      /* ---------- Google reviews: Google's own look — white surface,
         the four-colour Google "G", Google-blue links, #FBBC04 stars
         and coloured reviewer avatars, so the section reads as
         Google at a glance ---------- */
      .google-reviews {
        margin-top: 48px;
        border-radius: 8px;
        padding: 32px 28px 30px;
      }
      .google-reviews .greview-stars { color: #fbbc04; }
      .g-mark { display: inline-flex; flex: 0 0 auto; align-items: center; }
      @media (prefers-color-scheme: light) {
        .google-reviews { background: #ffffff; color: #202124; border: 1px solid #dadce0; box-shadow: 0 1px 3px rgba(60, 64, 67, 0.18), 0 4px 14px rgba(60, 64, 67, 0.1); }
        .google-reviews .kicker { color: #5f6368; }
        .google-reviews .kicker::before { background: #4285f4; }
        .google-reviews .greviews-rating-sub, .google-reviews .greview-source, .google-reviews .greviews-copy { color: #5f6368; }
        .google-reviews .btn-follow { border-color: #dadce0; color: #1a73e8; background: #ffffff; }
        .google-reviews .btn-follow:hover { background: #f8f9fa; }
      }
      @media (prefers-color-scheme: dark) {
        .google-reviews { background: #202124; color: #e8eaed; border: 1px solid #5f6368; box-shadow: none; }
        .google-reviews .kicker { color: #9aa0a6; }
        .google-reviews .kicker::before { background: #4285f4; }
        .google-reviews .greviews-rating-sub, .google-reviews .greview-source, .google-reviews .greviews-copy { color: #9aa0a6; }
        .google-reviews .btn-follow { border-color: #5f6368; color: #8ab4f8; background: transparent; }
        .google-reviews .btn-follow:hover { background: rgba(255, 255, 255, 0.06); }
      }

      /* ---------- Homepage Google reviews: centred blue button ----------
         The section's old solid-blue Google button, centred under
         the summary cards, linking straight to the full, current
         review list on AK9 Inc.'s Google Maps profile. */
      .greviews-actions {
        display: flex;
        justify-content: center;
        text-align: center;
        margin-top: 20px;
      }
      .btn-google {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font: inherit;
        font-weight: 700;
        font-size: 16px;
        padding: 11px 18px;
        border-radius: 999px;
        background: #1a73e8;
        color: #ffffff;
        text-decoration: none;
        box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3);
        max-width: 100%;
      }
      .btn-google-g {
        flex: 0 0 auto;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .btn-google:hover { background: #1765cc; }
      .btn-google:focus-visible { outline: 3px solid #4285f4; outline-offset: 2px; }
      @media (max-width: 600px) {
        .greviews-actions .btn-google { width: 100%; }
      }

      /* ---------- Blog: editorial, ruled off with a heavy rule ---------- */
      .blog-section.panel {
        background: transparent;
        border: 0;
        border-top: 4px solid var(--ink);
        border-radius: 0;
        box-shadow: none;
        margin-top: 52px;
        padding: 30px 4px 0;
      }
      .post-tag { background: var(--ink); color: var(--bg); border-radius: 3px; }
      .post h4 {
        font-family: "Barlow Condensed", sans-serif;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-size: 19px;
        border-bottom: 2px solid var(--accent);
        padding-bottom: 4px;
      }
      @media (prefers-color-scheme: light) {
        .aside-cta { background: #111111; color: #f5f5f5; border-radius: 6px; }
        .aside-cta a { color: #d09a52; }
      }
      @media (max-width: 600px) {
        .hero { padding-top: 26px; }
        .area-band { padding-top: 26px; padding-bottom: 30px; }
        .google-reviews { padding: 26px 18px 24px; }
        .blog-section.panel { padding: 24px 2px 0; }
      }
/* ---------- Multi-page preview views ---------- */
      .page-view[hidden] { display: none; }
      .content-panel { padding: 26px 24px 24px; }
      @media (max-width: 600px) {
        .content-panel { padding: 22px 18px 20px; }
      }
      .content-panel h2.panel-title {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        font-size: clamp(26px, 3.4vw, 32px);
        line-height: 1.05;
        margin: 0 0 10px;
      }
      .page-cta { margin-top: 30px; }
      .btn-outline {
        background: transparent;
        color: var(--bg);
        border: 1.5px solid var(--bg);
      }
      .btn-outline:hover { background: rgba(255, 255, 255, 0.12); }

      /* ---------- Price / course cards ---------- */
      .price-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
        margin: 30px 0 8px;
        align-items: start;
      }
      .price-grid.two { grid-template-columns: repeat(2, 1fr); }
      @media (max-width: 900px) {
        .price-grid, .price-grid.two { grid-template-columns: 1fr; }
      }
      .price-card { padding: 22px 22px 20px; border-radius: 6px; border-top: 6px solid var(--accent); }
      .price-card h2, .price-card h3 {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        font-size: 26px;
        margin: 0 0 8px;
      }
      .price-card p { margin: 0 0 12px; font-size: 15.5px; }
      .price-card .price {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: 38px;
        line-height: 1;
        color: var(--accent);
        margin: 14px 0 4px;
      }
      .price-card .price-note { font-weight: 700; font-size: 15.5px; margin: 0 0 6px; }
      .price-card .free-note {
        display: inline-block;
        background: var(--accent-soft);
        color: var(--accent);
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-size: 14.5px;
        padding: 4px 10px;
        border-radius: 999px;
        margin: 6px 0 10px;
      }
      .price-card h4 {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-size: 17px;
        margin: 16px 0 6px;
        padding-bottom: 4px;
        border-bottom: 2px solid var(--accent);
      }
      .price-card ul { margin: 0; padding-left: 20px; font-size: 15.5px; }
      .price-card li { margin: 3px 0; }
      .fine-print { font-size: 13.5px; color: var(--ink-soft); margin: 14px 0 0 !important; }
      .fit-note { margin-top: 22px; }

      /* ---------- Book a consultation form ---------- */
      .book-grid {
        display: grid;
        grid-template-columns: 1.4fr 1fr;
        gap: 22px;
        align-items: start;
        margin-top: 30px;
      }
      @media (max-width: 900px) {
        .book-grid { grid-template-columns: 1fr; }
      }
      .book-form { display: grid; gap: 14px; margin-top: 6px; }
      .book-form .field-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
      }
      @media (max-width: 600px) {
        .book-form .field-row { grid-template-columns: 1fr; }
      }
      .book-form label {
        display: block;
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-size: 15px;
        margin-bottom: 6px;
      }
      .book-form input {
        width: 100%;
        font: inherit;
        font-size: 16px;
        padding: 11px 12px;
        border: 1.5px solid var(--line);
        border-radius: 9px;
        background: var(--surface);
        color: var(--ink);
      }
      .book-form input:focus-visible {
        outline: 3px solid var(--accent);
        outline-offset: 1px;
        border-color: var(--accent);
      }
      .book-form textarea {
        width: 100%;
        font: inherit;
        font-size: 16px;
        padding: 11px 12px;
        border: 1.5px solid var(--line);
        border-radius: 9px;
        background: var(--surface);
        color: var(--ink);
        min-height: 110px;
        resize: vertical;
      }
      .book-form textarea:focus-visible {
        outline: 3px solid var(--accent);
        outline-offset: 1px;
        border-color: var(--accent);
      }
      .book-form .btn { min-height: 52px; }
      .form-note { font-size: 14.5px; color: var(--ink-soft); margin: 0; }
      .form-sent {
        background: var(--accent-soft);
        border: 1.5px solid var(--accent);
        border-radius: 10px;
        padding: 12px 14px;
        font-size: 15.5px;
        margin: 0;
      }
      .form-sent[hidden] { display: none; }

      /* ---------- Blog index + full post ---------- */
      .blog-index-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.7fr) minmax(240px, 1fr);
        gap: 28px;
        align-items: start;
        margin-top: 26px;
      }
      @media (max-width: 900px) {
        .blog-index-grid { grid-template-columns: 1fr; }
      }
      .post-full h3 {
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 700;
        font-size: 21px;
        letter-spacing: 0.02em;
        margin: 24px 0 6px;
      }
      .post-full ul { margin: 0 0 14px; padding-left: 22px; }
      .post-full li { margin: 4px 0; }
      .back-link {
        color: var(--accent);
        font-weight: 700;
        text-decoration: none;
      }
      .back-link:hover { text-decoration: underline; }
      .back-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }