/* ==========================================================
   ATELIER FUNFROCK · v4 — Maison
   ========================================================== */

:root {
  /* === Cream side (light sections) === */
  --bg:           #F4EFE5;            /* warm cream */
  --bg-tint:      #ECE4D2;            /* slightly darker cream for variety */
  --cream:        #F5EFE3;            /* on-dark cream */

  /* === Purple side (dark sections) — the Maison's brand color === */
  --bg-deep:      #2A1542;            /* deep royal purple — main dark sections */
  --bg-deeper:    #190A28;            /* almost-black purple — loader & footer */
  --bg-purple:    #5B2D7F;            /* the brand purple — accent panels */
  --bg-purple-2: #3D1A5E;             /* mid purple */

  /* === Ink (text on cream) === */
  --ink:          #2B1F38;            /* purple-tinted dark text */
  --ink-soft:     #6B5670;            /* purple-grey for body text */
  --ink-faint:    #9D8FA8;            /* faint purple-grey */

  /* === Lines / hairlines === */
  --line:         #D4C9B5;
  --line-soft:    #E8DFD0;

  /* === Gold (the accent) — warmer, richer === */
  --gold:         #C9A961;            /* warm classical gold */
  --gold-deep:    #9F8344;            /* darker gold for contrast on cream */
  --gold-pale:    #E0C994;            /* light gold for highlights on purple */
  --gold-glow:    #EFDDB0;            /* very light gold for glows */

  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-accent:  'Italiana', serif;
  --font-body:    'Jost', system-ui, sans-serif;

  --ease:         cubic-bezier(.65, 0, .15, 1);
  --ease-out:     cubic-bezier(.16, 1, .3, 1);
  --ease-velvet:  cubic-bezier(.77, 0, .175, 1);

  --pad-x:        clamp(1.25rem, 4vw, 4rem);
  --max:          1480px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.005em;
  overflow-x: hidden;
  cursor: none;
  /* Prevent flash before loader covers */
  visibility: visible;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; cursor: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: none; }
/* Make sure no native cursor leaks through on any interactive element while
   our custom dot+ring is active. Without these the browser still paints its
   own pointer/hand/text caret on <a>, inputs, etc., on top of our cursor. */
input, textarea, select, label, [role="button"] { cursor: none; }
em { font-style: italic; }
::selection { background: var(--gold); color: var(--cream); }

/* Lock scroll during loader */
body.is-locked { overflow: hidden; height: 100vh; }

/* Film grain. v4 used `mix-blend-mode: multiply` which forces the browser to
   recomposite the entire viewport when the underlying content changes —
   essentially on every scroll frame. Dropped here for performance; the
   visible texture at 5% opacity is nearly identical without the blend. */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  animation: grainShift 8s steps(8) infinite;
}
@keyframes grainShift {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -5%); }
  30% { transform: translate(5%, -10%); }
  50% { transform: translate(-10%, 5%); }
  70% { transform: translate(0, 10%); }
  90% { transform: translate(10%, 5%); }
}

/* Scroll progress */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 1px;
  width: 0%;
  background: linear-gradient(90deg, transparent, var(--gold-pale), var(--gold));
  z-index: 9997;
  transition: width .08s linear;
  box-shadow: 0 0 12px rgba(201, 169, 97, .6);
}

/* Cursor */
/* The cursor sits on top of everything. v4 used `mix-blend-mode: difference`
   to invert under the dot — gorgeous in theory, but it forces the browser to
   recomposite the ENTIRE viewport every frame the cursor moves. That alone
   was responsible for a large fraction of the lag visitors reported. v5
   drops the blend mode and uses a gold ring/dot that reads well on both the
   cream and the deep-purple sections of the site. */
/* ====================================================================
   CUSTOM CURSOR — gold dot + lerped ring, with an italic gold label
   
   The dot snaps instantly to the cursor (no lag); the larger ring
   lerps in behind it with a smooth ~165ms drag — the trademark
   "magnetic" feel. On hover over interactive elements the dot
   shrinks and the ring opens; on data-cursor-label elements the
   ring opens wider and the italic label fades in at its centre.
   
   Layout:
   - .cursor       full-viewport non-interactive overlay
   - .cursor-dot   6px gold dot, instant follow (mousemove)
   - .cursor-ring  38px gold ring, lerped follow (rAF tick)
   - .cursor-label italic gold label on data-cursor-label hover
   
   Below 900px the custom cursor disappears entirely and the
   native browser cursor returns.
   ==================================================================== */
.cursor {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity .3s ease-out;
}

.cursor-dot {
  position: absolute;
  top: 0; left: 0;
  width: 6px; height: 6px;
  background: var(--gold-pale);
  border-radius: 50%;
  transform: translate3d(0, 0, 0);
  pointer-events: none;
  /* Subtle glow ring + 1px dark outline so the dot stays visible on
     busy backgrounds without needing a blend mode. */
  box-shadow:
    0 0 0 1px rgba(42, 21, 66, .35),
    0 0 12px rgba(239, 221, 176, .55);
  transition: width .25s var(--ease), height .25s var(--ease), background .35s var(--ease);
}

.cursor-ring {
  position: absolute;
  top: 0; left: 0;
  width: 38px; height: 38px;
  border: 1px solid var(--gold-pale);
  border-radius: 50%;
  transform: translate3d(0, 0, 0);
  opacity: .55;
  pointer-events: none;
  transition: width .35s var(--ease), height .35s var(--ease), opacity .25s, border-color .35s var(--ease);
}

.cursor-label {
  position: absolute;
  top: 0; left: 0;
  transform: translate3d(0, 0, 0);
  font-family: var(--font-display);
  font-style: italic;
  font-size: .9rem;
  color: var(--gold-pale);
  white-space: nowrap;
  letter-spacing: .05em;
  text-shadow: 0 1px 8px rgba(25, 10, 40, .65), 0 0 12px rgba(0, 0, 0, .4);
  opacity: 0;
  transition: opacity .25s var(--ease);
}

/* Hover (any clickable element) — dot shrinks, ring opens */
.cursor.is-hover .cursor-dot { width: 0; height: 0; }
.cursor.is-hover .cursor-ring { width: 70px; height: 70px; opacity: .9; }

/* Label (any [data-cursor-label] element) — ring opens wider, label fades in */
.cursor.is-label .cursor-ring  { width: 100px; height: 100px; opacity: .95; }
.cursor.is-label .cursor-label { opacity: 1; }

@media (max-width: 900px) {
  .cursor { display: none; }
  body, a, button, input, textarea, select, label { cursor: auto; }
}

/* ============================================================
   LOADER — pure fade-in composition
   No bars. No doors. No mechanical reveal. Just elegance.
   ============================================================ */

.loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg-deeper);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  /* Slow fade out at the end */
  transition: opacity 1.6s var(--ease) .2s, visibility 0s linear 2s;
}

.loader.is-fading-out {
  opacity: 0;
  visibility: hidden;
}

/* Subtle warm vignette — like dim candlelight in a dark hall */
.loader-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(201, 169, 97, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse at center, transparent 30%, rgba(25, 10, 40, 0.7) 100%);
  pointer-events: none;
}

.loader-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  padding: 2rem;
  text-align: center;
  color: var(--cream);
}

/* === One continuous L→R gesture: stitches grow, needle glides, knot settles === */
/* All three elements (loop, knot, thread tightening) animate together in a single */
/* synchronized motion — not three discrete steps. */
.sewing-machine {
  width: min(82vw, 700px);
  height: auto;
  margin-top: clamp(1rem, 2vw, 1.75rem);
  color: var(--gold-pale);
  opacity: 0;
  transform: translateY(8px);
  /* Fades in AFTER the brand composition has settled (3.5s) */
  transition: opacity 1.4s var(--ease-out) 3.5s, transform 1.4s var(--ease-out) 3.5s;
  filter: drop-shadow(0 0 12px rgba(239, 221, 176, 0.08));
}
.loader.is-active .sewing-machine {
  opacity: 1;
  transform: translateY(0);
}

/* The stitches sweep L→R. The dash pattern subtly tightens in the final quarter, */
/* suggesting the thread pulling taut as it reaches the knot. */
.loader.is-active .sewing-machine__stitches {
  animation: stitchSweep 3.2s cubic-bezier(.4, 0, .2, 1) 5s forwards;
}
@keyframes stitchSweep {
  0%   { x2: 40;  stroke-dasharray: 3 4; opacity: 0.95; }
  75%  {           stroke-dasharray: 3 4; }
  100% { x2: 580; stroke-dasharray: 6 2; opacity: 1; }
}

/* The needle glides synchronously with the stitches, leading them across. */
.loader.is-active .sewing-machine__needle-group {
  animation: needleSweep 3.2s cubic-bezier(.4, 0, .2, 1) 5s forwards;
}
@keyframes needleSweep {
  from { transform: translateX(0); }
  to   { transform: translateX(540px); }
}

/* The loop+knot is faintly visible from the start — as the stitches arrive, */
/* it settles into full presence with a tiny pulse (the thread tightening). */
.sewing-machine__knot {
  opacity: 0.25;
  transform-origin: 590px 85px;
  transform-box: fill-box;
}
.loader.is-active .sewing-machine__knot {
  animation: knotEmerge 3.2s ease-out 5s forwards;
}
@keyframes knotEmerge {
  0%   { opacity: 0.25; transform: scale(1); }
  70%  { opacity: 0.5;  transform: scale(1); }
  85%  { opacity: 1;    transform: scale(1.12); }
  100% { opacity: 1;    transform: scale(1); }
}

/* Top eyebrow with flanking gold hairlines */
.loader-eyebrow {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  opacity: 0;
  transition: opacity 2s var(--ease-out) .4s;
}
.loader.is-active .loader-eyebrow { opacity: 1; }

.loader-eyebrow-line {
  display: inline-block;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-pale), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 2s var(--ease-out) .6s;
}
.loader.is-active .loader-eyebrow-line { transform: scaleX(1); }

.loader-eyebrow-text {
  font-family: var(--font-body);
  font-size: .72rem;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: var(--gold-pale);
  white-space: nowrap;
}

/* Brand wordmark — letters appear one by one */
.loader-brand {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 1;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.65rem, 2.5vw, 1.75rem);
  white-space: nowrap;
  flex-wrap: wrap;
  color: var(--cream);
}

.loader-brand-atelier,
.loader-brand-funfrock {
  display: inline-flex;
}

.loader-brand-funfrock {
  font-family: var(--font-accent);
  color: var(--gold-glow);
  letter-spacing: .07em;
}

.ll {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  /* Each letter rises gently into place — like ink settling on paper */
  transition: opacity 1.6s var(--ease-out), transform 1.6s var(--ease-out);
  will-change: opacity, transform;
}
.loader.is-active .ll { opacity: 1; transform: translateY(0); }

/* Stagger — Atelier */
.loader.is-active .loader-brand-atelier .ll:nth-child(1) { transition-delay: 1.00s; }
.loader.is-active .loader-brand-atelier .ll:nth-child(2) { transition-delay: 1.08s; }
.loader.is-active .loader-brand-atelier .ll:nth-child(3) { transition-delay: 1.16s; }
.loader.is-active .loader-brand-atelier .ll:nth-child(4) { transition-delay: 1.24s; }
.loader.is-active .loader-brand-atelier .ll:nth-child(5) { transition-delay: 1.32s; }
.loader.is-active .loader-brand-atelier .ll:nth-child(6) { transition-delay: 1.40s; }
.loader.is-active .loader-brand-atelier .ll:nth-child(7) { transition-delay: 1.48s; }

/* The center dot — small but essential */
.loader-brand-dot {
  color: var(--gold-pale);
  font-size: .65em;
  opacity: 0;
  transition: opacity 1.6s var(--ease-out) 1.65s;
}
.loader.is-active .loader-brand-dot { opacity: 1; }

/* Stagger — Funfrock */
.loader.is-active .loader-brand-funfrock .ll:nth-child(1) { transition-delay: 1.85s; }
.loader.is-active .loader-brand-funfrock .ll:nth-child(2) { transition-delay: 1.93s; }
.loader.is-active .loader-brand-funfrock .ll:nth-child(3) { transition-delay: 2.01s; }
.loader.is-active .loader-brand-funfrock .ll:nth-child(4) { transition-delay: 2.09s; }
.loader.is-active .loader-brand-funfrock .ll:nth-child(5) { transition-delay: 2.17s; }
.loader.is-active .loader-brand-funfrock .ll:nth-child(6) { transition-delay: 2.25s; }
.loader.is-active .loader-brand-funfrock .ll:nth-child(7) { transition-delay: 2.33s; }
.loader.is-active .loader-brand-funfrock .ll:nth-child(8) { transition-delay: 2.41s; }

/* Subtitle */
.loader-subtitle {
  font-family: var(--font-body);
  font-size: .75rem;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: rgba(248, 244, 235, .6);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1.6s var(--ease-out) 2.90s, transform 1.6s var(--ease-out) 2.90s;
}
.loader.is-active .loader-subtitle { opacity: 1; transform: translateY(0); }

/* Locations — italic, refined */
.loader-locations {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(248, 244, 235, .5);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1.6s var(--ease-out) 3.40s, transform 1.6s var(--ease-out) 3.40s;
}
.loader.is-active .loader-locations { opacity: 1; transform: translateY(0); }
.loader-locations .loc-dot { color: var(--gold); }

/* When the loader fades out, the brand fades slightly slower than the bg,
   so the wordmark lingers as the maison appears beneath. */
.loader.is-fading-out .loader-content {
  opacity: 0;
  transform: translateY(-12px) scale(0.98);
  transition: opacity 1.4s var(--ease) 0s, transform 1.6s var(--ease) 0s;
}


/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.75rem var(--pad-x);
  transition: background 0.6s var(--ease), padding 0.6s var(--ease), border-color 0.6s, transform .6s var(--ease), color 0.6s var(--ease);
  border-bottom: 1px solid transparent;
  opacity: 0;
}
body.is-loaded .site-header { opacity: 1; transition: opacity 1.4s var(--ease) .3s, background 0.6s var(--ease), padding 0.6s var(--ease), border-color 0.6s, transform .6s var(--ease), color 0.6s var(--ease); }

.site-header.is-scrolled {
  background: rgba(242, 237, 227, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 1rem var(--pad-x);
  border-bottom-color: var(--line-soft);
}
.site-header.is-dark { color: var(--cream); }
.site-header.is-dark.is-scrolled {
  /* Fully opaque on dark sections — even at 0.96 the gold "Six disciplines"
     title was ghosting through. The blur stays for elegance over light
     content elsewhere, but here we want a hard, solid bar. */
  background: rgb(42, 21, 66);
  border-bottom-color: rgba(201, 169, 97, 0.15);
}
.site-header.is-dark .menu-btn span { background: var(--cream); }

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
  max-width: 1320px;
  margin: 0 auto;
}
.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  text-decoration: none;
  position: relative;
}
.logo-top {
  font-family: var(--font-body);
  font-size: .82rem;
  letter-spacing: .55em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ink-soft);
  padding-left: .55em;       /* offsets the trailing letter-spacing so ATELIER sits visually centered over FUNFROCK */
  margin-bottom: .15em;
  transition: color .4s var(--ease), letter-spacing .6s var(--ease);
}
.logo-name {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;           /* "plus gras" — Cormorant Garamond semibold gives Funfrock more weight */
  text-transform: uppercase;
  font-size: 2.4rem;          /* bigger — Funfrock now imposes proper presence */
  letter-spacing: .08em;      /* Cormorant Garamond is narrower — a touch more tracking keeps presence */
  color: var(--ink);
  line-height: .88;
  transition: color .5s var(--ease);
}
.logo:hover .logo-top { letter-spacing: .56em; }
.logo:hover .logo-name { color: var(--gold-deep); }

/* Inverted treatment over dark sections */
.site-header.is-dark .logo-top { color: rgba(245, 239, 227, 0.65); }
.site-header.is-dark .logo-name { color: var(--cream); }
.site-header.is-dark .logo:hover .logo-name { color: var(--gold-pale); }

.nav-main > ul { display: flex; gap: clamp(.9rem, 1.5vw, 1.5rem); list-style: none; justify-content: flex-start; align-items: center; }
/* The right-side nav block aligns its items to the END of its flex track,
   so they sit close to the logo and the lang switcher hugs the right edge. */
.nav-main-right > ul { justify-content: flex-end; }
.nav-main > ul > li { position: relative; }
.nav-main a {
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: .25rem 0;
  position: relative;
  white-space: nowrap;
  transition: color .4s var(--ease);
}
.nav-main > ul > li > a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform .7s var(--ease);
}
.nav-main a:hover { color: var(--gold-deep); }
.site-header.is-dark .nav-main a:hover { color: var(--gold-pale); }
.nav-main > ul > li > a:hover::after,
.nav-main > ul > li.has-children:hover > a::after,
.nav-main > ul > li.is-current-parent > a::after { transform: scaleX(1); transform-origin: left; }

/* === Dropdowns — hybrid pattern ===                                       */
/* Hover the parent: a panel of subpage links flies out below.              */
/* Click the parent: the href fires (anchor scroll, one-page behavior).     */
/* Click a child: the href fires (navigate to the dedicated subpage).       */
.has-children { /* the bridge that keeps the hover alive across the gap */ }
.has-children::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -1rem;
  right: -1rem;
  height: 1.1rem;
}
.nav-dropdown {
  position: absolute;
  top: calc(100% + 1.1rem);
  left: -1.5rem;
  min-width: 215px;
  background: var(--bg-deep);
  border: 1px solid rgba(201, 169, 97, 0.18);
  padding: .4rem 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .35s var(--ease), visibility .35s var(--ease), transform .4s var(--ease);
  z-index: 110;
  box-shadow: 0 28px 60px rgba(25, 10, 40, 0.45);
}
.has-children:hover > .nav-dropdown,
.has-children:focus-within > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown li { position: relative; list-style: none; }
.nav-dropdown a {
  display: block;
  position: relative;             /* establish containing block for ::before */
  padding: .55rem 1.4rem;
  font-family: var(--font-body);
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cream);
  white-space: nowrap;
  line-height: 1.3;
  transition: color .3s var(--ease), background .3s var(--ease), padding-left .35s var(--ease);
}
.nav-dropdown a::after { display: none; }
.nav-dropdown a:hover {
  color: var(--gold-pale);
  background: rgba(245, 239, 227, 0.04);
  padding-left: 1.7rem;
}

/* Left cluster — edge group (back-btn + socials) and nav-main now flow as
   flex siblings with justify-content: space-between. The edge group hugs the
   far left of the column (matching the original visual design); the nav-main
   hugs the right (close to the logo). All remaining space sits between them,
   so they can never overlap regardless of which one is wider. */
.header-left {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Right cluster — mirrors the left cluster's space-between layout so the nav
   sits close to the logo and the lang switcher hugs the far-right edge. Both
   sides now have the SAME gap between logo and nav, restoring symmetry. */
.header-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: .72rem;
  letter-spacing: .25em;
  text-transform: uppercase;
}
.header-right .lang {
  /* No longer absolutely positioned — flows naturally to the end via the
     flex container's justify-content: space-between. */
  margin-left: 0;
}

/* Edge group — now flows as a regular flex child, sits first inside header-left.
   Used to be absolute at left:0, which caused the overlap bug with the centered
   nav-main-left. */
.header-edge {
  display: flex;
  align-items: center;
  gap: .85rem;
  flex-shrink: 0;
}

/* Socials — small icon-anchors that match the reference site rhythm.
   Color responds to header dark mode (over Hero, Craft, Year sections). */
.header-socials {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.header-socials .social-icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  border-radius: 50%;
  transition: color .35s var(--ease), transform .4s var(--ease);
}
.header-socials .social-icon:hover {
  color: var(--gold-deep);
  transform: translateY(-2px);
}
.site-header.is-dark .header-socials .social-icon {
  color: rgba(245, 239, 227, 0.7);
}
.site-header.is-dark .header-socials .social-icon:hover {
  color: var(--gold-pale);
}

/* Social icons — present in the right cluster of the header */
.header-socials {
  display: flex;
  align-items: center;
  gap: .55rem;
}
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--ink-soft);
  border-radius: 50%;
  transition: color .35s var(--ease), background .35s var(--ease), transform .4s var(--ease);
}
.social-icon:hover {
  color: var(--gold-deep);
  transform: translateY(-2px);
}
.site-header.is-dark .social-icon { color: rgba(245, 239, 227, 0.7); }
.site-header.is-dark .social-icon:hover { color: var(--gold-pale); }
.lang-sep { opacity: .4; padding: 0 .35em; }
.lang-alt { border-bottom: 1px solid transparent; transition: border-color .4s var(--ease); }
.lang-alt:hover { border-color: var(--gold); }
.menu-btn { display: none; flex-direction: column; gap: 5px; }
.menu-btn span { width: 22px; height: 1px; background: var(--ink); transition: background .4s; }

@media (max-width: 1200px) {
  /* Nav doesn't fit cleanly with the logo on smaller viewports — show the
     hamburger menu instead. (Was 900px before, which caused the back-btn +
     socials + nav overlap on common 1024-1366px laptops.) */
  .nav-main { display: none; }
  .header-socials { display: none; }
  .menu-btn { display: flex; }
  /* Keep the 3-column grid so the logo remains centered between */
  /* an (often empty) left and a slim right cluster.              */
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0 var(--pad-x);
  /* Reserve space at the bottom so the centered .hero-content never collides
     with the absolutely-positioned .hero-foot (Discover cue + meta). Reduced
     from earlier value because the eyebrow is now an absolute top-center
     marker, no longer inside hero-content — so the centered content block
     (title + sub) is shorter and needs less safety padding. */
  padding-bottom: clamp(6rem, 14vh, 10rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-deep);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

/* Video background.
   Source is a 9:16 vertical clip of an upholsterer hammering decorative
   nails — quiet, slow, repetitive craftsmanship. Cover-fitted so it always
   fills the viewport regardless of orientation, then the veil + spotlight
   layers compose the brooding "candlelit atelier" mood on top. */
.hero-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  /* translate3d (vs translate) explicitly promotes this to its own GPU layer.
     On weaker GPUs that's the difference between smooth compositing and
     CPU-side video frame copy work — large impact for a one-line change. */
  transform: translate3d(-50%, -50%, 0) scale(1.02);
  object-fit: cover;
  object-position: center 35%;            /* Bias toward the hands/work, not the floor */
  /* Heavy desaturation + brightness drop pushes the image toward charcoal &
     champagne; faint contrast lift keeps the brass nails and fabric texture
     readable through the veil. */
  filter: saturate(.32) brightness(.42) contrast(1.12);
  opacity: 0;
  transition: opacity 2.2s var(--ease);
  will-change: opacity, transform;
  pointer-events: none;
  backface-visibility: hidden;            /* extra hint to lock the layer */
}
body.is-loaded .hero-bg-video {
  opacity: 1;
}

/* Subtle, perpetual breathing on the video — only after load, gentle enough
   to feel like the room is alive without distracting from the type. */
@media (prefers-reduced-motion: no-preference) {
  body.is-loaded .hero-bg-video {
    animation: heroBreathing 14s ease-in-out 3s infinite alternate;
  }
}
@keyframes heroBreathing {
  0%   { transform: translate3d(-50%, -50%, 0) scale(1.02); }
  100% { transform: translate3d(-50%, -50%, 0) scale(1.07); }
}

.hero-bg-veil {
  position: absolute; inset: 0;
  /* Heavier base darken (vs the old image hero) — the video's beige fabric
     is much brighter than the original purple-velvet photo, so the veil has
     to do more work. Three layers: a top-to-bottom gradient that anchors
     the type at top and seals the foot at bottom, a radial vignette that
     centers the eye, and a faint purple wash to keep it on-palette. */
  background:
    linear-gradient(180deg,
      rgba(25, 10, 40, .55) 0%,
      rgba(42, 21, 66, .35) 35%,
      rgba(42, 21, 66, .55) 65%,
      rgba(25, 10, 40, .88) 100%),
    radial-gradient(ellipse at center,
      transparent 0%,
      rgba(42, 21, 66, .35) 60%,
      rgba(25, 10, 40, .55) 100%),
    linear-gradient(0deg, rgba(91, 45, 127, .12), rgba(91, 45, 127, .12));
}

/* Cursor-tracked warm spotlight — candlelight following the visitor.
   v4 used a 700px radius which painted ~1.5 million pixels every cursor
   move. Reduced to 450px (~640k px) — still a clear pool of light but
   2.4× less paint per frame. The screen blend mode is fine here because
   the spotlight only animates when the hero is on-screen (JS gates it). */
.hero-spotlight {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    450px circle at var(--mx, 50%) var(--my, 50%),
    rgba(239, 221, 176, 0.28) 0%,
    rgba(239, 221, 176, 0.12) 22%,
    rgba(239, 221, 176, 0.04) 45%,
    transparent 75%
  );
  mix-blend-mode: screen;
  transition: background 0.35s var(--ease);
  opacity: 0;
}
body.is-loaded .hero-spotlight {
  opacity: 1;
  transition: opacity 2.5s var(--ease) 1.2s, background 0.35s var(--ease);
}
@media (max-width: 900px) { .hero-spotlight { display: none; } }

/* Hero frame — thin gold hairlines top and bottom */
.hero-frame { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-frame-top, .hero-frame-bottom {
  position: absolute;
  left: var(--pad-x); right: var(--pad-x);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224, 201, 148, .35) 30%, rgba(224, 201, 148, .35) 70%, transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 2s var(--ease-out);
}
.hero-frame-top { top: clamp(5.5rem, 9vh, 8rem); }
.hero-frame-bottom { bottom: clamp(5rem, 8vh, 7rem); }
body.is-loaded .hero-frame-top { transform: scaleX(1); transition-delay: .8s; }
body.is-loaded .hero-frame-bottom { transform: scaleX(1); transition-delay: 1s; }

/* Side markers */
.hero-marker {
  position: absolute;
  z-index: 3;
  color: var(--gold-pale);
  font-size: .65rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: .75rem;
  opacity: 0;
  transition: opacity 1.4s var(--ease) .9s, transform 1.4s var(--ease) .9s;
  transform: translateY(8px);
}
body.is-loaded .hero-marker { opacity: 1; transform: translateY(0); }
.hero-marker--tl {
  top: clamp(6rem, 10vh, 9rem);
  left: var(--pad-x);
}
.hero-marker--tr {
  top: clamp(6rem, 10vh, 9rem);
  right: var(--pad-x);
}
.hero-marker--tr { transition-delay: 1.05s; }
.hero-marker-text { color: var(--gold-pale); }

.hero-content {
  position: relative;
  z-index: 3;
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  padding-top: 4rem;
  will-change: transform, opacity;
}
.hero-eyebrow {
  /* Now a top-center marker, peer of .hero-marker--tl and --tr.
     Positioned absolutely on the SAME line as N° I and Maison Française. */
  position: absolute;
  top: clamp(6rem, 10vh, 9rem);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: .65rem;          /* match marker font-size for visual harmony */
  letter-spacing: .4em;       /* match marker letter-spacing */
  text-transform: uppercase;
  color: var(--gold-pale);    /* match marker color */
  margin: 0;                  /* drop the old margin-bottom — no longer in flex flow */
  white-space: nowrap;
  opacity: 0;
  transition: opacity 1.4s var(--ease) .9s, transform 1.4s var(--ease) .9s;
}
body.is-loaded .hero-eyebrow {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.hero-eyebrow-line {
  width: 50px; height: 1px;
  background: var(--gold-pale);
  display: inline-block;
  transform-origin: left;
  transform: scaleX(0);
}
body.is-loaded .hero-eyebrow-line {
  transform: scaleX(1);
  transition: transform 1.4s var(--ease) 1s;
}
/* Second line on the right of the centered text — mirrored animation,
   scales in from the RIGHT for symmetry. */
.hero-eyebrow .hero-eyebrow-line:last-child {
  transform-origin: right;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.8rem, 8.5vw, 9rem);
  line-height: .94;
  letter-spacing: -.025em;
  color: var(--cream);
  text-shadow: 0 2px 60px rgba(0,0,0,.35);
}
.hero-title .line {
  display: block;
  overflow: hidden;
  padding: .04em 0;
}
.hero-title .word {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.8s var(--ease-out);
}
body.is-loaded .hero-title .word { transform: translateY(0); }
body.is-loaded .hero-title .line:nth-child(1) .word { transition-delay: 1.2s; }
body.is-loaded .hero-title .line:nth-child(2) .word { transition-delay: 1.4s; }
body.is-loaded .hero-title .line:nth-child(3) .word { transition-delay: 1.7s; }
.hero-title .word.italic em {
  font-family: var(--font-accent);
  font-style: normal;
  font-weight: 300;
  letter-spacing: .01em;
  color: var(--gold-pale);
}
.hero-title .line:nth-child(2) { text-indent: 1.5em; }

/* The year line — a refined signature beneath the dramatic display title */
.hero-title .line-year {
  text-indent: 6em;
  font-size: 0.48em;
  margin-top: 0.55em;
  letter-spacing: 0.04em;
}
.hero-title .line-year .word {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 300;
  color: var(--cream);
  opacity: 0.85;
}
@media (max-width: 700px) {
  .hero-title .line:nth-child(2) { text-indent: 1em; }
  .hero-title .line-year { text-indent: 3em; font-size: 0.55em; }
}

[data-hero-fade] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.4s var(--ease) 1.9s, transform 1.4s var(--ease) 1.9s;
}
body.is-loaded [data-hero-fade] { opacity: 1; transform: translateY(0); }

.hero-sub {
  margin-top: 2.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  letter-spacing: .08em;
  color: rgba(248, 244, 235, .85);
}
.hero-sub em {
  font-family: var(--font-accent);
  font-style: normal;
  color: var(--gold-pale);
  letter-spacing: .04em;
}

/* Hero foot */
.hero-foot {
  position: absolute;
  bottom: clamp(2rem, 4vh, 3rem);
  left: var(--pad-x);
  right: var(--pad-x);
  z-index: 3;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  opacity: 0;
  transition: opacity 1.4s var(--ease) 2.1s;
}
body.is-loaded .hero-foot { opacity: 1; }

.hero-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
}
.hero-scroll-label {
  font-size: .65rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: .7;
}
.hero-scroll-line {
  width: 1px; height: 50px;
  background: linear-gradient(180deg, var(--gold-pale), transparent);
  animation: cueDrop 2.4s var(--ease) infinite;
  transform-origin: top;
}
@keyframes cueDrop {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

.hero-meta-foot {
  display: flex;
  align-items: center;
  gap: clamp(.85rem, 2vw, 1.5rem);
  color: var(--cream);
}
.hero-meta-item-foot {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-family: var(--font-display);
}
.hero-meta-item-foot em {
  font-family: var(--font-accent);
  font-style: normal;
  font-size: 1.25rem;
  color: var(--gold-pale);
}
.hero-meta-item-foot span {
  font-size: .65rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  opacity: .6;
}
.hero-meta-divider {
  width: 1px; height: 14px;
  background: rgba(224, 201, 148, .3);
}

@media (max-width: 900px) {
  /* Shrink the decorative lines slightly when there's less horizontal room,
     so the centered eyebrow doesn't crowd the corner markers. */
  .hero-eyebrow .hero-eyebrow-line { width: 30px; }
}
@media (max-width: 700px) {
  .hero-foot { flex-direction: column; align-items: start; gap: 1rem; }
  .hero-marker { font-size: .55rem; gap: .5rem; }
  .hero-eyebrow {
    font-size: .55rem;
    letter-spacing: .3em;
    gap: .6rem;
  }
  /* On very narrow screens the decorative lines flanking the eyebrow text
     would crash into the corner markers (N° I, Maison Française). Drop them. */
  .hero-eyebrow .hero-eyebrow-line { display: none; }
}
@media (max-width: 500px) {
  /* Even more compact on tiny screens — and we also hide it entirely if it's
     about to crowd. Up to the brand: keep it visible at all sizes for now. */
  .hero-eyebrow { letter-spacing: .25em; }
}

/* ============================================================
   STATEMENT
   ============================================================ */
.statement {
  height: 220vh;
  background: var(--bg);
  position: relative;
}
.statement-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  padding: 0 var(--pad-x);
  overflow: hidden;
}
.statement-eyebrow {
  position: absolute;
  top: 14vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: .72rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.statement-text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.5rem, 11vw, 13rem);
  line-height: .95;
  letter-spacing: -.03em;
  text-align: center;
  max-width: 100%;
}
.statement-line-break { display: block; }
.statement-word {
  display: inline-block;
  color: rgba(43, 31, 56, .12);
  transition: color .7s var(--ease), transform 1.2s var(--ease-out);
  margin: 0 .15em;
  transform: translateY(50px);
  opacity: 0;
}
.statement-word.italic {
  font-family: var(--font-accent);
  font-style: normal;
  color: rgba(201, 169, 97, .25);
}
.statement-word.is-revealed { opacity: 1; transform: translateY(0); }
.statement-word.is-lit { color: var(--ink); }
.statement-word.italic.is-lit { color: var(--gold-deep); }

/* ============================================================
   HERITAGE TIMELINE — five anchor dates over six decades
   ============================================================ */
.timeline {
  background: var(--bg-deep);
  color: var(--cream);
  padding: clamp(10vh, 16vh, 18vh) var(--pad-x);
  border-block: 1px solid rgba(201, 169, 97, .18);
  position: relative;
}
.timeline-inner {
  max-width: var(--max);
  margin: 0 auto;
  text-align: center;
}
.timeline .section-eyebrow {
  color: var(--gold-pale);
  justify-content: center;
  display: inline-flex;
  align-items: center;
}
.timeline .section-title {
  color: var(--cream);
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  letter-spacing: -0.02em;
  margin: 1.25rem 0 1.5rem;
}
.timeline .section-title em {
  color: var(--gold-pale);
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 300;
}
.timeline-intro {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  font-weight: 300;
  letter-spacing: 0.01em;
  color: rgba(245, 239, 227, 0.7);
  max-width: 560px;
  margin: 0 auto clamp(4rem, 8vw, 6.5rem);
  line-height: 1.55;
}

.timeline-track { position: relative; }

.timeline-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
  position: relative;
  align-items: start;
}

/* The thin gold rule running through all the dots */
.timeline-line {
  position: absolute;
  top: 7px; /* aligns with the vertical center of the dots (14px diameter) */
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(239, 221, 176, 0.55) 8%,
    rgba(239, 221, 176, 0.55) 92%,
    transparent);
  z-index: 0;
}

.timeline-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.timeline-marker.is-revealed { opacity: 1; transform: translateY(0); }
.timeline-marker:nth-child(2) { transition-delay: .12s; }
.timeline-marker:nth-child(3) { transition-delay: .24s; }
.timeline-marker:nth-child(4) { transition-delay: .36s; }
.timeline-marker:nth-child(5) { transition-delay: .48s; }
.timeline-marker:nth-child(6) { transition-delay: .60s; }

.timeline-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--bg-deep), 0 0 18px rgba(201, 169, 97, .35);
  position: relative;
  z-index: 2;
  margin-bottom: 2.2rem;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.timeline-marker:hover .timeline-dot {
  transform: scale(1.25);
  box-shadow: 0 0 0 4px var(--bg-deep), 0 0 28px rgba(239, 221, 176, .55);
}

.timeline-year {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.6vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--gold-pale);
  line-height: 1;
  margin-bottom: .9rem;
}

.timeline-label {
  font-family: var(--font-body);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 1.1rem;
}

.timeline-detail {
  font-family: var(--font-body);
  font-size: .82rem;
  line-height: 1.65;
  color: rgba(245, 239, 227, 0.6);
  max-width: 230px;
  margin: 0 auto;
}

/* On narrower viewports: stack vertically with a left-rail line */
@media (max-width: 900px) {
  .timeline-row {
    grid-template-columns: 1fr;
    gap: clamp(3rem, 6vw, 4rem);
    padding-left: 2rem;
  }
  .timeline-line {
    top: 1.5rem;
    bottom: 1.5rem;
    left: calc(2rem - 1px + 7px); /* lines up with dot center */
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg,
      transparent,
      rgba(239, 221, 176, 0.55) 4%,
      rgba(239, 221, 176, 0.55) 96%,
      transparent);
  }
  .timeline-marker {
    align-items: flex-start;
    text-align: left;
    padding-left: 2rem;
    position: relative;
  }
  .timeline-dot {
    position: absolute;
    left: -2rem;
    top: 0.5rem;
    margin-bottom: 0;
  }
  .timeline-detail { max-width: none; }
}

/* Section primitives */
.section-eyebrow {
  font-size: .72rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 1.5rem;
  font-family: var(--font-body);
}
.section-eyebrow.light { color: var(--gold-pale); }

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.5vw, 5rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 2rem;
}
.section-title em {
  font-family: var(--font-accent);
  font-style: normal;
  color: var(--gold-deep);
}
.section-title.display {
  font-size: clamp(3rem, 8vw, 7rem);
  font-style: italic;
}

/* ============================================================
   STORY
   ============================================================ */
.story { background: var(--bg); position: relative; }
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.story-pinned {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-image-stack {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.story-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 1.4s var(--ease), transform 2s var(--ease);
  filter: saturate(.85);
}
.story-image.is-active { opacity: 1; transform: scale(1); }
.story-image-frame {
  position: absolute;
  inset: 0;
  border: 1px solid var(--gold);
  pointer-events: none;
  transform: translate(22px, 22px);
  transition: transform 1.4s var(--ease);
}
.story-pinned:hover .story-image-frame { transform: translate(14px, 14px); }

.story-counter {
  position: absolute;
  bottom: -3.5rem; left: 0;
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--font-accent);
  font-size: .85rem;
  letter-spacing: .35em;
  color: var(--ink-soft);
}
.story-current { color: var(--gold-deep); font-size: 1rem; }
.story-divider { width: 40px; height: 1px; background: var(--line); }

.story-scroll { padding: 12vh 0; }
.story-block {
  min-height: 80vh;
  display: flex; flex-direction: column;
  justify-content: center;
  padding: 6vh 0;
  opacity: .22;
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transform: translateY(20px);
}
.story-block.is-active { opacity: 1; transform: translateY(0); }
.story-block .section-eyebrow { color: var(--gold-deep); }
.story-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
  margin-bottom: 1.5rem;
}
.story-title em {
  font-family: var(--font-accent);
  font-style: normal;
  color: var(--gold-deep);
}
.story-body {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
  max-width: 30em;
}

@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-pinned { position: relative; height: auto; padding: 6vh 0; }
  .story-image-stack { max-width: 90%; }
  .story-counter { position: relative; bottom: auto; margin-top: 2rem; }
  .story-scroll { padding: 4vh 0; }
  .story-block { min-height: auto; padding: 4vh 0; opacity: 1; transform: none; }
}

/* ============================================================
   CRAFT (horizontal)
   ============================================================ */
.craft {
  background: var(--bg-deep);
  color: var(--cream);
  position: relative;
  height: 500vh;
}
.craft-pinned {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.craft-header {
  /* Top padding pushes the title clearly BELOW the fixed site-header.
     Site-header is ~70-80px tall when scrolled, so we leave generous room
     so "Six disciplines" never sits behind it during the horizontal pin. */
  padding: clamp(6rem, 13vh, 9rem) var(--pad-x) 1rem;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: end;
  gap: 2rem;
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}
.craft-section-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-align: center;
}
.craft-section-title em {
  font-family: var(--font-accent);
  font-style: normal;
  color: var(--gold-pale);
}
.craft-progress {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--font-accent);
  font-size: .85rem;
  letter-spacing: .3em;
  justify-self: end;
}
.craft-progress-current { color: var(--gold-pale); }
.craft-progress-total { color: var(--ink-faint); }
.craft-progress-bar { width: 60px; height: 1px; background: rgba(201, 169, 97, .25); position: relative; }
.craft-progress-fill { position: absolute; inset: 0 auto 0 0; background: var(--gold-pale); width: 0%; }

.craft-track {
  display: flex;
  flex: 1;
  gap: 2rem;
  padding: 2rem var(--pad-x) clamp(2rem, 5vh, 4rem);
  will-change: transform;
}
.craft-panel {
  flex: 0 0 70vw;
  max-width: 800px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 0;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(201, 169, 97, .15);
  overflow: hidden;
  position: relative;
  text-decoration: none;
  color: inherit;
}
.craft-panel-image {
  background-size: cover;
  background-position: center;
  filter: saturate(.85) brightness(.95);
  transition: transform 2s var(--ease);
}
.craft-panel:hover .craft-panel-image { transform: scale(1.06); }
.craft-panel-body {
  padding: clamp(1.5rem, 3vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.craft-panel-num {
  font-family: var(--font-accent);
  font-size: .85rem;
  letter-spacing: .3em;
  color: var(--gold-pale);
  margin-bottom: 1.75rem;
  display: block;
}
.craft-panel h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: -.01em;
  margin-bottom: 1rem;
}
.craft-panel p {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(248, 244, 235, .7);
  max-width: 28ch;
  margin-bottom: 1.75rem;
}
.craft-panel-arrow {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold-pale);
  font-size: 1.4rem;
  transition: transform .6s var(--ease);
  display: inline-block;
}
.craft-panel:hover .craft-panel-arrow { transform: translateX(10px); }

@media (max-width: 900px) {
  .craft { height: auto; }
  .craft-pinned { position: relative; height: auto; }
  .craft-header { grid-template-columns: 1fr; text-align: center; }
  .craft-progress { justify-self: center; }
  .craft-track { flex-direction: column; padding-bottom: 2rem; }
  .craft-panel { flex: none; grid-template-columns: 1fr; width: 100%; }
  .craft-panel-image { height: 280px; }
}

/* ============================================================
   YEAR (MCMLVIII)
   ============================================================ */
.year-section {
  height: 260vh;
  background: var(--bg-deep);
  position: relative;
}
.year-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.year-bg {
  position: absolute;
  inset: -10%;
  background-size: cover;
  background-position: center;
  filter: saturate(.35) brightness(.28);
  will-change: transform, opacity;
}
.year-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(42, 21, 66,.55) 0%, rgba(42, 21, 66,.3) 50%, rgba(42, 21, 66,.8) 100%),
    radial-gradient(ellipse at center, transparent 0%, rgba(42, 21, 66,.45) 100%);
}
.year-headline {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Pull the prelude visually closer to the giant.
     The giant's line-box is huge (clamp 5rem→28rem) but its initial
     scale(.4) makes the visible glyphs sit lower than the line-box top.
     A negative gap pulls the prelude into that "white space" so the two
     read as one composition rather than two stacked elements. */
  gap: clamp(-8vh, -4vw, -2vh);
}
.year-prelude {
  font-family: var(--font-accent);  /* Italiana */
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  letter-spacing: .12em;
  color: var(--gold-pale);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.7);
  text-transform: none;
  margin: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.4s var(--ease), transform 1.4s var(--ease);
  white-space: nowrap;
}
.year-prelude.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.year-giant {
  position: relative;
  z-index: 1;
  font-family: var(--font-accent);
  font-size: clamp(5rem, 22vw, 28rem);
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--cream);
  text-shadow: 0 4px 80px rgba(0,0,0,.6);
  transform: scale(.4);
  will-change: transform, letter-spacing;
}
.year-sub {
  position: absolute;
  z-index: 2;
  top: calc(50% + 12vh);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  color: var(--gold-pale);
  font-size: .72rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.year-sub-line {
  width: 60px; height: 1px;
  background: var(--gold-pale);
}
.year-sub.is-revealed { opacity: 1; }

.year-meta {
  position: absolute;
  bottom: 8vh;
  left: var(--pad-x);
  right: var(--pad-x);
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--cream);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.year-meta.is-revealed { opacity: 1; transform: translateY(0); }
.year-eyebrow {
  font-size: .72rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--gold-pale);
}
.year-line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.8rem);
  line-height: 1.1;
}

/* ============================================================
   MATERIALS
   ============================================================ */
.materials { background: var(--bg); }
.material-band {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  min-height: 80vh;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid var(--line-soft);
}
.material-band-reverse { grid-template-columns: 1fr 1.6fr; }
.material-band-reverse .material-label { order: -1; }
.material-img {
  background-size: cover;
  background-position: center;
  filter: saturate(.85);
  position: relative;
  overflow: hidden;
  will-change: transform;
}
.material-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(42, 21, 66,.15) 100%);
}
.material-label {
  padding: clamp(2rem, 6vw, 6rem);
  display: flex; flex-direction: column;
  justify-content: center;
  background: var(--bg);
}
.material-eyebrow {
  display: block;
  font-family: var(--font-accent);
  font-size: 1.2rem;
  color: var(--gold-deep);
  margin-bottom: 1rem;
}
.material-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 1.5rem;
}
.material-desc {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 24ch;
  line-height: 1.5;
}

@media (max-width: 800px) {
  .material-band, .material-band-reverse { grid-template-columns: 1fr; min-height: auto; }
  .material-band-reverse .material-label { order: 0; }
  .material-img { min-height: 60vh; }
}

/* ============================================================
   HERITAGE
   ============================================================ */
.heritage {
  background: var(--bg-deep);
  color: var(--cream);
  padding: clamp(8vh, 16vh, 22vh) var(--pad-x);
  position: relative;
  overflow: hidden;
}
.heritage::before {
  content: '';
  position: absolute;
  top: -30%; right: -10%;
  width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(201, 169, 97,.18), transparent 60%);
  filter: blur(60px);
  pointer-events: none;
}
.heritage-inner { max-width: var(--max); margin: 0 auto; position: relative; }
.heritage-paragraph {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.8vw, 3.6rem);
  line-height: 1.2;
  letter-spacing: -.005em;
  margin-bottom: 8vh;
  max-width: 22ch;
}
[data-word-reveal] .reveal-word {
  display: inline-block;
  color: rgba(248, 244, 235, .15);
  transition: color .5s var(--ease);
}
[data-word-reveal] .reveal-word.is-lit { color: var(--cream); }
.quote [data-word-reveal] .reveal-word { color: rgba(43, 31, 56, .15); }
.quote [data-word-reveal] .reveal-word.is-lit { color: var(--ink); }

.heritage-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding-top: 4rem;
  border-top: 1px solid rgba(201, 169, 97, .2);
}
.stat {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.stat.is-revealed { opacity: 1; transform: translateY(0); }
.stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
  color: var(--gold-pale);
  margin-bottom: .5rem;
}
.stat-num .plus { font-family: var(--font-accent); }
.stat-label {
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(248, 244, 235, .55);
}

@media (max-width: 700px) {
  .heritage-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   COMMISSIONS (ledger)
   ============================================================ */
.commissions {
  background: var(--bg-deep);
  color: var(--cream);
  padding: clamp(10vh, 18vh, 22vh) var(--pad-x);
  position: relative;
  border-top: 1px solid rgba(201, 169, 97, .15);
  overflow: hidden;
}
.commissions::before {
  content: '';
  position: absolute;
  top: 20%; left: -10%;
  width: 50%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(201, 169, 97,.12), transparent 60%);
  filter: blur(80px);
  pointer-events: none;
}
.commissions-inner {
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
}
.commissions-header {
  margin-bottom: 5rem;
}
.commissions-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -.02em;
}
.commissions-title em {
  font-family: var(--font-accent);
  font-style: normal;
  color: var(--gold-pale);
}

.commissions-ledger {
  list-style: none;
  border-top: 1px solid rgba(201, 169, 97, .2);
}
.commission-row {
  display: grid;
  grid-template-columns: 130px 2fr 1.5fr;
  align-items: baseline;
  gap: 2rem;
  padding: 2rem 0;
  border-bottom: 1px solid rgba(201, 169, 97, .12);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
  position: relative;
}
.commission-row.is-revealed { opacity: 1; transform: translateY(0); }
.commission-row::before {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 0;
  height: 1px;
  background: var(--gold-pale);
  transition: width 1.2s var(--ease) .3s;
}
.commission-row.is-revealed::before { width: 100%; }

.commission-row:hover .commission-place,
.commission-row:hover .commission-year,
.commission-row:hover .commission-meta {
  color: var(--cream);
}

.commission-year {
  font-family: var(--font-accent);
  font-size: 1rem;
  letter-spacing: .25em;
  color: var(--gold-pale);
  transition: color .5s var(--ease);
}
.commission-place {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  line-height: 1.1;
  color: var(--cream);
  letter-spacing: -.005em;
  transition: color .5s var(--ease);
}
.commission-place em {
  font-family: var(--font-accent);
  font-style: normal;
  color: var(--gold-pale);
  font-size: .8em;
  margin-left: .3em;
}
.commission-meta {
  font-size: .85rem;
  letter-spacing: .03em;
  color: rgba(248, 244, 235, .55);
  text-align: right;
  transition: color .5s var(--ease);
}

.commissions-footnote {
  margin-top: 5rem;
  font-family: var(--font-display);
  font-size: 1rem;
  color: rgba(248, 244, 235, .45);
  text-align: center;
  letter-spacing: .02em;
}

@media (max-width: 800px) {
  .commission-row { grid-template-columns: 1fr; gap: .5rem; padding: 1.75rem 0; }
  .commission-meta { text-align: left; }
}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery {
  background: var(--bg);
  padding: clamp(8vh, 16vh, 18vh) var(--pad-x);
  overflow: hidden;
}
.gallery-header {
  text-align: center;
  max-width: var(--max);
  margin: 0 auto;
  /* The header sits ABOVE the parallax columns and its background extends */
  /* through the full buffer zone — so columns moving up can't bleed into  */
  /* the title area. Padding (not margin) creates the visual gap.          */
  position: relative;
  z-index: 2;
  background: var(--bg);
  padding-bottom: clamp(5rem, 8vw, 7rem);
}
/* The "Voir toute la galerie" link, sitting just under the title in the header */
.gallery-link-inline {
  margin-top: 2.25rem;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: var(--max);
  margin: 0 auto;
}
.gallery-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  will-change: transform;
}
.gallery-col-offset { padding-top: 4rem; }
.gallery-item {
  display: block;            /* so a <a> tile fills the column like the divs do */
  background-size: cover;
  background-position: center;
  width: 100%;
  filter: saturate(.85);
  overflow: hidden;
  position: relative;
  transition: filter 1.2s var(--ease);
}
.gallery-item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(42, 21, 66,.15));
}
.gallery-item:hover { filter: saturate(1) brightness(1.05); }

/* === CTA toward the dedicated gallery page === */
.gallery-link {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  padding: 1.1rem 2.2rem;
  border: 1px solid var(--gold);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .6s var(--ease), border-color .6s var(--ease);
}
.gallery-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: translateX(-101%);
  transition: transform .65s var(--ease-velvet);
  z-index: -1;
}
.gallery-link:hover::before { transform: translateX(0); }
.gallery-link:hover { color: var(--bg); border-color: var(--gold); }
.gallery-link svg {
  transition: transform .5s var(--ease);
}
.gallery-link:hover svg { transform: translateX(4px); }

/* Bottom CTA — centered duplicate, in case visitors scroll past the header link */
.gallery-cta-bottom {
  display: flex;
  justify-content: center;
  margin-top: clamp(4rem, 8vw, 6rem);
  padding: 0 var(--pad-x);
}

@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-col-offset { padding-top: 0; }
}
@media (max-width: 600px) {
  .gallery-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   EXPERTISE
   ============================================================ */
.expertise {
  padding: clamp(8vh, 16vh, 18vh) var(--pad-x);
  background: var(--bg-tint);
}
.expertise-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  max-width: var(--max);
  margin: 0 auto 4rem;
  gap: 2rem;
  flex-wrap: wrap;
}
.expertise-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 260px;
  gap: 1.25rem;
  max-width: var(--max);
  margin: 0 auto;
  perspective: 1200px;
}
.exp-card {
  position: relative;
  background: var(--img) center/cover no-repeat, var(--ink);
  overflow: hidden;
  grid-row: span 1;
  display: block;
  transform-style: preserve-3d;
  transition: transform .2s var(--ease-out);
  will-change: transform;
}
.exp-card.tall { grid-row: span 2; }
.exp-card.wide { grid-column: span 2; }
.exp-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(42, 21, 66,.1) 0%, rgba(42, 21, 66,.75) 100%);
  transition: background .8s var(--ease);
}
.exp-card:hover .exp-overlay {
  background: linear-gradient(180deg, rgba(201, 169, 97,.3) 0%, rgba(42, 21, 66,.85) 100%);
}
.exp-content {
  position: absolute;
  bottom: 1.5rem; left: 1.5rem; right: 1.5rem;
  color: var(--cream);
  z-index: 2;
  transform: translateZ(40px);
}
.exp-num {
  font-family: var(--font-accent);
  font-size: .8rem;
  letter-spacing: .3em;
  color: var(--gold-pale);
  text-transform: uppercase;
  display: block;
  margin-bottom: .5rem;
}
.exp-content h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  margin-bottom: .35rem;
}
.exp-arrow {
  display: inline-block;
  font-size: .7rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.exp-card:hover .exp-arrow { opacity: 1; transform: translateY(0); }

@media (max-width: 1100px) {
  .expertise-grid { grid-template-columns: repeat(2, 1fr); }
  .exp-card.wide { grid-column: span 2; }
}
@media (max-width: 600px) {
  .expertise-grid { grid-template-columns: 1fr; grid-auto-rows: 280px; }
  .exp-card.wide, .exp-card.tall { grid-column: auto; grid-row: auto; }
}

/* ============================================================
   QUOTE
   ============================================================ */
.quote {
  padding: clamp(8vh, 16vh, 18vh) var(--pad-x);
  background: var(--cream);
  text-align: center;
  position: relative;
}
.quote-inner { max-width: 60rem; margin: 0 auto; position: relative; }
.quote-mark {
  font-family: var(--font-accent);
  font-size: 12rem;
  line-height: 1;
  color: var(--gold-pale);
  position: absolute;
  top: -3.5rem; left: 50%;
  transform: translateX(-50%);
  opacity: .35;
  pointer-events: none;
}
.quote blockquote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.5vw, 2.75rem);
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -.005em;
}
.quote blockquote em {
  font-family: var(--font-accent);
  font-style: normal;
  color: var(--gold-deep);
}
.quote-attr {
  margin-top: 2rem;
  font-size: .8rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact {
  background: var(--bg-deep);
  color: var(--cream);
  padding: clamp(8vh, 16vh, 18vh) var(--pad-x);
  position: relative;
  overflow: hidden;
}
.contact::before {
  content: '';
  position: absolute;
  bottom: -30%; left: -10%;
  width: 50%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(201, 169, 97,.12), transparent 60%);
  filter: blur(60px);
  pointer-events: none;
}
.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  max-width: var(--max);
  margin: 0 auto;
  align-items: start;
  position: relative;
}
.contact-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 5.5vw, 5rem);
  line-height: 1;
  letter-spacing: -.02em;
  margin: 1.5rem 0 2.5rem;
}
.contact-title .line { display: block; overflow: hidden; padding: .04em 0; }
.contact-title .word {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.4s var(--ease-out);
}
.contact-title.is-revealed .word { transform: translateY(0); }
.contact-title.is-revealed .line:nth-child(2) .word { transition-delay: .2s; }
.contact-title .word.italic em {
  font-family: var(--font-accent);
  font-style: normal;
  color: var(--gold-pale);
}

.contact-cta {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  padding: 1.1rem 2rem;
  border: 1px solid var(--gold);
  color: var(--gold-pale);
  border-radius: 999px;
  font-size: .8rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: color .5s var(--ease), gap .5s var(--ease);
  isolation: isolate;
}
.contact-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--gold);
  transform: translateY(100%);
  transition: transform .7s var(--ease);
  z-index: -1;
}
.contact-cta:hover { color: var(--bg-deep); gap: 1.3rem; }
.contact-cta:hover::before { transform: translateY(0); }
.contact-cta svg { transition: transform .5s var(--ease); }
.contact-cta:hover svg { transform: translateX(4px); }

.contact-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 2rem;
  padding-top: 4rem;
}
.contact-block h4 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .7rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold-pale);
  margin-bottom: .75rem;
}
.contact-block p {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.45;
  color: rgba(248, 244, 235, .85);
}
.contact-block a { position: relative; display: inline-block; }
.contact-block a::after {
  content: '';
  position: absolute; bottom: -2px; left: 0; right: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .7s var(--ease);
}
.contact-block a:hover::after { transform: scaleX(1); transform-origin: left; }

@media (max-width: 900px) {
  .contact-inner { grid-template-columns: 1fr; }
  .contact-right { padding-top: 0; }
}

/* ============================================================
   FOOTER
   ============================================================ */
/* ============================================================
   FOOTER — elevated maison footer (shared across every page)
   Layered depth + ambient gold glow, icon-nav pillars, link
   columns with live contact, refined socials, giant wordmark.
   ============================================================ */
.site-footer {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(91, 45, 127, .42) 0%, transparent 55%),
    radial-gradient(70% 55% at 82% 112%, rgba(159, 131, 68, .12) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-deeper) 45%, #110517 100%);
  color: var(--ink-faint);
  padding: clamp(3.25rem, 5vw, 4.75rem) var(--pad-x) 1.85rem;
  overflow: hidden;
  isolation: isolate;
}
.site-footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 97, .5), transparent);
}
.footer-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(46% 42% at 50% 6%, rgba(224, 201, 148, .13) 0%, transparent 70%);
  animation: footer-glow-drift 14s ease-in-out infinite;
}
@keyframes footer-glow-drift { 0%, 100% { opacity: .68; } 50% { opacity: 1; } }
.footer-inner { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; }

/* ----- Creed ----- */
.footer-creed {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1rem, 3vw, 2.2rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.footer-creed-rule {
  height: 1px; width: clamp(28px, 10vw, 110px);
  background: linear-gradient(90deg, transparent, rgba(201, 169, 97, .5));
}
.footer-creed-rule:last-child { background: linear-gradient(90deg, rgba(201, 169, 97, .5), transparent); }
.footer-creed-text {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.05rem, 1.9vw, 1.55rem);
  color: var(--cream); opacity: .92; text-align: center; margin: 0; letter-spacing: .01em;
}
.footer-creed-text em { font-family: var(--font-accent); color: var(--gold-pale); font-style: italic; }

/* ----- Pillars (icon + label navigation) ----- */
.footer-pillars {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: clamp(2rem, 6vw, 5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(201, 169, 97, .14);
}
.footer-pillar { display: flex; flex-direction: column; align-items: center; gap: .9rem; color: var(--gold-pale); }
.footer-pillar-icon {
  position: relative; display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid rgba(201, 169, 97, .26);
  transition: border-color .55s var(--ease), transform .55s var(--ease), box-shadow .6s var(--ease), background .55s var(--ease);
}
.footer-pillar-icon svg { width: 27px; height: 27px; stroke: var(--gold-pale); fill: none; opacity: .9; transition: stroke .45s var(--ease), opacity .45s; }
.footer-pillar-label {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-faint); transition: color .45s var(--ease);
}
.footer-pillar:hover .footer-pillar-icon {
  transform: translateY(-4px);
  border-color: rgba(224, 201, 148, .7);
  background: radial-gradient(circle at 50% 50%, rgba(224, 201, 148, .14), transparent 70%);
  box-shadow: 0 16px 44px -18px rgba(224, 201, 148, .45);
}
.footer-pillar:hover .footer-pillar-icon svg { stroke: var(--cream); opacity: 1; }
.footer-pillar:hover .footer-pillar-label { color: var(--gold-pale); }

/* ----- Link columns ----- */
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.5fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.25rem, 4vw, 3.25rem);
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.8rem 2rem; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-logo { display: inline-flex; flex-direction: column; line-height: 1; margin-bottom: 1.2rem; }
.footer-logo-top { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .42em; text-transform: uppercase; color: var(--gold-pale); margin-bottom: .45rem; }
.footer-logo-name { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.5rem); color: var(--cream); letter-spacing: .01em; }
.footer-brand-line { font-family: var(--font-accent); font-style: italic; color: var(--gold-pale); font-size: 1.05rem; margin: 0 0 1rem; }
.footer-brand-note { font-family: var(--font-body); font-weight: 300; font-size: .92rem; line-height: 1.75; color: var(--ink-faint); max-width: 42ch; margin: 0; }
.footer-col-title {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-pale); margin: 0 0 1.4rem; padding-bottom: .9rem;
  border-bottom: 1px solid rgba(201, 169, 97, .14);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .72rem; }
.footer-col li a {
  font-family: var(--font-body); font-weight: 300; font-size: .95rem; color: var(--ink-faint);
  display: inline-block; transition: color .35s var(--ease), transform .35s var(--ease);
}
.footer-col li a:hover { color: var(--gold-pale); transform: translateX(5px); }

/* Ateliers / live contact column */
.footer-locs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.3rem; }
.footer-loc { display: flex; flex-direction: column; gap: .22rem; }
.footer-loc-city { font-family: var(--font-display); font-size: 1.18rem; color: var(--cream); }
.footer-loc a { font-family: var(--font-body); font-weight: 300; font-size: .9rem; color: var(--ink-faint); transition: color .35s var(--ease); }
.footer-loc a:hover { color: var(--gold-pale); }
.footer-loc-map { font-family: var(--font-mono) !important; font-size: .6rem !important; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep) !important; margin-top: .2rem; }
.footer-loc-map:hover { color: var(--gold-pale) !important; }
.footer-loc-soon {
  font-family: var(--font-mono); font-size: .52rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--bg-deeper); background: var(--gold-pale); padding: .15rem .45rem; margin-left: .55rem; vertical-align: middle;
}

/* ----- Social ----- */
.footer-social { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 2rem); padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.footer-social-rule { flex: 1; max-width: 240px; height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 169, 97, .28), transparent); }
.footer-socials { display: flex; justify-content: center; gap: 1rem; }
.footer-socials .social-icon {
  width: 40px; height: 40px; color: var(--gold-pale);
  border: 1px solid rgba(201, 169, 97, .22); border-radius: 50%;
  display: grid; place-items: center;
  transition: color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease), transform .45s var(--ease), box-shadow .5s var(--ease);
}
.footer-socials .social-icon:hover {
  color: var(--bg-deeper); background: var(--gold-pale); border-color: var(--gold-pale);
  transform: translateY(-3px); box-shadow: 0 12px 32px -12px rgba(224, 201, 148, .5);
}

/* ----- Giant wordmark ----- */
.footer-mono {
  display: flex; justify-content: center; gap: clamp(.3em, 2vw, 1.1em); flex-wrap: wrap;
  font-family: var(--font-display); color: var(--gold-pale);
  font-size: clamp(1.9rem, 8.5vw, 6rem); letter-spacing: .08em; line-height: .9;
  padding: clamp(.6rem, 2vw, 1.1rem) 0 clamp(1.2rem, 3vw, 1.9rem);
  border-top: 1px solid rgba(201, 169, 97, .14);
}
.footer-mono span { display: inline-block; transition: transform .8s var(--ease), color .3s, text-shadow .4s; opacity: 0; transform: translateY(40px); }
.footer-mono.is-revealed span { opacity: 1; transform: translateY(0); }
.footer-mono span:hover { color: var(--cream); transform: translateY(-8px) !important; text-shadow: 0 10px 34px rgba(224, 201, 148, .38); }

/* ----- Legal ----- */
.footer-meta {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 1.5rem; border-top: 1px solid rgba(201, 169, 97, .14);
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-faint); flex-wrap: wrap; gap: 1rem;
}
.footer-meta a { color: var(--ink-faint); transition: color .35s var(--ease); }
.footer-meta a:hover { color: var(--gold-pale); }
@media (prefers-reduced-motion: reduce) { .footer-glow { animation: none; } }
@media (max-width: 600px) {
  .footer-creed-text { font-size: 1rem; }
  .footer-meta { justify-content: center; text-align: center; }
}

/* General reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .marquee-track { animation: none; }
  .craft, .year-section, .statement { height: auto; }
  .craft-pinned, .year-sticky, .statement-sticky { position: relative; height: auto; min-height: 100vh; }
  .story-pinned { position: relative; height: auto; }
  .statement-word { opacity: 1; transform: none; color: var(--ink); }
}

/* ============================================================
   SUBPAGES (gallery.html, etc.)
   Pages that share the chrome but skip the loader.
   ============================================================ */

/* When on a subpage, the body is already 'is-loaded' from page load — no animation gate. */
body.is-subpage { background: var(--bg); }

/* Header stays opaque from the start on subpages (no scroll-driven reveal needed) */
.site-header.is-static {
  opacity: 1;
  transform: none;
  background: rgba(244, 239, 229, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
}

/* Subpage navbar in DARK mode — activated only after the user has actually
   scrolled into a dark section (script.js gates is-dark behind scrollY > 40).
   On initial page load, this rule does NOT apply: the navbar reads from
   .is-static alone, which is the bright cream variant — text instantly legible.
   When the user reaches a dark band further down the page (yacht-leather,
   resi-prestige, atelier-statement, etc.), .is-dark is added and we transition
   to the luxe violet variant. The 0.6s background transition handles the
   smooth handoff in either direction. */
.site-header.is-static.is-dark {
  background: rgba(25, 10, 40, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(201, 169, 97, 0.2);
  box-shadow: 0 4px 24px -10px rgba(25, 10, 40, 0.5);
}

/* The back arrow button at the very left of the subpage header */
.header-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
}
.header-back-btn:hover {
  color: var(--bg);
  background: var(--gold);
  border-color: var(--gold);
}
.header-back-btn:hover svg { transform: translateX(-2px); }
.header-back-btn svg { transition: transform .4s var(--ease); display: block; }

/* On dark sections (only applies if subpage scrolls into a dark band, edge case) */
.site-header.is-dark .header-back-btn {
  color: var(--cream);
  border-color: rgba(245, 239, 227, 0.25);
}
.site-header.is-dark .header-back-btn:hover {
  color: var(--bg-deep);
  background: var(--gold-pale);
  border-color: var(--gold-pale);
}

/* The current section's parent nav item: subtle gold tint + underline */
.nav-main > ul > li.is-current-parent > a {
  color: var(--gold-deep);
}
.site-header.is-dark .nav-main > ul > li.is-current-parent > a {
  color: var(--gold-pale);
}

/* === SUBPAGE HERO === */
.subpage-hero {
  padding: clamp(14vh, 22vh, 26vh) var(--pad-x) clamp(6vh, 10vh, 12vh);
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.subpage-hero::after {
  /* Subtle hairline gold beneath the title block */
  content: "";
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
  opacity: 0.45;
}
.subpage-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.subpage-title {
  font-size: clamp(3.5rem, 9vw, 7.5rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 1.5rem 0 2.5rem;
}
.subpage-title em {
  font-style: italic;
  color: var(--gold-deep);
}
.subpage-lead {
  max-width: 620px;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 3rem;
}
.subpage-meta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.subpage-meta-sep {
  width: 32px;
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
}

/* === FULL GALLERY GRID === */
.full-gallery {
  padding: clamp(6vh, 10vh, 12vh) var(--pad-x) clamp(8vh, 12vh, 14vh);
  background: var(--bg);
}
.full-gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  max-width: 1500px;
  margin: 0 auto;
}
.fg-item {
  position: relative;
  grid-column: span 4;
  margin: 0;
  overflow: hidden;
  cursor: pointer;
}
.fg-item.fg-wide { grid-column: span 8; }
.fg-item.fg-tall { grid-column: span 4; grid-row: span 2; }
.fg-img {
  width: 100%;
  aspect-ratio: var(--ar, 4/5);
  background-size: cover;
  background-position: center;
  background-color: var(--bg-tint);
  filter: saturate(0.95) brightness(0.97);
  transition: transform 1.2s var(--ease-velvet), filter .7s var(--ease);
}
.fg-item:hover .fg-img {
  transform: scale(1.04);
  filter: saturate(1.05) brightness(1.02);
}
.fg-item figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 0.25rem 0;
  font-family: var(--font-body);
}
.fg-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.fg-title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.25;
}
.fg-place {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.full-gallery-footer {
  margin-top: clamp(5rem, 9vw, 7rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  text-align: center;
}
.full-gallery-note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  color: var(--ink-soft);
  max-width: 520px;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 1000px) {
  .fg-item { grid-column: span 6; }
  .fg-item.fg-wide { grid-column: span 12; }
  .fg-item.fg-tall { grid-column: span 6; grid-row: auto; }
}
@media (max-width: 640px) {
  .fg-item, .fg-item.fg-wide, .fg-item.fg-tall { grid-column: span 12; grid-row: auto; }
}

/* === BACK TO HOME LINK === */
.back-home {
  padding: clamp(5vh, 8vh, 10vh) var(--pad-x);
  background: var(--bg-tint);
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--line-soft);
}
.back-home-link {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color 0.4s var(--ease);
}
.back-home-link:hover { color: var(--gold-deep); }
.back-home-link svg { transition: transform 0.4s var(--ease); }
.back-home-link:hover svg { transform: translateX(-4px); }

/* ============================================================
   ATELIER PAGE — editorial layout for "Les Ateliers"
   ============================================================ */

/* ----- HERO ----- */
/* The whole top viewport is a single B&W photograph of the upholsterer's
   hands at work, deeply darkened and overlaid by the type. The photo is a
   relatively small source (768×661) so we lean on heavy treatment —
   contrast, vignette, dark veil — rather than pixel detail. */
.atelier-hero {
  position: relative;
  min-height: 92vh;
  background: var(--bg-deep);
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.atelier-hero-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  filter: grayscale(1) brightness(.45) contrast(1.15);
  transform: scale(1.04);
  z-index: 0;
}
.atelier-hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(25, 10, 40, .65) 0%,
      rgba(42, 21, 66, .35) 35%,
      rgba(42, 21, 66, .55) 70%,
      rgba(25, 10, 40, .85) 100%),
    radial-gradient(ellipse at center,
      transparent 0%,
      rgba(25, 10, 40, .35) 70%,
      rgba(25, 10, 40, .65) 100%);
  z-index: 1;
}
.atelier-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--cream);
  padding: 0 var(--pad-x);
  max-width: 900px;
}
.atelier-hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3.5rem, 9vw, 8rem);
  line-height: .95;
  letter-spacing: -.015em;
  margin: 1.5rem 0 2rem;
  color: var(--cream);
}
.atelier-hero-title em {
  font-family: var(--font-accent);   /* Italiana — matches "Funfrock" italic */
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.atelier-hero-sub {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(.95rem, 1.6vw, 1.4rem);
  letter-spacing: .04em;
  color: var(--gold-pale);
  opacity: .85;
  margin: 0;
}
.atelier-hero-sub-line {
  width: clamp(40px, 8vw, 80px);
  height: 1px;
  background: var(--gold-pale);
  opacity: .55;
}

/* ----- PRESENTATION — portrait + body text ----- */
.atelier-presentation {
  background: var(--bg);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
  position: relative;
}
.atelier-pres-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: start;
}

.atelier-pres-portrait {
  margin: 0;
  position: sticky;
  top: clamp(8rem, 14vh, 11rem);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.atelier-pres-portrait.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.atelier-pres-portrait-frame {
  position: relative;
  /* Hairline gold frame around the portrait — a museum-label touch */
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  /* Soft outer drop-shadow so the portrait floats over the cream bg */
  box-shadow: 0 30px 60px -30px rgba(42, 21, 66, .18);
}
.atelier-pres-portrait-frame::before {
  /* An inner thin gold rule, just inside the outer line */
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.atelier-pres-portrait-frame img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.05);
  position: relative;
  z-index: 1;
}
.atelier-pres-caption {
  margin: 1.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  text-align: center;
}
.atelier-pres-caption-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: .04em;
  color: var(--ink);
}
.atelier-pres-caption-role {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.atelier-pres-caption-role em {
  font-family: var(--font-accent);
  font-style: italic;
  text-transform: none;
  letter-spacing: .04em;
  font-size: 1.05rem;
  color: var(--gold-deep);
}

.atelier-pres-text {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.atelier-pres-text.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.atelier-section-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 1rem 0 clamp(2rem, 4vw, 3.2rem);
  max-width: 16ch;
}
.atelier-section-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}
.atelier-pres-body {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.atelier-pres-body p {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 300;
  max-width: 56ch;
  margin: 0;
}
.atelier-pres-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}
.atelier-pres-leading {
  /* Drop-cap-ish lead on the first phrase — small caps in display font */
  font-family: var(--font-display);
  font-size: 1.05em;
  font-style: italic;
  color: var(--ink);
}

@media (max-width: 900px) {
  .atelier-pres-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .atelier-pres-portrait {
    position: static;
    max-width: 340px;
    margin: 0 auto;
  }
}

/* ----- STATEMENT — full-width quote on deep purple ----- */
.atelier-statement-section {
  background: var(--bg-deep);
  padding: clamp(10vh, 18vh, 22vh) var(--pad-x);
  position: relative;
  overflow: hidden;
}
/* Subtle radial highlight, like a candle held just above the text */
.atelier-statement-section::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 80%; aspect-ratio: 2/1;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse,
    rgba(201, 169, 97, .08) 0%,
    transparent 70%);
  pointer-events: none;
}
.atelier-statement-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.5s var(--ease), transform 1.5s var(--ease);
}
.atelier-statement-inner.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.atelier-statement-quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.5rem, 3.5vw, 3rem);
  line-height: 1.25;
  letter-spacing: -.005em;
  color: var(--cream);
  margin: 0 0 2.5rem;
}
.atelier-statement-quote em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
}
.atelier-statement-attr {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-pale);
  opacity: .75;
  margin: 0;
}
.atelier-statement-attr em {
  font-family: var(--font-accent);
  font-style: italic;
  text-transform: none;
  letter-spacing: .04em;
  font-size: .98rem;
  margin-left: .35rem;
}

/* ----- PARTNERS — centered intro + 3×3 logo grid ----- */
.atelier-partners {
  background: var(--bg);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.atelier-partners-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Centered header block — eyebrow, title, body all stacked & centered */
.atelier-partners-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(4rem, 8vw, 7rem);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.atelier-partners-head.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.atelier-partners-head .section-eyebrow { justify-content: center; display: flex; }
.atelier-partners-head .atelier-section-title {
  margin-left: auto;
  margin-right: auto;
  max-width: none;
}
.atelier-partners-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 300;
  margin: 0 auto;
  max-width: 56ch;
}
.atelier-partners-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}

/* The grid itself — 3 columns on desktop, 2 on tablet, 1 on small mobile */
.atelier-partners-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Hairline dividers between cells — a single 1px overlay grid */
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  opacity: 0;
  transition: opacity 1.6s var(--ease) .2s;
}
.atelier-partners-grid.is-revealed { opacity: 1; }

@media (max-width: 900px) {
  .atelier-partners-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .atelier-partners-grid { grid-template-columns: 1fr; }
}

.atelier-partner-cell {
  position: relative;
  /* Each cell is a fixed aspect ratio so the grid has a clean even rhythm */
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  transition: background .5s var(--ease);
  overflow: hidden;
}
/* Subtle background lift on hover — never overpowering, never colored */
.atelier-partner-cell:hover { background: var(--bg-tint); }

.atelier-partner-cell img {
  display: block;
  max-width: 60%;
  max-height: 70%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Unify every logo's tonal weight: desaturate, drop the brightness a touch
     so the brand marks read as a single "house of houses" — not a circus. */
  filter: grayscale(1) brightness(.55) contrast(1.1);
  opacity: .65;
  transition: filter .6s var(--ease), opacity .5s var(--ease), transform .6s var(--ease);
  will-change: transform;
}
.atelier-partner-cell:hover img {
  filter: grayscale(1) brightness(.25) contrast(1.15);
  opacity: 1;
  transform: scale(1.04);
}

/* Houlès logo arrives with a dark-purple background baked in. On the cream
   page that looks like a black square. The --dark modifier inverts the cell
   so the logo reads as a luminous mark on a deep field instead. */
.atelier-partner-cell--dark {
  background: var(--bg-deep);
  border-right-color: rgba(201, 169, 97, .15);
  border-bottom-color: rgba(201, 169, 97, .15);
}
.atelier-partner-cell--dark:hover { background: var(--bg-deeper); }
.atelier-partner-cell--dark img {
  filter: grayscale(1) brightness(1.1) contrast(1.1) invert(.85);
  opacity: .85;
  mix-blend-mode: screen;
}
.atelier-partner-cell--dark:hover img {
  filter: grayscale(1) brightness(1.3) contrast(1.15) invert(.92);
  opacity: 1;
}

/* ============================================================
   PARTNERS MARQUEE — a subtle, self-scrolling single-line band of
   partner logos. Smaller marks than the old grid; edges fade out;
   the track pauses on hover and stops entirely for reduced-motion.
   ============================================================ */
.partners-marquee {
  background: var(--bg);
  padding: clamp(7vh, 12vh, 16vh) 0;
  overflow: hidden;
}

/* Centered intro — eyebrow, title, body (mirrors the old head block) */
.partners-marquee-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(2.75rem, 5vw, 4.5rem);
  padding: 0 var(--pad-x);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.partners-marquee-head.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.partners-marquee-head .section-eyebrow { justify-content: center; display: flex; }
.partners-marquee-head .atelier-section-title {
  margin-left: auto;
  margin-right: auto;
  max-width: none;
}
.partners-marquee-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 300;
  margin: 1.1rem auto 0;
  max-width: 56ch;
}
.partners-marquee-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}

/* Viewport masks the moving track and fades it softly at both edges */
.partners-marquee-viewport {
  position: relative;
  /* Explicit clip at the mask boundary: in browsers without mask-image the band
     still degrades cleanly (sharp edges instead of a soft fade), and the wide
     track can never leak out on a slow/interrupted render. */
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.4s var(--ease) .2s;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.partners-marquee-viewport.is-revealed { opacity: 1; }

.partners-marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: clamp(2.25rem, 5vw, 4.5rem);
  /* Two identical sets sit side by side; translating exactly -50% scrolls one
     full set, so the loop is perfectly seamless. Duration comes from the view
     (≈4s per logo) so the pace stays constant whatever the logo count. */
  animation: partners-marquee-scroll var(--marquee-duration, 60s) linear infinite;
  will-change: transform;
}
.partners-marquee-viewport:hover .partners-marquee-track,
.partners-marquee-track:focus-within {
  animation-play-state: paused;
}

@keyframes partners-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.partners-marquee-cell {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(44px, 5.5vw, 64px);
}
.partners-marquee-cell img {
  display: block;
  width: auto;
  height: 100%;
  max-width: clamp(92px, 11vw, 150px);
  object-fit: contain;
  /* Unify every logo's tonal weight — desaturate and dim so the marks read as
     one "house of houses", never a circus of competing brand colours. */
  filter: grayscale(1) brightness(.55) contrast(1.1);
  opacity: .6;
  transition: filter .6s var(--ease), opacity .5s var(--ease);
}
.partners-marquee-cell img:hover {
  filter: grayscale(1) brightness(.25) contrast(1.15);
  opacity: 1;
}

/* Respect a reduced-motion preference: stop the scroll and lay the (single,
   real) set out as a centered, wrapping row instead. */
@media (prefers-reduced-motion: reduce) {
  .partners-marquee-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    row-gap: clamp(1.5rem, 3vw, 2.5rem);
  }
  .partners-marquee-cell.is-clone { display: none; }
}

/* ----- CTA — closing invite ----- */
.atelier-cta {
  background: var(--bg-tint);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
  text-align: center;
  border-top: 1px solid var(--line);
}
.atelier-cta-inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.atelier-cta-eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
.atelier-cta-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -.005em;
  margin: 0;
  max-width: 28ch;
}
.atelier-cta-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}
/* Optional image in a CTA — sits centred between the title and the button. */
.atelier-cta-figure {
  margin: 0;
  width: 100%;
  max-width: 600px;
  overflow: hidden;
  border-radius: 2px;
  border: 1px solid var(--line);
}
.atelier-cta-figure img { display: block; width: 100%; height: auto; }

/* ============================================================
   SHOWROOMS PAGE — sub-page of Atelier
   ============================================================ */

/* ----- HERO ----- */
.showroom-hero {
  position: relative;
  min-height: 92vh;
  background: var(--bg-deep);
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.showroom-hero-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  filter: brightness(.42) contrast(1.08) saturate(.45);
  transform: scale(1.04);
  z-index: 0;
}
.showroom-hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(25, 10, 40, .55) 0%,
      rgba(42, 21, 66, .3) 35%,
      rgba(42, 21, 66, .5) 70%,
      rgba(25, 10, 40, .85) 100%),
    radial-gradient(ellipse at center,
      transparent 0%,
      rgba(25, 10, 40, .3) 70%,
      rgba(25, 10, 40, .6) 100%);
  z-index: 1;
}
.showroom-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--cream);
  padding: 0 var(--pad-x);
  max-width: 900px;
}
.showroom-hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3.5rem, 9vw, 8rem);
  line-height: .95;
  letter-spacing: -.015em;
  margin: 1.5rem 0 2rem;
  color: var(--cream);
}
.showroom-hero-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.showroom-hero-sub {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(.95rem, 1.6vw, 1.4rem);
  letter-spacing: .04em;
  color: var(--gold-pale);
  opacity: .85;
  margin: 0;
}
.showroom-hero-sub-line {
  width: clamp(40px, 8vw, 80px);
  height: 1px;
  background: var(--gold-pale);
  opacity: .55;
}

/* All showroom section titles share the same typographic logic as atelier */
.showroom-section-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 1rem 0 clamp(2rem, 4vw, 3.2rem);
  max-width: 18ch;
}
.showroom-section-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}

/* ----- INTRO — text + Singer photo ----- */
.showroom-intro {
  background: var(--bg);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.showroom-intro-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 480px);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.showroom-intro-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.showroom-intro-text.is-revealed { opacity: 1; transform: translateY(0); }
.showroom-intro-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.showroom-intro-body p {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 300;
  max-width: 56ch;
  margin: 0;
}
.showroom-intro-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}

.showroom-intro-img {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.showroom-intro-img.is-revealed { opacity: 1; transform: translateY(0); }
.showroom-intro-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(42, 21, 66, .2);
}
.showroom-intro-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.showroom-intro-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.showroom-intro-img-cap {
  margin: 1.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  text-align: center;
}
.showroom-intro-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.showroom-intro-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
}

@media (max-width: 900px) {
  .showroom-intro-inner { grid-template-columns: 1fr; gap: 3rem; }
}

/* ----- UNIVERSES — 5 cards ----- */
.showroom-universes {
  background: var(--bg-tint);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.showroom-universes-inner {
  max-width: var(--max);
  margin: 0 auto;
}
.showroom-universes-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(4rem, 8vw, 6rem);
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.showroom-universes-head.is-revealed { opacity: 1; transform: translateY(0); }
.showroom-universes-head .section-eyebrow { justify-content: center; display: flex; }
.showroom-universes-head .showroom-section-title {
  margin-left: auto;
  margin-right: auto;
  max-width: none;
}

.showroom-universes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* Hairline rules between cards using uniform left+top borders */
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  opacity: 0;
  transition: opacity 1.6s var(--ease) .2s;
}
.showroom-universes-list.is-revealed { opacity: 1; }
@media (max-width: 1100px) { .showroom-universes-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .showroom-universes-list { grid-template-columns: 1fr; } }

.universe-card {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(2rem, 3.5vw, 3rem) clamp(1.5rem, 2.5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: .9rem;
  transition: background .5s var(--ease);
  cursor: default;
  position: relative;
}
.universe-card:hover { background: var(--bg); }
.universe-card::after {
  /* Slim gold underline that animates in on hover */
  content: '';
  position: absolute;
  left: clamp(1.5rem, 2.5vw, 2.5rem);
  right: clamp(1.5rem, 2.5vw, 2.5rem);
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--ease);
}
.universe-card:hover::after { transform: scaleX(1); }

.universe-num {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  opacity: .7;
}
.universe-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0;
}
.universe-tag {
  font-family: var(--font-body);
  font-size: .92rem;
  line-height: 1.5;
  color: var(--ink-soft);
  font-weight: 300;
  margin: 0;
}

/* ----- CURATION — photo + text ----- */
.showroom-curation {
  background: var(--bg);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.showroom-curation-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 1fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.showroom-curation-img {
  margin: 0;
  position: relative;
  opacity: 0; transform: translateX(-20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.showroom-curation-img.is-revealed { opacity: 1; transform: translateX(0); }
.showroom-curation-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  border: 1px solid var(--line);
}

.showroom-curation-text {
  opacity: 0; transform: translateX(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.showroom-curation-text.is-revealed { opacity: 1; transform: translateX(0); }
.showroom-curation-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 300;
  max-width: 56ch;
  margin: 0 0 1.5rem;
}
.showroom-curation-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}
.showroom-curation-body:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .showroom-curation-inner { grid-template-columns: 1fr; gap: 3rem; }
}

/* ----- COLLECTIONS — 3 columns ----- */
.showroom-collections {
  background: var(--bg-deep);
  color: var(--cream);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.showroom-collections-inner {
  max-width: var(--max);
  margin: 0 auto;
}
.showroom-collections-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(4rem, 8vw, 6rem);
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.showroom-collections-head.is-revealed { opacity: 1; transform: translateY(0); }
.showroom-collections-head .section-eyebrow { color: var(--gold-pale); opacity: .85; }
.showroom-collections-head .section-eyebrow .eyebrow-dot { background: var(--gold-pale); }
.showroom-collections-head .showroom-section-title { color: var(--cream); margin: 1rem auto clamp(2rem, 4vw, 3.2rem); max-width: none; }
.showroom-collections-head .showroom-section-title em { color: var(--gold-pale); }
.showroom-collections-intro {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--cream);
  font-weight: 300;
  opacity: .8;
  max-width: 60ch;
  margin: 0 auto;
}

.showroom-collections-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  opacity: 0;
  transition: opacity 1.6s var(--ease) .2s;
}
.showroom-collections-grid.is-revealed { opacity: 1; }
@media (max-width: 900px) { .showroom-collections-grid { grid-template-columns: 1fr; gap: 3rem; } }

.collection-col {
  border-top: 1px solid rgba(201, 169, 97, .25);
  padding-top: 2rem;
}
.collection-col-eyebrow {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-pale);
  opacity: .7;
  margin: 0 0 1rem;
}
.collection-col-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  line-height: 1.1;
  color: var(--cream);
  letter-spacing: -.005em;
  margin: 0 0 1.5rem;
}
.collection-col-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.collection-col-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.collection-col-list li {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--cream);
  opacity: .8;
  font-weight: 300;
  padding-left: 1.1rem;
  position: relative;
}
.collection-col-list li::before {
  /* Hairline gold prefix dash */
  content: '';
  position: absolute;
  left: 0;
  top: .8em;
  width: .55rem;
  height: 1px;
  background: var(--gold-pale);
  opacity: .55;
}

/* ----- MATERIALS — fabric library + tag rows ----- */
.showroom-materials {
  background: var(--bg);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.showroom-materials-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, 450px) 1fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.showroom-materials-img {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.showroom-materials-img.is-revealed { opacity: 1; transform: translateY(0); }
.showroom-materials-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2/3;
  object-fit: cover;
  border: 1px solid var(--line);
}
.showroom-materials-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.showroom-materials-text.is-revealed { opacity: 1; transform: translateY(0); }
.showroom-materials-block { margin-bottom: 2.25rem; }
.materials-block-label {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}
.materials-tag-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.materials-tag-list li {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  padding: .6rem 1.1rem;
  border: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: .85rem;
  letter-spacing: .04em;
  color: var(--ink);
  background: var(--bg);
  transition: border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.materials-tag-list li:hover {
  border-color: var(--gold);
  color: var(--gold-deep);
  background: var(--bg-tint);
}
.materials-tag-list li em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: .85rem;
  color: var(--ink-soft);
}
.showroom-materials-note {
  font-family: var(--font-body);
  font-style: italic;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 1rem 0 0;
  max-width: 50ch;
}

@media (max-width: 900px) {
  .showroom-materials-inner { grid-template-columns: 1fr; gap: 3rem; }
  .showroom-materials-img { max-width: 360px; margin: 0 auto; }
}

/* ----- STATEMENT — Le conseil, dark section ----- */
.showroom-statement {
  background: var(--bg-deeper);
  color: var(--cream);
  padding: clamp(10vh, 18vh, 22vh) var(--pad-x);
  position: relative;
  overflow: hidden;
}
.showroom-statement::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 80%; aspect-ratio: 2/1;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse,
    rgba(201, 169, 97, .08) 0%,
    transparent 70%);
  pointer-events: none;
}
.showroom-statement-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
  opacity: 0; transform: translateY(24px);
  transition: opacity 1.5s var(--ease), transform 1.5s var(--ease);
}
.showroom-statement-inner.is-revealed { opacity: 1; transform: translateY(0); }
.showroom-statement-inner .section-eyebrow {
  justify-content: center;
  display: flex;
  color: var(--gold-pale);
  opacity: .85;
}
.showroom-statement-inner .section-eyebrow .eyebrow-dot { background: var(--gold-pale); }
.showroom-statement-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--cream);
  margin: 1rem 0 2.5rem;
}
.showroom-statement-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.showroom-statement-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.7;
  color: var(--cream);
  opacity: .85;
  font-weight: 300;
  margin: 0 auto 1.5rem;
  max-width: 60ch;
}
.showroom-statement-attr {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-pale);
  opacity: .75;
  margin: 2.5rem 0 0;
}

/* ----- DROPDOWN current-child indicator ----- */
/* The current-child item gets a small dash before its label, in gold.
   The dash sits in dedicated padding space — no overlap with text. */
.nav-dropdown .is-current-child > a {
  color: var(--gold-pale);
  padding-left: 2.4rem;
}
/* Override the generic hover rule so the dash stays in place on hover */
.nav-dropdown .is-current-child > a:hover {
  padding-left: 2.4rem;
}
.nav-dropdown .is-current-child > a::before {
  content: '';
  position: absolute;
  left: 1.4rem;
  top: 50%;
  width: .65rem;
  height: 1px;
  background: var(--gold-pale);
  transform: translateY(-50%);
}

/* ============================================================
   ATELIER PREVIEW — homepage one-page section #atelier
   Editorial: centered head, full-bleed wide banner photo, 2-col foot
   ============================================================ */
.atelier-feature {
  background: var(--bg);
  padding: clamp(8vh, 14vh, 18vh) 0;   /* vertical only — photo bleeds edge-to-edge */
  position: relative;
}
.atelier-feature-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* Head — centered eyebrow + title above the banner */
.atelier-feature-head {
  text-align: center;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.atelier-feature-head .section-eyebrow {
  justify-content: center;
  display: flex;
}
.atelier-feature-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 1rem 0 0;
}
.atelier-feature-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}

/* Photo — full viewport width, cinematic aspect, animates on reveal */
.atelier-feature-photo {
  width: 100%;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.4s var(--ease), transform 1.4s var(--ease);
}
.atelier-feature-photo.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.atelier-feature-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/5;
  object-fit: cover;
  object-position: center 40%;
  /* Subtle zoom-out on reveal — adds life without being theatrical */
  transform: scale(1.05);
  transition: transform 2.4s var(--ease);
}
.atelier-feature-photo.is-revealed img {
  transform: scale(1);
}

/* Foot — body paragraph on the left, CTA aligned on the right */
.atelier-feature-foot {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.atelier-feature-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 300;
  max-width: 62ch;
  margin: 0;
}
.atelier-feature-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}

@media (max-width: 800px) {
  .atelier-feature-foot {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .atelier-feature-photo img { aspect-ratio: 4/3; }   /* slightly less wide on mobile */
}

/* ============================================================
   CRAFT PAGE (craft.html) — sub-page of Atelier Workshop
   Editorial layout, text-rich, follows showrooms/atelier styling
   The .craftpg- prefix avoids any clash with the homepage .craft section.
   ============================================================ */

/* ----- HERO ----- */
.craftpg-hero {
  position: relative;
  min-height: 92vh;
  background: var(--bg-deep);
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.craftpg-hero-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  filter: brightness(.4) contrast(1.1) saturate(.5);
  transform: scale(1.04);
  z-index: 0;
}
.craftpg-hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(25, 10, 40, .55) 0%,
      rgba(42, 21, 66, .3) 35%,
      rgba(42, 21, 66, .5) 70%,
      rgba(25, 10, 40, .85) 100%),
    radial-gradient(ellipse at center,
      transparent 0%,
      rgba(25, 10, 40, .25) 70%,
      rgba(25, 10, 40, .55) 100%);
  z-index: 1;
}
.craftpg-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--cream);
  padding: 0 var(--pad-x);
  max-width: 1000px;
}
.craftpg-hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 1.5rem 0 2rem;
  color: var(--cream);
}
.craftpg-hero-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.craftpg-hero-sub {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(.95rem, 1.5vw, 1.3rem);
  letter-spacing: .04em;
  color: var(--gold-pale);
  opacity: .85;
  margin: 0;
}
.craftpg-hero-sub-line {
  width: clamp(40px, 8vw, 80px);
  height: 1px;
  background: var(--gold-pale);
  opacity: .55;
}

/* Section title shared across the page */
.craftpg-section-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 1rem 0 clamp(2rem, 4vw, 3.2rem);
  max-width: 20ch;
}
.craftpg-section-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}

/* ----- INTRO — opening question + hands photo ----- */
.craftpg-intro {
  background: var(--bg);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.craftpg-intro-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 480px);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.craftpg-intro-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.craftpg-intro-text.is-revealed { opacity: 1; transform: translateY(0); }
.craftpg-intro-lead {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  line-height: 1.4;
  font-style: italic;
  color: var(--ink);
  font-weight: 300;
  max-width: 30ch;
  margin: 0 0 1.5rem;
}
.craftpg-intro-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 300;
  max-width: 56ch;
  margin: 0;
}
.craftpg-intro-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}

.craftpg-intro-img {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.craftpg-intro-img.is-revealed { opacity: 1; transform: translateY(0); }
.craftpg-intro-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(42, 21, 66, .2);
}
.craftpg-intro-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.craftpg-intro-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.craftpg-intro-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.craftpg-intro-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.craftpg-intro-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
}
@media (max-width: 900px) {
  .craftpg-intro-inner { grid-template-columns: 1fr; gap: 3rem; }
}

/* ----- WORK — what does an upholsterer do? 3-col grid ----- */
.craftpg-work {
  background: var(--bg-tint);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.craftpg-work-inner {
  max-width: var(--max);
  margin: 0 auto;
}
.craftpg-work-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(4rem, 8vw, 6rem);
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.craftpg-work-head.is-revealed { opacity: 1; transform: translateY(0); }
.craftpg-work-head .section-eyebrow { justify-content: center; display: flex; }
.craftpg-work-head .craftpg-section-title { margin-left: auto; margin-right: auto; max-width: none; }
.craftpg-work-lead {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 300;
  margin: 0 auto;
  max-width: 65ch;
}

.craftpg-work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  opacity: 0;
  transition: opacity 1.6s var(--ease) .2s;
}
.craftpg-work-grid.is-revealed { opacity: 1; }
@media (max-width: 900px) {
  .craftpg-work-grid { grid-template-columns: 1fr; gap: 3rem; }
}
.craftpg-work-col {
  border-top: 1px solid var(--line);
  padding-top: 2rem;
}
.craftpg-work-col-eye {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  opacity: .7;
  margin: 0 0 1rem;
}
.craftpg-work-col-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -.005em;
  margin: 0 0 1.25rem;
}
.craftpg-work-col-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}
.craftpg-work-col-body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  font-weight: 300;
  margin: 0;
}

/* ----- HERITAGE — since 1958, dark editorial 2-col ----- */
.craftpg-heritage {
  background: var(--bg-deep);
  color: var(--cream);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.craftpg-heritage-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.craftpg-heritage-img {
  margin: 0;
  opacity: 0; transform: translateX(-20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.craftpg-heritage-img.is-revealed { opacity: 1; transform: translateX(0); }
.craftpg-heritage-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/4;
  object-fit: cover;
  border: 1px solid rgba(201, 169, 97, .15);
  filter: grayscale(.4) contrast(1.05);
}
.craftpg-heritage-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.craftpg-heritage-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-pale);
  opacity: .7;
}
.craftpg-heritage-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-pale);
}

.craftpg-heritage-text {
  opacity: 0; transform: translateX(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.craftpg-heritage-text.is-revealed { opacity: 1; transform: translateX(0); }
.craftpg-heritage-text .section-eyebrow { color: var(--gold-pale); opacity: .85; }
.craftpg-heritage-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--cream);
  margin: 1rem 0 clamp(2rem, 4vw, 3rem);
  max-width: 20ch;
}
.craftpg-heritage-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.craftpg-heritage-body {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  line-height: 1.7;
  color: var(--cream);
  opacity: .85;
  font-weight: 300;
  margin: 0 0 1.5rem;
  max-width: 60ch;
}
.craftpg-heritage-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
}
.craftpg-heritage-body:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .craftpg-heritage-inner { grid-template-columns: 1fr; gap: 3rem; }
  .craftpg-heritage-img { max-width: 360px; margin: 0 auto; }
}

/* ----- INNOVATION — light, centered two paragraphs ----- */
.craftpg-innovation {
  background: var(--bg);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.craftpg-innovation-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.craftpg-innovation-inner.is-revealed { opacity: 1; transform: translateY(0); }
.craftpg-innovation-inner .section-eyebrow { justify-content: center; display: flex; }
.craftpg-innovation-inner .craftpg-section-title {
  margin-left: auto; margin-right: auto;
  max-width: 22ch;
}
.craftpg-innovation-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: left;
}
.craftpg-innovation-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.7;
  color: var(--ink);
  font-weight: 300;
  margin: 0;
}
.craftpg-innovation-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}
@media (max-width: 800px) {
  .craftpg-innovation-cols { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ----- PRESENCE — locations / where we work ----- */
.craftpg-presence {
  background: var(--bg-deeper);
  color: var(--cream);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
  position: relative;
  overflow: hidden;
}
.craftpg-presence::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 80%; aspect-ratio: 2/1;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse,
    rgba(201, 169, 97, .08) 0%, transparent 70%);
  pointer-events: none;
}
.craftpg-presence-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  text-align: center;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.craftpg-presence-inner.is-revealed { opacity: 1; transform: translateY(0); }
.craftpg-presence-inner .section-eyebrow { justify-content: center; display: flex; color: var(--gold-pale); opacity: .85; }
.craftpg-presence-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--cream);
  margin: 1rem auto clamp(2rem, 4vw, 3rem);
  max-width: 22ch;
}
.craftpg-presence-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.craftpg-presence-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.7;
  color: var(--cream);
  opacity: .85;
  font-weight: 300;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  max-width: 60ch;
}
.craftpg-presence-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  text-align: left;
}
@media (max-width: 900px) {
  .craftpg-presence-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .craftpg-presence-list { grid-template-columns: 1fr; }
}
.craftpg-presence-region {
  border-top: 1px solid rgba(201, 169, 97, .25);
  padding-top: 1.5rem;
}
.presence-region-eyebrow {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-pale);
  opacity: .7;
  margin: 0 0 .75rem;
}
.presence-region-cities {
  font-family: var(--font-body);
  font-size: .98rem;
  line-height: 1.55;
  color: var(--cream);
  opacity: .85;
  font-weight: 300;
  margin: 0;
}

/* ============================================================
   RESIDENTIAL PAGE (residential.html) — sub-page of Expertise
   Editorial layout: hero photo, 2-col text+image blocks, 4-col
   services grid with gold left rule, showcase pairings, design
   office, prestige+partners. .resi- prefix to avoid clashes.
   ============================================================ */

/* ----- HERO ----- */
.resi-hero {
  position: relative;
  min-height: 92vh;
  background: var(--bg-deep);
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.resi-hero-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 55%;
  filter: brightness(.45) contrast(1.1) saturate(.7);
  transform: scale(1.04);
  z-index: 0;
}
.resi-hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(25, 10, 40, .55) 0%,
      rgba(42, 21, 66, .25) 35%,
      rgba(42, 21, 66, .45) 70%,
      rgba(25, 10, 40, .8) 100%),
    radial-gradient(ellipse at center,
      transparent 0%,
      rgba(25, 10, 40, .2) 70%,
      rgba(25, 10, 40, .5) 100%);
  z-index: 1;
}
.resi-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--cream);
  padding: 0 var(--pad-x);
  max-width: 1050px;
}
.resi-hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.8rem, 7vw, 6.5rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 1.5rem 0 2rem;
  color: var(--cream);
}
.resi-hero-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.resi-hero-sub {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(.95rem, 1.4vw, 1.25rem);
  letter-spacing: .04em;
  color: var(--gold-pale);
  opacity: .85;
  margin: 0;
}
.resi-hero-sub-line {
  width: clamp(40px, 8vw, 80px);
  height: 1px;
  background: var(--gold-pale);
  opacity: .55;
}

/* Shared section title used through residential page */
.resi-section-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 1rem 0 clamp(2rem, 4vw, 3.2rem);
  max-width: 20ch;
}
.resi-section-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}

/* ----- INTRO — 2-col with dining-velvet image ----- */
.resi-intro {
  background: var(--bg);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.resi-intro-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 520px);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.resi-intro-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.resi-intro-text.is-revealed { opacity: 1; transform: translateY(0); }
.resi-intro-lead {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  line-height: 1.4;
  font-style: italic;
  color: var(--ink);
  font-weight: 300;
  max-width: 32ch;
  margin: 0 0 1.5rem;
}
.resi-intro-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 300;
  max-width: 56ch;
  margin: 0;
}
.resi-intro-img {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.resi-intro-img.is-revealed { opacity: 1; transform: translateY(0); }
.resi-intro-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(42, 21, 66, .2);
}
.resi-intro-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.resi-intro-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.resi-intro-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.resi-intro-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.resi-intro-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
}
@media (max-width: 900px) {
  .resi-intro-inner { grid-template-columns: 1fr; gap: 3rem; }
}

/* ----- SERVICES — 4-column grid with gold left rule ----- */
.resi-services {
  background: var(--bg-tint);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.resi-services-inner {
  max-width: var(--max);
  margin: 0 auto;
}
.resi-services-head {
  text-align: center;
  margin: 0 auto clamp(4rem, 8vw, 6rem);
  max-width: 760px;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.resi-services-head.is-revealed { opacity: 1; transform: translateY(0); }
.resi-services-head .section-eyebrow { justify-content: center; display: flex; }
.resi-services-head .resi-section-title { margin-left: auto; margin-right: auto; max-width: none; }

.resi-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  opacity: 0;
  transition: opacity 1.6s var(--ease) .2s;
}
.resi-services-grid.is-revealed { opacity: 1; }
@media (max-width: 900px) {
  .resi-services-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
@media (max-width: 540px) {
  .resi-services-grid { grid-template-columns: 1fr; }
}

.resi-service-cell {
  position: relative;
  padding-left: clamp(1.2rem, 2vw, 1.75rem);
  /* The gold vertical rule — the signature element from the reference site */
  border-left: 1px solid var(--gold);
}
.resi-service-eye {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  opacity: .85;
  margin: 0 0 1rem;
}
.resi-service-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -.005em;
  margin: 0 0 1rem;
}
.resi-service-body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  font-weight: 300;
  margin: 0;
}

/* ----- SHOWCASE — two paired photos, asymmetric layout ----- */
.resi-showcase {
  background: var(--bg);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.resi-showcase-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}
@media (max-width: 900px) {
  .resi-showcase-inner { grid-template-columns: 1fr; }
}

.resi-showcase-item {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.resi-showcase-item.is-revealed { opacity: 1; transform: translateY(0); }
.resi-showcase-item--wide { transition-delay: .12s; }

.resi-showcase-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(42, 21, 66, .2);
}
.resi-showcase-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.resi-showcase-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.resi-showcase-item--tall .resi-showcase-img-frame img { aspect-ratio: 4/5; }
.resi-showcase-item--wide .resi-showcase-img-frame img { aspect-ratio: 3/4; }

.resi-showcase-cap {
  margin: 1.5rem 0 0;
  display: flex; flex-direction: column;
  gap: .5rem;
}
.resi-showcase-num {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  opacity: .8;
}
.resi-showcase-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  color: var(--ink);
  line-height: 1.2;
}
.resi-showcase-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}
.resi-showcase-place {
  font-family: var(--font-body);
  font-size: .92rem;
  color: var(--ink-soft);
  font-weight: 300;
}

/* ----- DESIGN OFFICE — image-left + text-right ----- */
.resi-office {
  background: var(--bg-deep);
  color: var(--cream);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.resi-office-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, 480px) 1fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.resi-office-img {
  margin: 0;
  opacity: 0; transform: translateX(-20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.resi-office-img.is-revealed { opacity: 1; transform: translateX(0); }
.resi-office-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5/4;
  object-fit: cover;
  border: 1px solid rgba(201, 169, 97, .15);
}
.resi-office-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.resi-office-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-pale);
  opacity: .7;
}
.resi-office-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-pale);
}

.resi-office-text {
  opacity: 0; transform: translateX(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.resi-office-text.is-revealed { opacity: 1; transform: translateX(0); }
.resi-office-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--cream);
  margin: 1rem 0 clamp(2rem, 4vw, 3rem);
  max-width: 20ch;
}
.resi-office-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.resi-office-body {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  line-height: 1.7;
  color: var(--cream);
  opacity: .85;
  font-weight: 300;
  margin: 0 0 1.5rem;
  max-width: 58ch;
}
.resi-office-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
}
.resi-office-body:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .resi-office-inner { grid-template-columns: 1fr; gap: 3rem; }
  .resi-office-img { max-width: 480px; margin: 0 auto; }
}

/* ----- PRESTIGE — showrooms + fabric houses typography ----- */
.resi-prestige {
  background: var(--bg-deeper);
  color: var(--cream);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
  position: relative;
  overflow: hidden;
}
.resi-prestige::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 80%; aspect-ratio: 2/1;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse,
    rgba(201, 169, 97, .08) 0%, transparent 70%);
  pointer-events: none;
}
.resi-prestige-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  text-align: center;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.resi-prestige-inner.is-revealed { opacity: 1; transform: translateY(0); }
.resi-prestige-inner .section-eyebrow {
  justify-content: center;
  display: flex;
  color: var(--gold-pale);
  opacity: .85;
}
.resi-prestige-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--cream);
  margin: 1rem auto clamp(2rem, 4vw, 3rem);
  max-width: 24ch;
}
.resi-prestige-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.resi-prestige-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.75;
  color: var(--cream);
  opacity: .85;
  font-weight: 300;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  max-width: 64ch;
}
.resi-prestige-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
}
.resi-prestige-eyebrow {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold-pale);
  opacity: .8;
  margin: 0 0 1.5rem;
}
.resi-prestige-partners {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  line-height: 1.8;
  color: var(--cream);
  margin: 0 auto;
  max-width: 60ch;
  letter-spacing: .015em;
}
.resi-prestige-partners span {
  color: var(--gold-pale);
  opacity: .55;
  margin: 0 .35rem;
}
.resi-prestige-partners em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  opacity: .75;
  font-size: .9em;
}

/* ============================================================
   UPHOLSTERY PAGE (upholstery.html) — Savoir-Faire · I
   Re-upholstery (classical) + custom furniture (modern).
   Dark numbered hero, intro 2-col, traditional method, dark
   bespoke section, shared atelier-cta. .uph- prefix throughout.
   ============================================================ */

/* ----- HERO ----- */
.uph-hero {
  position: relative;
  min-height: 92vh;
  background: var(--bg-deep);
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.uph-hero-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 55%;
  filter: brightness(.45) contrast(1.1) saturate(.7);
  transform: scale(1.04);
  z-index: 0;
}
.uph-hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(25, 10, 40, .55) 0%,
      rgba(42, 21, 66, .25) 35%,
      rgba(42, 21, 66, .45) 70%,
      rgba(25, 10, 40, .8) 100%),
    radial-gradient(ellipse at center,
      transparent 0%,
      rgba(25, 10, 40, .2) 70%,
      rgba(25, 10, 40, .5) 100%);
  z-index: 1;
}
.uph-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--cream);
  padding: 0 var(--pad-x);
  max-width: 1050px;
}
.uph-hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.8rem, 7vw, 6.5rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 1.5rem 0 2rem;
  color: var(--cream);
}
.uph-hero-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.uph-hero-sub {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(.95rem, 1.4vw, 1.25rem);
  letter-spacing: .04em;
  color: var(--gold-pale);
  opacity: .85;
  margin: 0;
}
.uph-hero-sub-line {
  width: clamp(40px, 8vw, 80px);
  height: 1px;
  background: var(--gold-pale);
  opacity: .55;
}

/* Shared section title used through the upholstery page */
.uph-section-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 1rem 0 clamp(2rem, 4vw, 3.2rem);
  max-width: 20ch;
}
.uph-section-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}

/* ----- INTRO — Re-upholstery, text-left + chaise image-right ----- */
.uph-intro {
  background: var(--bg);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.uph-intro-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 520px);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.uph-intro-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.uph-intro-text.is-revealed { opacity: 1; transform: translateY(0); }
.uph-intro-lead {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  line-height: 1.4;
  font-style: italic;
  color: var(--ink);
  font-weight: 300;
  max-width: 32ch;
  margin: 0 0 1.5rem;
}
.uph-intro-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 300;
  max-width: 56ch;
  margin: 0;
}
.uph-intro-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}
.uph-intro-img {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.uph-intro-img.is-revealed { opacity: 1; transform: translateY(0); }
.uph-intro-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(42, 21, 66, .2);
}
.uph-intro-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.uph-intro-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5/4;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.uph-intro-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.uph-intro-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.uph-intro-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
}
@media (max-width: 900px) {
  .uph-intro-inner { grid-template-columns: 1fr; gap: 3rem; }
}

/* ----- METHOD — traditional technique, text-left + detail image-right ----- */
.uph-method {
  background: var(--bg-tint);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.uph-method-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(300px, 480px);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.uph-method-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.uph-method-text.is-revealed { opacity: 1; transform: translateY(0); }
.uph-method-body {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  line-height: 1.7;
  color: var(--ink);
  font-weight: 300;
  max-width: 58ch;
  margin: 0 0 1.4rem;
}
.uph-method-finish {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  line-height: 1.45;
  color: var(--gold-deep);
  max-width: 40ch;
  margin: clamp(1.5rem, 3vw, 2.2rem) 0 0;
  padding-left: clamp(1.2rem, 2vw, 1.75rem);
  border-left: 1px solid var(--gold);
}
.uph-method-img {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.uph-method-img.is-revealed { opacity: 1; transform: translateY(0); }
.uph-method-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(42, 21, 66, .2);
}
.uph-method-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.uph-method-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.uph-method-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.uph-method-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.uph-method-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
}
@media (max-width: 900px) {
  .uph-method-inner { grid-template-columns: 1fr; gap: 3rem; }
}

/* ----- CUSTOM — bespoke, dark, image-left + text-right ----- */
.uph-custom {
  background: var(--bg-deep);
  color: var(--cream);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.uph-custom-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, 520px) 1fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.uph-custom-img {
  margin: 0;
  opacity: 0; transform: translateX(-20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.uph-custom-img.is-revealed { opacity: 1; transform: translateX(0); }
.uph-custom-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  border: 1px solid rgba(201, 169, 97, .15);
}
.uph-custom-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.uph-custom-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-pale);
  opacity: .7;
}
.uph-custom-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-pale);
}
.uph-custom-text {
  opacity: 0; transform: translateX(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.uph-custom-text.is-revealed { opacity: 1; transform: translateX(0); }
.uph-custom-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--cream);
  margin: 1rem 0 clamp(2rem, 4vw, 3rem);
  max-width: 20ch;
}
.uph-custom-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.uph-custom-body {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  line-height: 1.7;
  color: var(--cream);
  opacity: .85;
  font-weight: 300;
  margin: 0 0 1.5rem;
  max-width: 58ch;
}
.uph-custom-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
}
.uph-custom-body:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .uph-custom-inner { grid-template-columns: 1fr; gap: 3rem; }
  .uph-custom-img { max-width: 520px; margin: 0 auto; }
}

/* ============================================================
   WINDOW TREATMENTS PAGE (window-treatments.html) — Savoir-Faire · II
   Drapes, sheers, pleat heads, roman blinds, on-site fitting.
   Dark numbered hero, intro (the making), finishes (pleat heads),
   roman blinds showcase, dark fitting, shared atelier-cta.
   .wt- prefix throughout.
   ============================================================ */

/* ----- HERO ----- */
.wt-hero {
  position: relative;
  min-height: 92vh;
  background: var(--bg-deep);
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.wt-hero-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 45%;
  filter: brightness(.5) contrast(1.05) saturate(.8);
  transform: scale(1.04);
  z-index: 0;
}
.wt-hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(25, 10, 40, .5) 0%,
      rgba(42, 21, 66, .25) 35%,
      rgba(42, 21, 66, .45) 70%,
      rgba(25, 10, 40, .8) 100%),
    radial-gradient(ellipse at center,
      transparent 0%,
      rgba(25, 10, 40, .2) 70%,
      rgba(25, 10, 40, .5) 100%);
  z-index: 1;
}
.wt-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--cream);
  padding: 0 var(--pad-x);
  max-width: 1050px;
}
.wt-hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.8rem, 7vw, 6.5rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 1.5rem 0 2rem;
  color: var(--cream);
}
.wt-hero-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.wt-hero-sub {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(.95rem, 1.4vw, 1.25rem);
  letter-spacing: .04em;
  color: var(--gold-pale);
  opacity: .85;
  margin: 0;
}
.wt-hero-sub-line {
  width: clamp(40px, 8vw, 80px);
  height: 1px;
  background: var(--gold-pale);
  opacity: .55;
}

/* Shared section title used through the window-treatments page */
.wt-section-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 1rem 0 clamp(2rem, 4vw, 3.2rem);
  max-width: 20ch;
}
.wt-section-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}

/* ----- INTRO — The making, text-left + heading image-right ----- */
.wt-intro {
  background: var(--bg);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.wt-intro-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 500px);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.wt-intro-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.wt-intro-text.is-revealed { opacity: 1; transform: translateY(0); }
.wt-intro-lead {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  line-height: 1.4;
  font-style: italic;
  color: var(--ink);
  font-weight: 300;
  max-width: 34ch;
  margin: 0 0 1.5rem;
}
.wt-intro-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 300;
  max-width: 58ch;
  margin: 0 0 1.4rem;
}
.wt-intro-body:last-child { margin-bottom: 0; }
.wt-intro-img {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.wt-intro-img.is-revealed { opacity: 1; transform: translateY(0); }
.wt-intro-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(42, 21, 66, .2);
}
.wt-intro-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.wt-intro-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.wt-intro-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.wt-intro-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.wt-intro-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
}
@media (max-width: 900px) {
  .wt-intro-inner { grid-template-columns: 1fr; gap: 3rem; }
}

/* ----- THE FINISHES — pleat image + 2x2 head grid ----- */
.wt-finishes {
  background: var(--bg-tint);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.wt-finishes-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 440px) 1fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: center;
}
.wt-finishes-img {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.wt-finishes-img.is-revealed { opacity: 1; transform: translateY(0); }
.wt-finishes-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(42, 21, 66, .2);
}
.wt-finishes-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.wt-finishes-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/4;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.wt-finishes-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.wt-finishes-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.wt-finishes-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
}
.wt-finishes-content {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.wt-finishes-content.is-revealed { opacity: 1; transform: translateY(0); }
.wt-finishes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 3.5vw, 2.8rem);
}
.wt-finishes-cell {
  position: relative;
  padding-left: clamp(1.2rem, 2vw, 1.75rem);
  border-left: 1px solid var(--gold);
}
.wt-finishes-eye {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  opacity: .85;
  margin: 0 0 .8rem;
}
.wt-finishes-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 .7rem;
}
.wt-finishes-body {
  font-family: var(--font-body);
  font-size: .98rem;
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 300;
  margin: 0;
}
.wt-finishes-note {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.45;
  color: var(--gold-deep);
  max-width: 48ch;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding-left: clamp(1.2rem, 2vw, 1.75rem);
  border-left: 1px solid var(--gold);
}
@media (max-width: 900px) {
  .wt-finishes-inner { grid-template-columns: 1fr; gap: 3rem; }
  .wt-finishes-img { max-width: 440px; }
}
@media (max-width: 540px) {
  .wt-finishes-grid { grid-template-columns: 1fr; }
}

/* ----- THE ROMAN BLINDS — image-left + text-right, cream ----- */
.wt-blinds {
  background: var(--bg);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.wt-blinds-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, 560px) 1fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.wt-blinds-img {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.wt-blinds-img.is-revealed { opacity: 1; transform: translateY(0); }
.wt-blinds-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(42, 21, 66, .2);
}
.wt-blinds-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.wt-blinds-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.wt-blinds-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.wt-blinds-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.wt-blinds-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
}
.wt-blinds-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.wt-blinds-text.is-revealed { opacity: 1; transform: translateY(0); }
.wt-blinds-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 300;
  max-width: 52ch;
  margin: 0 0 1.4rem;
}
.wt-blinds-body:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .wt-blinds-inner { grid-template-columns: 1fr; gap: 3rem; }
}

/* ----- THE FITTING — dark, image-left + text-right ----- */
.wt-fitting {
  background: var(--bg-deep);
  color: var(--cream);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.wt-fitting-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 440px) 1fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.wt-fitting-img {
  margin: 0;
  opacity: 0; transform: translateX(-20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.wt-fitting-img.is-revealed { opacity: 1; transform: translateX(0); }
.wt-fitting-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  border: 1px solid rgba(201, 169, 97, .15);
}
.wt-fitting-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.wt-fitting-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-pale);
  opacity: .7;
}
.wt-fitting-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-pale);
}
.wt-fitting-text {
  opacity: 0; transform: translateX(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.wt-fitting-text.is-revealed { opacity: 1; transform: translateX(0); }
.wt-fitting-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--cream);
  margin: 1rem 0 clamp(2rem, 4vw, 3rem);
  max-width: 20ch;
}
.wt-fitting-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.wt-fitting-body {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  line-height: 1.7;
  color: var(--cream);
  opacity: .85;
  font-weight: 300;
  margin: 0 0 1.5rem;
  max-width: 58ch;
}
.wt-fitting-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
}
.wt-fitting-body:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .wt-fitting-inner { grid-template-columns: 1fr; gap: 3rem; }
  .wt-fitting-img { max-width: 440px; margin: 0 auto; }
}

/* ============================================================
   WALL & CEILING UPHOLSTERY (wall-upholstery.html) — Savoir-Faire · III
   Stretched fabric hangings, blind-tacked finish, acoustic treatment.
   Dark numbered hero, intro (hangings), method (fitting + note),
   dark acoustic section, bespoke note, shared atelier-cta.
   .wall- prefix throughout.
   ============================================================ */

/* ----- HERO ----- */
.wall-hero {
  position: relative;
  min-height: 92vh;
  background: var(--bg-deep);
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.wall-hero-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(.5) contrast(1.05) saturate(.85);
  transform: scale(1.04);
  z-index: 0;
}
.wall-hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(25, 10, 40, .5) 0%,
      rgba(42, 21, 66, .25) 35%,
      rgba(42, 21, 66, .45) 70%,
      rgba(25, 10, 40, .8) 100%),
    radial-gradient(ellipse at center,
      transparent 0%,
      rgba(25, 10, 40, .2) 70%,
      rgba(25, 10, 40, .5) 100%);
  z-index: 1;
}
.wall-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--cream);
  padding: 0 var(--pad-x);
  max-width: 1050px;
}
.wall-hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.8rem, 7vw, 6.5rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 1.5rem 0 2rem;
  color: var(--cream);
}
.wall-hero-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.wall-hero-sub {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(.95rem, 1.4vw, 1.25rem);
  letter-spacing: .04em;
  color: var(--gold-pale);
  opacity: .85;
  margin: 0;
}
.wall-hero-sub-line {
  width: clamp(40px, 8vw, 80px);
  height: 1px;
  background: var(--gold-pale);
  opacity: .55;
}

/* Shared section title used through the wall-upholstery page */
.wall-section-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 1rem 0 clamp(2rem, 4vw, 3.2rem);
  max-width: 20ch;
}
.wall-section-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}

/* ----- INTRO — the hangings, text-left + image-right ----- */
.wall-intro {
  background: var(--bg);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.wall-intro-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 540px);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.wall-intro-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.wall-intro-text.is-revealed { opacity: 1; transform: translateY(0); }
.wall-intro-lead {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  line-height: 1.4;
  font-style: italic;
  color: var(--ink);
  font-weight: 300;
  max-width: 34ch;
  margin: 0 0 1.5rem;
}
.wall-intro-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 300;
  max-width: 58ch;
  margin: 0;
}
.wall-intro-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}
.wall-intro-img {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.wall-intro-img.is-revealed { opacity: 1; transform: translateY(0); }
.wall-intro-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(42, 21, 66, .2);
}
.wall-intro-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.wall-intro-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.wall-intro-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.wall-intro-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.wall-intro-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
}
@media (max-width: 900px) {
  .wall-intro-inner { grid-template-columns: 1fr; gap: 3rem; }
}

/* ----- METHOD — fitting, image-left + text-right ----- */
.wall-method {
  background: var(--bg-tint);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.wall-method-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 460px) 1fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.wall-method-img {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.wall-method-img.is-revealed { opacity: 1; transform: translateY(0); }
.wall-method-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(42, 21, 66, .2);
}
.wall-method-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.wall-method-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.wall-method-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.wall-method-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.wall-method-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
}
.wall-method-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.wall-method-text.is-revealed { opacity: 1; transform: translateY(0); }
.wall-method-body {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  line-height: 1.7;
  color: var(--ink);
  font-weight: 300;
  max-width: 58ch;
  margin: 0 0 1.4rem;
}
.wall-method-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}
.wall-method-note {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.45;
  color: var(--gold-deep);
  max-width: 46ch;
  margin: clamp(1.5rem, 3vw, 2.2rem) 0 0;
  padding-left: clamp(1.2rem, 2vw, 1.75rem);
  border-left: 1px solid var(--gold);
}
@media (max-width: 900px) {
  .wall-method-inner { grid-template-columns: 1fr; gap: 3rem; }
  .wall-method-img { max-width: 460px; }
}

/* ----- ACOUSTIC TREATMENT — dark, image-left + text-right ----- */
.wall-acoustic {
  background: var(--bg-deep);
  color: var(--cream);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.wall-acoustic-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, 520px) 1fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.wall-acoustic-img {
  margin: 0;
  opacity: 0; transform: translateX(-20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.wall-acoustic-img.is-revealed { opacity: 1; transform: translateX(0); }
.wall-acoustic-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  border: 1px solid rgba(201, 169, 97, .15);
}
.wall-acoustic-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.wall-acoustic-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-pale);
  opacity: .7;
}
.wall-acoustic-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-pale);
}
.wall-acoustic-text {
  opacity: 0; transform: translateX(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.wall-acoustic-text.is-revealed { opacity: 1; transform: translateX(0); }
.wall-acoustic-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--cream);
  margin: 1rem 0 clamp(2rem, 4vw, 3rem);
  max-width: 20ch;
}
.wall-acoustic-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.wall-acoustic-body {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  line-height: 1.7;
  color: var(--cream);
  opacity: .85;
  font-weight: 300;
  margin: 0 0 1.5rem;
  max-width: 58ch;
}
.wall-acoustic-body:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .wall-acoustic-inner { grid-template-columns: 1fr; gap: 3rem; }
  .wall-acoustic-img { max-width: 520px; margin: 0 auto; }
}

/* ----- ALSO — bespoke closing note, centered ----- */
.wall-also {
  background: var(--bg);
  padding: clamp(7vh, 11vh, 14vh) var(--pad-x);
  border-top: 1px solid var(--line-soft);
}
.wall-also-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.wall-also-inner.is-revealed { opacity: 1; transform: translateY(0); }
.wall-also-inner .section-eyebrow { justify-content: center; display: flex; }
.wall-also-text {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  line-height: 1.35;
  color: var(--ink);
  margin: 1rem auto 0;
  max-width: 28ch;
}
.wall-also-text em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}

/* ============================================================
   BEDDING PAGE (bedding.html) — Savoir-Faire · IV
   Headboard & bedbase, bedspread, cushioning.
   Dark numbered hero, intro (headboard), bedspread showcase,
   dark cushioning, shared atelier-cta. .bed- prefix throughout.
   ============================================================ */

/* ----- HERO ----- */
.bed-hero {
  position: relative;
  min-height: 92vh;
  background: var(--bg-deep);
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.bed-hero-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 60%;
  filter: brightness(.5) contrast(1.05) saturate(.85);
  transform: scale(1.04);
  z-index: 0;
}
.bed-hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(25, 10, 40, .5) 0%,
      rgba(42, 21, 66, .25) 35%,
      rgba(42, 21, 66, .45) 70%,
      rgba(25, 10, 40, .8) 100%),
    radial-gradient(ellipse at center,
      transparent 0%,
      rgba(25, 10, 40, .2) 70%,
      rgba(25, 10, 40, .5) 100%);
  z-index: 1;
}
.bed-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--cream);
  padding: 0 var(--pad-x);
  max-width: 1050px;
}
.bed-hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.8rem, 7vw, 6.5rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 1.5rem 0 2rem;
  color: var(--cream);
}
.bed-hero-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.bed-hero-sub {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(.95rem, 1.4vw, 1.25rem);
  letter-spacing: .04em;
  color: var(--gold-pale);
  opacity: .85;
  margin: 0;
}
.bed-hero-sub-line {
  width: clamp(40px, 8vw, 80px);
  height: 1px;
  background: var(--gold-pale);
  opacity: .55;
}

/* Shared section title used through the bedding page */
.bed-section-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 1rem 0 clamp(2rem, 4vw, 3.2rem);
  max-width: 20ch;
}
.bed-section-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}

/* ----- INTRO — headboard, text-left + image-right ----- */
.bed-intro {
  background: var(--bg);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.bed-intro-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 540px);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.bed-intro-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.bed-intro-text.is-revealed { opacity: 1; transform: translateY(0); }
.bed-intro-lead {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  line-height: 1.4;
  font-style: italic;
  color: var(--ink);
  font-weight: 300;
  max-width: 34ch;
  margin: 0 0 1.5rem;
}
.bed-intro-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 300;
  max-width: 58ch;
  margin: 0;
}
.bed-intro-img {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.bed-intro-img.is-revealed { opacity: 1; transform: translateY(0); }
.bed-intro-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(42, 21, 66, .2);
}
.bed-intro-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.bed-intro-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.bed-intro-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.bed-intro-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.bed-intro-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
}
@media (max-width: 900px) {
  .bed-intro-inner { grid-template-columns: 1fr; gap: 3rem; }
}

/* ----- BEDSPREAD — image-left + text-right ----- */
.bed-spread {
  background: var(--bg-tint);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.bed-spread-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, 560px) 1fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.bed-spread-img {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.bed-spread-img.is-revealed { opacity: 1; transform: translateY(0); }
.bed-spread-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(42, 21, 66, .2);
}
.bed-spread-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.bed-spread-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.bed-spread-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.bed-spread-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.bed-spread-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
}
.bed-spread-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.bed-spread-text.is-revealed { opacity: 1; transform: translateY(0); }
.bed-spread-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 300;
  max-width: 52ch;
  margin: 0 0 1.4rem;
}
.bed-spread-body:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .bed-spread-inner { grid-template-columns: 1fr; gap: 3rem; }
}

/* ----- CUSHIONING — dark, image-left + text-right ----- */
.bed-cushion {
  background: var(--bg-deep);
  color: var(--cream);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.bed-cushion-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, 520px) 1fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.bed-cushion-img {
  margin: 0;
  opacity: 0; transform: translateX(-20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.bed-cushion-img.is-revealed { opacity: 1; transform: translateX(0); }
.bed-cushion-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5/4;
  object-fit: cover;
  border: 1px solid rgba(201, 169, 97, .15);
}
.bed-cushion-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.bed-cushion-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-pale);
  opacity: .7;
}
.bed-cushion-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-pale);
}
.bed-cushion-text {
  opacity: 0; transform: translateX(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.bed-cushion-text.is-revealed { opacity: 1; transform: translateX(0); }
.bed-cushion-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--cream);
  margin: 1rem 0 clamp(2rem, 4vw, 3rem);
  max-width: 20ch;
}
.bed-cushion-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.bed-cushion-body {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  line-height: 1.7;
  color: var(--cream);
  opacity: .85;
  font-weight: 300;
  margin: 0 0 1.5rem;
  max-width: 58ch;
}
.bed-cushion-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
}
.bed-cushion-body:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .bed-cushion-inner { grid-template-columns: 1fr; gap: 3rem; }
  .bed-cushion-img { max-width: 520px; margin: 0 auto; }
}

/* ============================================================
   LEATHERWORK PAGE (leatherwork.html) — Savoir-Faire · V
   Leather furniture, hand-stitched handrails, paneling, skins.
   Dark numbered hero, intro (furniture), handrail showcase,
   dark paneling, selection of leathers, shared atelier-cta.
   .lea- prefix throughout.
   ============================================================ */

/* ----- HERO ----- */
.lea-hero {
  position: relative;
  min-height: 92vh;
  background: var(--bg-deep);
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.lea-hero-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(.5) contrast(1.05) saturate(.85);
  transform: scale(1.04);
  z-index: 0;
}
.lea-hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(25, 10, 40, .5) 0%,
      rgba(42, 21, 66, .25) 35%,
      rgba(42, 21, 66, .45) 70%,
      rgba(25, 10, 40, .8) 100%),
    radial-gradient(ellipse at center,
      transparent 0%,
      rgba(25, 10, 40, .2) 70%,
      rgba(25, 10, 40, .5) 100%);
  z-index: 1;
}
.lea-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--cream);
  padding: 0 var(--pad-x);
  max-width: 1050px;
}
.lea-hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.8rem, 7vw, 6.5rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 1.5rem 0 2rem;
  color: var(--cream);
}
.lea-hero-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.lea-hero-sub {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(.95rem, 1.4vw, 1.25rem);
  letter-spacing: .04em;
  color: var(--gold-pale);
  opacity: .85;
  margin: 0;
}
.lea-hero-sub-line {
  width: clamp(40px, 8vw, 80px);
  height: 1px;
  background: var(--gold-pale);
  opacity: .55;
}

/* Shared section title used through the leatherwork page */
.lea-section-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 1rem 0 clamp(2rem, 4vw, 3.2rem);
  max-width: 20ch;
}
.lea-section-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}

/* ----- INTRO — leather furniture, text-left + image-right ----- */
.lea-intro {
  background: var(--bg);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.lea-intro-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 540px);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.lea-intro-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.lea-intro-text.is-revealed { opacity: 1; transform: translateY(0); }
.lea-intro-lead {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  line-height: 1.4;
  font-style: italic;
  color: var(--ink);
  font-weight: 300;
  max-width: 34ch;
  margin: 0 0 1.5rem;
}
.lea-intro-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 300;
  max-width: 58ch;
  margin: 0;
}
.lea-intro-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}
.lea-intro-img {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.lea-intro-img.is-revealed { opacity: 1; transform: translateY(0); }
.lea-intro-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(42, 21, 66, .2);
}
.lea-intro-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.lea-intro-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.lea-intro-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.lea-intro-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.lea-intro-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
}
@media (max-width: 900px) {
  .lea-intro-inner { grid-template-columns: 1fr; gap: 3rem; }
}

/* ----- HANDRAIL — image-left + text-right ----- */
.lea-handrail {
  background: var(--bg-tint);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.lea-handrail-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 440px) 1fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.lea-handrail-img {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.lea-handrail-img.is-revealed { opacity: 1; transform: translateY(0); }
.lea-handrail-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(42, 21, 66, .2);
}
.lea-handrail-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.lea-handrail-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.lea-handrail-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.lea-handrail-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.lea-handrail-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
}
.lea-handrail-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.lea-handrail-text.is-revealed { opacity: 1; transform: translateY(0); }
.lea-handrail-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 300;
  max-width: 56ch;
  margin: 0 0 1.4rem;
}
.lea-handrail-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}
.lea-handrail-body:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .lea-handrail-inner { grid-template-columns: 1fr; gap: 3rem; }
  .lea-handrail-img { max-width: 440px; }
}

/* ----- PANELING — dark, image-left + text-right ----- */
.lea-paneling {
  background: var(--bg-deep);
  color: var(--cream);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.lea-paneling-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 460px) 1fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.lea-paneling-img {
  margin: 0;
  opacity: 0; transform: translateX(-20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.lea-paneling-img.is-revealed { opacity: 1; transform: translateX(0); }
.lea-paneling-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  border: 1px solid rgba(201, 169, 97, .15);
}
.lea-paneling-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.lea-paneling-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-pale);
  opacity: .7;
}
.lea-paneling-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-pale);
}
.lea-paneling-text {
  opacity: 0; transform: translateX(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.lea-paneling-text.is-revealed { opacity: 1; transform: translateX(0); }
.lea-paneling-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--cream);
  margin: 1rem 0 clamp(2rem, 4vw, 3rem);
  max-width: 20ch;
}
.lea-paneling-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.lea-paneling-body {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  line-height: 1.7;
  color: var(--cream);
  opacity: .85;
  font-weight: 300;
  margin: 0 0 1.5rem;
  max-width: 58ch;
}
.lea-paneling-body:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .lea-paneling-inner { grid-template-columns: 1fr; gap: 3rem; }
  .lea-paneling-img { max-width: 460px; margin: 0 auto; }
}

/* ----- SELECTION — text-left + swatches image-right ----- */
.lea-selection {
  background: var(--bg);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.lea-selection-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 540px);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.lea-selection-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.lea-selection-text.is-revealed { opacity: 1; transform: translateY(0); }
.lea-selection-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 300;
  max-width: 58ch;
  margin: 0 0 1.4rem;
}
.lea-selection-body:last-child { margin-bottom: 0; }
.lea-selection-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}
.lea-selection-img {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.lea-selection-img.is-revealed { opacity: 1; transform: translateY(0); }
.lea-selection-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(42, 21, 66, .2);
}
.lea-selection-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.lea-selection-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.lea-selection-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.lea-selection-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.lea-selection-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
}
@media (max-width: 900px) {
  .lea-selection-inner { grid-template-columns: 1fr; gap: 3rem; }
}

/* ============================================================
   TEXTILE FLOORS PAGE (textile-floors.html) — Savoir-Faire · VI
   Stair runners, carpets, pure-wool compositions, edge finishes.
   Dark numbered hero, runners intro, carpets showcase, dark
   compositions, finishes, shared atelier-cta. .txf- prefix.
   ============================================================ */

/* ----- HERO ----- */
.txf-hero {
  position: relative;
  min-height: 92vh;
  background: var(--bg-deep);
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.txf-hero-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(.5) contrast(1.05) saturate(.85);
  transform: scale(1.04);
  z-index: 0;
}
.txf-hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(25, 10, 40, .5) 0%,
      rgba(42, 21, 66, .25) 35%,
      rgba(42, 21, 66, .45) 70%,
      rgba(25, 10, 40, .8) 100%),
    radial-gradient(ellipse at center,
      transparent 0%,
      rgba(25, 10, 40, .2) 70%,
      rgba(25, 10, 40, .5) 100%);
  z-index: 1;
}
.txf-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--cream);
  padding: 0 var(--pad-x);
  max-width: 1050px;
}
.txf-hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.8rem, 7vw, 6.5rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 1.5rem 0 2rem;
  color: var(--cream);
}
.txf-hero-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.txf-hero-sub {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(.95rem, 1.4vw, 1.25rem);
  letter-spacing: .04em;
  color: var(--gold-pale);
  opacity: .85;
  margin: 0;
}
.txf-hero-sub-line {
  width: clamp(40px, 8vw, 80px);
  height: 1px;
  background: var(--gold-pale);
  opacity: .55;
}

/* Shared section title used through the textile-floors page */
.txf-section-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 1rem 0 clamp(2rem, 4vw, 3.2rem);
  max-width: 20ch;
}
.txf-section-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}

/* ----- STAIR RUNNERS — text-left + image-right ----- */
.txf-runners {
  background: var(--bg);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.txf-runners-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(300px, 460px);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.txf-runners-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.txf-runners-text.is-revealed { opacity: 1; transform: translateY(0); }
.txf-runners-lead {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  line-height: 1.4;
  font-style: italic;
  color: var(--ink);
  font-weight: 300;
  max-width: 34ch;
  margin: 0 0 1.5rem;
}
.txf-runners-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 300;
  max-width: 58ch;
  margin: 0 0 1.4rem;
}
.txf-runners-body:last-child { margin-bottom: 0; }
.txf-runners-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}
.txf-runners-img {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.txf-runners-img.is-revealed { opacity: 1; transform: translateY(0); }
.txf-runners-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(42, 21, 66, .2);
}
.txf-runners-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.txf-runners-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.txf-runners-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.txf-runners-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.txf-runners-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
}
@media (max-width: 900px) {
  .txf-runners-inner { grid-template-columns: 1fr; gap: 3rem; }
}

/* ----- CARPETS — image-left + text-right ----- */
.txf-carpets {
  background: var(--bg-tint);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.txf-carpets-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 440px) 1fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.txf-carpets-img {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.txf-carpets-img.is-revealed { opacity: 1; transform: translateY(0); }
.txf-carpets-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(42, 21, 66, .2);
}
.txf-carpets-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.txf-carpets-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.txf-carpets-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.txf-carpets-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.txf-carpets-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
}
.txf-carpets-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.txf-carpets-text.is-revealed { opacity: 1; transform: translateY(0); }
.txf-carpets-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 300;
  max-width: 56ch;
  margin: 0 0 1.4rem;
}
.txf-carpets-body:last-child { margin-bottom: 0; }
.txf-carpets-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}
@media (max-width: 900px) {
  .txf-carpets-inner { grid-template-columns: 1fr; gap: 3rem; }
  .txf-carpets-img { max-width: 440px; }
}

/* ----- COMPOSITIONS — dark, text-left + image-right ----- */
.txf-compositions {
  background: var(--bg-deep);
  color: var(--cream);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.txf-compositions-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 540px);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.txf-compositions-text {
  opacity: 0; transform: translateX(-20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.txf-compositions-text.is-revealed { opacity: 1; transform: translateX(0); }
.txf-compositions-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--cream);
  margin: 1rem 0 clamp(2rem, 4vw, 3rem);
  max-width: 20ch;
}
.txf-compositions-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.txf-compositions-body {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  line-height: 1.7;
  color: var(--cream);
  opacity: .85;
  font-weight: 300;
  margin: 0 0 1.5rem;
  max-width: 58ch;
}
.txf-compositions-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
}
.txf-compositions-body:last-child { margin-bottom: 0; }
.txf-compositions-img {
  margin: 0;
  opacity: 0; transform: translateX(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.txf-compositions-img.is-revealed { opacity: 1; transform: translateX(0); }
.txf-compositions-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  border: 1px solid rgba(201, 169, 97, .15);
}
.txf-compositions-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.txf-compositions-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-pale);
  opacity: .7;
}
.txf-compositions-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-pale);
}
@media (max-width: 900px) {
  .txf-compositions-inner { grid-template-columns: 1fr; gap: 3rem; }
  .txf-compositions-img { max-width: 540px; }
}

/* ----- FINISHES — image-left + text-right ----- */
.txf-finishes {
  background: var(--bg);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.txf-finishes-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 440px) 1fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.txf-finishes-img {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.txf-finishes-img.is-revealed { opacity: 1; transform: translateY(0); }
.txf-finishes-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(42, 21, 66, .2);
}
.txf-finishes-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.txf-finishes-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.txf-finishes-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.txf-finishes-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.txf-finishes-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
}
.txf-finishes-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.txf-finishes-text.is-revealed { opacity: 1; transform: translateY(0); }
.txf-finishes-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 300;
  max-width: 56ch;
  margin: 0 0 1.4rem;
}
.txf-finishes-body:last-child { margin-bottom: 0; }
.txf-finishes-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}
@media (max-width: 900px) {
  .txf-finishes-inner { grid-template-columns: 1fr; gap: 3rem; }
  .txf-finishes-img { max-width: 440px; }
}

/* ============================================================
   CONTACT PAGE (contact.html)
   Dark hero, invitation intro, local-workshop cards with Leaflet
   maps (Alsace / Monaco / Miami), mailto form. .ct- prefix.
   ============================================================ */

/* ----- HERO ----- */
.ct-hero {
  position: relative;
  min-height: 70vh;
  background: var(--bg-deep);
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.ct-hero-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(.42) contrast(1.05) saturate(.9);
  transform: scale(1.04);
  z-index: 0;
}
.ct-hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(25, 10, 40, .6) 0%,
      rgba(42, 21, 66, .35) 45%,
      rgba(25, 10, 40, .82) 100%);
  z-index: 1;
}
.ct-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--cream);
  padding: 0 var(--pad-x);
  max-width: 1050px;
}
.ct-hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 6.5vw, 6rem);
  line-height: 1.03;
  letter-spacing: -.015em;
  margin: 1.5rem 0 2rem;
  color: var(--cream);
}
.ct-hero-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.ct-hero-sub {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(.95rem, 1.4vw, 1.25rem);
  letter-spacing: .04em;
  color: var(--gold-pale);
  opacity: .85;
  margin: 0;
}
.ct-hero-sub-line {
  width: clamp(40px, 8vw, 80px);
  height: 1px;
  background: var(--gold-pale);
  opacity: .55;
}

/* ----- INTRO — invitation + audiences ----- */
.ct-intro {
  background: var(--bg);
  padding: clamp(8vh, 13vh, 16vh) var(--pad-x);
}
.ct-intro-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.ct-intro-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.ct-intro-head.is-revealed { opacity: 1; transform: translateY(0); }
.ct-intro-head .section-eyebrow { justify-content: center; display: flex; }
.ct-intro-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 1rem 0 1.5rem;
}
.ct-intro-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}
.ct-intro-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 auto;
}
.ct-audience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.ct-audience.is-revealed { opacity: 1; transform: translateY(0); }
.ct-audience-cell {
  padding-left: clamp(1.2rem, 2vw, 1.75rem);
  border-left: 1px solid var(--gold);
}
.ct-audience-eye {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  opacity: .85;
  margin: 0 0 1rem;
}
.ct-audience-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  color: var(--ink);
  margin: 0 0 1rem;
}
.ct-audience-body {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-soft);
  font-weight: 300;
  margin: 0;
}
@media (max-width: 760px) {
  .ct-audience { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ----- LOCATIONS — workshop cards ----- */
.ct-locations {
  background: var(--bg-tint);
  padding: clamp(8vh, 13vh, 16vh) var(--pad-x);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.ct-locations-inner {
  max-width: var(--max);
  margin: 0 auto;
}
.ct-locations-head {
  text-align: center;
  margin: 0 auto clamp(3rem, 6vw, 4.5rem);
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.ct-locations-head.is-revealed { opacity: 1; transform: translateY(0); }
.ct-locations-head .section-eyebrow { justify-content: center; display: flex; }
.ct-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 980px) {
  .ct-cards { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
}
.ct-card {
  background: var(--bg);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 60px -40px rgba(42, 21, 66, .25);
}
.ct-card-photo {
  position: relative;
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
}
.ct-card-flag {
  position: absolute;
  top: 1rem; left: 1rem;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--cream);
  background: rgba(25, 10, 40, .55);
  backdrop-filter: blur(4px);
  padding: .4rem .7rem;
}
.ct-card-badge {
  position: absolute;
  top: 1rem; right: 1rem;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bg-deep);
  background: var(--gold-pale);
  padding: .4rem .7rem;
  font-weight: 500;
}
.ct-card-body {
  padding: clamp(1.4rem, 2.5vw, 2rem);
  flex: 1;
}
.ct-card-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  color: var(--ink);
  margin: 0 0 1rem;
  line-height: 1.15;
}
.ct-card-name em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}
.ct-card-addr {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  font-weight: 300;
  margin: 0 0 1.2rem;
}
.ct-card-addr em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}
.ct-card-contacts {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  border-top: 1px solid var(--line-soft);
  padding-top: 1.2rem;
}
.ct-card-contacts a {
  font-family: var(--font-body);
  font-size: .98rem;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: .01em;
  transition: color .3s var(--ease);
}
.ct-card-contacts a:hover { color: var(--gold-deep); }
.ct-card-note {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: .9rem;
  color: var(--ink-faint);
  margin-top: .2rem;
}
.ct-card-maplink {
  font-family: var(--font-mono) !important;
  font-size: .66rem !important;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep) !important;
  margin-top: .35rem;
}
.ct-card-maplink span { display: inline-block; transition: transform .35s var(--ease); }
.ct-card-maplink:hover { color: var(--gold) !important; }
.ct-card-maplink:hover span { transform: translate(3px, -3px); }
.ct-map {
  height: 220px;
  width: 100%;
  background: var(--bg-tint);
  border-top: 1px solid var(--line);
  z-index: 0;
}
.ct-map .leaflet-container { font-family: var(--font-body); }

/* ----- FORM ----- */
.ct-form-section {
  background: var(--bg-deep);
  color: var(--cream);
  padding: clamp(8vh, 13vh, 16vh) var(--pad-x);
}
.ct-form-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}
@media (max-width: 860px) {
  .ct-form-inner { grid-template-columns: 1fr; gap: 3rem; }
}
.ct-form-aside {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.ct-form-aside.is-revealed { opacity: 1; transform: translateY(0); }
.ct-form-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.08;
  color: var(--cream);
  margin: 1rem 0 1.5rem;
}
.ct-form-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
}
.ct-form-body {
  font-family: var(--font-body);
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--cream);
  opacity: .85;
  font-weight: 300;
  margin: 0 0 2rem;
  max-width: 42ch;
}
.ct-form-direct {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--cream);
  opacity: .7;
  font-weight: 300;
}
.ct-form-direct a {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--gold-pale);
  opacity: 1;
}
.ct-form-direct a:hover { text-decoration: underline; }
.ct-form {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.ct-form.is-revealed { opacity: 1; transform: translateY(0); }
.ct-field { margin-bottom: 1.4rem; }
.ct-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}
@media (max-width: 480px) {
  .ct-field-row { grid-template-columns: 1fr; gap: 0; }
}
.ct-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold-pale);
  opacity: .8;
  margin-bottom: .55rem;
}
.ct-field input,
.ct-field select,
.ct-field textarea {
  width: 100%;
  background: rgba(245, 239, 227, .04);
  border: 1px solid rgba(201, 169, 97, .28);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  padding: .85rem 1rem;
  border-radius: 0;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.ct-field textarea { resize: vertical; }
.ct-field select { cursor: none; }
.ct-field input::placeholder,
.ct-field textarea::placeholder { color: rgba(245, 239, 227, .35); }
.ct-field input:focus,
.ct-field select:focus,
.ct-field textarea:focus {
  outline: none;
  border-color: var(--gold-pale);
  background: rgba(245, 239, 227, .07);
}
.ct-field select option { color: var(--ink); background: var(--cream); }
.ct-submit {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-top: .4rem;
  padding: 1rem 2rem;
  background: var(--gold-pale);
  color: var(--bg-deep);
  border: none;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  cursor: none;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.ct-submit:hover { background: var(--cream); transform: translateY(-2px); }
.ct-submit svg { stroke: var(--bg-deep); }
.ct-form-hint {
  font-family: var(--font-body);
  font-size: .82rem;
  color: var(--cream);
  opacity: .5;
  font-weight: 300;
  margin: 1rem 0 0;
}

/* ----- WORLD MAP — subtle global-presence band ----- */
.ct-world {
  background: var(--bg-deeper);
  color: var(--cream);
  padding: clamp(8vh, 12vh, 15vh) var(--pad-x);
  overflow: hidden;
}
.ct-world-inner {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.ct-world-inner.is-revealed { opacity: 1; transform: translateY(0); }
.ct-world-inner .section-eyebrow { justify-content: center; display: flex; }
.ct-world-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--cream);
  margin: 1rem 0 0;
}
.ct-world-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.ct-world-map {
  max-width: 900px;
  margin: clamp(2rem, 4vw, 3.5rem) auto 0;
}
.ct-world-map svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.ct-world-land {
  fill: rgba(224, 201, 148, .06);
  stroke: rgba(201, 169, 97, .2);
  stroke-width: .5;
  stroke-linejoin: round;
}
.ct-world-arc {
  fill: none;
  stroke: var(--gold-pale);
  stroke-width: 1.1;
  opacity: .5;
  stroke-dasharray: 3 6;
  stroke-linecap: round;
  animation: ct-world-dash 9s linear infinite;
}
@keyframes ct-world-dash { to { stroke-dashoffset: -90; } }
.ct-world-dot { fill: var(--gold-pale); }
.ct-world-halo {
  fill: var(--gold-pale);
  opacity: .25;
  transform-box: fill-box;
  transform-origin: center;
  animation: ct-world-pulse 3.4s ease-out infinite;
}
.ct-world-pt:nth-of-type(2) .ct-world-halo { animation-delay: 1.1s; }
.ct-world-pt:nth-of-type(3) .ct-world-halo { animation-delay: 2.2s; }
@keyframes ct-world-pulse {
  0%   { transform: scale(.4); opacity: .4; }
  70%  { opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
.ct-world-label {
  fill: var(--gold-pale);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .85;
}
.ct-world-label--end { text-anchor: end; }
.ct-world-legend {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  opacity: .7;
  font-size: clamp(.95rem, 1.3vw, 1.15rem);
  margin: clamp(2rem, 4vw, 2.5rem) 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .ct-world-arc, .ct-world-halo { animation: none; }
  .ct-world-halo { opacity: .2; }
}

/* ============================================================
   REFERENCES PAGE (references.html)
   Grand editorial roll-call: dark hero, statement, five alternating
   category blocks (image + ledger list), shared atelier-cta.
   .ref- prefix throughout.
   ============================================================ */

/* ----- HERO ----- */
.ref-hero {
  position: relative;
  min-height: 82vh;
  background: var(--bg-deep);
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.ref-hero-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(.42) contrast(1.06) saturate(.85);
  transform: scale(1.04);
  z-index: 0;
}
.ref-hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(25, 10, 40, .55) 0%,
      rgba(42, 21, 66, .3) 45%,
      rgba(25, 10, 40, .82) 100%);
  z-index: 1;
}
.ref-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--cream);
  padding: 0 var(--pad-x);
  max-width: 1050px;
}
.ref-hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 6.5vw, 6rem);
  line-height: 1.03;
  letter-spacing: -.015em;
  margin: 1.5rem 0 2rem;
  color: var(--cream);
}
.ref-hero-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.ref-hero-sub {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(.9rem, 1.3vw, 1.2rem);
  letter-spacing: .04em;
  color: var(--gold-pale);
  opacity: .85;
  margin: 0;
}
.ref-hero-sub-line {
  width: clamp(36px, 7vw, 70px);
  height: 1px;
  background: var(--gold-pale);
  opacity: .55;
}

/* ----- INTRO STATEMENT ----- */
.ref-intro {
  background: var(--bg);
  padding: clamp(8vh, 13vh, 16vh) var(--pad-x);
}
.ref-intro-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.ref-intro-inner.is-revealed { opacity: 1; transform: translateY(0); }
.ref-intro-inner .section-eyebrow { justify-content: center; display: flex; }
.ref-intro-text {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 1.2rem 0 0;
}
.ref-intro-text em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}

/* ----- CATEGORY BLOCKS — shared layout ----- */
.ref-specifiers,
.ref-hotels,
.ref-yachts,
.ref-retail,
.ref-monuments {
  padding: clamp(8vh, 13vh, 17vh) var(--pad-x);
}
.ref-specifiers { background: var(--bg); }
.ref-hotels { background: var(--bg-tint); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.ref-yachts { background: var(--bg-deep); color: var(--cream); }
.ref-retail { background: var(--bg); }
.ref-monuments { background: var(--bg-deeper); color: var(--cream); }

.ref-block-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, 540px) 1fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: center;
}
.ref-block--reverse { grid-template-columns: 1fr minmax(300px, 540px); }
.ref-block--reverse .ref-figure { order: 2; }
.ref-block--reverse .ref-content { order: 1; }
@media (max-width: 900px) {
  .ref-block-inner, .ref-block--reverse { grid-template-columns: 1fr; gap: 2.5rem; }
  .ref-block--reverse .ref-figure { order: 0; }
}

.ref-figure {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.ref-figure.is-revealed { opacity: 1; transform: translateY(0); }
.ref-figure-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -34px rgba(42, 21, 66, .3);
}
.ref-figure-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.ref-figure-frame--dark {
  background: rgba(245, 239, 227, .03);
  border-color: rgba(201, 169, 97, .2);
}
.ref-figure-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

.ref-content {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.ref-content.is-revealed { opacity: 1; transform: translateY(0); }
.ref-cat-eyebrow {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  opacity: .85;
  margin: 0 0 1rem;
}
.ref-cat-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 clamp(1.8rem, 3.5vw, 2.6rem);
}
.ref-cat-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}
.ref-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.ref-list--cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  border-top: none;
}
.ref-list--cols .ref-item { border-top: 1px solid var(--line); }
.ref-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}
.ref-item-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: var(--ink);
  line-height: 1.25;
}
.ref-item-loc {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Dark-section overrides (yachts + monuments) */
.ref-yachts .ref-cat-title,
.ref-monuments .ref-cat-title { color: var(--cream); }
.ref-yachts .ref-cat-title em,
.ref-monuments .ref-cat-title em,
.ref-yachts .ref-cat-eyebrow,
.ref-monuments .ref-cat-eyebrow { color: var(--gold-pale); }
.ref-yachts .ref-list,
.ref-yachts .ref-item,
.ref-monuments .ref-list,
.ref-monuments .ref-item,
.ref-yachts .ref-list--cols .ref-item,
.ref-monuments .ref-list--cols .ref-item { border-color: rgba(201, 169, 97, .18); }
.ref-yachts .ref-item-name,
.ref-monuments .ref-item-name { color: var(--cream); }
.ref-yachts .ref-item-loc,
.ref-monuments .ref-item-loc { color: var(--gold-pale); opacity: .75; }
@media (max-width: 540px) {
  .ref-list--cols { grid-template-columns: 1fr; border-top: 1px solid var(--line); }
}

/* ============================================================
   YACHT PAGE (yacht.html) — sub-page of Expertise
   Marine editorial. Hero photo, refit intro, 3-col work breakdown,
   leather mastery, outdoor cushions, CTA. .yacht- prefix throughout.
   ============================================================ */

/* ----- HERO ----- */
.yacht-hero {
  position: relative;
  min-height: 92vh;
  background: var(--bg-deep);
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.yacht-hero-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 35%;
  filter: brightness(.4) contrast(1.1) saturate(.6);
  transform: scale(1.04);
  z-index: 0;
}
.yacht-hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(25, 10, 40, .6) 0%,
      rgba(42, 21, 66, .3) 35%,
      rgba(42, 21, 66, .5) 70%,
      rgba(25, 10, 40, .85) 100%),
    radial-gradient(ellipse at center,
      transparent 0%,
      rgba(25, 10, 40, .25) 70%,
      rgba(25, 10, 40, .55) 100%);
  z-index: 1;
}
.yacht-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--cream);
  padding: 0 var(--pad-x);
  max-width: 1100px;
}
.yacht-hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.8rem, 7vw, 6.5rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 1.5rem 0 2rem;
  color: var(--cream);
}
.yacht-hero-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.yacht-hero-sub {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(.95rem, 1.4vw, 1.25rem);
  letter-spacing: .04em;
  color: var(--gold-pale);
  opacity: .85;
  margin: 0;
}
.yacht-hero-sub-line {
  width: clamp(40px, 8vw, 80px);
  height: 1px;
  background: var(--gold-pale);
  opacity: .55;
}

/* Shared section title */
.yacht-section-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 1rem 0 clamp(2rem, 4vw, 3.2rem);
  max-width: 20ch;
}
.yacht-section-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}

/* ----- REFIT — 2-col text + bedroom photo ----- */
.yacht-refit {
  background: var(--bg);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.yacht-refit-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 460px);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.yacht-refit-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.yacht-refit-text.is-revealed { opacity: 1; transform: translateY(0); }
.yacht-refit-lead {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  line-height: 1.4;
  font-style: italic;
  color: var(--ink);
  font-weight: 300;
  max-width: 32ch;
  margin: 0 0 1.5rem;
}
.yacht-refit-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 300;
  max-width: 58ch;
  margin: 0;
}
.yacht-refit-img {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.yacht-refit-img.is-revealed { opacity: 1; transform: translateY(0); }
.yacht-refit-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(42, 21, 66, .2);
}
.yacht-refit-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.yacht-refit-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/4;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.yacht-refit-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.yacht-refit-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.yacht-refit-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
}
@media (max-width: 900px) {
  .yacht-refit-inner { grid-template-columns: 1fr; gap: 3rem; }
}

/* ----- WORK — 3 cols on a tinted background ----- */
.yacht-work {
  background: var(--bg-tint);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.yacht-work-inner {
  max-width: var(--max);
  margin: 0 auto;
}
.yacht-work-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto clamp(4rem, 8vw, 6rem);
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.yacht-work-head.is-revealed { opacity: 1; transform: translateY(0); }
.yacht-work-head .section-eyebrow { justify-content: center; display: flex; }
.yacht-work-head .yacht-section-title { margin-left: auto; margin-right: auto; max-width: none; }
.yacht-work-lead {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 300;
  margin: 0 auto;
  max-width: 65ch;
}
.yacht-work-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  opacity: 0;
  transition: opacity 1.6s var(--ease) .2s;
}
.yacht-work-cols.is-revealed { opacity: 1; }
@media (max-width: 900px) {
  .yacht-work-cols { grid-template-columns: 1fr; gap: 3rem; }
}
.yacht-work-col {
  border-top: 1px solid var(--line);
  padding-top: 2rem;
}
.yacht-work-col-eye {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  opacity: .85;
  margin: 0 0 1rem;
}
.yacht-work-col-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -.005em;
  margin: 0 0 1.25rem;
}
.yacht-work-col-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}
.yacht-work-col-body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  font-weight: 300;
  margin: 0;
}

/* ----- LEATHER — dark, image-left text-right ----- */
.yacht-leather {
  background: var(--bg-deep);
  color: var(--cream);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.yacht-leather-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, 460px) 1fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.yacht-leather-img {
  margin: 0;
  opacity: 0; transform: translateX(-20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.yacht-leather-img.is-revealed { opacity: 1; transform: translateX(0); }
.yacht-leather-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: rgba(255, 255, 255, .02);
  border: 1px solid rgba(201, 169, 97, .15);
}
.yacht-leather-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .15);
  pointer-events: none;
  z-index: 3;   /* sit above both image layers in the crossfade variant */
}
.yacht-leather-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

/* === Crossfade variant ====================================================
   Two stacked images: A (in flow, defines the frame's intrinsic height via
   its aspect-ratio) and B (absolute overlay sitting on the same inner box).
   Their opacities are bound to a CSS custom property --t (range 0..1) that
   script.js drives from scroll position: --t = 0 → A visible, --t = 1 → B
   visible. No CSS transition — the lerp is the scroll itself, so the
   crossfade follows the scroll velocity naturally. */
.yacht-leather-fade {
  --t: 0;
}
.yacht-leather-fade .yacht-leather-img-a {
  opacity: calc(1 - var(--t));
  will-change: opacity;
}
.yacht-leather-fade .yacht-leather-img-b {
  position: absolute;
  top: clamp(.7rem, 1.4vw, 1.1rem);
  left: clamp(.7rem, 1.4vw, 1.1rem);
  width: calc(100% - 2 * clamp(.7rem, 1.4vw, 1.1rem));
  aspect-ratio: 1/1;
  z-index: 2;
  opacity: var(--t);
  will-change: opacity;
}
.yacht-leather-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.yacht-leather-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-pale);
  opacity: .7;
}
.yacht-leather-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-pale);
}

.yacht-leather-text {
  opacity: 0; transform: translateX(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.yacht-leather-text.is-revealed { opacity: 1; transform: translateX(0); }
.yacht-leather-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--cream);
  margin: 1rem 0 clamp(2rem, 4vw, 3rem);
  max-width: 20ch;
}
.yacht-leather-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.yacht-leather-body {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  line-height: 1.7;
  color: var(--cream);
  opacity: .85;
  font-weight: 300;
  margin: 0 0 1.5rem;
  max-width: 58ch;
}
.yacht-leather-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
}
.yacht-leather-body:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .yacht-leather-inner { grid-template-columns: 1fr; gap: 3rem; }
  .yacht-leather-img { max-width: 460px; margin: 0 auto; }
}

/* ----- OUTDOOR — text-left + deck photo right ----- */
.yacht-outdoor {
  background: var(--bg);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.yacht-outdoor-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 520px);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.yacht-outdoor-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.yacht-outdoor-text.is-revealed { opacity: 1; transform: translateY(0); }
.yacht-outdoor-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.7;
  color: var(--ink);
  font-weight: 300;
  margin: 0 0 1.5rem;
  max-width: 56ch;
}
.yacht-outdoor-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}
.yacht-outdoor-body:last-child { margin-bottom: 0; }

.yacht-outdoor-img {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.yacht-outdoor-img.is-revealed { opacity: 1; transform: translateY(0); }
.yacht-outdoor-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(42, 21, 66, .2);
}
.yacht-outdoor-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.yacht-outdoor-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.yacht-outdoor-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.yacht-outdoor-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.yacht-outdoor-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
}
@media (max-width: 900px) {
  .yacht-outdoor-inner { grid-template-columns: 1fr; gap: 3rem; }
}

/* ============================================================
   AVIATION PAGE (aviation.html) — sub-page of Expertise · III
   Hero photo, intro, 3-col aeronautical saddlery, dark cabin
   section with curtains/carpets, CTA. .av- prefix throughout.
   ============================================================ */

/* ----- HERO ----- */
.av-hero {
  position: relative;
  min-height: 92vh;
  background: var(--bg-deep);
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.av-hero-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 50%;
  filter: brightness(.42) contrast(1.1) saturate(.65);
  transform: scale(1.04);
  z-index: 0;
}
.av-hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(25, 10, 40, .55) 0%,
      rgba(42, 21, 66, .28) 35%,
      rgba(42, 21, 66, .48) 70%,
      rgba(25, 10, 40, .82) 100%),
    radial-gradient(ellipse at center,
      transparent 0%,
      rgba(25, 10, 40, .22) 70%,
      rgba(25, 10, 40, .5) 100%);
  z-index: 1;
}
.av-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--cream);
  padding: 0 var(--pad-x);
  max-width: 1100px;
}
.av-hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.8rem, 7vw, 6.5rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 1.5rem 0 2rem;
  color: var(--cream);
}
.av-hero-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.av-hero-sub {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(.95rem, 1.4vw, 1.25rem);
  letter-spacing: .04em;
  color: var(--gold-pale);
  opacity: .85;
  margin: 0;
}
.av-hero-sub-line {
  width: clamp(40px, 8vw, 80px);
  height: 1px;
  background: var(--gold-pale);
  opacity: .55;
}

/* Shared section title */
.av-section-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 1rem 0 clamp(2rem, 4vw, 3.2rem);
  max-width: 20ch;
}
.av-section-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}

/* ----- INTRO — 2-col with cream-seat photo ----- */
.av-intro {
  background: var(--bg);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.av-intro-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 520px);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.av-intro-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.av-intro-text.is-revealed { opacity: 1; transform: translateY(0); }
.av-intro-lead {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  line-height: 1.4;
  font-style: italic;
  color: var(--ink);
  font-weight: 300;
  max-width: 34ch;
  margin: 0 0 1.5rem;
}
.av-intro-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 300;
  max-width: 58ch;
  margin: 0;
}
.av-intro-img {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.av-intro-img.is-revealed { opacity: 1; transform: translateY(0); }
.av-intro-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(42, 21, 66, .2);
}
.av-intro-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.av-intro-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.av-intro-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.av-intro-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.av-intro-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
}
@media (max-width: 900px) {
  .av-intro-inner { grid-template-columns: 1fr; gap: 3rem; }
}

/* ----- SADDLERY — 3-col on tinted bg ----- */
.av-saddlery {
  background: var(--bg-tint);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.av-saddlery-inner {
  max-width: var(--max);
  margin: 0 auto;
}
.av-saddlery-head {
  text-align: center;
  margin: 0 auto clamp(4rem, 8vw, 6rem);
  max-width: 820px;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.av-saddlery-head.is-revealed { opacity: 1; transform: translateY(0); }
.av-saddlery-head .section-eyebrow { justify-content: center; display: flex; }
.av-saddlery-head .av-section-title { margin-left: auto; margin-right: auto; max-width: none; }
.av-saddlery-lead {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 300;
  margin: 0 auto;
  max-width: 68ch;
}

.av-saddlery-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  opacity: 0;
  transition: opacity 1.6s var(--ease) .2s;
}
.av-saddlery-cols.is-revealed { opacity: 1; }
@media (max-width: 900px) {
  .av-saddlery-cols { grid-template-columns: 1fr; gap: 3rem; }
}
.av-saddlery-col {
  border-top: 1px solid var(--line);
  padding-top: 2rem;
}
.av-saddlery-col-eye {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  opacity: .85;
  margin: 0 0 1rem;
}
.av-saddlery-col-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -.005em;
  margin: 0 0 1.25rem;
}
.av-saddlery-col-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}
.av-saddlery-col-body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  font-weight: 300;
  margin: 0;
}

/* ----- CABIN — DARK section, image-left + text-right ----- */
.av-cabin {
  background: var(--bg-deep);
  color: var(--cream);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.av-cabin-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, 520px) 1fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.av-cabin-img {
  margin: 0;
  opacity: 0; transform: translateX(-20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.av-cabin-img.is-revealed { opacity: 1; transform: translateX(0); }
.av-cabin-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: rgba(255, 255, 255, .02);
  border: 1px solid rgba(201, 169, 97, .15);
}
.av-cabin-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .15);
  pointer-events: none;
}
.av-cabin-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.av-cabin-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.av-cabin-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-pale);
  opacity: .7;
}
.av-cabin-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-pale);
}

.av-cabin-text {
  opacity: 0; transform: translateX(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.av-cabin-text.is-revealed { opacity: 1; transform: translateX(0); }
.av-cabin-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--cream);
  margin: 1rem 0 clamp(2rem, 4vw, 3rem);
  max-width: 20ch;
}
.av-cabin-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.av-cabin-body {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  line-height: 1.7;
  color: var(--cream);
  opacity: .85;
  font-weight: 300;
  margin: 0 0 1.5rem;
  max-width: 58ch;
}
.av-cabin-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
}
.av-cabin-body:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .av-cabin-inner { grid-template-columns: 1fr; gap: 3rem; }
  .av-cabin-img { max-width: 520px; margin: 0 auto; }
}

/* ===================================================================
   HOTELS & RESTAURANTS PAGE — five editorial sections
   Hero → Intro → Drapery (3-col, dark) → Restaurants → Bespoke (dark, 2 photos)
   Mirrors the structural rhythm of yacht.html / aviation.html so the
   Expertise pages feel like chapters of one book. Prefix: .hot-
   =================================================================== */

/* ----- HERO — full-bleed darkened hospitality scene ----- */
.hot-hero {
  position: relative;
  min-height: 92vh;
  background: var(--bg-deep);
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.hot-hero-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 40%;
  filter: brightness(.45) contrast(1.08) saturate(.7);
  transform: scale(1.04);
  z-index: 0;
}
.hot-hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(25, 10, 40, .55) 0%,
      rgba(42, 21, 66, .28) 35%,
      rgba(42, 21, 66, .5) 70%,
      rgba(25, 10, 40, .85) 100%),
    radial-gradient(ellipse at center,
      transparent 0%,
      rgba(25, 10, 40, .22) 70%,
      rgba(25, 10, 40, .55) 100%);
  z-index: 1;
}
.hot-hero-inner {
  position: relative; z-index: 2;
  text-align: center;
  color: var(--cream);
  padding: 0 var(--pad-x);
  max-width: 1100px;
}
.hot-hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 6.5vw, 6.2rem);
  line-height: 1.04;
  letter-spacing: -.015em;
  margin: 1.5rem 0 2rem;
  color: var(--cream);
}
.hot-hero-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.hot-hero-sub {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(.95rem, 1.4vw, 1.25rem);
  letter-spacing: .04em;
  color: var(--gold-pale);
  opacity: .85;
  margin: 0;
}
.hot-hero-sub-line {
  width: clamp(40px, 8vw, 80px);
  height: 1px;
  background: var(--gold-pale);
  opacity: .55;
}

/* Shared section title (light-bg version) */
.hot-section-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 1rem 0 clamp(2rem, 4vw, 3.2rem);
  max-width: 22ch;
}
.hot-section-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}

/* ----- INTRO — text + photo, on cream ----- */
.hot-intro {
  background: var(--bg);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.hot-intro-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 460px);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.hot-intro-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.hot-intro-text.is-revealed { opacity: 1; transform: translateY(0); }
.hot-intro-lead {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  line-height: 1.4;
  font-style: italic;
  color: var(--ink);
  font-weight: 300;
  max-width: 32ch;
  margin: 0 0 1.5rem;
}
.hot-intro-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 300;
  max-width: 58ch;
  margin: 0;
}
.hot-intro-img {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.hot-intro-img.is-revealed { opacity: 1; transform: translateY(0); }
.hot-intro-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(42, 21, 66, .2);
}
.hot-intro-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.hot-intro-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.hot-intro-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.hot-intro-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hot-intro-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
}
@media (max-width: 900px) {
  .hot-intro-inner { grid-template-columns: 1fr; gap: 3rem; }
}

/* ----- DRAPERY — 3 columns over a tinted bg ----- */
.hot-drapery {
  background: var(--bg-tint);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
  position: relative;
}
.hot-drapery-inner {
  max-width: var(--max);
  margin: 0 auto;
}
.hot-drapery-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.hot-drapery-head.is-revealed { opacity: 1; transform: translateY(0); }
.hot-drapery-head .section-eyebrow { justify-content: center; display: flex; }
.hot-drapery-head .hot-section-title {
  margin-left: auto; margin-right: auto; max-width: none;
}
.hot-drapery-lead {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.55vw, 1.4rem);
  line-height: 1.55;
  font-style: italic;
  color: var(--ink-soft);
  font-weight: 300;
  margin: 0;
}
.hot-drapery-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .2s, transform 1.2s var(--ease) .2s;
}
.hot-drapery-cols.is-revealed { opacity: 1; transform: translateY(0); }
.hot-drapery-col {
  border-top: 1px solid var(--line);
  padding-top: 2rem;
  position: relative;
}
.hot-drapery-col::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 40px; height: 1px;
  background: var(--gold-deep);
}
.hot-drapery-col-eye {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 1rem;
}
.hot-drapery-col-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.1vw, 1.85rem);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 1rem;
}
.hot-drapery-col-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}
.hot-drapery-col-body {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-soft);
  font-weight: 300;
  margin: 0;
}
@media (max-width: 900px) {
  .hot-drapery-cols { grid-template-columns: 1fr; gap: 3rem; }
}

/* ----- RESTAURANTS — photo + text, on cream ----- */
.hot-restaurants {
  background: var(--bg);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.hot-restaurants-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 1fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.hot-restaurants-img {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.hot-restaurants-img.is-revealed { opacity: 1; transform: translateY(0); }
.hot-restaurants-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(42, 21, 66, .2);
}
.hot-restaurants-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.hot-restaurants-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.hot-restaurants-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem;
}
.hot-restaurants-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hot-restaurants-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
}
.hot-restaurants-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.hot-restaurants-text.is-revealed { opacity: 1; transform: translateY(0); }
.hot-restaurants-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.7;
  color: var(--ink);
  font-weight: 300;
  margin: 0 0 1.5rem;
  max-width: 58ch;
}
.hot-restaurants-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}
.hot-restaurants-body:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .hot-restaurants-inner { grid-template-columns: 1fr; gap: 3rem; }
}

/* ----- BESPOKE — dark editorial section, text + 2 stacked photos ----- */
.hot-bespoke {
  background: var(--bg-deep);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
  position: relative;
  isolation: isolate;
}
.hot-bespoke::before {
  /* Subtle vignette tying the section into the dark hero rhythm */
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at top,
    rgba(91, 45, 127, .25) 0%,
    transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.hot-bespoke-inner {
  position: relative; z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 480px);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.hot-bespoke-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.hot-bespoke-text.is-revealed { opacity: 1; transform: translateY(0); }
.hot-bespoke-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--cream);
  margin: 1rem 0 clamp(2rem, 4vw, 3.2rem);
  max-width: 22ch;
}
.hot-bespoke-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.hot-bespoke-body {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  line-height: 1.7;
  color: var(--cream);
  opacity: .85;
  font-weight: 300;
  margin: 0 0 1.5rem;
  max-width: 58ch;
}
.hot-bespoke-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
}
.hot-bespoke-body:last-child { margin-bottom: 0; }
.hot-bespoke-imgs {
  display: grid;
  grid-template-rows: 1.6fr 1fr;
  gap: clamp(1rem, 2vw, 1.8rem);
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.hot-bespoke-imgs.is-revealed { opacity: 1; transform: translateY(0); }
.hot-bespoke-img { margin: 0; }
.hot-bespoke-img-frame {
  position: relative;
  padding: clamp(.5rem, 1vw, .8rem);
  background: rgba(25, 10, 40, .35);
  border: 1px solid rgba(201, 169, 97, .25);
}
.hot-bespoke-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.3rem, .6vw, .5rem);
  border: 1px solid rgba(239, 221, 176, .12);
  pointer-events: none;
}
.hot-bespoke-img-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.hot-bespoke-img-main .hot-bespoke-img-frame img { aspect-ratio: 5/4; }
.hot-bespoke-img-detail .hot-bespoke-img-frame img { aspect-ratio: 4/3; }
.hot-bespoke-img-cap {
  margin: .9rem 0 0;
  text-align: center;
}
.hot-bespoke-img-cap span {
  display: block;
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-pale);
  opacity: .65;
  margin-bottom: .3rem;
}
.hot-bespoke-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: .95rem;
  color: var(--gold-pale);
  opacity: .85;
}
@media (max-width: 900px) {
  .hot-bespoke-inner { grid-template-columns: 1fr; gap: 3rem; }
}

/* ===================================================================
   CORPORATE OFFICE PAGE — five editorial sections
   Hero → Intro → Acoustic (3-col) → Blinds → Desk (dark, structured list)
   Same structural cadence as hotels.html, restated for offices.
   Prefix: .corp-
   =================================================================== */

/* ----- HERO — darkened executive boardroom ----- */
.corp-hero {
  position: relative;
  min-height: 92vh;
  background: var(--bg-deep);
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.corp-hero-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 40%;
  filter: brightness(.45) contrast(1.08) saturate(.7);
  transform: scale(1.04);
  z-index: 0;
}
.corp-hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(25, 10, 40, .55) 0%,
      rgba(42, 21, 66, .28) 35%,
      rgba(42, 21, 66, .5) 70%,
      rgba(25, 10, 40, .85) 100%),
    radial-gradient(ellipse at center,
      transparent 0%,
      rgba(25, 10, 40, .22) 70%,
      rgba(25, 10, 40, .55) 100%);
  z-index: 1;
}
.corp-hero-inner {
  position: relative; z-index: 2;
  text-align: center;
  color: var(--cream);
  padding: 0 var(--pad-x);
  max-width: 1100px;
}
.corp-hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 6.5vw, 6.2rem);
  line-height: 1.04;
  letter-spacing: -.015em;
  margin: 1.5rem 0 2rem;
  color: var(--cream);
}
.corp-hero-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.corp-hero-sub {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(.95rem, 1.4vw, 1.25rem);
  letter-spacing: .04em;
  color: var(--gold-pale);
  opacity: .85;
  margin: 0;
}
.corp-hero-sub-line {
  width: clamp(40px, 8vw, 80px);
  height: 1px;
  background: var(--gold-pale);
  opacity: .55;
}

/* Shared section title (light-bg version) */
.corp-section-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 1rem 0 clamp(2rem, 4vw, 3.2rem);
  max-width: 22ch;
}
.corp-section-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}

/* ----- INTRO — text + photo (open-plan sheers) ----- */
.corp-intro {
  background: var(--bg);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.corp-intro-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 460px);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.corp-intro-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.corp-intro-text.is-revealed { opacity: 1; transform: translateY(0); }
.corp-intro-lead {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  line-height: 1.4;
  font-style: italic;
  color: var(--ink);
  font-weight: 300;
  max-width: 36ch;
  margin: 0 0 1.5rem;
}
.corp-intro-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 300;
  max-width: 58ch;
  margin: 0;
}
.corp-intro-img {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.corp-intro-img.is-revealed { opacity: 1; transform: translateY(0); }
.corp-intro-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(42, 21, 66, .2);
}
.corp-intro-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.corp-intro-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.corp-intro-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.corp-intro-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.corp-intro-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
}
@media (max-width: 900px) {
  .corp-intro-inner { grid-template-columns: 1fr; gap: 3rem; }
}

/* ----- ACOUSTIC — 3-col, tinted cream ----- */
.corp-acoustic {
  background: var(--bg-tint);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
  position: relative;
}
.corp-acoustic-inner {
  max-width: var(--max);
  margin: 0 auto;
}
.corp-acoustic-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.corp-acoustic-head.is-revealed { opacity: 1; transform: translateY(0); }
.corp-acoustic-head .section-eyebrow { justify-content: center; display: flex; }
.corp-acoustic-head .corp-section-title {
  margin-left: auto; margin-right: auto; max-width: none;
}
.corp-acoustic-lead {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.55vw, 1.4rem);
  line-height: 1.55;
  font-style: italic;
  color: var(--ink-soft);
  font-weight: 300;
  margin: 0;
}
.corp-acoustic-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .2s, transform 1.2s var(--ease) .2s;
}
.corp-acoustic-cols.is-revealed { opacity: 1; transform: translateY(0); }
.corp-acoustic-col {
  border-top: 1px solid var(--line);
  padding-top: 2rem;
  position: relative;
}
.corp-acoustic-col::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 40px; height: 1px;
  background: var(--gold-deep);
}
.corp-acoustic-col-eye {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 1rem;
}
.corp-acoustic-col-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.1vw, 1.85rem);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 1rem;
}
.corp-acoustic-col-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}
.corp-acoustic-col-body {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-soft);
  font-weight: 300;
  margin: 0;
}
@media (max-width: 900px) {
  .corp-acoustic-cols { grid-template-columns: 1fr; gap: 3rem; }
}

/* ----- BLINDS — photo + text on cream ----- */
.corp-blinds {
  background: var(--bg);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.corp-blinds-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 1fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.corp-blinds-img {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.corp-blinds-img.is-revealed { opacity: 1; transform: translateY(0); }
.corp-blinds-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(42, 21, 66, .2);
}
.corp-blinds-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.corp-blinds-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.corp-blinds-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem;
}
.corp-blinds-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.corp-blinds-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
}
.corp-blinds-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.corp-blinds-text.is-revealed { opacity: 1; transform: translateY(0); }
.corp-blinds-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.7;
  color: var(--ink);
  font-weight: 300;
  margin: 0 0 1.5rem;
  max-width: 58ch;
}
.corp-blinds-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}
.corp-blinds-body:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .corp-blinds-inner { grid-template-columns: 1fr; gap: 3rem; }
}

/* ----- DESK — dark editorial closing section with structured list ----- */
.corp-desk {
  background: var(--bg-deep);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
  position: relative;
  isolation: isolate;
}
.corp-desk::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at top,
    rgba(91, 45, 127, .22) 0%,
    transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.corp-desk-inner {
  position: relative; z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 480px);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.corp-desk-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.corp-desk-text.is-revealed { opacity: 1; transform: translateY(0); }
.corp-desk-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--cream);
  margin: 1rem 0 clamp(2rem, 4vw, 3.2rem);
  max-width: 22ch;
}
.corp-desk-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.corp-desk-body {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  line-height: 1.7;
  color: var(--cream);
  opacity: .85;
  font-weight: 300;
  margin: 0 0 1.5rem;
  max-width: 58ch;
}
.corp-desk-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
}
.corp-desk-body:last-child { margin-bottom: 0; }
.corp-desk-meta {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.corp-desk-meta.is-revealed { opacity: 1; transform: translateY(0); }
.corp-desk-meta-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: baseline;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(239, 221, 176, .18);
}
.corp-desk-meta-row:last-child { border-bottom: none; padding-bottom: 0; }
.corp-desk-meta-eye {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-pale);
  opacity: .65;
}
.corp-desk-meta-label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  color: var(--cream);
}
.corp-desk-meta-note {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: .95rem;
  color: var(--gold-pale);
  opacity: .85;
  text-align: right;
}
@media (max-width: 900px) {
  .corp-desk-inner { grid-template-columns: 1fr; gap: 3rem; }
  .corp-desk-meta-row { grid-template-columns: auto 1fr; }
  .corp-desk-meta-note { grid-column: 1 / -1; text-align: left; padding-left: calc(.68rem + .3em * 4); }
}

/* ===================================================================
   LUXURY BOUTIQUES PAGE — four editorial sections
   Hero → Intro → Brand (3-col) → Know-how (dark, structured list)
   Same rhythm as corporate.html. Prefix: .boutq-
   =================================================================== */

/* ----- HERO — boutique with backlit niches, darkened ----- */
.boutq-hero {
  position: relative;
  min-height: 92vh;
  background: var(--bg-deep);
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.boutq-hero-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 40%;
  filter: brightness(.45) contrast(1.1) saturate(.7);
  transform: scale(1.04);
  z-index: 0;
}
.boutq-hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(25, 10, 40, .55) 0%,
      rgba(42, 21, 66, .28) 35%,
      rgba(42, 21, 66, .5) 70%,
      rgba(25, 10, 40, .85) 100%),
    radial-gradient(ellipse at center,
      transparent 0%,
      rgba(25, 10, 40, .22) 70%,
      rgba(25, 10, 40, .55) 100%);
  z-index: 1;
}
.boutq-hero-inner {
  position: relative; z-index: 2;
  text-align: center;
  color: var(--cream);
  padding: 0 var(--pad-x);
  max-width: 1100px;
}
.boutq-hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 6.5vw, 6.2rem);
  line-height: 1.04;
  letter-spacing: -.015em;
  margin: 1.5rem 0 2rem;
  color: var(--cream);
}
.boutq-hero-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.boutq-hero-sub {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(.95rem, 1.4vw, 1.25rem);
  letter-spacing: .04em;
  color: var(--gold-pale);
  opacity: .85;
  margin: 0;
}
.boutq-hero-sub-line {
  width: clamp(40px, 8vw, 80px);
  height: 1px;
  background: var(--gold-pale);
  opacity: .55;
}

/* Shared section title */
.boutq-section-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 1rem 0 clamp(2rem, 4vw, 3.2rem);
  max-width: 22ch;
}
.boutq-section-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}

/* ----- INTRO — text + photo (fashion boutique) ----- */
.boutq-intro {
  background: var(--bg);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.boutq-intro-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 480px);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.boutq-intro-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.boutq-intro-text.is-revealed { opacity: 1; transform: translateY(0); }
.boutq-intro-lead {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  line-height: 1.4;
  font-style: italic;
  color: var(--ink);
  font-weight: 300;
  max-width: 36ch;
  margin: 0 0 1.5rem;
}
.boutq-intro-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 300;
  max-width: 58ch;
  margin: 0;
}
.boutq-intro-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}
.boutq-intro-img {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.boutq-intro-img.is-revealed { opacity: 1; transform: translateY(0); }
.boutq-intro-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(42, 21, 66, .2);
}
.boutq-intro-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.boutq-intro-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.boutq-intro-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem; text-align: center;
}
.boutq-intro-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.boutq-intro-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
}
@media (max-width: 900px) {
  .boutq-intro-inner { grid-template-columns: 1fr; gap: 3rem; }
}

/* ----- BRAND — 3-col, cream tinted ----- */
.boutq-brand {
  background: var(--bg-tint);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
  position: relative;
}
.boutq-brand-inner {
  max-width: var(--max);
  margin: 0 auto;
}
.boutq-brand-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.boutq-brand-head.is-revealed { opacity: 1; transform: translateY(0); }
.boutq-brand-head .section-eyebrow { justify-content: center; display: flex; }
.boutq-brand-head .boutq-section-title {
  margin-left: auto; margin-right: auto; max-width: none;
}
.boutq-brand-lead {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.55vw, 1.4rem);
  line-height: 1.55;
  font-style: italic;
  color: var(--ink-soft);
  font-weight: 300;
  margin: 0;
}
.boutq-brand-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .2s, transform 1.2s var(--ease) .2s;
}
.boutq-brand-cols.is-revealed { opacity: 1; transform: translateY(0); }
.boutq-brand-col {
  border-top: 1px solid var(--line);
  padding-top: 2rem;
  position: relative;
}
.boutq-brand-col::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 40px; height: 1px;
  background: var(--gold-deep);
}
.boutq-brand-col-eye {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 1rem;
}
.boutq-brand-col-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.1vw, 1.85rem);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 1rem;
}
.boutq-brand-col-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}
.boutq-brand-col-body {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-soft);
  font-weight: 300;
  margin: 0;
}
@media (max-width: 900px) {
  .boutq-brand-cols { grid-template-columns: 1fr; gap: 3rem; }
}

/* ----- KNOW-HOW — dark closing with structured list ----- */
.boutq-know {
  background: var(--bg-deep);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
  position: relative;
  isolation: isolate;
}
.boutq-know::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at top,
    rgba(91, 45, 127, .22) 0%,
    transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.boutq-know-inner {
  position: relative; z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 480px);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.boutq-know-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.boutq-know-text.is-revealed { opacity: 1; transform: translateY(0); }
.boutq-know-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--cream);
  margin: 1rem 0 clamp(2rem, 4vw, 3.2rem);
  max-width: 22ch;
}
.boutq-know-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.boutq-know-body {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  line-height: 1.7;
  color: var(--cream);
  opacity: .85;
  font-weight: 300;
  margin: 0 0 1.5rem;
  max-width: 58ch;
}
.boutq-know-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
}
.boutq-know-body:last-child { margin-bottom: 0; }
.boutq-know-meta {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.boutq-know-meta.is-revealed { opacity: 1; transform: translateY(0); }
.boutq-know-meta-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: baseline;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(239, 221, 176, .18);
}
.boutq-know-meta-row:last-child { border-bottom: none; padding-bottom: 0; }
.boutq-know-meta-eye {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-pale);
  opacity: .65;
}
.boutq-know-meta-label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--cream);
}
.boutq-know-meta-note {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: .95rem;
  color: var(--gold-pale);
  opacity: .85;
  text-align: right;
}
@media (max-width: 900px) {
  .boutq-know-inner { grid-template-columns: 1fr; gap: 3rem; }
  .boutq-know-meta-row { grid-template-columns: auto 1fr; }
  .boutq-know-meta-note { grid-column: 1 / -1; text-align: left; padding-left: calc(.68rem + .3em * 4); }
}

/* ===================================================================
   FRENCH HERITAGE PAGE — five editorial sections
   Hero → Intro (centred chapter opening) → Scenic (text+photo) →
   Velvets (dark 3-col with spec line) → Local Authorities (cream,
   structured list). Prefix: .heri-
   =================================================================== */

/* ----- HERO — burgundy velvet against damask ----- */
.heri-hero {
  position: relative;
  min-height: 92vh;
  background: var(--bg-deep);
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.heri-hero-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 50%;
  filter: brightness(.55) contrast(1.1) saturate(.9);
  transform: scale(1.04);
  z-index: 0;
}
.heri-hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(25, 10, 40, .5) 0%,
      rgba(42, 21, 66, .22) 35%,
      rgba(42, 21, 66, .45) 70%,
      rgba(25, 10, 40, .8) 100%),
    radial-gradient(ellipse at center,
      transparent 0%,
      rgba(25, 10, 40, .2) 70%,
      rgba(25, 10, 40, .5) 100%);
  z-index: 1;
}
.heri-hero-inner {
  position: relative; z-index: 2;
  text-align: center;
  color: var(--cream);
  padding: 0 var(--pad-x);
  max-width: 1100px;
}
.heri-hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 6.5vw, 6.2rem);
  line-height: 1.04;
  letter-spacing: -.015em;
  margin: 1.5rem 0 2rem;
  color: var(--cream);
}
.heri-hero-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.heri-hero-sub {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(.95rem, 1.4vw, 1.25rem);
  letter-spacing: .04em;
  color: var(--gold-pale);
  opacity: .85;
  margin: 0;
}
.heri-hero-sub-line {
  width: clamp(40px, 8vw, 80px);
  height: 1px;
  background: var(--gold-pale);
  opacity: .55;
}

/* Shared section title for cream sections */
.heri-section-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 1rem 0 clamp(2rem, 4vw, 3.2rem);
  max-width: 22ch;
}
.heri-section-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
  font-weight: 400;
}

/* ----- INTRO — text-only chapter opening, two-column asymmetric ----- */
.heri-intro {
  background: var(--bg);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.heri-intro-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.4fr;
  gap: clamp(3rem, 7vw, 7rem);
  align-items: start;
}
.heri-intro-head {
  position: sticky;
  top: 100px;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.heri-intro-head.is-revealed { opacity: 1; transform: translateY(0); }
.heri-intro-body {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.heri-intro-body.is-revealed { opacity: 1; transform: translateY(0); }
.heri-intro-lead {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  line-height: 1.45;
  font-style: italic;
  color: var(--ink);
  font-weight: 300;
  margin: 0 0 2rem;
}
.heri-intro-lead em {
  font-family: var(--font-accent);
  color: var(--gold-deep);
}
.heri-intro-text {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.7;
  color: var(--ink);
  font-weight: 300;
  margin: 0 0 1.5rem;
  max-width: 60ch;
}
.heri-intro-text em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}
.heri-intro-text:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .heri-intro-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .heri-intro-head { position: static; }
}

/* ----- SCENIC — photo + text, cream-tinted ----- */
.heri-scenic {
  background: var(--bg-tint);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.heri-scenic-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 1fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.heri-scenic-img {
  margin: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.heri-scenic-img.is-revealed { opacity: 1; transform: translateY(0); }
.heri-scenic-img-frame {
  position: relative;
  padding: clamp(.7rem, 1.4vw, 1.1rem);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(42, 21, 66, .2);
}
.heri-scenic-img-frame::before {
  content: '';
  position: absolute;
  inset: clamp(.4rem, .8vw, .65rem);
  border: 1px solid rgba(201, 169, 97, .25);
  pointer-events: none;
}
.heri-scenic-img-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.heri-scenic-img-cap {
  margin: 1.25rem 0 0;
  display: flex; flex-direction: column;
  gap: .4rem;
}
.heri-scenic-img-cap span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.heri-scenic-img-cap em {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-deep);
}
.heri-scenic-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.heri-scenic-text.is-revealed { opacity: 1; transform: translateY(0); }
.heri-scenic-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.7;
  color: var(--ink);
  font-weight: 300;
  margin: 0 0 1.5rem;
  max-width: 58ch;
}
.heri-scenic-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}
.heri-scenic-body:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .heri-scenic-inner { grid-template-columns: 1fr; gap: 3rem; }
}

/* ----- VELVETS — dark, 3-col with spec line ----- */
.heri-velvets {
  background: var(--bg-deep);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
  position: relative;
  isolation: isolate;
}
.heri-velvets::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center,
    rgba(91, 45, 127, .22) 0%,
    transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.heri-velvets-inner {
  position: relative; z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
}
.heri-velvets-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.heri-velvets-head.is-revealed { opacity: 1; transform: translateY(0); }
.heri-velvets-head .section-eyebrow { justify-content: center; display: flex; }
.heri-velvets-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--cream);
  margin: 1rem auto clamp(1.5rem, 3vw, 2.5rem);
  max-width: 22ch;
}
.heri-velvets-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.heri-velvets-lead {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.55vw, 1.4rem);
  line-height: 1.55;
  font-style: italic;
  color: var(--cream);
  opacity: .8;
  font-weight: 300;
  margin: 0;
}
.heri-velvets-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .2s, transform 1.2s var(--ease) .2s;
}
.heri-velvets-cols.is-revealed { opacity: 1; transform: translateY(0); }
.heri-velvets-col {
  border-top: 1px solid rgba(239, 221, 176, .18);
  padding-top: 2rem;
  position: relative;
  display: flex;
  flex-direction: column;
}
.heri-velvets-col::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 40px; height: 1px;
  background: var(--gold-pale);
}
.heri-velvets-col-eye {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-pale);
  opacity: .65;
  margin: 0 0 1rem;
}
.heri-velvets-col-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.1vw, 1.85rem);
  line-height: 1.15;
  color: var(--cream);
  margin: 0 0 1rem;
}
.heri-velvets-col-title em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-pale);
  font-weight: 400;
}
.heri-velvets-col-body {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--cream);
  opacity: .8;
  font-weight: 300;
  margin: 0 0 1.5rem;
  flex: 1;
}
/* The "spec line" at bottom of each velvet col — a thin italic note
   pinned to the foot, after a hairline separator. Reads like a fabric
   ticket on a sample swatch. */
.heri-velvets-col-spec {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: .9rem;
  color: var(--gold-pale);
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(239, 221, 176, .12);
  letter-spacing: .02em;
}
@media (max-width: 900px) {
  .heri-velvets-cols { grid-template-columns: 1fr; gap: 3rem; }
}

/* ----- LOCAL AUTHORITIES — closing cream section with structured list ----- */
.heri-local {
  background: var(--bg);
  padding: clamp(8vh, 14vh, 18vh) var(--pad-x);
}
.heri-local-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 480px);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.heri-local-text {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.heri-local-text.is-revealed { opacity: 1; transform: translateY(0); }
.heri-local-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.7;
  color: var(--ink);
  font-weight: 300;
  margin: 0 0 1.5rem;
  max-width: 58ch;
}
.heri-local-body em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold-deep);
}
.heri-local-body:last-child { margin-bottom: 0; }
.heri-local-meta {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s var(--ease) .15s, transform 1.2s var(--ease) .15s;
}
.heri-local-meta.is-revealed { opacity: 1; transform: translateY(0); }
.heri-local-meta-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: baseline;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.heri-local-meta-row:last-child { border-bottom: none; padding-bottom: 0; }
.heri-local-meta-eye {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.heri-local-meta-label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--ink);
}
.heri-local-meta-note {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: .95rem;
  color: var(--gold-deep);
  text-align: right;
}
@media (max-width: 900px) {
  .heri-local-inner { grid-template-columns: 1fr; gap: 3rem; }
  .heri-local-meta-row { grid-template-columns: auto 1fr; }
  .heri-local-meta-note { grid-column: 1 / -1; text-align: left; padding-left: calc(.68rem + .3em * 4); }
}

/* ============================================================
   RÉALISATIONS — the ongoing portfolio gallery (mosaic index +
   project articles). Additive only: nothing above is affected.
   ============================================================ */
.prj-head { padding: clamp(7rem, 12vw, 10rem) clamp(1.2rem, 4vw, 4rem) clamp(2.5rem, 5vw, 4rem); max-width: 1380px; margin: 0 auto; }
.prj-head .section-title { margin-bottom: .6rem; }
.prj-lead { font-family: var(--font-body); font-weight: 300; color: var(--ink-soft); font-size: clamp(.95rem, 1.4vw, 1.05rem); max-width: 560px; line-height: 1.65; }

.prj-grid {
  display: grid; gap: clamp(10px, 1.4vw, 18px);
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(200px, 24vw, 320px);
  grid-auto-flow: dense;
  padding: 0 clamp(1.2rem, 4vw, 4rem) clamp(4rem, 8vw, 7rem);
  max-width: 1380px; margin: 0 auto;
}
.prj-tile { position: relative; display: block; overflow: hidden; background: #1c1a17; }
.prj-tile--wide  { grid-column: span 2; }
.prj-tile--tall  { grid-row: span 2; }
.prj-tile--large { grid-column: span 2; grid-row: span 2; }
.prj-tile-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1.1s var(--ease), filter .8s var(--ease); }
.prj-tile:hover .prj-tile-img { transform: scale(1.045); }
.prj-tile-veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,16,13,.78) 0%, rgba(18,16,13,.18) 45%, rgba(18,16,13,0) 70%); opacity: .85; transition: opacity .6s var(--ease); }
.prj-tile:hover .prj-tile-veil { opacity: 1; }
.prj-tile-body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(.9rem, 2vw, 1.4rem); color: var(--cream); }
.prj-tile-cat { font-family: var(--font-body); font-weight: 400; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-pale); margin-bottom: .35rem; }
.prj-tile-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.15rem, 2vw, 1.6rem); line-height: 1.15; margin: 0; }
.prj-tile-meta { font-family: var(--font-body); font-weight: 300; font-size: .74rem; letter-spacing: .06em; color: rgba(245,239,227,.75); margin-top: .3rem; }

.prj-empty { text-align: center; color: var(--ink-soft); font-family: var(--font-body); font-weight: 300; padding: 4rem 1.5rem 8rem; }

/* Article */
.prj-hero { position: relative; height: clamp(420px, 62vh, 640px); display: flex; align-items: flex-end; }
.prj-hero-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.prj-hero-veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,16,13,.82) 0%, rgba(18,16,13,.25) 55%, rgba(18,16,13,.35) 100%); }
.prj-hero-inner { position: relative; width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 clamp(1.2rem, 4vw, 3rem) clamp(2.4rem, 5vw, 3.6rem); color: var(--cream); }
.prj-hero-meta { font-family: var(--font-body); font-weight: 400; font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-pale); margin-bottom: .8rem; }
.prj-hero-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 5.4vw, 3.6rem); line-height: 1.06; margin: 0; }

.prj-article { max-width: 1100px; margin: 0 auto; padding: clamp(2.6rem, 5vw, 4.2rem) clamp(1.2rem, 4vw, 3rem) clamp(4rem, 8vw, 6.5rem); }
.prj-intro { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.55; color: var(--ink); max-width: 760px; margin: 0 0 clamp(2.2rem, 4vw, 3.4rem); }
.prj-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 1.8vw, 24px); }
.prj-photo { margin: 0; }
.prj-photo--large { grid-column: 1 / -1; }
.prj-photo-img { width: 100%; aspect-ratio: 4 / 3; background-size: cover; background-position: center; display: block; }
.prj-photo--large .prj-photo-img { aspect-ratio: 16 / 9; }
.prj-photo figcaption { font-family: var(--font-body); font-weight: 300; font-size: .78rem; letter-spacing: .04em; color: var(--ink-soft); padding-top: .55rem; }
.prj-foot { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: center; margin-top: clamp(2.6rem, 5vw, 4rem); padding-top: 1.6rem; border-top: 1px solid rgba(35,33,30,.12); }

@media (max-width: 900px) {
  .prj-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .prj-grid { grid-template-columns: 1fr; grid-auto-rows: clamp(220px, 60vw, 300px); }
  .prj-tile--wide, .prj-tile--large { grid-column: span 1; }
  .prj-tile--tall, .prj-tile--large { grid-row: span 1; }
  .prj-photos { grid-template-columns: 1fr; }
}

/* Gallery category filter (All + expertise categories) */
.prj-filter { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin-top: 1.6rem; }
.prj-filter-btn {
  background: none; border: 0; padding: .35rem 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 400; font-size: .68rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 1px solid transparent; transition: color .3s var(--ease), border-color .3s var(--ease);
}
.prj-filter-btn:hover { color: var(--ink); }
.prj-filter-btn.is-active { color: var(--gold-deep); border-bottom-color: var(--gold); }
.prj-grid { transition: opacity .18s ease; }
.prj-grid.is-filtering { opacity: 0; }
.prj-tile.is-hidden { display: none; }

/* --- Réalisations: per-article presentation options ------------------- */

/* Header variant: dark banner (title on a solid background, no photo) */
.prj-hero--banner { height: auto; min-height: clamp(240px, 34vh, 340px); background: linear-gradient(160deg, #1c1a17, #23211e 55%, #141310); }
.prj-hero--banner .prj-hero-inner { padding-top: clamp(7rem, 11vw, 9rem); }

/* Header variant: editorial (light header, framed cover below) */
.prj-header-editorial { padding: clamp(7rem, 12vw, 10rem) clamp(1.2rem, 4vw, 3rem) 0; max-width: 1100px; margin: 0 auto; }
.prj-header-editorial .prj-hero-meta { color: var(--gold-deep); }
.prj-header-editorial h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 5.4vw, 3.6rem); line-height: 1.06; margin: 0; color: var(--ink); }
.prj-cover-framed { margin: clamp(1.8rem, 3.5vw, 2.8rem) 0 0; }
.prj-cover-framed .prj-photo-img { aspect-ratio: 16 / 8; border: 1px solid rgba(176, 141, 87, .35); padding: clamp(8px, 1.2vw, 14px); background-clip: content-box !important; }

/* The story + pull-quote + fiche projet */
.prj-body { max-width: 760px; }
.prj-body p { font-family: var(--font-body); font-weight: 300; font-size: clamp(.95rem, 1.35vw, 1.05rem); line-height: 1.75; color: var(--ink-soft); margin: 0 0 1.1rem; }
.prj-quote { margin: clamp(2.2rem, 4vw, 3.2rem) 0; padding-left: clamp(1.2rem, 3vw, 2.2rem); border-left: 1px solid var(--gold); max-width: 700px; }
.prj-quote blockquote { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.45; color: var(--ink); margin: 0; }
.prj-quote cite { display: block; font-family: var(--font-body); font-style: normal; font-weight: 400; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); margin-top: .9rem; }
.prj-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.1rem 2rem; margin: clamp(2rem, 4vw, 3rem) 0; padding: clamp(1.4rem, 2.5vw, 2rem) 0; border-top: 1px solid rgba(35,33,30,.12); border-bottom: 1px solid rgba(35,33,30,.12); }
.prj-detail dt { font-family: var(--font-body); font-weight: 400; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 .3rem; }
.prj-detail dd { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; color: var(--ink); margin: 0; }

/* Photo layout variants */
.prj-photos--full { grid-template-columns: 1fr; }
.prj-photos--full .prj-photo-img { aspect-ratio: 16 / 9; }
.prj-photos--columns { display: block; columns: 3 240px; column-gap: clamp(12px, 1.8vw, 24px); }
.prj-photos--columns .prj-photo { break-inside: avoid; margin: 0 0 clamp(12px, 1.8vw, 24px); }
.prj-photos--columns .prj-photo-img { aspect-ratio: auto; }

/* Clickable photos + lightbox (dependency-free). No cursor overrides:
   the site hides the native cursor and shows its own (data-cursor-label). */
.prj-lightbox { position: fixed; inset: 0; z-index: 4000; display: none; align-items: center; justify-content: center; flex-direction: column; background: rgba(18, 16, 13, .94); padding: clamp(1rem, 4vw, 3rem); }
.prj-lightbox.is-open { display: flex; }
.prj-lightbox img { max-width: 92vw; max-height: 80vh; object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.prj-lightbox-caption { color: rgba(245,239,227,.85); font-family: var(--font-body); font-weight: 300; font-size: .85rem; letter-spacing: .05em; margin-top: 1rem; text-align: center; min-height: 1.2em; }
.prj-lightbox-btn { position: absolute; background: none; border: 1px solid rgba(245,239,227,.3); color: var(--cream); width: 44px; height: 44px; border-radius: 50%; font-size: 1.1rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: border-color .3s, color .3s; }
.prj-lightbox-btn:hover { border-color: var(--gold); color: var(--gold-pale); }
.prj-lightbox-close { top: 22px; right: 22px; }
.prj-lightbox-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.prj-lightbox-next { right: 18px; top: 50%; transform: translateY(-50%); }

/* Previous / next article navigation */
.prj-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
.prj-nav a { display: block; padding: clamp(1.1rem, 2.2vw, 1.6rem); border: 1px solid rgba(35,33,30,.12); text-decoration: none; transition: border-color .4s var(--ease), background .4s var(--ease); }
.prj-nav a:hover { border-color: var(--gold); background: rgba(176,141,87,.05); }
.prj-nav .lbl { font-family: var(--font-body); font-weight: 400; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep); display: block; margin-bottom: .35rem; }
.prj-nav .ttl { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.05rem, 1.8vw, 1.35rem); color: var(--ink); }
.prj-nav .prj-nav-next { text-align: right; grid-column: 2; }

@media (max-width: 700px) {
  .prj-photos--columns { columns: 2 160px; }
  .prj-nav { grid-template-columns: 1fr; }
  .prj-nav .prj-nav-next { grid-column: auto; }
}

/* Article photos are real <img> now (lightbox + better semantics) */
img.prj-photo-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #efe9dd; }
.prj-photo--large img.prj-photo-img { aspect-ratio: 16 / 9; }
.prj-photos--full img.prj-photo-img { aspect-ratio: 16 / 9; }
.prj-photos--columns img.prj-photo-img { aspect-ratio: auto; height: auto; }
.prj-cover-framed img.prj-photo-img { aspect-ratio: 16 / 8; }