/* ============================================================
   THE MERIDIAN · demonstration site
   The Meridian is an invented development. It exists so a developer
   can click through a real Plot Pilot build rather than look at
   screenshots of one. No real scheme, firm, market or address
   appears anywhere on these pages.

   Typography is deliberately NOT Plot Pilot's. Prata and Instrument
   Sans theme this site the way a client's own faces would: a Plot Pilot
   build is set in the developer's type, never in ours.

   Palette, measured against its own ground:
     ink    on ground  = 13.4:1     cool  on ground = 5.2:1
     metal-t on ground =  4.8:1     white on brand  = 15.1:1
     ok/res/sold on white = 6.5 / 4.8 / 5.0 : 1
   ============================================================ */

@font-face{font-family:'Prata';src:url('../fonts/Prata.woff2') format('woff2');font-weight:400;font-display:swap}
/* Jost was the body face and read as a default: geometric bowls, soft
   numerals. Instrument Sans is narrower and crisper, its figures look like a
   price list rather than a UI, and it sits closer to the tight uppercase
   treatment the nav already uses. Still not one of Plot Pilot's own faces,
   which is the point: a demo is set in the client's type, never in ours. */
@font-face{font-family:'Instrument Sans';src:url('../fonts/InstrumentSans.woff2') format('woff2');font-weight:400 700;font-display:swap}

:root{
  --brand:#1C2B2E;
  --brand-d:#131F21;
  --metal:#A97B55;      /* fills, rules, the one metal CTA */
  --metal-t:#7D563A;    /* the same metal, darkened until small text passes AA
                           on BOTH grounds: 5.5:1 on --ground, 4.8:1 on --ground-2 */
  --metal-lt:#D9B48D;   /* on the brand ground */
  --ground:#F1EDE4;
  --ground-2:#E7E1D4;
  --white:#FFFFFF;
  --ink:#20262A;
  --cool:#5C666B;
  --ok:#2E6B4F;
  --res:#8A6040;
  --sold:#6B6F70;
  --line:rgba(32,38,42,.12);
  --line-s:rgba(32,38,42,.07);
  --line-d:rgba(241,237,228,.18);
  --dsp:'Prata',Georgia,serif;
  --txt:'Instrument Sans',-apple-system,system-ui,sans-serif;
  --r-sm:10px; --r:14px; --r-lg:22px;
  --sh-1:0 1px 2px rgba(28,43,46,.05), 0 8px 22px -12px rgba(28,43,46,.16);
  --sh-2:0 2px 6px rgba(28,43,46,.06), 0 28px 60px -26px rgba(28,43,46,.26);
  --wrap:1380px;
  --ease:cubic-bezier(.22,.68,.24,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ground);color:var(--ink);font-family:var(--txt);font-weight:400;
  font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,72px)}

.dsp{font-family:var(--dsp);font-weight:400;line-height:1.12;letter-spacing:-.005em}
.lbl{display:inline-block;font-size:10.5px;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--metal-t)}
.lbl--d{color:var(--metal-lt)}
.sub{color:var(--cool);font-size:clamp(15.5px,1.4vw,17.5px);line-height:1.68;max-width:58ch}

/* ---------- the Plot Pilot demo ribbon ---------- */
.ribbon{background:#12100E;color:#EFE9DC;font-size:12.5px;letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  padding:9px 18px;text-align:center}
/* Ribbon and nav travel together as one fixed stack. Nothing uses a negative
   margin to climb behind anything else, which is what put the wordmark and the
   links underneath the ribbon and left the CTA floating on its own. */
.topbar{position:fixed;top:0;left:0;right:0;z-index:120}
.ribbon b{font-weight:500}
.ribbon a{border-bottom:1px solid rgba(239,233,220,.5);padding-bottom:1px;white-space:nowrap}
.ribbon a:hover{border-bottom-color:#EFE9DC}
.ribbon .pill{display:inline-flex;align-items:center;gap:7px;padding:3px 11px;border-radius:100px;
  background:rgba(239,233,220,.1);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.ribbon .pill i{width:6px;height:6px;border-radius:50%;background:#9FC4AC}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 32px;
  border-radius:100px;font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  background:var(--brand);color:var(--ground);border:1px solid var(--brand);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn--metal{background:var(--metal-t);border-color:var(--metal-t);color:#fff}
.btn--line{background:transparent;color:var(--ink);border-color:rgba(32,38,42,.32)}
.btn--line:hover{border-color:var(--ink);box-shadow:none}
.btn--light{background:var(--white);color:var(--ink);border-color:var(--white)}
.btn--glass{background:rgba(19,31,33,.42);border-color:rgba(255,255,255,.4);color:#fff;
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%)}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- nav ---------- */
.nav{position:relative;z-index:100;padding:18px 0;transition:background .4s var(--ease),
  padding .4s var(--ease),box-shadow .4s var(--ease)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:22px}
.nav__mk{font-family:var(--dsp);font-size:21px;letter-spacing:.06em;color:#fff;line-height:1.1;
  transition:color .4s var(--ease)}
.nav__mk small{display:block;font-family:var(--txt);font-size:9px;font-weight:400;
  letter-spacing:.3em;text-transform:uppercase;opacity:.74;margin-top:3px}
.nav__links{display:flex;gap:30px}
.nav__links a{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.88);transition:color .25s}
.nav__links a:hover,.nav__links a.on{color:#fff}
.nav__cta{padding:12px 24px;border-radius:100px;font-size:10px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;background:var(--white);color:var(--ink);white-space:nowrap;
  transition:transform .3s var(--ease)}
.nav__cta:hover{transform:translateY(-2px)}
/* solid state: used on scroll, and from the start on the inner pages */
.nav.solid,.nav.is-stuck{background:rgba(241,237,228,.92);backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);padding:12px 0;box-shadow:0 1px 0 var(--line-s)}
.nav.solid .nav__mk,.nav.is-stuck .nav__mk{color:var(--ink)}
.nav.solid .nav__links a,.nav.is-stuck .nav__links a{color:var(--cool)}
.nav.solid .nav__links a:hover,.nav.is-stuck .nav__links a:hover,
.nav.solid .nav__links a.on,.nav.is-stuck .nav__links a.on{color:var(--ink)}
.nav.solid .nav__cta,.nav.is-stuck .nav__cta{background:var(--brand);color:var(--ground)}
/* pages that are not the hero page start solid, and the body is padded to
   clear the fixed stack */
body{padding-top:var(--topH,124px)}
/* the hero page runs the image up behind the stack instead of clearing it */
body.has-hero{padding-top:0}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(100svh,900px);display:flex;align-items:center;
  background:var(--brand);overflow:hidden;padding:var(--heroTop,150px) 0 96px}
.hero__m{position:absolute;inset:0}
.hero__sc{position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(13,21,23,.86) 0%,rgba(13,21,23,.6) 38%,rgba(13,21,23,.14) 72%,rgba(13,21,23,.05) 100%),
    linear-gradient(180deg,rgba(13,21,23,.58) 0%,rgba(13,21,23,.18) 30%,rgba(13,21,23,.4) 74%,rgba(13,21,23,.86) 100%)}
.hero__c{position:relative;z-index:2;width:100%}
.hero__kick{color:rgba(255,255,255,.9);display:inline-flex;align-items:center;gap:9px}
.hero__kick i{width:6px;height:6px;border-radius:50%;background:#9FC4AC}
.hero h1{font-family:var(--dsp);font-weight:400;font-size:clamp(38px,6.6vw,84px);color:#fff;
  line-height:1.05;letter-spacing:-.01em;margin:18px 0 0;max-width:17ch;
  text-shadow:0 2px 30px rgba(15,24,26,.45)}
.hero p{margin-top:22px;max-width:48ch;color:rgba(255,255,255,.9);font-size:clamp(15.5px,1.5vw,18px);
  line-height:1.65;text-shadow:0 1px 16px rgba(15,24,26,.5)}
.hero__btns{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}
.hero__bar{position:absolute;left:0;right:0;bottom:0;z-index:2;
  border-top:1px solid rgba(255,255,255,.2);background:rgba(15,24,26,.42);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero__bar ul{display:grid;grid-template-columns:repeat(4,1fr);list-style:none}
.hero__bar li{padding:19px 8px;text-align:center;font-size:10.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.9);
  border-left:1px solid rgba(255,255,255,.16)}
.hero__bar li:first-child{border-left:0}

/* ---------- sections ---------- */
.sec{padding:clamp(70px,8.5vw,128px) 0}
.sec--tint{background:var(--ground-2)}
.sec--dark{background:var(--brand);color:var(--ground)}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark .sub{color:rgba(241,237,228,.82)}
.shead{max-width:740px;margin-bottom:clamp(36px,4.4vw,58px)}
.shead h2{font-family:var(--dsp);font-weight:400;font-size:clamp(29px,4.1vw,52px);
  line-height:1.1;letter-spacing:-.01em;margin:12px 0 16px}

/* two-up: a big image beside a short column */
.two{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,78px);align-items:center}
.two--flip .two__t{order:2}
.fig{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);background:var(--ground-2)}
.fig img{aspect-ratio:4/3}
.fig--tall img{aspect-ratio:3/4}
.fig--wide img{aspect-ratio:16/9}
.facts{list-style:none;display:grid;gap:0;margin-top:30px}
.facts li{display:flex;gap:18px;align-items:baseline;padding:15px 0;border-top:1px solid var(--line-s)}
.facts li:last-child{border-bottom:1px solid var(--line-s)}
.facts .k{font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cool);min-width:8.5em;flex:none}
.facts .v{font-family:var(--dsp);font-size:19px}

/* three-up cards, equal height by grid */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.1vw,26px)}
.card{background:var(--white);border:1px solid var(--line-s);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-1);display:flex;flex-direction:column}
.card__im{aspect-ratio:16/11;overflow:hidden;background:var(--ground-2)}
.card__im img{transition:transform .8s var(--ease)}
.card:hover .card__im img{transform:scale(1.04)}
.card__b{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.card h3{font-family:var(--dsp);font-weight:400;font-size:21px;margin:10px 0 8px;line-height:1.2}
.card p{font-size:14.5px;color:var(--cool);line-height:1.6}
.card .btn{margin-top:auto;align-self:flex-start;margin-top:20px}

/* ---------- collection rows (the proposal sites' residence rows) ---------- */
.rows{display:grid;gap:14px}
.row{display:grid;grid-template-columns:150px 1.1fr 1fr .9fr auto;gap:clamp(16px,2.4vw,34px);
  align-items:center;background:var(--white);border:1px solid var(--line-s);
  border-radius:var(--r-lg);padding:14px 22px 14px 14px;box-shadow:var(--sh-1);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.row:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.row__im{border-radius:var(--r-sm);overflow:hidden}
.row__im img{aspect-ratio:4/3}
.row h3{font-family:var(--dsp);font-weight:400;font-size:21px;line-height:1.22}
.row__d{font-size:13.5px;color:var(--cool);line-height:1.55}
.row__p{font-family:var(--dsp);font-size:19px;white-space:nowrap}
.row__p small{display:block;font-family:var(--txt);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cool);margin-bottom:3px}

/* ---------- availability header ---------- */
.ph{background:var(--ground-2);padding:clamp(34px,4.4vw,58px) 0 clamp(26px,3vw,38px)}
.ph__in{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,56px);align-items:start}
.ph h1{font-family:var(--dsp);font-weight:400;font-size:clamp(32px,4.6vw,56px);
  line-height:1.08;letter-spacing:-.01em;margin:12px 0 14px}
.avail{background:var(--white);border:1px solid var(--line-s);border-radius:var(--r-lg);
  padding:22px 24px;box-shadow:var(--sh-1)}
.avail__h{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cool);margin-bottom:16px}
.avail__h i{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 0 rgba(46,107,79,.5);animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(46,107,79,.45)}70%{box-shadow:0 0 0 9px rgba(46,107,79,0)}100%{box-shadow:0 0 0 0 rgba(46,107,79,0)}}
.avail__n{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.avail__n .v{font-family:var(--dsp);font-size:clamp(28px,3.4vw,40px);line-height:1}
.avail__n .k{font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cool);margin-top:6px}
.avail__n .a .v{color:var(--ok)} .avail__n .r .v{color:var(--res)} .avail__n .s .v{color:var(--sold)}
.avail__bar{display:flex;height:6px;border-radius:100px;overflow:hidden;margin-top:18px;
  background:var(--ground-2)}
.avail__bar i{display:block;height:100%}
.avail__bar .b1{background:var(--ok)} .avail__bar .b2{background:var(--res)} .avail__bar .b3{background:var(--sold)}
.avail__f{font-size:11.5px;color:var(--cool);margin-top:12px}
.trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.trust span{font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cool);border:1px solid var(--line);border-radius:100px;padding:7px 14px}

/* ---------- filters ---------- */
.tools{position:sticky;top:0;z-index:60;background:rgba(241,237,228,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-s);padding:14px 0}
.tools__in{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters button{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:100px;
  border:1px solid var(--line);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cool);background:var(--white);transition:all .25s var(--ease)}
.filters button b{font-weight:500;opacity:.66;font-size:10.5px}
.filters button:hover{border-color:var(--ink);color:var(--ink)}
.filters button.on{background:var(--brand);border-color:var(--brand);color:var(--ground)}
.filters button.on b{opacity:.75}
.tools__r{display:flex;align-items:center;gap:18px}
.tools__ct{font-size:12.5px;color:var(--cool)}
.tools__ct b{color:var(--ink);font-weight:500}
.tog{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cool)}
.tog i{width:38px;height:21px;border-radius:100px;background:var(--ground-2);
  border:1px solid var(--line);position:relative;transition:background .3s}
.tog i::after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:var(--white);box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .3s var(--ease)}
.tog.on i{background:var(--ok);border-color:var(--ok)}
.tog.on i::after{transform:translateX(17px)}

/* ---------- residence grid ---------- */
/* each residence reads left to right: a slim column of particulars, set like
   a printed schedule, beside a picture that takes most of the card */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.1vw,26px)}
.unit{position:relative;background:var(--white);border:1px solid var(--line-s);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);text-align:left;
  display:grid;grid-template-columns:minmax(240px,.76fr) minmax(0,1.24fr);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.unit:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.unit__im{position:relative;min-height:300px;overflow:hidden;background:var(--ground-2)}
.unit__im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.unit:hover .unit__im img{transform:scale(1.05)}
.unit__im::after{content:'';position:absolute;inset:auto 0 0 0;height:34%;pointer-events:none;
  background:linear-gradient(180deg,rgba(19,31,33,0),rgba(19,31,33,.42))}
.unit__st{position:absolute;top:12px;left:12px;z-index:1;display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:100px;background:rgba(255,255,255,.95);font-size:9.5px;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.unit__st::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.unit__ph{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;display:flex;justify-content:space-between;
  align-items:center;gap:8px;font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.unit__ph i{font-style:normal;padding:5px 10px;border-radius:100px;border:1px solid rgba(255,255,255,.7);
  background:rgba(19,31,33,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.unit.av .unit__st{color:var(--ok)}
.unit.re .unit__st{color:var(--res)}
.unit.so .unit__st{color:var(--sold)}
.unit.so .unit__im img{filter:grayscale(.55);opacity:.72}

.unit__b{padding:22px 20px 20px 22px;display:flex;flex-direction:column;min-width:0}
.unit__k{font-size:9.5px;font-weight:500;letter-spacing:.16em;white-space:nowrap;text-transform:uppercase;color:var(--metal-t)}
.unit__n{font-family:var(--dsp);font-weight:400;font-size:22px;line-height:1.15;margin-top:8px;white-space:nowrap}
.unit__d{font-size:12.5px;line-height:1.55;color:var(--cool);margin-top:8px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.unit__sp{display:grid;grid-template-columns:1fr 1fr;margin-top:16px;border-top:1px solid var(--line-s)}
.unit__sp>div{padding:10px 0 9px;border-bottom:1px solid var(--line-s)}
.unit__sp>div:nth-child(odd){padding-right:10px;border-right:1px solid var(--line-s)}
.unit__sp>div:nth-child(even){padding-left:12px}
.unit__sp span{display:block;font-size:8.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--cool)}
.unit__sp b{display:block;font-family:var(--dsp);font-weight:400;font-size:17px;margin-top:3px;font-variant-numeric:tabular-nums}
.unit__pr{margin-top:16px}
.unit__pr span{display:block;font-size:8.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--cool)}
.unit__pr b{display:block;font-family:var(--dsp);font-weight:400;font-size:23px;margin-top:3px;font-variant-numeric:tabular-nums}
.unit__pr small{display:block;font-size:11.5px;color:var(--cool);margin-top:2px}
.unit__pr .unit__nt{margin-top:8px;color:var(--ink)}
.unit.re .unit__nt{color:var(--res)} .unit.so .unit__nt{color:var(--sold)}
.unit__go{margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:8px;font-size:10px;
  font-weight:500;letter-spacing:.14em;white-space:nowrap;text-transform:uppercase;color:var(--ok)}
.unit.re .unit__go{color:var(--res)} .unit.so .unit__go{color:var(--sold)}
.unit.so .unit__n,.unit.so .unit__pr b{color:var(--sold)}
.empty{grid-column:1/-1;text-align:center;padding:64px 20px;color:var(--cool)}

/* ---------- residence drawer ---------- */
.ov{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:clamp(12px,3vw,40px);background:rgba(16,24,26,.62);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px)}
.ov.on{display:flex}
.dr{background:var(--ground);border-radius:var(--r-lg);width:min(980px,100%);
  max-height:92vh;overflow:auto;box-shadow:var(--sh-2);position:relative}
.dr__x{position:absolute;top:16px;right:16px;z-index:3;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-1)}
.dr__b{padding:clamp(24px,3vw,40px)}
.dr__h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px}
.dr__h h2{font-family:var(--dsp);font-weight:400;font-size:clamp(26px,3vw,36px);line-height:1.12}
.dr__p{font-family:var(--dsp);font-size:clamp(22px,2.4vw,29px)}
.dr__sp{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:24px 0;padding:20px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dr__sp b{display:block;font-family:var(--dsp);font-size:21px;font-weight:400}
.dr__sp span{font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--cool)}
.dr__res{background:var(--white);border:1px solid var(--line-s);border-radius:var(--r);
  padding:24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.dr__res .t{font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--cool)}
.dr__res .a{font-family:var(--dsp);font-size:27px;margin-top:4px}
.dr__res .n{font-size:12.5px;color:var(--cool);margin-top:6px;max-width:36ch;line-height:1.55}
.dr__done{display:none;align-items:flex-start;gap:14px;background:rgba(46,107,79,.09);
  border:1px solid rgba(46,107,79,.28);border-radius:var(--r);padding:22px 24px}
.dr__done.on{display:flex} .dr__res.off{display:none}
.dr__done .tick{width:26px;height:26px;border-radius:50%;background:var(--ok);flex:none;position:relative}
.dr__done .tick::after{content:'';position:absolute;left:8px;top:8px;width:9px;height:5px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.dr__done b{font-family:var(--dsp);font-weight:400;font-size:19px;display:block;margin-bottom:4px}
.dr__done p{font-size:13.5px;color:var(--cool);line-height:1.6}

/* ---------- register ---------- */
.reg{position:relative;background:var(--brand);color:var(--ground);overflow:hidden}
.reg__bg{position:absolute;inset:0;opacity:.28}
.reg__sc{position:absolute;inset:0;background:linear-gradient(120deg,rgba(19,31,33,.94),rgba(19,31,33,.7))}
.reg__in{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,72px);align-items:start}
.reg h2{font-family:var(--dsp);font-weight:400;font-size:clamp(28px,3.8vw,46px);color:#fff;
  line-height:1.1;margin:12px 0 16px}
.reg .sub{color:rgba(241,237,228,.86)}
.form{background:rgba(241,237,228,.07);border:1px solid var(--line-d);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,38px);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.form h3{font-family:var(--dsp);font-weight:400;font-size:21px;color:#fff;margin-bottom:6px}
.form .hint{font-size:13.5px;color:rgba(241,237,228,.72);margin-bottom:22px}
.field{margin-bottom:15px}
.field label{display:block;font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(241,237,228,.74);margin-bottom:7px}
.field input,.field select{width:100%;padding:13px 15px;border-radius:10px;
  background:rgba(241,237,228,.08);border:1px solid var(--line-d);color:#fff;font:inherit;
  font-size:15px;transition:border-color .3s,background .3s}
.field input::placeholder{color:rgba(241,237,228,.42)}
.field input:focus,.field select:focus{outline:0;border-color:#9FC4AC;background:rgba(241,237,228,.12)}
.field select option{background:var(--brand-d);color:#fff}
.form .btn{width:100%;margin-top:8px}

/* ---------- footer ---------- */
.foot{background:var(--brand-d);color:var(--ground);padding:clamp(48px,5.5vw,76px) 0 26px}
.foot__top{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(28px,5vw,64px);
  padding-bottom:34px;border-bottom:1px solid var(--line-d)}
.foot__mk{font-family:var(--dsp);font-size:23px;letter-spacing:.06em;color:#fff}
.foot__mk small{display:block;font-family:var(--txt);font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;opacity:.72;margin-top:4px}
.foot p{margin-top:16px;max-width:42ch;color:rgba(241,237,228,.72);font-size:14.5px;line-height:1.6}
.foot__links{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.foot__col h5{font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--metal-lt);margin-bottom:12px}
.foot__col a{display:block;font-size:14px;color:rgba(241,237,228,.78);padding:4px 0}
.foot__col a:hover{color:#fff}
.foot__bar{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;padding-top:22px;
  font-size:12.5px;color:rgba(241,237,228,.58)}

/* ---------- feature bands ----------
   One full-width band per amenity or feature, each with a picture of that
   actual thing. Shared by the Halyard and the Meridian. Written for the dark
   ground; .sec:not(.sec--dark) below re-colours it for a light one. The rule
   behind it: a feature is never advertised with a block of text alone. */
.feat{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(28px,4.5vw,72px);
  align-items:center;padding:clamp(30px,4vw,56px) 0}
.feat + .feat{border-top:1px solid var(--line-d)}
/* image on the right: reverse the track widths as well as the order, or the
   picture lands in the narrow column */
.feat:nth-of-type(even){grid-template-columns:.82fr 1.18fr}
.feat:nth-of-type(even) .feat__fig{order:2}
.feat__fig{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;background:#132022;
  box-shadow:0 34px 70px -32px rgba(0,0,0,.75)}
.feat__fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.feat:hover .feat__fig img{transform:scale(1.035)}
.feat h3{font-family:var(--dsp);font-weight:400;font-size:clamp(26px,3vw,38px);
  line-height:1.1;color:#fff;margin:12px 0 14px}
.feat p{color:rgba(241,237,228,.8);font-size:clamp(15px,1.3vw,16.5px);line-height:1.7}
.feat__facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0 20px;
  padding:18px 0;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.feat__facts b{display:block;font-family:var(--dsp);font-weight:400;font-size:18px;
  color:#fff;line-height:1.2}
.feat__facts span{display:block;font-size:9.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(241,237,228,.66);margin-top:6px}
.feat__chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.feat__chips li{font-size:11.5px;letter-spacing:.04em;color:rgba(241,237,228,.84);
  border:1px solid rgba(241,237,228,.22);border-radius:100px;padding:7px 14px}
.feat__go{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:10.5px;
  font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--metal-lt);
  transition:gap .3s var(--ease)}
.feat__go:hover{gap:14px}
/* the same bands on a light ground */
.sec:not(.sec--dark) .feat + .feat{border-top-color:var(--line)}
.sec:not(.sec--dark) .feat__fig{background:var(--ground-2);box-shadow:var(--sh-2)}
.sec:not(.sec--dark) .feat h3,.sec:not(.sec--dark) .feat__facts b{color:var(--ink)}
.sec:not(.sec--dark) .feat p{color:var(--cool)}
.sec:not(.sec--dark) .feat__facts{border-color:var(--line)}
.sec:not(.sec--dark) .feat__facts span{color:var(--cool)}
.sec:not(.sec--dark) .feat__chips li{color:var(--ink);border-color:var(--line);background:var(--white)}
.sec:not(.sec--dark) .feat__go{color:var(--metal-t)}
@media (max-width:1040px){
  .feat,.feat:nth-of-type(even){grid-template-columns:1fr}
  .feat:nth-of-type(even) .feat__fig{order:0}
}
@media (max-width:560px){ .feat__facts{grid-template-columns:1fr 1fr} }

/* ---------- reveal ----------
   Scoped to html.js so that a script failure leaves every section visible
   rather than blank. */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .two,.ph__in,.reg__in{grid-template-columns:1fr}
  .two--flip .two__t{order:0}
  .cards{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:1fr}
  .row{grid-template-columns:120px 1fr;grid-template-areas:'im h' 'im d' 'p p' 'b b';row-gap:8px}
  .row__im{grid-area:im} .row h3{grid-area:h} .row__d{grid-area:d}
  .row__p{grid-area:p} .row .btn{grid-area:b;justify-self:start}
}
@media (max-width:760px){
  body{font-size:16px}
  .nav__links{display:none}
  .cards,.grid{grid-template-columns:1fr}
  .hero__bar ul{grid-template-columns:1fr 1fr}
  .hero__bar li:nth-child(3){border-left:0}
  .hero__bar li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.16)}
  .dr__sp{grid-template-columns:1fr 1fr}
  .foot__top{grid-template-columns:1fr}
  .tools__in{gap:12px}
}
/* below 1200 two cards leave the picture no bigger than the particulars, so
   each residence takes the full row; below 640 it stacks, picture first */
@media (max-width:1200px){ .grid{grid-template-columns:1fr} }
@media (max-width:640px){
  .unit{grid-template-columns:1fr}
  .unit__im{order:-1;min-height:0;aspect-ratio:16/11}
  .unit__n{white-space:normal}
}