/* ==========================================================================
   High Desert HVAC Coatings — highdeserthvac.xyz
   One stylesheet. No framework, no build step.

   LAYOUT: split screen. The navigation floats over a full-viewport hero that is
   divided vertically into two halves, and most sections below are 50/50 panels
   that meet at a hard edge and alternate which side carries the text. Nothing on
   this site sits inside a narrow centred container.

   01  Design tokens          08  Hero & page headers     15  Footer & call bar
   02  Reset & base           09  Panels & cards          16  Images & placeholders
   03  Typography             10  Data rows & steps       17  Motion
   04  Layout primitives      11  Notes & bands           18  Utilities
   05  Eyebrows & heads       12  Service area & map      19  Responsive
   06  Buttons & links        13  FAQ
   07  Overlaid navigation    14  Forms
   ========================================================================== */

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

:root {
  --ink-950: #0b0d11;
  --ink-900: #14161c;
  --ink-800: #1e2129;
  --ink-700: #2d323d;
  --ink-600: #4a5161;
  --ink-500: #6b7385;
  --ink-400: #929aa9;
  --ink-300: #b9bfc9;
  --ink-200: #d8dbe0;
  --ink-100: #e7e8ea;

  --paper: #edecea;
  --paper-2: #e2e1de;
  --white: #ffffff;

  --petrol-900: #084b57;
  --petrol-800: #095c6b;
  --petrol-700: #0b7285;
  --petrol-600: #0d8ca3;
  --petrol-300: #7cd3e3;
  --petrol-100: #d6eff4;

  --ember-600: #c2410c;
  --ember-100: #fbe3d6;

  --font: "Space Grotesk", ui-monospace, "Segoe UI", system-ui, Helvetica, Arial, sans-serif;

  --step--2: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --step--1: clamp(0.87rem, 0.84rem + 0.14vw, 0.94rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.07rem);
  --step-1:  clamp(1.18rem, 1.08rem + 0.5vw, 1.48rem);
  --step-2:  clamp(1.45rem, 1.25rem + 1vw, 2.15rem);
  --step-3:  clamp(1.8rem, 1.45rem + 1.75vw, 3rem);
  --step-4:  clamp(2.3rem, 1.7rem + 3vw, 4.2rem);

  --sp-2: 0.8rem;
  --sp-3: 1.35rem;
  --sp-4: 2.1rem;
  --sp-5: 3.2rem;
  --pad: clamp(1.5rem, 1rem + 4vw, 4.5rem);
  --section-y: clamp(3.5rem, 2.2rem + 5vw, 6.5rem);

  --r-sm: 0px;
  --r:    0px;

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

  --shadow: 0 12px 30px -22px rgba(11, 13, 17, 0.55);
  --shadow-lg: 0 28px 60px -36px rgba(11, 13, 17, 0.6);
}

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

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

body {
  margin: 0; background: var(--paper); 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(--petrol-800); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--petrol-900); }

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

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

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

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

p { margin: 0 0 1.1em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }
.lead { font-size: var(--step-1); line-height: 1.5; color: var(--ink-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; }

/* 04  Layout primitives ==================================================
   The split is the whole design. `.split` is a two-panel row that meets at a
   hard vertical edge; `.split--flip` puts the text on the right instead.      */

.wrap { width: min(100% - 2.5rem, 1240px); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, 820px); margin-inline: auto; }

.section { padding-block: var(--section-y); }
.section--paper { background: var(--paper); }
.section--paper2 { background: var(--paper-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(--white); }
.section--dark strong { color: var(--white); }
.section--petrol { background: var(--petrol-800); color: #fff; }
.section--petrol h2, .section--petrol h3 { color: #fff; }
.section--petrol strong { color: #fff; }

.split { display: grid; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.split > * { min-width: 0; }
.split__text { padding: clamp(2.25rem, 1.5rem + 4vw, 5rem) var(--pad); display: flex; flex-direction: column; justify-content: center; }
.split__media { position: relative; min-height: clamp(240px, 40vw, 560px); background: var(--ink-800); }
.split__media img, .split__media .img-placeholder { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .split--flip .split__text { order: 2; }
  .split--flip .split__media { order: 1; }
}

.grid { display: grid; gap: 1px; background: var(--ink-200); border-block: 1px solid var(--ink-200); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid > * { min-width: 0; }
.section--dark .grid, .section--petrol .grid { background: rgba(255,255,255,0.16); border-block-color: rgba(255,255,255,0.16); }

.cols { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); }
@media (min-width: 820px) { .cols { grid-template-columns: 1fr 1fr; align-items: start; } }
.cols > * { 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.24em;
  text-transform: uppercase; color: var(--petrol-700);
}
.section--dark .eyebrow { color: var(--petrol-300); }
.section--petrol .eyebrow { color: rgba(255,255,255,0.8); }

.section-head { max-width: 60ch; margin-bottom: clamp(2.25rem, 1.25rem + 3vw, 3.5rem); }
.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); }
.section--petrol .section-head p { color: rgba(255,255,255,0.92); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1.5rem; border: 2px solid transparent; border-radius: 0;
  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--petrol { background: var(--petrol-700); border-color: var(--petrol-700); color: #fff; }
.btn--petrol:hover { background: var(--petrol-900); border-color: var(--petrol-900); color: #fff; }
.btn--dark { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.btn--dark:hover { background: var(--ink-700); border-color: var(--ink-700); color: #fff; }
.btn--white { background: #fff; border-color: #fff; color: var(--ink-900); }
.btn--white:hover { background: var(--ink-100); border-color: var(--ink-100); color: var(--ink-900); }
.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.45); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; color: #fff; }
.btn--lg { padding: 1rem 1.85rem; 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(--petrol-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(--petrol-300); }

/* 07  Overlaid navigation ================================================
   The header sits on top of the hero rather than above it. It is transparent
   over the dark half at the top of the page and turns solid once the page is
   scrolled (class added in main.js), so the nav is never illegible.           */

.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: transparent; transition: background-color 0.25s ease, border-color 0.25s ease;
  border-bottom: 1px solid transparent;
}
.header.is-stuck { background: var(--ink-950); border-bottom-color: rgba(255,255,255,0.14); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem clamp(1rem, 0.5rem + 2vw, 2.5rem); }

.logo { display: inline-flex; align-items: center; gap: 0.7rem; 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-size: 1.05rem; font-weight: 700; letter-spacing: -0.04em; color: #fff; white-space: nowrap; text-transform: uppercase; }
.logo__name b { color: var(--petrol-300); font-weight: 700; }
.logo__sub { margin-top: 3px; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-400); white-space: nowrap; }

.header__right { display: flex; align-items: center; gap: 0.75rem; }
.header__phone { display: none; text-decoration: none; color: #fff; text-align: right; }
.header__phone span { display: block; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-400); }
.header__phone strong { font-size: 1.08rem; font-weight: 700; color: #fff; letter-spacing: -0.03em; white-space: nowrap; }

.nav { display: none; }
.nav__link {
  display: block; padding: 0.55rem 0; font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.06em; color: var(--ink-300); text-decoration: none;
}
.nav__link:hover { color: #fff; }
.nav__link[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--petrol-300); }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 42px; height: 42px; padding: 0;
  background: transparent; border: 2px solid rgba(255,255,255,0.3); border-radius: 0; color: #fff; cursor: pointer;
}
.header__right .btn { flex: none; }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }

/* Mobile drawer */
@media (max-width: 1059px) {
  .header__inner { position: relative; }
  .nav {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; padding: 0.5rem clamp(1rem, 0.5rem + 2vw, 2.5rem) 1.5rem;
    background: var(--ink-950); border-bottom: 3px solid var(--petrol-700);
    box-shadow: var(--shadow-lg);
    max-height: calc(100dvh - 70px); overflow-y: auto;
  }
  .nav.is-open { display: flex; }
  .nav__link { padding: 0.85rem 0; border-bottom: 1px solid var(--ink-800); font-size: var(--step-0); }
  .nav .btn { margin-top: 1.1rem; }
  /* A transparent header over a light inner page would be unreadable. */
  .header { background: var(--ink-950); }
}

/* At phone width the header has to fit a mark, a name, a CTA and a toggle on one
   line. The phone number is not lost — it is the left half of the call bar. */
@media (max-width: 560px) {
  .header__inner { padding: 0.65rem 0.75rem; }
  .header__right { gap: 0.45rem; }
  .logo { gap: 0.5rem; }
  .logo__sub { display: none; }
  .logo__mark { width: 32px; height: 32px; }
  .logo__name { font-size: 0.92rem; }
  .header__right .btn { padding: 0.55rem 0.7rem; font-size: 0.72rem; }
  .nav-toggle { width: 38px; height: 38px; }
}

/* Desktop: logo | nav | phone + CTA. The nav is a DOM sibling after the right
   group, so `order` puts it back in the middle rather than duplicating markup. */
@media (min-width: 1060px) {
  .nav { display: flex; align-items: center; gap: 1.85rem; order: 2; }
  .header__right { order: 3; }
  .logo { order: 1; }
  .nav .btn { display: none; }
  .nav-toggle { display: none; }
  .header__phone { display: block; }
}

/* 08  Hero & page headers ================================================
   The home hero is a full-viewport split: a dark text half and a photograph
   half, meeting at a hard edge.                                               */

.hero { min-height: 100svh; display: grid; background: var(--ink-900); }
@media (min-width: 900px) { .hero { grid-template-columns: 1fr 1fr; } }
.hero__text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(6rem, 5rem + 6vw, 9rem) var(--pad) clamp(3rem, 2rem + 3vw, 5rem);
  color: var(--ink-300);
}
.hero h1 { color: #fff; max-width: 14ch; }
.hero__lead { font-size: clamp(1.05rem, 0.98rem + 0.5vw, 1.35rem); line-height: 1.55; max-width: 44ch; color: var(--ink-300); }
.hero__media { position: relative; min-height: 46vh; background: var(--ink-800); }
.hero__media img, .hero__media .img-placeholder { width: 100%; height: 100%; object-fit: cover; }

.hero__facts { display: grid; gap: 1.1rem; margin: 2.25rem 0 0; padding: 1.75rem 0 0; border-top: 1px solid var(--ink-700); list-style: none; }
@media (min-width: 560px) { .hero__facts { grid-template-columns: 1fr 1fr; } }
.hero__facts li { margin: 0; }
.hero__facts b { display: block; font-size: var(--step--2); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--petrol-300); margin-bottom: 0.3rem; }
.hero__facts span { font-size: var(--step--1); color: var(--ink-300); }

.page-head { padding-block: clamp(6.5rem, 5rem + 7vw, 10rem) clamp(2.5rem, 1.75rem + 3vw, 4.5rem); background: var(--ink-900); color: var(--ink-300); }
.page-head h1 { color: #fff; max-width: 18ch; }
.page-head p { font-size: var(--step-1); line-height: 1.5; max-width: 58ch; }

.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.5rem; 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: "//"; margin-right: 0.5rem; color: var(--petrol-300); }
.crumbs a { color: var(--ink-300); text-decoration: none; }
.crumbs a:hover { color: #fff; }

/* 09  Panels & cards ===================================================== */

.card { display: flex; flex-direction: column; padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); background: var(--paper); }
.section--white .card { background: var(--white); }
.section--paper2 .card { background: var(--paper-2); }
.section--dark .card { background: var(--ink-900); }
.section--petrol .card { background: var(--petrol-800); }
.card__n { display: block; font-size: var(--step--2); font-weight: 700; letter-spacing: 0.22em; color: var(--petrol-700); margin-bottom: 1rem; }
.section--dark .card__n { color: var(--petrol-300); }
.section--petrol .card__n { color: rgba(255,255,255,0.75); }
.card h3 { margin-bottom: 0.45em; }
.card p { font-size: var(--step--1); line-height: 1.68; color: var(--ink-600); }
.section--dark .card p { color: var(--ink-300); }
.section--petrol .card p { color: rgba(255,255,255,0.92); }
.card__foot { margin-top: auto; padding-top: 1.35rem; }

.panel { padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); background: var(--white); border: var(--line); }
.panel--petrol { background: var(--petrol-100); border-color: var(--petrol-300); }
.panel--dark { background: var(--ink-800); border-color: var(--ink-700); color: var(--ink-300); }
.panel--dark h3 { color: #fff; }

.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(--petrol-700); margin-top: 0.2rem; }
.section--dark .checks svg, .section--petrol .checks svg { color: var(--petrol-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.35rem 0.85rem; border: var(--line); font-size: var(--step--1); color: var(--ink-700); }
.section--dark .chips li { border-color: var(--ink-700); color: var(--ink-300); }

/* 10  Data rows & steps ================================================== */

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

.steps { counter-reset: st; margin: 0; padding: 0; list-style: none; display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { counter-increment: st; margin: 0; padding-top: 1.1rem; border-top: 2px solid var(--petrol-700); }
.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.22em; color: var(--petrol-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 { border-top-color: var(--petrol-300); }
.section--dark .steps li::before { color: var(--petrol-300); }
.section--dark .steps p { color: var(--ink-300); }

/* The swing strip — a labelled band showing the shape of a high-desert day.
   Carries no temperatures on purpose; the widths are inline so it is correct
   with CSS loaded and with JS off. */
.swing { display: flex; width: 100%; height: clamp(58px, 8vw, 84px); overflow: hidden; border: 1px solid var(--ink-200); }
.swing span { display: flex; align-items: center; justify-content: center; padding: 0 0.4rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; color: #fff; line-height: 1.2; }
.swing__night { background: var(--petrol-900); }
.swing__morning { background: var(--petrol-600); }
.swing__peak { background: var(--ember-600); }
.swing__evening { background: var(--petrol-700); }
.swing-key { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin-top: 0.9rem; padding: 0; list-style: none; font-size: var(--step--2); color: var(--ink-500); }
.swing-key li { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; }
.swing-key i { width: 12px; height: 12px; flex: none; }
.section--dark .swing { border-color: var(--ink-700); }
.section--dark .swing-key { color: var(--ink-400); }

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

.note { padding: clamp(1.15rem, 1rem + 1vw, 1.7rem); background: var(--ember-100); border-left: 4px solid var(--ember-600); }
.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(194,65,12,0.18); }
.section--dark .note p { color: var(--ink-300); }

.band { background: var(--petrol-800); color: #fff; padding-block: clamp(2.5rem, 1.75rem + 3vw, 4rem); }
.band h2 { color: #fff; font-size: var(--step-2); margin-bottom: 0.4em; }
.band p { margin: 0 0 1.35rem; color: rgba(255,255,255,0.92); max-width: 54ch; }

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

.map-frame { width: 100%; aspect-ratio: 16 / 9; min-height: 300px; border: 0; }

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

.faq { border-top: 2px solid var(--ink-900); }
.faq details { border-bottom: var(--line); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0; font-weight: 700; font-size: var(--step-0); letter-spacing: -0.02em;
  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.4rem; line-height: 1; color: var(--petrol-700); 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); }
.section--dark .faq { border-top-color: var(--petrol-300); }
.section--dark .faq details { border-bottom-color: var(--ink-700); }
.section--dark .faq summary { color: #fff; }
.section--dark .faq details p { color: var(--ink-300); }

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

.form-card { padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem); background: var(--white); border: var(--line); }
.form-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .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.12em; text-transform: uppercase; color: var(--ink-600); }
.field .req { color: var(--ember-600); }

input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%; padding: 0.78rem 0.9rem; font: inherit; font-size: var(--step--1); color: var(--ink-900);
  background: var(--paper); border: 1px solid var(--ink-200); border-radius: 0;
  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='%236b7385' 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(--petrol-700); }
input::placeholder, textarea::placeholder { color: var(--ink-400); }

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

.contact-list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink-900); }
.contact-list li { margin: 0; padding: 1.3rem 0; border-bottom: var(--line); }
.contact-list h3 { font-size: var(--step--2); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--petrol-700); margin-bottom: 0.6em; }
.contact-list p { margin: 0; font-size: var(--step-2); font-weight: 700; color: var(--ink-900); line-height: 1.2; letter-spacing: -0.035em; }
.contact-list p.plain { font-size: var(--step-0); font-weight: 400; color: var(--ink-600); letter-spacing: 0; line-height: 1.65; }
.contact-list small { display: block; margin-top: 0.55rem; font-size: 0.84rem; color: var(--ink-500); }
.contact-list a { color: var(--ink-900); text-decoration: none; }
.contact-list a:hover { color: var(--petrol-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.55rem 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.75rem, 2rem + 3vw, 4.25rem) 1.75rem; font-size: var(--step--1); }
.footer-grid { display: grid; gap: 2.25rem; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.5fr 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; }
.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: #fff; 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(--petrol-700); color: #fff; }
.callbar a:last-child { background: var(--ink-950); color: #fff; }
@media (min-width: 1060px) { .callbar { display: none; } }
@media (max-width: 1059px) { body { padding-bottom: 54px; } }

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

figure { margin: 0; }
figcaption { margin-top: 0.7rem; font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.split__media figcaption, .hero__media figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 0.7rem clamp(1rem, 0.5rem + 2vw, 1.75rem);
  background: linear-gradient(to top, rgba(11,13,17,0.85), rgba(11,13,17,0));
  color: var(--ink-200);
}
.split__media figure, .hero__media figure { height: 100%; }

.img-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
  padding: 1rem; width: 100%;
  background: var(--ink-800); border: 1px dashed var(--ink-600);
  text-align: center; color: var(--ink-400);
  font-size: 0.72rem; letter-spacing: 0.1em; 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-200); word-break: break-all; }
.section--white .img-placeholder, .section--paper .img-placeholder, .section--paper2 .img-placeholder {
  background: var(--paper-2); border-color: var(--ink-300); color: var(--ink-500);
}
.section--white .img-placeholder b, .section--paper .img-placeholder b, .section--paper2 .img-placeholder b { color: var(--ink-900); }

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

[data-reveal] { opacity: 0; transform: translateY(14px); }
.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); }