/* =========================================================
   21st Castle - Novelle Boulevard
   Home page
   ========================================================= */

:root{
  /* --- palette --- */
  --cream-1:#F6EFE7;      /* sampled from the hero plate's own left edge */
  --cream-2:#F1E9DF;
  /* all sampled off the reference render */
  --gold:#966F3A;         /* tagline, active nav, active rail, icons */
  --gold-line:#C3A67F;    /* the short rule + explore arrow */
  --gold-soft:#C9A87C;
  --ink:#2C2D2E;          /* headline */
  --ink-2:#2F2F31;        /* nav, feature labels, explore text */
  --muted:#C4BDB4;        /* inactive rail numbers */
  --hairline:#D8CDBE;

  /* --- about section (sampled off refernce/about.png) --- */
  --ab-bg:#F5F0E9;
  --ab-card:#F8F4EE;
  --ab-line:#EAE1D4;
  --ab-img:#F0EBE4;
  --ab-img-line:#EBE3DB;
  --ab-gold:#AE8942;
  --ab-ink:#2E2D29;
  --ab-body:#5C564D;
  --ab-muted:#BCB2A4;

  /* --- gallery section (dark) --- */
  --gl-bg:#1A1A1A;
  --gl-ink:#EFEAE2;
  --gl-body:#9C968D;
  --gl-gold:#C4A063;
  --gl-gold-2:#C9A469;
  --gl-gold-3:#A98A55;

  /* --- amenities section --- */
  --am-bg:#F6F0E6;
  --am-ink:#33322E;
  --am-body:#5F594F;
  --am-body-2:#4A453C;
  --am-line:#E6DCC9;
  --am-gold:#A87C3A;
  --am-gold-2:#B08843;
  --am-gold-3:#BC9E6B;

  /* --- floor plans section --- */
  --pl-bg:#1E3320;
  --pl-panel:#26402A;
  --pl-panel-line:#37543C;
  --pl-card:#FDFBF7;
  --pl-card-line:#EFE7DA;
  --pl-card-line-2:#DFD1B8;
  --pl-soon:#2C4A31;
  --pl-ink:#F1EEE4;
  --pl-ink-2:#3E3B34;
  --pl-body:#B7C1B2;
  --pl-gold:#C9A86A;
  --pl-gold-2:#D2B278;
  --pl-gold-3:#A98A55;
  --pl-gold-4:#A9803F;
  --pl-gold-5:#A6793B;
  --pl-green:#4A7A4E;
  --pl-green-2:#5C8F60;
  --pl-dot:#40603F;
  --pl-info:clamp(124px,12.4vw,178px);   /* info column width */

  /* --- contact section --- */
  --ct-bg:#F7EEE4;
  --ct-card:#FBF4EC;
  --ct-line:#EDE2D2;
  --ct-input:#F9F3EA;
  --ct-input-line:#E7DAC7;
  --ct-ink:#33322E;
  --ct-ink-2:#3E3B34;
  --ct-body:#5F594F;
  --ct-gold:#A9803F;
  --ct-gold-2:#A57B43;
  --ct-gold-3:#C2A671;
  --ct-btn:#A9844E;

  /* --- shared deep-forest-green dark scale ---------------------------
     Grown out of the #2F4A2B already used on the 3 BHK ribbon. Used by
     the stats strip, the floor-plans section and the footer.           */
  --dk:#1E3320;          /* section background            */
  --dk-2:#16261A;        /* deeper: footer base bar       */
  --dk-soft:#26402A;     /* raised surfaces on dark       */
  --dk-line:#37543C;     /* hairlines on dark             */
  --dk-ink:#F1EEE4;      /* headings on dark              */
  --dk-body:#B7C1B2;     /* body copy on dark             */
  --dk-gold:#C9A86A;     /* gold that holds up on dark    */
  --dk-green:#4A7A4E;    /* mid green for chips/ribbons   */

  /* --- rhythm --- */
  --gutter:clamp(24px, 4.4vw, 60px);
  --content-x:clamp(24px, 9.8vw, 134px);
  --header-h:clamp(80px, 11vh, 122px);
  --feat-col:clamp(86px, 7.83vw, 118px);   /* reference column pitch = 107px @1366 */
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:"Urbanist", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  color:var(--ink);
  background:var(--cream-1);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }

/* =========================================================
   HEADER
   ========================================================= */

.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:50;
  height:var(--header-h);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  padding:0 clamp(20px,3.2vw,44px);
  transition:box-shadow .35s ease;
}

/* The frosted fill lives on a pseudo-element, NOT on .site-header itself.
   backdrop-filter turns an element into the containing block for any
   position:fixed descendant — with it on the header, the mobile nav drawer
   (a fixed child) was trapped inside the header's 80px-tall box. */
.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:0;
  transition:opacity .35s ease;
}

/* transparent over the hero, frosted cream glass once you scroll (as in about.png) */
.site-header.is-stuck::before{
  opacity:1;
  background:rgba(247,242,236,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
.site-header.is-stuck{ box-shadow:0 6px 22px rgba(122,100,68,.08); }

/* frosted dark bar while the gallery is behind it (as in gallery.png) */
.site-header.is-dark::before{
  opacity:1;
  background:rgba(25,25,25,.62);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
.site-header.is-dark{ box-shadow:0 6px 22px rgba(0,0,0,.35); }
.site-header.is-dark .nav__link{ color:#CFC9C0; }
.site-header.is-dark .nav__link:hover,
.site-header.is-dark .nav__link.is-active{ color:var(--gl-gold); }
.site-header.is-dark .nav__link::after{ background:var(--gl-gold); }
.site-header.is-dark .brand__text{ color:var(--gl-gold); }

.brand{ grid-column:1; display:flex; align-items:center; gap:clamp(12px,2.1vw,32px); }

.brand__mark{
  height:clamp(38px,3.6vw,58px);
  width:auto;
  object-fit:contain;
}

/* logo-black.png has extra transparent padding baked into the file,
   so its visible mark reads smaller than logo-white.png at the same
   CSS height — bump it to match the white mark's visual size. */
.brand__mark[src*="logo-black"]{
  height:clamp(50px,4.8vw,76px);
}

.brand__text{
  font-size:clamp(13px,1.15vw,17px);
  font-weight:500;
  letter-spacing:.1911em;
  text-transform:uppercase;
  color:var(--ab-gold);
  white-space:nowrap;
}

/* --- primary nav --- */
.nav{
  grid-column:2;
  display:flex;
  align-items:center;
  justify-self:center;
  gap:clamp(18px,3.59vw,54px);
}

.nav__link{
  position:relative;
  font-size:clamp(10px,.941vw,13px);
  font-weight:400;
  letter-spacing:-.03em;
  text-transform:uppercase;
  color:var(--ink-2);
  padding:10px 0;
  transition:color .25s ease;
}

/* the active item's rule sits on the header's bottom edge */
.nav__link::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(-1 * (var(--header-h) / 2 - 22px));
  width:0; height:2px;
  background:var(--ab-gold);
  transform:translateX(-50%);
  transition:width .3s ease;
}

.nav__link:hover{ color:var(--ab-gold); }
.nav__link:hover::after{ width:100%; }

.nav__link.is-active{ color:var(--ab-gold); }
.nav__link.is-active::after{ width:100%; }

/* --- round gold menu button ---
   Only meaningful once the nav collapses into a drawer (≤860px); on
   desktop the full nav bar is already visible, so the button is hidden
   here and switched back on inside that breakpoint below. */
.burger{
  grid-column:3;          /* stays hard right even when the nav is a drawer */
  justify-self:end;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:clamp(38px,3.15vw,50px);
  height:clamp(38px,3.15vw,50px);
  border-radius:50%;
  background:var(--ab-gold);
  box-shadow:0 4px 14px rgba(140,108,54,.28);
  transition:background-color .25s ease, transform .25s ease;
}
.burger:hover{ transform:translateY(-1px); }

.burger span{
  display:block;
  width:16px;
  height:1.5px;
  border-radius:1px;
  background:#FFFDF8;
  transition:width .3s ease, transform .3s ease, opacity .25s ease;
}
.burger span:nth-child(2){ width:11px; }

/* =========================================================
   HERO
   ========================================================= */

.hero{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  /* matches the plate's own cream, so any crop/letterbox edge is invisible */
  background:var(--cream-1);
}

/* ---- full-bleed hero plate ----
   The render already carries its own cream fade on the left, so it needs
   no CSS mask: it IS the section background. */
.hero__visual{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.hero__img{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .9s ease;
}

.hero__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

.hero__img.is-active{ opacity:1; }

/* ---- 01 / 02 / 03 / 04 rail ---- */
.rail{
  position:absolute;
  left:clamp(14px,2.8vw,42px);
  top:50%;
  transform:translateY(calc(-50% - clamp(40px, 9vh, 96px)));
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(14px,2.4vh,22px);
}

.rail__item{
  position:relative;
  font-size:clamp(13px,1.464vw,21px);
  font-weight:400;
  letter-spacing:.02em;
  color:var(--muted);
  padding:2px 0;
  transition:color .3s ease;
}

.rail__item:hover{ color:var(--gold-soft); }

.rail__item.is-active{
  color:var(--gold);
  /* the gold tick that hangs below the active number */
  margin-bottom:clamp(46px,7.4vh,72px);
}

.rail__item.is-active::after{
  content:"";
  position:absolute;
  left:50%;
  top:calc(100% + 10px);
  width:1px;
  height:clamp(34px,5.8vh,58px);
  background:linear-gradient(to bottom, var(--gold), rgba(181,139,84,.15));
}

/* ---- text column ---- */
.hero__content{
  position:relative;
  z-index:4;
  min-height:100svh;
  padding:calc(var(--header-h) + clamp(40px,15vh,120px)) var(--gutter) clamp(40px,7vh,72px) var(--content-x);
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:min(100%, 980px);
}

.hero__title{
  margin:0;
  font-weight:300;
  font-size:clamp(34px, 7.35vw, 104px);
  line-height:.88;
  letter-spacing:-.0245em;
  text-transform:uppercase;
  color:var(--ink);
}
.hero__title span{ display:block; }

.hero__rule{
  display:block;
  width:47px;
  height:1px;
  background:var(--gold-line);
  margin:clamp(2px,.4vh,6px) 0 clamp(14px,2.2vh,20px);
}

.hero__tagline{
  margin:0;
  font-size:clamp(12px,1.255vw,18px);
  font-weight:400;
  letter-spacing:.3935em;
  text-transform:uppercase;
  color:var(--gold);
}

/* ---- feature strip ---- */
.features{
  display:flex;
  align-items:stretch;
  margin-top:clamp(30px,5.6vh,62px);
  /* in the reference the strip hangs ~30px left of the headline, so the
     first column's icon centres 24px in from the text edge */
  margin-left:calc(24px - var(--feat-col) / 2);
}

.feature{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:clamp(12px,2.3vh,20px);
  padding:0 4px;
  min-width:var(--feat-col);
}

.feature + .feature{ border-left:1px solid var(--hairline); }

.feature__icon{
  color:var(--gold);
  width:clamp(26px,2.35vw,34px);
  height:clamp(26px,2.35vw,34px);
  display:block;
}
.feature__icon svg{ width:100%; height:100%; display:block; }

.feature__label{
  font-size:clamp(8.5px,.732vw,11px);
  font-weight:500;
  letter-spacing:.0338em;
  line-height:1.5;
  text-transform:uppercase;
  text-align:center;
  color:var(--ink-2);
  white-space:nowrap;
}

/* ---- explore link ---- */
.explore{
  display:inline-flex;
  align-items:center;
  gap:clamp(14px,1.7vw,24px);
  margin-top:clamp(40px,9.4vh,100px);
  align-self:flex-start;
  color:var(--ink-2);            /* the label is charcoal in the reference */
  font-size:clamp(10.5px,.941vw,14px);
  font-weight:400;
  letter-spacing:.232em;
  text-transform:uppercase;
}

.explore__arrow{
  color:var(--gold-line);        /* only the arrow is gold */
  width:clamp(46px,4.6vw,74px);
  height:12px;
  transition:transform .35s ease;
}
.explore:hover .explore__arrow{ transform:translateX(8px); }

/* =========================================================
   AT A GLANCE  (slim dark strip)
   ========================================================= */

/* Arched crown: the top edge is a wide shallow dome rather than a straight
   line, so the band reads as a designed shape — and the scroll curtain
   sweeps up as a curve instead of a hard bar. */
.stats{
  --arc:clamp(24px,4.2vh,54px);
  position:relative;
  overflow:hidden;
  padding:calc(var(--arc) + clamp(18px,3vh,32px)) clamp(16px,3.1vw,42px) clamp(24px,3.8vh,42px);
  border-top-left-radius:50% var(--arc);
  border-top-right-radius:50% var(--arc);
  background-color:var(--dk);
  background-image:
    /* soft gold glow, lit from the centre */
    radial-gradient(ellipse 62% 132% at 50% 44%, rgba(201,168,106,.15), rgba(201,168,106,0) 68%),
    /* vertical gradient for depth */
    linear-gradient(180deg, #27412B 0%, #1D3220 54%, #16271A 100%);
  box-shadow:inset 0 1.5px 0 rgba(201,168,106,.42);
}

/* fine grain so the large dark area reads as paper, not flat colour */
.stats::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.055;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* leaf flourishes at either end, matching the Amenities ornament language */
.stats__leaf{
  position:absolute;
  bottom:clamp(10px,2vh,22px);
  width:clamp(58px,6.6vw,96px);
  height:auto;
  color:var(--dk-gold);
  opacity:.3;
  pointer-events:none;
}
.stats__leaf--l{ left:clamp(10px,2.4vw,40px); }
.stats__leaf--r{ right:clamp(10px,2.4vw,40px); transform:scaleX(-1); }

.stats__row{
  position:relative;
  max-width:1227px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
}

.stats__row li{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:clamp(2px,.6vh,8px) clamp(8px,1vw,18px);
  text-align:center;
}

/* divider: a hairline that fades at both ends with a gold diamond at its centre */
.stats__row li + li::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translate(-50%,-50%);
  width:1px;
  height:64%;
  background:linear-gradient(to bottom,
    rgba(201,168,106,0), rgba(201,168,106,.34) 22%,
    rgba(201,168,106,.34) 78%, rgba(201,168,106,0));
}
.stats__row li + li::after{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:5px;
  height:5px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--dk-gold);
}

.stats__n{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(26px,2.85vw,41px);
  font-weight:400;
  line-height:1;
  letter-spacing:-.01em;
  color:var(--dk-gold);
}
.stats__n em{ font-style:normal; font-size:.62em; vertical-align:.28em; }

.stats__l{
  font-size:clamp(8.5px,.74vw,11px);
  font-weight:500;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--dk-body);
}

/* =========================================================
   SCROLL REVEAL — shared by the About and Contact subpages.
   main.js adds .is-in when the element enters the viewport;
   stagger a group by setting --d on the children.
   ========================================================= */

[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1) var(--d,0s),
             transform .7s cubic-bezier(.22,.61,.36,1) var(--d,0s);
}
[data-reveal="left"]{ transform:translateX(-32px); }
[data-reveal="right"]{ transform:translateX(32px); }
[data-reveal="zoom"]{ transform:scale(.94); }
[data-reveal].is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* =========================================================
   CONTACT PAGE  (contact.html)
   Two columns: contact info cards on the left, "Schedule a
   Visit" form card on the right. Prefix: .ctp-
   ========================================================= */

.ctp{
  overflow-x:clip;          /* reveal transforms must not widen the document */
  background:
    radial-gradient(110% 55% at 92% 2%, rgba(169,128,63,.12) 0%, rgba(169,128,63,0) 58%),
    radial-gradient(80% 48% at 2% 92%, rgba(30,51,32,.06) 0%, rgba(30,51,32,0) 62%),
    var(--ct-bg);
}
.ctp__wrap{ max-width:1240px; margin:0 auto; padding:0 clamp(20px,3.2vw,44px); }

.ctp-crumb{
  margin:0;
  padding-top:clamp(20px,3.4vh,32px);
  font-size:clamp(10.5px,.85vw,12.5px);
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ab-muted);
}
.ctp-crumb a{ color:var(--ct-body); text-decoration:none; }
.ctp-crumb a:hover{ color:var(--ct-gold); }
.ctp-crumb span{ margin:0 7px; opacity:.55; }

.ctp-main{ padding-top:var(--header-h); }
.ctp__grid{
  display:grid;
  grid-template-columns:1fr 1.06fr;
  gap:clamp(28px,4vw,72px);
  align-items:start;
  padding:clamp(32px,5.6vh,62px) 0 clamp(56px,9vh,104px);
}

/* ---- left: intro + contact cards ---- */
.ctp-intro__eyebrow{
  margin:0;
  font-size:clamp(11px,.95vw,14px);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ct-gold);
}
.ctp-intro__title{
  margin:clamp(16px,2.8vh,26px) 0 0;
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight:400;
  font-size:clamp(38px,4.4vw,60px);
  line-height:1.1;
  letter-spacing:-.022em;
  color:var(--ct-ink);
}
.ctp-intro__title em{ display:block; font-style:normal; color:var(--ct-gold); }
.ctp-intro__text{
  margin:clamp(18px,3vh,28px) 0 0;
  max-width:30em;
  font-size:clamp(14px,1.05vw,16.5px);
  line-height:1.75;
  color:var(--ct-body);
}

.ctp-cards{
  margin-top:clamp(24px,4vh,38px);
  display:flex;
  flex-direction:column;
  gap:clamp(10px,1.4vh,15px);
}
.ctp-card{
  display:flex;
  align-items:center;
  gap:clamp(13px,1.4vw,20px);
  padding:clamp(14px,2.2vh,20px) clamp(14px,1.5vw,22px);
  border-radius:12px;
  background:var(--ct-card);
  border:1px solid transparent;
  transition:background-color .28s ease, border-color .28s ease, transform .28s cubic-bezier(.2,.6,.2,1), box-shadow .28s ease;
}
a.ctp-card:hover{
  transform:translateX(5px);
  border-color:var(--ct-gold-3);
  box-shadow:0 12px 30px rgba(120,96,58,.12);
}
.ctp-card__ic{
  flex:none;
  display:grid;
  place-items:center;
  width:clamp(42px,3.6vw,52px);
  height:clamp(42px,3.6vw,52px);
  border-radius:11px;
  background:var(--ct-gold);
  color:#FCF7EE;
  transition:transform .38s cubic-bezier(.2,.6,.2,1), box-shadow .3s ease;
}
.ctp-card__ic svg{ width:48%; height:48%; }
a.ctp-card:hover .ctp-card__ic{
  transform:rotate(-8deg) scale(1.07);
  box-shadow:0 8px 20px rgba(169,128,63,.34);
}
.ctp-card__k{
  display:block;
  margin-bottom:5px;
  font-size:clamp(9.5px,.78vw,11.5px);
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ct-gold-2);
}
.ctp-card__v{
  display:block;
  font-size:clamp(13px,1.05vw,16px);
  font-weight:500;
  line-height:1.55;
  color:var(--ct-ink);
}

/* ---- right: schedule-a-visit form card ---- */
.ctp-form{
  padding:clamp(28px,4.6vh,46px) clamp(20px,2.4vw,40px) clamp(26px,4.2vh,42px);
  border-radius:18px;
  background:
    radial-gradient(100% 70% at 50% 0%, rgba(169,128,63,.09) 0%, rgba(169,128,63,0) 58%),
    var(--ct-card);
  border:1px solid var(--ct-line);
  box-shadow:0 16px 46px rgba(120,96,58,.10);
}
.ctp-form__title{
  margin:0;
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight:400;
  font-size:clamp(27px,2.9vw,42px);
  line-height:1.14;
  letter-spacing:-.02em;
  color:var(--ct-ink);
}
.ctp-form__sub{
  margin:clamp(8px,1.4vh,13px) 0 0;
  font-size:clamp(12.5px,.95vw,15px);
  line-height:1.6;
  color:var(--ct-body);
}
.ctp-form__fields{
  margin-top:clamp(20px,3.4vh,32px);
  display:flex;
  flex-direction:column;
  gap:clamp(10px,1.5vh,15px);
}
.ctp-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,1vw,15px); }

.ctp-form__fields input,
.ctp-form__fields select,
.ctp-form__fields textarea{
  width:100%;
  padding:clamp(13px,2.1vh,18px) clamp(13px,1.2vw,19px);
  border:1px solid var(--ct-input-line);
  border-radius:11px;
  background:#FFFDFA;
  font-family:inherit;
  font-size:clamp(12.5px,.95vw,15px);
  color:var(--ct-ink);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ctp-form__fields textarea{ resize:vertical; min-height:clamp(104px,16vh,150px); }
.ctp-form__fields input::placeholder,
.ctp-form__fields textarea::placeholder{ color:#A9A199; }
.ctp-form__fields input:focus,
.ctp-form__fields select:focus,
.ctp-form__fields textarea:focus{
  outline:none;
  border-color:var(--ct-gold-3);
  box-shadow:0 0 0 3px rgba(169,128,63,.13);
  transform:translateY(-1px);
}
.ctp-form__fields input.is-bad,
.ctp-form__fields select.is-bad,
.ctp-form__fields textarea.is-bad{ border-color:#C0785F; background:#FBF0EA; }

/* select: strip the native arrow, draw our own chevron */
.ctp-form__fields select{
  appearance:none;
  -webkit-appearance:none;
  color:var(--ct-ink);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235F594F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right clamp(13px,1.2vw,19px) center;
  background-size:16px 16px;
  padding-right:clamp(38px,3.4vw,46px);
  cursor:pointer;
}
.ctp-form__fields select:invalid{ color:#A9A199; }

.ctp-send{
  margin-top:clamp(6px,1vh,10px);
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  padding:clamp(15px,2.4vh,20px);
  border-radius:100px;
  background:var(--dk);
  color:#F3EFE4;
  font-family:inherit;
  font-size:clamp(12px,1vw,15px);
  font-weight:600;
  letter-spacing:.06em;
  cursor:pointer;
  transition:background-color .25s ease, transform .2s ease, box-shadow .25s ease;
}
.ctp-send svg{ width:17px; height:17px; transition:transform .3s ease; }
.ctp-send:hover{
  background:#264029;
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(30,51,32,.28);
}
.ctp-send:hover svg{ transform:translateX(3px); }

.ctp-form__msg{
  margin:0;
  min-height:1.2em;
  text-align:center;
  font-size:clamp(10.5px,.82vw,12.5px);
  color:var(--ct-gold-2);
}
.ctp-form__msg.is-bad{ color:#B5573C; }

/* =========================================================
   ABOUT PAGE  (about.html)
   Editorial split hero → fact band → story → pillars → CTA.
   Prefix: .abt-
   ========================================================= */

/* a soft gold bloom top-right keeps the long cream page from going flat */
.abt{
  overflow-x:clip;          /* reveal transforms must not widen the document */
  background:
    radial-gradient(120% 62% at 88% 0%, rgba(174,137,66,.13) 0%, rgba(174,137,66,0) 58%),
    radial-gradient(90% 50% at 0% 42%, rgba(30,51,32,.06) 0%, rgba(30,51,32,0) 60%),
    var(--ab-bg);
}
.abt__wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(20px,3.2vw,44px); }

/* ---- breadcrumb ---- */
.abt-crumb{
  margin:0;
  padding-top:clamp(20px,3.4vh,32px);
  font-size:clamp(10.5px,.85vw,12.5px);
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ab-muted);
}
.abt-crumb a{ color:var(--ab-body); text-decoration:none; }
.abt-crumb a:hover{ color:var(--ab-gold); }
.abt-crumb span{ margin:0 7px; opacity:.55; }

/* ---- split hero: copy left, tower right ---- */
.abt-hero{ padding-top:var(--header-h); }
.abt-hero__grid{
  display:grid;
  grid-template-columns:1fr .82fr;
  gap:clamp(28px,4.4vw,72px);
  align-items:center;
  padding:clamp(34px,6vh,64px) 0 clamp(38px,6.4vh,70px);
}

.abt-hero__eyebrow{
  margin:0;
  font-size:clamp(10px,.86vw,12.5px);
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ab-gold);
}
.abt-hero__rule{
  display:block;
  width:38px; height:2px;
  margin:clamp(12px,2vh,18px) 0 0;
  background:var(--ab-gold);
}
.abt-hero__title{
  margin:clamp(18px,3vh,28px) 0 0;
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight:400;
  font-size:clamp(40px,5.4vw,70px);
  line-height:1.04;
  letter-spacing:-.022em;
  color:var(--ab-ink);
}
.abt-hero__tag{
  margin:clamp(8px,1.4vh,14px) 0 0;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-style:italic;
  font-size:clamp(16px,1.45vw,22px);
  letter-spacing:.01em;
  color:var(--ab-gold);
}
.abt-hero__text{
  margin:clamp(20px,3.4vh,30px) 0 0;
  max-width:34em;
  font-size:clamp(14px,1.05vw,16.5px);
  line-height:1.78;
  color:var(--ab-body);
}

.abt-hero__figure{
  position:relative;
  margin:0;
  border-radius:14px;
  overflow:hidden;
  background:var(--ab-img);
  border:1px solid var(--ab-img-line);
  aspect-ratio:4 / 5;
  box-shadow:0 18px 46px rgba(90,72,44,.14);
}
.abt-hero__figure img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.1s cubic-bezier(.2,.6,.2,1);
}
.abt-hero__figure:hover img{ transform:scale(1.05); }
/* warm wash over the render so it sits in the cream page rather than on it */
.abt-hero__figure::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(174,137,66,0) 42%, rgba(120,92,44,.22) 100%);
  pointer-events:none;
}

/* ---- fact band — deep green, so the page has a real colour beat ---- */
.abt-facts{
  position:relative;
  background:linear-gradient(105deg, var(--dk) 0%, #243D26 52%, var(--dk-soft) 100%);
  overflow:hidden;
}
/* faint gold sheen sweeping across the strip */
.abt-facts::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(80% 130% at 78% 0%, rgba(201,168,106,.18) 0%, rgba(201,168,106,0) 62%);
  pointer-events:none;
}
.abt-facts__row{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  padding:clamp(28px,4.8vh,46px) 0;
}
.abt-facts__row li{
  padding:0 clamp(14px,2vw,28px);
  border-left:1px solid var(--dk-line);
  display:flex;
  flex-direction:column;
  gap:7px;
}
.abt-facts__row li:first-child{ padding-left:0; border-left:0; }
.abt-facts__n{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(24px,2.4vw,36px);
  line-height:1;
  color:var(--dk-gold);
}
.abt-facts__l{
  font-size:clamp(9.5px,.78vw,11.5px);
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--dk-body);
}

/* ---- story band ---- */
.abt-story{ padding:clamp(48px,8.4vh,96px) 0 clamp(40px,6.6vh,74px); text-align:center; }
.abt-story__eyebrow{
  margin:0;
  font-size:clamp(10px,.86vw,12.5px);
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ab-gold);
}
.abt-story__title{
  margin:clamp(14px,2.4vh,22px) auto 0;
  max-width:16em;
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight:400;
  font-size:clamp(28px,3.5vw,50px);
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--ab-ink);
}
.abt-story__title em{ font-style:italic; color:var(--ab-gold); }
.abt-story__text{
  margin:clamp(18px,3vh,26px) auto 0;
  max-width:44em;
  font-size:clamp(14px,1.05vw,16.5px);
  line-height:1.78;
  color:var(--ab-body);
}

/* ---- pillars: vision / mission / strength ---- */
.abt-pillars{
  list-style:none;
  margin:0;
  padding:0 0 clamp(56px,9vh,104px);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(14px,1.8vw,26px);
}
.abt-pillar{
  --badge:clamp(38px,3.3vw,46px);
  position:relative;
  background:var(--ab-card);
  border:1px solid var(--ab-line);
  border-radius:14px;
  text-align:center;
  overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.6,.2,1), box-shadow .35s ease, border-color .35s ease;
}
/* gold rule that draws itself across the top on hover */
.abt-pillar::before{
  content:"";
  position:absolute;
  z-index:3;
  top:0; left:0;
  width:100%; height:2px;
  background:linear-gradient(90deg, var(--ab-gold), var(--gold-soft));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.6,.2,1);
}
.abt-pillar:hover{
  transform:translateY(-6px);
  border-color:var(--gold-line);
  box-shadow:0 16px 38px rgba(90,72,44,.13);
}
.abt-pillar:hover::before{ transform:scaleX(1); }

/* photo at the top of the tile */
/* 5:4 landscape keeps the tiles short. The sources are portrait, so the crop
   is biased upward to hold the shield / skyline in frame. */
.abt-pillar__media{
  position:relative;
  aspect-ratio:5 / 4;
  overflow:hidden;
  background:var(--ab-img);
}
.abt-pillar__media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 38%;
  display:block;
  transition:transform 1.1s cubic-bezier(.2,.6,.2,1);
}
.abt-pillar:hover .abt-pillar__media img{ transform:scale(1.06); }
/* fade the photo into the card so the badge below reads cleanly */
.abt-pillar__media::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:30%;
  background:linear-gradient(180deg, rgba(248,244,238,0) 0%, rgba(248,244,238,.70) 66%, var(--ab-card) 100%);
  pointer-events:none;
}

.abt-pillar__body{
  position:relative;
  z-index:2;
  padding:0 clamp(16px,1.8vw,24px) clamp(16px,2.4vh,24px);
}

.abt-pillar__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--badge);
  height:var(--badge);
  margin-top:calc(var(--badge) / -2);   /* half-overlaps the photo above */
  border-radius:50%;
  background:var(--ab-card);
  border:1px solid var(--ab-line);
  color:var(--ab-gold);
  box-shadow:0 6px 18px rgba(90,72,44,.14);
  transition:background-color .35s ease, color .35s ease, border-color .35s ease, transform .45s cubic-bezier(.2,.6,.2,1);
}
.abt-pillar:hover .abt-pillar__badge{
  background:var(--ab-gold);
  border-color:var(--ab-gold);
  color:#FCF7EE;
  transform:rotate(-8deg) scale(1.08);
}
.abt-pillar__badge svg{ width:clamp(22px,2vw,28px); height:clamp(22px,2vw,28px); }
.abt-pillar__title{
  margin:clamp(7px,1.2vh,11px) 0 0;
  font-size:clamp(10px,.84vw,11.5px);
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ab-gold);
}
.abt-pillar p{
  margin:clamp(6px,1vh,9px) 0 0;
  font-size:clamp(11.5px,.86vw,13px);
  line-height:1.58;
  color:var(--ab-body);
}

/* ---- closing CTA — a cream card, so it stays distinct from the dark footer ---- */
.abt-cta{ padding:0 0 clamp(56px,9vh,104px); }
.abt-cta__card{
  position:relative;
  padding:clamp(34px,6vh,64px) clamp(22px,3vw,44px);
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(174,137,66,.10) 0%, rgba(174,137,66,0) 62%),
    var(--ab-card);
  border:1px solid var(--ab-line);
  border-radius:16px;
  text-align:center;
  overflow:hidden;
  box-shadow:0 14px 40px rgba(90,72,44,.08);
}
/* gold hairline along the very top edge of the card */
.abt-cta__card::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:min(220px,45%); height:2px;
  background:linear-gradient(90deg, rgba(174,137,66,0), var(--ab-gold), rgba(174,137,66,0));
}
.abt-cta__title{
  margin:0;
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight:400;
  font-size:clamp(26px,3.2vw,44px);
  line-height:1.18;
  letter-spacing:-.02em;
  color:var(--ab-ink);
}
.abt-cta__text{
  margin:clamp(12px,2vh,18px) auto 0;
  max-width:38em;
  font-size:clamp(13px,1vw,15.5px);
  line-height:1.72;
  color:var(--ab-body);
}
.abt-cta__btns{
  margin-top:clamp(22px,3.6vh,34px);
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:clamp(10px,1.2vw,16px);
}
.abt-cta__btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:clamp(11px,1.9vh,15px) clamp(22px,2.4vw,34px);
  border-radius:100px;
  border:1px solid var(--ab-gold);
  background:var(--ab-gold);
  color:#FCF7EE;
  font-size:clamp(10px,.85vw,12.5px);
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  transition:background-color .25s ease, color .25s ease, transform .2s ease;
}
.abt-cta__btn svg{ width:15px; height:15px; }
.abt-cta__btn:hover{ transform:translateY(-2px); background:#96703F; border-color:#96703F; }
.abt-cta__btn--ghost{
  background:transparent;
  color:var(--ab-gold);
}
.abt-cta__btn--ghost:hover{ background:var(--ab-gold); color:#FCF7EE; }

/* =========================================================
   ABOUT US
   ========================================================= */

.about{
  position:relative;
  overflow-x:clip;          /* entrance transforms must not widen the document */
  background:var(--ab-bg);
  padding:clamp(56px,11.2vh,100px) clamp(20px,3.2vw,44px) clamp(22px,4vh,42px);
  scroll-margin-top:var(--header-h);
}

.about__grid{
  max-width:1227px;
  margin:0 auto;
  display:grid;
  grid-template-columns:415fr 357fr 365fr;
  column-gap:clamp(20px,3.3vw,52px);
  align-items:stretch;
}

/* ---- left column ---- */
.about__intro{ align-self:start; padding-top:11px; }

.eyebrow{
  margin:0;
  font-size:clamp(10px,.941vw,13px);
  font-weight:600;
  letter-spacing:.0274em;
  text-transform:uppercase;
  color:var(--ab-gold);
}

.rule{ display:block; height:2px; background:var(--ab-gold); }
.rule--xs{ width:27px; margin:clamp(12px,2.19vh,20px) 0 0; }
.rule--sm{ width:47px; margin:clamp(20px,4.07vh,36px) 0 0; }

.about__title{
  margin:clamp(24px,5.39vh,46px) 0 0;
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight:400;
  font-size:clamp(30px,3.486vw,50px);
  line-height:1.281;
  letter-spacing:-.0215em;
  color:var(--ab-ink);
}

.about__text{
  max-width:22em;
  margin:clamp(20px,4.18vh,36px) 0 0;
  font-size:clamp(13px,1.13vw,16px);
  font-weight:400;
  line-height:1.685;
  letter-spacing:.0053em;
  color:var(--ab-body);
}

/* the rule hangs off .know itself, so the padding that positions it
   cannot drag the arrow out of line with the label */
.know{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:clamp(20px,2.6vw,38px);
  margin-top:clamp(26px,7.01vh,60px);
  padding-bottom:12px;
  color:var(--ab-gold);
}
.know::after{
  content:"";
  position:absolute;
  left:-1px; bottom:0;
  width:82px; height:2px;
  background:var(--ab-gold);
}

.know__label{
  font-size:clamp(10px,.837vw,12px);
  font-weight:500;
  letter-spacing:.1288em;
  text-transform:uppercase;
}

.know__arrow{
  width:clamp(28px,2.85vw,42px);
  height:12px;
  transition:transform .35s ease;
}
.know:hover .know__arrow{ transform:translateX(7px); }

/* ---- centre: reserved image space ---- */
.imgspace{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid var(--ab-img-line);
  border-radius:16px;
  background:var(--ab-img);
  color:var(--ab-muted);
  text-align:center;
}

/* the same box as the placeholder — identical position, size and radius —
   but filled edge to edge with the project render */
.imgspace--filled{
  display:block;
  margin:0;
  padding:0;
  overflow:hidden;
  background:var(--ab-img);
}
.imgspace--filled img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .8s cubic-bezier(.2,.6,.2,1);
}
.imgspace--filled:hover img{ transform:scale(1.045); }

.imgspace__glyph{
  width:clamp(46px,4.83vw,72px);
  height:auto;
  color:var(--ab-muted);
}

.imgspace__label{
  margin:clamp(20px,4vh,34px) 0 0;
  font-size:clamp(10px,.95vw,13px);
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#B4A997;
}

.imgspace__note{
  margin:clamp(8px,1.5vh,14px) 0 0;
  font-size:clamp(9px,.8vw,11px);
  font-weight:400;
  color:#C2B8AA;
}

/* ---- right: vision / mission / strength ---- */
.pillars{
  display:flex;
  flex-direction:column;
  gap:clamp(12px,2.2vh,20px);
}

.pillar{
  flex:1;
  display:flex;
  align-items:center;
  gap:clamp(14px,1.76vw,28px);
  min-height:clamp(118px,19.3vh,168px);
  padding:0 22px 0 clamp(16px,1.9vw,30px);
  border:1px solid var(--ab-line);
  border-radius:14px;
  background:var(--ab-card);
  box-shadow:0 3px 14px rgba(130,108,72,.045);
}

.pillar__badge{
  flex:none;
  display:grid;
  place-items:center;
  width:clamp(50px,4.9vw,74px);
  height:clamp(50px,4.9vw,74px);
  border-radius:50%;
  background:#F1E9DD;
  box-shadow:0 0 0 3px #FEFDFC;
  color:var(--ab-gold);
}
.pillar__badge svg{ width:44%; height:44%; }

.pillar__body{
  border-left:1px solid var(--ab-line);
  padding-left:clamp(16px,1.9vw,30px);
}

.pillar__title{
  margin:0;
  font-size:clamp(12px,1.15vw,17px);
  font-weight:600;
  letter-spacing:.1947em;
  text-transform:uppercase;
  color:var(--ab-gold);
}

.pillar__body p{
  margin:clamp(10px,1.83vh,17px) 0 0;
  font-size:clamp(10.5px,.878vw,12.5px);
  font-weight:400;
  line-height:1.75;
  color:var(--ab-body);
}

/* ---- scroll cue ---- */
.scrolldown{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:clamp(14px,2.7vh,26px);
  color:var(--ab-gold);
}

.scrolldown__mouse{
  width:21px;
  height:36px;
  border:1.4px solid var(--ab-gold);
  border-radius:11px;
  position:relative;
}
.scrolldown__mouse::after{
  content:"";
  position:absolute;
  left:50%; top:7px;
  width:3px; height:3px;
  border-radius:50%;
  background:var(--ab-gold);
  transform:translateX(-50%);
  animation:scrollDot 1.9s ease-in-out infinite;
}
@keyframes scrollDot{
  0%,100%{ transform:translate(-50%,0);   opacity:1; }
  55%    { transform:translate(-50%,11px); opacity:.25; }
}

.scrolldown__label{
  margin-top:clamp(8px,1.6vh,16px);
  font-size:clamp(9px,.837vw,12px);
  font-weight:500;
  letter-spacing:.0483em;
  text-transform:uppercase;
  color:#9A948C;
}

.scrolldown__line{
  width:1px;
  height:clamp(10px,1.9vh,18px);
  margin-top:clamp(6px,1.2vh,12px);
  background:linear-gradient(to bottom, var(--ab-gold), rgba(174,137,66,0));
}

/* =========================================================
   GALLERY
   ========================================================= */

.gallery{
  background:var(--gl-bg);
  /* top padding clears the fixed header, so scrolling here reproduces
     the reference framing exactly */
  padding:calc(var(--header-h) + clamp(16px,3.5vh,34px)) clamp(16px,1.6vw,26px) clamp(30px,6.4vh,56px);
  overflow:hidden;
}

.gallery__grid{
  max-width:1303px;
  margin:0 auto;
  display:grid;
  grid-template-columns:257fr 932fr 34fr;
  column-gap:clamp(16px,2.93vw,40px);
  align-items:stretch;
}

/* ---- left column ---- */
.gallery__intro{
  display:flex;
  flex-direction:column;
  padding-top:clamp(42px,10.52vh,90px);
}

.eyebrow--dark{ color:var(--gl-gold); }
.rule--dark{ background:var(--gl-gold); width:35px; }

.gallery__title{
  margin:clamp(26px,5.84vh,50px) 0 0;
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight:400;
  font-size:clamp(30px,3.44vw,49px);
  line-height:1.19;
  letter-spacing:-.0215em;
  color:var(--gl-ink);
}
.gallery__title em{ font-style:normal; color:var(--gl-gold-2); }

.gallery__text{
  max-width:19em;
  margin:clamp(16px,3.2vh,28px) 0 0;
  font-size:clamp(11px,.95vw,13.5px);
  font-weight:400;
  line-height:1.62;
  color:var(--gl-body);
}

/* ---- prev / next ---- */
.gallery__controls{
  display:flex;
  gap:15px;
  margin-top:clamp(38px,12.79vh,110px);
}

.gnav{
  display:grid;
  place-items:center;
  width:37px;
  height:37px;
  border:1px solid rgba(196,160,99,.55);
  border-radius:50%;
  color:var(--gl-gold);
  transition:background-color .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease;
}
.gnav svg{ width:15px; height:15px; }
.gnav:hover:not(:disabled){ background:var(--gl-gold); border-color:var(--gl-gold); color:#17170F; }
.gnav:disabled{ opacity:.3; cursor:default; }

/* ---- 01 ——— 08 ---- */
.gprogress{
  display:flex;
  align-items:center;
  gap:14px;
  width:228px;
  max-width:100%;
  margin-top:clamp(11px,2.36vh,20px);
  font-size:clamp(9px,.8vw,11.5px);
  font-weight:400;
  letter-spacing:.06em;
  color:var(--gl-body);
}
.gprogress__now{ color:var(--gl-ink); }

.gprogress__track{
  position:relative;
  flex:1;
  height:1px;
  background:rgba(255,255,255,.16);
}
.gprogress__bar{
  position:absolute;
  inset:0 auto 0 0;
  height:1px;
  background:var(--gl-gold);
  transition:width .45s ease;
}

/* ---- mosaic ---- */
.mosaic{
  display:flex;
  flex-direction:column;
  gap:6px;
  height:clamp(400px,78.3vh,700px);
}

.mosaic__row{ display:flex; gap:7px; min-height:0; }
.mosaic__row--1{ flex:216; }
.mosaic__row--2{ flex:199; }
.mosaic__row--3{ flex:185; }

.gtile{
  position:relative;
  margin:0;
  min-width:0;
  overflow:hidden;
  background:#232323;
}
.gtile img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .7s cubic-bezier(.2,.6,.2,1), opacity .45s ease;
}
.gtile:hover img{ transform:scale(1.045); }
.mosaic.is-swapping .gtile img{ opacity:0; }

/* ---- vertical label ---- */
.gallery__rail{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding-bottom:clamp(30px,9vh,80px);
}

.gallery__rail-text{
  writing-mode:vertical-rl;
  font-size:clamp(9px,.8vw,11.5px);
  font-weight:500;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gl-gold-3);
  white-space:nowrap;
}

.gallery__rail-line{
  width:1px;
  height:clamp(40px,9vh,78px);
  background:linear-gradient(to bottom, rgba(196,160,99,.7), rgba(196,160,99,.08));
}
.gallery__rail-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  border:1px solid rgba(196,160,99,.7);
}

/* =========================================================
   AMENITIES
   ========================================================= */

.amen{
  background:var(--am-bg);
  padding:clamp(48px,7vh,72px) clamp(16px,3.1vw,42px) clamp(28px,4.5vh,46px);
  scroll-margin-top:var(--header-h);
}

.amen__inner{ max-width:1313px; margin:0 auto; }

/* ---- top area: intro beside the card row ---- */
.amen__top{
  display:grid;
  grid-template-columns:253fr 1060fr;
  column-gap:clamp(10px,1vw,16px);
  align-items:center;
}

.eyebrow--wide{ letter-spacing:.24em; color:var(--am-gold); }

.amen__intro .rule--xs{ background:var(--am-gold); margin-top:clamp(11px,2.1vh,18px); }
.amen__intro .rule--sm{ background:var(--am-gold); width:44px; margin-top:clamp(14px,2.4vh,22px); }

.amen__title{
  margin:clamp(20px,4.5vh,40px) 0 0;
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight:400;
  font-size:clamp(28px,3.3vw,47px);
  line-height:1.2;
  letter-spacing:-.0215em;
  color:var(--am-ink);
}
.amen__title em{ font-style:normal; color:var(--am-gold-2); }

.amen__text{
  max-width:17.5em;
  margin:clamp(14px,2.7vh,24px) 0 0;
  font-size:clamp(11px,.95vw,13.5px);
  line-height:1.62;
  color:var(--am-body);
}

.amen__leaf{
  display:block;
  width:clamp(56px,6vw,86px);
  height:auto;
  margin:clamp(6px,1.4vh,14px) 0 0 auto;
  margin-right:clamp(6px,2vw,28px);
  color:var(--am-gold-3);
}

/* ---- banner ---- */
.amen__banner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(8px,1.1vw,16px);
  margin:0;
  font-size:clamp(10px,.95vw,13.5px);
  font-weight:500;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--am-gold);
  white-space:nowrap;
}
.amen__wing{
  width:clamp(60px,9.5vw,130px);
  height:14px;
  flex:none;
  color:var(--am-gold-3);
}
.amen__wing--flip{ transform:scaleX(-1); }

/* ---- card row ---- */
/* ---- ticker ----
   The row keeps its place in the layout; only its contents drift. main.js
   clones the seven cards, so translating the track by exactly -50% lands
   on an identical frame and the loop is invisible. The spacing lives on
   each card's margin (not the flex gap) so both halves measure the same. */
.amen__marquee{
  margin-top:clamp(14px,3vh,28px);
  overflow:hidden;
  /* without this the track's max-content width sets the grid column's
     automatic minimum and blows the whole row out */
  min-width:0;
}

.amen__main{ min-width:0; }

.amen__cards{
  display:flex;
  align-items:flex-start;
  width:max-content;
  animation:amenTicker var(--ticker-dur,24s) linear infinite;
}
.amen__marquee:hover .amen__cards{ animation-play-state:paused; }

.amen__cards li{
  flex:0 0 auto;
  margin-right:var(--ticker-gap,14px);
}
.amen__cards img{
  height:clamp(140px,11.4vw,190px);
  width:auto;
  aspect-ratio:var(--ar, 1);
  display:block;
  transition:transform .5s cubic-bezier(.2,.6,.2,1);
}
.amen__cards li:hover img{ transform:translateY(-3px); }

@keyframes amenTicker{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}

/* reduced motion: hold still and let people scroll it by hand instead */
@media (prefers-reduced-motion:reduce){
  .amen__cards{ animation:none; }
  .amen__marquee{ overflow-x:auto; }
}

/* ---- and much more ---- */
.amen__more{
  display:flex;
  align-items:center;
  gap:clamp(8px,1vw,14px);
  margin-top:clamp(24px,4.8vh,48px);
  color:var(--am-gold-3);
}
.amen__more-line{ flex:1; height:1px; background:rgba(176,140,80,.32); }
.amen__more-tip{ width:22px; height:12px; flex:none; }
.amen__more-tip--flip{ transform:scaleX(-1); }
.amen__more-label{
  font-size:clamp(9px,.82vw,12px);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--am-gold);
  white-space:nowrap;
}

/* the band doubles as a trigger for the extra amenities: it stays centred,
   so it is reachable even when the fixed chat panel covers the grid corner */
.amen__more-label--btn{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  padding:.35em .2em;
  background:none;
  border:0;
  font-family:inherit;
  cursor:pointer;
  transition:color .3s ease;
}
.amen__more-label--btn:hover{ color:var(--am-gold-3); }
.amen__more-label--btn:focus-visible{ outline:1px solid var(--am-gold); outline-offset:3px; }

.amen__more-chev{
  width:.9em;
  height:auto;
  flex:none;
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.amen__more-label--btn[aria-expanded="true"] .amen__more-chev{ transform:rotate(180deg); }

/* ---- 7 x 4 amenity grid (+ an extra block that unfolds on click) ---- */
.amen__sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.amen__grid{
  display:grid;
  grid-template-columns:repeat(7, minmax(0,1fr));
  margin-top:clamp(14px,2.6vh,26px);
  border-top:1px solid var(--am-line);
}

.amen__grid li{
  display:flex;
  align-items:center;
  gap:clamp(6px,.72vw,11px);
  min-height:clamp(46px,7.9vh,68px);
  padding:6px clamp(4px,.58vw,9px);
  border-bottom:1px solid var(--am-line);
  border-right:1px solid var(--am-line);
}
.amen__grid li:nth-child(7n){ border-right:0; }

.amen__grid svg{
  flex:none;
  width:clamp(18px,1.62vw,24px);
  height:clamp(18px,1.62vw,24px);
  fill:none;
  stroke:var(--am-gold);
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.amen__grid span{
  font-size:clamp(9.5px,.85vw,12.5px);
  font-weight:400;
  line-height:1.3;
  color:var(--am-body-2);
}

.amen__grid-more{ justify-content:center; padding:0; }

/* the 28th cell: fills its box so the whole tile is the hit area */
.amen__grid-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(5px,.5vw,8px);
  width:100%;
  align-self:stretch;
  padding:6px clamp(4px,.58vw,9px);
  background:none;
  border:0;
  font:inherit;
  cursor:pointer;
  color:var(--am-gold-3);
  transition:color .3s ease, background-color .3s ease;
}
.amen__grid-toggle:hover{ color:var(--am-gold); background:rgba(0,0,0,.02); }
.amen__grid-toggle:focus-visible{ outline:1px solid var(--am-gold); outline-offset:-3px; }

.amen__grid-more .amen__grid-toggle-txt{
  font-size:clamp(9.5px,.85vw,12.5px);
  font-style:italic;
  line-height:1.3;
  color:inherit;
}

.amen__grid-more .amen__grid-chev{
  width:clamp(9px,.78vw,12px);
  height:auto;
  stroke:currentColor;
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.amen__grid-toggle[aria-expanded="true"] .amen__grid-chev{ transform:rotate(180deg); }

/* collapsed to a zero-height row, so the reveal animates without a
   hard-coded max-height that would break at other column counts */
.amen__extra-wrap{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .5s cubic-bezier(.22,.61,.36,1);
}
.amen__extra-wrap.is-open{ grid-template-rows:1fr; }

.amen__grid--extra{
  min-height:0;
  overflow:hidden;
  margin-top:0;
  border-top:0;
}
.amen__grid--extra li{
  opacity:0;
  transition:opacity .4s ease .1s;
}
.amen__extra-wrap.is-open .amen__grid--extra li{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .amen__extra-wrap,
  .amen__grid--extra li,
  .amen__grid-more .amen__grid-chev{ transition:none; }
}

/* ---- closing ornament ---- */
.amen__foot{
  display:flex;
  align-items:center;
  gap:clamp(10px,1.4vw,20px);
  margin-top:clamp(20px,3.6vh,36px);
  color:var(--am-gold-3);
}
.amen__foot-line{ flex:1; height:1px; background:rgba(176,140,80,.3); }
.amen__foot-mark{ width:54px; height:20px; flex:none; }

/* =========================================================
   FLOOR PLANS
   ========================================================= */

.plans{
  background:var(--pl-bg);
  padding:clamp(40px,6vh,64px) 0 clamp(26px,4vh,40px);
  scroll-margin-top:var(--header-h);
  overflow:hidden;
}

.plans__grid{
  display:grid;
  grid-template-columns:337fr 1029fr;
  align-items:start;
}

/* ---- left column ---- */
.plans__intro{ padding:clamp(20px,4vh,38px) clamp(14px,2vw,28px) 0 clamp(16px,3.1vw,42px); }

.plans__intro .rule--xs{ background:var(--pl-gold); margin-top:clamp(10px,1.9vh,16px); }
.plans__intro .rule--sm{ background:var(--pl-gold); width:44px; margin-top:clamp(14px,2.6vh,24px); }

.plans__title{
  position:relative;
  margin:clamp(18px,3.6vh,32px) 0 0;
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight:400;
  font-size:clamp(30px,3.66vw,52px);
  line-height:1.18;
  letter-spacing:-.0215em;
  color:var(--pl-ink);
}
.plans__title em{ font-style:normal; color:var(--pl-gold-2); }

.plans__spark{
  position:absolute;
  top:-.42em; right:clamp(4px,2vw,26px);
  width:clamp(16px,1.6vw,24px);
  height:auto;
  color:var(--pl-gold-3);
}

.plans__text{
  max-width:20em;
  margin:clamp(14px,2.6vh,24px) 0 0;
  font-size:clamp(11px,.95vw,13.5px);
  line-height:1.62;
  color:var(--pl-body);
}

.plans__branch{
  display:block;
  width:clamp(80px,9vw,128px);
  height:auto;
  margin:clamp(10px,2vh,20px) 0 0 auto;
  color:var(--pl-gold-3);
}

/* ---- carousel rows ---- */
.plans__rows{ display:flex; flex-direction:column; min-width:0; }

.prow{
  position:relative;
  border:1px solid var(--pl-panel-line);
  border-right:0;
  border-radius:14px 0 0 14px;
  background:var(--pl-panel);
  padding:clamp(14px,2.4vh,22px) 0 clamp(12px,2vh,18px);
}

/* ribbon */
.prow__ribbon{
  display:inline-block;
  margin-left:-1px;
  padding:clamp(7px,1.2vh,11px) clamp(26px,2.6vw,38px) clamp(7px,1.2vh,11px) clamp(16px,1.7vw,26px);
  font-size:clamp(11px,1.02vw,15px);
  font-weight:600;
  letter-spacing:.16em;
  color:#FBF7EF;
  clip-path:polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}
.prow--green .prow__ribbon{ background:var(--pl-green); }
.prow--gold  .prow__ribbon{ background:var(--pl-gold-4); }

.prow__body{
  position:relative;
  display:grid;
  grid-template-columns:var(--pl-info) 1fr;
  gap:clamp(10px,1.6vw,24px);
  align-items:stretch;
  margin-top:clamp(10px,2vh,20px);
  padding-left:clamp(16px,1.7vw,26px);
}

/* info column */
.prow__info{ display:flex; flex-direction:column; min-width:0; }
.prow__icon{ width:clamp(26px,2.5vw,36px); height:auto; }
.prow--green .prow__icon{ color:var(--pl-green); }
.prow--gold  .prow__icon{ color:var(--pl-gold-4); }

.prow__info p{
  margin:clamp(10px,1.9vh,18px) 0 0;
  font-size:clamp(9.5px,.83vw,12px);
  line-height:1.72;
  color:var(--pl-body);
}
.prow__rule{
  display:block;
  width:24px; height:1px;
  margin:clamp(10px,1.9vh,18px) 0;
  background:var(--pl-gold-3);
}
.prow__cta{
  display:inline-flex;
  align-items:center;
  gap:clamp(8px,1vw,16px);
  font-size:clamp(8.5px,.72vw,10.5px);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.prow__cta svg{ width:clamp(16px,1.6vw,24px); height:10px; transition:transform .3s ease; }
.prow__cta:hover svg{ transform:translateX(5px); }
.prow--green .prow__cta{ color:var(--pl-green); }
.prow--gold  .prow__cta{ color:var(--pl-gold-4); }

/* track */
.prow__viewport{ overflow:hidden; min-width:0; }
.prow__track{
  display:flex;
  gap:clamp(10px,1.15vw,17px);
  transition:transform .55s cubic-bezier(.3,.7,.2,1);
  will-change:transform;
}

.pcard{
  flex:0 0 var(--pcard-w, 228px);
  display:flex;
  flex-direction:column;
  border:1px solid var(--pl-card-line);
  border-radius:12px;
  background:var(--pl-card);
  padding:clamp(10px,1.7vh,16px) clamp(10px,1vw,15px) clamp(12px,2vh,18px);
  transition:box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}
.pcard:hover{
  border-color:var(--pl-card-line-2);
  box-shadow:0 8px 26px rgba(120,96,58,.10);
  transform:translateY(-2px);
}

.pcard__head{ display:flex; flex-direction:column; gap:4px; }
.pcard__type{
  font-size:clamp(8.5px,.73vw,11px);
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--pl-gold);
}
.pcard__face,
.pcard__sba{
  font-size:clamp(9.5px,.8vw,12px);
  font-weight:500;
  color:var(--pl-ink-2);
}

.pcard img{
  width:100%;
  height:auto;
  max-height:clamp(160px,30vh,268px);
  object-fit:contain;
  margin-top:clamp(8px,1.6vh,14px);
  mix-blend-mode:multiply;
}

/* the closing "coming soon" tile */
.pcard--soon{
  align-items:center;
  justify-content:center;
  text-align:center;
  background:var(--pl-soon);
  border-style:dashed;
}
.pcard--soon p{
  margin:0;
  font-size:clamp(10px,.86vw,12.5px);
  line-height:1.75;
  color:var(--pl-body);
}
.pcard__rule{ display:block; width:26px; height:1px; margin-top:14px; background:var(--pl-gold-3); }

/* arrows */
.pnav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  display:grid;
  place-items:center;
  width:clamp(30px,2.6vw,37px);
  height:clamp(30px,2.6vw,37px);
  border-radius:50%;
  color:#FBF7EF;
  box-shadow:0 4px 14px rgba(60,48,28,.24);
  transition:opacity .25s ease, transform .25s ease;
}
.pnav svg{ width:14px; height:14px; }
.pnav--prev{ left:calc(var(--pl-info) + clamp(16px,1.7vw,26px) - 2px); }
.pnav--next{ right:clamp(6px,.8vw,14px); }
.prow--green .pnav{ background:var(--pl-green-2); }
.prow--gold  .pnav{ background:var(--pl-gold-5); }
.pnav:disabled{ opacity:.32; pointer-events:none; }

/* dots */
.prow__dots{
  display:flex;
  gap:7px;
  margin-top:clamp(10px,1.9vh,18px);
  padding-left:calc(var(--pl-info) + clamp(16px,1.7vw,26px) + clamp(10px,1.6vw,24px));
}
.prow__dots button{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--pl-dot);
  transition:background-color .25s ease, transform .25s ease;
}
.prow__dots button.is-on{ transform:scale(1.15); }
.prow--green .prow__dots button.is-on{ background:var(--pl-green-2); }
.prow--gold  .prow__dots button.is-on{ background:var(--pl-gold-5); }

/* divider between the two rows */
.plans__sep{
  display:flex;
  align-items:center;
  gap:clamp(10px,1.4vw,20px);
  margin:clamp(12px,2.2vh,22px) clamp(6px,.8vw,14px) clamp(12px,2.2vh,22px) 0;
  color:var(--pl-gold-3);
}
.plans__sep span{ flex:1; height:1px; background:rgba(176,140,80,.26); }
.plans__sep svg{ width:40px; height:14px; flex:none; }

/* footnote */
.plans__note{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:clamp(18px,3vh,30px) auto 0;
  padding:0 clamp(16px,3.1vw,42px);
  font-size:clamp(9.5px,.82vw,12px);
  color:var(--pl-body);
}
.plans__note svg{ width:20px; height:16px; flex:none; color:var(--pl-gold-3); }

/* =========================================================
   CONTACT
   ========================================================= */

.contact{
  background:var(--ct-bg);
  padding:0 0 clamp(20px,3.4vh,34px);
  scroll-margin-top:var(--header-h);
  overflow:hidden;
}

/* ---- top band ---- */
.ctband{
  position:relative;
  min-height:clamp(300px,46vh,400px);
  display:flex;
  align-items:center;
}

.ctband__visual{ position:absolute; inset:0; pointer-events:none; }
.ctband__visual img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 42%;
  display:block;
}
/* fade the render out to the left so the headline sits on clean cream */
.ctband__visual::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    var(--ct-bg) 0%, var(--ct-bg) 20%,
    rgba(247,238,228,.86) 34%, rgba(247,238,228,.18) 52%, rgba(247,238,228,0) 66%);
}

.ctband__inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1290px;
  margin:0 auto;
  padding:clamp(28px,5vh,52px) clamp(16px,3.1vw,42px);
  display:grid;
  grid-template-columns:1fr auto;
  gap:clamp(16px,2vw,32px);
  align-items:center;
}

.ctband__text .rule--xs{ background:var(--ct-gold); margin-top:clamp(9px,1.7vh,15px); }

.ct-title{
  position:relative;
  display:inline-block;
  margin:clamp(16px,3vh,28px) 0 0;
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight:400;
  font-size:clamp(30px,3.66vw,52px);
  line-height:1.16;
  letter-spacing:-.0215em;
  color:var(--ct-ink);
}
.ct-title em{ font-style:normal; color:var(--ct-gold-2); }

.ct-spark{
  position:absolute;
  top:-.55em; right:-1.5em;
  width:clamp(26px,2.9vw,42px);
  height:auto;
  color:var(--ct-gold-3);
}

.ct-lead{
  margin:clamp(14px,2.6vh,24px) 0 0;
  font-size:clamp(11px,.95vw,13.5px);
  line-height:1.7;
  color:var(--ct-body);
}

.ct-leaf{
  display:block;
  width:clamp(74px,8vw,112px);
  height:auto;
  margin:clamp(6px,1.2vh,14px) 0 0 clamp(60px,10vw,150px);
  color:var(--ct-gold-3);
}

/* relationship-manager card */
.ctrm{
  width:clamp(200px,17.5vw,240px);
  padding:clamp(16px,2.6vh,24px) clamp(14px,1.4vw,22px);
  border:1px solid var(--ct-line);
  border-radius:14px;
  background:rgba(250,244,236,.94);
  backdrop-filter:blur(6px);
  box-shadow:0 10px 34px rgba(96,74,44,.14);
}
.ctrm__top{ display:flex; align-items:flex-start; gap:10px; }
.ctrm__top svg{ width:clamp(22px,2vw,28px); height:auto; flex:none; color:var(--ct-gold); }
.ctrm__top p{
  margin:0;
  font-size:clamp(10px,.83vw,12px);
  line-height:1.6;
  color:var(--ct-ink-2);
}

.ctrm__phone{
  display:block;
  margin-top:clamp(12px,2.2vh,20px);
  font-size:clamp(16px,1.55vw,22px);
  font-weight:600;
  letter-spacing:.01em;
  color:var(--ct-gold-2);
}
.ctrm__hours{
  margin:clamp(6px,1.1vh,10px) 0 0;
  font-size:clamp(9px,.78vw,11.5px);
  color:var(--ct-ink-2);
}
.ctrm__rule{ display:block; width:28px; height:1px; margin:clamp(10px,1.9vh,18px) 0; background:var(--ct-gold-3); }
.ctrm__note{
  margin:0;
  font-size:clamp(9.5px,.8vw,12px);
  line-height:1.65;
  color:var(--ct-body);
}

/* ---- three panels ---- */
.ctgrid{
  max-width:1290px;
  margin:0 auto;
  padding:0 clamp(16px,3.1vw,42px);
  display:grid;
  grid-template-columns:341fr 477fr 428fr;
  gap:clamp(12px,1.8vw,24px);
  align-items:start;
}

.ctpanel{
  border:1px solid var(--ct-line);
  border-radius:14px;
  background:var(--ct-card);
  padding:clamp(14px,2.4vh,22px) clamp(12px,1.3vw,20px) clamp(16px,2.6vh,24px);
  box-shadow:0 4px 18px rgba(120,96,58,.05);
}

.ctpanel__h{
  margin:0;
  font-size:clamp(10px,.86vw,12.5px);
  font-weight:600;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--ct-gold);
}
.ctpanel .rule--xs{ background:var(--ct-gold-3); margin-top:clamp(7px,1.3vh,12px); }

/* get in touch */
.ctlist{ margin-top:clamp(10px,1.9vh,18px); }
.ctlist li{
  display:flex;
  gap:clamp(9px,1vw,15px);
  padding:clamp(9px,1.6vh,15px) 0;
}
.ctlist li + li{ border-top:1px solid var(--ct-line); }

.ctlist__ic{
  flex:none;
  display:grid;
  place-items:center;
  width:clamp(28px,2.6vw,36px);
  height:clamp(28px,2.6vw,36px);
  border-radius:50%;
  background:var(--ct-gold);
  color:#FBF6EC;
}
.ctlist__ic svg{ width:52%; height:52%; }

.ctlist strong{
  display:block;
  margin-bottom:2px;
  font-size:clamp(10px,.83vw,12px);
  font-weight:600;
  color:var(--ct-ink);
}
/* scoped to the text column so it cannot override .ctlist__ic's display */
.ctlist li > div > a,
.ctlist li > div > span{
  display:block;
  font-size:clamp(9.5px,.8vw,11.5px);
  line-height:1.6;
  color:var(--ct-body);
}
.ctlist li > div > a:hover{ color:var(--ct-gold-2); }

/* map — a real, live embed of the project's exact Google Maps location */
.ctmap{
  position:relative;
  display:block;
  margin-top:clamp(10px,1.9vh,18px);
  border:1px solid var(--ct-line);
  border-radius:10px;
  overflow:hidden;
  background:#F3ECE0;
}
.ctmap__frame{
  display:block;
  width:100%;
  height:clamp(220px,26vw,300px);
  border:0;
}

.ctmap__cue{
  position:absolute;
  left:50%; bottom:14px;
  transform:translate(-50%,0);
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 16px;
  border-radius:100px;
  background:var(--ct-gold);
  color:#FBF6EC;
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  white-space:nowrap;
  box-shadow:0 6px 18px rgba(60,48,28,.25);
  transition:transform .2s ease, box-shadow .2s ease;
}
.ctmap__cue svg{ width:15px; height:15px; }
.ctmap__cue:hover,
.ctmap__cue:focus-visible{
  transform:translate(-50%,-2px);
  box-shadow:0 10px 22px rgba(60,48,28,.32);
}

.cttimes{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  margin-top:clamp(10px,1.8vh,16px);
}
.cttimes li{
  display:flex;
  align-items:flex-start;
  gap:7px;
  padding:0 clamp(5px,.6vw,10px);
  color:var(--ct-gold);
}
.cttimes li + li{ border-left:1px solid var(--ct-line); }
.cttimes svg{ width:clamp(16px,1.5vw,22px); height:auto; flex:none; }
.cttimes span{
  display:block;
  font-size:clamp(8.5px,.72vw,10.5px);
  line-height:1.45;
  color:var(--ct-body);
}
.cttimes strong{
  display:block;
  font-weight:500;
  color:var(--ct-ink-2);
}

/* form */
.ctform{ margin-top:clamp(10px,1.9vh,18px); display:flex; flex-direction:column; gap:clamp(7px,1.2vh,11px); }
.ctform__row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(7px,.8vw,11px); }

.ctform input,
.ctform textarea{
  width:100%;
  padding:clamp(8px,1.5vh,13px) clamp(9px,1vw,14px);
  border:1px solid var(--ct-input-line);
  border-radius:7px;
  background:var(--ct-input);
  font-family:inherit;
  font-size:clamp(10px,.83vw,12.5px);
  color:var(--ct-ink);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.ctform textarea{ resize:vertical; min-height:clamp(78px,13vh,120px); }
.ctform input::placeholder,
.ctform textarea::placeholder{ color:#A9A199; }
.ctform input:focus,
.ctform textarea:focus{
  outline:none;
  border-color:var(--ct-gold-3);
  box-shadow:0 0 0 3px rgba(169,128,63,.12);
}
.ctform input.is-bad,
.ctform textarea.is-bad{ border-color:#C0785F; background:#FBF0EA; }

.ctsend{
  width:100%;
  padding:clamp(9px,1.7vh,14px);
  border-radius:7px;
  background:var(--ct-btn);
  color:#FCF7EE;
  font-size:clamp(9.5px,.8vw,12px);
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  transition:background-color .25s ease, transform .2s ease;
}
.ctsend:hover{ background:#96703F; transform:translateY(-1px); }

.ctform__msg{
  margin:0;
  min-height:1.2em;
  font-size:clamp(9.5px,.78vw,11.5px);
  color:var(--ct-gold-2);
}
.ctform__msg.is-bad{ color:#B5573C; }

.ctquick{
  margin-top:clamp(8px,1.5vh,14px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(7px,.8vw,11px);
}
.ctquick__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:clamp(8px,1.5vh,12px);
  border:1px solid var(--ct-gold-3);
  border-radius:7px;
  background:transparent;
  color:var(--ct-gold-2);
  font-size:clamp(9.5px,.8vw,12px);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:background-color .2s ease, color .2s ease, transform .2s ease;
}
.ctquick__btn svg{ width:15px; height:15px; }
.ctquick__btn:hover{ background:var(--ct-gold-3); color:#FCF7EE; transform:translateY(-1px); }
.ctquick__btn--wa:hover{ background:#25D366; border-color:#25D366; color:#fff; }

.ctfollow{
  display:flex;
  align-items:center;
  gap:clamp(7px,.8vw,12px);
  margin-top:clamp(12px,2.2vh,20px);
}
.ctfollow > span{
  margin-right:auto;
  font-size:clamp(8.5px,.72vw,10.5px);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ct-ink-2);
}
.ctfollow a{
  display:grid;
  place-items:center;
  width:clamp(24px,2.1vw,30px);
  height:clamp(24px,2.1vw,30px);
  border:1px solid var(--ct-ink-2);
  border-radius:50%;
  color:var(--ct-ink-2);
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
.ctfollow a svg{ width:54%; height:54%; }
.ctfollow a:hover{ background:var(--ct-gold); border-color:var(--ct-gold); color:#FBF6EC; }

/* ---- closing ornament ---- */
.ctfoot{
  display:flex;
  align-items:center;
  gap:clamp(10px,1.4vw,20px);
  max-width:1290px;
  margin:clamp(20px,3.4vh,34px) auto 0;
  padding:0 clamp(16px,3.1vw,42px);
  color:var(--ct-gold-3);
}
.ctfoot__line{ flex:1; height:1px; background:rgba(176,140,80,.3); }
.ctfoot__badge{
  display:grid; place-items:center;
  width:clamp(24px,2.2vw,32px); height:clamp(24px,2.2vw,32px);
  border:1px solid var(--ct-gold-3);
  border-radius:50%;
  color:var(--ct-gold);
}
.ctfoot__badge svg{ width:50%; height:50%; }
.ctfoot__text{
  font-size:clamp(8.5px,.72vw,10.5px);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.5;
  color:var(--ct-body);
  white-space:nowrap;
}

.ctfoot2{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(8px,1.2vw,18px);
  max-width:1290px;
  margin:clamp(8px,1.4vh,14px) auto 0;
  padding:0 clamp(16px,3.1vw,42px);
  color:var(--ct-gold-3);
}
.ctfoot2 span{ width:clamp(60px,14vw,190px); height:1px; background:rgba(176,140,80,.26); }
.ctfoot2 svg{ width:70px; height:12px; flex:none; }

/* =========================================================
   DARK-THEME ADJUSTMENTS
   Floor plans now sits on the deep-green scale, so the few rules that
   assumed a cream background are corrected here.
   ========================================================= */

.plans .eyebrow--wide{ color:var(--pl-gold); }
.plans__sep span{ background:var(--dk-line); }
.pcard:hover{ box-shadow:0 12px 32px rgba(0,0,0,.32); }
.prow{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.02); }

/* ---- dark pill buttons ----
   EXPLORE PROJECT / KNOW MORE sit on cream, so they take the solid
   dark-green fill; EXPLORE n BHK sits on a dark panel, so it inverts. */
.explore,
.know{
  align-self:flex-start;
  gap:clamp(12px,1.4vw,20px);
  padding:clamp(11px,1.9vh,16px) clamp(18px,1.9vw,28px);
  border-radius:100px;
  background:var(--dk);
  color:#F1EEE4;
  transition:background-color .28s ease, transform .25s ease, box-shadow .28s ease;
}
.explore:hover,
.know:hover{
  background:#16261A;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(30,51,32,.28);
}

.explore__arrow{ color:var(--dk-gold); width:clamp(30px,2.6vw,40px); }
.know__arrow{ color:var(--dk-gold); }

/* the underline belonged to the old text link */
.know{ padding-bottom:clamp(11px,1.9vh,16px); }
.know::after{ display:none; }
.know__label{ color:#F1EEE4; }

/* plans CTA: light pill on the dark panel */
.prow__cta{
  align-self:flex-start;
  padding:clamp(8px,1.4vh,12px) clamp(12px,1.3vw,18px);
  border-radius:100px;
  background:#F4F1E7;
  white-space:nowrap;
  letter-spacing:.1em;
  gap:clamp(6px,.7vw,11px);
  transition:background-color .28s ease, transform .25s ease;
}
.prow__cta svg{ width:clamp(14px,1.25vw,19px); }
.prow__cta:hover{ background:#FFFFFF; transform:translateY(-2px); }
.prow--green .prow__cta{ color:#24401F; }
.prow--gold  .prow__cta{ color:#6E4E1C; }

/* ---- dark card edges ---- */
.pillar{ border-left:3px solid var(--dk); }
/* on the dark panel a dark edge would vanish, so the plan cards take gold */
.pcard:not(.pcard--soon){ border-left:3px solid var(--pl-gold); }

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer{ background:var(--dk); color:var(--dk-body); }

.foot__main{
  max-width:1290px;
  margin:0 auto;
  padding:clamp(38px,6vh,66px) clamp(16px,3.1vw,42px) clamp(28px,4.4vh,46px);
  display:grid;
  grid-template-columns:1.9fr 1fr 1fr 1.5fr;
  gap:clamp(20px,3vw,48px);
}

.foot__lockup{ display:flex; align-items:center; gap:clamp(10px,1.2vw,18px); }
.foot__lockup img{ height:clamp(38px,3.6vw,58px); width:auto; }
.foot__lockup span{
  font-size:clamp(13px,1.15vw,17px);
  font-weight:500;
  letter-spacing:.1911em;
  text-transform:uppercase;
  color:var(--dk-gold);
}

.foot__tag{
  margin:clamp(12px,2.2vh,20px) 0 0;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(16px,1.45vw,21px);
  color:var(--dk-ink);
}
.foot__blurb{
  max-width:30em;
  margin:clamp(8px,1.5vh,14px) 0 0;
  font-size:clamp(10.5px,.85vw,12.5px);
  line-height:1.75;
  color:var(--dk-body);
}

.foot__col{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(6px,1.1vh,10px); }
.foot__col h4{
  margin:0 0 clamp(4px,.8vh,8px);
  font-size:clamp(9px,.78vw,11.5px);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--dk-gold);
}
.foot__col a,
.foot__col span{
  font-size:clamp(10.5px,.85vw,12.5px);
  line-height:1.7;
  color:var(--dk-body);
  transition:color .22s ease;
}
.foot__col a:hover{ color:var(--dk-gold); }

.foot__social{ display:flex; gap:9px; margin-top:clamp(10px,1.8vh,16px); }
.foot__social a{
  display:grid;
  place-items:center;
  width:clamp(26px,2.2vw,32px);
  height:clamp(26px,2.2vw,32px);
  border:1px solid var(--dk-line);
  border-radius:50%;
  color:var(--dk-body);
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
.foot__social a svg{ width:52%; height:52%; }
.foot__social a:hover{ background:var(--dk-gold); border-color:var(--dk-gold); color:var(--dk); }

.foot__base{
  border-top:1px solid var(--dk-line);
  background:var(--dk-2);
}
.foot__base p{
  margin:0;
  font-size:clamp(9px,.76vw,11.5px);
  color:#8C9B8B;
}
.foot__base{
  display:flex;
  flex-wrap:wrap;
  gap:8px clamp(14px,2vw,30px);
  align-items:center;
  justify-content:space-between;
  padding:clamp(12px,2.2vh,20px) clamp(16px,3.1vw,42px);
}

/* =========================================================
   HERO → ABOUT SCROLL TRANSITION
   The hero pins to the top and every following section rides up over it
   like a curtain. All motion is transform/opacity only, driven from JS.
   ========================================================= */

.js-scroll .hero{
  position:sticky;
  top:0;
  height:100svh;
  z-index:0;
}

/* the curtain and everything behind it must paint above the pinned hero */
.js-scroll .stats,
.js-scroll .about,
.js-scroll .gallery,
.js-scroll .amen,
.js-scroll .plans,
.js-scroll .contact{
  position:relative;
  z-index:1;
}

/* dim layer that deepens as the hero is covered */
.hero__dim{
  position:absolute;
  inset:0;
  background:#141C13;
  opacity:0;
  pointer-events:none;
}

.js-scroll .hero__img{ will-change:transform; }
.js-scroll .hero__content{ will-change:transform, opacity; }

/* ---- horizontal line swipe ----
   The headline splits by LINE, not by letter: NOVELLE swipes off to the
   left, BOULEVARD off to the right. Each line keeps its real text, so
   there are no duplicated copies and nothing to hide from screen readers. */
.js-scroll .hero__title > span{
  white-space:nowrap;
  will-change:transform, opacity;
}

/* ---- the parts of the hero that simply fade out ---- */
.js-scroll .hero__fade{ will-change:transform, opacity; }

/* =========================================================
   ABOUT — ENTRANCE REVEAL
   Image rises from below, the left column arrives from the left and the
   value cards from the right, staggered. All of it is scoped under
   .js-scroll, which JS only adds when motion is allowed — so with JS off
   or reduced motion on, nothing is ever hidden.
   ========================================================= */

.js-scroll .about__intro,
.js-scroll .about .imgspace,
.js-scroll .about .pillar,
.js-scroll .about .scrolldown{
  opacity:0;
  will-change:transform, opacity;
  transition:opacity .9s cubic-bezier(.22,.7,.24,1),
             transform .9s cubic-bezier(.22,.7,.24,1);
}

/* first two frames only: land in the start state without animating to it */
.js-preload .about__intro,
.js-preload .about .imgspace,
.js-preload .about .pillar,
.js-preload .about .scrolldown{
  transition:none !important;
}

/* start positions + stagger (image first, then left column, then cards) */
.js-scroll .about .imgspace  { transform:translate3d(0,56px,0);  transition-delay:0s;    }
.js-scroll .about__intro     { transform:translate3d(-56px,0,0); transition-delay:.12s;  }
.js-scroll .about .pillar:nth-child(1){ transform:translate3d(56px,0,0); transition-delay:.24s; }
.js-scroll .about .pillar:nth-child(2){ transform:translate3d(56px,0,0); transition-delay:.34s; }
.js-scroll .about .pillar:nth-child(3){ transform:translate3d(56px,0,0); transition-delay:.44s; }
.js-scroll .about .scrolldown{ transform:translate3d(0,16px,0);  transition-delay:.56s;  }

/* settled */
.js-scroll .about.is-in .about__intro,
.js-scroll .about.is-in .imgspace,
.js-scroll .about.is-in .pillar,
.js-scroll .about.is-in .scrolldown{
  opacity:1;
  transform:translate3d(0,0,0);
}

/* ---- reduced motion: everything stays put ---- */
@media (prefers-reduced-motion:reduce){
  .js-scroll .hero{ position:relative; height:auto; }
  .js-scroll .hero__title > span{ transform:none !important; opacity:1 !important; }
  .hero__dim{ display:none; }
}

/* =========================================================
   FLOATING ACTIONS
   ========================================================= */

.fab{
  position:fixed;
  bottom:clamp(18px,3vh,30px);
  z-index:40;
  display:grid;
  place-items:center;
  width:clamp(44px,3.4vw,54px);
  height:clamp(44px,3.4vw,54px);
  border-radius:50%;
  background:var(--ab-gold);
  color:#FFFDF8;
  box-shadow:0 6px 18px rgba(140,108,54,.32);
  transition:transform .25s ease, box-shadow .25s ease;
}
.fab:hover{ transform:translateY(-2px); box-shadow:0 9px 24px rgba(140,108,54,.38); }
.fab svg{ width:46%; height:46%; }

.fab--call{ left:clamp(18px,2.4vw,34px); }
.fab--chat{ right:clamp(18px,2.4vw,34px); }

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* tablet - render narrows, text stays left */
@media (max-width:1100px){
  .rail{ left:14px; }
  .hero__title{ font-size:clamp(40px,7.4vw,72px); }

  /* about: intro goes full width, image + pillars share the row below */
  .about__grid{
    grid-template-columns:1fr 1fr;
    row-gap:clamp(30px,5vh,48px);
  }
  .about__intro{ grid-column:1 / -1; padding-top:0; }
  .about__text{ max-width:34em; }
  .imgspace{ min-height:340px; }

  /* gallery: drop the vertical rail, give the mosaic the room */
  .gallery__grid{ grid-template-columns:250fr 932fr; }
  .gallery__rail{ display:none; }
  .gallery__intro{ padding-top:clamp(20px,4vh,44px); }
  .gallery__controls{ margin-top:clamp(28px,6vh,56px); }

  /* amenities: intro above, card row becomes a horizontal scroller */
  .amen__top{ grid-template-columns:1fr; row-gap:clamp(20px,4vh,36px); }
  .amen__text{ max-width:34em; }
  .amen__leaf{ margin-left:0; margin-right:auto; }
  .amen__cards img{ height:clamp(150px,20vw,190px); }
  .amen__grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .amen__grid li:nth-child(7n){ border-right:1px solid var(--am-line); }
  .amen__grid li:nth-child(4n){ border-right:0; }

  /* floor plans: intro above, rows full width */
  .plans__grid{ grid-template-columns:1fr; }
  .plans__intro{ padding:0 clamp(16px,3.1vw,42px) clamp(18px,3vh,30px); }
  .plans__text{ max-width:34em; }
  .plans__branch{ margin-left:0; margin-right:auto; }
  .prow{ border-radius:14px 0 0 14px; }

  /* contact: form drops to its own full-width row */
  .ctgrid{ grid-template-columns:1fr 1fr; }
  .ctgrid .ctpanel:nth-child(3){ grid-column:1 / -1; }

  /* dark pieces */
  .foot__main{ grid-template-columns:1.6fr 1fr 1fr; }
  .foot__col--wide{ grid-column:1 / -1; }
  .ctform__row{ grid-template-columns:1fr 1fr; }
  .ctrm{ width:clamp(190px,24vw,230px); }
}

/* mobile - nav collapses to a drawer, render drops below the text */
@media (max-width:860px){
  /* Entrance animations slide in horizontally on desktop. On a narrow screen
     that pushes the element past the right edge and gives the whole document a
     horizontal scrollbar, so below 860px they rise vertically instead. */
  .js-scroll .about__intro,
  .js-scroll .about .pillar:nth-child(1),
  .js-scroll .about .pillar:nth-child(2),
  .js-scroll .about .pillar:nth-child(3){ transform:translate3d(0,34px,0); }

  [data-reveal="left"],
  [data-reveal="right"]{ transform:translateY(26px); }

  /* --- touch targets ---
     The carousel dots and arrows are deliberately small visually. Grow the
     tappable area with a pseudo-element so the look is unchanged. */
  .prow__dots button{ position:relative; }
  .prow__dots button::after{ content:""; position:absolute; inset:-13px; }

  .pnav{ width:38px; height:38px; }
  .pnav svg{ width:15px; height:15px; }

  .gnav{ min-width:40px; min-height:40px; }

  .foot__social a{ width:36px; height:36px; }
  .ctp-follow a{ width:40px; height:40px; }

  /* footer links get room to be tapped without changing how they read */
  .foot__col a{ padding-block:5px; }

  /* The drawer must NOT use backdrop-filter: it lives inside .site-header,
     which already has one. Nested backdrop filters break compositing — the
     panel paints transparent and arrives a beat late. A solid fill is both
     correct and far cheaper on a phone. */
  .nav{
    position:fixed;
    inset:0 0 0 auto;
    width:min(320px,82vw);
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:26px;
    padding:34px;
    background:#F7F2EB;
    box-shadow:-14px 0 40px rgba(60,44,26,.18);
    transform:translateX(100%);
    visibility:hidden;
    will-change:transform;
    overflow-y:auto;
    overscroll-behavior:contain;   /* scrolling the drawer must not scroll the page */
    transition:transform .34s cubic-bezier(.32,.72,.29,1),
               visibility 0s linear .34s;
    z-index:45;
  }
  .nav.is-open{
    transform:translateX(0);
    visibility:visible;
    transition:transform .34s cubic-bezier(.32,.72,.29,1), visibility 0s;
  }
  .nav__link{ font-size:12px; letter-spacing:.24em; padding-block:6px; }

  /* dim the page behind the open drawer; sits under the header so the
     close button stays reachable */
  .nav-scrim{
    position:fixed;
    inset:0;
    z-index:44;
    background:rgba(28,22,14,.44);
    opacity:0;
    visibility:hidden;
    transition:opacity .34s ease, visibility 0s linear .34s;
  }
  .nav-scrim.is-on{
    opacity:1;
    visibility:visible;
    transition:opacity .34s ease, visibility 0s;
  }

  /* page must not scroll behind the drawer */
  html.nav-open, html.nav-open body{ overflow:hidden; }

  /* one lighter blur layer on a phone is plenty */
  .site-header.is-stuck::before,
  .site-header.is-dark::before{
    backdrop-filter:blur(9px) saturate(130%);
    -webkit-backdrop-filter:blur(9px) saturate(130%);
  }

  .burger{ display:flex; z-index:46; }
  .burger.is-open span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
  .burger.is-open span:nth-child(2){ opacity:0; }
  .burger.is-open span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); width:16px; }

  /* about: single column */
  .about{ padding-top:clamp(48px,8vh,80px); }

  /* about page: hero stacks, facts and pillars go 2-up / 1-up */
  .abt-hero__grid{ grid-template-columns:1fr; gap:clamp(24px,4vh,38px); }
  .abt-hero__figure{ aspect-ratio:16 / 10; }
  .abt-facts__row{ grid-template-columns:1fr 1fr; row-gap:clamp(20px,3.4vh,30px); }
  .abt-facts__row li:nth-child(3){ padding-left:0; border-left:0; }
  .abt-pillars{ grid-template-columns:1fr; }

  /* contact page: everything stacks */
  .ctp__grid{ grid-template-columns:1fr; gap:clamp(26px,4.4vh,44px); }
  .ctp-form__row{ grid-template-columns:1fr; }
  .about__grid{ grid-template-columns:1fr; row-gap:clamp(26px,4.4vh,40px); }
  .about__intro{ grid-column:auto; }
  .about__text{ max-width:38em; }
  .imgspace{ min-height:clamp(240px,42vh,360px); }
  .pillar{ min-height:0; padding:clamp(18px,3vh,26px) 20px; }
  .pillars{ gap:clamp(12px,2vh,18px); }

  /* gallery: intro stacks above the mosaic */
  .gallery{ padding-top:calc(var(--header-h) + clamp(20px,4vh,40px)); }
  .gallery__grid{ grid-template-columns:1fr; row-gap:clamp(26px,4.4vh,40px); }
  .gallery__intro{ padding-top:0; }
  .gallery__text{ max-width:34em; }
  .gallery__controls{ margin-top:clamp(24px,4vh,40px); }
  .gprogress{ width:100%; max-width:320px; }
  .mosaic{ height:clamp(300px,52vh,460px); gap:5px; }
  .mosaic__row{ gap:5px; }

  /* amenities: banner wraps, grid to 3 columns */
  .amen__banner{ white-space:normal; text-align:center; line-height:1.5; }
  .amen__wing{ display:none; }
  .amen__cards img{ height:170px; }
  .amen__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .amen__grid li:nth-child(4n){ border-right:1px solid var(--am-line); }
  .amen__grid li:nth-child(3n){ border-right:0; }
  .amen__foot-line{ max-width:40%; }

  /* floor plans: info block moves above the track */
  .prow__body{ grid-template-columns:1fr; gap:clamp(12px,2vh,18px); }
  .prow__info{ padding-right:clamp(16px,3vw,30px); }
  .prow__info p{ max-width:36em; }
  .pnav{ top:auto; bottom:-6px; transform:none; }
  .pnav--prev{ left:auto; right:calc(clamp(6px,.8vw,14px) + 44px); }
  .prow__dots{ padding-left:clamp(16px,1.7vw,26px); }

  /* contact: single column, render sits behind the whole band */
  .ctband{ min-height:0; }
  .ctband__inner{ grid-template-columns:1fr; gap:clamp(18px,3vh,30px); }
  .ctband__visual::after{
    background:linear-gradient(to bottom,
      rgba(247,238,228,.92) 0%, rgba(247,238,228,.80) 46%,
      rgba(247,238,228,.42) 70%, rgba(247,238,228,.18) 100%);
  }
  .ctrm{ width:100%; max-width:340px; }
  .ct-leaf{ margin-left:0; }
  .ct-spark{ right:auto; left:calc(100% + .4em); }
  .ctgrid{ grid-template-columns:1fr; }
  .ctgrid .ctpanel:nth-child(3){ grid-column:auto; }

  /* dark pieces: stats to 2x2, footer to two columns */
  .stats__row{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:clamp(16px,3vh,26px); }
  /* item 3 starts the second row, so it must not carry a divider */
  .stats__row li:nth-child(3)::before,
  .stats__row li:nth-child(3)::after{ display:none; }
  .foot__main{ grid-template-columns:1fr 1fr; }
  .foot__col--wide{ grid-column:auto; }
  .ctfoot__text{ white-space:normal; text-align:center; }

  /* portrait crops the wide plate hard, so bias it towards the tower
     and lift the text off it with a cream scrim */
  .hero__img img{ object-position:64% 62%; }

  .hero::after{
    content:"";
    position:absolute; inset:0;
    z-index:3;
    pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(246,239,231,.97) 0%,
      rgba(246,239,231,.95) 40%,
      rgba(246,239,231,.90) 62%,
      rgba(246,239,231,.55) 74%,
      rgba(246,239,231,0) 88%);
  }

  .hero__content{
    justify-content:flex-start;
    padding:calc(var(--header-h) + 54px) var(--gutter) 0 var(--gutter);
    max-width:100%;
    min-height:auto;
  }

  .hero__title{ font-size:clamp(38px,10.4vw,60px); }

  /* rail turns horizontal and sits just under the header, where the
     canvas is always clean cream regardless of how the plate crops */
  .rail{
    top:calc(var(--header-h) - 4px);
    bottom:auto;
    left:var(--gutter);
    transform:none;
    flex-direction:row;
    align-items:center;
    gap:16px;
  }
  .rail__item.is-active{ margin:0 40px 0 0; }
  .rail__item.is-active::after{
    left:calc(100% + 12px); top:50%;
    width:28px; height:1px;
    background:linear-gradient(to right, var(--gold), rgba(181,139,84,.15));
  }

  /* 4-up grid, no percentage min-widths to overflow */
  .features{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    margin-top:clamp(24px,4vh,40px);
    margin-left:0;              /* the desktop hang-left would overflow here */
  }
  .feature{ min-width:0; padding:0 6px; }
  .feature__label{ white-space:normal; }
}

@media (max-width:560px){
  .features{
    grid-template-columns:repeat(2, minmax(0,1fr));
    row-gap:26px;
  }
  /* dividers only between the two columns */
  .feature{ border-left:0 !important; }
  .feature:nth-child(even){ border-left:1px solid var(--hairline) !important; }
  .explore{ margin-top:32px; }

  /* amenities: two columns is the floor for the grid */
  .amen__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .amen__grid li:nth-child(3n){ border-right:1px solid var(--am-line); }
  .amen__grid li:nth-child(2n){ border-right:0; }
  .amen__cards img{ height:150px; }

  /* contact: stack the paired inputs, halve the travel-time strip */
  .ctform__row{ grid-template-columns:1fr; }
  .cttimes{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:12px; }

  /* about page: fact band to one column, CTA buttons full width */
  .abt-hero__grid{ padding-bottom:clamp(26px,4.4vh,40px); }
  .abt-facts__row{ grid-template-columns:1fr; row-gap:18px; }
  .abt-facts__row li{ padding-left:0; border-left:0; }
  .abt-cta__btns{ flex-direction:column; }
  .abt-cta__btn{ width:100%; justify-content:center; }
  /* photos get a touch more height once the tiles are full-width */
  .abt-pillar__media{ aspect-ratio:16 / 10; }

  /* contact page: cards breathe, form padding tightens */
  .ctp-card{ align-items:flex-start; }
  .ctp-form{ padding-left:clamp(16px,4vw,22px); padding-right:clamp(16px,4vw,22px); }

  /* dark pieces */
  .stats__row li + li::before,
  .stats__row li + li::after{ display:none; }
  .stats__leaf{ display:none; }
  .foot__main{ grid-template-columns:1fr; gap:clamp(20px,3.4vh,32px); }
  .foot__base{ justify-content:flex-start; }
  .cttimes li:nth-child(3){ border-left:0; }
  .ctfoot2 span{ width:clamp(30px,10vw,70px); }
}

/* users who prefer less motion */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* =========================================================
   FLOOR-PLAN LIGHTBOX
   Opened by clicking a plan in the carousel. Built by main.js on
   first use, so nothing here applies until a visitor asks for it.
   ========================================================= */

/* the carousel card, made to look openable */
.pcard:not(.pcard--soon) img{ cursor:zoom-in; }

/* page must not scroll behind the overlay (at every width — the
   .nav-open lock is inside the mobile block and phone-only) */
html.plb-open, html.plb-open body{ overflow:hidden; }

.plb{
  position:fixed; inset:0;
  z-index:10000;              /* above the chat widget's 9999 */
  display:grid;
  grid-template-rows:1fr auto;
  opacity:0;
  transition:opacity .24s ease;
}
/* `display:grid` above would otherwise beat the hidden attribute */
.plb[hidden]{ display:none; }
.plb.is-on{ opacity:1; }

.plb__scrim{
  position:absolute; inset:0;
  background:rgba(16,26,18,.94);
  backdrop-filter:blur(3px);
  cursor:zoom-out;
}

/* ---- the plan itself ---- */
.plb__stage{
  position:relative;
  grid-row:1;
  /* flex, not grid: with place-items:center a grid row sizes to the
     image's natural (max-content) height instead of the track's actual
     height, so max-height:100% on the image can't resolve and the plan
     overflows, getting silently clipped by overflow:hidden below.
     A flex container keeps a definite height even when align-items
     isn't stretch, so the image's max-height:100% resolves correctly. */
  display:flex; align-items:center; justify-content:center;
  padding:clamp(52px,7vh,74px) clamp(52px,7vw,96px) 10px;
  overflow:hidden;
  cursor:zoom-out;            /* the empty space closes, like the scrim */
}

.plb__img{
  max-width:100%;
  max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  border-radius:8px;
  background:#FDFBF7;         /* plans are drawn on white — keep it clean */
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  cursor:zoom-in;
  touch-action:none;          /* we handle the drag ourselves */
  user-select:none; -webkit-user-select:none;
  transform-origin:center center;
  transition:transform .26s cubic-bezier(.2,.7,.3,1), opacity .2s ease;
}
.plb__img.is-zoomed{ cursor:grab; }
.plb__img.is-zoomed:active{ cursor:grabbing; }

/* while a new plan decodes, fade the old one out rather than flashing */
.plb.is-loading .plb__img{ opacity:0; }

/* dragging must feel attached to the finger, not eased */
.plb__img.is-zoomed:active{ transition:none; }

/* ---- caption ---- */
.plb__bar{
  grid-row:2;
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:12px 20px clamp(16px,3vh,26px);
  text-align:center;
}
.plb__type{
  font-size:clamp(10px,.85vw,12px);
  font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--pl-gold-2);
}
.plb__meta{
  font-size:clamp(12px,1vw,14.5px);
  font-weight:300; letter-spacing:.02em;
  color:#D8D3C7;
}

.plb__count{
  position:absolute;
  top:clamp(16px,2.4vh,26px); left:clamp(18px,2.4vw,30px);
  font-size:11.5px; font-weight:500; letter-spacing:.16em;
  color:#9FAE9C;
}

.plb__hint{
  position:absolute;
  bottom:clamp(4px,1vh,8px); left:0; right:0;
  margin:0;
  font-size:10.5px; font-weight:300; letter-spacing:.04em;
  color:#7E8C7C; text-align:center;
  pointer-events:none;
}

/* ---- controls ---- */
.plb__btn{
  position:absolute;
  display:grid; place-items:center;
  width:42px; height:42px;
  border:1px solid rgba(230,225,212,.22);
  border-radius:50%;
  background:rgba(255,255,255,.06);
  color:#EDE8DD;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease,
             opacity .2s ease, transform .2s ease;
}
.plb__btn:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(230,225,212,.4);
}
.plb__btn:focus-visible{ outline:2px solid var(--pl-gold-2); outline-offset:3px; }
.plb__btn svg{ width:19px; height:19px; }
.plb__btn:disabled{ opacity:.22; cursor:default; }
.plb__btn:disabled:hover{ background:rgba(255,255,255,.06); }

.plb__btn--close{ top:clamp(14px,2.2vh,24px); right:clamp(16px,2.2vw,28px); }
.plb__btn--zoom{ top:clamp(14px,2.2vh,24px); right:clamp(68px,7vw,82px); }

.plb__btn--prev{ left:clamp(10px,1.6vw,22px);  top:50%; margin-top:-21px; }
.plb__btn--next{ right:clamp(10px,1.6vw,22px); top:50%; margin-top:-21px; }

/* the magnifier's "+" loses its upright and becomes a "−" once zoomed in
   (hiding a stroke, rather than rewriting `d` in CSS, which Safari
   does not support) */
.plb.is-zoomed .plb__plus-v{ opacity:0; }

/* ---- phones ---- */
@media (max-width:640px){
  .plb__stage{ padding:clamp(46px,6vh,58px) 12px 6px; }

  .plb__btn{ width:38px; height:38px; }
  .plb__btn svg{ width:17px; height:17px; }

  /* arrows drop to the caption so they never sit over the plan */
  .plb__btn--prev, .plb__btn--next{
    top:auto; bottom:clamp(14px,3vh,24px); margin-top:0;
  }
  .plb__btn--prev{ left:clamp(14px,5vw,28px); }
  .plb__btn--next{ right:clamp(14px,5vw,28px); }

  .plb__bar{ padding:10px 62px clamp(20px,4vh,30px); }
  .plb__hint{ display:none; }        /* swipe is discoverable enough */
}