/* ==========================================================================
   British Doors — V3: simple, WhatsApp-first
   SEE → CHOOSE → WHATSAPP → GET PRICE. The page is complete with JS off;
   js/main.js adds the carousel, menu and Doorways, js/animations.js adds motion.
   ========================================================================== */

/* 0. Fonts — vendored locally (SIL OFL, see fonts/OFL-*.txt) ---------------- */
/* Archivo Black has one weight (400, drawn black). Declared as covering 400-900 so headings can ask
   for 900: the font renders as itself (no faux bold), and a fallback renders at its heaviest */
@font-face { font-family: 'Archivo Black'; src: url('fonts/archivo-black-latin-400-normal.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/montserrat-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/montserrat-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/montserrat-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --ink: #11100F;
  --ink-2: #1A1613;
  --night: #17130F;          /* How It Works + footer */
  --walnut: #2A1D16;
  --walnut-2: #5B3B28;
  --walnut-3: #765039;
  --ivory: #F3EFE7;
  --ivory-2: #E8DED0;
  --ivory-3: #D8C8B5;
  --cream: #EDE5D8;
  --tan: #E9DDCB;            /* the quiet contact buttons */
  --brass: #B79A67;
  --brass-2: #C9A56C;
  --wa: #15803D;             /* WhatsApp action green — white text 5.0:1 */
  --wa-2: #116932;

  --text-dark: #1A1613;
  --muted-dark: #5E4D40;
  --text-light: #F3EFE7;
  --muted-light: rgba(243, 239, 231, 0.72);

  /* headings: Archivo Black (one black weight, asked for as 900); text: Montserrat 400/500/600.
     Fallbacks are real system faces: the black/heavy cuts first, then each platform's UI sans */
  --head: 'Archivo Black', 'Arial Black', 'Segoe UI Black', 'Helvetica Neue', Roboto, Arial, sans-serif;
  --sans: 'Montserrat', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* the one layout system: a centred container on a 12-column grid */
  --max: 1440px;
  --g: 24px;
  --px: 5vw;
  --sy: 120px;
  --head-gap: 64px;
  --header-h: 64px;
  --bar-h: 0px;              /* the mobile CTA bar, when it shows */
  --r: 10px;                 /* card + button rounding */

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-io: cubic-bezier(0.65, 0.05, 0.25, 1);
}
@media (max-width: 1023px) { :root { --px: 40px; --sy: 96px; --head-gap: 48px; } }
@media (max-width: 767px) { :root { --px: 20px; --sy: 72px; --head-gap: 36px; --g: 12px; --header-h: 56px; } }
@media (max-width: 899px) { :root { --bar-h: calc(64px + env(safe-area-inset-bottom, 0px)); } }

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1px); }
html.is-locked { overflow: hidden; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--text-dark);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  padding-bottom: var(--bar-h);          /* the fixed CTA bar never covers the footer */
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul[role='list'], ol { list-style: none; }
h1, h2, h3, p { margin: 0; }
svg { flex: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 1000;
  padding: 12px 18px; background: var(--ivory); color: var(--ink);
  transform: translateY(-160%); transition: transform 0.3s var(--ease);
}
.skip-link:focus { transform: none; }

:focus-visible { outline: 2px solid var(--focus, var(--walnut-3)); outline-offset: 3px; }
[data-theme='dark'], .hero, .cta-bar, .how, .site-footer { --focus: var(--brass-2); }

.js-only { display: none !important; }
html.js .js-only { display: flex !important; }

.wrap { width: min(var(--max), 100% - 2 * var(--px)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.grid > * { grid-column: 1 / -1; min-width: 0; }
.section { position: relative; padding-block: var(--sy); }
.surface-ivory { background: var(--ivory); color: var(--text-dark); }

/* 3. Type ------------------------------------------------------------------ */
/* Archivo Black is wide and very heavy: sizes sit well below the old serif's, tracking barely tight */
.display {
  font-family: var(--head);
  font-weight: 900;
  font-size: clamp(1.9rem, 1.2rem + 2.3vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.display em { font-style: normal; color: var(--walnut-3); }
[data-theme='dark'] .display em { color: var(--ivory-3); }
.display--md { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.6rem); }
.line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.line > span { display: inline-block; }

.kicker {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--walnut-3);
  margin-bottom: clamp(14px, 1.6vw, 22px);
}
[data-theme='dark'] .kicker { color: var(--brass); }
.kicker__rule { width: 36px; height: 1px; background: currentColor; flex: none; transform-origin: left; }
.lead { font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem); line-height: 1.6; color: var(--muted-dark); max-width: 36rem; text-wrap: pretty; }
[data-theme='dark'] .lead { color: var(--muted-light); }
.num { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }

.placeholder-tag {
  display: inline-block; margin-block: 8px 20px; padding: 6px 12px;
  border: 1px dashed currentColor; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75;
}

/* the one section head, used by every section: kicker, heading, lead — centred, same gaps.
   The heading takes its colour from the section (dark ink on ivory, ivory on the dark runs) */
.sec-head { display: grid; justify-items: center; text-align: center; margin-bottom: var(--head-gap); }
.sec-head .kicker { justify-content: center; margin-bottom: 16px; }
.sec-head .display { max-width: 22ch; }
.sec-head .lead { max-width: 60ch; margin-top: 16px; text-wrap: balance; }

/* 4. Buttons ---------------------------------------------------------------- */
.icon { width: 20px; height: 20px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 8px; border: 1px solid transparent;
  font-family: var(--sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 0.74rem; }
.btn--wa { background: var(--wa); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .btn--wa:hover { background: var(--wa-2); }
}
.text-button { background: none; border: 0; padding: 12px 0; min-height: 44px; }
.text-button:hover { text-decoration: underline; text-underline-offset: 4px; }

/* two-line calls to action (hero) */
.cta {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 12px 22px 12px 18px; border-radius: 8px;
  text-decoration: none; line-height: 1.2;
  transition: background-color 0.35s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.cta__icon { width: 30px; height: 30px; }
.cta__text { display: grid; gap: 3px; text-align: left; }
.cta__k { font-size: 0.86rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.cta__v { font-size: 0.82rem; white-space: nowrap; }
.cta--wa { background: var(--wa); color: #fff; box-shadow: 0 14px 30px -14px rgba(10, 60, 30, 0.8); }
.cta--light { background: var(--ivory); color: var(--ink); }
.cta--light .cta__icon { color: var(--walnut-2); }
@media (hover: hover) and (pointer: fine) {
  .cta:hover { transform: translateY(-2px); }
  .cta--wa:hover { background: var(--wa-2); }
  .cta--light:hover { background: #fff; }
}

/* 5. Header ------------------------------------------------------------------ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; color: var(--text-dark);
  /* a solid cream bar from the first paint (the cream sections' own tone), so the client's
     wood-textured logo sits on it as drawn; never over the artwork: main starts below it.
     No backdrop-filter: a blur re-rasterises everything scrolling beneath it on every frame. */
  background: var(--ivory); border-bottom: 1px solid rgba(91, 59, 40, 0.3);
}
main { padding-top: calc(var(--header-h) + 1px); }
.site-header__inner { display: flex; align-items: center; gap: 32px; height: var(--header-h); }
/* scrolled: instantly a firmer edge and a soft shadow, so the bar still reads over the cream sections */
.site-header.is-scrolled { border-bottom-color: rgba(91, 59, 40, 0.5); box-shadow: 0 10px 22px -14px rgba(26, 22, 19, 0.45); }
/* without JS the bar simply scrolls away with the page */
html:not(.js) .site-header { position: absolute; }

.logo { display: inline-grid; justify-items: center; text-decoration: none; min-height: 44px; align-content: center; line-height: 1; }
/* header + menu: images/logo-mark.png, the client's logo as drawn minus the tagline (it would be
   ~7px here); footer: the cream recolours. All built by tools/build-logo-variants.py, at 2x. */
.logo__img { display: block; height: 40px; width: auto; }
@media (max-width: 767px) { .logo__img { height: 32px; } }
.primary-nav { margin-left: auto; }
.primary-nav__list { display: flex; gap: clamp(20px, 2.4vw, 40px); margin: 0; padding: 0; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
}
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 1.5px; background: var(--walnut-2);
  transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease);
}
.nav-link[aria-current]::after, .nav-link:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .nav-link:hover::after { transform: scaleX(1); } }
.menu-toggle { margin-left: auto; width: 48px; height: 48px; border: 0; background: none; position: relative; }
.menu-toggle__bar { position: absolute; left: 12px; right: 12px; height: 1.5px; background: currentColor; transition: transform 0.4s var(--ease); }
.menu-toggle__bar { top: 19px; }   /* not :first-of-type: the sr-only label is the button's first span */
.menu-toggle__bar:last-of-type { top: 28px; right: 18px; }
@media (min-width: 1024px) { html.js .menu-toggle { display: none !important; } }
@media (max-width: 1023px) {
  .primary-nav { display: none; }
  .site-header__wa { margin-left: auto; }
}
@media (max-width: 899px) { .site-header__wa { display: none; } }   /* the CTA bar carries it */

/* 6. Mobile overlay (body level) ------------------------------------------- */
.menu-overlay {
  position: fixed; inset: 0; z-index: 100; background: var(--ivory); color: var(--text-dark);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s;
}
.menu-overlay.is-open { opacity: 1; visibility: visible; transition: opacity 0.5s var(--ease), visibility 0s; }
.menu-overlay[hidden] { display: none; }
.menu-overlay__top { display: flex; justify-content: space-between; align-items: center; height: var(--header-h); }
.menu-close { width: 48px; height: 48px; border: 0; background: none; position: relative; }
.x-icon, .x-icon::before { position: absolute; left: 50%; top: 50%; width: 22px; height: 1.5px; background: currentColor; }
.x-icon { transform: translate(-50%, -50%) rotate(45deg); }
.x-icon::before { content: ''; transform: translate(-50%, -50%) rotate(90deg); }
.menu-overlay__nav { flex: 1; display: flex; align-items: center; padding-block: 24px; }
.menu-overlay__list { display: grid; gap: 4px; margin: 0; padding: 0; }
.menu-overlay__list a {
  display: flex; align-items: baseline; gap: 18px; padding-block: 6px; min-height: 44px;
  font-family: var(--head); font-weight: 900; font-size: clamp(1.5rem, 5.6vw, 2.2rem); line-height: 1.15; letter-spacing: -0.005em; text-decoration: none;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), color 0.3s;
  transition-delay: calc(var(--i, 0) * 50ms + 120ms);
}
.menu-overlay.is-open .menu-overlay__list a { opacity: 1; transform: none; }
.menu-overlay__list a:hover { color: var(--walnut-2); }
.menu-overlay__num { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--muted-dark); }
.menu-overlay__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding-block: 24px 40px; }
.menu-overlay__meta { font-size: 1rem; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }

/* 7. Hero carousel ------------------------------------------------------------
   The supplied banners are 2:1 scenes (1774x887). The series name is printed on
   each: top centre on UV, SS Patty and Micca, on the left wall on Lamination, on the
   right wall on Membrane and Dhoom. Doors sit across the middle. So:
   - 1024px and up: the banner full-bleed at its own ratio (never trimmed), then a
     dark action bar under it with the CTAs and the dots. Only the arrows sit on
     the art. The bar is often below the fold; the header's WhatsApp button keeps
     a CTA on screen.
   - Below 1024px or on a portrait screen ("band"): the whole banner,
     letterboxed into the site's dark tone, with controls, copy and CTAs below.
   Motion is opacity + transform only; transform-origin never changes. */
:root {
  --hero-ratio: 1774 / 887;
  --hero-portrait-ratio: 941 / 1672;   /* the client's portrait banners (images/banners/mobile/), all six 941x1672 */
  --hero-fade: 900ms;
  --hero-fade-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --hero-dwell: 6900ms;                /* 6 s on screen + the 900 ms fade in */
}
.hero { position: relative; background: var(--night); color: var(--text-light); overflow: hidden; isolation: isolate; }
/* full-bleed: always the full width of the page, height from the banner's own ratio (50vw),
   so nothing is ever trimmed and there are no side bands. On short windows the page simply
   scrolls: there is no ceiling to trim (Micca's name starts 10px from the top of the source,
   UV's 15px, SS Patty's 22px, Dhoom's door frame 25px).
   width: 100% (not 100vw), so a visible scrollbar never causes horizontal overflow */
.hero__stage { position: relative; width: 100%; aspect-ratio: var(--hero-ratio); }
.hero__slides { position: absolute; inset: 0; background: var(--night); overflow: hidden; }   /* the zoom never spills onto the controls below */
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--hero-fade) var(--hero-fade-ease); }
.hero__slide.is-active { opacity: 1; z-index: 2; }
.hero__slide.is-leaving { opacity: 1; z-index: 1; transition: none; }   /* stays solid under the incoming slide */
.hero__slide picture { display: block; width: 100%; height: 100%; }
.hero__img {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 0%);
  transform: scale(1); transform-origin: 50% 0;
}
/* Ken Burns: every slide opens on the whole banner at scale 1 and drifts in to 1.06, anchored
   at the top edge, since three names sit within 22px of it. At 1.06 the visible part is
   x 2.8%-97.2%, y 0-94.3%: the 50px lost at the bottom and each side is floor and walls */
.hero__slide.is-active .hero__img { animation: ken-burns var(--hero-dwell) linear both; }
/* layer hints only on the two slides in play; JS adds and removes .is-playing */
.hero__slide.is-playing { will-change: opacity; }
.hero__slide.is-playing .hero__img { will-change: transform; }
@keyframes ken-burns { from { transform: scale(1); } to { transform: scale(1.06); } }

/* the action bar: a #17130F band directly under the banner holding the CTAs (left, on the
   container edge) and the dots + pause (right). Nothing sits on the artwork but the arrows. */
.hero { --hero-bar-h: 72px; }
.hero__content { position: relative; z-index: 3; display: flex; align-items: center; min-height: var(--hero-bar-h); padding-block: 10px; }
/* the copy stays in the page (it holds the h1) but is not shown at this size */
.hero__copy { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* side by side, equal widths (their natural widths differ by only 14px) */
.hero__actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; width: max-content; }
/* 52px tall (tap target 44px+) so the bar can be 72px; the band below 1024px keeps its own */
@media (min-width: 1024px) and (min-aspect-ratio: 801/1000) { .hero__actions .cta { min-height: 52px; padding: 8px 20px 8px 16px; } }
.hero__eyebrow { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--brass-2); margin-bottom: 10px; }
.hero__title { font-family: var(--head); font-weight: 900; text-transform: uppercase; font-size: clamp(2.35rem, 1.75rem + 2.2vw, 3.1rem); line-height: 1; letter-spacing: 0; }
.hero__title span { display: block; }
.hero__title span + span { color: var(--brass-2); }
.hero__line { margin-top: 12px; font-family: var(--sans); font-weight: 500; font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem); line-height: 1.35; color: var(--ivory); }
.hero__copy, .hero__actions { animation: fade-up 1.1s var(--ease) 0.2s both; }

/* controls: arrows at the sides of the banner; dots + pause at the right of the bar */
.hero__nav { position: absolute; inset: 0; z-index: 4; pointer-events: none; }   /* above the bar, which it shares; only its buttons take clicks */
.hero__nav > * { pointer-events: auto; }
.hero__arrow, .hero__pause {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid rgba(243, 239, 231, 0.8); background: rgba(12, 9, 7, 0.62); color: var(--ivory);
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.hero__arrow svg { width: 20px; height: 20px; }
/* the arrows are the one thing on the art. From 1280px, at mid-height of the banner, they sit on
   walls and planting at the edges of every slide, 7px+ clear of the doors and printed names even
   at Ken Burns 1.06. Below 1280 the zoom carries Lamination's right-hand door casing under the
   next arrow (up to 5px of overlap at 1024), and no height avoids it (the casing runs floor to
   ceiling), so there the arrows leave the art and flank the dots in the bar, as in the band. */
.hero__arrow { position: absolute; top: calc((100% - var(--hero-bar-h)) / 2 - 24px); }
.hero__arrow--prev { left: max(8px, calc(var(--px) / 2 - 24px)); }
.hero__arrow--next { right: max(8px, calc(var(--px) / 2 - 24px)); }
.hero__pill {
  position: absolute; bottom: calc((var(--hero-bar-h) - 44px) / 2); right: max(var(--px), calc((100% - var(--max)) / 2));
  display: flex; align-items: center; gap: 4px;
}
.hero__pause { width: 36px; height: 36px; border-width: 1px; }
.hero__pause svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .hero__arrow:hover, .hero__pause:hover { background: var(--ivory); color: var(--ink); border-color: var(--ivory); } }
.hero__dots { display: flex; }
/* hold the dots' room until JS draws them (--dots = the slide count in index.html), so the pill never grows */
.hero__dots:empty { width: calc(var(--dots, 6) * var(--dot-w, 30px)); height: 44px; }
.hero__dot { width: var(--dot-w, 30px); height: 44px; border: 0; background: none; padding: 0; display: grid; place-items: center; }
.hero__dot::before { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ivory); transition: background-color 0.3s, transform 0.3s; }
.hero__dot[aria-current='true']::before { background: var(--ivory); transform: scale(1.15); }
@media (max-width: 1279px) { .hero__dots { --dot-w: 26px; } }
/* 1024-1279: the arrows flank the dots in the bar (see .hero__arrow above) */
@media (min-width: 1024px) and (max-width: 1279px) and (min-aspect-ratio: 801/1000) {
  .hero__nav { inset: auto max(var(--px), calc((100% - var(--max)) / 2)) calc((var(--hero-bar-h) - 44px) / 2) auto; display: flex; align-items: center; gap: 4px; }
  .hero__arrow, .hero__pill { position: static; }
  .hero__arrow { width: 44px; height: 44px; }
}
.hero__arrow:focus-visible, .hero__pause:focus-visible, .hero__dot:focus-visible { outline: 2px solid var(--ivory); outline-offset: 2px; box-shadow: 0 0 0 5px var(--night); }

/* phones, tablets and portrait screens: the whole banner, then controls, copy and CTAs below it */
@media (max-width: 1023px), (max-aspect-ratio: 4/5) {
  .hero__nav { position: static; display: flex; justify-content: center; align-items: center; gap: 8px; padding-top: 14px; }
  .hero__arrow, .hero__pill { position: static; }
  .hero__content { display: block; min-height: 0; padding-block: 18px 36px; }
  .hero__copy { position: static; width: auto; height: auto; margin: 0 0 24px; overflow: visible; clip: auto; white-space: normal; }
  .hero__actions { display: flex; flex-direction: row; width: 100%; max-width: 560px; }
  .hero__actions .cta { flex: 1 1 0; min-width: 0; }
}
/* portrait art on portrait phones only: on a portrait tablet the 941px-wide banner would be
   1365px+ tall and upscaled, so tablets keep the landscape banner. Same query as the <source>s */
@media (max-aspect-ratio: 4/5) and (max-width: 767px) { .hero { --hero-ratio: var(--hero-portrait-ratio); } }
@media (max-width: 767px) {
  .hero__actions { gap: 10px; }
  .hero__actions .cta { padding: 10px 12px; gap: 10px; min-height: 60px; }
  .cta__icon { width: 24px; height: 24px; }
  .cta__k { font-size: 0.78rem; }
  .cta__v { font-size: 0.74rem; }
  .hero__arrow { width: 44px; height: 44px; }
}
/* measured: from 366px the pair fits in one row with the designed 12px padding intact,
   no text clipped and each button 60px tall; below that they stack */
@media (max-width: 365px) {
  .hero__actions { flex-direction: column; }
  .hero__actions .cta { flex: none; }
}
/* where the fixed CTA bar shows (same 899px as .cta-bar, which needs no JS), it carries WhatsApp
   and Call; a second pair in the band would duplicate it on the same screen */
@media (max-width: 899px) {
  .hero__actions { display: none; }
  .hero__copy { margin-bottom: 0; }
}

/* 8. Choose Your Door Type ---------------------------------------------------- */
.doors { padding-bottom: 0; }   /* ivory into ivory: the Doorways head brings the one --sy gap (after each card's reserved catalogue line) */
/* seven cards, all one size: four across on an 8-column track, the second row's three centred
   under the first (cards 5-7 start one card-half in). The <li> is the card's box; inside it the
   WhatsApp link (primary) fills the top, and a catalogue strip (secondary, a sibling link) closes
   the bottom where the series has one. Each card is two rows of a subgrid, so every strip in a row
   is one height (a label that wraps lifts its neighbours' names with it), and a card without a
   catalogue spans both rows with its art: no empty slot, and the row bottoms line up */
.door-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--g); margin: 0; padding: 0; }
.door-card {
  --focus: var(--brass-2);
  grid-column: span 2; grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 0; scroll-margin-top: 96px;
  border-radius: var(--r); color: var(--ivory);
  background: #17120E;   /* the art's outer colour, so the strip reads as the same card */
  box-shadow: 0 1px 2px rgba(26, 22, 19, 0.08), 0 18px 34px -24px rgba(26, 22, 19, 0.55);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.door-card:nth-child(5) { grid-column: 2 / span 2; }
.door-card__link {
  position: relative; display: block; align-self: stretch; justify-self: stretch; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r);   /* both stretched: the ratio sets the row, never the width */
  color: var(--ivory); text-decoration: none; isolation: isolate;
  background: radial-gradient(70% 55% at 50% 38%, #4A3526 0%, #2A1D16 60%, #17120E 100%);
}
.door-card__link:not(:last-child) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.door-card__link:last-child { grid-row: 1 / -1; }
.door-card__link picture { display: contents; }   /* the img stays positioned against the link */
.door-card__img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
/* TEMPORARY: a flat door skin stands in until cat-*.jpg arrives — shown whole, above the name, in
   the card's top 4:5 so every door is one size even where a card has grown to its row's height */
.door-card__img[src*='images/doors/'] {
  inset: 0 0 auto; height: auto; aspect-ratio: 4 / 5;
  object-fit: contain; object-position: 50% 0; padding: 8% 0 26%;
  filter: drop-shadow(10px 16px 18px rgba(0, 0, 0, 0.55));
}
.door-card__shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, rgba(12, 9, 7, 0.88) 0%, rgba(12, 9, 7, 0.45) 26%, transparent 52%);
  transition: opacity 0.6s var(--ease);
}
.door-card__shade::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12, 9, 7, 0.5), rgba(12, 9, 7, 0.1)); opacity: 0; transition: opacity 0.6s var(--ease); }
.door-card__name {
  position: absolute; left: clamp(14px, 1.6vw, 22px); right: 14px; bottom: calc(clamp(14px, 1.6vw, 22px) + 48px);
  /* a product name, not a label: the heading face, title case, no tracking */
  font-family: var(--head); font-size: clamp(1rem, 0.9rem + 0.4vw, 1.3rem); font-weight: 900; letter-spacing: 0; line-height: 1.12;
}
.door-card__name span { display: block; }
.door-card__arrow {
  position: absolute; left: clamp(14px, 1.6vw, 22px); bottom: clamp(14px, 1.6vw, 22px);
  width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center;
  transition: transform 0.5s var(--ease), background-color 0.4s, color 0.4s;
}
.door-card__arrow svg { width: 18px; height: 18px; }
/* both actions ring inside the card, in brass on the dark, so it is plain which one has focus */
.door-card__link:focus-visible, .door-card__pdf:focus-visible { outline-offset: -4px; }
/* the catalogue: the card's second action, a strip closing the card under a hairline. Quieter than
   the WhatsApp card above it; page count and size stay in the label, for people on mobile data */
.door-card__pdf {
  display: flex; align-items: center; flex-wrap: wrap; column-gap: 8px; min-height: 48px; padding: 6px clamp(14px, 1.6vw, 22px);
  border-top: 1px solid rgba(243, 239, 231, 0.14); border-radius: 0 0 var(--r) var(--r);
  font-size: 0.85rem; font-weight: 600; line-height: 1.3; color: var(--ivory); text-decoration: none;
  transition: background-color 0.3s;
}
.door-card__pdf > span:first-of-type { text-decoration: underline; text-decoration-color: rgba(243, 239, 231, 0.35); text-underline-offset: 4px; transition: text-decoration-color 0.3s; }
.door-card__pdf svg { width: 18px; height: 18px; flex: none; color: var(--brass-2); }
.door-card__pdf-meta { font-weight: 500; color: var(--muted-light); }
.door-card__pdf-meta::before { content: '·'; margin-right: 8px; }
@media (hover: hover) and (pointer: fine) {
  .door-card__pdf:hover { background-color: rgba(243, 239, 231, 0.06); }
  .door-card__pdf:hover > span:first-of-type { text-decoration-color: currentColor; }
}
.door-card__link:focus-visible .door-card__arrow { transform: translateX(6px); }
@media (hover: hover) and (pointer: fine) {
  /* hovering the WhatsApp part lifts the whole card; the catalogue strip only lightens */
  .door-card:has(.door-card__link:hover) { transform: translateY(-8px); box-shadow: 0 2px 4px rgba(26, 22, 19, 0.08), 0 30px 46px -26px rgba(26, 22, 19, 0.6); }
  .door-card__link:hover .door-card__img { transform: scale(1.04); }
  .door-card__link:hover .door-card__shade::after { opacity: 1; }
  .door-card__link:hover .door-card__arrow { transform: translateX(6px); background: var(--ivory); color: var(--ink); }
}
@media (max-width: 767px) {
  .door-card, .door-card:nth-child(5) { grid-column: span 4; }
  .door-card:nth-child(7) { grid-column: 3 / span 4; }
}
/* compact cards (under 1280px the cards are 150-220px wide): the name shares the bottom row with the
   arrow and the door stops above it. Stacked name-over-arrow put the name mid-door, where Dhoom's
   white inlay dropped it to 1.7:1 at 768px */
@media (max-width: 1279px) {
  .door-card__img[src*='images/doors/'] { padding: 6% 0 31%; }   /* the door stops above the two-line name */
  /* sized to the card itself: "Lamination" is 6.1em wide in Archivo Black, and must fit the card minus the arrow's lane (64px) */
  .door-card__link { container-type: inline-size; }
  .door-card__name {
    left: 12px; right: 52px; bottom: 14px;
    font-size: clamp(0.95rem, 0.8rem + 0.8vw, 1.1rem);
    font-size: clamp(0.8rem, (100cqi - 64px) / 6.2, 1.1rem);
  }
  .door-card__arrow { left: auto; right: 10px; bottom: 12px; width: 34px; height: 34px; }
  /* two lines in a narrow card: "Catalogue", then the pages and size */
  .door-card__pdf { display: grid; grid-template-columns: auto 1fr; align-items: center; padding: 6px 12px; font-size: 0.8rem; line-height: 1.3; }
  .door-card__pdf-meta { grid-column: 2; }
  .door-card__pdf-meta::before { content: none; }
  .door-card__pdf-sep { display: block; height: 0; visibility: hidden; }   /* pages, then size, on their own lines */
}
@media (min-width: 768px) and (max-width: 1279px) {
  .door-card__name { font-size: clamp(0.8rem, (100cqi - 64px) / 6.2, 1.3rem); }
  .door-card__pdf { font-size: 0.85rem; }
}
/* the narrowest phones: a slimmer arrow gives the name 8px more lane */
@media (max-width: 359px) {
  .door-card__arrow { right: 8px; width: 30px; height: 30px; }
  .door-card__name { right: 44px; font-size: clamp(0.7rem, (100cqi - 56px) / 6.2, 1.1rem); }
}

/* 9. DOORWAYS — carried over unchanged from the previous build (hinged leaf,
   CSS room, six presets). Its heading's second line turns by colour only: Archivo Black has a
   single weight, so the old heavy/light split is gone. ------------------------------------------ */

/* 10b. Doorway — the hinged leaf the Doorways stage swings open to reveal the
   next design (JS builds it; CSS 3D only). */
.doorways { --swing: 850ms; --swing-ease: cubic-bezier(0.25, 0.75, 0.3, 1); }

.doorway { position: absolute; inset: var(--jamb) var(--jamb) 0; z-index: 3; pointer-events: none; }
/* perspective + the late fade live on this wrapper: an opacity animation on the
   leaf itself would flatten it and show the design through the door-back */
.doorway__swing { position: absolute; inset: 0; perspective: 1600px; perspective-origin: 50% 40%; transition: opacity 0.26s linear calc(var(--swing) - 0.26s); }
.doorway__behind { position: absolute; inset: 0; overflow: hidden; background: #1A1613; }
.doorway__behind img { width: 100%; height: 100%; object-fit: cover; }
.doorway__behind::after { /* same inner shade as the jamb opening */
  content: ''; position: absolute; inset: 0;
  box-shadow: inset 0 7px 9px -5px rgba(0, 0, 0, 0.7), inset 6px 0 7px -5px rgba(0, 0, 0, 0.6), inset -6px 0 7px -5px rgba(0, 0, 0, 0.6);
}
.doorway__shade, .doorway__spill, .doorway__cast { position: absolute; inset: 0; transition: opacity var(--swing) var(--swing-ease); }
.doorway__shade { background: #0B0908; opacity: 0.78; }
.doorway__spill { opacity: 0; mix-blend-mode: soft-light; background: radial-gradient(120% 70% at 60% 35%, rgba(255, 196, 120, 0.34), rgba(255, 176, 90, 0.08) 55%, transparent 80%); }
.doorway__cast { opacity: 0; background: linear-gradient(90deg, rgba(8, 6, 5, 0.62), rgba(8, 6, 5, 0.18) 28%, transparent 55%); }
.doorway--double .doorway__cast { background: linear-gradient(90deg, rgba(8, 6, 5, 0.5), transparent 30%, transparent 70%, rgba(8, 6, 5, 0.5)); }

.doorway__leaf {
  --open: -108deg; --t: 8px;
  position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
  transform-style: preserve-3d; transform-origin: left center; transform: rotateY(0deg);
  transition: transform var(--swing) var(--swing-ease);
  will-change: transform;
}
.doorway--double .doorway__leaf { width: 50%; }
.doorway__leaf--right { left: auto; right: 0; transform-origin: right center; --open: 108deg; }
.doorway__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.doorway__front { background-color: #2A1D16; background-repeat: no-repeat; background-size: 100% 100%; }
.doorway--double .doorway__front { background-size: 200% 100%; }
.doorway__leaf--right .doorway__front { background-position: 100% 0; }
/* front face darkens as it turns away from the light */
.doorway__front::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.55)); opacity: 0; transition: opacity var(--swing) var(--swing-ease); }
.doorway__leaf--right .doorway__front::after { background: linear-gradient(270deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.55)); }
/* plain door-back — never a mirrored design */
.doorway__back {
  transform: rotateY(180deg) translateZ(var(--t));
  background:
    linear-gradient(90deg, rgba(255, 226, 190, 0.1), transparent 30%, rgba(0, 0, 0, 0.35)),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.07) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #4A3325, #35251B 60%, #2A1D16);
  box-shadow: inset 0 0 0 9px rgba(0, 0, 0, 0.12), inset 0 0 0 10px rgba(255, 230, 200, 0.07);
}
/* edge thickness on the free edge — the side that turns toward you */
.doorway__edge { position: absolute; top: 0; bottom: 0; right: 0; width: var(--t); transform-origin: right center; transform: rotateY(-90deg); background: linear-gradient(90deg, #6B4A33, #4A3325); }
.doorway__leaf--right .doorway__edge { right: auto; left: 0; transform-origin: left center; transform: rotateY(90deg); }

.doorway.is-open .doorway__leaf { transform: rotateY(var(--open)); }
.doorway.is-open .doorway__swing { opacity: 0; }
.doorway.is-open .doorway__shade { opacity: 0; }
.doorway.is-open .doorway__spill { opacity: 1; }
.doorway.is-open .doorway__cast { opacity: 1; }
.doorway.is-open .doorway__front::after { opacity: 1; }
/* reduced motion: no swing, a plain crossfade */
.doorway--fade .doorway__swing { transition: opacity 0.45s ease; }
.doorway--fade.is-open .doorway__leaf { transform: none; }
.doorway--fade .doorway__shade, .doorway--fade .doorway__spill, .doorway--fade .doorway__cast { display: none; }

/* 10c. The room — one architecture, used twice: the Doorways stage and the
   Signature section. Pure gradients: a wall that falls into shadow, a floor
   split off by a hard seam, a recessed opening, one warm light, the door's
   reflection and contact shadow. Each preset is a set of custom properties.
   The light comes from the upper left, so shadows fall to the right. Walls
   stay muted so the door is the brightest thing. */
.stage {
  --sh: clamp(560px, 90svh, 960px);            /* stage height */
  --fh: calc(var(--sh) * 0.15);                /* floor band */
  --dh: calc(var(--sh) * 0.72);                /* door leaf height: the door commands the frame */
  --dw: calc(var(--dh) * 480 / 1067);          /* door leaf width, the artwork's ratio */
  --jamb: clamp(6px, calc(var(--dw) * 0.035), 10px);
  --rv: calc(var(--dw) * 0.07);                /* reveal: the wall's thickness */
  --cw: calc(var(--dw) * 0.1);                 /* architrave */
  --rk: 0.3;                                   /* reflection length, of the door height */
}
/* where the fixed CTA bar shows, the room (stage + .doorways__bar strip) fits exactly between the
   header and that bar, so the design label is never under it. --strip is the strip's measured
   height (89px on phones, 80px from 768); change it if the strip's content changes. */
@media (max-width: 899px) {
  .stage { --strip: 80px; --sh: clamp(320px, calc(100svh - var(--header-h) - var(--bar-h) - var(--strip)), 960px); }
}
/* phones: a smaller share for the door, so wall shows above the frame and the floor has room for
   the reflection and contact shadow; the fitted stage is taller than before, so the door keeps its size */
@media (max-width: 767px) {
  .stage { --strip: 89px; --sh: clamp(320px, calc(100svh - var(--header-h) - var(--bar-h) - var(--strip)), 720px); --dh: calc(var(--sh) * 0.66); --fh: calc(var(--sh) * 0.19); --rk: 0.24; }
}

.doorways { position: relative; background: var(--ivory); color: var(--text-dark); --scene-t: 900ms; }
.doorways__head { padding-top: var(--sy); padding-bottom: var(--head-gap); margin-bottom: 0; }   /* a .sec-head: its gap is padding, so the ivory runs down to the room */
.doorways__room { position: relative; background: var(--ink); color: var(--text-light); overflow: hidden; }
.doorways__stage { position: relative; height: var(--sh); overflow: hidden; isolation: isolate; contain: paint; }

/* scene presets ------------------------------------------------------------ */
[data-preset] {
  --wl: #D6C9B3; --wm: #A09280; --wd: #2B2520;   /* wall: lit / mid / shadow */
  --lc: 255 212 158; --glow: 0.34;               /* light colour (rgb) + strength */
  --lx: 30%; --ly: 20%;                          /* light position on the wall */
  --fn: #735641; --ff: #0D0A08;                  /* floor near the door / toward the viewer */
  --pool: 0.28; --vig: 0.72; --shade: 0.5; --refl: 0.13;
  --tex: repeating-linear-gradient(97deg, rgb(255 255 255 / 0.018) 0 1px, transparent 1px 5px), repeating-linear-gradient(8deg, rgb(0 0 0 / 0.025) 0 2px, transparent 2px 7px);
}
[data-preset='walnut'] {
  --wl: #54402F; --wm: #2E231B; --wd: #0D0907;
  --lc: 255 196 128; --glow: 0.24;
  --fn: #4A423B; --ff: #0A0908; --pool: 0.24; --vig: 0.78; --shade: 0.62; --refl: 0.12;
  --tex: repeating-linear-gradient(90deg, rgb(0 0 0 / 0.22) 0 2px, rgb(255 220 180 / 0.05) 2px 3px, transparent 3px 8.5%), repeating-linear-gradient(90deg, rgb(0 0 0 / 0.05) 0 1px, transparent 1px 5px);
}
[data-preset='stone'] {
  --wl: #A6A49E; --wm: #686764; --wd: #151618;
  --lc: 255 234 206; --glow: 0.22;
  --fn: #4F4D4A; --ff: #0B0B0C; --pool: 0.22; --vig: 0.7; --shade: 0.55; --refl: 0.15;
  --tex: repeating-linear-gradient(0deg, rgb(0 0 0 / 0.05) 0 1px, transparent 1px 11%), repeating-linear-gradient(90deg, rgb(255 255 255 / 0.03) 0 1px, transparent 1px 3px);
}
[data-preset='sage'] {
  --wl: #A0AA93; --wm: #687260; --wd: #141812;
  --lc: 255 218 170; --glow: 0.3;
  --fn: #6A5542; --ff: #0C0A08; --pool: 0.28; --vig: 0.72; --shade: 0.5; --refl: 0.13;
}
[data-preset='charcoal'] {
  --wl: #57524D; --wm: #282624; --wd: #090909;
  --lc: 255 170 88; --glow: 0.46;
  --fn: #3A2F27; --ff: #070605; --pool: 0.4; --vig: 0.8; --shade: 0.7; --refl: 0.15;
}
[data-preset='clay'] {
  --wl: #B69883; --wm: #7A6050; --wd: #1D1511;
  --lc: 255 204 146; --glow: 0.3;
  --fn: #4D392D; --ff: #0B0807; --pool: 0.28; --vig: 0.74; --shade: 0.55; --refl: 0.12;
}

/* a scene layer: wall, floor, recessed opening ------------------------------ */
.dw-scene { position: absolute; inset: 0; z-index: 1; background: var(--wd); }
.dw-scene:not(.is-current) { opacity: 0; }
.dw-scene.is-incoming { z-index: 2; opacity: 0; transition: opacity var(--scene-t) var(--swing-ease); }
.dw-scene.is-incoming.is-in { opacity: 1; }
/* the wide vignette, over wall and floor alike */
.dw-scene::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 78% 82% at 50% 52%, transparent 42%, rgb(0 0 0 / var(--vig)) 100%); }
.dw-scene__wall {
  position: absolute; inset: 0 0 var(--fh) 0;
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.5), transparent 32%, transparent 90%, rgb(0 0 0 / 0.28)),  /* falloff to the ceiling, occlusion at the corner */
    radial-gradient(ellipse 42% 60% at var(--lx) var(--ly), rgb(var(--lc) / var(--glow)), transparent 72%),  /* the warm wash */
    var(--tex, none),
    radial-gradient(ellipse 80% 110% at var(--lx) var(--ly), var(--wl) 0%, var(--wm) 36%, var(--wd) 82%);
}
.dw-scene__floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--fh);
  background:
    radial-gradient(ellipse 13% 120% at 47% 0, rgb(var(--lc) / var(--pool)), rgb(var(--lc) / calc(var(--pool) * 0.3)) 45%, transparent 75%),  /* the pool in front of the door */
    radial-gradient(ellipse 60% 120% at var(--lx) 0, rgb(var(--lc) / calc(var(--pool) * 0.4)), transparent 70%),
    linear-gradient(180deg, var(--fn), var(--ff) 88%);
}
/* the seam: a crisp dark line, then a little occlusion onto the floor */
.dw-scene__floor::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgb(0 0 0 / 0.72); box-shadow: 0 1px 0 rgb(255 255 255 / 0.04); }
.dw-scene__floor::after { content: ''; position: absolute; left: 0; right: 0; top: 2px; height: 16%; background: linear-gradient(rgb(0 0 0 / 0.3), transparent); }
/* architrave + reveal: mitred borders in translucent tints, so the moulding
   and the wall's thickness pick up the wall's own light and falloff */
.dw-scene__casing {
  position: absolute; left: 50%; bottom: var(--fh); transform: translateX(-50%);
  width: calc(var(--dw) + 2 * (var(--jamb) + var(--rv) + var(--cw)));
  height: calc(var(--dh) + var(--jamb) + var(--rv) + var(--cw));
  border: var(--cw) solid; border-bottom: 0;
  border-color: rgb(255 255 255 / 0.1) rgb(0 0 0 / 0.2) transparent rgb(255 244 228 / 0.14);
  box-shadow: calc(var(--dw) * 0.14) calc(var(--dw) * 0.04) calc(var(--dw) * 0.26) calc(var(--dw) * -0.04) rgb(0 0 0 / var(--shade)), 0 0 0 1px rgb(0 0 0 / 0.16);
}
.dw-scene__casing::before { /* a thin highlight along the moulding's outer lit edge */
  content: ''; position: absolute; top: calc(-1 * var(--cw)); bottom: 0; left: calc(-1 * var(--cw)); width: 1px; background: rgb(255 255 255 / 0.14);
}
.dw-scene__reveal {
  position: absolute; inset: 0;
  border: var(--rv) solid; border-bottom: 0;
  border-color: rgb(0 0 0 / 0.78) rgb(0 0 0 / 0.3) transparent rgb(0 0 0 / 0.66);
  background: #080706; background-clip: padding-box;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.3);
}

/* the door: walnut jamb in the reveal, leaf, rim light, reflection ----------- */
.dw-door {
  position: absolute; z-index: 5; left: 50%; bottom: var(--fh); transform: translateX(-50%);
  width: calc(var(--dw) + 2 * var(--jamb));
}
.dw-jamb {
  position: relative; display: block; padding: var(--jamb) var(--jamb) 0;
  background: linear-gradient(90deg, #160F0B, #3B291E 22%, #2A1D16 50%, #3B291E 78%, #160F0B);
  box-shadow: calc(var(--dw) * 0.05) 0 calc(var(--dw) * 0.08) calc(var(--dw) * -0.03) rgb(0 0 0 / 0.7), inset 0 1px 0 rgb(255 236 205 / 0.12);
}
.dw-door__img { display: block; width: var(--dw); height: var(--dh); object-fit: cover; }
.dw-jamb::after { /* the opening's own shade, so the door sits inside the frame */
  content: ''; position: absolute; inset: var(--jamb) var(--jamb) 0; pointer-events: none; z-index: 2;
  box-shadow: inset 0 7px 9px -5px rgb(0 0 0 / 0.7), inset 6px 0 7px -5px rgb(0 0 0 / 0.55), inset -6px 0 7px -5px rgb(0 0 0 / 0.6);
}
/* warm rim on the lit (left) edge, and a gentle falloff away from the light */
.dw-rim {
  position: absolute; inset: var(--jamb) var(--jamb) 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(255 206 150 / 0.3), rgb(255 206 150 / 0.06) 5%, transparent 18%, transparent 70%, rgb(0 0 0 / 0.16)),
    linear-gradient(180deg, transparent 70%, rgb(0 0 0 / 0.14));
  mix-blend-mode: soft-light;
}
.dw-jamb::before { /* warm spill left on the new door after a reveal; fades out */
  content: ''; position: absolute; inset: var(--jamb) var(--jamb) 0; pointer-events: none; z-index: 1; opacity: 0;
  background: radial-gradient(120% 70% at 60% 35%, rgb(255 196 120 / 0.34), rgb(255 176 90 / 0.08) 55%, transparent 80%);
  mix-blend-mode: soft-light; transition: opacity 0.9s ease;
}
.dw-jamb.is-lit::before { opacity: 1; transition: none; }
.dw-jamb.is-opening .dw-door__img, .dw-jamb.is-opening .dw-rim { visibility: hidden; }
.dw-door__img { transition: filter 0.2s ease; }
.dw-jamb:has(.dw-open:active) .dw-door__img { filter: brightness(1.08); }
.dw-open { position: absolute; inset: var(--jamb) var(--jamb) 0; z-index: 4; display: block; background: none; border: 0; padding: 0; cursor: pointer; outline: 2px solid transparent; }
.dw-open:focus-visible { box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--ivory); }
/* floor reflection: a static blurred, mirrored copy that fades into the floor */
.dw-reflect {
  position: absolute; top: 100%; left: 0; right: 0; height: calc(var(--dh) * var(--rk)); overflow: hidden; pointer-events: none;
  opacity: var(--refl); transition: opacity var(--scene-t) var(--swing-ease);
  -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0.9), transparent 62%); mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0.9), transparent 62%);
}
.dw-reflect::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #160F0B, #3B291E 22%, #2A1D16 50%, #3B291E 78%, #160F0B); filter: blur(5px); }
.dw-reflect img {
  position: absolute; left: var(--jamb); width: var(--dw); top: calc(-1 * var(--dh)); height: var(--dh); object-fit: cover;
  transform-origin: 50% 100%; transform: scaleY(calc(-1 * var(--rk))); filter: blur(5px);
  opacity: 0; transition: opacity var(--swing) var(--swing-ease);
}
.dw-reflect img.is-on { opacity: 1; }
/* contact shadow: what keeps it standing on the floor */
.dw-contact { position: absolute; left: -6%; right: -6%; top: calc(100% - 5px); height: 12px; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgb(0 0 0 / 0.78), rgb(0 0 0 / 0.3) 60%, transparent 76%); }

/* wall annotation: design + series on the shadow (right) side, labelled the way
   a drawing is — small caps, wide tracking, a hairline leader toward the door.
   It starts clear of the casing's cast shadow; the swing stays on the hinge side.
   Shown only where the wall is wide enough; otherwise the bar below carries it. */
.dw-note { display: none; }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .dw-note {
    display: flex; align-items: center; gap: 14px; margin: 0;
    position: absolute; z-index: 4;
    left: calc(50% + var(--dw) * 1.07 + var(--jamb));
    bottom: calc(var(--fh) + var(--dh) * 0.6);
    color: var(--ivory);
  }
  .doorways .doorways__now { display: none; }
}
.dw-note::before { /* a very soft local scrim so the type never depends on the wall */
  content: ''; position: absolute; z-index: -1; inset: -64px -90px -64px -40px; pointer-events: none;
  background: radial-gradient(closest-side, rgb(8 6 5 / 0.26), rgb(8 6 5 / 0.17) 45%, rgb(8 6 5 / 0.06) 75%, transparent);
}
.dw-note__lead { position: relative; flex: none; width: calc(var(--dw) * 0.26); height: 1px; background: rgb(243 239 231 / 0.62); }
.dw-note__lead::before { content: ''; position: absolute; left: 0; top: -3px; width: 1px; height: 7px; background: inherit; }
.dw-note__text { display: grid; gap: 7px; }
.dw-note__row { display: flex; align-items: baseline; gap: 12px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.dw-note__k { min-width: 4.6em; font-weight: 500; color: rgb(243 239 231 / 0.78); }
.dw-note__code { font-size: 0.86rem; letter-spacing: 0.14em; }

/* caption: its own dark band, never on the gradient */
.doorways__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 40px; padding-top: 22px; padding-bottom: clamp(32px, 3vw, 48px); }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) { .doorways__bar { justify-content: center; } }
.doorways__now { display: flex; align-items: baseline; gap: 16px; }
.doorways__code { font-family: var(--head); font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.7rem); font-weight: 900; line-height: 1; }
.doorways__series { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); }
.doorways__hint { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font-size: 0.85rem; color: var(--muted-light); }
.doorways__count { color: var(--text-light); }
.doorways__all { color: var(--muted-light); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(243 239 231 / 0.35); }
.doorways__all:hover { color: var(--text-light); }

@media (max-width: 767px) { .doorways__bar { flex-direction: column; gap: 8px; padding-top: 16px; padding-bottom: 20px; } }
@media (prefers-reduced-motion: reduce) {
  .doorways { --scene-t: 450ms; --swing: 450ms; --swing-ease: ease; }
}

/* 10. How It Works — dark, four steps joined by one line --------------------- */
.how { background: var(--night); color: var(--text-light); }

/* ambient lamp light on the two dark bands (How It Works, footer): one soft warm glow, painted
   once, that drifts across the band and back over 48 s, like a lamp being carried past. Only
   transform animates (compositor). It runs only while JS marks the band .is-lit, i.e. on
   screen, tab visible and no reduced-motion preference; otherwise it holds still. The footer
   starts half a cycle out of step so the two never look synchronised */
.how, .site-footer { isolation: isolate; overflow: hidden; }
.how::before, .site-footer::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  top: -35%; bottom: -35%; left: 20%; width: 60%;
  background: radial-gradient(closest-side, rgba(214, 168, 104, 0.1), rgba(214, 168, 104, 0.04) 55%, rgba(214, 168, 104, 0));
  transform: translate3d(-48%, 0, 0);
  animation: lamp-drift 48s ease-in-out infinite alternate paused;
}
.site-footer::before { animation-delay: -24s; }
.how.is-lit::before, .site-footer.is-lit::before { animation-play-state: running; }
@keyframes lamp-drift { from { transform: translate3d(-48%, 0, 0); } to { transform: translate3d(48%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .how::before, .site-footer::before { animation: none; } }
.steps-wrap { --icon: 84px; position: relative; }
.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); margin: 0; padding: 0; }
.steps__line { position: absolute; top: calc(var(--icon) / 2); left: 12.5%; right: 12.5%; height: 1px; }
.steps__line span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(201, 165, 108, 0.25), rgba(201, 165, 108, 0.7), rgba(201, 165, 108, 0.25)); transform-origin: left center; }
.step { display: grid; justify-items: center; align-content: start; text-align: center; gap: 6px; }
.step__icon {
  position: relative; width: var(--icon); height: var(--icon); border-radius: 50%; margin-bottom: 14px;
  display: grid; place-items: center; color: #3A2618;
  background: radial-gradient(circle at 34% 28%, #FBF3E6 0%, #EAD7BB 55%, #D2B690 100%);
  box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.7), 0 0 0 6px var(--night), 0 0 0 7px rgba(201, 165, 108, 0.22), inset 0 -4px 8px rgba(120, 80, 40, 0.25), inset 0 2px 1px rgba(255, 255, 255, 0.6);
}
.step__icon svg { width: 34px; height: 34px; }
.step__num { font-family: var(--head); font-size: 1.25rem; font-weight: 900; line-height: 1; color: var(--brass-2); }
.step__title { font-size: 0.92rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.35; }
.step__text { font-size: 0.9rem; color: var(--muted-light); line-height: 1.45; text-wrap: balance; }
@media (max-width: 767px) {
  .steps-wrap { --icon: 64px; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .steps__line { top: calc(var(--icon) / 2); bottom: calc(var(--icon) / 2); left: calc(var(--icon) / 2); right: auto; width: 1px; height: auto; }
  .steps__line span { background: linear-gradient(180deg, rgba(201, 165, 108, 0.3), rgba(201, 165, 108, 0.7), rgba(201, 165, 108, 0.3)); transform-origin: center top; }
  .step { grid-template-columns: var(--icon) minmax(0, 1fr); column-gap: 20px; row-gap: 2px; justify-items: start; text-align: left; align-items: center; }
  .step__icon { grid-row: 1 / 4; margin: 0; }
  .step__icon svg { width: 28px; height: 28px; }
  .step__num { font-size: 1.3rem; }
}

/* 11. Contact — three large buttons ----------------------------------------- */
.contact__inner { display: grid; justify-items: center; }
.contact__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.cbtn {
  display: inline-flex; align-items: center; gap: 16px; min-height: 80px; min-width: 260px;
  padding: 16px 28px 16px 22px; border-radius: var(--r); text-align: left;
  background: var(--tan); color: var(--ink); text-decoration: none; line-height: 1.25;
  transition: transform 0.45s var(--ease), background-color 0.35s, box-shadow 0.45s var(--ease);
}
.cbtn__icon { width: 30px; height: 30px; color: var(--walnut-2); }
.cbtn__text { display: grid; gap: 3px; }
.cbtn__k { font-size: 1rem; font-weight: 600; }
.cbtn__v { font-size: 0.88rem; color: var(--muted-dark); }
.cbtn--wa { background: var(--wa); color: #fff; min-width: 300px; min-height: 88px; box-shadow: 0 18px 34px -18px rgba(10, 70, 35, 0.85); }
.cbtn--wa .cbtn__icon { color: #fff; width: 36px; height: 36px; }
.cbtn--wa .cbtn__k { font-size: 1.12rem; }
.cbtn--wa .cbtn__v { color: rgba(255, 255, 255, 0.88); }
.cbtn--static { background: transparent; box-shadow: inset 0 0 0 1px rgba(26, 22, 19, 0.16); }
@media (hover: hover) and (pointer: fine) {
  a.cbtn:hover { transform: translateY(-3px); }
  .cbtn--wa:hover { background: var(--wa-2); }
  a.cbtn:not(.cbtn--wa):hover { background: #E1D1BA; }
}
@media (max-width: 767px) {
  .contact__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 420px; gap: 12px; }
  .cbtn, .cbtn--wa { min-width: 0; }
}

/* 12. Footer ----------------------------------------------------------------- */
/* three columns, one heading style, one link style, then a bottom bar on a hairline. Phones:
   Quick Links and Our Doors side by side, Contact full width under them. From 768px: all three in
   one row, spread edge to edge with equal gaps (Quick Links on the container's left edge, Contact
   on its right), the same edges as the copyright and the legal links below */
.site-footer { position: relative; background: var(--night); color: var(--text-light); padding-block: clamp(48px, 5vw, 72px) 20px; }
.site-footer__grid { row-gap: 32px; padding-bottom: clamp(32px, 3.5vw, 48px); }
.site-footer__col { min-width: 0; }
.site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer__grid > * { grid-column: auto; }
.site-footer__grid > :nth-child(3) { grid-column: 1 / -1; }   /* the email needs the width to stay on one line */
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: repeat(3, auto); justify-content: space-between; column-gap: var(--g); }
  .site-footer__grid > :nth-child(3) { grid-column: auto; }
}
/* Our Doors: one column on phones and tablets; from 1024px its seven links run in two columns
   (down, then across) so the longest list doesn't set the footer's height on its own */
@media (min-width: 1024px) {
  .f-list--split { grid-template-columns: repeat(2, max-content); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: clamp(28px, 3vw, 48px); }
}
.site-footer__heading {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600; line-height: 1.2;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-2);
  margin-bottom: 14px;
}
.site-footer__col ul { margin: 0; padding: 0; }
.f-list { display: grid; justify-items: start; }

/* footer links: muted until hovered, then ivory with a hairline drawn in under the word */
.f-link {
  position: relative; display: inline-flex; align-items: center; min-height: 32px; padding: 0;
  color: var(--muted-light); text-decoration: none; overflow-wrap: anywhere; font-size: 0.95rem; line-height: 1.5;
  background: linear-gradient(currentColor, currentColor) left calc(50% + 0.8em) / 0 1px no-repeat;
  transition: background-size 0.45s var(--ease), color 0.25s;
}
.f-link:focus-visible { background-size: 100% 1px; color: var(--ivory); }
@media (hover: hover) and (pointer: fine) { .f-link:hover { background-size: 100% 1px; color: var(--ivory); } }
@media (pointer: coarse) { .f-link { min-height: 44px; } }

/* contact rows: every icon on one 18px column, centred on the first line of its text */
.f-contact { display: grid; }
.f-contact li { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 14px; align-items: start; min-height: 32px; padding-block: 5px; font-size: 0.95rem; line-height: 1.5; color: var(--muted-light); }
.f-contact .f-link { min-height: 0; }
.f-contact__icon { width: 18px; height: 18px; margin-top: calc((0.95rem * 1.5 - 18px) / 2); color: var(--brass-2); }
/* touch: the link itself is the 44px target, not just its row */
@media (pointer: coarse) {
  .f-contact li { min-height: 44px; padding-block: 0; align-items: center; }
  .f-contact .f-link { min-height: 44px; }
  .f-contact__icon { margin-top: 0; }
}

.follow { margin-top: 28px; }
.follow__list { display: flex !important; gap: 8px; }
.follow__link { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(243, 239, 231, 0.3); color: var(--ivory); transition: background-color 0.3s, color 0.3s; }
.follow__link svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .follow__link:hover { background: var(--ivory); color: var(--ink); } }

.site-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 32px;
  padding-top: 16px; border-top: 1px solid rgba(243, 239, 231, 0.14);
  font-size: 0.85rem; color: var(--muted-light);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 0; padding: 0; }
.site-footer__bottom .f-link { font-size: 0.85rem; }
.site-footer__bottom .text-button:hover { text-decoration: none; }   /* the hairline is the underline */

/* phones: copyright, then the legal links under it (they don't fit one line) */
@media (max-width: 479px) {
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 0; }
}

/* 13. Mobile CTA bar ------------------------------------------------------------ */
.cta-bar { display: none; }
@media (max-width: 899px) {
  .cta-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    height: var(--bar-h); padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(23, 19, 15, 0.98); box-shadow: 0 -1px 0 rgba(243, 239, 231, 0.08), 0 -10px 30px -12px rgba(0, 0, 0, 0.5);
  }
}
.cta-bar__btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border-radius: 8px;
  font-size: 0.86rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none;
  background: var(--ivory); color: var(--ink);
}
.cta-bar__btn svg { width: 22px; height: 22px; }
.cta-bar__btn--wa { background: var(--wa); color: #fff; }

/* 14. Dialogs ------------------------------------------------------------------ */
dialog.legal { max-width: min(40rem, calc(100vw - 32px)); width: 100%; padding: 0; border: 0; background: var(--ivory); color: var(--text-dark); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.6); }
dialog.legal::backdrop { background: rgba(17, 16, 15, 0.72); }
.legal__inner { position: relative; padding: clamp(32px, 5vw, 56px); display: grid; gap: 14px; }
.legal__title { font-family: var(--head); font-size: 1.6rem; font-weight: 900; letter-spacing: -0.01em; padding-right: 48px; }
.legal .placeholder-tag { justify-self: start; margin: 0; }
.dialog-x { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; border: 0; background: none; }

/* 15. Keyframes ------------------------------------------------------------- */
@keyframes fade-up { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* 16. Reduced motion — keep content and simple fades, drop movement --------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__copy, .hero__actions { animation: fade-in 0.5s ease both; }
  /* no zoom, no crossfade: slides change instantly; JS still autoplays, holding each 7.5 s */
  .hero__slide { transition: none; }
  .hero__img, .hero__slide.is-active .hero__img, .hero__slide.is-leaving .hero__img { animation: none; transform: none; }
  .door-card, .door-card__link, .door-card__img, .door-card__arrow, .cta, .cbtn { transition: background-color 0.3s, opacity 0.3s; transform: none !important; }
  .menu-overlay__list a { transform: none; transition: opacity 0.3s ease; }
}