/* ============================================================
   AVENIR DEVELOPMENT GROUP — institutional-grade home
   Watercolor + rendering language · day → dusk → night
   Hand-built. No framework. Motion per design-engineering craft.
   ============================================================ */

/* ---------- RESET ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
img, svg, video { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --paper:   #F6EEDD;
  --paper-2: #EFE2C9;
  --sand:    #E3CDA4;
  --dusk:    #5A4630;
  --twilight:#241A18;
  --night:   #0C0907;

  --ink:       #1A140C;
  --ink-soft:  #4C4030;
  --ink-faint: #7E6F58;
  --paper-white:#FBF6EC;
  --warm-white:#F7F1E6;
  --warm-muted:#D7CBB4;
  --warm-dim:  #9A8C76;

  --gold:     #CF9A41;
  --gold-soft:#EBC069;
  --sienna:   #C06A38;
  --ember:    #E89A4A;

  --display: 'Fraunces', Georgia, serif;
  --ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --gutter: clamp(22px, 5vw, 100px);
  --maxw: 1440px;
  --section-y: clamp(54px, 8vh, 104px);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io:  cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ============================================================
   BASE
   ============================================================ */
html { scroll-behavior: smooth; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--ui);
  color: var(--ink);
  background: var(--night);
  line-height: 1.6; font-weight: 400;
  overflow-x: hidden; letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body.has-cursor { cursor: none; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.0; letter-spacing: -0.02em; font-optical-sizing: auto; }
em { font-style: italic; }
::selection { background: rgba(207,154,65,0.3); color: #211806; }

/* ============================================================
   JOURNEY — fixed bg, extended gradual day→night fade
   ============================================================ */
.journey { position: fixed; inset: 0; z-index: -2; background: var(--paper); }
.journey__layer { position: absolute; inset: 0; transition: opacity 0.5s linear; }
.j-day   { background: radial-gradient(125% 95% at 50% 4%, #FEF8EA 0%, var(--paper) 48%, var(--paper-2) 100%); opacity: 1; }
.j-sand  { background: radial-gradient(125% 100% at 50% 16%, #F4E2BC 0%, var(--sand) 55%, #CDAC7C 100%); opacity: 0; }
.j-dusk  { background: linear-gradient(180deg, #8A6638 0%, var(--dusk) 46%, #33251A 100%); opacity: 0; }
.j-night { background: radial-gradient(130% 85% at 50% 0%, #2A1D1A 0%, var(--twilight) 38%, var(--night) 100%); opacity: 0; }

/* ============================================================
   TEXTURE
   ============================================================ */
.paper-grain, .film-grain { position: fixed; inset: -50%; width: 200%; height: 200%; z-index: 9990; pointer-events: none; }
.paper-grain { opacity: 0.5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.016' numOctaves='2' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.6  0 0 0 0 0.52  0 0 0 0 0.4  0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 460px 460px; }
.film-grain { opacity: 0; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: no-preference) { .film-grain { animation: grain 0.5s steps(2) infinite; } }
@keyframes grain { 0%{transform:translate(0,0)} 50%{transform:translate(-1.4%,1%)} 100%{transform:translate(1%,-1.2%)} }
.vignette { position: fixed; inset: 0; z-index: 9989; pointer-events: none; box-shadow: inset 0 0 200px 30px rgba(30,18,8,0.16); transition: box-shadow 0.5s linear; }
.bloom-wipe { position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 55%, rgba(235,192,105,0.5), rgba(192,106,56,0.26) 38%, transparent 70%); }

/* ============================================================
   CURSOR
   ============================================================ */
.cur-dot, .cur-ring { position: fixed; top: 0; left: 0; z-index: 9995; pointer-events: none; border-radius: 50%; transform: translate(-50%,-50%); opacity: 0; }
.cur-dot { width: 7px; height: 7px; background: var(--gold); }
.cur-ring { width: 40px; height: 40px; border: 1px solid rgba(160,128,72,0.6); transition: width .3s var(--ease-out), height .3s var(--ease-out), background .3s, border-color .3s; }
.cur-ring.hover { width: 64px; height: 64px; background: rgba(207,154,65,0.14); border-color: transparent; }

/* ============================================================
   PRELOADER
   ============================================================ */
.pre { position: fixed; inset: 0; z-index: 10000; background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; }
.pre__bloom { position: absolute; width: 42vmin; height: 42vmin; border-radius: 50%; background: radial-gradient(circle, rgba(207,154,65,0.3), rgba(192,106,56,0.12) 45%, transparent 70%); filter: blur(8px); transform: scale(0.85); opacity: 0; }
.pre__mark { width: clamp(72px, 11vw, 116px); position: relative; z-index: 2; }
.pre__mark svg { width: 100%; height: auto; overflow: visible; }
.pre__mark path, .pre__mark line { stroke: var(--ink); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pre__word { font-family: var(--display); font-size: 1rem; letter-spacing: 0.55em; text-transform: uppercase; color: var(--ink-soft); padding-left: 0.55em; position: relative; z-index: 2; opacity: 0; }
.pre__pct { position: absolute; bottom: 32px; right: 34px; font-size: 0.7rem; letter-spacing: 0.2em; color: var(--ink-faint); }
.pre__skip { position: absolute; bottom: 32px; left: 34px; font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); background: none; border: none; cursor: pointer; transition: color .2s var(--ease-out); }
.pre__skip:hover { color: var(--gold); }
.curtain { position: fixed; inset: 0; z-index: 9999; pointer-events: none; background: var(--paper); clip-path: circle(150% at 50% 50%); }

/* ============================================================
   NAV
   ============================================================ */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; padding: 22px var(--gutter); transition: padding .45s var(--ease-out), background .45s var(--ease-out), border-color .45s; border-bottom: 1px solid transparent; color: var(--ink); }
.nav.scrolled { padding-block: 13px; background: rgba(246,238,221,0.8); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border-bottom: 1px solid rgba(26,20,12,0.1); }
.nav.is-dark { color: var(--warm-white); }
.nav.is-dark.scrolled { background: rgba(12,9,7,0.62); border-bottom-color: rgba(247,241,230,0.1); }
.nav__brand { display: flex; align-items: center; gap: 12px; }
.nav__brand svg { width: 28px; height: 28px; overflow: visible; }
.nav__brand svg path, .nav__brand svg line { stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nav__word { font-family: var(--display); font-size: 1.3rem; letter-spacing: 0.18em; text-transform: uppercase; }
.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__links a:not(.btn) { font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; position: relative; font-weight: 500; opacity: 0.9; transition: opacity .25s var(--ease-out); }
.nav__links a:not(.btn)::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-out); }
.nav__links a:not(.btn):hover, .nav__links a.active { opacity: 1; }
.nav__links a:not(.btn):hover::after, .nav__links a.active::after { transform: scaleX(1); transform-origin: left; }
.nav__phone { opacity: 0.62 !important; }
.nav__toggle { display: none; width: 42px; height: 42px; background: none; border: none; cursor: pointer; z-index: 1002; }
.nav__toggle span { display: block; width: 24px; height: 1.6px; background: currentColor; margin: 5px auto; transition: transform .4s var(--ease-out), opacity .25s; }
.nav__toggle.open span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav__toggle.open span:nth-child(2) { opacity: 0; }
.nav__toggle.open span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }
@media (max-width: 940px) {
  .nav__links { position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 26px; background: var(--night); color: var(--warm-white); transform: translateY(-100%); transition: transform .55s var(--ease-drawer); pointer-events: none; }
  .nav__links.open { transform: translateY(0); pointer-events: auto; }
  .nav__links a:not(.btn) { font-size: 1.1rem; opacity: 1; }
  .nav__toggle { display: block; }
}

/* ============================================================
   PRIMITIVES
   ============================================================ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.chapter { position: relative; padding-block: var(--section-y); }
.chapter--tight { padding-block: clamp(36px, 5vh, 70px); }

.kicker { display: inline-flex; align-items: center; gap: 13px; font-family: var(--ui); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
.kicker::before { content: ''; width: 32px; height: 1px; background: currentColor; opacity: 0.8; }
.kicker--plain::before, .kicker--center::before { display: none; }
.kicker--center { justify-content: center; }
.idx { font-family: var(--ui); font-size: 0.66rem; letter-spacing: 0.3em; color: var(--ink-faint); margin-bottom: 14px; }

.display { font-size: clamp(2.8rem, 8vw, 7rem); line-height: 0.96; }
.h-lg { font-size: clamp(2rem, 4.4vw, 3.8rem); }
.h-md { font-size: clamp(1.5rem, 2.6vw, 2.3rem); }
.lede { font-size: clamp(1.04rem, 1.2vw, 1.2rem); line-height: 1.7; max-width: 56ch; color: var(--ink-soft); }
.center { text-align: center; }
.center .kicker, .center .lede { margin-inline: auto; }

.on-dark { color: var(--warm-white); }
.on-dark .lede { color: var(--warm-muted); }
.on-dark .idx { color: var(--warm-dim); }
html:not(.js) .on-dark, html.no-gsap .on-dark { background: var(--night); }
html:not(.js) .j-night, html.no-gsap .j-night { opacity: 1; }

.line { display: block; overflow: hidden; }
.line > span { display: block; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 15px 32px; font-family: var(--ui); font-size: 0.73rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; border-radius: 2px; cursor: pointer; border: 1px solid transparent; overflow: hidden;
  transition: transform .16s var(--ease-out), color .35s var(--ease-out), border-color .35s, background .35s; }
.btn:active { transform: scale(0.97); }
.btn span { position: relative; z-index: 2; }
.btn--solid { background: var(--ink); color: var(--paper); }
.on-dark .btn--solid, .sb-dark .btn--solid { background: var(--gold); color: #20160a; }
.btn--solid::after { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--gold); transform: translateY(101%); transition: transform .4s var(--ease-out); }
.btn--solid:hover { color: #20160a; }
.btn--solid:hover::after { transform: translateY(0); }
.btn--line { border-color: rgba(26,20,12,0.3); color: var(--ink); }
.on-dark .btn--line, .nav.is-dark .btn--line, .footer .btn--line, .sb-dark .btn--line { border-color: rgba(247,241,230,0.36); color: var(--warm-white); }
.btn--line::after { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out); }
.btn--line:hover { color: #20160a; border-color: var(--gold); }
.btn--line:hover::after { transform: scaleX(1); }
.btn--ghost { padding: 14px 6px; color: var(--gold); }
.btn--ghost .ar { transition: transform .35s var(--ease-out); }
.btn--ghost:hover .ar { transform: translateX(6px); }
.btn-row { display: flex; gap: 13px; flex-wrap: wrap; align-items: center; }
.center .btn-row { justify-content: center; }
.ul { position: relative; }
.ul::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-out); }
.ul:hover::after { transform: scaleX(1); transform-origin: left; }

/* ============================================================
   SHADOW BOXES
   ============================================================ */
.sb { position: relative; border-radius: 5px; padding: clamp(28px, 3.2vw, 52px); max-width: 600px; box-shadow: 0 44px 110px -45px rgba(0,0,0,0.7); }
.sb-dark { background: linear-gradient(135deg, rgba(8,6,5,0.82), rgba(8,6,5,0.62)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(247,241,230,0.14); color: var(--warm-white); }
.sb-dark .lede { color: #E7DDC9; }
.sb-dark h1, .sb-dark h2 { color: var(--paper-white); }
.sb-dark h1 em, .sb-dark h2 em { color: var(--gold-soft); }
.sb-dark .kicker { color: var(--gold-soft); }
.sb-light { background: linear-gradient(135deg, rgba(250,244,231,0.94), rgba(243,231,206,0.84)); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); border: 1px solid rgba(26,20,12,0.16); color: var(--ink); box-shadow: 0 34px 90px -44px rgba(40,26,10,0.55); }
.sb-light .lede { color: var(--ink-soft); }
.sb-light h1, .sb-light h2 { color: var(--ink); }
.sb-light h1 em, .sb-light h2 em { color: var(--sienna); }
.sb-light .kicker { color: #A06A1E; }
.sb--center { max-width: 760px; text-align: center; margin-inline: auto; }
.sb--center .kicker { justify-content: center; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-block: clamp(96px, 14vh, 150px) clamp(56px, 9vh, 110px); overflow: hidden; }
.hero__art { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__art img { width: 100%; height: 112%; object-fit: cover; transform: scale(1.04); will-change: transform; }
.hero__scrim { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(110deg, rgba(246,238,221,0.55) 0%, rgba(246,238,221,0.16) 44%, transparent 70%), linear-gradient(0deg, rgba(246,238,221,0.5), transparent 40%); }
.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero .sb { max-width: 660px; }
.hero h1 { font-size: clamp(2.6rem, 7vw, 6rem); margin-block: 6px 0; }
.hero h1 .line:last-child { margin-top: -0.04em; }
.hero__sub { margin-top: 22px; max-width: 48ch; }
.hero__row { margin-top: 32px; }
.hero__scroll { position: absolute; left: var(--gutter); bottom: 26px; z-index: 2; font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-soft); display: flex; align-items: center; gap: 12px; }
.hero__scroll::after { content: ''; width: 46px; height: 1px; background: currentColor; opacity: 0.5; }
@media (prefers-reduced-motion: no-preference) { .hero__scroll span { animation: pulse 2.4s ease-in-out infinite; } }
@keyframes pulse { 0%,100%{opacity:.5} 50%{opacity:1} }

/* ============================================================
   FULL-BLEED BANDS
   ============================================================ */
.band { position: relative; min-height: 92svh; display: flex; align-items: center; overflow: hidden; }
.band__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.band__media img, .band__media video { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.band__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.band__scrim--l { background: linear-gradient(100deg, rgba(8,6,5,0.6) 0%, rgba(8,6,5,0.2) 46%, transparent 72%); }
.band__scrim--r { background: linear-gradient(260deg, rgba(8,6,5,0.6) 0%, rgba(8,6,5,0.2) 46%, transparent 72%); }
.band__scrim--c { background: radial-gradient(120% 100% at 50% 46%, transparent 26%, rgba(8,6,5,0.5)); }
.band__inner { position: relative; z-index: 2; width: 100%; }
.band__inner--r { display: flex; justify-content: flex-end; }
.band__inner--c { display: flex; justify-content: center; }
.band__tag { position: absolute; z-index: 2; right: var(--gutter); bottom: 24px; font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(247,241,230,0.72); }

.reveal-clip { clip-path: inset(0 0 0 0); }
html.js .reveal-clip { clip-path: inset(0 0 100% 0); }

/* ============================================================
   TOUCH POINTS
   ============================================================ */
.touch__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.touch__item { padding: 26px 0 0; border-top: 1px solid rgba(26,20,12,0.2); }
.on-dark .touch__item { border-top-color: rgba(247,241,230,0.16); }
.touch__ico { width: 28px; height: 28px; stroke: var(--gold); stroke-width: 1.4; fill: none; margin-bottom: 18px; }
.touch__item h4 { font-size: 1.18rem; margin-bottom: 6px; }
.touch__item p { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.6; }
.on-dark .touch__item p { color: var(--warm-muted); }

/* ============================================================
   CAPABILITIES
   ============================================================ */
.caps__head { margin-bottom: clamp(32px, 5vh, 64px); }
.caps__list { border-top: 1px solid rgba(26,20,12,0.18); }
.on-dark .caps__list { border-top-color: rgba(247,241,230,0.18); }
.cap { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px; padding: clamp(18px, 2.8vh, 34px) 4px; border-bottom: 1px solid rgba(26,20,12,0.18); transition: padding-left .45s var(--ease-out); }
.on-dark .cap { border-bottom-color: rgba(247,241,230,0.18); }
.cap__no { font-family: var(--ui); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--ink-faint); }
.on-dark .cap__no { color: var(--warm-dim); }
.cap__name { font-family: var(--display); font-size: clamp(1.6rem, 3.6vw, 3rem); line-height: 1; transition: color .3s, transform .45s var(--ease-out); }
.cap__name em { color: var(--gold); }
.cap__meta { font-size: 0.74rem; letter-spacing: 0.03em; color: var(--ink-soft); max-width: 32ch; text-align: right; }
.on-dark .cap__meta { color: var(--warm-muted); }
.cap:hover { padding-left: 20px; }
.cap:hover .cap__name { color: var(--gold); }
.cap__peek { position: fixed; top: 0; left: 0; width: 300px; height: 200px; z-index: 60; pointer-events: none; border-radius: 4px; overflow: hidden; opacity: 0; transform: translate(-50%,-50%) scale(0.92); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); box-shadow: 0 30px 80px -30px rgba(20,12,4,0.6); }
.cap__peek img { width: 100%; height: 100%; object-fit: cover; }
.cap__peek.show { opacity: 1; }

/* ============================================================
   THE PLAN
   ============================================================ */
.plan { position: relative; height: 100vh; overflow: hidden; }
.plan__stage { position: absolute; inset: 0; display: grid; place-items: center; }
.plan__art { position: relative; width: min(94vw, 1500px); }
.plan__art img { width: 100%; height: auto; border-radius: 3px; box-shadow: 0 40px 120px -44px rgba(40,26,10,0.5); }
.plan__cap { position: absolute; left: var(--gutter); bottom: clamp(26px, 6vh, 66px); z-index: 3; }
.plan__cap .sb { max-width: 420px; }
.plan__cap p { font-family: var(--display); font-style: italic; font-size: clamp(1.1rem, 1.6vw, 1.4rem); }
.anno { position: absolute; z-index: 4; }
.anno__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(207,154,65,0.5); }
.anno__label { position: absolute; left: 18px; top: -7px; white-space: nowrap; font-family: var(--ui); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); background: rgba(250,244,231,0.85); padding: 3px 9px; border: 1px solid rgba(26,20,12,0.14); border-radius: 2px; }
@media (prefers-reduced-motion: no-preference) { .anno__dot { animation: ping 2.6s ease-out infinite; } }
@keyframes ping { 0%{box-shadow:0 0 0 0 rgba(207,154,65,0.45)} 70%,100%{box-shadow:0 0 0 14px rgba(207,154,65,0)} }

/* ============================================================
   STATS
   ============================================================ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; padding-block: clamp(44px, 7vh, 80px); border-block: 1px solid rgba(247,241,230,0.16); }
.stat { text-align: center; }
.stat__n { font-family: var(--display); font-size: clamp(2.6rem, 5.2vw, 4rem); line-height: 1; color: var(--paper-white); }
.stat__n em { color: var(--gold); font-style: normal; }
.stat__l { margin-top: 10px; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--warm-dim); }

/* ============================================================
   FEATURE / CRAFT
   ============================================================ */
.feature { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px, 4.5vw, 72px); align-items: center; }
.feature--flip .feature__media { order: -1; }
.feature__media { position: relative; border-radius: 4px; overflow: hidden; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; will-change: transform; }
.craft__quote { font-family: var(--display); font-style: italic; font-size: clamp(1.1rem, 1.6vw, 1.4rem); color: var(--gold-soft); margin-top: 22px; padding-left: 20px; border-left: 2px solid var(--gold); }

/* ============================================================
   GALLERY
   ============================================================ */
.gal { position: relative; height: 100vh; overflow: hidden; }
.gal__track { position: absolute; top: 0; left: 0; height: 100%; display: flex; align-items: center; gap: clamp(18px, 2.6vw, 42px); padding-inline: var(--gutter); will-change: transform; }
.gal__head { flex: 0 0 auto; width: min(72vw, 440px); }
.gal__item { position: relative; flex: 0 0 auto; height: 66vh; border-radius: 4px; overflow: hidden; }
.gal__item img { height: 100%; width: auto; object-fit: cover; }
.gal__cap { position: absolute; left: 18px; bottom: 16px; }
.gal__cap .t { font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-soft); }
.gal__cap .n { font-family: var(--display); font-size: 1.15rem; color: var(--warm-white); margin-top: 3px; }

/* ============================================================
   LAST LIGHT
   ============================================================ */
.voices { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; }
.voices__bg { position: absolute; inset: 0; z-index: -1; }
.voices__bg img { width: 100%; height: 112%; object-fit: cover; }
.voices__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,6,5,0.6) 0%, rgba(8,6,5,0.34) 45%, rgba(8,6,5,0.82) 100%); }
.voices__inner { position: relative; text-align: center; }
.voices blockquote { font-family: var(--display); font-style: italic; font-size: clamp(1.6rem, 3.4vw, 3rem); line-height: 1.3; color: var(--paper-white); max-width: 22ch; margin: 0 auto; text-shadow: 0 2px 30px rgba(0,0,0,0.5); }
.voices .who { margin-top: 24px; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-soft); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(34px, 5.5vw, 76px); }
.form { display: flex; flex-direction: column; gap: 4px; }
.field { position: relative; margin-bottom: 20px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label { position: absolute; left: 16px; top: 15px; font-size: 0.9rem; color: var(--warm-dim); pointer-events: none; transition: transform .25s var(--ease-out), color .25s, font-size .25s; transform-origin: left; background: var(--night); padding: 0 6px; }
.form input, .form textarea, .form select { width: 100%; padding: 15px 18px; background: transparent; border: 1px solid rgba(247,241,230,0.2); border-radius: 2px; color: var(--warm-white); font-size: 0.92rem; outline: none; transition: border-color .25s, box-shadow .25s; }
.form select { color: var(--warm-muted); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23D7CBB4' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.form textarea { resize: vertical; min-height: 130px; }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(207,154,65,0.14); }
.field input:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-26px) scale(0.78); color: var(--gold); }
.field--select label { position: static; background: none; display: block; margin-bottom: 8px; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--warm-muted); }
.cinfo .l { font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--warm-dim); margin-bottom: 6px; }
.cinfo .v { font-size: 1.02rem; color: var(--warm-muted); margin-bottom: 22px; }
.cinfo a:hover { color: var(--gold); }
.form-note { font-size: 0.74rem; color: var(--warm-dim); margin-top: 6px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: #070504; border-top: 1px solid rgba(247,241,230,0.1); padding-block: clamp(50px, 7vh, 80px); color: var(--warm-muted); }
.footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 42px; margin-bottom: 48px; }
.footer__brand svg { width: 30px; height: 30px; overflow: visible; margin-bottom: 16px; }
.footer__brand svg path, .footer__brand svg line { stroke: var(--gold); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.footer__brand p { font-size: 0.86rem; color: var(--warm-dim); max-width: 30ch; line-height: 1.7; }
.footer__col h4 { font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--warm-dim); margin-bottom: 16px; }
.footer__col a { display: block; font-size: 0.88rem; padding: 5px 0; transition: color .25s var(--ease-out); }
.footer__col a:hover { color: var(--gold); }
.footer__col p { font-size: 0.86rem; color: var(--warm-dim); line-height: 1.9; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid rgba(247,241,230,0.1); }
.footer__bottom p { font-size: 0.72rem; color: var(--warm-dim); }

/* ============================================================
   REVEALS
   ============================================================ */
html.js .rev { opacity: 0; transform: translateY(34px); }
html.js .rev-l { opacity: 0; transform: translateX(-40px); }
html.js .rev-r { opacity: 0; transform: translateX(40px); }
html.js [data-hero-box] { opacity: 0; transform: translateY(26px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) { .footer__top { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 940px) {
  .sb { max-width: none; }
  .touch__grid { grid-template-columns: 1fr 1fr; gap: 16px 24px; }
  .feature, .feature--flip .feature__media, .contact-grid { grid-template-columns: 1fr; }
  .feature--flip .feature__media { order: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 32px 22px; }
  .cap { grid-template-columns: auto 1fr; }
  .cap__meta { display: none; }
  .cap__peek { display: none; }
  .band__inner--r { justify-content: flex-start; }
  .band__scrim--l, .band__scrim--r { background: linear-gradient(0deg, rgba(8,6,5,0.78), rgba(8,6,5,0.2) 60%, rgba(8,6,5,0.42)); }
  .footer__top { grid-template-columns: 1fr; gap: 28px; }
  .field-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .touch__grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .btn { width: 100%; justify-content: center; }
  .btn--ghost { width: auto; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html.js .rev, html.js .rev-l, html.js .rev-r, html.js [data-hero-box] { opacity: 1 !important; transform: none !important; }
  html.js .reveal-clip { clip-path: inset(0 0 0 0) !important; }
  * { scroll-behavior: auto !important; }
}

/* Static floor-plan (The Drawing) — no pin, easy scroll */
.planflat { margin-top: 40px; border-radius: 4px; overflow: hidden; border: 1px solid rgba(26,20,12,0.08); box-shadow: 0 40px 120px -50px rgba(40,26,10,0.4); }
.planflat img { width: 100%; height: auto; display: block; }