/* ═══════════════════════════════════════════════════════════════════
   THE PRIVÉ — Trehan Luxury Floors, Sector 70A Gurugram
   Design system + components
   ───────────────────────────────────────────────────────────────────
   Palette is sampled from the project's own brand artwork (the gold-on-
   emerald lockup in the brochure's connectivity plan), not invented.
   Type pairs a didone display (Bodoni Moda) with a geometric sans
   (Jost) — the classic fashion-editorial pairing, used at speed.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* colour */
  --ink:#0A1A14;          /* near-black, green cast */
  --ink-2:#0F2A20;        /* alternate section ground */
  --forest:#204431;       /* sampled brand green */
  --forest-2:#173427;
  --gold:#C7A45E;         /* sampled brand gold */
  --gold-lt:#E3CB96;
  --gold-dim:#7E6836;
  --ivory:#F5F1E8;
  --sand:#E7DFD1;
  --stone:#9AA49C;
  --line:rgba(199,164,94,.24);
  --line-soft:rgba(245,241,232,.12);

  /* type */
  --display:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;

  /* space */
  --sp-section:clamp(72px,10vw,152px);
  --rail:64px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ── base ─────────────────────────────────────────────────────────── */
body.is-locked{overflow:hidden}
::selection{background:var(--gold);color:var(--ink)}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.01em}
p{margin:0 0 1.1em}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
figure{margin:0}
strong{font-weight:500;color:var(--ivory)}
em{font-style:italic}
hr{border:0;border-top:1px solid var(--line);margin:0}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-60px;left:16px;z-index:1200;background:var(--gold);
  color:var(--ink);padding:10px 18px;font-size:.82rem;letter-spacing:.12em;
  text-transform:uppercase;transition:top .25s var(--ease)}
.skip-link:focus{top:16px}

.wrap{width:min(1360px,100% - 2 * clamp(20px,5vw,64px));margin-inline:auto}

/* ── typography utilities ─────────────────────────────────────────── */
.eyebrow{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);font-weight:400;margin:0 0 clamp(16px,2vw,26px)}
.eyebrow::before{content:"";display:inline-block;width:26px;height:1px;
  background:var(--gold);vertical-align:middle;margin-right:14px;
  transform:translateY(-1px)}

.display-xl{font-family:var(--display);font-weight:400;
  font-size:clamp(2.5rem,6.2vw,5.2rem);line-height:1.02;letter-spacing:-.02em}
.display-lg{font-family:var(--display);font-weight:400;
  font-size:clamp(1.95rem,4.1vw,3.5rem);line-height:1.08;letter-spacing:-.015em;
  max-width:20ch}
.display-md{font-family:var(--display);font-weight:400;
  font-size:clamp(1.55rem,2.9vw,2.35rem);line-height:1.14}
.display-xl em,.display-lg em{color:var(--gold-lt)}

.lede{font-size:clamp(1.06rem,1.15vw + .78rem,1.35rem);line-height:1.6;
  color:var(--ivory);font-weight:300}
.section-lede{max-width:62ch;color:var(--stone);margin-top:clamp(18px,2vw,26px)}
.micro{font-size:.83rem;line-height:1.65;color:var(--stone);
  border-left:1px solid var(--line);padding-left:16px;margin-top:26px}
.link-gold{color:var(--gold);border-bottom:1px solid var(--line);
  padding-bottom:2px;transition:border-color .3s,color .3s}
.link-gold:hover{color:var(--gold-lt);border-color:var(--gold-lt)}

/* ── buttons ──────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:400;border:1px solid transparent;position:relative;overflow:hidden;
  transition:color .4s var(--ease),border-color .4s var(--ease),
             background-color .4s var(--ease),transform .3s var(--ease);
  will-change:transform}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;transform:translateY(101%);
  transition:transform .45s var(--ease-out)}
.btn:hover::after,.btn:focus-visible::after{transform:translateY(0)}
.btn-gold{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn-gold::after{background:var(--gold-lt)}
.btn-gold:hover{color:var(--ink)}
.btn-ghost{border-color:rgba(245,241,232,.34);color:var(--ivory)}
.btn-ghost::after{background:var(--ivory)}
.btn-ghost:hover{color:var(--ink);border-color:var(--ivory)}
.btn-sm{padding:12px 22px;font-size:.68rem}
.btn-block{width:100%;margin-top:8px}
.btn > *{position:relative;z-index:1}

/* ── scroll rail (signature) ──────────────────────────────────────── */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:850;
  display:none;pointer-events:none}
@media (min-width:1180px){.rail{display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px}}
.rail-label{font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);writing-mode:vertical-rl;transform:rotate(180deg);
  transition:opacity .35s var(--ease)}
.rail-track{width:1px;height:min(30vh,240px);background:var(--line-soft);
  position:relative;overflow:hidden}
.rail-track i{position:absolute;inset:auto 0 0 0;top:0;height:0;
  background:var(--gold);display:block}

/* ── header ───────────────────────────────────────────────────────── */
.nav{display:none}
@media (min-width:1024px){.nav{display:block}}
.nav-list{display:flex;gap:clamp(18px,2vw,34px)}
.nav-list a{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ivory);opacity:.82;position:relative;padding-block:6px;
  transition:opacity .3s,color .3s}
.nav-list a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--gold);transition:width .38s var(--ease)}
.nav-list a:hover,.nav-list a:focus-visible{opacity:1;color:var(--gold-lt)}
.nav-list a:hover::after,.nav-list a:focus-visible::after,
.nav-list a.is-active::after{width:100%}
.nav-list a.is-active{color:var(--gold);opacity:1}

.hdr-actions{display:flex;align-items:center;gap:14px}
.hdr-call{display:none;align-items:center;gap:8px;font-size:.76rem;
  letter-spacing:.1em;color:var(--ivory);opacity:.9;transition:color .3s}
.hdr-call:hover{color:var(--gold-lt)}
@media (min-width:640px){.hdr-call{display:inline-flex}}
.hdr-actions .btn{display:none}
@media (min-width:1024px){.hdr-actions .btn{display:inline-flex}}

.burger{width:44px;height:44px;display:grid;place-content:center;gap:6px;
  border:1px solid var(--line-soft)}
@media (min-width:1024px){.burger{display:none}}
.burger span{display:block;width:20px;height:1px;background:var(--ivory);
  transition:transform .35s var(--ease),opacity .25s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ── mobile menu ──────────────────────────────────────────────────── */
.mobile-menu{position:fixed;inset:0;z-index:880;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;gap:34px;
  padding:96px clamp(24px,7vw,56px) 48px;
  opacity:0;transform:translateY(-8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.mobile-menu[hidden]{display:none}
.mobile-menu.is-open{opacity:1;transform:none}
.mobile-menu ul{display:flex;flex-direction:column;gap:clamp(10px,2.2vh,22px)}
.mobile-menu a{font-family:var(--display);font-size:clamp(1.7rem,7vw,2.4rem);
  line-height:1.1;color:var(--ivory);transition:color .3s}
.mobile-menu a:hover{color:var(--gold)}
.mobile-menu .btn{align-self:flex-start}
.mobile-menu-tel a{font-family:var(--sans);font-size:.8rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}

/* ── hero ─────────────────────────────────────────────────────────── */
.hero{padding-bottom:clamp(112px,16vh,168px)}
@media (min-width:760px){.hero{padding-bottom:clamp(96px,13vh,150px)}}
.hero-in{position:relative;z-index:2;max-width:1180px;
  text-shadow:0 1px 26px rgba(6,18,13,.55)}
.hero-logo{width:clamp(112px,12vw,168px);margin-bottom:clamp(20px,3vh,34px)}
.hero h1{margin:0 0 18px}
.h1-name{display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(3.1rem,9vw,6.6rem);line-height:.94;letter-spacing:-.025em}
.h1-key{display:block;font-family:var(--sans);font-weight:300;
  font-size:clamp(.86rem,1.6vw,1.06rem);letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-lt);margin-top:clamp(14px,2vh,22px)}
.hero-sub{font-size:clamp(1rem,1.5vw,1.25rem);color:var(--ivory);max-width:34ch;
  font-weight:300}
.hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);
  margin-bottom:clamp(26px,4vh,40px)}
.hero-meta i{color:var(--gold);font-style:normal}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}

/* Centred, not right-aligned — the floating call/WhatsApp stack owns the
   bottom-right corner and the two were overlapping. */
.scroll-hint{position:absolute;left:50%;transform:translateX(-50%);
  bottom:clamp(20px,3.5vh,40px);
  z-index:2;display:none;flex-direction:column-reverse;align-items:center;gap:10px;
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--stone);
  pointer-events:none}
@media (min-width:900px){.scroll-hint{display:flex}}
.scroll-hint i{display:block;width:1px;height:44px;background:linear-gradient(var(--gold),transparent);
  animation:hintDrop 2.4s var(--ease) infinite}
@keyframes hintDrop{0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}

/* slow ken-burns on the hero plate */
[data-kenburns]{animation:kb 30s ease-in-out infinite alternate;will-change:transform}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.055)}}

/* ── fact strip ───────────────────────────────────────────────────── */
.factstrip{border-block:1px solid var(--line);background:var(--ink-2)}
.factstrip-list{display:grid;grid-template-columns:repeat(2,1fr);
  gap:0}
@media (min-width:760px){.factstrip-list{grid-template-columns:repeat(5,1fr)}}
.factstrip-list li{padding:22px clamp(12px,2vw,26px);border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft)}
@media (min-width:760px){.factstrip-list li{border-bottom:0}
  .factstrip-list li:last-child{border-right:0}}
.factstrip-list span{display:block;font-size:.6rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold);margin-bottom:7px}
.factstrip-list b{font-family:var(--display);font-weight:400;
  font-size:clamp(1rem,1.5vw,1.28rem);color:var(--ivory)}

/* ── section shells ───────────────────────────────────────────────── */
.section{padding-block:var(--sp-section);position:relative}
.section-alt{background:var(--ink-2)}
.center-cta{margin-top:clamp(38px,5vw,64px);text-align:center}

.grid-editorial{display:grid;gap:clamp(32px,5vw,80px)}
@media (min-width:960px){.grid-editorial{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  align-items:start}
  .col-statement{position:sticky;top:130px}}

.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);margin-top:clamp(34px,4vw,52px)}
.stats > div{background:var(--ink);padding:22px 20px}
.section-alt .stats > div{background:var(--ink-2)}
.stats dt{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:10px}
.stats dd{display:flex;flex-direction:column;gap:4px}
.stats b{font-family:var(--display);font-weight:400;font-size:clamp(2rem,3.4vw,2.9rem);
  line-height:1;color:var(--ivory)}
.stats span{font-size:.76rem;color:var(--stone)}

/* ── five elements (signature) ────────────────────────────────────── */
.section-elements{padding-bottom:0}
.elements{display:flex;flex-direction:column;gap:2px;margin-top:clamp(40px,5vw,66px);
  background:var(--line-soft)}
@media (min-width:900px){.elements{flex-direction:row;height:min(78vh,660px)}}

.element{position:relative;overflow:hidden;background:var(--ink);
  min-height:230px;isolation:isolate;
  transition:flex-grow .7s var(--ease-out)}
@media (min-width:900px){.element{flex:1 1 0;min-height:0}
  .element.is-open{flex-grow:3.4}}
.element img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2;transform:scale(1.06);filter:saturate(.9) brightness(.72);
  transition:transform 1s var(--ease-out),filter .7s var(--ease)}
.element.is-open img{transform:scale(1);filter:saturate(1) brightness(.9)}
.element::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(10,26,20,.94) 0%,rgba(10,26,20,.45) 45%,rgba(10,26,20,.2) 100%)}
.element-body{position:absolute;inset:auto 0 0 0;padding:clamp(20px,2.4vw,34px)}
.element-body h3{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.3rem);
  line-height:1;color:var(--ivory);margin-bottom:12px}
.element-body h3::before{content:"";display:block;width:30px;height:1px;
  background:var(--gold);margin-bottom:16px}
.element-body p{color:var(--sand);font-size:.9rem;line-height:1.6;max-width:38ch;margin:0}
@media (min-width:900px){
  .element-body p{opacity:0;transform:translateY(12px);
    transition:opacity .5s var(--ease) .12s,transform .5s var(--ease) .12s}
  .element.is-open .element-body p{opacity:1;transform:none}
  .element-body h3{writing-mode:vertical-rl;transform:rotate(180deg);
    position:absolute;left:clamp(20px,2.4vw,34px);bottom:clamp(20px,2.4vw,34px);
    letter-spacing:.06em;text-shadow:0 2px 18px rgba(6,18,13,.7)}
  .element-body h3::before{display:none}
  .element.is-open .element-body h3{writing-mode:horizontal-tb;transform:none;
    position:static;margin-bottom:14px}
  .element.is-open .element-body h3::before{display:block}
  .element.is-open .element-body{padding-left:clamp(20px,2.4vw,34px)}
  .element:not(.is-open) .element-body{padding-bottom:clamp(56px,6vw,90px)}
}

/* ── levels (a genuine sequence, so numbered) ─────────────────────── */
.levels{display:grid;gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);margin-top:clamp(38px,5vw,60px)}
@media (min-width:700px){.levels{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.levels{grid-template-columns:repeat(6,1fr)}}
.level{background:var(--ink);padding:clamp(22px,2.4vw,30px);
  transition:background-color .45s var(--ease)}
.level:hover{background:var(--ink-2)}
.level-no{display:block;font-family:var(--display);font-size:.9rem;
  color:var(--gold);margin-bottom:16px;letter-spacing:.08em}
.level h3{font-family:var(--display);font-size:clamp(1.15rem,1.6vw,1.4rem);
  color:var(--ivory);margin-bottom:8px}
.level p{font-size:.82rem;color:var(--stone);margin:0}

/* ── spec card ────────────────────────────────────────────────────── */
.spec-card{margin-top:clamp(34px,4vw,54px);border:1px solid var(--line);
  background:linear-gradient(140deg,rgba(32,68,49,.5),rgba(10,26,20,.5));
  display:grid;gap:clamp(26px,3vw,44px);padding:clamp(26px,3.4vw,48px)}
@media (min-width:900px){.spec-card{grid-template-columns:minmax(0,1.5fr) minmax(0,.6fr);
  align-items:center}}
.spec-card h3{font-family:var(--display);font-size:clamp(1.4rem,2.2vw,1.9rem);
  margin-bottom:14px}
.spec-card p{color:var(--stone);max-width:56ch}
.spec-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px 26px;margin-top:26px}
.spec-list dt{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:5px}
.spec-list dd{font-size:.92rem;color:var(--ivory);
  border-bottom:1px solid var(--line-soft);padding-bottom:9px}
.spec-card-cta{display:flex;flex-direction:column;gap:12px}

/* ── full-bleed image sections ────────────────────────────────────── */
.section-full{position:relative;min-height:88vh;display:grid;align-items:end;
  padding-block:clamp(90px,14vh,180px);isolation:isolate;overflow:hidden}
.section-full-short{min-height:62vh}
.section-full picture,.section-full img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-2}
.section-full::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(10,26,20,.95) 8%,rgba(10,26,20,.5) 55%,rgba(10,26,20,.7) 100%)}
.section-full-in{max-width:56ch}
.section-full-in p{color:var(--sand);margin-top:22px}

/* ── amenities grid ───────────────────────────────────────────────── */
.amen-grid{display:grid;gap:clamp(14px,1.6vw,22px);margin-top:clamp(40px,5vw,64px);
  grid-template-columns:1fr}
@media (min-width:620px){.amen-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.amen-grid{grid-template-columns:repeat(3,1fr)}}

.amen{position:relative;overflow:hidden;isolation:isolate;
  aspect-ratio:3/4;border:1px solid transparent;
  transition:border-color .45s var(--ease)}
.amen-tall{aspect-ratio:3/4}
@media (min-width:1000px){.amen-tall{aspect-ratio:4/5}}
.amen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform 1.1s var(--ease-out);filter:brightness(.78)}
.amen::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(10,26,20,.95) 4%,rgba(10,26,20,.35) 55%,rgba(10,26,20,.15) 100%)}
.amen:hover{border-color:var(--line)}
.amen:hover img{transform:scale(1.07)}
.amen-body{position:absolute;inset:auto 0 0 0;padding:clamp(20px,2.2vw,30px)}
.amen-cat{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);margin-bottom:10px}
.amen-body h3{font-family:var(--display);font-size:clamp(1.25rem,1.9vw,1.6rem);
  color:var(--ivory);margin:0}
.amen-list{margin-top:16px;display:grid;gap:7px;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .55s var(--ease-out),opacity .4s var(--ease)}
.amen:hover .amen-list,.amen:focus-within .amen-list{max-height:200px;opacity:1}
@media (hover:none){.amen-list{max-height:200px;opacity:1}}
.amen-list li{font-size:.83rem;color:var(--sand);padding-left:16px;position:relative}
.amen-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;
  background:var(--gold)}

/* ── floor plans ──────────────────────────────────────────────────── */
.plans{margin-top:clamp(38px,5vw,58px)}











/* ── gallery ──────────────────────────────────────────────────────── */
.gallery-grid{display:grid;gap:clamp(12px,1.4vw,18px);margin-top:clamp(40px,5vw,64px);
  grid-template-columns:1fr}
@media (min-width:640px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.gallery-grid{grid-template-columns:repeat(3,1fr)}
  .gal-wide{grid-column:span 2}}
.gal{position:relative;overflow:hidden}
.gal button{display:block;width:100%;height:100%;position:relative;overflow:hidden;
  aspect-ratio:4/3}
.gal-wide button{aspect-ratio:16/9}
@media (min-width:1000px){.gal button{aspect-ratio:3/4}
  .gal-wide button{aspect-ratio:16/9}}
.gal img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease-out),filter .5s var(--ease);filter:brightness(.86)}
.gal button:hover img,.gal button:focus-visible img{transform:scale(1.06);filter:brightness(1)}
.gal figcaption{position:absolute;left:0;bottom:0;right:0;padding:18px 20px;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory);
  background:linear-gradient(to top,rgba(10,26,20,.9),transparent);
  text-align:left;opacity:0;transform:translateY(8px);
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.gal button:hover figcaption,.gal button:focus-visible figcaption{opacity:1;transform:none}
@media (hover:none){.gal figcaption{opacity:1;transform:none}}

/* ── location ─────────────────────────────────────────────────────── */
.loc-grid{display:grid;gap:clamp(30px,4vw,56px);margin-top:clamp(40px,5vw,60px)}
@media (min-width:1000px){.loc-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.loc-map figure{border:1px solid var(--line-soft);background:#fff}
.loc-map button{display:block;width:100%;cursor:zoom-in}
.loc-map figcaption{font-size:.76rem;color:var(--stone);padding:12px 16px;
  background:var(--ink);border-top:1px solid var(--line-soft)}
.section-alt .loc-map figcaption{background:var(--ink-2)}
.map-embed{margin-top:16px;border:1px dashed var(--line);padding:22px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.map-embed p{margin:0;font-size:.8rem;color:var(--stone)}
.map-embed span{color:var(--gold)}

.loc-body h3{font-family:var(--display);font-size:clamp(1.3rem,2vw,1.7rem);
  margin:0 0 16px}
.loc-body h3 + h3{margin-top:38px}
.loc-roads{display:flex;flex-wrap:wrap;gap:8px}
.loc-roads li{border:1px solid var(--line);padding:8px 15px;font-size:.76rem;
  letter-spacing:.08em;color:var(--sand)}
.loc-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:24px 30px;margin-top:8px}
.loc-cols h4{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin:0 0 12px;font-weight:400}
.loc-cols li{font-size:.88rem;color:var(--sand);padding:5px 0;
  border-bottom:1px solid var(--line-soft)}
.loc-body .btn{margin-top:28px}

/* ── developer ────────────────────────────────────────────────────── */
.dev-points{display:grid;gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);margin-top:clamp(30px,3.5vw,44px)}
.dev-points li{background:var(--ink);padding:22px 24px}
.section-alt .dev-points li{background:var(--ink-2)}
.dev-points h3{font-family:var(--display);font-size:1.2rem;margin-bottom:7px;
  color:var(--ivory)}
.dev-points p{font-size:.88rem;color:var(--stone);margin:0}

/* ── why invest ───────────────────────────────────────────────────── */
.invest-grid{display:grid;gap:clamp(18px,2vw,26px);margin-top:clamp(38px,5vw,58px);
  grid-template-columns:1fr}
@media (min-width:700px){.invest-grid{grid-template-columns:repeat(2,1fr)}}
.invest-grid article{border-top:1px solid var(--line);padding-top:24px}
.invest-grid h3{font-family:var(--display);font-size:clamp(1.25rem,1.9vw,1.6rem);
  margin-bottom:12px}
.invest-grid p{color:var(--stone);margin:0}
.disclaimer-inline{margin-top:clamp(30px,4vw,44px);font-size:.82rem;color:var(--stone);
  border-left:1px solid var(--line);padding-left:18px;max-width:76ch}

/* ── quick facts (GEO block) ──────────────────────────────────────── */
.quickfacts{margin-top:clamp(34px,4vw,50px);border-top:1px solid var(--line-soft)}
.quickfacts > div{display:grid;gap:4px;padding:16px 0;
  border-bottom:1px solid var(--line-soft)}
@media (min-width:720px){.quickfacts > div{grid-template-columns:minmax(0,.34fr) minmax(0,1fr);
  gap:24px;align-items:baseline}}
.quickfacts dt{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold)}
.quickfacts dd{color:var(--ivory);font-size:.96rem}
.quickfacts dd a{color:var(--gold);border-bottom:1px solid var(--line)}

/* ── FAQ ──────────────────────────────────────────────────────────── */
.faq-wrap{max-width:920px}
.faq{margin-top:clamp(34px,4vw,50px);border-top:1px solid var(--line-soft)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-family:var(--display);font-size:clamp(1.08rem,1.7vw,1.4rem);
  color:var(--ivory);display:inline;transition:color .3s}
.faq summary:hover h3{color:var(--gold-lt)}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:13px;height:1px;
  background:var(--gold);transition:transform .35s var(--ease)}
.faq summary::before{content:"";position:absolute;right:12px;top:50%;width:1px;height:13px;
  background:var(--gold);transform:translateY(-50%);transition:transform .35s var(--ease),opacity .3s}
.faq details[open] summary::before{opacity:0;transform:translateY(-50%) rotate(90deg)}
.faq details > div{padding:0 clamp(0px,4vw,60px) 24px 0;
  animation:faqIn .4s var(--ease)}
.faq details p{color:var(--stone);margin:0}
.faq details a{color:var(--gold);border-bottom:1px solid var(--line)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── final CTA ────────────────────────────────────────────────────── */
.final-cta{position:relative;min-height:92vh;display:grid;place-items:center;
  text-align:center;isolation:isolate;overflow:hidden;padding-block:clamp(90px,12vh,150px)}
.final-cta picture,.final-cta > picture img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-2}
.final-cta::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 90% at 50% 60%,rgba(10,26,20,.72),rgba(10,26,20,.96))}
.final-cta-in{display:grid;justify-items:center;gap:22px;max-width:760px}
.final-cta-in img{width:clamp(110px,11vw,150px)}
.final-cta-in p{color:var(--sand);margin:0}
.final-cta .hero-cta{justify-content:center;margin-top:10px}

/* ── footer ───────────────────────────────────────────────────────── */
.site-footer{background:var(--ink-2);border-top:1px solid var(--line);
  padding-block:clamp(56px,7vw,88px) 0}
.footer-grid{display:grid;gap:clamp(34px,4vw,56px)}
@media (min-width:860px){.footer-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr) minmax(0,.9fr)}}
.footer-brand img{width:clamp(120px,11vw,155px);margin-bottom:22px}
.footer-brand p{color:var(--stone);font-size:.9rem;max-width:44ch}
.site-footer h2{font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);margin-bottom:20px;font-weight:400}
.footer-nav ul{display:grid;gap:10px}
.footer-nav a{font-size:.9rem;color:var(--sand);transition:color .3s}
.footer-nav a:hover{color:var(--gold-lt)}
.footer-contact p{margin-bottom:12px}
.footer-tel{font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2rem);color:var(--ivory);
  transition:color .3s}
.footer-tel:hover{color:var(--gold)}
.footer-contact a{color:var(--sand);transition:color .3s}
.footer-contact a:hover{color:var(--gold-lt)}
.footer-addr{font-size:.88rem;color:var(--stone);line-height:1.6}
.footer-contact .btn{margin-top:8px}

.footer-legal{margin-top:clamp(44px,5vw,64px);padding-block:30px 34px;
  border-top:1px solid var(--line-soft);display:grid;gap:22px;align-items:start}
@media (min-width:760px){.footer-legal{grid-template-columns:150px 1fr;gap:34px}}
.partner-badge{width:130px;opacity:.75}
.footer-legal p{font-size:.76rem;line-height:1.7;color:var(--stone);margin-bottom:12px}
.footer-copy{padding-top:10px;border-top:1px solid var(--line-soft)}
.footer-copy a{color:var(--gold);margin-left:4px}

/* ── floating actions ─────────────────────────────────────────────── */
.float{position:fixed;z-index:820;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink);
  box-shadow:0 10px 30px rgba(0,0,0,.42);
  transition:transform .35s var(--ease),background-color .35s}
.float:hover{transform:translateY(-3px) scale(1.05)}
.float-wa{right:clamp(16px,2.4vw,28px);bottom:calc(clamp(16px,2.4vw,28px) + 78px);
  background:#25D366}
.float-call{right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);
  background:var(--gold)}
.float-pulse{position:absolute;inset:0;border-radius:50%;border:1px solid #25D366;
  animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}
@media (max-width:759px){
  .float-call{display:none}
  .float-wa{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
}

/* ── sticky mobile bar ────────────────────────────────────────────── */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:830;display:grid;
  grid-template-columns:repeat(3,1fr);background:rgba(10,26,20,.95);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (min-width:760px){.mobile-bar{display:none}}
.mobile-bar > *{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;min-height:62px;padding:9px 6px;
  font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory);
  border-right:1px solid var(--line-soft)}
.mobile-bar > *:last-child{border-right:0;color:var(--gold)}
.mobile-bar svg{opacity:.85}

/* ── modal ────────────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;
  padding:clamp(12px,3vw,40px)}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(4,12,9,.86);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;
  transition:opacity .4s var(--ease)}
.modal.is-open .modal-backdrop{opacity:1}
.modal-panel{position:relative;width:min(1020px,100%);max-height:min(92vh,900px);
  overflow-y:auto;background:var(--ink);border:1px solid var(--line);
  display:grid;opacity:0;transform:translateY(18px) scale(.985);
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.modal.is-open .modal-panel{opacity:1;transform:none}
@media (min-width:860px){.modal-panel{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.modal-media{display:none;position:relative;overflow:hidden;min-height:100%}
@media (min-width:860px){.modal-media{display:block}}
.modal-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.8)}
.modal-form{padding:clamp(28px,3.6vw,52px)}
.modal-intro{color:var(--stone);font-size:.92rem;margin-bottom:26px}
.modal-x{position:absolute;right:12px;top:12px;z-index:3;width:42px;height:42px;
  display:grid;place-items:center;color:var(--ivory);background:rgba(10,26,20,.6);
  border:1px solid var(--line-soft);transition:color .3s,border-color .3s}
.modal-x:hover{color:var(--gold);border-color:var(--gold)}

/* ── form ─────────────────────────────────────────────────────────── */
.field{margin-bottom:18px}
.field label{display:block;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:8px}
.field label span[aria-hidden]{color:var(--gold);margin-left:3px}
.field .opt{letter-spacing:.06em;text-transform:none;color:var(--stone)}
.field input,.field select,.field textarea{width:100%;background:transparent;
  border:0;border-bottom:1px solid var(--line-soft);color:var(--ivory);
  font-family:var(--sans);font-size:1rem;font-weight:300;padding:11px 0;
  border-radius:0;transition:border-color .3s}
.field textarea{resize:vertical;min-height:74px}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),
  linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 12px) 22px,calc(100% - 7px) 22px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  -webkit-appearance:none;appearance:none;padding-right:28px}
.field select option{background:var(--ink);color:var(--ivory)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;
  border-bottom-color:var(--gold)}
.field input::placeholder,.field textarea::placeholder{color:rgba(154,164,156,.6)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-bottom-color:#E08A7A}

.phone-wrap{display:flex;align-items:baseline;gap:10px;
  border-bottom:1px solid var(--line-soft);transition:border-color .3s}
.phone-wrap:focus-within{border-bottom-color:var(--gold)}
.phone-wrap input{border-bottom:0}
.phone-cc{font-size:.95rem;color:var(--stone);flex:0 0 auto}

.err{font-size:.76rem;color:#E08A7A;margin:7px 0 0;min-height:0}
.err:empty{display:none}
.form-err{margin-top:14px}
.consent{font-size:.72rem;color:var(--stone);line-height:1.6;margin:16px 0 0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.modal-success{padding:clamp(36px,5vw,64px);text-align:center;display:grid;
  justify-items:center;gap:18px;grid-column:1/-1}
.modal-success[hidden]{display:none}
.modal-success img{width:120px}
.modal-success p{color:var(--sand);margin:0}
.success-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:8px}

/* ── lightbox ─────────────────────────────────────────────────────── */
.lightbox{position:fixed;inset:0;z-index:1100;display:grid;place-items:center}
.lightbox[hidden]{display:none}
.lightbox-backdrop{position:absolute;inset:0;background:rgba(4,12,9,.95)}
.lightbox-inner{position:relative;width:min(1500px,94vw);max-height:92vh;
  display:grid;place-items:center;opacity:0;transform:scale(.98);
  transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}
.lightbox.is-open .lightbox-inner{opacity:1;transform:none}
.lightbox figure{max-width:100%}
.lightbox img{max-width:100%;max-height:80vh;object-fit:contain;background:var(--ink-2)}
.lightbox figcaption{display:flex;justify-content:space-between;gap:20px;
  padding-top:14px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--stone)}
.lightbox figcaption i{font-style:normal;color:var(--gold)}
.lb-btn{position:absolute;z-index:2;width:52px;height:52px;display:grid;place-items:center;
  color:var(--ivory);border:1px solid var(--line-soft);background:rgba(10,26,20,.55);
  transition:color .3s,border-color .3s,background-color .3s}
.lb-btn:hover{color:var(--gold);border-color:var(--gold)}
.lb-close{right:-6px;top:-58px}
@media (max-width:900px){.lb-close{right:0;top:-54px}}
.lb-prev{left:-6px;top:50%;transform:translateY(-50%)}
.lb-next{right:-6px;top:50%;transform:translateY(-50%)}
@media (max-width:900px){.lb-prev{left:0}.lb-next{right:0}}

/* ── cookie consent ───────────────────────────────────────────────── */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:960;
  background:rgba(10,26,20,.96);border-top:1px solid var(--line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding:14px 0 calc(14px + env(safe-area-inset-bottom,0px));
  transform:translateY(100%);transition:transform .5s var(--ease-out)}
.cookie[hidden]{display:none}
.cookie.is-open{transform:none}
@media (max-width:759px){.cookie{bottom:62px}}
.cookie-in{width:min(1360px,100% - 2 * clamp(20px,5vw,64px));margin-inline:auto;
  display:grid;gap:14px}
@media (min-width:1000px){.cookie-in{grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:32px}
  .cookie-prefs{grid-column:1/-1}}
.cookie p{margin:0;font-size:.78rem;line-height:1.5;color:var(--sand);max-width:78ch}
.cookie-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cookie-prefs{border:0;margin:0;padding:14px 0 0;display:grid;gap:10px;
  border-top:1px solid var(--line-soft)}
.cookie-prefs[hidden]{display:none}
.cookie-prefs label{display:flex;align-items:center;gap:10px;font-size:.82rem;
  color:var(--sand)}
.cookie-prefs input{accent-color:var(--gold);width:16px;height:16px}
.cookie-prefs .btn{justify-self:start;margin-top:4px}

/* ── custom cursor (desktop, pointer:fine only) ───────────────────── */
.cursor{display:none}
@media (hover:hover) and (pointer:fine) and (min-width:1180px){
  .cursor{display:block;position:fixed;top:0;left:0;z-index:1200;
    pointer-events:none;mix-blend-mode:difference;
    transform:translate3d(-100px,-100px,0)}
  .cursor i{display:block;width:26px;height:26px;margin:-13px 0 0 -13px;
    border:1px solid rgba(245,241,232,.7);border-radius:50%;
    transition:transform .3s var(--ease),background-color .3s,border-color .3s}
  .cursor.is-hot i{transform:scale(1.75);background:rgba(245,241,232,.9);
    border-color:transparent}
}

/* ── scroll reveal ────────────────────────────────────────────────── */
/* Without JavaScript there is nothing to trigger a reveal, so content
   must start visible rather than start hidden and wait forever. */
html:not(.js) [data-reveal]{opacity:1 !important;transform:none !important}
html:not(.js) #preloader{display:none}
[data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}

/* ── reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;
    animation-iteration-count:1 !important;transition-duration:.001ms !important}
  [data-reveal]{opacity:1;transform:none}
  [data-kenburns]{animation:none}
  .float-pulse{display:none}
  .cursor{display:none}
}

/* ── print ────────────────────────────────────────────────────────── */
@media print{
  .site-header,.rail,.float,.mobile-bar,.cookie,.modal,.lightbox,
  .scroll-hint,.cursor,.mobile-menu{display:none !important}
  body{background:#fff;color:#111}
  .section-full::after,.final-cta::after,.hero-scrim{display:none}
  [data-reveal]{opacity:1;transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   FLOOR PLANS
   Append to assets/css/style.css. Replaces the old .plan-* rules.

   The plans are tall portrait drawings (aspect between 1.7 and 2.5).
   A phone is also tall and narrow, so they fit well there; the harder
   case is desktop, where a full-width plan would be absurdly tall. The
   layout therefore caps the plan height and sets the width from that.

   Colours reference the existing design tokens, with fallbacks so this
   block still renders if it is lifted into another page.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tabs ─────────────────────────────────────────────────────────────
   Six labels do not fit across a 320px screen. Rather than wrapping them
   into three ragged rows, the strip scrolls sideways and snaps. */
.plan-tabs-wrap{position:relative;margin-bottom:clamp(22px,3vw,34px)}
.plan-tabs-wrap::after{content:"";position:absolute;inset-block:0;right:0;width:44px;
  pointer-events:none;background:linear-gradient(to right,transparent,var(--ink-2,#0F2A20))}

.plan-tabs{display:flex;gap:8px;list-style:none;margin:0;padding:0 0 2px;
  overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch}
.plan-tabs::-webkit-scrollbar{display:none}
.plan-tabs li{flex:0 0 auto;scroll-snap-align:start}

.plan-tabs button{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background:transparent;color:var(--stone,#9AA49C);
  border:1px solid rgba(199,164,94,.24);border-radius:2px;
  font-family:var(--sans,system-ui);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;
  padding:13px 18px;min-height:44px;               /* 44px = comfortable tap target */
  transition:color .3s ease,border-color .3s ease,background .3s ease}
.plan-tabs button:hover{color:var(--gold-lt,#E3CB96);border-color:rgba(199,164,94,.5)}
.plan-tabs button[aria-selected="true"]{
  color:var(--ink,#0A1A14);background:var(--gold,#C7A45E);border-color:var(--gold,#C7A45E)}
.plan-tabs button:focus-visible{outline:2px solid var(--gold-lt,#E3CB96);outline-offset:3px}

/* ── The plan itself ─────────────────────────────────────────────────── */
.plan-stage{position:relative}
/* A landscape sheet wants the full width, so the level notes sit beneath
   it rather than beside it — a side column would squeeze the sheet into
   the narrow half of the row, which is the opposite of what it needs. */
.plan-figure{margin:0;display:grid;gap:clamp(20px,3vw,30px);
  justify-items:center;align-content:start}

/* A button, not a div, so it is keyboard reachable and announces itself. */
.plan-frame{
  display:block;position:relative;cursor:zoom-in;
  padding:0;border:1px solid rgba(199,164,94,.2);border-radius:3px;
  background:#fff;                                  /* plans are drawn on white */
  overflow:hidden;line-height:0;
  width:100%;
  /* Past ~1100px the sheet stops gaining readable detail and just makes
     the section taller, so it is capped rather than left to fill 1920px. */
  max-width:min(100%,1100px);
  transition:border-color .3s ease,box-shadow .3s ease}
.plan-frame:hover{border-color:rgba(199,164,94,.5);
  box-shadow:0 18px 50px rgba(0,0,0,.32)}
.plan-frame:focus-visible{outline:2px solid var(--gold,#C7A45E);outline-offset:4px}

/* The sheets are landscape (roughly 1.41:1), so width leads and height
   follows. Both sheets share the same proportions, so nothing jumps when
   the tab changes. */
.plan-frame img{display:block;width:100%;height:auto;max-width:100%}

.plan-zoom-cue{
  position:absolute;right:10px;bottom:10px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 12px;border-radius:2px;
  background:rgba(10,26,20,.86);color:var(--gold-lt,#E3CB96);
  font-family:var(--sans,system-ui);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;line-height:1;pointer-events:none}

/* ── Level notes ─────────────────────────────────────────────────────── */
.plan-detail{max-width:100%;width:100%;max-width:1100px;text-align:left}

.plan-level{margin:0 0 16px;
  font-family:var(--display,Georgia,serif);font-weight:400;
  font-size:clamp(1.35rem,1.1rem + .8vw,2rem);line-height:1.15;
  color:var(--ivory,#F5F1E8)}
/* What each sheet contains, so the tab label is not the only clue. */
.plan-levels{list-style:none;margin:0 0 22px;padding:0;
  display:grid;gap:10px}
@media (min-width:760px){
  .plan-levels{grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,32px)}
}
.plan-levels li{color:var(--stone,#9AA49C);font-size:.88rem;line-height:1.6;
  padding-left:14px;border-left:1px solid rgba(199,164,94,.28)}
.plan-levels b{display:block;color:var(--ivory,#F5F1E8);font-weight:400;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:4px}

.plan-viewbtn{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:12px 20px;
  background:transparent;color:var(--gold-lt,#E3CB96);
  border:1px solid rgba(199,164,94,.42);border-radius:2px;
  font-family:var(--sans,system-ui);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;
  transition:background .25s ease,border-color .25s ease,color .25s ease}
.plan-viewbtn:hover{background:rgba(199,164,94,.12);
  border-color:var(--gold,#C7A45E);color:var(--gold,#C7A45E)}
.plan-viewbtn:focus-visible{outline:2px solid var(--gold,#C7A45E);outline-offset:3px}

.plan-disclaimer{
  max-width:78ch;margin:clamp(26px,4vw,40px) auto 0;text-align:center;
  color:var(--stone,#9AA49C);opacity:.78;
  font-size:.72rem;line-height:1.65}

/* ── Small screens ───────────────────────────────────────────────────── */
@media (max-width:640px){
  .plan-tabs button{padding:12px 14px;font-size:.64rem;letter-spacing:.1em}
  .plan-disclaimer{text-align:left;font-size:.68rem}
  /* Three plans across a phone screen is about 110px each — the sheet is
     a thumbnail at this size and the zoom is how it is actually read, so
     the cue spans the frame instead of hiding in a corner. */
  .plan-zoom-cue{left:8px;right:8px;bottom:8px;justify-content:center;
    font-size:.62rem;padding:10px 12px}
  .plan-level{font-size:1.2rem}
}


/* ═══════════════════════════════════════════════════════════════════════
   ZOOM VIEWER
   Dimension text on a floor plan is unreadable at page scale on a phone.
   This is a full-screen scroll container: the image is sized by a zoom
   factor and the container scrolls, which gives correct pan behaviour on
   both touch and mouse without reimplementing gestures in JavaScript.
   ═══════════════════════════════════════════════════════════════════════ */
.plan-viewer{
  position:fixed;inset:0;z-index:1200;
  display:flex;flex-direction:column;
  background:rgba(6,18,13,.97);
  opacity:0;transition:opacity .28s ease}
.plan-viewer.is-open{opacity:1}
.plan-viewer[hidden]{display:none}

.plan-viewer-bar{
  flex:0 0 auto;display:flex;align-items:center;gap:14px;
  padding:calc(12px + env(safe-area-inset-top,0px)) 14px 12px;
  border-bottom:1px solid rgba(199,164,94,.16)}
.plan-viewer-title{
  flex:1;margin:0;min-width:0;
  color:var(--gold-lt,#E3CB96);
  font-family:var(--sans,system-ui);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plan-viewer-tools{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.plan-viewer-tools button{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  width:44px;height:44px;                            /* full tap target */
  display:grid;place-items:center;
  background:transparent;color:var(--ivory,#F5F1E8);
  border:1px solid rgba(199,164,94,.3);border-radius:2px;
  font-size:1.15rem;line-height:1;
  transition:background .25s ease,border-color .25s ease}
.plan-viewer-tools button:hover{background:rgba(199,164,94,.14);
  border-color:rgba(199,164,94,.6)}
.plan-viewer-tools button:focus-visible{outline:2px solid var(--gold,#C7A45E);outline-offset:2px}
.plan-viewer-tools button[disabled]{opacity:.35;cursor:default}
.plan-viewer-level{
  min-width:52px;text-align:center;
  color:var(--stone,#9AA49C);font-size:.7rem;
  font-variant-numeric:tabular-nums}
.plan-viewer-close{font-size:1.5rem !important}

.plan-viewer-jump{
  flex:0 0 auto;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
  padding:10px 14px;border-bottom:1px solid rgba(199,164,94,.12)}
.plan-viewer-jump[hidden]{display:none}
.plan-jump-chip{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  min-height:40px;padding:10px 16px;
  background:transparent;color:var(--stone,#9AA49C);
  border:1px solid rgba(199,164,94,.28);border-radius:2px;
  font-family:var(--sans,system-ui);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;white-space:nowrap;
  transition:color .25s ease,border-color .25s ease,background .25s ease}
.plan-jump-chip:hover{color:var(--gold-lt,#E3CB96);border-color:rgba(199,164,94,.55)}
.plan-jump-chip.is-active{color:var(--ink,#0A1A14);background:var(--gold,#C7A45E);
  border-color:var(--gold,#C7A45E)}
.plan-jump-chip:focus-visible{outline:2px solid var(--gold,#C7A45E);outline-offset:2px}

.plan-viewer-scroll{
  flex:1;overflow:auto;
  -webkit-overflow-scrolling:touch;
  touch-action:pinch-zoom pan-x pan-y;              /* let the OS do pinch */
  overscroll-behavior:contain;
  display:grid;place-items:center;
  padding:14px;
  cursor:grab}
.plan-viewer-scroll.is-panning{cursor:grabbing}
.plan-viewer-scroll img{
  display:block;background:#fff;border-radius:2px;
  max-width:none}
/* No width transition here on purpose. Animating the width means the
   element is still at its old size on the next frame, so any scroll set
   immediately after a zoom gets clamped against the smaller scrollable
   area — which silently broke the jump-to-level chips. Instant resize is
   also snappier on a 2646px image than a reflow animated over 180ms. */

.plan-viewer-hint{
  flex:0 0 auto;margin:0;text-align:center;
  padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px));
  color:var(--stone,#9AA49C);opacity:.7;font-size:.68rem;letter-spacing:.06em;
  transition:opacity .4s ease}
.plan-viewer-hint.is-faded{opacity:0}

body.plan-viewer-open{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .plan-viewer,.plan-viewer-hint,
  .plan-frame,.plan-tabs button,.plan-jump-chip{transition:none}
}