/* Hallmark · v2.0.0 · theme: custom · deal: manual (no Node on this machine) · brand: Ply Unlimited (terracotta sampled from the logo file; content from the 2026 profile and the old site) · idea: "ply means layer: many materials pressed into one order" · vibe: "calm, architectural, plaster and pine, timber warmth" · genre: editorial · job: enquire, the quote action in the nav, the hero and a closing band on every page · posture: full palette (plaster paper, pine field, oak ply, terracotta signal and the drenched closing band) · axes: light/roman-serif/warm · hero: type first, the lounge photograph opening to full bleed on scroll · nav: logo, five links, one outlined action, hides on the way down · footer: one line, three link lists, the wordmark edge to edge · signature: thirteen material strips falling into one stack while pinned */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R3 V4 · weakest: R, the owner asked for heavy motion so several scroll patterns stay; cut the custom cursor, auto-playing marquees and the client logo wall */
/* waive F8: several scroll patterns (pinned stack, the Densewood fan, drifting sector rows), asked for by the owner in words */
/* waive 65: terracotta is the brand's logo colour; the paper is a near-neutral plaster and the dark field is pine green, not cream and brown */
/* waive 58, 42: catalogue pages carry the owner's full product lists; the footer's link lists are a site map for thirteen pages */
/* answered: sloplint and the fresh-context reviews did not run (no Node); checked by hand in the browser at desktop and phone widths */

:root {
  --c-plaster: oklch(96.5% 0.006 95);
  --c-plaster-2: oklch(93% 0.01 92);
  --c-ink: oklch(21% 0.014 160);
  --c-muted: oklch(43% 0.014 150);
  --c-pine: oklch(25% 0.028 162);
  --c-pine-2: oklch(31% 0.03 162);
  --c-sage: oklch(82% 0.024 150);
  --c-cream: oklch(95.5% 0.008 95);
  --c-oak: oklch(85% 0.048 80);
  --c-oak-2: oklch(77% 0.058 78);
  --c-terracotta: oklch(50% 0.155 32);
  --c-terracotta-deep: oklch(42% 0.14 32);
  --c-rule: oklch(84% 0.01 95);
  --c-rule-dark: oklch(40% 0.028 162);
  --c-rule-accent: oklch(62% 0.12 34);
  --c-shade: oklch(18% 0.02 160 / 0.74);
  --c-shade-0: oklch(18% 0.02 160 / 0);
  --c-shadow: oklch(20% 0.02 160 / 0.22);

  --bg: var(--c-plaster); --fg: var(--c-ink); --fg-soft: var(--c-muted); --line: var(--c-rule); --signal: var(--c-terracotta); --focus: var(--c-terracotta-deep);

  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-xl: clamp(2.5rem, 6.4vw, 6.25rem);
  --text-display: clamp(2.2rem, 4.7vw, 4.25rem);
  --text-head: clamp(1.7rem, 3vw, 2.75rem);
  --text-statement: clamp(1.4rem, 2.5vw, 2.25rem);
  --text-title: clamp(1.15rem, 1.5vw, 1.375rem);
  --text-lede: clamp(1.05rem, 1.25vw, 1.1875rem);
  --text-body: 1rem;
  --text-small: 0.9rem;

  --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;
  --gutter: clamp(16px, 4vw, 64px);
  --section: clamp(72px, 10vw, 160px);
  --wrap: 82rem;
  --nav-h: 76px;
  --r-band: clamp(20px, 3vw, 40px);
  --r-card: 10px;
  --r-pill: 999px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-short: 220ms; --dur-long: 420ms;
  --z-nav: 300; --z-loader: 500;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; overflow-x: clip; background: var(--c-plaster); color: var(--c-ink); font-family: var(--font-body); font-size: var(--text-body); line-height: 1.6; font-synthesis: none; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
::selection { background: var(--c-terracotta); color: var(--c-cream); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--space-md); top: var(--space-md); z-index: var(--z-loader); padding: var(--space-sm) var(--space-md); background: var(--c-pine); color: var(--c-cream); border-radius: var(--r-pill); transform: translateY(-300%); }
.skip:focus-visible { transform: none; }
section, .footer, .next { background: var(--bg); color: var(--fg); }
figure { overflow: clip; border-radius: var(--r-card); }
figure img { width: 100%; height: 100%; object-fit: cover; }

.band { position: relative; border-radius: var(--r-band) var(--r-band) 0 0; margin-top: calc(-1 * var(--r-band)); padding-block: var(--section) calc(var(--section) + var(--r-band)); }
.band--dark { --bg: var(--c-pine); --fg: var(--c-cream); --fg-soft: var(--c-sage); --line: var(--c-rule-dark); --signal: var(--c-oak); --focus: var(--c-oak); }
.band--oak { --bg: var(--c-oak); --fg: var(--c-ink); --fg-soft: var(--c-ink); --line: var(--c-oak-2); --focus: var(--c-ink); }

/* ---------- type ---------- */
.display, .head, .statement__text, .brands__list, .footer__line, .fam__name, .next strong, .product h2, .pcard h2, .builds h3, .why h3, .steps h3, .make h3, .mat h3, .path h3, .compare__table thead th, .lab__sub, .lab__list strong, .clients h3, .sizes tbody th, .grades dt, .figures dd, .sectors__row, .hero__tag, .sect__list li {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em;
}
.display { font-size: var(--text-display); font-weight: 500; letter-spacing: -0.03em; line-height: 1.06; max-width: 17ch; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
.display--xl { font-size: var(--text-xl); line-height: 1; letter-spacing: -0.035em; max-width: none; }
.head { font-size: var(--text-head); font-weight: 500; letter-spacing: -0.028em; line-height: 1.1; max-width: 20ch; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
.minor { font-size: var(--text-lede); font-weight: 600; }
.lede { font-size: var(--text-lede); line-height: 1.5; max-width: 46ch; color: var(--fg-soft); text-wrap: pretty; }
.split-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-lg) var(--space-2xl); }
.w { display: inline-block; overflow: clip; vertical-align: top; padding-block: 0.12em; margin-block: -0.12em; }
.wi { display: inline-block; }

/* ---------- controls ---------- */
.btn { --b-bg: transparent; --b-fg: var(--fg); --b-line: var(--fg); display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--b-line); border-radius: var(--r-pill); background: var(--b-bg); color: var(--b-fg); font: inherit; font-size: var(--text-small); font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.btn--fill { --b-bg: var(--c-terracotta); --b-fg: var(--c-cream); --b-line: var(--c-terracotta); }
.btn--fill:hover { --b-bg: var(--c-terracotta-deep); --b-line: var(--c-terracotta-deep); }
.btn--line:hover { --b-bg: var(--fg); --b-fg: var(--bg); }
.btn--dark { --b-bg: var(--c-pine); --b-fg: var(--c-cream); --b-line: var(--c-pine); }
.btn--dark:hover { --b-bg: var(--c-pine-2); --b-line: var(--c-pine-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ---------- veil: the logo opens the first visit and carries the visitor between pages ---------- */
.veil { display: none; }
.js .veil { position: fixed; inset: 0; z-index: var(--z-loader); display: grid; place-items: center; overflow: clip; background: var(--c-pine); pointer-events: none; transform: translateY(101%); }
.veil img { width: min(64vw, 560px); height: auto; will-change: transform, opacity; }
.intro .veil, .arrive .veil { transform: none; animation: veil-failsafe 1ms 6s forwards; }
.intro .veil img { opacity: 0; }
@keyframes veil-failsafe { to { visibility: hidden; } }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav); color: var(--c-ink); transition: transform var(--dur-long) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.nav.is-solid { background: var(--c-plaster); }
.nav__row { display: flex; align-items: center; gap: var(--space-xl); height: var(--nav-h); }
.nav__logo img { width: clamp(164px, 17vw, 236px); }
.nav__links { display: flex; gap: var(--space-lg); margin-left: auto; }
.nav__links a, .menu a { font-size: var(--text-small); font-weight: 600; text-decoration: none; white-space: nowrap; }
.nav__links a { padding: var(--space-xs) 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--dur-short) var(--ease-out); }
.nav__links a:hover, .nav__links a[aria-current] { background-size: 100% 1px; }
.nav__cta { min-height: 44px; }
.nav__toggle { display: none; min-height: 44px; margin-left: auto; padding: 0 var(--space-md); border: 1px solid var(--c-ink); border-radius: var(--r-pill); background: transparent; color: inherit; font: inherit; font-size: var(--text-small); font-weight: 600; cursor: pointer; }
.menu { display: grid; gap: var(--space-lg); max-height: calc(100svh - var(--nav-h)); overflow-y: auto; padding: var(--space-md) var(--gutter) var(--space-xl); background: var(--c-plaster); border-top: 1px solid var(--c-rule); }
.menu[hidden] { display: none; }
.menu__main, .menu__sub { display: grid; }
.menu__main a { padding: var(--space-xs) 0; font-family: var(--font-display); font-size: var(--text-title); font-weight: 600; }
.menu__sub { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--c-rule); }
.menu__sub a { padding: var(--space-sm) 0; white-space: normal; }

/* ---------- home hero ---------- */
.hero { padding-top: calc(var(--nav-h) + clamp(16px, 3vw, 44px)); }
.hero__row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-lg) var(--space-2xl); margin-top: clamp(20px, 2.4vw, 36px); }
.hero__media { position: relative; height: min(100svh, 62rem); margin-top: clamp(24px, 3vw, 48px); border-radius: 0; clip-path: inset(0 var(--gutter) 0 var(--gutter) round var(--r-band)); }
.hero__media img { object-position: 50% 62%; }
.hero__media::after { content: ""; position: absolute; inset: 45% 0 0 0; background: linear-gradient(var(--c-shade-0), var(--c-shade)); }
.hero__tag { position: absolute; z-index: 1; left: calc(var(--gutter) + clamp(16px, 3vw, 48px)); right: calc(var(--gutter) + var(--space-md)); bottom: clamp(24px, 6vh, 72px); color: var(--c-cream); font-size: var(--text-display); line-height: 1.02; }
.hero__tag span { display: block; max-width: 10ch; }

/* ---------- statement and figures ---------- */
.statement { padding-block: var(--section) calc(var(--section) + var(--r-band)); }
.statement__text { max-width: 27ch; font-size: var(--text-statement); line-height: 1.14; text-wrap: balance; }
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl); }
.statement__text + .figures { margin-top: clamp(48px, 7vw, 112px); }
.figures > div { padding-top: var(--space-lg); border-top: 1px solid var(--line); }
.figures dd { font-size: clamp(2rem, 4vw, 3.75rem); line-height: 1; color: var(--signal); font-variant-numeric: tabular-nums lining-nums; }
.figures dt { margin-top: var(--space-sm); font-size: var(--text-small); font-weight: 600; }

/* ---------- stack (signature) ---------- */
.stack { display: grid; align-items: center; min-height: 100svh; padding-block: var(--space-3xl) calc(var(--space-3xl) + var(--r-band)); }
.stack__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.stack__copy, .dwhome__copy, .phero__copy { display: grid; gap: var(--space-lg); justify-items: start; }
.plies { display: grid; gap: var(--space-3xs); counter-reset: ply; }
.plies li { counter-increment: ply; display: flex; align-items: center; justify-content: space-between; min-height: clamp(2.5rem, 5.4svh, 3.25rem); padding-inline: clamp(12px, 1.6vw, 24px); background: var(--c-oak); color: var(--c-ink); font-size: clamp(0.9375rem, 1.3vw, 1.125rem); font-weight: 600; }
.plies li::after { content: counter(ply, decimal-leading-zero); font-weight: 400; font-variant-numeric: tabular-nums; }
.plies li:nth-child(even) { background: var(--c-plaster); }
.plies li:nth-child(4n+1) { background: var(--c-terracotta); color: var(--c-cream); }
.plies li:first-child { border-radius: var(--space-2xs) var(--space-2xs) 0 0; }
.plies li:last-child { border-radius: 0 0 var(--space-2xs) var(--space-2xs); }

/* ---------- Densewood fan ---------- */
.dwhome__grid, .phero--dw .phero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.dw-logo { width: clamp(170px, 18vw, 250px); }
.fan { position: relative; aspect-ratio: 1 / 0.66; }
.fan li { position: absolute; left: 33%; top: 7%; width: 34%; aspect-ratio: 1131 / 1600; border-radius: var(--space-xs); overflow: clip; box-shadow: 0 18px 40px var(--c-shadow); transform-origin: 50% 120%; }
.fan img { width: 100%; height: 100%; object-fit: cover; }
.fan--static li { transform: translateX(calc((var(--i) - 2) * 46%)) rotate(calc((var(--i) - 2) * 5deg)); }

/* ---------- families index ---------- */
.fams { padding-block: var(--section); }
.fams__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: start; margin-top: clamp(40px, 5vw, 80px); }
.fams__list { border-bottom: 1px solid var(--line); }
.fams__list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg); align-items: baseline; padding-block: clamp(14px, 1.8vw, 26px); border-top: 1px solid var(--line); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.fam__name { font-size: clamp(1.75rem, 3.3vw, 3rem); line-height: 1.05; transition: transform var(--dur-long) var(--ease-out); }
.fam__short { max-width: 22ch; font-size: var(--text-small); color: var(--fg-soft); text-align: right; }
.fams__list a:hover, .fams__list a:focus-visible { color: var(--c-terracotta); }
.fams__list a:hover .fam__name { transform: translateX(var(--space-md)); }
.fams__preview { position: sticky; top: calc(var(--nav-h) + var(--space-lg)); aspect-ratio: 4 / 5; border-radius: var(--r-card); overflow: clip; background: var(--c-plaster-2); }
.fams__preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.fams__preview img.is-on { opacity: 1; }

/* ---------- sectors ---------- */
.sectors { padding-block: var(--section); overflow-x: clip; border-top: 1px solid var(--line); }
.sectors__rows { display: grid; gap: var(--space-xs); margin-top: var(--space-xl); }
.sectors__row { width: max-content; font-size: clamp(3rem, 10vw, 10rem); line-height: 1.04; white-space: nowrap; }
.sectors__row--alt { margin-left: -18vw; color: var(--c-terracotta); }
.sectors__row i { display: inline-block; width: 0.4em; height: 0.05em; margin-inline: 0.14em; vertical-align: 0.3em; background: currentColor; }

/* ---------- process ---------- */
.process { margin-top: 0; }
.process__line { height: 2px; margin-top: clamp(40px, 6vw, 96px); background: var(--line); }
.process__line span { display: block; height: 100%; background: var(--c-oak); transform-origin: 0 50%; }
.steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-lg); counter-reset: step; }
.steps li { counter-increment: step; display: grid; align-content: start; gap: var(--space-xs); padding-top: var(--space-lg); }
.steps li::before { content: counter(step, decimal-leading-zero); color: var(--signal); font-size: var(--text-small); font-weight: 600; font-variant-numeric: tabular-nums; }
.steps h3 { font-size: var(--text-title); line-height: 1.1; overflow-wrap: break-word; min-width: 0; }
.steps p { font-size: var(--text-small); color: var(--fg-soft); }

/* ---------- works, gallery, expo ---------- */
.works, .gallery, .expo { padding-block: var(--section); }
.gallery { padding-top: 0; }
.works__row, .gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.works__row { margin-top: clamp(40px, 5vw, 80px); }
.works__row figure, .gallery figure { aspect-ratio: 3 / 4; }
.works__row figure:nth-child(2), .gallery__col:nth-child(2) { margin-top: clamp(32px, 7vw, 112px); }
.gallery__col { display: grid; gap: var(--space-lg); align-content: start; }
.expo__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); margin-top: clamp(32px, 4vw, 64px); }
.expo__row figure { aspect-ratio: 4 / 3; }
.sect__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); }
.sect__list li { padding-block: var(--space-md); border-top: 1px solid var(--line); font-size: var(--text-head); line-height: 1.1; }

/* ---------- brands ---------- */
.brands { padding-block: var(--section) calc(var(--section) + var(--r-band)); border-top: 1px solid var(--line); }
.brands__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-2xl); align-items: start; }
.brands__list { font-size: var(--text-statement); line-height: 1.18; }

/* ---------- closing band ---------- */
.cta { --bg: var(--c-terracotta); --fg: var(--c-cream); --fg-soft: var(--c-cream); --focus: var(--c-cream); position: relative; margin-top: calc(-1 * var(--r-band)); padding-block: var(--section); border-radius: var(--r-band) var(--r-band) 0 0; }
.cta__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: end; }
.cta__side { display: grid; gap: var(--space-lg); }

/* ---------- footer ---------- */
.footer { --bg: var(--c-pine); --fg: var(--c-cream); --fg-soft: var(--c-sage); --focus: var(--c-oak); padding-top: var(--section); overflow: clip; }
.footer__top { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: var(--space-2xl) var(--space-xl); align-items: start; }
.footer__line { font-size: var(--text-statement); line-height: 1.1; }
.footer h2 { margin-bottom: var(--space-md); font-size: var(--text-small); font-weight: 600; color: var(--fg-soft); }
.footer ul { display: grid; gap: var(--space-xs); }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.footer__mark { margin-top: clamp(56px, 9vw, 144px); padding-inline: var(--gutter); overflow: clip; }
.footer__mark img { width: 100%; }
.footer__base { padding-block: var(--space-lg); font-size: var(--text-small); color: var(--fg-soft); }

/* ---------- inner page hero ---------- */
.phero { padding-block: calc(var(--nav-h) + clamp(32px, 6vw, 96px)) calc(var(--section) * 0.75); }
.phero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: end; }
.phero__grid > :only-child { grid-column: 1 / -1; }
.phero__media { aspect-ratio: 5 / 4; }
.phero--dw { padding-bottom: calc(var(--section) * 0.75 + var(--r-band)); }
.phero--dw .phero__grid { align-items: center; }

/* ---------- products index ---------- */
.pgrid { padding-bottom: calc(var(--section) + var(--r-band)); }
.pgrid__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-xl); }
.pcard { display: grid; gap: var(--space-lg); text-decoration: none; }
.pcard figure { aspect-ratio: 16 / 10; background: var(--c-plaster-2); }
.pcard img { transition: transform 900ms var(--ease-out); }
.pcard:hover img { transform: scale(1.04); }
.pcard div { display: grid; gap: var(--space-xs); }
.pcard h2 { font-size: var(--text-head); line-height: 1.06; }
.pcard p { max-width: 48ch; color: var(--fg-soft); }
.pcard__n { font-size: var(--text-small); font-weight: 600; color: var(--c-terracotta); }

/* ---------- catalogue page ---------- */
.catalog { padding-bottom: var(--section); }
.catalog__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-2xl); align-items: start; }
.catalog__index { position: sticky; top: calc(var(--nav-h) + var(--space-lg)); }
.catalog__index ul { display: grid; border-left: 1px solid var(--line); }
.catalog__index a { display: block; margin-left: -1px; padding: var(--space-xs) var(--space-md); border-left: 1px solid transparent; color: var(--fg-soft); font-size: var(--text-small); font-weight: 600; text-decoration: none; }
.catalog__index a:hover, .catalog__index a[aria-current] { color: var(--c-terracotta); border-left-color: var(--c-terracotta); }
.product { display: grid; gap: var(--space-xl); padding-block: clamp(32px, 4.4vw, 64px); border-top: 1px solid var(--line); scroll-margin-top: var(--nav-h); }
.product--img { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
.product__copy { display: grid; gap: var(--space-md); justify-items: start; }
.product h2 { font-size: var(--text-head); line-height: 1.06; }
.product p { max-width: 52ch; font-size: var(--text-lede); color: var(--fg-soft); }
.product figure { aspect-ratio: 4 / 3; background: var(--c-plaster-2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chips li { padding: var(--space-2xs) var(--space-sm); border: 1px solid var(--line); border-radius: var(--r-pill); font-size: var(--text-small); }
.next { display: block; padding-block: clamp(40px, 6vw, 96px) calc(clamp(40px, 6vw, 96px) + var(--r-band)); border-top: 1px solid var(--line); text-decoration: none; transition: background-color var(--dur-long) var(--ease-out); }
.next:hover { --bg: var(--c-plaster-2); }
.next span { display: block; font-size: var(--text-small); font-weight: 600; color: var(--fg-soft); }
.next strong { display: block; font-size: var(--text-xl); line-height: 1; letter-spacing: -0.03em; }

/* ---------- Densewood page ---------- */
.grades { padding-block: var(--section) calc(var(--section) + var(--r-band)); }
.grades__list { margin-top: clamp(40px, 5vw, 80px); border-bottom: 1px solid var(--line); }
.grades__list > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-xl); align-items: baseline; padding-block: var(--space-lg); border-top: 1px solid var(--line); }
.grades dt { font-size: var(--text-xl); line-height: 0.95; color: var(--c-terracotta); }
.grades dd { font-size: var(--text-lede); color: var(--fg-soft); }
.grades dd strong { display: block; color: var(--fg); font-weight: 600; }
.builds__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-lg); margin-top: clamp(40px, 5vw, 80px); }
.builds__grid li { display: grid; gap: var(--space-xs); align-content: start; }
.builds figure { aspect-ratio: 1131 / 1600; margin-bottom: var(--space-sm); }
.builds h3 { font-size: var(--text-title); line-height: 1.1; }
.builds p { font-size: var(--text-small); color: var(--fg-soft); }

/* ---------- cross-section: a sheet separated into its layers ---------- */
.layers { display: grid; align-items: center; min-height: 100svh; margin-top: 0; padding-block: var(--space-3xl) calc(var(--space-3xl) + var(--r-band)); }
.layers__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.layers__copy { display: grid; gap: var(--space-xl); }
.layers__list { counter-reset: layer; border-bottom: 1px solid var(--line); }
.layers__list li { counter-increment: layer; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--space-sm); padding-block: var(--space-sm); border-top: 1px solid var(--line); }
.layers__list li::before { content: counter(layer, decimal-leading-zero); grid-row: span 2; color: var(--signal); font-size: var(--text-small); font-weight: 600; font-variant-numeric: tabular-nums; }
.layers__list h3 { font-family: var(--font-display); font-size: var(--text-title); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.layers__list p { font-size: var(--text-small); color: var(--fg-soft); }
.layers__stage { display: grid; place-items: center; aspect-ratio: 1 / 0.9; perspective: 1400px; }
.layers__sheet { position: relative; width: 62%; aspect-ratio: 1 / 1.25; transform: rotateX(60deg) rotateZ(-38deg); transform-style: preserve-3d; }
.layers__sheet li { position: absolute; inset: 0; border-radius: var(--space-2xs); background: repeating-linear-gradient(0deg, var(--c-oak) 0 9px, var(--c-oak-2) 9px 10px); box-shadow: 0 0 0 1px var(--c-oak-2); }
.layers__sheet li:nth-child(even) { background: repeating-linear-gradient(90deg, var(--c-oak-2) 0 9px, var(--c-oak) 9px 10px); }
.layers--static li { transform: translateZ(calc((var(--i) - 2) * -56px)); }

/* ---------- grade picker ---------- */
.picker { padding-bottom: calc(var(--section) + var(--r-band)); }
.picker__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: start; }
.picker__copy { display: grid; gap: var(--space-lg); }
.picker__opts { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chip-btn { min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--c-ink); border-radius: var(--r-pill); background: transparent; color: var(--c-ink); font: inherit; font-size: var(--text-small); font-weight: 600; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.chip-btn:hover { background: var(--c-plaster-2); }
.chip-btn[aria-pressed="true"] { background: var(--c-ink); color: var(--c-cream); }
.chip-btn:active { transform: translateY(1px); }
.picker__out { display: grid; gap: var(--space-md); }
.picker__out li { display: grid; gap: var(--space-xs); padding: clamp(20px, 3vw, 40px); border-radius: var(--r-card); background: var(--c-oak); }
.js .picker__out li[data-off] { display: none; }
.picker__where { font-size: var(--text-small); font-weight: 600; }
.picker__out strong { font-family: var(--font-display); font-size: var(--text-head); font-weight: 500; line-height: 1.06; letter-spacing: -0.02em; }

/* ---------- phone WhatsApp button ---------- */
.wa { display: none; }
@media (max-width: 60rem) {
  .wa { position: fixed; right: var(--space-md); bottom: var(--space-md); z-index: var(--z-nav); display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border-radius: var(--r-pill); background: var(--c-pine); color: var(--c-cream); font-size: var(--text-small); font-weight: 600; text-decoration: none; box-shadow: 0 6px 20px var(--c-shadow); }
  .layers__grid, .picker__grid, .wall__grid, .docs__grid { grid-template-columns: minmax(0, 1fr); }
  .wall__opts { display: flex; flex-wrap: wrap; gap: var(--space-xs); border: 0; }
  .wall__opts button { width: auto; padding: 0 var(--space-md); border: 1px solid var(--line); border-radius: var(--r-pill); font-family: var(--font-body); font-size: var(--text-small); font-weight: 600; letter-spacing: 0; }
  .wall__opts button[aria-pressed="true"] { padding-left: var(--space-md); border-color: var(--c-oak); }
  .layers { min-height: 0; }
  .layers__stage { max-width: 30rem; margin-inline: auto; width: 100%; }
  .footer__base { padding-bottom: calc(var(--space-lg) + 64px); }
}

/* ---------- finish wall: one large picture, chosen from the list ---------- */
.catalog--band { padding-bottom: calc(var(--section) + var(--r-band)); }
.wall { margin-top: calc(-1 * var(--r-band)); }
.wall__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: start; }
.wall__side { display: grid; gap: var(--space-xl); }
.wall__opts { border-bottom: 1px solid var(--line); }
.wall__opts button { display: block; width: 100%; min-height: 48px; padding: var(--space-sm) 0; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--fg-soft); font-family: var(--font-display); font-size: var(--text-title); letter-spacing: -0.02em; text-align: left; cursor: pointer; transition: color var(--dur-short) var(--ease-out), padding-left var(--dur-long) var(--ease-out); }
.wall__opts button:hover { color: var(--fg); }
.wall__opts button[aria-pressed="true"] { color: var(--c-oak); padding-left: var(--space-md); }
.wall__stage { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: clip; background: var(--c-pine-2); }
.wall__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.wall__stage img.is-on { opacity: 1; }

/* ---------- downloads ---------- */
.docs { padding-block: var(--section) calc(var(--section) + var(--r-band)); border-top: 1px solid var(--line); }
.docs__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.docs__grid > div { display: grid; gap: var(--space-lg); }
.docs__list { border-bottom: 1px solid var(--line); }
.docs__list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-xl); padding-block: var(--space-lg); border-top: 1px solid var(--line); }
.docs__list h3 { font-family: var(--font-display); font-size: var(--text-title); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.docs__list p { color: var(--fg-soft); }

/* ---------- map ---------- */
.map { padding-block: 0 var(--section); }
.map__frame { display: block; width: 100%; height: clamp(320px, 46vw, 520px); margin-top: clamp(32px, 4vw, 64px); border: 0; border-radius: var(--r-card); background: var(--c-plaster-2); }

/* ---------- photo lightbox ---------- */
[data-zoom] { cursor: zoom-in; }
.zoom { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: clamp(16px, 4vw, 56px); border: 0; background: var(--c-pine); color: var(--c-cream); }
.zoom::backdrop { background: var(--c-pine); }
.zoom[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--space-md); }
.zoom img { width: 100%; height: 100%; object-fit: contain; }
.zoom__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.zoom__bar p { font-size: var(--text-small); color: var(--c-sage); }
.zoom__bar div { display: flex; gap: var(--space-xs); }
.zoom button { --fg: var(--c-cream); --bg: var(--c-pine); --focus: var(--c-oak); min-height: 44px; }

/* ---------- about ---------- */
.story { padding-bottom: var(--section); }
.story__grid, .vm__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); align-items: start; }
.story__copy { display: grid; gap: var(--space-lg); max-width: 60ch; font-size: var(--text-lede); }
.statement--figs { padding-top: 0; }
.vm__grid > div { display: grid; gap: var(--space-lg); align-content: start; }
.why { padding-block: var(--section) calc(var(--section) + var(--r-band)); }
.why__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-2xl); margin-top: clamp(40px, 5vw, 80px); counter-reset: why; }
.why__list li { counter-increment: why; display: grid; gap: var(--space-xs); padding-block: var(--space-lg); border-top: 1px solid var(--line); }
.why__list li::before { content: counter(why, decimal-leading-zero); color: var(--c-terracotta); font-size: var(--text-small); font-weight: 600; }
.why h3 { font-size: var(--text-title); line-height: 1.1; }
.why p { max-width: 44ch; color: var(--fg-soft); }

/* ---------- contact ---------- */
.contact__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.details { width: 100%; margin-top: var(--space-lg); border-bottom: 1px solid var(--line); }
.details > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-md); align-items: baseline; padding-block: var(--space-md); border-top: 1px solid var(--line); }
.details dt { font-size: var(--text-small); color: var(--fg-soft); }
.details dd { font-size: var(--text-lede); font-weight: 600; }
.details a { text-decoration: none; }
.details a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); padding: clamp(20px, 3vw, 40px); border-radius: var(--r-card); background: var(--c-plaster-2); }
.field { display: grid; gap: var(--space-xs); }
.field--wide, .form__send, .form__note { grid-column: 1 / -1; }
.field label { font-size: var(--text-small); font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--c-muted); border-radius: var(--space-xs); background: var(--c-cream); color: var(--c-ink); font: inherit; font-size: 1rem; }
.field textarea { resize: vertical; }
.field :is(input, select, textarea):focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.field ::placeholder { color: var(--c-muted); }
.form__note { font-size: var(--text-small); color: var(--c-muted); }

/* ---------- prose ---------- */
.prose { padding-bottom: var(--section); }
.prose__body { display: grid; gap: var(--space-md); max-width: 68ch; line-height: 1.7; }
.prose h2 { margin-top: var(--space-lg); font-family: var(--font-display); font-size: var(--text-title); font-weight: 600; line-height: 1.15; }

/* ---------- responsive ---------- */
@media (max-width: 60rem) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; align-items: center; }
  .stack__grid, .dwhome__grid, .phero--dw .phero__grid, .phero__grid, .fams__grid, .brands__grid, .cta__grid, .catalog__grid, .story__grid, .vm__grid, .contact__grid, .sect__grid, .product--img { grid-template-columns: minmax(0, 1fr); }
  .fams__preview, .process__line { display: none; }
  .catalog__index { position: static; }
  .catalog__index ul { display: flex; flex-wrap: wrap; gap: var(--space-xs); border: 0; }
  .catalog__index a { margin: 0; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--line); border-radius: var(--r-pill); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .builds__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__line { grid-column: 1 / -1; }
  .stack { min-height: 0; }
  .fan { margin-inline: 12%; }
}
@media (max-width: 40rem) {
  .figures, .builds__grid, .why__list, .expo__row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .hero__media { height: 68svh; }
  .pgrid__grid, .form { grid-template-columns: minmax(0, 1fr); }
  .works__row, .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
  .works__row figure:nth-child(3) { display: none; }
  .gallery__col { gap: var(--space-sm); }
  .gallery__col:nth-child(3) { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fam__short { display: none; }
  .grades__list > div, .details > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .actions .btn { flex: 1 1 auto; }
}

/* ---------- home: hero line, material families ---------- */
.hero__h { max-width: 22ch; }
.display em, .head em { font-style: normal; color: var(--c-terracotta); }
.band--dark em, .footer em { color: var(--c-oak); }
.cta em { color: inherit; }
.statement__text, .brands__list, .footer__line, .sectors__row, .hero__tag, .next strong, .grades dt, .figures dd, .sect__list li, .fam__name { font-weight: 500; }
.mats { padding-block: var(--section) calc(var(--section) + var(--r-band)); }
.mats__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-lg); margin-top: clamp(40px, 5vw, 80px); }
.mat { grid-column: span 3; display: grid; gap: var(--space-xs); align-content: start; text-decoration: none; }
.mat--lg { grid-column: span 7; }
.mat--md { grid-column: span 5; }
.mat figure { aspect-ratio: 4 / 5; margin-bottom: var(--space-sm); background: var(--c-plaster-2); }
.mat--lg figure, .mat--md figure { aspect-ratio: auto; height: clamp(300px, 36vw, 540px); }
.mat img { transition: transform 900ms var(--ease-out); }
.mat:hover img { transform: scale(1.04); }
.mat h3, .path h3 { font-size: var(--text-title); line-height: 1.1; }
.mat--lg h3, .mat--md h3 { font-size: var(--text-head); line-height: 1.06; }
.mat p, .path p { max-width: 46ch; font-size: var(--text-small); color: var(--fg-soft); }
.mat__go { margin-top: var(--space-2xs); font-size: var(--text-small); font-weight: 600; color: var(--c-terracotta); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: transparent; transition: text-decoration-color var(--dur-short) var(--ease-out); }
a:hover > .mat__go { text-decoration-color: currentColor; }

/* ---------- material laboratory ---------- */
.lab__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.lab__copy { display: grid; gap: var(--space-lg); justify-items: start; }
.lab__copy .minor { color: var(--signal); }
.lab__list { width: 100%; border-bottom: 1px solid var(--line); }
.lab__list button { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--space-sm); width: 100%; min-height: 48px; padding: var(--space-sm) 0; border: 0; border-top: 1px solid var(--line); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: padding-left var(--dur-long) var(--ease-out); }
.lab__list button > span:last-child { display: grid; gap: var(--space-3xs); }
.lab__n { color: var(--signal); font-size: var(--text-small); font-weight: 600; font-variant-numeric: tabular-nums; }
.lab__list strong { font-size: var(--text-title); line-height: 1.15; transition: color var(--dur-short) var(--ease-out); }
.lab__list strong + span { font-size: var(--text-small); color: var(--fg-soft); }
.lab__list button:hover strong, .lab__list button[aria-pressed="true"] strong { color: var(--c-oak); }
.lab__list button[aria-pressed="true"] { padding-left: var(--space-sm); }
.lab__stage { display: grid; gap: var(--space-md); overflow: visible; border-radius: 0; }
.lab__stage figcaption { max-width: 56ch; font-size: var(--text-small); color: var(--fg-soft); }
.plyfig { display: block; width: 100%; height: auto; overflow: visible; }
.plyfig .ply { transition: transform 1100ms var(--ease-out), opacity var(--dur-long) var(--ease-out); }
.plyfig.is-open .ply { transform: translateY(calc(var(--o) * -38px)); }
.plyfig[data-focus="ply"] .ply:not(.is-lit) { opacity: 0.2; }
.plyfig .glue { fill: none; stroke: oklch(32% 0.05 55); stroke-width: 1.1; transition: stroke var(--dur-long) var(--ease-out), stroke-width var(--dur-long) var(--ease-out); }
.plyfig[data-focus="glue"] .glue { stroke: var(--c-rule-accent); stroke-width: 3.2; }
.plyfig .dir { stroke: oklch(28% 0.04 60); stroke-width: 1.4; opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.plyfig.is-open .dir { opacity: 0.85; }
.plyfig__shadow { fill: oklch(12% 0.02 160 / 0.55); transition: opacity 1100ms var(--ease-out); }
.plyfig.is-open .plyfig__shadow { opacity: 0.5; }
.lab__make { margin-top: var(--section); padding-top: var(--space-2xl); border-top: 1px solid var(--line); }
.lab__sub { font-size: var(--text-head); line-height: 1.06; }
.lab__note { max-width: 44ch; font-size: var(--text-small); color: var(--fg-soft); }
.make { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); margin-top: clamp(32px, 4vw, 64px); counter-reset: make; }
.make li { counter-increment: make; display: grid; align-content: start; gap: var(--space-xs); padding-top: var(--space-md); border-top: 1px solid var(--line); }
.make li::before { content: counter(make, decimal-leading-zero); color: var(--signal); font-size: var(--text-small); font-weight: 600; font-variant-numeric: tabular-nums; }
.make h3 { font-size: var(--text-title); line-height: 1.1; }
.make p { font-size: var(--text-small); color: var(--fg-soft); }

/* ---------- project case, journeys, clients, logos ---------- */
.case { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); margin-top: clamp(32px, 4vw, 64px); }
.case > div { display: grid; gap: var(--space-2xs); align-content: start; padding-top: var(--space-md); border-top: 1px solid var(--line); }
.case dt { font-size: var(--text-small); color: var(--fg-soft); }
.case dd { font-weight: 600; }
.works__row--flat { margin-top: 0; }
.works__row--flat figure:nth-child(2) { margin-top: 0; }
.paths { padding-block: var(--section); border-top: 1px solid var(--line); }
.paths__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); margin-top: clamp(40px, 5vw, 80px); }
.path { display: grid; gap: var(--space-sm); align-content: start; padding: clamp(20px, 2.6vw, 36px); border-radius: var(--r-card); background: var(--c-plaster-2); text-decoration: none; transition: background-color var(--dur-long) var(--ease-out); }
.path:hover { background: var(--c-oak); }
.path__n { font-size: var(--text-small); font-weight: 600; color: var(--c-terracotta); font-variant-numeric: tabular-nums; }
.path h3 { font-size: var(--text-head); line-height: 1.06; }
.path p { color: var(--c-ink); }
.why--home { padding-top: 0; }
.why--home .figures { margin-top: clamp(48px, 7vw, 112px); }
.why__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.why__actions { margin-top: var(--space-2xl); }
.clients { margin-top: 0; }
.clients__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-lg); margin-top: clamp(40px, 5vw, 80px); }
.clients__grid > div { padding-top: var(--space-md); border-top: 1px solid var(--line); }
.clients h3 { margin-bottom: var(--space-md); font-size: var(--text-title); line-height: 1.1; color: var(--c-oak); }
.clients ul { display: grid; gap: var(--space-xs); }
.clients li { color: var(--fg-soft); }
.brands { border-top: 0; }
.logos { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-sm); margin-top: clamp(40px, 5vw, 80px); }
.logos li { display: grid; place-items: center; aspect-ratio: 3 / 2; padding: var(--space-md); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--c-cream); }
.logos img { width: auto; max-width: 100%; height: auto; max-height: 64px; object-fit: contain; }
.brands__more { margin-top: var(--space-lg); font-size: var(--text-small); color: var(--fg-soft); }

/* ---------- Densewood: thickness table, other plywood ---------- */
.sizes { padding-block: 0 calc(var(--section) + var(--r-band)); scroll-margin-top: var(--nav-h); }
.sizes__scroll { position: relative; margin-top: clamp(32px, 4vw, 64px); overflow-x: auto; }
.sizes__table { width: 100%; min-width: 34rem; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.sizes__table th, .sizes__table td { padding: var(--space-md) var(--space-xs); border-top: 1px solid var(--line); text-align: center; }
.sizes__table thead th { border-top: 0; font-size: var(--text-small); font-weight: 600; color: var(--fg-soft); }
.sizes__table th:first-child { text-align: left; }
.sizes tbody th { font-size: var(--text-title); line-height: 1.1; }
.sizes tbody th small { display: block; margin-top: var(--space-2xs); font-family: var(--font-body); font-size: var(--text-small); letter-spacing: 0; color: var(--fg-soft); }
.sizes__table tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
.sizes td.on::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c-terracotta); }
.others { padding-block: var(--section) calc(var(--section) + var(--r-band)); }
.others__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: start; }
.others__grid > div { display: grid; gap: var(--space-lg); }
.others .docs__list li > div { flex: 1 1 16rem; }

/* ---------- Densewood beside nationally advertised brands ---------- */
.compare { padding-block: 0 calc(var(--section) + var(--r-band)); scroll-margin-top: var(--nav-h); }
.compare__table { width: 100%; min-width: 40rem; border-collapse: separate; border-spacing: 0; text-align: left; }
.compare__table th, .compare__table td { padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--line); vertical-align: top; }
.compare__table thead th { border-top: 0; font-size: var(--text-title); line-height: 1.15; }
.compare__table tbody th { width: 24%; padding-left: 0; font-size: var(--text-small); font-weight: 600; color: var(--fg-soft); }
.compare__table td { width: 38%; color: var(--fg-soft); }
.compare__table .is-us { background: var(--c-oak); color: var(--c-ink); font-weight: 600; border-top-color: var(--c-oak-2); }
.compare__table thead .is-us { border-radius: var(--r-card) var(--r-card) 0 0; color: var(--c-terracotta-deep); }
.compare__table tbody tr:last-child .is-us { border-radius: 0 0 var(--r-card) var(--r-card); }
.compare__table tbody tr:last-child > :not(.is-us) { border-bottom: 1px solid var(--line); }
.compare__note { max-width: 70ch; margin-block: var(--space-lg); font-size: var(--text-small); color: var(--fg-soft); }

/* ---------- enquiry form ---------- */
.enq { padding-block: var(--section); scroll-margin-top: var(--nav-h); }
.enq__links { display: grid; gap: var(--space-xs); margin-top: var(--space-md); }
.enq__links a { font-weight: 600; text-underline-offset: 0.25em; }
.field label span { font-weight: 400; color: var(--c-muted); }
.field__help { font-size: var(--text-small); color: var(--c-muted); }
.field input[type="file"] { padding: var(--space-sm); background: transparent; border-style: dashed; }
.field--check { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-sm); }
.field--check input { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; padding: 0; accent-color: var(--c-terracotta); }
.field--check label { font-weight: 400; }
.hp { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; }
.form__status { grid-column: 1 / -1; padding: var(--space-md); border-radius: var(--space-xs); background: var(--c-cream); font-weight: 600; }
.form__status[data-kind="error"] { color: var(--c-terracotta-deep); }
.form__status[data-kind="ok"] { background: var(--c-pine); color: var(--c-cream); }

@media (max-width: 60rem) {
  .lab__grid, .others__grid { grid-template-columns: minmax(0, 1fr); }
  .lab__stage { max-width: 34rem; width: 100%; margin-inline: auto; }
  .mat, .mat--md { grid-column: span 6; }
  .mat--lg { grid-column: 1 / -1; }
  .mat--md figure { aspect-ratio: 4 / 5; height: auto; }
  .make, .case, .clients__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paths__grid, .why__list--3 { grid-template-columns: minmax(0, 1fr); }
  .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .mats__grid { gap: var(--space-xl) var(--space-sm); }
  .mat--md { grid-column: 1 / -1; }
  .mat--md figure { aspect-ratio: 4 / 3; }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .why__list--3 { grid-template-columns: minmax(0, 1fr); }
  .clients__grid { grid-template-columns: minmax(0, 1fr); }
  .works__row--flat figure:nth-child(3) { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .js .veil { display: none; }
  .nav, .btn, .nav__links a, .fam__name, .pcard img, .fams__preview img, .next, .fams__list a { transition: none; }
  .btn:active, .pcard:hover img, .mat:hover img, .fams__list a:hover .fam__name { transform: none; }
  .plyfig .ply, .plyfig .glue, .plyfig .dir, .plyfig__shadow, .mat img, .path, .lab__list button { transition: none; }
}