/* ==========================================================================
   Garuda City — black marble, antique gold, sandstone
   ========================================================================== */

:root {
  --marble: #0d0b09;
  --marble-2: #15110d;
  --marble-3: #1d1812;
  --ink: #1f1810;
  --ink-soft: #5b4d39;
  --stone: #f2e8d3;
  --stone-2: #e8dbbf;
  --ivory: #f9f3e6;
  --gold: #d8b25a;
  --gold-hi: #f6e3a6;
  --gold-lo: #9a6e22;
  --gold-deep: #7a5514;
  --line: rgba(216, 178, 90, .28);
  --line-ink: rgba(122, 85, 20, .3);
  --emerald: #143a2b;

  --serif: 'Cinzel', 'Trajan Pro', Georgia, 'Times New Roman', serif;
  --script: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;

  --nav-h: 68px;
  --gutter: clamp(18px, 4vw, 56px);
  --ease: cubic-bezier(.22, .61, .21, 1);

  /* soft contour veins, used as a marble texture */
  --veins: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0045 0.009' numOctaves='5' seed='14' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0 0 0 0 0 0 0 0 .2 .8 .2 0 0 0 0 0 0 0 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur stdDeviation='.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--marble);
  color: var(--ivory);
  font: 300 1.0625rem/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, ul, address, figure { margin: 0; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
[hidden] { display: none !important; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--gold); color: var(--marble); text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: min(1280px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap--narrow { width: min(820px, 100% - 2 * var(--gutter)); }
.center { text-align: center; }

/* ---------- type ---------- */
.overline {
  font: 500 .72rem/1.4 var(--sans);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
}
.overline--ink { color: var(--gold-deep); }
.h2 {
  font: 500 clamp(1.75rem, 4.2vw, 3.25rem)/1.14 var(--serif);
  letter-spacing: .035em;
  margin-top: .55em;
  text-wrap: balance;
}
.section--stone .h2 { color: var(--ink); }
.h2--gold, .hero__wordmark {
  background: linear-gradient(180deg, #fbeebd 0%, #e6c36f 36%, #b98a2f 60%, #f0d488 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.lede {
  font: italic 400 clamp(1.25rem, 2.1vw, 1.6rem)/1.5 var(--script);
  margin-top: 1.1em;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.flourish { width: 200px; height: 20px; margin: 1.3rem auto 0; color: var(--gold); }
.flourish--ink { color: var(--gold-lo); }
.flourish--left { margin-left: 0; }

/* ---------- buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  padding: 1.05em 2.1em;
  font: 500 .74rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-radius: 1px; cursor: pointer; overflow: hidden;
  transition: color .4s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.btn--sm { padding: .85em 1.5em; font-size: .68rem; }
.btn--gold {
  color: #1c1305;
  background: linear-gradient(180deg, #f7e4a4 0%, #dcb65c 45%, #b8892e 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(90, 58, 8, .5), 0 10px 30px -12px rgba(216, 178, 90, .55);
}
.btn--gold::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .9s var(--ease);
}
.btn--gold:hover::after { transform: translateX(120%); }
.btn--line { color: var(--gold-hi); border-color: rgba(216, 178, 90, .6); background: rgba(13, 11, 9, .25); }
.btn--line:hover { background: var(--gold); border-color: var(--gold); color: #1c1305; }
.btn--ink { color: var(--stone); background: var(--ink); border-color: var(--ink); }
.btn--ink:hover { background: transparent; color: var(--ink); }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-inline: var(--gutter);
  transition: background-color .5s var(--ease), box-shadow .5s var(--ease);
}
/* Kept deliberately plain (no transform, no blur on touch screens) so the bar can never go missing on a phone. */
.nav.is-solid, .nav.is-menu { background: rgba(13, 11, 9, .96); box-shadow: 0 1px 0 var(--line); }
@media (hover: hover) and (pointer: fine) {
  .nav.is-solid { background: rgba(13, 11, 9, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .nav { transition: background-color .5s var(--ease), box-shadow .5s var(--ease), opacity .5s var(--ease); }
  .nav.is-away { opacity: 0; pointer-events: none; }
}
.nav__toggle { display: none; }
.menu { display: none; }
.nav__brand {
  display: inline-flex; align-items: center; gap: .7em; text-decoration: none;
  font: 600 1rem/1 var(--serif); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi);
}
.nav__mark { width: 9px; height: 9px; color: var(--gold); }
.nav__links { display: flex; gap: clamp(18px, 2.6vw, 40px); }
.nav__links a {
  position: relative; padding: 8px 0; text-decoration: none;
  font: 400 .72rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: rgba(249, 243, 230, .86);
  transition: color .3s;
}
.nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.nav__links a:hover, .nav__links a.is-current { color: var(--gold-hi); }
.nav__links a:hover::after, .nav__links a.is-current::after { transform: scaleX(1); }
@media (max-width: 860px) {
  .nav__links { display: none; }
  :root { --nav-h: 58px; }
  .nav__brand { font-size: .88rem; }

  /* two-line menu button that folds into a cross */
  .nav__toggle {
    position: relative; display: block; width: 44px; height: 44px; margin-right: -10px;
    background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .nav__toggle span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--gold-hi); transition: transform .4s var(--ease), top .4s var(--ease); }
  .nav__toggle span:first-child { top: 17px; }
  .nav__toggle span:last-child { top: 26px; }
  .nav__toggle[aria-expanded="true"] span:first-child { top: 21.500px; transform: rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:last-child { top: 21.500px; transform: rotate(-45deg); }

  .menu {
    position: fixed; inset: 0; z-index: 49; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 26px; padding: calc(var(--nav-h) + 20px) var(--gutter) 40px; text-align: center;
    background: radial-gradient(120% 60% at 50% 0%, rgba(216, 178, 90, .12), transparent 60%), var(--marble);
    opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s;
  }
  .menu.is-open { opacity: 1; visibility: visible; transition: opacity .35s var(--ease); }
  .menu__links { display: grid; gap: 4px; }
  .menu__links a { padding: 14px 10px; text-decoration: none; font: 500 1.35rem/1.2 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--ivory); }
  .menu__links a:active { color: var(--gold-hi); }
  .menu .flourish { margin: 0; }
  .menu .btn { width: min(320px, 100%); }
  html.is-menu, html.is-menu body { overflow: hidden; }
}

/* ==========================================================================
   HERO — pinned stage; scroll scales the world until you pass through the gate
   ========================================================================== */
.hero { position: relative; height: 320vh; background: var(--stone); }
.hero__stage {
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden;
  background: #1a130d; isolation: isolate;
  --s: 1; --ks: 1; --lift: 0; --copy: 1; --bloom: 0; --light: 0; --arrive: 0;
}
.hero__backdrop { display: none; }
.hero__world {
  position: absolute; left: 50%; top: 50%;
  width: max(101.6vw, 175.6vh); aspect-ratio: 1649 / 954;
  transform-origin: 50% 70%;
  transform: translate(-50%, calc(-50% - 20% * var(--lift))) scale(var(--s));
}
/* Do NOT give this layer `will-change: transform` on large screens. With it, the browser keeps the scene
   as its own layer drawn at the largest zoom it has reached; after a quick scroll back to the top it then
   needs the whole scene at that size, runs out of graphics memory and leaves rectangular holes until the
   page is reloaded. Without it the scene is simply redrawn at the size it is shown. Phones keep the hint:
   their layer is small and the walk-through stays smooth there. */
@media (pointer: coarse) and (max-width: 600px) {
  .hero__world { will-change: transform; }
}
.hero__stage.is-moving .hero__sheen { display: none; }   /* no shimmer to redraw while zooming */
/* sky above and lawn below, sampled from the scene's own edges, so it can sit inside a taller stage without a seam */
/* This lives on the stage, NOT inside the zooming world: a huge child inside the scaled layer made the
   layer tens of thousands of pixels tall at full zoom, and browsers dropped its tiles on the way back. */
.hero__stage::before {
  content: ''; position: absolute; inset: 0;
  --mid: 50%; --top: calc(var(--mid) - 34.15vw); --bot: calc(var(--mid) + 34.15vw);
  background: linear-gradient(180deg, #06070d 0, #0e1429 calc(var(--top) - 55vw), #2b3d6b calc(var(--top) - 26vw), #6b8fc2 var(--top), #7693be calc(var(--top) + 5vw), #5b4948 calc(var(--bot) - 5vw), #3f363b var(--bot), #241f20 calc(var(--bot) + 10vw), #141110 calc(var(--bot) + 24vw), #0d0b09 calc(var(--bot) + 42vw));
}
/* once the light has filled the frame the scene is invisible: drop it so its memory is released and it repaints cleanly on return */
.hero__stage.is-through .hero__world, .hero__stage.is-through .hero__dust { visibility: hidden; }
.hero__scene {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover;
  transform-origin: 50% 70%; transform: scale(var(--ks));
}
/* the cut-out gate, registered over the gate in the scene so it stays crisp while zooming */
.hero__gate { position: absolute; z-index: 2; left: 8.75%; top: 3.8%; width: 82.36%; aspect-ratio: 1649 / 954; }
.hero__gate img { width: 100%; height: 100%; }
.hero__sheen {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(../assets/gate.webp) center / 100% 100% no-repeat; mask: url(../assets/gate.webp) center / 100% 100% no-repeat;
  background: linear-gradient(108deg, transparent 42%, rgba(255, 246, 214, .7) 50%, transparent 58%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0;
  mix-blend-mode: soft-light;
  animation: sheen 9s var(--ease) 1.2s infinite;
}
@keyframes sheen { 0% { background-position: 130% 0; } 38%, 100% { background-position: -60% 0; } }

.hero__dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: calc(var(--copy) * .9 + .1); }
.hero__shade {
  position: absolute; inset: 0; pointer-events: none; opacity: var(--copy);
  background:
    linear-gradient(180deg, rgba(13, 11, 9, .62) 0%, rgba(13, 11, 9, 0) 20%),
    linear-gradient(0deg, rgba(13, 11, 9, .86) 0%, rgba(13, 11, 9, .45) 14%, rgba(13, 11, 9, 0) 34%);
}
/* the light grows by redrawing a screen-sized gradient, not by scaling an oversized layer (same memory problem as above) */
.hero__bloom {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255, 246, 222, 1) 0, rgba(255, 228, 164, .92) calc(var(--bloom) * 27vmax), rgba(244, 184, 98, .55) calc(var(--bloom) * 58vmax), rgba(240, 170, 80, 0) calc(4vmax + var(--bloom) * 100vmax));
  opacity: var(--bloom);
  mix-blend-mode: screen;
}
.hero__light { position: absolute; inset: 0; pointer-events: none; background: var(--stone); opacity: var(--light); }

.hero__copy {
  position: absolute; inset: var(--nav-h) 0 0 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center;
  padding: 0 var(--gutter) clamp(22px, 3.6vh, 44px);
  opacity: var(--copy); transform: translateY(calc((1 - var(--copy)) * -36px));
  pointer-events: none;
}
.hero__copy > * { pointer-events: auto; }
.hero__copy .overline { display: none; text-shadow: 0 1px 12px rgba(0, 0, 0, .7); }
.hero__title {
  font: 500 clamp(1.5rem, 2.7vw, 2.5rem)/1.15 var(--serif); letter-spacing: .07em; text-transform: uppercase;
  margin-top: .5em; color: var(--ivory); text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
  text-wrap: balance;
}
.hero__sub { display: none; font: italic 400 1.2rem/1.4 var(--script); margin-top: .5em; color: rgba(249, 243, 230, .9); text-shadow: 0 1px 14px rgba(0, 0, 0, .6); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(14px, 2.2vh, 22px); }
.hero__cue {
  position: absolute; right: var(--gutter); bottom: clamp(26px, 5.5vh, 60px); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-decoration: none;
  font: 400 .64rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: rgba(249, 243, 230, .8);
  opacity: var(--copy);
}
.hero__cue span { writing-mode: vertical-rl; }
.hero__cue i { width: 1px; height: 54px; background: linear-gradient(180deg, var(--gold), transparent); transform-origin: top; animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(20px); opacity: 0; } }

.hero__arrive {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 0 var(--gutter); pointer-events: none;
  opacity: var(--arrive); transform: translateY(calc((1 - var(--arrive)) * 26px));
}
.hero__wordmark {
  font: 600 clamp(2.4rem, 8.5vw, 7rem)/1.05 var(--serif); letter-spacing: .1em; text-transform: uppercase; margin-top: .25em;
  background-image: linear-gradient(180deg, #c99a3a 0%, #8a6117 45%, #5f400c 62%, #b88a2e 100%);
}
.hero__arrive .flourish { color: var(--gold-lo); width: 240px; height: 24px; }

/* Narrower than 3:2 — the gate must stay whole, so the scene no longer covers the stage */
@media (max-aspect-ratio: 3/2) {
  .hero__world { width: 118vw; }
  .hero__scene {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
}
/* Portrait — copy sits in the sky above the gate, actions on the ground below it */
@media (max-aspect-ratio: 7/8) {
  .hero { height: 280vh; }
  .hero__world { top: 49%; }
  .hero__stage::before { --mid: 49%; }
  .hero__shade {
    background:
      linear-gradient(180deg, rgba(13, 11, 9, .78) 0%, rgba(13, 11, 9, .3) 26%, rgba(13, 11, 9, 0) 40%),
      linear-gradient(0deg, rgba(13, 11, 9, .94) 0%, rgba(13, 11, 9, .6) 20%, rgba(13, 11, 9, 0) 42%);
  }
  .hero__copy { justify-content: flex-start; padding-top: clamp(18px, 5vh, 56px); padding-bottom: 92px; }
  .hero__title { font-size: clamp(1.45rem, 7vw, 2.2rem); }
  .hero__sub { display: block; max-width: 22em; }
  .hero__copy .overline { display: block; }
  .hero__actions { margin-top: auto; flex-direction: column; width: min(320px, 100%); }
  .hero__actions .btn { width: 100%; }
  .hero__cue { right: auto; left: 50%; bottom: 22px; transform: translateX(-50%); }
  .hero__cue span { writing-mode: horizontal-tb; }
  .hero__cue i { height: 26px; }
}
@media (max-aspect-ratio: 7/8) and (max-height: 700px) {
  .hero__sub { display: none; }
  .hero__cue i { display: none; }
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section { position: relative; padding-block: clamp(72px, 11vw, 150px); scroll-margin-top: calc(var(--nav-h) - 1px); }
.section__head { margin-bottom: clamp(32px, 5vw, 64px); }
.section__sub { max-width: 34em; margin: 1.2rem auto 0; color: rgba(249, 243, 230, .72); text-wrap: pretty; }
.section--stone .section__sub { color: var(--ink-soft); }

.section--marble {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(216, 178, 90, .09), transparent 60%),
    radial-gradient(90% 50% at 85% 100%, rgba(216, 178, 90, .05), transparent 60%),
    var(--marble);
}
.section--marble::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--veins) 0 0 / 900px 900px; opacity: .1;
}
.section--stone {
  background:
    radial-gradient(100% 70% at 50% 0%, #fbf5e7, transparent 70%),
    linear-gradient(180deg, var(--stone), var(--stone-2));
  color: var(--ink);
}
.section--stone::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--veins) 120px 60px / 900px 900px; opacity: .05; filter: brightness(0);
}
.section > * { position: relative; }

/* ---------- welcome ---------- */
.welcome { padding-top: clamp(40px, 7vw, 90px); }
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(40px, 6vw, 80px);
  border-block: 1px solid var(--line-ink);
}
.stat { padding: clamp(22px, 3vw, 40px) 12px; text-align: center; display: flex; flex-direction: column-reverse; gap: .8em; }
.stat + .stat { border-left: 1px solid var(--line-ink); }
.stat dt { font: 500 .68rem/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-deep); }
.stat dd { font: 500 clamp(1.7rem, 3.6vw, 3rem)/1 var(--serif); letter-spacing: .02em; color: var(--ink); white-space: nowrap; }
.stat dd em { font: italic 400 .5em/1 var(--script); margin-inline: .45em; color: var(--gold-deep); }
.stat dd small { font: 400 .42em/1 var(--sans); letter-spacing: .1em; margin-left: .15em; }
@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--line-ink); }
}

/* ==========================================================================
   MASTER PLAN
   ========================================================================== */
.plan__bar { display: grid; gap: 14px; margin-bottom: 20px; }
.plan__group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.plan__group--minor { gap: 8px 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip {
  display: inline-flex; align-items: center; gap: .65em; padding: .62em 1.1em;
  font: 400 .78rem/1 var(--sans); letter-spacing: .08em; color: rgba(249, 243, 230, .82);
  background: rgba(249, 243, 230, .03); border: 1px solid rgba(216, 178, 90, .25); border-radius: 100px; cursor: pointer;
  transition: background-color .3s, border-color .3s, color .3s;
}
.chip:hover { border-color: var(--gold); color: var(--gold-hi); }
.chip.is-on { background: var(--gold); border-color: var(--gold); color: #1c1305; font-weight: 500; }
.chip i { width: 10px; height: 10px; border-radius: 2px; background: var(--sw); box-shadow: 0 0 0 1px rgba(216, 178, 90, .6); }
.chip.is-on i { box-shadow: 0 0 0 1px rgba(28, 19, 5, .5); }
.chip small { font-size: .82em; opacity: .65; }
.plan__find { display: flex; border: 1px solid rgba(216, 178, 90, .25); border-radius: 100px; overflow: hidden; }
.plan__find:focus-within { border-color: var(--gold); }
.plan__find input { width: 7.2em; padding: .5em .2em .5em 1.1em; font-size: .82rem; background: transparent; border: 0; outline: 0; -moz-appearance: textfield; appearance: textfield; }
.plan__find input::-webkit-outer-spin-button, .plan__find input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.plan__find input::placeholder { color: rgba(249, 243, 230, .5); }
.plan__find button { display: grid; place-items: center; width: 38px; background: transparent; border: 0; color: var(--gold); cursor: pointer; }
.plan__find button svg { width: 16px; height: 16px; }

.plan__frame {
  position: relative; background: #090706; border: 1px solid var(--line);
  box-shadow: 0 0 0 6px var(--marble), 0 0 0 7px rgba(216, 178, 90, .16), 0 40px 90px -40px #000;
}
.plan__viewport { overflow: hidden; cursor: default; outline-offset: -2px; }
.plan__viewport.is-zoomed { overflow: auto; max-height: min(82vh, 900px); cursor: grab; scrollbar-width: thin; scrollbar-color: var(--gold-lo) transparent; }
.plan__viewport.is-dragging { cursor: grabbing; }
.plan__canvas { width: calc(100% * var(--zoom, 1)); }
.plan__svg { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }

.p-approach { fill: #15110c; }
.p-approach-mid { fill: none; stroke: rgba(216, 178, 90, .34); stroke-width: .28; stroke-dasharray: 2.6 2.2; }
.p-site { fill: #1d1812; }
.p-boundary { fill: none; stroke: rgba(216, 178, 90, .7); stroke-width: .32; stroke-dasharray: 1.8 1.1; }
.p-park { fill: #153d2c; stroke: rgba(126, 196, 152, .45); stroke-width: .22; }
.p-park-dots { fill: url(#pTrees); pointer-events: none; }
.p-ca { fill: #2b2218; stroke: rgba(216, 178, 90, .4); stroke-width: .22; }
.p-ca-hatch { fill: url(#pHatch); pointer-events: none; }
.p-area-label { font: 500 2.5px var(--sans); letter-spacing: .5px; text-transform: uppercase; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.p-area-label--park { fill: rgba(168, 222, 188, .85); }
.p-area-label--ca { fill: rgba(216, 178, 90, .75); }
.p-area-sub { font: 400 1.9px var(--sans); letter-spacing: .2px; text-anchor: middle; dominant-baseline: central; fill: rgba(249, 243, 230, .5); pointer-events: none; }
.p-road { font: 400 1.75px var(--sans); letter-spacing: .5px; text-transform: uppercase; text-anchor: middle; dominant-baseline: central; fill: rgba(216, 178, 90, .5); pointer-events: none; }
.p-road--main { font-size: 2.2px; fill: rgba(216, 178, 90, .78); }
.p-gate { fill: var(--gold); }
.p-gate-label { font: 500 2.2px var(--sans); letter-spacing: .4px; text-transform: uppercase; text-anchor: middle; fill: var(--gold-hi); pointer-events: none; }

.plot {
  fill: var(--c); stroke: rgba(216, 178, 90, .6); stroke-width: .2; stroke-linejoin: round; cursor: pointer;
  transition: fill .3s, opacity .45s, stroke .3s;
}
.plot--6x9 { --c: #3a362d; --h: #5a5444; }
.plot--6x12 { --c: #20394f; --h: #2f567a; }
.plot--9x12 { --c: #5a4418; --h: #836424; }
.plot--9w { --c: #3f2a4d; --h: #603f77; }
.plot--odd { --c: #56242a; --h: #7f343d; }
.plot:hover, .plot.is-hover { fill: var(--h); stroke: var(--gold-hi); }
.plot.is-dim { opacity: .14; }
.plot.is-sold { fill: #1a1612; cursor: default; }
.plot.is-reserved { fill-opacity: .55; }
.plot.is-selected { fill: #e6c063; stroke: #fff6d8; stroke-width: .45; opacity: 1; filter: drop-shadow(0 0 1.6px rgba(246, 227, 166, .9)); }
.p-num { font: 500 2.5px var(--sans); text-anchor: middle; dominant-baseline: central; fill: rgba(249, 243, 230, .86); pointer-events: none; transition: opacity .45s, fill .3s; }
.p-num.is-dim { opacity: .2; }
.p-num.is-selected { fill: #1c1305; font-weight: 600; }
.p-num.is-sold { fill: rgba(249, 243, 230, .28); text-decoration: line-through; }
.plan__svg--portrait .p-num { font-size: 3.2px; }
.plan__svg--portrait .p-road { font-size: 2.2px; }
.plan__svg--portrait .p-area-label { font-size: 3.2px; }
.plan__svg--portrait .p-area-sub { font-size: 2.4px; }

/* draw-in on first view */
.js .plan__frame:not(.is-drawing):not(.is-drawn) .plot,
.js .plan__frame:not(.is-drawing):not(.is-drawn) .p-num,
.js .plan__frame:not(.is-drawing):not(.is-drawn) .p-boundary { opacity: 0; }
.plan__frame.is-drawing .plot, .plan__frame.is-drawing .p-num { transition: opacity .7s var(--ease) var(--d, 0s), fill .3s; }
.p-boundary { transition: opacity 1.4s var(--ease); }
.sheet-open .dock { transform: translateY(110%); }

.plan__hud { position: absolute; inset: auto 12px 12px auto; display: flex; flex-direction: row; align-items: center; gap: 16px; pointer-events: none; }
@media (min-width: 900px) { .plan__hud { inset: 16px auto auto 16px; flex-direction: column; gap: 14px; } }
.plan__compass { position: relative; width: 40px; height: 40px; color: var(--gold); }
@media (min-width: 900px) { .plan__compass { width: 46px; height: 46px; } }
.plan__compass svg { width: 100%; height: 100%; transition: transform .8s var(--ease); }
.plan__compass span { position: absolute; font: 600 .6rem/1 var(--serif); color: var(--gold-hi); transition: all .8s var(--ease); left: 50%; top: -11px; transform: translateX(-50%); }
.plan__compass.is-east svg { transform: rotate(90deg); }
.plan__compass.is-east span { left: calc(100% + 4px); top: 50%; transform: translateY(-50%); }
.plan__zoom { display: flex; flex-direction: row; pointer-events: auto; border: 1px solid var(--line); background: rgba(13, 11, 9, .8); }
.plan__zoom button { display: grid; place-items: center; width: 38px; height: 38px; background: transparent; border: 0; color: var(--gold); cursor: pointer; }
.plan__zoom button + button { border-left: 1px solid var(--line); }
@media (min-width: 900px) { .plan__zoom { flex-direction: column; } .plan__zoom button + button { border-left: 0; border-top: 1px solid var(--line); } }
.plan__zoom button:hover:not(:disabled) { background: var(--gold); color: #1c1305; }
.plan__zoom button:disabled { opacity: .3; cursor: default; }
.plan__zoom svg { width: 16px; height: 16px; }
.plan__count { position: absolute; left: 12px; bottom: 14px; font: 400 .7rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(249, 243, 230, .6); pointer-events: none; background: rgba(9, 7, 6, .7); padding: 6px 8px; }
.plan__tip {
  position: absolute; z-index: 5; left: 0; top: 0; pointer-events: none; white-space: nowrap;
  padding: 9px 13px; background: rgba(13, 11, 9, .95); border: 1px solid var(--gold); color: var(--ivory);
  font: 400 .78rem/1.35 var(--sans); letter-spacing: .04em;
  transform: translate(-50%, calc(-100% - 14px));
}
.plan__tip b { display: block; font: 600 .8rem/1.2 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); }

.plan__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 22px; font: 400 .74rem/1 var(--sans); letter-spacing: .06em; color: rgba(249, 243, 230, .62); }
.plan__legend li { display: inline-flex; align-items: center; gap: .6em; }
.plan__legend i { width: 12px; height: 12px; background: var(--sw); box-shadow: 0 0 0 1px rgba(216, 178, 90, .5); }
.plan__legend i.is-line { height: 0; width: 18px; box-shadow: none; border-top: 1px dashed var(--gold); background: none; }

/* ---------- plaque: the selected plot ---------- */
.plaque {
  position: relative; margin-top: 30px; padding: clamp(20px, 3vw, 34px);
  background: linear-gradient(180deg, rgba(29, 24, 18, .96), rgba(16, 13, 10, .96)); border: 1px solid var(--line);
}
.plaque::before { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(216, 178, 90, .12); pointer-events: none; }
.plaque__empty { text-align: center; color: rgba(249, 243, 230, .6); font: italic 400 1.25rem/1.4 var(--script); padding-block: 8px; }
.plaque__empty .flourish { margin: 0 auto 14px; opacity: .7; }
.plaque__body { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: clamp(20px, 3.4vw, 48px); align-items: center; }
.plaque__body[hidden] { display: none; }
.plaque__sketch { color: var(--gold); }
.plaque__sketch svg { width: 100%; height: auto; overflow: visible; }
.plaque__sketch figcaption { margin-top: 8px; text-align: center; font: 400 .66rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(249, 243, 230, .45); }
.sk-shape { fill: rgba(216, 178, 90, .08); stroke: rgba(216, 178, 90, .5); stroke-width: 1; }
.sk-road { stroke: var(--gold-hi); stroke-width: 3; stroke-linecap: round; }
.sk-len { font: 400 10px var(--sans); fill: rgba(249, 243, 230, .82); text-anchor: middle; dominant-baseline: central; }
.sk-n { font: 600 9px var(--serif); fill: var(--gold); text-anchor: middle; }
.plaque__kicker { font: 500 .68rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.plaque__title { font: 500 clamp(1.7rem, 3.2vw, 2.6rem)/1.1 var(--serif); letter-spacing: .06em; margin-top: .3em; color: var(--ivory); }
.plaque__title span { color: var(--gold-hi); }
.plaque__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tag { padding: .42em .9em; font: 500 .64rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; border: 1px solid var(--line); color: var(--gold-hi); border-radius: 100px; }
.tag--sold { border-color: rgba(249, 243, 230, .3); color: rgba(249, 243, 230, .6); }
.tag--ok { border-color: rgba(126, 196, 152, .5); color: #a8debc; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; margin-top: 18px; }
.facts div { border-top: 1px solid rgba(216, 178, 90, .16); padding-top: 10px; }
.facts dt { font: 500 .62rem/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(249, 243, 230, .5); }
.facts dd { margin-top: 4px; font: 400 1.02rem/1.35 var(--sans); color: var(--ivory); }
.facts dd small { display: block; font-size: .8em; color: rgba(249, 243, 230, .55); }
.plaque__actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; min-width: 220px; }
.plaque__nav { display: flex; gap: 10px; }
.plaque__nav button { flex: 1; padding: .7em; font: 400 .68rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; background: transparent; border: 1px solid rgba(216, 178, 90, .22); color: rgba(249, 243, 230, .7); cursor: pointer; transition: border-color .3s, color .3s; }
.plaque__nav button:hover { border-color: var(--gold); color: var(--gold-hi); }
.plaque__link { background: none; border: 0; padding: 4px; font: 400 .7rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(249, 243, 230, .55); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.plaque__link:hover { color: var(--gold-hi); }
.plaque__close, .plaque__summary, .plaque__more { display: none; }
.plaque__summary { margin-top: 6px; color: rgba(249, 243, 230, .78); font-size: .95rem; line-height: 1.4; }

@media (max-width: 1020px) {
  .plaque__body { grid-template-columns: 170px minmax(0, 1fr); }
  .plaque__actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .plaque__actions .btn { flex: 1 1 220px; }
  .plaque__nav { flex: 1 1 220px; }
}
@media (max-width: 640px) {
  /* on phones the plaque becomes a bottom sheet so the plan stays in view */
  .plaque { margin-top: 18px; }
  .plaque.is-open {
    position: fixed; inset: auto 0 0 0; z-index: 60; margin: 0; max-height: 78dvh; overflow: auto;
    background: #17130e; border-inline: 0; border-bottom: 0; box-shadow: 0 -30px 60px -10px rgba(0, 0, 0, .8);
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    animation: sheet .5s var(--ease);
  }
  .plaque.is-open::before { display: none; }
  .plaque.is-open .plaque__close { display: grid; place-items: center; position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; background: none; border: 0; color: var(--gold); cursor: pointer; z-index: 1; }
  .plaque__close svg { width: 20px; height: 20px; }
  .plaque__body { grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: start; }
  .plaque__title { font-size: 1.5rem; }
  .facts { grid-column: 1 / -1; margin-top: 4px; gap: 10px 18px; }
  .plaque__main { display: contents; }
  .plaque__head { align-self: center; }
  .sk-len { font-size: 15px; }
  .plaque__actions { gap: 10px; }
  /* collapsed sheet: plot, one-line summary and the actions; "Details" opens the rest */
  .plaque.is-open { padding-top: 18px; }
  .plaque.is-open .plaque__summary, .plaque.is-open .plaque__more { display: block; }
  .plaque.is-open .plaque__head { padding-right: 36px; }
  .plaque.is-open:not(.is-expanded) .plaque__body { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .plaque.is-open:not(.is-expanded) .plaque__sketch,
  .plaque.is-open:not(.is-expanded) .facts,
  .plaque.is-open:not(.is-expanded) .plaque__tags,
  .plaque.is-open:not(.is-expanded) .plaque__link { display: none; }
  .plaque.is-open.is-expanded .plaque__summary { display: none; }
}
@keyframes sheet { from { transform: translateY(100%); } to { transform: none; } }

/* ==========================================================================
   PLOT SIZES
   ========================================================================== */
.cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.card {
  position: relative; display: flex; flex-direction: column; padding: clamp(18px, 2vw, 28px);
  background: linear-gradient(180deg, rgba(255, 252, 244, .9), rgba(246, 237, 217, .9));
  border: 1px solid var(--line-ink); color: var(--ink);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.card::before { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(122, 85, 20, .14); pointer-events: none; }
.card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(60, 40, 5, .55); }
.card__shape { height: 132px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 20px; }
.card__shape svg { overflow: visible; }
.card__shape rect, .card__shape polygon { fill: rgba(154, 110, 34, .12); stroke: var(--gold-lo); stroke-width: 1; }
.card__shape line { stroke: var(--gold-deep); stroke-width: 2.5; stroke-linecap: round; }
.card__name { font: 500 1.35rem/1.15 var(--serif); letter-spacing: .05em; }
.card__feet { margin-top: 4px; font: italic 400 1.1rem/1.3 var(--script); color: var(--ink-soft); }
.card__facts { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-ink); display: grid; gap: 6px; align-content: start; font-size: .92rem; line-height: 1.45; color: var(--ink-soft); flex: 1; }
.card__facts b { font-weight: 500; color: var(--ink); }
.card__go { margin-top: 18px; display: inline-flex; align-items: center; gap: .7em; align-self: flex-start; padding: 0; background: none; border: 0; cursor: pointer; font: 500 .68rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep); }
.card__go svg { width: 18px; height: 18px; transition: transform .5s var(--ease); }
.card__go:hover svg { transform: translateX(6px); }
@media (max-width: 1100px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .cards { grid-auto-flow: column; grid-auto-columns: min(74vw, 290px); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 18px; scrollbar-width: none; }
  .cards::-webkit-scrollbar { display: none; }
  .card { scroll-snap-align: center; }
}

/* ==========================================================================
   HIGHLIGHTS
   ========================================================================== */
.highlights { overflow: hidden; }
/* the Garuda alone, cropped from the gate cut-out, as a faint crest */
.highlights__crest { position: absolute; left: 50%; top: 4%; width: min(1100px, 130vw); aspect-ratio: 1050 / 440; overflow: hidden; transform: translateX(-50%); opacity: .07; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); mask-image: linear-gradient(180deg, #000 40%, transparent); }
.highlights__crest img, .visit__crest img { position: absolute; top: 0; left: -28.6%; width: 157.05%; max-width: none; }
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.feature { padding: clamp(24px, 3.4vw, 46px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(13, 11, 9, .5); transition: background-color .6s var(--ease); }
.feature:hover { background: rgba(216, 178, 90, .06); }
.feature svg { width: 44px; height: 44px; color: var(--gold); }
.feature h3 { margin-top: 20px; font: 500 1.12rem/1.3 var(--serif); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-hi); }
.feature p { margin-top: 10px; color: rgba(249, 243, 230, .74); text-wrap: pretty; }
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }

/* ==========================================================================
   LOCATION
   ========================================================================== */
.location__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.location__address { margin-top: 1.5rem; font: italic 400 1.4rem/1.45 var(--script); color: var(--ink-soft); max-width: 18em; }
.location__actions { margin-top: 2rem; }
.distances { margin-top: 1.6rem; display: grid; gap: 0; border-top: 1px solid var(--line-ink); }
.distances li { display: flex; justify-content: space-between; gap: 16px; padding: .7em 0; border-bottom: 1px solid var(--line-ink); }
.distances b { font-weight: 500; }
.location__map { position: relative; aspect-ratio: 4 / 3; background: var(--marble); border: 1px solid var(--gold-lo); box-shadow: 0 0 0 6px var(--stone), 0 0 0 7px var(--line-ink), 0 40px 70px -40px rgba(60, 40, 5, .7); overflow: hidden; }
.location__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: sepia(.35) saturate(.85) contrast(1.02); }
.location__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; padding: 24px; color: var(--gold-hi);
  background: radial-gradient(circle at 50% 42%, rgba(216, 178, 90, .16), transparent 60%), var(--veins) 0 0 / 700px 700px, var(--marble); background-blend-mode: normal, soft-light, normal; }
.location__placeholder p { font: 500 .72rem/1.6 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: rgba(249, 243, 230, .75); }
.location__rose { width: 92px; height: 92px; color: var(--gold); animation: rose 14s ease-in-out infinite alternate; }
@keyframes rose { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@media (max-width: 860px) { .location__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   SITE VISIT
   ========================================================================== */
.visit__crest { position: relative; width: min(440px, 78%); aspect-ratio: 1050 / 432; margin: 0 auto -1px; overflow: hidden; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .6)); }
.visit__card { position: relative; padding: clamp(26px, 5vw, 60px); background: linear-gradient(180deg, rgba(29, 24, 18, .95), rgba(13, 11, 9, .95)); border: 1px solid var(--gold-lo); }
.visit__card::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(216, 178, 90, .16); pointer-events: none; }
.visit__card .h2 { font-size: clamp(1.5rem, 3.4vw, 2.4rem); }
.form { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; margin-top: clamp(26px, 4vw, 44px); }
.field { display: grid; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font: 500 .66rem/1.3 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: rgba(249, 243, 230, .65); }
.field label span { letter-spacing: .08em; text-transform: none; opacity: .7; }
.field input, .field select, .field textarea {
  width: 100%; padding: .85em 1em; font-size: 1rem; color: var(--ivory);
  background: rgba(249, 243, 230, .04); border: 1px solid rgba(216, 178, 90, .28); border-radius: 1px; outline: 0;
  transition: border-color .3s, background-color .3s;
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.field select option { background: var(--marble-2); color: var(--ivory); }
.field input[type=date] { color-scheme: dark; }
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); background: rgba(249, 243, 230, .07); }
.field.is-bad input { border-color: #d98a7a; }
.form__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.form__actions .btn { flex: 1 1 220px; }
.form__error { color: #e7a595; font-size: .92rem; }
.form__done { padding: 18px 20px; border: 1px solid var(--line); background: rgba(216, 178, 90, .06); font-size: .96rem; }
.form__done b { display: block; font: 500 .95rem/1.3 var(--serif); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-hi); margin-bottom: 6px; }
.form__done pre { margin: 12px 0 0; padding: 12px 14px; white-space: pre-wrap; font: 400 .84rem/1.55 var(--sans); background: rgba(0, 0, 0, .35); color: rgba(249, 243, 230, .8); }
@media (max-width: 620px) { .form { grid-template-columns: 1fr; } }

/* ==========================================================================
   FOOTER, DOCK
   ========================================================================== */
.footer { position: relative; padding: clamp(48px, 7vw, 90px) 0 calc(28px + env(safe-area-inset-bottom)); background: #080605; border-top: 1px solid var(--line); color: rgba(249, 243, 230, .66); font-size: .95rem; }
.footer__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; }
.footer__brand { font: 600 1.3rem/1 var(--serif); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-hi); margin-bottom: 14px; }
.footer__rera { margin-top: 8px; font-size: .86rem; letter-spacing: .04em; }
.footer__links { display: flex; flex-wrap: wrap; gap: 10px 28px; align-content: flex-start; }
.footer__links a { font: 400 .72rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; }
.footer__links a:hover { color: var(--gold-hi); }
.footer__note { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(216, 178, 90, .14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 40px; font-size: .78rem; line-height: 1.6; color: rgba(249, 243, 230, .42); }
.footer__note p:first-child { max-width: 62em; }

/* square back-to-top button */
.totop {
  position: fixed; right: 20px; bottom: 20px; z-index: 44; width: 46px; height: 46px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  color: var(--gold-hi); background: rgba(13, 11, 9, .92); border: 1px solid var(--gold-lo); border-radius: 0;
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .7);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s .4s, background-color .3s, color .3s;
}
.totop.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .4s var(--ease), transform .4s var(--ease), background-color .3s, color .3s; }
.totop:hover { background: var(--gold); color: #1c1305; }
.totop svg { width: 20px; height: 20px; }
.sheet-open .totop { opacity: 0; visibility: hidden; }
@media (max-width: 860px) { .totop { right: 14px; bottom: calc(68px + env(safe-area-inset-bottom)); width: 44px; height: 44px; } }

.dock { display: none; }
@media (max-width: 860px) {
  .dock {
    position: fixed; inset: auto 0 0 0; z-index: 45; display: grid; grid-template-columns: 1fr 1.25fr;
    padding-bottom: env(safe-area-inset-bottom); background: rgba(13, 11, 9, .94); border-top: 1px solid var(--line);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    transform: translateY(110%); transition: transform .6s var(--ease);
  }
  .dock.is-on { transform: none; }
  .dock a { display: grid; place-items: center; height: 54px; font: 500 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--gold-hi); }
  .dock__main { color: #1c1305 !important; background: linear-gradient(180deg, #f7e4a4, #dcb65c 45%, #b8892e); }
  .nav__cta { display: none; }
  .footer { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   Reveal on scroll — slow and weighty
   ========================================================================== */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--rd, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { height: 100vh; height: 100dvh; }
  .hero__sheen, .hero__cue i, .location__rose { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .plan__frame .plot, .js .plan__frame .p-num, .js .plan__frame .p-boundary { opacity: 1 !important; }
  .btn, .card, .plot { transition: none; }
}