/* =========================================================
   Metalia - single-file site
   Rebuild: horizontal rows × cycling photo blocks
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; overscroll-behavior: none; scroll-padding-top: 80px; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-weight: 300; color: var(--ink); background: var(--paper);
  line-height: 1.5; overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
/* IMPORTANT: do NOT add overflow-x to html. Per CSS spec, when html
   has non-visible overflow, body's overflow stops propagating to the
   viewport - body becomes its own scroll container, which breaks
   position: sticky for any descendant that ever needs it. The iOS
   sideways-pan flicker is already suppressed by visibility: hidden
   on closed drawers. */
/* mobile safety nets - long words / large headings won't blow out the viewport */
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; word-wrap: break-word; }
@media (max-width: 480px) {
  .display, h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; }
}
:root {
  --paper: #f3efe7; --paper-2: #ece7dc;
  --ink: #131313; --ink-2: #2c2c2c;
  --muted: #6e6a63; --rule: rgba(19,19,19,0.12);
  --brass: #a87f3e; --brass-2: #c9a25e;
  --noir: #0c0c0c;
  /* Motion tokens - single source of truth for easings and durations.
     Use --ease for any non-trivial movement, --ease-soft for opacity
     and incidental hover/focus state changes. */
  --ease: cubic-bezier(.2,.6,.2,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --d-fast: .25s;
  --d-base: .45s;
  --d-slow: .8s;
  --reveal-y: 28px;
}
@media (max-width: 720px) {
  :root {
    /* Snappier on mobile so motion doesn't feel sluggish on small screens */
    --d-fast: .2s;
    --d-base: .35s;
    --d-slow: .55s;
    --reveal-y: 20px;
  }
}
::selection { background: var(--ink); color: var(--paper); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

.display { font-family: 'Cormorant Garamond', 'Times New Roman', serif; font-weight: 300; letter-spacing: -0.005em; }
.eyebrow { font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; font-size: 11px; color: var(--muted); }

/* single-page: every section flows on one continuous scroll */
.page { display: block; }

/* =========================================================
   LANDING GATE - until "Enter the atelier" is clicked, the body
   is scroll-locked and only the hero is visible. Everything
   below the hero is faded out. Once entered, scroll unlocks
   and the rest of the site fades in as it scrolls into view.
   ========================================================= */
body { overflow: hidden; height: 100vh; height: 100dvh; }
body.entered { overflow: auto; height: auto; }

/* Everything below the hero fades in only after "Enter the atelier" */
body > section,
body > main > section:not(#home),
body > footer,
#home > section:not(.hero) {
  transition: opacity .9s ease;
}
body:not(.entered) > section,
body:not(.entered) > main > section:not(#home),
body:not(.entered) > footer,
body:not(.entered) #home > section:not(.hero) {
  opacity: 0;
  pointer-events: none;
}

/* nav */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  background: linear-gradient(to bottom, rgba(243,239,231,0.94), rgba(243,239,231,0));
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}
.nav-logo { display: flex; align-items: center; gap: 12px; }
.nav-logo img { height: 44px; width: auto; display: block; }
.nav-logo .wordmark { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 22px; letter-spacing: 0.32em; text-transform: uppercase; color: inherit; }
/* If you only want the logo, hide the wordmark (keep one or both) */
.nav-links { display: flex; gap: 28px; list-style: none; }
.nav-links a {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: inherit; opacity: 0.82; position: relative; padding: 4px 0;
  transition: opacity .25s ease;
}
.nav-links a:hover, .nav-links a.active { opacity: 1; }
.nav-links a.active::after, .nav-links a:hover::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: currentColor;
}
.nav-cta { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; padding: 10px 18px; border: 1px solid var(--ink); transition: all .25s ease; }
.nav-cta:hover { background: var(--ink); color: var(--paper); }

.menu-toggle { display: none; }
@media (max-width: 900px) {
  .nav { padding: 10px 18px; background: rgba(243,239,231,0.96); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-logo img { height: 36px; }
  .nav-logo .wordmark { display: none; }
  .nav-links, .nav-cta { display: none; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: inherit; }
  .menu-toggle .bars { width: 22px; height: 10px; position: relative; }
  .menu-toggle .bars::before, .menu-toggle .bars::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; }
  .menu-toggle .bars::before { top: 0; }
  .menu-toggle .bars::after { bottom: 0; }
}

.drawer {
  position: fixed; inset: 0; z-index: 100; background: var(--noir);
  color: var(--paper); padding: 80px 24px 24px;
  transform: translateY(-100%);
  transition: transform .55s cubic-bezier(.7,0,.2,1), visibility 0s linear .55s;
  display: flex; flex-direction: column; gap: 22px;
  visibility: hidden;
}
.drawer.open { transform: translateY(0); visibility: visible; transition: transform .55s cubic-bezier(.7,0,.2,1); }
.drawer .close { position: absolute; top: 14px; right: 18px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper); }
.drawer ul { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.drawer ul a { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 36px; color: var(--paper); }

/* =========================================================
   HERO - 3 vertical columns, each scrolling at its own speed.
   Inside each column, photo-blocks cycle their internal photos.
   Block size is large: 1 column = 1/3 viewport wide,
   each block ~4:5 aspect ratio (≈ 41vw tall on desktop).
   ========================================================= */
.hero { position: relative; height: 100vh; height: 100dvh; min-height: 600px; overflow: hidden; background: var(--noir); }
.grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.col { position: relative; overflow: hidden; }
.track { display: flex; flex-direction: column; will-change: transform; }
.col-1 .track { animation: drift 80s linear infinite; }
.col-2 .track { animation: drift 115s linear infinite; }
.col-3 .track { animation: drift 65s linear infinite; }
@keyframes drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .track, .photo, .hero-action-arrow { animation: none !important; }
}

/* Photo block - column tile, holds 3-4 cross-fading .photo children.
   Default 4:5. transform translateZ(0) promotes to its own composited
   layer so column scroll stays smooth. */
.photo-block {
  position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden;
  transform: translate3d(0,0,0);
  contain: layout style paint;
}
.photo-block.r-square   { aspect-ratio: 1 / 1; }   /* shortest */
.photo-block.r-portrait { aspect-ratio: 5 / 6; }
.photo-block.r-tall     { aspect-ratio: 3 / 4; }
.photo-block.r-taller   { aspect-ratio: 2 / 3; }   /* tallest */

/* Photo-blocks marked .mobile-only live inside col-1 and col-2 so
   the col-3 photos (groups 9–12) still get seen on mobile, where
   col-3 itself is hidden. Default desktop hides them; the mobile
   media query below brings them back. */
.photo-block.mobile-only { display: none; }
@media (max-width: 720px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .col-3 { display: none; }
  .photo-block.mobile-only { display: block; }
}
.photo {
  position: absolute; inset: 0;
  opacity: 0;
  animation: photoCycle 18s ease-in-out infinite;
  will-change: opacity;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--paper-2);
}
/* 18s cycle. 33%-delay between photos means photo N+1 starts when photo N is at 33% of its cycle.
   To eliminate the dark gap, we hold each photo at full opacity past 33% (so it's still visible
   while the next photo fades in on top), and only fade it out AFTER the next photo has fully
   taken over. The fade-out is hidden under the next photo - we never see it as black. */
@keyframes photoCycle {
  0%    { opacity: 0; }
  11%   { opacity: 1; }   /* 2s fade-in */
  38%   { opacity: 1; }   /* hold past 33%, into the next photo's fade-in window */
  44%   { opacity: 0; }   /* fade out - happens UNDER the new photo, invisible */
  100%  { opacity: 0; }
}
.photo-block .photo:nth-child(1) { animation-delay: 0s; }
.photo-block .photo:nth-child(2) { animation-delay: 6s; }
.photo-block .photo:nth-child(3) { animation-delay: 12s; }
.photo-block .photo:nth-child(4) { animation-delay: 18s; }
/* 4-photo blocks (legacy) - 24s cycle, 6s per photo */
.photo-block.has-4 .photo { animation-duration: 24s; }
.photo-block.has-4 .photo:nth-child(1) { animation-delay: 0s; }
.photo-block.has-4 .photo:nth-child(2) { animation-delay: 6s; }
.photo-block.has-4 .photo:nth-child(3) { animation-delay: 12s; }
.photo-block.has-4 .photo:nth-child(4) { animation-delay: 18s; }

/* film-grain overlay on every metal surface */
/* Noise overlay - kept only on small swatches (cheap to paint).
   Removed from .photo (hero has 30+ tiles → mix-blend cost too high). */
.swatch::after, .swatch-lg::after, .pj-img > div::after, .editorial figure .img::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .35; mix-blend-mode: overlay;
}

/* metal finishes */
.m-blackened { background: linear-gradient(125deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 35%, rgba(0,0,0,0.35) 100%), linear-gradient(180deg, #1c1c1c 0%, #2a2a2a 50%, #121212 100%); }
.m-brass     { background: linear-gradient(115deg, rgba(255,235,180,0.35) 0%, rgba(255,235,180,0) 35%, rgba(0,0,0,0.25) 100%), linear-gradient(180deg, #8a6320 0%, #c39a4a 50%, #6a4a18 100%); }
.m-copper    { background: linear-gradient(125deg, rgba(255,200,160,0.35) 0%, rgba(255,200,160,0) 40%, rgba(0,0,0,0.3) 100%), linear-gradient(180deg, #6e3318 0%, #b25c2e 55%, #4d220f 100%); }
.m-aluminum  { background: linear-gradient(120deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,0.18) 100%), linear-gradient(180deg, #b9b9b9 0%, #dcdcdc 50%, #8a8a8a 100%); }
.m-zinc      { background: linear-gradient(115deg, rgba(180,200,200,0.3) 0%, rgba(180,200,200,0) 40%, rgba(0,0,0,0.3) 100%), linear-gradient(180deg, #4f5e5b 0%, #788784 50%, #3a4744 100%); }
.m-bronze    { background: linear-gradient(120deg, rgba(255,210,150,0.25) 0%, rgba(255,210,150,0) 40%, rgba(0,0,0,0.35) 100%), linear-gradient(180deg, #4a3219 0%, #7a5a35 55%, #2e1f0e 100%); }
.m-corten    { background: linear-gradient(130deg, rgba(255,180,120,0.2) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.4) 100%), linear-gradient(180deg, #5a2a14 0%, #8a4a26 50%, #3e1c0c 100%); }
.m-stainless { background: linear-gradient(120deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 35%, rgba(0,0,0,0.18) 100%), linear-gradient(180deg, #c9cdd1 0%, #9fa5ab 50%, #d8dde2 100%); }
.m-graphite  { background: linear-gradient(125deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 35%, rgba(0,0,0,0.45) 100%), linear-gradient(180deg, #2e3236 0%, #45494e 50%, #1f2226 100%); }
.m-antique   { background: linear-gradient(125deg, rgba(255,225,175,0.18) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.4) 100%), linear-gradient(180deg, #3a2d12 0%, #6e5526 55%, #251c0a 100%); }
.m-pewter    { background: linear-gradient(120deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,0.3) 100%), linear-gradient(180deg, #6f7378 0%, #969a9f 50%, #4d5054 100%); }
.m-rose      { background: linear-gradient(120deg, rgba(255,210,200,0.3) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.3) 100%), linear-gradient(180deg, #7a3c2e 0%, #b06a55 50%, #51261c 100%); }
.m-snow      { background: linear-gradient(120deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,0.06) 100%), linear-gradient(180deg, #ece9e3 0%, #f5f3ee 50%, #d8d4cc 100%); }
.m-ink       { background: linear-gradient(125deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 35%, rgba(0,0,0,0.55) 100%), linear-gradient(180deg, #0a0a0a 0%, #1c1c1c 50%, #050505 100%); }

/* texture overlays */
.tex-brushed::before { content:''; position:absolute; inset:0; background: repeating-linear-gradient(180deg, rgba(255,255,255,0.04) 0 1px, rgba(0,0,0,0.05) 1px 2px); mix-blend-mode: overlay; opacity: .9; }
.tex-ribbed::before  { content:''; position:absolute; inset:0; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.10) 0 4px, rgba(0,0,0,0.18) 4px 5px, rgba(0,0,0,0) 5px 22px); mix-blend-mode: overlay; }
.tex-perf::before    { content:''; position:absolute; inset:0; background-image: radial-gradient(rgba(0,0,0,0.55) 22%, transparent 24%); background-size: 18px 18px; mix-blend-mode: multiply; opacity: .55; }
.tex-hammered::before{ content:''; position:absolute; inset:0; background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.12) 0 8px, transparent 9px), radial-gradient(circle at 70% 60%, rgba(0,0,0,0.18) 0 7px, transparent 8px), radial-gradient(circle at 40% 80%, rgba(255,255,255,0.08) 0 6px, transparent 7px), radial-gradient(circle at 85% 20%, rgba(0,0,0,0.20) 0 9px, transparent 10px); background-size: 80px 80px; mix-blend-mode: overlay; }
.tex-diamond::before { content:''; position:absolute; inset:0; background: repeating-linear-gradient( 45deg, rgba(255,255,255,0.10) 0 2px, transparent 2px 18px), repeating-linear-gradient(-45deg, rgba(0,0,0,0.18) 0 2px, transparent 2px 18px); mix-blend-mode: overlay; }
.tex-vert::before    { content:''; position:absolute; inset:0; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 1px, rgba(0,0,0,0.18) 1px 2px, transparent 2px 7px); mix-blend-mode: overlay; }
.tex-laser::before   { content:''; position:absolute; inset:0; background-image: radial-gradient(rgba(0,0,0,0.5) 18%, transparent 20%), radial-gradient(rgba(0,0,0,0.5) 18%, transparent 20%); background-size: 28px 28px; background-position: 0 0, 14px 14px; mix-blend-mode: multiply; opacity: .45; }

/* Hero veil - softens the bottom for the CTA, also dims the very top */
.hero-veil {
  position: absolute; inset: 0; pointer-events: none;
  /* Lightened the bottom band - the .hero-cta::before radial vignette
     handles legibility behind the logo specifically, so the broader
     veil no longer needs to black out the bottom 20% of the hero.
     Lets the bottom row of drifting photos stay visible. */
  background:
    linear-gradient(180deg,
      rgba(12,12,12,0.45) 0%,
      rgba(12,12,12,0) 14%,
      rgba(12,12,12,0) 65%,
      rgba(12,12,12,0.22) 85%,
      rgba(12,12,12,0.38) 100%);
}

/* Centered CTA at the bottom of the hero - logo + "Enter the atelier"
   Minimal: no button chrome, no background. Just typography +
   a subtle arrow that bobs, and on hover the letter-spacing widens. */
.hero-cta {
  position: absolute; left: 0; right: 0; bottom: clamp(36px, 6vh, 80px);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; color: var(--paper);
  z-index: 5;
  /* Let touch/scroll pass through the logo + vignette area so users can
     drag the photo columns underneath. The link below re-enables pointer
     events on itself. */
  pointer-events: none;
}
.hero-cta .hero-action { pointer-events: auto; }
/* Subtle radial vignette behind the logo so it always reads against
   any drifting photo, regardless of background colour. */
.hero-cta::before {
  content: ''; position: absolute;
  left: 50%; top: 0;
  width: clamp(420px, 56vw, 720px); height: clamp(280px, 32vh, 420px);
  transform: translate(-50%, -22%);
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.35) 35%,
    rgba(0,0,0,0) 70%);
  pointer-events: none; z-index: -1;
  filter: blur(6px);
}
.hero-logo {
  height: clamp(72px, 8.5vh, 116px); width: auto;
  /* White mark with a refined two-stop shadow: a tight contact shadow
     for definition + a softer ambient one for atmospheric depth. The
     hero-cta radial vignette already darkens the photo behind, so we
     don't need a heavy outer glow on the mark itself - keeps it
     reading as classy editorial type, not a stage spotlight. */
  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,0.35))
    drop-shadow(0 10px 28px rgba(0,0,0,0.30));
}
.hero-action {
  display: inline-flex; flex-direction: column; align-items: center; gap: 14px;
  background: transparent; border: 0; padding: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(243,239,231,0.85);
  transition: color .4s ease, letter-spacing .5s cubic-bezier(.2,.6,.2,1);
}
.hero-action:hover {
  color: var(--paper);
  letter-spacing: 0.44em;
}
.hero-action-text { display: block; }
.hero-action-arrow {
  display: inline-block;
  font-size: 16px;
  letter-spacing: 0;
  opacity: 0.7;
  animation: cta-bob 2.4s ease-in-out infinite;
}
@keyframes cta-bob {
  0%,100% { transform: translateY(0); opacity: 0.55; }
  50%     { transform: translateY(6px); opacity: 0.85; }
}
@media (max-width: 720px) {
  .hero-cta { bottom: calc(40px + env(safe-area-inset-bottom, 0px)); gap: 14px; }
  .hero-logo { height: 44px; }
  .hero-action { font-size: 10px; letter-spacing: 0.32em; padding: 10px 18px; }
  .hero-action-arrow { font-size: 18px; }
  .hero-cta::before { width: 280px; height: 180px; }
}

/* ---------- page header (interior pages) ---------- */
.page-head { padding: 100px 28px 50px; }
.page-head .container { max-width: 1240px; margin: 0 auto; }
.page-head .crumb { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.page-head h1 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(48px, 7.2vw, 108px); line-height: 1.02; letter-spacing: -0.012em; max-width: 18ch; }
.page-head h1 em { font-style: italic; color: var(--brass); }
.page-head .lede { margin-top: 28px; max-width: 620px; color: var(--muted); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.7; }
@media (max-width: 720px) { .page-head { padding: 80px 18px 40px; } }

/* ---------- generic sections ---------- */
section { padding: 80px 28px; }
#site-main { padding: 0; }
#home { padding: 0; }
.container { max-width: 1240px; margin: 0 auto; }
.manifesto { text-align: center; }
.manifesto .eyebrow { display: inline-block; margin-bottom: 28px; }
.manifesto h2 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(40px, 6.2vw, 86px); line-height: 1.04; letter-spacing: -0.012em; }
.manifesto h2 em { font-style: italic; color: var(--brass); }
.manifesto p { max-width: 640px; margin: 36px auto 0; color: var(--muted); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.7; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 80px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.stat { padding: 36px 18px; border-right: 1px solid var(--rule); text-align: left; }
.stat:last-child { border-right: 0; }
.stat .num { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(36px, 4.4vw, 56px); line-height: 1; }
.stat .lbl { margin-top: 10px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 720px) {
  section { padding: 56px 18px; }
  #site-main, #home { padding: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { border-bottom: 1px solid var(--rule); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-last-child(-n+2) { border-bottom: 0; }
}

/* (capabilities/cap CSS removed - section deleted) */
@media (max-width: 900px) {
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .cap { border-bottom: 1px solid var(--rule); }
  .cap:nth-child(2) { border-right: 0; }
  .cap:nth-last-child(-n+2) { border-bottom: 0; }
  .cap-head { flex-direction: column; align-items: start; }
}
@media (max-width: 520px) {
  .cap-grid { grid-template-columns: 1fr; }
  .cap { border-right: 0; border-bottom: 1px solid var(--rule); }
  .cap:last-child { border-bottom: 0; }
}

/* projects grid */
.projects-head { display:flex; align-items:end; justify-content:space-between; gap: 32px; margin-bottom: 56px; }
.projects-head h3 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(28px, 3.2vw, 44px); }
.projects-head a { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.pj-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.pj { position: relative; overflow: hidden; }
.pj-img { aspect-ratio: 4 / 5; position: relative; overflow: hidden; }
.pj.wide .pj-img { aspect-ratio: 16 / 10; }
.pj.tall .pj-img { aspect-ratio: 3 / 4; }
.pj-img > div { position: absolute; inset: 0; transform: scale(1.02); transition: transform 1.2s cubic-bezier(.2,.6,.2,1); }
.pj:hover .pj-img > div { transform: scale(1.06); }
.pj-meta { display:flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 14px; }
.pj-meta h5 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 22px; }
.pj-meta span { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.pj.span-7 { grid-column: span 7; } .pj.span-5 { grid-column: span 5; }
.pj.span-6 { grid-column: span 6; } .pj.span-4 { grid-column: span 4; }
@media (max-width: 720px) {
  .pj-grid { grid-template-columns: 1fr; gap: 18px; }
  .pj.span-7, .pj.span-5, .pj.span-6, .pj.span-4 { grid-column: span 1; }
  .projects-head { flex-direction: column; align-items: start; }
}

/* products */
.prod-grid {
  padding: 56px 28px 30px; max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 56px 36px;
}
@media (max-width: 980px) { .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 28px; } }
@media (max-width: 600px) { .prod-grid { grid-template-columns: 1fr; padding: 40px 18px 40px; gap: 36px; } }
.prod {
  display: flex; flex-direction: column; gap: 18px;
  text-decoration: none; color: inherit;
  transition: transform .35s ease;
}
.prod:hover { transform: translateY(-4px); }
.prod-img {
  aspect-ratio: 4 / 5;
  position: relative; overflow: hidden;
  background: var(--paper-2);
}
.prod-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s cubic-bezier(.2,.6,.2,1), filter .35s ease;
  filter: saturate(.95);
}
.prod:hover .prod-img img { transform: scale(1.04); filter: saturate(1); }
.prod-meta { display: flex; flex-direction: column; gap: 8px; }
.prod-meta .num {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
}
.prod-meta h4 {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: clamp(24px, 2.4vw, 30px); line-height: 1.1;
  letter-spacing: -0.005em;
}
.prod-meta p {
  font-size: 14px; color: var(--muted); line-height: 1.7;
  max-width: 42ch; margin-top: 2px;
}
.prod-meta .more {
  margin-top: 8px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink); position: relative;
  display: inline-flex; align-items: center; width: max-content;
}
.prod-meta .more::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1px; background: currentColor;
  transform-origin: left; transform: scaleX(0.4);
  transition: transform .4s cubic-bezier(.2,.6,.2,1);
}
.prod:hover .prod-meta .more::after { transform: scaleX(1); }
.prod:hover .prod-meta .more { color: var(--brass); }

.prod-foot {
  padding: 0 28px 55px; max-width: 1320px; margin: 0 auto;
  border-top: 1px solid var(--rule); padding-top: 18px;
}
.prod-foot p {
  font-size: 14px; color: var(--muted); line-height: 1.75;
  max-width: 60ch;
}
.prod-foot p em { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--ink-2); }
.prod-foot a { color: var(--ink); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.prod-foot a:hover { color: var(--brass); }
@media (max-width: 600px) { .prod-foot { padding: 14px 18px 40px; } }

/* editorial (studio) */
.editorial { padding: 60px 28px 120px; }
.editorial .container { max-width: 980px; margin: 0 auto; }
.editorial p { font-size: 17px; line-height: 1.85; color: var(--ink-2); margin-bottom: 22px; max-width: 64ch; }
.editorial p.large { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.45; color: var(--ink); margin-bottom: 36px; }
.editorial h3 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(28px, 3.2vw, 42px); margin: 56px 0 18px; line-height: 1.1; }
.editorial figure { margin: 56px 0; }
.editorial figure .img { aspect-ratio: 16/9; position: relative; overflow: hidden; }
.editorial figcaption { margin-top: 12px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; padding: 80px 28px; max-width: 1240px; margin: 0 auto; border-top: 1px solid var(--rule); }
.split h3 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; }
.split p { color: var(--muted); font-size: 15px; line-height: 1.75; }
@media (max-width: 720px) { .split { grid-template-columns: 1fr; gap: 24px; padding: 60px 18px; } }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; padding: 60px 28px 120px; max-width: 1240px; margin: 0 auto; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; gap: 56px; padding: 40px 18px 80px; } }
/* (studios/studio-card CSS removed - replaced by .flow) */

/* Project journey - minimal step chart in the contact sidebar */
.flow { display: flex; flex-direction: column; }
.flow .crumb { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.flow h3 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; letter-spacing: -0.005em; max-width: 18ch; margin-bottom: 28px; }
.flow h3 em { font-style: italic; color: var(--brass); }
.flow .steps { position: relative; padding-left: 22px; }
.flow .steps::before {
  content: ''; position: absolute; left: 4px; top: 14px; bottom: 14px;
  width: 1px; background: var(--rule);
}
.flow .step { position: relative; padding: 14px 0; }
.flow .step + .step { border-top: 1px solid var(--rule); }
.flow .step::before {
  content: ''; position: absolute; left: -22px; top: 22px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper); border: 1px solid rgba(168,127,62,0.55);
  transition: background .35s ease, border-color .35s ease, transform .35s ease;
}
.flow .step:hover::before { background: var(--brass); border-color: var(--brass); transform: scale(1.15); }
.flow .step .ttl { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 17px; color: var(--ink); line-height: 1.25; }
.flow .step .ttl em { font-style: italic; color: var(--brass); }
.flow .step .sub { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-top: 3px; letter-spacing: 0; }
.flow .step .num { display: inline-block; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400; font-size: 13px; color: var(--brass); margin-right: 8px; letter-spacing: 0.02em; }
@media (max-width: 720px) { .flow h3 { margin-bottom: 22px; } .flow .step { padding: 12px 0; } }

.form { display: flex; flex-direction: column; gap: 22px; }
.form .row-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 540px) { .form .row-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--rule); padding: 10px 0; outline: none; font-size: 15px; color: var(--ink); transition: border-color .25s ease; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); }
.field textarea { resize: vertical; min-height: 100px; }
.form-error { min-height: 18px; color: #9f3a2d; font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.5; }
.btn { align-self: start; margin-top: 10px; padding: 14px 28px; background: var(--ink); color: var(--paper); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; transition: background .25s ease; }
.btn:hover { background: var(--brass); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }

.footer { background: var(--noir); color: var(--paper); }
.footer-inner { padding: 100px 28px 40px; max-width: 1240px; margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 64px; border-bottom: 1px solid rgba(243,239,231,0.16); }
.footer .logo-row { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.footer .logo-row img { height: 46px; filter: brightness(1.05); }
.footer-top p { color: rgba(243,239,231,0.66); font-size: 14px; line-height: 1.7; max-width: 38ch; }
.footer h6 { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(243,239,231,0.55); margin-bottom: 14px; font-weight: 500; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer ul a { color: rgba(243,239,231,0.86); font-size: 14px; }
.footer ul a:hover { color: var(--brass-2); }
.footer-bottom { padding-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; color: rgba(243,239,231,0.5); font-size: 12px; letter-spacing: .12em; }
@media (max-width: 720px) { .footer-inner { padding: 70px 18px 28px; } .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; } }

/* Reveal-on-scroll: starts hidden, becomes visible when the JS adds .in.
   Works without GSAP (pure CSS transition); GSAP can still drive the
   same elements if loaded. The .reveal-ready class is set by JS once it
   knows it can manage reveals - this avoids a flash of invisible content
   for users whose JS is slow or disabled. */
[data-reveal] { opacity: 1; transform: none; transition: opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease); }
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(var(--reveal-y)); }
.reveal-ready [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* While a topbar-link smooth scroll is in progress, drop the heavy
   per-frame effects (backdrop-filter on the fixed topbar, reveal
   transitions) so the scroll itself stays buttery. The styles return
   the moment the scroll settles. */
body.is-nav-scrolling .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; }
body.is-nav-scrolling [data-reveal] { transition: none !important; }

/* =========================================================
   TOP BAR - appears only after "Enter the atelier"
   ========================================================= */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; gap: 24px;
  background: var(--paper);
  transform: translateY(-100%);
  transition: transform 0.55s cubic-bezier(.2,.6,.2,1);
  pointer-events: none;
  will-change: transform;
}
body.entered .topbar { transform: translateY(0); pointer-events: auto; }
.topbar .tb-logo img { height: 56px; width: auto; display: block; filter: none; }
.topbar .tb-links { display: flex; gap: 30px; list-style: none; }
.topbar .tb-links a {
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-2); padding: 6px 0; position: relative; opacity: 0.78;
  transition: opacity .25s ease;
}
.topbar .tb-links a:hover { opacity: 1; }
.topbar .tb-links a.active { opacity: 1; color: var(--ink); }
.topbar .tb-links a.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1px; background: currentColor;
}
.topbar .tb-cta {
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  padding: 11px 20px; border: 1px solid var(--ink);
  color: var(--ink); transition: all .3s ease; white-space: nowrap;
}
.topbar .tb-cta:hover { background: var(--ink); color: var(--paper); }
.topbar .tb-menu { display: none; }

@media (max-width: 900px) {
  .topbar { padding: 10px 16px; background: var(--paper); }
  .topbar .tb-logo img { height: 44px; filter: none; }
  .topbar .tb-links { display: none; }
  .topbar .tb-cta { font-size: 10px; padding: 9px 14px; letter-spacing: 0.18em; }
  .topbar .tb-menu {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--ink); cursor: pointer; padding: 8px 0;
  }
  .topbar .tb-menu .bars { width: 20px; height: 9px; position: relative; }
  .topbar .tb-menu .bars::before, .topbar .tb-menu .bars::after {
    content: ''; position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
  }
  .topbar .tb-menu .bars::before { top: 0; }
  .topbar .tb-menu .bars::after { bottom: 0; }
}

/* mobile drawer */
.tb-drawer {
  position: fixed; inset: 0; z-index: 70;
  background: var(--paper);
  display: flex; flex-direction: column; padding: 80px 28px 32px; gap: 4px;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(.2,.6,.2,1), visibility 0s linear 0.5s;
  visibility: hidden;
}
.tb-drawer.open { transform: translateX(0); visibility: visible; transition: transform 0.5s cubic-bezier(.2,.6,.2,1); }
.tb-drawer .close {
  position: absolute; top: 18px; right: 18px;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink); cursor: pointer; padding: 6px;
}
.tb-drawer a {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(28px, 6vw, 42px); padding: 14px 0;
  border-bottom: 1px solid var(--rule); color: var(--ink);
}
.tb-drawer a.tb-social {
  margin-top: auto; margin-bottom: 8px;
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted); border: 0;
  padding: 22px 0 0; display: inline-flex; align-items: center; gap: 10px;
  transition: color .25s ease;
}
.tb-drawer a.tb-social:hover { color: var(--ink); }
.tb-drawer a.tb-social svg { width: 22px; height: 22px; display: block; }

/* =========================================================
   POST-CTA SECTIONS
   ========================================================= */

/* CREDENTIALS - 3 large numbers in a strip */
.creds { padding: 70px 28px; }
.creds .container { max-width: 1240px; margin: 0 auto; }
.creds .crumb { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 36px; text-align: center; }
.creds .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.creds .item { padding: 56px 24px; text-align: center; border-right: 1px solid var(--rule); }
.creds .item:last-child { border-right: 0; }
.creds .num { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(56px, 8vw, 110px); line-height: 0.92; letter-spacing: -0.02em; }
.creds .num em { font-style: italic; color: var(--brass); }
.creds .lbl { margin-top: 18px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 720px) {
  .creds { padding: 50px 14px; }
  .creds .crumb { margin-bottom: 24px; }
  .creds .grid3 { grid-template-columns: repeat(3, 1fr); }
  .creds .item { padding: 28px 8px; border-right: 1px solid var(--rule); }
  .creds .item:last-child { border-right: 0; }
  .creds .num { font-size: clamp(32px, 9.5vw, 48px); line-height: 0.95; }
  .creds .lbl { margin-top: 10px; font-size: 9px; letter-spacing: 0.16em; }
}

/* DESIGN REVEAL - side-by-side: head on left, reveal stage on right */
.design-reveal { background: var(--paper-2); padding: 80px 28px; }
.design-reveal .container { max-width: 1280px; margin: 0 auto; }
.design-reveal h2 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.06; letter-spacing: -0.012em; max-width: 14ch; }
.design-reveal h2 em { font-style: italic; color: var(--brass); }
.design-reveal .sticky-head p { color: var(--muted); font-size: 14px; line-height: 1.65; max-width: 44ch; margin-top: 14px; }
/* Slider reveal - the visitor drags the handle from sketch to finished metal. */
.design-reveal .reveal-track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.design-reveal .sticky-head { align-self: start; }
.design-reveal .stage-col { width: 100%; align-self: start; }
.design-reveal .stage {
  position: relative;
  width: 100%;
  height: clamp(480px, 70vh, 680px);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--paper);
  --split-pos: 50%;
  will-change: contents;
}
.design-reveal .layer { position: absolute; inset: 0; }
.design-reveal .facade-img,
.design-reveal .sketch-img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block;
}
.design-reveal .sketch-img {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--split-pos)) 0 0);
}
.design-reveal .stage.is-demoing .sketch-img { transition: clip-path .7s var(--ease-soft); }
.design-reveal .facade-img { z-index: 1; }
.design-reveal .stage .lbl {
  position: absolute; bottom: 18px;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  font-family: 'Inter', sans-serif; font-weight: 500;
  z-index: 4;
  color: var(--ink);
  pointer-events: none;
}
.design-reveal .stage .lbl.before { left: 22px; }
.design-reveal .stage .lbl.after  { right: 22px; color: var(--paper); }
.design-reveal .split-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split-pos);
  z-index: 5;
  width: 2px;
  background: rgba(243,239,231,0.96);
  box-shadow: 0 0 0 1px rgba(19,19,19,0.22), 0 10px 30px rgba(19,19,19,0.28);
  transform: translateX(-1px);
  pointer-events: none;
}
.design-reveal .stage.is-demoing .split-line { transition: left .7s var(--ease-soft); }
.design-reveal .split-handle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  background: var(--paper);
  border: 1px solid var(--ink);
  color: var(--ink);
  box-shadow: 0 10px 30px rgba(19,19,19,0.26);
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  line-height: 1;
}
.design-reveal .stage.is-demoing .split-handle { animation: split-hint-pulse 1.05s ease-in-out 2; }
@keyframes split-hint-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.08); }
}
.design-reveal .split-range {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: none;
}
.design-reveal .stage:focus-within .split-handle { outline: 2px solid var(--brass); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .design-reveal .stage.is-demoing .sketch-img,
  .design-reveal .stage.is-demoing .split-line { transition: none; }
  .design-reveal .stage.is-demoing .split-handle { animation: none; }
}

/* Caption now sits BELOW the photo (inside .stage-col, after .stage). */
.design-reveal .stage-caption {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 18px;
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
}
.design-reveal .stage-caption .sc-arrow {
  display: inline-block; color: var(--brass); font-size: 14px; line-height: 1;
  animation: dr-arrow-down 1.8s ease-in-out infinite;
}
.design-reveal .stage-caption .sc-arrow::before { content: '↓'; }
@keyframes dr-arrow-down {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(4px); opacity: 1; }
}
/* Design-reveal - 4-step journey list (definition-list style) */
.dr-steps {
  list-style: none; padding: 0; margin: 20px 0 0;
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid var(--rule);
}
.dr-steps li {
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: 14px; row-gap: 2px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.dr-steps li .n {
  grid-column: 1; grid-row: 1 / span 2;
  align-self: start; padding-top: 3px;
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400;
  font-size: 15px; color: var(--brass); line-height: 1;
  letter-spacing: 0.02em;
}
.dr-steps li .t {
  grid-column: 2; grid-row: 1;
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: 17px; color: var(--ink); line-height: 1.2;
  letter-spacing: 0.005em;
}
.dr-steps li .d {
  grid-column: 2; grid-row: 2;
  font-size: 12.5px; color: var(--muted); line-height: 1.5;
  letter-spacing: 0;
}

/* Design-reveal - soft CTA */
.dr-cta { margin-top: 28px; max-width: 42ch; }
.dr-cta .invite {
  font-size: 14px; line-height: 1.7; color: var(--ink-2);
  margin: 0 0 18px; max-width: 40ch;
}
.dr-cta .invite em { font-style: italic; color: var(--brass); }
.dr-btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 22px;
  border: 1px solid var(--ink); background: transparent;
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink);
  transition: background .35s ease, color .35s ease, border-color .35s ease, padding .35s cubic-bezier(.2,.6,.2,1);
  position: relative; overflow: hidden;
}
.dr-btn span { display: inline-block; transition: transform .35s cubic-bezier(.2,.6,.2,1); }
.dr-btn:hover {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  padding-right: 28px;
}
.dr-btn:hover span { transform: translateX(4px); }
@media (max-width: 820px) {
  .design-reveal { padding: 50px 16px; }
  .design-reveal .reveal-track {
    grid-template-columns: 1fr;
    gap: 14px;
    align-content: start;
  }
  /* Stage column shown FIRST on mobile; head/CTA below - the
     transformation IS the message, so it leads. */
  .design-reveal .sticky-head { position: relative; top: auto; order: 2; }
  .design-reveal .stage-col {
    position: relative; top: auto; order: 1;
  }
  .design-reveal .stage {
    width: 100%; height: auto;
    aspect-ratio: 4 / 5;
    max-height: 70vh;
  }

  /* Pill-style labels - more legible on mobile. */
  .design-reveal .stage .lbl {
    display: none;
  }
  .design-reveal .split-handle {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  /* Caption sits directly below the photo on mobile too. The arrow
     points UP toward the photo (stage is above the caption). */
  .design-reveal .stage-caption { margin-top: 12px; }
  .design-reveal .stage-caption .sc-arrow { animation: dr-arrow-up 1.8s ease-in-out infinite; }
}
@keyframes dr-arrow-up {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(-4px); opacity: 1; }
}
@media (max-width: 820px) {
  /* Caption is below the photo on mobile too - arrow points UP at it */
  .design-reveal .stage-caption .sc-arrow::before { content: '↑'; }
}

/* SHADES OF METALIA - interactive finishes picker */
.shades { background: var(--paper-2); padding: 90px 28px 70px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); transition: padding .35s ease; }
.shades.has-active { padding-bottom: 100px; }
.shades .container { max-width: 1280px; margin: 0 auto; }
.shades .head { text-align: center; margin-bottom: 56px; }
.shades .head .crumb { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.shades .head h2 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(40px, 5.5vw, 76px); line-height: 1.04; letter-spacing: -0.012em; max-width: 18ch; margin: 0 auto 20px; }
.shades .head h2 em { font-style: italic; color: var(--brass); }
.shades .head .lede { color: var(--muted); font-size: clamp(14px, 1.3vw, 16px); line-height: 1.7; max-width: 56ch; margin: 0 auto; }
.shades-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 24px; transition: margin-bottom .35s ease; }
.shades.has-active .shades-tabs { margin-bottom: 48px; }
.shades-tabs button { display: inline-flex; align-items: center; gap: 10px; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; padding: 13px 22px; border: 1px solid var(--rule); background: transparent; color: var(--ink-2); cursor: pointer; transition: all .35s cubic-bezier(.2,.6,.2,1); }
.shades-tabs button:hover { border-color: var(--ink); color: var(--ink); }
.shades-tabs button.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.shades-tabs button .ct { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400; font-size: 13px; letter-spacing: 0; text-transform: none; opacity: 0.65; }
.shades-tabs button.active .ct { color: var(--brass-2); opacity: 1; }
.shades-stage { position: relative; max-width: 1100px; margin: 0 auto; }
.shades-hint { text-align: center; padding: 0 28px 26px; color: var(--muted); font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: clamp(18px, 1.9vw, 22px); line-height: 1.4; letter-spacing: 0.01em; transition: opacity .35s ease; }
.shades-hint .arrow { display: inline-block; color: var(--brass); margin-left: 8px; transform: translateY(2px); animation: shadeHintArrow 1.6s ease-in-out infinite; }
@keyframes shadeHintArrow { 0%, 100% { transform: translateY(2px); opacity: 0.55; } 50% { transform: translateY(8px); opacity: 1; } }
.shades.has-active .shades-hint { display: none; }
.shades-panel { display: none; grid-template-columns: repeat(4, 1fr); gap: 22px 18px; }
.shades-panel.active { display: grid; animation: shadeFadeIn .5s cubic-bezier(.2,.6,.2,1) both; }
.shades-panel.active.leaving { animation: shadeFadeOut .22s ease both; pointer-events: none; }
@keyframes shadeFadeIn  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shadeFadeOut { from { opacity: 1; transform: translateY(0); }  to { opacity: 0; transform: translateY(-4px); } }
.shades-panel .sw { position: relative; cursor: default; }
.shades-panel .sw .img {
  aspect-ratio: 16/10;
  overflow: hidden; background: var(--paper); position: relative;
  transition: transform .5s cubic-bezier(.2,.6,.2,1), box-shadow .4s ease;
}
.shades-panel .sw .img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2,.6,.2,1), filter .35s ease; }
.shades-panel .sw .img::after {
  content: ''; position: absolute; inset: 0;
  border: 1px solid rgba(19,19,19,0.08);
  pointer-events: none; transition: border-color .35s ease;
}
.shades-panel .sw .nm {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 12px 16px;
  background: linear-gradient(180deg, rgba(12,12,12,0) 0%, rgba(12,12,12,0.72) 60%, rgba(12,12,12,0.86) 100%);
  color: var(--paper);
  font-family: 'Cormorant Garamond', serif; font-weight: 400; font-style: italic;
  font-size: clamp(15px, 1.4vw, 18px); line-height: 1.2; letter-spacing: 0.01em;
  text-align: center;
  opacity: 0; transform: translateY(10px);
  transition: opacity .4s cubic-bezier(.2,.6,.2,1), transform .4s cubic-bezier(.2,.6,.2,1);
  pointer-events: none;
}
.shades-panel .sw:hover .img { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(0,0,0,0.12); }
.shades-panel .sw:hover .img img { transform: scale(1.06); filter: saturate(1.05); }
.shades-panel .sw:hover .img::after { border-color: rgba(168,127,62,0.6); }
.shades-panel .sw:hover .nm { opacity: 1; transform: translateY(0); }
.shades-foot { margin-top: 28px; text-align: center; color: var(--muted); font-size: 14px; letter-spacing: 0.005em; transition: margin-top .35s ease; }
.shades.has-active .shades-foot { margin-top: 48px; }
.shades-foot a { color: var(--ink); border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: color .25s ease, border-color .25s ease; }
.shades-foot a:hover { color: var(--brass); border-color: var(--brass); }
@media (max-width: 900px) { .shades-panel { grid-template-columns: repeat(3, 1fr); gap: 18px 14px; } }
@media (max-width: 600px) { .shades { padding: 70px 18px; } .shades-panel { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; } .shades-tabs { gap: 6px; } .shades-tabs button { padding: 10px 14px; font-size: 10px; letter-spacing: 0.18em; gap: 7px; } .shades-tabs button .ct { font-size: 12px; } .shades-panel .sw .nm { font-size: 14px; } }

/* MANUFACTURING - dark, full-bleed */
.manufacturing { background: var(--noir); color: var(--paper); padding: 140px 28px; }
.manufacturing .container { max-width: 1240px; margin: 0 auto; }
.manufacturing .crumb { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(243,239,231,0.55); margin-bottom: 28px; }
.manufacturing h2 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(40px, 6vw, 86px); line-height: 1.04; letter-spacing: -0.012em; max-width: 18ch; margin-bottom: 36px; }
.manufacturing h2 em { font-style: italic; color: var(--brass-2); }
.manufacturing .lede { color: rgba(243,239,231,0.72); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.7; max-width: 60ch; margin-bottom: 64px; }
.manufacturing .vendors-cmp {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 48px; align-items: center;
  margin: 16px 0 88px;
}
.manufacturing .vendors-cmp .without {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: clamp(20px, 2.4vw, 30px);
  color: rgba(243,239,231,0.4);
}
.manufacturing .vendors-cmp .strike {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(243,239,231,0.55);
}
.manufacturing .vendors-cmp .arrow {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 5vw, 64px);
  color: var(--brass-2);
  font-style: italic;
  line-height: 1;
  text-align: center;
}
.manufacturing .vendors-cmp .with {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1;
  color: var(--paper);
  letter-spacing: -0.012em;
}
.manufacturing .vendors-cmp .with em { font-style: italic; color: var(--brass-2); }
.manufacturing .punch h3 em { color: var(--brass-2); font-style: italic; }
@media (max-width: 720px) {
  .manufacturing .vendors-cmp { grid-template-columns: 1fr; gap: 18px; margin: 8px 0 56px; }
  .manufacturing .vendors-cmp .arrow { transform: rotate(90deg); }
}
.manufacturing .stages { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid rgba(243,239,231,0.16); padding-top: 32px; gap: 18px; }
.manufacturing .stage { display: flex; flex-direction: column; gap: 10px; grid-row: 1; }
.manufacturing .stage .n { font-size: 11px; letter-spacing: 0.22em; color: rgba(243,239,231,0.55); }
.manufacturing .stage h5 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 22px; line-height: 1.15; }
.manufacturing .stage p { color: rgba(243,239,231,0.6); font-size: 12.5px; line-height: 1.6; }
.manufacturing .stage.you h5 { color: var(--brass-2); font-style: italic; }
.manufacturing .stage.you p { color: var(--brass-2); font-style: italic; opacity: 0.85; }

/* Group brackets - make it explicit which steps are Yours (Design,
   Admire) and which are Us (Render → Install). Italic brass label
   framed by hairline brass rules. On desktop only the middle bracket
   reads - single-column "Yours" rules would be too short to scan, and
   the italicised brass headings on Design + Admire already mark them.
   On ≤1100px we switch to a vertical layout and show all three. */
.manufacturing .stages-lbl {
  display: flex; align-items: center; gap: 18px;
  margin-top: 6px;
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  color: var(--brass-2);
  font-size: clamp(20px, 1.7vw, 26px);
}
.manufacturing .stages-lbl::before,
.manufacturing .stages-lbl::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(168,127,62,0) 0%, rgba(201,162,94,0.55) 50%, rgba(168,127,62,0) 100%);
}
.manufacturing .stages-lbl span { white-space: nowrap; }
.manufacturing .stages-lbl.us-mid { grid-column: 2 / 7; grid-row: 2; }
.manufacturing .stages-lbl.yours-start,
.manufacturing .stages-lbl.yours-end { display: none; }
.manufacturing .punch { margin-top: 80px; padding: 48px 36px; border: 1px solid rgba(243,239,231,0.18); display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.manufacturing .punch h3 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-style: italic; font-size: clamp(24px, 3vw, 42px); line-height: 1.2; }
.manufacturing .punch span { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(243,239,231,0.6); }
@media (max-width: 1100px) {
  /* Vertical, explicitly grouped layout. Each bracket spans the full
     width and clearly delineates Yours / Us / Yours. */
  .manufacturing .stages { display: flex; flex-direction: column; gap: 22px; }
  .manufacturing .stage { grid-row: auto; gap: 8px; }
  .manufacturing .stages-lbl,
  .manufacturing .stages-lbl.yours-start,
  .manufacturing .stages-lbl.yours-end { display: flex; }
  .manufacturing .stages-lbl { margin: 6px 0; }
  /* Bracket labels already say "Yours." / "Yours, again." - drop the
     subtext under Design + Admire so we're not saying it twice. */
  .manufacturing .stage.you p { display: none; }
}
@media (max-width: 720px) {
  /* Mobile: linear single-column stack so the brackets read clearly
     as transitions between "Design = yours", the five "us" steps,
     and "Admire = yours, again". */
  .manufacturing { padding: 80px 18px; }
  .manufacturing .stages-lbl { font-size: 20px; gap: 14px; }
  .manufacturing .punch { padding: 28px 22px; }
}

/* MANIFESTO PULL-QUOTE - rotates between lines every few seconds */
.mfst { padding: 50px 28px; background: var(--paper); text-align: center; }
.mfst.dark { background: var(--noir); color: var(--paper); }
.mfst .container { max-width: 1080px; margin: 0 auto; }
.mfst .quote {
  font-family: 'Cormorant Garamond', serif; font-weight: 300; font-style: italic;
  font-size: clamp(28px, 4.4vw, 60px); line-height: 1.18; letter-spacing: -0.005em;
  color: var(--ink-2);
  transition: opacity 0.6s cubic-bezier(.2,.6,.2,1), transform 0.6s cubic-bezier(.2,.6,.2,1);
}
.mfst .source { transition: opacity 0.6s ease 0.05s; }
.mfst .source:empty { margin-top: 0; }
.mfst.flipping .quote { opacity: 0; transform: translateY(-10px); }
.mfst.flipping .source { opacity: 0; }
.mfst.dark .quote { color: var(--paper); }
.mfst .quote em { font-style: italic; color: var(--brass); }
.mfst .source {
  margin-top: 32px; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--muted);
}
.mfst.dark .source { color: rgba(243,239,231,0.55); }
@media (max-width: 720px) { .mfst { padding: 40px 18px; } }

/* CRAFT - Manufacturing & Installation, stamped with authority */
.craft { padding: 90px 28px; background: var(--paper); }
.craft .container { max-width: 1240px; margin: 0 auto; }
.craft .crumb { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 24px; }
.craft h2 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(40px, 6vw, 86px); line-height: 1.04; margin-bottom: 72px; max-width: 14ch; letter-spacing: -0.012em; }
.craft h2 em { font-style: italic; color: var(--brass); }
.craft .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }

.craft .card {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule);
  background: var(--paper);
  position: relative;
  overflow: hidden;
}

/* Big metal header: full finish + seal + huge italic number */
.craft .card .head-strip {
  position: relative; height: 230px; overflow: hidden;
  padding: 24px 28px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.craft .card .head-strip > * { position: relative; z-index: 2; }
.craft .card .head-strip .top {
  display: flex; justify-content: space-between; align-items: flex-start;
}
.craft .card .head-strip .eb-lite {
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 500;
}
.craft .card .head-strip .seal { width: 86px; height: 86px; opacity: 0.92; }
.craft .card .head-strip .seal text { font-family: 'Inter', sans-serif; }
.craft .card .head-strip .seal text.serif { font-family: 'Cormorant Garamond', serif; }
.craft .card .head-strip .num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300;
  font-size: clamp(96px, 11vw, 156px);
  line-height: 0.78; letter-spacing: -0.04em;
}
.craft .card.manuf .head-strip {
  background:
    linear-gradient(115deg, rgba(255,235,180,0.35) 0%, rgba(255,235,180,0) 35%, rgba(0,0,0,0.25) 100%),
    linear-gradient(180deg, #8a6320 0%, #c39a4a 50%, #6a4a18 100%);
  color: rgba(255,250,240,0.96);
}
.craft .card.manuf .head-strip::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(90deg,
    rgba(255,255,255,0.10) 0 1px, rgba(0,0,0,0.18) 1px 2px, transparent 2px 7px);
  mix-blend-mode: overlay;
}
.craft .card.install .head-strip {
  background:
    linear-gradient(125deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 35%, rgba(0,0,0,0.45) 100%),
    linear-gradient(180deg, #1c1c1c 0%, #2a2a2a 50%, #121212 100%);
  color: rgba(243,239,231,0.94);
}
.craft .card.install .head-strip::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(180deg,
    rgba(255,255,255,0.04) 0 1px, rgba(0,0,0,0.05) 1px 2px);
  mix-blend-mode: overlay;
}

/* Body */
.craft .card .body {
  padding: 36px 32px 0;
  display: flex; flex-direction: column; gap: 18px; flex: 1;
}
.craft .card .body h3 {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(26px, 2.8vw, 36px); line-height: 1.14; letter-spacing: -0.005em;
  max-width: 18ch;
}
.craft .card .body h3 em { font-style: italic; color: var(--brass); }
.craft .card .body p { color: var(--muted); font-size: 14.5px; line-height: 1.75; max-width: 48ch; }
/* Aligned formatting across both cards (Manufacturing + Installation) */
.craft .card { padding: 36px 36px 0; }
.craft .card .swatch { height: 8px; margin: -36px -36px 28px; }
.craft .card .body { padding: 0 0 36px; display: flex; flex-direction: column; gap: 18px; flex: 1; }
.craft .card .body .eb {
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  font-weight: 500; color: var(--muted);
}
.craft .card .body h3 {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(26px, 3vw, 36px); line-height: 1.08;
  letter-spacing: -0.008em; max-width: 18ch; margin: 0;
}
.craft .card .body h3 em { font-style: italic; color: var(--brass); }
.craft .card .body p { margin: 0; flex: 1; }
.craft .card .body .quote {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
  font-size: clamp(15px, 1.4vw, 17px); line-height: 1.55;
  color: var(--ink-2); max-width: 44ch;
}
@media (max-width: 720px) {
  .craft .card { padding: 28px 24px 0; }
  .craft .card .swatch { margin: -28px -24px 22px; }
  .craft .card .body { padding-bottom: 28px; gap: 14px; }
}

/* Stats - three small data points at the bottom of the body */
.craft .card .stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 28px;
  border-top: 1px solid var(--rule);
}
.craft .card .stat { padding: 24px 14px 26px 0; border-right: 1px solid var(--rule); }
.craft .card .stat:last-child { border-right: 0; padding-right: 0; }
.craft .card .stat .n {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(26px, 2.8vw, 34px); line-height: 1; color: var(--brass);
  letter-spacing: -0.01em;
}
.craft .card .stat .n em { font-style: italic; }
.craft .card .stat .l {
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted); margin-top: 8px; line-height: 1.4;
}

/* Quote band - bookends the metal header at the top */
.craft .card .quote-bar {
  padding: 22px 32px;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400;
  font-size: clamp(15px, 1.45vw, 18px); line-height: 1.35;
}
.craft .card.manuf .quote-bar {
  background: linear-gradient(180deg, #6a4a18 0%, #8a6320 100%);
  color: rgba(255,250,240,0.96);
}
.craft .card.install .quote-bar {
  background: var(--ink);
  color: rgba(243,239,231,0.92);
}
.craft .card .quote-bar .sig {
  font-style: normal; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  opacity: 0.7; white-space: nowrap;
}

@media (max-width: 820px) {
  .craft { padding: 80px 18px; }
  .craft .duo { grid-template-columns: 1fr; }
  .craft h2 { margin-bottom: 44px; }
  .craft .card .head-strip { height: 180px; padding: 20px 22px; }
  .craft .card .head-strip .seal { width: 70px; height: 70px; }
  .craft .card .body { padding: 26px 22px 0; }
  .craft .card .stat { padding: 20px 12px 22px 0; }
  .craft .card .quote-bar { padding: 18px 22px; }
}

/* FOUNDER - coherent editorial card: photo and copy framed as one unit */
.founder { padding: 70px 28px; background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.founder .container { max-width: 720px; margin: 0 auto; }
.founder .crumb {
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 18px;
  padding-bottom: 14px; border-bottom: 1px solid var(--rule);
}
.founder .row {
  display: grid; grid-template-columns: 200px 1fr;
  gap: 32px; align-items: stretch;
  padding: 4px 0 0;
}
.founder .portrait { width: 100%; align-self: stretch; display: flex; flex-direction: column; }
.founder .portrait .frame { aspect-ratio: 4/5; overflow: hidden; background: var(--paper-2); }
.founder .portrait .frame img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(100%) contrast(1.06) brightness(1.02);
  transition: filter 1.2s cubic-bezier(.2,.6,.2,1);
}
.founder .portrait:hover .frame img { filter: grayscale(55%) contrast(1.04); }
.founder .body { display: flex; flex-direction: column; gap: 14px; padding-top: 2px; }
.founder h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(24px, 2.4vw, 30px); line-height: 1.12;
  letter-spacing: -0.008em; max-width: 22ch;
  margin: 0;
}
.founder h2 em { font-style: italic; color: var(--brass); }
.founder p { font-size: 14.5px; line-height: 1.72; color: var(--ink-2); margin: 0; }
.founder .signature {
  display: flex; align-items: center; gap: 12px;
  padding-top: 14px; margin-top: auto;
  border-top: 1px solid var(--rule);
}
.founder .signature .nm { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 16px; color: var(--ink); }
.founder .signature .sep { width: 16px; height: 1px; background: var(--ink); opacity: 0.4; }
.founder .signature .ttl { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.founder .signature .yr {
  color: var(--brass); font-style: italic;
  font-family: 'Cormorant Garamond', serif; font-size: 13px;
  letter-spacing: 0.04em; text-transform: none; margin-left: auto;
}
@media (max-width: 600px) {
  .founder { padding: 56px 18px; }
  .founder .row { grid-template-columns: 1fr; gap: 22px; max-width: 380px; margin: 0 auto; }
  .founder .portrait { width: 160px; align-self: center; }
  .founder h2 { max-width: 18ch; }
  .founder .signature { flex-wrap: wrap; }
  .founder .signature .yr { margin-left: 0; width: 100%; padding-top: 4px; }
}

/* VIRTUES - bold circular badges, prominent promise marks */
.virtues { padding: 64px 28px; background: var(--paper-2); }
.virtues .container { max-width: 1320px; margin: 0 auto; }
.virtues .crumb { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.virtues h2 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(36px, 5vw, 64px); line-height: 1.04; margin-bottom: 10px; max-width: 14ch; letter-spacing: -0.012em; }
.virtues h2 em { font-style: italic; color: var(--brass); }
.virtues .lede { color: var(--muted); font-size: 15px; max-width: 40ch; margin-bottom: 44px; line-height: 1.6; }
.virtues .grid7 {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 36px 24px;
}
.virtues .v {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
}
.virtues .v .badge {
  width: 92px; height: 92px;
  border: 1.5px solid var(--brass);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--brass);
  position: relative;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), rgba(168,127,62,0.04) 65%),
    rgba(255,250,240,0.4);
  box-shadow: 0 1px 0 rgba(168,127,62,0.08), inset 0 0 0 1px rgba(168,127,62,0.06);
  transition: transform .55s cubic-bezier(.2,.6,.2,1),
              border-color .35s ease, color .35s ease,
              box-shadow .45s ease, background-color .35s ease;
}
.virtues .v:hover .badge {
  transform: scale(1.07);
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: 0 14px 28px rgba(168,127,62,0.18);
}
.virtues .v .badge svg { width: 46px; height: 46px; display: block; }
.virtues .v .label {
  font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: 11.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink); line-height: 1.3;
}
.virtues .v .copy {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 15px;
  color: var(--ink-2); max-width: 16ch; line-height: 1.3;
  opacity: 0.78;
  margin-top: -4px;
}
@media (max-width: 1100px) {
  .virtues .grid7 { grid-template-columns: repeat(4, 1fr); gap: 28px 16px; }
  .virtues .v .badge { width: 84px; height: 84px; }
  .virtues .v .badge svg { width: 42px; height: 42px; }
}
@media (max-width: 820px) {
  .virtues .grid7 { grid-template-columns: repeat(2, 1fr); gap: 36px 18px; }
  .virtues .v { gap: 12px; }
  .virtues .v .badge { width: 76px; height: 76px; }
  .virtues .v .badge svg { width: 38px; height: 38px; }
  .virtues .v .label { font-size: 11px; letter-spacing: 0.22em; line-height: 1.3; min-height: 2.6em; }
  .virtues .v .copy { font-size: 14px; line-height: 1.35; max-width: 18ch; }
}
@media (max-width: 540px) {
  .virtues { padding: 56px 18px; }
  .virtues h2 { margin-bottom: 14px; }
  .virtues .lede { margin-bottom: 36px; }
  .virtues .grid7 { gap: 32px 14px; }
}

/* PROMISES - 6 in a 3x2 grid (legacy, unused) */
.promises { padding: 120px 28px; background: var(--paper); }
.promises .container { max-width: 1240px; margin: 0 auto; }
.promises .crumb { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 24px; }
.promises h2 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(36px, 5vw, 64px); line-height: 1.04; letter-spacing: -0.012em; max-width: 14ch; margin-bottom: 56px; }
.promises h2 em { font-style: italic; color: var(--brass); }
.promises .grid6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.promises .pr { padding: 40px 28px 48px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 14px; }
.promises .pr .n { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-style: italic; font-size: 32px; color: var(--brass); }
.promises .pr h5 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 22px; line-height: 1.2; }
.promises .pr p { color: var(--muted); font-size: 13.5px; line-height: 1.65; }
@media (max-width: 900px) { .promises .grid6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .promises .grid6 { grid-template-columns: 1fr; } .promises { padding: 70px 18px; } }

/* MARQUEE PROJECTS */
.marquee { padding: 120px 28px; }
.marquee .container { max-width: 1320px; margin: 0 auto; }
.marquee .head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 56px; }
.marquee h2 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(36px, 5vw, 64px); letter-spacing: -0.012em; max-width: 14ch; line-height: 1.04; }
.marquee h2 em { font-style: italic; color: var(--brass); }
.marquee .head p { color: var(--muted); max-width: 36ch; font-size: 14px; line-height: 1.7; }
.marquee .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.marquee .pj { position: relative; overflow: hidden; }
.marquee .pj a { display: block; }
.marquee .pj img { width: 100%; height: 100%; display: block; object-fit: cover; aspect-ratio: 4/5; transition: transform 1.4s cubic-bezier(.2,.6,.2,1); }
.marquee .pj.tall img { aspect-ratio: 3/4; }
.marquee .pj.wide img { aspect-ratio: 16/10; }
.marquee .pj.box  img { aspect-ratio: 4/5; }
.marquee .pj:hover img { transform: scale(1.04); }
.marquee .pj-meta { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; gap: 20px; }
.marquee .pj-meta h5 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 22px; }
.marquee .pj-meta span { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.marquee .pj.s7 { grid-column: span 7; }
.marquee .pj.s5 { grid-column: span 5; }
.marquee .pj.s6 { grid-column: span 6; }
.marquee .pj.s4 { grid-column: span 4; }
@media (max-width: 720px) {
  .marquee { padding: 70px 18px; }
  .marquee .grid { grid-template-columns: 1fr; gap: 18px; }
  .marquee .pj.s7, .marquee .pj.s5, .marquee .pj.s6, .marquee .pj.s4 { grid-column: span 1; }
  .marquee .head { flex-direction: column; align-items: start; gap: 16px; }
}

/* FAQ - left-column heading, two-col questions on the right */
.faq { padding: 72px 28px; background: var(--paper-2); }
.faq .container { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1fr 2fr; gap: 64px; align-items: start; }
.faq .head { padding-top: 4px; }
.faq h2 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(34px, 4vw, 52px); letter-spacing: -0.012em; margin-bottom: 22px; max-width: 12ch; line-height: 1.05; }
.faq h2 em { font-style: italic; color: var(--brass); }
.faq .head .sub { font-size: 14px; color: var(--muted); line-height: 1.7; max-width: 36ch; }
.faq .head .sub a { color: var(--ink); border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: color .25s ease; }
.faq .head .sub a:hover { color: var(--brass); border-color: var(--brass); }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.faq-col { display: flex; flex-direction: column; }
.faq-col details { border-top: 1px solid var(--rule); padding: 14px 0; }
.faq-col details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h5 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.3; }
.faq summary .plus { font-family: 'Cormorant Garamond', serif; font-size: 20px; transition: transform .35s ease; flex-shrink: 0; color: var(--brass); }
.faq details[open] summary .plus { transform: rotate(45deg); }
.faq .ans { padding-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.7; max-width: 56ch; }
@media (max-width: 980px) { .faq .container { grid-template-columns: 1fr; gap: 32px; } .faq h2 { max-width: 18ch; } }
@media (max-width: 720px) { .faq { padding: 60px 18px; } .faq-grid { grid-template-columns: 1fr; gap: 0; } }

/* BESPOKE CTA */
.bespoke { padding: 90px 28px; background: var(--noir); color: var(--paper); text-align: center; }
.bespoke .container { max-width: 720px; margin: 0 auto; }
.bespoke .crumb { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(243,239,231,0.55); margin-bottom: 24px; }
.bespoke h2 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(36px, 5.5vw, 70px); line-height: 1.06; letter-spacing: -0.012em; }
.bespoke h2 em { font-style: italic; color: var(--brass-2); }
.bespoke p { color: rgba(243,239,231,0.78); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.7; margin: 24px auto 0; max-width: 50ch; }
.bespoke .btn-row { margin-top: 36px; }
.bespoke .btn { display: inline-block; padding: 16px 32px; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; border: 1px solid var(--paper); color: var(--paper); transition: all .35s ease; }
.bespoke .btn:hover { background: var(--paper); color: var(--ink); }
@media (max-width: 720px) { .bespoke { padding: 80px 18px; } }

/* DOWNLOADS */
.downloads { padding: 80px 28px; }
.downloads .container { max-width: 1240px; margin: 0 auto; }
.downloads h2 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(36px, 5vw, 64px); letter-spacing: -0.012em; margin-bottom: 56px; max-width: 14ch; line-height: 1.04; }
.downloads h2 em { font-style: italic; color: var(--brass); }
.downloads .row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.downloads .card { padding: 40px 32px; border: 1px solid var(--rule); display: flex; flex-direction: column; gap: 16px; }
.downloads .card h4 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; }
.downloads .card p { color: var(--muted); font-size: 14px; line-height: 1.7; }
.downloads .card .action { margin-top: 12px; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; align-self: start; padding: 12px 24px; border: 1px solid var(--ink); color: var(--ink); transition: all .35s ease; }
.downloads .card .action:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 720px) {
  .downloads { padding: 56px 18px; }
  .downloads h2 { margin-bottom: 28px; font-size: clamp(32px, 8vw, 44px); }
  .downloads .row { grid-template-columns: 1fr 1fr; gap: 12px; }
  /* Equal-height cards with the CTA pinned to the bottom so both
     buttons line up regardless of how the body text wraps. */
  .downloads .card {
    padding: 22px 16px 18px;
    gap: 12px;
    background: rgba(255,255,255,0.4);
    border-color: var(--rule);
  }
  .downloads .card h4 { font-size: 19px; line-height: 1.18; min-height: 2.4em; }
  .downloads .card p { font-size: 12.5px; line-height: 1.55; flex: 1; }
  .downloads .card .action {
    align-self: stretch; text-align: center;
    margin-top: auto;
    font-size: 10px; letter-spacing: 0.14em;
    padding: 11px 8px;
    white-space: nowrap;
  }
}

/* DOWNLOAD GATE - modal form that captures name/email/phone/role
   before the catalogue PDF is released. */
.dl-gate {
  border: 0; padding: 0; background: transparent;
  width: min(520px, calc(100vw - 32px));
  margin: auto;
}
.dl-gate::backdrop { background: rgba(12,12,12,0.55); }
.dl-form {
  background: var(--paper); color: var(--ink);
  padding: 36px 32px 28px;
  border: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  max-height: 92vh; overflow: auto;
}
.dl-form .dl-close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: 0; padding: 6px;
  font-size: 22px; line-height: 1; color: var(--ink-2);
  cursor: pointer;
}
.dl-form .dl-close:hover { color: var(--ink); }
.dl-form .dl-eyebrow { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.dl-form h3 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(24px, 3vw, 30px); line-height: 1.15; margin: 0; }
.dl-form h3 em { font-style: italic; color: var(--brass); }
.dl-form .dl-lede { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: -4px 0 6px; }
.dl-form .dl-field { display: flex; flex-direction: column; gap: 4px; }
.dl-form .dl-field > span { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.dl-form .dl-field input {
  font: inherit; padding: 9px 0;
  background: transparent; border: 0;
  border-bottom: 1px solid var(--rule);
  outline: none; color: var(--ink);
  transition: border-color .25s ease;
}
.dl-form .dl-field input:focus { border-color: var(--ink); }
.dl-form .dl-field.invalid input { border-color: #b94a4a; }
.dl-form .dl-roles { border: 0; padding: 0; margin: 4px 0 0; }
.dl-form .dl-roles legend { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; padding: 0; }
.dl-form .dl-roles .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.dl-form .dl-roles label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; color: var(--ink-2); }
.dl-form .dl-roles label:hover { color: var(--ink); }
.dl-form .dl-roles input[type="radio"] { accent-color: var(--brass); margin: 0; }
.dl-form .dl-error { font-size: 12.5px; color: #b94a4a; min-height: 1em; margin: 4px 0 0; }
.dl-form .dl-submit {
  align-self: stretch; text-align: center;
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  padding: 14px 22px; margin-top: 4px;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.dl-form .dl-submit:hover { background: var(--brass); border-color: var(--brass); }
.dl-form .dl-submit:disabled { opacity: 0.7; cursor: default; }
.dl-tiny {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-size: 10.5px;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--muted);
  margin: 0;
  max-width: 62ch;
}
@media (max-width: 540px) {
  .dl-form { padding: 28px 22px 22px; }
  .dl-form .dl-roles .opts { grid-template-columns: 1fr; }
}

/* VISIT */
.visit { padding: 80px 28px; background: var(--paper-2); }
.visit .container { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; }
.visit h2 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(36px, 5vw, 64px); letter-spacing: -0.012em; line-height: 1.04; }
.visit h2 em { font-style: italic; color: var(--brass); }
.visit .crumb { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 24px; }
.visit .studio { padding: 28px 0; border-top: 1px solid var(--rule); }
.visit .studio:last-child { border-bottom: 1px solid var(--rule); }
.visit .studio .head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.visit .studio h4 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 24px; margin: 0; }
.visit .studio .badge { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); padding: 4px 10px; border: 1px solid var(--rule); white-space: nowrap; }
.visit .studio .badge.live { color: var(--brass); border-color: rgba(168,127,62,0.35); }
.visit .studio p { color: var(--muted); font-size: 14px; line-height: 1.7; }
.visit .studio .actions { display: flex; gap: 22px; margin-top: 12px; flex-wrap: wrap; }
.visit .studio .actions a { display: inline-block; font-size: 12px; letter-spacing: 0.06em; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: color .25s ease, border-color .25s ease; }
.visit .studio .actions a:hover { color: var(--brass); border-color: var(--brass); }
.visit .studio.soon { opacity: 0.78; }
.visit .studio.soon h4 { color: var(--ink-2); }
.visit .studio.soon p { font-style: italic; font-family: 'Cormorant Garamond', serif; font-size: 16px; color: var(--muted); }
@media (max-width: 820px) {
  .visit { padding: 64px 18px; }
  .visit .container { grid-template-columns: 1fr; gap: 28px; }
  /* Delhi (active studio) takes the full width with all its details;
     the two "Coming soon" cards share the row below since they only
     have a single line of copy each. Cleaner hierarchy than 3 equal
     cramped columns. */
  .visit .container > div:nth-child(2) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
  }
  .visit .studio {
    padding: 22px 18px;
    border: 1px solid var(--rule);
    background: rgba(255,255,255,0.35);
  }
  .visit .studio:first-child { grid-column: 1 / -1; }
  .visit .studio .head { gap: 10px; margin-bottom: 12px; }
  .visit .studio h4 { font-size: 22px; line-height: 1.15; }
  .visit .studio .badge { font-size: 9.5px; padding: 3px 9px; letter-spacing: 0.22em; }
  .visit .studio p { font-size: 13px; line-height: 1.55; }
  .visit .studio .actions { gap: 18px; margin-top: 14px; flex-wrap: wrap; }
  .visit .studio .actions a { font-size: 12px; letter-spacing: 0; }
  .visit .studio.soon { padding: 18px 14px; background: transparent; }
  .visit .studio.soon h4 { font-size: 18px; }
  .visit .studio.soon p { font-size: 12.5px; line-height: 1.4; margin-top: 6px; }
}


/* ENDFOOT - slim copyright strip */
.endfoot { background: var(--paper); color: var(--muted); padding: 28px 28px 18px; border-top: 1px solid var(--rule); }
.endfoot .row { display: flex; justify-content: space-between; align-items: center; max-width: 1240px; margin: 0 auto; gap: 16px; flex-wrap: wrap; }
.endfoot .left, .endfoot .right { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
.endfoot .right a { display: inline-flex; align-items: center; gap: 8px; transition: color .25s ease; }
.endfoot .right a:hover { color: var(--ink); }
.endfoot .ig { width: 14px; height: 14px; vertical-align: middle; }
@media (max-width: 600px) { .endfoot .row { flex-direction: column; gap: 10px; text-align: center; } }

/* PARTNER STRIP */
.partner-strip { background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 28px 28px; }
.partner-strip .row { max-width: 1240px; margin: 0 auto; display: flex; justify-content: center; align-items: center; gap: 22px; flex-wrap: wrap; }
.partner-strip .ps-eyebrow { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.partner-strip .ps-link {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 12px 22px; border: 1px solid var(--ink); color: var(--ink);
  transition: background .3s ease, color .3s ease, padding .3s cubic-bezier(.2,.6,.2,1);
}
.partner-strip .ps-link span { transition: transform .3s cubic-bezier(.2,.6,.2,1); display: inline-block; }
.partner-strip .ps-link:hover { background: var(--ink); color: var(--paper); padding-right: 26px; }
.partner-strip .ps-link:hover span { transform: translateX(4px); }
@media (max-width: 600px) { .partner-strip { padding: 22px 18px; } .partner-strip .row { gap: 14px; } .partner-strip .ps-link { padding: 10px 18px; font-size: 11px; } }

/* BY-ALLHOME - closing brand mark, soft scroll reveal */
.byline { padding: 80px 28px 64px; background: var(--paper); display: flex; justify-content: center; align-items: center; }
.byline a {
  display: inline-flex; flex-direction: row; align-items: center; gap: 22px;
  opacity: 0; transform: translateY(24px) scale(0.98);
  filter: blur(4px);
  transition: opacity 1.8s cubic-bezier(.22,.7,.18,1),
              transform 1.8s cubic-bezier(.22,.7,.18,1),
              filter 1.4s cubic-bezier(.22,.7,.18,1);
}
.byline a.in { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
.byline .by {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400;
  font-size: clamp(22px, 2.6vw, 32px); color: var(--ink-2); letter-spacing: 0.01em;
  line-height: 1; opacity: 0.78;
  transition: opacity .35s ease;
}
.byline a:hover .by { opacity: 1; }
.byline .brand-logo {
  display: block;
  width: clamp(140px, 20vw, 220px); height: auto;
  transition: transform .8s cubic-bezier(.2,.6,.2,1);
}
.byline a:hover .brand-logo { transform: scale(1.04); }
@media (max-width: 720px) { .byline { padding: 56px 18px 44px; } .byline a { gap: 16px; } .byline .brand-logo { width: clamp(120px, 36vw, 170px); } }