/* ─── SELF-HOSTED FONTS (no third-party render blocking) ── */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/dm-sans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/kaushan-script.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── DESIGN TOKENS ─────────────────────────────── */
    :root {
      color-scheme: light;

      /* Surfaces: these flip when the page is repainted into dark. */
      --cream:        #F5EFE6;  /* page background */
      --surface-card: #FDFCFB;  /* raised cards, "included" boxes, posts */
      --sand:         #EAE0D4;  /* hairline dividers, subtle fills */
      --ink:          #1A2332;  /* deliberately dark surfaces: nav, dark sections, dark buttons */

      /* Text */
      --text:  #1A2332;  /* headings and primary copy */
      --body:  #3E4A5A;  /* secondary body copy */
      --muted: #64748B;  /* meta, captions */
      --on-ink: #FDFCFB; /* text sitting ON --ink; stays light in BOTH themes */

      /* Brand: constant identity, nudged brighter in dark for contrast. */
      --terra:     #C4622D;
      --terra-ink: #A8501F;  /* terra dark enough to pass AA as text on light */
      --gold:      #C9953A;

      --hairline: rgba(26,35,50,0.3);

      /* Legacy alias: --charcoal named a colour, not a role. Kept so any stray
         reference still resolves; new rules should use --ink or --text. */
      --charcoal: var(--ink);

      --font-display: 'DM Sans', -apple-system, sans-serif; /* was 'Playfair Display' */
      --font-body:    'DM Sans', -apple-system, sans-serif;

      --nav-h:  72px;
      --max-w:  1300px;
      --ease:   cubic-bezier(0.22, 1, 0.36, 1);

      --repaint-dur: 950ms;
    }

    /* ─── DARK COLOURWAY ─────────────────────────────
       The same brand, repainted. Only surface and text tokens move. The brush
       masks, the terra accents and the photography are untouched, because the
       strokes take their colour from these variables rather than baking it in. */
    [data-theme="dark"] {
      color-scheme: dark;

      --cream:        #141A24;
      --surface-card: #1C2430;
      --sand:         #2C3644;
      --ink:          #0C1119;  /* still the darkest surface, so dark sections keep reading as darker */

      --text:  #F1EAE0;
      --body:  #B9C2CE;
      --muted: #8C99A8;

      --terra:     #E07A42;
      --terra-ink: #EE9260;
      --gold:      #E0B057;

      --hairline: rgba(241,234,224,0.28);
    }

    /* A dark-filled button would vanish against a dark page, so it inverts. */
    [data-theme="dark"] .btn--dark { background: var(--text); color: var(--ink); }
    [data-theme="dark"] .btn--dark:hover { background: #FFFFFF; }

    /* ─── RESET ─────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; font-size: 16px; }
    body {
      font-family: var(--font-body);
      background: var(--cream);
      color: var(--text);
      line-height: 1.6;
      overflow-x: hidden;
    }
    img { max-width: 100%; height: auto; display: block; }
    a   { color: inherit; text-decoration: none; }
    ul  { list-style: none; }
    button { cursor: pointer; border: none; background: none; font-family: inherit; }
    address { font-style: normal; }

    /* ─── SKIP LINK ──────────────────────────────────── */
    .skip-link {
      position: absolute; top: -100%; left: 1rem;
      background: var(--ink); color: var(--on-ink);
      padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600;
      border-radius: 0 0 3px 3px; z-index: 9999;
      transition: top 0.2s;
    }
    .skip-link:focus { top: 0; }

    /* ─── LAYOUT ────────────────────────────────────── */
    .wrap {
      width: 100%;
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 1.5rem;
    }
    @media (min-width: 768px)  { .wrap { padding: 0 2.5rem; } }
    @media (min-width: 1024px) { .wrap { padding: 0 3.5rem; } }

    /* ─── TYPOGRAPHY ─────────────────────────────────── */
    .eyebrow {
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--terra);
    }
    .eyebrow--gold  { color: var(--gold); }
    .eyebrow--muted { color: var(--muted); }

    .display {
      font-family: var(--font-display);
      font-weight: 700;
      line-height: 1.04;
      letter-spacing: -0.025em;
    }
    /* Italic emphasis words share the hand-painted brush script (like the hero's "precision.") */
    .display em, .cta-strip__heading em {
      font-family: 'Kaushan Script', cursive;
      font-style: normal;
      font-weight: 400;
      line-height: 1.15;
    }
    .display--xl { font-size: clamp(3rem, 6.5vw, 6rem); }
    .display--lg { font-size: clamp(2.25rem, 4.5vw, 4rem); }
    .display--md { font-size: clamp(1.75rem, 3vw, 2.5rem); }

    .body-lg { font-size: 1.0625rem; line-height: 1.72; }
    .body-md { font-size: 0.9375rem; line-height: 1.7; }
    .body-sm { font-size: 0.8125rem; line-height: 1.6; }

    /* ─── BUTTONS ────────────────────────────────────── */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.875rem 1.75rem;
      font-family: var(--font-body);
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      border-radius: 2px;
      min-height: 48px;
      white-space: nowrap;
      transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
      cursor: pointer;
    }
    .btn:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }
    .btn:active { transform: translateY(1px); }

    /* Darker terra on buttons: white text needs 4.5:1 (WCAG AA) */
    .btn--terra { background: #A8501F; color: var(--on-ink); }
    .btn--terra:hover { background: #8F441A; }

    .btn--outline {
      background: transparent;
      color: var(--on-ink);
      border: 1.5px solid rgba(255,255,255,0.45);
    }
    .btn--outline:hover { border-color: var(--on-ink); background: rgba(255,255,255,0.08); }

    .btn--dark { background: var(--ink); color: var(--on-ink); }
    .btn--dark:hover { background: #0F1826; }

    .btn--ghost {
      background: transparent;
      color: var(--text);
      border: 1.5px solid var(--hairline);
    }
    .btn--ghost:hover { border-color: var(--text); }

    /* ─── NAVIGATION ─────────────────────────────────── */
    .nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: var(--nav-h);
      z-index: 200;
      transition: background 0.35s var(--ease), box-shadow 0.35s;
    }
    .nav.is-scrolled {
      background: var(--ink);
      box-shadow: 0 1px 0 rgba(255,255,255,0.07);
    }
    .nav__inner {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
    }
    .nav__brand { flex-shrink: 0; }
    .nav__brand-name {
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--on-ink);
      letter-spacing: -0.01em;
      display: block;
      line-height: 1;
    }
    .nav__brand-sub {
      font-size: 0.625rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold);
      display: block;
      margin-top: 3px;
    }
    .nav__links {
      display: none;
      gap: 2rem;
      align-items: center;
    }
    @media (min-width: 1024px) { .nav__links { display: flex; } }
    .nav__links a {
      font-size: 0.8125rem;
      font-weight: 500;
      color: rgba(255,255,255,0.8);
      letter-spacing: 0.02em;
      position: relative;
      transition: color 0.2s;
      padding-bottom: 2px;
    }
    .nav__links a::after {
      content: '';
      position: absolute;
      bottom: -2px; left: 0; right: 0;
      height: 1.5px;
      background: var(--terra);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.22s var(--ease);
    }
    .nav__links a:hover,
    .nav__links a.is-active { color: var(--on-ink); }
    .nav__links a.is-active::after,
    .nav__links a:hover::after { transform: scaleX(1); }

    .nav__right {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .nav__phone {
      display: none;
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--gold);
      letter-spacing: 0.02em;
      transition: color 0.2s;
    }
    .nav__phone:hover { color: #E0A940; }
    @media (min-width: 768px) { .nav__phone { display: block; } }

    /* CTA always visible on desktop, hidden on mobile */
    .nav__cta { display: none; }
    @media (min-width: 1024px) { .nav__cta { display: inline-flex; } }

    /* Hamburger */
    .nav__toggle {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: 0.5rem;
      min-width: 44px; min-height: 44px;
      align-items: center;
      justify-content: center;
    }
    @media (min-width: 1024px) { .nav__toggle { display: none; } }
    .nav__toggle span {
      display: block;
      width: 22px; height: 2px;
      background: var(--surface-card);
      transition: all 0.28s var(--ease);
      transform-origin: center;
    }
    .nav__toggle.is-open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .nav__toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .nav__toggle.is-open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

    /* Mobile drawer */
    .mobile-menu {
      position: fixed;
      top: var(--nav-h); left: 0; right: 0;
      background: var(--ink);
      padding: 1.5rem 1.5rem 2.5rem;
      transform: translateY(-110%);
      /* visibility keeps closed-menu links out of tab order and the a11y
         tree (fixes aria-hidden-focus); delay lets the slide-out finish */
      visibility: hidden;
      transition: transform 0.35s var(--ease), visibility 0s linear 0.35s;
      z-index: 199;
      border-top: 1px solid rgba(255,255,255,0.07);
    }
    .mobile-menu.is-open {
      transform: translateY(0);
      visibility: visible;
      transition: transform 0.35s var(--ease), visibility 0s;
    }
    .mobile-menu__link {
      display: block;
      padding: 1rem 0;
      font-size: 1.125rem;
      font-weight: 500;
      color: rgba(255,255,255,0.85);
      border-bottom: 1px solid rgba(255,255,255,0.07);
      transition: color 0.18s, padding-left 0.18s;
    }
    .mobile-menu__link:hover { color: var(--on-ink); padding-left: 0.5rem; }
    .mobile-menu__link--phone {
      color: var(--gold);
      font-weight: 600;
      border-bottom: none;
    }
    .mobile-menu__cta {
      margin-top: 1.5rem;
      display: block;
      width: 100%;
      text-align: center;
    }

    /* ─── HERO ───────────────────────────────────────── */
    .hero {
      position: relative;
      min-height: 100svh;
      display: grid;
      grid-template-columns: 1fr;
      overflow: hidden;
    }
    @media (min-width: 1024px) {
      .hero { grid-template-columns: 1fr 1fr; }
    }

    .hero__panel-dark {
      background: var(--ink);
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: calc(var(--nav-h) + 4rem) 1.5rem 3.5rem;
    }
    @media (min-width: 768px) {
      .hero__panel-dark { padding: calc(var(--nav-h) + 5rem) 2.5rem 4.5rem; }
    }
    @media (min-width: 1024px) {
      .hero__panel-dark { padding: calc(var(--nav-h) + 6rem) 3.5rem 5rem; }
    }

    .hero__eyebrow  { margin-bottom: 1.75rem; }
    .hero__headline { color: var(--on-ink); margin-bottom: 1.5rem; }
    .hero__headline em { color: var(--terra); }

    .hero__body {
      color: rgba(255,255,255,0.65);
      max-width: 44ch;
      margin-bottom: 2.5rem;
    }
    .hero__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-bottom: 3rem;
    }
    .hero__trust {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem 2rem;
      padding-top: 2rem;
      border-top: 1px solid rgba(255,255,255,0.1);
    }
    .hero__trust-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.8125rem;
      font-weight: 500;
      color: rgba(255,255,255,0.66);
    }
    .hero__trust-item svg { color: var(--gold); flex-shrink: 0; }

    /* Right panel: floating photo collage */
    .hero__panel-img {
      position: relative;
      min-height: 82vw;
      overflow: hidden;
      background: radial-gradient(120% 90% at 68% 22%, #24334D 0%, #1A2332 62%, #141B28 100%);
    }
    @media (min-width: 640px)  { .hero__panel-img { min-height: 62vw; } }
    @media (min-width: 1024px) { .hero__panel-img { min-height: auto; } }

    /* Collage carries the mouse parallax offset (set via JS: --px / --py = -1..1) */
    .hero__collage {
      position: absolute;
      inset: 0;
      transform: translate3d(calc(var(--px, 0) * 16px), calc(var(--py, 0) * 16px), 0);
      transition: transform 0.6s var(--ease);
    }

    /* Framed floating photo tile */
    .hero__tile {
      position: absolute;
      overflow: hidden;
      border: 4px solid rgba(253,252,251,0.92);
      box-shadow: 0 26px 52px -20px rgba(0,0,0,0.6);
      background: var(--sand);
      border-radius: 6px;
      animation: floatY var(--fdur, 6s) ease-in-out infinite;
      animation-delay: var(--fdelay, 0s);
      will-change: transform;
    }
    .hero__tile img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }
    .hero__tile--soft { border-radius: 22px; }
    .hero__tile--pill { border-radius: 60px; }
    @media (max-width: 639px) {
      .hero__tile--hide-sm { display: none; }
      /* Tile positions are inline styles tuned for the tall desktop panel;
         re-lay them out for the short, wide phone panel (needs !important). */
      .hero__panel-img { min-height: 96vw; }
      .hero__tile:nth-child(1) { top: 6%  !important; left: 4%  !important; width: 55% !important; height: 48% !important; }
      .hero__tile:nth-child(2) { top: 12% !important; left: 63% !important; width: 33% !important; height: 36% !important; }
      .hero__tile:nth-child(3) { top: 60% !important; left: 22% !important; width: 42% !important; height: 34% !important; }
    }

    @keyframes floatY {
      0%, 100% { transform: translateY(0)      rotate(var(--rot, 0deg)); }
      50%      { transform: translateY(-15px)  rotate(calc(var(--rot, 0deg) + 1.4deg)); }
    }

    /* ─── PAINT BRUSHSTROKE MOTIFS ───────────────────── */
    /* Hero headline word: hand-painted brush-script */
    .hero__brush-word { position: relative; display: inline-block; }
    .hero__brush-word em {
      font-family: 'Kaushan Script', cursive;
      font-style: normal;
      font-weight: 400;
      color: var(--terra);
      font-size: 1.02em;
      line-height: 1.15;
      display: inline-block;
      padding-right: 0.12em;
      transform: rotate(-2deg);
    }

    /* Section brush accent: a real, textured stroke that paints on across */
    .brush-accent {
      width: 218px;
      max-width: 64%;
      height: 34px;
      margin: 0.25rem 0 1.9rem;
      overflow: visible;
    }
    /* Wipe is on the inner <svg> so the observed .reveal div keeps real geometry
       (clip-path on the observed element collapses it and breaks IntersectionObserver) */
    .brush-accent svg {
      width: 100%; height: 100%; display: block; overflow: visible;
      clip-path: inset(0 100% 0 0);
      transition: clip-path 0.85s cubic-bezier(0.6, 0, 0.2, 1);
    }
    .brush-accent.is-visible svg { clip-path: inset(0 0 0 0); }
    /* Stroke is built from many parallel bristle lines (like a real flat brush) */
    .brush-accent .b  { fill: none; stroke-linecap: round; stroke: #C4622D; }
    .brush-accent .bd { stroke: #A8501F; }
    .brush-accent .bl { stroke: #D98A5A; }

    /* ─── PAINTED BRUSH STROKES ──────────────────────
       Real photographed strokes carried as alpha masks. The element supplies the
       colour, so a stroke repaints itself when the theme flips. One asset, both
       colourways. Replaces the old SVG path + feTurbulence approximation. */
    .brushstroke {
      pointer-events: none;
      background: var(--terra);
      -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
      -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
      -webkit-mask-position: center;  mask-position: center;
      /* The reveal edge is raked, not vertical, because a brush leaves the surface at an
         angle, and a plumb-straight wipe is the thing that gives the trick away. */
      clip-path: polygon(0 0, 0 0, -4% 100%, 0 100%);
      animation: brushOn var(--brush-dur, 1.15s) cubic-bezier(0.52, 0, 0.24, 1) var(--brush-delay, 0.45s) both;
    }
    @keyframes brushOn {
      from { clip-path: polygon(0 0, 0 0, -4% 100%, 0 100%); }
      to   { clip-path: polygon(0 0, 108% 0, 104% 100%, 0 100%); }
    }

    /* Hero background: a large paint stroke that sweeps in behind the copy */
    .hero__paint-sweep {
      position: absolute;
      left: -8%;
      top: 30%;
      width: 118%;
      height: 45%;
      z-index: 0;
      opacity: 0.26;
      -webkit-mask-image: url(images/brush-hero.webp);
              mask-image: url(images/brush-hero.webp);
    }
    /* Keep hero copy above the paint sweep */
    .hero__panel-dark > *:not(.hero__paint-sweep) { position: relative; z-index: 1; }

    /* Scroll indicator */
    .hero__scroll {
      position: absolute;
      bottom: 2rem; right: 2rem;
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.625rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.3);
    }
    @media (max-width: 1023px) { .hero__scroll { display: none; } }
    .hero__scroll-line {
      width: 1px; height: 40px;
      background: linear-gradient(to bottom, rgba(255,255,255,0.35), transparent);
      animation: scrollPulse 2.2s ease-in-out infinite;
    }
    @keyframes scrollPulse {
      0%, 100% { opacity: 0.3; transform: scaleY(1); }
      50%       { opacity: 1;   transform: scaleY(1.1); }
    }

    /* ─── TRUST STRIP ────────────────────────────────── */
    .trust-strip {
      background: var(--ink);
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .trust-strip__inner {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
    }
    .trust-strip__item {
      flex: 1 1 180px;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 1.125rem 1.25rem;
      border-right: 1px solid rgba(255,255,255,0.06);
      font-size: 0.8125rem;
      font-weight: 500;
      color: rgba(255,255,255,0.6);
      min-width: 0;
    }
    .trust-strip__item:last-child { border-right: none; }
    .trust-strip__item svg { color: var(--gold); flex-shrink: 0; }
    /* On very small screens, trust strip stacks in 2-col grid */
    @media (max-width: 599px) {
      .trust-strip__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
      .trust-strip__item { border-right: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); }
      .trust-strip__item:nth-child(2n) { border-right: none; }
      .trust-strip__item:nth-last-child(-n+2) { border-bottom: none; }
    }

    /* ─── SECTIONS ───────────────────────────────────── */
    /* Skip style/layout of below-fold sections until approached (big mobile LCP win) */
    .section, .cta-strip, .footer {
      content-visibility: auto;
      contain-intrinsic-size: auto 900px;
    }

    .section { padding: 6rem 0; scroll-margin-top: calc(var(--nav-h) + 12px); }
    @media (min-width: 1024px) { .section { padding: 8rem 0; } }

    .section--cream    { background: var(--cream); }
    .section--charcoal { background: var(--ink); }
    .section--sand     { background: var(--sand); }
    .section--white    { background: var(--surface-card); }

    /* ─── ABOUT ──────────────────────────────────────── */
    .about__grid {
      display: grid;
      gap: 4rem;
      align-items: center;
    }
    @media (min-width: 1024px) {
      .about__grid { grid-template-columns: 1fr 1fr; gap: 6rem; }
    }

    .about__image-wrap {
      position: relative;
      /* Accommodate the offset accent image */
      padding-bottom: 2.5rem;
      padding-right: 2rem;
    }
    @media (max-width: 767px) {
      .about__image-wrap { padding-right: 0; padding-bottom: 2rem; }
    }

    .about__img-main {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 3;
      background: #BEB0A0;
      border-radius: 2px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      color: rgba(253,252,251,0.5);
    }
    .about__img-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .about__img-main svg { width: 36px; height: 36px; }
    .about__img-main span {
      font-size: 0.6875rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .about__img-accent {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 42%;
      aspect-ratio: 1;
      background: #A89888;
      border: 5px solid var(--cream);
      border-radius: 2px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      color: rgba(253,252,251,0.5);
    }
    .about__img-accent img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .about__img-accent svg { width: 24px; height: 24px; }
    .about__img-accent span {
      font-size: 0.5625rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .about__eyebrow  { margin-bottom: 1rem; }
    .about__heading  { color: var(--text); margin-bottom: 1.75rem; }
    .about__heading em { color: var(--terra); }
    .about__body p   { color: var(--body); margin-bottom: 1.25rem; }
    .about__body p:last-child { margin-bottom: 0; }
    .about__cta { margin-top: 2.5rem; }

    /* ─── SERVICES ───────────────────────────────────── */
    .services__header {
      display: grid;
      gap: 2rem;
      margin-bottom: 3.5rem;
    }
    @media (min-width: 1024px) {
      .services__header { grid-template-columns: 1fr 1fr; align-items: end; }
    }
    .services__heading { color: var(--on-ink); }
    .services__intro   { color: rgba(255,255,255,0.72); }

    .services__grid {
      display: grid;
      gap: 1px;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.07);
    }
    @media (min-width: 600px)  { .services__grid { grid-template-columns: 1fr 1fr; } }
    @media (min-width: 1024px) { .services__grid { grid-template-columns: repeat(4, 1fr); } }

    .service-card {
      background: var(--ink);
      padding: 2.5rem 2rem;
      position: relative;
      transition: background 0.22s;
      overflow: hidden;
    }
    /* Terracotta accent bar that slides up on hover */
    .service-card::before {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 3px;
      background: var(--terra);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s var(--ease);
    }
    .service-card:hover { background: #1E2E42; }
    .service-card:hover::before { transform: scaleX(1); }

    .service-card__icon {
      width: 44px; height: 44px;
      color: var(--terra);
      margin-bottom: 1.5rem;
    }
    .service-card__name {
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--on-ink);
      margin-bottom: 0.75rem;
      line-height: 1.2;
    }
    .service-card__desc { color: rgba(255,255,255,0.68); }

    /* ─── PROCESS ────────────────────────────────────── */
    .process__header { max-width: 580px; margin-bottom: 4rem; }
    .process__heading { color: var(--text); margin-bottom: 0; }

    .process__steps {
      display: grid;
      gap: 3rem;
    }
    @media (min-width: 640px) { .process__steps { grid-template-columns: 1fr 1fr; } }
    @media (min-width: 1024px) { .process__steps { grid-template-columns: repeat(4, 1fr); } }

    .process-step__num {
      font-family: var(--font-display);
      font-size: 5rem;
      font-weight: 700;
      line-height: 1;
      color: rgba(26,35,50,0.07);
      letter-spacing: -0.04em;
      margin-bottom: 0.5rem;
      user-select: none;
    }
    .process-step__title {
      font-family: var(--font-display);
      font-size: 1.1875rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 0.75rem;
      line-height: 1.2;
    }
    .process-step__body { color: #5A6472; }

    /* ─── GALLERY ────────────────────────────────────── */
    .gallery__header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1.5rem;
      margin-bottom: 2.5rem;
    }
    .gallery__heading { color: var(--text); margin-bottom: 0; }

    /* Before/after composites shown at natural aspect ratio (no cropping,
       the BEFORE/AFTER labels sit at the panel edges) */
    .gallery__grid {
      display: grid;
      gap: 0.75rem;
      grid-template-columns: 1fr;
    }
    @media (min-width: 768px) {
      .gallery__grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
    }

    .gallery__item {
      overflow: hidden;
      background: var(--sand);
      position: relative;
      border-radius: 2px;
    }
    /* The square composite gets its own centered row */
    @media (min-width: 768px) {
      .gallery__item--square {
        grid-column: 1 / -1;
        width: 100%;
        max-width: 640px;
        justify-self: center;
      }
    }

    /* Caption: visible on hover (desktop), always shown on touch */
    .gallery__caption {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      padding: 2rem 1rem 0.875rem;
      font-size: 0.6875rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.85);
      background: linear-gradient(transparent, rgba(26,35,50,0.6));
      opacity: 0;
      transition: opacity 0.25s;
    }
    .gallery__item:hover .gallery__caption { opacity: 1; }
    /* Always show on touch devices */
    @media (hover: none) {
      .gallery__caption { opacity: 1; }
    }

    .gallery__item img {
      width: 100%;
      height: auto;
      display: block;
      transition: transform 0.55s var(--ease);
    }
    .gallery__item:hover img { transform: scale(1.02); }

    /* ─── TESTIMONIALS ───────────────────────────────── */
    .testimonials__header { margin-bottom: 3rem; }
    .testimonials__heading { color: var(--text); }

    .testimonials__grid {
      display: grid;
      gap: 1.5rem;
    }
    @media (min-width: 768px) { .testimonials__grid { grid-template-columns: repeat(3, 1fr); } }

    .testimonial {
      padding: 2rem 1.75rem;
      border-left: 3px solid var(--terra);
      background: var(--cream);
      transition: border-color 0.2s;
    }
    .testimonial:hover { border-color: var(--gold); }
    .testimonial__stars {
      display: flex;
      gap: 2px;
      margin-bottom: 1rem;
      color: var(--gold);
    }
    .testimonial__quote {
      font-family: var(--font-display);
      font-size: 1.0625rem;
      font-style: italic;
      line-height: 1.65;
      color: var(--text);
      margin-bottom: 1.5rem;
    }
    .testimonial__author {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--terra);
      letter-spacing: 0.03em;
    }
    .testimonial__location {
      font-size: 0.8125rem;
      color: var(--muted);
      margin-top: 0.25rem;
    }

    /* ─── PRE-FOOTER CTA STRIP ───────────────────────── */
    .cta-strip {
      background: var(--terra);
      padding: 5rem 0;
    }
    .cta-strip__inner {
      display: grid;
      gap: 2.5rem;
      align-items: center;
    }
    @media (min-width: 1024px) {
      .cta-strip__inner { grid-template-columns: 1fr auto; gap: 4rem; }
    }
    .cta-strip__heading {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 3.25rem);
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: -0.02em;
      color: var(--on-ink);
    }
    .cta-strip__sub {
      margin-top: 0.75rem;
      font-size: 1.0625rem;
      color: rgba(255,255,255,0.92);
      max-width: 52ch;
    }
    .cta-strip__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      flex-shrink: 0;
    }
    .btn--white { background: var(--surface-card); color: var(--terra-ink); }
    .btn--white:hover { background: var(--cream); }
    .btn--terra-outline {
      background: transparent;
      color: var(--on-ink);
      border: 1.5px solid rgba(255,255,255,0.5);
    }
    .btn--terra-outline:hover { border-color: var(--on-ink); background: rgba(255,255,255,0.1); }

    /* ─── CONTACT ────────────────────────────────────── */
    .contact__grid {
      max-width: 720px;
      margin: 0 auto;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .contact__heading    { color: var(--on-ink); }
    .contact__heading em { color: var(--terra); }
    .contact__body { color: rgba(255,255,255,0.6); margin: 1.5rem auto 2.5rem; max-width: 52ch; }

    /* Contact details as a centered wrapping row above the form */
    .contact__details {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1.5rem 2.5rem;
      margin-bottom: 3rem;
    }
    .contact__detail {
      display: flex; align-items: flex-start; gap: 0.75rem;
      text-align: left;
      font-size: 0.9375rem;
      color: rgba(255,255,255,0.7);
    }
    .contact__detail svg { color: var(--terra); flex-shrink: 0; margin-top: 2px; }
    .contact__detail strong { color: var(--on-ink); display: block; }
    /* Phone/email are primary mobile actions: give them a real tap target */
    .contact__detail strong a { display: inline-block; padding: 0.4rem 0.25rem; margin: -0.4rem -0.25rem; }
    .contact__detail-sub {
      font-size: 0.8125rem;
      color: rgba(255,255,255,0.62);
      margin-top: 2px;
    }

    /* Form card */
    .contact__form {
      background: var(--surface-card);
      padding: 2.5rem 2rem;
      width: 100%;
      max-width: 680px;
      margin: 0 auto;
      text-align: left;
    }
    @media (min-width: 768px) { .contact__form { padding: 3rem 2.75rem; } }

    .form__title {
      font-family: var(--font-display);
      font-size: 1.625rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 0.5rem;
    }
    /* Live character count under the project textarea. */
    .form__count {
      margin-top: 0.4rem;
      font-size: 0.75rem;
      letter-spacing: 0.02em;
      color: var(--muted);
      text-align: right;
    }
    .form__count.is-low { color: var(--gold); }
    .form__required-note {
      font-size: 0.8125rem;
      color: var(--muted);
      margin-bottom: 1.75rem;
    }
    .form__required-note .form__req { color: var(--terra); }

    .form__row {
      display: grid;
      gap: 1rem;
      margin-bottom: 1rem;
    }
    @media (min-width: 540px) { .form__row { grid-template-columns: 1fr 1fr; } }

    .form__group { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
    .form__group:last-of-type { margin-bottom: 0; }

    .form__label {
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--text);
    }
    .form__req { color: var(--terra); }

    .form__input,
    .form__select,
    .form__textarea {
      width: 100%;
      padding: 0.8125rem 1rem;
      font-family: var(--font-body);
      font-size: 1rem;
      color: var(--text);
      background: var(--cream);
      border: 1.5px solid #D4C9BE;
      border-radius: 2px;
      min-height: 48px;
      transition: border-color 0.2s, box-shadow 0.2s;
      appearance: none;
      -webkit-appearance: none;
    }
    .form__input::placeholder,
    .form__textarea::placeholder { color: #A8A09A; }
    .form__input:hover,
    .form__select:hover,
    .form__textarea:hover { border-color: #B8A89C; }
    .form__input:focus,
    .form__select:focus,
    .form__textarea:focus {
      outline: none;
      border-color: var(--terra);
      box-shadow: 0 0 0 3px rgba(196,98,45,0.12);
    }
    /* Error state */
    .form__input.has-error,
    .form__select.has-error,
    .form__textarea.has-error {
      border-color: #C0392B;
      box-shadow: 0 0 0 3px rgba(192,57,43,0.1);
    }
    .form__error {
      font-size: 0.75rem;
      color: #C0392B;
      font-weight: 500;
      margin-top: -0.25rem;
      display: none;
    }
    .form__error.is-visible { display: block; }

    .form__textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
    .form__select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231A2332' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 1rem center;
      padding-right: 2.5rem;
    }

    .form__submit { margin-top: 1.75rem; }
    .form__submit .btn { width: 100%; font-size: 0.875rem; padding: 1rem 1.5rem; min-height: 52px; }

    /* Success state */
    .form__success {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 3rem 1.5rem;
      gap: 1rem;
    }
    .form__success.is-visible { display: flex; }
    .form__success svg { color: #2D6A4F; width: 48px; height: 48px; }
    .form__success-title {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text);
    }
    .form__success-body { color: var(--muted); max-width: 36ch; }

    /* ─── FOOTER ─────────────────────────────────────── */
    .footer { background: #0D1623; padding: 4.5rem 0 2.5rem; }
    .footer__grid {
      display: grid;
      gap: 3rem;
      margin-bottom: 3.5rem;
    }
    @media (min-width: 768px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr; } }

    .footer__brand-name {
      font-family: var(--font-display);
      font-size: 1.375rem;
      font-weight: 700;
      color: var(--on-ink);
      display: block;
    }
    .footer__brand-sub {
      font-size: 0.625rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold);
      display: block;
      margin: 4px 0 1.25rem;
    }
    .footer__tagline {
      font-size: 0.9375rem;
      line-height: 1.7;
      color: rgba(255,255,255,0.62);
      margin-bottom: 1.5rem;
    }
    .footer__phone {
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--gold);
      letter-spacing: 0.02em;
      transition: color 0.2s;
    }
    .footer__phone:hover { color: #E0A940; }
    .footer__col-heading {
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 1.25rem;
    }
    .footer__links { display: flex; flex-direction: column; gap: 0.25rem; }
    .footer__link {
      font-size: 0.9375rem;
      color: rgba(255,255,255,0.65);
      transition: color 0.18s;
      /* Comfortable thumb target without changing the visual rhythm */
      display: inline-block;
      padding: 0.45rem 0;
      align-self: flex-start;
    }
    .footer__link:hover { color: rgba(255,255,255,0.85); }
    .footer__bottom {
      border-top: 1px solid rgba(255,255,255,0.07);
      padding-top: 1.75rem;
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: space-between;
      align-items: center;
    }
    .footer__copy { font-size: 0.8125rem; color: rgba(255,255,255,0.55); }
    .footer__lic  { font-size: 0.8125rem; color: rgba(255,255,255,0.55); }
    /* Keep the fixed back-to-top button from covering the license line */
    @media (max-width: 640px) { .footer__bottom { padding-right: 4rem; } }

    /* Back-to-top */
    .back-top {
      position: fixed;
      bottom: 2rem; right: 2rem;
      width: 44px; height: 44px;
      background: var(--ink);
      color: var(--on-ink);
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255,255,255,0.12);
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.3s, transform 0.3s, background 0.2s;
      pointer-events: none;
      z-index: 50;
    }
    .back-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .back-top:hover { background: #0F1826; }
    .back-top:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }

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

    /* Hero elements: visible immediately on load */
    .reveal--hero { opacity: 1; transform: none; }

    .reveal-delay-1 { transition-delay: 0.08s; }
    .reveal-delay-2 { transition-delay: 0.16s; }
    .reveal-delay-3 { transition-delay: 0.24s; }
    .reveal-delay-4 { transition-delay: 0.32s; }

    /* Targeted reduced-motion (no wildcard !important) */
    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1; transform: none; transition: none; }
      .hero__scroll-line { animation: none; }
      .gallery__item img { transition: none; }
      .service-card, .service-card::before { transition: none; }
      .mobile-menu { transition: none; }
      .nav { transition: none; }
      .hero__collage { transform: none; transition: none; }
      .hero__tile { animation: none; }
      .brush-accent svg { clip-path: none; transition: none; }
      .brushstroke { animation: none; clip-path: none; }
    }

/* ─── MODE SWITCH ────────────────────────────────
       Replaces the old paint-swatch dot, which read as decoration rather than a
       control. This is unmistakably a switch: a track, a knob that travels, and the
       current mode named by the icon riding in the knob. The paint idea lives in the
       track, which carries a real brush texture and fills with terra as it flips. */
    .mode-switch {
      --sw-w: 64px;
      --sw-h: 32px;
      --sw-pad: 3px;
      --sw-knob: calc(var(--sw-h) - (var(--sw-pad) * 2) - 3px);
      position: relative;
      flex-shrink: 0;
      padding: 0;
      border: none;
      background: none;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
    }
    .mode-switch__track {
      position: relative;
      display: block;
      width: var(--sw-w);
      height: var(--sw-h);
      border-radius: 999px;
      border: 1.5px solid rgba(255, 255, 255, 0.32);
      background: rgba(255, 255, 255, 0.10);
      overflow: hidden;
      transition: border-color 0.25s, background 0.35s;
    }
    /* The painted fill: a real brush texture that sweeps across as the mode flips. */
    .mode-switch__track::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--terra);
      -webkit-mask-image: url(images/brush-hero.webp);
              mask-image: url(images/brush-hero.webp);
      -webkit-mask-size: 190% 260%;   mask-size: 190% 260%;
      -webkit-mask-position: 100% 50%; mask-position: 100% 50%;
      -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
      opacity: 0;
      transition: opacity 0.35s ease, -webkit-mask-position 0.5s var(--ease), mask-position 0.5s var(--ease);
    }
    [data-theme="dark"] .mode-switch__track::before {
      opacity: 0.55;
      -webkit-mask-position: 0% 50%;
              mask-position: 0% 50%;
    }
    .mode-switch:hover .mode-switch__track { border-color: var(--gold); }
    .mode-switch:focus-visible { outline: none; }
    .mode-switch:focus-visible .mode-switch__track {
      outline: 2px solid var(--terra);
      outline-offset: 3px;
    }
    .mode-switch:active .mode-switch__knob { scale: 1.14; }

    .mode-switch__knob {
      position: absolute;
      top: 50%;
      left: var(--sw-pad);
      width: var(--sw-knob);
      height: var(--sw-knob);
      margin-top: calc(var(--sw-knob) / -2);
      border-radius: 999px;
      background: #FDFCFB;
      box-shadow: 0 2px 7px rgba(0, 0, 0, 0.45);
      display: grid;
      place-items: center;
      transition: transform 0.42s var(--ease), background 0.35s, scale 0.15s;
    }
    [data-theme="dark"] .mode-switch__knob {
      transform: translateX(calc(var(--sw-w) - var(--sw-h) + 1px));
      background: var(--gold);
    }
    /* Both icons ride in the knob; only the current mode's icon is shown. */
    .mode-switch__icon {
      grid-area: 1 / 1;
      width: 13px;
      height: 13px;
      color: #1A2332;
      transition: opacity 0.25s, transform 0.35s var(--ease);
    }
    .mode-switch__icon--moon { opacity: 0; transform: rotate(-55deg) scale(0.6); }
    [data-theme="dark"] .mode-switch__icon--sun  { opacity: 0; transform: rotate(55deg) scale(0.6); }
    [data-theme="dark"] .mode-switch__icon--moon { opacity: 1; transform: none; }

    /* Mobile menu: same control, with a written label beside it. */
    .mobile-menu__theme {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      width: 100%;
      min-height: 48px;
      background: none;
      border: none;
      padding: 0;
      font-family: inherit;
      font-size: 1.25rem;
      font-weight: 500;
      color: var(--on-ink);
      text-align: left;
      cursor: pointer;
    }
    @media (prefers-reduced-motion: reduce) {
      .mode-switch__knob,
      .mode-switch__icon,
      .mode-switch__track::before { transition: none; }
    }


    /* ─── THE REPAINT TRANSITION ─────────────────────
       A photographed wet paint edge rolled across the viewport, revealing the new
       colourway underneath instead of cross-fading to it. The mask is 300vw wide:
       its opaque region (~145vw) covers any viewport at the end of the sweep, and
       its clear region (~137vw) hides it completely at the start. Scoped to
       .is-repainting so it only ever applies to this one transition. */
    @media (prefers-reduced-motion: no-preference) {
      :root.is-repainting::view-transition-image-pair(root) { isolation: none; }
      :root.is-repainting::view-transition-old(root),
      :root.is-repainting::view-transition-new(root) {
        animation: none;
        mix-blend-mode: normal;
      }
      :root.is-repainting::view-transition-new(root) {
        animation: paintRollOn var(--repaint-dur) cubic-bezier(0.42, 0, 0.22, 1) forwards;
        -webkit-mask-image: url(images/paint-wipe.webp);
                mask-image: url(images/paint-wipe.webp);
        -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
        -webkit-mask-size: 300vw 100%;  mask-size: 300vw 100%;
      }
      @keyframes paintRollOn {
        from { -webkit-mask-position: -170vw 0; mask-position: -170vw 0; }
        to   { -webkit-mask-position: 0 0;      mask-position: 0 0; }
      }
    }

    /* ─── BEFORE / AFTER MARKERS ─────────────────────
       These used to be baked into each JPEG, in five different styles, sizes and
       corners, plus a stray orange dot on two of them. They are now one rule over
       clean photos, so every tile matches and the markers repaint with the theme.
       Each composite is an exact 50/50 vertical stack: BEFORE on top, AFTER below. */
    .gallery__item--ba::before,
    .gallery__item--ba::after {
      position: absolute;
      left: 0;
      z-index: 2;
      padding: 0.45rem 0.85rem;
      background: var(--ink);
      color: var(--on-ink);
      font-family: var(--font-body);
      font-size: 0.625rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      line-height: 1;
      border-radius: 0 0 3px 0;
      pointer-events: none;
    }
    .gallery__item--ba::before { content: 'Before'; top: 0; }
    /* Composites are not all split at exactly half, so each tile passes its own
       measured seam position; 50% is the fallback. */
    .gallery__item--ba::after  { content: 'After';  top: var(--seam, 50%); }

    /* ─── SERVICE AREA RIBBON ────────────────────────
       Sixty-one real service areas travelling as two rows in opposite directions at
       different speeds, which is what keeps it from reading like a stock logo marquee.
       Motion pauses on hover so a visitor can actually stop and find their own town,
       and it is removed entirely under prefers-reduced-motion, where the rows become
       a plain wrapped list. The :hover highlight is feedback for a real interaction:
       hovering pauses the ribbon, so lighting the name under the cursor confirms what
       you stopped on. Cursor stays default, because these are still not links. */
    .areas {
      position: relative;
      padding: 5rem 0 5.5rem;
      background: var(--ink);
      overflow: hidden;
    }
    .areas__head { text-align: center; margin-bottom: 3rem; }
    .areas__head .eyebrow { margin-bottom: 0.875rem; }
    .areas__heading { color: var(--on-ink); }
    .areas__heading em { color: var(--terra); }

    .areas__ribbon {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      /* Soften both ends so names travel out of view instead of being guillotined. */
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
              mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    }
    .areas__row { display: flex; width: max-content; }
    .areas__track {
      display: flex;
      align-items: center;
      flex: 0 0 auto;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    /* Shifting by exactly one track width loops seamlessly against its duplicate. */
    .areas__row--l .areas__track { animation: areasL 78s linear infinite; }
    .areas__row--r .areas__track { animation: areasR 94s linear infinite; }
    .areas__ribbon:hover .areas__track { animation-play-state: paused; }

    .areas__item {
      font-family: var(--font-display);
      font-size: clamp(1.35rem, 3.1vw, 2.5rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.25;
      /* Two-word places must never break mid-name. */
      white-space: nowrap;
      padding: 0 1.1rem;
      color: rgba(253, 252, 251, 0.22);
      cursor: default;
      transition: color 0.25s ease;
    }
    .areas__item.is-lit { color: rgba(253, 252, 251, 0.72); }
    .areas__item:hover { color: var(--gold); }
    .areas__item::after {
      content: '·';
      margin-left: 2.2rem;
      color: var(--terra);
      opacity: 0.55;
    }

    @keyframes areasL { to { transform: translateX(-100%); } }
    @keyframes areasR { from { transform: translateX(-100%); } to { transform: translateX(0); } }

    @media (prefers-reduced-motion: reduce) {
      .areas__row--l .areas__track,
      .areas__row--r .areas__track { animation: none; }
      /* With no motion the duplicate track is dead weight and would read twice. */
      .areas__track[aria-hidden="true"] { display: none; }
      .areas__row { width: 100%; flex-wrap: wrap; justify-content: center; }
      .areas__track { flex-wrap: wrap; justify-content: center; }
    }