/* Hallmark · shape: kept · genre: editorial · theme: brand · redesign: restyle · copy: verbatim
 * paper: oklch(98% 0.006 84.6) · accent: oklch(60.5% 0.053 192.6) · display: Manrope · body: Inter (Pool-Brand.md) · hero: kept · nav: kept · footer: kept · signature: the offer over dark water, kept
 * axes: light/grotesk-sans/cool · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E4 S4 R4 V3 · weakest: V, the L1 layout stays by the owner's choice so only the system moves; S held back by portfolio cards that name only the pool type until the owner gives object names */
/* Hallmark · finish-review: subagent · 7 findings · 7 resolved (filled action per screen, statement quote, SEO head stepped down, rules off the row radius, Ukrainian non-breaking spaces, deeper hero overlay, channels two-up) · gap: none */
/* Hallmark · waive 11 · the six work cards lift 2px and gain a soft shadow together on hover · the owner asked for exactly this card hover (lift plus soft shadow) in the brief of 31.10 */
/* Hallmark · dismissed 59 · twelve blocks are the homepage sections 1 to 10 of content-plan.html plus hero and footer; the owner fixed the content plan and restyle keeps the layout */
/* Hallmark · answered F4 · one filled action per screen (hero, process, calculator, closing call), ink on paper and bone on deep fields; the nav action stays outlined and the selected step and chip are selection states */
/* Hallmark · reworded "басейни та spa під ключ . найдешевшого кошторису у нас не буде. буде той, що записаний у договорі й не зміниться до запуску." to "Басейни та SPA під ключ. Найдешевшого кошторису у нас не буде. Буде той, що записаний у договорі й не зміниться до запуску." · 54 and 67: the tracked-caps kicker became the head's first line at a second size, the words are unchanged */
/* Hallmark · waive 71 · each work card h3 sits 24px under its own pool photo and 40px above the next card · the name captions the picture above it, the way the L1 reference sets its project cards */
/* Hallmark · pages · 19 inner pages of content-plan.html share this one system (hero, sections, rows, the stepper, works, faq, the closing call) plus the page parts below the "inner pages" rule; copy verbatim, unconfirmed facts left out or marked as a fill */
/* Hallmark · waive 83 · portfolio/index.html is 31 photographs over 55% of the page · the page is the gallery: content-plan.html makes the photo grid its whole job, and every frame is a real PerfectPool object */
/* Hallmark · finish-review (pages): subagent · 8 findings · 8 resolved (calculator form first on phones and no phone bar there, contacts tightened to three sections, team folded into values, figures set large, pool types given photos, hamam row without a sauna, calculator closing call keeps you on its form, FAQ groups in one section) · gap: none */
/* Hallmark · waive 78 · kontakty/index.html: the last section sets three short matters from the plan side by side (visits, companies, Instagram), each its own h2 at title size · at section size each head would run to four lines in a third of the row */
/* Hallmark · dismissed F20 · the 13 items "included in turnkey" (pools, service) leave one on the last row of two columns · 13 is the owner's list and splits evenly into no column count; the lone last row closes the list */
/* Hallmark · pages (legal, EN) · privacy-policy, cookies and terms set as one reading column (.doc) on paper under the crumbs; /en/ is one English page assembled from the homepage parts, translated line for line, nothing added */
/* Hallmark · waive 59 · privacy-policy, cookies, terms: the title block and the text are one document, split into two sections only so the title reads as the opening · the 64px between them is the same step that separates the numbered sections inside the document */
/* Hallmark · cookie bar · a paper bar along the bottom until the visitor chooses, three outlined actions of equal weight (accept, refuse, settings) so refusing is as easy as accepting; Consent Mode v2 in the head */
/* Hallmark · waive 39b · the two buttons that reopen the cookie bar ("Налаштування cookie" in the footer legal line, "Відкрити налаштування cookie" in a sentence of the cookie policy) are text links in a row of text links · they are buttons only because they open the bar instead of a page, and take the 44px target on phones like the links beside them */
/* Manrope and Inter, self-hosted (SIL Open Font License), fetched from Google Fonts on 2026-11-02.
   Variable files: one per script subset covers every weight; the browser downloads a subset only when the page uses it. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/fonts/inter-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/fonts/inter-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('/fonts/manrope-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('/fonts/manrope-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('/fonts/manrope-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('/fonts/manrope-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --text-body: 1.0625rem; /* 17px: Pool-Brand.md keeps body a step above 16 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  /* owner spec: every hover and focus state changes over 0.2s with the browser ease */
  --dur-ui: 0.2s; --ease-ui: ease;
  /* semantic states from Pool-Brand.md (the scaffold's stock values replaced) */
  --color-error: oklch(45.8% 0.111 22.5);    /* terracotta #8B3A3A, 7.16:1 on bone */
  --color-success: oklch(49.4% 0.059 148.6); /* sage #4A6B4F, 5.65:1 on bone */
  --color-warning: oklch(67.9% 0.114 85.2);  /* ochre #B8923A, 2.75:1 on bone: fills and borders only, never text */
  /* 1200px of content, as Pool-Brand.md sets it, inside the scaffold's gutters */
  --container: 1328px; --gutter: 64px; --gap-columns: 40px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;

  /* Brand palette from Pool-Brand.md, in OKLCH. Only --color-muted moved: #6B7680 failed AA for small text (4.37:1), now 5.19:1 on bone, 4.60:1 on sand. */
  --color-paper: oklch(98% 0.006 84.6);      /* bone   #FAF8F4 */
  --color-paper-2: oklch(93.8% 0.014 84.6);  /* sand   #EFEAE0 */
  --color-paper-3: oklch(89.5% 0.018 86);
  --color-ink: oklch(27.5% 0.027 233.7);     /* graphite #1A2A33 */
  --color-ink-2: oklch(40% 0.025 233.7);
  --color-muted: oklch(52% 0.02 245.6);
  --color-rule: oklch(86.8% 0.02 87.5);      /* stone  #D9D3C5 */
  --color-accent: oklch(60.5% 0.053 192.6);  /* water  #5B8C8A */
  --color-accent-ink: oklch(21.1% 0.021 237);
  --color-focus: var(--color-accent);         /* owner spec: focus ring in the accent; 3.56:1 on bone, 3.15:1 on sand, 4.6:1 on deep */
  --color-deep: oklch(21.1% 0.021 237);      /* ink well #0F1A21: dark field and hover */
  --color-on-deep: oklch(98% 0.006 84.6);
  --color-on-deep-2: oklch(80% 0.012 84.6);
  --color-accent-soft: oklch(79.9% 0.03 191.3);
  --color-rule-deep: oklch(36% 0.02 237);
  /* overlays and shadows: the only alpha values */
  --overlay-side: linear-gradient(90deg, oklch(21.1% 0.021 237 / 0.86) 0%, oklch(21.1% 0.021 237 / 0.66) 48%, oklch(21.1% 0.021 237 / 0.2) 100%);
  --overlay-foot: linear-gradient(0deg, oklch(21.1% 0.021 237 / 0.85) 0%, oklch(21.1% 0.021 237 / 0.4) 18%, oklch(21.1% 0.021 237 / 0) 45%);
  --overlay-top: linear-gradient(180deg, oklch(21.1% 0.021 237 / 0.78) 0%, oklch(21.1% 0.021 237 / 0.35) 9%, oklch(21.1% 0.021 237 / 0) 18%);  /* the transparent header over the photo */
  --overlay-mobile: linear-gradient(0deg, oklch(21.1% 0.021 237 / 0.92) 0%, oklch(21.1% 0.021 237 / 0.74) 55%, oklch(21.1% 0.021 237 / 0.55) 100%);
  --rule-on-photo: oklch(98% 0.006 84.6 / 0.22);
  --backdrop: oklch(21.1% 0.021 237 / 0.86);  /* behind the photo viewer */
  --shadow-card: 0 1px 2px oklch(20% 0.01 237 / 0.05);
  --shadow-menu: 0 0 0 1px oklch(30% 0.01 237 / 0.06);
  --shadow-soft: 0 8px 32px oklch(21.1% 0.021 237 / 0.08);  /* card lift, value from Pool-Brand.md */
  --shadow-up: 0 -8px 32px oklch(21.1% 0.021 237 / 0.08);   /* the same soft shadow cast upward: the cookie bar */

  --font-display: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;   /* named in Pool-Brand.md */
  --font-outlier: var(--font-display);
  --display-weight: 700;
  --tracking-display: -0.025em;
  --radius-card: 16px; --radius-input: 12px; --radius-media: 24px; --radius-pill: 999px; --rule-hair: 1px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 700); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 20ch; font-size: var(--text-display); } h2 { max-width: 30ch; font-size: var(--text-section); } h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.num, .figure, td.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-slot] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2, var(--color-paper)), var(--color-paper-3, var(--color-paper))); }
[data-slot] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
[data-slot]:has(> img) > :not(img):not([data-keep]) { display: none !important; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }


html { scroll-behavior: smooth; }
body { font-size: var(--text-body); line-height: 1.75; }
h2 { letter-spacing: -0.02em; }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-input); }
.skip:focus-visible { top: var(--space-md); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.small { font-size: var(--text-sm); color: var(--color-ink-2); }
.nowrap { white-space: nowrap; }

/* controls: one filled primary (the hero's), every other action quiet; all eight states */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-ink); border-radius: var(--radius-input); background: transparent; color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-ui) var(--ease-ui), color var(--dur-ui) var(--ease-ui), border-color var(--dur-ui) var(--ease-ui), transform var(--dur-ui) var(--ease-ui); }
.btn:hover { background: var(--color-paper-2); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--lg { min-height: 52px; padding: 0 var(--space-xl); font-size: var(--text-body); }
.btn--primary { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.btn--primary:hover { background: var(--color-deep); border-color: var(--color-deep); }
.on-deep .btn--primary { background: var(--color-on-deep); color: var(--color-deep); border-color: var(--color-on-deep); }
.on-deep .btn--primary:hover { background: var(--color-paper-2); border-color: var(--color-paper-2); }
.on-deep .btn:not(.btn--primary) { color: var(--color-on-deep); border-color: var(--color-on-deep-2); }
.on-deep .btn:not(.btn--primary):hover { background: var(--color-on-deep); color: var(--color-deep); }
.link { font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.3em; transition: color var(--dur-ui) var(--ease-ui); }
.link:hover { color: var(--color-accent-ink); text-decoration-thickness: 2px; }
.on-deep .link { color: var(--color-on-deep); }

/* header */
.header { position: fixed; inset: 0 0 auto 0; z-index: var(--z-sticky-nav); color: var(--color-on-deep); transition: background-color var(--dur-long) var(--ease-out), color var(--dur-long) var(--ease-out), box-shadow var(--dur-long) var(--ease-out); }
.header.is-solid { background: var(--color-paper); color: var(--color-ink); box-shadow: 0 1px 0 var(--color-rule); }
.header__in { display: flex; align-items: center; gap: var(--space-xl); min-height: 80px; }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; font: var(--display-weight) var(--text-xl)/1 var(--font-outlier); letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
.nav { display: flex; gap: var(--space-lg); margin-inline: auto; }
.nav a, .nav button { font: 400 var(--text-md)/1 var(--font-body); color: inherit; text-decoration: none; background: none; border: 0; padding: var(--space-xs) 0; cursor: pointer; white-space: nowrap; transition: color var(--dur-ui) var(--ease-ui); }
.nav a:hover, .nav button:hover { color: var(--color-accent-soft); }
.header.is-solid .nav a:hover, .header.is-solid .nav button:hover { color: var(--color-accent-ink); }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.5em; }
.nav__group { position: relative; }
.nav__menu { position: absolute; top: calc(100% + var(--space-sm)); left: calc(-1 * var(--space-md)); z-index: var(--z-dropdown); min-width: 16rem; display: grid; padding: var(--space-xs); background: var(--color-paper); color: var(--color-ink); border-radius: var(--radius-input); box-shadow: var(--shadow-menu); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity var(--dur-ui) var(--ease-ui), transform var(--dur-ui) var(--ease-ui), visibility var(--dur-short); }
.nav__group:hover .nav__menu, .nav__group:focus-within .nav__menu { opacity: 1; visibility: visible; transform: none; }
.nav__menu a { padding: var(--space-xs) var(--space-sm); border-radius: calc(var(--radius-input) - var(--space-xs)); }
.nav__menu a:hover { background: var(--color-paper-2); color: var(--color-ink); }
.header__right { display: flex; align-items: center; gap: var(--space-lg); }
.header__tel { font: 500 var(--text-md)/1 var(--font-body); color: inherit; text-decoration: none; white-space: nowrap; }
.lang { font-size: var(--text-sm); white-space: nowrap; }
.lang a { color: inherit; }
.header .btn { min-height: 44px; padding: 0 var(--space-md); color: inherit; border-color: currentColor; }
.header:not(.is-solid) .btn:hover { background: var(--color-on-deep); color: var(--color-deep); }
.burger { display: none; width: 44px; height: 44px; margin-left: auto; background: none; border: 0; color: inherit; cursor: pointer; place-content: center; gap: var(--space-xs); }
.burger span { display: block; width: 22px; height: 2px; background: currentColor; }
.drawer { display: none; }
@media (max-width: 75rem) {
  .nav, .lang, .header__tel { display: none; }
  .burger { display: grid; }
  .drawer { display: block; position: fixed; inset: 80px 0 0 0; padding: var(--space-xl) var(--gutter); background: var(--color-paper); color: var(--color-ink); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--dur-ui) var(--ease-ui), transform var(--dur-ui) var(--ease-ui), visibility var(--dur-short); }
  .drawer.is-open { opacity: 1; visibility: visible; transform: none; }
  .drawer > a { display: block; padding: var(--space-xs) 0; font: var(--display-weight) var(--text-2xl)/1.25 var(--font-display); letter-spacing: var(--tracking-display); text-decoration: none; }
  .drawer__meta { display: grid; gap: var(--space-sm); justify-items: start; margin-top: var(--space-xl); }
  .drawer__meta a:not(.btn) { font-weight: 500; text-decoration: none; }
}
@media (max-width: 40rem) { .header__right .btn { display: none; } }

/* hero */
.hero { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; color: var(--color-on-deep); background: var(--color-deep); overflow: hidden; }
.hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--overlay-top), var(--overlay-side), var(--overlay-foot); }
.hero__body { padding-top: 136px; }
.hero h1 { max-width: 24ch; font-size: clamp(1.875rem, 4vw + 0.75rem, 3.75rem); line-height: 1.04; }
.hero__key { display: block; margin-bottom: var(--space-md); font-size: var(--text-lg); letter-spacing: -0.01em; }
.hero__lead { max-width: 52ch; margin-top: var(--space-lg); font-size: var(--text-lead); line-height: 1.5; color: var(--color-on-deep-2); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }
.proof { margin-top: var(--space-2xl); }
.proof ul { list-style: none; margin: 0; padding: var(--space-lg) 0 var(--space-xl); border-top: 1px solid var(--rule-on-photo); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.proof li { display: grid; gap: var(--space-2xs); padding-inline: var(--space-lg); border-left: 1px solid var(--rule-on-photo); }
.proof li:first-child { padding-left: 0; border-left: 0; }
.proof b { font: var(--display-weight) clamp(1.5rem, 4vw + 0.75rem, var(--text-3xl))/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.proof span { font-size: var(--text-sm); color: var(--color-on-deep-2); }
@media (max-width: 48rem) {
  .hero::after { background: var(--overlay-mobile); }
  .proof ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-lg); }
  .proof li:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* sections */
.section { padding-block: var(--section-gap); }
.section--s { padding-block: var(--section-gap-s); }
.section--l { padding-block: var(--section-gap-l); }
.section--sand { background: var(--color-paper-2); }
.section--deep { background: var(--color-deep); color: var(--color-on-deep); }
.section--flush { padding-top: 0; }
.head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-3xl); }
.head h2 { max-width: 22ch; }
.head__aside { display: grid; gap: var(--space-lg); justify-items: start; color: var(--color-ink-2); }
@media (max-width: 64rem) { .head { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--space-2xl); } }

/* what we do: a list that swaps the photo beside it */
.services { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: start; }
.svc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-rule); }
.svc li { border-bottom: 1px solid var(--color-rule); }
.svc a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-lg); align-items: baseline; margin-block: var(--space-2xs); padding: var(--space-md); border-radius: var(--radius-input); text-decoration: none; transition: background-color var(--dur-ui) var(--ease-ui); }
.svc a:hover, .svc a.is-active { background: var(--color-paper-2); }
.svc h3 { font-size: var(--text-title); }
.svc p { grid-column: 1; color: var(--color-ink-2); }
.svc__go { grid-row: 1; grid-column: 2; font-size: var(--text-sm); font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.3em; }
.services__photo { position: sticky; top: 112px; aspect-ratio: 4 / 5; border-radius: var(--radius-media); overflow: hidden; background: var(--color-paper-2); }
.services__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.services__photo img.is-on { opacity: 1; }
@media (max-width: 64rem) { .services { grid-template-columns: minmax(0, 1fr); } .services__photo { position: relative; top: 0; aspect-ratio: 4 / 3; order: -1; } }

/* why us: five rows */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-rule); }
.rows li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-sm) var(--gap-columns); padding-block: var(--space-xl); border-bottom: 1px solid var(--color-rule); }
.rows h3 { font-size: var(--text-title); }
.rows p { max-width: 58ch; color: var(--color-ink-2); }
@media (max-width: 48rem) { .rows li { grid-template-columns: minmax(0, 1fr); } }

/* process: six real steps, so numbered; the rule runs from the first dot to the last, its ink part is how far along the steps are */
.steps { --dot: 40px; --from: 0; --to: 0; --step-time: 6s; list-style: none; margin: 0 0 var(--space-2xl); padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: relative; }
.steps::before, .steps::after { content: ""; position: absolute; left: calc(var(--dot) / 2); right: calc(100% / 6 - var(--dot) / 2); top: calc(var(--dot) / 2 - 1px); height: 1px; background: var(--color-rule); }
.steps::after { background: var(--color-ink); transform-origin: left center; transform: scaleX(var(--from)); transition: transform var(--dur-ui) var(--ease-ui); }
.steps.is-timing::after { animation: steps-fill var(--step-time) linear forwards; }
.steps.is-paused::after { animation-play-state: paused; }
@keyframes steps-fill { from { transform: scaleX(var(--from)); } to { transform: scaleX(var(--to)); } }
.steps button { z-index: 1; position: relative; display: grid; gap: var(--space-sm); justify-items: start; padding: 0 var(--space-xs) 0 0; background: none; border: 0; color: var(--color-ink); font: inherit; text-align: left; cursor: pointer; }
.steps__dot { display: grid; place-items: center; width: var(--dot); height: var(--dot); border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper); font: var(--display-weight) var(--text-md)/1 var(--font-display); font-variant-numeric: lining-nums; transition: background-color var(--dur-ui) var(--ease-ui), color var(--dur-ui) var(--ease-ui), border-color var(--dur-ui) var(--ease-ui); }
.steps__name { font-size: var(--text-sm); color: var(--color-ink-2); transition: color var(--dur-ui) var(--ease-ui); }
.steps button:hover .steps__dot { border-color: var(--color-ink); }
.steps button[aria-selected="true"] .steps__dot { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.steps button[aria-selected="true"] .steps__name { color: var(--color-ink); font-weight: 500; }
/* step text and the engineer-visit action share the left column, so the action is on screen with the step it follows */
.step-panels { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: start; }
.step-copy { display: grid; gap: var(--space-xl); justify-items: start; }
.step-panel h3 { margin-bottom: var(--space-md); font-size: var(--text-2xl); }
.step-panel p { max-width: 46ch; color: var(--color-ink-2); }
.step-photo { position: relative; }
.step-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-media); }
/* the steps move on by themselves, so the photo corner carries a pause (WCAG 2.2.2); inset 12 inside the 24 photo radius */
.steps__toggle { position: absolute; top: var(--space-sm); right: var(--space-sm); z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-ui) var(--ease-ui), transform var(--dur-ui) var(--ease-ui); }
.steps__toggle:hover { background: var(--color-paper-2); }
.steps__toggle:active { transform: scale(0.97); }
.steps__toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.steps__toggle svg { width: 16px; height: 16px; fill: currentColor; }
.steps__toggle .i-play, .stepper.is-held .steps__toggle .i-pause { display: none; }
.stepper.is-held .steps__toggle .i-play { display: block; }
html:not(.js) .steps__toggle { display: none; }
@media (prefers-reduced-motion: reduce) { .steps__toggle { display: none; } .steps::after { transition: none; } }
@media (max-width: 64rem) { .step-panels { grid-template-columns: minmax(0, 1fr); } .step-photo { order: -1; } }
@media (max-width: 48rem) { .steps__name { display: none; } .steps button { justify-items: center; padding: 0; } }

/* works */
.works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.work { display: grid; align-content: start; gap: var(--space-lg); text-decoration: none; transition: transform var(--dur-ui) var(--ease-ui); }
.work:hover, .work:focus-visible { transform: translateY(-2px); }
.work__img { aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; background: var(--color-paper-3); transition: box-shadow var(--dur-ui) var(--ease-ui); }
.work:hover .work__img, .work:focus-visible .work__img { box-shadow: var(--shadow-soft); }
.work__img img { width: 100%; height: 100%; object-fit: cover; }
.work h3 { font-size: var(--text-title); }
@media (max-width: 64rem) { .works { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .works { grid-template-columns: minmax(0, 1fr); } }

/* calculator band */
.calc { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: start; }
.calc h2 { max-width: 18ch; }
.calc__text { max-width: 52ch; margin-top: var(--space-lg); color: var(--color-on-deep-2); }
.calc form { padding: var(--space-xl); border: 1px solid var(--color-rule-deep); border-radius: var(--radius-card); }
.calc fieldset { margin: 0; padding: 0; border: 0; }
.calc legend { padding: 0; margin-bottom: var(--space-xs); font-size: var(--text-sm); color: var(--color-on-deep-2); }
.calc__q { margin-bottom: var(--space-lg); font: var(--display-weight) var(--text-2xl)/1.15 var(--font-display); letter-spacing: var(--tracking-display); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule-deep); border-radius: var(--radius-input); cursor: pointer; transition: background-color var(--dur-ui) var(--ease-ui), color var(--dur-ui) var(--ease-ui), border-color var(--dur-ui) var(--ease-ui); }
.chips label:hover { border-color: var(--color-on-deep-2); }
.chips input:checked + label { background: var(--color-on-deep); color: var(--color-deep); border-color: var(--color-on-deep); }
.chips input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.calc__foot { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; justify-content: space-between; margin-top: var(--space-xl); }
.calc__foot p { font-size: var(--text-sm); color: var(--color-on-deep-2); }
.calc__help { min-height: 1lh; margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-on-deep-2); }
@media (max-width: 64rem) { .calc { grid-template-columns: minmax(0, 1fr); } }

/* review */
.review { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap-columns); align-items: end; margin: 0; padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
.review blockquote { margin: 0; }
.review blockquote p { font: 500 clamp(var(--text-lg), 1.2vw + 0.95rem, var(--text-2xl))/1.3 var(--font-display); letter-spacing: -0.015em; max-width: 46ch; }
@media (min-width: 48rem) { .review blockquote p { text-indent: -0.45em; } }
.review figcaption { display: flex; gap: var(--space-md); align-items: center; }
.review figcaption img { width: 64px; height: 64px; flex-shrink: 0; border-radius: var(--radius-pill); }
.review figcaption b { display: block; font-weight: 500; }
@media (max-width: 64rem) { .review { grid-template-columns: minmax(0, 1fr); } }

/* questions */
.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: start; }
.faq__head { position: sticky; top: 112px; display: grid; gap: var(--space-lg); justify-items: start; }
.faq details { border-bottom: 1px solid var(--color-rule); }
.faq details:first-of-type { border-top: 1px solid var(--color-rule); }
.faq summary { display: flex; justify-content: space-between; gap: var(--space-lg); align-items: center; padding-block: var(--space-lg); cursor: pointer; list-style: none; font: 500 var(--text-lg)/1.35 var(--font-body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex-shrink: 0; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat; transition: transform var(--dur-short) var(--ease-in-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 60ch; padding-bottom: var(--space-lg); color: var(--color-ink-2); }
@media (max-width: 64rem) { .faq { grid-template-columns: minmax(0, 1fr); } .faq__head { position: static; } }

/* regions */
.regions { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: start; }
.regions__text { max-width: 48ch; margin-top: var(--space-lg); color: var(--color-ink-2); }
.regions h3 { margin-bottom: var(--space-md); font: 500 var(--text-md)/1.4 var(--font-body); letter-spacing: 0; }
.regions__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns); border-top: 1px solid var(--color-rule); }
.regions__list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); font: var(--display-weight) var(--text-lg)/1.3 var(--font-display); letter-spacing: -0.015em; }
.regions__list small { font: 400 var(--text-sm)/1 var(--font-body); color: var(--color-ink-2); letter-spacing: 0; }
@media (max-width: 64rem) { .regions { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .regions__list { grid-template-columns: minmax(0, 1fr); } }

/* last call */
.cta { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 520px; border-radius: var(--radius-media); overflow: hidden; color: var(--color-on-deep); }
.cta img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--overlay-side), var(--overlay-foot); }
.cta__body { width: 100%; max-width: 46rem; padding: var(--space-2xl); }
.cta p { max-width: 50ch; margin-top: var(--space-lg); color: var(--color-on-deep-2); }
.cta .hero__cta { align-items: center; }
@media (max-width: 48rem) { .cta::after { background: var(--overlay-mobile); } .cta__body { padding: var(--space-xl) var(--space-lg); } }

/* search text slot */
.seo h2 { max-width: 30ch; margin-bottom: var(--space-md); font-size: var(--text-2xl); }
.seo p { max-width: 60ch; color: var(--color-ink-2); }
.fill { padding: 0 0.25em; border: 1px dashed var(--color-muted); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* footer */
.footer { padding-block: var(--space-3xl) var(--space-xl); background: var(--color-deep); color: var(--color-on-deep); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.6fr)); gap: var(--gap-columns); }
.footer p, .footer li, .footer a { font-size: var(--text-md); color: var(--color-on-deep-2); text-decoration: none; }
.footer a:hover { color: var(--color-on-deep); text-decoration: underline; text-decoration-color: var(--color-accent-soft); }
.footer h3 { margin-bottom: var(--space-md); font: 500 var(--text-md)/1.4 var(--font-body); letter-spacing: 0; color: var(--color-on-deep); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.footer__channels { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-md); }
.footer .wordmark { display: inline-block; margin-bottom: var(--space-md); color: var(--color-on-deep); }
.footer__bottom { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); justify-content: space-between; margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-deep); }
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.footer__bottom p, .footer__bottom a, .footer__bottom li { font-size: var(--text-sm); }
@media (max-width: 64rem) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .footer__grid { grid-template-columns: minmax(0, 1fr); } }

/* messengers on desktop, a call bar on phones */
.messengers { position: fixed; right: var(--space-lg); bottom: var(--space-lg); z-index: var(--z-sticky); display: grid; gap: var(--space-xs); }
.messengers a { min-height: 44px; padding: 0 var(--space-md); background: var(--color-paper); font-size: var(--text-sm); box-shadow: var(--shadow-card); }
.callbar { display: none; }
@media (max-width: 48rem) {
  .messengers { display: none; }
  .callbar { position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky); display: grid; transition: transform var(--dur-ui) var(--ease-ui), visibility var(--dur-short); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); padding: var(--space-xs) var(--gutter) calc(var(--space-xs) + env(safe-area-inset-bottom)); background: var(--color-paper); box-shadow: 0 -1px 0 var(--color-rule); }
  .callbar .btn { padding: 0 var(--space-sm); }
  .callbar .btn--fill { background: var(--color-ink); color: var(--color-paper); }
  body { padding-bottom: var(--space-3xl); }
  .js .callbar:not(.is-shown) { transform: translateY(100%); visibility: hidden; }
}
@media (max-width: 40rem) { .btn--lg { min-height: 48px; padding: 0 var(--space-lg); font-size: var(--text-md); } .hero__cta .btn { width: 100%; } }
@media (max-width: 22.4rem) { .hero__cta .btn { padding: 0 var(--space-md); font-size: var(--text-sm); } .cta__body { padding: var(--space-xl) var(--space-md); } }

/* touch targets: 44 x 44 at least on phones */
@media (max-width: 48rem) {
  .link, .footer a, .drawer__meta a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .footer ul { gap: 0; }
  .footer__bottom ul { column-gap: var(--space-lg); }
  .steps { --dot: 44px; }
  .steps__toggle { width: 44px; height: 44px; }
}

/* the one reveal: visible without script, at its end state under reduced motion */
.js .reveal { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ------------------------------------------------------------------ */
/* inner pages: the parts the 19 content-plan pages add to the homepage system */

/* page hero: the homepage's photo hero, shorter, with the trail above the head */
.hero--page { min-height: min(84svh, 760px); }
.hero--page h1 { max-width: 22ch; font-size: clamp(2rem, 3vw + 1rem, 3.5rem); line-height: 1.06; }
.hero--page .hero__body { padding-bottom: var(--space-2xl); }
.crumbs ol { list-style: none; margin: 0 0 var(--space-lg); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.crumbs li + li::before { content: "/"; margin-right: var(--space-xs); }
.crumbs a { color: inherit; text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 0.3em; transition: color var(--dur-ui) var(--ease-ui); }
.crumbs a:hover { color: var(--color-ink); }
.on-deep .crumbs ol { color: var(--color-on-deep-2); }
.on-deep .crumbs a { text-decoration-color: var(--rule-on-photo); }
.on-deep .crumbs a:hover { color: var(--color-on-deep); }
.crumbs a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* items: a few parallel things side by side (types, audiences, packages); a rule over each, no boxes */
.items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.items > li { display: grid; align-content: start; gap: var(--space-sm); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.items h3 { font-size: var(--text-title); }
.items p { color: var(--color-ink-2); }
.items .link { justify-self: start; margin-top: var(--space-2xs); }
.items__img { aspect-ratio: 4 / 3; margin-bottom: var(--space-xs); border-radius: var(--radius-card); overflow: hidden; background: var(--color-paper-3); }
.items__img img { width: 100%; height: 100%; object-fit: cover; }
.items--2 { --cols: 2; } .items--3 { --cols: 3; }
@media (max-width: 64rem) { .items { --cols: 2; } }
@media (max-width: 40rem) { .items, .items--2, .items--3 { --cols: 1; } }

/* process: steps that read in order, numbered because the order is real */
.process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); counter-reset: step; }
.process > li { display: grid; align-content: start; gap: var(--space-sm); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); counter-increment: step; }
.process > li::before { content: counter(step); font: var(--display-weight) var(--text-3xl)/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: lining-nums; color: var(--color-accent-ink); }
.process h3 { font-size: var(--text-title); }
.process p { color: var(--color-ink-2); }
.process__when { font-size: var(--text-sm); color: var(--color-muted); }
.section--sand .process__when { color: var(--color-ink-2); }
@media (max-width: 64rem) { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .process { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }

/* split: a block of text beside one photograph */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: center; }
.split--flip > :first-child { order: 2; }
.split__text { display: grid; gap: var(--space-lg); justify-items: start; }
.split__text h2 { max-width: 20ch; }
.split__text p { max-width: 56ch; color: var(--color-ink-2); }
.split__img { aspect-ratio: 4 / 3; border-radius: var(--radius-media); overflow: hidden; background: var(--color-paper-3); }
.split__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 64rem) { .split { grid-template-columns: minmax(0, 1fr); } .split--flip > :first-child { order: 0; } }

/* checks: what is included; a drawn tick, never a glyph */
.checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns); border-top: 1px solid var(--color-rule); }
.checks li { position: relative; padding: var(--space-md) 0 var(--space-md) var(--space-xl); border-bottom: 1px solid var(--color-rule); }
.checks li::before { content: ""; position: absolute; left: 4px; top: calc(var(--space-md) + 0.45em); width: 12px; height: 7px; border-left: 2px solid var(--color-accent-ink); border-bottom: 2px solid var(--color-accent-ink); transform: rotate(-45deg); }
.split__text .checks { grid-template-columns: minmax(0, 1fr); justify-self: stretch; }
@media (max-width: 48rem) { .checks { grid-template-columns: minmax(0, 1fr); } }
.note { max-width: 64ch; margin-top: var(--space-lg); color: var(--color-ink-2); }

/* facts: a term and what it means, in rows (price factors, specifications, requisites) */
.facts { margin: 0; border-top: 1px solid var(--color-rule); }
.facts > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xs) var(--gap-columns); padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.facts dt { font-weight: 500; }
.facts dd { margin: 0; color: var(--color-ink-2); }
@media (max-width: 40rem) { .facts > div { grid-template-columns: minmax(0, 1fr); } }

/* price: the honest-price block, text on the left, what moves the price on the right */
.price { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: start; }
.price__text { display: grid; gap: var(--space-lg); justify-items: start; }
.price__text p { max-width: 54ch; color: var(--color-ink-2); }
/* a small head over a list or a set of rows: the body face, a step down from a title */
.list-head { margin-bottom: var(--space-md); font: 500 var(--text-md)/1.4 var(--font-body); letter-spacing: 0; }
@media (max-width: 64rem) { .price { grid-template-columns: minmax(0, 1fr); } }

/* figures: only numbers the owner confirmed */
.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.stats > li { display: grid; gap: var(--space-xs); padding-inline: var(--space-lg); border-left: 1px solid var(--color-rule); }
.stats > li:first-child { padding-left: 0; border-left: 0; }
.stats b { font: var(--display-weight) var(--text-display-s)/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: lining-nums tabular-nums; }
.stats span { font-weight: 500; }
.stats p { max-width: 46ch; color: var(--color-ink-2); }
.stats--2 { --cols: 2; }
.stats > li { align-content: start; }
@media (max-width: 48rem) { .stats { grid-template-columns: minmax(0, 1fr); } .stats > li { padding: var(--space-md) 0; border-left: 0; border-top: 1px solid var(--color-rule); } .stats > li:first-child { border-top: 0; } }

/* table: comparisons that need columns */
.table-wrap { overflow-x: auto; border-top: 1px solid var(--color-rule); }
.table { width: 100%; min-width: 40rem; border-collapse: collapse; }
.table th, .table td { padding: var(--space-md) var(--space-md) var(--space-md) 0; border-bottom: 1px solid var(--color-rule); text-align: left; vertical-align: top; }
.table th { font: 500 var(--text-sm)/1.4 var(--font-body); color: var(--color-ink-2); }
.table td { color: var(--color-ink-2); }
.table th[scope="row"] { font: var(--display-weight) var(--text-lg)/1.3 var(--font-display); letter-spacing: -0.015em; color: var(--color-ink); }
.table-wrap:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* gallery: several photographs of one place */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); }
.gallery img:first-child { grid-column: span 2; grid-row: span 2; height: 100%; }
@media (max-width: 48rem) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery img:first-child { grid-column: span 2; grid-row: auto; } }

/* forms on paper: the contact form and the calculator page */
.form { display: grid; gap: var(--space-lg); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.field { display: grid; gap: var(--space-xs); }
.field label, .field legend { font-size: var(--text-sm); font-weight: 500; }
.field input, .field textarea, .field select { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font: inherit; outline: 2px solid transparent; outline-offset: -3px; transition: border-color var(--dur-ui) var(--ease-ui); }
.field input, .field select { height: 48px; padding-block: 0; line-height: 1.4; }
.field textarea { min-height: 128px; resize: vertical; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--color-ink); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline-color: var(--color-focus); }
.field [aria-invalid="true"] { border-color: var(--color-error); }
.field fieldset { margin: 0; padding: 0; border: 0; }
.form__help { min-height: 1lh; font-size: var(--text-sm); color: var(--color-ink-2); }
.form__foot { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
.form__foot p { font-size: var(--text-sm); color: var(--color-ink-2); }
.chips--paper label { border-color: var(--color-rule); }
.chips--paper label:hover { border-color: var(--color-ink); }
.chips--paper input:checked + label { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
@media (max-width: 40rem) { .form__row { grid-template-columns: minmax(0, 1fr); } }

/* filters over a grid of works (the portfolio page) */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-2xl); }
.filters button { min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: transparent; color: var(--color-ink); font: 400 var(--text-md)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-ui) var(--ease-ui), color var(--dur-ui) var(--ease-ui), border-color var(--dur-ui) var(--ease-ui); }
.filters button:hover { border-color: var(--color-ink); }
.filters button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.filters button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
html:not(.js) .filters { display: none; }

/* a section that only closes the page with a link onward */
.more { margin-top: var(--space-2xl); }

/* anchored sections clear the fixed header */
.section[id] { scroll-margin-top: 80px; }
.split--top { align-items: start; }

/* a page that opens on paper instead of a photograph: the calculator, whose form is the first screen */
.page-top { padding-top: calc(80px + var(--space-2xl)); }
.opening { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "text form" "note form"; grid-template-rows: auto 1fr; gap: 0 var(--gap-columns); align-items: start; }
.opening__text { grid-area: text; }
.opening .wizard { grid-area: form; }
.opening__note { grid-area: note; }
.opening h1 { max-width: 16ch; font-size: clamp(2rem, 3vw + 1rem, 3.5rem); line-height: 1.06; }
.opening__lead { max-width: 46ch; margin-top: var(--space-lg); font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); }
.opening__note { max-width: 46ch; margin-top: var(--space-lg); color: var(--color-ink-2); }
@media (max-width: 64rem) { .opening { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "form" "note"; grid-template-rows: auto; } .opening .wizard { margin-top: var(--space-xl); } }

/* the step-by-step form: one question at a time with script, the whole form without it */
.wizard { padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); }
.wizard__count { margin-bottom: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.wizard__step { display: grid; gap: var(--space-md); margin: 0 0 var(--space-xl); padding: 0; border: 0; }
.wizard .wizard__q { margin-bottom: var(--space-xs); padding: 0; font: var(--display-weight) var(--text-2xl)/1.15 var(--font-display); letter-spacing: var(--tracking-display); }
.wizard__nav { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; justify-content: space-between; }
.wizard__nav [data-back] { margin-right: auto; }
html:not(.js) .wizard [data-back], html:not(.js) .wizard [data-next], html:not(.js) .wizard__count { display: none; }
@media (max-width: 40rem) { .wizard { padding: var(--space-lg); } .wizard__nav .btn--primary { flex: 1; } }

/* photo viewer on the portfolio page: a native dialog; without script the card opens the photo itself */
.lightbox { width: fit-content; max-width: min(92vw, 1200px); max-height: 92svh; padding: 0; border: 0; border-radius: var(--radius-card); background: var(--color-deep); color: var(--color-on-deep); overflow: hidden; }
.lightbox::backdrop { background: var(--backdrop); }
.lightbox img { display: block; max-width: 100%; max-height: calc(92svh - 72px); width: auto; height: auto; margin-inline: auto; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-md); }
.lightbox__bar p { font-size: var(--text-sm); color: var(--color-on-deep-2); }
.lightbox .btn { min-height: 44px; }

/* two cards where only two real photos exist */
.works--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 40rem) { .works--2 { grid-template-columns: minmax(0, 1fr); } }

/* the FAQ page: every group in one section, a hairline over each group after the first, as wide as the text */
.faq-groups .faq + .faq { margin-top: var(--space-2xl); padding-top: var(--space-2xl); background: linear-gradient(var(--color-rule), var(--color-rule)) top center / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
.faq-groups .faq__head { position: static; }

/* contacts: the office beside the form, and three short matters in one row */
.address { display: grid; gap: var(--space-sm); justify-items: start; margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.address h3 { font-size: var(--text-title); }
.address p { max-width: 48ch; color: var(--color-ink-2); }
.items h2 { font-size: var(--text-title); letter-spacing: -0.015em; }
.items .facts dd { font-size: var(--text-md); }
.items .facts > div { grid-template-columns: minmax(0, 1fr); }

/* legal pages: one document on paper, a reading column of numbered sections under the crumbs */
.doc { max-width: 72ch; }
.doc h1 { max-width: 18ch; font-size: clamp(2rem, 3vw + 1rem, 3.5rem); line-height: 1.06; }
.doc__date { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.doc__lead { margin-top: var(--space-lg); font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); }
.doc h2 { max-width: none; margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); font-size: var(--text-2xl); line-height: 1.2; scroll-margin-top: 96px; }
.doc h3 { margin-top: var(--space-lg); }
.doc p:not([class]), .doc ul, .doc .table-wrap { margin-top: var(--space-md); }
.doc ul { display: grid; gap: var(--space-xs); padding-left: 1.25em; }
.doc li::marker { color: var(--color-muted); }
.doc .table { min-width: 36rem; }
/* a link inside a sentence keeps the line's rhythm: inline links are exempt from the 44px target (WCAG 2.5.8) */
@media (max-width: 48rem) { .doc p .link, .doc li .link, .form__foot p .link, .wizard .small .link, .consent__text .link { display: inline; min-height: 0; min-width: 0; } }
.doc-top { padding-bottom: 0; }
.doc-body { padding-top: 0; }

/* cookie consent: a bar along the bottom until the visitor chooses; accept and refuse carry the same weight */
.consent { position: fixed; inset: auto 0 0 0; z-index: var(--z-toast); padding-block: var(--space-lg); background: var(--color-paper); color: var(--color-ink); box-shadow: var(--shadow-up); }
.consent[hidden] { display: none; }
.consent__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md) var(--space-xl); align-items: center; }
.consent__text { max-width: 72ch; font-size: var(--text-sm); line-height: 1.6; color: var(--color-ink-2); }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.consent__actions .btn { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.consent__options { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md) var(--gap-columns); margin: 0; padding: var(--space-md) 0 0; border: 0; border-top: 1px solid var(--color-rule); }
.consent__options[hidden] { display: none; }
.consent__opt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: start; font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-2); cursor: pointer; }
.consent__opt b { display: block; font-weight: 500; color: var(--color-ink); }
.consent__opt input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--color-ink); cursor: pointer; }
.consent__opt input:disabled { cursor: not-allowed; }
.consent__opt input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 64rem) { .consent__in { grid-template-columns: minmax(0, 1fr); } .consent__options { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .consent { padding-block: var(--space-md); } .consent__actions .btn { flex: 1 1 auto; } }
/* the switch that reopens it: a footer link that is a button, and the same on the cookie policy */
.footer__consent, button.link { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
button.link { font-weight: 500; text-align: left; }
.footer__consent { font-size: var(--text-sm); color: var(--color-on-deep-2); }
.footer__consent:hover { color: var(--color-on-deep); text-decoration: underline; text-decoration-color: var(--color-accent-soft); }
.footer__consent:focus-visible, button.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 48rem) { .footer__consent { display: inline-flex; align-items: center; min-height: 44px; } }
html:not(.js) [data-consent-open] { display: none; }