/* ==========================================================================
   FKC Kitchens — v7
   Foundations, layout and components. Page-level composition lives further down.
   Hand-authored: this file is meant to paste straight into WordPress
   Customizer → Additional CSS, so nothing here depends on a build step.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, fieldset, legend {
  margin: 0;
  padding: 0;
}
ul[class], ol[class] { list-style: none; }

body {
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
p, li, figcaption { overflow-wrap: break-word; }
table { border-collapse: collapse; width: 100%; }
/* Deliberately NO blanket `svg { fill: currentColor }`.
   A CSS declaration beats a presentation attribute, so that rule overrode the
   fill="none" on every inline icon and turned the whole icon set into solid
   filled blobs. Fill is set per-icon in the markup instead. */
:target { scroll-margin-top: calc(var(--header-h) + var(--s-6)); }
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   2. Base typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--c-heading);
  font-weight: var(--display-weight);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

/* Manrope carrying the technical voice: uppercase, tracked out, tabular
   figures so millimetre callouts line up like a drawing annotation. */
.mono, .dim, .dimline, .eyebrow, .product__sku, .dimension__label {
  font-variant-numeric: tabular-nums;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); line-height: var(--lh-snug); }
h5 { font-size: var(--fs-md); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
h6 { font-size: var(--fs-base); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }

p { max-width: var(--measure); text-wrap: pretty; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

strong, b { font-weight: 600; color: var(--c-heading); }
small { font-size: var(--fs-xs); }

::selection { background: var(--green-wash); color: var(--ink); }
.interior ::selection { background: var(--green-bright); color: var(--interior); }

/* Focus: always visible, always designed. Never removed without a replacement. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* --------------------------------------------------------------------------
   3. Skip link
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: var(--z-overlay);
  padding: var(--s-3) var(--s-5);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--fs-sm);
  font-weight: 500;
  border-radius: var(--r-sm);
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

.section {
  position: relative;
  padding-block: var(--section-y);
}
.section--tight { padding-block: var(--section-y-tight); }
.section--loose { padding-block: var(--section-y-loose); }
.section--sunk  { background: var(--c-bg-sunk); }
.section--flush-top    { padding-block-start: 0; }
.section--flush-bottom { padding-block-end: 0; }

.grid { display: grid; gap: var(--s-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Editorial split — deliberately asymmetric, not a centred column */
.split {
  display: grid;
  gap: clamp(var(--s-6), 4vw, var(--s-9));
  align-items: center;
}
@media (min-width: 900px) {
  .split                { grid-template-columns: 1.05fr 0.95fr; }
  .split--text-narrow   { grid-template-columns: 1.25fr 0.75fr; }
  .split--media-wide    { grid-template-columns: 0.8fr 1.2fr; }
  .split--offset > :first-child { padding-block-end: var(--s-8); }
  .split--reverse > :first-child { order: 2; }
}

.stack > * + * { margin-block-start: var(--s-4); }
.stack--sm > * + * { margin-block-start: var(--s-2); }
.stack--lg > * + * { margin-block-start: var(--s-6); }

/* --------------------------------------------------------------------------
   5. Section heading block
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-block-end: var(--s-4);
}
.eyebrow::before {
  content: "";
  inline-size: 26px;
  block-size: 1px;
  background: var(--c-accent-ui);
  flex: none;
}

.section-head { max-width: 62ch; margin-block-end: var(--s-8); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow::before { display: none; }
.section-head__lead {
  font-size: var(--fs-md);
  color: var(--c-muted);
  margin-block-start: var(--s-4);
  max-width: 56ch;
}
.section-head--center .section-head__lead { margin-inline: auto; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-py: 0.9em;
  --btn-px: 1.6em;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--btn-py) var(--btn-px);
  min-block-size: 48px;              /* ≥44px touch target */
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  /* Deliberately NOT nowrap: the primary CTA ("Book a free consultation") is
     longer than a 320px viewport once padding is applied, and nowrap pushed a
     horizontal scrollbar onto every page at that width. */
  text-wrap: balance;
  max-inline-size: 100%;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color     var(--dur-fast) var(--ease-out),
    color            var(--dur-fast) var(--ease-out),
    transform        var(--dur-fast) var(--ease-out),
    box-shadow       var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.btn--primary {
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--sh-2);
}
.btn--primary:hover { background: var(--green-ink); box-shadow: var(--sh-3); }
.interior .btn--primary:hover { background: #C0DBA6; }

.btn--accent { background: var(--btn-alt-bg); color: var(--btn-alt-fg); box-shadow: var(--sh-2); }
.btn--accent:hover { background: var(--ink); color: var(--paper); }

.btn--outline {
  background: transparent;
  color: var(--c-heading);
  border-color: var(--line-strong);
}
.interior .btn--outline { border-color: rgba(255, 255, 255, 0.32); }
.btn--outline:hover {
  border-color: var(--c-heading);
  background: color-mix(in srgb, var(--c-heading) 5%, transparent);
}

.btn--ghost { background: transparent; color: var(--c-heading); padding-inline: var(--s-3); }
.btn--ghost:hover { color: var(--c-accent); }

.btn--lg { --btn-py: 1.05em; --btn-px: 2em; font-size: var(--fs-base); min-block-size: 56px; }
/* 44px, not 40: the small button carries "Add to quote" on every product card,
   which is a primary action on a phone. */
.btn--sm { --btn-py: 0.7em;  --btn-px: 1.1em; font-size: var(--fs-xs); min-block-size: 44px; }
.btn--block { display: flex; width: 100%; }

/* On the narrowest phones, ease the horizontal padding rather than let a long
   CTA label wrap to three cramped lines. */
@media (max-width: 400px) {
  .btn--lg { --btn-px: 1.35em; font-size: var(--fs-sm); }
  .btn     { --btn-px: 1.2em; }
}

/* Arrow that travels on hover */
.btn__arrow {
  inline-size: 1em;
  block-size: 1em;
  flex: none;
  transition: transform var(--dur-base) var(--ease-drawer);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Text link with an underline that draws in */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 44px;              /* tappable, not just clickable */
  font-weight: 500;
  color: var(--c-accent);
  text-decoration: none;
  padding-block: 2px;
}
.link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease-out);
}
.link:hover::after { transform: scaleX(1); transform-origin: left; }

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition:
    transform  var(--dur-base) var(--ease-drawer),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
.card--lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-4);
  border-color: var(--line-strong);
}
.card__body { padding: var(--s-6); }
.card__title { font-size: var(--fs-lg); margin-block-end: var(--s-3); }
.card__text  { color: var(--c-muted); font-size: var(--fs-sm); }

.card__media {
  position: relative;
  overflow: hidden;
  background: var(--c-bg-sunk);
}
.card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-cinema) var(--ease-out);
}
.card--lift:hover .card__media img { transform: scale(1.04); }

/* Make the whole card clickable without nesting interactive elements */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   8. The draughting motif — the signature visual thread
   Dimension lines, extension ticks and mm callouts, drawn on entry.
   -------------------------------------------------------------------------- */
.motif { color: var(--c-accent-ui); opacity: 0.55; pointer-events: none; }
.motif path, .motif line, .motif polyline, .motif circle, .motif rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.motif--corner {
  position: absolute;
  inline-size: 68px;
  block-size: 68px;
}
.motif--corner-tl { inset-block-start: -1px; inset-inline-start: -1px; }
.motif--corner-br { inset-block-end: -1px; inset-inline-end: -1px; transform: rotate(180deg); }

/* Dimension callout: 600mm etc., set in mono like a drawing annotation */
.dim {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-muted);
}
.dim::before,
.dim::after {
  content: "";
  block-size: 7px;
  inline-size: 1px;
  background: currentColor;
  opacity: 0.6;
}
.dim--rule { inline-size: 100%; }
.dim--rule::before, .dim--rule::after { display: none; }

/* A horizontal dimension line with end ticks, used under headings and images */
.dimline {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--c-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.dimline::before,
.dimline::after {
  content: "";
  block-size: 1px;
  background: currentColor;
  opacity: 0.35;
  flex: 1 1 auto;
}
.dimline > span { flex: none; }

/* --------------------------------------------------------------------------
   9. Forms
   -------------------------------------------------------------------------- */
.field { display: block; margin-block-end: var(--s-5); }
.field__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-block-end: var(--s-2);
}
.field__req { color: var(--error); margin-inline-start: 2px; }
.field__hint {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  margin-block-start: var(--s-2);
}

.input, .textarea, .select {
  inline-size: 100%;
  padding: 0.85em 1em;
  min-block-size: 48px;
  background: var(--c-surface);
  color: var(--c-heading);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow   var(--dur-fast) var(--ease-out);
}
.interior .input, .interior .textarea, .interior .select {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.22);
}
.input::placeholder, .textarea::placeholder { color: var(--c-muted); opacity: 1; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--c-heading); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent);
}
.textarea { min-block-size: 8rem; resize: vertical; line-height: var(--lh-body); }

.select {
  appearance: none;
  padding-inline-end: 2.6em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2365695E' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
  background-size: 12px 8px;
}

.field--error .input,
.field--error .textarea,
.field--error .select { border-color: var(--error); }
.field__error {
  display: none;
  align-items: center;
  gap: var(--s-2);
  margin-block-start: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--error);
}
.field--error .field__error { display: flex; }

/* Radio / checkbox groups — real controls, styled, never replaced by divs */
.choice-group { display: grid; gap: var(--s-2); }
.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  min-block-size: 48px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.choice:hover { border-color: var(--line-strong); background: var(--c-bg-sunk); }
.choice input { margin-block-start: 0.28em; accent-color: var(--green-ink); inline-size: 1.05em; block-size: 1.05em; flex: none; }
.choice:has(input:checked) { border-color: var(--green-ink); background: var(--green-wash); }
.interior .choice:has(input:checked) { background: rgba(174, 203, 144, 0.12); border-color: var(--green-bright); }
.choice__text { font-size: var(--fs-sm); line-height: var(--lh-snug); }

/* Honeypot — visually gone, still reachable by bots */
.hp {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.form__status {
  display: none;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  margin-block-end: var(--s-5);
}
.form__status[data-state="success"] {
  display: flex;
  background: var(--green-wash);
  border: 1px solid var(--green-ink);
  color: var(--ink);
}
.form__status[data-state="error"] {
  display: flex;
  background: var(--error-wash);
  border: 1px solid var(--error);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   10. Filter chips
   -------------------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.55em 1.1em;
  min-block-size: 44px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: all var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--line-strong); color: var(--c-heading); }
.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.chip__count { font-family: var(--font-mono); font-size: var(--fs-3xs); opacity: 0.7; }

/* --------------------------------------------------------------------------
   11. Reveal system
   The `.js` class is added by an inline head script. Without JS, or if the
   observer never fires, content is simply visible — the parked state only
   exists when we know we can un-park it.
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity   var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal="left"]  { transform: translateX(-22px); }
.js [data-reveal="right"] { transform: translateX(22px); }
.js [data-reveal="scale"] { transform: scale(0.97); }
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* Escape hatch used by the QA harness and by the no-WebGL path */
.reveal-all [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   12. Utilities
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mono { font-family: var(--font-mono); }
.lead { font-size: var(--fs-md); color: var(--c-muted); max-width: var(--measure-tight); }
.muted { color: var(--c-muted); }
.no-scroll { overflow: hidden; }
.aspect-4-3  { aspect-ratio: 4 / 3; }
.aspect-3-2  { aspect-ratio: 3 / 2; }
.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-1-1  { aspect-ratio: 1 / 1; }

/* ==========================================================================
   13. Icons, split text, draft flags
   ========================================================================== */
.icon { flex: none; display: inline-block; vertical-align: middle; }
.rot90  { transform: rotate(90deg); }
.rot270 { transform: rotate(-90deg); }

/* SplitText line masking. The parked state only applies once the split has
   actually happened, so an un-split heading is never invisible. */
.split-line__mask { display: block; overflow: hidden; }
[data-split]:not(.is-split-ready) { opacity: 1; }

/* Marks AI-generated imagery. Discreet but always present — the site must
   never imply a generated visual is a completed FKC project. */
.img-note {
  position: absolute;
  inset-block-end: var(--s-3);
  inset-inline-end: var(--s-3);
  z-index: 2;
  padding: 0.28em 0.7em;
  background: color-mix(in srgb, var(--interior) 80%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: var(--r-pill);
  color: #E7E4DA;
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  pointer-events: none;
}

.draft-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.3em 0.7em;
  border: 1px dashed var(--copper-ink);
  border-radius: var(--r-pill);
  color: var(--copper-ink);
  background: color-mix(in srgb, var(--copper) 8%, transparent);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.interior .draft-flag { color: var(--copper-bright); border-color: var(--copper-bright); }

/* ==========================================================================
   14. Topbar + header
   ========================================================================== */
/* A deliberate deep-forest strip, not the same near-black as the hero behind
   it. Dark-on-dark made the topbar read as nothing at all. */
.topbar {
  background: var(--topbar-bg);
  border-block-end: 1px solid rgba(174, 203, 144, 0.22);
  color: #D6D3C8;
  font-size: var(--fs-2xs);
  position: relative;
  z-index: calc(var(--z-header) + 1);
}
.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: 0;                  /* the 44px items already set the height */
}
.topbar__tag {
  display: flex;
  align-items: center;
  min-block-size: 44px;
  max-width: 52ch;
  margin: 0;
  color: #A8A79B;
}
.topbar__meta { display: flex; flex-wrap: wrap; gap: var(--s-5); list-style: none; }
.topbar__meta strong { color: #F2EFE6; font-weight: 600; }
/* Solid, not a 30% alpha: as translucent punctuation it measured 2.19:1. */
.topbar__sep { color: #B3B4A8; }
.topbar__meta li { display: inline-flex; align-items: center; gap: var(--s-2); min-block-size: 44px; }
.topbar__meta .icon { color: var(--green-bright); flex: none; }
.topbar__meta a { display: inline-flex; align-items: center; min-block-size: 44px; color: inherit; text-decoration: none; }
.topbar__meta a:hover { color: var(--green-bright); }
@media (max-width: 1100px) { .topbar__meta--left li:nth-child(2) { display: none; } }
@media (max-width: 900px) {
  .topbar__meta--left { display: none; }
  .topbar__inner { justify-content: center; }
}
@media (max-width: 700px) {
  /* Keep one phone number reachable; drop the rest rather than wrap the strip. */
  .topbar__meta--right li:nth-child(n+2) { display: none; }
}

/* Owner-directed: the menu is solid #FFFFFF in BOTH its normal and stuck
   states. No transparency over the hero, no cream glass. `.is-stuck` now only
   adds the separating hairline and shadow once the page has scrolled. */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: #FFFFFF;
  border-block-end: 1px solid transparent;
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.site-header.is-stuck {
  background-color: #FFFFFF;
  border-block-end-color: var(--line);
  box-shadow: var(--sh-2);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-block-size: var(--header-h);
}
.logo { display: inline-flex; align-items: center; min-block-size: 44px; flex: none; }
.logo__img { block-size: clamp(34px, 3.2vw, 44px); inline-size: auto; }

.nav__list { display: flex; align-items: center; gap: var(--s-2); }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-3);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--body);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link:hover, .nav__link.is-current { color: var(--green-ink); }
.nav__link.is-current { position: relative; }
.nav__link.is-current::after {
  content: "";
  position: absolute;
  inset-inline: var(--s-3);
  inset-block-end: 4px;
  block-size: 1px;
  background: var(--green);
}
.nav__chev { transition: transform var(--dur-fast) var(--ease-out); }
.nav__item.is-open .nav__chev { transform: rotate(180deg); }

.nav__menu {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 0;
  min-inline-size: 15rem;
  padding: var(--s-2);
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
.nav__item.is-open .nav__menu { opacity: 1; visibility: visible; transform: none; }
.nav__sublink {
  display: block;
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-sm);
  color: var(--body);
  text-decoration: none;
  border-radius: var(--r-sm);
}
.nav__sublink:hover, .nav__sublink.is-current { background: var(--paper-sunk); color: var(--green-ink); }

.site-header__actions { display: flex; align-items: center; gap: var(--s-4); }
.site-header__call {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.site-header__call .icon { color: var(--green-ink); }
.site-header__call:hover { color: var(--green-ink); }

.nav-toggle {
  display: none;
  place-content: center;
  gap: 5px;
  inline-size: 48px;
  block-size: 48px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
}
.nav-toggle__bar {
  display: block;
  inline-size: 20px;
  block-size: 1.5px;
  background: var(--ink);
  transition: transform var(--dur-base) var(--ease-drawer), opacity var(--dur-fast);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1100px) {
  .nav, .site-header__call { display: none; }
  .nav-toggle { display: grid; }
}
@media (max-width: 560px) { .site-header__cta { display: none; } }

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: color-mix(in srgb, var(--interior) 55%, transparent);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.mobile-nav.is-open { opacity: 1; }
.mobile-nav__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(88vw, 24rem);
  padding: var(--s-7) var(--s-6) var(--s-6);
  background: var(--paper);
  box-shadow: var(--sh-lift);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-drawer);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
.mobile-nav.is-open .mobile-nav__panel { transform: none; }
.mobile-nav__list { display: grid; gap: var(--s-1); }
.mobile-nav__link {
  display: block;
  padding: var(--s-3) var(--s-2);
  min-block-size: 48px;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--display-weight);
  color: var(--ink);
  text-decoration: none;
}
.mobile-nav__sub { list-style: none; padding-inline-start: var(--s-4); margin-block-end: var(--s-3); display: grid; gap: var(--s-1); }
.mobile-nav__sub a {
  display: block;
  padding: var(--s-2);
  min-block-size: 44px;
  font-size: var(--fs-sm);
  color: var(--muted);
  text-decoration: none;
}
.mobile-nav__sub a:hover { color: var(--green-ink); }
.mobile-nav__foot { margin-block-start: auto; display: grid; gap: var(--s-4); }
.mobile-nav__call {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  justify-content: center;
  font-size: var(--fs-sm);
  color: var(--ink);
  text-decoration: none;
}

/* ==========================================================================
   15. Hero — the sticky 3D stage
   ========================================================================== */
.hero {
  position: relative;
  /* 200vh, down from 250vh. At 250 there were ~1350px of scrolling in which
     almost nothing changed on screen, which read as dead space rather than as
     a cinematic hold. 200vh gives the kitchen a full arc with no idle stretch. */
  /* Was 200vh. The stage inside is a sticky 100vh block, so sticky released at
     100vh of scroll and the remaining 100vh showed nothing but the empty lower
     half of the canvas — the "huge empty space" before the proof band. One
     viewport means the stage never releases and there is no dead zone. */
  block-size: 100vh;
  /* Set the colour and the image separately. The `background:` shorthand
     resets background-color to transparent, which left the light hero text
     technically sitting on the cream page colour — fine while the gradient
     paints, but a real contrast failure the moment it does not. */
  background-color: var(--interior);
  background-image: radial-gradient(115% 85% at 68% 34%, #3A4633 0%, #2F3A2E 58%, #1D2620 100%);
}
.hero__stage {
  position: sticky;
  top: 0;
  block-size: 100vh;
  overflow: hidden;
  display: grid;
}
.hero__canvas-wrap,
.hero__fallback,
.hero__scrim { position: absolute; inset: 0; }
.hero__canvas { inline-size: 100%; block-size: 100%; display: block; }

.hero__fallback img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* The photograph is the default. The canvas only takes over once the scene
   has actually initialised and reported back. */
.hero__canvas-wrap { opacity: 0; transition: opacity var(--dur-cinema) var(--ease-out); }
.hero[data-webgl="on"] .hero__canvas-wrap { opacity: 1; }
.hero[data-webgl="on"] .hero__fallback { opacity: 0; }
.hero__fallback { transition: opacity var(--dur-cinema) var(--ease-out); }

.hero__scrim {
  background:
    linear-gradient(to right, rgba(29, 38, 32, 0.92) 0%, rgba(29, 38, 32, 0.62) 38%, rgba(29, 38, 32, 0.08) 68%),
    linear-gradient(to top, rgba(29, 38, 32, 0.8) 0%, rgba(29, 38, 32, 0) 42%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: var(--z-content);
  align-self: center;
  inline-size: 100%;
  padding-block: var(--s-6);
}
.hero__copy { max-width: 46rem; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.hero__title {
  /* The stage is exactly 100vh with overflow hidden, so the headline has to be
     sized against viewport HEIGHT as well as width. At the old --fs-4xl the
     h1 ran to four lines and pushed the CTAs and the "you approve the render
     first" line off the bottom of the stage on every laptop, 1920x900
     included. min() against vh is what keeps it inside the frame. */
  font-size: min(clamp(2.25rem, 1.4rem + 3.4vw, 4.75rem), 11vh);
  line-height: 1.02;
  color: #FFFFFF;
  margin-block-end: var(--s-4);
}
.hero__lead {
  font-size: min(var(--fs-md), 2.6vh);
  color: #E4E2DA;
  max-width: 40ch;
  margin-block-end: var(--s-5);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-end: var(--s-5); }
.hero__proof {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  color: #E4E2DA;
  max-width: 46ch;
}
.hero__proof .icon { color: var(--green-bright); }

/* Waypoints: revealed one at a time as the cabinet opens. Each is real DOM
   and is fully readable when the 3D layer is off (see the fallback rules). */
.hero-ways {
  position: absolute;
  inset-block-end: clamp(var(--s-7), 12vh, var(--s-10));
  inset-inline-start: var(--gutter);
  max-width: 32rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Each waypoint is a real panel, not a floating line of text — the scroll
   beat has to deliver something substantial or the hold feels empty. */
.hero-way {
  display: flex;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  background: color-mix(in srgb, var(--interior) 72%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-inline-start: 2px solid var(--green-bright);
  border-radius: var(--r-md);
  box-shadow: var(--sh-4);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.hero-way:not(:first-child) { position: absolute; inset-block-end: 0; inset-inline-start: 0; }
.hero-way.is-active { opacity: 1; transform: none; }
.hero-way__n {
  color: var(--green-bright);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  padding-block-start: 0.3em;
}
.hero-way__title { font-size: var(--fs-lg); color: #FFFFFF; margin-block-end: var(--s-2); }
.hero-way__text { font-size: var(--fs-sm); color: #E4E2DA; max-width: 46ch; }

.hero__cue {
  position: absolute;
  inset-block-end: var(--s-6);
  inset-inline-end: var(--gutter);
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  color: #B3B4A8;
  transition: opacity var(--dur-base) var(--ease-out);
}
.hero__cue-label { font-size: var(--fs-3xs); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.hero__cue-line { inline-size: 1px; block-size: 46px; background: linear-gradient(to bottom, var(--green-bright), transparent); }
.hero.is-scrolled .hero__cue { opacity: 0; }

/* When the 3D layer is off the hero collapses to a normal photographic hero
   and the waypoints become a readable static list below the copy. */
.hero[data-webgl="off"] { block-size: auto; }
.hero[data-webgl="off"] .hero__stage { position: static; block-size: auto; min-block-size: min(88vh, 720px); }
.hero[data-webgl="off"] .hero-ways { position: static; display: grid; gap: var(--s-5); margin-block-start: var(--s-8); max-width: none; }
.hero[data-webgl="off"] .hero-way { position: static; opacity: 1; transform: none; }
@media (max-width: 860px) {
  .hero { block-size: auto; }
  .hero__stage { position: static; block-size: auto; min-block-size: 78vh; }
  .hero-ways { position: static; display: grid; gap: var(--s-5); margin-block-start: var(--s-7); max-width: none; }
  .hero-way { position: static; opacity: 1; transform: none; }
  .hero__cue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero { block-size: auto; }
  .hero__stage { position: static; block-size: auto; min-block-size: 80vh; }
  .hero-ways { position: static; display: grid; gap: var(--s-5); margin-block-start: var(--s-7); max-width: none; }
  .hero-way { position: static; opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   15b. Proof band — the bridge out of the hero
   ========================================================================== */
.proof-band {
  position: relative;
  background: var(--interior-soft);
  border-block: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: var(--s-7);
}
.proof-band__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-6);
}
@media (max-width: 960px) { .proof-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .proof-band__grid { grid-template-columns: minmax(0, 1fr); } }

.proof-item { position: relative; padding-inline-start: var(--s-6); }
.proof-item::before {
  content: "";
  position: absolute;
  inset-block: 2px auto;
  inset-inline-start: 0;
  block-size: 100%;
  inline-size: 1px;
  background: linear-gradient(to bottom, var(--green-bright), transparent 78%);
  opacity: 0.5;
}
.proof-item__icon { display: block; color: var(--green-bright); margin-block-end: var(--s-3); }
.proof-item__big {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--fs-xl);
  line-height: 1;
  color: #FFFFFF;
  letter-spacing: var(--ls-display);
  margin-block-end: var(--s-2);
}
.proof-item__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--green-bright);
  margin-block-end: var(--s-3);
}
.proof-item__note { font-size: var(--fs-sm); color: #C2C1B6; max-width: 34ch; }

/* ==========================================================================
   16. The three doors
   ========================================================================== */
.doors__grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
@media (max-width: 980px) { .doors__grid { grid-template-columns: minmax(0, 1fr); } }

.door {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  transition: transform var(--dur-base) var(--ease-drawer), box-shadow var(--dur-base) var(--ease-out);
}
.door:hover { transform: translateY(-4px); box-shadow: var(--sh-4); }
.door--primary { border-color: var(--green-ink); box-shadow: var(--sh-3); }
.door__flag {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: var(--s-6);
  transform: translateY(-50%);
  padding: 0.35em 0.8em;
  background: var(--green-ink);
  color: var(--paper);
  border-radius: var(--r-pill);
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.door__voice {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-style: italic;
  color: var(--copper-ink);
  margin: 0;
}
.door__title { font-size: var(--fs-lg); }
.door__text { color: var(--c-muted); font-size: var(--fs-sm); flex: 1; }
.door__foot { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; margin-block-start: var(--s-2); }

/* ==========================================================================
   17. Craft / editorial media blocks
   ========================================================================== */
.craft__frame {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-3);
  transition: transform var(--dur-base) var(--ease-out);
}
.craft__frame img { inline-size: 100%; block-size: auto; }
.craft__actions, .cupboards__actions { margin-block-start: var(--s-6); }
.cupboards__caption {
  margin-block-start: var(--s-4);
  font-size: var(--fs-xs);
  color: var(--c-muted);
  max-width: 46ch;
}
.cupboards__caption .link { min-block-size: auto; }
/* The frame is the positioning context for the illustrative label. */
.craft__frame { position: relative; }

.ticks { list-style: none; display: grid; gap: var(--s-3); margin-block: var(--s-5) 0; }
.ticks li { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--fs-sm); }
.ticks .icon { color: var(--green-ink); margin-block-start: 0.28em; }
.interior .ticks .icon { color: var(--green-bright); }

.dimension { position: relative; margin-block-start: var(--s-4); }
.dimension__svg { inline-size: 100%; block-size: 30px; opacity: 0.7; }
.dimension__label {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  padding-inline: var(--s-3);
  background: var(--c-bg-sunk);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-muted);
}
.section:not(.section--sunk) .dimension__label { background: var(--c-bg); }

/* ==========================================================================
   18. Render proof
   ========================================================================== */
.proof-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1.55fr 1fr;
}
@media (max-width: 900px) { .proof-grid { grid-template-columns: minmax(0, 1fr); } }

.proof-card { margin: 0; }
.proof-card__media {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-3);
}
.proof-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.proof-card__tag {
  position: absolute;
  inset-block-start: var(--s-4);
  inset-inline-start: var(--s-4);
  padding: 0.35em 0.8em;
  background: color-mix(in srgb, var(--interior) 82%, transparent);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-pill);
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.proof-card figcaption { margin-block-start: var(--s-4); font-size: var(--fs-sm); color: var(--c-muted); }
.proof-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-6);
  border-block-start: 1px solid var(--c-line);
}
.proof-foot__note { font-size: var(--fs-sm); color: var(--c-muted); max-width: 52ch; margin: 0; }

/* ==========================================================================
   19. Work
   ========================================================================== */
.work__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; }
.work__head .section-head { margin-block-end: var(--s-8); }
.work__head-action { margin-block-end: var(--s-8); }
.work-card .card__title a { text-decoration: none; }
.work-card .card__title a:hover { color: var(--green-ink); }

/* ==========================================================================
   20. Process steps
   ========================================================================== */
.steps { list-style: none; counter-reset: step; display: grid; gap: 0; }
.step {
  position: relative;
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: var(--s-5);
  padding-block: var(--s-6);
  border-block-start: 1px solid var(--c-line);
}
.step:last-child { border-block-end: 1px solid var(--c-line); }
.step__n {
  font-size: var(--fs-lg);
  color: var(--green-ink);
  font-weight: 500;
  line-height: 1;
}
.step__title { font-size: var(--fs-lg); margin-block-end: var(--s-2); }
.step__text { color: var(--c-muted); font-size: var(--fs-sm); max-width: 62ch; }
.step__rule {
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 1px;
  background: var(--green);
  transition: inline-size var(--dur-cinema) var(--ease-out);
}
.step.is-in .step__rule { inline-size: 100%; }
@media (max-width: 640px) {
  .step { grid-template-columns: 1fr; gap: var(--s-3); }
}

/* ==========================================================================
   21. Service rows
   ========================================================================== */
.svc-rows { list-style: none; display: grid; }
.svc-row { border-block-start: 1px solid var(--c-line); }
.svc-row:last-child { border-block-end: 1px solid var(--c-line); }
.svc-row__link {
  display: grid;
  grid-template-columns: 4rem minmax(10rem, 18rem) 1fr auto;
  align-items: center;
  gap: var(--s-5);
  padding-block: var(--s-6);
  text-decoration: none;
  transition: padding-inline var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.svc-row__link:hover { background: var(--c-surface); padding-inline: var(--s-5); }
.svc-row__n { color: var(--green-ink); font-size: var(--fs-xs); }
.svc-row__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--display-weight);
  color: var(--c-heading);
  letter-spacing: var(--ls-tight);
}
.svc-row__text { color: var(--c-muted); font-size: var(--fs-sm); }
.svc-row__go { color: var(--green-ink); transition: transform var(--dur-base) var(--ease-drawer); }
.svc-row__link:hover .svc-row__go { transform: translateX(6px); }
@media (max-width: 900px) {
  .svc-row__link { grid-template-columns: 3rem 1fr auto; }
  .svc-row__text { display: none; }
}

/* ==========================================================================
   22. Image strip
   ========================================================================== */
.strip { overflow: hidden; padding-block: var(--section-y-tight); }
.strip__track { display: flex; gap: var(--s-4); inline-size: max-content; padding-inline: var(--gutter); }
.strip__item { margin: 0; inline-size: clamp(15rem, 30vw, 26rem); flex: none; }
.strip__item img {
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
}
.strip__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-block-start: var(--s-6);
}

/* ==========================================================================
   23. Closing band
   ========================================================================== */
.closing { padding-block: var(--section-y-loose); }
.closing__inner { position: relative; text-align: center; padding-block: var(--s-6); }
.closing__title { font-size: var(--fs-2xl); margin-block-end: var(--s-5); }
.closing__text { color: var(--c-text); max-width: 58ch; margin-inline: auto; }
.closing__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-4);
  margin-block-start: var(--s-7);
}
.closing__note {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-block-start: var(--s-5);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.closing__note .icon { color: var(--green-bright); }
.closing .eyebrow { justify-content: center; }
.closing .eyebrow::before { display: none; }

/* ==========================================================================
   24. Page hero (inner pages)
   ========================================================================== */
.page-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-block-size: clamp(20rem, 44vh, 30rem);
  overflow: hidden;
}
.page-hero__media { position: absolute; inset: -10% 0; }
.page-hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.page-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(29, 38, 32, 0.94) 8%, rgba(29, 38, 32, 0.62) 48%, rgba(29, 38, 32, 0.42) 100%);
}
.page-hero__inner { position: relative; z-index: var(--z-content); padding-block: var(--s-8); }
.page-hero__title { font-size: var(--fs-2xl); color: #FFFFFF; }
.page-hero__lead { margin-block-start: var(--s-4); color: #E4E2DA; font-size: var(--fs-md); max-width: 54ch; }

.crumbs { margin-block-end: var(--s-4); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); list-style: none; font-size: var(--fs-xs); color: #B3B4A8; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin-inline-end: var(--s-2); opacity: 0.6; }
.crumbs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  min-inline-size: 44px;
  color: #E4E2DA;
  text-decoration: none;
}
.crumbs a:hover { color: var(--green-bright); }
.crumbs [aria-current] { color: #FFFFFF; }

/* ==========================================================================
   25. Footer
   ========================================================================== */
.site-footer { padding-block: var(--section-y) var(--s-6); }
.site-footer__top {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  padding-block-end: var(--s-8);
  border-block-end: 1px solid var(--c-line);
}
@media (max-width: 1024px) { .site-footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .site-footer__top { grid-template-columns: 1fr; } }

.site-footer__logo { block-size: 46px; inline-size: auto; filter: brightness(0) invert(1); margin-block-end: var(--s-5); }
.site-footer__about { font-size: var(--fs-sm); color: var(--c-text); max-width: 44ch; margin-block-end: var(--s-5); }
.site-footer__title {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--green-bright);
  margin-block-end: var(--s-5);
}
.site-footer__links { display: grid; }
/* Footer links were 16px tall — below even the 24px WCAG 2.2 minimum, and well
   under the 44px this build targets. Give them a real tappable box. */
.site-footer__links a {
  display: flex;
  align-items: center;
  min-block-size: 44px;
  font-size: var(--fs-sm);
  color: var(--c-text);
  text-decoration: none;
}
.site-footer__links a:hover { color: var(--green-bright); }
.site-footer__contact { font-style: normal; display: grid; gap: var(--s-3); }
.site-footer__contact p { display: flex; align-items: center; gap: var(--s-3); min-block-size: 44px; font-size: var(--fs-sm); margin: 0; }
.site-footer__contact .icon { color: var(--green-bright); flex: none; }
.site-footer__contact a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--c-text); text-decoration: none; }
.site-footer__contact a:hover { color: var(--green-bright); }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block-start: var(--s-5);
}
.site-footer__copy { font-size: var(--fs-xs); color: var(--c-muted); margin: 0; }
.site-footer__top-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 44px;
  padding-inline: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--c-text);
  text-decoration: none;
}
.site-footer__top-link:hover { color: var(--green-bright); }

/* ==========================================================================
   26. Lightbox
   ========================================================================== */
.lightbox { position: fixed; inset: 0; z-index: var(--z-overlay); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.lightbox.is-open { opacity: 1; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(24, 31, 26, 0.94); }
.lightbox__dialog {
  position: relative;
  block-size: 100%;
  display: grid;
  place-items: center;
  padding: clamp(var(--s-6), 6vw, var(--s-9));
}
.lightbox__figure { margin: 0; max-inline-size: min(1200px, 92vw); text-align: center; }
.lightbox__img { max-block-size: 76vh; inline-size: auto; margin-inline: auto; border-radius: var(--r-sm); }
.lightbox__caption { margin-block-start: var(--s-4); color: #E4E2DA; font-size: var(--fs-sm); max-width: 70ch; margin-inline: auto; }
.lightbox__count { position: absolute; inset-block-end: var(--s-6); inset-inline-start: 50%; transform: translateX(-50%); color: #B3B4A8; font-size: var(--fs-2xs); }
.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-pill);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.18); }
.lightbox__btn--close { inset-block-start: var(--s-5); inset-inline-end: var(--s-5); }
.lightbox__btn--prev { inset-inline-start: var(--s-5); inset-block-start: 50%; transform: translateY(-50%); }
.lightbox__btn--next { inset-inline-end: var(--s-5); inset-block-start: 50%; transform: translateY(-50%); }
.lightbox__btn:focus-visible { outline-color: var(--green-bright); }

/* ==========================================================================
   27. Custom cursor
   ========================================================================== */
.cursor { position: fixed; inset: 0; z-index: var(--z-cursor); pointer-events: none; opacity: 0; transition: opacity var(--dur-base); }
.cursor.is-visible { opacity: 1; }
.cursor__dot, .cursor__ring {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  border-radius: 50%;
  margin-inline-start: -4px;
  margin-block-start: -4px;
}
.cursor__dot { inline-size: 8px; block-size: 8px; background: var(--green); }
.cursor__ring {
  inline-size: 34px;
  block-size: 34px;
  margin-inline-start: -17px;
  margin-block-start: -17px;
  border: 1px solid var(--green);
  transition: width var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out),
              margin var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.cursor.is-link .cursor__ring { inline-size: 52px; block-size: 52px; margin-inline-start: -26px; margin-block-start: -26px; background: rgba(124, 143, 90, 0.12); }
.cursor.is-view .cursor__ring, .cursor.is-open .cursor__ring {
  inline-size: 74px; block-size: 74px; margin-inline-start: -37px; margin-block-start: -37px;
  background: rgba(124, 143, 90, 0.9); border-color: transparent;
}
.cursor.is-down .cursor__ring { transform: scale(0.86); }
.cursor__label {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--paper);
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor { display: none; }
}

/* ==========================================================================
   28. Accordion
   ========================================================================== */
.acc { display: grid; }
.acc__item { border-block-start: 1px solid var(--c-line); }
.acc__item:last-child { border-block-end: 1px solid var(--c-line); }
.acc__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  inline-size: 100%;
  padding-block: var(--s-5);
  min-block-size: 56px;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--display-weight);
  color: var(--c-heading);
  letter-spacing: var(--ls-tight);
}
.acc__trigger:hover { color: var(--green-ink); }
.acc__icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  color: var(--green-ink);
  transition: transform var(--dur-base) var(--ease-drawer), background-color var(--dur-fast);
}
.acc__item.is-open .acc__icon { transform: rotate(45deg); background: var(--green-wash); }
.acc__panel {
  overflow: hidden;
  max-block-size: 0;
  transition: max-height var(--dur-base) var(--ease-drawer);
}
.acc__body { padding-block-end: var(--s-6); color: var(--c-muted); font-size: var(--fs-sm); max-width: 72ch; }
.acc__body > * + * { margin-block-start: var(--s-4); }

/* ==========================================================================
   29. Products
   ========================================================================== */
.product-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.product {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-drawer);
}
.product:hover { border-color: var(--line-strong); box-shadow: var(--sh-3); transform: translateY(-3px); }
.product__media { position: relative; background: var(--paper); aspect-ratio: 1 / 1; }
.product__media img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.product__body { padding: var(--s-4) var(--s-5) var(--s-5); display: grid; gap: var(--s-3); }
.product__title { font-size: var(--fs-base); letter-spacing: var(--ls-tight); }
.product__sku { font-family: var(--font-mono); font-size: var(--fs-3xs); color: var(--muted); letter-spacing: var(--ls-wide); }

/* The door-state control — the interaction the whole concept rests on. */
.states { display: flex; gap: var(--s-1); padding: var(--s-1); background: var(--paper-sunk); border-radius: var(--r-sm); }
.state-btn {
  flex: 1;
  padding: 0.5em 0.4em;
  /* The door-state control is the signature interaction of this build; it has
     to be comfortably tappable, not merely clickable. */
  min-block-size: 44px;
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.state-btn:hover { color: var(--ink); }
.state-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.product__media img { transition: opacity var(--dur-base) var(--ease-out); }

.is-filtered-out { display: none !important; }

/* ==========================================================================
   30. Cut & Edge cutting list
   ========================================================================== */
.cutlist { display: grid; gap: var(--s-4); }
.cutrow {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 2.5rem repeat(4, minmax(0, 1fr)) auto;
  align-items: end;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.cutrow__n { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); padding-block-end: 0.9em; }
.cutrow .field { margin-block-end: 0; }
.cutrow__remove {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--muted);
}
.cutrow__remove:hover:not([disabled]) { color: var(--error); border-color: var(--error); }
.cutrow__remove[disabled] { opacity: 0.35; cursor: not-allowed; }
@media (max-width: 900px) { .cutrow { grid-template-columns: 1fr 1fr; } .cutrow__n { grid-column: 1 / -1; padding-block-end: 0; } }

/* ==========================================================================
   31. Misc page furniture
   ========================================================================== */
.stat { display: grid; gap: var(--s-2); }
.stat__n {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--display-weight);
  color: var(--c-heading);
  line-height: 1;
}
.stat__label { font-size: var(--fs-xs); color: var(--c-muted); letter-spacing: var(--ls-wide); text-transform: uppercase; }

.notice {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  background: var(--green-wash);
  border-inline-start: 2px solid var(--green-ink);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.interior .notice { background: rgba(174, 203, 144, 0.1); border-color: var(--green-bright); }
.notice .icon { color: var(--green-ink); flex: none; margin-block-start: 0.2em; }
.interior .notice .icon { color: var(--green-bright); }

.gallery-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.tile { position: relative; padding: 0; border: 0; background: none; border-radius: var(--r-md); overflow: hidden; cursor: pointer; display: block; inline-size: 100%; }
.tile img { inline-size: 100%; block-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--dur-cinema) var(--ease-out); }
.tile:hover img { transform: scale(1.05); }
.tile__cap {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--s-6) var(--s-4) var(--s-4);
  background: linear-gradient(to top, rgba(29, 38, 32, 0.88), transparent);
  color: #FFFFFF;
  font-size: var(--fs-xs);
  text-align: left;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.tile:hover .tile__cap, .tile:focus-visible .tile__cap { opacity: 1; transform: none; }

.prose > * + * { margin-block-start: var(--s-5); }
.prose h2 { font-size: var(--fs-lg); margin-block-start: var(--s-8); }
.prose ul { display: grid; gap: var(--s-2); padding-inline-start: var(--s-5); }
.prose li { font-size: var(--fs-sm); color: var(--c-text); }
.prose p { font-size: var(--fs-sm); }

.map-frame { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-2); }
.map-frame iframe { display: block; inline-size: 100%; block-size: 22rem; border: 0; }

.empty-state { text-align: center; padding-block: var(--s-9); display: grid; gap: var(--s-5); justify-items: center; }
.empty-state__icon { display: grid; place-items: center; inline-size: 64px; block-size: 64px; border: 1px solid var(--c-line); border-radius: 50%; color: var(--green-ink); }


/* ==========================================================================
   Closing CTA vs footer
   Both were var(--interior) with no border and no gap between them, so the
   call to action and the footer read as one unbroken slab of dark green about
   1600px tall and the CTA lost all emphasis. The CTA keeps the mid tone and
   gains a warm sage glow rising from its top edge plus a sage hairline; the
   footer drops to the darker ink tone beneath it. Two distinct bands, no
   layout change.
   ========================================================================== */
.closing {
  background-color: #2F3A2E;
  background-image:
    radial-gradient(120% 150% at 50% 0%, rgba(174, 203, 144, 0.14) 0%, rgba(174, 203, 144, 0) 60%);
  border-block-start: 1px solid rgba(174, 203, 144, 0.30);
  position: relative;
}

/* A short centred rule above the eyebrow, so the band reads as a deliberate
   moment rather than a colour change. */
.closing::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: 96px;
  block-size: 2px;
  background: var(--green-bright, #AECB90);
}

.site-footer {
  background-color: #1D2620;
  border-block-start: 1px solid rgba(255, 255, 255, 0.07);
}

/* The hero is pinned by ScrollTrigger now, not held by CSS sticky. Leaving the
   stage sticky as well makes the two fight: sticky offsets the stage inside a
   container the pin has already fixed in place. */
.hero__stage { position: static; }

/* ==========================================================================
   Workshop proof section
   Replaces the old "Industry-leading cabinet manufacturing" block. The point
   of this section is evidence, so the media leads and the copy stays short.
   ========================================================================== */
.workshop__head { max-width: 62ch; margin-block-end: var(--s-8, 40px); }
.workshop__lead { font-size: 1.05rem; }

.workshop__film { margin: 0 0 var(--s-8, 40px); position: relative; }
.workshop__video {
  inline-size: 100%; block-size: auto; display: block;
  aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--r-md, 6px); background: #1D2620;
}
.workshop__film figcaption,
.workshop__shot figcaption {
  margin-block-start: 10px; font-size: 13px; opacity: .78;
}

.workshop__grid {
  display: grid; gap: var(--s-6, 24px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.workshop__shot { margin: 0; }
.workshop__shot img {
  inline-size: 100%; block-size: auto; display: block;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-md, 6px);
}

.workshop__actions {
  display: flex; flex-wrap: wrap; gap: var(--s-4, 16px);
  margin-block-start: var(--s-8, 40px);
}

/* The clip is decoration, not information — the captions carry the meaning.
   Anyone who has asked for less motion gets the poster frame instead. */
@media (prefers-reduced-motion: reduce) {
  .workshop__video { display: none; }
  .workshop__film {
    aspect-ratio: 16 / 10;
    background: #1D2620 center / cover no-repeat
      url("../images/workshop/cnc-machining-centre-800.webp");
    border-radius: var(--r-md, 6px);
  }
}
/* ==========================================================================
   Workshop — the manufacturing proof section

   Three numbered steps: cut, drill, assemble. Two are real footage of the
   machines running; the third is a finished kitchen standing on the workshop
   floor. Media leads and the copy stays short, because the evidence is the
   argument.
   ========================================================================== */
.workshop__head { max-width: 60ch; margin-block-end: var(--s-9, 48px); }
.workshop__lead { font-size: 1.06rem; color: var(--body); }

.workshop__steps {
  display: grid;
  gap: var(--s-7, 32px);
  /* 240px, not 260: at a ~845px container three columns plus two 32px gaps
     came to 844px and tipped to a 2+1 layout. The extra margin keeps the three
     steps on one line wherever there is genuinely room for them. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.wstep { margin: 0; display: flex; flex-direction: column; }

/* A quiet frame so a video and a photograph sit as equals. */
.wstep__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md, 6px);
  border: 1px solid var(--line, rgba(47,58,46,.12));
  background: #1D2620;
  transition: transform .4s var(--ease-out, cubic-bezier(.22,1,.36,1)),
              box-shadow .4s ease;
}
.wstep:hover .wstep__frame {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -24px rgba(29,38,32,.55);
}

.wstep__media {
  inline-size: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.wstep__body {
  padding-block-start: var(--s-5, 20px);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--s-4, 16px);
  row-gap: 6px;
  align-items: baseline;
}
.wstep__n {
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--green-ink, #5E6E3E);
  padding-inline-end: var(--s-4, 16px);
  border-inline-end: 1px solid var(--line, rgba(47,58,46,.14));
}
.wstep__title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
}
.wstep__cap {
  grid-column: 2;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--body);
}

.workshop__actions {
  display: flex; flex-wrap: wrap; gap: var(--s-4, 16px);
  margin-block-start: var(--s-9, 48px);
}

/* The clips are evidence, not decoration — but nobody who has asked for less
   motion should have two videos start on their own. They keep the poster. */
@media (prefers-reduced-motion: reduce) {
  .wstep__media { animation: none !important; }
  video.wstep__media { display: none; }
  .wstep__frame:has(video) {
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
  }
}


/* ==========================================================================
   Boards page

   Each range is a full-width block rather than one of three narrow columns:
   a decor is something you look at, and four large tiles per line read far
   better than six thumbnails squeezed into a third of the page. The ranges
   are separated by a rule and an even vertical rhythm so the page scans as
   three considered sections rather than a wall of colour.
   ========================================================================== */
.boards { display: block; }

.board { padding-block: var(--s-9, 48px) 0; }
.board + .board {
  margin-block-start: var(--s-9, 48px);
  border-block-start: 1px solid var(--line, rgba(47,58,46,.14));
}
.board:first-child { padding-block-start: 0; }

/* Header sits on a narrow measure so the copy stays readable while the
   swatches run the full width beneath it. */
.board__head { max-width: 62ch; margin-block-end: var(--s-7, 32px); }
.board__name { margin: 4px 0 8px; }
.board__use { margin: 0; color: var(--body); }
.board__note {
  margin-block-start: 12px; padding-inline-start: 14px;
  border-inline-start: 2px solid var(--green-bright, #AECB90);
  font-size: 14px; color: var(--body);
}

/* Four per line on desktop, stepping down cleanly rather than reflowing at
   arbitrary widths. */
.board__decors {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-6, 24px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) { .board__decors { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .board__decors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.swatch { margin: 0; }
.swatch img {
  inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: var(--r-sm, 3px);
  border: 1px solid var(--line, rgba(47,58,46,.14));
  transition: transform .35s var(--ease-out, cubic-bezier(.22,1,.36,1)),
              box-shadow .35s ease;
}
.swatch:hover img {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -18px rgba(29,38,32,.5);
}
.swatch__name {
  display: block; margin-block-start: 10px;
  font-size: 13px; line-height: 1.4; color: var(--ink, #2F3A2E);
}

/* A decor we could not confidently pair with an image still lists: the code is
   what you order by. It reads as a placeholder, never as a colour. */
.swatch--nopic .swatch__name {
  display: flex; align-items: center; justify-content: center; text-align: center;
  aspect-ratio: 4 / 3; margin: 0; padding: 12px;
  border: 1px dashed var(--line, rgba(47,58,46,.28));
  border-radius: var(--r-sm, 3px);
  color: var(--body); font-size: 12px;
}

.board__more { margin-block-start: var(--s-6, 24px); font-size: 14px; }