/* ============================================================
   FORMA NOVA - Design System
   main.css
   Direction: warm editorial luxury. Golden-hour champagne,
   warm ink, bone, and champagne brass. Serif display + clean sans body.
   Image-forward, generous whitespace, hairline rules.
   ============================================================ */

/* ------------------------------------------------------------
   1. FONTS (loaded via <link> in head.njk for non-blocking, display=swap)
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   2. TOKENS
   ------------------------------------------------------------ */
:root {
  /* Color - warm neutrals */
  --ink:        #1B1814;   /* warm near-black, body text + dark sections */
  --ink-soft:   #4A443C;   /* secondary text */
  --bone:       #F8F5EF;   /* primary page background, warm paper */
  --bone-2:     #FBF9F5;   /* lighter cards */
  --sand:       #ECE4D6;   /* soft neutral fill / rules */
  --sand-deep:  #D8CBB4;   /* hairline rules, borders */
  --white:      #FFFFFF;

  /* Color - signature accents */
  --brass:      #B0894F;   /* champagne brass, primary accent (sparingly) */
  --brass-deep: #97713B;   /* hover */
  --error:      #9B2C2C;   /* form validation */
  --slim-footer-h: 86px;   /* slim footer height; part of the last screen module */

  /* Typography - families */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Typography - sizes */
  --text-hero:  clamp(46px, 6.5vw, 92px);
  --text-h1:    clamp(40px, 5vw, 68px);
  --text-h2:    clamp(30px, 3.6vw, 50px);
  --text-h3:    clamp(21px, 2vw, 28px);
  --text-h4:    20px;
  --text-body:  17px;
  --text-lead:  clamp(19px, 1.6vw, 22px);
  --text-small: 14px;
  --text-label: 12px;

  /* Weights */
  --w-light: 300;
  --w-reg:   400;
  --w-med:   500;
  --w-semi:  600;

  /* Line heights */
  --lh-hero: 1.02;
  --lh-h1:   1.06;
  --lh-h2:   1.12;
  --lh-h3:   1.25;
  --lh-body: 1.7;

  /* Letter spacing */
  --ls-display: 0;
  --ls-label:   0.22em;

  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 16px; --sp-4: 24px;
  --sp-5: 32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 96px; --sp-9: 140px;

  /* Layout */
  --max-width:     1280px;
  --max-narrow:    760px;
  --container-pad: 40px;
  --nav-height:    80px;

  --transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------------------
   3. RESET
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--w-reg);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
p { overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ------------------------------------------------------------
   4. BASE TYPE
   ------------------------------------------------------------ */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  letter-spacing: var(--ls-display);
  color: var(--ink);
}
h1 { font-size: var(--text-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--text-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--text-h3); line-height: var(--lh-h3); font-weight: var(--w-reg); }
h4 { font-size: var(--text-h4); line-height: 1.3; font-weight: var(--w-med); }

.lead { font-size: var(--text-lead); line-height: 1.55; color: var(--ink-soft); font-weight: var(--w-reg); }

.label-text {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--w-semi);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brass);
}

.accent { color: var(--brass); }

/* ------------------------------------------------------------
   5. LAYOUT HELPERS
   ------------------------------------------------------------ */
.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--container-pad); }
.narrow { max-width: var(--max-narrow); }
.section { padding: var(--sp-9) 0; }
.section-sm { padding: var(--sp-8) 0; }
.section-head { max-width: 720px; margin-bottom: var(--sp-7); }
.section-head .label-text { display: block; margin-bottom: var(--sp-3); }
.section-head h2 { margin-bottom: var(--sp-4); }
.hr-fine { border: none; border-top: 1px solid var(--sand-deep); }

.bg-ink  { background: var(--ink);  color: var(--bone); }
.bg-sand { background: var(--sand); }
.bg-ink h1, .bg-ink h2, .bg-ink h3 { color: var(--bone); }

/* ------------------------------------------------------------
   6. BUTTONS
   ------------------------------------------------------------ */
.btn-primary, .btn-secondary, .btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: var(--text-small);
  font-weight: var(--w-semi); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 15px 30px; cursor: pointer; transition: var(--transition);
  border: 1px solid transparent; border-radius: 2px;
}
.btn-primary { background: var(--brass); color: var(--white); }
.btn-primary:hover { background: var(--brass-deep); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--bone); }
.btn-ghost { background: transparent; color: var(--bone); border-color: rgba(255,255,255,0.5); }
.btn-ghost:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--text-small); font-weight: var(--w-semi);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--brass);
  transition: var(--transition);
}
.link-arrow:hover { gap: 14px; color: var(--brass-deep); }

/* ------------------------------------------------------------
   7. NAV
   ------------------------------------------------------------ */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-height);
  background: transparent;
  transition: var(--transition);
}
.site-nav.is-scrolled,
.site-nav.is-solid {
  background: var(--bone);
  border-bottom: 1px solid var(--sand-deep);
}
.nav-inner { height: var(--nav-height); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); }
.nav-logo {
  font-family: var(--font-display); font-weight: var(--w-reg);
  font-size: 25px; letter-spacing: 0.01em; color: var(--ink);
}
.site-nav.at-top .nav-logo,
.site-nav.at-top .nav-link { color: var(--bone); }
.site-nav.at-top .nav-link:hover { color: var(--white); }
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 32px); }
.nav-link {
  font-size: var(--text-small); font-weight: var(--w-med);
  letter-spacing: 0.04em; color: var(--ink-soft);
  position: relative; transition: var(--transition);
}
.nav-link:hover, .nav-link--active { color: var(--ink); }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px; background: var(--brass);
  transform: scaleX(0); transform-origin: left; transition: transform 0.32s cubic-bezier(0.2,0.6,0.2,1);
}
.nav-link:hover::after, .nav-link--active::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: var(--sp-4); }
.nav-hamburger { display: none; background: none; border: none; cursor: pointer; color: inherit; }
.site-nav.at-top .nav-cta-desktop { color: var(--white); border-color: rgba(255,255,255,0.6); background: transparent; }
.site-nav.at-top .nav-cta-desktop:hover { background: var(--bone); color: var(--ink); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 99; background: var(--bone);
  transform: translateY(-100%); transition: transform 380ms cubic-bezier(0.4,0,0.2,1);
  display: flex; align-items: center; justify-content: center;
}
.mobile-menu.is-open { transform: translateY(0); }
.mobile-menu-inner { display: flex; flex-direction: column; gap: var(--sp-4); text-align: center; }
.mobile-link { font-family: var(--font-display); font-size: 30px; font-weight: var(--w-light); color: var(--ink); }
.mobile-cta { margin-top: var(--sp-4); justify-content: center; }
@media (min-width: 901px) { .mobile-menu { display: none; } }

/* ------------------------------------------------------------
   8. HERO
   ------------------------------------------------------------ */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center;
  color: var(--bone); overflow: hidden; isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(248,245,239,0.08) 1px, transparent 1px) 0 0 / 25% 100%,
    linear-gradient(rgba(248,245,239,0.07) 1px, transparent 1px) 0 0 / 100% 33.333%;
  mask-image: linear-gradient(90deg, rgba(0,0,0,0.38), transparent 68%);
}
.hero-media { position: absolute; inset: 0; z-index: 0; background: var(--ink); }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ""; position: absolute; inset: 0; z-index: 4;
  background:
    linear-gradient(98deg, rgba(16,14,11,0.86) 0%, rgba(16,14,11,0.62) 38%, rgba(16,14,11,0.22) 68%, rgba(16,14,11,0.06) 100%),
    linear-gradient(180deg, rgba(16,14,11,0.34) 0%, rgba(16,14,11,0) 30%, rgba(16,14,11,0.08) 58%, rgba(16,14,11,0.72) 100%),
    radial-gradient(circle at 72% 22%, rgba(233,217,190,0.2), transparent 32%);
}
/* Crossfading, slowly zooming hero slides. The incoming slide fades in on top
   (z3) while the outgoing one stays fully opaque underneath (z2, .is-leaving),
   so the crossfade never dips to the dark base. */
.hero-slide {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04); transition: opacity 1.6s ease-in-out;
}
.hero-slide.is-leaving { opacity: 1; z-index: 2; }
.hero-slide.is-active { opacity: 1; z-index: 3; animation: heroKenBurns 11s linear forwards; }
@keyframes heroKenBurns { from { transform: scale(1.04); } to { transform: scale(1.15); } }
.hero-inner {
  position: relative; z-index: 5; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: var(--sp-7); align-items: end;
  padding-top: calc(var(--nav-height) + var(--sp-5)); padding-bottom: var(--sp-7);
}
.hero-copy { max-width: 900px; }
.hero-label { color: var(--bone); margin-bottom: var(--sp-4); opacity: 0.9; }
.hero h1, .hero-title {
  color: var(--bone); font-size: 92px; line-height: 1.05;
  font-weight: var(--w-light); letter-spacing: 0; max-width: 15ch; margin-bottom: var(--sp-4);
}
.hero-title em { font-style: italic; color: var(--sand); }
/* Soft wide shadow (reads as contrast, not a visible drop shadow) for legibility */
.hero-label, .hero-title, .hero-sub { text-shadow: 0 1px 30px rgba(17,15,12,0.5); }
.hero-title .line { display: block; overflow: visible; padding-bottom: 0.02em; }
.hero-title .line-in { display: block; white-space: nowrap; }

/* Cinematic entrance: hidden only when JS is on, revealed when html.is-ready */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero-title .line-in { opacity: 0; transform: translateY(26px); }
  html.js .hero-label, html.js .hero-sub, html.js .hero-actions, html.js .hero-panel { opacity: 0; transform: translateY(20px); }
  html.is-ready .hero-title .line-in { animation: heroLineUp 1.25s cubic-bezier(0.16,1,0.3,1) forwards; }
  html.is-ready .hero-title .line:nth-child(1) .line-in { animation-delay: 0.04s; }
  html.is-ready .hero-title .line:nth-child(2) .line-in { animation-delay: 0.18s; }
  html.is-ready .hero-title .line:nth-child(3) .line-in { animation-delay: 0.31s; }
  html.is-ready .hero-label   { animation: heroFadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.02s forwards; }
  html.is-ready .hero-sub     { animation: heroFadeUp 1s cubic-bezier(0.16,1,0.3,1) 0.55s forwards; }
  html.is-ready .hero-actions { animation: heroFadeUp 1s cubic-bezier(0.16,1,0.3,1) 0.7s forwards; }
  html.is-ready .hero-panel   { animation: heroFadeUp 1s cubic-bezier(0.16,1,0.3,1) 0.78s forwards; }
}
@keyframes heroLineUp { to { opacity: 1; transform: none; } }
@keyframes heroFadeUp { to { opacity: 1; transform: none; } }
.hero-sub { max-width: 52ch; font-size: var(--text-lead); color: rgba(248,245,239,0.9); margin-bottom: var(--sp-5); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.hero-panel {
  border-left: 1px solid rgba(248,245,239,0.38); padding: var(--sp-4) var(--sp-4) 0 var(--sp-4);
  color: rgba(248,245,239,0.86); backdrop-filter: blur(10px);
}
.hero-panel .label-text { display: block; margin-bottom: var(--sp-4); color: var(--sand); }
.hero-panel-row {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding: 14px 0; border-top: 1px solid rgba(248,245,239,0.2);
  font-size: var(--text-small);
}
.hero-panel-row span:first-child { font-family: var(--font-display); font-size: 22px; color: var(--bone); }
.hero-panel-row span:last-child { text-align: right; color: rgba(248,245,239,0.66); padding-left: var(--sp-3); }
.hero-meta {
  display: none;
  position: absolute; z-index: 5; right: var(--container-pad); bottom: var(--sp-4);
  text-align: right; font-size: var(--text-small); color: rgba(248,245,239,0.8);
  border-right: 1px solid rgba(255,255,255,0.35); padding-right: 16px;
}
.hero-meta strong { display: block; font-family: var(--font-display); font-weight: var(--w-reg); font-size: 19px; color: var(--bone); }
.hero-scroll {
  position: absolute; left: var(--container-pad); bottom: var(--sp-5); z-index: 5;
  font-size: var(--text-label); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: rgba(248,245,239,0.7);
}
.hero-scroll::before {
  content: ""; display: inline-block; width: 42px; height: 1px; margin-right: 12px;
  vertical-align: middle; background: rgba(248,245,239,0.48);
}

/* ------------------------------------------------------------
   9. INTRO / STATEMENT
   ------------------------------------------------------------ */
.atelier {
  position: relative; padding: var(--sp-9) 0 var(--sp-8); background: var(--ink); color: var(--bone);
  overflow: hidden;
}
.atelier::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(248,245,239,0.06) 1px, transparent 1px) 0 0 / 12.5% 100%,
    radial-gradient(circle at 12% 20%, rgba(176,137,79,0.18), transparent 24%);
}
.atelier-grid {
  position: relative; display: grid; grid-template-columns: 0.72fr 1.28fr;
  gap: var(--sp-8); align-items: center;
}
.atelier-copy { max-width: 480px; }
.atelier-copy .label-text { display: block; margin-bottom: var(--sp-3); color: var(--sand); }
.atelier-copy h2 { color: var(--bone); margin-bottom: var(--sp-4); }
.atelier-copy .lead { color: rgba(248,245,239,0.74); }
.atelier-stack {
  display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, 56px);
  gap: var(--sp-3);
}
.atelier-frame {
  position: relative; overflow: hidden; background: rgba(248,245,239,0.08);
  border: 1px solid rgba(248,245,239,0.16);
}
.atelier-frame--large { grid-column: 1 / 9; grid-row: 1 / 7; }
.atelier-frame--portrait { grid-column: 8 / 13; grid-row: 2 / 9; }
.atelier-frame--small { grid-column: 3 / 7; grid-row: 6 / 9; }
.atelier-frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(0.2,0.6,0.2,1), filter 1.1s ease;
}
.atelier-frame:hover img { transform: scale(1.04); filter: saturate(1.06) contrast(1.03); }
.atelier-frame figcaption {
  position: absolute; left: 18px; bottom: 16px; z-index: 1;
  font-size: var(--text-label); font-weight: var(--w-semi); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: rgba(248,245,239,0.86); text-shadow: 0 1px 18px rgba(17,15,12,0.65);
}
.atelier-frame--large figcaption { top: 16px; bottom: auto; }
.atelier-frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(17,15,12,0.24) 0%, transparent 30%, transparent 52%, rgba(17,15,12,0.48) 100%);
}
.statement { padding: var(--sp-9) 0; }
.statement-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--sp-8); align-items: start; }
.statement-grid .label-text { display: block; margin-bottom: var(--sp-3); }
.statement h2 { font-size: var(--text-h2); font-weight: var(--w-light); }
.statement p + p { margin-top: var(--sp-4); }

/* ------------------------------------------------------------
   10. SERVICES GRID (disciplines)
   ------------------------------------------------------------ */
.disciplines {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px;
  background: var(--ink); border: 1px solid var(--ink);
}
.discipline--wide { grid-column: span 7; min-height: 620px; }
.discipline {
  position: relative; min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--sp-6); color: var(--bone); overflow: hidden; isolation: isolate;
}
.discipline:nth-child(2) { grid-column: span 5; min-height: 620px; }
.discipline:nth-child(n+3) { grid-column: span 4; min-height: 390px; }
.discipline img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 900ms cubic-bezier(0.2,0.6,0.2,1), filter 900ms ease; }
.discipline::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(17,15,12,0.03) 10%, rgba(17,15,12,0.34) 48%, rgba(17,15,12,0.9) 100%),
    linear-gradient(90deg, rgba(17,15,12,0.36), transparent 58%);
}
.discipline::before {
  content: ""; position: absolute; inset: var(--sp-4); z-index: -1;
  border: 1px solid rgba(248,245,239,0.26); opacity: 0; transform: scale(1.03);
  transition: opacity 500ms ease, transform 700ms cubic-bezier(0.2,0.6,0.2,1);
}
.discipline:hover img { transform: scale(1.055); filter: saturate(1.05) contrast(1.04); }
.discipline:hover::before { opacity: 1; transform: none; }
.discipline-num { font-family: var(--font-display); font-size: 15px; opacity: 0.7; margin-bottom: var(--sp-2); }
.discipline h3 { color: var(--bone); font-size: var(--text-h3); margin-bottom: var(--sp-2); }
.discipline--wide h3, .discipline:nth-child(2) h3 { font-size: var(--text-h2); }
.discipline p { font-size: var(--text-small); color: rgba(248,245,239,0.85); max-width: 38ch; margin-bottom: var(--sp-3); }
.discipline .link-arrow { color: var(--sand); }

/* ------------------------------------------------------------
   12. CTA BAND
   ------------------------------------------------------------ */
.cta-band {
  position: relative; padding: var(--sp-9) 0; text-align: center; overflow: hidden;
  background: var(--white); color: var(--ink); border-top: 1px solid var(--sand-deep);
}
.cta-band h2 { color: var(--ink); font-size: var(--text-h1); margin-bottom: var(--sp-4); max-width: 18ch; margin-inline: auto; }
.cta-band p { color: var(--ink-soft); max-width: 50ch; margin: 0 auto var(--sp-6); }
.cta-band .label-text { color: var(--brass); }

/* ------------------------------------------------------------
   13. FOOTER
   ------------------------------------------------------------ */
.site-footer { background: var(--ink); color: rgba(248,245,239,0.75); padding: var(--sp-8) 0 var(--sp-5); }
.footer-main { display: grid; grid-template-columns: 1.8fr 1fr 1fr; gap: var(--sp-6); padding-bottom: var(--sp-7); border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer-mark { width: 40px; height: 40px; margin-bottom: var(--sp-3); opacity: 0.95; }
.footer-logo { font-family: var(--font-display); font-size: 26px; color: var(--bone); margin-bottom: var(--sp-3); display: inline-block; }
.footer-tagline { font-size: var(--text-small); max-width: 34ch; margin-bottom: var(--sp-4); }
.footer-contact a { display: block; font-size: var(--text-small); color: var(--bone); }
.footer-nav-heading { font-size: var(--text-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--brass); margin-bottom: var(--sp-4); }
.footer-nav-col ul li { margin-bottom: 10px; }
.footer-nav-col a { font-size: var(--text-small); transition: var(--transition); }
.footer-nav-col a:hover { color: var(--bone); }
.footer-bottom { display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; padding-top: var(--sp-5); font-size: var(--text-small); }

/* ------------------------------------------------------------
   14. INTERIOR PAGES
   ------------------------------------------------------------ */

/* Page hero (standard band for discipline / about / contact pages) */
.page-hero { position: relative; padding: calc(var(--nav-height) + var(--sp-8)) 0 var(--sp-7); background: var(--bone); }
.page-hero--image { color: var(--bone); padding: calc(var(--nav-height) + var(--sp-9)) 0 var(--sp-8); overflow: hidden; }
.page-hero-media { position: absolute; inset: 0; z-index: 0; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero--image::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(17,15,12,0.45) 0%, rgba(17,15,12,0.25) 40%, rgba(17,15,12,0.72) 100%); }
.page-hero-inner { position: relative; z-index: 1; max-width: 880px; }
.page-hero h1 { font-size: var(--text-h1); margin-top: var(--sp-3); }
.page-hero--image h1 { color: var(--bone); }
.page-hero .label-text { display: block; }
.page-hero-subline { font-size: var(--text-lead); color: var(--ink-soft); margin-top: var(--sp-4); max-width: 60ch; }
.page-hero--image .page-hero-subline { color: rgba(248,245,239,0.9); }

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--text-small); color: var(--ink-soft); margin-bottom: var(--sp-4); }
.page-hero--image .breadcrumb { color: rgba(248,245,239,0.9); }
.page-hero--image .label-text { color: var(--sand); text-shadow: 0 1px 12px rgba(17,15,12,0.55); }
.page-hero--image h1, .page-hero--image .page-hero-subline { text-shadow: 0 1px 18px rgba(17,15,12,0.4); }
.breadcrumb a:hover { color: var(--brass); }
.breadcrumb-sep { color: var(--sand-deep); }
.page-hero--image .breadcrumb-sep { color: rgba(255,255,255,0.5); }

/* Prose / content blocks */
.prose { max-width: var(--max-narrow); }
.prose p { margin-bottom: var(--sp-4); color: var(--ink-soft); }
.prose h2 { margin: var(--sp-7) 0 var(--sp-3); }
.prose h3 { margin: var(--sp-5) 0 var(--sp-2); }
.prose ul { margin: var(--sp-3) 0 var(--sp-4); }
.prose ul li { position: relative; padding-left: 22px; margin-bottom: 10px; color: var(--ink-soft); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 1px; background: var(--brass); }

/* Two-column: content + sidebar CTA */
.content-grid { display: grid; grid-template-columns: 1fr 340px; gap: var(--sp-8); align-items: start; }
.sidebar-cta { position: sticky; top: calc(var(--nav-height) + var(--sp-4)); background: var(--bone-2); border: 1px solid var(--sand-deep); padding: var(--sp-5); }
.sidebar-cta .label-text { display: block; margin-bottom: var(--sp-2); }
.sidebar-cta h3 { font-size: var(--text-h4); margin-bottom: var(--sp-3); }
.sidebar-cta p { font-size: var(--text-small); color: var(--ink-soft); margin-bottom: var(--sp-4); }
.sidebar-cta .btn-primary { width: 100%; justify-content: center; }
.sidebar-phone { display: block; text-align: center; margin-top: var(--sp-3); font-size: var(--text-small); color: var(--ink-soft); }

/* Value props ("why Forma Nova") */
.valueprops { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5) var(--sp-6); }
.valueprop { border-top: 1px solid var(--sand-deep); padding-top: var(--sp-3); }
.valueprop-num { font-family: var(--font-display); font-size: 15px; color: var(--brass); margin-bottom: var(--sp-2); }
.valueprop h3 { font-size: var(--text-h4); margin-bottom: var(--sp-2); font-weight: var(--w-med); }
.valueprop p { font-size: var(--text-small); color: var(--ink-soft); }

/* Split feature (image + text), reuse on discipline pages */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.split--rev .split-media { order: 2; }
.split-media { position: relative; min-height: 480px; }
.split-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-copy { display: flex; flex-direction: column; justify-content: center; padding: var(--sp-8); }
.split-copy .label-text { margin-bottom: var(--sp-3); }
.split-copy h2 { margin-bottom: var(--sp-4); }
.split-copy p { color: var(--ink-soft); margin-bottom: var(--sp-3); }

/* Contact form */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-size: var(--text-small); font-weight: var(--w-med); color: var(--ink); }
.form-field label .req { color: var(--brass); }
.form-field input, .form-field textarea, .form-field select {
  border: 1px solid var(--sand-deep); background: var(--bone-2); padding: 14px 16px;
  font-size: var(--text-body); color: var(--ink); border-radius: 2px; transition: var(--transition);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--brass); }
.form-field textarea { min-height: 140px; resize: vertical; }
.form-radios { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.form-radio { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-small); color: var(--ink-soft); }
.form-note { font-size: var(--text-small); color: var(--ink-soft); margin-top: var(--sp-3); }
.form-error { font-size: var(--text-small); color: var(--error); margin-top: var(--sp-3); }
.form-error a { color: var(--error); text-decoration: underline; }

/* Contact split layout */
.contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-8); align-items: start; }
.contact-aside h3 { font-size: var(--text-h4); margin-bottom: var(--sp-2); }
.contact-aside p { font-size: var(--text-small); color: var(--ink-soft); margin-bottom: var(--sp-4); }
.contact-aside a { color: var(--brass); }


/* ------------------------------------------------------------
   15. RESPONSIVE
   ------------------------------------------------------------ */
/* Nav-only collapse: with 7 top-level items (incl. Team), the desktop row + logo
   + CTA needs ~965px. Below 980px, switch just the nav to the hamburger so the
   row never crowds or wraps, without disturbing the 900px layout breakpoint. */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-cta-desktop { display: none; }
  .nav-hamburger { display: block; }
}
@media (max-width: 900px) {
  :root { --container-pad: 24px; }
  .nav-links { display: none; }
  .nav-cta-desktop { display: none; }
  .nav-hamburger { display: block; }
  .hero { align-items: center; }
  .hero::before { opacity: 0.55; mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.6)); }
  .hero-media img { object-position: center bottom; }
  .hero-inner {
    grid-template-columns: 1fr; gap: var(--sp-5);
    padding-top: calc(var(--nav-height) + var(--sp-5)); padding-bottom: var(--sp-7);
  }
  .hero h1, .hero-title { font-size: 58px; line-height: 1.05; max-width: 15ch; }
  .hero-panel { display: none; }
  .atelier-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .atelier-copy { max-width: 680px; }
  .atelier-stack { grid-template-rows: repeat(7, 44px); }
  .atelier-frame--large { grid-column: 1 / 10; grid-row: 1 / 6; }
  .atelier-frame--portrait { grid-column: 7 / 13; grid-row: 3 / 8; }
  .atelier-frame--small { grid-column: 2 / 7; grid-row: 6 / 8; }
  .statement-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .disciplines { grid-template-columns: 1fr; }
  .discipline--wide, .discipline:nth-child(2), .discipline:nth-child(n+3) { grid-column: auto; min-height: 430px; }
  .discipline--wide h3, .discipline:nth-child(2) h3 { font-size: var(--text-h3); }
  .footer-main { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .hero-meta { display: none; }
  .content-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .sidebar-cta { position: static; }
  .valueprops { grid-template-columns: 1fr 1fr; }
  .split, .split--rev { grid-template-columns: 1fr; }
  .split--rev .split-media { order: 0; }
  .split-media { min-height: 320px; }
  .split-copy { padding: var(--sp-6) var(--container-pad); }
  .contact-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
}
@media (max-width: 560px) {
  .footer-main { grid-template-columns: 1fr; }
  .valueprops { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .hero-inner { padding-bottom: var(--sp-6); }
  .hero h1, .hero-title { font-size: 40px; line-height: 1.06; max-width: 15ch; }
  .hero-label { font-size: 10px; margin-bottom: var(--sp-3); }
  .hero-sub { font-size: 16px; line-height: 1.55; margin-bottom: var(--sp-4); }
  .hero-actions { align-items: stretch; }
  .hero-actions .btn-primary, .hero-actions .btn-ghost { width: 100%; justify-content: center; }
  .hero-scroll { display: none; }
  .atelier { padding: var(--sp-8) 0; }
  .atelier-stack { display: block; }
  .atelier-frame { aspect-ratio: 4 / 5; margin-top: var(--sp-3); }
  .atelier-frame--small { aspect-ratio: 16 / 10; }
  .discipline { min-height: 360px; padding: var(--sp-5); }
}

/* ------------------------------------------------------------
   16. MOTION (scroll reveal + reduced-motion guard)
   ------------------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(28px); will-change: opacity, transform;
  transition: opacity 0.9s cubic-bezier(0.2,0.6,0.2,1), transform 0.9s cubic-bezier(0.2,0.6,0.2,1); }
.reveal.reveal-in { opacity: 1; transform: none; }
/* Stagger items inside a grid as they reveal */
.reveal-stagger > * { opacity: 0; transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.2,0.6,0.2,1), transform 0.8s cubic-bezier(0.2,0.6,0.2,1); }
.reveal-stagger.reveal-in > * { opacity: 1; transform: none; }
.reveal-stagger.reveal-in > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.reveal-in > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.reveal-in > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger.reveal-in > *:nth-child(5) { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-slide { animation: none !important; }
  .hero-slide.is-active { transform: none; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------
   17. INTRO LOADER (signature arrival, homepage only)
   ------------------------------------------------------------ */
.intro-loader {
  position: fixed; inset: 0; z-index: 9999; background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  animation: introOut 0.9s ease 1.6s forwards; /* CSS auto-dismiss even without JS */
}
.intro-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-loader-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.intro-monogram { width: 58px; height: 58px; color: var(--brass); opacity: 0; transform: translateY(8px);
  animation: introIn 0.9s cubic-bezier(0.2,0.6,0.2,1) 0.1s forwards; }
.intro-monogram svg { width: 100%; height: 100%; }
.intro-word { font-family: var(--font-display); font-weight: var(--w-light); font-size: 30px;
  letter-spacing: 0.02em; color: var(--bone); opacity: 0; transform: translateY(8px);
  animation: introIn 1s cubic-bezier(0.2,0.6,0.2,1) 0.3s forwards; }
.intro-line { width: 0; height: 1px; background: var(--brass); animation: introLine 1s ease 0.55s forwards; }
body.intro-active { overflow: hidden; }
@keyframes introIn { to { opacity: 1; transform: none; } }
@keyframes introLine { to { width: 92px; } }
@keyframes introOut { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .intro-loader { display: none; } .interlude-media img { animation: none; transform: none; } }

/* ------------------------------------------------------------
   18. IMMERSIVE INTERLUDE
   ------------------------------------------------------------ */
.interlude { position: relative; min-height: 82vh; display: flex; align-items: center;
  color: var(--bone); overflow: hidden; }
.interlude-media { position: absolute; inset: 0; z-index: 0; }
.interlude-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04);
  animation: interludeDrift 20s ease-in-out infinite alternate; }
@keyframes interludeDrift { from { transform: scale(1.04); } to { transform: scale(1.13); } }
.interlude::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(17,15,12,0.5), rgba(17,15,12,0.42)); }
.interlude-inner { position: relative; z-index: 2; }
.interlude-label { color: var(--sand); display: block; margin-bottom: var(--sp-4); }
.interlude-quote { font-family: var(--font-display); font-weight: var(--w-light);
  font-size: clamp(30px, 4.4vw, 60px); line-height: 1.12; letter-spacing: var(--ls-display);
  max-width: 20ch; color: var(--bone); }

/* ------------------------------------------------------------
   19. SITE-WIDE POLISH (page entry, hero drift, hover detail)
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  /* Smooth arrival on every page */
  body { animation: pageEnter 0.7s cubic-bezier(0.2,0.6,0.2,1) both; }
  /* Every image hero breathes with a slow drift, like the homepage */
  .page-hero--image .page-hero-media img {
    animation: heroDrift 24s ease-in-out infinite alternate;
  }
}
@keyframes pageEnter { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroDrift { from { transform: scale(1.03); } to { transform: scale(1.12); } }


/* Horizontal Selected Work rail (homepage signature) */
.section-rail {
  position: relative; isolation: isolate;
  overflow: hidden; background: var(--ink); color: var(--bone);
  padding-top: var(--sp-9); padding-bottom: var(--sp-8);
}
.section-rail::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(248,245,239,0.06) 1px, transparent 1px) 0 0 / 12.5% 100%,
    linear-gradient(rgba(248,245,239,0.045) 1px, transparent 1px) 0 0 / 100% 33.333%,
    radial-gradient(circle at 88% 12%, rgba(176,137,79,0.16), transparent 22%);
}
.section-rail .section-head h2 { color: var(--bone); }
.section-rail .section-head { margin-bottom: var(--sp-6); }
.work-rail {
  display: flex; gap: var(--sp-3); overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: 0 var(--container-pad) var(--sp-4);
  scrollbar-width: thin; scrollbar-color: rgba(248,245,239,0.32) transparent;
}
.work-rail::-webkit-scrollbar { height: 3px; }
.work-rail::-webkit-scrollbar-track { background: transparent; }
.work-rail::-webkit-scrollbar-thumb { background: rgba(248,245,239,0.32); border-radius: 2px; }
.work-rail .work-cell {
  flex: 0 0 520px; aspect-ratio: 4 / 3;
  scroll-snap-align: start; overflow: hidden; background: rgba(248,245,239,0.08);
  border: 1px solid rgba(248,245,239,0.12);
}
.work-rail .work-cell:nth-child(2n) { flex-basis: 420px; aspect-ratio: 3 / 4; }
.work-rail .work-cell:nth-child(3n) { flex-basis: 640px; aspect-ratio: 16 / 9; }
.work-rail .work-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(0.2,0.6,0.2,1), filter 1s ease; }
.work-rail .work-cell:hover img { transform: scale(1.045); filter: saturate(1.07) contrast(1.04); }
.rail-foot { margin-top: var(--sp-4); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.rail-hint { font-size: var(--text-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: rgba(248,245,239,0.58); }
.section-rail .link-arrow { color: var(--sand); }
.section-rail .link-arrow:hover { color: var(--bone); }
@media (max-width: 560px) { .work-rail .work-cell, .work-rail .work-cell:nth-child(2n), .work-rail .work-cell:nth-child(3n) { flex-basis: 82vw; aspect-ratio: 4 / 5; } }

/* Category work gallery (discipline pages) */
.work-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.work-cell { display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--sand); }
.work-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.2,0.6,0.2,1); }
.work-cell:hover img { transform: scale(1.05); }
@media (max-width: 900px) { .work-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .work-gallery { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .work-cell:hover img { transform: none; } }

/* Lightbox for portfolio images */
.fn-lightbox {
  position: fixed; inset: 0; z-index: 11000; background: rgba(17,15,12,0.94);
  display: none; align-items: center; justify-content: center;
  padding: 5vh calc(clamp(12px, 3vw, 44px) + 68px) 12vh;
  opacity: 0; transition: opacity 0.35s ease;
}
.fn-lightbox.is-open { display: flex; opacity: 1; }
.fn-lightbox img { width: min(100%, 1400px); height: 72vh; object-fit: cover; box-shadow: 0 30px 80px rgba(0,0,0,0.55); }
.fn-lightbox-close {
  position: absolute; top: clamp(12px, 3vw, 32px); right: clamp(12px, 3vw, 44px);
  width: 46px; height: 46px;
  background: none; border: 1px solid rgba(248,245,239,0.4);
  color: var(--bone); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.fn-lightbox-close:hover { border-color: var(--brass); color: var(--brass); }
.fn-lightbox-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border: 1px solid var(--brass); background: none;
  color: var(--bone); font-size: 22px; line-height: 1; cursor: pointer;
  transition: var(--transition);
}
.fn-lightbox-btn:hover { background: var(--brass); color: var(--ink); }
.fn-lightbox-prev { left: clamp(12px, 3vw, 44px); }
.fn-lightbox-next { right: clamp(12px, 3vw, 44px); }
.fn-lightbox-caption {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 26px; text-align: center; max-width: 80vw;
  color: rgba(248,245,239,0.85); font-size: 12.5px; letter-spacing: 0.04em;
}
.fn-lightbox-count {
  display: block; margin-top: 6px; color: var(--brass);
  font-size: 10.5px; letter-spacing: 0.24em;
}
@media (max-width: 700px) {
  .fn-lightbox { padding: 4vh 10px 14vh; }
  .fn-lightbox-btn { width: 42px; height: 42px; }
  .fn-lightbox img { height: 58vh; }
}
.work-cell { cursor: pointer; }

/* Signature custom cursor (desktop pointer only) */
.fn-cursor {
  position: fixed; top: 0; left: 0; z-index: 12000; pointer-events: none;
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  border: 1px solid rgba(176,137,79,0.9); background: rgba(176,137,79,0.10);
  display: flex; align-items: center; justify-content: center;
  transition: width .32s cubic-bezier(0.2,0.6,0.2,1), height .32s cubic-bezier(0.2,0.6,0.2,1),
    margin .32s cubic-bezier(0.2,0.6,0.2,1), background .32s ease, border-color .32s ease;
}
.fn-cursor.is-hidden { opacity: 0; }
.fn-cursor.is-active { width: 44px; height: 44px; margin: -22px 0 0 -22px; background: rgba(176,137,79,0.14); }
.fn-cursor.is-view { width: 88px; height: 88px; margin: -44px 0 0 -44px; background: rgba(27,24,20,0.42); border-color: rgba(248,245,239,0.55); }
.fn-cursor-label { font-family: var(--font-body); font-size: 11px; font-weight: var(--w-semi); letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone); opacity: 0; transition: opacity .3s ease; }
.fn-cursor.is-view .fn-cursor-label { opacity: 1; }
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor .work-cell, html.has-cursor .discipline { cursor: none; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto; }

/* Animated underline on inline prose links */
.prose a:not(.link-arrow) {
  color: var(--brass); background-image: linear-gradient(var(--brass), var(--brass));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: left 1.15em;
  transition: background-size 0.35s cubic-bezier(0.2,0.6,0.2,1);
}
.prose a:not(.link-arrow):hover { background-size: 100% 1px; }

@media (prefers-reduced-motion: reduce) {
  .page-hero--image .page-hero-media img { animation: none; transform: none; }
}

/* ------------------------------------------------------------
   20. PROJECT DETAIL TEMPLATE PROTOTYPE
   ------------------------------------------------------------ */
.project-template { background: var(--bone); color: var(--ink); overflow: hidden; }

@keyframes nyLoop {
  to { transform: translateX(-50%); }
}

/* ============================================================
   20. PROJECT DETAIL PAGES v2 (web-native rebuild of the Canva
   page-1 design; palette/type identical, real document flow)
   ============================================================ */
.pd {
  overflow-anchor: none; /* scroll anchoring fights the collapsing hero */
  /* palette = site tokens (homepage is source of truth) */
  --pd-green: var(--ink);
  --pd-green-soft: rgba(27, 24, 20, 0.85);
  --pd-gold: var(--brass);
  --pd-cream: var(--bone);
  --pd-cream-bright: var(--bone);
  --pd-ink: var(--ink);
  --pd-ink-soft: var(--ink-soft);
  background: var(--pd-cream);
  color: var(--pd-ink);
  font-family: var(--font-body);
}
body:has(.pd) { animation: none !important; opacity: 1 !important; background: var(--pd-green); }
.pd .btn-primary { color: var(--white); }
.pd .btn-ghost { color: var(--bone); }
.pd-hero-media img, .pd-gallery-seq img, .pd-mini img, .pd-view img, .featured-project-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- shared header/footer chrome --- */
.pd-chrome {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 20px clamp(20px, 4vw, 56px);
}
.pd-header { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
.pd-brand { display: flex; align-items: center; gap: 14px; }
.pd-mark {
  font-family: var(--font-display); font-weight: 300; color: var(--pd-gold);
  font-size: clamp(26px, 2.4vw, 34px); line-height: 1; letter-spacing: 0.02em;
}
.pd-mark span { margin-left: -0.12em; }
.pd-brand-copy strong {
  display: block; font-size: clamp(11px, 0.9vw, 13px); font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--pd-cream-bright);
}
.pd-brand-copy small {
  display: block; font-size: clamp(9px, 0.75vw, 11px); letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--pd-gold); margin-top: 4px;
}
.pd-nav { display: flex; gap: clamp(16px, 2.4vw, 34px); }
.pd-nav a {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(248,245,239,0.88); padding: 6px 0; position: relative; white-space: nowrap;
}
.pd-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--pd-gold); transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s ease;
}
.pd-nav a:hover::after, .pd-nav a[aria-current]::after { transform: scaleX(1); }
.pd-cta {
  border: 1px solid var(--pd-gold); color: var(--pd-cream-bright);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 12px 22px; transition: background 0.3s ease, color 0.3s ease; white-space: nowrap;
}
.pd-cta:hover { background: var(--pd-gold); color: var(--pd-green); }

/* --- hero: true full-height --- */
.pd-hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  background: var(--ink); display: flex; align-items: center; overflow: hidden;
}
.pd-hero-media { position: absolute; inset: 0; margin: 0; }
.pd-hero-media img, .pd-hero-media video { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }

/* Full-bleed flythrough band (fly-around video between Architecture + Interiors).
   Same cover-video technique as the hero; the ultra-wide 2:1 source fills a band
   of fixed height at any width. A small eyebrow label sits over a soft scrim. */
.pd-flythrough { position: relative; height: calc(100svh - var(--nav-height)); overflow: hidden; background: var(--ink); }
.pd-flythrough-media { position: absolute; inset: 0; }
.pd-flythrough-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-flythrough-frame { width: 100%; height: 100%; border: 0; display: block; }
.pd-flythrough::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(16,14,11,0.34) 0%, rgba(16,14,11,0) 26%, rgba(16,14,11,0) 70%, rgba(16,14,11,0.4) 100%);
}
.pd-flythrough-copy { position: absolute; z-index: 2; left: clamp(20px, 4vw, 56px); top: clamp(20px, 4vh, 40px); color: var(--bone); }
.pd-flythrough-label { color: var(--bone); opacity: 0.92; }
.pd-flythrough-copy h2 { font-family: var(--font-display); font-weight: 300; color: var(--bone); font-size: clamp(24px, 2.4vw, 38px); margin-top: 10px; }
@media (max-width: 700px) { .pd-flythrough { height: calc(100svh - var(--nav-height)); } }
@media (prefers-reduced-motion: reduce) { .pd-flythrough-video { animation: none; } }
/* 360 walkthrough band: same full-screen treatment as the flythrough. The Kuula
   viewer is cross-origin, so no scrim (it would dim the tour); the label rides a
   text-shadow and the copy is pointer-events:none so it never blocks the tour. */
.pd-tour360 { position: relative; height: calc(100svh - var(--nav-height)); overflow: hidden; background: var(--ink); }
.pd-tour360-media { position: absolute; inset: 0; }
.pd-tour360-frame { width: 100%; height: 100%; border: 0; display: block; }
.pd-tour360-copy { position: absolute; z-index: 2; left: clamp(20px, 4vw, 56px); top: clamp(20px, 4vh, 40px); color: var(--bone); pointer-events: none; text-shadow: 0 1px 14px rgba(0,0,0,0.55); }
.pd-tour360-label { color: var(--bone); opacity: 0.92; }
.pd-tour360-copy h2 { font-family: var(--font-display); font-weight: 300; color: var(--bone); font-size: clamp(24px, 2.4vw, 38px); margin-top: 10px; }
.pd-hero-media img { animation: pdDrift 24s ease-in-out infinite alternate; }
@keyframes pdDrift { from { transform: scale(1); } to { transform: scale(1.06); } }
/* same directional scrim as the homepage hero (warm ink, not green) */
.pd-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(98deg, rgba(16,14,11,0.86) 0%, rgba(16,14,11,0.62) 38%, rgba(16,14,11,0.22) 68%, rgba(16,14,11,0.06) 100%),
    linear-gradient(180deg, rgba(16,14,11,0.34) 0%, rgba(16,14,11,0) 30%, rgba(16,14,11,0.08) 58%, rgba(16,14,11,0.72) 100%),
    radial-gradient(circle at 72% 22%, rgba(233,217,190,0.2), transparent 32%);
}
.pd-hero-copy {
  position: relative; z-index: 2; max-width: 720px;
  padding: clamp(120px, 16vh, 180px) clamp(20px, 4vw, 56px) clamp(96px, 12vh, 140px);
}
.pd-hero-copy h1 {
  font-family: var(--font-display); font-weight: 300; color: var(--pd-cream-bright);
  font-size: clamp(42px, 6.2vw, 88px); line-height: 1.06; margin-bottom: clamp(20px, 2.6vh, 32px);
}
.pd-hero-copy > p {
  font-size: clamp(15px, 1.15vw, 18px); line-height: 1.6; color: rgba(248,245,239,0.9);
  max-width: 46ch; margin-bottom: clamp(28px, 3.6vh, 44px);
}
.pd-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.pd-scroll {
  position: absolute; left: clamp(20px, 4vw, 56px); bottom: 28px; z-index: 2;
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(248,245,239,0.78);
}
.pd-scroll span { color: var(--pd-gold); margin-right: 8px; }

/* --- residence band --- */
.pd-residence {
  background: var(--pd-cream); padding: clamp(48px, 7vh, 96px) clamp(20px, 4vw, 56px);
  display: grid; grid-template-columns: minmax(260px, 360px) 1fr;
  gap: clamp(32px, 4vw, 72px); align-items: stretch;
  box-sizing: border-box;
}
@media (min-width: 901px) {
  /* container-driven screen module: the browser distributes the tail
     (overview 1fr / band auto / footer auto) inside one nav-adjusted
     viewport - no hand-balanced height equations per breakpoint */
  .pd-tail {
    min-height: calc(100svh - var(--nav-height));
    display: grid;
    grid-template-rows: 1fr auto auto;
  }
  /* Two stacked galleries (discipline pages with an Architecture AND Interiors
     row): each .pd-residence sizes to a full screen so both galleries render
     identically to the single-row original, one after another. Not the fixed
     3-row single-screen grid, which would stretch only the first section. */
  .pd-tail--stacked { min-height: 0; display: block; }
  .pd-tail--stacked .pd-residence {
    min-height: calc(100svh - var(--nav-height));
    align-content: center;
  }
  .pd-residence {
    min-height: 0; max-height: none; align-content: center;
    padding-top: clamp(14px, 2.2vh, 26px); padding-bottom: clamp(14px, 2.2vh, 26px);
  }
  .pd-media .pd-gallery-seq figure { width: min(40vw, 62vh); }
}
/* Interiors screen: its own full .pd-tail below Architecture. The JS handles the
   nav-offset scroll; this is the CSS fallback anchor offset. */
#interiors { scroll-margin-top: var(--nav-height); }
.pd-residence-copy { display: flex; flex-direction: column; min-height: 0; }
.pd-media { min-width: 0; }
.pd-kicker {
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--pd-gold); margin-bottom: 18px;
}
.pd-residence h2 {
  font-family: var(--font-display); font-weight: 300; color: var(--pd-ink);
  font-size: clamp(26px, 2.6vw, 40px); line-height: 1.15; margin-bottom: 18px;
}
.pd-residence-copy p { font-size: 15px; line-height: 1.7; color: var(--pd-ink-soft); margin-bottom: 16px; max-width: 38ch; }
.pd-link {
  display: inline-block; margin-top: 16px; flex: 0 0 auto; align-self: flex-start; font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--pd-ink); border-bottom: 1px solid var(--pd-gold);
  padding-bottom: 6px; transition: color 0.3s ease;
}
.pd-link:hover { color: var(--pd-gold); }
.pd-link span, .pd-actions span { color: var(--pd-gold); }

/* looping gallery, fluid */
.pd-gallery { overflow: hidden; }
.pd-gallery-track { display: flex; width: max-content; animation: pdLoop 84s linear 1.4s infinite; }
.pd-gallery:hover .pd-gallery-track { animation-play-state: paused; }
.pd-gallery { cursor: grab; touch-action: pan-y; }
.pd-gallery.is-dragging { cursor: grabbing; }
.pd-gallery.is-dragging .pd-cover, .pd-gallery.is-dragging figure { pointer-events: none; }
@keyframes pdLoop { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.pd-gallery-seq { display: flex; gap: 8px; padding-right: 8px; }
.pd-gallery-seq figure { margin: 0; flex: 0 0 auto; width: clamp(260px, 27vw, 460px); aspect-ratio: 4 / 3; overflow: hidden; }
.pd-mini { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; }
.pd-mini figure { margin: 0; aspect-ratio: 5 / 4; overflow: hidden; }
.pd-mini img, .pd-gallery-seq img { transition: transform 0.6s ease; }
.pd-mini figure:hover img { transform: scale(1.04); }

/* Day/night hover swap: the base (day) image shows; the night image is layered
   on top and crossfades in on hover. Both live in the same tile. */
.pd-gallery-seq figure.pd-hoverswap { position: relative; }
.pd-gallery-seq figure.pd-hoverswap .pd-hover-img {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease;
  pointer-events: none;
}
.pd-gallery-seq figure.pd-hoverswap:hover .pd-hover-img { opacity: 1; }

/* --- features + inquiry --- */
.pd-lower {
  background: var(--pd-cream-bright);
  display: grid; grid-template-columns: 1fr minmax(300px, 420px) minmax(220px, 340px);
  align-items: stretch; border-top: 1px solid rgba(74,68,60,0.14);
}
@media (min-width: 901px) {
  .pd-lower { min-height: 0; }
  .pd-lower .pd-features {
    align-content: center;
    padding-top: clamp(8px, 1.2vh, 14px); padding-bottom: clamp(8px, 1.2vh, 14px);
    gap: clamp(8px, 1.2vh, 14px) clamp(24px, 3.4vw, 56px);
  }
  .pd-lower .pd-feature { grid-template-columns: 36px 1fr; column-gap: 12px; }
  .pd-lower .pd-icon-img { width: 30px; }
  .pd-lower .pd-feature h3 { margin-bottom: 3px; font-size: 11px; }
  .pd-lower .pd-feature p { line-height: 1.45; font-size: 13px; }
  .pd-lower .pd-inquiry { padding-top: clamp(8px, 1.2vh, 14px); padding-bottom: clamp(8px, 1.2vh, 14px); }
  .pd-lower .pd-inquiry h2 { margin-bottom: 6px; font-size: clamp(20px, 1.8vw, 26px); }
  .pd-lower .pd-inquiry p { margin-bottom: 10px; }
  .pd-lower .pd-inquiry a { padding: 9px 18px; }
}
.pd-features {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 44px) clamp(24px, 3.4vw, 56px);
  padding: clamp(40px, 6vh, 72px) clamp(20px, 4vw, 56px);
}
.pd-feature { display: grid; grid-template-columns: 34px 1fr; column-gap: 16px; }
.pd-feature h3 {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; color: var(--pd-ink); margin-bottom: 8px;
}
.pd-feature p { grid-column: 2; font-size: 13.5px; line-height: 1.6; color: var(--pd-ink-soft); }
.pd-icon { grid-row: 1 / span 2; width: 26px; height: 36px; color: var(--pd-gold); position: relative; }
.pd-icon::before, .pd-icon::after { content: ""; position: absolute; border: 1px solid currentColor; }
.pd-icon-arch::before { inset: 4px 5px 0; border-radius: 12px 12px 0 0; }
.pd-icon-arch::after { left: 13px; top: 4px; bottom: 0; }
.pd-icon-light::before { left: 7px; top: 4px; width: 11px; height: 23px; transform: rotate(45deg); }
.pd-icon-light::after { left: 12px; top: 0; width: 3px; height: 7px; border-width: 0 1px 0 0; }
.pd-icon-frame::before { inset: 3px 7px; }
.pd-icon-frame::after { inset: 8px 11px; }
.pd-inquiry {
  background: var(--pd-green); color: var(--pd-cream-bright);
  padding: clamp(36px, 5vh, 60px) clamp(24px, 3vw, 48px);
  display: flex; flex-direction: column; justify-content: center;
}
.pd-inquiry h2 {
  font-family: var(--font-display); font-weight: 300; color: var(--pd-cream-bright);
  font-size: clamp(24px, 2.2vw, 32px); line-height: 1.25; margin-bottom: 12px;
}
.pd-hero-copy h1, .pd-residence h2 { letter-spacing: 0; }
.pd-inquiry p { font-size: 12.5px; color: rgba(248,245,239,0.78); margin-bottom: 24px; }
.pd-inquiry a {
  align-self: flex-start; border: 1px solid var(--pd-gold); color: var(--pd-cream-bright);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; padding: 12px 24px;
  transition: background 0.3s ease, color 0.3s ease;
}
.pd-inquiry a:hover { background: var(--pd-gold); color: var(--pd-green); }
.pd-view { margin: 0; position: relative; min-height: 0; }
.pd-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --- footer --- */
.pd-footer { background: var(--ink); border-top: 1px solid rgba(176,137,79,0.35); }
.pd-footer .pd-nav { flex-wrap: wrap; }
.pd-footer-copy { font-size: 10.5px; letter-spacing: 0.08em; color: rgba(248,245,239,0.55); white-space: nowrap; }

/* --- responsive --- */
@media (max-width: 1100px) {
  .pd-lower { grid-template-columns: 1fr; }
  .pd-view { display: none; }
}
@media (max-width: 900px) {
  .pd-header .pd-nav { display: none; }
  .pd-residence { grid-template-columns: 1fr; }
  .pd-residence-copy p { max-width: 60ch; }
}
@media (max-width: 700px) {
  .pd-hero-media { inset: 0; }
  .pd-hero::after { background: linear-gradient(180deg, rgba(16,14,11,0.88) 0%, rgba(16,14,11,0.5) 55%, rgba(16,14,11,0.74) 100%); }
  /* gallery keeps the JS auto-drift loop on touch too: finger-drag horizontally
     (touch-action pan-y lets vertical gestures still scroll the page), and it
     auto-scrolls when idle. Wider tiles so one image reads at a time. */
  .pd-gallery-seq figure { width: 78vw; }
  .pd-mini { grid-template-columns: repeat(2, 1fr); }
  .pd-features { grid-template-columns: 1fr; }
  .pd-chrome { padding: 16px 20px; }
  .pd-header .pd-cta { display: none; }
  .pd-footer { flex-direction: column; gap: 18px; }
}
.pd { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .pd { scroll-behavior: auto; } }

/* --- desktop scroll collapse: full-screen hero scrubs down to the
       Canva band proportion (~44svh) as you scroll. CSS scroll-driven
       animation; older browsers and mobile simply keep the full hero. --- */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  /* the pin wrapper holds the hero's full flow space; the hero shrinks
     inside it while stuck to the viewport top, so the collapsed Canva
     band is actually SEEN, with content rising glued to its bottom.
     Progress (--pdp 0..1) is set by the tiny inline script on the page;
     without JS everything stays a full-height hero. */
  .pd-hero-pin { height: 100svh; }
  .pd-hero {
    position: sticky;
    top: 0;
    min-height: 0;
    height: calc(100svh - 60svh * var(--pdp, 0));
    padding-top: calc(var(--nav-height) * var(--pdp, 0));
    box-sizing: border-box;
  }
  .pd-hero-copy {
    transform-origin: left center;
    /* tagline/CTAs fold away, so the title keeps most of its size */
    transform: scale(calc(1 - 0.22 * var(--pdp, 0)));
    padding-top: calc(clamp(120px, 16vh, 180px) * (1 - 0.87 * var(--pdp, 0)));
    padding-bottom: calc(clamp(96px, 12vh, 140px) * (1 - 0.9 * var(--pdp, 0)));
  }
  .pd-hero-copy h1 { margin-bottom: calc(clamp(20px, 2.6vh, 32px) * (1 - var(--pdp, 0))); }
  .pd-hero-copy > p, .pd-hero-copy .pd-actions {
    max-height: calc(240px * (1 - var(--pdp, 0)));
    opacity: max(0, calc(1 - 1.5 * var(--pdp, 0)));
    overflow: hidden;
    margin-bottom: calc(clamp(28px, 3.6vh, 44px) * (1 - var(--pdp, 0)));
  }
  .pd-scroll { opacity: calc(1 - var(--pdp, 0) * 3); }
}
@media (prefers-reduced-motion: reduce) {
  .pd-hero-media img { animation: none; }
  .pd-gallery-track { animation: none; }
}

/* ============================================================
   21. FEATURED PROJECTS (Work overview -> project detail pages)
   ============================================================ */
.featured-projects-section .section-sub { color: var(--ink-soft); max-width: 52ch; margin-top: var(--sp-3); }
.featured-projects {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-5);
}
.featured-project { grid-column: span 2; display: block; }
.featured-project:nth-child(1), .featured-project:nth-child(2) { grid-column: span 3; }
.featured-project-media {
  display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--sand);
}
.featured-project:nth-child(1) .featured-project-media,
.featured-project:nth-child(2) .featured-project-media { aspect-ratio: 16 / 9; }
.featured-project-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.featured-project:hover .featured-project-media img { transform: scale(1.045); }
.featured-project-meta { display: block; padding-top: var(--sp-4); }
.featured-project-sub {
  display: block; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 6px;
}
.featured-project-meta h3 {
  font-family: var(--font-display); font-weight: 300; font-size: 26px;
  color: var(--ink); margin-bottom: 8px;
}
.featured-project .link-arrow { font-size: 12px; }
@media (max-width: 900px) {
  .featured-projects { grid-template-columns: 1fr 1fr; }
  .featured-project, .featured-project:nth-child(1), .featured-project:nth-child(2) { grid-column: span 1; }
  .featured-project-media, .featured-project:nth-child(1) .featured-project-media,
  .featured-project:nth-child(2) .featured-project-media { aspect-ratio: 3 / 2; }
}
@media (max-width: 560px) {
  .featured-projects { grid-template-columns: 1fr; }
}

/* --- pd gallery: uniform tiles + clickable --- */
.pd-gallery-seq figure, .pd-mini figure { cursor: pointer; }

/* has-cursor coverage for detail-page gallery (native cursor must not reappear) */
html.has-cursor [data-cursor],
html.has-cursor .pd-gallery-seq figure,
html.has-cursor .pd-mini figure { cursor: none; }

/* --- pd reconciliation with site chrome (shared nav, icons, type) --- */
.pd-feature { grid-template-columns: 48px 1fr; }
.pd-icon-img { grid-row: 1 / span 2; width: 42px; height: auto; align-self: start; }
.pd-kicker.label-text { color: var(--pd-gold); margin-bottom: 18px; }
.pd-residence-copy p { font-size: var(--text-small); }
.pd-feature p { font-size: var(--text-small); }
/* site nav sits above the pd hero; keep it above the pinned hero while collapsing */
.site-nav { z-index: 40; }
.pd-actions .btn-ghost { border-color: rgba(176,137,79,0.7); }
.pd-actions .btn-ghost:hover { background: var(--pd-gold); border-color: var(--pd-gold); color: var(--pd-green); }

/* --- scrollable story panel (project + discipline copy) --- */
.pd-story {
  flex: 1 1 0; min-height: 0; max-height: none;
  overflow-y: auto;
  padding-right: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--brass) transparent;
}
.pd-story::-webkit-scrollbar { width: 4px; }
.pd-story::-webkit-scrollbar-thumb { background: var(--brass); }
.pd-story h3 {
  font-family: var(--font-display); font-weight: 300; font-size: 22px;
  color: var(--pd-ink); margin: 22px 0 10px;
}
.pd-story p { font-size: var(--text-small); line-height: 1.7; color: var(--pd-ink-soft); margin-bottom: 14px; max-width: 38ch; }
@media (max-width: 900px) {
  /* On mobile the panel's parent is not height-constrained, so the desktop
     `flex: 1 1 0` collapses it to 0 and the copy overflows onto the sections
     below. Let it take its natural content height and flow normally. */
  .pd-story { flex: 0 0 auto; min-height: 0; max-height: none; height: auto; overflow: visible; padding-right: 0; }
  .pd-story p { max-width: 60ch; }
}

/* --- project-cover carousel cards (discipline pages) --- */
.pd-gallery-seq a.pd-cover { display: block; position: relative; height: 100%; }
.pd-cover-label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 18px 16px 14px;
  background: linear-gradient(180deg, transparent, rgba(17,15,12,0.72));
  color: var(--bone);
}
.pd-cover-label strong {
  display: block; font-family: var(--font-display); font-weight: 300;
  font-size: 20px; line-height: 1.2;
}
.pd-cover-label small {
  display: block; font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--brass); margin-top: 4px;
}

/* --- story bottom veil: fade over the text only (scrollbar untouched),
       removed when scrolled to the end; injected with the read-more --- */
.pd-story-actions { position: relative; }
.pd-story-veil {
  position: absolute; bottom: 100%; left: 0; right: 18px; height: 52px;
  background: linear-gradient(180deg, rgba(248,245,239,0), var(--bone));
  pointer-events: none; transition: opacity 0.3s ease;
}
.pd-story-veil.is-done { opacity: 0; }

/* --- story read-more affordance (injected by main.js when scrollable) --- */
.pd-readmore {
  align-self: flex-start;
  margin-top: 10px;
  background: none; border: 0; padding: 0;
  font-family: var(--font-body); font-size: 11px; font-weight: var(--w-semi);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass);
  cursor: pointer; transition: opacity 0.3s ease;
}
.pd-readmore::after { content: " \2193"; }
.pd-readmore.is-done { opacity: 0; pointer-events: none; }

/* --- story action row: Read More + Explore side by side --- */
.pd-story-actions { display: flex; align-items: baseline; gap: 28px; margin-top: 16px; flex: 0 0 auto; }
.pd-story-actions .pd-link { margin-top: 0; }
.pd-story-actions .pd-readmore { margin-top: 0; }

/* --- slim footer: fixed-height token so it composes into the last screen --- */
@media (min-width: 901px) {
  .pd-footer { min-height: var(--slim-footer-h); box-sizing: border-box; }
}
/* --- slim footer contact row --- */
.pd-footer .pd-contact { display: flex; gap: clamp(16px, 2.4vw, 34px); flex-wrap: wrap; }
.pd-footer .pd-contact a, .pd-footer .pd-contact span {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(248,245,239,0.88); white-space: nowrap;
}
.pd-footer .pd-contact a:hover { color: var(--brass); }

/* ============================================================
   22. HOMEPAGE v2: practice block, category sections, project rows
   ============================================================ */
.practice {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 0;
  padding: 0;
  background: var(--bone);
  box-sizing: border-box;
}
.practice-col { display: flex; flex-direction: column; min-height: 0; }
.practice-text { display: flex; flex-direction: column; justify-content: center; }
.practice-col:first-child .practice-text { padding-left: clamp(20px, 4vw, 56px); padding-right: clamp(24px, 3.4vw, 64px); }
.practice-col:last-child .practice-text { padding-right: clamp(20px, 4vw, 56px); padding-left: clamp(24px, 3.4vw, 64px); }
@media (min-width: 901px) {
  /* strict checkerboard: each column is half text, half image; images flush
     to the section's outer edges so they touch the neighbors above/below */
  .practice { height: calc(100svh - var(--nav-height)); }
  .practice-col { display: grid; grid-template-rows: 1fr 1fr; }
  .practice-text { padding-top: clamp(16px, 3vh, 36px); padding-bottom: clamp(16px, 3vh, 36px); min-height: 0; overflow: hidden; }
}
.practice-col h2 {
  font-family: var(--font-display); font-weight: 300; color: var(--ink);
  font-size: clamp(26px, 2.2vw, 36px); line-height: 1.14; margin: 10px 0 12px;
}
.practice-lead { font-size: 15px; line-height: 1.6; color: var(--ink); max-width: 46ch; margin-bottom: 10px; }
.practice-small { font-size: 13px; line-height: 1.6; color: var(--ink-soft); max-width: 52ch; }
.practice-media { margin: 0; overflow: hidden; flex: 1 1 0; min-height: 240px; position: relative; }
@media (min-width: 901px) { .practice-media { min-height: 0; flex: none; } }
.practice-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.practice-media:hover img { transform: scale(1.03); }
.practice-media--top { margin-bottom: 0; }
@media (max-width: 900px) { .practice-media--top { margin-bottom: 18px; } }
.practice-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 26px); margin-top: 16px; border-top: 1px solid var(--sand-deep); padding-top: 14px; }
.practice-num { display: block; font-size: 11px; letter-spacing: 0.2em; color: var(--brass); margin-bottom: 8px; }
.practice-points h3 { font-family: var(--font-display); font-weight: 400; font-size: 16px; color: var(--ink); margin-bottom: 4px; }
.practice-points p { font-size: 12px; line-height: 1.5; color: var(--ink-soft); }

.home-cat { background: var(--bone); }
.home-cat-banner {
  position: relative; display: block; min-height: clamp(320px, 52vh, 560px); overflow: hidden;
}
@media (min-width: 901px) {
  .home-cat-banner { height: calc(100svh - var(--nav-height)); min-height: 0; }
}
.home-cat-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.home-cat-banner:hover img { transform: scale(1.03); }
.home-cat-banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,14,11,0.1) 0%, rgba(16,14,11,0.24) 55%, rgba(16,14,11,0.78) 100%);
}
.home-cat-copy { position: absolute; left: clamp(20px, 4vw, 56px); bottom: clamp(24px, 4vh, 44px); z-index: 1; color: var(--bone); max-width: 640px; }
.home-cat-num { font-size: 12px; letter-spacing: 0.24em; color: var(--brass); margin-bottom: 8px; }
.home-cat-copy h2 { font-family: var(--font-display); font-weight: 300; color: var(--bone); font-size: clamp(34px, 3.6vw, 56px); line-height: 1.08; margin-bottom: 10px; }
.home-cat-copy p { font-size: var(--text-small); color: rgba(248,245,239,0.88); max-width: 44ch; }

.proj-row {
  display: grid; grid-template-columns: 1fr 1.35fr; align-items: center;
  gap: clamp(28px, 4vw, 72px);
  padding: clamp(28px, 4.5vh, 52px) clamp(20px, 4vw, 56px);
  border-bottom: 1px solid rgba(216,203,180,0.5);
}
.proj-row--rev { grid-template-columns: 1.35fr 1fr; }
.proj-row--rev .proj-row-copy { order: 2; }
.proj-row--rev .proj-row-media { order: 1; }
.proj-row-copy h3 {
  font-family: var(--font-display); font-weight: 300; color: var(--ink);
  font-size: clamp(26px, 2.4vw, 38px); line-height: 1.12; margin: 10px 0 12px;
}
.proj-row-copy p { font-size: var(--text-small); line-height: 1.65; color: var(--ink-soft); max-width: 46ch; margin-bottom: 14px; }
.proj-row-media { margin: 0; overflow: hidden; aspect-ratio: 16 / 8; }
.proj-row-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.proj-row:hover .proj-row-media img { transform: scale(1.035); }

.interlude-cta { margin-top: var(--sp-5); }
@media (min-width: 901px) {
  .interlude { min-height: calc(100svh - var(--nav-height)); }
}

@media (max-width: 900px) {
  /* Stacked, the raw DOM order is text, image, image, text: the two images
     land back to back and the checkerboard rhythm is lost. Reorder column two
     so its text leads and its image follows, giving a clean alternating
     text / image / text / image flow down the phone. One uniform 22px gap
     between every block (flex gap within each column + grid row-gap between
     the two columns) replaces the ad-hoc per-element margins that had left an
     uneven 18px / 0px / 18px rhythm. */
  .practice { grid-template-columns: 1fr; row-gap: 22px; }
  /* The first text block's TOP boundary is the section matting margin (12px,
     the gap between full-bleed sections), but its bottom boundary is the 22px
     internal block rhythm, so the text sat closer to the hero above than to
     the image below. Add 10px top padding (12 + 10 = 22) so the first block is
     framed by the same 22px above and below, matching the fully-internal
     blocks. */
  .practice { padding-top: 10px; }
  .practice-points { grid-template-columns: 1fr; }
  .practice-col { display: flex; flex-direction: column; gap: 22px; }
  .practice-col:last-child .practice-text { order: 1; }
  .practice-col:last-child .practice-media--top { order: 2; margin: 0; }
  /* both images at one decided size, full width */
  .practice-media { flex: none; aspect-ratio: 3 / 2; min-height: 0; margin: 0; }
  .practice-text { padding: 0 20px; }
  .proj-row, .proj-row--rev { grid-template-columns: 1fr; gap: 18px; }
  .proj-row--rev .proj-row-copy { order: 1; }
  .proj-row--rev .proj-row-media { order: 2; }
  .proj-row-media { aspect-ratio: 3 / 2; }
}

/* --- homepage section matting: small bone gaps between full-bleed sections --- */
:root { --home-gap: clamp(12px, 1.4vw, 22px); }
.hero { margin: 0; }
.practice { margin: var(--home-gap) 0 0; }
.home-cat { margin: var(--home-gap) 0 0; }
.interlude { margin: var(--home-gap) 0; }

/* --- ultrawide density: content is capped and recomposed, never just scaled --- */
@media (min-width: 1600px) {
  /* The side-image column used to be minmax(300px, 24vw): its WIDTH grew with
     the screen while the band HEIGHT stayed pinned to the short text (~127px),
     so on a big monitor the image slot became an extreme wide-thin letterbox
     (614x127 = 4.9:1 at 2560) and object-fit: cover cropped the photo to a
     sliver. Cap the column at a fixed width so the slot keeps a sane, decided
     shape (~300px wide, ~2.3:1) at any screen size; the extra screen width
     flows into the features/inquiry columns instead of distorting the photo. */
  .pd-lower { grid-template-columns: 1fr minmax(380px, 30vw) minmax(280px, 300px); }
  .pd-lower .pd-features {
    grid-template-columns: repeat(4, minmax(0, 300px));
    justify-content: center;
    column-gap: clamp(36px, 3vw, 72px);
  }
  .pd-residence { grid-template-columns: minmax(300px, 440px) 1fr; }
  .practice-text { max-width: 720px; }
  .practice-col:first-child .practice-text { margin-left: auto; margin-right: 0; box-sizing: border-box; }
}

/* --- work index: grouped project directory in the showcase language --- */
.work-index { background: var(--bone); padding: clamp(48px, 7vh, 96px) clamp(20px, 4vw, 56px); }
.work-group { margin-bottom: clamp(48px, 7vh, 88px); }
.work-group:last-child { margin-bottom: 0; }
.work-group-head {
  display: flex; align-items: baseline; gap: 18px;
  border-bottom: 1px solid var(--sand-deep);
  padding-bottom: 14px; margin-bottom: clamp(20px, 3vh, 32px);
}
.work-group-head .home-cat-num { margin: 0; }
.work-group-head h2 {
  font-family: var(--font-display); font-weight: 300; color: var(--ink);
  font-size: clamp(24px, 2.2vw, 34px);
}
.work-group-head .link-arrow { margin-left: auto; font-size: 12px; }
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 36px); }
/* uniform, decided dimensions: every card identical, no positional sizing */
.work-grid .featured-project,
.work-grid .featured-project:nth-child(1),
.work-grid .featured-project:nth-child(2) { grid-column: auto; }
.work-grid .featured-project-media,
.work-grid .featured-project:nth-child(1) .featured-project-media,
.work-grid .featured-project:nth-child(2) .featured-project-media { aspect-ratio: 3 / 2; }
@media (min-width: 1600px) { .work-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) { .work-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .work-grid { grid-template-columns: 1fr; } }

/* ============================================================
   22. Team / People page (/team/)
   Narrative-led, everyone shown as equals: a short studio lede, the
   founder(s) featured full-width, then the rest of the team in one uniform
   grid. Portraits are circular avatars (1:1 crop from the 4:5 source, focused on
   the face via a per-person object-position); a missing photo falls back to a
   uniform initials circle so the set still reads as one system before shoots land.
   ============================================================ */
.team { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: var(--sp-8) var(--container-pad) var(--sp-6); }
.team-lede { max-width: 640px; margin-bottom: var(--sp-8); }
.team-lede h2 { font-family: var(--font-display); font-weight: 300; color: var(--ink); font-size: clamp(28px, 3.4vw, 46px); line-height: 1.12; margin: var(--sp-3) 0 var(--sp-4); }
.team-lede p { color: var(--ink-soft); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.7; }

.team-member { margin: 0; }
/* Circular avatars. A fixed-size circle crops 1:1 from the 4:5 portrait, so each
   image carries an object-position "focus" (set per person in team.js) to keep
   the face centered in the circle. */
.team-portrait { position: relative; width: 132px; height: 132px; aspect-ratio: 1 / 1; overflow: hidden; background: var(--sand); border-radius: 50%; }
.team-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; display: block; }
.team-portrait--ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(158deg, var(--bone-2), var(--sand)); }
.team-initials { font-family: var(--font-display); font-weight: 300; font-size: 44px; color: var(--brass); letter-spacing: 0.05em; }
.team-name { font-family: var(--font-display); font-weight: 400; color: var(--ink); font-size: clamp(20px, 1.7vw, 26px); line-height: 1.2; margin: var(--sp-4) 0 var(--sp-1); }
.team-role { color: var(--brass); }
.team-bio { color: var(--ink-soft); font-size: 15px; line-height: 1.72; margin-top: var(--sp-3); }
.team-creds { margin-top: var(--sp-3); font-size: 12px; letter-spacing: 0.05em; color: var(--ink-soft); }
.team-email { margin-top: var(--sp-2); font-size: 13px; }
.team-email a { color: var(--brass); border-bottom: 1px solid rgba(176,137,79,0.35); padding-bottom: 1px; transition: border-color .2s ease; }
.team-email a:hover { border-color: var(--brass); }

/* Founder / principal: larger circle beside the copy, as equals. */
.team-member--lead { display: grid; grid-template-columns: minmax(180px, 208px) 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; margin-bottom: var(--sp-8); padding-bottom: var(--sp-8); border-bottom: 1px solid var(--sand-deep); }
.team-member--lead .team-portrait { width: 200px; height: 200px; }
.team-member--lead .team-initials { font-size: 64px; }
.team-member--lead .team-name { margin-top: 0; font-size: clamp(24px, 2.3vw, 34px); }
.team-member--lead .team-bio { font-size: 16px; }

/* The rest of the team, one uniform grid. Hidden while empty. */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: clamp(30px, 3vw, 52px) clamp(24px, 2.4vw, 40px); }
.team-grid:empty { display: none; }

@media (max-width: 760px) {
  .team-member--lead { grid-template-columns: 1fr; gap: var(--sp-4); justify-items: start; }
  .team-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}