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

:root{
  /* --- layout ---
     Every page-level container caps at this instead of carrying its own
     number, so the site runs near full-bleed: on any ordinary monitor the
     cap never bites and the section's own horizontal padding is the only
     gutter. The value is a guard for ultrawide displays, where an
     uncapped grid would stretch past reading. Change it here, once. */
  --wrap-max:2200px;

  /* --- 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-green:#26402A;     /* pillar titles — same deep green as the layout band */
  --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); }

/* the group mark is its own link (out to 21stcastle.com), so it needs to
   collapse to the image the way the bare <img> used to */
.brand__group{ display:flex; align-items:center; flex:none; }

.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);
}

/* ---- project lockup: 21st Castle | Novelle Boulevard ----
   Hidden over the hero and unfolded once .is-stuck puts the solid bar in.
   Collapsing max-width (not display) keeps it animatable, and the gold mark
   reads on both the cream and the dark bar, so it never needs to swap. */
.brand__project{
  display:flex;
  align-items:center;
  gap:clamp(10px,1.5vw,22px);
  max-width:0;
  opacity:0;
  overflow:hidden;
  transform:translateX(-8px);
  transition:max-width .55s cubic-bezier(.22,.61,.36,1),
             opacity .38s ease,
             transform .55s cubic-bezier(.22,.61,.36,1);
}
.site-header.is-stuck .brand__project{
  max-width:min(42vw,300px);
  opacity:1;
  transform:none;
}

.brand__divider{
  flex:none;
  width:1px;
  height:clamp(22px,2.3vw,34px);
  background:var(--hairline);
}
.site-header.is-dark .brand__divider{ background:rgba(255,255,255,.3); }

/* The lockup is chevron + wordmark, so the words sit in the lower ~64% of
   the file. Height is raised accordingly to keep BOULEVARD reading at the
   same size the old words-only mark did. */
.brand__project img{
  display:block;
  height:clamp(34px,3.2vw,50px);
  width:auto;
  object-fit:contain;
}

@media (prefers-reduced-motion:reduce){
  .brand__project{ transition:none; }
}

.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 = the brand lockup artwork ----
   Both words are drawn the same width in the logo (1120 vs 1122px), so giving
   each image width:100% of a shared box reproduces the flush-both-edges
   lockup exactly at any size. The 4.72% gap is the logo's own 53px spacing
   expressed against that width, so the proportions hold as it scales. */
.hero__title{
  /* the artwork crops flush to the letterforms, so the descender space the
     old text box gave the rule below has to be added back explicitly */
  margin:0 0 clamp(8px,1.3vh,16px);
  width:clamp(238px, 43vw, 600px);
  max-width:100%;
  line-height:0;
  color:var(--ink);
}
.hero__title span{ display:block; }
.hero__title span + span{ margin-top:4.72%; }

.hero__title img{
  display:block;
  width:100%;
  height:auto;
}

.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{                          /* -> The Seasons / Cormorant Garamond */
  margin:0;
  font-family:'The Seasons','Cormorant Garamond',serif;
  font-size:clamp(15px,1.6vw,23px);
  font-weight:500;
  font-style:italic;
  letter-spacing:.14em;
  text-transform:none;
  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:var(--wrap-max);
  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:var(--wrap-max); 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)
   One centre axis, one type scale, two grounds — deep green at the head and
   foot, warm off-white through the middle. Every section is built from the
   same five utilities — .abt-eyebrow, .abt-h1 / .abt-h2, .abt-rule,
   .abt-lede — and every colour comes from the --ab-* tokens, so a section
   changes ground by re-pointing them, not by restyling itself.
   Prefix: .abt-
   ========================================================= */

/* The about page alternates grounds: the hero, the facts strip and the
   closing CTA run dark, on the same deep forest green as the footer and the
   stats strip, and the two long-reading sections between them sit on a warm
   off-white (see .abt-band, further down) so the page isn't green end to
   end. The --ab-* scale below is the dark half of that; a .abt-band re-points
   the same tokens light. The scale is set here rather than at :root because
   the home page's own about section draws on the light scale and must keep
   it. Every .abt- rule below is written against these tokens, so this block
   and .abt-band are between them the whole repaint. */
.abt{
  --ab-bg:var(--dk);           /* #1E3320 — the page */
  --ab-card:var(--dk-soft);    /* #26402A — frames, one step raised */
  --ab-line:var(--dk-line);
  --ab-ink:var(--dk-ink);
  --ab-body:var(--dk-body);
  --ab-gold:var(--dk-gold);    /* the gold that holds up on dark */
  --ab-muted:#7C8C7A;
  --ab-green:#8ABE8F;          /* pillar titles: the deep green inverts */
  /* How far the light ground climbs over the green. This is the whole of
     what the eye has to read, because the page is scrolling underneath at
     the same time: at 117px against ~500px of scroll the curtain was only a
     23% differential and went unnoticed. It needs to be a big fraction of
     the scroll it happens over to register at all. */
  --ab-curtain:clamp(140px,22vh,240px);
  --ab-img:#22381F;            /* placeholder behind a loading render */
  --ab-img-line:var(--dk-line);
  --ab-shadow:0,0,0;           /* brown shadows vanish on dark; use black */

  overflow-x:clip;          /* reveal transforms must not widen the document */
  /* the same wash inverted: gold at the top, a green breath low down,
     deepening to near-black at the foot so the footer joins on seamlessly */
  background:
    radial-gradient(100% 44% at 50% 0%, rgba(201,168,106,.15) 0%, rgba(201,168,106,0) 62%),
    radial-gradient(80% 38% at 50% 46%, rgba(138,190,143,.07) 0%, rgba(138,190,143,0) 70%),
    radial-gradient(96% 40% at 50% 100%, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 66%),
    linear-gradient(180deg, var(--ab-card) 0%, var(--ab-bg) 38%, #182A1A 100%);
}
.abt__wrap{ max-width:var(--wrap-max); margin:0 auto; padding:0 clamp(20px,3.2vw,44px); }

/* ---- shared type utilities ---- */
.abt-eyebrow{
  margin:0;
  font-size:clamp(10px,.86vw,12.5px);
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ab-gold);
}
/* the hairline that separates a headline from the copy under it */
.abt-rule{
  display:block;
  width:44px; height:1px;
  margin:clamp(22px,3.6vh,34px) auto;
  background:linear-gradient(90deg, rgba(174,137,66,0), var(--ab-gold), rgba(174,137,66,0));
}
.abt-rule--wide{ width:min(260px,52%); height:2px; }

.abt-h1,
.abt-h2{
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight:400;
  line-height:1.14;
  letter-spacing:-.022em;
  color:var(--ab-ink);
  text-wrap:balance;        /* keeps centred headlines from orphaning a word */
}
.abt-h1{
  margin:clamp(16px,2.8vh,26px) auto 0;
  font-size:clamp(42px,6vw,82px);
}
.abt-h2{
  margin:clamp(14px,2.4vh,22px) auto 0;
  max-width:17em;
  font-size:clamp(29px,3.7vw,53px);
  line-height:1.18;
}
.abt-h2--sm{ font-size:clamp(25px,2.9vw,40px); max-width:19em; }
/* the gold word — the one accent this page allows itself */
.abt-h1 em,
.abt-h2 em{ font-style:normal; color:var(--ab-gold); }

.abt-lede{
  margin:0 auto;
  max-width:46em;
  font-size:clamp(14px,1.06vw,17px);
  line-height:1.85;
  color:var(--ab-body);
}

/* ---- 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;
  text-align:center;
  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; }

/* ---- hero: centred lockup, banner render beneath ---- */
.abt-hero{ padding-top:var(--header-h); }

/* One frame around the welcome: the copy and the banner sit on a single
   card so they read as one lockup. A gold hairline across the top picks up
   the .abt-rule under the heading and ties the panel to the page. */
/* The shell both frames on this page share — the card, the hairline border
   and the gold rule across the top. Layout is left to the frame's own class,
   so the two stay visually identical while holding different content. */
.abt-frame{
  position:relative;
  background:var(--ab-card);
  border:1px solid var(--ab-line);
  border-radius:18px;
  padding:clamp(20px,2.8vw,40px);
  box-shadow:0 28px 64px rgba(var(--ab-shadow),.11);
  overflow:hidden;              /* keeps nested corners inside the frame */
}
.abt-frame::before{
  content:"";
  position:absolute;
  top:0; left:12%; right:12%;
  height:2px;
  background:linear-gradient(90deg, rgba(174,137,66,0), var(--ab-gold), rgba(174,137,66,0));
}

.abt-hero__frame{
  display:grid;
  grid-template-columns:1fr 1fr;   /* copy one half, render the other */
  align-items:stretch;             /* both halves end level, so the frame reads square */
  gap:clamp(20px,2.6vw,40px);
}

.abt-hero__copy{
  text-align:center;
  padding:clamp(30px,5.6vh,62px) 0 clamp(26px,4.6vh,50px);
}
/* in a half-width column the copy ranges left and centres on the render
   beside it; the panel's own padding does the work at the edges */
.abt-hero__frame .abt-hero__copy{
  align-self:center;
  text-align:left;
  padding:clamp(6px,1.4vh,18px) clamp(4px,1vw,14px);
}
/* .abt-rule and .abt-lede centre themselves with auto margins — pull them
   back to the ragged edge now that the copy ranges left */
.abt-hero__frame .abt-rule,
.abt-hero__frame .abt-lede{ margin-left:0; }

/* the render fills its half rather than holding a banner ratio, and drops its
   own lift — one card casting one shadow, not two stacked */
.abt-hero__frame .abt-hero__figure{
  aspect-ratio:auto;
  height:100%;
  min-height:clamp(300px,44vh,470px);
  border-radius:12px;
  box-shadow:0 10px 26px rgba(var(--ab-shadow),.10);
}
.abt-hero__tag{
  margin:clamp(10px,1.6vh,16px) 0 0;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-style:italic;
  font-size:clamp(17px,1.55vw,24px);
  letter-spacing:.01em;
  color:var(--ab-gold);
}
.abt-hero__figure{
  position:relative;
  margin:0;
  border-radius:16px;
  overflow:hidden;
  background:var(--ab-img);
  aspect-ratio:21 / 9;
  box-shadow:0 26px 60px rgba(var(--ab-shadow),.16);
}
.abt-hero__figure img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 42%;
  display:block;
  transition:transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.abt-hero__figure:hover img{ transform:scale(1.04); }
/* warm wash so the render 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) 46%, rgba(120,92,44,.20) 100%);
  pointer-events:none;
}

/* ---- facts: four figures, hairline-separated ---- */
/* the bottom padding is the curtain's runway: the light ground climbs
   --ab-curtain into this section, and this keeps that travel over empty
   green rather than over the figures */
.abt-facts{ padding:clamp(38px,6.4vh,72px) 0 calc(var(--ab-curtain) + clamp(30px,5vh,54px)); }
.abt-facts__row{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  /* the parallax's second rate: as the curtain rises, the figures pull up
     faster than the page, so the green slides away behind it. --joint is
     written by main.js and absent until then, hence the 0 fallback. */
  transform:translate3d(0, calc(var(--joint, 0) * -52px), 0);
}
.abt-facts__row li{
  position:relative;
  padding:0 clamp(12px,1.8vw,26px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(6px,1vh,10px);
  text-align:center;
}
/* hairlines between, not around */
.abt-facts__row li + li::before{
  content:"";
  position:absolute;
  left:0; top:12%; bottom:12%;
  width:1px;
  background:linear-gradient(180deg, rgba(234,225,212,0), var(--ab-line) 45%, rgba(234,225,212,0));
}
.abt-facts__n{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(26px,2.9vw,42px);
  line-height:1;
  color:var(--ab-gold);
}
.abt-facts__l{
  font-size:clamp(9.5px,.78vw,11.5px);
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ab-body);
}

/* ---- story + the journey, in one frame ----
   The two headlines share the top row; the three journey moments run the
   full width beneath them. */
.abt-story{ padding:clamp(50px,8.6vh,104px) 0 clamp(44px,7.4vh,92px); }
.abt-story__head{ text-align:center; }

.abt-story__frame{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(20px,2.6vw,44px);
  align-items:center;
}
/* in half-width columns both headlines range left and share one edge */
.abt-story__frame .abt-story__head{ text-align:left; }
.abt-story__frame .abt-h2,
.abt-story__frame .abt-rule,
.abt-story__frame .abt-lede{ margin-left:0; }
/* the group mark holds the right half. It's the lockup on a transparent
   ground, so it gets no card, ring or shadow of its own — the white frame
   around it is the ground, and the mark simply sits in the middle of its
   column with air on all sides. */
.abt-story__mark{
  margin:0;
  justify-self:center;
  align-self:center;
  width:min(84%, 290px);
  padding:clamp(8px,1.4vw,22px) 0;
}
.abt-story__mark img{ display:block; width:100%; height:auto; }
/* the timeline is not part of the two-column split */
.abt-story__frame .abt-journey__row{ grid-column:1 / -1; }

/* ---- the journey: three moments on one line ---- */
.abt-journey__row{
  list-style:none;
  margin:clamp(32px,5.4vh,62px) auto 0;
  padding:0;
  max-width:var(--wrap-max);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  text-align:center;
}
.abt-journey__row li{
  position:relative;
  padding:0 clamp(14px,2.2vw,34px);
}
.abt-journey__row li + li::before{
  content:"";
  position:absolute;
  left:0; top:6%; bottom:6%;
  width:1px;
  background:linear-gradient(180deg, rgba(234,225,212,0), var(--ab-line) 42%, rgba(234,225,212,0));
}
.abt-journey__year{
  display:block;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(30px,3.2vw,46px);
  line-height:1;
  color:var(--ab-gold);
}
.abt-journey__head{
  margin:clamp(10px,1.6vh,15px) 0 0;
  font-size:clamp(10px,.82vw,11.5px);
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ab-green);
}
.abt-journey__row p{
  margin:clamp(11px,1.9vh,17px) auto 0;
  max-width:24em;
  font-size:clamp(12.5px,.94vw,14.5px);
  line-height:1.75;
  color:var(--ab-body);
}

/* ---- vision / mission / strength ----
   No cards: a round medallion in a gold ring, the title, a hairline, the copy.
   The border is gone, so the whitespace is what separates them. */
.abt-pillars{ padding:clamp(20px,3.4vh,40px) 0 clamp(44px,7.4vh,92px); text-align:center; }
.abt-pillars__row{
  list-style:none;
  margin:clamp(34px,5.8vh,66px) auto 0;
  padding:0;
  max-width:var(--wrap-max);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(26px,3.6vw,58px);
}
.abt-pillar{ display:flex; flex-direction:column; align-items:center; }
.abt-pillar__medallion{
  --ring:clamp(96px,9.4vw,132px);
  position:relative;
  margin:0;
  width:var(--ring);
  height:var(--ring);
  border-radius:50%;
  overflow:hidden;
  background:var(--ab-img);
  box-shadow:0 0 0 1px var(--ab-line), 0 0 0 7px var(--ab-card), 0 0 0 8px rgba(201,168,106,.46),
             0 14px 32px rgba(var(--ab-shadow),.14);
  transition:transform .5s cubic-bezier(.2,.6,.2,1), box-shadow .5s ease;
}
.abt-pillar__medallion 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__medallion{
  transform:translateY(-4px);
  box-shadow:0 0 0 1px var(--ab-line), 0 0 0 7px var(--ab-card), 0 0 0 8px var(--ab-gold),
             0 20px 40px rgba(var(--ab-shadow),.20);
}
.abt-pillar:hover .abt-pillar__medallion img{ transform:scale(1.07); }

.abt-pillar__title{
  margin:clamp(20px,3.2vh,30px) 0 0;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:400;
  font-size:clamp(22px,2.2vw,31px);
  line-height:1;
  letter-spacing:-.01em;
  color:var(--ab-ink);
}
.abt-pillar__rule{
  display:block;
  width:26px; height:1px;
  margin:clamp(12px,1.9vh,17px) 0;
  background:var(--ab-gold);
}
.abt-pillar p{
  margin:0;
  font-size:clamp(12.5px,.94vw,14.5px);
  line-height:1.75;
  color:var(--ab-body);
  text-align:left;   /* long copy reads better ragged-right */
}
/* bullet copy for the Mission / Strength blocks — gold dots, hanging indent */
.abt-pillar__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:clamp(7px,1.1vh,11px);
  text-align:left;
}
.abt-pillar__list li{
  position:relative;
  padding-left:16px;
  font-size:clamp(12.5px,.94vw,14.5px);
  line-height:1.7;
  color:var(--ab-body);
}
.abt-pillar__list li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.68em;
  width:4px; height:4px;
  border-radius:50%;
  background:var(--ab-gold);
}

/* ---- closing CTA: no card, just the rule and the words ---- */
.abt-cta{ padding:0 0 clamp(62px,10vh,116px); }
.abt-cta__inner{ text-align:center; }
.abt-cta__inner .abt-rule--wide{ margin-bottom:clamp(28px,4.6vh,50px); }
.abt-cta__btns{
  margin-top:clamp(24px,3.8vh,36px);
  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:#20351F;              /* dark ink on the gold fill, not cream on gold */
  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; }
/* on a dark page the hover lifts the gold rather than deepening it */
.abt-cta__btn:hover{ transform:translateY(-2px); background:#DCC08A; border-color:#DCC08A; }
.abt-cta__btn--ghost{
  background:transparent;
  color:var(--ab-gold);
}
.abt-cta__btn--ghost:hover{ background:var(--ab-gold); color:#20351F; }

/* ---- light bands ----
   The page no longer runs green the whole way down: the hero, the facts strip
   and the closing CTA keep the dark wash, and the two long-reading sections
   between them (the story / journey, and the three pillars) sit on a warm
   off-white with soft-black ink. Because every .abt- rule above is written
   against the --ab-* tokens, re-pointing them here is the whole repaint —
   no section needs a second set of rules. Gold and green stay the accents,
   stepped darker so they hold their contrast on white. */
.abt-band{
  position:relative;
  --ab-bg:#F7F4EE;             /* the band */
  --ab-card:#FFFFFF;           /* frames, one step raised — now white */
  --ab-line:#E4DCCD;
  --ab-ink:#1B1B1B;            /* soft black, not pure */
  --ab-body:#4C4B46;
  --ab-gold:#966F3A;           /* the darker gold, for contrast on white */
  --ab-muted:#8B857A;
  --ab-green:#2C5A32;          /* journey heads: the deep green reads direct */
  --ab-img:#EDE6D9;            /* placeholder behind a loading render */
  --ab-img-line:var(--ab-line);
  --ab-shadow:74,58,38;        /* warm brown shadow again, not black */
  --ab-bg-0:rgba(247,244,238,0);       /* the band colour at zero alpha */
  --ab-fade:clamp(130px,19vh,215px);   /* how far the grounds take to swap */

  background-color:var(--ab-bg);
}
.abt-band > .abt__wrap{ position:relative; z-index:1; }

/* ---- the curtain: welcome → about 21st Castle ----
   The handover is a movement, not a painted edge. The off-white ground
   reaches up over the green on a pseudo-element whose height is driven by
   how far the joint has risen up the viewport (main.js writes --joint, 0→1,
   and does all of nothing else — the painting is here). A gold hairline
   rides its leading edge.

   The second rate is what makes it a parallax rather than a wipe: the facts
   above drift up faster than the page (see .abt-facts__row below), so the
   green reads as sliding away behind the new ground.

   --joint defaults to 1, so with no JS the curtain simply sits extended and
   the joint looks deliberate rather than cut. The curtain is absolute, so it
   never moves a pixel of layout while it travels. */
.abt-band--first{
  --joint:1;
  /* the curtain already puts --ab-curtain of clear ground above the card, so
     this only needs to be the breath between the two */
  padding-top:clamp(30px,5vh,58px);
}
.abt-band--first::before{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:100%;                 /* sits above the band, growing upward */
  height:calc(var(--ab-curtain) * var(--joint));
  background:
    /* The leading edge — and the cue that makes the whole thing legible. It
       draws itself out from the centre as the joint arrives (its width is
       the progress), so there is one unmistakable event at the boundary
       rather than only a difference in speeds to notice. Fades out at both
       ends like every other hairline on the page. */
    linear-gradient(90deg, rgba(201,168,106,0), rgba(201,168,106,.9) 14%,
                           rgba(201,168,106,.9) 86%, rgba(201,168,106,0))
      50% 0% / calc(var(--joint) * 100%) 1.5px no-repeat,
    /* a short feather under it so the edge is crisp but not a razor cut */
    linear-gradient(180deg, rgba(247,244,238,.82) 0, var(--ab-bg) 22px);
  pointer-events:none;
}

/* the band's other edge, into the closing CTA, is a different job — leaving
   the light ground rather than arriving on it — and stays a soft dissolve.
   Both stops of that fade are one colour at two alphas, so mid-way you get
   half off-white over green, which lands on a dull grey-green; the gold veil
   over it keeps the crossing warm. Its stops are figured from --ab-fade
   rather than in %, which would measure the whole band. */
.abt-band--last{
  background-color:transparent;
  background-image:
    linear-gradient(0deg, rgba(201,168,106,0) 0,
                          rgba(201,168,106,.085) calc(var(--ab-fade) * .52),
                          rgba(201,168,106,0) var(--ab-fade)),
    linear-gradient(0deg, var(--ab-bg-0) 0, var(--ab-bg) var(--ab-fade));
  padding-bottom:calc(var(--ab-fade) + clamp(16px,2.6vh,36px));
}

/* reduced motion: nothing is driven, so the curtain rests fully extended */
@media (prefers-reduced-motion: reduce){
  .abt-band--first{ --joint:1; }
}

/* the white frame needs a touch more lift to separate from the off-white
   band behind it */
.abt-band .abt-frame{ box-shadow:0 22px 54px rgba(var(--ab-shadow),.09); }

/* ---- the story card's arrival ----
   The ground change is a thing that happens as you scroll, not just an edge:
   the white card rises and fades in over the dissolve as it comes into view.
   It travels further and slower than the stock reveal so it reads as one
   panel arriving, with the group mark and the timeline staggering in behind
   it. Guarded on no-preference rather than overridden in the reduce block,
   because this rule sits after the shared reduced-motion reset and would
   otherwise put the offset back. */
@media (prefers-reduced-motion: no-preference){
  .abt-story__frame[data-reveal]{
    transform:translateY(44px);
    transition-duration:.95s;
  }
  .abt-story__frame[data-reveal].is-in{ transform:none; }
}

/* the medallion ring is a hardcoded pale gold for the dark page — on white it
   needs the darker gold to stay visible against the white halo inside it */
.abt-band .abt-pillar__medallion{
  box-shadow:0 0 0 1px var(--ab-line), 0 0 0 7px var(--ab-card), 0 0 0 8px rgba(150,111,58,.55),
             0 14px 32px rgba(var(--ab-shadow),.14);
}
.abt-band .abt-pillar:hover .abt-pillar__medallion{
  box-shadow:0 0 0 1px var(--ab-line), 0 0 0 7px var(--ab-card), 0 0 0 8px var(--ab-gold),
             0 20px 40px rgba(var(--ab-shadow),.22);
}

/* =========================================================
   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:var(--wrap-max);
  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);
}
/* matches the about page: second sentence on its own line, gold italic */
.about__title em{ display:block; font-style:italic; color:var(--ab-gold); }

.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 ---- */
/* ---- about collage ----
   Fills the two columns the tower image and pillars used to occupy. The
   cards sit on a 12x12 sub-grid and are given overlapping spans, so they
   stagger like the reference without absolute positioning — the whole
   cluster scales with the column and never needs pixel nudging. */
.collage{
  grid-column:2 / 4;
  align-self:center;
  justify-self:end;          /* right edge stays flush with the page grid */
  width:100%;
  max-width:clamp(400px,42vw,590px);
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  grid-template-rows:repeat(12, 1fr);
  aspect-ratio:1 / .92;
  min-height:clamp(260px,34vh,430px);
}
.collage__card{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:clamp(12px,1.1vw,18px);
  /* The three shots share one warm amber palette, so where they overlap the
     edges dissolve into each other. Each card gets a mat cut from the section
     background plus a gold hairline: the ring is painted outside the box, so a
     card on top visibly sits *over* its neighbour instead of blending in. */
  --mat:clamp(5px,.55vw,9px);
  box-shadow:
    0 0 0 var(--mat) var(--ab-bg),
    0 0 0 calc(var(--mat) + 1px) rgba(174,137,66,.34),
    0 20px 44px rgba(90,72,44,.22);
  transition:transform .45s cubic-bezier(.2,.6,.2,1), box-shadow .45s ease;
}
.collage__card img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.1s cubic-bezier(.2,.6,.2,1);
}
.collage__card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 0 0 var(--mat) var(--ab-bg),
    0 0 0 calc(var(--mat) + 1.5px) rgba(174,137,66,.72),
    0 30px 60px rgba(90,72,44,.30);
  z-index:4;
}
.collage__card:hover img{ transform:scale(1.05); }

/* scrim + caption, bottom-left as in the reference */
.collage__card::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:58%;
  background:linear-gradient(180deg, rgba(20,22,18,0) 0%, rgba(20,22,18,.62) 100%);
  pointer-events:none;
}
.collage__card figcaption{
  position:absolute;
  z-index:2;
  left:clamp(12px,1.2vw,20px);
  right:clamp(12px,1.2vw,20px);
  bottom:clamp(10px,1.1vw,18px);
  font-size:clamp(12px,1vw,16px);
  font-weight:600;
  letter-spacing:.01em;
  color:#FFFDF8;
  text-shadow:0 1px 10px rgba(0,0,0,.45);
}

/* the three overlapping placements */
.collage__card--lead{ grid-area:3 / 1 / 13 / 8;  z-index:1; }
.collage__card--top { grid-area:1 / 6 / 6 / 13;  z-index:3; }
.collage__card--foot{ grid-area:7 / 6 / 13 / 13; z-index:2; }
.collage__card--top figcaption,
.collage__card--foot figcaption{ font-size:clamp(11px,.88vw,14px); }

/* deepen the shadow as the cards climb the stack, so the overlap reads as
   three physical prints laid down rather than one flat collage */
.collage__card--foot:not(:hover){ box-shadow:
  0 0 0 var(--mat) var(--ab-bg),
  0 0 0 calc(var(--mat) + 1px) rgba(174,137,66,.34),
  0 24px 50px rgba(90,72,44,.26); }
.collage__card--top:not(:hover){ box-shadow:
  0 0 0 var(--mat) var(--ab-bg),
  0 0 0 calc(var(--mat) + 1px) rgba(174,137,66,.34),
  0 28px 58px rgba(90,72,44,.30); }

/* the about photos are portrait, so the two wide cards crop hard — pull the
   focal point up to whatever the shot is actually about (faces, not floors) */
.collage__card--lead img{ object-position:50% 46%; }
.collage__card--top  img{ object-position:50% 26%; }
.collage__card--foot img{ object-position:50% 40%; }

@media (max-width:1100px){
  .collage{
    grid-column:1 / -1;
    justify-self:center;
    max-width:640px;
    aspect-ratio:1 / .70;
  }
}
@media (max-width:640px){
  /* overlap stops working at phone width — stack them instead */
  .collage{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:none;
    aspect-ratio:auto;
    gap:26px;              /* room for the mat ring on both cards */
  }
  .collage__card{ grid-area:auto !important; aspect-ratio:16 / 10; }
}

/* ---- key points panel ----
   A dark forest-green plate under the about grid, using the shared --dk
   scale so it reads as the same material as the stats strip and footer.  */
.keys{
  max-width:var(--wrap-max);
  margin:clamp(38px,6vh,72px) auto 0;
  padding:clamp(20px,2.6vw,40px);
  background:var(--dk);
  border-radius:clamp(16px,1.6vw,24px);
}
.keys__row{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(12px,1.5vw,22px);
}
.keys__card{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:clamp(18px,2vw,28px) clamp(14px,1.5vw,22px) clamp(20px,2.2vw,30px);
  background:var(--dk-soft);
  border:1px solid var(--dk-line);
  border-radius:14px;
  text-align:center;
  transition:transform .35s cubic-bezier(.2,.6,.2,1), border-color .35s ease, box-shadow .35s ease;
}
.keys__card:hover{
  transform:translateY(-6px);
  border-color:var(--dk-gold);
  box-shadow:0 18px 36px rgba(0,0,0,.28);
}
.keys__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:clamp(42px,3.4vw,54px);
  height:clamp(42px,3.4vw,54px);
  border-radius:12px;
  background:rgba(201,168,106,.12);
  border:1px solid rgba(201,168,106,.26);
  color:var(--dk-gold);
  transition:background-color .35s ease, color .35s ease, transform .45s cubic-bezier(.2,.6,.2,1);
}
.keys__card:hover .keys__icon{
  background:var(--dk-gold);
  color:var(--dk);
  transform:scale(1.06);
}
.keys__icon svg{ width:clamp(20px,1.7vw,26px); height:auto; }
.keys__title{
  margin:clamp(12px,1.8vh,18px) 0 0;
  font-size:clamp(13px,1.02vw,16px);
  font-weight:600;
  letter-spacing:.01em;
  color:var(--dk-ink);
}
.keys__card p{
  margin:clamp(7px,1.1vh,11px) 0 0;
  font-size:clamp(11.5px,.86vw,13.5px);
  line-height:1.62;
  color:var(--dk-body);
}

@media (max-width:1100px){
  .keys__row{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:640px){
  .keys__row{ grid-template-columns:1fr; }
}

.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:var(--wrap-max);
  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;
  /* opacity duration is the gallery dissolve — it is mirrored by FADE_MS in
     main.js, which swaps the sources at the bottom of the fade. Change both. */
  transition:transform .7s cubic-bezier(.2,.6,.2,1), opacity 1s 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:var(--wrap-max); 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{ position:relative; display:flex; flex-direction:column; min-width:0; }

/* ---- sliding layout-type strip ----
   One green bar that travels to whichever layout row is active, so the eye is
   told which of the two types it is reading. main.js sets --y and --h from the
   live row box, which keeps it correct at any breakpoint. */
.plans__strip{
  position:absolute;
  left:0;
  top:0;
  width:3px;
  height:var(--h,0px);
  border-radius:3px;
  background:var(--pl-green);
  transform:translateY(var(--y,0px));
  opacity:0;
  transition:transform .5s cubic-bezier(.22,.61,.36,1),
             height .5s cubic-bezier(.22,.61,.36,1),
             background-color .4s ease,
             opacity .4s ease;
  pointer-events:none;
  z-index:2;
}
.plans__rows.is-armed .plans__strip{ opacity:1; }
/* the gold row keeps its own colour, so the strip agrees with the ribbon */
.plans__strip.is-gold{ background:var(--pl-gold-4); }

@media (prefers-reduced-motion:reduce){
  .plans__strip{ transition:opacity .3s ease; }
}

.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:var(--wrap-max);
  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:var(--wrap-max);
  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:var(--wrap-max);
  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:var(--wrap-max);
  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:var(--wrap-max);
  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
   right, BOULEVARD off to the left. Each line is its own artwork, 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{ width:clamp(238px,52vw,470px); }

  /* 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: banner deepens, facts 2-up, journey and pillars stack */
  .abt-hero__figure{ aspect-ratio:16 / 10; }

  /* two half-columns get too narrow to read here: stack them and put the
     copy back on the page's centre axis */
  .abt-hero__frame{ grid-template-columns:1fr; }
  .abt-hero__frame .abt-hero__copy{
    align-self:auto;
    text-align:center;
    padding:clamp(14px,2.6vh,30px) clamp(4px,1vw,14px) clamp(6px,1.4vh,18px);
  }
  .abt-hero__frame .abt-rule{ margin-left:auto; }

  /* the story frame stacks the same way: one column, back on the centre axis */
  .abt-story__frame{ grid-template-columns:1fr; }
  .abt-story__frame .abt-story__head{ text-align:center; }
  .abt-story__frame .abt-h2,
  .abt-story__frame .abt-rule,
  .abt-story__frame .abt-lede{ margin-left:auto; }
  /* stacked, the mark reads as a full stop under the copy — give it room, and
     pull it in: at full column width the lockup competes with the headline */
  .abt-story__mark{
    margin-top:clamp(26px,4.2vh,40px);
    width:min(56%, 210px);
  }
  .abt-hero__frame .abt-hero__figure{
    aspect-ratio:16 / 10;
    height:auto;
    min-height:0;
  }
  .abt-facts__row{ grid-template-columns:1fr 1fr; row-gap:clamp(22px,3.6vh,32px); }
  /* the third figure starts a new row, so its divider would hang in mid-air */
  .abt-facts__row li:nth-child(3)::before{ display:none; }

  .abt-journey__row{ grid-template-columns:1fr; row-gap:clamp(26px,4.4vh,40px); }
  .abt-journey__row li + li::before{
    left:14%; right:14%; top:0; bottom:auto;
    width:auto; height:1px;
    background:linear-gradient(90deg, rgba(234,225,212,0), var(--ab-line) 45%, rgba(234,225,212,0));
  }
  .abt-journey__row li + li{ padding-top:clamp(24px,4vh,36px); }

  .abt-pillars__row{ grid-template-columns:1fr; gap:clamp(34px,5.6vh,58px); }
  .abt-pillar p,
  .abt-pillar__list{ max-width:46em; }

  /* 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{ width:min(78vw,420px); }

  /* 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: facts to one column, CTA buttons full width */
  .abt-facts__row{ grid-template-columns:1fr; row-gap:20px; }
  .abt-facts__row li + li::before{
    left:22%; right:22%; top:0; bottom:auto;
    width:auto; height:1px;
    background:linear-gradient(90deg, rgba(234,225,212,0), var(--ab-line) 45%, rgba(234,225,212,0));
  }
  .abt-facts__row li + li{ padding-top:20px; }
  .abt-hero__figure{ aspect-ratio:4 / 3; }
  /* outranked by the stacked-frame rule above, so restate it here */
  .abt-hero__frame .abt-hero__figure{ aspect-ratio:4 / 3; }
  /* on a phone the frame is nearly the full width — ease it off the edges */
  .abt-frame{ border-radius:14px; padding:16px; }
  .abt-frame::before{ left:20%; right:20%; }
  .abt-cta__btns{ flex-direction:column; }
  .abt-cta__btn{ width:100%; justify-content:center; }

  /* 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 */
}


/* =========================================================
   SPRIG CURSOR
   The pointer becomes the two-leaf sprig used as a section ornament,
   turning to face its travel and shedding the odd leaf behind it.
   Added by cursor.js, which never runs on touch pointers.
   ========================================================= */

/* Hide the native arrow only once the sprig is actually up, so a failed
   script can never leave the site with no pointer at all. */
html.has-sprig *{ cursor:none; }

/* One place where the native cursor carries information the sprig cannot,
   so it stays: text entry. These selectors outrank the blanket rule above
   on specificity. */
html.has-sprig input,
html.has-sprig textarea,
html.has-sprig select,
html.has-sprig [contenteditable="true"]{ cursor:auto; }

.sprig{
  position:fixed;
  inset:0;
  /* Above the chat panel (9999) *and* the floor-plan lightbox (10000).
     The lightbox is built on first use, so it lands after this layer in
     the DOM and would win a z-index tie — leaving the expanded plan with
     no pointer at all, since .has-sprig has already hidden the native one. */
  z-index:10010;
  pointer-events:none;
  color:var(--gold);
  contain:layout style;
}

.sprig__tip{
  position:absolute;
  top:0; left:0;
  width:27px;
  height:20px;
  opacity:0;
  transition:opacity .32s ease, width .3s cubic-bezier(.22,.61,.36,1),
             height .3s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.sprig.is-awake .sprig__tip{ opacity:1; }
.sprig.is-hidden .sprig__tip{ opacity:0; }

/* over anything clickable the sprig opens out a little */
.sprig.is-bloom .sprig__tip{ width:38px; height:28px; }

/* the cream gold disappears on the dark sections; lift it there */
.sprig.is-onDark{ color:var(--gl-gold); }

.sprig__tip svg,
.sprig__leaf svg{ display:block; width:100%; height:100%; overflow:visible; }

/* ---- shed leaves ---- */
.sprig__leaf{
  position:absolute;
  top:0; left:0;
  width:11px;
  height:14px;
  margin:-7px 0 0 -5px;
  opacity:0;
  animation:sprig-fall 1150ms cubic-bezier(.25,.6,.35,1) forwards;
}

@keyframes sprig-fall{
  0%{
    opacity:.62;
    transform:translate3d(var(--x),var(--y),0) rotate(var(--spin)) scale(.86);
  }
  100%{
    opacity:0;
    transform:translate3d(calc(var(--x) + var(--drift)), calc(var(--y) + 30px), 0)
              rotate(var(--spin-end)) scale(1.04);
  }
}

/* Reduced motion: cursor.js already skips the trail and the turning, and
   tracks 1:1 rather than easing. Nothing here should animate either. */
@media (prefers-reduced-motion:reduce){
  .sprig__tip{ transition:opacity .2s ease; }
  .sprig__leaf{ display:none; }
}

/* A coarse pointer never gets the script, but belt and braces in case a
   hybrid device reports both. */
@media (pointer:coarse){
  html.has-sprig *{ cursor:auto; }
  .sprig{ display:none; }
}