/* ==========================================================================
   RG Pleiaddes — Sector 1, Greater Noida West
   Marketed by IT Bell Realty (authorised channel partner)

   Brand tokens sampled from the official RG's Pleiaddes brochure lockup:
   navy #093252 (wordmark) · gold #DFB348 (star) · cream #F4F1EC (page)
   ========================================================================== */

:root{
  /* --- colour ------------------------------------------------------------ */
  --night:      #04121F;   /* deepest sky — dark section ground             */
  --navy:       #093252;   /* brand navy, straight off the wordmark         */
  --navy-lift:  #0D3E63;   /* raised navy surface                            */
  --gold:       #DFB348;   /* brand gold, straight off the star              */
  --gold-deep:  #A8792A;   /* gold that passes contrast on cream             */
  --champagne:  #F0DCA8;   /* gold highlight on dark                         */
  --paper:      #F4F1EC;   /* brand cream                                    */
  --paper-warm: #EBE5D9;   /* cream, one step down                           */
  --ink:        #101F2C;   /* body text on cream                             */
  --ink-soft:   #4A5B69;
  --mist:       rgba(244,241,236,.62);  /* body text on navy                 */
  --mist-faint: rgba(244,241,236,.30);
  --hair:       rgba(223,179,72,.28);   /* gold hairline                     */
  --hair-ink:   rgba(16,31,44,.14);
  --maroon:     #6B0F14;   /* RG Group wordmark only                         */

  /* --- type -------------------------------------------------------------- */
  --display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --data:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* --- metrics ----------------------------------------------------------- */
  --gutter: clamp(20px, 5vw, 72px);
  --measure: 64ch;
  --rail-w: 168px;
  --bar-h: 74px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img,svg,iframe,canvas{ display:block; max-width:100%; }
img{ height:auto; }

a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

h1,h2,h3,h4{ margin:0; font-weight:400; font-size:inherit; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
ul,ol{ margin:0; padding:0; }

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

::selection{ background:var(--gold); color:var(--night); }

.visually-hidden{
  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:absolute; top:-100px; left:var(--gutter); z-index:200;
  background:var(--gold); color:var(--night);
  padding:12px 20px; font-family:var(--data); font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase;
}
.skip-link:focus{ top:14px; }

/* ==========================================================================
   Type roles
   ========================================================================== */

.display{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:400;
  line-height:.98;
  letter-spacing:-.018em;
}

.h1{ font-size:clamp(2.9rem, 1.4rem + 6.2vw, 6.4rem); }
.h2{ font-size:clamp(2.05rem, 1.3rem + 3.1vw, 3.5rem); line-height:1.03; }
.h3{ font-size:clamp(1.35rem, 1.15rem + .8vw, 1.85rem); line-height:1.18; }

.h1 em, .h2 em{
  display:block; font-style:italic;
  font-size:.42em; letter-spacing:.005em; line-height:1.25;
  margin-top:.55em;
}
.h2 em{ font-size:.5em; margin-top:.4em; }

/* eyebrow — the small mono label that sits above every section title */
.eyebrow{
  font-family:var(--data);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-deep);
  display:flex;
  align-items:center;
  gap:.7em;
  margin:0 0 1.6rem;
}
.eyebrow::before{
  content:""; width:26px; height:1px; flex:none;
  background:currentColor; opacity:.55;
}
.on-dark .eyebrow{ color:var(--gold); }

.lede{
  font-size:clamp(1.1rem, 1rem + .5vw, 1.35rem);
  line-height:1.62;
  color:var(--ink-soft);
  max-width:52ch;
}
.on-dark .lede{ color:var(--mist); }

.prose{ max-width:var(--measure); }
.prose p + p{ margin-top:0; }
.on-dark .prose{ color:var(--mist); }

.data{
  font-family:var(--data);
  font-size:.78rem;
  letter-spacing:.06em;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.wrap{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.band{ padding-block:clamp(76px, 10.5vw, 156px); position:relative; }
.band-tight{ padding-block:clamp(56px, 7vw, 96px); }

.on-paper{ background:var(--paper); color:var(--ink); }
.on-warm{ background:var(--paper-warm); color:var(--ink); }
.on-dark{ background:var(--night); color:var(--paper); }
.on-navy{ background:var(--navy); color:var(--paper); }

/* the split: a narrow label rail on the left, content on the right */
.split{
  display:grid;
  gap:clamp(28px, 4vw, 64px);
  grid-template-columns:1fr;
}
@media (min-width:1000px){
  .split{ grid-template-columns:var(--rail-w) minmax(0,1fr); }
  .split-wide{ grid-template-columns:var(--rail-w) minmax(0,1fr); }
}

.split-aside{
  font-family:var(--data);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  line-height:1.9;
}
.on-dark .split-aside{ color:var(--mist-faint); }
.split-aside .star-name{
  display:block;
  font-family:var(--display);
  font-style:italic;
  font-size:1.15rem;
  letter-spacing:0;
  text-transform:none;
  color:var(--gold-deep);
  margin-top:.35rem;
}
.on-dark .split-aside .star-name{ color:var(--gold); }
@media (min-width:1000px){
  .split-aside{ padding-top:.5rem; border-top:1px solid var(--hair-ink); }
  .on-dark .split-aside{ border-top-color:var(--hair); }
}

.cols-2{ display:grid; gap:clamp(28px,4vw,56px); grid-template-columns:1fr; }
@media (min-width:820px){ .cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ==========================================================================
   Rules & hairlines
   ========================================================================== */

.rule{ height:1px; background:var(--hair-ink); border:0; margin:0; }
.on-dark .rule{ background:var(--hair); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:1.05em 2.1em;
  font-family:var(--data); font-size:.76rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  border:1px solid transparent; border-radius:0;
  cursor:pointer; position:relative; overflow:hidden;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn-gold{ background:var(--gold); color:var(--night); }
.btn-gold:hover{ background:var(--champagne); }
.btn-ghost{ background:transparent; color:var(--paper); border-color:rgba(244,241,236,.34); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn-ink{ background:transparent; color:var(--ink); border-color:var(--hair-ink); }
.btn-ink:hover{ background:var(--navy); color:var(--paper); border-color:var(--navy); }
.btn-block{ width:100%; }

/* a text link that underlines from the left on hover */
.link{
  display:inline-flex; align-items:baseline; gap:.5em;
  font-family:var(--data); font-size:.76rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-deep);
  padding-bottom:.35em; position:relative;
}
.on-dark .link{ color:var(--gold); }
.link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(.28); transform-origin:left;
  transition:transform .5s var(--ease);
}
.link:hover::after{ transform:scaleX(1); }

/* ==========================================================================
   Brand lockup (crisp everywhere — mirrors the official mark)
   ========================================================================== */

.brand{ display:inline-flex; align-items:center; gap:.7rem; }
.brand-star{ width:30px; height:30px; flex:none; color:var(--gold); }
.brand-text{ display:block; line-height:1; }
.brand-rg{
  display:block; font-family:var(--body); font-weight:600;
  font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.28em;
}
.brand-name{
  display:block; font-family:var(--display); font-weight:500;
  font-size:1.42rem; letter-spacing:.002em; color:var(--paper);
}
.brand-tag{
  display:block; font-family:var(--data); font-size:.52rem;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--mist-faint); margin-top:.42em;
}
.brand-ink .brand-name{ color:var(--navy); }
.brand-ink .brand-rg{ color:var(--gold-deep); }
.brand-ink .brand-tag{ color:var(--ink-soft); }

/* ==========================================================================
   Header
   ========================================================================== */

.masthead{
  position:fixed; inset:0 0 auto; z-index:90;
  height:var(--bar-h);
  display:flex; align-items:center;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), height .5s var(--ease);
}
.masthead::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(4,18,31,.72), rgba(4,18,31,0));
  transition:opacity .5s var(--ease);
}
.masthead.is-stuck{ background:rgba(4,18,31,.94); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--hair); }
.masthead.is-stuck::before{ opacity:0; }

.masthead .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

.nav{ display:none; }
@media (min-width:1000px){
  .nav{ display:flex; align-items:center; gap:clamp(1.4rem,2.4vw,2.6rem); }
}
.nav a{
  font-family:var(--data); font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mist);
  padding-block:.4em; position:relative;
  transition:color .35s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"]{ color:var(--paper); }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after{ transform:scaleX(1); }

.masthead-cta{ display:none; }
@media (min-width:1180px){ .masthead-cta{ display:inline-flex; padding:.85em 1.6em; font-size:.7rem; } }

/* burger */
.burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:6px;
  width:44px; height:44px; padding:0 10px; margin-right:-10px;
  background:none; border:0; cursor:pointer;
}
@media (min-width:1000px){ .burger{ display:none; } }
.burger span{
  display:block; height:1px; background:var(--paper);
  transition:transform .45s var(--ease), opacity .3s var(--ease);
}
.burger span:nth-child(1){ width:24px; }
.burger span:nth-child(2){ width:16px; margin-left:auto; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ width:24px; transform:translateY(-3.5px) rotate(-45deg); }

/* drawer */
.drawer{
  position:fixed; inset:0; z-index:80;
  background:var(--night);
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--bar-h) + 24px) var(--gutter) 40px;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--ease);
  visibility:hidden;
}
.drawer.is-open{ clip-path:inset(0 0 0 0); visibility:visible; }
.drawer nav{ display:flex; flex-direction:column; gap:.2rem; }
.drawer nav a{
  font-family:var(--display); font-size:clamp(2rem,9vw,3rem);
  color:var(--paper); padding-block:.22em;
  border-bottom:1px solid var(--hair);
  display:flex; align-items:baseline; justify-content:space-between;
}
.drawer nav a span{
  font-family:var(--data); font-size:.62rem; letter-spacing:.2em;
  color:var(--gold); opacity:.7;
}
.drawer-foot{ margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:.9rem; }
.drawer-foot .btn{ flex:1 1 180px; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
  background:var(--night);
  color:var(--paper);
  isolation:isolate;
}
.hero-media{ position:absolute; inset:-8% 0 -8%; z-index:-3; will-change:transform; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 62%; }
.hero-scrim{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(to bottom, rgba(4,18,31,.86) 0%, rgba(4,18,31,.34) 34%, rgba(4,18,31,.72) 72%, rgba(4,18,31,.97) 100%),
    radial-gradient(120% 78% at 78% 8%, rgba(9,50,82,.55), transparent 62%);
}
#skyfield{ position:absolute; inset:0; z-index:-1; width:100%; height:100%; opacity:.9; }

.hero-inner{ padding-block:clamp(90px,13vh,150px) clamp(30px,5vh,54px); position:relative; }

.hero-rera{
  font-family:var(--data); font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold);
  display:flex; flex-wrap:wrap; align-items:center; gap:.75em;
  margin-bottom:clamp(1.4rem,3vh,2.4rem);
}
.hero-rera span{ color:var(--mist-faint); }

.hero h1{ max-width:14ch; }
.hero h1 em{ color:var(--champagne); max-width:none; }

.hero-lede{
  margin-top:clamp(1.4rem,3vh,2.2rem);
  max-width:40ch;
  font-size:clamp(1.02rem,.95rem + .38vw,1.22rem);
  color:var(--mist);
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:clamp(1.8rem,3.4vh,2.6rem); }

/* the fact strip that closes the hero */
.hero-facts{
  margin-top:clamp(2.4rem,5vh,4rem);
  border-top:1px solid var(--hair);
  display:grid; grid-template-columns:repeat(2,1fr);
}
@media (min-width:840px){ .hero-facts{ grid-template-columns:repeat(4,1fr); } }
.hero-facts div{ padding:1.1rem 1rem 0 0; }
@media (min-width:840px){
  .hero-facts div + div{ padding-left:clamp(1rem,2.2vw,2rem); border-left:1px solid var(--hair); }
}
.hero-facts dt{
  font-family:var(--data); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--mist-faint); margin-bottom:.5em;
}
.hero-facts dd{
  margin:0; font-family:var(--display); font-size:clamp(1.5rem,1.1rem + 1.3vw,2.15rem);
  line-height:1; color:var(--paper);
}

.scroll-cue{
  position:absolute; right:var(--gutter); bottom:clamp(30px,5vh,54px);
  display:none; writing-mode:vertical-rl;
  font-family:var(--data); font-size:.6rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--mist-faint);
  align-items:center; gap:1rem;
}
@media (min-width:1180px){ .scroll-cue{ display:flex; } }
.scroll-cue::after{
  content:""; width:1px; height:64px;
  background:linear-gradient(var(--gold), transparent);
  animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{ 0%,100%{ transform:scaleY(.3); transform-origin:top; opacity:.4 } 50%{ transform:scaleY(1); opacity:1 } }

/* ==========================================================================
   SIGNATURE — the Pleiades rail
   Seven dots placed at the true relative sky positions of the Seven Sisters.
   Each one is a section of this page.
   ========================================================================== */

.rail{
  position:fixed; z-index:60;
  right:14px;
  top:50%; transform:translateY(-50%);
  width:52px; height:432px;
  display:none;
  opacity:0; pointer-events:none;
  transition:opacity .6s var(--ease);
}
/* only once the viewport is wide enough that the labels clear the text column */
@media (min-width:1400px) and (min-height:660px){ .rail{ display:block; } }
.rail.is-live{ opacity:1; pointer-events:auto; }

.rail-web{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.rail-web polyline{
  fill:none; stroke:var(--gold); stroke-width:.6; opacity:.3;
  stroke-dasharray:520; stroke-dashoffset:520;
  transition:stroke-dashoffset 1.6s var(--ease);
}
.rail.is-live .rail-web polyline{ stroke-dashoffset:0; }

.rail ul{ list-style:none; position:absolute; inset:0; }
/* the star sits exactly at (--x,--y); the label hangs off it and never
   moves the star, so the constellation stays true */
.rail li{ position:absolute; left:calc(var(--x) * 1px); top:calc(var(--y) * 1px); }
.rail a{
  position:absolute; left:0; top:0;
  transform:translate(-50%,-50%);
  display:block; padding:11px;
}
.rail-dot{
  display:block;
  width:5px; height:5px; border-radius:50%;
  background:var(--gold); opacity:.42;
  box-shadow:0 0 0 0 rgba(223,179,72,.5);
  transition:opacity .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.rail-label{
  position:absolute; right:calc(100% - 4px); top:50%;
  font-family:var(--data); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--paper);
  white-space:nowrap; max-width:92px;
  opacity:0; transform:translateY(-50%) translateX(6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  text-shadow:0 1px 8px rgba(4,18,31,.9), 0 0 3px rgba(4,18,31,.8);
}
.rail a:hover .rail-label,
.rail a:focus-visible .rail-label,
.rail a[aria-current="true"] .rail-label{ opacity:1; transform:translateY(-50%); }
.rail a:hover .rail-dot,
.rail a[aria-current="true"] .rail-dot{
  opacity:1; transform:scale(1.9);
  box-shadow:0 0 0 5px rgba(223,179,72,.14);
}
/* on cream sections the rail flips to ink so it stays readable */
.rail.on-light .rail-label{ color:var(--navy); text-shadow:0 1px 8px rgba(244,241,236,.9); }
.rail.on-light .rail-dot{ background:var(--gold-deep); }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */

/* gated on .js so a script failure can never leave content invisible */
.js .rise{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js .rise.in{ opacity:1; transform:none; }
.rise-1{ transition-delay:.08s } .rise-2{ transition-delay:.16s } .rise-3{ transition-delay:.24s }

/* ==========================================================================
   Figures, parallax frames, gallery
   ========================================================================== */

.frame{
  position:relative; overflow:hidden;
  background:var(--navy);
  margin:0;
}
.frame img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
.frame-tall{ aspect-ratio:4/5; }
.frame-wide{ aspect-ratio:16/9; }
.frame-pano{ aspect-ratio:21/9; }
@media (max-width:640px){ .frame-tall{ aspect-ratio:4/3; } }

/* the inner image is oversized so parallax has room to travel */
.frame .par{ height:118%; margin-top:-9%; }

.frame figcaption,
.figcap{
  font-family:var(--data); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft);
  margin-top:.9rem; display:flex; justify-content:space-between; gap:1rem;
}
.on-dark .figcap{ color:var(--mist-faint); }

/* lazy images fade in once decoded — also gated on .js */
.js .fade-img{ opacity:0; transition:opacity .8s var(--ease); }
.js .fade-img.ready{ opacity:1; }

/* ==========================================================================
   Spec list — the mono data table used for hard numbers
   ========================================================================== */

.specs{ list-style:none; border-top:1px solid var(--hair-ink); }
.on-dark .specs{ border-top-color:var(--hair); }
.specs li{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:.5rem 1.5rem;
  padding:.95rem 0;
  border-bottom:1px solid var(--hair-ink);
}
.on-dark .specs li{ border-bottom-color:var(--hair); }
.specs dt, .specs .k{
  font-family:var(--data); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft);
}
.on-dark .specs .k{ color:var(--mist-faint); }
.specs .v{
  font-family:var(--display); font-size:1.05rem; text-align:right;
  color:var(--ink);
}
.on-dark .specs .v{ color:var(--paper); }

/* ==========================================================================
   Cards
   ========================================================================== */

.card{
  border:1px solid var(--hair-ink);
  padding:clamp(24px,3vw,40px);
  background:rgba(255,255,255,.42);
  transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.on-dark .card{ background:rgba(244,241,236,.035); border-color:var(--hair); }
.card:hover{ border-color:var(--gold); }

.card-plan .frame{ background:var(--paper); margin-bottom:1.4rem; }
.card-plan .frame img{ object-fit:contain; }
.card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.card-head .tag{
  font-family:var(--data); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-deep);
}
.on-dark .card-head .tag{ color:var(--gold); }

/* zoomable plan */
.zoom{ cursor:zoom-in; border:0; background:none; padding:0; width:100%; display:block; }

/* ==========================================================================
   Amenities
   ========================================================================== */

.amenities{ list-style:none; columns:1; column-gap:clamp(24px,4vw,56px); }
@media (min-width:620px){ .amenities{ columns:2; } }
@media (min-width:1000px){ .amenities{ columns:3; } }
.amenities li{
  break-inside:avoid;
  padding:.72rem 0 .72rem 1.4rem;
  position:relative;
  border-bottom:1px solid var(--hair);
  font-size:.95rem;
  color:var(--mist);
}
.amenities li::before{
  content:"✦"; position:absolute; left:0; top:.72rem;
  color:var(--gold); font-size:.62rem; opacity:.75;
}

/* ==========================================================================
   Distances / location
   ========================================================================== */

.dist{ list-style:none; border-top:1px solid var(--hair-ink); }
.dist li{
  display:flex; align-items:baseline; gap:1rem;
  padding:.85rem 0; border-bottom:1px solid var(--hair-ink);
}
.dist .place{ flex:1; }
.dist .dot{ flex:1; border-bottom:1px dotted var(--hair-ink); transform:translateY(-.28em); min-width:20px; }
.dist .km{ font-family:var(--data); font-size:.8rem; color:var(--gold-deep); white-space:nowrap; }

.map-wrap{ position:relative; aspect-ratio:4/3; background:var(--paper-warm); border:1px solid var(--hair-ink); }
.map-wrap iframe{ width:100%; height:100%; border:0; filter:saturate(.82) contrast(1.02); }

/* ==========================================================================
   Timeline
   ========================================================================== */

.timeline{ list-style:none; position:relative; }
.timeline::before{
  content:""; position:absolute; left:0; top:.6rem; bottom:.6rem; width:1px;
  background:linear-gradient(var(--gold), var(--hair));
}
.timeline li{ position:relative; padding:0 0 clamp(28px,3.4vw,44px) clamp(28px,4vw,48px); }
.timeline li:last-child{ padding-bottom:0; }
.timeline li::before{
  content:""; position:absolute; left:-3.5px; top:.62rem;
  width:8px; height:8px; border-radius:50%;
  background:var(--night); border:1px solid var(--gold);
}
.timeline li.is-done::before{ background:var(--gold); }
.timeline .when{
  display:block; font-family:var(--data); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); margin-bottom:.5rem;
}
.timeline .what{ font-family:var(--display); font-size:1.2rem; line-height:1.35; color:var(--paper); }
.timeline .note{ display:block; margin-top:.45rem; font-size:.92rem; color:var(--mist); max-width:52ch; }

/* ==========================================================================
   FAQ — native details, styled
   ========================================================================== */

.faq{ border-top:1px solid var(--hair-ink); }
.on-dark .faq{ border-top-color:var(--hair); }
.faq details{ border-bottom:1px solid var(--hair-ink); }
.on-dark .faq details{ border-bottom-color:var(--hair); }
.faq summary{
  list-style:none; cursor:pointer; padding:1.35rem 3rem 1.35rem 0;
  position:relative;
  font-family:var(--display); font-size:clamp(1.08rem,1rem + .35vw,1.32rem);
  line-height:1.35;
  transition:color .35s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--gold-deep); }
.on-dark .faq summary:hover{ color:var(--gold); }
.faq summary::after{
  content:""; position:absolute; right:.4rem; top:50%; width:12px; height:1px;
  background:var(--gold-deep); transition:transform .45s var(--ease);
}
.on-dark .faq summary::after{ background:var(--gold); }
.faq summary::before{
  content:""; position:absolute; right:.4rem; top:50%; width:12px; height:1px;
  background:var(--gold-deep); transform:rotate(90deg);
  transition:transform .45s var(--ease), opacity .3s var(--ease);
}
.on-dark .faq summary::before{ background:var(--gold); }
.faq details[open] summary::before{ transform:rotate(0deg); opacity:0; }
.faq .answer{ padding:0 clamp(0px,6vw,4rem) 1.6rem 0; max-width:64ch; color:var(--ink-soft); }
.on-dark .faq .answer{ color:var(--mist); }

/* ==========================================================================
   Forms
   ========================================================================== */

.form-card{
  background:var(--navy);
  color:var(--paper);
  padding:clamp(26px,4vw,52px);
  border:1px solid rgba(223,179,72,.2);
}
.field{ margin-bottom:1.35rem; }
.field label{
  display:block; font-family:var(--data); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); margin-bottom:.6rem;
}
.field .req{ color:var(--champagne); }
.field input, .field select, .field textarea{
  width:100%; background:transparent; color:var(--paper);
  border:0; border-bottom:1px solid rgba(244,241,236,.24);
  padding:.72rem 0; font-family:var(--body); font-size:1rem;
  border-radius:0; -webkit-appearance:none; appearance:none;
  transition:border-color .4s var(--ease);
}
.field textarea{ min-height:96px; resize:vertical; }
.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) 1.25rem, calc(100% - 6px) 1.25rem; background-size:6px 6px; background-repeat:no-repeat; padding-right:28px; }
.field select option{ background:var(--navy); color:var(--paper); }
.field input::placeholder, .field textarea::placeholder{ color:rgba(244,241,236,.34); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:0; border-bottom-color:var(--gold); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ outline:0; }

.grid-2{ display:grid; gap:0 1.6rem; grid-template-columns:1fr; }
@media (min-width:620px){ .grid-2{ grid-template-columns:1fr 1fr; } }

.consent{
  display:flex; gap:.85rem; align-items:flex-start;
  font-size:.86rem; line-height:1.6; color:var(--mist);
  margin:1.6rem 0 1.8rem;
}
.consent input{ width:16px; height:16px; margin-top:.3rem; flex:none; accent-color:var(--gold); }
.hp{ position:absolute; left:-9999px; opacity:0; }

.form-status{
  margin-top:1.2rem; font-family:var(--data); font-size:.76rem; letter-spacing:.06em;
  min-height:1.2em;
}
.form-status.ok{ color:var(--champagne); }
.form-status.err{ color:#F1A9A0; }

.form-note{
  font-family:var(--data); font-size:.66rem; letter-spacing:.1em;
  color:var(--mist-faint); margin-top:1.2rem; line-height:1.8;
}

/* ==========================================================================
   Disclosure strip + footer
   ========================================================================== */

.disclosure{
  background:var(--navy);
  color:var(--mist);
  font-size:.82rem; line-height:1.75;
  padding-block:clamp(28px,3.4vw,44px);
  border-top:1px solid var(--hair);
}
.disclosure strong{ color:var(--champagne); font-weight:500; }

.footer{ background:var(--night); color:var(--mist); padding-block:clamp(56px,7vw,92px) 0; }
.footer-grid{
  display:grid; gap:clamp(32px,4vw,56px);
  grid-template-columns:1fr;
}
@media (min-width:760px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; } }
@media (min-width:1080px){ .footer-grid{ grid-template-columns:1.6fr 1fr 1fr 1.1fr; } }

.footer .foot-h{
  font-family:var(--data); font-size:.66rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); margin:0 0 1.3rem;
}
.footer ul{ list-style:none; }
.footer li{ margin-bottom:.7rem; font-size:.92rem; }
.footer a:hover{ color:var(--paper); }
.footer address{ font-style:normal; font-size:.92rem; line-height:1.85; }

.rg-credit{ display:flex; align-items:center; gap:.8rem; margin-top:1.6rem; }
.rg-credit img{ width:78px; height:auto; filter:brightness(0) invert(1); opacity:.5; }
.rg-credit span{ font-family:var(--data); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mist-faint); }

.footer-bottom{
  margin-top:clamp(40px,5vw,64px);
  border-top:1px solid var(--hair);
  padding-block:1.6rem 2rem;
  display:flex; flex-wrap:wrap; gap:1rem 1.8rem;
  align-items:center; justify-content:space-between;
  font-family:var(--data); font-size:.66rem; letter-spacing:.1em;
  color:var(--mist-faint);
}
.footer-bottom nav{ display:flex; flex-wrap:wrap; gap:1rem 1.6rem; }
.footer-bottom a:hover{ color:var(--gold); }

/* ==========================================================================
   Floating contact dock
   ========================================================================== */

.dock{
  position:fixed; z-index:70;
  right:clamp(14px,2.4vw,26px);
  bottom:clamp(14px,2.4vw,26px);
  display:flex; flex-direction:column; gap:.7rem;
  transition:transform .5s var(--ease);
}
.dock.is-shifted{ transform:translateY(calc(-1 * var(--cookie-h, 0px))); }
.dock a{
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  color:#fff;
  box-shadow:0 8px 26px rgba(4,18,31,.34);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  position:relative;
}
.dock a:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(4,18,31,.44); }
.dock svg{ width:25px; height:25px; }
.dock-wa{ background:#25D366; }
.dock-call{ background:var(--navy); border:1px solid var(--hair); }

/* label that slides out on hover, desktop only */
.dock a::after{
  content:attr(data-label);
  position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%);
  background:var(--night); color:var(--paper);
  font-family:var(--data); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.55em .9em; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
}
@media (hover:hover) and (min-width:900px){ .dock a:hover::after{ opacity:1; } }

/* ==========================================================================
   Cookie banner
   ========================================================================== */

.cookie{
  position:fixed; z-index:95; inset:auto 0 0;
  background:rgba(4,18,31,.97);
  backdrop-filter:blur(16px);
  border-top:1px solid var(--hair);
  color:var(--mist);
  transform:translateY(110%);
  transition:transform .7s var(--ease);
}
.cookie.is-up{ transform:none; }
.cookie .wrap{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem 2rem;
  padding-block:1.3rem;
}
.cookie p{ flex:1 1 320px; font-size:.86rem; line-height:1.65; margin:0; }
.cookie p a{ color:var(--gold); border-bottom:1px solid var(--hair); }
.cookie-actions{ display:flex; flex-wrap:wrap; gap:.7rem; }
.cookie-actions .btn{ padding:.85em 1.6em; font-size:.68rem; }

/* ==========================================================================
   Lightbox
   ========================================================================== */

.lightbox{
  position:fixed; inset:0; z-index:120;
  background:rgba(4,18,31,.96);
  display:grid; place-items:center;
  padding:clamp(16px,4vw,48px);
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:100%; max-height:86vh; object-fit:contain; background:var(--paper); }
.lightbox figcaption{
  margin-top:1rem; text-align:center;
  font-family:var(--data); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mist);
}
.lightbox-close{
  position:absolute; top:clamp(12px,2vw,26px); right:clamp(12px,2vw,26px);
  width:46px; height:46px; background:none; border:1px solid var(--hair);
  color:var(--paper); cursor:pointer; font-size:1.1rem;
}
.lightbox-close:hover{ background:var(--gold); color:var(--night); border-color:var(--gold); }

/* ==========================================================================
   Interior page header (non-home pages)
   ========================================================================== */

.pagehead{
  position:relative; background:var(--night); color:var(--paper);
  padding-block:calc(var(--bar-h) + clamp(60px,10vw,120px)) clamp(50px,7vw,90px);
  overflow:hidden; isolation:isolate;
}
.pagehead-media{ position:absolute; inset:-10% 0; z-index:-2; opacity:.5; will-change:transform; }
.pagehead-media img{ width:100%; height:100%; object-fit:cover; }
.pagehead::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(4,18,31,.9), rgba(4,18,31,.72) 50%, var(--night));
}
.crumbs{
  font-family:var(--data); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mist-faint);
  display:flex; flex-wrap:wrap; gap:.6em; margin-bottom:1.6rem;
}
.crumbs a:hover{ color:var(--gold); }
.crumbs span[aria-current]{ color:var(--gold); }

/* ==========================================================================
   Legal / long-form pages
   ========================================================================== */

.legal{ max-width:74ch; }
.legal h2{
  font-family:var(--display); font-size:clamp(1.5rem,1.2rem + 1vw,2rem);
  line-height:1.2; margin:clamp(38px,4.5vw,60px) 0 1rem;
  padding-top:clamp(24px,3vw,36px); border-top:1px solid var(--hair-ink);
}
.legal h2:first-of-type{ margin-top:clamp(28px,3.5vw,44px); }
.legal h3{
  font-family:var(--body); font-size:1rem; font-weight:600;
  letter-spacing:.01em; margin:1.9rem 0 .6rem;
}
.legal ul, .legal ol{ margin:0 0 1.15em; padding-left:1.3rem; }
.legal li{ margin-bottom:.5rem; }
.legal a{ color:var(--gold-deep); border-bottom:1px solid var(--hair); }
.legal a:hover{ border-bottom-color:var(--gold-deep); }
.legal .updated{
  font-family:var(--data); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft);
}

.toc{
  list-style:none; border-top:1px solid var(--hair-ink);
  margin-top:1rem;
}
.toc li{ border-bottom:1px solid var(--hair-ink); }
.toc a{
  display:block; padding:.7rem 0;
  font-family:var(--data); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft);
}
.toc a:hover{ color:var(--gold-deep); }

/* ==========================================================================
   Motion off
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js .rise{ opacity:1; transform:none; }
  .js .fade-img{ opacity:1; }
  .rail-web polyline{ stroke-dashoffset:0; }
}

@media print{
  .masthead,.rail,.dock,.cookie,.drawer,.scroll-cue,.lightbox{ display:none !important; }
  body{ background:#fff; color:#000; }
  .on-dark,.on-navy,.footer,.disclosure{ background:#fff !important; color:#000 !important; }
}