/* ==========================================================================
   TOKENS
   Reference: furniture storefront (condensed caps, notched photo corners,
   pill buttons with an arrow disc). Its lime accent is replaced by the D&M
   logo brown, sampled from the logo file: #977224.
   Colour strategy: restrained neutrals + one committed accent.
   Page is a neutral grey field (chroma 0, deliberately not cream); content
   sits on near-white sheets.
   Contrast (measured):
     ink on panel        15.9:1
     ink-2 on panel       6.6:1
     brown on panel       4.4:1  LARGE / BOLD ONLY (buttons, big numbers)
     brown-deep on panel  6.1:1  brown used as small text
     white on brown       4.4:1  bold labels only; white on brown-deep 6.1:1
   Shape lock: sheets 32px, media 20px, everything you can press is a pill.
   ========================================================================== */
:root {
  --bg:         oklch(0.930 0 0);       /* #E8E8E8  page field */
  --panel:      oklch(0.990 0.001 90);  /* #FCFCFB  sheets */
  --tile:       oklch(0.955 0.001 90);  /* #F1F1F0  icon tiles, inputs */
  --ink:        oklch(0.215 0.006 80);  /* #1D1C1A */
  --ink-2:      oklch(0.470 0.006 80);  /* #5E5C58 */
  --line:       color-mix(in oklch, var(--ink) 13%, transparent);
  --brown:      oklch(0.565 0.105 80);  /* #977224  logo brown */
  --brown-deep: oklch(0.480 0.090 80);  /* #7D5D1B */
  --brown-fill: oklch(0.530 0.100 80);  /* #8A6820  button fill: logo brown nudged darker so white 16px labels pass 4.5:1 (5.0:1) */
  --brown-tint: oklch(0.955 0.020 85);  /* #F4EFE4  hover wash only, never a surface */
  --on-brown:   oklch(0.990 0.001 90);

  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --body:    "Archivo", system-ui, -apple-system, sans-serif;

  --r-sheet: 32px;
  --r-media: 20px;
  --notch:   22px;               /* inverted-corner radius on the photo tabs */

  --gut:  clamp(16px, 4vw, 56px);
  --wrap: 1360px;
  --sheet-gap: clamp(8px, 1vw, 14px);

  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-float: 150;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; overflow-x: hidden; } /* the off-canvas drawer must not widen the page */
body {
  margin: 0;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.125rem;           /* 18px base for an older audience */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { margin: 0; text-wrap: balance; }
ul { margin: 0; padding: 0; list-style: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--brown-deep); outline-offset: 3px; border-radius: 6px; }
.tnum { font-variant-numeric: tabular-nums; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

/* Display voice: Archivo at its narrowest width, caps. */
.display, .h2, .h3 {
  font-family: var(--display);
  font-stretch: 62.5%;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: -0.005em;
}
.h2 { font-size: clamp(2.25rem, 4.4vw, 3.75rem); line-height: 0.95; }
.h3 { font-size: clamp(1.35rem, 1.8vw, 1.6rem); line-height: 1; font-weight: 750; }
.lede { font-size: clamp(1.125rem, 1.5vw, 1.3rem); color: var(--ink-2); max-width: 62ch; }
.body { color: var(--ink-2); max-width: 66ch; }

/* ==========================================================================
   BUTTONS: pill + arrow disc, straight from the reference.
   Pressed state scales down on pointer-down (feedback on press, not release).
   ========================================================================== */
.btn {
  --h: 52px;
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--h); padding: 0 6px 0 22px;
  border-radius: 999px; border: 0;
  font: 700 1rem/1 var(--body); letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn__disc {
  display: grid; place-items: center;
  width: calc(var(--h) - 12px); height: calc(var(--h) - 12px);
  border-radius: 50%; margin-left: 8px; font-size: 1.1rem;
  transition: transform 260ms var(--ease-out);
}
.btn:hover .btn__disc { transform: rotate(45deg); }
.btn--brown { background: var(--brown-fill); color: var(--on-brown); }
.btn--brown .btn__disc { background: var(--on-brown); color: var(--brown-deep); }
.btn--brown:hover { background: var(--brown-deep); }
.btn--ink { background: var(--ink); color: var(--panel); }
.btn--ink .btn__disc { background: var(--panel); color: var(--ink); }
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--line .btn__disc { background: var(--ink); color: var(--panel); }
.btn--line:hover { background: var(--ink); color: var(--panel); }
.btn--line:hover .btn__disc { background: var(--panel); color: var(--ink); }
.btn--sm { --h: 44px; font-size: 0.9375rem; padding-left: 18px; }

.round {
  display: grid; place-items: center; width: 52px; height: 52px; flex: none;
  border-radius: 50%; border: 0; cursor: pointer; font-size: 1.25rem;
  background: var(--tile); color: var(--ink);
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease;
}
.round:hover { background: var(--ink); color: var(--panel); }
.round:active { transform: scale(0.94); }
.round--brown { background: var(--brown-fill); color: var(--on-brown); }
.round--brown:hover { background: var(--brown-deep); }
.round:disabled { opacity: 0.35; cursor: default; background: var(--tile); color: var(--ink); }

.tlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; text-decoration: none; color: var(--brown-deep);
  border-bottom: 1.5px solid currentColor; padding-bottom: 2px;
}
.tlink i { transition: transform 220ms var(--ease-out); }
.tlink:hover i { transform: translateX(4px); }

/* ==========================================================================
   NOTCH TABS
   The reference's signature: a label sitting in a bite taken out of the
   photo, with the photo's corner curving *inwards* around it. Each tab owns
   two pseudo-elements that draw those inverted corners in the tab colour.
   ========================================================================== */
.notched { position: relative; }
.tab {
  --tab-bg: var(--panel);
  position: absolute; z-index: 2;
  background: var(--tab-bg);
  padding: 14px 18px;
}
.tab::before, .tab::after {
  content: ""; position: absolute; width: var(--notch); height: var(--notch);
  pointer-events: none;
}
.tab--tl { top: -1px; left: -1px; border-bottom-right-radius: var(--notch); padding: 0 18px 14px 0; }
.tab--tl::before { left: 100%; top: 0; background: radial-gradient(circle at 100% 100%, transparent calc(var(--notch) - 0.5px), var(--tab-bg) var(--notch)); }
.tab--tl::after  { left: 0; top: 100%; background: radial-gradient(circle at 100% 100%, transparent calc(var(--notch) - 0.5px), var(--tab-bg) var(--notch)); }
.tab--tr { top: -1px; right: -1px; border-bottom-left-radius: var(--notch); padding: 0 0 14px 18px; }
.tab--tr::before { right: 100%; top: 0; background: radial-gradient(circle at 0 100%, transparent calc(var(--notch) - 0.5px), var(--tab-bg) var(--notch)); }
.tab--tr::after  { right: 0; top: 100%; background: radial-gradient(circle at 0 100%, transparent calc(var(--notch) - 0.5px), var(--tab-bg) var(--notch)); }
.tab--bl { bottom: -1px; left: -1px; border-top-right-radius: var(--notch); padding: 14px 18px 0 0; }
.tab--bl::before { left: 0; bottom: 100%; background: radial-gradient(circle at 100% 0, transparent calc(var(--notch) - 0.5px), var(--tab-bg) var(--notch)); }
.tab--bl::after  { left: 100%; bottom: 0; background: radial-gradient(circle at 100% 0, transparent calc(var(--notch) - 0.5px), var(--tab-bg) var(--notch)); }
.tab--br { bottom: -1px; right: -1px; border-top-left-radius: var(--notch); padding: 14px 0 0 18px; }
.tab--br::before { right: 0; bottom: 100%; background: radial-gradient(circle at 0 0, transparent calc(var(--notch) - 0.5px), var(--tab-bg) var(--notch)); }
.tab--br::after  { right: 100%; bottom: 0; background: radial-gradient(circle at 0 0, transparent calc(var(--notch) - 0.5px), var(--tab-bg) var(--notch)); }

/* Media frames: rounded photo with the image able to drift inside it. */
.frame { position: relative; overflow: hidden; border-radius: var(--r-media); background: var(--tile); }
.frame > img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   HEADER: translucent material, content scrolls beneath it.
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  isolation: isolate;
  transition: box-shadow 300ms ease;
}
/* The frosted material lives on a pseudo-element: backdrop-filter on the
   header itself would trap the fixed-position mobile drawer inside it. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in oklch, var(--panel) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}
.site-header[data-compact="true"] { box-shadow: 0 1px 0 var(--line), 0 10px 30px -18px rgb(29 28 26 / 0.35); }
.site-header__in { display: flex; align-items: center; gap: 24px; height: 76px; }
.brand { flex: none; display: block; }
.brand img { width: 104px; height: auto; }

.nav { margin-inline: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 10px 14px; border-radius: 999px;
  font-weight: 600; font-size: 0.98rem; text-decoration: none; white-space: nowrap;
  transition: background-color 200ms ease;
}
.nav__link i { font-size: 0.8rem; transition: transform 220ms var(--ease-out); }
.nav__link:hover, .nav__item:focus-within > .nav__link { background: var(--tile); }
.nav__link[aria-current="page"] { background: var(--ink); color: var(--panel); }

/* Dropdown panel: one card per menu, Origin listed as a second column,
   so every link from the old mega menu survives without fly-outs. */
.dd {
  position: absolute; top: calc(100% + 10px); left: 50%;
  min-width: 260px; padding: 12px;
  background: var(--panel); border-radius: 22px;
  box-shadow: 0 0 0 1px var(--line), 0 24px 48px -20px rgb(29 28 26 / 0.35);
  display: flex; gap: 8px;
  opacity: 0; visibility: hidden;
  transform: translate(-50%, -6px) scale(0.98); transform-origin: top center;
  transition: opacity 180ms ease, transform 260ms var(--ease-out), visibility 0s linear 260ms;
}
.dd::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; } /* hover bridge */
.nav__item:hover > .dd, .nav__item:focus-within > .dd {
  opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1);
  transition: opacity 180ms ease, transform 260ms var(--ease-out), visibility 0s;
}
.nav__item:hover > .nav__link i, .nav__item:focus-within > .nav__link i { transform: rotate(180deg); }
.dd__col { min-width: 230px; }
.dd__col + .dd__col { border-left: 1px solid var(--line); padding-left: 8px; }
.dd__label { display: block; padding: 8px 12px 4px; font-size: 0.8125rem; font-weight: 700; color: var(--ink-2); }
.dd a {
  display: block; padding: 9px 12px; border-radius: 12px;
  font-size: 0.95rem; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.dd a:hover { background: var(--brown-tint); color: var(--brown-deep); }

.header-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.phone i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tile); font-size: 1.1rem; }
.menu-toggle, .nav__close { display: none; }

@media (max-width: 1279px) { .phone span { display: none; } }
@media (max-width: 1079px) {
  .menu-toggle { display: grid; margin-left: auto; }
  .nav {
    position: fixed; inset: 0 0 0 auto; z-index: var(--z-drawer);
    width: min(420px, 100%); margin: 0; padding: 84px 24px 120px;
    background: var(--panel); overflow-y: auto;
    /* Closed = not rendered at all, so the off-canvas panel can never widen
       the page. allow-discrete keeps the slide in and out where supported. */
    display: none; transform: translateX(100%);
    transition: transform 420ms var(--ease-out), display 420ms allow-discrete;
    box-shadow: -30px 0 60px -30px rgb(29 28 26 / 0.4);
  }
  .nav[data-open="true"] { display: block; transform: none; }
  @starting-style { .nav[data-open="true"] { transform: translateX(100%); } }
  .nav__close { display: grid; position: absolute; top: 14px; right: 16px; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav__link { font-family: var(--display); font-stretch: 62.5%; text-transform: uppercase; font-size: 1.6rem; font-weight: 800; padding: 10px 4px; }
  .nav__link i { display: none; }
  .nav__link:hover, .nav__item:focus-within > .nav__link { background: none; }
  .nav__link[aria-current="page"] { background: none; color: var(--brown-deep); }
  .dd { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0 0 12px; flex-direction: column; gap: 0; min-width: 0; transition: none; }
  .dd::before { display: none; }
  .dd__col + .dd__col { border: 0; padding: 0; }
  .dd a { white-space: normal; padding: 8px 4px; color: var(--ink-2); }
  .header-actions .btn { display: none; }
  .drawer-cta { display: flex !important; }
}
@media (min-width: 1080px) { .drawer-cta { display: none !important; } }
.drawer-cta { position: sticky; bottom: -120px; margin-top: 24px; gap: 10px; flex-wrap: wrap; padding: 16px 0; background: var(--panel); }

.scrim {
  position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1);
  background: rgb(29 28 26 / 0.4); opacity: 0; visibility: hidden;
  transition: opacity 300ms ease, visibility 0s linear 300ms;
}
.scrim[data-open="true"] { opacity: 1; visibility: visible; transition: opacity 300ms ease, visibility 0s; }

/* ==========================================================================
   HERO: full bleed. Condensed headline with photographs set into the
   lines, then the photograph running edge to edge with notched corners.
   ========================================================================== */
.hero { background: var(--panel); padding-top: clamp(20px, 3.5vw, 44px); }
.hero__top { text-align: center; }
.hero__label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-stretch: 62.5%; text-transform: uppercase;
  font-size: 1.15rem; font-weight: 750; letter-spacing: 0.02em; color: var(--brown-deep);
}
.hero__label img { width: 42px; height: auto; }
.hero__title {
  margin: 14px auto 0;
  font-size: clamp(3rem, 6.4vw, 5.25rem);
  line-height: 0.92;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.hero__title .line__in { display: inline-flex; align-items: center; justify-content: center; gap: 0.18em; flex-wrap: wrap; }
.hl-img {
  display: inline-block; flex: none;
  width: 1.55em; height: 0.8em; border-radius: 999px; overflow: hidden;
  background: var(--tile);
}
.hl-img img { width: 100%; height: 100%; object-fit: cover; }
.hl-pill {
  display: inline-grid; place-items: center; flex: none;
  width: 1.5em; height: 0.8em; border-radius: 999px;
  box-shadow: inset 0 0 0 0.06em var(--ink);
  font-size: 1em;
}
.hl-pill i { font-size: 0.5em; }
.hero__sub { margin: 18px auto 0; max-width: 56ch; color: var(--ink-2); font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.hero__cta { margin-top: 24px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

.hero__media {
  position: relative; margin-top: clamp(28px, 4vw, 48px);
  height: clamp(440px, 68vh, 760px);
  overflow: hidden;
  clip-path: inset(0 0 0 0 round 0);
}
.hero__media > img { width: 100%; height: 115%; object-fit: cover; object-position: 50% 78%; }
.hero__media .tab { font-size: 0.95rem; }
.stat { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.stat b {
  font-family: var(--display); font-stretch: 62.5%; font-weight: 800;
  font-size: clamp(2.4rem, 3.6vw, 3.25rem); line-height: 0.9; color: var(--brown);
}
.stat span { font-weight: 600; line-height: 1.25; max-width: 13ch; }
.stat:hover span { text-decoration: underline; text-underline-offset: 3px; }
.where { display: inline-flex; align-items: center; gap: 10px; padding-top: 14px; font-weight: 600; line-height: 1.3; }
.where i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--tile); color: var(--brown-deep); }
.hero .tab--tl { padding-left: var(--gut); }
.hero .tab--tr { padding-right: var(--gut); }
.hero .tab--bl { padding-left: var(--gut); }
.hero .tab--br { padding-right: var(--gut); }

/* Supplier strip: logos only, as one slow band. */
.logos { background: var(--panel); padding: clamp(22px, 3vw, 36px) 0 clamp(26px, 3.4vw, 40px); overflow: hidden; }
.marquee { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover { animation-play-state: paused; }
.marquee__set { display: flex; align-items: center; gap: clamp(48px, 6vw, 88px); padding-right: clamp(48px, 6vw, 88px); }
.marquee__set img { height: 34px; width: auto; opacity: 0.85; }
.marquee__set img.is-tall { height: 46px; }
.wordmark {
  font-family: var(--display); font-weight: 800; font-size: 1.7rem; line-height: 1;
  color: color-mix(in oklch, var(--ink) 82%, transparent); white-space: nowrap;
}
.wordmark--wide { font-stretch: 112%; font-weight: 700; letter-spacing: 0.04em; font-size: 1.35rem; }
.wordmark--narrow { font-stretch: 62.5%; text-transform: uppercase; font-size: 1.9rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   SECTIONS
   Client rule: the rounded "background card" treatment is used on at most
   two sections (the glass-rooms band and the contact card). Every other
   section sits flat on the page, divided by a hairline that draws itself
   in as the section arrives (see motion).
   ========================================================================== */
main { padding-bottom: clamp(24px, 3vw, 40px); }
.sec { position: relative; padding-block: clamp(64px, 8vw, 120px); }
.sec--tight { padding-block: clamp(40px, 5vw, 72px); }
.sec::before {
  content: ""; position: absolute; top: 0; height: 1px; background: var(--line);
  left: max(var(--gut), calc((100% - var(--wrap)) / 2 + var(--gut)));
  right: max(var(--gut), calc((100% - var(--wrap)) / 2 + var(--gut)));
  transform: scaleX(var(--draw, 1)); transform-origin: 0 50%;
}
.sheet {
  position: relative;
  margin: clamp(24px, 3vw, 40px) var(--sheet-gap) 0;
  background: var(--tile);
  border-radius: var(--r-sheet);
  padding-block: clamp(56px, 7vw, 104px);
  transform-origin: 50% 0;
}
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 3.6vw, 48px); }
.sec-head__ctl { display: flex; gap: 10px; flex: none; }

/* INTRO */
.intro { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.intro .h2 { max-width: 20ch; font-size: clamp(2.1rem, 3.5vw, 3.1rem); }
.intro .body { margin-top: 24px; }
.intro__actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.intro__media { aspect-ratio: 4 / 5; }
.intro__media .tab { --tab-bg: var(--panel); }
.cap { font-size: 0.9375rem; font-weight: 500; color: var(--ink-2); line-height: 1.4; max-width: 24ch; }
.frame .tab--bl .cap { padding: 0 0 10px 6px; } /* clear the frame's rounded corner */

/* RANGE CAROUSEL: native scroll-snap does momentum on touch for free;
   mouse dragging is added in JS with Apple's momentum projection. */
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 24vw, 330px);
  gap: clamp(14px, 1.6vw, 22px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut);
  padding: 4px var(--gut) 8px; margin-inline: calc(var(--gut) * -1);
  scrollbar-width: none; cursor: grab;
}
.rail::-webkit-scrollbar { display: none; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail.is-dragging a { pointer-events: none; }
.card { scroll-snap-align: start; }
.card a { display: block; text-decoration: none; }
.card .frame { aspect-ratio: 4 / 5; }
.card .frame img { transition: transform 700ms var(--ease-out); }
.card a:hover .frame img { transform: scale(1.05); }
.card .tab--br { padding: 10px 0 0 10px; }
.card .round { width: 46px; height: 46px; font-size: 1.1rem; }
.card a:hover .round { background: var(--brown-fill); color: var(--on-brown); }
.card__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; }
.card__meta span { font-size: 0.9375rem; color: var(--ink-2); white-space: nowrap; }
.rail-wrap { overflow: hidden; }

/* CHOOSE US: one big photograph, headline in the notch. */
.feature { position: relative; height: clamp(440px, 62vw, 720px); border-radius: var(--r-media); }
.feature .frame { position: absolute; inset: 0; }
.feature .frame img { height: 118%; }
.feature .tab--tr { max-width: min(560px, 62%); text-align: right; }
.feature .tab--tr .h2 { padding-top: 2px; }
.feature .tab--bl { max-width: 360px; }
.feature .tab--bl .kick { font-family: var(--display); font-stretch: 62.5%; text-transform: uppercase; font-weight: 800; font-size: 1.35rem; color: var(--brown-deep); }
.feature__body { display: grid; grid-template-columns: 1fr auto; gap: clamp(24px, 4vw, 64px); align-items: end; margin-top: clamp(28px, 3.6vw, 44px); }
.feature__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* WHAT WE OFFER: the reference's category tiles. */
.cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(12px, 1.4vw, 20px); }
.cat a, .cat > div { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.cat__icon {
  display: grid; place-items: center; aspect-ratio: 1;
  border-radius: var(--r-media); background: var(--tile);
  font-size: clamp(3rem, 4.6vw, 4.25rem); color: var(--ink);
  transition: background-color 260ms ease, color 260ms ease;
}
.cat a:hover .cat__icon { background: var(--brown-fill); color: var(--on-brown); }
.cat .h3 { margin-top: 16px; text-align: center; }
.cat p { margin-top: 8px; font-size: 0.98rem; color: var(--ink-2); text-align: center; line-height: 1.45; }
.cat__more { margin-top: auto; padding-top: 12px; text-align: center; font-weight: 700; font-size: 0.95rem; color: var(--brown-deep); }
.cats__also { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; }

/* GALLERIES: the reference's collections grid. */
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.gal .frame { aspect-ratio: 4 / 3; }
.gal a { display: block; text-decoration: none; }
.gal .frame img { transition: transform 700ms var(--ease-out); }
.gal a:hover .frame img { transform: scale(1.05); }
.gal .tab--br { padding: 10px 0 0 10px; }
.gal .round { width: 46px; height: 46px; font-size: 1.1rem; }
.gal a:hover .round { background: var(--brown-fill); color: var(--on-brown); }
.gal__name { margin-top: 14px; }
.where-line { margin-top: 10px; color: var(--ink-2); font-weight: 500; }

/* GLASS ROOMS: full-panel photograph, copy in a notch. */
.band { padding: 0; overflow: hidden; background: none; }
.band__media { position: relative; height: clamp(560px, 70vw, 820px); }
.band__media .frame { position: absolute; inset: 0; border-radius: var(--r-sheet); }
.band__media .frame img { height: 120%; }
.band .tab--bl { max-width: min(640px, 88%); padding: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 44px) clamp(28px, 3.4vw, 44px) clamp(24px, 3vw, 44px); border-top-right-radius: var(--r-sheet); }
.band .tab--bl::after, .band .tab--bl::before { --notch: var(--r-sheet); width: var(--r-sheet); height: var(--r-sheet); }
.band .tab--bl .lede { margin-top: 16px; }
.band .tab--bl .btn { margin-top: 24px; }
.band .tab--tr { padding: 0 0 12px 12px; }
.band .tab--tr img { width: 96px; height: 96px; border-radius: 16px; }

/* DOOR DESIGNER */
.designer { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.designer .body { margin-top: 20px; }
.designer__actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.designer__partner { margin-top: 32px; display: flex; align-items: center; gap: 16px; }
.designer__partner img { width: 84px; border-radius: 12px; }
.designer__partner p { font-size: 0.95rem; color: var(--ink-2); max-width: 30ch; line-height: 1.45; }
.designer__media { position: relative; }
.designer__media .frame { aspect-ratio: 16 / 11; }
.swatches { display: flex; gap: 10px; padding: 14px 0 0 14px; }
.swatch { display: block; width: clamp(54px, 6vw, 76px); aspect-ratio: 4 / 5; border-radius: 999px; overflow: hidden; box-shadow: 0 0 0 3px var(--panel), 0 8px 18px -10px rgb(29 28 26 / 0.6); transition: transform 300ms var(--ease-out); }
.swatch img { width: 100%; height: 100%; object-fit: cover; }
.swatch:hover { transform: translateY(-6px); }

/* NOTTINGHAM STATEMENT: flat, carried by scale and the brown headline. */
.statement .h2 { font-size: clamp(2.6rem, 6vw, 5.25rem); max-width: 16ch; color: var(--brown-deep); }
.statement .lede { color: var(--ink); font-size: clamp(1.25rem, 1.9vw, 1.6rem); margin-top: 28px; max-width: 46ch; }
.statement__row { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; }

/* Reviews: Elfsight slot from the live site, hidden until the widget fills it. */
.reviews:has(.reviews__slot > div:empty) { display: none; }

/* CONTACT: the reference's "let's talk" card, carrying the real form. */
.contact { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 5vw, 80px); }
.contact .body { margin-top: 18px; }
.contact__list { margin-top: 32px; display: grid; gap: 14px; }
.contact__list a, .contact__list div { display: flex; align-items: center; gap: 14px; text-decoration: none; font-weight: 600; line-height: 1.35; }
.contact__list i { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--panel); color: var(--brown-deep); font-size: 1.2rem; }
.contact__list a:hover span span { text-decoration: underline; text-underline-offset: 3px; }
.contact__list small { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
.hours { margin-top: 28px; display: grid; gap: 6px; max-width: 320px; font-size: 1rem; }
.hours div { display: flex; justify-content: space-between; gap: 16px; }
.hours span:first-child { color: var(--ink-2); }

.form { background: var(--panel); border-radius: 24px; padding: clamp(22px, 3vw, 36px); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 700; font-size: 0.98rem; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 54px; padding: 14px 18px;
  font: 400 1.0625rem/1.4 var(--body); color: var(--ink);
  background: var(--panel); border: 1.5px solid color-mix(in oklch, var(--ink) 22%, transparent); border-radius: 16px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.field textarea { resize: vertical; min-height: 128px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brown-deep); box-shadow: 0 0 0 4px color-mix(in oklch, var(--brown) 22%, transparent); }
.field [aria-invalid="true"] { border-color: oklch(0.5 0.17 27); }
.field__hint { font-size: 0.9rem; color: var(--ink-2); }
.field__err { font-size: 0.9rem; font-weight: 600; color: oklch(0.46 0.17 27); min-height: 0; }
.field__err:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__actions { margin-top: 22px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form__status { font-weight: 600; color: var(--ink-2); }
.form__status[data-state="ok"] { color: oklch(0.42 0.1 150); }
.map { margin-top: clamp(32px, 4vw, 56px); height: 320px; border-radius: var(--r-media); overflow: hidden; background: var(--panel); }
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.6); }

/* FOOTER */
.site-footer { background: var(--panel); padding: clamp(48px, 6vw, 88px) 0 28px; }
.foot { display: grid; grid-template-columns: 1.1fr 2fr; gap: clamp(32px, 5vw, 80px); }
.foot__brand img { width: 120px; }
.foot__brand p { margin-top: 18px; font-size: 1rem; color: var(--ink-2); max-width: 40ch; }
.foot__groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 40px; }
.foot__h { font-family: var(--display); font-stretch: 62.5%; text-transform: uppercase; font-weight: 800; font-size: 1.25rem; margin-bottom: 12px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills a {
  display: inline-block; padding: 8px 14px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line); font-size: 0.9rem; font-weight: 500; text-decoration: none;
  transition: background-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
}
.pills a:hover { background: var(--ink); color: var(--panel); box-shadow: none; }
.colophon { margin-top: clamp(40px, 5vw, 64px); padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; font-size: 0.9rem; color: var(--ink-2); }
.colophon p { max-width: 90ch; }
.colophon a { color: var(--ink); }
.to-top { white-space: nowrap; font-weight: 700; text-decoration: none; color: var(--ink); }

.whatsapp {
  position: fixed; right: 18px; bottom: 18px; z-index: var(--z-float);
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--ink); color: var(--panel); font-size: 1.6rem; text-decoration: none;
  box-shadow: 0 12px 28px -12px rgb(29 28 26 / 0.6);
  transition: transform 200ms var(--ease-out);
}
.whatsapp:active { transform: scale(0.94); }

/* ==========================================================================
   RESPONSIVE: each multi-column block declares its own collapse.
   ========================================================================== */
@media (max-width: 1080px) {
  .cats { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
  .foot { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .intro, .designer, .contact { grid-template-columns: 1fr; }
  .intro__media { aspect-ratio: 4 / 3; }
  .gal { grid-template-columns: repeat(2, 1fr); }
  .feature__body { grid-template-columns: 1fr; }
  .feature .tab--tr { max-width: 78%; }
}
@media (max-width: 640px) {
  :root { --notch: 16px; }
  .hero__title { font-size: clamp(2.6rem, 12.4vw, 3.4rem); }
  .hero__title .hl-img, .hero__title .hl-pill { display: none; } /* no room to set photos into the line */
  .hero__media { height: 62vh; min-height: 400px; }
  .hero .tab--tl { display: none; }
  .stat b { font-size: 2.1rem; }
  .stat span { font-size: 0.85rem; }
  .hero__media .tab--br .btn { --h: 46px; font-size: 0.9rem; padding-left: 16px; }
  .sec-head { flex-wrap: wrap; align-items: start; }
  .cats { grid-template-columns: repeat(2, 1fr); }
  .gal { grid-template-columns: 1fr; }
  .feature { height: 520px; }
  .feature .tab--tr { max-width: 84%; }
  .feature .tab--tr .h2 { font-size: 1.75rem; }
  .feature .tab--bl { display: none; }
  .band__media { height: 640px; }
  .band .tab--tl, .band .tab--tr { display: none; }
  .band .tab--bl { max-width: 100%; border-top-right-radius: 0; }
  .band .tab--bl::after { display: none; }
  .band .tab--bl .h2 { font-size: 2rem; }
  .designer__media .frame { aspect-ratio: 4 / 3; }
  .form__grid { grid-template-columns: 1fr; }
  .foot__groups { grid-template-columns: 1fr; }
  .swatches { gap: 6px; }
  .swatch { width: 42px; }
}

/* ==========================================================================
   REDUCED MOTION: nothing slides, scales or loops. GSAP is gated in JS.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .marquee { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .marquee__set[aria-hidden="true"] { display: none; }
  .marquee__set { flex-wrap: wrap; justify-content: center; row-gap: 24px; padding-right: 0; }
  .card a:hover .frame img, .gal a:hover .frame img, .swatch:hover { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header::before { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ==========================================================================
   INNER PAGES (generated by tools/build_site.py)
   Each old Elementor section becomes one flat .sec; its columns become a
   grid. Content is inherited verbatim, so these styles have to make any
   mix of headings, copy, images, buttons, FAQs and galleries read well.
   ========================================================================== */
.crumbs { padding-top: clamp(20px, 3vw, 36px); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 0; list-style: none; font-size: 0.9rem; color: var(--ink-2); }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: color-mix(in oklch, var(--ink) 30%, transparent); }
.crumbs a { text-decoration: none; font-weight: 600; color: var(--ink); }
.crumbs a:hover { color: var(--brown-deep); }

.sec--lead { padding-top: clamp(28px, 4vw, 56px); }
.sec--lead::before { display: none; }

.p-row { display: grid; gap: clamp(28px, 4vw, 64px); align-items: start; }
.p-row + .p-row { margin-top: clamp(32px, 4vw, 56px); }
.p-row--center { align-items: center; }
.p-col { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.p-col:empty { display: none; }

/* Inherited copy: one type system for whatever the old page held. */
.prose { color: var(--ink-2); }
.prose > * { margin: 0; }
.prose > * + * { margin-top: 1em; }
.prose p, .prose li { max-width: 68ch; }
.prose strong, .prose b { color: var(--ink); font-weight: 700; }
.prose a { color: var(--brown-deep); font-weight: 600; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.2em; display: grid; gap: 6px; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--brown); }
.prose table { border-collapse: collapse; width: 100%; font-size: 1rem; }
.prose td, .prose th { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose img { border-radius: 14px; }
.p-col h1, .p-col h2, .p-col h3, .p-col h4, .p-col h5, .p-col h6, .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-family: var(--display); font-stretch: 62.5%; text-transform: uppercase; color: var(--ink);
  font-weight: 800; letter-spacing: -0.005em; line-height: 0.98; text-wrap: balance;
}
.p-col h1 { font-size: clamp(2.8rem, 6vw, 5rem); line-height: 0.92; }
.p-col h2, .prose h2 { font-size: clamp(2rem, 3.8vw, 3.25rem); }
.p-col h3, .prose h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.p-col h4, .p-col h5, .p-col h6, .prose h4, .prose h5, .prose h6 { font-size: clamp(1.25rem, 1.6vw, 1.45rem); font-weight: 750; }
.sec--lead .prose > p:first-child { font-size: clamp(1.125rem, 1.5vw, 1.3rem); color: var(--ink); }
.kicker { font-family: var(--display); font-stretch: 62.5%; text-transform: uppercase; font-weight: 750; font-size: 1.1rem; color: var(--brown-deep); letter-spacing: 0.02em; margin: 0 0 -8px; }

.p-actions { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.p-img { margin: 0; border-radius: var(--r-media); overflow: hidden; background: var(--tile); }
.p-img img { width: 100%; height: auto; max-height: 760px; object-fit: cover; }
.p-img a { display: block; }
.p-img figcaption { padding: 10px 2px 0; font-size: 0.95rem; color: var(--ink-2); background: var(--panel); }

/* Image box: photo card with the notch arrow, same as the homepage ranges. */
.ibox { display: flex; flex-direction: column; gap: 14px; }
.ibox .frame { aspect-ratio: 4 / 3; }
.ibox .frame img { transition: transform 700ms var(--ease-out); }
.ibox a:hover .frame img { transform: scale(1.05); }
.ibox .tab--br { padding: 10px 0 0 10px; }
.ibox .round { width: 46px; height: 46px; font-size: 1.1rem; }
.ibox a:hover .round { background: var(--brown-fill); color: var(--on-brown); }
.ibox__title { margin: 0; }
.ibox__title a { text-decoration: none; }
.ibox p { margin: 0; color: var(--ink-2); max-width: 60ch; }

/* FAQ / accordion: native details, keyboard and screen-reader ready. */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--tile); border-radius: 18px; }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 22px; font-weight: 700; font-size: 1.0625rem; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--panel); font-size: 1.3rem; font-weight: 500; transition: transform 260ms var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .prose { padding: 0 22px 22px; }

/* Galleries: square crops, open in the lightbox at full size. */
.pgal { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 210px), 1fr)); gap: clamp(8px, 1vw, 14px); }
.pgal a { display: block; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--tile); }
.pgal img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.pgal a:hover img { transform: scale(1.06); }
.pgal figcaption { display: none; }

.embed { border-radius: var(--r-media); overflow: hidden; background: var(--tile); }
.embed iframe, .embed video { display: block; width: 100%; min-height: min(80vh, 760px); border: 0; }
.embed--video iframe, .embed--video video { min-height: 0; aspect-ratio: 16 / 9; height: auto; }

.lb { border: 0; padding: 0; max-width: 100vw; max-height: 100dvh; width: 100vw; height: 100dvh; background: rgb(18 17 16 / 0.92); }
.lb::backdrop { background: transparent; }
.lb[open] { display: grid; place-items: center; }
.lb img { max-width: min(92vw, 1400px); max-height: 84dvh; width: auto; height: auto; border-radius: 12px; }
.lb .round { position: fixed; background: var(--panel); }
.lb [data-lb-close] { top: 16px; right: 16px; }
.lb [data-lb-step="-1"] { left: 16px; top: 50%; translate: 0 -50%; }
.lb [data-lb-step="1"] { right: 16px; top: 50%; translate: 0 -50%; }
.lb__count { position: fixed; bottom: 18px; left: 50%; translate: -50% 0; color: var(--panel); font-weight: 600; font-size: 0.95rem; }

@media (min-width: 1025px) { .hide-d { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .hide-t { display: none !important; } }
@media (max-width: 767px) { .hide-m { display: none !important; } }
@media (max-width: 900px) {
  .p-row { grid-template-columns: 1fr !important; }
}
.p-img img { max-height: 620px; }
.p-col--split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.p-col--split > .p-img img { max-height: 680px; }
@media (max-width: 900px) { .p-col--split { grid-template-columns: 1fr; } .p-col--split > .p-img img { max-height: 460px; } }
.strap { font-weight: 700; color: var(--ink); font-size: 1.0625rem; margin: 0; }
.strap a { color: var(--brown-deep); }
.post-meta { font-size: 0.95rem; }
.sec--slides { padding-block: clamp(16px, 2vw, 28px) 0; }
.sec--slides::before { display: none; }
.slides { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.slide-tile { aspect-ratio: 16 / 10; }
.slide-tile .tab--bl { display: grid; gap: 4px; max-width: 80%; }
.slide-tile .kicker { margin: 0; }
.slide-line { margin: 0; font-family: var(--display); font-stretch: 62.5%; text-transform: uppercase; font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 0.95; color: var(--ink); }
.p-col .is-long, .prose .is-long {
  font-family: var(--body); font-stretch: 100%; text-transform: none; letter-spacing: 0;
  font-weight: 600; font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.35; color: var(--ink); max-width: 60ch;
}
.kicker.is-long { font-family: var(--body); font-stretch: 100%; text-transform: none; letter-spacing: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.45; margin: 0; }
.p-row:has(> .p-col:nth-child(3)) > .p-col > .p-img:first-child img,
.p-row:has(> .p-col:nth-child(3)) > .p-col > .ibox .frame img { aspect-ratio: 4 / 3; object-fit: cover; height: auto; }
/* Inherited button labels can be long; on phones they wrap instead of overflowing. */
@media (max-width: 640px) {
  .p-actions .btn { max-width: 100%; white-space: normal; height: auto; min-height: var(--h); padding-block: 6px; line-height: 1.25; }
}

/* ==========================================================================
   CONTRAST BANDS
   Full-width colour sections (not cards, so the two-card rule still holds).
   They re-scope the colour tokens, so every component inside (copy,
   buttons, FAQs, galleries, notch tabs, forms) flips with no extra rules.
   Contrast on dark: ink 15.5:1, ink-2 8.9:1, link brown 8.1:1.
   Contrast on brown: ink 6.1:1, ink-2 5.2:1.
   ========================================================================== */
.band-dark {
  --panel: oklch(0.215 0.006 80);      /* #1D1C1A */
  --tile:  oklch(0.270 0.007 80);      /* #2B2926 */
  --ink:   oklch(0.960 0.004 85);      /* #F4F2EE */
  --ink-2: oklch(0.790 0.010 80);      /* #BFBAB2 */
  --line:  color-mix(in oklch, oklch(0.960 0.004 85) 16%, transparent);
  --brown-deep: oklch(0.790 0.095 80); /* #D8B46A  brown that reads on dark */
  --brown-tint: oklch(0.300 0.020 80);
  background: var(--panel); color: var(--ink-2);
}
.band-brown {
  --panel: oklch(0.480 0.090 80);      /* #7D5D1B */
  --tile:  oklch(0.430 0.080 80);
  --ink:   oklch(0.990 0.001 90);
  --ink-2: oklch(0.940 0.025 85);      /* #F3EBDB */
  --line:  color-mix(in oklch, oklch(0.990 0.001 90) 22%, transparent);
  --brown-deep: oklch(0.990 0.001 90);
  --brown-fill: oklch(0.990 0.001 90); /* buttons turn cream with dark labels */
  --on-brown:   oklch(0.215 0.006 80);
  --brown-tint: oklch(0.430 0.080 80);
  background: var(--panel); color: var(--ink-2);
}
.band-dark::before, .band-brown::before { display: none; }
.band-dark + .sec::before, .band-brown + .sec::before { display: none; }
.band-dark .btn--line, .band-brown .btn--line { box-shadow: inset 0 0 0 1.5px var(--ink); }
.band-dark .p-img, .band-brown .p-img { background: var(--tile); }
.band-dark .p-img figcaption, .band-brown .p-img figcaption { background: transparent; }
.band-dark :focus-visible, .band-brown :focus-visible { outline-color: var(--ink); }
.site-footer.band-dark .colophon a, .site-footer.band-dark .to-top { color: var(--ink); }

/* Cut-out product shots (transparent PNG/WebP): whole, natural size, centred. */
.p-img--cutout { background: none; border-radius: 0; overflow: visible; display: flex; justify-content: center; }
.p-img--cutout img { width: auto; max-width: 100%; height: auto; max-height: 420px; object-fit: contain; }
.p-row:has(> .p-col:nth-child(3)) > .p-col > .p-img--cutout:first-child img { aspect-ratio: auto; object-fit: contain; }
.p-col:has(> .p-img--cutout) { align-items: center; text-align: center; }

/* Slider (old Elementor image carousels). Native scroll-snap does the
   swiping and momentum; JS adds arrows, dots and the paced autoplay. */
.pslider { position: relative; }
.pslider__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: none; border-radius: var(--r-media);
  gap: clamp(8px, 1vw, 14px);
}
.pslider__track::-webkit-scrollbar { display: none; }
.pslider__slide {
  flex: 0 0 calc((100% - (var(--per) - 1) * clamp(8px, 1vw, 14px)) / var(--per));
  margin: 0; scroll-snap-align: start; aspect-ratio: 16 / 10; border-radius: var(--r-media); overflow: hidden; background: var(--tile);
}
.pslider__slide a { display: block; height: 100%; }
.pslider__slide img { width: 100%; height: 100%; object-fit: cover; }
.pslider__arrow { position: absolute; top: calc(50% - 22px); translate: 0 -50%; background: var(--panel); box-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.5); }
.pslider__arrow[data-slide-step="-1"] { left: 14px; }
.pslider__arrow[data-slide-step="1"] { right: 14px; }
.pslider__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 14px; }
.pslider__dot { width: 24px; height: 24px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.pslider__dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in oklch, var(--ink) 25%, transparent); transition: background-color 200ms ease, transform 200ms var(--ease-out); }
.pslider__dot[aria-current="true"]::before { background: var(--brown-deep); transform: scale(1.3); }
@media (max-width: 640px) { .pslider__arrow { width: 42px; height: 42px; } .pslider__slide { aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: reduce) { .pslider__track { scroll-behavior: auto; } }
.band-dark .p-img--cutout, .band-brown .p-img--cutout { background: none; }
/* Intro that heads a picture grid: centred over it, as on the old pages. */
.p-row--intro { text-align: center; }
.p-row--intro .p-col { align-items: center; }
.p-row--intro .prose p, .p-row--intro .prose li { margin-inline: auto; }
.ibox--cutout { align-items: center; text-align: center; }
.ibox--cutout .p-img--cutout img { max-height: 200px; }
.p-row--intro h2, .p-row--intro h3, .p-row--intro h4, .p-row--intro h5, .p-row--intro h6 { font-size: clamp(2rem, 3.8vw, 3.25rem); }
.p-col:has(.ibox--cutout) { align-items: center; text-align: center; }
.p-col:has(.ibox--cutout) h3, .p-col:has(.ibox--cutout) h4, .p-col:has(.ibox--cutout) h5 { font-size: clamp(1.75rem, 3vw, 2.5rem); }

/* Heading the theme printed as a <div>: same look as a section heading. */
.h-like { margin: 0; font-family: var(--display); font-stretch: 62.5%; text-transform: uppercase; font-weight: 800; color: var(--ink); line-height: 0.98; font-size: clamp(2rem, 3.8vw, 3.25rem); text-wrap: balance; }
.h-like.is-long { font-family: var(--body); font-stretch: 100%; text-transform: none; font-weight: 600; font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.35; }
.head--center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.head--center .prose p { margin-inline: auto; }
.p-row--intro + .p-row { margin-top: clamp(28px, 3.5vw, 48px); }
.p-row--card .head--center { align-items: flex-start; text-align: left; }
.p-row--card + * { margin-top: 8px; }
.contact .p-row { gap: 0; }

/* Numbered points: badge + title + text. */
.iconhead { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.iconhead__num { display: grid; place-items: center; min-width: 48px; height: 48px; padding: 0 10px; border-radius: 14px; background: var(--brown-fill); color: var(--on-brown); font-family: var(--display); font-stretch: 62.5%; font-weight: 800; font-size: 1.6rem; }
.iconhead__num--dot { min-width: 14px; width: 14px; height: 14px; padding: 0; border-radius: 50%; margin-top: 8px; }
.iconhead__body { display: flex; flex-direction: column; gap: 10px; }
.iconhead__title { margin: 0; font-family: var(--display); font-stretch: 62.5%; text-transform: uppercase; font-weight: 800; font-size: clamp(1.35rem, 2vw, 1.75rem) !important; color: var(--ink); line-height: 1.05; }
/* Text blocks the live page centres (read from its Elementor CSS) are
   centred here too; lists stay left-aligned so bullets line up. */
.prose.is-center { text-align: center; }
.prose.is-center p { margin-inline: auto; }
.prose.is-center ul, .prose.is-center ol { text-align: left; width: fit-content; max-width: 68ch; margin-inline: auto; }

/* ==========================================================================
   ELFSIGHT REVIEWS
   The widget is dropped onto our own dark band and restyled with the site's
   tokens so it reads as part of the page, not an embed. Elfsight's stable
   es-* class names are targeted; !important is needed to beat its
   generated styles.
   ========================================================================== */
.reviews { padding-block: clamp(56px, 7vw, 104px); }
.reviews .es-background-base, .reviews .es-background-overlay { background: transparent !important; }
.reviews .es-widget-title-header {
  font-family: var(--display) !important; font-stretch: 62.5%; text-transform: uppercase; font-weight: 800 !important;
  font-size: clamp(2.25rem, 4.4vw, 3.75rem) !important; line-height: 0.95 !important; color: var(--ink) !important; letter-spacing: -0.005em;
}
.reviews .es-header-container { background: var(--tile) !important; border-radius: var(--r-media) !important; }
.reviews .es-review-background-container { background: var(--tile) !important; border-radius: var(--r-media) !important; }
.reviews .es-review-card-tail path { fill: var(--tile) !important; }
.reviews .es-header-heading-text, .reviews .es-rating-value, .reviews .es-review-content,
.reviews .es-review-content-text-container, .reviews .es-text-shortener, .reviews .es-review-author-name { color: var(--ink) !important; }
.reviews .es-header-rating-reviews-count, .reviews .es-text-shortener-control, .reviews .es-review-info-date,
.reviews .es-review-info-container { color: var(--ink-2) !important; }
.reviews .es-rating-item-filled svg path, .reviews .es-rating-stars-item-filled svg path { fill: var(--brown-deep) !important; }
.reviews .es-header-write-review-button {
  background: var(--brown-fill) !important; color: var(--on-brown) !important; border-radius: 999px !important;
  font-weight: 700 !important; padding-inline: 22px !important; min-height: 48px;
}
.reviews .es-header-write-review-button:hover { background: var(--brown) !important; }
.reviews .es-load-more-button {
  background: transparent !important; color: var(--ink) !important; border-radius: 999px !important;
  box-shadow: inset 0 0 0 1.5px var(--ink) !important; font-weight: 700 !important; min-height: 48px; padding-inline: 26px !important;
}
.reviews .es-load-more-button:hover { background: var(--ink) !important; color: var(--panel) !important; }
.reviews .es-button-base-overlay { background: transparent !important; }

/* ==========================================================================
   PHOTOS SHOW WHOLE (client, 2026-10-19)
   Inner-page photos keep their natural shape: nothing is cropped to fit a
   frame. Very tall ones are scaled down by height, never cut.
   Galleries (square thumbnails that open full size) and the slider keep
   their deliberate crops.
   ========================================================================== */
.p-img { background: none; border-radius: 0; overflow: visible; }
.p-img img, .p-col--split > .p-img img {
  width: auto; max-width: 100%; height: auto; max-height: 85vh;
  object-fit: contain; border-radius: var(--r-media); margin-inline: auto;
}
.p-row:has(> .p-col:nth-child(3)) > .p-col > .p-img:first-child img,
.p-row:has(> .p-col:nth-child(3)) > .p-col > .ibox .frame img { aspect-ratio: auto; object-fit: contain; height: auto; }
.ibox .frame { aspect-ratio: auto; background: none; }
.ibox .frame img { width: 100%; height: auto; object-fit: contain; }

/* Image box with the picture beside the text, at the live page's width. */
.ibox--side { display: grid; grid-template-columns: var(--img-w, 33%) 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.ibox--side.ibox--right { grid-template-columns: 1fr var(--img-w, 33%); }
.ibox--side.ibox--right .ibox__media { order: 2; }
.ibox__text { display: flex; flex-direction: column; gap: 14px; }
.ibox--side .ibox__title { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
@media (max-width: 760px) { .ibox--side, .ibox--side.ibox--right { grid-template-columns: 1fr; } .ibox--side.ibox--right .ibox__media { order: 0; } }
.p-actions--center { justify-content: center; }
.p-row--after { display: block; margin-top: clamp(24px, 3vw, 40px); }
/* Images the live page sets side by side (narrow custom widths). */
.p-imgrow { display: flex; gap: clamp(10px, 1.4vw, 18px); align-items: flex-start; justify-content: center; }
.p-imgrow > .p-img { flex: 0 1 var(--w, 50%); min-width: 0; }
.p-imgrow > .p-img img { width: 100%; max-height: 70vh; object-fit: contain; }

/* ==========================================================================
   HEADING TIERS (client, 2026-10-19: headings and subheadings looked alike)
   Decided by the role the live page gave each heading, not its tag level:
     main  - condensed caps display, the section's title
     sub   - brown, regular width, sentence case: the lead-in / subheading
     other - headings inside copy and card titles: bold body face
   ========================================================================== */
.p-col .main, .p-col .h-like:not(.is-long) {
  font-family: var(--display); font-stretch: 62.5%; text-transform: uppercase; font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 0.98; color: var(--ink); letter-spacing: -0.005em;
}
.p-col .sub, .prose .sub, .kicker, .p-col .kicker {
  font-family: var(--body); font-stretch: 100%; text-transform: none; letter-spacing: 0.01em;
  font-weight: 600; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.35; color: var(--brown-deep); margin: 0;
}
.p-col :is(h3, h4, h5, h6):not(.sub):not(.main):not(.iconhead__title):not(.is-long),
.prose :is(h3, h4, h5, h6) {
  font-family: var(--body); font-stretch: 100%; text-transform: none; letter-spacing: 0;
  font-weight: 700; font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.3; color: var(--ink);
}
.p-col h2:not(.sub):not(.main):not(.is-long):not(.h2):not(.sr-only) { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.p-col .main.is-long { font-family: var(--body); font-stretch: 100%; text-transform: none; font-weight: 600; font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.35; }

/* ==========================================================================
   PAGE TITLE BANNER (replaces the lone title in empty space)
   ========================================================================== */
.phead { position: relative; isolation: isolate; overflow: hidden; color: var(--on-brown); }
.phead--img { min-height: clamp(280px, 42vh, 440px); display: flex; align-items: flex-end; background: var(--ink); }
.phead__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.phead--img::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(20 19 17 / 0.25) 0%, rgb(20 19 17 / 0.82) 100%); }
.phead__in { width: 100%; padding-block: clamp(36px, 5vw, 64px); }
.phead .crumbs { padding: 0 0 14px; }
.phead .crumbs ol, .phead .crumbs a { color: rgb(255 255 255 / 0.85); }
.phead .crumbs li + li::before { color: rgb(255 255 255 / 0.5); }
.phead__title {
  margin: 0; font-family: var(--display); font-stretch: 62.5%; text-transform: uppercase; font-weight: 800;
  font-size: clamp(2.5rem, 5.5vw, 4.5rem); line-height: 0.95; color: #fff; text-wrap: balance; max-width: 20ch;
}
.phead.band-brown .phead__in { padding-block: clamp(32px, 4vw, 52px); }
.phead + .sec::before { display: none; }
/* Banner wrapping the page's own opening content (title + short line). */
.phead--content .p-col h1 { font-size: clamp(2.5rem, 5.5vw, 4.5rem); line-height: 0.95; color: #fff; }
.phead--content .p-row { margin: 0; }
.phead--content .sub, .phead--content .kicker { color: rgb(255 255 255 / 0.9); }
.phead--content .prose, .phead--content .prose p { color: rgb(255 255 255 / 0.88); }
.phead--content .head--center { align-items: flex-start; text-align: left; }
.phead--content .prose.is-center { text-align: left; }
.phead--content .prose.is-center p { margin-inline: 0; }
/* Card titles in rows of three or more stay card-sized. */
.p-row:has(> .p-col:nth-child(3)) .main, .p-row:has(> .p-col:nth-child(3)) .h-like:not(.is-long) { font-size: clamp(1.45rem, 2.1vw, 1.85rem); }
/* Title banner: brand colour band, rounded at the bottom only (client, 2026-10-19). */
.phead { border-radius: 0 0 var(--r-sheet) var(--r-sheet); }
.phead + .sec { padding-top: clamp(48px, 6vw, 88px); }
/* Title banner: site charcoal, rounded at the bottom only (client, 2026-10-19). */
.phead { border-radius: 0 0 var(--r-sheet) var(--r-sheet); }
.phead__in { padding-block: clamp(40px, 5vw, 64px); }
.phead + .sec { padding-top: clamp(48px, 6vw, 88px); }
.phead + .sec.band-dark { margin-top: clamp(16px, 2vw, 24px); }

/* ==========================================================================
   ABOUT PAGE (hand-built, tools/pages/about-us.html)
   ========================================================================== */
.about-hero .sub { color: var(--brown-deep); margin-bottom: 10px; }
.about-hero .phead__title { max-width: 16ch; }
.about-hero__lede { margin-top: 18px; max-width: 46ch; font-size: clamp(1.15rem, 1.6vw, 1.35rem); color: var(--ink-2); }

.about-story__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.about-story__text { font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.55; color: var(--ink); max-width: 34ch; }
.about-story__text a { color: var(--brown-deep); }
.about-facts { margin: 32px 0 34px; display: grid; gap: 14px; }
.about-facts li { display: flex; align-items: center; gap: 14px; font-weight: 600; }
.about-facts i { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--tile); color: var(--brown-deep); font-size: 1.15rem; }
.about-facts a { text-decoration: none; }

.about-doors { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 22px); align-items: start; padding-bottom: 64px; }
.about-doors .frame { margin: 0; aspect-ratio: 9 / 19; }
.about-doors__b { margin-top: clamp(48px, 7vw, 96px) !important; }
.about-doors .frame img { height: 110%; object-position: 50% 35%; }
.about-stat {
  position: absolute; left: -28px; bottom: 0; display: flex; align-items: center; gap: 14px;
  padding: 18px 24px; border-radius: var(--r-media); background: var(--brown-fill); color: var(--on-brown);
  box-shadow: 0 24px 40px -24px rgb(29 28 26 / 0.6);
}
.about-stat b { font-family: var(--display); font-stretch: 62.5%; font-weight: 800; font-size: clamp(2.6rem, 4vw, 3.4rem); line-height: 0.9; }
.about-stat h3 { margin: 0; font-weight: 700; font-size: 1.05rem; line-height: 1.25; max-width: 11ch; color: inherit; }

.about-qa__head { max-width: 760px; }
.about-qa__lede { margin-top: 16px; font-size: clamp(1.15rem, 1.6vw, 1.35rem); color: var(--ink-2); }
.about-qa__grid { margin-top: clamp(32px, 4vw, 52px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 22px); }
.about-qa__grid a {
  display: flex; flex-direction: column; gap: 12px; height: 100%; padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--r-media); background: var(--tile); text-decoration: none; color: var(--ink);
  transition: transform 300ms var(--ease-out), background-color 250ms ease;
}
.about-qa__grid a:hover { transform: translateY(-4px); background: color-mix(in oklch, var(--tile) 70%, black); }
.about-qa__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: rgb(255 255 255 / 0.14); font-size: 1.7rem; }
.about-qa__title { margin: 6px 0 0; font-family: var(--display); font-stretch: 62.5%; text-transform: uppercase; font-weight: 800; font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1; }
.about-qa__grid p { color: var(--ink-2); }
.about-qa__more { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.about-qa__close { margin-top: clamp(32px, 4vw, 52px); font-family: var(--display); font-stretch: 62.5%; text-transform: uppercase; font-weight: 800; font-size: clamp(1.8rem, 3.2vw, 2.8rem); line-height: 1; color: var(--ink); }

.about-blog__head { margin-bottom: clamp(28px, 3.6vw, 44px); }
.about-blog__head .sub { margin-bottom: 8px; }
.about-post { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.about-post__img { display: block; aspect-ratio: 1; }
.about-post__img img { transition: transform 700ms var(--ease-out); }
.about-post__img:hover img { transform: scale(1.04); }
.about-post__body { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.about-post__meta { font-size: 0.95rem; color: var(--ink-2); }
.about-post__meta a { color: var(--brown-deep); font-weight: 600; }
.about-post__title { margin: 0; font-family: var(--display); font-stretch: 62.5%; text-transform: uppercase; font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; }
.about-post__title a { text-decoration: none; }
.about-post__title a:hover { color: var(--brown-deep); }
.about-post__body > p:not(.about-post__meta) { color: var(--ink-2); max-width: 52ch; }

@media (max-width: 900px) {
  .about-story__grid, .about-post { grid-template-columns: 1fr; }
  .about-qa__grid { grid-template-columns: 1fr; }
  .about-doors { max-width: 520px; }
  .about-stat { left: 0; }
}
/* Heading tiers apply anywhere on a page, not only inside generated columns. */
:where(.main:not(.is-long)) {
  font-family: var(--display); font-stretch: 62.5%; text-transform: uppercase; font-weight: 800;
  font-size: clamp(2.25rem, 4.4vw, 3.75rem); line-height: 0.95; color: var(--ink); letter-spacing: -0.005em; margin: 0;
}
:where(.sub:not(.is-long)) {
  font-family: var(--body); font-stretch: 100%; text-transform: none; letter-spacing: 0.01em;
  font-weight: 600; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.35; color: var(--brown-deep); margin: 0;
}
.about-hero .phead__title { max-width: 22ch; }
.band-brown .about-qa__head .main { color: var(--ink); }