/* ====================================================================
   BAYT GAGY — R3 · "The Visit"
   Cinematic, scroll-driven, interactive.
   ==================================================================== */

:root{
  /* Desert dusk palette */
  --bg:       #0b0e1a;
  --bg-2:     #141828;
  --bg-3:     #1c2236;
  --night:    #050710;
  --ink:      #f5e8d0;
  --ink-80:   rgba(245,232,208,.82);
  --ink-60:   rgba(245,232,208,.60);
  --ink-40:   rgba(245,232,208,.40);
  --ink-20:   rgba(245,232,208,.20);
  --line:     rgba(245,232,208,.12);

  --sand:     #d4a574;
  --sand-d:   #a87b4a;
  --coral:    #e27d60;
  --gold:     #e8c27e;
  --rose:     #c08a7a;

  /* Cinematic type */
  --f-display: "Instrument Serif", "Cormorant Garamond", ui-serif, Georgia, serif;
  --f-italic:  "Cormorant Garamond", ui-serif, Georgia, serif;
  --f-sans:    "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Easing */
  --ease:     cubic-bezier(.22,.68,.28,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in:  cubic-bezier(.64,0,.78,0);

  /* Layout */
  --w:   1440px;
  --pad: clamp(22px, 4vw, 84px);

  /* Smooth scroll timeline (JS-driven) */
  --tour-x: 0px;
}

*,*::before,*::after{ box-sizing: border-box }
html,body{ margin:0; padding:0 }
html{ scroll-behavior: smooth; color-scheme: dark; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  cursor: none;
}
@media (pointer: coarse){ body{ cursor: auto } }

img{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; cursor: none }
@media (pointer: coarse){ a{ cursor: pointer } }
button{ font:inherit; color:inherit; background:none; border:0; cursor:none; padding:0 }
@media (pointer: coarse){ button{ cursor: pointer } }
::selection{ background: var(--coral); color: var(--night) }

/* ======================== FILM GRAIN OVERLAY ========================= */
.grain{
  position: fixed; inset: -50%;
  pointer-events: none; z-index: 9998;
  opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .96  0 0 0 0 .91  0 0 0 0 .82  0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grainJitter .6s steps(4) infinite;
  will-change: transform;
}
@keyframes grainJitter{
  0%   { transform: translate(0,0) }
  25%  { transform: translate(-5px, 3px) }
  50%  { transform: translate(4px, -6px) }
  75%  { transform: translate(-3px, -4px) }
  100% { transform: translate(0,0) }
}
@media (prefers-reduced-motion: reduce){ .grain{ animation:none } }

/* ======================== CUSTOM CURSOR ============================== */
.cur, .cur-dot{
  position: fixed; top:0; left:0;
  pointer-events: none;
  z-index: 10000;
  transform: translate3d(-50%,-50%,0);
  will-change: transform;
}
.cur-dot{
  width: 6px; height: 6px;
  background: var(--coral);
  border-radius: 50%;
  mix-blend-mode: difference;
}
.cur{
  width: 38px; height: 38px;
  border: 1px solid rgba(232,194,126,.55);
  border-radius: 50%;
  transition: width .28s var(--ease), height .28s var(--ease), border-color .28s, background .28s;
  mix-blend-mode: difference;
}
.cur.is-hover{ width: 80px; height: 80px; border-color: var(--gold); }
.cur.is-zoom{ width: 110px; height: 110px; background: rgba(232,194,126,.08); border-color: var(--gold) }
.cur.is-zoom::after{ content: "EXPLORE"; color: var(--gold); font-size:10px; letter-spacing:.3em; }
.cur::after{
  content:"";
  display: grid; place-items: center;
  width: 100%; height: 100%;
  font-family: var(--f-sans); font-weight: 500;
}
@media (pointer: coarse){ .cur, .cur-dot{ display:none } }

/* ======================== APERTURE / PAGE REVEAL ===================== */
.aperture{
  position: fixed; inset: 0;
  z-index: 1000;
  background: var(--night);
  pointer-events: none;
  clip-path: circle(0% at 50% 50%);
  animation: apertureOpen 1.4s .3s var(--ease-out) forwards;
}
@keyframes apertureOpen{
  0%   { clip-path: circle(150% at 50% 50%); }
  100% { clip-path: circle(0% at 50% 50%); }
}
@media (prefers-reduced-motion: reduce){
  .aperture{ animation: none; clip-path: circle(0% at 50% 50%) }
}

/* Loader mark — appears under aperture */
.boot{
  position: fixed; inset:0; z-index: 999;
  display: grid; place-items: center;
  background: var(--night);
  color: var(--gold);
  transition: opacity .8s var(--ease), visibility .8s;
}
.boot-mark{
  font-family: var(--f-display);
  font-size: clamp(42px, 7vw, 96px);
  font-style: italic;
  font-weight: 300;
  letter-spacing: .02em;
  display: flex; gap: .1em;
}
.boot-mark span{
  display: inline-block;
  opacity: 0;
  transform: translateY(18px);
  animation: bootLetters .7s var(--ease-out) forwards;
}
.boot-mark span:nth-child(1){ animation-delay: .15s }
.boot-mark span:nth-child(2){ animation-delay: .22s }
.boot-mark span:nth-child(3){ animation-delay: .29s }
.boot-mark span:nth-child(4){ animation-delay: .36s }
.boot-mark span:nth-child(5){ animation-delay: .52s }
.boot-mark span:nth-child(6){ animation-delay: .59s }
.boot-mark span:nth-child(7){ animation-delay: .66s }
.boot-mark span:nth-child(8){ animation-delay: .73s }
@keyframes bootLetters{
  to{ opacity: 1; transform: translateY(0) }
}
.boot.is-done{ opacity: 0; visibility: hidden }

/* ======================== TYPOGRAPHY ================================= */
.display, .h-display, .h-sub{
  font-family: var(--f-display);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: .94;
  margin: 0;
}
.display{ font-size: clamp(64px, 12vw, 220px); }
.h-display{ font-size: clamp(40px, 6.4vw, 98px); line-height: 1.02 }
.h-sub{ font-size: clamp(26px, 3.4vw, 48px); line-height: 1.08 }
em{ font-family: var(--f-italic); font-style: italic; font-weight: 300 }
.display em, .h-display em, .h-sub em{ color: var(--coral) }

.eyebrow{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 400;
  margin: 0 0 18px;
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before{
  content:""; width: 24px; height: 1px; background: currentColor;
  display: inline-block;
}
.label{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin: 0 0 16px;
  display: inline-block;
}
.lede{
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.5;
  color: var(--ink-80);
  max-width: 54ch;
  font-family: var(--f-italic);
  font-style: italic;
}
p{ margin: 0 0 14px; color: var(--ink-80); max-width: 62ch }
.small{ font-size: 13px; color: var(--ink-60) }

/* ======================== KINETIC TEXT =============================== */
.kin{ display: inline-block; overflow: hidden }
.kin > span{
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--ease-out);
}
.kin.is-in > span{ transform: translateY(0) }

.kin-letters{ display: inline-block }
.kin-letters .ch{
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
  transition: transform .9s var(--ease-out), opacity .9s var(--ease-out);
}
.kin-letters.is-in .ch{ transform: translateY(0); opacity: 1 }

.reveal{ opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out) }
.reveal.is-in{ opacity: 1; transform: none }

/* Word cycling */
.cycle{
  display: inline-flex;
  vertical-align: baseline;
  overflow: hidden;
  min-width: 6ch;
  height: 1em;
}
.cycle-inner{
  display: flex; flex-direction: column;
  transition: transform .7s var(--ease-out);
}
.cycle-inner span{
  display: block;
  height: 1em;
  line-height: 1;
  font-style: italic;
  color: var(--gold);
}

/* ======================== PROGRESS RAIL (left) ======================= */
.rail{
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: 52px;
  z-index: 80;
  display: flex; flex-direction: column;
  justify-content: space-between; align-items: center;
  padding: 20px 0;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(11,14,26,.7), rgba(11,14,26,.95));
}
.rail-brand{
  font-family: var(--f-display); font-style: italic;
  font-size: 18px; color: var(--gold);
  writing-mode: vertical-rl; transform: rotate(180deg);
  letter-spacing: .14em;
}
.rail-prog{
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
  margin: 30px 0;
}
.rail-prog-line{
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line) 10%, var(--line) 90%, transparent);
  transform: translateX(-50%);
}
.rail-prog-fill{
  position: absolute; top: 0; left: 50%;
  width: 2px;
  background: linear-gradient(180deg, var(--coral), var(--gold));
  transform: translateX(-50%);
  transform-origin: top;
  height: var(--scroll-prog, 0%);
  box-shadow: 0 0 10px var(--coral);
}
.rail-chap{
  position: absolute; left: 50%;
  transform: translateX(-50%);
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid var(--ink-40);
  background: var(--bg);
  transition: all .4s var(--ease);
}
.rail-chap.is-on{
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 12px var(--gold);
}
.rail-chap .chap-name{
  position: absolute; left: 18px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .3s;
}
.rail-chap:hover .chap-name{ opacity: 1 }
.rail-foot{
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink-40);
  writing-mode: vertical-rl; transform: rotate(180deg);
}

/* ======================== TOP BAR ==================================== */
.top{
  position: fixed;
  top: 0; left: 52px; right: 0;
  z-index: 90;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px var(--pad);
  transition: background .5s var(--ease), padding .3s;
}
.top.is-scrolled{
  background: rgba(11,14,26,.72);
  backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  padding: 14px var(--pad);
}
.top-brand{
  font-family: var(--f-display);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
}
.top-brand sup{
  font-family: var(--f-mono); font-style: normal;
  font-size: 10px; letter-spacing: .28em;
  color: var(--gold); margin-left: 12px;
  vertical-align: middle; text-transform: uppercase;
}
.top-right{ display: flex; align-items: center; gap: 28px }
.clock{
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-60);
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
}
.clock::before{
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 10px var(--coral);
  animation: pulse 2s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{ opacity: 1 }
  50%{ opacity: .3 }
}

.menu-btn{
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  padding: 12px 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  transition: all .3s;
}
.menu-btn:hover{ background: var(--gold); color: var(--night); border-color: var(--gold) }
.menu-btn .lines{
  display: flex; flex-direction: column; gap: 4px;
}
.menu-btn .lines span{
  display: block; width: 16px; height: 1px;
  background: currentColor;
  transition: width .3s, transform .3s;
}
.menu-btn:hover .lines span:nth-child(2){ width: 8px }

/* ======================== FULLSCREEN MENU ============================ */
.fs{
  position: fixed; inset: 0;
  background: var(--night);
  z-index: 200;
  opacity: 0; visibility: hidden;
  transition: opacity .6s var(--ease), visibility .6s;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  overflow: hidden;
}
.fs.is-open{ opacity: 1; visibility: visible }
.fs-close{
  position: absolute; top: 24px; right: var(--pad);
  width: 56px; height: 56px;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--ink);
  display: grid; place-items: center;
  font-size: 22px;
  z-index: 2;
  transition: all .3s;
}
.fs-close:hover{ background: var(--coral); color: var(--night); border-color: var(--coral) }

.fs-nav{
  padding: 14vh var(--pad);
  display: flex; flex-direction: column; justify-content: center;
  gap: 4px;
  position: relative;
  z-index: 2;
}
.fs-nav a{
  font-family: var(--f-display);
  font-size: clamp(40px, 6.8vw, 104px);
  font-weight: 300;
  line-height: 1.02;
  color: var(--ink);
  opacity: .9;
  display: inline-flex; align-items: baseline; gap: 20px;
  transform: translateX(-40px);
  transition: color .3s, opacity .3s, transform .7s var(--ease-out);
  position: relative;
}
.fs.is-open .fs-nav a{ transform: translateX(0) }
.fs.is-open .fs-nav a:nth-child(1){ transition-delay: .15s }
.fs.is-open .fs-nav a:nth-child(2){ transition-delay: .22s }
.fs.is-open .fs-nav a:nth-child(3){ transition-delay: .29s }
.fs.is-open .fs-nav a:nth-child(4){ transition-delay: .36s }
.fs.is-open .fs-nav a:nth-child(5){ transition-delay: .43s }
.fs.is-open .fs-nav a:nth-child(6){ transition-delay: .50s }
.fs-nav a em{ color: var(--coral); font-style: italic }
.fs-nav a:hover{ color: var(--gold); opacity: 1 }
.fs-nav a .n{
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .3em;
  color: var(--ink-40); align-self: flex-start; margin-top: 20px;
  transition: color .3s;
}
.fs-nav a:hover .n{ color: var(--gold) }

.fs-aside{
  position: relative;
  overflow: hidden;
}
.fs-aside-img{
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.05);
  transition: transform 1.5s var(--ease-out);
}
.fs.is-open .fs-aside-img{ transform: scale(1) }
.fs-aside::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(125deg, rgba(11,14,26,.4), transparent 50%, rgba(226,125,96,.1));
}
.fs-quote{
  position: absolute;
  left: 40px; right: 40px; bottom: 44px;
  z-index: 2;
  color: var(--ink);
  font-family: var(--f-italic); font-style: italic;
  font-size: clamp(18px, 1.8vw, 28px);
  line-height: 1.35;
  max-width: 32ch;
}

/* ======================== GLOBAL LAYOUT =============================== */
main, .site{
  padding-left: 52px;
  position: relative;
}

/* ======================== HERO (cinematic) =========================== */
.hero{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  display: flex; align-items: flex-end;
}
.hero-stage{
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}
.hero-slide{
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 2s var(--ease);
  will-change: transform;
}
.hero-slide.is-on{ opacity: 1 }
.hero-slide::after{
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 40%, transparent 20%, rgba(11,14,26,.55) 80%),
    linear-gradient(180deg, rgba(11,14,26,.35) 0%, rgba(11,14,26,.15) 40%, rgba(11,14,26,.92) 100%);
}
.hero-parallax{
  position: absolute; inset: -8%; z-index: 0;
  will-change: transform;
}

.hero-inner{
  position: relative; z-index: 2;
  padding: 0 var(--pad) 14vh;
  max-width: var(--w); width: 100%;
  margin: 0 auto;
}
.hero-title{
  font-family: var(--f-display);
  font-weight: 200;
  font-size: clamp(84px, 17vw, 300px);
  line-height: .82;
  letter-spacing: -.035em;
  margin: 0 0 30px;
  color: var(--ink);
  text-transform: lowercase;
}
.hero-title .row{ display: block; overflow: hidden; padding-bottom: .14em; line-height: 1 }
.hero-title .row > span{ display: block; line-height: .9 }
.hero-title .row.offset{ padding-left: clamp(40px, 10vw, 180px) }
.hero-title em{
  color: var(--coral);
  font-family: var(--f-italic);
  font-style: italic;
  font-weight: 300;
}
.hero-title .outline{
  -webkit-text-stroke: 1.2px var(--gold);
  color: transparent;
}

.hero-sub{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.2vw, 32px);
  color: var(--ink);
  margin-bottom: 40px;
  max-width: 900px;
}
.hero-meta{
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px;
  margin-bottom: 34px;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-60);
}
.hero-meta .dot{
  width: 4px; height: 4px; background: var(--coral); border-radius: 50%;
}

.hero-cta{ display: flex; gap: 14px; flex-wrap: wrap }

/* Buttons */
.btn{
  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  font-weight: 500;
  padding: 20px 30px;
  border-radius: 999px;
  transition: transform .3s var(--ease-out), background .3s, color .3s, border-color .3s;
  overflow: hidden;
  isolation: isolate;
}
.btn .arr{ transition: transform .3s var(--ease-out) }
.btn:hover .arr{ transform: translateX(6px) }
.btn::before{
  content: "";
  position: absolute; inset: 0;
  background: var(--coral);
  transform: translateY(101%);
  transition: transform .5s var(--ease-out);
  z-index: -1;
}
.btn:hover::before{ transform: translateY(0) }

.btn-fill{
  background: var(--gold);
  color: var(--night);
  border: 1px solid var(--gold);
}
.btn-fill:hover{ color: var(--night) }
.btn-fill::before{ background: var(--ink) }

.btn-ghost{
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-ghost:hover{ color: var(--night); border-color: var(--coral) }

/* ======================== HERO BOTTOM BAR ============================ */
.hero-bottom{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 22px var(--pad);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 24px;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-60);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(11,14,26,.5));
}
.hb-slides{ display: flex; gap: 6px; justify-content: center }
.hb-slides button{
  width: 30px; height: 3px;
  background: var(--ink-20);
  transition: background .3s, width .3s;
  border-radius: 999px;
}
.hb-slides button.is-on{ background: var(--gold); width: 50px }
.hb-right{ text-align: right }

.scroll-cue{
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--gold);
}
.scroll-cue::after{
  content: "";
  width: 1px; height: 22px; background: var(--gold);
  animation: cue 2s var(--ease) infinite;
  transform-origin: top;
}
@keyframes cue{
  0%,100%{ transform: scaleY(.3) }
  50%{ transform: scaleY(1) }
}

/* ======================== SECTIONS ==================================== */
.section{
  max-width: var(--w);
  margin: 0 auto;
  padding: clamp(100px, 13vw, 200px) var(--pad);
  position: relative;
}
.section-head{ max-width: 820px; margin: 0 auto 70px }
.section-head.center{ text-align: center }

/* Chapter header (used between sections) */
.chapter-head{
  max-width: var(--w);
  margin: 0 auto;
  padding: clamp(60px, 8vw, 120px) var(--pad) clamp(40px, 5vw, 80px);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(80px, 120px) 1fr auto;
  gap: 40px;
  align-items: baseline;
}
.ch-num{
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(40px, 6vw, 96px);
  color: var(--coral);
  line-height: 1;
}
.ch-title{
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 74px);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0;
}
.ch-meta{
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-40);
}

/* ======================== SCROLL-SNAP CHAPTERS ======================= */
.chapters{
  position: relative;
}
.chapter-slide{
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  overflow: hidden;
}
.cs-bg{
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  z-index: 0;
  will-change: transform;
}
.cs-bg::after{
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11,14,26,.85) 0%, rgba(11,14,26,.4) 50%, transparent 100%);
}
.cs-inner{
  position: relative; z-index: 2;
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 var(--pad);
  width: 100%;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
}
.cs-inner.reverse{
  grid-template-columns: .9fr 1.1fr;
}
.cs-inner.reverse .cs-text{ order: 2; text-align: right }
.cs-inner.reverse .cs-text .lede,
.cs-inner.reverse .cs-text p{ margin-left: auto }

.cs-num{
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 24px;
  display: inline-flex; align-items: center; gap: 10px;
}
.cs-num::before{
  content: ""; width: 24px; height: 1px; background: var(--coral);
}
.cs-title{
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(46px, 7vw, 110px);
  line-height: .98;
  letter-spacing: -.02em;
  margin: 0 0 28px;
  color: var(--ink);
}
.cs-title em{ color: var(--coral) }
.cs-body{
  font-family: var(--f-italic);
  font-style: italic;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.5;
  color: var(--ink-80);
  max-width: 48ch;
  margin-bottom: 30px;
}

.cs-plate{
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.cs-plate img{
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  transition: transform 2s var(--ease-out);
}
.chapter-slide.is-in .cs-plate img{ transform: scale(1) }
.cs-plate-cap{
  position: absolute; bottom: 20px; left: 20px; z-index: 2;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink);
  padding: 8px 14px;
  background: rgba(11,14,26,.65);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* ======================== IMMERSIVE PANORAMA ========================= */
.pano{
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
  padding: clamp(80px, 9vw, 130px) 0;
}
.pano-head{
  max-width: var(--w); margin: 0 auto 40px;
  padding: 0 var(--pad);
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 24px;
}
.pano-stage{
  position: relative;
  aspect-ratio: 21/9;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}
.pano-stage img{
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.05);
  transition: transform 3s var(--ease-out);
}
.pano-hotspot{
  position: absolute;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(232,194,126,.9);
  box-shadow: 0 0 0 0 rgba(232,194,126,.5);
  cursor: pointer;
  animation: hotspot 2.4s var(--ease) infinite;
  z-index: 2;
}
@keyframes hotspot{
  0%,100%{ box-shadow: 0 0 0 0 rgba(232,194,126,.6) }
  50%    { box-shadow: 0 0 0 18px rgba(232,194,126,0) }
}
.pano-hotspot::after{
  content: attr(data-label);
  position: absolute; left: 40px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink);
  background: rgba(11,14,26,.85);
  backdrop-filter: blur(10px);
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.pano-hotspot:hover::after{ opacity: 1 }

/* ======================== FLOOR PLAN ================================== */
.floorplan-wrap{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  max-width: var(--w);
  margin: 0 auto;
  padding: clamp(80px, 9vw, 130px) var(--pad);
}
.floorplan{
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 30px;
  aspect-ratio: 1;
  overflow: hidden;
}
.floorplan svg{ width: 100%; height: 100%; }
.fp-room{
  fill: var(--bg-3);
  stroke: var(--line);
  stroke-width: 1;
  transition: fill .35s var(--ease), stroke .35s;
  cursor: none;
}
@media (pointer: coarse){ .fp-room{ cursor: pointer } }
.fp-room:hover, .fp-room.is-active{
  fill: var(--coral);
  stroke: var(--gold);
}
.fp-label{
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: .3em; text-transform: uppercase;
  fill: var(--ink);
  pointer-events: none;
  user-select: none;
}
.fp-label.label-dark{ fill: var(--night) }
.fp-axis{
  font-family: var(--f-mono); font-size: 8px;
  letter-spacing: .3em;
  fill: var(--ink-40);
  pointer-events: none;
}
.fp-compass{
  fill: var(--gold);
  font-family: var(--f-italic); font-style: italic;
  font-size: 14px;
}
.fp-line{
  stroke: var(--ink-40);
  stroke-width: .5;
  fill: none;
}

.fp-display{
  position: relative;
}
.fp-display-inner{
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.fp-view{
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity .8s var(--ease), transform 1.5s var(--ease-out);
}
.fp-view.is-on{ opacity: 1; transform: scale(1) }
.fp-info{
  position: absolute; left: 22px; right: 22px; bottom: 22px;
  z-index: 2;
  color: var(--ink);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s var(--ease) .2s, transform .6s var(--ease) .2s;
}
.fp-view.is-on ~ .fp-info,
.fp-view.is-on + .fp-info{ opacity: 1; transform: none }
.fp-info-wrap{
  position: absolute; left: 22px; right: 22px; bottom: 22px;
  z-index: 3;
}
.fp-info-block{
  opacity: 0; transform: translateY(12px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  display: none;
}
.fp-info-block.is-on{ display: block; opacity: 1; transform: none }
.fp-info-block h3{
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(28px, 2.6vw, 42px);
  margin: 0 0 8px;
  color: var(--ink);
}
.fp-info-block .meta{
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
  display: inline-block;
}
.fp-info-block p{
  color: var(--ink-80);
  font-size: 14px;
  max-width: 40ch;
}
.fp-shade::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(11,14,26,.85));
  pointer-events: none;
  z-index: 1;
}

.fp-aside-cap{
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-40);
  margin-top: 20px;
  display: inline-flex; align-items: center; gap: 12px;
}
.fp-aside-cap::before{
  content: ""; width: 28px; height: 1px; background: var(--coral);
}

/* ======================== MARQUEE ===================================== */
.marq{
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 26px 0;
  background: var(--bg-2);
}
.marq-t{
  display: inline-flex;
  gap: 60px;
  white-space: nowrap;
  animation: marq 42s linear infinite;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 48px);
  color: var(--ink-80);
  padding-left: 60px;
}
.marq-t i{
  font-style: normal;
  color: var(--coral);
  margin: 0 4px;
  font-family: var(--f-display);
}
@keyframes marq{
  from{ transform: translateX(0) }
  to  { transform: translateX(-50%) }
}

/* ======================== SPLIT ======================================= */
.split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.split.reverse .split-media{ order: 2 }
.split-media{ position: relative; overflow: hidden }
.split-media img{
  width: 100%; height: clamp(420px, 70vh, 760px); object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.split-media:hover img{ transform: scale(1.04) }
.cap{
  display: block; margin-top: 14px;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink-40);
}

/* ======================== HORIZONTAL CINEMA TOUR ===================== */
.hcine{
  position: relative;
  height: 400vh;
}
.hcine-stick{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.hcine-track{
  display: flex;
  height: 100%;
  align-items: center;
  padding: 0 10vw;
  gap: clamp(40px, 5vw, 80px);
  transform: translateX(var(--tour-x, 0));
  will-change: transform;
}
.hcine-slide{
  flex: 0 0 auto;
  width: clamp(320px, 35vw, 520px);
  height: 75vh;
  position: relative;
  overflow: hidden;
}
.hcine-slide img{
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.1);
  transition: transform 1s var(--ease-out);
}
.hcine-slide.is-in-view img{ transform: scale(1) }
.hcine-slide::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(11,14,26,.8));
}
.hcine-slide-info{
  position: absolute; left: 24px; right: 24px; bottom: 24px;
  z-index: 2;
  color: var(--ink);
}
.hcine-slide-num{
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.hcine-slide-info h3{
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(24px, 2.2vw, 36px);
  margin: 0 0 8px;
}
.hcine-slide-info p{ font-size: 13px; max-width: 36ch }

.hcine-title{
  position: absolute; top: clamp(80px, 10vh, 130px);
  left: var(--pad); right: var(--pad);
  z-index: 3;
  display: flex; justify-content: space-between; align-items: flex-start;
  pointer-events: none;
  mix-blend-mode: difference;
}
.hcine-title h2{
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(40px, 5vw, 76px);
  color: var(--ink);
  line-height: 1; margin: 0;
  letter-spacing: -.02em;
}
.hcine-title h2 em{ color: var(--gold) }
.hcine-title .prog{
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold);
}

/* ======================== TIME-OF-DAY (experience) =================== */
.tod{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  transition: filter 1.5s var(--ease);
}
.tod[data-time="dawn"]{ filter: hue-rotate(-20deg) saturate(1.1) brightness(.9) }
.tod[data-time="noon"]{ filter: none }
.tod[data-time="dusk"]{ filter: hue-rotate(20deg) saturate(1.2) brightness(.85) contrast(1.05) }
.tod[data-time="night"]{ filter: hue-rotate(200deg) saturate(.7) brightness(.5) }

/* ======================== BEFORE / AFTER ============================= */
.ba{
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--bg-2);
  cursor: none;
  user-select: none;
}
.ba-img{
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  width: 100%; height: 100%;
}
.ba-img.after{
  clip-path: inset(0 0 0 var(--ba, 50%));
}
.ba-handle{
  position: absolute; top: 0; bottom: 0;
  left: var(--ba, 50%);
  width: 2px;
  background: var(--gold);
  box-shadow: 0 0 20px rgba(232,194,126,.6);
  transform: translateX(-50%);
  z-index: 3;
}
.ba-handle::before{
  content: "";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: rgba(11,14,26,.6);
  backdrop-filter: blur(8px);
}
.ba-handle::after{
  content: "⇄";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  color: var(--gold);
  font-size: 20px;
}
.ba-label{
  position: absolute; top: 20px; z-index: 2;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink);
  padding: 8px 16px;
  background: rgba(11,14,26,.6);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.ba-label.l{ left: 20px }
.ba-label.r{ right: 20px }

/* ======================== MATERIAL CARDS (flip) ====================== */
.mats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.mat{
  aspect-ratio: 3/4;
  perspective: 1200px;
  position: relative;
}
.mat-face{
  position: absolute; inset: 0;
  backface-visibility: hidden;
  transition: transform .8s var(--ease-out);
  overflow: hidden;
}
.mat-front{
  background: var(--bg-2);
  padding: 32px 28px;
  display: flex; flex-direction: column; justify-content: space-between;
  border: 1px solid var(--line);
}
.mat-front-num{
  font-family: var(--f-display); font-style: italic;
  font-size: 22px;
  color: var(--coral);
  margin-bottom: 18px;
}
.mat-front h3{
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(32px, 3.2vw, 48px);
  margin: 0 0 12px;
  line-height: 1;
}
.mat-front-flip{
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold);
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: auto;
}
.mat-back{
  background: var(--coral);
  color: var(--night);
  padding: 32px 28px;
  transform: rotateY(180deg);
  display: flex; flex-direction: column; justify-content: center;
}
.mat-back h4{
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 22px;
  margin: 0 0 14px;
}
.mat-back p{
  color: rgba(5,7,16,.75);
  font-size: 13px;
  line-height: 1.55;
}
.mat:hover .mat-front{ transform: rotateY(-180deg) }
.mat:hover .mat-back{ transform: rotateY(0) }
.mat-photo{
  overflow: hidden;
  background-size: cover; background-position: center;
  position: relative;
}
.mat-photo::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(11,14,26,.75));
}
.mat-photo-cap{
  position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 2;
  font-family: var(--f-italic); font-style: italic;
  font-size: 15px;
  color: var(--ink);
}

/* ======================== STACK PORTFOLIO ============================ */
.pf{
  display: flex; flex-direction: column;
  gap: 8px;
}
.pf-card{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 4vw, 70px);
  align-items: center;
  padding: clamp(60px, 7vw, 110px) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: padding .4s var(--ease);
}
.pf-card:hover{ background: linear-gradient(90deg, transparent, rgba(232,194,126,.04), transparent) }
.pf-card.reverse .pf-media{ order: 2 }
.pf-media{
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/3;
}
.pf-media img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease-out);
  filter: saturate(.85);
}
.pf-card:hover .pf-media img{ transform: scale(1.04); filter: saturate(1.1) }
.pf-meta{
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 16px;
}
.pf-card h3{
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(40px, 4.5vw, 72px);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 0 0 20px;
}
.pf-card p{ color: var(--ink-80); max-width: 48ch; margin-bottom: 20px }
.pf-idx{
  position: absolute;
  top: 40px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(56px, 8vw, 120px);
  color: rgba(232,194,126,.08);
  pointer-events: none;
  line-height: 1;
  transition: color .4s;
}
.pf-card:nth-child(odd) .pf-idx{ right: 20px }
.pf-card:nth-child(even) .pf-idx{ left: 20px }
.pf-card:hover .pf-idx{ color: rgba(232,194,126,.18) }

/* ======================== IMMERSIVE GALLERY ========================== */
.gal-hero{
  padding: 14vh var(--pad) 40px;
  max-width: var(--w); margin: 0 auto;
}
.gal-hero .display{ font-size: clamp(64px, 11vw, 180px); margin-bottom: 24px }
.gal-hero-sub{
  max-width: 58ch; color: var(--ink-80);
  font-family: var(--f-italic); font-style: italic;
  font-size: clamp(17px, 1.3vw, 22px);
  margin-bottom: 36px;
}
.gal-tabs{ display: flex; flex-wrap: wrap; gap: 8px }
.gal-tab{
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  padding: 12px 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-80);
  transition: all .25s;
}
.gal-tab:hover{ color: var(--coral); border-color: var(--coral) }
.gal-tab.is-on{ background: var(--coral); color: var(--night); border-color: var(--coral) }

.gal-grid{
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 var(--pad) 60px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: dense;
  gap: 10px;
}
.gal-item{
  overflow: hidden;
  position: relative;
  background: var(--bg-2);
  cursor: none;
  grid-column: span 2;
  aspect-ratio: 1;
  transition: transform .4s var(--ease);
}
@media (pointer: coarse){ .gal-item{ cursor: pointer } }
.gal-item.wide{ grid-column: span 3 }
.gal-item.tall{ grid-column: span 2; aspect-ratio: 2/3 }
.gal-item.big{ grid-column: span 3; aspect-ratio: 3/2 }
.gal-item img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease-out), filter .4s;
}
.gal-item:hover img{ transform: scale(1.06); filter: brightness(1.08) saturate(1.12) }
.gal-item::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(11,14,26,.5));
  opacity: 0;
  transition: opacity .3s;
}
.gal-item:hover::after{ opacity: 1 }
.gal-item.is-hidden{ display: none }

/* Immersive viewer */
.viewer{
  position: fixed; inset: 0;
  background: var(--night);
  z-index: 400;
  display: none;
  flex-direction: column;
}
.viewer.is-open{ display: flex }
.viewer-stage{
  flex: 1;
  position: relative;
  display: grid; place-items: center;
  overflow: hidden;
}
.viewer-img{
  max-width: 94vw;
  max-height: 80vh;
  object-fit: contain;
  animation: viewerIn .6s var(--ease-out);
  box-shadow: 0 40px 100px rgba(0,0,0,.7);
}
@keyframes viewerIn{
  from{ opacity: 0; transform: scale(.97) }
  to  { opacity: 1; transform: scale(1) }
}
.viewer-close{
  position: absolute; top: 26px; right: 26px;
  width: 60px; height: 60px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  font-size: 26px;
  display: grid; place-items: center;
  z-index: 10;
  transition: all .3s;
}
.viewer-close:hover{ background: var(--coral); color: var(--night); border-color: var(--coral) }
.viewer-prev, .viewer-next{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 24px;
  display: grid; place-items: center;
  transition: all .3s;
  z-index: 10;
}
.viewer-prev:hover, .viewer-next:hover{ background: var(--gold); color: var(--night); border-color: var(--gold) }
.viewer-prev{ left: 26px }
.viewer-next{ right: 26px }

.viewer-meta{
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 24px var(--pad) 20px;
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 30px;
  align-items: center;
  color: var(--ink-60);
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(5,7,16,.8));
}
.viewer-counter{ color: var(--gold); text-align: center }
.viewer-cap{
  text-align: center;
  color: var(--ink);
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0; text-transform: none;
  font-weight: 300;
}
.viewer-strip{
  display: flex; gap: 6px; align-items: center; justify-content: flex-end;
  overflow-x: auto;
  scrollbar-width: none;
}
.viewer-strip::-webkit-scrollbar{ display: none }
.viewer-strip img{
  width: 54px; height: 54px; object-fit: cover;
  opacity: .4;
  cursor: none;
  transition: opacity .25s, transform .25s;
  flex: 0 0 auto;
}
@media (pointer: coarse){ .viewer-strip img{ cursor: pointer } }
.viewer-strip img.is-on{ opacity: 1; transform: scale(1.06); outline: 2px solid var(--gold) }
.viewer-strip img:hover{ opacity: 1 }

/* ======================== CONTACT ===================================== */
.c-hero{
  position: relative;
  min-height: 80vh;
  display: flex; align-items: flex-end;
  padding: 0 var(--pad);
  overflow: hidden;
}
.c-hero-bg{
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.c-hero-bg::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,14,26,.3) 0%, rgba(11,14,26,.1) 40%, rgba(11,14,26,.92));
}
.c-hero-inner{
  position: relative; z-index: 2;
  max-width: var(--w);
  margin: 0 auto;
  padding-bottom: 10vh;
  width: 100%;
}
.c-hero h1{
  font-size: clamp(64px, 10vw, 180px);
  line-height: .94;
}
.c-hero-sub{
  font-family: var(--f-italic); font-style: italic;
  font-size: clamp(20px, 2vw, 30px);
  color: var(--ink);
  max-width: 44ch;
  margin-top: 22px;
}

.c-direct{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.c-card{
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 44px 34px;
  background: var(--bg);
  gap: 20px;
  transition: background .35s;
  min-height: 220px;
  position: relative;
  overflow: hidden;
}
.c-card:hover{ background: var(--bg-2) }
.c-card:hover .c-line{ color: var(--coral) }
.c-card::before{
  content: "";
  position: absolute; bottom: 0; left: 0;
  width: 0; height: 2px;
  background: var(--coral);
  transition: width .5s var(--ease);
}
.c-card:hover::before{ width: 100% }
.c-card-head{
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-40);
}
.c-line{
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(22px, 2vw, 32px);
  color: var(--ink);
  transition: color .3s;
  line-height: 1.1;
}
.c-line em{ color: var(--coral) }
.c-card-go{
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold);
  display: inline-flex; gap: 10px;
}

/* Form */
.note-wrap{
  max-width: var(--w); margin: 0 auto;
  padding: clamp(80px, 9vw, 130px) var(--pad);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 110px);
}
.note-left h2{ margin-bottom: 22px; font-size: clamp(36px, 4.4vw, 60px) }
.note-img{ margin-top: 36px; aspect-ratio: 4/5; overflow: hidden }
.note-img img{ width: 100%; height: 100%; object-fit: cover }

.note-form{
  display: flex; flex-direction: column; gap: 28px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: clamp(30px, 4vw, 56px);
}
.field{ display: flex; flex-direction: column; gap: 8px }
.field label{
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-60);
}
.field input, .field select, .field textarea{
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  outline: none;
  transition: border-color .25s;
  border-radius: 0;
  font-size: 16px;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-bottom-color: var(--coral);
}
.field textarea{ resize: vertical; min-height: 120px }
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 28px }

.chips{ border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px }
.chips legend{
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-60); padding: 0; width: 100%; margin-bottom: 12px;
}
.chip{
  display: inline-flex; align-items: center;
  padding: 10px 18px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px;
  position: relative;
  transition: all .2s;
}
.chip input{ position: absolute; opacity: 0; pointer-events: none }
.chip:has(input:checked){ background: var(--coral); color: var(--night); border-color: var(--coral) }

.submit-row{ display: flex; gap: 22px; align-items: center; flex-wrap: wrap }
.form-ok{
  background: rgba(232,194,126,.12);
  border-left: 2px solid var(--gold);
  padding: 14px 20px;
  color: var(--gold);
  font-size: 14px;
}

/* ======================== FOOTER ====================================== */
.foot{
  border-top: 1px solid var(--line);
  padding: 100px var(--pad) 30px;
}
.foot-inner{
  max-width: var(--w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}
.foot h4{
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--coral);
  margin: 0 0 16px;
}
.foot a{
  display: block;
  color: var(--ink-60);
  font-size: 13px; padding: 3px 0;
  transition: color .2s;
}
.foot a:hover{ color: var(--gold) }
.foot-mark{
  font-family: var(--f-display);
  font-style: italic;
  font-size: 42px;
  color: var(--gold);
  margin: 0 0 18px;
  font-weight: 300;
}
.foot-mark em{ color: var(--coral) }
.foot-bottom{
  max-width: var(--w); margin: 80px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-40);
}

/* ======================== BLEED ======================================= */
.bleed{
  position: relative;
  min-height: 95vh;
  display: grid; place-items: center;
  padding: 0 var(--pad);
  text-align: center;
  overflow: hidden;
}
.bleed-bg{
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  will-change: transform;
}
.bleed-bg::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,14,26,.45), rgba(11,14,26,.25) 40%, rgba(11,14,26,.8));
}
.bleed-inner{ position: relative; z-index: 2; max-width: 1000px }
.bleed h2{
  font-family: var(--f-display);
  font-weight: 200;
  font-size: clamp(46px, 7vw, 110px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
}
.bleed em{ color: var(--gold) }

/* ======================== RESPONSIVE ================================== */
@media (max-width: 1100px){
  .fs{ grid-template-columns: 1fr }
  .fs-aside{ display: none }
  .cs-inner, .cs-inner.reverse{ grid-template-columns: 1fr }
  .cs-inner.reverse .cs-text{ order: 0; text-align: left }
  .cs-inner.reverse .cs-text .lede, .cs-inner.reverse .cs-text p{ margin-left: 0 }
  .split, .split.reverse{ grid-template-columns: 1fr; gap: 30px }
  .split.reverse .split-media{ order: 0 }
  .mats{ grid-template-columns: repeat(2, 1fr) }
  .floorplan-wrap{ grid-template-columns: 1fr }
  .pf-card, .pf-card.reverse{ grid-template-columns: 1fr; gap: 20px }
  .pf-card.reverse .pf-media{ order: 0 }
  .c-direct{ grid-template-columns: 1fr }
  .note-wrap{ grid-template-columns: 1fr }
  .gal-grid{ grid-template-columns: repeat(4, 1fr) }
  .gal-item, .gal-item.wide, .gal-item.big{ grid-column: span 2 }
  .foot-inner{ grid-template-columns: 2fr 1fr 1fr }
  .foot-inner > div:last-child{ grid-column: span 3 }
  .chapter-head{ grid-template-columns: 1fr; gap: 14px }
}
@media (max-width: 720px){
  :root{ --side: 0 }
  .rail{ display: none }
  .top{ left: 0 }
  main, .site{ padding-left: 0 }
  .hero-title{ font-size: clamp(60px, 18vw, 120px) }
  .gal-grid{ grid-template-columns: 1fr 1fr }
  .gal-item, .gal-item.wide, .gal-item.big, .gal-item.tall{ grid-column: span 1; aspect-ratio: 1 }
  .mats{ grid-template-columns: 1fr }
  .field-row{ grid-template-columns: 1fr }
  .foot-inner{ grid-template-columns: 1fr 1fr }
  .foot-inner > div:first-child, .foot-inner > div:last-child{ grid-column: span 2 }
  .hero-bottom{ grid-template-columns: 1fr; gap: 10px }
  .hero-bottom .hb-right{ text-align: left }
  .hcine-slide{ width: 85vw }
}