:root {
    --ink: #241C15;
    --ink-soft: #5B4F42;
    --ink-faint: #8A7A67;
    --paper: #ECE3D0;
    --paper-raised: #E0D4B8;
    --paper-line: rgba(36,28,21,0.16);
    --brass: #7C5E2C;
    --brass-strong: #5E4620;
    --band-bg: #1E160F;
    --band-bg-raised: #2A2015;
    --band-fg: #EEE3CC;
    --band-fg-soft: #B9A98C;
    --band-line: rgba(238,227,204,0.16);
    --band-accent: #C69A55;
    --band-accent-strong: #E0B36E;
    --focus: #C69A55;
    --shadow: 0 18px 40px -22px rgba(20,14,8,0.45);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ink: #ECE3D0;
      --ink-soft: #C3B69E;
      --ink-faint: #8F8168;
      --paper: #171009;
      --paper-raised: #241B11;
      --paper-line: rgba(236,227,208,0.14);
      --brass: #D3A968;
      --brass-strong: #E7C083;
      --band-bg: #100B06;
      --band-bg-raised: #1D160D;
      --band-fg: #EEE3CC;
      --band-fg-soft: #A99A80;
      --band-line: rgba(238,227,204,0.14);
      --band-accent: #D3A968;
      --band-accent-strong: #E7C083;
      --shadow: 0 18px 40px -20px rgba(0,0,0,0.6);
    }
  }

  :root[data-theme="dark"] {
    --ink: #ECE3D0;
    --ink-soft: #C3B69E;
    --ink-faint: #8F8168;
    --paper: #171009;
    --paper-raised: #241B11;
    --paper-line: rgba(236,227,208,0.14);
    --brass: #D3A968;
    --brass-strong: #E7C083;
    --band-bg: #100B06;
    --band-bg-raised: #1D160D;
    --band-fg: #EEE3CC;
    --band-fg-soft: #A99A80;
    --band-line: rgba(238,227,208,0.14);
    --band-accent: #D3A968;
    --band-accent-strong: #E7C083;
    --shadow: 0 18px 40px -20px rgba(0,0,0,0.6);
  }

  * { box-sizing: border-box; }

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }

  img { max-width: 100%; }

  h1, h2, h3 {
    font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    text-wrap: balance;
    line-height: 0.95;
    margin: 0;
    color: inherit;
  }

  a { color: inherit; }

  .mono {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
  }

  .eyebrow {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brass);
    display: block;
    margin: 0 0 0.85rem;
  }

  .band .eyebrow { color: var(--band-accent); }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  html { scroll-padding-top: 84px; }

  a:focus-visible, button:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
  }

  .wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
  }

  /* ---------- Nav ---------- */
  .site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--paper-line);
    box-shadow: 0 6px 16px -8px rgba(0,0,0,0.25);
  }
  @media (prefers-reduced-motion: no-preference) {
    .site-nav { transition: transform 450ms ease-out; }
  }

  .nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 0.85rem;
  }

  .brand {
    display: flex;
    align-items: center;
    line-height: 1;
    text-decoration: none;
    color: var(--ink);
  }

  .brand img {
    height: 64px;
    width: auto;
  }

  .brand .logo-light { display: block; }
  .brand .logo-dark { display: none; }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand .logo-light { display: none; }
    :root:not([data-theme="light"]) .brand .logo-dark { display: block; }
  }
  :root[data-theme="dark"] .brand .logo-light { display: none; }
  :root[data-theme="dark"] .brand .logo-dark { display: block; }

  .brand-mark {
    font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .brand-sub {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brass);
    margin-top: 0.3rem;
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav-links a {
    text-decoration: none;
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding-block: 0.25rem;
    border-bottom: 1px solid transparent;
    transition: color 150ms ease, border-color 150ms ease;
  }

  .nav-links a:hover { color: var(--brass); border-color: var(--brass); }

  .nav-call {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--band-accent);
    background-image: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 60%);
    text-decoration: none;
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.55rem 0.95rem;
    border-radius: 2px;
    white-space: nowrap;
    box-shadow: 0 2px 0 color-mix(in srgb, var(--band-accent) 60%, black), 0 5px 10px -4px rgba(0,0,0,0.4);
    transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
  }
  .nav-links a.nav-call,
  .nav-links a.nav-call:hover {
    color: #1E160F;
    border-bottom-color: transparent;
  }
  .nav-call:hover {
    background-color: color-mix(in srgb, var(--band-accent) 88%, black);
    box-shadow: 0 3px 0 color-mix(in srgb, var(--band-accent) 60%, black), 0 8px 14px -4px rgba(0,0,0,0.45);
  }
  @media (prefers-reduced-motion: no-preference) {
    .nav-call:hover { transform: translateY(-1px); }
  }
  .nav-call:active {
    background-color: color-mix(in srgb, var(--band-accent) 78%, black);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--band-accent) 60%, black), 0 2px 6px -2px rgba(0,0,0,0.4);
    transform: translateY(1px);
  }

  .nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--paper-line);
    border-radius: 2px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink);
    flex-shrink: 0;
  }
  .nav-toggle svg { width: 20px; height: 20px; }

  @media (max-width: 760px) {
    .nav-links { display: none; }
    .nav-toggle { display: inline-flex; }
    .nav-links.open {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--paper);
      border-bottom: 1px solid var(--paper-line);
      padding: 0.5rem clamp(1.25rem, 4vw, 3rem) 1.25rem;
    }
    .nav-links.open a {
      width: 100%;
      padding-block: 0.75rem;
      border-bottom: 1px solid var(--paper-line);
    }
    .nav-links.open .nav-call { margin-top: 0.75rem; }
  }

  /* ---------- Band (dark sections) ---------- */
  .band {
    background: var(--band-bg);
    color: var(--band-fg);
  }

  /* ---------- Hero ---------- */
  .hero {
    padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 6vw, 4.5rem);
    background-image: linear-gradient(180deg, rgba(20,14,8,0.72), rgba(15,11,6,0.9)), url('/images/hero-kitchen.jpg');
    background-size: cover;
    background-position: center 65%;
  }

  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: end;
  }

  .hero h1 {
    font-size: clamp(2.75rem, 3.2vw + 2rem, 5.5rem);
    font-weight: 900;
    max-width: 14ch;
  }

  .hero-tagline {
    font-size: clamp(1.05rem, 0.5vw + 1rem, 1.25rem);
    color: var(--band-fg-soft);
    max-width: 46ch;
    margin: 1.25rem 0 0;
  }

  .hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2rem;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.9rem 1.5rem;
    border-radius: 2px;
    transition: transform 150ms ease, background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  }
  @media (prefers-reduced-motion: no-preference) {
    .btn:hover { transform: translateY(-2px); }
    .btn:active { transform: translateY(1px); }
  }

  .btn-primary {
    background-color: var(--band-accent);
    background-image: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0) 60%);
    color: #1E160F;
    box-shadow: 0 3px 0 color-mix(in srgb, var(--band-accent) 60%, black), 0 10px 20px -8px rgba(0,0,0,0.5);
  }
  .btn-primary:hover {
    background-color: var(--band-accent-strong);
    box-shadow: 0 4px 0 color-mix(in srgb, var(--band-accent-strong) 60%, black), 0 14px 26px -8px rgba(0,0,0,0.55);
  }
  .btn-primary:active {
    box-shadow: 0 1px 0 color-mix(in srgb, var(--band-accent) 60%, black), 0 4px 10px -4px rgba(0,0,0,0.45);
  }

  .btn-ghost {
    border: 1px solid var(--band-line);
    color: var(--band-fg);
    background-color: transparent;
    box-shadow: 0 2px 8px -4px rgba(0,0,0,0.3);
  }
  .btn-ghost:hover {
    border-color: var(--band-accent);
    color: var(--band-accent-strong);
    background-color: color-mix(in srgb, var(--band-accent) 12%, transparent);
    box-shadow: 0 6px 16px -6px rgba(0,0,0,0.4);
  }
  .btn-ghost:active { box-shadow: 0 2px 6px -3px rgba(0,0,0,0.35); }

  /* Ghost button for light (non-band) sections, e.g. About */
  .btn-ghost-light {
    border: 1px solid var(--paper-line);
    color: var(--ink);
    background-color: transparent;
    box-shadow: 0 2px 8px -4px rgba(0,0,0,0.12);
  }
  .btn-ghost-light:hover {
    border-color: var(--brass);
    color: var(--brass-strong);
    background-color: color-mix(in srgb, var(--brass) 10%, transparent);
    box-shadow: 0 6px 16px -6px rgba(0,0,0,0.18);
  }
  .btn-ghost-light:active { box-shadow: 0 2px 6px -3px rgba(0,0,0,0.15); }

  .hero-card {
    border: 1px solid var(--band-line);
    border-radius: 3px;
    padding: 1.5rem;
    background: var(--band-bg-raised);
  }

  .spec-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.7rem;
    border-bottom: 1px solid var(--band-line);
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 0.82rem;
  }
  .spec-row:last-child { border-bottom: none; }
  .spec-label {
    color: var(--band-fg-soft);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.7rem;
    flex-shrink: 0;
    padding-top: 0.1rem;
  }
  .spec-value { text-align: right; color: var(--band-fg); }
  .spec-value a { text-decoration: none; }
  .spec-value a:hover { color: var(--band-accent); }

  /* ---------- Joinery divider ---------- */
  .joinery {
    height: 14px;
    background-image:
      linear-gradient(135deg, transparent 47%, var(--paper-line) 47% 53%, transparent 53%),
      linear-gradient(45deg, transparent 47%, var(--paper-line) 47% 53%, transparent 53%);
    background-size: 28px 28px;
    background-repeat: repeat-x;
    background-position: center;
  }
  .band + .joinery, .joinery.on-band {
    background-image:
      linear-gradient(135deg, transparent 47%, var(--band-line) 47% 53%, transparent 53%),
      linear-gradient(45deg, transparent 47%, var(--band-line) 47% 53%, transparent 53%);
    background-color: var(--band-bg);
  }

  /* ---------- Section shell ---------- */
  section { padding-block: clamp(3.5rem, 7vw, 5.5rem); }

  .section-head {
    max-width: 60ch;
    margin-bottom: clamp(2rem, 4vw, 3rem);
  }

  .section-head h2 {
    font-size: clamp(2rem, 1.6vw + 1.4rem, 3rem);
    font-weight: 800;
  }

  [data-reveal] { opacity: 1; }
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 600ms ease, transform 600ms ease;
    }
    [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
  }

  /* ---------- Gallery Carousel ---------- */
  .gallery-section { padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 4rem); }

  .gallery-carousel {
    position: relative;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
  }

  .gallery-track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0.5rem clamp(1.25rem, 8vw, 12vw) 1rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .gallery-track::-webkit-scrollbar { display: none; }

  .gallery-slide {
    flex: 0 0 min(640px, 82vw);
    scroll-snap-align: center;
    margin: 0;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    background: var(--paper-raised);
    box-shadow: 0 14px 30px -14px rgba(0,0,0,0.35);
  }

  .gallery-slide img {
    display: block;
    width: 100%;
    height: min(64vw, 440px);
    object-fit: cover;
  }

  .gallery-slide figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.5rem 1.25rem 0.9rem;
    background: linear-gradient(180deg, transparent, rgba(20,14,8,0.82) 70%);
    color: #EEE3CC;
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
  }

  .gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background-color: var(--band-accent);
    background-image: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 60%);
    color: #1E160F;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 0 color-mix(in srgb, var(--band-accent) 60%, black), 0 8px 16px -6px rgba(0,0,0,0.45);
    transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
  }
  .gallery-arrow:hover { background-color: color-mix(in srgb, var(--band-accent) 88%, black); }
  .gallery-arrow:active { transform: translateY(-50%) translateY(1px); }
  .gallery-arrow svg { width: 20px; height: 20px; }
  .gallery-prev { left: clamp(0.25rem, 3vw, 1.5rem); }
  .gallery-next { right: clamp(0.25rem, 3vw, 1.5rem); }

  @media (max-width: 640px) {
    .gallery-arrow { display: none; }
  }

  .gallery-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
  }
  .gallery-dots button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: var(--paper-line);
    cursor: pointer;
  }
  .gallery-dots button.is-active { background: var(--brass); }

  /* ---------- About ---------- */
  .about-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 5vw, 4rem);
  }

  .about-lede {
    font-size: clamp(1.4rem, 1vw + 1.1rem, 1.9rem);
    font-family: 'Source Serif 4', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
    margin: 0;
  }

  .about-body p {
    font-size: 1.05rem;
    color: var(--ink-soft);
    max-width: 62ch;
    margin: 0 0 1.1rem;
  }

  .about-sign {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--brass);
    margin-top: 1.5rem;
  }

  .credentials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 2rem;
    list-style: none;
    padding: 0;
  }
  .credentials li {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid var(--paper-line);
    color: var(--ink-soft);
    padding: 0.5rem 0.85rem;
    border-radius: 2px;
  }

  /* ---------- Services ---------- */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.25rem;
  }

  .service-card {
    background: var(--paper-raised);
    border: 1px solid var(--paper-line);
    border-radius: 3px;
    padding: 1.75rem;
  }

  .service-num {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 0.72rem;
    color: var(--brass);
    letter-spacing: 0.08em;
  }

  .service-card h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 0.6rem;
  }

  .service-card p {
    font-size: 0.95rem;
    color: var(--ink-soft);
    margin: 0.6rem 0 0;
  }

  /* ---------- Reviews ---------- */
  .reviews-empty {
    background: var(--paper-raised);
    border: 1px dashed var(--paper-line);
    border-radius: 4px;
    padding: clamp(2.25rem, 5vw, 3.5rem);
    text-align: center;
    max-width: 620px;
    margin: 0 auto;
  }

  .stars {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    margin-bottom: 1.25rem;
  }
  .stars svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: var(--ink-faint);
    stroke-width: 1.4;
  }

  .reviews-empty h3 {
    font-size: 1.6rem;
    font-weight: 700;
  }

  .reviews-empty p {
    color: var(--ink-soft);
    max-width: 42ch;
    margin: 0.75rem auto 0;
  }

  /* ---------- Contact / Quote ---------- */
  .quote-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 1.05fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
  }

  .quote-heading {
    font-size: clamp(2.25rem, 1.8vw + 1.8rem, 3.75rem);
    font-weight: 900;
    max-width: 16ch;
  }

  .quote-sub {
    color: var(--band-fg-soft);
    font-size: 1.05rem;
    max-width: 46ch;
    margin: 1.1rem 0 0;
  }

  .quote-rows {
    margin-top: 2.25rem;
    border-top: 1px solid var(--band-line);
  }

  .quote-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-block: 1.15rem;
    border-bottom: 1px solid var(--band-line);
  }

  .quote-row svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 0.2rem;
    stroke: var(--band-accent);
    fill: none;
  }

  .quote-row-label {
    display: block;
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--band-fg-soft);
    margin-bottom: 0.35rem;
  }

  .quote-row-value {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--band-fg);
    line-height: 1.35;
  }
  .quote-row-value a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
  }
  .quote-row-value a:hover { border-color: var(--band-accent); }

  /* Deliberately fixed light card, constant in both themes for contrast against the dark band */
  .quote-card {
    --quote-bg: #F1E9D8;
    --quote-fg: #241C15;
    --quote-muted: #6B5D4B;
    --quote-border: rgba(36,28,21,0.18);
    --quote-field-bg: #FBF7EE;
    --quote-accent: #7C5E2C;
    --quote-accent-strong: #5E4620;
    background: var(--quote-bg);
    color: var(--quote-fg);
    border-radius: 4px;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    box-shadow: 0 24px 50px -24px rgba(0,0,0,0.55);
  }

  .quote-card .eyebrow { color: var(--quote-accent); margin-bottom: 1.1rem; }

  .quote-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
  }

  .quote-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .quote-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .quote-field label {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--quote-muted);
  }

  .quote-field input,
  .quote-field select,
  .quote-field textarea {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 0.95rem;
    color: var(--quote-fg);
    background: var(--quote-field-bg);
    border: 1px solid var(--quote-border);
    border-radius: 2px;
    padding: 0.7rem 0.85rem;
    width: 100%;
  }
  .quote-field textarea { resize: vertical; min-height: 110px; }
  .quote-field input:focus,
  .quote-field select:focus,
  .quote-field textarea:focus {
    outline: 2px solid var(--quote-accent);
    outline-offset: 1px;
    border-color: var(--quote-accent);
  }

  .quote-submit {
    width: 100%;
    justify-content: center;
    background-color: var(--quote-accent);
    background-image: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 60%);
    color: #F6EFE0;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    box-shadow: 0 3px 0 color-mix(in srgb, var(--quote-accent) 60%, black), 0 10px 20px -8px rgba(0,0,0,0.4);
    transition: transform 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
  }
  .quote-submit:hover {
    background-color: var(--quote-accent-strong);
    box-shadow: 0 4px 0 color-mix(in srgb, var(--quote-accent-strong) 60%, black), 0 14px 24px -8px rgba(0,0,0,0.45);
  }
  @media (prefers-reduced-motion: no-preference) {
    .quote-submit:hover { transform: translateY(-2px); }
    .quote-submit:active { transform: translateY(1px); }
  }
  .quote-submit:active {
    box-shadow: 0 1px 0 color-mix(in srgb, var(--quote-accent) 60%, black), 0 4px 10px -4px rgba(0,0,0,0.35);
  }

  .quote-disclaimer {
    font-size: 0.78rem;
    color: var(--quote-muted);
    text-align: center;
    margin-top: 0.9rem;
  }

  .quote-status {
    font-size: 0.85rem;
    color: var(--quote-accent-strong);
    text-align: center;
    margin-top: 0.75rem;
    min-height: 1.2em;
  }

  @media (max-width: 520px) {
    .quote-form-grid { grid-template-columns: 1fr; }
  }

  /* ---------- Footer ---------- */
  footer.band { padding-block: 3rem 2.25rem; }

  .footer-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--band-line);
  }

  .footer-brand .brand-mark { color: var(--band-fg); font-size: 1.7rem; }
  .footer-tagline {
    color: var(--band-fg-soft);
    font-size: 0.9rem;
    max-width: 32ch;
    margin-top: 0.6rem;
  }

  .social-block { text-align: right; }
  .social-label {
    display: block;
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--band-fg-soft);
    margin-bottom: 0.85rem;
  }

  .social-links {
    display: flex;
    gap: 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--band-line);
    border-radius: 50%;
    color: var(--band-fg);
    text-decoration: none;
    transition: border-color 150ms ease, color 150ms ease;
  }
  .social-links a:hover { border-color: var(--band-accent); color: var(--band-accent-strong); }
  .social-links svg { width: 18px; height: 18px; }

  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 1.5rem;
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    color: var(--band-fg-soft);
  }

  @media (max-width: 700px) {
    .hero-grid, .about-grid, .quote-grid { grid-template-columns: 1fr; }
    .hero-grid { align-items: start; }
    .footer-top { flex-direction: column; }
    .social-block { text-align: left; }
  }

  /* ---------- Breadcrumb ---------- */
  .breadcrumb {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--band-fg-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
  }
  .breadcrumb a { color: var(--band-fg-soft); text-decoration: none; border-bottom: 1px solid transparent; }
  .breadcrumb a:hover { color: var(--band-accent); border-color: var(--band-accent); }
  .breadcrumb span[aria-hidden] { color: var(--band-line); }

  /* ---------- Page hero (service / location pages) ---------- */
  .page-hero {
    padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
  }
  .page-hero h1 {
    font-size: clamp(2.25rem, 2.4vw + 1.8rem, 4rem);
    font-weight: 900;
    max-width: 18ch;
  }
  .page-hero .hero-tagline { max-width: 58ch; }

  /* ---------- Prose content sections ---------- */
  .prose { max-width: 74ch; }
  .prose h2 {
    font-size: clamp(1.75rem, 1.2vw + 1.4rem, 2.5rem);
    font-weight: 800;
    margin-bottom: 1.1rem;
  }
  .prose h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 2rem 0 0.9rem;
  }
  .prose p {
    font-size: 1.05rem;
    color: var(--ink-soft);
    margin: 0 0 1.15rem;
  }
  .prose ul {
    margin: 0 0 1.15rem;
    padding-left: 1.3rem;
    color: var(--ink-soft);
    font-size: 1.02rem;
  }
  .prose ul li { margin-bottom: 0.5rem; }
  .prose a { color: var(--brass); text-decoration: underline; text-underline-offset: 2px; }
  .prose a:hover { color: var(--brass-strong); }

  .content-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.6fr);
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: start;
  }
  .content-columns figure { margin: 0; }
  .content-columns img {
    border-radius: 4px;
    width: 100%;
    object-fit: cover;
    box-shadow: 0 14px 30px -14px rgba(0,0,0,0.35);
  }
  .content-columns figcaption {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 0.72rem;
    color: var(--ink-faint);
    margin-top: 0.6rem;
  }
  .side-figures { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 100px; }

  @media (max-width: 820px) {
    .content-columns { grid-template-columns: 1fr; }
    .side-figures { position: static; flex-direction: row; flex-wrap: wrap; }
    .side-figures figure { flex: 1 1 260px; }
  }

  /* ---------- Internal link lists (service area / related pages) ---------- */
  .link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.9rem;
  }
  .link-card {
    display: block;
    background: var(--paper-raised);
    border: 1px solid var(--paper-line);
    border-radius: 3px;
    padding: 1.1rem 1.25rem;
    text-decoration: none;
    color: var(--ink);
    transition: border-color 150ms ease, transform 150ms ease;
  }
  .link-card:hover { border-color: var(--brass); }
  @media (prefers-reduced-motion: no-preference) {
    .link-card:hover { transform: translateY(-2px); }
  }
  .link-card .link-eyebrow {
    display: block;
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brass);
    margin-bottom: 0.4rem;
  }
  .link-card strong { font-size: 1.05rem; }
  .link-card span.link-detail {
    display: block;
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin-top: 0.25rem;
  }

  /* ---------- Footer service-area list ---------- */
  .footer-areas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.9rem;
    padding: 0;
    list-style: none;
  }
  .footer-areas a {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    color: var(--band-fg-soft);
    text-decoration: none;
    border-bottom: 1px solid transparent;
  }
  .footer-areas a:hover { color: var(--band-accent); border-color: var(--band-accent); }

  .feedback-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.1rem;
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--band-fg-soft);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 150ms ease, border-color 150ms ease;
  }
  .feedback-link:hover { color: var(--band-accent); border-color: var(--band-accent); }
  .feedback-link svg { width: 16px; height: 16px; flex-shrink: 0; }

  /* ---------- Mid-page CTA band ---------- */
  .cta-band {
    text-align: center;
    padding-block: clamp(2.5rem, 5vw, 4rem);
  }
  .cta-band h2 { font-size: clamp(1.9rem, 1.4vw + 1.5rem, 2.75rem); max-width: 22ch; margin-inline: auto; }
  .cta-band p { color: var(--band-fg-soft); max-width: 50ch; margin: 1rem auto 0; }
  .cta-band .hero-ctas { justify-content: center; margin-top: 1.75rem; }