/* ==========================================================================
   GreenStone HVAC & Colorworks — greenstonehvac.xyz
   One stylesheet. No framework, no build step.

   LAYOUT: the navigation is docked to the BOTTOM edge of the viewport, not the
   top. The top of the page carries the wordmark alone and scrolls away; the
   links, the phone number and the call-to-action sit in a fixed bar along the
   bottom at every width. Below that, the home page runs as a centre-line
   timeline — a vertical rule down the middle with numbered nodes, content
   alternating left and right of it.

   01  Design tokens          08  Hero & page headers     15  Footer
   02  Reset & base           09  Cards & panels          16  Images & placeholders
   03  Typography             10  Spec rows & steps       17  Motion
   04  Containers & sections  11  Notes & bands           18  Utilities
   05  Eyebrows & heads       12  Service area & map      19  Responsive
   06  Buttons & links        13  FAQ
   07  Wordmark & bottom dock 14  Forms
   ========================================================================== */

/* 01  Design tokens ======================================================= */

:root {
  --ink-950: #0b120e;
  --ink-900: #14201a;
  --ink-800: #1f2f27;
  --ink-700: #324437;
  --ink-600: #4d6154;
  --ink-500: #6f8176;
  --ink-400: #94a39a;
  --ink-300: #b8c3bc;
  --ink-200: #d7ded9;
  --ink-100: #e7ebe8;

  --chalk: #f2f4f1;
  --chalk-2: #e6eae5;
  --white: #ffffff;

  --sea-900: #10453a;
  --sea-800: #185a4b;
  --sea-700: #1f6f5c;
  --sea-600: #2a8a73;
  --sea-300: #86cdba;
  --sea-100: #dcf0e9;

  --sand-700: #a3712f;
  --sand-600: #c08a3e;
  --sand-100: #f7ead5;

  --font: "Epilogue", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --step--2: clamp(0.73rem, 0.71rem + 0.1vw, 0.79rem);
  --step--1: clamp(0.88rem, 0.85rem + 0.14vw, 0.95rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1:  clamp(1.18rem, 1.08rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.45rem, 1.25rem + 1vw, 2.15rem);
  --step-3:  clamp(1.85rem, 1.5rem + 1.8vw, 3.1rem);
  --step-4:  clamp(2.35rem, 1.75rem + 3vw, 4.3rem);

  --sp-2: 0.8rem;
  --sp-3: 1.35rem;
  --sp-4: 2.1rem;
  --sp-5: 3.2rem;
  --section-y: clamp(3rem, 2rem + 4.5vw, 5.5rem);

  /* Height of the docked bar, so content can clear it. Published by main.js. */
  --dock-h: 64px;

  --r-sm: 4px;
  --r:    10px;
  --r-lg: 20px;

  --line: 1px solid var(--ink-200);
  --line-dark: 1px solid rgba(255, 255, 255, 0.15);

  --shadow: 0 14px 34px -26px rgba(11, 18, 14, 0.5);
  --shadow-up: 0 -10px 30px -22px rgba(11, 18, 14, 0.4);
  --shadow-lg: 0 30px 62px -34px rgba(11, 18, 14, 0.45);
}

/* 02  Reset & base ======================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0; background: var(--chalk); color: var(--ink-600);
  font-family: var(--font); font-size: var(--step-0); line-height: 1.74;
  -webkit-font-smoothing: antialiased;
  /* Always leave room for the docked bar, at every width. */
  padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom));
}
body.is-locked { overflow: hidden; }

img, svg, iframe, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--sea-800); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--sea-900); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--sea-700); outline-offset: 3px;
}

.skip-link { position: absolute; left: 0; top: 0; z-index: 300; transform: translateY(-140%); background: var(--sea-800); color: #fff; padding: 0.85rem 1.4rem; border-radius: 0 0 var(--r-sm) 0; font-weight: 700; text-decoration: none; }
.skip-link:focus { transform: translateY(0); }
::selection { background: var(--sea-100); color: var(--ink-900); }

/* 03  Typography ========================================================== */

h1, h2, h3 {
  margin: 0 0 0.45em; font-weight: 700; color: var(--ink-900);
  line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance;
}
h1 { font-size: var(--step-4); line-height: 1.04; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); line-height: 1.26; letter-spacing: -0.022em; }
h4 { margin: 0 0 0.5em; font-size: var(--step-0); font-weight: 700; color: var(--ink-900); }

p { margin: 0 0 1.05em; max-width: 64ch; }
p:last-child { margin-bottom: 0; }
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-700); }

strong, b { font-weight: 700; color: var(--ink-900); }
em.mark { font-style: normal; color: var(--sea-800); font-weight: 700; }

ul, ol { margin: 0 0 1.05em; padding-left: 1.2em; }
li { margin-bottom: 0.45em; }
li:last-child { margin-bottom: 0; }

/* 04  Containers & sections ============================================== */

.wrap { width: min(100% - 2rem, 1160px); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2rem, 780px); margin-inline: auto; }

.section { padding-block: var(--section-y); }
.section--chalk { background: var(--chalk); }
.section--chalk2 { background: var(--chalk-2); }
.section--white { background: var(--white); }
.section--dark { background: var(--ink-900); color: var(--ink-300); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--chalk); }
.section--dark strong { color: var(--chalk); }
.section--sea { background: var(--sea-800); color: #fff; }
.section--sea h2, .section--sea h3 { color: #fff; }
.section--sea strong { color: #fff; }

.cols { display: grid; gap: clamp(1.5rem, 1rem + 2.5vw, 3rem); }
@media (min-width: 880px) { .cols { grid-template-columns: 1fr 1fr; align-items: start; } }
@media (min-width: 880px) { .cols--wide { grid-template-columns: 1.3fr 1fr; } }
.cols > * { min-width: 0; }

.grid { display: grid; gap: var(--sp-3); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.grid > * { min-width: 0; }

/* 05  Eyebrows & heads =================================================== */

.eyebrow {
  display: block; margin-bottom: 0.85rem;
  font-size: var(--step--2); font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--sea-700);
}
.section--dark .eyebrow { color: var(--sea-300); }
.section--sea .eyebrow { color: rgba(255,255,255,0.85); }

.section-head { max-width: 56ch; margin-bottom: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); }
.section-head p { font-size: var(--step-1); line-height: 1.5; color: var(--ink-600); }
.section--dark .section-head p { color: var(--ink-300); }

/* 06  Buttons & links ==================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; flex: none;
  padding: 0.82rem 1.5rem; border: 2px solid transparent; border-radius: var(--r);
  font: inherit; font-weight: 700; font-size: var(--step--1);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn--sea { background: var(--sea-700); border-color: var(--sea-700); color: #fff; }
.btn--sea:hover { background: var(--sea-900); border-color: var(--sea-900); color: #fff; }
.btn--dark { background: var(--ink-900); border-color: var(--ink-900); color: var(--chalk); }
.btn--dark:hover { background: var(--ink-700); border-color: var(--ink-700); color: var(--chalk); }
.btn--white { background: #fff; border-color: #fff; color: var(--ink-900); }
.btn--white:hover { background: var(--ink-100); border-color: var(--ink-100); }
.btn--outline { background: transparent; border-color: var(--ink-300); color: var(--ink-900); }
.btn--outline:hover { border-color: var(--ink-900); }
.btn--ghost { background: transparent; border-color: rgba(255,255,255,0.42); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; color: #fff; }
.btn--lg { padding: 0.98rem 1.8rem; font-size: var(--step-0); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.65rem; }

.golink {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 700; font-size: var(--step--1); color: var(--sea-800); text-decoration: none;
}
.golink svg { width: 1em; height: 1em; transition: transform 0.18s ease; }
.golink:hover svg { transform: translateX(3px); }
.section--dark .golink { color: var(--sea-300); }

/* 07  Wordmark & the bottom dock =========================================
   The top of the page carries the wordmark alone and scrolls away with the
   content. Everything navigational lives in a bar fixed to the bottom edge of
   the viewport — which also means the phone number and the CTA are on screen
   at every scroll position and every width without a sticky header.          */

.topline { padding: clamp(1.1rem, 0.9rem + 1vw, 1.75rem) 0; background: var(--chalk); border-bottom: var(--line); }
.topline__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.logo { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.logo__mark { width: 36px; height: 36px; flex: none; }
.logo__text { display: flex; flex-direction: column; line-height: 1.02; }
.logo__name { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.035em; color: var(--ink-900); white-space: nowrap; }
.logo__name b { color: var(--sea-700); }
.logo__sub { margin-top: 4px; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-500); white-space: nowrap; }

.topline__meta { display: none; font-size: var(--step--2); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); text-align: right; }
@media (min-width: 720px) { .topline__meta { display: block; } }

/* The dock itself */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  background: var(--ink-900); color: var(--ink-300);
  box-shadow: var(--shadow-up);
  padding-bottom: env(safe-area-inset-bottom);
}
.dock__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  width: min(100% - 1.5rem, 1160px); margin-inline: auto;
  padding: 0.6rem 0;
}

.dock__nav { display: none; }
.dock__link {
  display: block; padding: 0.5rem 0.9rem; border-radius: var(--r-sm);
  font-size: var(--step--1); font-weight: 700; color: var(--ink-300); text-decoration: none; white-space: nowrap;
}
.dock__link:hover { background: var(--ink-800); color: #fff; }
.dock__link[aria-current="page"] { color: var(--sea-300); background: rgba(31,111,92,0.28); }

.dock__right { display: flex; align-items: center; gap: 0.5rem; }
.dock__phone { display: flex; flex-direction: column; text-decoration: none; color: #fff; }
.dock__phone span { font-size: 0.55rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-400); }
.dock__phone strong { font-size: 1.06rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; white-space: nowrap; }

.dock-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 42px; height: 42px; padding: 0;
  background: var(--ink-800); border: 0; border-radius: var(--r-sm); color: #fff; cursor: pointer;
}
.dock-toggle svg { width: 20px; height: 20px; }
.dock-toggle .icon-close { display: none; }
.dock-toggle[aria-expanded="true"] .icon-close { display: block; }
.dock-toggle[aria-expanded="true"] .icon-open { display: none; }

/* Below 1040px the links lift up out of the dock as a sheet above it. */
@media (max-width: 1039px) {
  .dock__inner { position: relative; }
  .dock__nav {
    position: absolute; inset: auto 0 100% 0;
    flex-direction: column; padding: 0.6rem 0 1rem;
    background: var(--ink-900); border-bottom: 1px solid var(--ink-800);
    box-shadow: var(--shadow-lg);
    max-height: calc(100dvh - 120px); overflow-y: auto;
  }
  .dock__nav.is-open { display: flex; }
  .dock__link { padding: 0.85rem 0.9rem; font-size: var(--step-0); border-bottom: 1px solid var(--ink-800); }
  .dock__nav .btn { margin: 0.9rem 0.9rem 0; }
}

@media (min-width: 1040px) {
  .dock__nav { display: flex; align-items: center; gap: 0.15rem; }
  .dock__nav .btn { display: none; }
  .dock-toggle { display: none; }
}

@media (max-width: 560px) {
  .dock__inner { width: calc(100% - 1rem); gap: 0.45rem; }
  .dock__phone span { display: none; }
  .dock__phone strong { font-size: 0.98rem; }
  .dock__right .btn { padding: 0.55rem 0.75rem; font-size: 0.73rem; }
  .dock-toggle { width: 38px; height: 38px; }
  .logo__sub { display: none; }
  .logo__mark { width: 30px; height: 30px; }
  .logo__name { font-size: 1.05rem; }
}

/* 08  Hero & page headers ================================================ */

.hero { padding-block: clamp(2.5rem, 1.75rem + 3vw, 4.5rem); background: var(--chalk); }
.hero h1 { max-width: 15ch; }
.hero__lede { font-size: clamp(1.05rem, 0.98rem + 0.5vw, 1.32rem); line-height: 1.58; max-width: 50ch; color: var(--ink-600); }

.hero__facts { display: grid; gap: 1.1rem; margin: 2.25rem 0 0; padding: 1.6rem 0 0; border-top: 2px solid var(--ink-900); list-style: none; }
@media (min-width: 620px) { .hero__facts { grid-template-columns: repeat(3, 1fr); } }
.hero__facts li { margin: 0; }
.hero__facts b { display: block; font-size: var(--step--2); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sea-700); margin-bottom: 0.3rem; }
.hero__facts span { font-size: var(--step--1); color: var(--ink-600); }

.page-head { padding-block: clamp(2.25rem, 1.5rem + 3vw, 4rem); background: var(--ink-900); color: var(--ink-300); }
.page-head h1 { color: var(--chalk); max-width: 19ch; }
.page-head p { font-size: var(--step-1); line-height: 1.5; max-width: 56ch; }

.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.3rem; padding: 0; list-style: none; font-size: var(--step--2); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-500); }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "\2022"; margin-right: 0.55rem; color: var(--sea-300); }
.crumbs a { color: var(--ink-300); text-decoration: none; }
.crumbs a:hover { color: var(--chalk); }

/* 09  Cards & panels ===================================================== */

.card { display: flex; flex-direction: column; padding: clamp(1.35rem, 1.1rem + 1.2vw, 1.95rem); background: var(--white); border: var(--line); border-radius: var(--r); }
.section--chalk2 .card { background: var(--white); }
.section--dark .card { background: var(--ink-800); border-color: var(--ink-700); }
.section--dark .card p { color: var(--ink-300); }
.card__n { display: block; margin-bottom: 0.8rem; font-size: var(--step--2); font-weight: 700; letter-spacing: 0.2em; color: var(--sea-700); }
.section--dark .card__n { color: var(--sea-300); }
.card h3 { margin-bottom: 0.4em; }
.card p { font-size: var(--step--1); line-height: 1.68; color: var(--ink-600); }
.card__foot { margin-top: auto; padding-top: 1.2rem; }

.panel { padding: clamp(1.35rem, 1.1rem + 1.2vw, 1.95rem); background: var(--white); border: var(--line); border-radius: var(--r); }
.panel--sea { background: var(--sea-100); border-color: var(--sea-300); }
.panel--sand { background: var(--sand-100); border-color: #e7d0ab; }
.panel--dark { background: var(--ink-800); border-color: var(--ink-700); color: var(--ink-300); }
.panel--dark h3 { color: var(--chalk); }

.checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }
.checks li { display: grid; grid-template-columns: 1.2rem 1fr; gap: 0.7rem; margin: 0; font-size: var(--step--1); line-height: 1.62; }
.checks svg { width: 1.2rem; height: 1.2rem; color: var(--sea-700); margin-top: 0.2rem; }
.section--dark .checks svg, .section--sea .checks svg { color: var(--sea-300); }
@media (min-width: 760px) { .checks--2 { grid-template-columns: 1fr 1fr; gap: 0.75rem 2rem; } }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.chips li { margin: 0; padding: 0.32rem 0.85rem; background: var(--white); border: var(--line); border-radius: 999px; font-size: var(--step--1); color: var(--ink-700); }
.section--dark .chips li { background: var(--ink-800); border-color: var(--ink-700); color: var(--ink-300); }

/* 10  Spec rows & the timeline ===========================================
   The home page's spine: a vertical rule down the centre with numbered nodes,
   content alternating left and right. Below 900px it collapses to a single
   left-hand rail so nothing depends on the alternation.                      */

.timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.timeline::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 15px; width: 2px;
  background: var(--ink-200);
}
.timeline > li { position: relative; margin: 0; padding: 0 0 clamp(2rem, 1.5rem + 2vw, 3.25rem) 3.25rem; }
.timeline > li:last-child { padding-bottom: 0; }
.timeline__node {
  position: absolute; left: 0; top: 0.1rem;
  display: grid; place-items: center; width: 32px; height: 32px;
  background: var(--sea-700); border-radius: 50%;
  font-size: 0.78rem; font-weight: 700; color: #fff; letter-spacing: 0.04em;
}
.timeline h3 { margin-bottom: 0.4em; }
.timeline p { font-size: var(--step--1); line-height: 1.68; color: var(--ink-600); }
.section--dark .timeline::before { background: var(--ink-700); }
.section--dark .timeline p { color: var(--ink-300); }

@media (min-width: 900px) {
  .timeline::before { left: 50%; transform: translateX(-50%); }
  .timeline > li { width: 50%; padding-left: 0; padding-right: clamp(2.5rem, 1.5rem + 3vw, 4rem); text-align: right; }
  .timeline > li:nth-child(even) {
    margin-left: 50%;
    padding-right: 0; padding-left: clamp(2.5rem, 1.5rem + 3vw, 4rem); text-align: left;
  }
  .timeline p { margin-left: auto; }
  .timeline > li:nth-child(even) p { margin-left: 0; margin-right: auto; }
  /* Each item is exactly half the container, so the centre rule falls on the
     right edge of an odd item and the left edge of an even one. Half the node's
     width either side of that edge puts it on the line. */
  .timeline__node { left: auto; right: -16px; }
  .timeline > li:nth-child(even) .timeline__node { right: auto; left: -16px; }
}

.specs { margin: 0; padding: 0; border-top: 2px solid var(--ink-900); }
.specs > div { display: grid; gap: 0.3rem 2rem; padding: 1.25rem 0; border-bottom: var(--line); }
@media (min-width: 720px) { .specs > div { grid-template-columns: 12rem 1fr; } }
.specs dt { font-size: var(--step--2); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sea-700); padding-top: 0.3rem; }
.specs dd { margin: 0; font-size: var(--step--1); line-height: 1.68; color: var(--ink-600); }
.specs dd strong { display: block; font-size: var(--step-0); color: var(--ink-900); margin-bottom: 0.25rem; }
.section--dark .specs { border-top-color: var(--sea-300); }
.section--dark .specs > div { border-bottom-color: var(--ink-700); }
.section--dark .specs dt { color: var(--sea-300); }
.section--dark .specs dd { color: var(--ink-300); }

.steps { counter-reset: st; margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-3); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { counter-increment: st; margin: 0; padding: clamp(1.25rem, 1rem + 1vw, 1.7rem); background: var(--white); border: var(--line); border-radius: var(--r); }
.steps li::before {
  content: counter(st, decimal-leading-zero); display: block; margin-bottom: 0.7rem;
  font-size: var(--step--2); font-weight: 700; letter-spacing: 0.2em; color: var(--sea-700);
}
.steps h3 { font-size: var(--step-0); margin-bottom: 0.35em; }
.steps p { font-size: var(--step--1); color: var(--ink-600); }
.section--dark .steps li { background: var(--ink-800); border-color: var(--ink-700); }
.section--dark .steps li::before { color: var(--sea-300); }
.section--dark .steps p { color: var(--ink-300); }

/* 11  Notes & bands ====================================================== */

.note { padding: clamp(1.1rem, 1rem + 1vw, 1.55rem); background: var(--sand-100); border-left: 4px solid var(--sand-600); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.note h3 { font-size: var(--step-0); margin-bottom: 0.35em; }
.note p { font-size: var(--step--1); color: var(--ink-700); }
.section--dark .note { background: rgba(192,138,62,0.2); }
.section--dark .note p { color: var(--ink-300); }

.band { padding-block: var(--section-y); }
.band__inner { padding: clamp(1.75rem, 1.25rem + 2.5vw, 3rem); background: var(--sea-800); border-radius: var(--r-lg); color: #fff; }
.band h2 { color: #fff; font-size: var(--step-2); margin-bottom: 0.35em; }
.band p { margin: 0 0 1.35rem; max-width: 52ch; color: rgba(255,255,255,0.92); }

/* 12  Service area & map ================================================= */

.map-frame { width: 100%; aspect-ratio: 16 / 10; min-height: 300px; border: var(--line); border-radius: var(--r); }

/* 13  FAQ ================================================================ */

.faq { display: grid; gap: 0.6rem; }
.faq details { background: var(--white); border: var(--line); border-radius: var(--r); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem;
  padding: 1.1rem clamp(1.05rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 700; font-size: var(--step-0); letter-spacing: -0.018em;
  color: var(--ink-900); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.3rem; line-height: 1.15; color: var(--sea-700); transition: transform 0.22s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 clamp(1.05rem, 1rem + 0.7vw, 1.5rem) 1.3rem; }
.faq details p { font-size: var(--step--1); color: var(--ink-600); }
.section--dark .faq details { background: var(--ink-800); border-color: var(--ink-700); }
.section--dark .faq summary { color: var(--chalk); }
.section--dark .faq details p { color: var(--ink-300); }

/* 14  Forms ============================================================== */

.form-card { padding: clamp(1.4rem, 1.1rem + 1.6vw, 2.2rem); background: var(--white); border: var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.form-grid { display: grid; gap: 1rem; }
@media (min-width: 620px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.field--full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label { font-size: var(--step--2); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-600); }
.field .req { color: var(--sea-700); }

input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%; padding: 0.78rem 0.95rem; font: inherit; font-size: var(--step--1); color: var(--ink-900);
  background: var(--chalk); border: 1px solid var(--ink-200); border-radius: var(--r-sm);
  transition: border-color 0.14s ease, background-color 0.14s ease;
}
textarea { min-height: 140px; resize: vertical; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f8176' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 15px; padding-right: 2.4rem; }
input:focus, select:focus, textarea:focus { background: var(--white); border-color: var(--sea-700); }
input::placeholder, textarea::placeholder { color: var(--ink-400); }

.field__error { min-height: 1.05rem; font-size: 0.79rem; font-weight: 700; color: var(--sand-700); margin: 0; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--sand-700); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-consent { font-size: 0.81rem; color: var(--ink-500); }
.form-status { margin-top: 1rem; font-size: var(--step--1); font-weight: 700; min-height: 1.2rem; }
.form-status.is-error { color: var(--sand-700); }
.form-status.is-ok { color: var(--sea-800); }

.contact-list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink-900); }
.contact-list li { margin: 0; padding: 1.2rem 0; border-bottom: var(--line); }
.contact-list h3 { font-size: var(--step--2); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sea-700); margin-bottom: 0.55em; }
.contact-list p { margin: 0; font-size: var(--step-2); font-weight: 700; color: var(--ink-900); line-height: 1.2; letter-spacing: -0.03em; }
.contact-list p.plain { font-size: var(--step-0); font-weight: 400; color: var(--ink-600); letter-spacing: 0; line-height: 1.68; }
.contact-list small { display: block; margin-top: 0.55rem; font-size: 0.84rem; font-weight: 400; color: var(--ink-500); letter-spacing: 0; }
.contact-list a { color: var(--ink-900); text-decoration: none; }
.contact-list a:hover { color: var(--sea-800); }

.hours { margin: 0; padding: 0; list-style: none; font-size: var(--step--1); }
.hours li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; margin: 0; border-bottom: var(--line); }
.hours li:last-child { border-bottom: 0; }
.hours span:last-child { color: var(--ink-500); }

/* 15  Footer =============================================================
   No mobile call bar on this site — the dock already is one, at every width. */

.site-footer { background: var(--ink-950); color: var(--ink-400); padding-block: clamp(2.5rem, 2rem + 3vw, 4rem) 1.75rem; font-size: var(--step--1); }
.footer-grid { display: grid; gap: 2.25rem; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; } }
.footer-grid > * { min-width: 0; }
.site-footer h3 { font-size: var(--step--2); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 1rem; }
.site-footer .logo__name { color: var(--chalk); }
.site-footer .logo__name b { color: var(--sea-300); }
.footer-links { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
.footer-links li { margin: 0; }
.site-footer a { color: var(--ink-300); text-decoration: none; }
.site-footer a:hover { color: var(--chalk); text-decoration: underline; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.4rem; border-top: var(--line-dark); font-size: 0.79rem; color: var(--ink-500); }
.footer-bottom p { margin: 0; }

/* 16  Images & placeholders ============================================== */

figure { margin: 0; }
figure img, figure .img-placeholder { border-radius: var(--r); }
figcaption { margin-top: 0.65rem; font-size: var(--step--2); letter-spacing: 0.06em; color: var(--ink-500); }
.section--dark figcaption { color: var(--ink-400); }

.img-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
  padding: 1rem; width: 100%;
  background: var(--chalk-2); border: 1px dashed var(--ink-300); border-radius: var(--r);
  text-align: center; color: var(--ink-500);
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5;
}
.img-placeholder b { display: block; font-size: 0.95rem; letter-spacing: 0; text-transform: none; color: var(--ink-900); word-break: break-all; }
.section--dark .img-placeholder { background: var(--ink-800); border-color: var(--ink-600); color: var(--ink-400); }
.section--dark .img-placeholder b { color: var(--ink-200); }

/* 17  Motion ============================================================= */

[data-reveal] { opacity: 0; transform: translateY(12px); }
.is-revealed[data-reveal] { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.5s ease; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* An anchor target has to clear the docked bar at the bottom, not a header. */
:target { scroll-margin-top: 1.5rem; scroll-margin-bottom: calc(var(--dock-h) + 1.5rem); }

/* 18  Utilities ========================================================== */

.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }