/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DESIGN TOKENS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  --bg-d1: #0d0c11;
  --bg-d2: #13111a;
  --bg-d3: #1a1824;
  --bg-l1: #f0ece3;
  --bg-l2: #e8e4da;
  --bg-l3: #ddd9ce;

  --brass:       #c9a96e;
  --brass-lt:    #d4b882;
  --brass-dk:    #a8883a;
  --brass-dim:   rgba(201,169,110,0.28);
  --brass-glow:  rgba(201,169,110,0.09);

  --stone:       #8c8478;

  --tw:    #ffffff;
  --tw90:  rgba(255,255,255,0.90);
  --tw70:  rgba(255,255,255,0.70);
  --tw50:  rgba(255,255,255,0.50);
  --tw30:  rgba(255,255,255,0.30);
  --tw10:  rgba(255,255,255,0.10);
  --tw05:  rgba(255,255,255,0.05);

  --td:    #1a1818;
  --td70:  rgba(26,24,24,0.70);
  --td50:  rgba(26,24,24,0.50);
  --td30:  rgba(26,24,24,0.30);

  --bdr-dk: rgba(201,169,110,0.13);
  --bdr-dk-s: rgba(255,255,255,0.06);
  --bdr-lt: rgba(26,24,24,0.12);

  --ff-display: 'Cormorant Garamond', Georgia, serif;
  --ff-body:    'DM Sans', system-ui, sans-serif;
  --ff-mono:    'DM Mono', 'Courier New', monospace;

  --ph: clamp(24px, 6.25vw, 80px);
  --pv: clamp(60px, 8vw, 100px);
  --max-w: 1280px;
  --max-p: 680px;

  --ease-s: cubic-bezier(0.16,1,0.3,1);
  --ease-o: cubic-bezier(0,0,0.2,1);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESET + BASE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body {
  font-family:var(--ff-body);
  font-weight:300;
  background:var(--bg-d1);
  color:var(--tw);
  overflow-x:hidden;
  line-height:1.6;
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
:focus-visible { outline:2px solid var(--brass); outline-offset:2px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LAYOUT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.container { width:100%; max-width:var(--max-w); margin:0 auto; padding-left:var(--ph); padding-right:var(--ph); }
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.g21 { display:grid; grid-template-columns:1.45fr 1fr; gap:64px; }
.g12 { display:grid; grid-template-columns:1fr 1.1fr; gap:64px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TYPOGRAPHY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.te  { font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--tw70); }
.thh { font-family:var(--ff-display); font-size:clamp(48px,7vw,88px); font-weight:300; letter-spacing:-.02em; line-height:1.0; color:var(--tw); }
.thd { font-family:var(--ff-display); font-size:clamp(32px,4vw,50px); font-weight:300; letter-spacing:-.01em; line-height:1.1; color:var(--brass); }
.thl { font-family:var(--ff-display); font-size:clamp(32px,4vw,50px); font-weight:300; letter-spacing:-.01em; line-height:1.1; color:var(--td); }
.tsd { font-family:var(--ff-display); font-style:italic; font-weight:300; font-size:clamp(16px,2vw,28px); line-height:1.45; color:var(--brass-lt); }
.tbd { font-family:var(--ff-body); font-weight:300; font-size:15px; line-height:1.75; color:var(--tw70); }
.tbl { font-family:var(--ff-body); font-weight:300; font-size:15px; line-height:1.75; color:var(--td70); }
.tlb { font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--stone); }
.tsn { font-family:var(--ff-display); font-size:60px; font-weight:300; line-height:1; color:var(--tw); opacity:.5; }
.tsl { font-family:var(--ff-display); font-size:28px; font-weight:300; line-height:1; color:var(--tw); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DIVIDERS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.div-b { width:48px; height:1px; background:var(--brass); opacity:.4; }
.div-d { width:100%; height:1px; background:var(--bdr-dk-s); }
.div-l { width:100%; height:1px; background:var(--bdr-lt); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BUTTONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.btn-p {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--ff-mono); font-size:11px; font-weight:400; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brass); background:transparent; border:1px solid var(--brass); border-radius:25px;
  padding:15px 36px; cursor:pointer; min-height:44px;
  transition:background .25s var(--ease-o), color .25s var(--ease-o);
}
.btn-p:hover { background:var(--brass); color:var(--bg-d1); }

.btn-s {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ff-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tw50); background:transparent; border:none; padding:0; cursor:pointer;
  min-height:44px; transition:color .2s ease;
}
.btn-s:hover { color:var(--brass); }

.btn-ch {
  display:flex; flex-direction:column; gap:12px; padding:24px 20px 20px;
  cursor:pointer; text-align:center; align-items:center; min-height:44px;
  transition:border-color .25s ease, background .25s ease;
}
.btn-ch:hover { border-color:var(--brass-dim); background:var(--brass-glow); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ANIMATIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.af { opacity:0; transition:opacity 600ms var(--ease-o); }
.al { opacity:0; transform:translateY(16px); transition:opacity 600ms var(--ease-s), transform 600ms var(--ease-s); }
.ar { clip-path:inset(0 100% 0 0); transition:clip-path 800ms var(--ease-s); }

.vis.af { opacity:1; }
.vis.al { opacity:1; transform:translateY(0); }
.vis.ar { clip-path:inset(0 0% 0 0); }

[data-d="1"]{ transition-delay:80ms; }
[data-d="2"]{ transition-delay:160ms; }
[data-d="3"]{ transition-delay:240ms; }
[data-d="4"]{ transition-delay:320ms; }
[data-d="5"]{ transition-delay:400ms; }
[data-d="6"]{ transition-delay:480ms; }

@media (prefers-reduced-motion:reduce) {
  .al { transform:none; }
  .ar { clip-path:none; }
  .af,.al,.ar { transition:opacity 300ms ease; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NAV
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: fixed;
  top: 0; left: 0; right: 0; z-index: 100;
  padding: 20px var(--ph);
  border-bottom: 1px solid transparent;
  transition: backdrop-filter .4s ease, border-color .4s ease;
}

.nav-logo {
  margin-right: auto;
  display: flex;
  align-items: center;
}

.nav-logo img {
  height: 64px;
  width: auto;
  display: block;
}

.nav-right {
  margin-right: 24px;
}

.nav-toggle { display: none; }

.nav-icon {
  display: block;
  cursor: pointer;
  width: 28px;
  height: 20px;
  position: relative;
  z-index: 1000;
}

.nav-icon span,
.nav-icon span::before,
.nav-icon span::after {
  content: "";
  display: block;
  background: var(--brass);
  height: 1px;
  width: 100%;
  position: absolute;
  transition: all 0.3s var(--ease-s);
}

.nav-icon span { top: 9px; }
.nav-icon span::before { top: -8px; }
.nav-icon span::after { bottom: -8px; }

/* Morph to 'X' */
.nav-toggle:checked + .nav-icon span { background: transparent; }
.nav-toggle:checked + .nav-icon span::before { transform: rotate(45deg); top: 0; }
.nav-toggle:checked + .nav-icon span::after { transform: rotate(-45deg); bottom: 0; }

/* Links — in-flow second row, hidden via max-height so the nav wraps around them */
.nav-links {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 32px;
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s var(--ease-s), padding-top 0.45s var(--ease-s);
  padding-top: 0;
}

.nav-links a {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tw70);
  transition: color .2s ease;
}

.nav-links a:hover { color: var(--brass); }

.nav-toggle:checked ~ .nav-links {
  max-height: 300px;
  padding-top: 20px;
  padding-bottom: 12px;
}

/* Single glass block covering bar + links together */
.nav.scrolled,
.nav:has(.nav-toggle:checked) {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bdr-dk);
}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   01 HERO
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hero { position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--bg-d1); }
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-img { width:100%; height:100%; object-fit:cover; object-position:center; animation:kb 14s ease-in-out infinite alternate; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(to bottom, rgba(13,12,17,.3) 0%, rgba(13,12,17,.18) 40%, rgba(13,12,17,.75) 80%, rgba(13,12,17,.97) 100%); }
/* VIDEO-READY slot — hidden until video file provided */
.hero-video { position:absolute; inset:0; z-index:1; }
.hero-video video { width:100%; height:100%; object-fit:cover; display:block; }
.hero-video::after { content:''; position:absolute; inset:0; background:rgba(13,12,17,.45); pointer-events:none; }
.hero-content { position:relative; z-index:1; width:100%; padding:var(--ph); padding-top:160px; padding-bottom:80px; }
.hero-inner { max-width:740px; }

.h-ey  { margin-bottom:28px; opacity:0; animation:fiu 600ms var(--ease-s) 400ms forwards; }
.h-hl  { margin-bottom:28px; opacity:0; animation:fiu 800ms var(--ease-s) 700ms forwards; }
.h-sh  { margin-bottom:16px; max-width:560px; opacity:0; animation:fiu 600ms var(--ease-s) 1100ms forwards; }
.h-sp  { margin-bottom:48px; max-width:480px; font-size:13px; opacity:0; animation:fiu 600ms var(--ease-s) 1300ms forwards; }
.h-ct  { opacity:0; animation:fiu 600ms var(--ease-s) 1500ms forwards; }

.scroll-ind { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.scroll-line { width:1px; height:48px; background:linear-gradient(to bottom, var(--brass), transparent); animation:spulse 2s ease-in-out infinite; }
.scroll-lbl { font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--brass); }

@keyframes kb { from{transform:scale(1.0)} to{transform:scale(1.04)} }
@keyframes fiu { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes spulse { 0%,100%{opacity:.4} 50%{opacity:.85} }
@keyframes breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.025)} }

@media(prefers-reduced-motion:reduce){
  .hero-img { animation:none; }
  .h-ey,.h-hl,.h-sh,.h-sp,.h-ct { animation:none; opacity:1; }
  .scroll-line { animation:none; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   02 RECOGNITION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.recog { padding:20px var(--ph); background:var(--bg-d2); border-top:1px solid var(--bdr-dk); border-bottom:1px solid var(--bdr-dk); }
.recog-inner { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:24px 32px; }
.r-badge { font-family:var(--ff-mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--brass); padding:6px 14px; border:1px solid var(--bdr-dk); border-radius:2px; }
.r-sep { width:1px; height:14px; background:var(--bdr-dk); flex-shrink:0; }
.r-item { font-family:var(--ff-mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--stone); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   03 VISION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.vision { padding:var(--pv) 0; position:relative; overflow:hidden; background:var(--bg-d3); }
.vision-bg { position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse at 70% 50%, rgba(201,169,110,.04) 0%, transparent 65%), url(assets/vision-bg.png) center/cover no-repeat; opacity:.5; pointer-events:none; }
.vision .container { position:relative; z-index:1; }
.vision-layout { display:grid; grid-template-columns:1.4fr 1fr; gap:64px; align-items:start; }
.vision-text { display:flex; flex-direction:column; gap:22px; }
.vision-text .tbd[data-d="2"].vis,
.vision-text .tbd[data-d="3"].vis,
.vision-text .tbd[data-d="4"].vis { opacity:.8; }
.vision-text .tbd[data-d="5"].vis { opacity:.7; }
.vision-illus { display:flex; justify-content:center; align-items:center; }
.vision-illus img { width:100%; max-width:600px; opacity:.65; filter:sepia(15%) brightness(.9); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   04 WORKS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.works { padding:var(--pv) 0; position:relative; overflow:hidden; background:var(--bg-d3); }
.works-bg { position:absolute; inset:0; z-index:0; }
.works-bg-img { width:100%; height:100%; object-fit:cover; opacity: 0.2;; filter:saturate(.55); }
/* VIDEO-READY slot */
.works-bg-video { position:absolute; inset:0; z-index:1; display:none; opacity:.11; }
.works-bg-grad { position:absolute; inset:0; z-index:2; background:linear-gradient(to bottom, var(--bg-d1), transparent 18%, transparent 82%, var(--bg-d1)); pointer-events:none; }
.works-c { position:relative; z-index:3; }
.works-intro { text-align:center; max-width:680px; margin:0 auto 64px; }
.works-intro-line { font-family:var(--ff-display); font-style:italic; font-weight:300; font-size:clamp(20px,2.5vw,30px); line-height:1.35; color:var(--brass-lt); }
.steps { display:grid; grid-template-columns:repeat(3,1fr); position:relative; }
.steps::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(to right, transparent, var(--brass-dim), transparent); }
.step { border-right:1px solid var(--bdr-dk-s); display:flex; flex-direction:column; overflow:hidden; position:relative; background-size:cover; background-position:center; background-clip:padding-box; }
.step:last-child { border-right:none; }
.step::before { content:''; position:absolute; inset:0; background:rgba(13,12,17,.72); transition:background .35s ease; z-index:0; }
.step:hover::before { background:rgba(13,12,17,.58); }
.step:nth-child(1) { background-image:url(assets/step1.png); }
.step:nth-child(2) { background-image:url(assets/step2.png); }
.step:nth-child(3) { background-image:url(assets/step3.png); }
.step-body { padding:32px 32px 40px; display:flex; flex-direction:column; gap:14px; position:relative; z-index:1; }
.works-footer { text-align:center; margin-top:64px; }
.step .tbd { font-size:13px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   05 MATTERS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.matters { padding:var(--pv) 0; position:relative; overflow:hidden; background:var(--bg-d2); }
.matters-bg { position:absolute; inset:0; z-index:0; }
.matters-bg-img { width:100%; height:100%; object-fit:cover; opacity: 0.7; filter:saturate(.45); }
.matters-bg-ov { position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(13,12,17,.3) 0%, rgba(13,12,17,.72) 100%); }
.matters-c { position:relative; z-index:1; max-width:720px; margin:0 auto; text-align:center; display:flex; flex-direction:column; gap:24px; }
.matters-c .tbd { max-width:100%; }
.matters-manifesto { font-family:var(--ff-display); font-style:italic; font-weight:300; font-size:clamp(22px,3vw,38px); line-height:1.25; color:var(--brass); opacity:.52; letter-spacing:.02em; margin:16px 0; }
.pillars { display:grid; grid-template-columns:repeat(3,1fr); margin-top:24px; text-align:left; }
.pillar { padding:32px 24px; border-top:1px solid var(--brass-dim); }
.pillar+.pillar { border-left:1px solid var(--bdr-dk-s); }
.p-name { font-family:var(--ff-display); font-size:22px; font-weight:300; color:var(--brass); margin-bottom:12px; }
.p-text { font-family:var(--ff-body); font-weight:300; font-size:13px; line-height:1.65; color:var(--tw70); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   06 GALLERY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gallery-sec { padding:var(--pv) 0 0; background:var(--bg-d3); }
.gallery-hdr { padding:0 var(--ph); margin-bottom:32px; }
.gallery-wrap { overflow-x:auto; overflow-y:visible; scrollbar-width:none; -ms-overflow-style:none; cursor:grab; }
.gallery-wrap::-webkit-scrollbar { display:none; }
.gallery-wrap.grab { cursor:grabbing; }
.gallery-track { display:flex; gap:8px; padding:0 var(--ph); width:max-content; }
.g-item { flex-shrink:0; border-radius:3px; overflow:hidden; position:relative; background:var(--bg-d2); height:clamp(220px,38vw,440px); }
.g-item img { height:100%; width:auto; display:block; transition:transform .6s var(--ease-s), opacity .4s ease; }
.g-item:hover img { transform:scale(1.03); }
.g-cap { position:absolute; bottom:0; left:0; right:0; padding:12px 16px; background:linear-gradient(to top, rgba(13,12,17,.8), transparent); font-family:var(--ff-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--tw50); opacity:0; transition:opacity .3s ease; }
.g-item:hover .g-cap { opacity:1; }
.gallery-prog { padding:16px var(--ph) 40px; }
.gallery-prog-track { height:1px; background:var(--bdr-dk-s); position:relative; }
.gallery-prog-fill { position:absolute; left:0; top:0; height:100%; background:var(--brass); border-radius:2px; transition:width .1s ease; width:15%; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   07 ARTWORK (Light)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.artwork { padding:var(--pv) 0; background:var(--bg-l3); }
.art-layout { display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:start; }
.art-img { align-self: center }
.art-img img { width:100%; border-radius:3px;}
.art-text { display:flex; flex-direction:column; gap:24px; padding-top:16px; }
.art-text .te { color:var(--stone); }
.art-text .div-b.vis { opacity:.3; }
.specs-grid { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--bdr-lt); }
.spec-item { padding:14px 0; border-bottom:1px solid var(--bdr-lt); }
.spec-item:nth-child(even) { padding-left:20px; border-left:1px solid var(--bdr-lt); }
.spec-k { font-family:var(--ff-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--td50); margin-bottom:4px; }
.spec-v { font-family:var(--ff-body); font-size:14px; font-weight:400; color:var(--td); }
.art-note { font-family:var(--ff-display); font-style:italic; font-size:24px; font-weight:300; color:var(--stone); letter-spacing:.02em; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   08 SIERRA
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sierra { padding:var(--pv) 0; position:relative; min-height:600px; display:flex; align-items:center; overflow:hidden; background:var(--bg-d1); }
.sierra-bg { position:absolute; inset:0; z-index:0; }
.sierra-bg-img { width:100%; height:100%; object-fit:cover; object-position:center 30%; animation:kb 18s ease-in-out infinite alternate; }
.sierra-bg-ov { position:absolute; inset:0; background:linear-gradient(to right, rgba(13,12,17,.9) 0%, rgba(13,12,17,.72) 55%, rgba(13,12,17,.5) 100%); }
.sierra-c { position:relative; z-index:1; max-width:640px; display:flex; flex-direction:column; gap:24px; }
.sierra-c .tsd[data-d="5"].vis { opacity:.8; }
.sierra-partners { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.partner-ph { height:28px; padding:0 12px; border:1px solid var(--bdr-dk); border-radius:2px; display:flex; align-items:center; font-family:var(--ff-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--stone); }
@media(prefers-reduced-motion:reduce){ .sierra-bg-img { animation:none; } }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   09 COLLECTIVE (Light)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.collective { padding:var(--pv) 0; background:var(--bg-l3); }
.yuluka-mod { position:relative; border-radius:3px; overflow:hidden; min-height:200px; margin-bottom:56px; display:flex; align-items:flex-end; background:var(--bg-l3); }
.yuluka-img { position:absolute; inset:0; z-index:0; }
.yuluka-img img { width:100%; height:100%; object-fit:cover; filter:brightness(.72) saturate(.82); }
.yuluka-ov { position:absolute; inset:0; background:linear-gradient(to top, rgba(26,24,24,.85) 0%, rgba(26,24,24,.18) 60%, transparent 100%); }
.yuluka-cap { position:relative; z-index:1; padding:28px 32px; }
.yuluka-t { font-family:var(--ff-body); font-weight:500; font-size:14px; color:var(--tw90); }
.yuluka-s { font-family:var(--ff-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--tw50); margin-top:4px; }
.team-intro { max-width:var(--max-p); margin-bottom:40px; display:flex; flex-direction:column; gap:16px; }
.collective-layout { display:grid; grid-template-columns:1fr 1.5fr; gap:80px; align-items:center; }
.collective-left { display:flex; flex-direction:column; gap:24px; }
.team-accordion { width:100%; aspect-ratio:1/0.7; display:flex; border:1px solid var(--bdr-lt); border-radius:3px; overflow:hidden; }
.tm-item { flex:0 0 auto; width:48px; position:relative; overflow:hidden; border-right:1px solid var(--bdr-lt); transition:width 0.6s cubic-bezier(0.16,1,0.3,1), background 0.4s ease; cursor:pointer; background:var(--bg-l3); transform:translateZ(0); will-change:width; }
.tm-item:last-child { border-right:none; }
.tm-item.open { cursor:default; }
.tm-tab { position:absolute; top:0; left:0; bottom:0; width:48px; z-index:2; display:flex; align-items:center; justify-content:center; background:none; border:none; padding:0; cursor:pointer; }
.tm-item.open .tm-tab { cursor:default; }
.tm-vname { writing-mode:vertical-rl; transform:rotate(180deg) translateZ(0); font-family:var(--ff-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--td50); white-space:nowrap; transition:opacity 0.25s ease, color 0.2s ease; backface-visibility:hidden; will-change:opacity; }
.tm-item:not(.open):hover .tm-vname { color:var(--td); }
.tm-item.open .tm-vname { opacity:0; }
.tm-panel { position:relative; width:100%; height:100%; overflow:hidden; opacity:0; pointer-events:none; transition:opacity 0.3s ease; }
.tm-item.open .tm-panel { opacity:1; pointer-events:auto; transition-delay:0.22s; }
.tm-panel::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.22) 55%, transparent 100%); pointer-events:none; z-index:1; }
.tm-photo { position:absolute; inset:0; }
.tm-photo img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.tm-body { position:absolute; bottom:0; left:0; right:0; padding:20px 22px; display:flex; flex-direction:column; gap:5px; z-index:2; }
.tm-body .tm-name { font-family:var(--ff-body); font-weight:500; font-size:13px; color:var(--tw); }
.tm-body .tm-role { font-family:var(--ff-mono); font-size:8px; letter-spacing:.08em; text-transform:uppercase; color:var(--tw50); }
.tm-body .tm-bio { font-family:var(--ff-body); font-weight:300; font-size:11px; line-height:1.65; color:var(--tw70); margin-top:4px; }
.tm-initials { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:var(--ff-display); font-size:24px; color:var(--tw50); background:var(--bg-d2); }
.coll-foot { margin-top:48px; padding-top:24px; border-top:1px solid var(--bdr-lt); display:flex; align-items:center; justify-content:space-between; }
.coll-foot .btn-s { color:var(--td50); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10 SUPPORT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.support { padding:var(--pv) 0; position:relative; overflow:hidden; background:var(--bg-d1); }
.support-bg { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%, rgba(201,169,110,.06) 0%, transparent 60%); pointer-events:none; }
.support-c { position:relative; z-index:1; }
.support-hdr { text-align:center; max-width:680px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:20px; margin-bottom:60px; }
.support-hdr .thd { font-size:clamp(36px,5vw,64px); }
.support-hdr .tsd { font-size:clamp(16px,2vw,20px); max-width:560px; }
.support-hdr .tbd { max-width:560px; }
.support-hdr .tbd[data-d="2"].vis { opacity:.75; }
.support-hdr .tbd[data-d="3"].vis { opacity:.65; }
.support-prim-cta { margin-top:8px; animation:breathe 2.5s ease-in-out infinite; }
.ch-rows-1 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:12px; }
.ch-rows-2 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.ch-title { font-family:var(--ff-display); font-size:20px; font-weight:300; color:var(--brass); line-height:1.2; }
.ch-plat { font-family:var(--ff-mono); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); opacity:.6; }
.ch-text { font-family:var(--ff-body); font-weight:300; font-size:12px; line-height:1.55; color:var(--tw50); flex-grow:1; }
.ch-cta { font-family:var(--ff-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); display:flex; align-items:center; gap:6px; padding-top:12px; border-top:1px solid var(--bdr-dk); transition:gap .2s ease; }
.btn-ch:hover .ch-cta { gap:10px; }
.ch-static,
.ch-static:hover { cursor:default; background:transparent; transition:none; }
.ch-cta-btn {
  display:inline-flex; align-items:center; align-self:flex-start;
  font-family:var(--ff-mono); font-size:10px; font-weight:400; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bg-d1); background:var(--brass); border:none; border-radius:25px;
  padding:11px 22px; cursor:pointer; min-height:36px;
  transition:background .2s ease;
}
.ch-cta-btn:hover { background:var(--brass-lt); }
.ch-merch { background:rgba(201,169,110,.04); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LIGHTBOX
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.lightbox { position:fixed; inset:0; z-index:500; background:rgba(13,12,17,.96); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.lightbox.open { opacity:1; pointer-events:auto; }
.lb-img-wrap { display:flex; align-items:center; justify-content:center; max-width:92vw; max-height:92vh; }
.lb-img { max-width:92vw; max-height:92vh; width:auto; height:auto; object-fit:contain; display:block; border-radius:3px; }
.lb-close { position:absolute; top:20px; right:24px; background:none; border:none; color:var(--tw50); font-size:32px; line-height:1; padding:8px; cursor:pointer; transition:color .2s ease; }
.lb-close:hover { color:var(--tw); }
.g-item { cursor:zoom-in; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11 FOOTER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.footer { padding:var(--pv) 0 40px; background:var(--bg-d2); }
.footer-manifesto { text-align:center; padding:0 var(--ph); margin-bottom:64px; }
.footer-mline { font-family:var(--ff-display); font-style:italic; font-weight:300; font-size:clamp(20px,3vw,36px); letter-spacing:.03em; color:var(--brass); opacity:.7; }
.footer-rule { height:1px; background:linear-gradient(to right, transparent, var(--bdr-dk), transparent); }
.footer-rule-top { margin-bottom:40px; }
.footer-rule-bot { margin-top:40px; margin-bottom:48px; }
.footer-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.footer-logo { font-family:var(--ff-display); font-size:22px; font-weight:300; color:var(--brass); letter-spacing:.02em; margin-bottom:6px; }
.footer-tag { font-family:var(--ff-body); font-weight:300; font-size:13px; color:var(--tw70); }
.footer-studio { font-family:var(--ff-mono); font-size:10px; letter-spacing:.06em; color:var(--tw30); margin-top:4px; }
.footer-cl { font-family:var(--ff-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--tw30); margin-bottom:12px; }
.footer-ct { font-family:var(--ff-body); font-weight:300; font-size:13px; line-height:1.75; color:var(--tw70); }
.footer-ct a { color:var(--tw70); transition:color .2s ease; }
.footer-ct a:hover { color:var(--brass); }
.footer-ct + .footer-cl { margin-top:20px; }
.footer-press { font-size:12px; opacity:.75; }
.footer-bot { padding-top:24px; border-top:1px solid var(--bdr-dk-s); display:flex; align-items:center; justify-content:space-between; }
.footer-legal { font-family:var(--ff-mono); font-size:9px; letter-spacing:.06em; color:var(--tw30); }
.back-top { width:36px; height:36px; border:1px solid var(--bdr-dk); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .2s ease, background .2s ease; }
.back-top:hover { border-color:var(--brass); background:var(--brass-glow); }
.back-top svg { width:12px; height:12px; stroke:var(--tw50); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CUSTOM CURSOR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(hover:hover) and (pointer:fine) {
  body { cursor:none; }
  .cursor { position:fixed; top:0; left:0; width:8px; height:8px; border-radius:50%; background:var(--brass); pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:width .25s ease, height .25s ease, background .25s ease; }
  .cursor.hov { width:28px; height:28px; background:transparent; border:1px solid var(--brass); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:1024px) {
  .vision-layout { grid-template-columns:1fr; }
  .vision-illus { display:none; }
  .art-layout { grid-template-columns:1fr; gap:40px; }
  .collective-layout { grid-template-columns:1fr; gap:40px; }
  .ch-rows-1 { grid-template-columns:1fr 1fr; }
  .ch-rows-2 { grid-template-columns:1fr 1fr; }
}
@media(max-width:767px) {
  .nav { padding:12px var(--ph); }
  .nav-logo { width:100%; margin-right:0; justify-content:center; }
  .nav-right { margin-right:auto; }
}

@media(max-width:768px) {
  .steps { grid-template-columns:1fr; }
  .step { border-right:none; border-bottom:1px solid var(--bdr-dk-s); }
  .step:last-child { border-bottom:none; }
  .pillars { grid-template-columns:1fr; }
  .pillar+.pillar { border-left:none; border-top:1px solid var(--bdr-dk-s); }
  .collective-layout { grid-template-columns:1fr; gap:32px; }
  .ch-rows-1 { grid-template-columns:1fr; }
  .ch-rows-2 { grid-template-columns:1fr; }
  .support-hdr { margin-bottom:20px; }
  .footer-grid { grid-template-columns:1fr; gap:32px; }
  .hero-img { animation:none; }
  .sierra-bg-img { animation:none; }
}
@media(max-width:767px) {
  .team-accordion { flex-direction:column; aspect-ratio:unset; height:auto; }
  .tm-item { width:100% !important; height:48px; border-right:none; border-bottom:1px solid var(--bdr-lt); transition:height 0.6s cubic-bezier(0.16,1,0.3,1), background 0.4s ease !important; will-change:height; }
  .tm-item:last-child { border-bottom:none; }
  .tm-item.open { height:340px; }
  .tm-tab { width:100%; height:48px; padding:0 20px; justify-content:flex-start; gap:12px; }
  .tm-vname { writing-mode:horizontal-tb; transform:none; }
}
@media(max-width:480px) {
  .ch-rows-2 { grid-template-columns:1fr; }
  .r-sep { display:none; }
  .coll-foot { flex-direction:column; gap:16px; align-items:flex-start; }
}