/* ============================================================
   Zeva Designs — shared styles (v3, dark luxury)
   Theme: charcoal + walnut + matte black, warm-white 3000K light,
   brass accents taken from the logo (#AE8A4E).
   Type: Fraunces (display) · Instrument Sans (body)
   No external animation libs — all motion is CSS + vanilla JS.
   ============================================================ */

:root {
  /* surfaces */
  --bg: #1A1613;
  --bg-2: #201B17;
  --surface: #262019;
  --surface-2: #2E2720;
  --walnut: #4A3524;
  --walnut-lt: #6B4E36;

  /* accents */
  --brass: #AE8A4E;
  --brass-lt: #C9A46A;
  --brass-dk: #7E6136;

  /* text */
  --cream: #EDE6DA;
  --warm-white: #F6F1E6;
  --muted: color-mix(in srgb, var(--cream) 62%, transparent);
  --faint: color-mix(in srgb, var(--cream) 38%, transparent);
  --line: color-mix(in srgb, var(--cream) 12%, transparent);
  --line-strong: color-mix(in srgb, var(--cream) 22%, transparent);

  --maxw: 1280px;
  --radius: 16px;
  --radius-lg: 26px;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --shadow-soft: 0 30px 60px -30px rgba(0, 0, 0, 0.85);
  --shadow-lift: 0 44px 90px -34px rgba(0, 0, 0, 0.95);
  /* warm 3000K pool of light */
  --glow: radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--brass) 26%, transparent), transparent 70%);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
::selection { background: var(--brass); color: #14110E; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--cream);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* fine grain — lifts flat blacks, keeps it filmic rather than digital */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.06; margin: 0 0 0.5em; letter-spacing: -0.015em; color: var(--warm-white); }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--brass-lt); outline-offset: 3px; border-radius: 4px; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--brass-lt); font-weight: 500; margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.7; }
.section-title { font-size: clamp(2.1rem, 5vw, 3.6rem); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------- Cinematic intro (letters converge, lights rise) ---------- */
.intro {
  position: fixed; inset: 0; z-index: 300;
  background: #141110;
  display: grid; place-items: center;
  transition: opacity 1.1s var(--ease), visibility 1.1s;
}
.intro.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.intro__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--glow);
  opacity: 0; transition: opacity 2.4s var(--ease);
}
.intro.is-lit .intro__glow { opacity: 1; }
.intro__stage { position: relative; text-align: center; }
.intro__letters {
  display: flex; justify-content: center; align-items: baseline;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(3rem, 11vw, 8rem); color: var(--warm-white);
  letter-spacing: 0.02em;
}
.intro__letters span {
  display: inline-block; opacity: 0;
  transform: translateX(var(--from, -60vw));
  transition: transform 1.5s var(--ease), opacity 0.9s var(--ease);
  text-shadow: 0 0 60px color-mix(in srgb, var(--brass) 0%, transparent);
}
.intro.is-pulling .intro__letters span { opacity: 1; transform: translateX(0); }
.intro.is-lit .intro__letters span { text-shadow: 0 0 70px color-mix(in srgb, var(--brass) 55%, transparent); }
.intro__second {
  margin: -0.1em 0 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 4.4vw, 3rem); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--brass-lt); line-height: 1;
  opacity: 0; transform: translateY(12px);
  transition: opacity 1s var(--ease) 0.15s, transform 1s var(--ease) 0.15s;
}
.intro.is-lit .intro__second { opacity: 1; transform: none; }
.intro__word {
  margin-top: 18px; font-size: clamp(0.7rem, 1.5vw, 0.9rem);
  letter-spacing: 0.42em; text-transform: uppercase; color: var(--brass-lt);
  opacity: 0; transform: translateY(10px);
  transition: opacity 1s var(--ease) 0.3s, transform 1s var(--ease) 0.3s;
}
.intro.is-lit .intro__word { opacity: 1; transform: none; }
.intro__mark {
  height: clamp(64px, 10vw, 104px); margin: 0 auto 6px; width: auto;
  opacity: 0; transform: scale(0.9);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.intro.is-lit .intro__mark { opacity: 1; transform: none; }
.intro__skip {
  position: absolute; bottom: 34px; right: 34px;
  background: none; border: 1px solid var(--line-strong); color: var(--muted);
  border-radius: 999px; padding: 9px 20px; font-family: var(--font-body);
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}
.intro__skip:hover { color: var(--warm-white); border-color: var(--brass); }
.intro.is-flying {
  background: transparent;
  transition: background 0.9s var(--ease);
}
.intro.is-flying .intro__glow,
.intro.is-flying .intro__letters,
.intro.is-flying .intro__second,
.intro.is-flying .intro__word,
.intro.is-flying .intro__skip {
  opacity: 0;
  transition: opacity 0.55s var(--ease);
}
/* the mark keeps its own, slower easing so it reads as one continuous move */
.intro.is-flying .intro__mark {
  transition: transform 1.15s cubic-bezier(0.66, 0, 0.2, 1);
}
/* the real nav logo stays hidden until the flying mark lands exactly on it */
.intro-playing .nav__mark { opacity: 0; }
.nav__mark { transition: opacity 0.35s var(--ease); }

.no-motion .intro { display: none; }

/* ---------- Cursor trail ----------
   The native pointer is never hidden — this is a dot trailing behind it.
   Over imagery it swells into a dark disc that the pointer sits on top of,
   which reads as a lens moving across the photograph. */
.cursor-dot {
  position: fixed; top: 0; left: 0; z-index: 500;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--warm-white);
  pointer-events: none; opacity: 0;
  transition: opacity 0.3s var(--ease), width 0.35s var(--ease),
              height 0.35s var(--ease), margin 0.35s var(--ease),
              background 0.35s var(--ease), backdrop-filter 0.35s var(--ease);
  will-change: transform;
}
.has-cursor .cursor-dot { opacity: 0.9; }

/* over links and buttons — a small brass tick of feedback */
.has-cursor.is-hovering .cursor-dot {
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  background: var(--brass-lt);
}

/* over photography — an inverting lens. backdrop-filter inverts whatever is
   painted behind the element, and border-radius clips that to the circle, so
   only the disc of image under the pointer flips. */
.has-cursor.is-over-image .cursor-dot,
.has-cursor.is-over-image.is-hovering .cursor-dot {
  width: 92px; height: 92px; margin: -46px 0 0 -46px;
  background: transparent;
  -webkit-backdrop-filter: invert(1);
  backdrop-filter: invert(1);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cursor-dot { display: none; }
}

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 200;
  width: 0%;
  background: linear-gradient(90deg, var(--brass-dk), var(--brass-lt));
  box-shadow: 0 0 14px color-mix(in srgb, var(--brass) 70%, transparent);
  transition: width 0.08s linear;
}

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(16px) saturate(1.1);
  border-bottom: 1px solid transparent;
  transition: padding 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.nav.is-scrolled {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom-color: var(--line);
}
.nav__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 18px clamp(20px, 5vw, 48px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  transition: padding 0.4s var(--ease);
}
.nav.is-scrolled .nav__inner { padding-top: 11px; padding-bottom: 11px; }
.nav__logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; position: relative; }
.nav__mark { height: 40px; width: auto; display: block; flex: none; transition: transform 0.4s var(--ease), height 0.4s var(--ease); }
.nav.is-scrolled .nav__mark { height: 34px; }
.nav__logo:hover .nav__mark { transform: rotate(-4deg) scale(1.05); }
.nav__word { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: -0.01em; line-height: 1; color: var(--warm-white); }
.nav__word em { font-style: italic; color: var(--brass-lt); }
.nav__links { display: flex; gap: 34px; list-style: none; margin: 0; padding: 0; align-items: center; }
.nav__links a { text-decoration: none; font-size: 0.92rem; font-weight: 400; position: relative; padding: 4px 0; color: var(--muted); transition: color 0.3s var(--ease); }
.nav__links a:hover { color: var(--warm-white); }
.nav__links a:not(.nav__cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--brass); transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav__links a:not(.nav__cta):hover::after,
.nav__links a[aria-current="page"]:not(.nav__cta)::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--brass-lt); }
.nav__cta {
  background: var(--brass); color: #14110E !important; border-radius: 999px;
  padding: 11px 24px !important; font-weight: 600;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease) !important;
}
.nav__cta::after { display: none; }
.nav__cta:hover { background: var(--brass-lt); transform: translateY(-2px); }
.nav__toggle {
  display: none; background: none; border: 1px solid var(--line-strong); border-radius: 10px;
  width: 46px; height: 46px; cursor: pointer; font-size: 1.2rem; color: var(--cream);
}

/* ---------- Hero: top visual / bottom intro (per brief) ---------- */
.hero { position: relative; }
.hero__stage {
  position: relative; height: 62svh; min-height: 380px; overflow: hidden;
  background: #080707;
}
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s var(--ease); }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); filter: saturate(0.85) contrast(1.05) brightness(0.78); }
.hero__slide.is-active { opacity: 1; }
.hero__slide.is-active img { animation: kenburns 9s var(--ease) forwards; }
@keyframes kenburns {
  from { transform: scale(1.14) translate(1%, -1%); }
  to   { transform: scale(1.04) translate(0, 0); }
}
/* warm light pool + vignette so the photography sits in the dark room */
.hero__stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 90% at 50% 45%, transparent, rgba(8,7,7,0.55) 75%, rgba(8,7,7,0.92) 100%),
    linear-gradient(180deg, rgba(8,7,7,0.5) 0%, transparent 25%, transparent 55%, rgba(8,7,7,0.85) 100%);
}
.hero__parallax { position: absolute; inset: -4%; will-change: transform; }
.hero__caption {
  position: absolute; left: 32px; bottom: 28px; z-index: 3; margin: 0;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-style: italic; font-size: 1.05rem;
  color: var(--cream); text-shadow: 0 2px 18px rgba(0,0,0,0.8);
  transition: opacity 0.5s var(--ease);
}
.hero__caption::before { content: ""; width: 34px; height: 1px; background: var(--brass); }
.hero__caption.is-fading { opacity: 0; }
.hero__dots { position: absolute; right: 32px; bottom: 30px; display: flex; gap: 10px; z-index: 3; }
.hero__dot {
  width: 28px; height: 3px; border-radius: 4px; border: none; cursor: pointer; padding: 0;
  background: color-mix(in srgb, var(--cream) 30%, transparent);
  transition: background 0.35s var(--ease), transform 0.35s var(--ease);
}
.hero__dot.is-active { background: var(--brass-lt); transform: scaleY(1.6); }
.hero__scroll {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 3;
  font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--faint);
}

.hero__intro {
  position: relative;
  padding: clamp(44px, 7vw, 86px) clamp(20px, 5vw, 48px) clamp(52px, 8vw, 96px);
  background: radial-gradient(90% 120% at 20% 0%, color-mix(in srgb, var(--brass) 9%, transparent), transparent 60%), var(--bg);
}
.hero__title {
  font-size: clamp(2.1rem, 5.4vw, 4.2rem); margin: 0 0 0.28em;
  color: var(--warm-white); letter-spacing: -0.01em;
}
.hero__tag {
  font-family: var(--font-display); font-size: clamp(1.05rem, 2vw, 1.6rem);
  color: var(--brass-lt); margin: 0 0 1.6em;
}
.hero__tag strong { font-weight: 600; }
.hero__sub {
  font-size: clamp(0.98rem, 1.3vw, 1.12rem); max-width: 56ch;
  margin: 0 0 1.8em; color: var(--muted);
}
/* Welcome block — editorial rather than a wall of prose: a display greeting,
   two columns of copy, the team split out as scannable chips instead of one
   long bolded sentence, and a closing statement across the full width. */
.hero__welcome {
  margin: 2.4em 0 2.6em; padding-top: 2.2em;
  border-top: 1px solid var(--line);
}
.hero__welcome p { color: var(--muted); }
.hero__welcome-head { margin-bottom: clamp(26px, 3.4vw, 40px); }
.hero__welcome-glad {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem); color: var(--warm-white) !important;
  margin: 0; letter-spacing: -0.015em; line-height: 1.1;
}

.hero__welcome-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 5vw, 72px); align-items: start;
}
.hero__welcome-col p { font-size: 0.95rem; line-height: 1.75; }
.hero__welcome-col p:last-child { margin-bottom: 0; }

/* founding year as a quiet credential, not buried in a sentence */
.hero__est {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2rem);
  color: var(--brass-lt) !important; margin: 0 0 0.7em; line-height: 1;
}
.hero__est span {
  font-family: var(--font-body); font-size: 0.62rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--faint);
}

.hero__welcome-label {
  font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--brass-lt) !important; margin: 0 0 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.hero__team { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.hero__team li {
  font-size: 0.8rem; color: var(--cream);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.hero__team li:hover { border-color: var(--brass); color: var(--warm-white); }
.hero__team-note { font-size: 0.88rem; line-height: 1.7; margin: 0; }

.hero__welcome-foot {
  margin-top: clamp(28px, 4vw, 48px); padding-top: clamp(22px, 3vw, 32px);
  border-top: 1px solid var(--line);
  display: grid; gap: 10px;
}
.hero__welcome-memory {
  font-family: var(--font-display); font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  color: var(--warm-white) !important; margin: 0; max-width: 46ch; line-height: 1.3;
}
.hero__welcome-close {
  margin: 0; font-family: var(--font-display); font-style: italic;
  font-size: clamp(1rem, 1.7vw, 1.25rem); color: var(--brass-lt) !important;
}

@media (max-width: 860px) {
  .hero__welcome-grid { grid-template-columns: 1fr; }
}

.hero__list {
  list-style: none; padding: 0; margin: 0 0 2.4em;
  display: grid; gap: 0; border-top: 1px solid var(--line);
}
.hero__list li {
  display: flex; align-items: baseline; gap: 18px;
  padding: 15px 2px; border-bottom: 1px solid var(--line);
  font-size: clamp(0.98rem, 1.5vw, 1.18rem); color: var(--cream);
  transition: color 0.3s var(--ease);
}
.hero__list li:hover { color: var(--warm-white); }
.hero__list-n {
  font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.2em;
  color: var(--brass); flex: none;
}
.hero__rule { width: 1px; height: 54px; background: linear-gradient(var(--brass), transparent); margin: 0 auto 26px; }

/* Word-by-word headline reveal */
.word { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.12em 0.02em; margin: -0.12em -0.02em; }
.word > span { display: inline-block; transform: translateY(110%); transition: transform 0.9s var(--ease); }
.hero.is-in .word > span { transform: translateY(0); }
.no-motion .word > span { transform: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  font-weight: 500; padding: 16px 34px; border-radius: 999px;
  background: var(--brass); color: #14110E;
  font-size: 0.9rem; letter-spacing: 0.06em;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.btn:hover { background: var(--brass-lt); transform: translateY(-3px); box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--brass) 70%, transparent); }
.btn--ghost { background: transparent; color: var(--cream); border: 1px solid var(--line-strong); }
.btn--ghost:hover { background: transparent; border-color: var(--brass); color: var(--warm-white); box-shadow: none; }
.btn span { transition: transform 0.35s var(--ease); }
.btn:hover span { transform: translateX(5px); }

/* ---------- Stat counters ---------- */
.stats { padding: clamp(30px, 4vw, 48px) 0; border-block: 1px solid var(--line); background: var(--bg-2); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { text-align: center; padding: 8px 10px; position: relative; }
.stat:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 22%; height: 56%; width: 1px; background: var(--line); }
.stat__num {
  font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  color: var(--brass-lt); line-height: 1; display: block; letter-spacing: -0.02em;
}
.stat__label { font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); margin-top: 8px; }

/* ---------- Brands ---------- */
.brands { padding: clamp(56px, 8vw, 96px) 0; text-align: center; }
.brands__row { display: flex; justify-content: center; align-items: center; gap: clamp(40px, 8vw, 110px); flex-wrap: wrap; margin-top: 32px; }
.brand {
  font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  color: var(--cream); opacity: 0.42; cursor: default;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), color 0.4s var(--ease);
}
.brand:hover, .brand:focus-visible { opacity: 1; transform: translateY(-3px); color: var(--brass-lt); }
.brand small { display: block; font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--faint); margin-top: 6px; }

@keyframes work-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- About — long-form studio philosophy ---------- */
.about { padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--line); }
.about__lead { max-width: 68ch; margin-top: clamp(22px, 3vw, 34px); }
.about__lead p { font-size: clamp(0.98rem, 1.2vw, 1.08rem); color: var(--muted); line-height: 1.75; }
.about__lead strong { color: var(--warm-white); font-weight: 500; }
.about__quote {
  margin: clamp(26px, 4vw, 40px) 0; padding-left: 22px;
  border-left: 1px solid var(--brass);
}
.about__quote p {
  margin: 0; font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.2rem, 2.4vw, 1.9rem); color: var(--brass-lt);
}
.about__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(22px, 3vw, 40px); margin-top: clamp(38px, 5vw, 64px);
}
.about__block { border-top: 1px solid var(--line); padding-top: 22px; }
.about__block--wide { grid-column: 1 / -1; }
.about__block h3 {
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass-lt);
  margin: 0 0 14px;
}
.about__block p { font-size: 0.94rem; line-height: 1.72; color: var(--muted); }
.about__block p:last-child { margin-bottom: 0; }
.about__rooms { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 8px; }
.about__rooms li {
  position: relative; padding-left: 20px; font-size: 0.94rem; color: var(--cream);
}
.about__rooms li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 1px; background: var(--brass);
}
.about__promise {
  margin-top: clamp(38px, 5vw, 64px); padding: clamp(26px, 4vw, 44px);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  max-width: 78ch;
}
.about__promise h3 {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  margin: 0 0 16px; color: var(--warm-white); letter-spacing: -0.01em;
}
.about__promise p { font-size: 0.96rem; line-height: 1.75; color: var(--muted); }
.about__promise strong { color: var(--warm-white); font-weight: 500; }
.about__closing {
  margin: 20px 0 0; font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.05rem, 1.9vw, 1.4rem); color: var(--brass-lt) !important;
}

/* Project One walkthrough: a note and per-stage sub-headings */
.work__note { max-width: 56ch; margin: -6px 0 26px; font-size: 0.94rem; color: var(--muted); }
.work__stage {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.05rem, 1.9vw, 1.35rem); color: var(--warm-white);
  margin: clamp(30px, 4vw, 46px) 0 16px;
}
.work__stage:first-of-type { margin-top: 8px; }
/* line drawings and multi-panel sheets must be shown whole, not cropped */
.work__item--plan { background: #14100d; }
/* a real photograph at an unusual ratio, shown at its own proportions rather
   than forced into the 4:3 the line-drawing variant assumes. height:100% and
   object-fit:cover from the base rule fight a natural aspect ratio, so both
   are reset here, not just aspect-ratio. */
.work__item--plan img { aspect-ratio: 16 / 9; object-fit: contain; filter: none; }
.work__item--plan:hover img { transform: none; }

@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; }
}

/* ---------- Our work — editorial gallery of the studio's own photography ---------- */
.work { padding: clamp(56px, 8vw, 104px) 0; }
.work__cat {
  font-family: var(--font-body); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass-lt);
  margin: clamp(38px, 5vw, 64px) 0 18px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.work__cat:first-of-type { margin-top: clamp(26px, 3vw, 40px); }
.work__grid { display: grid; gap: 14px; }
/* uneven on purpose — the lead shot carries, the rest support */
.work__grid--marble { grid-template-columns: repeat(3, 1fr); }
.work__grid--four   { grid-template-columns: repeat(4, 1fr); }
.work__grid--three  { grid-template-columns: repeat(3, 1fr); }
.work__grid--two    { grid-template-columns: repeat(2, 1fr); }
.work__item--wide   { grid-column: span 2; grid-row: span 2; }
.work__item--band   { grid-column: 1 / -1; }

.work__item {
  position: relative; margin: 0; overflow: hidden;
  /* CSS-only entrance — never gates whether the photo is visible */
  animation: work-in 0.8s var(--ease) both;
  border-radius: 4px; border: 1px solid var(--line);
  background: var(--surface);
}
.work__item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  aspect-ratio: 4 / 3;
  filter: saturate(0.94) brightness(0.9);
  transition: transform 0.9s var(--ease), filter 0.7s var(--ease);
}
.work__item--wide img { aspect-ratio: 1 / 1; }
.work__item--band img { aspect-ratio: 21 / 9; }
.work__item:hover img { transform: scale(1.04); filter: saturate(1) brightness(1); }

/* a real photograph at an unusual ratio, shown at its own proportions.
   Same specificity as the base rule above, so this only wins because it
   now comes AFTER it in the cascade — moved here after the first attempt
   silently lost that fight. */
.work__item--wide-photo { background: #14100d; }
.work__item--wide-photo img {
  height: auto; aspect-ratio: auto; object-fit: contain; filter: none;
}
.work__item--wide-photo:hover img { transform: none; }
.work__item figcaption {
  position: absolute; inset: auto 0 0 0; padding: 22px 16px 12px;
  font-size: 0.72rem; letter-spacing: 0.1em; color: var(--cream);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.8));
}

@media (max-width: 960px) {
  .work__grid--marble, .work__grid--four, .work__grid--three { grid-template-columns: repeat(2, 1fr); }
  .work__item--wide { grid-column: span 2; grid-row: auto; }
  .work__item--band img { aspect-ratio: 16 / 9; }
  .work__item--wide img { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .work__grid--marble, .work__grid--four, .work__grid--three, .work__grid--two { grid-template-columns: 1fr; }
  .work__item--wide { grid-column: auto; }
}

/* ---------- Services: 2D plan → 3D home ---------- */
.services { background: linear-gradient(180deg, var(--bg) 0%, #100E0C 50%, var(--bg) 100%); position: relative; }
.services__scene { position: relative; height: 360vh; }
.services__pin {
  position: sticky; top: 0; height: 100svh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 28px clamp(20px, 5vw, 48px); overflow: hidden;
}
.services__head { text-align: center; max-width: 760px; margin: 0 auto; }
.services__sub { color: var(--muted); font-size: 0.94rem; margin: 6px auto 0; max-width: 46ch; }
.stage {
  position: relative; margin: clamp(18px, 3.4vh, 44px) auto 0;
  width: min(540px, 84vw, 54vh); aspect-ratio: 4 / 3; perspective: 1100px;
}
.stage__glow { position: absolute; inset: -22%; background: var(--glow); opacity: 0; pointer-events: none; }
.stage__labels {
  position: absolute; inset: auto 0 -34px; display: flex; justify-content: center; gap: 20px;
  font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase;
}
.stage__label { opacity: 0.3; transition: opacity 0.3s; color: var(--cream); }
.stage__label.is-on { opacity: 1; color: var(--brass-lt); }
.services__list { padding: clamp(48px, 7vw, 90px) 0 clamp(64px, 9vw, 120px); position: relative; z-index: 1; }
.services__list .service-cards { margin-top: 28px; }

.room { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.plan-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.plan-svg path, .plan-svg rect, .plan-svg line, .plan-svg circle {
  stroke: var(--brass-lt); fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke;
}
/* walnut floor */
.floor {
  position: absolute; left: 6%; top: 8%; width: 88%; height: 84%;
  background:
    repeating-linear-gradient(96deg, rgba(0,0,0,0.16) 0 2px, transparent 2px 26px),
    linear-gradient(115deg, #5A422D 0%, var(--walnut) 45%, #3B2A1C 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4);
  opacity: 0; transform: translateZ(-1px);
}
.wall {
  position: absolute;
  background: linear-gradient(to top, #17130F, #2A231C);
  border: 1px solid rgba(237,230,218,0.08);
  will-change: transform; backface-visibility: visible;
}
.wall--n { left: 6%; right: 6%; top: 8%; height: 54px; transform-origin: top center; transform: rotateX(90deg) scaleY(0.001); }
.wall--w { left: 6%; top: 8%; bottom: 8%; width: 54px; transform-origin: center left; transform: rotateY(-90deg) scaleX(0.001); }
.wall--v {
  left: 57.5%; top: 8%; height: 48.7%; width: 42px;
  background: linear-gradient(to top, #17130F, #33291F);
  transform-origin: center left; transform: rotateY(-90deg) scaleX(0.001);
}
.room-labels { position: absolute; inset: 0; transition: opacity 0.3s var(--ease); }
.room-label {
  position: absolute; transform: translateZ(0.6px);
  font-family: var(--font-body); font-size: clamp(8px, 1.5vw, 11px);
  letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500;
  color: color-mix(in srgb, var(--brass-lt) 78%, transparent);
}
.cube { position: absolute; transform-style: preserve-3d; }
.cube__top { position: absolute; inset: 0; border-radius: 3px; transform: translateZ(0.5px); will-change: transform; }
.cube__front { position: absolute; left: 0; right: 0; top: 100%; transform-origin: top center; transform: rotateX(90deg) scaleY(0.001); will-change: transform; filter: brightness(0.72); }
.cube__side { position: absolute; top: 0; bottom: 0; left: 100%; transform-origin: center left; transform: rotateY(-90deg) scaleX(0.001); will-change: transform; filter: brightness(0.55); }
/* matte black + walnut + brass furniture */
.cube--counter  { left: 10%;   top: 11.3%; width: 37.5%; height: 6.7%; }
.cube--counter2 { left: 10%;   top: 11.3%; width: 5%;    height: 26.7%; }
.cube--counter > div, .cube--counter2 > div { background: #1F1B17; }
.cube--sofa    { left: 11%;   top: 75.3%; width: 30%;   height: 10.7%; }
.cube--sofa > div { background: var(--walnut-lt); }
.cube--coffee  { left: 21.5%; top: 60%;   width: 10%;   height: 11.3%; }
.cube--coffee .cube__top { background: var(--brass); border-radius: 50%; }
.cube--tv      { left: 49%;   top: 50%;   width: 5.5%;  height: 23.3%; }
.cube--tv > div { background: #14110E; }
.cube--bed     { left: 61.5%; top: 15.3%; width: 21.5%; height: 32%; }
.cube--bed > div { background: #6E6252; }
.cube--wardrobe{ left: 87.5%; top: 16.7%; width: 5%;    height: 30%; }
.cube--wardrobe > div { background: var(--walnut); }
.cube--vanity  { left: 75%;   top: 80.7%; width: 15%;   height: 6.7%; }
.cube--vanity > div { background: #2C2620; }

.service-cards {
  list-style: none; padding: 0; max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
}
.service-cards li {
  border: 1px solid var(--line); border-radius: 8px; padding: 13px 14px;
  font-size: 0.84rem; text-align: center; color: var(--muted);
  background: var(--surface);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), border-color 0.3s, color 0.3s;
}
.service-cards li:hover { border-color: var(--brass); color: var(--warm-white); }
.no-motion .service-cards li, .services.is-static .service-cards li { opacity: 1; transform: none; }

/* ---------- Process ---------- */
.process { padding: clamp(72px, 10vw, 130px) 0; background: var(--bg-2); border-block: 1px solid var(--line); }
.process__layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.process__sticky { position: sticky; top: 120px; }
.process__note { color: var(--muted); max-width: 40ch; }
.process__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start;
  padding: 26px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.step:hover { transform: translateY(-4px); border-color: var(--brass-dk); background: var(--surface-2); }
.step__no {
  font-family: var(--font-display); font-size: 1.3rem; color: var(--brass-lt);
  width: 52px; height: 52px; display: grid; place-items: center;
  border: 1px solid var(--brass-dk); border-radius: 50%;
}
.step h3 { font-size: 1.25rem; margin-bottom: 6px; }
.step p { margin: 0; font-size: 0.92rem; color: var(--muted); }

/* ---------- Teasers ---------- */
.teasers { padding: clamp(64px, 9vw, 120px) 0; }
.teasers__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.teaser {
  display: block; text-decoration: none; border-radius: var(--radius);
  overflow: hidden; background: var(--surface); border: 1px solid var(--line);
  position: relative; isolation: isolate;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.teaser:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift); border-color: var(--brass-dk); }
.teaser__media { position: relative; overflow: hidden; }
.teaser__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(6,5,5,0.7));
  opacity: 0.7; transition: opacity 0.45s var(--ease);
}
.teaser:hover .teaser__media::after { opacity: 0.35; }
.teaser img { aspect-ratio: 4/3; object-fit: cover; width: 100%; transition: transform 0.8s var(--ease); filter: saturate(0.9) brightness(0.9); }
.teaser:hover img { transform: scale(1.07); }
.teaser__no {
  position: absolute; top: 16px; left: 18px; z-index: 2;
  font-family: var(--font-display); font-size: 0.82rem; letter-spacing: 0.1em;
  color: var(--cream); background: color-mix(in srgb, #060505 55%, transparent);
  backdrop-filter: blur(4px); padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line);
}
.teaser__body { padding: 22px 24px 26px; }
.teaser__body h3 { margin-bottom: 6px; font-size: 1.45rem; }
.teaser__body p { font-size: 0.9rem; margin: 0; color: var(--muted); }
.teaser__go { color: var(--brass-lt); font-weight: 500; font-size: 0.84rem; display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; letter-spacing: 0.04em; }
.teaser__go span { transition: transform 0.35s var(--ease); }
.teaser:hover .teaser__go span { transform: translateX(6px); }

/* ---------- CTA band ---------- */
.cta-band { padding: clamp(72px, 10vw, 130px) 0; text-align: center; position: relative; overflow: hidden; border-top: 1px solid var(--line); }
.cta-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 120% at 50% 120%, color-mix(in srgb, var(--brass) 20%, transparent), transparent 60%); }
.cta-band .container { position: relative; }
.cta-band h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
.cta-band p { max-width: 52ch; margin: 0 auto 2em; color: var(--muted); }

/* ---------- Enquiry ---------- */
.enquiry {
  position: relative; isolation: isolate; overflow: hidden;
  border-top: 1px solid var(--line); background: var(--bg-2);
  padding: clamp(56px, 9vw, 112px) 0;
}
.enquiry::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 85% at 82% 110%, color-mix(in srgb, var(--brass) 16%, transparent), transparent 62%),
    radial-gradient(45% 65% at 6% 0%, color-mix(in srgb, var(--clay, #B45F3E) 13%, transparent), transparent 60%);
}
.enquiry__grid { display: grid; gap: clamp(32px, 5vw, 72px); grid-template-columns: 0.9fr 1.1fr; align-items: start; }
.enquiry__lede { color: var(--muted); max-width: 42ch; font-size: 0.98rem; }

.enquiry__facts { margin: 32px 0 0; display: grid; gap: 12px; }
.enquiry__facts div { display: flex; gap: 16px; align-items: baseline; }
.enquiry__facts dt {
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--faint); min-width: 8ch;
}
.enquiry__facts dd { margin: 0; font-size: 0.94rem; color: var(--cream); }
.enquiry__facts a { color: var(--cream); text-decoration: none; border-bottom: 1px solid var(--line-strong); transition: color 0.3s, border-color 0.3s; }
.enquiry__facts a:hover { color: var(--brass-lt); border-color: var(--brass); }

.enquiry__form {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: clamp(22px, 3vw, 34px);
  display: grid; gap: 16px;
}
.field-row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin: 0; }
.field-row--one { grid-template-columns: 1fr; }
.field { display: grid; gap: 8px; margin: 0; }
.field label {
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint);
}
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 0.94rem; color: var(--warm-white);
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 15px; width: 100%;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brass); background: var(--bg-2);
}
/* the browser's own invalid styling is too shouty for this palette */
.field input:user-invalid, .field textarea:user-invalid { border-color: color-mix(in srgb, #B45F3E 70%, transparent); }
.field select option { background: var(--bg); color: var(--warm-white); }

.enquiry__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 6px; }
.btn--ghost {
  background: none; color: var(--cream);
  border: 1px solid var(--line-strong);
}
.btn--ghost:hover { background: none; border-color: var(--brass); color: var(--warm-white); }
.enquiry__note { margin: 4px 0 0; font-size: 0.78rem; color: var(--faint); }
.enquiry__note.is-sent { color: var(--brass-lt); }
.enquiry__note.is-error { color: #D98A6A; }
.enquiry__form button[disabled] { opacity: 0.6; cursor: progress; }

@media (max-width: 900px) {
  .enquiry__grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}

/* ---------- Page hero (subpages) ---------- */
.page-hero { padding: clamp(72px, 10vw, 128px) 0 clamp(28px, 4vw, 52px); text-align: center; position: relative; }
.page-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 100% at 50% 0%, color-mix(in srgb, var(--brass) 8%, transparent), transparent 65%); }
.page-hero .container { position: relative; }
.page-hero p { max-width: 58ch; margin: 0 auto; font-size: clamp(0.98rem, 1.3vw, 1.1rem); color: var(--muted); }
.page-hero em { font-style: italic; color: var(--brass-lt); }

/* ---------- Projects ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 0 24px 44px; }
.filter-btn {
  font-family: var(--font-body); font-size: 0.84rem; font-weight: 400;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  border-radius: 999px; padding: 10px 22px; cursor: pointer; letter-spacing: 0.03em;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.filter-btn:hover { border-color: var(--brass-dk); color: var(--warm-white); transform: translateY(-2px); }
.filter-btn.is-active { background: var(--brass); color: #14110E; border-color: var(--brass); font-weight: 600; }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-bottom: clamp(64px, 9vw, 120px); }
.project-card {
  border-radius: var(--radius); overflow: hidden; background: var(--surface);
  border: 1px solid var(--line); position: relative;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.project-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); border-color: var(--brass-dk); }
.project-card.is-hidden { display: none; }
.project-card.is-entering { opacity: 0; transform: scale(0.96); }
.project-card > img { aspect-ratio: 4/3; object-fit: cover; width: 100%; transition: transform 0.8s var(--ease), filter 0.6s var(--ease); filter: saturate(0.88) brightness(0.85); }
.project-card:hover > img { transform: scale(1.06); filter: saturate(1) brightness(1); }
.project-card figcaption { padding: 18px 22px 22px; }
.project-card .cat { font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass-lt); font-weight: 500; }
.project-card h3 { font-size: 1.15rem; margin: 6px 0 0; }

/* ---------- Ideas ----------
   These are detailed diagrams, not decorative photography: cropping them to a
   card cut the right-hand callouts off and the photo filter dimmed the labels
   past reading. One per row, shown whole, at full container width. */
.idea-grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 44px); padding-bottom: clamp(56px, 8vw, 90px);
}
.idea-card {
  display: grid; grid-template-columns: 1fr; border-radius: var(--radius);
  overflow: hidden; background: var(--surface); border: 1px solid var(--line);
  transition: border-color 0.4s var(--ease);
}
.idea-card:hover { border-color: var(--brass-dk); }
.idea-card img {
  width: 100%; height: auto; display: block;
  /* no crop, no dimming — the labels have to stay legible */
  object-fit: contain; filter: none; transition: none;
}
.idea-card:hover img { transform: none; }
.idea-card__body { padding: clamp(20px, 3vw, 30px); }
.idea-card__body h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); margin-bottom: 10px; }
.idea-card__body p { font-size: 0.95rem; line-height: 1.7; margin: 0; color: var(--muted); max-width: 78ch; }

@media (min-width: 1100px) {
  /* on wide screens the diagram can share the row with its explanation */
  .idea-card { grid-template-columns: 1.35fr 0.65fr; align-items: center; }
}

/* ---------- Feature story (Badgir / wind catcher) ---------- */
.feature { padding: clamp(64px, 9vw, 110px) 0; border-top: 1px solid var(--line); background: var(--bg-2); }
.feature__head { text-align: center; max-width: 720px; margin: 0 auto clamp(36px, 5vw, 60px); }
.feature__head p { color: var(--muted); }
.feature__lead {
  font-family: var(--font-display); font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.5; color: var(--cream); max-width: 62ch; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center;
}
.feature__lead strong { color: var(--brass-lt); font-weight: 400; }
.feature__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.feature__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: bg; }
.feature__step {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;
  padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.feature__step:hover { border-color: var(--brass-dk); background: var(--surface-2); }
.feature__step b { font-family: var(--font-display); font-weight: 400; color: var(--brass-lt); font-size: 1.05rem; }
.feature__step h4 { margin: 0 0 4px; font-size: 1.05rem; font-family: var(--font-body); font-weight: 600; color: var(--warm-white); }
.feature__step p { margin: 0; font-size: 0.9rem; color: var(--muted); }
.badgir { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, #12100E, #0B0A09); padding: 10px; }
.feature__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: clamp(32px, 4vw, 52px); list-style: none; padding: 0; }
.feature__facts li { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; background: var(--surface); }
.feature__facts b { display: block; font-family: var(--font-display); color: var(--brass-lt); font-size: 1.5rem; font-weight: 400; margin-bottom: 4px; }
.feature__facts span { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.feature__lessons { margin-top: clamp(32px, 4vw, 52px); }
.feature__lessons h3 { text-align: center; font-size: clamp(1.4rem, 2.4vw, 2rem); margin-bottom: 22px; }
.lesson-list { list-style: none; padding: 0; margin: 0 auto; max-width: 900px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.lesson-list li {
  position: relative; padding: 13px 16px 13px 34px; font-size: 0.9rem; color: var(--muted);
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
}
.lesson-list li::before { content: "◆"; position: absolute; left: 14px; color: var(--brass); font-size: 0.6rem; top: 16px; }
.feature__credit { text-align: center; font-size: 0.76rem; color: var(--faint); margin-top: 28px; }

/* ---------- Themes ---------- */
.themes-intro em { font-style: italic; color: var(--brass-lt); }
.themes-lede { max-width: 56ch; color: var(--muted); margin: 0 0 26px; font-size: 0.96rem; }
.themes-intro + .container .eyebrow, .container > .eyebrow { margin-top: 8px; }
.theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding-bottom: clamp(64px, 9vw, 120px); }
.theme-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface); isolation: isolate;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.theme-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); border-color: var(--brass-dk); }
.theme-card img { aspect-ratio: 3/4; object-fit: cover; width: 100%; transition: transform 0.8s var(--ease), filter 0.6s var(--ease); filter: saturate(0.85) brightness(0.8); }
.theme-card:hover img { transform: scale(1.06); filter: saturate(1) brightness(0.95); }
.theme-card__body { padding: 20px 22px 24px; position: absolute; inset: auto 0 0 0; background: linear-gradient(180deg, transparent, rgba(6,5,5,0.92)); }
.theme-card__body h3 { margin-bottom: 4px; }
.theme-card__body p { font-size: 0.84rem; margin: 0; color: var(--muted); }

/* ---------- Footer ---------- */
.footer { background: #0A0908; border-top: 1px solid var(--line); padding: clamp(56px, 8vw, 96px) 0 34px; }
.footer__social { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-bottom: 38px; }
.social-link {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 11px 22px; text-decoration: none;
  font-size: 0.84rem; font-weight: 400;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.social-link:hover { border-color: var(--brass); color: var(--warm-white); transform: translateY(-2px); }
.footer__contact { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-bottom: 40px; }
.contact-link {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 15px 24px; font-weight: 500; font-size: 0.9rem; color: var(--cream);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.contact-link:hover { background: var(--surface-2); border-color: var(--brass-dk); transform: translateY(-2px); }
.contact-link .ico { font-size: 1.1rem; }
.footer__studio { text-align: center; font-size: 0.86rem; color: var(--muted); }
.footer__studio strong { font-family: var(--font-display); font-weight: 400; font-size: 1rem; color: var(--warm-white); }
.footer__tag { text-align: center; font-family: var(--font-display); font-style: italic; color: var(--faint); margin-top: 10px; font-size: 0.9rem; }

/* ---------- Reveals ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
[data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--reveal-delay, 0s); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease); }
[data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }
[data-reveal="scale"] { opacity: 0; transform: scale(0.94); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
[data-reveal="scale"].is-in { opacity: 1; transform: none; }
.no-motion .reveal, .no-motion [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none; }
[data-parallax] { will-change: transform; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) { .themes-lede { max-width: 56ch; color: var(--muted); margin: 0 0 26px; font-size: 0.96rem; }
.themes-intro + .container .eyebrow, .container > .eyebrow { margin-top: 8px; }
.theme-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 960px) {
  .hero__stage { height: 48svh; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2)::after { display: none; }
  .process__layout, .feature__grid { grid-template-columns: 1fr; gap: 28px; }
  .process__sticky { position: static; }
  .project-grid, .teasers__grid { grid-template-columns: repeat(2, 1fr); }
  .idea-grid { grid-template-columns: 1fr; }
  .lesson-list { grid-template-columns: 1fr; }
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; background: var(--bg-2);
    border-bottom: 1px solid var(--line);
    display: none; padding: 12px 0 20px;
  }
  .nav__links.is-open { display: flex; }
  .nav__links li { width: 100%; text-align: center; }
  .nav__links a { display: inline-block; padding: 12px 0; }
  .nav__cta { margin-top: 8px; }
  .nav__toggle { display: block; }
  .services__scene { height: 300vh; }
}
@media (max-width: 640px) {
  .project-grid, .teasers__grid, .themes-lede { max-width: 56ch; color: var(--muted); margin: 0 0 26px; font-size: 0.96rem; }
.themes-intro + .container .eyebrow, .container > .eyebrow { margin-top: 8px; }
.theme-grid { grid-template-columns: 1fr; }
  .idea-card { grid-template-columns: 1fr; }
  .idea-card img { aspect-ratio: 16/9; }
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .service-cards { grid-template-columns: repeat(2, 1fr); }
  .intro__skip { right: 50%; transform: translateX(50%); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__slide { transition: none; }
  .hero__slide.is-active img { animation: none; transform: none; }
  .project-card > img, .teaser img, .theme-card img, .idea-card img { transition: none; }
  .reveal, [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none; }
  .word > span { transform: none; }
  .service-cards li { opacity: 1; transform: none; }
  .intro { display: none; }
  * { scroll-behavior: auto !important; }
}