/* =========================================================
   Metalux - 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: 'Sora', -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: #ffffff; --paper-2: #f4f5f6;
  --ink: #101315; --ink-2: #374047;
  --muted: #5f6970; --rule: rgba(16,19,21,0.16);
  --brass: #59636b; --brass-2: #30373d;
  --noir: #080a0c;
  --oxide: #dfe3e6;
  /* 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(--brass-2); color: var(--noir); }
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: 'Playfair Display', 'Times New Roman', serif; font-weight: 400; letter-spacing: 0; }
.eyebrow { font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; font-size: 11px; color: var(--muted); }

.brand-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-transform: uppercase;
  line-height: 1;
}
.brand-wordmark .brand-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  transform: skewX(-8deg);
  font-family: 'Playfair Display', serif;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: 0;
}
.brand-wordmark strong {
  display: block;
  font-family: 'Sora', sans-serif;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.brand-wordmark small {
  display: block;
  margin-top: 5px;
  font-family: 'Sora', sans-serif;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.14em;
}

/* 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(11,13,15,0.95), rgba(11,13,15,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: 'Playfair Display', 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(11,13,15,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: 'Playfair Display', 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);
  filter: contrast(1.035) saturate(1.015);
}
/* 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; }
  6%    { opacity: 1; }
  30%   { opacity: 1; }
  36%   { opacity: 0; }
  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-wordmark {
  color: var(--brass-2);
  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,0.38))
    drop-shadow(0 12px 34px rgba(0,0,0,0.34));
}
.hero-wordmark .brand-icon { width: 54px; height: 54px; font-size: 32px; }
.hero-wordmark strong { font-size: clamp(30px, 4vw, 50px); letter-spacing: 0.09em; }
.hero-wordmark small { font-size: clamp(8px, 1vw, 12px); letter-spacing: 0.22em; color: rgba(238,241,242,0.88); }
.hero-action {
  display: inline-flex; flex-direction: column; align-items: center; gap: 14px;
  background: transparent; border: 0; padding: 0;
  font-family: 'Sora', sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(243,245,245,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-wordmark .brand-icon { width: 42px; height: 42px; font-size: 25px; }
  .hero-wordmark strong { font-size: 28px; }
  .hero-wordmark small { font-size: 8px; }
  .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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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: contrast(1.035) saturate(1.015);
  color: transparent;
}
.prod:hover .prod-img img { transform: scale(1.04); filter: contrast(1.055) saturate(1.025); }
.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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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(185,192,197,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: 'Playfair Display', 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: 'Playfair Display', 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: 'Sora', 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,245,245,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,245,245,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,245,245,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,245,245,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,245,245,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 { color: var(--ink); }
.topbar .tb-logo .brand-icon { width: 40px; height: 40px; font-size: 24px; }
.topbar .tb-logo strong { font-size: 24px; }
.topbar .tb-logo small { font-size: 7px; letter-spacing: 0.12em; }
.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: 1120px) {
  .topbar .tb-links { display: none; }
  .topbar .tb-menu {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0; letter-spacing: 0; text-transform: uppercase;
    color: var(--ink); cursor: pointer; padding: 8px 0;
  }
  .topbar .tb-menu .bars { width: 22px; height: 10px; position: relative; display: inline-block; }
  .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; }
}

@media (max-width: 900px) {
  .topbar { padding: 10px 16px; background: var(--paper); }
  .topbar .tb-logo .brand-icon { width: 32px; height: 32px; font-size: 19px; }
  .topbar .tb-logo strong { font-size: 19px; }
  .topbar .tb-logo small { display: 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: 0; letter-spacing: 0; 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; }
}
@media (max-width: 430px) {
  .topbar { gap: 12px; padding: 10px 12px; }
  .topbar .tb-logo { gap: 8px; }
  .topbar .tb-logo .brand-icon { width: 30px; height: 30px; font-size: 18px; }
  .topbar .tb-logo strong { font-size: 17px; letter-spacing: 0.06em; }
  .topbar .tb-cta { font-size: 9px; padding: 9px 11px; letter-spacing: 0.14em; }
  .topbar .tb-menu .bars { width: 18px; }
}

/* 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: 'Playfair Display', 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: 'Sora', 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: 'Playfair Display', 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: 'Playfair Display', 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;
  filter: contrast(1.03) saturate(1.01);
}
.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: 'Sora', 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,245,245,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: 'Sora', 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: 'Sora', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Sora', 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 METALUX - 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: 'Playfair Display', 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: 'Sora', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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(185,192,197,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,245,245,0.55); margin-bottom: 28px; }
.manufacturing h2 { font-family: 'Playfair Display', 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,245,245,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: 'Playfair Display', serif; font-style: italic;
  font-size: clamp(20px, 2.4vw, 30px);
  color: rgba(243,245,245,0.4);
}
.manufacturing .vendors-cmp .strike {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(243,245,245,0.55);
}
.manufacturing .vendors-cmp .arrow {
  font-family: 'Playfair Display', 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: 'Playfair Display', 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,245,245,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,245,245,0.55); }
.manufacturing .stage h5 { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 22px; line-height: 1.15; }
.manufacturing .stage p { color: rgba(243,245,245,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: 'Playfair Display', 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(185,192,197,0) 0%, rgba(238,241,242,0.55) 50%, rgba(185,192,197,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,245,245,0.18); display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.manufacturing .punch h3 { font-family: 'Playfair Display', 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,245,245,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: 'Playfair Display', 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,245,245,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: 'Playfair Display', 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: 'Sora', sans-serif; }
.craft .card .head-strip .seal text.serif { font-family: 'Playfair Display', serif; }
.craft .card .head-strip .num {
  font-family: 'Playfair Display', 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(243,245,245,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,245,245,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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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(243,245,245,0.96);
}
.craft .card.install .quote-bar {
  background: var(--ink);
  color: rgba(243,245,245,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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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(185,192,197,0.08) 65%),
    rgba(243,245,245,0.24);
  box-shadow: 0 1px 0 rgba(185,192,197,0.08), inset 0 0 0 1px rgba(185,192,197,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(185,192,197,0.18);
}
.virtues .v .badge svg { width: 46px; height: 46px; display: block; }
.virtues .v .label {
  font-family: 'Sora', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', serif; font-weight: 400; font-style: italic; font-size: 32px; color: var(--brass); }
.promises .pr h5 { font-family: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', serif; font-weight: 400; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.3; }
.faq summary .plus { font-family: 'Playfair Display', 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,245,245,0.55); margin-bottom: 24px; }
.bespoke h2 { font-family: 'Playfair Display', 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,245,245,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: 'Playfair Display', 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: 'Playfair Display', 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: 'Playfair Display', 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: 'Sora', 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: 'Sora', -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: 'Playfair Display', 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: 'Playfair Display', 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(185,192,197,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: 'Playfair Display', 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: 'Sora', 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; } }

/* Studio credit - closing brand mark, soft scroll reveal */
.byline { padding: 80px 28px 64px; background: var(--paper); display: flex; justify-content: center; align-items: center; }
.byline [data-byline] {
  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 [data-byline].in { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
.byline .by {
  font-family: 'Playfair Display', 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 [data-byline]:hover .by { opacity: 1; }
.byline-brand { color: var(--ink); }
.byline-brand .brand-icon { width: 50px; height: 50px; font-size: 30px; }
.byline-brand strong { font-size: clamp(28px, 4vw, 44px); letter-spacing: 0.1em; }
.byline-brand small { font-size: 10px; letter-spacing: 0.18em; color: var(--muted); }
@media (max-width: 720px) { .byline { padding: 56px 18px 44px; } .byline [data-byline] { gap: 16px; } }

/* Black + silver theme refinements */
.hero-veil { background: rgba(0,0,0,0.24); }
.topbar,
.tb-drawer,
.dl-form,
.prod,
.downloads .card,
.craft .card,
.visit .studio,
.faq details {
  box-shadow: 0 18px 50px rgba(0,0,0,0.28);
}
.topbar {
  border-bottom: 1px solid rgba(238,241,242,0.22);
}
.topbar .tb-cta,
.nav-cta,
.partner-strip .ps-link,
.dr-btn,
.btn,
.dl-form .dl-submit,
.downloads .card .action {
  border-color: var(--brass);
}
.topbar .tb-cta:hover,
.nav-cta:hover,
.partner-strip .ps-link:hover,
.dr-btn:hover,
.btn:hover,
.dl-form .dl-submit:hover,
.downloads .card .action:hover {
  background: var(--brass-2);
  border-color: var(--brass-2);
  color: var(--noir);
}
.prod,
.craft .card,
.downloads .card,
.visit .studio,
.faq details,
.dl-form {
  background: linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));
  border-color: rgba(238,241,242,0.16);
}
.prod-meta .more,
.field label,
.dl-field span,
.crumb,
.source {
  color: var(--muted);
}
.field input,
.field textarea,
.field select,
.dl-field input {
  border-bottom-color: rgba(238,241,242,0.22);
  background: transparent;
}
.field input:focus,
.field textarea:focus,
.field select:focus,
.dl-field input:focus {
  border-color: var(--brass-2);
  outline: none;
}
.shades-tabs button.active {
  background: var(--brass-2);
  color: var(--noir);
  border-color: var(--brass-2);
}
.shades-tabs button.active .ct {
  color: var(--noir);
}
.visit .studio .badge.live {
  color: var(--brass-2);
  border-color: rgba(238,241,242,0.34);
}
@media (max-width: 820px) {
  .visit .studio { background: rgba(255,255,255,0.045); }
}

/* Dark theme readability pass */
.page-head .lede,
.manifesto p,
.prod-meta p,
.prod-foot p,
.editorial figcaption,
.split p,
.flow .step .sub,
.design-reveal .sticky-head p,
.shades .head .lede,
.shades-hint,
.shades-foot,
.craft .card .body p,
.virtues .lede,
.promises .pr p,
.marquee .head p,
.faq .head .sub,
.faq .ans,
.downloads .card p,
.dl-form .dl-lede,
.visit .studio p,
.visit .studio.soon p {
  color: var(--ink-2);
}

.eyebrow,
.page-head .crumb,
.stat .lbl,
.pj-meta span,
.prod-meta .num,
.flow .crumb,
.field label,
.creds .crumb,
.creds .lbl,
.shades .head .crumb,
.craft .crumb,
.founder .signature .ttl,
.virtues .crumb,
.promises .crumb,
.marquee .pj-meta span,
.dl-form .dl-eyebrow,
.dl-form .dl-field > span,
.dl-form .dl-roles legend,
.visit .crumb,
.visit .studio .badge,
.partner-strip .ps-eyebrow,
.byline-brand small,
.crumb,
.source {
  color: var(--muted);
}

.footer-top p,
.footer ul a {
  color: rgba(247,249,249,0.9);
}
.footer h6,
.footer-bottom,
.manufacturing .crumb,
.manufacturing .stage .n,
.manufacturing .punch span,
.mfst.dark .source,
.bespoke .crumb {
  color: rgba(247,249,249,0.82);
}
.manufacturing .lede,
.manufacturing .stage p,
.bespoke p {
  color: rgba(247,249,249,0.9);
}
.endfoot {
  color: var(--ink-2);
}

/* White + silver theme */
body,
.mfst,
.craft,
.promises,
.endfoot,
.byline {
  background: var(--paper);
  color: var(--ink);
}

.page-head,
.manifesto,
.products,
.editorial,
.flow,
.creds,
.downloads,
.marquee {
  background: var(--paper);
  color: var(--ink);
}

.topbar,
.tb-drawer,
.design-reveal,
.shades,
.virtues,
.faq,
.visit,
.partner-strip {
  background: var(--paper-2);
  color: var(--ink);
}

.footer,
.manufacturing,
.mfst.dark,
.bespoke {
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--rule);
}

.footer-top,
.manufacturing .stages,
.manufacturing .punch {
  border-color: var(--rule);
}

.craft .card,
.downloads .card,
.dl-form {
  background: #ffffff;
  border-color: rgba(16,19,21,0.12);
  box-shadow: 0 18px 48px rgba(16,19,21,0.08);
}

.visit .studio,
.faq details {
  background: transparent;
  box-shadow: none;
  border-color: rgba(16,19,21,0.16);
}

.topbar {
  border-bottom: 1px solid rgba(16,19,21,0.14);
  box-shadow: 0 10px 30px rgba(16,19,21,0.06);
}

.nav {
  background: linear-gradient(to bottom, rgba(255,255,255,0.92), rgba(255,255,255,0));
  color: var(--ink);
}

@media (max-width: 900px) {
  .nav { background: rgba(255,255,255,0.96); }
}

.drawer {
  background: var(--paper);
  color: var(--ink);
}
.drawer .close,
.drawer ul a {
  color: var(--ink);
}

.page-head .lede,
.manifesto p,
.prod-meta p,
.prod-foot p,
.editorial p,
.editorial figcaption,
.split p,
.flow .step .sub,
.design-reveal .sticky-head p,
.shades .head .lede,
.shades-hint,
.shades-foot,
.craft .card .body p,
.virtues .lede,
.promises .pr p,
.marquee .head p,
.faq .head .sub,
.faq .ans,
.downloads .card p,
.dl-form .dl-lede,
.visit .studio p,
.visit .studio.soon p,
.manufacturing .lede,
.manufacturing .stage p,
.bespoke p,
.footer-top p,
.footer ul a {
  color: var(--ink-2);
}

.eyebrow,
.page-head .crumb,
.stat .lbl,
.pj-meta span,
.prod-meta .num,
.flow .crumb,
.field label,
.creds .crumb,
.creds .lbl,
.shades .head .crumb,
.craft .crumb,
.founder .signature .ttl,
.virtues .crumb,
.promises .crumb,
.marquee .pj-meta span,
.dl-form .dl-eyebrow,
.dl-form .dl-field > span,
.dl-form .dl-roles legend,
.visit .crumb,
.visit .studio .badge,
.partner-strip .ps-eyebrow,
.byline-brand small,
.manufacturing .crumb,
.manufacturing .stage .n,
.manufacturing .punch span,
.mfst.dark .source,
.bespoke .crumb,
.footer h6,
.footer-bottom,
.crumb,
.source {
  color: var(--muted);
}

.btn,
.dl-form .dl-submit,
.downloads .card .action,
.partner-strip .ps-link,
.nav-cta,
.topbar .tb-cta,
.dr-btn {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn:hover,
.dl-form .dl-submit:hover,
.downloads .card .action:hover,
.partner-strip .ps-link:hover,
.nav-cta:hover,
.topbar .tb-cta:hover,
.dr-btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.shades-tabs button.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.shades-tabs button.active .ct {
  color: var(--paper);
}

.bespoke .btn {
  border-color: var(--ink);
  color: var(--ink);
}

.bespoke .btn:hover {
  background: var(--ink);
  color: var(--paper);
}

.field input,
.field textarea,
.field select,
.dl-field input {
  border-bottom-color: rgba(16,19,21,0.22);
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.dl-field input:focus {
  border-color: var(--ink);
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

.hero-wordmark {
  color: #ffffff;
}
.hero-wordmark small,
.hero-action {
  color: rgba(255,255,255,0.9);
}

.design-reveal .stage .lbl.after {
  color: var(--ink);
  text-shadow: 0 1px 8px rgba(255,255,255,0.82);
}

.manufacturing .vendors-cmp .without,
.manufacturing .vendors-cmp .strike {
  color: var(--muted);
  text-decoration-color: var(--muted);
}

.manufacturing .vendors-cmp .with,
.manufacturing .vendors-cmp .with em,
.manufacturing h2 em,
.manufacturing .punch h3 em,
.manufacturing .stage.you h5,
.manufacturing .stage.you p,
.manufacturing .vendors-cmp .arrow,
.manufacturing .stages-lbl {
  color: var(--brass-2);
}

.mfst.dark .quote {
  color: var(--ink);
}
.mfst.dark .source {
  color: var(--muted);
}

.visit .studio .badge.live {
  color: var(--ink);
  border-color: rgba(16,19,21,0.32);
}

.faq summary .plus,
.prod-meta .num,
.promises .pr .n,
.marquee .pj-meta span,
.yr,
.num,
.stage .n,
.stage .d,
.sc-text,
.tch {
  color: var(--muted);
}

.page-head h1 em,
.manifesto h2 em,
.flow h3 em,
.flow .step .ttl em,
.creds .num em,
.design-reveal h2 em,
.shades .head h2 em,
.craft h2 em,
.craft .card .body h3 em,
.founder h2 em,
.virtues h2 em,
.promises h2 em,
.marquee h2 em,
.faq h2 em,
.bespoke h2 em,
.downloads h2 em,
.dl-form h3 em,
.visit h2 em,
.mfst .quote em,
.dr-cta .invite em {
  color: var(--brass);
}

/* Unboxed light sections */
.visit,
.faq {
  background: var(--paper-2);
}

.visit .container {
  gap: clamp(48px, 7vw, 104px);
}

.visit .studio {
  padding: 34px 0;
  border-top: 1px solid rgba(16,19,21,0.16);
}
.visit .studio:last-child {
  border-bottom: 1px solid rgba(16,19,21,0.16);
}
.visit .studio .badge {
  background: transparent;
}
.visit .studio.soon {
  opacity: 1;
}

.faq-grid {
  gap: 0 72px;
}
.faq-col details {
  background: transparent;
  border-top: 1px solid rgba(16,19,21,0.16);
  padding: 24px 0;
}
.faq-col details:last-child {
  border-bottom: 1px solid rgba(16,19,21,0.16);
}
.faq summary h5 {
  max-width: 18ch;
}
.faq summary .plus {
  color: var(--ink-2);
}

.prod {
  background: transparent;
  border: 0;
  box-shadow: none;
  gap: 20px;
}

.prod:hover {
  transform: translateY(-2px);
}

.prod-img {
  box-shadow: 0 18px 42px rgba(16,19,21,0.08);
}

.prod-meta {
  padding: 0;
}

.prod-meta p {
  color: var(--ink-2);
}

@media (max-width: 820px) {
  .visit .container > div:nth-child(2) {
    display: block;
  }
  .visit .studio,
  .visit .studio.soon {
    padding: 26px 0;
    border-left: 0;
    border-right: 0;
    background: transparent;
  }
}

/* Product detail pages */
.product-detail-page {
  overflow: auto;
  height: auto;
  background:
    linear-gradient(180deg, rgba(244,245,246,0.9) 0, rgba(255,255,255,0) 360px),
    var(--paper);
}

.product-detail-page .topbar {
  background: rgba(255,255,255,0.94);
  border-bottom: 1px solid rgba(16,19,21,0.1);
  backdrop-filter: blur(16px);
}

.pd-hero {
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 138px clamp(18px, 4vw, 56px) 72px;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(340px, 0.76fr);
  align-items: end;
  gap: clamp(42px, 7vw, 112px);
}

.pd-hero-copy {
  max-width: 820px;
}

.pd-back {
  display: inline-flex;
  margin-bottom: 28px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(16,19,21,0.35);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.pd-back:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.pd-hero .crumb {
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.pd-hero h1 {
  max-width: 780px;
  font-size: clamp(52px, 7vw, 104px);
  line-height: 0.96;
  color: var(--ink);
}

.pd-hero h1 em,
.pd-section h2 em,
.pd-final h2 em {
  color: var(--brass);
  font-style: italic;
}

.pd-hero p {
  max-width: 62ch;
  margin-top: 30px;
  color: var(--ink-2);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.8;
}

.pd-hero-img {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: 0 26px 70px rgba(16,19,21,0.12);
}

.pd-hero-img::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,0.48);
  pointer-events: none;
}

.pd-hero-img img,
.pd-section figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.045) saturate(1.02);
}

.pd-index {
  position: sticky;
  top: 72px;
  z-index: 25;
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 0 clamp(18px, 4vw, 56px);
  background: rgba(244,245,246,0.94);
  border-top: 1px solid rgba(16,19,21,0.12);
  border-bottom: 1px solid rgba(16,19,21,0.12);
  backdrop-filter: blur(14px);
}

.pd-index::-webkit-scrollbar {
  display: none;
}

.pd-index a {
  flex: 0 0 auto;
  min-width: max-content;
  padding: 16px 20px;
  border-right: 1px solid rgba(16,19,21,0.1);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color var(--d-fast) var(--ease-soft), background var(--d-fast) var(--ease-soft);
}

.pd-index a:first-child {
  border-left: 1px solid rgba(16,19,21,0.1);
}

.pd-index a:hover {
  background: rgba(255,255,255,0.72);
  color: var(--ink);
}

.pd-section {
  scroll-margin-top: 126px;
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: clamp(72px, 8vw, 118px) clamp(18px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(310px, 0.92fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 7vw, 112px);
  border-bottom: 1px solid var(--rule);
}

.pd-section.alt {
  direction: rtl;
}

.pd-section.alt > * {
  direction: ltr;
}

.pd-section figure {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: 0 20px 55px rgba(16,19,21,0.1);
}

.pd-section figure::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: 1;
  border: 1px solid rgba(255,255,255,0.45);
  pointer-events: none;
}

.pd-section article {
  max-width: 680px;
}

.pd-num {
  display: block;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.pd-section h2 {
  max-width: 650px;
  color: var(--ink);
  font-size: clamp(40px, 5.1vw, 78px);
  line-height: 0.98;
}

.pd-lede {
  max-width: 58ch;
  margin-top: 26px;
  color: var(--ink-2);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.76;
}

.pd-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 38px 0 30px;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.pd-specs div {
  min-height: 142px;
  padding: 20px 18px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: rgba(244,245,246,0.55);
}

.pd-specs b {
  display: block;
  margin-bottom: 12px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.pd-specs span {
  display: block;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.62;
}

.pd-note {
  max-width: 56ch;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.78;
}

.pd-cta {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin-top: 26px;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.pd-cta:hover {
  color: var(--brass-2);
}

.pd-final {
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: clamp(72px, 8vw, 112px) clamp(18px, 4vw, 56px);
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: clamp(36px, 7vw, 112px);
  border-bottom: 1px solid var(--rule);
}

.pd-final .crumb {
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.pd-final h2 {
  color: var(--ink);
  font-size: clamp(42px, 6vw, 88px);
  line-height: 0.98;
}

.pd-final p {
  max-width: 64ch;
  margin-top: 22px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.78;
}

.product-detail-page .endfoot {
  background: var(--paper);
}

@media (max-width: 880px) {
  .pd-hero,
  .pd-section {
    grid-template-columns: 1fr;
  }

  .pd-hero-img,
  .pd-section figure {
    aspect-ratio: 16 / 9;
    max-height: 470px;
  }

  .pd-section.alt {
    direction: ltr;
  }

  .pd-section article {
    max-width: 780px;
  }

  .pd-specs {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .pd-hero {
    padding-top: 110px;
    padding-bottom: 48px;
  }

  .pd-hero h1 {
    font-size: clamp(44px, 15vw, 68px);
  }

  .pd-index {
    top: 64px;
    padding: 0 18px;
  }

  .pd-index a {
    padding: 14px 16px;
    font-size: 10px;
    letter-spacing: 0.16em;
  }

  .pd-section {
    scroll-margin-top: 120px;
    padding-top: 58px;
    padding-bottom: 64px;
    gap: 30px;
  }

  .pd-hero-img,
  .pd-section figure {
    aspect-ratio: 4 / 5;
    max-height: none;
  }

  .pd-section h2 {
    font-size: clamp(36px, 12vw, 56px);
  }

  .pd-specs {
    grid-template-columns: 1fr;
    margin: 30px 0 26px;
  }

  .pd-specs div {
    min-height: 0;
    padding: 18px;
  }

  .pd-final {
    display: block;
  }
}

@media (max-width: 430px) {
  .pd-back,
  .pd-cta {
    letter-spacing: 0.14em;
  }

  .pd-hero p,
  .pd-lede,
  .pd-final p {
    font-size: 15px;
  }
}