/* Odilon — style.css
   -------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; }

/* Visually hidden but screen-reader-accessible text */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

:root {
  --cream:   #F4F0E8;
  --white:   #FDFCF8;
  --dark:    #1A1815;
  --mid:     #3A3530;
  --stone:   #8A8078;
  --accent:  #AE5249;
  --brick:   #AE5249;
  --border:  rgba(26,24,21,0.12);
  /* fixed nav's real height: the 60px bar plus the notch/status-bar inset
     (0 on non-notched devices), so every "clear the fixed nav" offset
     that already reuses --nav-h picks this up automatically */
  --nav-h:   calc(60px + env(safe-area-inset-top));

  /* type scale: all text sizes point at one of these (icons, the footer wordmark and swatch labels keep their own px size) */
  --fs-display: clamp(44px, 8vw, 137px); /* giant titles (projects, material hero) */
  --fs-h1:      clamp(40px, 5vw, 72px);  /* page titles */
  --fs-h2:      clamp(30px, 3.5vw, 50px);/* section titles, statements */
  --fs-h3:      clamp(20px, 2.2vw, 30px);/* subtitles, quotes, leads */
  --fs-h4:      14px;                    /* card and small titles */
  --fs-lead:    clamp(15px, 1.6vw, 18px);/* subtitle under a page title */
  --fs-body:    13px;                    /* running text, nav */
  --fs-small:   11px;                    /* labels, notes, footer headings */
  --fs-btn:     12px;                    /* every button */
  --fw-btn:     600;

  --sans:  'early-sans-variable', 'Early Sans Variable', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'early-sans-variable', 'Early Sans Variable', 'Helvetica Neue', Arial, sans-serif;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--dark);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.08em;
  -webkit-font-smoothing: antialiased;
}

/* ── Design-spec typografieklassen ─────────────── */
.paragraph-intro {
  font-family: var(--sans); font-weight: 400; font-size: var(--fs-body);
  line-height: 22px; letter-spacing: 0.086em; color: #363636;
}
.paragraph-zwart {
  font-family: var(--sans); font-weight: 400; font-size: var(--fs-body);
  line-height: 22px; letter-spacing: 0.08em; color: #363636;
}
.paragraph-wit {
  font-family: var(--sans); font-weight: 400; font-size: var(--fs-body);
  line-height: 22px; letter-spacing: 0.08em; color: #FFFEFA;
}
.h3-rood {
  font-family: var(--sans); font-weight: 400; font-size: var(--fs-h4);
  line-height: 17px; letter-spacing: 0.12em; color: #AE5249;
  text-transform: uppercase;
}
.h3-zwart {
  font-family: var(--sans); font-weight: 400; font-size: var(--fs-h4);
  line-height: 17px; letter-spacing: 0.12em; color: #1A1919;
  text-transform: uppercase;
}
.h4-zwart {
  font-family: var(--sans); font-weight: 400; font-size: var(--fs-h4);
  line-height: 19px; letter-spacing: 0.12em; color: #1A1919;
  text-transform: uppercase;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { text-decoration: none; color: inherit; }

/* ── Layout ─────────────────────────────────── */
.container {
  max-width: 1440px;
  margin-inline: auto;
  padding-left: 65px;
  padding-right: 90px;
}

/* ── Eyebrow ─────────────────────────────────── */
.eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.54;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  display: block;
}
.eyebrow--light { color: rgba(234,230,221,0.4); }
.eyebrow--accent { color: var(--accent); }

/* ── Buttons ─────────────────────────────────── */
.btn-outline,
.btn-ghost-light,
.btn-solid-accent {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--fs-btn);
  font-weight: var(--fw-btn);
  line-height: 1;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  padding: 11px 22px;
  border: 1px solid currentColor;
  transition: background 0.22s, color 0.22s, border-color 0.22s;
  cursor: pointer;
}
.btn-outline { color: #AAA99D; }
.btn-solid-accent {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-solid-accent:hover {
  background: #000;
  border-color: #000;
  color: #fff;
}
.btn-outline:hover,
.btn-outline:focus-visible {
  background: transparent;
  color: #000000;
  border-color: #000000;
  outline: none;
}

.btn-ghost-light { color: var(--cream); }
.btn-ghost-light:hover,
.btn-ghost-light:focus-visible { background: var(--cream); color: var(--dark); outline: none; }

.btn-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── NAV ────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 200;
  height: var(--nav-h);
  background: var(--cream);
  border-bottom: 1px solid rgba(22,22,21,.2);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.25s;
}
.nav--scrolled { box-shadow: 0 2px 20px rgba(26,24,21,0.08); }

.nav-inner {
  height: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-top: env(safe-area-inset-top);
  padding-left: 65px;
  padding-right: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav-logo-img {
  display: block;
  height: 28px;
  width: auto;
  object-fit: contain;
  filter: brightness(0);
}
.nav-logo-text {
  display: none;
}

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 28px);
}
.nav-links a {
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--mid);
  transition: color 0.18s;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--accent); }

/* ── MATERIALS PAGE ─────────────────────────── */
body:is(.materials-page, .professionals-page) {
  --ink: #161616;
  --brick: #AE5249;
  --muted: #8A8680;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
}
body:is(.materials-page, .professionals-page) .container {
  max-width: 1280px;
  padding-inline: 40px;
}
body:is(.materials-page, .professionals-page) .nav-inner {
  max-width: 1280px;
  padding-inline: 40px;
}
body:is(.materials-page, .professionals-page) .nav-links a {
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
body:is(.materials-page, .professionals-page) .nav-links > li > a {
  color: var(--ink);
}
body:is(.materials-page, .professionals-page) .nav-links > li.is-current > a {
  color: var(--brick);
}
body:is(.materials-page, .professionals-page) .nav-links > li > a:hover {
  color: var(--brick);
}
body:is(.materials-page, .professionals-page) .materials-hero {
  padding: clamp(80px, 10vw, 140px) 0 60px;
  text-align: center;
}
body:is(.materials-page, .professionals-page) .materials-hero .label {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brick);
  margin-bottom: 24px;
}
body:is(.materials-page, .professionals-page) .materials-hero .eyebrow {
  margin-bottom: 24px;
}
body:is(.materials-page, .professionals-page) .materials-hero .display {
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 0 auto 24px;
  max-width: 20ch;
  text-wrap: balance;
}
body:is(.materials-page, .professionals-page) .materials-hero .display-sub {
  display: block;
  font-size: var(--fs-lead);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  line-height: 1.4;
  margin-top: 12px;
}
body:is(.materials-page, .professionals-page) .materials-hero .body-intro {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 16px;
  max-width: 55ch;
  font-size: var(--fs-body);
  line-height: 1.69;
  letter-spacing: 0.08em;
  color: var(--ink);
}
body:is(.materials-page, .professionals-page) .materials-hero .body-intro:last-of-type {
  margin-bottom: 0;
}
body:is(.materials-page, .professionals-page) .materials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-block: 60px 90px;
}
body:is(.materials-page, .professionals-page) .mat-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--ink);
}
body:is(.materials-page, .professionals-page) .mat-img {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #e7e1d9;
  margin-bottom: 10px;
}
body:is(.materials-page, .professionals-page) .mat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(.2,.6,.3,1);
}
body:is(.materials-page, .professionals-page) .mat-img:hover img {
  transform: scale(1.04);
}
body:is(.materials-page, .professionals-page) .mat-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 0.3s ease;
  z-index: 1;
  pointer-events: none;
}
body:is(.materials-page, .professionals-page) .mat-img:hover::before { background: rgba(0,0,0,0.2); }
body:is(.materials-page, .professionals-page) .mat-img::after {
  content: 'View more';
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 1px 12px rgba(26,24,21,0.45);
  opacity: 0;
  transition: opacity 0.25s;
}
body:is(.materials-page, .professionals-page) .mat-img:hover::after {
  opacity: 1;
}
body:is(.materials-page, .professionals-page) .mat-card hr {
  border: none;
  border-top: 1px solid rgba(22,22,21,.2);
  margin: 20px 0 40px;
}
body:is(.materials-page, .professionals-page) .mat-card h3 {
  font-size: var(--fs-h4);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  margin: 0;
  border-top: none;
  padding-top: 0;
}
body:is(.materials-page, .professionals-page) .mat-card p {
  font-size: var(--fs-body);
  line-height: 1.6;
  max-width: 60ch;
  margin: 0;
}
body:is(.materials-page, .professionals-page) .mat-card-links {
  display: flex;
  gap: 20px;
}
body:is(.materials-page, .professionals-page) .mat-card-links a {
  font-size: var(--fs-body);
  letter-spacing: 0.04em;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s;
}
body:is(.materials-page, .professionals-page) .mat-card-links a:hover {
  opacity: 0.7;
}
body.materials-page .section-collections {
  background: var(--ink);
  color: var(--cream);
  padding-block: 90px;
}
body.materials-page .collections-statement {
  font-size: var(--fs-h3);
  line-height: 1.3;
  max-width: 55ch;
  margin-bottom: 42px;
}
body.materials-page .collections-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 32px;
}
body.materials-page .collection-title {
  font-size: var(--fs-h2);
  text-transform: uppercase;
  margin-bottom: 20px;
  display: block;
}
body.materials-page .collection-title.active {
  color: var(--cream);
  opacity: 1;
}
body.materials-page .collection-title:not(.active) {
  color: var(--cream);
  opacity: 0.55;
}
body.materials-page .swatch-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
body.materials-page .swatch-card {
  display: grid;
  gap: 10px;
}
body.materials-page .swatch {
  aspect-ratio: 1 / 1;
  background: #d9d0c8;
}
body.materials-page .swatch-label {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.85;
  color: var(--cream);
}
body.materials-page .section-light {
  padding-block: 90px;
}
body.materials-page .section-light .label {
  color: var(--brick);
  margin-bottom: 18px;
  display: inline-block;
}
body.materials-page .section-light .lead {
  font-size: var(--fs-h3);
  line-height: 1.3;
  max-width: 55ch;
  margin: 0 auto 40px;
}
body.materials-page .light-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: start;
}
body.materials-page .light-image-large,
body.materials-page .light-image-small {
  overflow: hidden;
  background: #e7e1d9;
}
body.materials-page .light-image-large {
  aspect-ratio: 4 / 5;
}
body.materials-page .light-image-small {
  aspect-ratio: 4 / 3;
}
body.materials-page .light-image-large img,
body.materials-page .light-image-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.materials-page .light-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
body.materials-page .section-materials-cta {
  padding-block: 90px;
  text-align: center;
}
body.materials-page .section-materials-cta h2 {
  font-size: var(--fs-h4);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 24px;
  color: var(--ink);
}
body.materials-page .section-materials-cta p {
  max-width: 55ch;
  margin: 0 auto;
}
body.materials-page .button-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
}
body.materials-page .section-featured {
  position: relative;
  margin-block: 90px 0;
}
body.materials-page .section-featured img {
  width: 100%;
  display: block;
}
body.materials-page .featured-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 48px 40px;
  text-align: center;
}
body.materials-page .featured-title {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cream);
  margin-bottom: 18px;
}
body.materials-page .featured-heading {
  font-size: var(--fs-h2);
  text-transform: uppercase;
  line-height: 1.12;
  letter-spacing: 0;
  color: var(--cream);
  margin: 0 auto 32px;
  max-width: 12ch;
}
body.materials-page .featured-actions {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  width: min(720px, 100%);
  margin: 0 auto;
}
@media (max-width: 991px) {
  body:is(.materials-page, .professionals-page) .materials-grid,
  body:is(.materials-page, .professionals-page) .collections-grid,
  body:is(.materials-page, .professionals-page) .light-grid,
  body:is(.materials-page, .professionals-page) .featured-actions {
    grid-template-columns: 1fr;
  }
  body:is(.materials-page, .professionals-page) .featured-actions { justify-content: center; }
}
@media (max-width: 767px) {
  body:is(.materials-page, .professionals-page) .nav-links { display: none; }
  body:is(.materials-page, .professionals-page) .nav-toggle { display: flex; }
  body:is(.materials-page, .professionals-page) .materials-hero { padding-top: 100px; }
  body:is(.materials-page, .professionals-page) .light-grid { gap: 20px; }
  body:is(.materials-page, .professionals-page) .featured-overlay { padding: 32px 20px; }
}

.nav-strong { font-weight: 700 !important; color: var(--dark) !important; }
.nav-strong:hover { color: var(--accent) !important; }

/* dropdown */
.has-dropdown { position: relative; }
.chevron {
  width: 12px;
  height: 12px;
  margin-left: 6px;
  vertical-align: middle;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
@media (hover: hover) and (min-width: 1201px) {
  .has-dropdown:hover .chevron,
  .has-dropdown:focus-within .chevron { transform: rotate(180deg); }
}

.dropdown {
  position: absolute;
  top: 100%;
  left: -29px;
  /* transparent top border bridges the gap between link and panel so the
     hover isn't lost while the cursor travels down to the menu. Its width is
     (nav height − link height) / 2, so the panel starts right at the bottom of the nav bar. */
  border: 1px solid var(--border);
  border-top: 18px solid transparent;
  background: var(--cream);
  background-clip: padding-box;
  padding: 24px 28px;
  display: none;
  gap: 40px;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 8px 32px rgba(26,24,21,0.08);
}
/* real-hover pointers only, above the hamburger breakpoint: on touch
   devices (WebKit especially) a tap can leave :hover "stuck" on the
   <li>, which would otherwise show this desktop panel inside the open
   mobile menu instead of the JS-driven .is-sub-open submenu */
@media (hover: hover) and (min-width: 1201px) {
  .has-dropdown:hover .dropdown { display: flex; }
}

.dropdown-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dropdown-col h4 {
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 4px;
}
.dropdown-col a {
  font-size: var(--fs-body);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #000;
  transition: color 0.18s;
}
.dropdown-col a:hover { color: var(--accent); }

/* mobile toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--dark);
  transition: transform 0.22s, opacity 0.22s;
}
/* the two 1px bars sit 6px apart (5px gap + 1px), so each moves half of that to cross in the middle */
.nav-toggle.is-open span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* ── HERO ───────────────────────────────────── */
.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  margin-top: var(--nav-h);
  overflow: hidden;
}
.hero-img { width: 100%; height: 100%; }
.hero-img img, .hero-img video { object-position: center 30%; }
.hero-img video { width: 100%; height: 100%; object-fit: cover; }

.hero-cta {
  position: fixed;
  bottom: 40px;
  right: clamp(24px, 5vw, 64px);
  z-index: 150;
  font-size: var(--fs-btn);
  font-weight: var(--fw-btn);
  line-height: 1;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: 10px 20px;
  opacity: 0;
  pointer-events: none;
  transition: background 0.22s, opacity 0.35s ease;
}
.hero-cta.hero-cta--visible { opacity: 1; pointer-events: auto; }
@media (hover: hover) {
  .hero-cta:hover { background: rgba(0,0,0,0.7); }
}

@media (max-width: 768px) {
  /* full-width, safe-area-aware bar instead of a floating bottom-right pill */
  .hero-cta {
    left: 24px;
    right: 24px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    text-align: center;
  }
  /* .hero-cta is 12px line-height + 10px top/bottom padding = 32px tall;
     reserve that plus 32px breathing room so the fixed bar never covers content */
  body:has(.hero-cta) {
    padding-bottom: calc(32px + 32px + env(safe-area-inset-bottom));
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  /* short landscape viewports (phone in landscape): the floating/full-width
     button eats too much vertical space, so hide it and drop the bottom
     reservation the 768px block above adds for it */
  .hero-cta { display: none; }
  body:has(.hero-cta) { padding-bottom: 0; }
}

/* ── INTRO ──────────────────────────────────── */
.section-intro {
  padding-block: 90px;
  border-top: 1px solid var(--border);
}
.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.intro-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.intro-text .eyebrow { margin-bottom: 4px; }
.intro-text p {
  font-size: var(--fs-body);
  line-height: 1.69;
  letter-spacing: 0.08em;
  color: var(--mid);
}
.intro-img { height: clamp(360px, 45vw, 560px); }

/* ── TAGLINE ────────────────────────────────── */
.section-tagline {
  padding-block: 90px;
  border-top: 1px solid var(--border);
}
.tagline-text {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.3;
  text-wrap: balance;
}

/* ── SPLIT SECTIONS ─────────────────────────── */
.section-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 62px;
}
.section-split::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 1320px;
  height: 1px;
  background: var(--border);
  padding-left: 62px;
  padding-right: 62px;
  box-sizing: border-box;
  background-clip: content-box;
  pointer-events: none;
}
.section-split--reverse { direction: rtl; }
.section-split--reverse > * { direction: ltr; }
.section-split--no-line::before { display: none; }
.section-split--wide {
  max-width: 1440px;
  padding-left: 65px;
  padding-right: 90px;
}
.section-split--wide::before {
  max-width: 1440px;
  padding-left: 65px;
  padding-right: 90px;
}
@media (min-width: 1025px) {
  /* shop.html blocks 2 & 3 used the base 1320px/62px box while block 1
     used --wide (1440px/65px-90px), so on desktop their image/text
     edges didn't line up with block 1's. Match --wide's box here only
     (mobile/tablet <=1024px keep the original base .section-split
     values untouched, since they're not in the ::before/padding-inline
     media-query exceptions .section-split--wide normally gets). */
  .shop-split {
    max-width: 1440px;
    padding-left: 65px;
    padding-right: 90px;
  }
}
.section-split--gap-below {
  padding-bottom: 90px;
}
.section-split--gap-above .split-img { margin-top: 90px; }
.section-split--gap-above .split-text { padding-top: 90px; }

.split-img { height: clamp(480px, 55vw, 720px); }

.split-text {
  padding: clamp(48px, 6vw, 100px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
}
.split-text > .btn-outline,
.split-text > .btn-ghost-light,
.split-text > .btn-solid-accent {
  align-self: flex-start;
}
.split-text h2 {
  font-family: var(--sans);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.11;
  letter-spacing: 0.06em;
  text-wrap: balance;
}
.split-text .lead-italic {
  font-family: var(--serif);
  font-size: var(--fs-body);
  font-style: italic;
  font-weight: 400;
  line-height: 1.65;
  color: var(--mid);
}
.split-text p {
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--stone);
}
/* on a dark background (e.g. .dark-wrap), swap the light-theme greys for cream tones */
.dark-wrap .split-text p { color: rgba(234,230,221,0.6); }
.dark-wrap .split-text h3 { color: rgba(234,230,221,0.85); }

/* ── QUOTE ──────────────────────────────────── */
.section-quote {
  padding-block: 90px;
}
.section-quote::before {
  content: '';
  display: block;
  height: 1px;
  background: var(--border);
  max-width: 1440px;
  margin-inline: auto;
  padding-left: 65px;
  padding-right: 90px;
  box-sizing: border-box;
  background-clip: content-box;
  margin-bottom: 90px;
}
.section-quote::after {
  content: '';
  display: block;
  height: 1px;
  background: var(--border);
  max-width: 1440px;
  margin-inline: auto;
  padding-left: 65px;
  padding-right: 90px;
  box-sizing: border-box;
  background-clip: content-box;
  margin-top: 90px;
}
.dark-wrap .section-quote::before,
.dark-wrap .section-quote::after {
  background: var(--cream);
}
.dark-wrap .section-quote blockquote { color: var(--cream); }
.section-quote--plain::before,
.section-quote--plain::after { display: none; }
.section-quote blockquote {
  font-family: var(--serif);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.55;
  text-wrap: balance;
}

/* ── WET-ROOM CROSSLINK ─────────────────────── */
/* Provisional styling — matched to .section-pro / .section-darksplit spacing
   and typography until a definitive design is supplied. */
.section-crosslink {
  padding-block: 90px;
  text-align: center;
}
.section-crosslink .container {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.crosslink-title {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-wrap: balance;
}
.crosslink-body {
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--stone);
}

/* ── BESPOKE CTA ─────────────────────────────── */
.section-cta {
  padding-block: 90px;
  border-top: 1px solid var(--border);
  background: var(--white);
}
.section-cta .container {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.cta-heading {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.11;
  letter-spacing: 0.06em;
  text-wrap: balance;
}

/* ── MATERIALS DARK ─────────────────────────── */
.section-dark {
  margin-top: 90px;
  padding-block: 90px;
  background: var(--dark);
  color: var(--cream);
}
.section-dark .container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.dark-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-top: 64px;
}
.dark-circle {
  display: inline-flex;
  text-decoration: none;
  transition: opacity 0.2s;
}
.dark-circle:hover { opacity: 0.7; }
.dark-circle img {
  display: block;
  height: 56px;
  width: auto;
}
.dark-heading {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 56px;
  letter-spacing: 0.06em;
}
.dark-lead {
  font-family: var(--serif);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(234,230,221,0.85);
  max-width: 640px;
}
.dark-body {
  font-size: var(--fs-body);
  line-height: 1.85;
  color: rgba(234,230,221,0.55);
  max-width: 440px;
  margin-left: auto;
}

/* ── LOGOS ──────────────────────────────────── */
.section-logos {
  padding-top: 36px;
  padding-bottom: 0;
  background: var(--white);
}
.section-logos::before {
  content: '';
  display: block;
  height: 1px;
  background: var(--border);
  max-width: 1440px;
  margin-inline: auto;
  padding-left: 65px;
  padding-right: 90px;
  box-sizing: border-box;
  background-clip: content-box;
  margin-top: -36px;
  margin-bottom: 90px;
}
.section-logos::after {
  content: '';
  display: block;
  height: 1px;
  background: var(--border);
  max-width: 1440px;
  margin-inline: auto;
  padding-left: 65px;
  padding-right: 90px;
  box-sizing: border-box;
  background-clip: content-box;
  margin-top: 90px;
}
.logos-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.logos-row span {
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--stone);
  opacity: 0.6;
}
.logos-row a { display: flex; align-items: center; opacity: 0.6; transition: opacity 0.2s; }
.logos-row a:hover, .logos-row a:focus-visible { opacity: 1; }
.logos-row img { height: 36px; width: auto; display: block; }

/* ── PROJECTS ───────────────────────────────── */
.section-materials::after {
  content: '';
  display: block;
  height: 1px;
  background: var(--border);
  max-width: 1440px;
  margin-inline: auto;
  padding-left: 65px;
  padding-right: 90px;
  box-sizing: border-box;
  background-clip: content-box;
  margin-top: 90px;
}

.section-projects { padding-block: 90px; }
.section-projects--material { padding-top: 102px; position: relative; }
.section-projects--material::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 1440px;
  height: 1px;
  background: var(--border);
  padding-left: 65px;
  padding-right: 90px;
  box-sizing: border-box;
  background-clip: content-box;
  pointer-events: none;
}

.projects-header {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  margin-bottom: 60px;
}
.projects-title {
  font-family: var(--sans);
  font-size: var(--fs-display);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.88;
  text-transform: uppercase;
}
.projects-intro {
  max-width: 560px;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--stone);
}

/* carousel */
.projects-carousel-wrap {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}
.projects-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 3px;
}
.projects-carousel::-webkit-scrollbar { display: none; }

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: var(--cream);
  border: 1px solid var(--border);
  color: var(--dark);
  width: 44px;
  height: 44px;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-btn:hover { background: var(--dark); color: var(--cream); }
.carousel-btn--prev { left: 16px; }
.carousel-btn--next { right: 16px; }

.project-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 0 0 calc(100vw / 4.5 - 3px);
  scroll-snap-align: start;
}
.project-img { position: relative; overflow: hidden; width: 100%; aspect-ratio: 3/4; }
.project-img img { width: 100%; height: 100%; transition: transform 0.7s cubic-bezier(.2,.6,.3,1); }
.project-card:hover .project-img img { transform: scale(1.04); }
.project-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 0.3s ease;
  z-index: 1;
  pointer-events: none;
}
.project-card:hover .project-img::before { background: rgba(0,0,0,0.2); }

.project-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.project-name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--fs-h4);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  max-width: 36ch;
  line-height: 1.6;
  color: var(--dark);
}
.project-material {
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--stone);
}
.project-material strong { color: var(--mid); font-weight: 700; }
@media (max-width: 1024px) {
  /* track's own inset matches the page margin used everywhere else under
     1024px, so the first (and, via scroll-padding, snapped) slide lines
     up with the rest of the content instead of sitting flush at 0 */
  .projects-carousel { padding-inline: 24px; scroll-padding-inline: 24px; }
}
@media (min-width: 1025px) {
  /* images stay full-bleed, but the caption underneath shouldn't sit
     flush against the screen edge */
  .project-meta { padding-left: 16px; }
}

/* ── FOOTER ─────────────────────────────────── */
.footer { position: relative; z-index: 160; background: var(--cream); color: var(--dark); border-top: 1px solid var(--border); }

.footer-top {
  max-width: 1440px;
  margin-inline: auto;
  padding: clamp(60px, 7vw, 100px) 90px clamp(60px, 7vw, 100px) 65px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
}
.footer-logo {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0.25em;
  margin-bottom: 16px;
}
.footer-tagline {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: rgba(234,230,221,0.4);
  max-width: 220px;
}
.footer-nav-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col h4 {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 6px;
}
.footer-col a {
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--mid);
  transition: color 0.18s;
}
.footer-col a:hover { color: var(--accent); }

/* ── RESPONSIVE ─────────────────────────────── */
@media (max-width: 768px) {
  .container,
  .nav-inner,
  .mat-grid, .phero, .pgrid, .ngrid, .showrooms,
  .dhero, .dintro, .dgallery, .dsections, .drelated,
  .contact-head, .contact-grid, .faq-wrap,
  .projects-header, .projects-grid {
    padding-inline: 24px;
  }
}

@media (max-width: 1024px) {
  .intro-grid { grid-template-columns: 1fr; }
  .intro-img { height: 400px; }
  .section-split { grid-template-columns: 1fr; }
  .section-split--reverse { direction: ltr; }
  .split-img { height: 400px; }
  .project-card { flex: 0 0 calc((100vw - 3px) / 2); }
  .footer-top { grid-template-columns: 1fr; gap: 48px; }
  .footer-nav-cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1200px), (hover: none) and (max-width: 1400px) {
  .nav-links { display: none; }
  .nav-links.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--nav-h);
    inset: var(--nav-h) 0 auto;
    background: var(--cream);
    border-bottom: 1px solid var(--border);
    padding: 24px;
    gap: 16px;
    align-items: flex-start;
  }
  .nav-toggle { display: flex; }
  .has-dropdown .dropdown { position: static; border: none; padding: 8px 0 0 12px; box-shadow: none; gap: 20px; }
}

@media (max-width: 680px) {
  .project-card { flex: 0 0 calc(100vw - 40px); }
  .footer-nav-cols { grid-template-columns: 1fr 1fr; }
}

/* ── NAV ACTIVE STATE ────────────────────────── */
.nav-links .is-current > a { color: var(--accent); }

/* ── LANGUAGE SWITCHER ───────────────────────── */
.nav-lang {
  display: flex;
  align-items: center;
  padding-left: clamp(10px, 1.4vw, 18px);
  border-left: 1px solid var(--border);
}
.nav-lang-trigger {
  cursor: pointer;
  font-size: var(--fs-body);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--dark);
}
.nav-lang-dropdown { left: auto; right: -21px; min-width: 0; padding: 16px 20px; }
.nav-lang-dropdown .dropdown-col { gap: 8px; }
.nav-lang-dropdown a,
.nav-lang-dropdown .is-active {
  font-size: var(--fs-body);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.nav-lang-dropdown a { color: var(--stone); }
.nav-lang-dropdown a:hover { color: var(--accent); }
.nav-lang-dropdown .is-active { color: var(--dark); font-weight: 400; }
@media (max-width: 1200px) {
  .nav-lang { border-left: none; padding-left: 0; padding-top: 12px; }
}

/* ── MOBILE MENU (hamburger) ─────────────────── */
/* full-screen Odilon red panel; items in the statement type style, in cream.
   `.nav` in front of the selectors beats the materials/professionals page overrides. */
.nav-social,
.nav-item-toggle,
.dropdown-overview,
.nav-lang-switcher-item { display: none; }
@media (max-width: 1200px), (hover: none) and (max-width: 1400px) {
  html.nav-open { overflow: hidden; }
  .nav .nav-links.is-open {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: calc(var(--nav-h) + 16px) 24px 24px;
    background: var(--accent);
    border: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* ~24px type / ~60px row height so About…Contact fit 390x844 without
     scrolling (was var(--fs-h2) ~30px / 42px line-height); shared by the
     plain <a> items and the has-dropdown rows, now a <button> on mobile */
  .nav .nav-links.is-open > li > a,
  .nav .nav-links.is-open .nav-item-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 60px;
    font-family: inherit;
    font-size: 24px;
    font-weight: 400 !important;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: none;
    color: var(--cream) !important;
    white-space: normal;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
  }
  .nav .nav-links.is-open .nav-item-link,
  .nav .nav-links.is-open .chevron,
  .nav .nav-links.is-open .nav-lang { display: none; }
  .nav .nav-links.is-open .nav-item-toggle { display: flex; }

  /* thin divider between rows, drawn on the row itself so the ~60px row
     height (not a big external gap) sets the rhythm between items */
  .nav .nav-links.is-open > li { align-self: stretch; }
  .nav .nav-links.is-open > li:not(.nav-social):not(.nav-lang):not(.nav-lang-switcher-item) {
    border-bottom: 1px solid rgba(244,240,232,0.3);
  }

  /* only the icon turns, around its own centre */
  .nav .nav-links.is-open .nav-item-toggle svg {
    flex-shrink: 0;
    transform-origin: 50% 50%;
    transition: transform 0.25s ease;
  }
  .nav .nav-links.is-open .is-sub-open > .nav-item-toggle svg { transform: rotate(180deg); }
  .nav .nav-links.is-open .is-sub-open > .dropdown {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 16px;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
  }
  /* first item in every submenu: link to the overview page (~44px tap target) */
  .nav .nav-links.is-open .dropdown-overview {
    display: flex !important;
    align-items: center;
    min-height: 44px;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    padding-left: 0 !important;
    color: var(--cream);
  }
  .nav .nav-links.is-open .dropdown-col { gap: 0; }
  .nav .nav-links.is-open .dropdown-col h4 {
    color: var(--cream);
    opacity: 0.6;
    margin-top: 8px;
  }
  /* ~16-18px, slightly indented, ~44px tap target */
  .nav .nav-links.is-open .dropdown-col a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-left: 12px;
    font-size: 17px;
    letter-spacing: 0.04em;
    color: var(--cream);
  }

  /* social links: 2-column text grid, last in the panel (after the
     language switcher below); not pinned to the panel's bottom edge */
  .nav .nav-links.is-open .nav-social {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 0;
    padding-top: 20px;
  }
  /* override the generic > li > a row rule (width:100%/min-height:60px
     /line-height:1.2): 40px tap height comes from padding against an
     explicit 22px line-height (9px + 22px + 9px = 40px), not a fixed
     height, so it grows from content rather than a hard-coded number */
  .nav .nav-links.is-open .nav-social a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    min-height: 0;
    padding: 9px 0;
    line-height: 22px;
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cream);
  }

  /* EN · NL · FR: right under Contact, above the social grid */
  .nav .nav-links.is-open .nav-lang-switcher-item {
    display: block;
    margin-top: 28px;
  }
  .nav-lang-switcher { display: flex; align-items: center; gap: 4px; }
  .nav-lang-switcher-link,
  .nav-lang-switcher .is-active {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    font-size: var(--fs-body);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--cream);
    opacity: 0.7;
  }
  .nav-lang-switcher .is-active { opacity: 1; font-weight: 700; }
  .nav-lang-switcher-sep { color: var(--cream); opacity: 0.4; }

  /* toggle stays above the full-screen panel */
  .nav-toggle { position: relative; z-index: 2; }
  .nav-toggle.is-open span { background: var(--cream); }
}

/* ── i18n: "to translate" marker on untranslated NL/FR placeholder pages ── */
.i18n-todo-bar {
  margin-top: var(--nav-h);
  background: #FBF3E6;
  border-bottom: 1px solid rgba(174, 82, 73, 0.25);
  color: var(--brick);
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 10px clamp(16px, 4vw, 48px);
}
/* the marker already clears the fixed nav, so the next hero's nav-offset is redundant */
.i18n-todo-bar + section[class*="hero"],
.i18n-todo-bar + .phero,
.i18n-todo-bar + .mhero,
.i18n-todo-bar + .dhero { padding-top: clamp(24px, 4vw, 56px); }

/* ── INNER PAGES ─────────────────────────────── */
.page-header {
  padding-top: calc(var(--nav-h) + clamp(60px, 8vw, 120px));
}
.page-header .container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--border);
}
.page-title {
  font-family: var(--serif);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.11;
  letter-spacing: 0.06em;
}
.page-lead {
  font-size: var(--fs-body);
  line-height: 1.69;
  letter-spacing: 0.08em;
  color: var(--stone);
  max-width: 600px;
}

.page-content {
  padding-block: 90px;
}
.page-content h2 {
  font-family: var(--serif);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.04em;
  max-width: 70ch;
  margin-top: 56px;
}
.page-content h2:first-child { margin-top: 0; }
.page-content .body {
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--stone);
  max-width: 70ch;
  margin-top: 16px;
}
.page-content ul {
  max-width: 70ch;
  margin-top: 16px;
  padding-left: 22px;
}
.page-content ul li {
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--stone);
  margin-bottom: 10px;
}
.page-content ul li:last-child { margin-bottom: 0; }

.page-coming {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.page-coming-text {
  font-family: var(--serif);
  font-size: var(--fs-body);
  font-weight: 400;
  font-style: italic;
  color: var(--stone);
  max-width: 520px;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .project-img img,
  .project-meta,
  .hero-cta,
  .btn-outline,
  .btn-ghost-light { transition: none; }
}

/* ════════════════════════════════════════════════
   HOME PAGE — matched to home.png
   ════════════════════════════════════════════════ */

/* accent eyebrow */
.eyebrow--num {
  color: var(--accent);
}
.eyebrow--num.eyebrow--light {
  color: var(--accent);
  opacity: 0.95;
}

/* bracketed numbered eyebrow */
.eyebrow--bracket {
  color: var(--accent);
  font-weight: 700 !important;
  font-size: var(--fs-body) !important;
  letter-spacing: 0.08em;
}
.eyebrow--bracket.eyebrow--light {
  color: var(--accent);
  opacity: 0.95;
  font-weight: 700 !important;
  font-size: var(--fs-body) !important;
  letter-spacing: 0.08em;
}

/* ── HERO overlay ───────────────────────────── */
/* home hero runs full-bleed to the very top, behind the transparent nav */
.hero--home { margin-top: 0; }
.hero--home .hero-img img, .hero--home .hero-img video { object-position: center; }
/* the solid nav covers the top of the video: centre the content in the visible part below it */
.hero--home .hero-overlay { padding-top: calc(24px + var(--nav-h)); }
.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 45px;
  padding: 24px;
  background: rgba(26,24,21,0.12);
}
@keyframes heroFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.hero-logo-img {
  display: block;
  width: 350px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin-bottom: -5px; /* 45px gap - 5px = 40px under the logo */
}
.hero-intro {
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.8;
  color: var(--cream);
  text-shadow: 0 1px 12px rgba(26,24,21,0.45);
}
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 2;
  display: block;
  padding: 8px;
  color: rgba(245,242,236,0.85);
  opacity: 0;
  animation: heroFadeIn 0.5s ease forwards;
  animation-delay: 2s;
  transition: color 0.22s;
}
.hero-scroll:hover,
.hero-scroll:focus-visible { color: var(--cream); outline: none; }
.hero-scroll svg { display: block; }
.hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-buttons a {
  min-width: var(--hero-btn-w, auto);
  text-align: center;
  transition: background 0.22s, color 0.22s, opacity 0.22s, border-color 0.22s;
}
.hero-buttons a:hover,
.hero-buttons a:focus-visible {
  background: rgba(255,255,255,0.6);
  color: #fff;
  border-color: transparent;
  outline: none;
}
/* the 2 top-level hero buttons (View materials / I want to...) are solid red;
   the dropdown submenu items keep the default cream style */
.hero-buttons > a,
.hero-buttons > .hero-dropdown > .hero-dropdown-trigger {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.hero-buttons > a:hover,
.hero-buttons > a:focus-visible,
.hero-buttons > .hero-dropdown > .hero-dropdown-trigger:hover,
.hero-buttons > .hero-dropdown > .hero-dropdown-trigger:focus-visible {
  background: rgba(255,255,255,0.5);
  color: #fff;
  border-color: transparent;
}
/* dropdown submenu buttons (Order samples / Project consultation / Order as a professional) */
.hero-dropdown-menu a {
  background: rgba(0,0,0,0.5);
  border-color: transparent;
}
.hero-dropdown { position: relative; }
.hero-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: max-content; /* shrink-to-fit around its widest button label, instead of
                          inheriting the trigger button's (narrower) width via left/right:0 */
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px; /* bridges the gap so hover isn't lost moving down to the menu */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
@media (hover: hover) {
  .hero-dropdown:hover .hero-dropdown-menu,
  .hero-dropdown:focus-within .hero-dropdown-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}
/* both buttons stretch (flex default) to the menu's shrink-to-fit width above,
   so they stay equal width to each other and to whichever label is longest */
.hero-dropdown-menu a { min-width: 225px; white-space: nowrap; text-align: center; }
@media (max-width: 768px) {
  .hero-dropdown-menu {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    padding-bottom: 0;
    margin-top: 0;
  }
  /* mobile hero: logo + the two submenu buttons only, in solid red */
  .hero-intro,
  .hero-buttons > a,
  .hero-dropdown-trigger { display: none; }
  .hero-dropdown-menu a {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }
}
@media (hover: none) {
  /* same flattened hero as the <=768px block above, but for any touch
     device regardless of width (phone or tablet): there's no hover to
     reveal the dropdown on, so show both options permanently instead */
  .hero-dropdown-menu {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    padding-bottom: 0;
    margin-top: 0;
  }
  .hero-intro,
  .hero-buttons > a,
  .hero-dropdown-trigger { display: none; }
  .hero-dropdown-menu a {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }
}
@media (hover: none) and (min-width: 769px) {
  /* above the stacked phone width: show both options side by side,
     centred, with the same gap as .hero-buttons above it */
  .hero-dropdown-menu {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
  }
  /* equal width regardless of label length: the inherited
     var(--hero-btn-w) floor (225px, sized for "View materials"/"Talk
     to us") is narrower than some EN/NL/FR labels here (longest
     measured: "Demander un échantillon" at 275px), so both buttons
     would render at different widths without this */
  .hero-dropdown-menu a { min-width: 285px; }
}

/* ── STATEMENT ──────────────────────────────── */
.section-statement {
  padding-top: 200px;
  padding-bottom: 200px;
}
.section-statement::before {
  content: '';
  display: block;
  height: 1px;
  background: var(--border);
  max-width: 1440px;
  margin-inline: auto;
  padding-left: 65px;
  padding-right: 90px;
  box-sizing: border-box;
  background-clip: content-box;
  margin-top: -300px;
  margin-bottom: 300px;
}
.section-statement .eyebrow--num { margin-bottom: 28px; }
.statement {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 56px;
  letter-spacing: 0.06em;
  max-width: none;
  color: var(--dark);
}
.section-statement .statement {
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 56px;
  letter-spacing: 0.06em;
  max-width: none;
}
.statement--pro {
  font-family: var(--sans);
  font-weight: 400;
  font-style: normal;
  font-size: var(--fs-h2);
  line-height: 56px;
  letter-spacing: 0.06em;
  max-width: none;
}
@media (max-width: 768px) {
  .statement,
  .section-statement .statement,
  .statement--pro,
  .dark-heading { line-height: 42px; }
  /* padding-top/-bottom: 200px was unchanged at every breakpoint, leaving
     a disproportionate gap above the "[1] About" text and before the
     Wall/Floor Finishes tiles on mobile (same pattern as
     .section-materials--home, see Fix 4) */
  .section-statement { padding-top: 90px; padding-bottom: 90px; }
  /* ::before is section-statement's divider line (margin-top: -300px
     pulls it 300px above the section's own top edge, i.e. deep inside
     the full-bleed hero video, where its faint 1px/0.12-opacity line
     isn't perceptible anyway). Changing padding-top doesn't move it --
     its position is set relative to the section's own top edge, which
     padding never moves -- but hiding it removes any chance of it
     reading as a stray line inside the hero once the section's own
     content sits closer to it. */
  .section-statement::before { display: none; }
}

/* ── WALL / FLOOR DUO ───────────────────────── */
.section-duo { padding-bottom: 0; }
.duo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1.4vw, 18px);
}
.duo-item {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4/5;
}
.duo-item img { transition: transform 0.7s cubic-bezier(.2,.6,.3,1); }
.duo-item:hover img { transform: scale(1.04); }
.duo-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 0.3s ease;
  z-index: 1;
  pointer-events: none;
}
.duo-item:hover::before { background: rgba(0,0,0,0.2); }
.duo-label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  /* layered shadow: a tight, higher-opacity pass for edge contrast against
     the photo's lighter areas, plus the original soft glow underneath */
  text-shadow: 0 1px 3px rgba(26,24,21,0.8), 0 1px 12px rgba(26,24,21,0.45);
  transition: color 0.25s, font-weight 0.25s;
}
.duo-item:hover .duo-label {
  color: var(--cream);
  font-weight: 700;
}

/* ── MATERIALS ──────────────────────────────── */
.section-materials {
  padding-top: 90px;
  padding-bottom: 0;
}
.section-materials::before {
  content: '';
  display: block;
  height: 1px;
  background: var(--border);
  max-width: 1440px;
  margin-inline: auto;
  padding-left: 65px;
  padding-right: 90px;
  box-sizing: border-box;
  background-clip: content-box;
  margin-top: -90px;
  margin-bottom: 90px;
}
.section-materials--home { padding-top: 200px; }
.section-materials--home::before { display: none; }
@media (max-width: 768px) {
  /* 200px was sized for desktop; on mobile it left a large dead gap below
     the wall/floor finishes tiles, since the divider it used to clear
     (::before, disabled above) isn't there to justify it. Match the
     standard .section-materials top padding instead. */
  .section-materials--home { padding-top: 90px; }
}
.materials-note {
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 21px;
  color: var(--mid);
  max-width: 380px;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.materials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
.materials-list-wrap { display: flex; flex-direction: column; gap: 22px; }
.materials-list { list-style: none; }
.materials-list li { line-height: 1.18; }
.materials-list a {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-h2);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--stone);
  transition: color 0.18s;
}
.materials-list a:hover { color: var(--dark); }
.materials-swatch {
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
}
.materials-swatch img { transition: opacity 0.35s ease; }
.materials-swatch--crossfade,
.materials-swatch-about--crossfade,
.texture-swatch--crossfade {
  position: relative;
}
.swatch-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.swatch-layer.is-active {
  opacity: 1;
}
.materials-swatch::after {
  content: 'View more';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 1px 12px rgba(26,24,21,0.45);
  opacity: 0;
  transition: opacity 0.25s;
}
.materials-grid:has(.materials-list a:hover) .materials-swatch::after {
  opacity: 1;
}

/* ── PROJECTS overrides ─────────────────────── */
.projects-header .eyebrow--num { margin-bottom: -8px; }
.projects-title {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-display);
  letter-spacing: 0;
  line-height: 0.88;
  text-transform: uppercase;
}
.projects-cta {
  display: flex;
  justify-content: center;
  margin-top: 90px;
}

/* ── AS SEEN IN ─────────────────────────────── */
.section-logos .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.logos-label {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.section-logos .logos-row { justify-content: center; gap: clamp(28px, 5vw, 64px); width: 100%; }
.section-logos .logos-row span { font-size: clamp(13px, 1.4vw, 18px); opacity: 0.5; }

/* ── ATELIER D'O ────────────────────────────── */
.section-atelier {
  background: var(--dark);
  color: var(--cream);
}
.atelier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1080px;
  align-items: stretch;
}
.atelier-text {
  grid-column: 1;
  grid-row: 1;
  padding: clamp(56px, 6vw, 90px) clamp(32px, 6vw, 96px);
  /* left edge lines up with the site container, like .phero--container-align */
  padding-left: max(65px, calc((100vw - 1440px) / 2 + 65px));
  display: flex;
  flex-direction: column;
  gap: 26px;
  justify-content: center;
}
.atelier-img { grid-column: 2; grid-row: 1; }
.atelier-title {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.11;
  letter-spacing: 0.06em;
  max-width: 480px;
  text-wrap: balance;
}
.atelier-body {
  font-size: var(--fs-body);
  line-height: 1.85;
  color: rgba(234,230,221,0.6);
  max-width: 460px;
}
.atelier-text .btn-ghost-light { align-self: flex-start; margin-top: 6px; }
.atelier-img { min-height: 340px; height: 100%; overflow: hidden; }

/* ── FOR PROFESSIONALS ──────────────────────── */
.section-pro {
  padding-block: 90px;
}
.section-pro::before {
  content: '';
  display: block;
  height: 1px;
  background: var(--border);
  max-width: 1440px;
  margin-inline: auto;
  padding-left: 65px;
  padding-right: 90px;
  box-sizing: border-box;
  background-clip: content-box;
  margin-top: -90px;
  margin-bottom: 90px;
}
.section-pro--home { padding-top: 200px; }
.section-pro--home::before { margin-top: -200px; margin-bottom: 200px; }
.section-pro .eyebrow--num { margin-bottom: 28px; }
.section-pro .statement { margin-bottom: clamp(48px, 6vw, 84px); }
.pro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.pro-img { overflow: hidden; }
.pro-img--tall { aspect-ratio: 3/4; }
.pro-col { display: flex; flex-direction: column; gap: 28px; }
.pro-col .pro-img { aspect-ratio: 3/2; }
.pro-body {
  font-size: var(--fs-body);
  line-height: 1.85;
  color: var(--stone);
  max-width: 420px;
}
.pro-col .btn-outline { align-self: flex-start; }

/* ── LET'S TALK MATERIALS ───────────────────── */
.section-talk {
  padding-block: 90px;
  text-align: center;
}
.section-talk .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.section-talk .btn-outline {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.section-talk .btn-outline:hover,
.section-talk .btn-outline:focus-visible {
  background: rgba(0,0,0,0.7);
  color: #fff;
  border-color: rgba(0,0,0,0.7);
  outline: none;
}
body.pro-detail-page .section-talk .container {
  border-top: 1px solid var(--border);
  padding-top: 90px;
}
.drelated + .section-talk,
.dark-wrap + .section-talk,
#news + .section-talk,
.faq-wrap + .section-talk {
  padding-top: 0;
}
.drelated + .section-talk .container,
#news + .section-talk .container,
.faq-wrap + .section-talk .container {
  border-top: 1px solid var(--border);
  padding-top: 90px;
}
.talk-title {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-h2);
  letter-spacing: 0.06em;
  line-height: 1.11;
}
.talk-sub {
  font-size: var(--fs-body);
  line-height: 1.69;
  letter-spacing: 0.08em;
  color: var(--mid);
  max-width: 520px;
}
.btn-row--center { justify-content: center; }
@media (max-width: 440px) {
  /* below this width "Contact us" and "Visit a showroom" already wrap
     onto their own rows (flex-wrap, no explicit breakpoint before this);
     give them equal width here instead of each sizing to its own text */
  .section-talk .btn-row {
    flex-direction: column;
    align-items: center;
  }
  .section-talk .btn-row .btn-outline {
    width: 250px;
    text-align: center;
  }
}

/* ── FEATURED PROJECT ───────────────────────── */
.section-feature {
  position: relative;
  height: clamp(360px, 42vw, 560px);
  overflow: hidden;
}
.section-feature > img { width: 100%; height: 100%; object-fit: cover; }
.feature-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(28px, 5vw, 72px);
  background: linear-gradient(rgba(26,24,21,0.28), rgba(26,24,21,0.12));
}
.feature-link {
  font-size: var(--fs-btn);
  font-weight: var(--fw-btn);
  line-height: 1;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--cream);
  border-bottom: 1px solid rgba(245,242,236,0.5);
  padding-bottom: 4px;
}
.feature-title {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-h3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream);
  text-align: center;
  text-shadow: 0 2px 18px rgba(26,24,21,0.4);
}

/* ── FOOTER additions ───────────────────────── */
.footer-top { grid-template-columns: 2fr 1.2fr; align-items: start; }
.footer-newsletter h4 {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 14px;
}
.newsletter-form {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
}
.newsletter-form input {
  flex: 1;
  background: none;
  border: none;
  padding: 14px 16px;
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--dark);
}
.newsletter-form input::placeholder { color: var(--stone); }
.newsletter-form input:focus { outline: none; }
.newsletter-form button {
  background: none;
  border: none;
  border-left: 1px solid var(--border);
  padding: 14px 18px;
  color: var(--mid);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.newsletter-form button:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.newsletter-note {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--stone);
  margin-top: 12px;
}
.newsletter-note a { color: var(--stone); text-decoration: underline; }
.newsletter-note a:hover { color: var(--dark); }

.footer-wordmark {
  background: var(--cream);
  color: var(--dark);
  overflow: hidden;
  padding-top: 48px;
  padding-bottom: 30px;
}
.wordmark-lines {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-inline: 62px;
}
.wordmark-logo {
  display: block;
  width: 100%;
  aspect-ratio: 4212 / 1038;
  background-color: var(--accent);
  -webkit-mask-image: var(--wordmark-src);
  mask-image: var(--wordmark-src);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
.wordmark-logo + .wordmark-logo {
  margin-top: calc(10px - 7.265%);
}
.footer-credits {
  max-width: 1440px;
  margin: 0 auto;
  padding: 30px 90px 0 65px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
}
/* logo stays left; copyright now takes the right-hand slot the removed
   design credit link used to occupy */
.footer-credits span { text-align: right; justify-self: end; }
.footer-sponsor-logo { height: 53px; width: auto; justify-self: start; }
.footer-credits span {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
}
@media (max-width: 600px) {
  /* logo / copyright stack instead of sharing the row, centred to match
     the centred wordmark above; the 4px margin under the logo adds to
     the 12px grid gap for a slightly bigger 16px gap after the logo. */
  .footer-credits {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 12px;
  }
  .footer-sponsor-logo { justify-self: center; margin-bottom: 4px; }
  .footer-credits span { text-align: center; justify-self: center; }
}

/* ── HOME RESPONSIVE ────────────────────────── */
@media (max-width: 1024px) {
  .atelier-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .atelier-text { grid-column: 1; grid-row: auto; }
  .atelier-img { grid-column: 1; grid-row: auto; aspect-ratio: 4/3; min-height: 0; height: auto; }
  .pro-grid { grid-template-columns: 1fr; }
  .pro-img--tall { aspect-ratio: 4/3; }
  .footer-top { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .atelier-text { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 680px) {
  .duo-grid { grid-template-columns: 1fr; }
  .materials-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ════════════════════════════════════════════════
   INNER PAGES — About / Materials / Projects / Atelier
   (matched to about.png, materials.png, projects.png, atelier-do.png)
   ════════════════════════════════════════════════ */

/* ── PAGE HERO (title left, image right) ─────── */
.phero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  height: 100vh;
  max-height: 100vh;
}
.phero-text {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-left: 62px;
  padding-right: clamp(32px, 5vw, 80px);
  padding-top: calc(var(--nav-h) + clamp(36px, 5vw, 80px));
  padding-bottom: clamp(40px, 5vw, 80px);
  max-width: calc(1320px / 2);
  margin-left: auto;
}
.phero-title {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: 0;
  text-transform: uppercase;
}
.phero-title-sub {
  display: block;
  font-size: var(--fs-lead);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  line-height: 1.4;
  margin-top: 12px;
}
.phero-title--bold {
  font-weight: 700;
}
.phero-intro {
  max-width: 42ch;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--stone);
}
.phero--container-align .phero-text {
  padding-left: 0;
  max-width: none;
  margin-left: max(65px, calc((100vw - 1440px) / 2 + 65px));
}
.phero--container-align .phero-title {
  margin-top: auto;
}
.phero--gap-below {
  margin-bottom: 90px;
}
.phero--title-gap-160 .phero-text {
  padding-bottom: 160px;
}
.phero-img {
  position: relative;
  overflow: hidden;
  height: 100%;
  aspect-ratio: unset;
}
.phero-img img { width: 100%; height: 100%; object-fit: cover; }
.phero-cta {
  position: fixed;
  bottom: 40px;
  right: clamp(24px, 5vw, 64px);
  z-index: 150;
  font-size: var(--fs-btn);
  font-weight: var(--fw-btn);
  line-height: 1;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--cream);
  background: rgba(26,24,21,0.55);
  padding: 14px 26px;
  transition: background 0.22s;
}
.phero-cta:hover { background: rgba(26,24,21,0.8); }

/* centred variant (Materials) */
.phero--center {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: 24px;
  padding-inline: 62px;
}
.phero--center .phero-text {
  padding-left: 0;
  padding-right: 0;
  align-items: center;
}
.phero--center .phero-title { max-width: 16ch; }
.phero-lead {
  max-width: none;
  font-size: var(--fs-body);
  line-height: 1.69;
  letter-spacing: 0.08em;
  color: var(--stone);
}

/* ── MATERIALS CARD GRID ─────────────────────── */
.mat-grid {
  max-width: 1320px;
  margin-inline: auto;
  padding: clamp(24px, 4vw, 56px) 100px clamp(48px, 6vw, 90px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 48px) clamp(16px, 2vw, 28px);
}
.mat-card { display: flex; flex-direction: column; }
.mat-card .mat-img { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.mat-card .mat-img img { transition: transform 0.7s cubic-bezier(.2,.6,.3,1); }
.mat-card:hover .mat-img img { transform: scale(1.04); }
.mat-card .mat-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 0.3s ease;
  z-index: 1;
  pointer-events: none;
}
.mat-card:hover .mat-img::before { background: rgba(0,0,0,0.2); }
.mat-card h3 {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-h4);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 20px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.mat-card p {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--stone);
  max-width: 30ch;
}

/* ── COLOUR COLLECTIONS (dark) ───────────────── */
.section-collections {
  background: var(--dark);
  color: var(--cream);
  padding-block: 90px;
}
.section-collections .container { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px); }
.collections-statement {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.3;
  max-width: none;
}
.collections-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.collections-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.collections-list li {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-h3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(234,230,221,0.55);
}
.collections-list li:first-child { color: var(--cream); }
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 1023px) {
  .swatch-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .swatch-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}
.swatch {
  aspect-ratio: 1;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.swatch span {
  position: absolute;
  bottom: 6px;
  left: 8px;
  z-index: 2;
  font-size: 7px;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(26,24,21,0.4);
}
.mblock .swatch { cursor: pointer; }
.mblock .swatch span { color: rgba(255,255,255,0.9); font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
.mblock .swatch:hover span { opacity: 0; }
.mblock .swatch::before {
  content: '';
  position: absolute;
  inset: 0;
  /* permanent contrast overlay for the label, so it reads over light
     swatch photos too, not just the hover-darken this used to be */
  background: linear-gradient(to top, rgba(0,0,0,0.35), transparent 55%);
  transition: background 0.3s ease;
  z-index: 1;
  pointer-events: none;
}
.mblock .swatch:hover::before {
  background:
    linear-gradient(to top, rgba(0,0,0,0.35), transparent 55%),
    rgba(0,0,0,0.35);
}
.mblock .swatch::after {
  content: 'View colour';
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 1px 12px rgba(26,24,21,0.45);
  opacity: 0;
  transition: opacity 0.25s;
  text-align: center;
  padding: 4px;
}
.mblock .swatch:hover::after { opacity: 1; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26,24,21,0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  padding: 24px;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox-inner { max-width: 420px; width: 100%; text-align: center; }
.lightbox-inner img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.lightbox-inner p {
  margin-top: 20px;
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
}
.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(234,230,221,0.4);
  background: transparent;
  color: var(--cream);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.lightbox-close:hover { background: var(--cream); color: var(--dark); }
.collections-cats {
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(234,230,221,0.5);
  margin-top: 24px;
}
.collections-cats strong { color: var(--cream); font-weight: 400; }

/* ── DARK SPLIT (Projects "work with our materials") ── */
.section-darksplit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--dark);
  color: var(--cream);
  align-items: stretch;
  height: 765px;
}
.section-darksplit--reverse { direction: rtl; }
.section-darksplit--reverse > * { direction: ltr; }
.darksplit-img { min-height: 360px; overflow: hidden; }
.darksplit-text {
  padding: clamp(48px, 6vw, 110px) clamp(32px, 6vw, 96px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
}
.darksplit-text h2 {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: 0;
}
.darksplit-text h3 {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(234,230,221,0.85);
}
.darksplit-text p {
  font-size: var(--fs-body);
  line-height: 1.85;
  color: rgba(234,230,221,0.6);
  max-width: 440px;
}
.darksplit-text .btn-ghost-light,
.darksplit-text .btn-solid-accent { align-self: flex-start; }

/* ── PROJECTS PAGE / SIMILAR PROJECTS ────────── */
.section-projects--page { padding-top: 0; }
.projects-foot { display: flex; justify-content: center; padding: 90px 0; }
.section-similar { padding-block: 90px; position: relative; }
.section-similar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 1440px;
  height: 1px;
  background: var(--border);
  padding-left: 65px;
  padding-right: 90px;
  box-sizing: border-box;
  background-clip: content-box;
  pointer-events: none;
}
.section-similar .container { display: flex; flex-direction: column; gap: 32px; }
.section-similar .eyebrow--num { margin-bottom: -8px; }
.section-similar .pcard { display: flex; flex-direction: column; gap: 18px; }

/* ── CUSTOM DEVELOPMENT (alternating, Atelier) ── */
.dev-text h2,
.split-text h3,
.split-text .split-label {
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid);
}
.split-text .split-label { line-height: inherit; text-wrap: wrap; }

/* ── INNER-PAGE RESPONSIVE ───────────────────── */
@media (max-width: 1024px) {
  .phero { grid-template-columns: 1fr; gap: 32px; }
  .phero-img { aspect-ratio: 16/10; }
  .mat-grid { grid-template-columns: repeat(2, 1fr); }
  .collections-grid { grid-template-columns: 1fr; }
  .section-darksplit { grid-template-columns: 1fr; height: auto; }
}
@media (max-width: 680px) {
  .mat-grid { grid-template-columns: 1fr; }
}

/* ── PORTFOLIO GRID (Projects page, Similar projects) ── */
.pgrid {
  max-width: 1440px;
  margin-inline: auto;
  padding: 0 90px 0 65px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 28px);
}
.pcard { display: block; }
.pcard-img { position: relative; aspect-ratio: 1/1; overflow: hidden; }
.section-similar .pcard-img { aspect-ratio: 3/4; }
.pcard-img img { transition: transform 0.7s cubic-bezier(.2,.6,.3,1); }
.pcard:hover .pcard-img img { transform: scale(1.04); }
.pcard-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 0.3s ease;
  z-index: 1;
  pointer-events: none;
}
.pcard:hover .pcard-img::before { background: rgba(0,0,0,0.2); }
.pcard h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--fs-h4);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  max-width: 36ch;
  line-height: 1.6;
  color: var(--dark);
  margin: 16px 0 4px;
}
.pcard p {
  font-size: var(--fs-body);
  letter-spacing: 0.04em;
  color: var(--stone);
}
.pcard p strong { color: var(--mid); font-weight: 400; }
.pcard-type {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 16px 0 4px;
}
.pcard-type + h3 { margin-top: 4px; }
.pcard-architect {
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--stone);
  margin-top: 2px;
}
@media (max-width: 1024px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .pgrid { grid-template-columns: 1fr; } }
@media (max-width: 768px)  { .pgrid { padding-inline: 24px; } }

/* ════════════════════════════════════════════════
   MATERIAL DETAIL  (matched to material-detail.png)
   ════════════════════════════════════════════════ */
.mhero {
  position: relative;
  height: 765px;
  margin-top: var(--nav-h);
  overflow: hidden;
}
.mhero > img { width: 100%; height: 100%; object-fit: cover; }
.mhero-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26,24,21,0.22);
}
.mhero-title {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 0.88;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 2px 24px rgba(26,24,21,0.35);
}
.mhero-cta {
  position: fixed; bottom: 40px; right: clamp(24px, 5vw, 64px); z-index: 150;
  font-size: var(--fs-btn); font-weight: var(--fw-btn); line-height: 1; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--cream); background: rgba(26,24,21,0.55); padding: 14px 26px;
  transition: background 0.22s;
}
.mhero-cta:hover { background: rgba(26,24,21,0.8); }

/* intro */
.mintro { padding-bottom: 90px; }
.mintro > .container { border-top: 1px solid var(--border); padding-top: 90px; }
.mintro-head {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--fs-h4);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  max-width: 36ch;
  line-height: 1.6;
  margin-bottom: clamp(36px, 4vw, 60px);
}
.mintro-cols {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
}
.mintro-cols h4 {
  font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
.mintro-cols p { font-size: var(--fs-body); line-height: 1.8; color: var(--stone); }
.mintro-apps {
  margin-top: clamp(32px, 4vw, 52px);
  font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mid);
}
.mintro-apps .lbl { color: var(--stone); margin-right: 12px; }
.mintro-btns { margin-top: clamp(32px, 4vw, 52px); }

/* texture & colour blocks reuse .materials-* / .swatch-grid; light colour block: */
.mblock { padding-bottom: 90px; }
.mblock > .container { border-top: 1px solid var(--border); padding-top: 90px; }
.mblock-grid {
  display: grid;
  grid-template-columns: minmax(0, 520px) 1fr;
  gap: 0;
  align-items: start;
}
.mblock-grid > :first-child {
  padding-right: clamp(32px, 4vw, 72px);
}
.mblock-grid--swatch { grid-template-columns: minmax(0, 520px) 1fr; }
.mlist { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.mlist li {
  font-family: var(--sans); font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 26px;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--stone);
}
.mlist li[data-swatch], .mlist li[data-category] { cursor: pointer; transition: color 0.18s; }
.mlist li[data-swatch]:hover, .mlist li[data-category]:hover { color: var(--dark); }
.mlist li.is-active { color: var(--dark); }
.mblock-texture-copy {
  max-width: 480px;
  margin-bottom: 18px;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--stone);
}
.mblock-colour-copy {
  max-width: 480px;
  margin-bottom: 32px;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--stone);
}
.mblock-cats {
  grid-column: 2; margin-top: 20px;
  font-size: var(--fs-body); font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: var(--stone);
}
.mblock-cats strong { color: var(--mid); font-weight: 400; }
.mblock-cats strong a { color: #ACACAC; text-decoration: underline; text-underline-offset: 2px; transition: color 0.18s; }
.mblock-cats strong a:hover { color: var(--accent); }

@media (max-width: 768px) {
  .mintro-cols { grid-template-columns: 1fr; }
  .mblock-grid, .mblock-grid--swatch { grid-template-columns: 1fr; }
  .mblock-grid > :first-child { padding-left: 24px; padding-right: 24px; }
  .mblock-cats { grid-column: 1; }
  .mhero { height: 360px; }
}

/* ════════════════════════════════════════════════
   FOR PROFESSIONALS  (matched to installers.png)
   ════════════════════════════════════════════════ */
.dark-wrap { background: var(--dark); color: var(--cream); margin-bottom: 90px; }

.phero--dark { background: var(--dark); color: var(--cream); margin: 0 auto; }
.phero--dark.phero--gap-below { margin-bottom: 90px; }
.phero--dark .phero-title { color: var(--cream); }
.phero--dark .eyebrow { color: rgba(234,230,221,0.5); }

/* certified installer block */
.certified { padding-block: 90px; }
.certified-badge {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; margin-bottom: clamp(40px, 5vw, 72px);
}
.certified-badge-img { width: clamp(220px, 22vw, 300px); height: auto; aspect-ratio: 1445 / 1398; }
.certified-grid {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(36px, 5vw, 80px); align-items: center;
}
.certified-text p { font-size: var(--fs-body); line-height: 1.85; color: rgba(234,230,221,0.6); max-width: 420px; margin-bottom: 24px; }
.europe-map { width: 100%; height: auto; aspect-ratio: 600 / 520; overflow: visible; }
.certified-map { width: 100%; height: auto; aspect-ratio: 967 / 596; object-fit: contain; display: block; }
.certified-map-wrap { position: relative; }
.certified-map-wrap .map-pin {
  position: absolute;
  width: 10px; height: 10px;
  transform: translate(-50%, -50%);
}
.certified-map-wrap .map-pin-dot {
  display: block;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--brick);
}
.europe-map-pin { fill: var(--brick); }
.europe-map-pin-ring { fill: none; stroke: var(--brick); stroke-width: 1.5; opacity: 0.6; }
@media (max-width: 1024px) { .certified-grid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════
   FAQ  (matched to faq.png)
   ════════════════════════════════════════════════ */
.faq-wrap {
  max-width: 1440px; margin-inline: auto;
  padding: calc(var(--nav-h) + clamp(48px, 6vw, 90px)) 90px 90px 65px;
  display: grid; grid-template-columns: 1fr 2fr; gap: clamp(40px, 6vw, 90px);
}
.faq-head .eyebrow { margin-bottom: 16px; }
.faq-title {
  font-family: var(--sans); font-weight: 400;
  font-size: var(--fs-h1); line-height: 1.08; letter-spacing: 0; text-transform: uppercase;
}
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-item summary {
  list-style: none; cursor: pointer;
  padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  font-size: var(--fs-h4); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dark);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 18px; font-weight: 400; color: var(--stone); transition: transform 0.2s; }
.faq-item[open] summary::after { content: '–'; }
.faq-item summary:hover { color: var(--accent); }
.faq-answer {
  padding: 0 0 26px; max-width: 62ch;
  font-size: var(--fs-body); line-height: 1.8; color: var(--stone);
}
.faq-answer p + p { margin-top: 14px; }
@media (max-width: 768px) { .faq-wrap { grid-template-columns: 1fr; gap: 24px; } }

/* ════════════════════════════════════════════════
   NEWS  (matched to news.png)
   ════════════════════════════════════════════════ */
.ngrid {
  max-width: 1320px; margin-inline: auto;
  padding: clamp(8px, 2vw, 24px) 100px clamp(48px, 6vw, 90px);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 3.5vw, 56px) clamp(16px, 2vw, 28px);
}
#news .ngrid { padding-bottom: 0; }
.ncard { display: block; }
.ncard-img { position: relative; aspect-ratio: 1/1; overflow: hidden; }
.ncard-img img { transition: transform 0.7s cubic-bezier(.2,.6,.3,1); }
.ncard:hover .ncard-img img { transform: scale(1.04); }
.ncard-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 0.3s ease;
  z-index: 1;
  pointer-events: none;
}
.ncard:hover .ncard-img::before { background: rgba(0,0,0,0.2); }
.ncard-date {
  margin-top: 16px; font-size: var(--fs-small); font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
}
.ncard-date span { color: var(--stone); margin-left: 8px; }
.ncard h3 {
  margin: 10px 0 8px; font-size: var(--fs-h4); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  line-height: 1.4; color: var(--dark);
  padding-top: 12px; border-top: 1px solid var(--border);
}
.ncard p { font-size: var(--fs-body); line-height: 1.7; color: var(--stone); }
.ncard .readmore {
  display: inline-block; margin-top: 14px;
  font-size: var(--fs-small); font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dark); border-bottom: 1px solid var(--border); padding-bottom: 3px;
}
.ncard:hover .readmore { color: var(--accent); }
/* stays 3 columns from desktop all the way to the 680px mobile
   breakpoint below - these grids only ever hold exactly 3 cards
   (slice: 0, 3), so a 2-column stage just left a gap next to the
   3rd card instead of filling the row */
@media (max-width: 680px) { .ngrid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════
   CONTACT  (matched to contact.png)
   ════════════════════════════════════════════════ */
.contact-head {
  max-width: 1440px; margin-inline: auto;
  padding: calc(var(--nav-h) + clamp(40px, 5vw, 80px)) 90px clamp(32px, 4vw, 56px) 65px;
}
.contact-head .eyebrow { margin-bottom: 16px; }
.contact-head h1 {
  font-family: var(--sans); font-weight: 400; font-size: var(--fs-h1);
  line-height: 1.11; letter-spacing: 0.06em;
}
.contact-head p { margin-top: 16px; max-width: 46ch; font-size: var(--fs-body); line-height: 1.69; letter-spacing: 0.08em; color: var(--stone); }
.contact-head p strong { color: var(--mid); font-weight: 400; }

.contact-grid {
  max-width: 1440px; margin-inline: auto;
  padding: 0 90px clamp(56px, 7vw, 100px) 65px;
  display: grid; grid-template-columns: 1fr 2fr; gap: clamp(36px, 5vw, 80px); align-items: start;
}
.contact-addr h4 { font-family: var(--sans); font-weight: 700; font-size: var(--fs-h4); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 16px; }
.contact-addr p { font-size: var(--fs-body); line-height: 1.9; color: var(--stone); }
.cform { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cform .full { grid-column: 1 / -1; }
.cform input:not([type="radio"]), .cform select, .cform textarea {
  width: 100%; background: #fff; border: 1px solid var(--border);
  padding: 13px 14px; font-family: var(--sans); font-size: var(--fs-body); font-weight: 400; color: var(--dark);
  letter-spacing: 0.08em;
  transition: border-color 0.18s, background 0.18s;
}
.cform textarea { min-height: 80px; resize: vertical; }
.cform input::placeholder, .cform textarea::placeholder { color: var(--stone); letter-spacing: 0.08em; }
.cform select {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  color: var(--stone);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 5.5l5 5 5-5' fill='none' stroke='%231A1815' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.cform select:valid { color: var(--dark); }
.cform input:not([type="radio"]):focus, .cform select:focus, .cform textarea:focus { outline: none; border-color: var(--dark); background: var(--white); }
@media (max-width: 768px) {
  /* var(--fs-body) is 13px; below 16px iOS Safari auto-zooms in on focus */
  .cform input:not([type="radio"]), .cform select, .cform textarea { font-size: 16px; }
  /* match the "Type of client" label + radio options to the same size as
     the fields above (letter-spacing now matches the fields at every
     width via the base rules below, not just on mobile) */
  .cform-type-label, .cform-type label { font-size: 16px; }
}
/* Type of client: full-width row with radio buttons, styled like a field */
.cform-type {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px;
  background: #fff; border: 1px solid var(--border); padding: 13px 14px;
  font-size: var(--fs-body); color: var(--dark);
}
.cform-type-label { color: var(--stone); margin-right: 8px; letter-spacing: 0.08em; }
.cform-type label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; letter-spacing: 0.08em; }
.cform-type input { margin: 0; width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; }
@media (max-width: 599px) {
  /* label on its own row, then the 3 options stacked and left-aligned;
     same white box/padding/font-size as above 600px, just re-flowed */
  .cform-type { flex-direction: column; align-items: flex-start; gap: 0; }
  /* ~8px between the label and the first option; the options themselves
     sit flush (container gap:0) for a more compact stack */
  .cform-type-label { margin-right: 0; margin-bottom: 8px; }
  .cform-type label { min-height: 40px; }
}
.cform-actions { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.cform-actions .btn-send {
  flex: 1; min-width: 200px; background: var(--accent); border: 1px solid var(--accent);
  padding: 14px; font-family: var(--sans); font-size: var(--fs-btn); font-weight: var(--fw-btn); line-height: 1; letter-spacing: 0.20em;
  text-transform: uppercase; color: #fff; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.cform-actions .btn-send:hover { background: #000; border-color: #000; color: #fff; }
.cform-actions .btn-consult {
  background: var(--dark); color: var(--cream); border: 1px solid var(--dark);
  padding: 14px 28px; font-size: var(--fs-btn); font-weight: var(--fw-btn); line-height: 1; letter-spacing: 0.20em; text-transform: uppercase;
  display: inline-flex; align-items: center; transition: background 0.2s;
}
.cform-actions .btn-consult:hover { background: var(--mid); }
.cform-note {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--stone);
  margin-top: 12px;
}
.cform-note a { color: var(--stone); text-decoration: underline; }
.cform-note a:hover { color: var(--dark); }

/* showrooms */
.showrooms { max-width: 1440px; margin-inline: auto; padding: 60px 90px 90px 65px; }
.showrooms > .eyebrow { margin-bottom: clamp(28px, 3vw, 44px); }
.showroom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.showroom-card { display: flex; flex-direction: column; gap: 20px; }
.showroom-card h4 { font-family: var(--sans); font-weight: 500; font-size: var(--fs-h4); line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; }
.showroom-card .sc-img { position: relative; aspect-ratio: 4/5; overflow: hidden; margin-bottom: 10px; }
.showroom-card .sc-img img { transition: transform 0.7s cubic-bezier(.2,.6,.3,1); }
.showroom-card:hover .sc-img img { transform: scale(1.04); }
.showroom-card .sc-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 0.3s ease;
  z-index: 1;
  pointer-events: none;
}
.showroom-card:hover .sc-img::before { background: rgba(0,0,0,0.2); }
.showroom-card .sc-addr { font-size: var(--fs-body); line-height: 1.6; color: var(--stone); margin: 0; }
.showroom-card > .btn-solid-accent { align-self: flex-start; }
.showroom-card hr { border: none; border-top: 1px solid rgba(22,22,21,.2); margin: 28px 0 74px; }
@media (max-width: 1024px) { .contact-grid { grid-template-columns: 1fr; } .showroom-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .cform { grid-template-columns: 1fr; } .showroom-grid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════
   DETAIL PAGES  (project-detail & news-detail — XD Home-29 / Home-34)
   ════════════════════════════════════════════════ */
.dhero {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px);
  align-items: end;
}
.dhero-text {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--nav-h) + clamp(28px, 4vw, 64px));
  padding-bottom: clamp(32px, 4vw, 56px);
  padding-right: clamp(32px, 5vw, 80px);
  margin-left: max(65px, calc((100vw - 1440px) / 2 + 65px));
}
.dhero-title {
  font-family: var(--sans); font-weight: 400;
  font-size: var(--fs-h3); line-height: 1.25;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--dark);
}
.dhero-meta { margin-top: 26px; display: flex; flex-direction: column; gap: 5px; }
.dhero-meta span {
  font-size: var(--fs-body); letter-spacing: 0.04em; color: var(--stone);
}
.dhero-meta span strong { color: var(--mid); font-weight: 400; }
.dhero-meta a { color: #ACACAC; text-decoration: underline; text-underline-offset: 2px; }
.dhero-meta a:hover { color: var(--accent); }
.dhero-img { position: relative; aspect-ratio: 11/9; overflow: hidden; margin-top: var(--nav-h); }
.dhero-img img { width: 100%; height: 100%; object-fit: cover; }

/* intro: heading + multi-column body + button */
.dintro {
  max-width: 1320px; margin-inline: auto;
  padding: 90px 100px clamp(40px, 5vw, 72px);
}
.dintro-head {
  font-size: var(--fs-body); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mid); max-width: 40ch; line-height: 1.5; margin-bottom: 30px;
}
.dintro-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 56px); }
.dintro-body.dintro-body--2 { grid-template-columns: repeat(2, 1fr); max-width: 70%; }
.dintro-body p { font-size: var(--fs-body); line-height: 23px; color: var(--stone); }
.dintro-body p strong { color: var(--mid); font-weight: 400; }
.dintro-foot { margin-top: 38px; }
.dintro-link {
  font-size: var(--fs-body);
  letter-spacing: 0.04em;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s;
}
.dintro-link:hover { opacity: 0.7; }

/* image gallery */
.dgallery {
  max-width: 1320px; margin-inline: auto;
  padding: 0 100px;
  margin-bottom: 90px;
  display: flex; flex-direction: column; gap: clamp(36px, 4.5vw, 72px);
}
.drow { display: grid; gap: clamp(20px, 3vw, 56px); align-items: start; }
.drow img { width: 100%; display: block; }
.drow--2 { grid-template-columns: 1fr 1fr; }
.drow--3 { grid-template-columns: repeat(3, 1fr); }
.drow--full { grid-template-columns: 1fr; }
/* offset two-up: second image sits lower and smaller, like the design */
.drow--2off { grid-template-columns: 1fr 1fr; align-items: start; }
.drow--2off > :nth-child(2) { margin-top: clamp(40px, 6vw, 90px); }
.lightbox-item { position: relative; display: block; overflow: hidden; }
.lightbox-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 0.3s ease;
  z-index: 1;
  pointer-events: none;
}
.lightbox-item:hover::before { background: rgba(0,0,0,0.2); }

.dgallery + .dgallery,
.dafter { margin-top: clamp(48px, 6vw, 96px); }

/* ── LIGHTBOX ───────────────────────────────── */
.lightbox-trigger { cursor: zoom-in; }
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(26,24,21,0.94);
  align-items: center;
  justify-content: center;
}
.lightbox.is-open { display: flex; }
.lightbox-img {
  max-width: 88vw;
  max-height: 88vh;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: none;
  border: none;
  color: var(--cream);
  cursor: pointer;
  transition: opacity 0.2s;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { opacity: 0.65; }
.lightbox-close {
  top: 20px;
  right: clamp(20px, 5vw, 56px);
  font-size: 32px;
  line-height: 1;
}
.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  padding: 16px;
}
.lightbox-prev { left: clamp(8px, 3vw, 32px); }
.lightbox-next { right: clamp(8px, 3vw, 32px); }
@media (max-width: 680px) {
  .lightbox-prev { left: 4px; }
  .lightbox-next { right: 4px; }
  .lightbox-close { top: 8px; right: 12px; }
}

/* long-form article body: headings, copy, quotes and images in reading order */
.dsections {
  max-width: 1440px; margin-inline: auto;
  padding: clamp(24px, 3vw, 48px) 90px 0 65px;
}
.dsections .container { display: flex; flex-direction: column; gap: clamp(48px, 6vw, 96px); }
.dsection-heading {
  font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--mid); margin-bottom: 18px;
}
.dsection-block p { font-size: var(--fs-body); line-height: 23px; color: var(--stone); max-width: 68ch; margin-bottom: 16px; }
.dsection-block p:last-child { margin-bottom: 0; }
.dsection-quote {
  font-family: var(--serif); font-size: var(--fs-h3); font-weight: 400;
  line-height: 1.5; text-wrap: balance; max-width: 46ch;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding-block: clamp(32px, 4vw, 48px);
}
.dsection-quote cite {
  display: block; margin-top: 16px;
  font-family: var(--sans); font-style: normal; font-size: var(--fs-small);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone);
}

/* trailing block (similar projects / related news) */
.drelated {
  max-width: 1320px; margin-inline: auto;
  padding: 90px 100px;
  position: relative;
  display: flex; flex-direction: column; gap: 28px;
}
.drelated::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 1320px;
  height: 1px;
  background: var(--border);
  padding-left: 100px;
  padding-right: 100px;
  box-sizing: border-box;
  background-clip: content-box;
  pointer-events: none;
}
.drelated-foot { display: flex; justify-content: center; margin-top: calc(90px - 28px); }
.drelated .ngrid { margin-top: calc(90px - 28px); }
.drelated .ncard-img { aspect-ratio: 3/4; }
.drelated .pcard { display: flex; flex-direction: column; gap: 18px; }

@media (max-width: 1024px) {
  .dhero { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .dhero-text { padding-right: 0; margin-left: 0; }
  .dhero-img { aspect-ratio: 16/10; margin-top: 0; }
  .dintro-body, .dintro-body.dintro-body--2 { grid-template-columns: 1fr; max-width: none; gap: 20px; }
}
@media (max-width: 680px) {
  .drow--2, .drow--3, .drow--2off { grid-template-columns: 1fr; }
  .drow--2off > :nth-child(2) { margin-top: 0; }
}

/* ── COOKIE CONSENT ─────────────────────────── */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 900;
  background: var(--dark);
  color: var(--cream);
  border-top: 1px solid rgba(234,230,221,0.2);
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(.2,.6,.3,1);
  max-height: 100vh;
  overflow-y: auto;
}
.consent.is-open { transform: translateY(0); }
.consent-inner {
  max-width: 1440px;
  margin-inline: auto;
  padding: 40px 90px 40px 65px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 64px;
  align-items: end;
}
.consent-title {
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 14px;
}
.consent-body {
  max-width: 720px;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: rgba(234,230,221,0.7);
}
.consent-body a { color: var(--cream); text-decoration: underline; text-underline-offset: 2px; }
.consent-body a:hover { color: #fff; }
.consent-actions {
  grid-column: 2;
  justify-content: flex-end;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.consent [hidden] { display: none !important; }
.consent-actions .btn-ghost-light { min-width: 150px; text-align: center; background: transparent; }
.consent-actions .btn-ghost-light:hover,
.consent-actions .btn-ghost-light:focus-visible { background: var(--cream); color: var(--dark); }
.consent-actions [data-consent-action="accept"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.consent-actions [data-consent-action="accept"]:hover,
.consent-actions [data-consent-action="accept"]:focus-visible { background: #fff; border-color: #fff; color: #000; }
.consent-link {
  background: none;
  border: 0;
  padding: 11px 4px;
  font-family: var(--sans);
  font-size: var(--fs-btn);
  font-weight: var(--fw-btn);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.consent-link:hover { color: #fff; }
.consent-prefs {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 40px;
  border-top: 1px solid rgba(234,230,221,0.2);
  padding-top: 24px;
}
.consent-prefs[hidden] { display: none; }
.consent-cat p { font-size: var(--fs-small); line-height: 1.7; color: rgba(234,230,221,0.6); }
.consent-cat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
}
label.consent-cat-head { cursor: pointer; }
.consent-cat-name {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.consent-always { font-size: var(--fs-small); letter-spacing: 0.1em; color: rgba(234,230,221,0.5); }
.consent-switch {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 36px; height: 20px;
  border: 1px solid rgba(234,230,221,0.5);
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.consent-switch::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--cream);
  transition: transform 0.2s;
}
.consent-switch:checked { background: var(--accent); border-color: var(--accent); }
.consent-switch:checked::after { transform: translateX(16px); }
.consent-switch:focus-visible,
.consent button:focus-visible,
.consent a:focus-visible { outline: 1px solid var(--cream); outline-offset: 3px; }
@media (max-width: 1024px) {
  .consent-inner { grid-template-columns: 1fr; align-items: start; }
  .consent-actions { grid-column: 1; justify-content: flex-start; }
  .consent-prefs { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  /* .consent sits flush at the true bottom edge; keep the buttons clear
     of the home-indicator bar instead of letting them render under it */
  .consent-inner { padding: 18px 24px calc(18px + env(safe-area-inset-bottom)); gap: 12px; }
  .consent-actions { gap: 8px; }
  .consent-actions .btn-ghost-light { flex: 1 1 140px; min-width: 0; }
  .consent-link { flex-basis: 100%; padding: 6px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; }
}

/* ── MOBILE (home) ──────────────────────────── */
@media (max-width: 768px) {
  /* materials: no swatch image, everything centred. The swatch already
     hides here (768px) but .materials-grid only drops to 1 column at the
     narrower 680px breakpoint below, so without this the list sat stuck
     in the grid's left half with an empty right half from 681-768px. */
  .section-materials--home .materials-swatch { display: none; }
  .section-materials--home .materials-grid { grid-template-columns: 1fr; gap: 36px; }
  .section-materials--home .materials-note { margin-inline: auto; text-align: center; }
  .section-materials--home .materials-list-wrap { align-items: center; text-align: center; }

  /* news: one item, straight into the "View all news" button */
  #news .ncard:nth-child(n+2) { display: none; }
  #news .projects-cta { margin-top: 40px; }
}

@media (max-width: 1023px) {
  /* Hostellerie Kemmelberg bar: stacked and centred, title → View project,
     all the way up to the 3-column desktop layout at 1024px. "View all
     projects" is hidden here (title + button alone stay centred as a
     pair in the flex column) and comes back at 1024px. */
  .feature-overlay { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .feature-title { order: 1; text-align: center; }
  .feature-overlay .btn-ghost-light { order: 2; }
  .feature-link { display: none; }
}

/* ── MOBILE: textures and colour collections as rows with an arrow (built by the script in default.html) ──
   textures: label, then each texture opening its image;
   colours: label, palette text, then each collection opening its colours */
.mobile-acc { display: none; }
@media (max-width: 768px) {
  #colour-list,
  #colour-swatch-grid { display: none; }
  .mobile-acc { display: block; border-top: 1px solid var(--border); }
  .mobile-acc-item { border-bottom: 1px solid var(--border); }
  .mobile-acc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--sans);
    font-size: var(--fs-h3);
    line-height: 26px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--stone);
    text-align: left;
  }
  .mobile-acc-head[aria-expanded="true"] { color: var(--dark); }
  .mobile-acc-head svg { flex-shrink: 0; transition: transform 0.25s ease; }
  .mobile-acc-head[aria-expanded="true"] svg { transform: rotate(180deg); }
  .mobile-acc-panel { padding-bottom: 16px; }
  .mobile-acc-panel[hidden] { display: none; }
}

/* ── MOBILE: texture carousel on material pages (built by the script in default.html) ──
   name above the photo, arrows + "1/10" counter underneath */
.texture-carousel { display: none; }
@media (max-width: 768px) {
  #texture-list,
  .texture-swatch--crossfade { display: none; }
  .mblock-grid > * { min-width: 0; } /* keeps the grid column from stretching to the photo width */
  .texture-carousel { display: block; }
  .texture-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .texture-track::-webkit-scrollbar { display: none; }
  .texture-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
  .texture-slide figcaption {
    font-size: var(--fs-h3);
    line-height: 26px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--dark);
    margin-bottom: 16px;
  }
  .texture-slide img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .texture-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
  }
  .texture-nav {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cream);
    border: 1px solid var(--border);
    color: var(--dark);
    font-size: 18px;
    cursor: pointer;
    transition: opacity 0.2s, background 0.2s, color 0.2s, border-color 0.2s;
  }
  .texture-nav:not(:disabled):hover,
  .texture-nav:not(:disabled):active,
  .texture-nav:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; outline: none; }
  .texture-nav:disabled { opacity: 0.35; cursor: default; }
  .texture-count {
    font-size: var(--fs-body);
    letter-spacing: 0.10em;
    color: var(--stone);
  }
}

/* ── MOBILE: everything inside the container (24px each side), nothing bleeding off ── */
@media (max-width: 768px) {
  /* material pages: label and lists lined up with the rest of the block */
  .mblock-grid > :first-child { padding-left: 0; padding-right: 0; }

  /* page heroes (about, projects, atelier, shop, professionals…): stacked, inside the margins */
  .phero { height: auto; max-height: none; padding-inline: 24px; }
  .phero > * { min-width: 0; }
  .phero-text,
  .phero--container-align .phero-text { margin-left: 0; padding-left: 0; padding-right: 0; max-width: none; }
  .phero-text,
  .phero--title-gap-160 .phero-text { padding-bottom: 0; }
  .phero-img { width: 100%; }

  /* materials / professionals overview hero text */
  body:is(.materials-page, .professionals-page) .materials-hero { padding-inline: 24px; }

  /* image + text splits */
  .section-split,
  .section-split--wide { padding-inline: 24px; }
  .section-split::before,
  .section-split--wide::before { padding-inline: 24px; }
  .split-text { padding-inline: 0; }

  /* full-width images inside sections get the same side margins */
  .mhero,
  .atelier-img,
  .darksplit-img,
  .section-feature { margin-inline: 24px; }

  /* carousel arrows on the container edge */
  .carousel-btn--prev { left: 24px; }
  .carousel-btn--next { right: 24px; }

  /* divider lines exactly as wide as the container (24px in from each side) */
  .section-quote::before, .section-quote::after,
  .dark-wrap .section-quote::before, .dark-wrap .section-quote::after,
  .section-logos::before, .section-logos::after,
  .section-materials::before, .section-materials::after,
  .section-statement::before,
  .section-pro::before,
  .section-projects--material::before,
  .section-similar::before,
  .drelated::before { padding-left: 24px; padding-right: 24px; background-clip: content-box; }
  /* containers whose top border is the divider: draw the line inside the padding instead */
  .mintro > .container,
  .mblock > .container,
  body.pro-detail-page .section-talk .container,
  .drelated + .section-talk .container,
  #news + .section-talk .container,
  .faq-wrap + .section-talk .container,
  .footer {
    border-top: none;
    background-image: linear-gradient(var(--border), var(--border));
    background-size: calc(100% - 48px) 1px;
    background-position: 24px 0;
    background-repeat: no-repeat;
  }

  /* blocks that still had their desktop side margins (65/90px or 100px): the older mobile
     rule for these sits above their desktop rules in this file, so it never won */
  body:is(.materials-page, .professionals-page) .container,
  .mat-grid, .pgrid, .ngrid, .showrooms,
  .dhero, .dintro, .dgallery, .dsections, .drelated,
  .contact-head, .contact-grid, .faq-wrap,
  .projects-header, .projects-grid,
  .footer-top { padding-left: 24px; padding-right: 24px; }
  .footer-credits { margin-inline: 24px; padding-left: 0; padding-right: 0; }
}