/* ============================================================
   Trehan Group — Ultra-luxury developer site (ENHANCED)
   Palette: warm charcoal + soft warm white + champagne metallic + sapphire depth
   Type: Cormorant Garamond (display) + Inter Tight (body)
   ============================================================ */

:root {
  /* Warm espresso base — luxe coffee tones instead of stark black */
  --bg:        #17120E;
  --bg-2:      #1F1813;
  --bg-3:      #2A2018;
  --bg-glass:  rgba(31, 24, 19, 0.72);
  --ink:       #F2E9D6;
  --ink-soft:  rgba(242, 233, 214, 0.78);
  --ink-mute:  rgba(242, 233, 214, 0.55);
  --ink-faint: rgba(242, 233, 214, 0.18);
  --line:      rgba(242, 233, 214, 0.10);
  --line-soft: rgba(242, 233, 214, 0.05);
  --card-line: rgba(242, 233, 214, 0.42);
  --cream:     #EBE3D2;

  /* Brushed champagne gold — richer */
  --accent:    #C9A66B;
  --accent-2:  #9A7E47;
  --accent-glow: rgba(201, 166, 107, 0.30);

  /* Onyx depth fields */
  --onyx-glow-1: rgba(201, 166, 107, 0.07);
  --onyx-glow-2: rgba(201, 166, 107, 0.03);
  --sapphire:  #7891B0;
  --sapphire-soft: rgba(120, 145, 176, 0.18);
  --burgundy:  #5C2A2A;

  --gold-grad: linear-gradient(135deg, #C9A66B 0%, #E4C892 50%, #9A7E47 100%);
  --dark-grad: linear-gradient(180deg, rgba(23,18,14,0) 0%, rgba(23,18,14,0.95) 100%);

  --serif:     'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --sans:      'Inter Tight', 'Inter', system-ui, sans-serif;
  --pad-x:     clamp(24px, 5vw, 96px);
  --max:       1440px;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
  --ease-power4-out: cubic-bezier(0.165, 0.84, 0.44, 1);
}

* { box-sizing: border-box; }

html {
  /* iOS Safari hardening: explicit width caps the html element to the viewport,
     so even if a descendant misbehaves the scrollWidth can't expand horizontally. */
  width: 100%;
  max-width: 100vw;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* `overflow-x: clip` doesn't create a scroll container and is the
     iOS-safe equivalent of `hidden`. `hidden` kept as a fallback. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  cursor: none;
  /* Belt-and-braces: clip-path forces iOS Safari to clip any child
     (including position: fixed elements with off-screen transforms). */
  clip-path: inset(0);
  width: 100%;
  max-width: 100vw;
  position: relative;
}

/* Reset default <figure> margins so figures align with surrounding content
   (without this, every <figure> has 40px left/right margins inherited from
   the browser's user-agent stylesheet, which shows up as ugly indentation). */
figure { margin: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; cursor: none; }
img, video { display: block; max-width: 100%; }

::selection { 
  background: var(--accent); 
  color: var(--bg); 
}

/* ---------- Onyx mouse-follow ambient light ---------- */
.onyx-light {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    600px circle at var(--mx, 50%) var(--my, 30%),
    var(--onyx-glow-1) 0%,
    var(--onyx-glow-2) 25%,
    transparent 55%
  );
  transition: background 0.4s ease;
  mix-blend-mode: screen;
}

/* ---------- Noise texture overlay ---------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* ---------- Custom cursor ---------- */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 12px; height: 12px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10001;
  mix-blend-mode: difference;
  transition: transform 0.15s var(--ease-out-expo), width 0.3s var(--ease-out-expo), height 0.3s var(--ease-out-expo), background 0.3s ease;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor.hover {
  width: 48px; height: 48px;
  background: transparent;
  border: 1px solid var(--accent);
  mix-blend-mode: normal;
}
.cursor.hover::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0.4;
  animation: cursorPulse 2s var(--ease-in-out-sine) infinite;
}
@keyframes cursorPulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.15); opacity: 0.1; }
}

.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 4px; height: 4px;
  background: var(--ink);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10002;
  transform: translate(-50%, -50%);
  will-change: transform;
}

/* ---------- Loading screen ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  transition: opacity 1.2s var(--ease-out-expo), visibility 1.2s;
}
.loader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---------- crest logo above the wordmark ---------- */
.loader__crest {
  width: clamp(72px, 11vw, 110px);
  height: auto;
  /* FIX: aspect-ratio + object-fit pin the round crest's natural shape so
     the bottom half can never be clipped by a parent's height/overflow. */
  aspect-ratio: 1017 / 974;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
  opacity: 0;
  transform: scale(0.72) rotate(-6deg);
  transform-origin: center center;
  filter: drop-shadow(0 0 24px var(--accent-glow));
  /* Two-stage animation:
     1. Graceful entry: fades in, scales up, and settles the slight rotation.
     2. Continuous breath: gentle scale pulse, mimicking a slow heartbeat. */
  animation:
    crestEnter   1.4s var(--ease-out-expo) 0.1s forwards,
    crestBreathe 4.5s ease-in-out 1.6s infinite;
}
@keyframes crestEnter {
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
@keyframes crestBreathe {
  0%, 100% { transform: scale(1)     rotate(0deg); }
  50%      { transform: scale(1.04)  rotate(0deg); }
}

.loader__mark {
  font-family: var(--serif);
  font-size: clamp(42px, 7.5vw, 88px);   /* slightly tighter than before so 'Trehan Group' fits on small phones */
  font-style: italic;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
  overflow: hidden;
}
.loader__mark span {
  display: inline-block;
  transform: translateY(100%);
  animation: loaderReveal 1s var(--ease-out-expo) forwards;
}
.loader__mark span:nth-child(1) { animation-delay: 0.1s; }
.loader__mark span:nth-child(2) { animation-delay: 0.2s; }
.loader__mark span:nth-child(3) { animation-delay: 0.3s; }
.loader__mark span:nth-child(4) { animation-delay: 0.4s; }
.loader__mark span:nth-child(5) { animation-delay: 0.5s; }
.loader__mark span:nth-child(6) { animation-delay: 0.6s; }
@keyframes loaderReveal {
  to { transform: translateY(0); }
}
.loader__line {
  width: 120px;
  height: 1px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.loader__line::after {
  content: '';
  position: absolute;
  left: -100%; top: 0;
  width: 100%; height: 100%;
  background: var(--gold-grad);
  animation: loaderProgress 1.8s var(--ease-out-expo) 0.4s forwards;
}
@keyframes loaderProgress {
  to { left: 100%; }
}
.loader__year {
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--ink-mute);
  opacity: 0;
  animation: fadeIn 1s ease 1.2s forwards;
}
@keyframes fadeIn {
  to { opacity: 1; }
}

/* ---------- shared atoms ---------- */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.35em;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--gold-grad);
  opacity: 0.8;
}

.section-title {
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.section-title em {
  font-style: italic;
  color: var(--ink);
  font-weight: 400;
}

/* luxury button with liquid fill */
a.btn.right-btn {
    border-color: transparent;
}
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 20px 40px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink-faint);
  border-radius: 0;
  cursor: none;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.6s var(--ease-out-expo), border-color 0.6s ease, box-shadow 0.6s ease;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold-grad);
  transform: translateY(101%);
  transition: transform 0.7s var(--ease-out-expo);
  z-index: -1;
}
.btn:hover { 
  color: var(--bg); 
  border-color: var(--accent); 
  box-shadow: 0 0 40px var(--accent-glow);
}
.btn:hover::before { transform: translateY(0); }
.btn .arrow {
  width: 20px; height: 1px; background: currentColor; position: relative;
  transition: width 0.5s var(--ease-out-expo);
}
.btn .arrow::after {
  content: ''; position: absolute; right: -1px; top: -3.5px;
  width: 8px; height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  transition: border-color 0.3s ease;
}
.btn:hover .arrow { width: 32px; }

.btn--ghost { 
  border-color: transparent; 
}
/* .btn--ghost::before { display: none; }
.btn--ghost:hover { 
  color: var(--accent); 
  box-shadow: none;
  border-color: transparent;
}
.btn--ghost:hover .arrow { background: var(--accent); }
.btn--ghost:hover .arrow::after { border-color: var(--accent); } */

/* ---------- Text split reveal animations ---------- */
.split-line {
  overflow: hidden;
  display: block;
}
.split-line .line-inner {
  display: block;
  transform: translateY(110%);
  transition: transform 1.2s var(--ease-out-expo);
}
.split-line.revealed .line-inner {
  transform: translateY(0);
}

.split-word {
  overflow: hidden;
  display: inline-block;
  vertical-align: top;
}
.split-word .word-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--ease-out-expo);
}
.split-word.revealed .word-inner {
  transform: translateY(0);
}

.split-char {
  display: inline-block;
  overflow: hidden;
}
.split-char .char-inner {
  display: inline-block;
  transform: translateY(110%) rotate(4deg);
  transition: transform 0.8s var(--ease-out-expo);
}
.split-char.revealed .char-inner {
  transform: translateY(0) rotate(0deg);
}

/* ---------- Image mask reveal ---------- */
.img-reveal {
  position: relative;
  overflow: hidden;
}
.img-reveal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-2);
  z-index: 2;
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 1.4s var(--ease-out-expo);
}
.img-reveal.revealed::before {
  transform: scaleX(0);
}
.img-reveal img,
.img-reveal .img-inner {
  transform: scale(1.2);
  transition: transform 1.6s var(--ease-out-expo);
}
.img-reveal.revealed img,
.img-reveal.revealed .img-inner {
  transform: scale(1);
}

/* ---------- Scroll reveal base ---------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s var(--ease-out-quart), transform 1.2s var(--ease-out-quart);
  will-change: opacity, transform;
}
.reveal.in { 
  opacity: 1; 
  transform: none; 
}
.reveal[data-d="1"] { transition-delay: 0.1s; }
.reveal[data-d="2"] { transition-delay: 0.2s; }
.reveal[data-d="3"] { transition-delay: 0.35s; }
.reveal[data-d="4"] { transition-delay: 0.5s; }
.reveal[data-d="5"] { transition-delay: 0.65s; }

/* ---------- NAVIGATION ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 28px 0;
  transition: padding 0.6s var(--ease-out-expo), background 0.5s ease, border-color 0.5s ease, backdrop-filter 0.5s ease;
  border-bottom: 1px solid transparent;
  background: linear-gradient(to bottom, rgba(10,9,8,0.6), rgba(10,9,8,0));
}
.nav.scrolled {
  padding: 16px 0;
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom-color: var(--line);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.4s var(--ease-out-expo);
}
.nav__brand:hover {
  transform: translateX(4px);
}
.nav__crest {
  height: 48px;
  width: auto;
  /* FIX: lock the natural aspect ratio + contain so the round crest
     is never squished or clipped on any viewport. */
  aspect-ratio: 1017 / 974;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
  transition: height 0.6s var(--ease-out-expo), filter 0.4s ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.nav.scrolled .nav__crest { height: 38px; }
.nav__wordmark {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 1px solid var(--line);
  padding-left: 16px;
}
.nav__name {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--ink);
  line-height: 1;
}
.nav__wordmark small {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--ink-mute);
  line-height: 1;
}
.nav__links {
  display: flex;
  gap: clamp(20px, 2.8vw, 40px);
  align-items: center;
}
.nav__link {
  position: relative;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  padding: 8px 0;
  transition: color 0.4s ease, letter-spacing 0.4s ease;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 0;
  background: var(--gold-grad);
  transition: width 0.6s var(--ease-out-expo);
}
.nav__link:hover { 
  color: var(--ink); 
  letter-spacing: 0.12em;
}
.nav__link:hover::after { width: 100%; }
.nav__link--active::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: var(--gold-grad);
  transition: width 0.6s var(--ease-out-expo);
}
.nav__cta {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  padding: 12px 26px;
  border: 1px solid var(--ink-faint);
  color: var(--ink);
  transition: all 0.5s var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}
.nav__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out-expo);
  z-index: -1;
}
.nav__cta:hover { 
  color: var(--bg); 
  border-color: var(--accent); 
  box-shadow: 0 0 30px var(--accent-glow);
}
.nav__cta:hover::before { transform: scaleX(1); }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: -10% 0 0 0;
  z-index: -2;
  will-change: transform;
}
.hero__media .hero__video,
.hero__media .hero__image,
.hero__media .hero__ribbon,
.hero__media .fallback {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__media .hero__video { z-index: 3; }
.hero__media .hero__image { 
  z-index: 2; 
  background-size: cover; 
  background-position: center; 
  filter: saturate(0.8) contrast(1.06); 
}
.hero__media .hero__ribbon { z-index: 3; display: none; }
.hero__media .fallback { z-index: 1; }
.hero[data-banner="image"] .hero__video,
.hero[data-banner="image"] .hero__ribbon { display: none; }
.hero[data-banner="image"] .hero__image { display: block; }
.hero[data-banner="gradient"] .hero__video,
.hero[data-banner="gradient"] .hero__ribbon,
.hero[data-banner="gradient"] .hero__image { display: none; }
.hero[data-banner="ribbon"] .hero__video,
.hero[data-banner="ribbon"] .hero__image { display: none; }
.hero[data-banner="ribbon"] .hero__ribbon { display: block; }
.hero[data-banner="video"] .hero__image { opacity: 0; transition: opacity 0.8s ease; }
.hero[data-banner="video"].video-ready .hero__image { display: none; }
.hero[data-banner="video"]:not(.video-ready) .hero__video { opacity: 0; }
.hero[data-banner="video"].video-ready .hero__video { opacity: 1; transition: opacity 0.8s ease; }

.hero__media .fallback {
  background:
    radial-gradient(ellipse at 25% 20%, rgba(201,169,110,0.15), transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(60,50,40,0.5), transparent 60%),
    linear-gradient(180deg, #15120d 0%, #0a0908 100%);
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,9,8,0.4) 0%, rgba(10,9,8,0.05) 35%, rgba(10,9,8,0.5) 75%, rgba(10,9,8,0.95) 100%),
    linear-gradient(90deg, rgba(10,9,8,0.65) 0%, rgba(10,9,8,0) 55%);
}

.hero__top {
  padding-top: 26vh;
  padding-bottom: 7vh;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__eyebrow { margin-bottom: 32px; }
.hero__headline {
  font-size: clamp(52px, 6vw, 132px);
  line-height: 0.94;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 14ch;
  font-weight: 400;
}
.hero__headline em {
  font-style: italic;
  color: var(--ink);
  font-weight: 400;
}
.hero__sub {
  margin-top: 36px;
  max-width: 48ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  font-weight: 400;
}
.hero__cta-row {
  margin-top: 52px;
  display: flex;
  gap: 32px;
  align-items: center;
  flex-wrap: wrap;
}

.hero__bottom {
  padding-bottom: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 48px;
  align-items: end;
}
.stat__num {
  font-family: var(--serif);
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.stat__num em {
  font-style: italic;
  color: var(--accent);
  font-size: 0.65em;
  font-weight: 400;
}
.stat__label {
  margin-top: 16px;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--ink-mute);
}
.scroll-hint {
  display: flex; flex-direction: column;
  align-items: flex-end;
  gap: 18px;
  font-size: 10px;
  letter-spacing: 0.35em;
  color: var(--ink-mute);
}
.scroll-hint__line {
  width: 1px; height: 64px;
  background: linear-gradient(180deg, var(--accent), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-hint__line::after {
  content: '';
  position: absolute;
  left: 0; top: -30%;
  width: 1px; height: 30%;
  background: var(--ink);
  animation: scrollDot 2.8s var(--ease-out-expo) infinite;
}
@keyframes scrollDot {
  0%   { top: -30%; opacity: 0; }
  20%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ---------- ABOUT ---------- */
.about {
  position: relative;
  padding: clamp(64px, 9vh, 110px) 0;
  overflow: hidden;
}

/* ---------- Odometer digit roll ---------- */
.num-roll {
  display: inline-flex;
  align-items: baseline;
}
.num-roll__cell,
.num-roll__sep {
  display: inline-block;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  will-change: transform, opacity;
}
.num-roll__cell.roll {
  animation: numRoll 0.42s var(--ease-out-expo) both;
}
@keyframes numRoll {
  0%   { transform: translateY(-0.55em) rotateX(70deg); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0) rotateX(0); opacity: 1; }
}
.about__inner {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: clamp(48px, 7vw, 112px);
  position: relative;
}
.about__divider {
  position: relative;
  background: linear-gradient(180deg, transparent, var(--line) 10%, var(--line) 90%, transparent);
  width: 1px;
  justify-self: center;
}
.about__divider::after {
  content: '';
  position: absolute;
  left: 50%; top: 40%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 8px rgba(10,9,8,0.7),
    0 0 0 9px var(--accent),
    0 0 48px 6px var(--accent-glow);
  animation: pulse 4s var(--ease-in-out-sine) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 8px rgba(10,9,8,0.7), 0 0 0 9px var(--accent), 0 0 32px 4px var(--accent-glow); }
  50%      { box-shadow: 0 0 0 8px rgba(10,9,8,0.7), 0 0 0 9px var(--accent), 0 0 56px 12px var(--accent-glow); }
}

.about__lead { display: flex; flex-direction: column; gap: 32px; }
.about__title {
  font-family: var(--serif);
  font-size: clamp(44px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.about__title em { font-style: italic; color: var(--ink); }
.about__intro {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 48ch;
}
.about__tabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 2.8vw, 40px);
  margin-top: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}
.about__tab-indicator {
  position: absolute;
  top: 0;
  height: 2px;
  margin-top: -1px;
  background: var(--gold-grad);
  box-shadow: 0 0 16px var(--accent-glow);
  transition: left 0.7s var(--ease-out-expo), top 0.7s var(--ease-out-expo), width 0.7s var(--ease-out-expo);
  pointer-events: none;
}
.about__tab {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  padding: 6px 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  cursor: none;
  transition: color 0.5s ease;
  position: relative;
}
.about__tab__icon {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  position: relative;
  transition: transform 0.5s var(--ease-out-expo);
}
.about__tab__icon::before {
  content: '';
  display: block;
  width: 0; height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid currentColor;
  color: var(--ink-mute);
  transition: color 0.5s ease, transform 0.5s var(--ease-out-expo);
}
.about__tab__icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.6s ease, transform 0.7s var(--ease-out-expo);
  filter: blur(10px);
}
.about__tab:hover { color: var(--ink-soft); }
.about__tab:hover .about__tab__icon::before { color: var(--ink-soft); }
.about__tab.active { color: var(--accent); }
.about__tab.active .about__tab__icon { transform: translateX(3px) rotate(-10deg); }
.about__tab.active .about__tab__icon::before { color: var(--accent); transform: scale(1.08); }
.about__tab.active .about__tab__icon::after { opacity: 0.7; transform: scale(1.3); }

.about__feature {
  margin-top: 32px;
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
  background: var(--bg-3);
}
.about__feature img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.78) contrast(1.06);
  transition: transform 1.8s var(--ease-out-expo), filter 0.8s ease;
}
.about__feature:hover img { 
  transform: scale(1.06); 
  filter: saturate(0.9) contrast(1.08);
}
.about__feature::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10,9,8,0.55));
  pointer-events: none;
}
.about__feature-cap {
  position: absolute;
  bottom: 22px; left: 28px; right: 28px;
  display: flex; justify-content: space-between;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  color: var(--ink-soft);
}
.about__feature-cap span:last-child { color: var(--accent); }

/* tab panels */
.about__panel {
  position: relative;
  min-height: 480px;
}
.about__pane {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(50px);
  filter: blur(8px);
  transition: opacity 0.7s var(--ease-out-quart), transform 0.9s var(--ease-out-expo), filter 0.6s ease;
  pointer-events: none;
}
.about__pane.active {
  opacity: 1;
  transform: none;
  filter: blur(0);
  pointer-events: auto;
  position: relative;
}
.about__pane > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out-quart), transform 0.8s var(--ease-out-expo);
}
.about__pane.active > * { opacity: 1; transform: none; }
.about__pane.active > *:nth-child(1) { transition-delay: 0.08s; }
.about__pane.active > *:nth-child(2) { transition-delay: 0.18s; }
.about__pane.active > *:nth-child(3) { transition-delay: 0.28s; }
.about__pane.active > *:nth-child(4) { transition-delay: 0.38s; }

.about__pane.active .bigstat,
.about__pane.active .value,
.about__pane.active .team-cell,
.about__pane.active .founder {
  animation: paneItemIn 0.8s var(--ease-out-expo) both;
}
.about__pane.active .bigstat:nth-child(1),
.about__pane.active .value:nth-child(1),
.about__pane.active .team-cell:nth-child(1),
.about__pane.active .founder:nth-child(1) { animation-delay: 0.2s; }
.about__pane.active .bigstat:nth-child(2),
.about__pane.active .value:nth-child(2),
.about__pane.active .team-cell:nth-child(2),
.about__pane.active .founder:nth-child(2) { animation-delay: 0.3s; }
.about__pane.active .bigstat:nth-child(3),
.about__pane.active .value:nth-child(3),
.about__pane.active .team-cell:nth-child(3),
.about__pane.active .founder:nth-child(3) { animation-delay: 0.4s; }
.about__pane.active .value:nth-child(4),
.about__pane.active .team-cell:nth-child(4) { animation-delay: 0.5s; }
.about__pane.active .team-cell:nth-child(5) { animation-delay: 0.6s; }
.about__pane.active .team-cell:nth-child(6) { animation-delay: 0.7s; }
@keyframes paneItemIn {
  from { opacity: 0; transform: translateY(28px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* Who We Are */
.about__panel-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.35em;
  color: var(--accent);
  margin-bottom: 44px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.about__panel-label::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--gold-grad);
}
.bigstats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bigstat {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.4s ease, background 0.4s ease;
}
.bigstat:hover {
  background: linear-gradient(90deg, transparent, rgba(201,169,110,0.03), transparent);
  border-bottom-color: var(--accent);
}
.bigstat:last-child { border-bottom: none; }
.bigstat__num {
  font-family: var(--serif);
  font-size: clamp(96px, 12vw, 180px);
  line-height: 0.86;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--ink);
  transition: transform 0.6s var(--ease-out-expo);
}
.bigstat:hover .bigstat__num {
  transform: translateX(8px);
}
.bigstat__num em { font-style: italic; font-size: 0.5em; }
.bigstat__label {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
  text-align: right;
  max-width: 16ch;
}

/* Values */
.values {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--line);
  background: rgba(245, 240, 232, 0.015);
  backdrop-filter: blur(4px);
}
.value {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 26px 32px;
  border-bottom: 1px solid var(--line);
  transition: background 0.5s ease, transform 0.5s var(--ease-out-expo);
}
.value:hover { 
  background: rgba(245, 240, 232, 0.04); 
  transform: translateX(4px);
}
.value:last-child { border-bottom: none; }
.value__title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 6px;
}
.value__body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.value__num {
  font-family: var(--serif);
  font-size: clamp(48px, 5vw, 64px);
  font-weight: 400;
  color: var(--ink-faint);
  letter-spacing: -0.02em;
  line-height: 1;
  transition: color 0.4s ease;
}
.value:hover .value__num { color: var(--accent); }

/* Team */
.team-intro {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 44px;
  letter-spacing: -0.005em;
}
.team-intro em { font-style: italic; color: var(--ink); }
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.team-cell {
  background: var(--bg-2);
  padding: 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background 0.5s ease, transform 0.5s var(--ease-out-expo);
}
.team-cell:hover { 
  background: var(--bg-3); 
  transform: translateY(-2px);
}
.team-cell__count {
  font-family: var(--serif);
  font-style: italic;
  font-size: 34px;
  color: var(--ink);
  font-weight: 400;
  line-height: 1;
  transition: transform 0.4s var(--ease-out-expo);
}
.team-cell:hover .team-cell__count {
  transform: scale(1.08);
}
.team-cell__role {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  color: var(--ink-soft);
}

/* Founders */
.founders {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.founder {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg-3);
  cursor: none;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  transition: transform 0.6s var(--ease-out-expo), box-shadow 0.6s ease;
}
.founder:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.4), 0 0 0 1px var(--line);
}
.founder__portrait {
  position: relative;
  flex: 1 1 auto;
  background:
    repeating-linear-gradient(135deg,
      rgba(245,240,232,0.02) 0px,
      rgba(245,240,232,0.02) 1px,
      transparent 1px,
      transparent 10px),
    radial-gradient(ellipse at 50% 35%, rgba(201,169,110,0.12) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.founder__portrait::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  pointer-events: none;
  transition: border-color 0.4s ease;
}
.founder:hover .founder__portrait::before {
  border-color: var(--accent);
}
.founder__monogram {
  font-family: var(--serif);
  font-size: clamp(60px, 5vw, 160px);
  line-height: 0.88;
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.04em;
  opacity: 0.9;
  filter: drop-shadow(0 6px 32px rgba(0,0,0,0.5));
  transition: transform 1.4s var(--ease-out-expo), filter 0.6s ease;
}
.founder:hover .founder__monogram { 
  transform: scale(1.08); 
  filter: drop-shadow(0 8px 40px rgba(201,169,110,0.2));
}
.founder__caption {
  position: absolute;
  top: 18px; left: 20px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
  opacity: 0.5;
}
.founder__plate {
  position: relative;
  padding: 22px 22px 24px;
  background: linear-gradient(180deg, transparent, var(--bg) 40%);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1;
  transition: border-color 0.4s ease;
}
.founder:hover .founder__plate {
  border-top-color: var(--accent);
}
.founder__name {
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: 0.005em;
  color: var(--ink);
  line-height: 1.15;
}
.founder__role {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--ink-mute);
}
/* "Meet Our Founders" oversized italic mark — sits below the portraits */
.meet-mark {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 0.9;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.04em;
  font-size: clamp(56px, 7vw, 96px);
  background: linear-gradient(135deg,
    var(--accent) 0%,
    rgba(245,240,232,0.04) 60%,
    transparent 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px var(--accent);
  text-stroke: 1px var(--accent);
  text-align: right;
  pointer-events: none;
  opacity: 0.78;
  transition: opacity 0.6s ease, transform 0.8s var(--ease-out-expo);
}
.meet-mark span:nth-child(2) {
  align-self: flex-end;
  margin-right: 0;
}
.about__pane.active .meet-mark {
  animation: meetMarkIn 1.4s var(--ease-out-expo) 0.5s both;
}
@keyframes meetMarkIn {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 0.78; transform: none; }
}

.founders-cap {
  margin-top: 32px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ---------- SECTIONS ---------- */
.section {
  padding: clamp(64px, 9vh, 110px) 0;
  position: relative;
}
.section--alt { 
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 18%, var(--bg-2) 82%, var(--bg) 100%);
  position: relative;
}
.section--alt::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 60% 40% at 15% 10%, rgba(201,166,107,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 85% 90%, rgba(120,145,176,0.04) 0%, transparent 60%);
  pointer-events: none;
}
.section__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: end;
  margin-bottom: 96px;
  position: relative;
  z-index: 1;
}
.section__head .lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 46ch;
  justify-self: end;
}

/* ---------- CITIES ---------- */
.cities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  position: relative;
  z-index: 1;
}
.city {
  position: relative;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 36px 36px 36px;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  cursor: none;
  isolation: isolate;
  background: var(--bg);
  transition: background 0.6s ease;
}
.city:hover {
  background: var(--bg-2);
}
.city__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 1;
  transform: scale(1);
  transition: transform 1.6s var(--ease-out-expo), filter 0.8s ease;
}
.city__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,9,8,0.6) 0%, rgba(10,9,8,0.94) 100%);
  z-index: 1;
  transition: background 0.8s ease;
}
.city__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.5) brightness(0.8) contrast(1.06);
  transition: filter 0.9s ease, transform 1.6s var(--ease-out-expo);
}
.city:hover .city__bg { transform: scale(1.08); }
.city:hover .city__bg::before {
  background: linear-gradient(180deg, rgba(10,9,8,0.2) 0%, rgba(10,9,8,0.7) 100%);
}
.city:hover .city__bg img { 
  filter: saturate(1) brightness(1) contrast(1.06); 
  transform: scale(1.04);
}
.city__index {
  position: absolute;
  top: 32px; left: 36px;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  color: var(--ink-mute);
  z-index: 2;
  transition: color 0.4s ease;
}
.city:hover .city__index { color: var(--accent); }
.city__name {
  font-size: clamp(36px, 3.2vw, 48px);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  z-index: 2;
  transition: transform 0.6s var(--ease-out-expo);
}
.city:hover .city__name {
  transform: translateX(4px);
}
.city__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  z-index: 2;
}
.city__meta .count em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  margin-right: 6px;
}
.city__line {
  position: absolute;
  left: 36px; right: 36px; bottom: 36px;
  height: 1px;
  background: var(--ink-faint);
  z-index: 2;
  overflow: hidden;
}
.city__line::after {
  content: '';
  position: absolute;
  left: 0; top: 0; height: 100%;
  width: 0;
  background: var(--gold-grad);
  transition: width 0.9s var(--ease-out-expo);
}
.city:hover .city__line::after { width: 100%; }
.city__arrow {
  position: absolute;
  top: 32px; right: 36px;
  width: 36px; height: 36px;
  border: 1px solid var(--ink-faint);
  border-radius: 50%;
  display: grid; place-items: center;
  z-index: 2;
  transition: all 0.6s var(--ease-out-expo);
  color: var(--ink-soft);
}
.city__arrow svg { width: 14px; height: 14px; transition: transform 0.5s var(--ease-out-expo); }
.city:hover .city__arrow {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  transform: scale(1.1);
  box-shadow: 0 0 24px var(--accent-glow);
}
.city:hover .city__arrow svg { transform: translate(3px, -3px); }

/* ---------- PROJECTS ---------- */
.projects {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 28px;
}
.project {
  position: relative;
  overflow: hidden;
  background: var(--bg-3);
  isolation: isolate;
  cursor: none;
  transition: transform 0.7s var(--ease-out-expo), box-shadow 0.7s ease;
}
.project:nth-child(1) { grid-column: span 7; aspect-ratio: 16 / 11; }
.project:nth-child(2) { grid-column: span 5; aspect-ratio: 16 / 11; }
.project:nth-child(3) { grid-column: span 4; aspect-ratio: 4 / 5; }
.project:nth-child(4) { grid-column: span 4; aspect-ratio: 4 / 5; }
.project:nth-child(5) { grid-column: span 4; aspect-ratio: 4 / 5; }
/* FIX: portfolios with more than 5 projects (e.g. Residential) used to
   collapse to zero-width tiles on desktop because no nth-child rule
   matched. Items 6 and beyond now fall into a clean 3-up uniform grid. */
.project:nth-child(n+6) { grid-column: span 4; aspect-ratio: 4 / 5; }

.project:hover {
  transform: translateY(-8px);
  box-shadow: 0 32px 64px rgba(0,0,0,0.35), 0 0 0 1px var(--line);
}

.project__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.75) contrast(1.06);
  transition: transform 1.8s var(--ease-out-expo), filter 0.8s ease;
}
.project:hover .project__img { 
  transform: scale(1.08); 
  filter: saturate(0.95) contrast(1.1); 
}
.project__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,9,8,0.3) 0%, rgba(10,9,8,0.08) 35%, rgba(10,9,8,0.9) 100%);
  transition: background 0.6s ease;
}
.project:hover .project__scrim {
  background: linear-gradient(180deg, rgba(10,9,8,0.15) 0%, rgba(10,9,8,0.05) 35%, rgba(10,9,8,0.85) 100%);
}
.project__body {
  position: absolute;
  left: 36px; right: 36px; bottom: 32px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 5px;
  color: var(--ink);
}
.project__tag {
  position: absolute;
  top: 32px; left: 36px;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--ink);
  padding: 8px 14px;
  background: rgba(10,9,8,0.6);
  border: 1px solid var(--ink-faint);
  backdrop-filter: blur(10px);
  transition: border-color 0.4s ease, background 0.4s ease;
}
.project:hover .project__tag {
  border-color: var(--accent);
  background: rgba(10,9,8,0.8);
}
.project__name {
  font-size: clamp(26px, 1.5vw, 40px);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.005em;
  transition: transform 0.5s var(--ease-out-expo);
}
.project:hover .project__name {
  transform: translateX(4px);
}
.project__loc {
  font-size: 11.5px;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
  margin-top: 10px;
}
.project__stat {
  text-align: right;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
}
.project__stat em {
  display: block;
  font-family: var(--serif);
  font-size: 24px;
  font-style: italic;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 6px;
  transition: transform 0.5s var(--ease-out-expo);
}
.project:hover .project__stat em {
  transform: scale(1.05);
}

/* ============================================================
   TESTIMONIALS — scroll-stacked deck
   ============================================================ */
.testimonials-stack {
  position: relative;
  padding-top: clamp(64px, 9vh, 110px);
  padding-bottom: clamp(40px, 6vh, 80px);
}
.ts-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(0, 1.4fr);
  gap: clamp(48px, 7vw, 112px);
  align-items: start;
}
.ts-side {
  position: relative;
  align-self: stretch;
}
.ts-side__inner {
  position: sticky;
  top: 14vh;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: 80px;
}
.ts-side__lead {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 38ch;
}
.ts-side__count {
  margin-top: 12px;
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
}
.ts-side__index {
  font-size: 42px;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: lining-nums;
  letter-spacing: -0.01em;
  transition: color 0.6s ease;
}
.ts-side__divider {
  width: 28px; height: 1px;
  background: var(--accent);
  opacity: 0.7;
}
.ts-side__total {
  font-size: 20px;
  color: var(--ink-mute);
}

.ts-deck {
  display: flex;
  flex-direction: column;
  gap: 32vh;
  padding-bottom: 30vh;
}
.ts-card {
  position: sticky;
  top: 18vh;
  min-height: 520px;
  background: linear-gradient(180deg, rgba(23,24,27,0.94) 0%, rgba(17,17,20,0.94) 100%);
  border: 1px solid var(--line);
  padding: clamp(40px, 5vw, 72px) clamp(36px, 4.5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  isolation: isolate;
  will-change: transform, opacity, filter;
  backdrop-filter: blur(10px);
}
.ts-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--gold-grad);
  opacity: 0.5;
}
.ts-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(11,11,12, var(--card-darken, 0));
  pointer-events: none;
  transition: background 0.4s ease;
  z-index: 1;
}
.ts-card__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 36px;
  height: 100%;
}
.ts-card__num {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--accent);
}
.ts-card__quote {
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.32;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.005em;
  flex: 1;
  text-wrap: pretty;
}
.ts-card__quote em { font-style: italic; color: var(--ink); }
.ts-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.ts-card__name {
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  color: var(--ink);
}
.ts-card__role {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  margin-top: 6px;
}
.ts-card__signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: 38px;
  color: var(--accent);
  opacity: 0.85;
  letter-spacing: 0.06em;
}

/* ============================================================
   AWARDS — minimalist list + cursor-following image
   ============================================================ */
.awards-list { position: relative; }
.awards-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.award-row {
  position: relative;
  display: grid;
  grid-template-columns: 110px 1fr auto 32px;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding: 36px 0;
  border-bottom: 1px solid var(--line);
  cursor: none;
  transition: padding-left 0.7s var(--ease-power4-out), background 0.6s ease;
}
.award-row:hover {
  padding-left: clamp(24px, 4vw, 56px);
  background: linear-gradient(90deg, transparent, rgba(184,153,104,0.04) 30%, transparent 100%);
}
.award-row__year {
  font-family: var(--serif);
  font-style: italic;
  font-size: 30px;
  color: var(--ink-mute);
  letter-spacing: -0.01em;
  transition: color 0.5s ease;
}
.award-row:hover .award-row__year { color: var(--accent); }
.award-row__title {
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 38px);
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.008em;
  font-weight: 400;
}
.award-row__by {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
  text-align: right;
  max-width: 22ch;
  transition: color 0.5s ease;
}
.award-row:hover .award-row__by { color: var(--ink-soft); }
.award-row__arrow {
  font-family: var(--sans);
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.6s var(--ease-power4-out), transform 0.7s var(--ease-power4-out);
}
.award-row:hover .award-row__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* cursor-following image */
.award-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 320px;
  height: 400px;
  pointer-events: none;
  opacity: 0;
  z-index: 90;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
.award-cursor.show {
  opacity: 1;
}
.award-cursor__frame {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg-3);
  border: 1px solid var(--line);
  box-shadow: 0 32px 64px rgba(0,0,0,0.55);
}
.award-cursor__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.82) contrast(1.05);
  transition: background-image 0.5s ease;
}
.award-cursor__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(11,11,12,0.85));
  pointer-events: none;
}
.award-cursor__tag {
  position: absolute;
  bottom: 16px; left: 18px; right: 18px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--accent);
  z-index: 2;
}

/* ============================================================
   INSIGHTS — background takeover
   ============================================================ */
.insights-takeover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg);
}
.ito-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.ito-bg__layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.08);
  filter: saturate(0.75) contrast(1.06);
  transition: opacity 1.2s var(--ease-power4-out), transform 1.4s var(--ease-power4-out);
}
.ito-bg__layer.active {
  opacity: 0.55;
  transform: scale(1);
}
.ito-bg__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(11,11,12,0.5) 35%, rgba(11,11,12,0.75) 80%, var(--bg) 100%),
    linear-gradient(90deg, var(--bg) 0%, rgba(11,11,12,0) 50%, var(--bg) 100%);
}

.ito-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  position: relative;
  z-index: 1;
}
.ito-item {
  position: relative;
  padding: 48px 0;
  border-bottom: 1px solid var(--line);
  cursor: none;
  transition: padding-left 0.7s var(--ease-power4-out), opacity 0.6s ease;
  display: grid;
  gap: 18px;
}
.ito-item.dim { opacity: 0.34; }
.ito-item.active { opacity: 1; padding-left: clamp(24px, 4vw, 56px); }
.ito-item__cat {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--accent);
}
.ito-item__title {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 60px);
  line-height: 1.06;
  font-weight: 400;
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: 22ch;
  transition: color 0.6s ease, transform 0.7s var(--ease-power4-out);
}
.ito-item.active .ito-item__title { color: var(--ink); transform: translateX(0); }
.ito-item__meta {
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  flex-wrap: wrap;
}
.ito-item__read {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-style: italic;
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 0;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.6s var(--ease-power4-out), transform 0.7s var(--ease-power4-out);
}
.ito-item.active .ito-item__read {
  opacity: 1;
  transform: translateX(0);
}
.ito-item__arrow {
  font-size: 18px;
  display: inline-block;
  transition: transform 0.4s var(--ease-power4-out);
}
.ito-item:hover .ito-item__arrow { transform: translateX(6px); }

/* Responsive */
@media (max-width: 980px) {
  .ts-grid { grid-template-columns: 1fr; gap: 56px; }
  .ts-side__inner { position: static; }
  .ts-card { min-height: 420px; position: relative; top: auto; }
  .ts-deck { gap: 24px; padding-bottom: 0; }
  .award-row { grid-template-columns: 70px 1fr; gap: 16px; padding: 24px 0; }
  .award-row__by, .award-row__arrow { grid-column: 2; text-align: left; }
  .award-cursor { display: none; }
  .ito-item__title { font-size: clamp(26px, 6vw, 42px); }
  .ito-item__read { margin-left: 0; }
}
.testimonial {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 96px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.testimonial__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bg-3);
  overflow: hidden;
}
.testimonial__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  pointer-events: none;
}
.testimonial__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 1.2s ease, transform 10s linear;
  filter: saturate(0.7);
}
.testimonial__slide.active { 
  opacity: 1; 
  transform: scale(1); 
}

.testimonial__content {
  position: relative;
}
.testimonial__quotemark {
  font-family: var(--serif);
  font-size: 140px;
  line-height: 0.5;
  color: var(--accent);
  opacity: 0.3;
  margin-bottom: 20px;
  transition: opacity 0.6s ease, transform 0.6s var(--ease-out-expo);
}
.testimonial__quote {
  font-family: var(--serif);
  font-size: clamp(26px, 2.8vw, 42px);
  line-height: 1.35;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.005em;
  min-height: 5em;
  transition: opacity 0.6s ease;
}
.testimonial__quote em { font-style: italic; color: var(--ink); }
.testimonial__attribution {
  margin-top: 48px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.testimonial__name {
  font-family: var(--serif);
  font-size: 24px;
  font-style: italic;
  color: var(--ink);
  transition: color 0.4s ease;
}
.testimonial__role {
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--ink-mute);
  margin-top: 8px;
}
.testimonial__dots {
  margin-top: 44px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.testimonial__dot {
  width: 40px; height: 2px;
  background: var(--ink-faint);
  cursor: none;
  position: relative;
  overflow: hidden;
  border: none;
  padding: 0;
  transition: background 0.4s ease;
}
.testimonial__dot:hover { background: var(--ink-mute); }
.testimonial__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.testimonial__dot.active::after { 
  transform: scaleX(1); 
  transition: transform 6s linear; 
}

/* ---------- AWARDS ---------- */
.awards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  position: relative;
  z-index: 1;
}
.award {
  padding: 52px 44px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 22px;
  transition: background 0.6s ease, transform 0.6s var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}
.award::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--gold-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out-expo);
}
.award:nth-child(3n) { border-right: none; }
.award:nth-last-child(-n+3) { border-bottom: none; }
.award:hover { 
  background: var(--bg-3); 
  transform: translateY(-4px);
}
.award:hover::before {
  transform: scaleX(1);
}
.award__year {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  color: var(--ink);
  transition: transform 0.5s var(--ease-out-expo);
}
.award:hover .award__year {
  transform: translateX(4px);
}
.award__title {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.award__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-top: auto;
}
.award__by {
  font-size: 10.5px;
  letter-spacing: 0.28em;
  color: var(--ink-mute);
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* ---------- INSIGHTS ---------- */
.insights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  position: relative;
  z-index: 1;
}
.insight {
  display: flex;
  flex-direction: column;
  gap: 24px;
  cursor: none;
  transition: transform 0.6s var(--ease-out-expo);
}
.insight:hover {
  transform: translateY(-6px);
}
.insight__img {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-3);
  overflow: hidden;
}
.insight__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(10,9,8,0.35));
}
.insight__img-inner {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.75);
  transition: transform 1.6s var(--ease-out-expo), filter 0.8s ease;
}
.insight:hover .insight__img-inner { 
  transform: scale(1.08); 
  filter: saturate(0.9);
}
.insight__cat {
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--accent);
  transition: letter-spacing 0.4s ease;
}
.insight:hover .insight__cat {
  letter-spacing: 0.38em;
}
.insight__title {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink);
  transition: color 0.5s ease;
}
.insight:hover .insight__title { color: var(--accent); }
.insight__meta {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  margin-top: 6px;
  display: flex;
  gap: 16px;
}
.insight__meta span:nth-child(2)::before {
  content: '·';
  margin-right: 16px;
  color: var(--ink-faint);
}

/* ---------- CONTACT / FOOTER ---------- */
.cta-band {
  padding: clamp(80px, 12vh, 140px) 0;
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at 50% 50%, rgba(201,169,110,0.04) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(107,140,174,0.03) 0%, transparent 50%);
  pointer-events: none;
}
.cta-band__title {
  font-size: clamp(56px, 8vw, 120px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 400;
  position: relative;
}
.cta-band__title em { font-style: italic; color: var(--ink); }
.cta-band__sub {
  margin-top: 32px;
  max-width: 54ch;
  margin-left: auto; margin-right: auto;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  position: relative;
}
.cta-band__actions {
  margin-top: 52px;
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

.footer {
  padding: 96px 0 36px;
  background: var(--bg);
  position: relative;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 1px;
  background: var(--gold-grad);
  opacity: 0.5;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 72px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--line);
}
.footer__brand-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 22px;
}
.footer__crest {
  height: 52px;
  width: auto;
  /* FIX: lock the natural aspect ratio + contain so the round crest
     is never squished or clipped. */
  aspect-ratio: 1017 / 974;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
  opacity: 0.95;
  transition: transform 0.6s var(--ease-out-expo);
}
.footer__brand-row:hover .footer__crest {
  transform: rotate(-5deg) scale(1.05);
}
.footer__brand {
  font-family: var(--serif);
  font-size: 32px;
  letter-spacing: 0.01em;
  margin-bottom: 0;
}
.footer__tag {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 40ch;
}
.footer__col h4 {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--ink-mute);
  margin-bottom: 24px;
  font-weight: 500;
}
.footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.footer__col a {
  font-size: 14.5px;
  color: var(--ink-soft);
  transition: color 0.4s ease, transform 0.4s var(--ease-out-expo);
  display: inline-block;
}
.footer__col a:hover { 
  color: var(--accent); 
  transform: translateX(4px);
}
.footer__bottom {
  padding-top: 36px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  flex-wrap: wrap;
  gap: 20px;
}

/* ---------- TWEAKS PANEL ---------- */
.tweaks {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 300px;
  background: var(--bg-glass);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--line);
  z-index: 200;
  font-family: var(--sans);
  display: none;
  flex-direction: column;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5);
  transition: transform 0.4s var(--ease-out-expo), opacity 0.4s ease;
}
.tweaks.open { display: flex; animation: tweaksIn 0.5s var(--ease-out-expo); }
@keyframes tweaksIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.tweaks__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  cursor: grab;
}
.tweaks__head:active { cursor: grabbing; }
.tweaks__title {
  font-size: 10.5px;
  letter-spacing: 0.32em;
  color: var(--ink-soft);
}
.tweaks__close {
  background: transparent;
  border: none;
  color: var(--ink-mute);
  cursor: none;
  font-size: 18px;
  line-height: 1;
  transition: color 0.3s ease, transform 0.3s ease;
  width: 28px; height: 28px;
  display: grid; place-items: center;
}
.tweaks__close:hover { color: var(--accent); transform: rotate(90deg); }
.tweaks__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 24px; }
.tweaks__group { display: flex; flex-direction: column; gap: 12px; }
.tweaks__label {
  font-size: 9.5px;
  letter-spacing: 0.28em;
  color: var(--ink-mute);
}
.tweaks__swatches { display: flex; gap: 12px; }
.tweaks__swatch {
  width: 36px; height: 36px;
  border-radius: 0;
  border: 1px solid var(--ink-faint);
  cursor: none;
  position: relative;
  transition: transform 0.3s var(--ease-out-expo), border-color 0.3s ease;
}
.tweaks__swatch:hover { transform: scale(1.1); }
.tweaks__swatch.active { 
  border-color: var(--accent); 
  transform: scale(1.08); 
  box-shadow: 0 0 16px var(--accent-glow);
}
.tweaks__swatch.active::after {
  content: ''; position: absolute; inset: -5px;
  border: 1px solid var(--ink-faint);
}
.tweaks__input {
  width: 100%;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 10px 12px;
  font-family: var(--serif);
  font-size: 14px;
  outline: none;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.tweaks__input:focus { 
  border-color: var(--accent); 
  box-shadow: 0 0 20px var(--accent-glow);
}
.tweaks__toggles { display: flex; gap: 10px; flex-wrap: wrap; }
.tweaks__toggle {
  font-size: 9.5px;
  letter-spacing: 0.2em;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  cursor: none;
  transition: all 0.3s var(--ease-out-expo);
}
.tweaks__toggle:hover { border-color: var(--ink-mute); }
.tweaks__toggle.active { 
  background: var(--gold-grad); 
  color: var(--bg); 
  border-color: var(--accent); 
  box-shadow: 0 0 20px var(--accent-glow);
}

/* ---------- AMBIENT FLOATING ELEMENTS ---------- */
.ambient-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.4;
  animation: ambientFloat 20s var(--ease-in-out-sine) infinite;
}
.ambient-glow--1 {
  width: 400px; height: 400px;
  background: var(--accent-glow);
  top: 10%; left: -10%;
  animation-delay: 0s;
}
.ambient-glow--2 {
  width: 300px; height: 300px;
  background: var(--sapphire-soft);
  bottom: 20%; right: -5%;
  animation-delay: -10s;
}
@keyframes ambientFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -40px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.95); }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
  body { cursor: auto; }
  .cursor, .cursor-dot { display: none; }
  a, button, .city, .project, .insight, .founder, .nav__link, .nav__cta, .tweaks__swatch, .tweaks__toggle, .tweaks__close { cursor: pointer; }
  .nav__links { gap: 18px; }
  .nav__link:not(.nav__link--keep) { display: none; }
  .hero__bottom { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .scroll-hint { grid-column: span 2; flex-direction: row; align-items: center; justify-self: end; }
  .scroll-hint__line { width: 64px; height: 1px; }
  .section__head { grid-template-columns: 1fr; gap: 28px; }
  .section__head .lead { justify-self: start; }
  .cities { grid-template-columns: repeat(2, 1fr); }
  .about__inner { grid-template-columns: 1fr; gap: 72px; }
  .about__divider { display: none; }
  .founders { grid-template-columns: repeat(3, 1fr); }
  .projects { grid-template-columns: repeat(6, 1fr); gap: 20px; }
  .project:nth-child(n) { grid-column: span 6 !important; aspect-ratio: 4 / 3; }
  .testimonial { grid-template-columns: 1fr; gap: 48px; }
  .awards { grid-template-columns: repeat(2, 1fr); }
  .award:nth-child(3n) { border-right: 1px solid var(--line); }
  .award:nth-child(2n) { border-right: none; }
  .insights { grid-template-columns: 1fr; gap: 56px; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 48px; }
  .ambient-glow { display: none; }
}
@media (max-width: 620px) {
  .cities { grid-template-columns: 1fr; }
  .awards { grid-template-columns: 1fr; }
  .award { border-right: none !important; }
  .footer__top { grid-template-columns: 1fr; }
  .hero__bottom { grid-template-columns: 1fr; }
  .scroll-hint { display: none; }
  .founders { grid-template-columns: 1fr; }
}

/* ============================================================
   PAGER — view more + page nav (Awards & Blog)
   ============================================================ */
.pager {
  margin-top: clamp(48px, 7vw, 88px);
  padding-top: 36px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
}
.pager__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(24px, 4vw, 56px);
  font-family: 'Inter Tight', system-ui, sans-serif;
}
.pager__page {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim, rgba(247, 241, 241, 0.55));
}
.pager__page em {
  font-style: normal;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.12em;
}
.pager__next {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color 0.35s ease, letter-spacing 0.35s ease, gap 0.35s ease;
}
.pager__next:hover {
  color: var(--accent);
  gap: 22px;
  letter-spacing: 0.26em;
}
.pager__next-arrow {
  display: inline-flex;
  width: 24px;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: width 0.35s ease;
}
.pager__next:hover .pager__next-arrow { width: 40px; }
.pager__next-arrow::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 8px; height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.pager--light { color: rgb(247, 241, 241); }
@media (max-width: 720px) {
  .pager { grid-template-columns: 1fr; gap: 28px; }
  .pager__nav { justify-content: space-between; gap: 16px; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .cursor, .cursor-dot, .ambient-glow, .loader { display: none; }
}

/* ============================================================
   STACK — sticky-stacking project-style cards
   Used in: Cities, Testimonials, Awards, Insights
   ============================================================ */
.stack-section {
  position: relative;
  padding: clamp(80px, 11vh, 140px) 0 clamp(40px, 6vh, 80px);
  overflow: hidden;
}

.stack-title-block {
  text-align: center;
  margin-bottom: clamp(56px, 8vh, 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  position: relative;
  z-index: 1;
}
.stack-title-block .eyebrow { justify-content: center; }
.stack-title {
  font-family: var(--serif);
  font-size: clamp(64px, 12vw, 135px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-weight: 400;
  text-align: center;
  background: linear-gradient(180deg,
    rgba(242, 233, 214, 0.95) 0%,
    rgba(201, 166, 107, 0.60) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.stack-title em { font-style: italic; }
.stack-lead {
  max-width: 60ch;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.stack {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(0px, 1vw, 16px);
}

.stack__card {
  position: sticky;
  top: calc(96px + var(--i, 0) * 22px);
  background: linear-gradient(180deg,
    rgba(42, 32, 24, 0.96) 0%,
    rgba(23, 18, 14, 0.96) 100%);
  border: 1.5px solid var(--card-line);
  border-radius: clamp(28px, 3.2vw, 52px);
  padding: clamp(24px, 2.6vw, 40px);
  height: clamp(560px, 78vh, 820px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.2vw, 32px);
  margin-bottom: 28px;
  will-change: transform;
  transform-origin: top center;
  isolation: isolate;
  overflow: hidden;
  backdrop-filter: blur(6px);
}
.stack__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 100% 0%, rgba(201, 166, 107, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 0% 100%, rgba(43, 34, 26, 0.5) 0%, transparent 60%);
  z-index: 0;
}
.stack__card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: rgba(11, 8, 6, var(--card-darken, 0));
  z-index: 2;
  transition: background 0.3s ease;
}
.stack__card > * { position: relative; z-index: 1; }

/* Top row — number + name + CTA */
.stack__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2.4vw, 36px);
  flex-wrap: wrap;
  padding-bottom: clamp(4px, 0.5vw, 8px);
}
.stack__id {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 36px);
  min-width: 0;
  flex: 1 1 auto;
}
.stack__num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(60px, 7.6vw, 120px);
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: var(--ink);
  flex-shrink: 0;
  text-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.stack__meta {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.8vw, 12px);
  min-width: 0;
  flex: 1 1 auto;
}
.stack__cat {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
}
.stack__name {
  font-family: var(--serif);
  font-size: clamp(24px, 2.8vw, 42px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: var(--ink);
  font-weight: 400;
}
.stack__name em { font-style: italic; color: var(--ink); }

.stack__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 28px;
  border: 1px solid var(--card-line);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  cursor: none;
  flex-shrink: 0;
  transition:
    background 0.5s var(--ease-out-expo),
    color 0.5s ease,
    border-color 0.5s ease,
    gap 0.5s var(--ease-out-expo),
    box-shadow 0.5s ease;
}
.stack__cta:hover {
  background: var(--gold-grad);
  color: var(--bg);
  border-color: var(--accent);
  gap: 22px;
  box-shadow: 0 0 32px var(--accent-glow);
}
.stack__cta-arrow {
  display: inline-block;
  width: 8px; height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.4s var(--ease-out-expo);
}
.stack__cta:hover .stack__cta-arrow { transform: rotate(45deg) translate(2px, -2px); }

/* Body — image grid (default for cities/insights) */
.stack__body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.05fr 1.55fr;
  gap: clamp(14px, 1.5vw, 22px);
}
.stack__col {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.5vw, 22px);
  min-height: 0;
}
.stack__img {
  position: relative;
  overflow: hidden;
  border-radius: clamp(20px, 2.4vw, 40px);
  flex: 1;
  min-height: 0;
  background: var(--bg-3);
}
.stack__img--short { flex: 0 0 clamp(140px, 22vh, 240px); }
.stack__img-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.86) contrast(1.05);
  transform: scale(1.02);
  transition: transform 1.4s var(--ease-out-expo), filter 0.7s ease;
}
.stack__card:hover .stack__img-bg { transform: scale(1.08); filter: saturate(1) contrast(1.08); }
.stack__img-cap {
  position: absolute;
  bottom: 18px; left: 22px; right: 22px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream);
  z-index: 2;
}
.stack__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(15,11,8,0.7));
  pointer-events: none;
}
.stack__img-cap em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: none;
}

/* Quote layout — testimonials */
.stack__body--quote {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch;
}
.stack__quote-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  padding-right: clamp(0px, 1vw, 16px);
}
.stack__quote-mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 96px;
  line-height: 0.4;
  color: var(--accent);
  opacity: 0.5;
}
.stack__quote {
  font-family: var(--serif);
  font-size: clamp(22px, 2.3vw, 36px);
  line-height: 1.34;
  color: var(--ink);
  letter-spacing: -0.008em;
  font-weight: 400;
  text-wrap: pretty;
}
.stack__quote em { font-style: italic; color: var(--accent); }

.stack__attribution {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.stack__attr-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 26px);
  color: var(--ink);
  letter-spacing: -0.005em;
}
.stack__attr-role {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 8px;
}
.stack__signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(32px, 3.2vw, 52px);
  color: var(--accent);
  opacity: 0.85;
  letter-spacing: 0.06em;
  line-height: 1;
}

/* Single-image body — awards / hero insights */
.stack__body--feature {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(28px, 3vw, 48px);
}
.stack__detail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(8px, 1vw, 16px) 0;
}
.stack__detail-body {
  font-family: var(--serif);
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.38;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  max-width: 28ch;
}
.stack__detail-body em { font-style: italic; color: var(--accent); }
.stack__detail-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.stack__detail-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.stack__detail-list li em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.stack__feature-img {
  position: relative;
  overflow: hidden;
  border-radius: clamp(22px, 2.6vw, 44px);
  background: var(--bg-3);
}
.stack__feature-img .stack__img-bg {
  transform: scale(1.04);
}
.stack__card:hover .stack__feature-img .stack__img-bg {
  transform: scale(1.1);
}

@media (max-width: 980px) {
  .stack__card {
    position: relative;
    top: auto !important;
    height: auto;
    min-height: 540px;
    transform: none !important;
    padding: 24px;
    border-radius: 28px;
  }
  .stack__body,
  .stack__body--quote,
  .stack__body--feature {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .stack__num { font-size: clamp(54px, 14vw, 92px); }
  .stack__cta { padding: 12px 22px; font-size: 10px; }
  .stack-title { font-size: clamp(54px, 14vw, 100px); }
  .stack__img--short { flex: 0 0 160px; }
}
@media (max-width: 620px) {
  .stack__head { flex-direction: column; align-items: flex-start; }
  .stack__cta { align-self: stretch; justify-content: center; }
}

/* ============================================================
   BUGFIX BLOCK — added by maintenance pass
   - Hero floating "Featured Film" tile (was completely unstyled,
     which caused a giant blank gap below the hero on every viewport).
   - Mobile navigation drawer + hamburger toggle (mobile previously
     had only "Contact Us" visible, no way to reach other sections).
   ============================================================ */

/* ---------- Hero floating video tile ---------- */
.hero__video-tile {
  position: absolute;
  right: var(--pad-x);
  bottom: clamp(180px, 22vh, 240px);
  width: clamp(260px, 24vw, 340px);
  z-index: 4;
  opacity: 0;
  transform: translateY(24px);
  animation: tileEnter 1.2s var(--ease-out-expo) 1.4s forwards;
  pointer-events: none; /* purely decorative; the main background video plays everywhere */
}
@keyframes tileEnter {
  to { opacity: 1; transform: translateY(0); }
}
.hero__video-tile__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--ink-faint);
  background: var(--bg-2);
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(201, 166, 107, 0.12) inset;
  transition: transform 0.8s var(--ease-out-expo), box-shadow 0.6s ease, border-color 0.6s ease;
}
.hero__video-tile__frame::before {
  /* very subtle inner gold glow line */
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(201, 166, 107, 0.18);
  pointer-events: none;
  z-index: 2;
}
.hero__video-tile__frame > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) contrast(1.05);
}
.hero__video-tile__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,9,8,0.05) 0%, rgba(10,9,8,0.05) 55%, rgba(10,9,8,0.85) 100%),
    linear-gradient(135deg, rgba(201,166,107,0.06) 0%, transparent 60%);
}

/* Gold corner ornaments */
.hero__video-tile__corners {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.hero__video-tile__corners span {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--accent);
}
.hero__video-tile__corners span:nth-child(1) { top: 8px;    left: 8px;    border-right: none;  border-bottom: none; }
.hero__video-tile__corners span:nth-child(2) { top: 8px;    right: 8px;   border-left: none;   border-bottom: none; }
.hero__video-tile__corners span:nth-child(3) { bottom: 8px; left: 8px;    border-right: none;  border-top: none; }
.hero__video-tile__corners span:nth-child(4) { bottom: 8px; right: 8px;   border-left: none;   border-top: none; }

/* Caption bar (label · title) */
.hero__video-tile__caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.hero__video-tile__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
  animation: dotPulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}
.hero__video-tile__label { color: var(--accent); }
.hero__video-tile__sep   { color: var(--ink-mute); }
.hero__video-tile__title {
  color: var(--ink);
  letter-spacing: 0.18em;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Index in the top-right corner */
.hero__video-tile__index {
  position: absolute;
  top: 16px;
  right: 22px;
  z-index: 4;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--serif);
  color: var(--ink);
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}
.hero__video-tile__index em {
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  color: var(--accent);
}
.hero__video-tile__index span {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
}

/* Tablet — shrink the tile a touch */
@media (max-width: 1180px) {
  .hero__video-tile {
    width: clamp(220px, 26vw, 280px);
    bottom: clamp(220px, 26vh, 280px);
  }
}

/* Mobile — hide the floating tile entirely so the hero copy stays primary */
@media (max-width: 820px) {
  .hero__video-tile { display: none; }
}

/* ---------- Mobile navigation: hamburger + slide-in drawer ---------- */
.nav__toggle {
  display: none; /* shown only on mobile via media query below */
  position: relative;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--ink-faint);
  cursor: pointer;
  padding: 0;
  z-index: 102;
  transition: border-color 0.4s ease, background 0.4s ease;
}
.nav__toggle:hover { border-color: var(--accent); }
.nav__toggle-bar {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 1px;
  background: var(--ink);
  transform: translateX(-50%);
  transition: transform 0.5s var(--ease-out-expo), opacity 0.3s ease, top 0.5s var(--ease-out-expo);
}
.nav__toggle-bar:nth-child(1) { top: 15px; }
.nav__toggle-bar:nth-child(2) { top: 21px; }
.nav__toggle-bar:nth-child(3) { top: 27px; }

/* Open state — bars cross into an X */
.nav--open .nav__toggle-bar:nth-child(1) {
  top: 21px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--accent);
}
.nav--open .nav__toggle-bar:nth-child(2) {
  opacity: 0;
  transform: translateX(-50%) scaleX(0);
}
.nav--open .nav__toggle-bar:nth-child(3) {
  top: 21px;
  transform: translateX(-50%) rotate(-45deg);
  background: var(--accent);
}
.nav--open .nav__toggle { border-color: var(--accent); }

/* Drawer scrim — covers page behind the drawer on mobile */
.nav__scrim {
  position: fixed;
  inset: 0;
  background: rgba(10, 9, 8, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  z-index: 99;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.nav--open .nav__scrim {
  opacity: 1;
  visibility: visible;
}

/* Mobile layout — under 980px */
@media (max-width: 980px) {
  .nav__toggle { display: block; }

  /* Turn the link strip into a slide-in drawer from the right.
     BULLETPROOF iOS APPROACH: `display: none` when closed. This physically
     removes the drawer from layout so iOS Safari cannot leak it past the
     viewport edge — root cause of the horizontal-scroll/cut-text bug.
     Open state uses a CSS keyframe slide-in for the animation. */
  .nav__links {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: min(86vw, 380px);
    padding: 110px 36px 48px;
    background: linear-gradient(180deg, #1a130d 0%, #14100b 100%);
    border-left: 1px solid var(--ink-faint);
    box-shadow: -30px 0 60px -20px rgba(0,0,0,0.7);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    z-index: 101;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav--open .nav__links {
    display: flex;
    animation: drawerSlideIn 0.7s var(--ease-out-expo) both;
  }
  @keyframes drawerSlideIn {
    from { transform: translate3d(100%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
  }

  /* Show ALL links inside the drawer (overrides the prior rule that hid them) */
  .nav__link,
  .nav__link:not(.nav__link--keep) {
    display: block;
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ink);
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.5s ease, transform 0.5s var(--ease-out-expo), color 0.3s ease;
  }
  .nav__link::after { display: none; } /* drop the desktop underline accent */
  .nav__link:hover { color: var(--accent); letter-spacing: 0; }

  /* Stagger the link entrance once drawer opens */
  .nav--open .nav__link {
    opacity: 1;
    transform: translateX(0);
  }
  .nav--open .nav__link:nth-of-type(1) { transition-delay: 0.18s; }
  .nav--open .nav__link:nth-of-type(2) { transition-delay: 0.24s; }
  .nav--open .nav__link:nth-of-type(3) { transition-delay: 0.30s; }
  .nav--open .nav__link:nth-of-type(4) { transition-delay: 0.36s; }
  .nav--open .nav__link:nth-of-type(5) { transition-delay: 0.42s; }
  .nav--open .nav__link:nth-of-type(6) { transition-delay: 0.48s; }

  /* CTA button at the bottom of the drawer */
  .nav__cta {
    margin-top: 28px;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.24em;
    padding: 18px 26px;
    border: 1px solid var(--accent);
    color: var(--accent);
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.5s ease, transform 0.5s var(--ease-out-expo), color 0.3s ease, background 0.3s ease;
  }
  .nav--open .nav__cta {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.56s;
  }

  /* Lock background scroll when the drawer is open */
  body.nav-locked { overflow: hidden; }
}

/* Slightly tighter drawer on very small phones */
@media (max-width: 480px) {
  .nav__links { padding: 100px 28px 40px; }
  .nav__link,
  .nav__link:not(.nav__link--keep) { font-size: 22px; padding: 18px 0; }
}

/* ============================================================
   INNER PAGE PATTERNS — Cities / Residential / Commercial /
   Blog / Contact. Added so all dedicated pages share the same
   luxe vocabulary as the home page.
   ============================================================ */

/* ---------- Page hero (shorter than home hero) ---------- */
.page-hero {
  position: relative;
  min-height: clamp(520px, 72vh, 760px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
  padding-bottom: clamp(56px, 8vw, 96px);
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  filter: saturate(0.75) contrast(1.05) brightness(0.78);
}
.page-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,9,8,0.55) 0%, rgba(10,9,8,0.20) 35%, rgba(10,9,8,0.95) 100%),
    linear-gradient(90deg, rgba(10,9,8,0.45) 0%, rgba(10,9,8,0) 60%);
}
.page-hero .container { position: relative; padding-top: clamp(140px, 22vh, 220px); }
.page-hero__crumb {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.page-hero__crumb a { color: var(--ink-mute); transition: color 0.4s ease; }
.page-hero__crumb a:hover { color: var(--accent); }
.page-hero__crumb-sep { color: var(--ink-faint); }
.page-hero__crumb-now { color: var(--accent); }
.page-hero__title {
  font-family: var(--serif);
  font-size: clamp(46px, 7vw, 108px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 16ch;
  margin: 0 0 28px;
  font-weight: 400;
}
.page-hero__title em { font-style: italic; }
.page-hero__sub {
  max-width: 58ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.page-hero__meta {
  margin-top: clamp(36px, 5vw, 56px);
  display: flex;
  gap: clamp(28px, 5vw, 72px);
  flex-wrap: wrap;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.page-hero__meta-item em {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 3.6vw, 44px);
  color: var(--accent);
  font-weight: 500;
  line-height: 1;
  margin-bottom: 10px;
}
.page-hero__meta-item span {
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--ink-mute);
  text-transform: uppercase;
}

/* ---------- Filter chips ---------- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.chip {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 12px 22px;
  border: 1px solid var(--ink-faint);
  color: var(--ink-soft);
  background: transparent;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
  font-weight: 500;
}
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* ---------- City detail block (Cities page) ---------- */
.city-detail {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 6vw, 96px);
  padding: clamp(72px, 10vw, 128px) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.city-detail:last-of-type { border-bottom: none; }
.city-detail__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.city-detail__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--ink-faint);
  pointer-events: none;
  z-index: 2;
}
.city-detail__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.85) contrast(1.05);
  transition: transform 1.2s var(--ease-out-expo);
}
.city-detail:hover .city-detail__img { transform: scale(1.04); }
.city-detail__cap {
  position: absolute;
  left: 18px;
  bottom: 18px;
  right: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  z-index: 3;
}
.city-detail__cap em { font-style: italic; color: var(--accent); }
.city-detail__num {
  font-family: var(--serif);
  font-size: clamp(48px, 6vw, 80px);
  line-height: 1;
  color: var(--accent);
  font-style: italic;
  font-weight: 500;
  margin-bottom: 12px;
}
.city-detail__name {
  font-family: var(--serif);
  font-size: clamp(36px, 4.5vw, 64px);
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--ink);
  font-weight: 400;
  line-height: 1;
}
.city-detail__name em { font-style: italic; }
.city-detail__since {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 28px;
}
.city-detail__body p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 18px;
  max-width: 58ch;
}
.city-detail__body p em { color: var(--ink); font-style: italic; }
.city-detail__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 32px 0;
  margin: 32px 0 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.city-detail__stat em {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(26px, 3vw, 40px);
  color: var(--accent);
  line-height: 1;
  margin-bottom: 8px;
  font-weight: 500;
}
.city-detail__stat span {
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.city-detail__projects-label {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 28px 0 12px;
}
.city-detail__projects {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.city-detail__project {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  transition: color 0.3s ease, padding-left 0.4s var(--ease-out-expo);
  gap: 16px;
}
.city-detail__project:last-child { border-bottom: none; }
.city-detail__project:hover {
  color: var(--ink);
  padding-left: 8px;
}
.city-detail__project strong {
  font-weight: 400;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
}
.city-detail__project em {
  font-style: normal;
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Alternate direction every other city for editorial rhythm */
.city-detail:nth-child(even) .city-detail__visual { order: 2; }

@media (max-width: 980px) {
  .city-detail { grid-template-columns: 1fr; gap: 36px; padding: 56px 0; }
  .city-detail:nth-child(even) .city-detail__visual { order: 0; }
  .city-detail__visual { aspect-ratio: 16 / 11; }
  .city-detail__stats { gap: 16px; padding: 24px 0; }
}
@media (max-width: 520px) {
  .city-detail__stats { grid-template-columns: 1fr 1fr; }
}

/* ---------- Contact: form + info side-by-side ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(48px, 8vw, 120px);
  align-items: start;
}
.contact-form {
  display: grid;
  gap: 28px;
}
.contact-field {
  position: relative;
  display: flex;
  flex-direction: column;
}
.contact-field label {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  /* FIX: was --ink-mute (55% opacity), too dim against the warm-espresso bg.
     Lifted to --ink-soft for legibility while staying on-brand. */
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.contact-field label .req { color: var(--accent); font-style: italic; }
.contact-field input,
.contact-field select,
.contact-field textarea {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  border: none;
  /* FIX: was --ink-faint (18% opacity). Lifted so the field line is
     actually visible on the dark background. */
  border-bottom: 1px solid rgba(242, 233, 214, 0.32);
  padding: 14px 0;
  transition: border-color 0.4s ease;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  width: 100%;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
  /* FIX: brighter placeholder so the hint copy reads at a glance. */
  color: rgba(242, 233, 214, 0.42);
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-bottom-color: var(--accent);
}
.contact-field textarea {
  resize: vertical;
  min-height: 140px;
  font-family: var(--sans);
}
.contact-field select {
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-mute) 50%),
    linear-gradient(135deg, var(--ink-mute) 50%, transparent 50%);
  background-position: calc(100% - 14px) 18px, calc(100% - 9px) 18px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}
.contact-field select option { background: var(--bg); color: var(--ink); }
.contact-field--full { grid-column: 1 / -1; }
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.contact-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  margin-top: 8px;
}
.contact-form__consent {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  line-height: 1.7;
  max-width: 44ch;
}
.contact-form__consent a { color: var(--accent); border-bottom: 1px solid currentColor; }
.contact-form__status {
  margin-top: 12px;
  padding: 16px 18px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: none;
}
.contact-form__status.show { display: block; }

.contact-info {
  position: relative;
  padding: 0 0 0 clamp(0px, 4vw, 56px);
  border-left: 1px solid var(--line);
}
.contact-info__block {
  padding: 0 0 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.contact-info__block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.contact-info__label {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  /* FIX: matched to the brighter form label color so the two columns
     read as a single, aligned grid. */
  color: var(--ink-soft);
  margin-bottom: 16px;
  display: block;
}
.contact-info__value {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: 4px;
  font-weight: 400;
}
.contact-info__value em { font-style: italic; color: var(--accent); }
.contact-info__value a { transition: color 0.3s ease; }
.contact-info__value a:hover { color: var(--accent); }
.contact-info__note {
  font-size: 12px;
  /* FIX: was --ink-mute, slight lift for readability. */
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  line-height: 1.65;
}

@media (max-width: 980px) {
  .contact-layout { grid-template-columns: 1fr; gap: 64px; }
  .contact-info {
    padding-left: 0;
    border-left: none;
    padding-top: 56px;
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 620px) {
  .contact-form__row { grid-template-columns: 1fr; }
}

/* ============================================================
   CONTACT PAGE — alignment + brightness polish
   - Lifts the hero background image so the page feels less dim.
   - Aligns the right-hand info column's first label with the form's
     first label (the form has a label-row above the first input
     that pushed the info column visually higher than the form).
   - Brightens the focus state of inputs so the user can see where
     the cursor is on the dark background.
   - Improves rhythm on small screens where the office tiles get
     cramped.
   ============================================================ */
body:has(.contact-layout) .page-hero__bg {
  /* Was brightness(0.78) — lifted so the contact hero photo reads. */
  filter: saturate(0.78) contrast(1.05) brightness(0.92);
}
.contact-form .contact-field:focus-within label {
  color: var(--accent);
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-bottom-color: var(--accent);
  /* Subtle lift so the active field clearly stands out. */
  box-shadow: 0 1px 0 0 var(--accent);
}
/* Align the info aside's first block with the form's first input row.
   The form column has: label (~16px) + 12px margin = ~28px before the
   first input baseline. We add an equivalent block of breathing room
   to the aside so the eye reads both columns as starting at the same
   horizontal line on desktop. */
@media (min-width: 981px) {
  .contact-info { padding-top: 4px; }
  .contact-info__block:first-child { margin-top: 26px; }
}
/* Make the form's bottom action row sit on its own visual rail. */
.contact-form__actions {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}
/* Slightly brighter, more inviting submit-area consent copy. */
.contact-form__consent { color: var(--ink-soft); }

@media (max-width: 980px) {
  /* On stacked layout, remove the desktop top-alignment padding so
     the aside hugs the divider line cleanly. */
  .contact-info__block:first-child { margin-top: 0; }
}

/* ---------- Offices grid (Contact page) ---------- */
.offices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  margin-top: clamp(64px, 9vw, 120px);
  border: 1px solid var(--line);
}
.office {
  padding: clamp(28px, 3vw, 40px);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 240px;
  transition: background 0.4s ease;
}
.office:hover { background: var(--bg-2); }
.office__num {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 0.18em;
}
.office__city {
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 32px);
  color: var(--ink);
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.office__addr {
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-top: 6px;
}
.office__hours {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.office__hours em { font-style: italic; color: var(--accent); font-weight: 500; }
@media (max-width: 980px) { .offices { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .offices { grid-template-columns: 1fr; } }

/* ---------- Blog cards ---------- */
.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 48px);
}
.article {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
  transition: transform 0.6s var(--ease-out-expo);
  cursor: pointer;
}
.article:hover { transform: translateY(-4px); }
.article__img {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  filter: saturate(0.88);
  position: relative;
  overflow: hidden;
  transition: filter 0.6s ease;
}
.article:hover .article__img { filter: saturate(1); }
.article__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,9,8,0.4) 100%);
}
.article__cat {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}
.article__title {
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
  font-weight: 400;
}
.article__title em { font-style: italic; }
.article__meta {
  margin-top: auto;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  gap: 14px;
  align-items: center;
}
.article__meta-sep { color: var(--ink-faint); }

/* Featured article — first one big across two columns */
.article--feature {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(36px, 5vw, 72px);
  padding-bottom: clamp(48px, 6vw, 88px);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(36px, 4vw, 64px);
  align-items: center;
}
.article--feature .article__img { aspect-ratio: 4 / 3; height: 100%; min-height: 360px; }
.article--feature .article__title { font-size: clamp(28px, 3.4vw, 48px); line-height: 1.1; }
.article--feature .article__excerpt {
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 56ch;
}
.article--feature .article__cta {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: gap 0.4s var(--ease-out-expo);
}
.article--feature:hover .article__cta { gap: 18px; }
.article--feature .article__cta::after {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--accent);
}

@media (max-width: 980px) {
  .article-grid { grid-template-columns: repeat(2, 1fr); }
  .article--feature { grid-template-columns: 1fr; }
  .article--feature .article__img { min-height: 260px; }
}
@media (max-width: 620px) {
  .article-grid { grid-template-columns: 1fr; }
}

/* ---------- Specs (Residential / Commercial standards) ---------- */
.specs {
  border-top: 1px solid var(--line);
}
.specs__row {
  display: grid;
  grid-template-columns: 1fr 2.4fr;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(24px, 3vw, 36px) 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.specs__label {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 26px);
  color: var(--accent);
  font-weight: 500;
}
.specs__label em {
  display: block;
  font-style: normal;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px;
  font-weight: 500;
}
.specs__body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
}
.specs__body em { color: var(--ink); font-style: italic; }
@media (max-width: 820px) {
  .specs__row { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
}

/* ---------- Project status badge (used on residential/commercial) ---------- */
.project__status {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 3;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 7px 13px;
  background: rgba(10, 9, 8, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--ink-faint);
  font-weight: 500;
}
.project__status--active   { color: var(--accent); border-color: var(--accent); }
.project__status--coming    { color: var(--cream); border-color: var(--cream); }
.project__status--delivered { color: var(--ink-soft); }
.project__status--soldout   { color: var(--ink-mute); }

/* ---------- Newsletter strip (Blog page) ---------- */
.news-strip {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
  padding: clamp(48px, 7vw, 88px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: clamp(56px, 8vw, 96px);
}
.news-strip__title {
  font-family: var(--serif);
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 12px;
  font-weight: 400;
}
.news-strip__title em { font-style: italic; }
.news-strip__sub {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 50ch;
}
.news-strip__form {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  border-bottom: 1px solid var(--ink-faint);
  transition: border-color 0.4s ease;
}
.news-strip__form:focus-within { border-bottom-color: var(--accent); }
.news-strip__form input {
  flex: 1;
  background: transparent;
  border: none;
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink);
  padding: 14px 0;
  outline: none;
  font-style: italic;
}
.news-strip__form input::placeholder { color: var(--ink-faint); }
.news-strip__form button {
  background: transparent;
  border: none;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 14px 0 14px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.3s ease, letter-spacing 0.3s ease;
}
.news-strip__form button:hover { letter-spacing: 0.3em; }
@media (max-width: 820px) {
  .news-strip { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   BANNER VIDEO — full-width cinematic strip directly below the
   nav, sitting ABOVE the hero headline section.
   ============================================================ */
.banner-video {
  position: relative;
  width: 100%;
  height: clamp(440px, 100vh, 720px);
  overflow: hidden;
  background: var(--bg);
  /* Push down so the fixed transparent nav doesn't sit on top of the very edge */
  margin-top: 0;
  isolation: isolate;
}
.banner-video__media {
  position: absolute;
  inset: 0;
}
.banner-video__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 2;
}
.banner-video__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.85) contrast(1.05);
  z-index: 1;
}
.banner-video__scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(10,9,8,0.55) 0%,
      rgba(10,9,8,0.10) 18%,
      rgba(10,9,8,0.10) 65%,
      rgba(10,9,8,0.85) 95%,
      rgba(10,9,8,1.00) 100%);
}

.banner-video__caption {
  position: absolute;
  left: var(--pad-x);
  bottom: clamp(28px, 4vw, 56px);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 1px 6px rgba(0,0,0,0.65);
  max-width: calc(100% - (var(--pad-x) * 2));
}
.banner-video__label { color: var(--accent); }
.banner-video__sep   { color: var(--ink-mute); }
.banner-video__title {
  color: var(--ink);
  letter-spacing: 0.18em;
  font-weight: 400;
}
.banner-video__title em {
  font-style: italic;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink);
  margin-right: 2px;
}
.banner-video__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow);
  animation: bannerDotPulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes bannerDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

.banner-video__index {
  position: absolute;
  right: var(--pad-x);
  bottom: clamp(28px, 4vw, 56px);
  z-index: 4;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--serif);
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}
.banner-video__index em {
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  line-height: 1;
  color: var(--accent);
}
.banner-video__index span {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* When the banner sits above the hero, the hero is content-driven (no 100vh)
   and its top padding shrinks since the banner already gives breathing room.
   Using general sibling selector (~) instead of adjacent (+) to be resilient
   against any injected elements (scripts, cloudflare wrappers, etc.) online. */
.banner-video ~ .hero {
  min-height: auto;
}
.banner-video ~ .hero .hero__top {
  padding-top: clamp(64px, 9vw, 120px);
  padding-bottom: clamp(40px, 6vw, 80px);
}
.banner-video ~ .hero .hero__bottom {
  padding-bottom: clamp(40px, 6vw, 72px);
  padding-top: clamp(32px, 4vw, 56px);
}

/* Mobile — shorter banner, smaller caption */
@media (max-width: 980px) {
  .banner-video { height: clamp(320px, 52vh, 520px); }
}
@media (max-width: 620px) {
  .banner-video { height: clamp(260px, 44vh, 420px); }
  .banner-video__caption { font-size: 9px; gap: 10px; letter-spacing: 0.22em; }
  .banner-video__title { letter-spacing: 0.14em; }
  .banner-video__title em { font-size: 13px; }
  .banner-video__index em { font-size: 20px; }
  .banner-video__index span { font-size: 9px; letter-spacing: 0.22em; }
  /* On the narrowest viewports, drop the index so the caption doesn't crowd. */
  .banner-video__index { display: none; }
}

/* ============================================================
   MOBILE GAP BUGFIX — Cities / Testimonials / Awards / Insights
   ============================================================
   Symptom: huge empty vertical voids between sections on iPhone.
   Cause:   .stack__card has min-height 540px on mobile, but the
            .stack__img / .stack__feature-img children rely on
            background-image and flex: 1 to fill height. On mobile
            the parent has no explicit height, so the images
            collapse to 0px — leaving ~480px of dead space per card,
            multiplied across ~14 stack cards in the page.
   Fix:    Drop the min-height (let content drive), and give every
            image inside a stack card an explicit aspect-ratio.
   ============================================================ */

@media (max-width: 980px) {

  /* The card itself — no enforced min-height, let real content size it */
  .stack__card {
    min-height: 0;
    height: auto;
    padding: 22px;
    margin-bottom: 22px;
    gap: 22px;
  }

  /* Stack body: ensure single column with sane gap */
  .stack__body,
  .stack__body--feature,
  .stack__body--quote {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 18px;
    flex: 0 1 auto;
  }

  /* The flex column that holds the two nested images — release flex: 1 */
  .stack__col {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    gap: 16px;
  }

  /* Give EVERY image inside a stack card an explicit aspect ratio so it
     actually renders. flex: 1 was the culprit — replace with intrinsic size. */
  .stack__img,
  .stack__feature-img {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 11;
    width: 100%;
  }
  .stack__img--short {
    flex: 0 0 auto;
    aspect-ratio: 16 / 9;
    height: auto;
  }
  .stack__feature-img {
    aspect-ratio: 4 / 3;
  }

  /* Testimonials specifically — the quote sits above the image on mobile */
  .stack__quote-wrap {
    padding-right: 0;
    gap: 20px;
  }
  .stack__quote {
    font-size: clamp(20px, 5.2vw, 30px) !important;
    line-height: 1.4 !important;
  }
  .stack__attribution {
    margin-top: 8px;
    padding-top: 20px;
  }

  /* Tighten the giant bigstats numerals so the About "Who We Are" panel
     isn't unreasonably tall on phones either */
  .bigstat {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 18px 0;
    align-items: start;
  }
  .bigstat__num {
    font-size: clamp(58px, 16vw, 96px);
    line-height: 0.95;
  }
  .bigstat__label {
    text-align: left;
    max-width: none;
  }

  /* About panel: don't reserve 480px when content is shorter */
  .about__panel { min-height: 0; }

  /* Founder monograms — were clamp(100px,10vw,160px) with hard 100px floor */
  .founder__monogram {
    font-size: clamp(72px, 20vw, 120px);
  }

  /* The stack section's own outer padding can shrink a touch on mobile */
  .stack-section {
    padding: clamp(56px, 9vw, 96px) 0 clamp(32px, 5vw, 64px);
  }
  .stack-title-block {
    margin-bottom: clamp(40px, 7vw, 72px);
  }
}

/* Very narrow phones — give a touch more breathing room */
@media (max-width: 480px) {
  .stack__card { padding: 18px; }
  .stack__img,
  .stack__feature-img { aspect-ratio: 4 / 3; }
  .stack__img--short { aspect-ratio: 16 / 10; }
}

/* ============================================================
   STACK CARD — BULLETPROOF MOBILE FIX (final defensive pass)
   ============================================================
   The earlier MOBILE GAP BUGFIX block was correct, but mobile
   Safari sometimes serves cached CSS that wins source-order
   races and re-introduces the bug. This block uses !important
   on the critical properties so it can't be defeated, AND it
   lightens the card surface so cards are visibly distinct from
   the body background even at low brightness on a phone.
   ============================================================ */

@media (max-width: 980px) {

  /* Card sizing — content-driven, no enforced 540px floor */
  .stack__card {
    position: relative !important;
    top: auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 22px !important;
    margin-bottom: 22px !important;
    /* Lift the surface so the card is clearly visible against body bg */
    background: linear-gradient(180deg,
      rgba(56, 44, 32, 0.98) 0%,
      rgba(38, 30, 22, 0.98) 100%) !important;
    border: 1px solid rgba(201, 166, 107, 0.22) !important;
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.55);
  }
  /* Defeat any GSAP-applied transform/scale that might persist from a desktop session */
  .stack__card[data-stack-card] {
    transform: none !important;
    --card-darken: 0 !important;
  }

  /* Body & column — pure flex column, no grid layout leftovers */
  .stack__body,
  .stack__body--feature,
  .stack__body--quote {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 16px !important;
    flex: 0 1 auto !important;
  }
  .stack__col {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 1 auto !important;
    gap: 14px !important;
  }

  /* Every image inside a stack card — explicit aspect ratio + min-height
     fallback so even if aspect-ratio is unsupported, the box renders. */
  .stack__img,
  .stack__feature-img {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 200px !important;        /* fallback for very old iOS */
    aspect-ratio: 16 / 11;
    width: 100% !important;
    background: var(--bg-3);
  }
  .stack__img--short {
    flex: 0 0 auto !important;
    aspect-ratio: 16 / 10;
    min-height: 160px !important;
    height: auto !important;
  }
  .stack__feature-img {
    aspect-ratio: 4 / 3;
    min-height: 220px !important;
  }

  /* Ensure the inner background image element fills its parent */
  .stack__img > .stack__img-bg,
  .stack__feature-img > .stack__img-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Reveal-trigger safety net — if IntersectionObserver fails or fires
     late on iOS, force any .reveal inside stack/about sections to be
     visible after a short delay rather than leaving holes in the page. */
  .stack-section .reveal,
  .about .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Narrowest phones */
@media (max-width: 480px) {
  .stack__img,
  .stack__feature-img {
    aspect-ratio: 4 / 3;
    min-height: 180px !important;
  }
  .stack__img--short {
    aspect-ratio: 16 / 10;
    min-height: 140px !important;
  }
  .stack__feature-img {
    min-height: 200px !important;
  }
}

/* ============================================================
   ABOUT-PANE CONTENT — final fix
   ============================================================
   The about__pane uses CSS animations with fill-mode 'both' to
   stagger team-cells/values/bigstats/founders into view. On iOS
   Safari these animations sometimes fail to fire when the user
   taps a tab quickly, leaving the pane's grid items stuck at
   opacity 0 — so the panel renders as visible empty space.
   The fix below forces all pane content visible on mobile, no
   animation, no stagger. The tab still switches; only the
   decorative reveal is dropped.
   ============================================================ */

@media (max-width: 980px) {

  /* Panel itself — collapse min-height and any internal positioning quirks */
  .about__panel {
    min-height: 0 !important;
  }

  /* Active pane must take normal flow (not absolute) */
  .about__pane.active {
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    pointer-events: auto !important;
  }

  /* Force every direct child of the active pane to be visible */
  .about__pane.active > *,
  .about__pane.active .bigstat,
  .about__pane.active .value,
  .about__pane.active .team-cell,
  .about__pane.active .founder {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
    transition: none !important;
  }

  /* Inactive panes — keep them hidden so they don't add extra height */
  .about__pane:not(.active) {
    display: none !important;
  }

  /* Team grid: 2 columns on tablet, 2 still works on phone */
  .team-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Values list: single column on mobile so each value reads cleanly */
  .values {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .value {
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
  }
  .value:last-child { border-bottom: none; }

  /* Founders: stack vertically with smaller portrait blocks */
  .founders {
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
  }

  /* Pulled inwards a bit so the panel doesn't feel like a separate slab */
  .about__panel {
    padding-top: 12px;
  }
}
@media (max-width: 768px) {
    .founder__monogram {
        font-size: clamp(72px, 20vw, 120px);
    }
}

@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr; }
  .team-cell { padding: 22px; }
  .team-intro { font-size: 22px; margin-bottom: 28px; }
  .founder__monogram {
      display: none;
  }
  .about__feature img {
    height: auto;
  }
}

/* ============================================================
   RESIDENTIAL — Private Client Desk journey
   Vertical numbered timeline with connecting line.
   Editorial tone: large italic serif numbers, restrained metadata,
   long-form body text. No imagery — letter-style.
   ============================================================ */
.journey {
  list-style: none;
  padding: 0;
  margin: clamp(56px, 7vw, 104px) 0 0;
  display: flex;
  flex-direction: column;
}

.journey__step {
  display: grid;
  grid-template-columns: clamp(96px, 11vw, 160px) 1fr;
  gap: clamp(28px, 4.5vw, 64px);
  position: relative;
  padding-bottom: clamp(56px, 7vw, 96px);
  align-items: start;
}
.journey__step:last-child { padding-bottom: 0; }

/* connector line down the centre of the number column */
.journey__step::before {
  content: '';
  position: absolute;
  left: calc(clamp(96px, 11vw, 160px) / 2);
  top: clamp(70px, 8vw, 110px);
  bottom: clamp(20px, 2vw, 32px);
  width: 1px;
  background: linear-gradient(180deg,
    rgba(201, 166, 107, 0.5) 0%,
    var(--line) 35%,
    var(--line) 65%,
    transparent 100%);
  transform: translateX(-0.5px);
  pointer-events: none;
}
.journey__step:last-child::before { display: none; }

.journey__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(56px, 7.5vw, 104px);
  font-weight: 400;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: center;
  position: relative;
  z-index: 2;
  padding-top: 4px;
  /* subtle gold-to-cream gradient on the figure */
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.journey__body {
  padding-top: clamp(8px, 1.2vw, 18px);
}

.journey__title {
  font-family: var(--serif);
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 14px;
  font-weight: 400;
}
.journey__title em {
  color: var(--accent);
  font-style: italic;
}

.journey__meta {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.journey__meta::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
}

.journey__text {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 0;
}
.journey__text em {
  color: var(--ink);
  font-style: italic;
  font-family: var(--serif);
  font-size: 1.08em;
  letter-spacing: -0.005em;
}

/* footer below the four steps — single line + CTA */
.journey__footer {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.journey__footer-text {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.35;
  font-style: italic;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0;
}
.journey__footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 8px;
  transition: gap 0.4s var(--ease-out-expo), color 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.journey__footer-cta:hover { gap: 22px; color: var(--ink); }
.journey__footer-cta .arrow {
  width: 18px;
  height: 1px;
  background: currentColor;
  position: relative;
}
.journey__footer-cta .arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
  transform-origin: right center;
}

@media (max-width: 720px) {
  .journey__step {
    grid-template-columns: 64px 1fr;
    gap: 22px;
    padding-bottom: 48px;
  }
  .journey__step::before {
    left: 32px;
    top: 56px;
    bottom: 14px;
  }
  .journey__num {
    font-size: 44px;
    padding-top: 2px;
  }
  .journey__title { font-size: 22px; margin-bottom: 12px; }
  .journey__meta  { font-size: 9.5px; letter-spacing: 0.24em; margin-bottom: 16px; }
  .journey__meta::before { width: 18px; }
  .journey__text  { font-size: 15px; line-height: 1.7; }
  .journey__footer { flex-direction: column; align-items: flex-start; gap: 24px; }
}

/* ============================================================
   THREE NEW HOME-PAGE SECTIONS:
   .letters     — testimonials grid (quote cards)
   .citations   — awards grid (framed plaques)
   .editorial   — insights grid (magazine cards with image)
   .section__more — shared 'View More' row that sits beneath each
   ============================================================ */

/* ---------- shared 'View More' row ---------- */
.section__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(48px, 6vw, 88px);
}

/* ---------- TESTIMONIALS · letter cards ---------- */
.letters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
  margin-top: clamp(48px, 6vw, 80px);
}
.letter {
  position: relative;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  border: 1px solid var(--line);
  padding: clamp(32px, 3.4vw, 48px);
  display: flex;
  flex-direction: column;
  transition: border-color 0.5s ease, transform 0.5s var(--ease-out-expo);
}
.letter::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: var(--gold-grad);
  opacity: 0.45;
  transition: opacity 0.4s ease;
}
.letter:hover {
  border-color: var(--card-line);
  transform: translateY(-4px);
}
.letter:hover::before { opacity: 1; }

.letter__mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(72px, 8vw, 104px);
  color: var(--accent);
  line-height: 0.65;
  height: 32px;
  opacity: 0.55;
  margin-bottom: 8px;
}
.letter__quote {
  font-family: var(--serif);
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.55;
  color: var(--ink);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  margin: 0 0 28px;
  flex: 1;
}
.letter__quote em {
  color: var(--accent);
  font-style: italic;
}
.letter__sign {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--accent);
  letter-spacing: 0.04em;
  padding-top: 18px;
  padding-bottom: 14px;
  border-top: 1px solid var(--line);
}
.letter__attr { padding-bottom: 16px; }
.letter__name {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.letter__role {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.letter__addr {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 1100px) {
  .letters { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .letters { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- AWARDS · citation plaques ---------- */
.citations {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
  margin-top: clamp(48px, 6vw, 80px);
}
.citation {
  position: relative;
  padding: clamp(32px, 3.8vw, 52px) clamp(28px, 3vw, 40px);
  background: var(--bg);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.5s ease, background 0.5s ease;
}
/* gold corner brackets — top-left and bottom-right, like a framed certificate */
.citation::before,
.citation::after {
  content: '';
  position: absolute;
  width: 56px;
  height: 56px;
  pointer-events: none;
  opacity: 0.35;
  transition: opacity 0.5s ease, width 0.5s var(--ease-out-expo), height 0.5s var(--ease-out-expo);
}
.citation::before {
  top: -1px; left: -1px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
}
.citation::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
}
.citation:hover { border-color: var(--card-line); }
.citation:hover::before,
.citation:hover::after { opacity: 0.85; width: 72px; height: 72px; }

.citation__year {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(60px, 6.5vw, 88px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.025em;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent); /* fallback */
}
.citation__rule {
  width: 56px;
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
  margin: 20px 0 24px;
}
.citation__kicker {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 14px;
}
.citation__title {
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 18px;
  font-weight: 400;
}
.citation__title em {
  color: var(--accent);
  font-style: italic;
}
.citation__body {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 28px;
  flex: 1;
}
.citation__body em {
  color: var(--ink);
  font-style: italic;
  font-family: var(--serif);
  font-size: 1.06em;
}
.citation__cta {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--accent);
  align-self: flex-start;
  transition: gap 0.4s var(--ease-out-expo), color 0.3s ease;
}
.citation__cta:hover { gap: 22px; color: var(--ink); }
.citation__cta .arrow {
  width: 16px; height: 1px;
  background: currentColor;
  position: relative;
}
.citation__cta .arrow::after {
  content: '';
  position: absolute;
  right: 0; top: -3px;
  width: 7px; height: 7px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
  transform-origin: right center;
}

@media (max-width: 1100px) {
  .citations { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .citations { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- INSIGHTS · editorial / magazine cards ---------- */
.editorial {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
  margin-top: clamp(48px, 6vw, 80px);
}
.editorial__card {
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line);
  transition: border-color 0.5s ease, transform 0.5s var(--ease-out-expo);
  overflow: hidden;
}
.editorial__card:hover {
  border-color: var(--card-line);
  transform: translateY(-4px);
}

.editorial__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.editorial__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1s var(--ease-out-expo);
}
.editorial__card:hover .editorial__img { transform: scale(1.06); }

.editorial__cat {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 8px 14px;
  background: var(--bg-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  color: var(--accent);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.editorial__body {
  padding: clamp(24px, 2.6vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.editorial__date {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
}
.editorial__title {
  font-family: var(--serif);
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  font-weight: 400;
}
.editorial__title em {
  color: var(--accent);
  font-style: italic;
}
.editorial__excerpt {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
  flex: 1;
}
.editorial__excerpt em {
  color: var(--ink);
  font-style: italic;
  font-family: var(--serif);
  font-size: 1.05em;
}
.editorial__cta {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px solid var(--line);
  align-self: flex-start;
  transition: gap 0.4s var(--ease-out-expo), color 0.3s ease;
}
.editorial__cta:hover { gap: 22px; color: var(--ink); }
.editorial__cta .arrow {
  width: 16px; height: 1px;
  background: currentColor;
  position: relative;
}
.editorial__cta .arrow::after {
  content: '';
  position: absolute;
  right: 0; top: -3px;
  width: 7px; height: 7px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
  transform-origin: right center;
}

@media (max-width: 1100px) {
  .editorial { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .editorial { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================================================
   AMBIENT LIGHTING for testimonials, awards, insights
   Softens the dark backgrounds with two layers:
     1. A static warm radial gradient baked into the section.
     2. A slow-floating gold orb (::after) that drifts gently
        through the section, adding life without distraction.
   No HTML changes — pure CSS, scoped to the three section IDs.
   ============================================================ */

#testimonials,
#awards,
#insights {
  overflow: hidden;
  isolation: isolate;
}

/* --- 1. Warm gradient bases --- */

/* Testimonials — soft warmth from top-left + bottom-right */
#testimonials {
  background:
    radial-gradient(ellipse 70% 50% at 15% 0%,  rgba(201,166,107,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 90% 100%, rgba(201,166,107,0.05) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 50%, var(--bg) 100%);
}

/* Awards (.section--alt already gives a subtle base; upgrade the highlight) */
#awards::before {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%,  rgba(201,166,107,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 15% 90%, rgba(201,166,107,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 35% at 85% 90%, rgba(120,145,176,0.05) 0%, transparent 55%);
}

/* Insights — warmth shifted to opposite corners for variety */
#insights {
  background:
    radial-gradient(ellipse 60% 45% at 85% 10%, rgba(201,166,107,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 10% 95%, rgba(120,145,176,0.05) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 50%, var(--bg) 100%);
}

/* --- 2. Slow-floating ambient gold orb (different position per section) --- */

#testimonials::after,
#awards::after,
#insights::after {
  content: '';
  position: absolute;
  width: clamp(320px, 50vw, 720px);
  height: clamp(320px, 50vw, 720px);
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle,
    rgba(201,166,107,0.18) 0%,
    rgba(201,166,107,0.04) 50%,
    transparent 75%);
  animation: ambientOrbDrift 26s ease-in-out infinite;
  will-change: transform, opacity;
}

#testimonials::after {
  top: -18%;
  right: -12%;
  animation-delay: 0s;
}
#awards::after {
  top: 25%;
  left: -15%;
  animation-delay: -9s;
  background: radial-gradient(circle,
    rgba(201,166,107,0.14) 0%,
    rgba(201,166,107,0.03) 50%,
    transparent 75%);
}
#insights::after {
  bottom: -18%;
  right: -10%;
  animation-delay: -17s;
}

@keyframes ambientOrbDrift {
  0%, 100% { transform: translate(0, 0)       scale(1);     opacity: 0.9; }
  25%      { transform: translate(50px,-40px) scale(1.08);  opacity: 1;   }
  50%      { transform: translate(-30px,30px) scale(0.94);  opacity: 0.85;}
  75%      { transform: translate(30px, 50px) scale(1.05);  opacity: 1;   }
}

/* Make sure container content sits ABOVE the ambient lighting */
#testimonials > .container,
#awards > .container,
#insights > .container {
  position: relative;
  z-index: 1;
}

/* --- 3. Card-level: a gentle gold inner-glow on hover ---
   Pairs with the existing border-color transition for a 'lit-up' feel. */

.letter,
.citation,
.editorial__card {
  position: relative;
  z-index: 1;
}

.letter,
.citation,
.editorial__card {
  transition:
    border-color 0.5s ease,
    transform 0.5s var(--ease-out-expo),
    box-shadow 0.6s var(--ease-out-expo);
}

.letter:hover,
.citation:hover,
.editorial__card:hover {
  box-shadow:
    0  1px 0 0 var(--accent) inset,
    0 22px 60px -20px rgba(201,166,107,0.18),
    0 12px 30px -16px rgba(0,0,0,0.5);
}

/* --- 4. A barely-visible aurora sweep across each section header ---
   Adds a slow gold light moving left-to-right behind the eyebrow.
   Restrained: opacity 0.06, 18-second cycle, no flash. */

#testimonials .section__head,
#awards .section__head,
#insights .section__head {
  position: relative;
  z-index: 1;
}
#testimonials .section__head::after,
#awards .section__head::after,
#insights .section__head::after {
  content: '';
  position: absolute;
  top: -40px;
  left: -100px;
  width: 220px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--accent) 50%,
    transparent);
  opacity: 0;
  animation: headlineGleam 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes headlineGleam {
  0%   { transform: translateX(0);     opacity: 0;   }
  20%  { opacity: 0.85; }
  100% { transform: translateX(70vw);  opacity: 0;   }
}

/* Mobile: keep the gradient warmth but quiet the animation
   so the section feels brighter, not busier. */
@media (max-width: 720px) {
  #testimonials::after,
  #awards::after,
  #insights::after {
    filter: blur(80px);
    width: 360px;
    height: 360px;
  }
  #testimonials .section__head::after,
  #awards .section__head::after,
  #insights .section__head::after {
    display: none;
  }
}

/* Respect reduced-motion preferences — keep the brightness, remove the drift. */
@media (prefers-reduced-motion: reduce) {
  #testimonials::after,
  #awards::after,
  #insights::after,
  #testimonials .section__head::after,
  #awards .section__head::after,
  #insights .section__head::after {
    animation: none;
  }
}