/* ==========================================================================
   Bennett HVAC Finishes — bennetthvac.xyz
   One stylesheet. No framework, no build step.

   LAYOUT: a fixed left rail. On desktop the navigation is a vertical column
   down the left edge with the phone number and call-to-action pinned to the
   bottom of it, so both are on screen at all times without scrolling. The
   content is a single measured column to the right of it, set in a serif —
   closer to a well-set document than to a marketing page.

   01  Design tokens          08  Hero & page headers     15  Footer & call bar
   02  Reset & base           09  Cards & blocks          16  Images & placeholders
   03  Typography             10  Rows, steps & lists     17  Motion
   04  Shell & layout         11  Notes & bands           18  Utilities
   05  Eyebrows & heads       12  Service area & map      19  Responsive
   06  Buttons & links        13  FAQ
   07  The rail (navigation)  14  Forms
   ========================================================================== */

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

:root {
  --ink-950: #171a15;
  --ink-900: #22261f;
  --ink-800: #2f342a;
  --ink-700: #434a3c;
  --ink-600: #5c6553;
  --ink-500: #79826e;
  --ink-400: #9aa291;
  --ink-300: #bfc5b7;
  --ink-200: #dcdfd4;
  --ink-100: #e9ebe2;

  --oat:   #f1efe6;
  --oat-2: #e9e6da;
  --white: #ffffff;

  --moss-800: #3f4f31;
  --moss-700: #4c5f3b;
  --moss-600: #5d7048;
  --moss-300: #a9b998;
  --moss-100: #dde5d2;

  --brick-700: #8c421f;
  --brick-600: #a9542f;
  --brick-100: #f2dfd4;

  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font: "Public Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --step--2: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --step--1: clamp(0.85rem, 0.82rem + 0.14vw, 0.92rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1:  clamp(1.18rem, 1.1rem + 0.45vw, 1.48rem);
  --step-2:  clamp(1.45rem, 1.28rem + 0.85vw, 2.05rem);
  --step-3:  clamp(1.8rem, 1.5rem + 1.5vw, 2.85rem);
  --step-4:  clamp(2.2rem, 1.75rem + 2.3vw, 3.6rem);

  --sp-2: 0.8rem;
  --sp-3: 1.35rem;
  --sp-4: 2.1rem;
  --sp-5: 3.3rem;
  --section-y: clamp(3.25rem, 2rem + 5vw, 6rem);

  --rail: 268px;

  --r-sm: 3px;
  --r:    5px;

  --line: 1px solid var(--ink-200);
  --line-strong: 2px solid var(--ink-900);
  --line-dark: 1px solid rgba(255, 255, 255, 0.16);

  --shadow: 0 14px 30px -24px rgba(23, 26, 21, 0.5);
  --shadow-lg: 0 30px 60px -38px rgba(23, 26, 21, 0.55);

  --measure: 64ch;
}

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

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

body {
  margin: 0; background: var(--oat); color: var(--ink-600);
  font-family: var(--font); font-size: var(--step-0); line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

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

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

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

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

h1, h2, h3 {
  margin: 0 0 0.45em; font-family: var(--font-display); font-weight: 500;
  color: var(--ink-900); line-height: 1.14; letter-spacing: -0.012em; text-wrap: balance;
}
h1 { font-size: var(--step-4); line-height: 1.06; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); line-height: 1.28; font-weight: 600; }
h4 { margin: 0 0 0.5em; font-family: var(--font); font-size: var(--step-0); font-weight: 700; color: var(--ink-900); }

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
.lead { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.5; color: var(--ink-700); }

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

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

/* 04  Shell & layout ===================================================== */

.shell { min-height: 100%; }
.wrap { width: min(100% - 2.5rem, 900px); margin-inline: auto; }
/* Beside a fixed rail, a centred container would drift right as the window grows.
   Left-aligned with generous inside padding keeps the measure where the eye is. */
@media (min-width: 1100px) {
  .wrap { width: 100%; max-width: 68rem; margin-inline: 0; padding-inline: clamp(2.5rem, 4vw, 5rem); }
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2rem, 1.25rem + 3vw, 3.5rem); }
.section--oat { background: var(--oat); }
.section--oat2 { background: var(--oat-2); }
.section--white { background: var(--white); }
.section--moss { background: var(--moss-100); }
.section--dark { background: var(--ink-900); color: var(--ink-300); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--oat); }
.section + .section { border-top: var(--line); }
.section--dark + .section, .section + .section--dark { border-top: 0; }

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

.duo { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3rem); }
@media (min-width: 760px) { .duo { grid-template-columns: 1fr 1fr; align-items: start; } }
.duo > * { min-width: 0; }

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

.eyebrow {
  display: block; margin-bottom: 0.9rem;
  font-size: var(--step--2); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--moss-700);
}
.section--dark .eyebrow { color: var(--moss-300); }

.section-head { max-width: 46ch; margin-bottom: clamp(2rem, 1rem + 3vw, 3.25rem); }
.section-head p { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.5; color: var(--ink-600); }
.section--dark .section-head p { color: var(--ink-300); }

hr.rule { height: 0; border: 0; border-top: var(--line-strong); margin: 0; }
.section--dark hr.rule { border-top-color: rgba(255,255,255,0.35); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.82rem 1.4rem; border: 2px solid transparent; border-radius: var(--r-sm);
  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--moss { background: var(--moss-600); border-color: var(--moss-600); color: var(--white); }
.btn--moss:hover { background: var(--moss-800); border-color: var(--moss-800); color: var(--white); }
.btn--brick { background: var(--brick-600); border-color: var(--brick-600); color: var(--white); }
.btn--brick:hover { background: var(--brick-700); border-color: var(--brick-700); color: var(--white); }
.btn--dark { background: var(--ink-900); border-color: var(--ink-900); color: var(--oat); }
.btn--dark:hover { background: var(--ink-800); border-color: var(--ink-800); color: var(--oat); }
.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.35); color: var(--oat); }
.btn--ghost:hover { background: rgba(255,255,255,0.1); border-color: var(--oat); color: var(--oat); }
.btn--lg { padding: 0.98rem 1.75rem; 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.5rem;
  font-weight: 700; font-size: var(--step--1); color: var(--ink-900); text-decoration: none;
  border-bottom: 2px solid var(--moss-600); padding-bottom: 2px;
}
.golink svg { width: 1em; height: 1em; transition: transform 0.18s ease; }
.golink:hover { color: var(--moss-800); }
.golink:hover svg { transform: translateX(3px); }
.section--dark .golink { color: var(--oat); }

/* 07  The rail (navigation) ============================================== */

.rail {
  background: var(--ink-900); color: var(--ink-300);
}
.rail__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 1.25rem; }

.logo { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.logo__mark { width: 38px; height: 38px; flex: none; }
.logo__text { display: flex; flex-direction: column; line-height: 1.05; }
.logo__name { font-family: var(--font-display); font-size: 1.32rem; font-weight: 500; letter-spacing: -0.01em; color: var(--oat); }
.logo__name b { font-weight: 500; color: var(--moss-300); }
.logo__sub { margin-top: 3px; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-500); }

.rail__nav { display: none; }
.rail__link {
  display: block; padding: 0.55rem 0; font-size: var(--step--1); font-weight: 600;
  color: var(--ink-300); text-decoration: none; border-left: 3px solid transparent; padding-left: 0.9rem;
}
.rail__link:hover { color: var(--oat); border-left-color: var(--ink-700); }
.rail__link[aria-current="page"] { color: var(--oat); border-left-color: var(--moss-600); }

/* The always-visible contact block */
.rail__contact { display: flex; align-items: center; gap: 0.75rem; }
.rail__phone { display: flex; flex-direction: column; text-decoration: none; color: var(--oat); }
.rail__phone span { font-size: 0.56rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-500); }
/* The global `strong` rule paints ink-900, which is the rail's own background.
   Every <strong> that sits on a dark surface has to opt out of it explicitly. */
.rail__phone strong { font-family: var(--font-display); font-size: 1.22rem; font-weight: 500; white-space: nowrap; color: var(--oat); }
.section--dark strong, .page-head strong, .band strong, .site-footer strong { color: var(--oat); }

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

/* Mobile drawer */
@media (max-width: 1099px) {
  .rail { position: sticky; top: 0; z-index: 100; }
  .rail__nav {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; padding: 0.5rem 1.25rem 1.25rem;
    background: var(--ink-900); border-bottom: 3px solid var(--moss-600);
    box-shadow: var(--shadow-lg);
    max-height: calc(100dvh - 70px); overflow-y: auto;
  }
  .rail__nav.is-open { display: flex; }
  .rail__link { padding: 0.85rem 0 0.85rem 0.9rem; border-bottom: 1px solid var(--ink-800); font-size: var(--step-0); }
  .rail__nav .btn { margin-top: 1rem; }
  .rail__phone span { display: none; }
  .rail__phone strong { font-size: 1.05rem; }
}
/* On a phone the rail keeps only what fits on one line: mark, name, CTA, toggle.
   The phone number is not lost — it is the left half of the fixed bottom call bar. */
@media (max-width: 560px) {
  .logo__sub { display: none; }
  .rail__phone { display: none; }
  .logo__mark { width: 30px; height: 30px; }
  .logo { gap: 0.5rem; }
  .logo__name { font-size: 1.1rem; white-space: nowrap; }
  .rail__inner { padding: 0.6rem 0.9rem; gap: 0.5rem; }
  .rail__contact .btn { padding: 0.62rem 0.85rem; font-size: 0.78rem; }
}

/* Desktop: the fixed left column.
   .rail__inner becomes display:contents so the logo, the nav and the contact
   block are all direct flex children of the rail. The nav takes the slack, which
   pushes the phone number and the CTA to the bottom of the rail — on screen at
   all times, on every page, without scrolling. */
@media (min-width: 1100px) {
  .rail {
    position: fixed; inset: 0 auto 0 0; width: var(--rail); z-index: 100;
    display: flex; flex-direction: column; overflow-y: auto;
    border-right: 3px solid var(--moss-600);
  }
  .rail__inner { display: contents; }
  .logo { order: 1; padding: 2rem 1.75rem 1.5rem; }
  .rail__nav { order: 2; display: block; flex: 1 0 auto; padding: 1.5rem 1.75rem; border-top: 1px solid var(--ink-800); }
  .rail__nav .btn { display: none; }
  .rail__contact { order: 3; display: block; padding: 1.5rem 1.75rem 2rem; border-top: 1px solid var(--ink-800); }
  .rail__phone { margin-bottom: 0.9rem; }
  .rail-toggle { display: none; }
  .shell { padding-left: var(--rail); }
}

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

.hero { padding-block: clamp(3rem, 2rem + 5vw, 6.5rem); background: var(--oat); border-bottom: var(--line-strong); }
.hero h1 { font-size: clamp(2.4rem, 1.7rem + 3.2vw, 4.4rem); max-width: 16ch; }
.hero__lead { font-family: var(--font-display); font-size: clamp(1.15rem, 1.02rem + 0.6vw, 1.6rem); line-height: 1.45; max-width: 44ch; color: var(--ink-700); }

.hero__facts { display: grid; gap: 1.25rem; margin: 2.5rem 0 0; padding: 1.75rem 0 0; border-top: var(--line); list-style: none; }
@media (min-width: 640px) { .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(--moss-700); margin-bottom: 0.35rem; }
.hero__facts span { font-size: var(--step--1); color: var(--ink-600); }

.hero__media { margin-top: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); }
.hero__media img, .hero__media .img-placeholder { border: var(--line-strong); }

.page-head { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); background: var(--ink-900); color: var(--ink-300); }
.page-head h1 { color: var(--oat); max-width: 18ch; }
.page-head p { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.5; max-width: 52ch; }

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

/* 09  Cards & blocks ===================================================== */

.card { display: flex; flex-direction: column; padding-top: 1.25rem; border-top: var(--line-strong); }
.card h3 { margin-bottom: 0.4em; }
.card p { font-size: var(--step--1); line-height: 1.65; color: var(--ink-600); }
.card__n { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--moss-600); margin-bottom: 0.6rem; line-height: 1; }
.card__foot { margin-top: auto; padding-top: 1.2rem; }
.section--dark .card { border-top-color: rgba(255,255,255,0.35); }
.section--dark .card p { color: var(--ink-300); }

.panel { padding: clamp(1.5rem, 1rem + 2vw, 2.4rem); background: var(--white); border: var(--line); }
.panel--moss { background: var(--moss-100); border-color: var(--moss-300); }
.panel--dark { background: var(--ink-900); color: var(--ink-300); border-color: var(--ink-800); }
.panel--dark h3 { color: var(--oat); }

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

.chips { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 0; padding: 0; list-style: none; }
.chips li { margin: 0; font-size: var(--step--1); color: var(--ink-600); }
.chips li::before { content: "\00b7"; margin-right: 0.6rem; color: var(--moss-600); }
.chips a { color: var(--ink-600); text-decoration: none; }
.chips a:hover { color: var(--brick-700); }
.section--dark .chips li { color: var(--ink-300); }

/* 10  Rows, steps & lists =============================================== */

.rows { margin: 0; padding: 0; border-top: var(--line-strong); }
.rows > div { display: grid; gap: 0.3rem 2rem; padding: 1.4rem 0; border-bottom: var(--line); }
@media (min-width: 720px) { .rows > div { grid-template-columns: 11rem 1fr; } }
.rows dt { font-size: var(--step--2); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--moss-700); padding-top: 0.3rem; }
.rows dd { margin: 0; font-size: var(--step--1); line-height: 1.68; color: var(--ink-600); }
.rows dd strong { display: block; font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; color: var(--ink-900); margin-bottom: 0.25rem; letter-spacing: -0.01em; }
.section--dark .rows { border-top-color: rgba(255,255,255,0.35); }
.section--dark .rows > div { border-bottom-color: var(--ink-800); }
.section--dark .rows dt { color: var(--moss-300); }
.section--dark .rows dd { color: var(--ink-300); }
.section--dark .rows dd strong { color: var(--oat); }

.steps { counter-reset: st; margin: 0; padding: 0; list-style: none; display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .steps { grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; } }
.steps li { counter-increment: st; margin: 0; padding-left: 3.25rem; position: relative; }
.steps li::before {
  content: counter(st); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border: 2px solid var(--ink-900); border-radius: 50%;
  font-family: var(--font-display); font-size: 1.05rem; color: var(--ink-900);
}
.steps h3 { font-size: var(--step-0); font-family: var(--font); font-weight: 700; margin-bottom: 0.3em; }
.steps p { font-size: var(--step--1); color: var(--ink-600); }
.section--dark .steps li::before { border-color: var(--moss-300); color: var(--moss-300); }
.section--dark .steps p { color: var(--ink-300); }

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

.note { padding: clamp(1.1rem, 1rem + 1vw, 1.6rem); background: var(--brick-100); border-left: 4px solid var(--brick-600); }
.note h3 { font-size: var(--step-0); font-family: var(--font); font-weight: 700; margin-bottom: 0.35em; }
.note p { font-size: var(--step--1); color: var(--ink-700); }
.section--dark .note { background: rgba(169,84,47,0.2); border-left-color: var(--brick-600); }
.section--dark .note p { color: var(--ink-300); }

.band { background: var(--moss-600); color: var(--white); padding-block: clamp(2rem, 1.2rem + 2.6vw, 3rem); }
.band h2 { color: var(--white); font-size: var(--step-2); margin: 0 0 0.3em; }
.band p { margin: 0 0 1.25rem; color: rgba(255,255,255,0.9); max-width: 48ch; }

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

.map-frame { width: 100%; aspect-ratio: 3 / 2; min-height: 280px; border: var(--line-strong); }

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

.faq { border-top: var(--line-strong); }
.faq details { border-bottom: var(--line); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.25rem 0; font-family: var(--font-display); font-weight: 500; font-size: var(--step-1);
  color: var(--ink-900); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--font); font-size: 1.4rem; line-height: 1; color: var(--moss-600); transition: transform 0.22s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-bottom: 1.4rem; }
.faq details p { font-size: var(--step--1); color: var(--ink-600); }

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

.form-card { padding: clamp(1.4rem, 1rem + 1.8vw, 2.25rem); background: var(--white); border: var(--line-strong); }
.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(--brick-600); }

input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%; padding: 0.75rem 0.9rem; font: inherit; font-size: var(--step--1); color: var(--ink-900);
  background: var(--oat); border: 1px solid var(--ink-300); 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='%2379826e' 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.85rem center; background-size: 15px; padding-right: 2.4rem; }
input:focus, select:focus, textarea:focus { background: var(--white); border-color: var(--moss-600); box-shadow: inset 0 -3px 0 var(--moss-600); }
input::placeholder, textarea::placeholder { color: var(--ink-400); }

.field__error { min-height: 1.05rem; font-size: 0.79rem; font-weight: 700; color: var(--brick-700); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--brick-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(--brick-700); }
.form-status.is-ok { color: var(--moss-800); }

.contact-list { margin: 0; padding: 0; list-style: none; border-top: var(--line-strong); }
.contact-list li { margin: 0; padding: 1.3rem 0; border-bottom: var(--line); }
.contact-list h3 { font-family: var(--font); font-size: var(--step--2); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--moss-700); margin-bottom: 0.5em; }
.contact-list p { margin: 0; font-family: var(--font-display); font-size: var(--step-2); font-weight: 500; color: var(--ink-900); line-height: 1.2; }
.contact-list p.plain { font-family: var(--font); font-size: var(--step-0); font-weight: 400; line-height: 1.65; color: var(--ink-600); }
.contact-list small { display: block; margin-top: 0.5rem; font-size: 0.84rem; color: var(--ink-500); }

.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.6rem 0; margin: 0; border-bottom: var(--line); }
.hours li:last-child { border-bottom: 0; }
.hours span:last-child { color: var(--ink-500); }

/* 15  Footer & mobile call bar =========================================== */

.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: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; } }
.footer-grid > * { min-width: 0; }
.site-footer h3 { font-family: var(--font); font-size: var(--step--2); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 1rem; }
.site-footer .logo__name { color: var(--oat); }
.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(--oat); 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; }

.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: 1fr 1fr; padding-bottom: env(safe-area-inset-bottom); }
.callbar a { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.9rem 0.5rem; font-size: 0.9rem; font-weight: 700; text-decoration: none; }
.callbar svg { width: 17px; height: 17px; }
.callbar a:first-child { background: var(--ink-950); color: var(--oat); }
.callbar a:last-child { background: var(--moss-600); color: var(--white); }
@media (min-width: 561px) { .callbar { display: none; } }
@media (max-width: 560px) { body { padding-bottom: 54px; } }

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

figure { margin: 0; }
figure img, figure .img-placeholder { border: var(--line); }
figcaption { margin-top: 0.65rem; font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); }

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

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

[data-reveal] { opacity: 0; transform: translateY(12px); }
.is-revealed[data-reveal] { opacity: 1; transform: none; transition: opacity 0.55s ease, transform 0.55s 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; } }
:target { scroll-margin-top: 90px; }

/* 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); }
.narrow { max-width: 52ch; }