/* ==========================================================================
   D LUX DEVELOPMENTS: site stylesheet
   Brand system from design_handoff_dlux_logo (identity v1.0, September 2026)
   Type: Bodoni Moda (display) · Jost (text, UI, labels)
   Rules: no border radius, no shadows, 1px Stone rules.
   ========================================================================== */

:root {
  /* Handoff design tokens */
  --dlux-bone:  #F4F1EC; /* page background */
  --dlux-linen: #E4DED5; /* panels, alternate sections */
  --dlux-stone: #C9C0B3; /* rules, borders */
  --dlux-taupe: #8C8275; /* accent surfaces (bone text only, large sizes) */
  --dlux-clay:  #6E665C; /* secondary text */
  --dlux-umber: #2E2A26; /* primary text, logo, dark sections */
  --dlux-font-display: 'Bodoni Moda', Georgia, serif;
  --dlux-font-text: 'Jost', system-ui, sans-serif;

  /* Semantic (re-mapped per section theme) */
  --text:  var(--dlux-umber);
  --muted: var(--dlux-clay);
  --line:  var(--dlux-stone);

  --gutter: clamp(20px, 2.8vw, 40px);
  --section: clamp(100px, 16vh, 200px);
  --header-h: 109px; /* 53px logo + 28px padding top and bottom */

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}
@media (max-width: 768px) { :root { --header-h: 70px; } }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden; overflow-x: clip; /* hidden is the fallback where clip is unsupported */
  scrollbar-width: thin; scrollbar-color: var(--dlux-stone) transparent; /* Windows */
}
body {
  margin: 0;
  background: var(--dlux-bone);
  color: var(--text);
  font-family: var(--dlux-font-text);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
a, button, summary, [role="button"] { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--dlux-stone); color: var(--dlux-umber); }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

main { padding-top: var(--header-h); }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

.skip {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  padding: 10px 16px; background: var(--dlux-umber); color: var(--dlux-bone);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Section themes ---------- */
[data-theme="light"] { background: var(--dlux-bone); }
[data-theme="linen"] { background: var(--dlux-linen); }
[data-theme="dark"]  { background: var(--dlux-umber); color: var(--dlux-bone); --text: var(--dlux-bone); --muted: var(--dlux-stone); --line: rgba(201, 192, 179, .3); }

/* ---------- Type ---------- */
.display, .h1, .h2, .h3, .lead { font-family: var(--dlux-font-display); font-weight: 400; }
.display { font-size: clamp(2.9rem, 7vw, 8rem); line-height: 1.02; letter-spacing: -.01em; }
.h1      { font-size: clamp(2.5rem, 5.2vw, 5.6rem); line-height: 1.05; letter-spacing: -.01em; }
.h2      { font-size: clamp(2rem, 3.6vw, 3.8rem); line-height: 1.12; letter-spacing: -.005em; }
.h3      { font-size: clamp(1.4rem, 2vw, 2rem); line-height: 1.15; }
.lead    { font-size: clamp(1.35rem, 2.1vw, 2.1rem); line-height: 1.32; }
.display em, .h1 em, .h2 em, .h3 em, .lead em { font-style: italic; }
.label {
  font-family: var(--dlux-font-text); font-size: 12px; font-weight: 400;
  letter-spacing: .3em; text-transform: uppercase; line-height: 1.5;
}
.muted { color: var(--muted); }
.body-sm { font-size: 15px; font-weight: 400; line-height: 1.7; max-width: 38ch; color: var(--muted); }

/* Split text (built by JS) */
.w  { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .12em 0; margin: 0 -.06em -.12em 0; }
.wi { display: inline-block; will-change: transform; }
html.js [data-split]:not(.is-split) { opacity: 0; }
html.js [data-reveal] { opacity: 0; }
html.js [data-reveal-img] { clip-path: inset(100% 0 0 0); }

/* ---------- Buttons & links ---------- */
.link-line {
  display: inline-flex; align-items: center; gap: 16px;
  font-size: 12px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase;
  padding: 6px 0; position: relative;
}
.link-line::after {
  content: ""; width: 36px; height: 1px; background: currentColor;
  transition: width .7s var(--ease);
}
@media (hover: hover) { .link-line:hover::after { width: 64px; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  padding: 20px 34px; border: 1px solid currentColor;
  font-size: 12px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; text-align: center; white-space: nowrap;
  transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
@media (hover: hover) {
  .btn:hover { background: var(--dlux-umber); border-color: var(--dlux-umber); color: var(--dlux-bone); }
  [data-theme="dark"] .btn:hover, .cta .btn:hover { background: var(--dlux-bone); border-color: var(--dlux-bone); color: var(--dlux-umber); }
}

/* ---------- Global layers ---------- */
.loader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--dlux-bone); color: var(--dlux-umber);
  display: grid; place-items: center; align-content: center; gap: 36px;
}
html.no-js .loader, html.no-loader .loader { display: none; }
.loader__logo { width: clamp(200px, 22vw, 320px); clip-path: inset(0 100% 0 0); }
.loader__bar { width: clamp(120px, 14vw, 200px); height: 1px; background: var(--dlux-stone); overflow: hidden; }
.loader__bar i { display: block; height: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; }

.curtain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: var(--dlux-umber);
  display: grid; place-items: center;
  transform: translateY(100%);
}
html.is-entering .curtain { transform: translateY(0); }
.curtain img { width: 120px; }

.cursor { position: fixed; top: 0; left: 0; z-index: 99; pointer-events: none; }
.cursor__dot {
  position: absolute; top: 0; left: 0; padding: 14px 18px;
  background: var(--dlux-bone); color: var(--dlux-umber);
  font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap;
  transform: translate(-50%, -50%) scale(0); transition: transform .5s var(--ease);
}
.cursor.is-on .cursor__dot { transform: translate(-50%, -50%) scale(1); }
/* Monogram variant: Bone "D |" on an Umber square, standing in for the pointer */
.cursor__mark { display: none; width: 39px; height: 36px; max-width: none; }
.cursor.is-mark .cursor__dot { padding: 24px; background: var(--dlux-umber); }
.cursor.is-mark .cursor__text { display: none; }
.cursor.is-mark .cursor__mark { display: block; }
html.has-cursor [data-cursor="mark"], html.has-cursor [data-cursor="mark"] * { cursor: none; }
@media (pointer: coarse) { .cursor { display: none; } }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 28px 40px;
  background: transparent; color: var(--dlux-umber);
  transition: background-color .2s ease, padding .2s ease, color .2s ease, transform .8s var(--ease);
}
/* Image-led pages: header is invisible over the full-bleed hero, logo reversed */
.has-overlay-header .header { color: var(--dlux-bone); }
.has-overlay-header main { padding-top: 0; }
.header.is-compact { padding: 18px 40px; background: var(--dlux-umber); color: var(--dlux-linen); }
.header.is-hidden { transform: translateY(-100%); }
.header.menu-open { background: var(--dlux-umber); color: var(--dlux-linen); transform: none; }

/* Logo: primary at the top of the page, wordmark when compact or narrow (under 160px) */
.logo { display: block; position: relative; z-index: 2; flex: none; }
.logo img { display: none; width: auto; }
.logo__full, .logo__full-rev { height: 53px; }   /* 160px wide: the primary logo's minimum */
.logo__mark, .logo__mark-rev { height: 30px; }   /* mobile top of page */
.logo .logo__full { display: block; }
.has-overlay-header .logo .logo__full { display: none; }
.has-overlay-header .logo .logo__full-rev { display: block; }
.header.is-compact .logo img, .header.menu-open .logo img { display: none; }
.header.is-compact .logo .logo__mark-rev, .header.menu-open .logo .logo__mark-rev { display: block; height: 26px; }

.nav { display: flex; align-items: center; gap: 36px; }
.nav a { font-size: 12px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; padding: 8px 0; transition: color .2s ease; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--dlux-clay); }
.header.is-compact .nav a:hover, .header.is-compact .nav a[aria-current="page"],
.has-overlay-header .header .nav a:hover { color: var(--dlux-stone); }
/* Over photography the active link stays Bone, marked with a hairline */
.has-overlay-header .header:not(.is-compact):not(.menu-open) .nav a[aria-current="page"] { color: var(--dlux-bone); border-bottom: 1px solid currentColor; padding-bottom: 4px; }

.menu-btn { display: none; position: relative; z-index: 2; align-items: center; gap: 14px; font-size: 12px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; }
.menu-btn__lines { width: 26px; height: 7px; position: relative; }
.menu-btn__lines::before, .menu-btn__lines::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
  transition: transform .6s var(--ease), top .6s var(--ease);
}
.menu-btn__lines::before { top: 0; }
.menu-btn__lines::after  { top: 6px; }
.menu-btn[aria-expanded="true"] .menu-btn__lines::before { top: 3px; transform: rotate(20deg); }
.menu-btn[aria-expanded="true"] .menu-btn__lines::after  { top: 3px; transform: rotate(-20deg); }

.menu {
  position: fixed; inset: 0; z-index: 55;
  background: var(--dlux-umber); color: var(--dlux-bone);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--header-h) + 40px) var(--gutter) 40px;
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path 1s var(--ease-io), visibility 0s 1s;
  overscroll-behavior: contain; touch-action: none;
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s; }
.menu__links a {
  display: block; font-family: var(--dlux-font-display); font-weight: 400; font-size: clamp(2.6rem, 12vw, 4.8rem); line-height: 1.15;
  opacity: 0; transform: translateY(40px);
  transition: opacity .8s var(--ease), transform 1s var(--ease);
}
.menu.is-open .menu__links a { opacity: 1; transform: none; transition-delay: calc(.35s + var(--i) * .07s); }
.menu__links a[aria-current="page"] { font-style: italic; }
.menu__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 20px; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(201, 192, 179, .3); color: var(--dlux-stone); }

@media (max-width: 899px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 768px) {
  .header { padding: 20px; }
  .header.is-compact { padding: 18px 20px; }
  .logo .logo__full, .has-overlay-header .logo .logo__full-rev { display: none; }
  .logo .logo__mark { display: block; }
  .has-overlay-header .logo .logo__mark { display: none; }
  .has-overlay-header .logo .logo__mark-rev { display: block; }
}

/* ---------- Hero (home) ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; color: var(--dlux-bone); background: var(--dlux-umber); }
.hero__slides { position: absolute; inset: 0; will-change: transform; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 2s var(--ease-io); }
.hero__slide.is-active { opacity: 1; z-index: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 9s linear; }
.hero__slide.is-active img { transform: scale(1); }
.hero__shade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(46, 42, 38, .5) 0%, rgba(46, 42, 38, 0) 24%),
    linear-gradient(90deg, rgba(46, 42, 38, .5) 0%, rgba(46, 42, 38, .15) 48%, rgba(46, 42, 38, 0) 70%),
    linear-gradient(0deg, rgba(46, 42, 38, .72) 0%, rgba(46, 42, 38, .22) 42%, rgba(46, 42, 38, 0) 68%);
}
.hero__content { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: clamp(90px, 13vh, 140px); }
.hero__content .label { margin-bottom: clamp(18px, 2.6vh, 30px); }
.hero__content h1 { max-width: 12ch; }
.hero__meta {
  position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: 32px;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase;
}
.hero__caption { transition: opacity .6s var(--ease); }
.hero__scroll { display: inline-flex; align-items: center; gap: 14px; }
.hero__scroll i { width: 1px; height: 36px; background: rgba(244, 241, 236, .35); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; inset: 0; background: var(--dlux-bone); animation: scrollcue 2.4s var(--ease-io) infinite; }
@keyframes scrollcue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* ---------- Generic sections ---------- */
.section { padding: var(--section) var(--gutter); position: relative; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: clamp(48px, 8vh, 96px); }

/* Intro statement */
.intro__grid { display: grid; grid-template-columns: minmax(180px, 1fr) 3fr; gap: var(--gutter); align-items: start; }
.intro__text { font-family: var(--dlux-font-display); font-weight: 400; font-size: clamp(1.8rem, 3.3vw, 3.4rem); line-height: 1.2; max-width: 22ch; letter-spacing: -.005em; }
.intro__text .w { padding-bottom: .04em; margin-bottom: -.04em; }
.intro__foot { margin-top: clamp(40px, 6vh, 64px); display: flex; gap: 48px; align-items: center; }
@media (max-width: 899px) { .intro__grid { grid-template-columns: 1fr; } }

/* ---------- Horizontal gallery ---------- */
.hscroll { position: relative; overflow: hidden; }
.hscroll__track {
  display: flex; align-items: center; gap: clamp(28px, 4vw, 80px);
  width: max-content; height: 100vh; height: 100svh; min-height: 620px;
  padding: 90px var(--gutter);
  will-change: transform;
}
.hscroll__intro { flex: none; width: clamp(280px, 27vw, 430px); align-self: center; }
.hscroll__intro .h1 { margin: 18px 0 14px; }
.hscroll__intro .body-sm { margin-top: 28px; }
.hscroll__intro .link-line { margin-top: 36px; }
.hscroll__item { flex: none; align-self: var(--align, center); }
/* captions never widen a frame beyond its image */
.hscroll__item > :not(.hscroll__media) { width: 0; min-width: 100%; }
.hscroll__media {
  /* explicit width, not aspect-ratio: WebKit mis-sizes aspect-ratio boxes inside a max-content row */
  height: var(--h, 62vh); width: calc(var(--h, 62vh) * var(--r, 1));
  overflow: hidden; background: var(--dlux-linen);
}
[data-theme="linen"] .hscroll__media { background: var(--dlux-stone); }
[data-theme="dark"] .hscroll__media { background: var(--dlux-clay); }
.hscroll__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); }
.hscroll__item figcaption, .cap {
  display: flex; gap: 14px; margin-top: 16px;
  font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--muted);
}
.cap b { font-weight: 400; color: var(--text); }
.hscroll__end { flex: none; width: clamp(220px, 22vw, 340px); display: grid; place-items: center; align-self: center; }
.hscroll__progress {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 40px; z-index: 2;
  display: flex; align-items: center; gap: 24px;
  font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--muted);
}
.hscroll__bar { flex: 1; height: 1px; background: var(--line); overflow: hidden; }
.hscroll__bar i { display: block; height: 100%; background: var(--text); transform: scaleX(0); transform-origin: left; }

/* Text panels inside a horizontal track (Approach) */
.hscroll__text { max-width: 34ch; margin-top: 22px; }
.hscroll__text .h3 { margin: 10px 0 12px; }

@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  .hscroll { overflow: visible; }
  .hscroll__track {
    width: auto; height: auto; min-height: 0;
    padding: var(--section) var(--gutter) 64px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter);
    align-items: flex-start; scrollbar-width: none;
  }
  .hscroll__track::-webkit-scrollbar { display: none; }
  .hscroll__intro { width: min(78vw, 380px); scroll-snap-align: start; }
  .hscroll__item { scroll-snap-align: start; align-self: flex-start; }
  .hscroll__media { height: var(--hm, 52vh); width: calc(var(--hm, 52vh) * var(--r, 1)); max-width: 84vw; }
  .hscroll__media img { transform: none; }
  .hscroll__end { align-self: center; width: 60vw; }
  .hscroll__progress { display: none; }
  .hscroll__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
}

/* ---------- Materials (sticky) ---------- */
.materials__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); padding: 0 var(--gutter); }
.materials__words { padding: 18vh 0; }
.materials__word { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; }
.materials__word h3 {
  font-family: var(--dlux-font-display); font-weight: 400; font-size: clamp(3.6rem, 9.5vw, 10rem); line-height: .95; letter-spacing: -.01em;
  color: var(--dlux-stone); transition: color 1s var(--ease);
}
.materials__word.is-active h3 { color: var(--text); }
.materials__word h3 em { font-style: italic; }
.materials__word p { margin-top: 26px; max-width: 30ch; color: var(--muted); opacity: .35; transition: opacity 1s var(--ease); }
.materials__word.is-active p { opacity: 1; }
.materials__media { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
.materials__frame { position: relative; width: 100%; height: 76vh; overflow: hidden; background: var(--dlux-stone); }
.materials__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.1); transition: opacity 1.3s var(--ease-io), transform 2.6s var(--ease);
}
.materials__frame img.is-active { opacity: 1; transform: scale(1); }
.materials__m { display: none; }
@media (max-width: 899px) {
  .materials__grid { grid-template-columns: 1fr; }
  .materials__media { display: none; }
  .materials__words { padding: 40px 0 var(--section); }
  .materials__word { min-height: 0; padding: 40px 0; }
  .materials__word h3 { color: var(--text); }
  .materials__word p { opacity: 1; }
  .materials__m { display: block; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 28px; }
  .materials__m img { width: 100%; height: 100%; object-fit: cover; }
}

/* ---------- Services (hover list) ---------- */
.services__list { border-top: 1px solid var(--line); }
.service a {
  display: grid; grid-template-columns: 90px minmax(0, 1.5fr) minmax(0, 1fr) 40px; align-items: center; gap: 24px;
  padding: clamp(24px, 3.4vw, 44px) 0; border-bottom: 1px solid var(--line);
  transition: color .5s var(--ease), padding .7s var(--ease);
}
.service__no { font-size: 11px; font-weight: 400; letter-spacing: .3em; color: var(--muted); }
.service__name { font-family: var(--dlux-font-display); font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 3.6rem); line-height: 1.08; }
.service__desc { font-size: 15px; font-weight: 400; color: var(--muted); max-width: 34ch; }
.service__arrow { justify-self: end; width: 28px; height: 1px; background: currentColor; opacity: 0; transform: translateX(-12px); transition: opacity .5s, transform .7s var(--ease); }
@media (hover: hover) {
  .services__list:hover .service a { color: var(--dlux-clay); }
  .services__list .service a:hover { color: var(--dlux-bone); padding-left: 24px; }
  .service a:hover .service__arrow { opacity: 1; transform: none; }
}
.services__float { position: fixed; top: 0; left: 0; z-index: 40; pointer-events: none; width: clamp(220px, 19vw, 320px); }
.services__float-inner { aspect-ratio: 4 / 5; overflow: hidden; opacity: 0; transform: scale(.85); transition: opacity .45s var(--ease), transform .8s var(--ease); }
.services__float-inner.is-visible { opacity: 1; transform: none; }
.services__float img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) {
  .service a { grid-template-columns: 44px 1fr; row-gap: 8px; }
  .service__desc { grid-column: 2; }
  .service__arrow { display: none; }
}

/* ---------- On site (video) ---------- */
.onsite { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; }
.onsite__frame { position: absolute; inset: 0; overflow: hidden; }
.onsite__frame video, .onsite__frame img { width: 100%; height: 100%; object-fit: cover; }
.onsite__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(46, 42, 38, .8) 0%, rgba(46, 42, 38, .2) 55%, rgba(46, 42, 38, .3) 100%); }
.onsite__content { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: clamp(56px, 10vh, 110px); display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--gutter); align-items: end; }
.onsite__content .label { margin-bottom: 22px; color: var(--dlux-linen); }
.onsite__content p:not(.label) { color: var(--dlux-linen); max-width: 36ch; }
@media (max-width: 899px) { .onsite__content { grid-template-columns: 1fr; } }

/* Drag rail (site journal) */
.journal { padding: clamp(80px, 12vh, 140px) 0 var(--section); }
.journal__head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 var(--gutter); margin-bottom: 40px; color: var(--muted); }
.rail {
  display: flex; gap: clamp(14px, 1.6vw, 24px); overflow-x: auto; padding: 0 var(--gutter);
  scroll-snap-type: x proximity; scroll-padding-left: var(--gutter); scrollbar-width: none; cursor: grab;
}
.rail::-webkit-scrollbar { display: none; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail figure { flex: none; width: clamp(270px, 33vw, 560px); scroll-snap-align: start; }
.rail img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; user-select: none; -webkit-user-drag: none; pointer-events: none; }

/* ---------- Figures ---------- */
.figures__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.figures__list li { padding: 36px 28px 0 0; }
.figures__list li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.figures__n { display: block; font-family: var(--dlux-font-display); font-weight: 400; font-size: clamp(2.3rem, 3.5vw, 4rem); line-height: 1.05; margin-bottom: 18px; }
.figures__n em { font-style: italic; }
@media (max-width: 899px) {
  .figures__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures__list li + li { padding-left: 20px; }
  .figures__n { font-size: clamp(2rem, 9vw, 3rem); }
  .figures__list li:nth-child(3) { border-left: 0; padding-left: 0; }
  .figures__list li { padding-bottom: 36px; }
}

/* ---------- CTA ---------- */
.cta { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; overflow: hidden; color: var(--dlux-bone); padding: var(--section) var(--gutter); }
.cta__bg { position: absolute; inset: 0; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); }
.cta::after { content: ""; position: absolute; inset: 0; background: rgba(46, 42, 38, .5); }
.cta__content { position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(28px, 5vh, 48px); }
.cta__content .h1 { max-width: 15ch; }

/* ---------- Footer ---------- */
.footer { padding: clamp(72px, 11vh, 120px) var(--gutter) 28px; background: var(--dlux-umber); color: var(--dlux-bone); --muted: var(--dlux-stone); --line: rgba(201, 192, 179, .3); }
.footer__logo { display: inline-block; margin-bottom: clamp(56px, 9vh, 96px); }
.footer__logo img { height: 58px; width: auto; } /* reversed primary, 175px wide */
.footer__top { display: grid; grid-template-columns: 2.4fr 1fr 1fr 1fr; gap: var(--gutter); padding-bottom: clamp(56px, 9vh, 96px); }
.footer .label { color: var(--muted); margin-bottom: 18px; }
.footer__email { font-family: var(--dlux-font-display); font-weight: 400; font-size: clamp(1.25rem, 1.8vw, 2.1rem); line-height: 1.2; border-bottom: 1px solid var(--line); padding-bottom: 6px; transition: border-color .5s; overflow-wrap: anywhere; }
.footer__email:hover { border-color: currentColor; }
.footer__col a, .footer__col p { display: block; font-size: 15px; font-weight: 400; line-height: 2; color: var(--dlux-linen); }
.footer__col a:hover, .footer__base a:hover { color: var(--dlux-stone); }
.footer__base a { transition: color .2s ease; }
.footer__base { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--line); font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 899px) {
  .footer__top { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .footer__top > :first-child { grid-column: 1 / -1; }
}

/* ==========================================================================
   Inner pages
   ========================================================================== */
.page-hero { padding: clamp(80px, 16vh, 180px) var(--gutter) clamp(56px, 9vh, 110px); }
.page-hero__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.page-hero .label { margin-bottom: 26px; display: block; }
.page-hero__count { font-family: var(--dlux-font-display); font-style: italic; font-weight: 400; font-size: .32em; vertical-align: top; margin-left: .15em; color: var(--muted); }
@media (max-width: 899px) { .page-hero__row { flex-direction: column; align-items: flex-start; } }

/* Project cards in the horizontal index */
.pcard { display: block; }
.pcard .hscroll__media img { transition: scale 1.6s var(--ease); }
@media (hover: hover) { .pcard:hover .hscroll__media img { scale: 1.07; } }
.pcard__meta { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: baseline; margin-top: 22px; }
.pcard__no { font-size: 11px; font-weight: 400; letter-spacing: .3em; color: var(--muted); }
.pcard__name { font-family: var(--dlux-font-display); font-weight: 400; font-size: clamp(1.8rem, 2.8vw, 3rem); line-height: 1.05; }
.pcard__status { font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.pcard__loc { grid-column: 2 / -1; font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 599px) {
  .pcard__meta { grid-template-columns: auto 1fr; row-gap: 8px; }
  .pcard__status { grid-column: 2; grid-row: 3; }
}

/* Project index table */
.index-table { border-top: 1px solid var(--line); }
.index-row {
  display: grid; grid-template-columns: 60px 1.3fr 1fr 1fr 1fr; gap: 24px; align-items: baseline;
  padding: 26px 0; border-bottom: 1px solid var(--line); transition: padding .7s var(--ease);
}
.index-row--head { font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); padding: 18px 0; }
.index-row span { font-size: 15px; font-weight: 400; }
.index-row .index-name { font-family: var(--dlux-font-display); font-size: clamp(1.4rem, 2vw, 2rem); font-weight: 400; line-height: 1.15; }
@media (hover: hover) { a.index-row:hover { padding-left: 18px; } }
@media (max-width: 899px) {
  .index-row { grid-template-columns: 36px 1fr; row-gap: 4px; }
  .index-row > :nth-child(n+3) { grid-column: 2; color: var(--muted); font-size: 14px; }
  .index-row--head { display: none; }
}

/* Project hero */
.phero { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; color: var(--dlux-bone); background: var(--dlux-umber); }
.phero__bg { position: absolute; inset: 0; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); }
.phero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(46, 42, 38, .5) 0%, rgba(46, 42, 38, 0) 24%), linear-gradient(0deg, rgba(46, 42, 38, .7), rgba(46, 42, 38, .05) 55%); }
.phero__content { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: clamp(48px, 9vh, 96px); display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.phero__title { font-family: var(--dlux-font-display); font-weight: 400; font-size: clamp(4.4rem, 14vw, 15rem); line-height: .92; letter-spacing: -.02em; }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.facts > div { padding: 26px 24px 0 0; }
.facts > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.facts dt { color: var(--muted); margin-bottom: 10px; }
.facts dd { font-family: var(--dlux-font-display); font-size: clamp(1.15rem, 1.5vw, 1.5rem); line-height: 1.25; }
@media (max-width: 899px) {
  .facts { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .facts > div:nth-child(3) { border-left: 0; padding-left: 0; }
}

.statement { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gutter); margin-top: clamp(80px, 14vh, 160px); }
@media (max-width: 899px) { .statement { grid-template-columns: 1fr; } }

.chapter { display: flex; align-items: baseline; gap: 22px; }
.chapter__no { font-family: var(--dlux-font-display); font-style: italic; font-size: clamp(1.3rem, 1.8vw, 1.8rem); color: var(--muted); }

/* Editorial grid (project pages) */
.egrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2vw, 32px); align-items: start; }
.egrid figure { cursor: zoom-in; }
.egrid .m { overflow: hidden; background: var(--dlux-linen); }
.egrid .m img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.6s var(--ease); }
@media (hover: hover) { .egrid figure:hover .m img { scale: 1.04; } }
.span-12 { grid-column: 1 / -1; }
.span-8 { grid-column: span 8; }
.span-7 { grid-column: span 7; }
.span-6 { grid-column: span 6; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
.push-1 { grid-column-start: 2; }
.push-8 { grid-column-start: 8; }
.offset-down { margin-top: clamp(80px, 22vh, 260px); }
@media (max-width: 899px) {
  .egrid { grid-template-columns: 1fr; }
  .egrid > * { grid-column: 1 / -1 !important; margin-top: 0 !important; }
}

.fullbleed { position: relative; height: 110svh; overflow: hidden; cursor: zoom-in; }
.fullbleed img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); }
.fullbleed figcaption { position: absolute; left: var(--gutter); bottom: 32px; z-index: 1; color: var(--dlux-bone); }

.next { position: relative; display: grid; place-items: center; min-height: 80svh; overflow: hidden; color: var(--dlux-bone); text-align: center; }
.next__bg { position: absolute; inset: 0; }
.next__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 2s var(--ease); }
@media (hover: hover) { .next:hover .next__bg img { transform: scale(1); } }
.next::after { content: ""; position: absolute; inset: 0; background: rgba(46, 42, 38, .55); }
.next__content { position: relative; z-index: 1; display: grid; gap: 18px; justify-items: center; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 95; background: var(--dlux-umber); color: var(--dlux-bone);
  display: grid; grid-template-rows: auto 1fr auto;
  opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s .6s;
  overscroll-behavior: contain;
}
.lightbox.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.lightbox__top, .lightbox__bottom { display: flex; justify-content: space-between; align-items: center; padding: 24px var(--gutter); font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; }
.lightbox__stage { position: relative; display: grid; place-items: center; padding: 0 clamp(16px, 7vw, 120px); min-height: 0; }
.lightbox__stage img { max-width: 100%; max-height: 100%; object-fit: contain; opacity: 0; transition: opacity .5s var(--ease); }
.lightbox__stage img.is-loaded { opacity: 1; }
.lightbox__nav { display: flex; gap: 32px; }
.lightbox button { font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; padding: 8px 0; }
.lightbox button:hover { color: var(--dlux-stone); }

/* ---------- Approach ---------- */
.split-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--gutter); align-items: end; padding: clamp(60px, 12vh, 140px) var(--gutter) var(--section); }
.split-hero__media { aspect-ratio: 4 / 5; overflow: hidden; }
.split-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.split-hero .body-sm { margin-top: 36px; }
@media (max-width: 899px) { .split-hero { grid-template-columns: 1fr; } }

.marquee { overflow: hidden; white-space: nowrap; padding: clamp(36px, 6vh, 72px) 0; border-block: 1px solid var(--line); }
.marquee__track { display: inline-flex; animation: marquee 60s linear infinite; }
.marquee__track span { font-family: var(--dlux-font-display); font-weight: 400; font-style: italic; font-size: clamp(2.2rem, 5vw, 5.4rem); line-height: 1.1; padding-right: .7em; }
.marquee__track span::after { content: "·"; font-style: normal; padding-left: .7em; color: var(--dlux-stone); }
@keyframes marquee { to { transform: translateX(-50%); } }

.acc { border-bottom: 1px solid var(--line); }
.acc summary {
  display: grid; grid-template-columns: 90px 1fr 40px; align-items: center; gap: 24px;
  padding: clamp(22px, 3vw, 38px) 0; cursor: pointer; list-style: none;
}
.acc summary::-webkit-details-marker { display: none; }
.acc__title { font-family: var(--dlux-font-display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 3rem); line-height: 1.1; }
.acc__icon { justify-self: end; width: 18px; height: 18px; position: relative; }
.acc__icon::before, .acc__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform .6s var(--ease); }
.acc__icon::after { transform: rotate(90deg); }
.acc[open] .acc__icon::after { transform: rotate(0); }
.acc__body { display: grid; grid-template-columns: 90px 1fr 1fr; gap: 24px; padding-bottom: 40px; }
.acc__body p { grid-column: 2; max-width: 40ch; color: var(--muted); }
.acc__body ul { grid-column: 3; }
.acc__body li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 400; }
@media (max-width: 899px) {
  .acc summary { grid-template-columns: 36px 1fr 24px; }
  .acc__body { grid-template-columns: 1fr; padding-left: 60px; }
  .acc__body p, .acc__body ul { grid-column: 1; }
}

.process { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); }
.process li { padding: 28px 24px 0 0; position: relative; }
.process li::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; background: var(--text); }
.process .h3 { margin: 14px 0 10px; }
.process p { font-size: 15px; font-weight: 400; color: var(--muted); max-width: 22ch; }
@media (max-width: 899px) { .process { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--line); padding-left: 28px; } .process li { padding: 0 0 36px; } .process li::before { left: -32px; top: 8px; } }

.founder { display: grid; grid-template-columns: 1fr 1.3fr; gap: calc(var(--gutter) * 1.5); align-items: start; }
.founder__portrait { aspect-ratio: 4 / 5; background: var(--dlux-stone); display: grid; place-items: center; color: var(--dlux-clay); position: relative; overflow: hidden; }
.founder__portrait span { font-family: var(--dlux-font-display); font-style: italic; font-size: 1.3rem; }
.founder__creds { margin-top: 44px; border-top: 1px solid var(--line); }
.founder__creds li { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 400; }
.founder__creds li span:last-child { color: var(--muted); text-align: right; }
@media (max-width: 899px) { .founder { grid-template-columns: 1fr; } }

.creds { display: flex; flex-wrap: wrap; gap: 12px; }
.creds li { border: 1px solid var(--line); padding: 12px 20px; font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: 1fr 1.15fr; min-height: 100vh; min-height: 100svh; }
.contact__media { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.contact__media img { width: 100%; height: 100%; object-fit: cover; }
.contact__media::after { content: ""; position: absolute; inset: 0 0 auto; height: 240px; background: linear-gradient(180deg, rgba(46, 42, 38, .75), rgba(46, 42, 38, 0)); pointer-events: none; }
.contact__body { padding: calc(var(--header-h) + clamp(48px, 10vh, 120px)) var(--gutter) var(--section); }
.contact__details { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: clamp(40px, 7vh, 72px) 0; padding: 32px 0; border-block: 1px solid var(--line); }
.contact__details a, .contact__details p:not(.label) { font-family: var(--dlux-font-display); font-size: clamp(1.1rem, 1.4vw, 1.4rem); line-height: 1.35; overflow-wrap: anywhere; }
.contact__details .label { color: var(--muted); margin-bottom: 8px; }
@media (max-width: 899px) {
  .contact { grid-template-columns: 1fr; }
  .contact__media { position: relative; height: 56svh; }
  .contact__body { padding-top: 64px; }
  .contact__details { grid-template-columns: 1fr; }
}

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; }
.field { display: grid; gap: 4px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 17px; color: inherit;
  background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 12px 0 14px; appearance: none; -webkit-appearance: none; transition: border-color .4s;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: currentColor; }
.field option { color: var(--dlux-umber); }
.form__foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 32px; }
.form__note { font-size: 13px; font-weight: 400; color: var(--muted); max-width: 32ch; }
.form__success { display: none; font-family: var(--dlux-font-display); font-size: clamp(1.5rem, 2.2vw, 2.2rem); line-height: 1.25; }
.form__error { grid-column: 1 / -1; margin-top: 16px; font-size: 15px; font-weight: 400; color: var(--dlux-stone); }
.form.is-sent > :not(.form__success) { display: none; }
.form.is-sent .form__success { display: block; grid-column: 1 / -1; }
@media (max-width: 899px) { .form { grid-template-columns: 1fr; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html.js [data-split]:not(.is-split), html.js [data-reveal] { opacity: 1; }
  html.js [data-reveal-img] { clip-path: none; }
  .loader__logo { clip-path: none; }
}