/* ============================================================
   MONAD TERRACE — landing page
   monadterracesobe.com · The Luxury Team | The Agency Florida LLC

    1  tokens and base            9  gallery
    2  header and navigation     10  team
    3  hero                      11  FAQ
    4  stats rail                12  enquiry and Fluent Forms
    5  sections and splits       13  Optima Express IDX
    6  collections               14  footer
    7  floor plan catalogue      15  privacy modal
    8  owners and amenities      16  images, motion, print

   Scoped rules hang off body.monad-page, the class the template
   prints. Enqueued on the front page only, after every plugin.
   ============================================================ */

/* ============================================================
   1. TOKENS AND BASE
   ============================================================ */
:root{
  --paper:#FBF8F3; --linen:#F2EBE1; --dune:#E9E0D2;
  --hair:#D6C9B4; --hair-soft:#E4DACB; --white:#FFFFFF;
  --ink:#0F2A3F;
  --ink-2:rgba(15,42,63,.86);
  --ink-3:rgba(15,42,63,.76);
  --ink-4:rgba(15,42,63,.70);
  --dawn:#1B7370;               /* teal accent: links, focus, hover states */
  --bronze:#8A5C2C;             /* warm accent: sell-side CTAs, error states */

  --display:'EB Garamond','Adobe Garamond Pro',Garamond,Georgia,serif;
  --body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --mark:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --gut:clamp(20px,5vw,80px);
  --maxw:1440px;
  --hdr:126px; --nav-h:58px;    /* --hdr is measured live by the template */
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:160px}
body.monad-page{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-weight:400;line-height:1.66;
  font-size:clamp(16.5px,1.05vw,18px);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.nav-open{overflow:hidden}
:where(body.monad-page) img{max-width:100%;height:auto;display:block}
/* :where() above carries zero specificity on purpose. Every image rule
   below it that sets its own height/object-fit (hero, splits, towers,
   amenities, gallery, enquiry) is a plain class selector — e.g. ".gal img"
   at (0,1,1) — which is LOWER specificity than a normal "body.monad-page
   img" rule at (0,1,2) would have been. Without :where(), the global
   height:auto silently won every one of those fights: object-fit:cover
   had no explicit height to work from, so the browser rendered each
   image at its natural aspect ratio and the figure's overflow:hidden
   just chopped off whatever ran past the box — which is why the gallery
   had gaps under short images and showed only the top sliver of tall
   ones (the entrance shot). Keep this as :where(); reverting it to a
   plain selector reintroduces that bug everywhere at once. */
body.monad-page a{color:inherit;text-decoration:none}
body.monad-page :focus-visible{outline:2px solid var(--dawn);outline-offset:3px}
body.monad-page ::selection{background:var(--dawn);color:var(--paper)}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--paper);padding:14px 22px;
  font-family:var(--mark);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
}
.skip:focus{left:12px;top:12px}

/* --- shared type --- */
.eyebrow{
  font-family:var(--mark);font-size:12px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);margin:0;
}
.dsp{font-family:var(--display);font-weight:500;line-height:1.04;letter-spacing:-.008em}
.h-sec{font-size:clamp(2.2rem,4.8vw,3.9rem);margin:0}
.lede{font-size:clamp(1.08rem,1.35vw,1.28rem);line-height:1.6;color:var(--ink-2);max-width:58ch;margin:0}
.body-w{max-width:62ch;color:var(--ink-2);margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(72px,9.5vw,148px);position:relative}
.band{background:var(--linen)}
.tag{
  display:inline-flex;align-items:center;gap:.6em;margin:0;
  font-family:var(--mark);font-size:12px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent,var(--ink-3));
}
.tag::before{content:"";width:26px;height:1px;background:currentColor}
.east{--accent:var(--bronze)}
.west{--accent:var(--dawn)}
.sec-head{max-width:70ch;margin:0 0 clamp(38px,4.5vw,66px)}
.sec-head .h-sec{margin:.35em 0 0}
.sec-head .lede{margin-top:1.1em}
.anchor-alias{position:absolute;top:0;left:0;width:1px;height:1px}

/* --- buttons --- */
.btn{
  display:inline-block;font-family:var(--mark);font-size:12px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;padding:15px 28px;
  border:1px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;
  transition:background .35s ease,color .35s ease,border-color .35s ease;
}
.btn:hover,.btn:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-solid:hover,.btn-solid:focus-visible{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost{border-color:currentColor}

/* --- reveal --- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .75s ease,transform .75s ease}
.rv.in{opacity:1;transform:none}

/* ============================================================
   2. HEADER AND NAVIGATION — two tiers
   .topbar  presented-by lockup left, phone right
   .nav     wordmark left, links, two CTAs right
   ============================================================ */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:rgba(251,248,243,.94);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s ease,background .4s ease;
}
.hdr.solid{border-bottom-color:var(--hair-soft);background:rgba(251,248,243,.98)}

.topbar{border-bottom:1px solid var(--hair-soft)}
.topbar-in{
  max-width:var(--maxw);margin:0 auto;padding:14px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  transition:padding .35s ease;
}
.hdr.solid .topbar-in{padding-block:9px}
.presented{display:flex;align-items:center;gap:16px;flex:0 1 auto;min-width:0}
.presented-by{
  font-family:var(--mark);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);flex:0 0 auto;
}
/* Both marks at 36px, pure black, per the brand spec. */
.presented .lg-tlt{width:auto;height:36px;max-width:340px;opacity:1;object-fit:contain}
.presented .lg-agency{width:auto;height:36px;max-width:96px;opacity:1;object-fit:contain}
.hdr.solid .presented .lg-tlt{height:30px}
.hdr.solid .presented .lg-agency{height:30px}
.lg-rule{width:1px;height:24px;flex:0 0 auto;background:rgba(0,0,0,.2)}
.foot .lg-rule{background:rgba(255,255,255,.25);height:30px}
.topbar-phone{
  font-family:var(--mark);font-size:13px;font-weight:500;
  letter-spacing:.12em;color:var(--ink);white-space:nowrap;flex:0 0 auto;
  transition:color .3s ease;
}
.topbar-phone:hover,.topbar-phone:focus-visible{color:var(--dawn)}

.nav-in{
  max-width:var(--maxw);margin:0 auto;padding:10px var(--gut);
  min-height:var(--nav-h);
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:clamp(20px,2.6vw,40px);
  transition:min-height .35s ease;
}
.hdr.solid .nav-in{min-height:48px}
.brand{
  /* No min-width:0 here on purpose. Both brand-mark and brand-sub are
     white-space:nowrap, so their combined width IS this box's min-content.
     min-width:0 on a grid/flex item overrides that and lets the grid track
     compress the box narrower than its own text — grid doesn't clip
     overflow by default, so the nowrap text then spills rightward past the
     box's edge and sits on top of the nav links next to it. That is what
     caused "Monad Terrace / South Beach Bay" to overlap "Listings" once a
     longer nav-links list gave the middle grid track more to ask for.
     Leaving min-width at its default (auto) keeps this column at its
     natural content width instead. */
  display:flex;align-items:baseline;gap:.62em;justify-self:start;
}
.brand-mark{
  font-family:var(--display);font-size:clamp(1.35rem,1.9vw,26px);
  font-weight:500;letter-spacing:.005em;line-height:1;white-space:nowrap;color:var(--ink);
}
.brand-sub{
  font-family:var(--mark);font-size:10px;font-weight:500;letter-spacing:.22em;line-height:1;
  text-transform:uppercase;color:var(--ink-4);white-space:nowrap;
}
.nav-links{display:flex;align-items:center;gap:clamp(16px,2vw,32px);list-style:none;margin:0;padding:0;justify-self:end}
.nav-links li{position:relative}
.nav-links a{
  font-family:var(--mark);font-size:12px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  padding-block:6px;position:relative;transition:color .3s ease;white-space:nowrap;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--dawn);transition:width .35s ease;
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--ink)}
.nav-links a:hover::after,.nav-links a:focus-visible::after{width:100%}

/* --- "The Building" dropdown ---
   Click is the one trigger for a mouse: hover-to-open plus click-to-close
   is the combination that produces both a dead zone between trigger and
   panel, and a click-to-close that silently fails because the cursor is
   still hovering right after the click. :focus-within keeps it reachable
   by keyboard without a second trigger — a link inside is a normal Tab
   stop, and the panel fades in the moment one of them receives focus. */
.dd-btn{
  appearance:none;background:transparent;border:0;margin:0;padding:6px 0;
  font-family:var(--mark);font-size:12px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;transition:color .3s ease;
}
.dd-btn:hover,.dd-btn:focus-visible,.dd-btn[aria-expanded="true"]{color:var(--ink)}
.dd-caret{width:9px;height:6px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .25s ease}
.dd-btn[aria-expanded="true"] .dd-caret{transform:rotate(180deg)}
.dd-panel{
  position:absolute;top:100%;left:50%;margin:14px 0 0;min-width:196px;
  transform:translateX(-50%) translateY(4px);
  background:var(--paper);border:1px solid var(--hair-soft);
  box-shadow:0 18px 40px rgba(15,42,63,.14);
  list-style:none;padding:8px;
  opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;
}
/* Not visibility:hidden or display:none — those pull the links out of the
   Tab order entirely, so a keyboard user could never reach them at all.
   Opacity + pointer-events keeps them present and tabbable; :focus-within
   or .is-open (the click state) is what reveals them visually. */
.has-dd:focus-within .dd-panel,
.dd-panel.is-open{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.dd-panel a{
  display:block;padding:10px 14px;font-size:11.5px;letter-spacing:.14em;
}
.dd-panel a::after{content:none}
.dd-panel a:hover,.dd-panel a:focus-visible{background:var(--linen);color:var(--ink)}

.nav-cta{display:flex;align-items:center;gap:10px;justify-self:end}
.nav-cta .btn{padding:13px 20px;font-size:11px;letter-spacing:.15em}

.menu-btn{
  display:none;width:44px;height:44px;border:1px solid transparent;
  background:transparent;cursor:pointer;position:relative;padding:0;
  margin-right:-10px;justify-self:end;transition:border-color .3s ease;
}
.menu-btn:focus-visible,.menu-btn[aria-expanded="true"]{border-color:var(--hair)}
.menu-btn span{
  display:block;width:18px;height:1px;background:var(--ink);
  margin:0 auto;transition:transform .3s ease,opacity .3s ease;
}
.menu-btn span+span{margin-top:5px}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}

.mobile-nav{
  display:none;flex-direction:column;gap:2px;
  padding:10px var(--gut) 26px;border-top:1px solid var(--hair-soft);
  background:var(--paper);max-height:calc(100vh - var(--hdr));overflow-y:auto;
}
.mobile-nav[data-open="true"]{display:flex}
.mobile-nav a{
  font-family:var(--mark);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;padding:15px 0;border-bottom:1px solid var(--hair-soft);
}
.mobile-nav a[data-intent="sell"]{color:var(--bronze)}
.mobile-phone{color:var(--dawn) !important;border-bottom:0 !important}

@media(max-width:1280px){
  .nav-links,.nav-cta{display:none}
  .menu-btn{display:block}
  .nav-in{grid-template-columns:1fr auto}
  .presented-by{display:none}
  .presented{gap:12px}
  .topbar-in{gap:14px}
}
@media(max-width:640px){
  .presented .lg-tlt{height:14px;max-width:150px}
  .presented .lg-agency{height:20px;max-width:50px}
  .lg-rule{height:16px}
  .brand-sub{display:none}
  .topbar-phone{font-size:11.5px}
}
@media(max-width:430px){
  .presented .lg-agency{display:none}
  .presented .lg-rule{display:none}
  .presented .lg-tlt{height:13px;max-width:128px}
}

/* Anchors clear the fixed header however they are reached. Neighborhood
   and Buying were added 2026-09-29 alongside the two new homepage
   sections; both reuse this same rule rather than a new one. */
#property,#neighborhood,#listings,#collections,#residences,#floorplans,#buying,#owners,#valuation,
#amenities,#gallery,#team,#faq,#inquire{scroll-margin-top:160px}

/* ============================================================
   3. HERO
   ============================================================ */
.hero{
  position:relative;min-height:clamp(560px,92vh,940px);
  display:flex;align-items:flex-end;
  padding-top:calc(var(--hdr) + 54px);
  padding-bottom:clamp(60px,8vw,110px);
  overflow:hidden;
}
.hero-img{position:absolute;inset:0;z-index:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:62% 55%}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    rgba(15,42,63,.34) 0%,
    rgba(15,42,63,.08) 34%,
    rgba(15,42,63,.46) 70%,
    rgba(15,42,63,.80) 100%);
}
.hero-in{
  position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%;
  padding-inline:var(--gut);color:var(--paper);
}
.hero-eyebrow{color:rgba(251,248,243,.86);margin-bottom:1.4em}
.hero-h1{
  font-size:clamp(2.5rem,5.4vw,4.1rem);line-height:1.06;
  color:var(--paper);margin:0 0 .42em;
  text-shadow:0 2px 30px rgba(8,26,40,.34);
}
.hero-lede{color:rgba(251,248,243,.94);max-width:56ch;text-shadow:0 1px 16px rgba(8,26,40,.42)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.4em}
.hero-cta .btn-solid{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.hero-cta .btn-solid:hover,.hero-cta .btn-solid:focus-visible{background:transparent;color:var(--paper)}
.hero-cta .btn-ghost{color:var(--paper);border-color:rgba(251,248,243,.6)}
.hero-cta .btn-ghost:hover,.hero-cta .btn-ghost:focus-visible{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.hero-scroll{
  position:absolute;left:50%;bottom:26px;z-index:2;
  width:1px;height:46px;background:rgba(251,248,243,.35);overflow:hidden;
}
.hero-scroll span{display:block;width:100%;height:14px;background:var(--paper);animation:hs 2.4s ease-in-out infinite}
@keyframes hs{0%{transform:translateY(-16px)}100%{transform:translateY(48px)}}

/* ============================================================
   4. STATS RAIL
   ============================================================ */
.rail{background:var(--ink);color:var(--paper)}
.rail-in{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:1px;background:rgba(251,248,243,.16);
  border-inline:1px solid rgba(251,248,243,.16);
}
.rail-item{
  background:var(--ink);padding:clamp(26px,3.4vw,44px) clamp(14px,2vw,26px);
  display:flex;flex-direction:column;gap:.5em;align-items:center;text-align:center;
}
.rail-n{font-family:var(--display);font-size:clamp(2rem,3.4vw,2.9rem);font-weight:500;line-height:1;font-variant-numeric:lining-nums}
.rail-n em{font-family:var(--mark);font-size:.34em;font-style:normal;letter-spacing:.06em;margin-left:.25em}
.rail-l{
  font-family:var(--mark);font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(251,248,243,.7);
}
@media(max-width:860px){
  .rail-in{grid-template-columns:repeat(2,1fr)}
  .rail-item:last-child{grid-column:1/-1}
}

/* ============================================================
   5. SECTIONS AND SPLITS
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,84px);align-items:stretch}
.split-copy{display:grid;gap:1.35em;align-content:start}
.split-copy .h-sec{margin:.2em 0 .1em}
.split-media{margin:0;display:flex;flex-direction:column;min-height:0}
.split-media img{width:100%;flex:1 1 auto;min-height:clamp(280px,32vw,520px);object-fit:cover;object-position:center}
.split-media figcaption,.gal-cap{
  font-family:var(--mark);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);margin-top:14px;
}
@media(max-width:900px){
  .split{grid-template-columns:1fr}
  .split-media img{min-height:0;height:auto;aspect-ratio:4/3}
}

/* the site section drawing: lake to ocean, decorative */
.xsec{margin-top:clamp(46px,6vw,76px);border-top:1px solid var(--hair-soft);padding-top:30px}
.xsec svg{width:100%;height:auto;overflow:visible;display:block}
.xsec text{font-family:var(--mark);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;fill:var(--ink-4)}
.xsec .lbl-strong{fill:var(--ink);font-size:12px}
@media(max-width:700px){.xsec{display:none}}

/* seller strip inside the listings section */
.cta-strip{
  margin-top:clamp(34px,4vw,58px);background:var(--ink);color:var(--paper);
  padding:clamp(28px,3.6vw,48px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
}
.cta-strip .eyebrow{color:rgba(251,248,243,.66)}
.cta-strip-t{font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.12;margin:.4em 0 .35em;color:var(--paper)}
.cta-strip .body-w{color:rgba(251,248,243,.82)}
.cta-strip .btn-solid{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cta-strip .btn-solid:hover,.cta-strip .btn-solid:focus-visible{background:transparent;color:var(--paper);border-color:var(--paper)}

/* ============================================================
   6. COLLECTIONS — Amenity Deck, Tower, Penthouses
   ============================================================ */
.towers{
  /* Two floor groups on this building (Garden, Upper), not Aurora's three
     collections — base column count set to match, so there is no empty
     third cell. If a third group is ever added to inc/floorplans.php, bump
     this back to repeat(3,1fr) and restore the 1080px breakpoint below it. */
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--hair-soft);border-block:1px solid var(--hair-soft);
}
.tower{background:var(--paper);padding:clamp(30px,3.6vw,54px) clamp(22px,3vw,48px);display:flex;flex-direction:column}
.tower figure{margin:0 0 28px;overflow:hidden;aspect-ratio:4/3}
.tower figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.tower:hover figure img{transform:scale(1.045)}
.tower h3{font-weight:500;font-size:clamp(1.8rem,2.5vw,2.35rem);margin:.45em 0 .5em;line-height:1.04}
.spec-list{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--hair-soft)}
.spec-list li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid var(--hair-soft)}
.spec-list span{font-family:var(--mark);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4)}
.spec-list b{font-weight:600;color:var(--ink);text-align:right}
.tower-link{margin:auto 0 0;padding-top:28px}
@media(max-width:760px){.towers{grid-template-columns:1fr}}

/* ============================================================
   7. FLOOR PLAN CATALOGUE AND VIEWER
   ============================================================ */
.fp-controls{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:18px 28px;margin:0 0 clamp(26px,3vw,40px);
}
.fp-towers{display:flex;flex-wrap:wrap;border:1px solid var(--hair)}
.fp-tower-btn{
  appearance:none;border:0;border-left:1px solid var(--hair);margin:0;
  background:var(--paper);color:var(--ink);padding:14px 24px;
  display:grid;gap:6px;text-align:left;cursor:pointer;font:inherit;
  transition:background .3s ease,color .3s ease;
}
.fp-tower-btn:first-child{border-left:0}
.fp-tower-btn:hover{background:var(--linen)}
.fp-tower-name{font-family:var(--display);font-weight:500;font-size:1.22rem;line-height:1.1;color:inherit}
.fp-tower-count{font-family:var(--mark);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4)}
.fp-tower-btn[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.fp-tower-btn[aria-selected="true"] .fp-tower-count{color:rgba(251,248,243,.7)}
.fp-beds{display:flex;flex-wrap:wrap;gap:8px}
.fp-bed-btn{
  appearance:none;margin:0;font-family:var(--mark);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;padding:10px 16px;
  border:1px solid var(--hair);background:transparent;color:var(--ink-3);cursor:pointer;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.fp-bed-btn:hover{border-color:var(--ink);color:var(--ink)}
.fp-bed-btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
@media(max-width:640px){.fp-towers{width:100%}.fp-tower-btn{flex:1}}

.fp-tagline{margin:0 0 22px;color:var(--ink-3);max-width:70ch}
/* Monad Terrace's developer sheets are portrait tabloid, so the thumbnails are
   760x860 rather than a landscape crop. Every sheet is cropped with
   an identical box, so a larger plan genuinely looks larger on its card. */
.fp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:1px}
.fp-card{background:var(--paper);margin:0;box-shadow:0 0 0 1px var(--hair-soft)}
.fp-card:hover,.fp-card:focus-within{position:relative;z-index:1}
.fp-card[hidden]{display:none}
.fp-card-btn{
  display:block;width:100%;padding:0;margin:0;border:0;background:transparent;
  text-align:left;cursor:pointer;color:inherit;font:inherit;
}
.fp-card-btn:focus-visible{outline:2px solid var(--dawn);outline-offset:-3px}
.fp-thumb{display:block;position:relative;background:var(--white);border-bottom:1px solid var(--hair-soft);overflow:hidden}
.fp-thumb img{display:block;width:100%;height:auto;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.fp-card-btn:hover .fp-thumb img{transform:scale(1.035)}
.fp-zoom{
  position:absolute;right:12px;bottom:12px;
  font-family:var(--mark);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);padding:8px 12px;
  opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease;
}
.fp-card-btn:hover .fp-zoom,.fp-card-btn:focus-visible .fp-zoom{opacity:1;transform:none}
@media(hover:none){.fp-zoom{opacity:1;transform:none}}
.fp-body{display:grid;gap:8px;padding:20px 22px 22px}
.fp-code{font-family:var(--mark);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--dawn)}
.fp-name{font-size:1.55rem;line-height:1.14;color:var(--ink)}
.fp-meta{font-size:.92rem;color:var(--ink-2)}
.fp-specs{
  display:flex;flex-wrap:wrap;gap:6px 18px;padding-top:10px;margin-top:4px;
  border-top:1px solid var(--hair-soft);font-size:.86rem;color:var(--ink-3);
}
.fp-specs b{font-weight:600;color:var(--ink)}
.fp-levels{font-family:var(--mark);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4)}
.fp-empty{margin:24px 0 0;grid-column:1/-1;padding:22px 24px;border:1px solid var(--hair);background:var(--linen);color:var(--ink-2)}
.fp-empty[hidden]{display:none}
.fp-note{margin:clamp(24px,3vw,36px) 0 0;font-size:.84rem;line-height:1.6;color:var(--ink-4);max-width:92ch}

/* --- the viewer --- */
body.lb-open,body.pm-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}
dialog.lb{
  padding:0;border:0;margin:0;width:100%;height:100%;
  max-width:none;max-height:none;background:#0B1F2E;color:var(--paper);
}
dialog.lb[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
dialog.lb::backdrop{background:rgba(6,18,28,.92)}
dialog.lb :focus-visible{outline:2px solid #8FD0CC;outline-offset:2px}
.lb-close{
  position:absolute;top:14px;right:14px;z-index:4;width:44px;height:44px;
  border:1px solid rgba(251,248,243,.26);background:transparent;cursor:pointer;
  display:grid;place-items:center;padding:0;
}
.lb-close svg,.lb-nav svg{width:20px;height:20px;fill:none;stroke:var(--paper);stroke-width:1.5}
.lb-head{padding:18px 76px 14px var(--gut);border-bottom:1px solid rgba(251,248,243,.12)}
.lb-tower{margin:0 0 6px;font-family:var(--mark);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(251,248,243,.62)}
.lb-title{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.1;color:var(--paper)}
.lb-meta{margin:6px 0 0;font-size:.92rem;color:rgba(251,248,243,.8)}
.lb-stage{
  position:relative;overflow:hidden;
  /* flex, not grid: a grid item under place-items:center keeps its own
     auto (intrinsic) height and only CAPS it with max-height, and that
     cap does not reliably resolve against the grid row in every engine.
     The result was the sheet opening at its full natural size, wider
     and taller than the stage, with everything past the bottom edge
     clipped by overflow:hidden below — "fit to screen" was never
     actually applying. A flex row resolves percentage max-height
     against the container correctly. */
  display:flex;align-items:center;justify-content:center;
  padding:clamp(10px,2vw,24px);touch-action:none;cursor:zoom-in;min-height:0;
}
.lb-stage img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  /* Flex items default to min-height:auto, which — like the grid case
     above — lets a large intrinsic image refuse to shrink below its
     own content size and overflow the row. min-height/min-width:0
     is what actually lets max-height:100% take effect. */
  min-width:0;min-height:0;
  background:#fff;transform-origin:center center;
  user-select:none;-webkit-user-drag:none;transition:opacity .25s ease;
}
.lb-stage img.is-animating{transition:transform .25s ease,opacity .25s ease}
.lb-stage.is-loading img{opacity:.25}
.lb-stage.is-zoomed{cursor:grab}
.lb-stage.is-dragging{cursor:grabbing}
.lb-nav{
  position:absolute;top:50%;z-index:3;width:48px;height:64px;margin-top:-32px;padding:0;
  border:0;background:rgba(15,42,63,.62);cursor:pointer;display:grid;place-items:center;
}
.lb-nav[hidden]{display:none}
.lb-prev{left:10px}
.lb-next{right:10px}
.lb-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.lb-foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px 24px;padding:14px var(--gut) 18px;border-top:1px solid rgba(251,248,243,.12);
}
.lb-specs{display:flex;flex-wrap:wrap;gap:6px 26px;margin:0}
.lb-specs div{display:grid;gap:2px}
.lb-specs dt{font-family:var(--mark);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(251,248,243,.6)}
.lb-specs dd{margin:0;font-family:var(--display);font-size:1.15rem;color:var(--paper)}
.lb-sheets{display:flex;flex-wrap:wrap;gap:8px}
.lb-sheets[hidden]{display:none}
.lb-sheets button{
  font-family:var(--mark);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 12px;border:1px solid rgba(251,248,243,.3);background:transparent;color:var(--paper);cursor:pointer;
}
.lb-sheets button[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.lb-tools{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.lb-count{font-family:var(--mark);font-size:11px;letter-spacing:.16em;color:rgba(251,248,243,.66)}
.lb-zoom{display:flex;align-items:center;border:1px solid rgba(251,248,243,.26)}
.lb-zoom button{width:40px;height:38px;border:0;background:transparent;color:var(--paper);font-size:18px;line-height:1;cursor:pointer}
.lb-zoom button:hover{background:rgba(251,248,243,.1)}
.lb-level{min-width:52px;text-align:center;font-family:var(--mark);font-size:11px;color:rgba(251,248,243,.82)}
.lb-cta{
  font-family:var(--mark);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  padding:12px 18px;background:var(--paper);color:var(--ink) !important;border:1px solid var(--paper);
  transition:background .3s ease,color .3s ease;
}
.lb-cta:hover,.lb-cta:focus-visible{background:transparent;color:var(--paper) !important}
@media(max-width:640px){
  .lb-nav{width:38px;height:52px;margin-top:-26px}
  .lb-foot{padding-inline:16px}
  .lb-specs dd{font-size:1rem}
  .lb-cta{width:100%;text-align:center}
}

/* ============================================================
   8. OWNERS AND AMENITIES
   ============================================================ */
.owners{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(34px,5vw,84px);align-items:start}
.owners-copy{display:grid;gap:1.3em}
.owners-copy .h-sec{margin:.2em 0 .1em}
.owners-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:.4em}
.steps{list-style:none;margin:0;padding:0;counter-reset:st;border-top:1px solid var(--hair)}
.steps li{
  counter-increment:st;display:grid;grid-template-columns:56px 1fr;gap:6px 18px;
  padding:26px 0;border-bottom:1px solid var(--hair);
}
.steps li::before{
  content:counter(st,decimal-leading-zero);grid-row:span 2;
  font-family:var(--mark);font-size:12px;font-weight:500;letter-spacing:.16em;color:var(--bronze);padding-top:.55em;
}
.steps h3{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(1.35rem,2vw,1.65rem);line-height:1.15}
.steps p{margin:0;color:var(--ink-2);font-size:.97rem}
@media(max-width:900px){.owners{grid-template-columns:1fr}}

.am-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--hair-soft);border-block:1px solid var(--hair-soft);
}
.am{background:var(--linen);padding:clamp(30px,3.4vw,50px) clamp(22px,2.6vw,40px)}
.am h3{font-weight:500;font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1.1;margin:.55em 0 .75em}
.am ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.am li{position:relative;padding-left:24px;color:var(--ink-2);font-size:.97rem;line-height:1.55}
.am li::before{content:"";position:absolute;left:0;top:.72em;width:12px;height:1px;background:var(--accent,var(--ink-3))}
/* A full-width footnote row inside the grid itself (Neighborhood section),
   same linen background as the three boxes above it, separated by a
   hairline rather than by empty page background. Added 2026-09-29 to
   replace a version of this note that sat outside the grid on the plain
   paper background — a thin white strip with nothing else on it, which
   read as a stray leftover rather than part of the block. */
.am-grid-note{
  grid-column:1/-1;margin:0;background:var(--linen);
  padding:20px clamp(22px,2.6vw,40px) clamp(26px,3vw,40px);
  border-top:1px solid var(--hair-soft);
  font-size:.84rem;color:var(--ink-4);
}
.am-media{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair-soft)}
.am-media figure{margin:0;overflow:hidden}
.am-media img{width:100%;height:clamp(220px,30vw,430px);object-fit:cover}
.am-note{margin:18px 0 clamp(52px,6vw,94px);font-size:.84rem;color:var(--ink-4)}
/* Centered only for the amenities photo caption below — it is one short
   line under a three-image row, so centering reads as a caption. The
   Dornbracht/Vola finishes note under the team section reuses this same
   class but runs two full sentences; centering multi-line prose that long
   would be the harder-to-read version of the exact problem being fixed
   here, so that instance is deliberately left at the shared left-aligned
   default instead of following suit. The Neighborhood section's closing
   note is a different component (.am-grid-note, below) for the same
   reason — see its own comment. */
#amenities .am-note{text-align:center}
@media(max-width:980px){.am-grid{grid-template-columns:1fr}}
@media(max-width:940px){.am-media{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.am-media{grid-template-columns:1fr}}

/* ============================================================
   9. GALLERY — twelve-column mosaic
   ============================================================ */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:1px;background:var(--hair-soft)}
.gal figure{margin:0;position:relative;overflow:hidden;background:var(--dune)}
.gal img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
/* Monad Terrace's wide tile is the dawn elevation, a landscape render, so no
   per-tile object-position bias is needed here. */
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 18px 14px;
  font-family:var(--mark);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper);background:linear-gradient(0deg,rgba(15,42,63,.66),rgba(15,42,63,0));
}
.g-a{grid-column:span 7;height:clamp(240px,33vw,470px)}
.g-b{grid-column:span 5;height:clamp(240px,33vw,470px)}
.g-c,.g-d,.g-e{grid-column:span 4;height:clamp(210px,26vw,360px)}
.g-f,.g-g{grid-column:span 6;height:clamp(240px,33vw,470px)}
@media(max-width:820px){
  .g-a,.g-b,.g-c,.g-d,.g-e,.g-f,.g-g{grid-column:span 12;height:clamp(220px,54vw,330px)}
}

/* ============================================================
   10. TEAM
   ============================================================ */
.team{
  /* Two credits now (Architecture, Developer) — Douglas Elliman's original
     sales & marketing credit was dropped by request, since it names a
     competing brokerage. Column count set to match so the two share the
     row evenly with no empty third cell. */
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:0;
  background:var(--hair-soft);border-block:1px solid var(--hair-soft);
}
.team div{background:var(--paper);padding:clamp(26px,2.6vw,40px) clamp(20px,2vw,32px)}
.team dt{font-family:var(--mark);font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.team dd{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(1.2rem,1.5vw,1.42rem);line-height:1.24;color:var(--ink)}
.team dd span{display:block;font-family:var(--body);font-size:.95rem;font-weight:400;color:var(--ink-4);margin-top:10px}
@media(max-width:760px){.team{grid-template-columns:1fr}}

/* ============================================================
   11. FAQ
   ============================================================ */
#faq{background:var(--ink);color:var(--paper);padding-block:clamp(72px,9vw,140px)}
.faq-title{color:var(--paper);margin-bottom:clamp(38px,4.5vw,64px)}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,74px)}
.faq-col{display:grid;gap:clamp(28px,3.2vw,42px);align-content:start}
.faq-item h3{font-family:var(--display);font-size:clamp(1.28rem,1.9vw,1.6rem);font-weight:500;line-height:1.2;margin:0 0 .55em}
.faq-item p{margin:0;color:rgba(251,248,243,.8);font-size:.97rem;line-height:1.68;max-width:58ch}
@media(max-width:820px){.faq-grid{grid-template-columns:1fr}}

/* ============================================================
   12. ENQUIRY AND FLUENT FORMS
   Fluent Forms ships its own stylesheet. These overrides are
   scoped to body.monad-page and use !important where the plugin
   does. Class names targeted:
     form.frm-fluent-form   .ff-el-group   .ff-el-input--label
     .ff-el-form-control    .ff-el-form-check(-label)
     .ff-t-container/.ff-t-cell   .ff-btn-submit
     .ff-el-is-error  .text-danger  .ff-message-success
     .ff-el-turnstile
   After any Fluent Forms update, check the form visually: a
   renamed class fails silently back to plugin styling.
   ============================================================ */
.inq{display:grid;grid-template-columns:1fr 1fr;background:var(--linen);align-items:stretch}
/* Three stacked photos instead of one. A single image stretched with
   align-items:stretch had to cover the full height of a long form (easily
   1800px+ with six fields, the Turnstile widget, consent text, submit and
   the contact card), needing real upscaling past its native resolution,
   which read as blur — and left an empty gap below it when align-self:start
   was used instead to avoid that. Splitting into three roughly-equal tiles
   means each one only ever needs to cover a THIRD of that height, well
   within each source photo's native resolution, and together they fill the
   column edge to edge with no gap, at any form length. */
.inq-media{display:flex;flex-direction:column;gap:1px;background:var(--hair-soft);min-height:420px;overflow:hidden}
.inq-media figure{flex:1 1 0;min-height:0;margin:0;overflow:hidden}
.inq-media img{display:block;width:100%;height:100%;object-fit:cover}
.inq-form{padding:clamp(44px,6vw,110px) clamp(24px,5vw,90px);display:grid;gap:1.3em;align-content:center}
.inq-h{font-size:clamp(2rem,3.7vw,3.1rem)}
@media(max-width:940px){
  .inq{grid-template-columns:1fr}
  /* On mobile the photo column sits above the form, not beside it, so
     there's no tall neighbour to match and no gap to fill — flex:1 would
     just slice a short min-height into three unreadably thin strips. Give
     each tile its own fixed ratio instead. */
  .inq-media{min-height:0}
  .inq-media figure{flex:none;aspect-ratio:16/10}
}

/* buying / selling toggle */
.intent{display:inline-flex;justify-self:start;border:1px solid var(--hair);background:var(--paper)}
.intent-btn{
  appearance:none;margin:0;border:0;background:transparent;cursor:pointer;
  font-family:var(--mark);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);padding:12px 18px;transition:background .3s ease,color .3s ease;
}
.intent-btn + .intent-btn{border-left:1px solid var(--hair)}
.intent-btn:hover{color:var(--ink)}
.intent-btn[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

.form-missing{
  border:1px solid var(--bronze);background:rgba(138,92,44,.08);
  padding:16px 18px;font-size:.9rem;color:var(--ink-2);
}
.form-missing code{font-family:var(--mark);font-size:.86em}

/* --- container and form --- */
body.monad-page .fluentform{margin:1.2em 0 0 !important;max-width:none !important}
body.monad-page form.frm-fluent-form{
  font-family:var(--body) !important;color:var(--ink) !important;
  background:transparent !important;padding:0 !important;border:0 !important;
}
body.monad-page form.frm-fluent-form .ff-el-group{margin:0 0 24px !important}
body.monad-page form.frm-fluent-form .ff-el-group:last-of-type{margin-bottom:0 !important}

/* --- column rows: a real grid instead of floats --- */
body.monad-page form.frm-fluent-form .ff-t-container{display:grid !important;gap:0 24px !important;float:none !important;margin:0 !important}
body.monad-page form.frm-fluent-form .ff-t-cell{float:none !important;width:auto !important;max-width:none !important;padding:0 !important;flex:none !important}
@media(min-width:600px){
  body.monad-page form.frm-fluent-form .ff-t-container{grid-template-columns:1fr 1fr !important}
  body.monad-page form.frm-fluent-form .ff-t-container.ff-column-container-3{grid-template-columns:repeat(3,1fr) !important}
}

/* --- labels --- */
body.monad-page form.frm-fluent-form .ff-el-input--label label{
  font-family:var(--mark) !important;font-size:11px !important;font-weight:500 !important;
  letter-spacing:.18em !important;text-transform:uppercase !important;color:var(--ink-3) !important;
  margin:0 0 9px !important;display:block !important;line-height:1.4 !important;
}
body.monad-page form.frm-fluent-form .ff-el-is-required.asterisk-right label:after,
body.monad-page form.frm-fluent-form .ff-el-is-required.asterisk-left label:before{color:var(--bronze) !important}
body.monad-page form.frm-fluent-form .ff-el-help-message{font-size:.84rem !important;color:var(--ink-4) !important;margin:8px 0 0 !important}

/* --- inputs, selects, textareas --- */
body.monad-page form.frm-fluent-form .ff-el-form-control{
  width:100% !important;max-width:100% !important;background:transparent !important;
  border:0 !important;border-bottom:1px solid var(--hair) !important;border-radius:0 !important;
  box-shadow:none !important;padding:11px 0 !important;font-family:var(--body) !important;
  font-size:1rem !important;line-height:1.5 !important;color:var(--ink) !important;height:auto !important;
  transition:border-color .3s ease !important;
}
body.monad-page form.frm-fluent-form textarea.ff-el-form-control{resize:vertical !important;min-height:92px !important}
body.monad-page form.frm-fluent-form .ff-el-form-control::placeholder{color:var(--ink-4) !important;opacity:.7 !important}
body.monad-page form.frm-fluent-form .ff-el-form-control:focus{border-bottom-color:var(--dawn) !important;outline:none !important;box-shadow:none !important}
body.monad-page form.frm-fluent-form select.ff-el-form-control{
  appearance:none !important;-webkit-appearance:none !important;padding-right:24px !important;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-4) 50%),linear-gradient(135deg,var(--ink-4) 50%,transparent 50%) !important;
  background-position:calc(100% - 13px) calc(50% + 1px),calc(100% - 8px) calc(50% + 1px) !important;
  background-size:5px 5px,5px 5px !important;background-repeat:no-repeat !important;cursor:pointer !important;
}
body.monad-page form.frm-fluent-form input:-webkit-autofill,
body.monad-page form.frm-fluent-form input:-webkit-autofill:hover,
body.monad-page form.frm-fluent-form input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink) !important;-webkit-box-shadow:0 0 0 60px var(--linen) inset !important;
}
body.monad-page form.frm-fluent-form .ff-el-form-control-container > .ff-el-input--label label{
  font-size:10px !important;letter-spacing:.14em !important;color:var(--ink-4) !important;
}

/* --- checkboxes and radios (consent tick, the buying / selling field) --- */
body.monad-page form.frm-fluent-form .ff-el-form-check{display:flex !important;align-items:flex-start !important;gap:11px !important;margin:0 0 11px !important}
body.monad-page form.frm-fluent-form .ff-el-form-check:last-child{margin-bottom:0 !important}
body.monad-page form.frm-fluent-form .ff-el-form-check input[type=checkbox],
body.monad-page form.frm-fluent-form .ff-el-form-check input[type=radio]{
  margin:4px 0 0 !important;accent-color:var(--dawn) !important;flex:0 0 auto !important;width:auto !important;
}
body.monad-page form.frm-fluent-form .ff-el-form-check-label{
  font-family:var(--body) !important;font-size:.9rem !important;line-height:1.55 !important;letter-spacing:0 !important;
  text-transform:none !important;color:var(--ink-2) !important;margin:0 !important;font-weight:400 !important;
}
body.monad-page form.frm-fluent-form .ff-el-form-check-label a{color:var(--dawn) !important;text-decoration:underline !important;text-underline-offset:2px !important}
body.monad-page form.frm-fluent-form .ff-el-turnstile{margin:0 0 4px !important}

/* --- submit --- */
body.monad-page form.frm-fluent-form .ff-el-group.ff-text-left,
body.monad-page form.frm-fluent-form .ff_submit_btn_wrapper{margin:.6em 0 0 !important;padding:0 !important}
body.monad-page form.frm-fluent-form .ff-btn-submit,
body.monad-page form.frm-fluent-form button.ff-btn{
  font-family:var(--mark) !important;font-size:12px !important;font-weight:500 !important;
  letter-spacing:.18em !important;text-transform:uppercase !important;padding:16px 34px !important;
  background:var(--ink) !important;background-color:var(--ink) !important;color:var(--paper) !important;
  border:1px solid var(--ink) !important;border-radius:0 !important;box-shadow:none !important;
  width:auto !important;cursor:pointer !important;transition:background-color .35s ease,color .35s ease !important;
}
body.monad-page form.frm-fluent-form .ff-btn-submit:hover:not([disabled]),
body.monad-page form.frm-fluent-form .ff-btn-submit:focus-visible{
  background:transparent !important;background-color:transparent !important;color:var(--ink) !important;opacity:1 !important;
}
body.monad-page form.frm-fluent-form .ff-btn-submit[disabled]{opacity:.55 !important;cursor:default !important}
body.monad-page form.frm-fluent-form .ff-loading{border-top-color:var(--dawn) !important}

/* --- validation --- */
body.monad-page form.frm-fluent-form .ff-el-is-error .ff-el-form-control{border-bottom-color:var(--bronze) !important}
body.monad-page form.frm-fluent-form .text-danger,
body.monad-page form.frm-fluent-form .error{
  font-family:var(--mark) !important;font-size:10.5px !important;letter-spacing:.1em !important;
  text-transform:uppercase !important;color:var(--bronze) !important;margin-top:7px !important;display:block !important;
}
body.monad-page .ff-errors-in-stack,
body.monad-page .ff_form_instance .error-clear{
  border:1px solid var(--bronze) !important;background:rgba(138,92,44,.07) !important;border-radius:0 !important;
  padding:14px 16px !important;color:var(--bronze) !important;font-size:.88rem !important;
}

/* --- the inline confirmation monad_form_event() listens for.
   Restyle freely; never rename or remove it. --- */
body.monad-page .ff-message-success{
  background:var(--white) !important;border:1px solid var(--hair) !important;border-left:3px solid var(--dawn) !important;
  border-radius:0 !important;box-shadow:none !important;padding:26px 28px !important;margin:1.2em 0 0 !important;
  color:var(--ink-2) !important;font-family:var(--body) !important;font-size:1rem !important;line-height:1.66 !important;
}
body.monad-page .ff-message-success p{margin:0 !important}
body.monad-page .ff-message-success p + p{margin-top:.8em !important}

/* --- "Or reach us directly" --- */
.contact-card{border-top:1px solid var(--hair);padding-top:26px;margin-top:1.4em;display:grid;gap:.9em}
.contact-card .eyebrow{font-size:11px;letter-spacing:.18em;color:var(--ink-4)}
.contact-card address{font-style:normal;display:grid;gap:.5em}
.contact-card address b{font-weight:700;color:var(--ink);font-size:1.02rem}
.contact-card a{
  color:var(--ink);font-weight:500;justify-self:start;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(15,42,63,.32);transition:text-decoration-color .3s ease;
}
.contact-card a:hover,.contact-card a:focus-visible{text-decoration-color:var(--ink)}
.contact-card a[href^="tel:"]{font-size:1.12rem;font-weight:700;letter-spacing:.01em}
.contact-agent{color:var(--ink-2);font-size:.95rem}
.contact-office{color:var(--ink-4);font-size:.92rem}

/* ============================================================
   13. OPTIMA EXPRESS IDX — THEMING ONLY
   Never set display, float, position, width, height, aspect-
   ratio or grid on plugin markup: the feed ships its own
   responsive grid, and layout overrides dismantle it. Type,
   colour and spacing only, so a plugin update that renames
   classes can make the feed look less on-brand, never broken.
   ============================================================ */
.idx-feed{margin-top:clamp(30px,3.6vw,52px);font-family:var(--body);color:var(--ink-2)}
.idx-feed *{border-radius:0 !important}
.idx-feed [class*="price"],
.idx-feed [class*="Price"]{font-family:var(--display);font-weight:500;letter-spacing:-.005em;color:var(--ink)}
.idx-feed [class*="status"],
.idx-feed [class*="badge"],
.idx-feed [class*="mls"],
.idx-feed [class*="courtesy"],
.idx-feed [class*="disclaimer"]{font-family:var(--mark);letter-spacing:.08em}
.idx-feed a{color:var(--ink)}
.idx-feed a:hover{color:var(--dawn)}
.idx-feed button,
.idx-feed .btn,
.idx-feed input[type=submit],
.idx-feed [class*="button"]{
  font-family:var(--mark);letter-spacing:.12em;text-transform:uppercase;
  background-color:var(--ink);border-color:var(--ink);color:var(--paper);
}
/* monad_idx_limit_cards() tags the map container with this one class. */
.idx-feed .monad-idx-map{margin-top:clamp(26px,3vw,40px)}
/* With the teaser capped, the plugin's "1 of 3" describes cards the
   visitor cannot see, so its pagination is hidden in that state only. */
.idx-feed.is-capped [class*="pagination"],
.idx-feed.is-capped [class*="page-number"],
.idx-feed.is-capped [class*="result-count"]{display:none !important}
.idx-viewall{margin:clamp(26px,3vw,40px) 0 0;text-align:center}

.idx-placeholder{
  border:1px solid var(--hair);background:var(--paper);
  padding:clamp(34px,4.4vw,64px);display:grid;gap:1em;justify-items:start;
  margin-top:clamp(30px,3.6vw,52px);
}
.idx-placeholder-lede{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:500;line-height:1.16;margin:0;max-width:28ch}
.idx-placeholder-body{margin:0;color:var(--ink-2);max-width:56ch}
.idx-placeholder .btn{margin-top:.5em}
.idx-placeholder-admin{
  margin:1.2em 0 0;padding:14px 16px;border:1px dashed var(--bronze);
  background:rgba(138,92,44,.07);font-size:.85rem;color:var(--ink-2);max-width:66ch;
}
.idx-placeholder-admin code{font-family:var(--mark);font-size:.88em}
.alt-path{
  margin-top:clamp(34px,4vw,58px);padding-top:clamp(26px,3vw,40px);border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
}
.alt-path p{margin:0;color:var(--ink-2);max-width:56ch}

/* ============================================================
   14. FOOTER
   ============================================================ */
.foot{background:var(--ink);color:rgba(255,255,255,.72);padding-block:clamp(84px,6.5vw,120px) 56px}
.foot-top{
  display:flex;flex-wrap:wrap;gap:34px;align-items:flex-start;justify-content:space-between;
  padding-bottom:clamp(30px,3.4vw,46px);
}
.foot-id{min-width:0}
.foot-mark{
  font-family:var(--display);font-size:28px;font-weight:500;line-height:1.05;color:#FFFFFF;
  margin:0 0 .7em;display:flex;align-items:baseline;gap:.5em;flex-wrap:wrap;
}
.foot-mark em{font-family:var(--mark);font-style:normal;font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.foot-loc,.foot-broker{
  font-family:var(--mark);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.64);margin:0 0 .55em;line-height:1.7;
}
.foot-broker{margin-bottom:12px}
.foot .logos{display:flex;align-items:center;gap:26px;flex-shrink:0}
.foot .lg-tlt{width:auto;height:46px;max-width:420px;opacity:1;object-fit:contain}
.foot .lg-agency{width:auto;height:46px;max-width:120px;opacity:1;object-fit:contain}
.legal{font-size:13px;line-height:1.65;color:rgba(255,255,255,.74)}
.legal strong{color:#FFFFFF;font-weight:600}
.legal p{margin:0 0 18px}
.legal p:last-child{margin-bottom:clamp(24px,3vw,38px)}
.foot-btm{
  padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  font-family:var(--mark);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.64);
}
.foot-legal-links{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.foot-legal-links a{
  color:rgba(255,255,255,.72);border-bottom:1px solid rgba(255,255,255,.34);padding-bottom:2px;
  transition:color .3s ease,border-color .3s ease;
}
.foot-legal-links a:hover,.foot-legal-links a:focus-visible{color:#FFFFFF;border-bottom-color:#FFFFFF}
.sep{opacity:.4}
.eho{display:inline-flex;align-items:center;gap:7px}
.eho svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
/* REALTOR mark, matching the fix already shipped on venetianislandsmiami.com.
   A naive inline-flex + align-items:center centers the glyph's BOX against
   the row, not the glyph's INK — in IBM Plex Mono the (R) sits high within
   its own em-box, so scaling that box up scales the empty space above it
   too, and centering leaves the ink floating near the top instead of
   centered. vertical-align:middle instead aligns the box to the baseline
   plus half the PARENT's x-height, a much closer proxy for "centered
   against the surrounding capital letters." The small top offset closes
   the remaining gap IBM Plex Mono's specific metrics leave even with
   middle alignment. */
.mark-item{display:inline}
.mark-item .reg{font-size:1.45em;font-weight:400;vertical-align:middle;position:relative;top:.05em}
.foot-copy{white-space:nowrap}
@media(max-width:820px){
  .foot-top{flex-direction:column;gap:28px}
  .foot .lg-tlt{height:28px}
  .foot .lg-agency{height:28px}
  .foot-btm{flex-direction:column;align-items:flex-start;gap:14px}
  .foot-copy{white-space:normal}
}

/* ============================================================
   15. PRIVACY MODAL
   Renders the Privacy Policy page's own content, which uses the
   .pp-* classes from privacy.css. That file does not load here,
   so the rules the content needs are restated under .pm-body.
   ============================================================ */
dialog.pm{padding:0;border:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%}
dialog.pm::backdrop{background:rgba(8,24,36,.72);backdrop-filter:blur(2px)}
dialog.pm .pm-box{
  width:min(760px,calc(100% - 32px));max-height:min(84vh,900px);margin:auto;
  background:var(--paper);border:1px solid var(--hair);display:flex;flex-direction:column;
}
dialog.pm[open]{display:flex}
@media(prefers-reduced-motion:no-preference){
  dialog.pm[open] .pm-box{animation:pm-rise .34s cubic-bezier(.2,.7,.2,1)}
  dialog.pm[open]::backdrop{animation:pm-fade .34s ease}
}
@keyframes pm-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes pm-fade{from{opacity:0}to{opacity:1}}
dialog.pm .pm-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 26px;border-bottom:1px solid var(--hair-soft);flex:0 0 auto;
}
dialog.pm .pm-title{font-family:var(--display);font-size:1.6rem;font-weight:500;margin:0}
dialog.pm .pm-close{
  width:38px;height:38px;border:1px solid transparent;background:transparent;
  font-size:26px;line-height:1;color:var(--ink-4);cursor:pointer;transition:color .3s ease,border-color .3s ease;
}
dialog.pm .pm-close:hover{color:var(--ink);border-color:var(--hair)}
dialog.pm .pm-body{padding:24px 26px;overflow-y:auto;flex:1 1 auto;overscroll-behavior:contain}
dialog.pm .pm-body:focus-visible{outline:2px solid var(--dawn);outline-offset:-4px}
dialog.pm .pm-body p{margin:0 0 1.05em;font-size:.96rem;line-height:1.68;color:var(--ink-2)}
dialog.pm .pm-body ul{margin:0 0 1.3em;padding:0;list-style:none;display:grid;gap:11px}
dialog.pm .pm-body li{position:relative;padding-left:22px;font-size:.94rem;line-height:1.6;color:var(--ink-2)}
dialog.pm .pm-body li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:1px;background:var(--dawn)}
dialog.pm .pm-body strong{color:var(--ink);font-weight:600}
dialog.pm .pm-body a{color:var(--dawn);text-decoration:underline;text-underline-offset:2px}
dialog.pm .pm-body a:hover{color:var(--ink)}
dialog.pm .pm-meta{font-family:var(--mark);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);margin:0 0 1.6em}
dialog.pm .pm-body .pp-section{margin:0 0 2.1em}
dialog.pm .pm-body .pp-section:last-child{margin-bottom:0}
dialog.pm .pm-body h2{
  font-family:var(--display);font-weight:500;font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.2;color:var(--ink);
  margin:2em 0 .72em;display:flex;align-items:baseline;gap:.6em;
}
dialog.pm .pm-body .pp-section:first-child h2,
dialog.pm .pm-body h2:first-child{margin-top:0}
dialog.pm .pm-body .pp-num{font-family:var(--mark);font-size:11px;font-weight:500;letter-spacing:.18em;color:var(--dawn);flex:0 0 auto}
dialog.pm .pm-body .pp-card,
dialog.pm .pm-body .pp-callout{background:var(--linen);border:1px solid var(--hair-soft);padding:18px 20px;margin:1.2em 0 0}
dialog.pm .pm-body .pp-card p{margin:0 0 .35em;font-size:.93rem}
dialog.pm .pm-body .pp-card p:last-child{margin-bottom:0}
dialog.pm .pm-body .pp-card-name{color:var(--ink);font-weight:600}
dialog.pm .pm-foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 26px;border-top:1px solid var(--hair-soft);background:var(--linen);flex:0 0 auto;
}
dialog.pm .pm-permalink{
  font-family:var(--mark);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-4);border-bottom:1px solid var(--hair);padding-bottom:2px;
}
dialog.pm .pm-permalink:hover{color:var(--ink);border-bottom-color:var(--ink)}
@media(max-width:560px){
  dialog.pm .pm-box{width:100%;max-height:100%;height:100%;border:0}
  dialog.pm .pm-foot{justify-content:center}
}

/* ============================================================
   16. IMAGES, MOTION, PRINT
   Softness on high-DPI screens is fixed in the markup (srcset
   and sizes), never with image-rendering hacks, which only
   sharpen resampling artefacts on photographs.
   ============================================================ */
body.monad-page .hero-img img,
body.monad-page .inq-media img{width:100%;height:100%;min-height:1px}
body.monad-page .lg-tlt,
body.monad-page .lg-agency{image-rendering:auto}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rv{opacity:1;transform:none}
  .hero-scroll{display:none}
}
@media print{
  .hdr,.mobile-nav,.hero-scroll,.menu-btn,dialog,.alt-path,.cta-strip,.fp-controls,.intent{display:none !important}
  body.monad-page{background:#fff;color:#000;font-size:11pt}
  .hero{min-height:auto;padding-top:0}
  .hero::after{display:none}
  .rv{opacity:1;transform:none}
  .sec{padding-block:18pt;break-inside:avoid}
  .foot{background:#fff;color:#000}
}

/* ============================================================
   17. BUTTON CONTRAST ENFORCEMENT
   Some solid navy buttons (header "Enquire", the Section 3 IDX
   placeholder CTA, the Section 5 owners CTA) were rendering with
   no visible text: the base .btn-solid rule at the top of this
   file sets color correctly, but something later in the cascade
   (a plugin or parent-theme stylesheet loaded after this one) was
   winning on specificity for those particular buttons. Rather
   than chase which one, every solid/filled button's text colour
   is pinned here with !important, at the end of the file, so it
   always wins.

   Two contexts are deliberately inverted (dark text on a light
   button) and are restated here so this block cannot flip them:
     .hero-cta .btn-solid   the button over the hero photo
     .cta-strip .btn-solid  the button inside the dark CTA strip
   ============================================================ */
.btn-solid,
.nav-cta .btn-solid,
.mobile-nav a.btn-solid,
.owners-cta .btn-solid,
.idx-placeholder .btn-solid,
.alt-path .btn-solid,
.tower-link .btn-solid,
dialog.pm .btn-solid,
dialog.lb .btn-solid{
  background-color:var(--ink) !important;
  border-color:var(--ink) !important;
  color:#FFFFFF !important;
}
.btn-solid:hover,
.btn-solid:focus-visible,
.nav-cta .btn-solid:hover,
.nav-cta .btn-solid:focus-visible,
.mobile-nav a.btn-solid:hover,
.mobile-nav a.btn-solid:focus-visible,
.owners-cta .btn-solid:hover,
.owners-cta .btn-solid:focus-visible,
.idx-placeholder .btn-solid:hover,
.idx-placeholder .btn-solid:focus-visible,
.alt-path .btn-solid:hover,
.alt-path .btn-solid:focus-visible,
.tower-link .btn-solid:hover,
.tower-link .btn-solid:focus-visible,
dialog.pm .btn-solid:hover,
dialog.pm .btn-solid:focus-visible,
dialog.lb .btn-solid:hover,
dialog.lb .btn-solid:focus-visible{
  background-color:transparent !important;
  border-color:var(--ink) !important;
  color:var(--ink) !important;
}

/* Restated so the block above cannot invert these two on-photo /
   on-dark contexts, which intentionally use a light button. */
.hero-cta .btn-solid{
  background-color:var(--paper) !important;
  border-color:var(--paper) !important;
  color:var(--ink) !important;
}
.hero-cta .btn-solid:hover,
.hero-cta .btn-solid:focus-visible{
  background-color:transparent !important;
  border-color:var(--paper) !important;
  color:var(--paper) !important;
}
.cta-strip .btn-solid{
  background-color:var(--paper) !important;
  border-color:var(--paper) !important;
  color:var(--ink) !important;
}
.cta-strip .btn-solid:hover,
.cta-strip .btn-solid:focus-visible{
  background-color:transparent !important;
  border-color:var(--paper) !important;
  color:var(--paper) !important;
}

/* The outline .btn on the dark FAQ, rail and footer backgrounds:
   colour is inherited correctly, but pinned here too since those
   are also filled-looking (navy page, light text) contexts. */
#faq .btn,
.rail .btn,
.foot .btn{
  border-color:rgba(255,255,255,.55) !important;
  color:#FFFFFF !important;
}
#faq .btn:hover,#faq .btn:focus-visible,
.rail .btn:hover,.rail .btn:focus-visible,
.foot .btn:hover,.foot .btn:focus-visible{
  background-color:#FFFFFF !important;
  color:var(--ink) !important;
  border-color:#FFFFFF !important;
}

/* Intent toggle and other solid-when-pressed controls: same
   guarantee, using the pressed/selected state as the hook. */
.intent-btn[aria-pressed="true"],
.fp-tower-btn[aria-selected="true"],
.lb-sheets button[aria-pressed="true"]{
  background-color:var(--ink) !important;
  color:#FFFFFF !important;
}
.fp-tower-btn[aria-selected="true"] .fp-tower-count{color:rgba(255,255,255,.7) !important}

/* Fluent Forms submit button: restated at max specificity so a
   plugin update touching its own button colour cannot regress it. */
body.monad-page form.frm-fluent-form .ff-btn-submit,
body.monad-page form.frm-fluent-form button.ff-btn{
  background-color:var(--ink) !important;
  border-color:var(--ink) !important;
  color:#FFFFFF !important;
}
body.monad-page form.frm-fluent-form .ff-btn-submit:hover:not([disabled]),
body.monad-page form.frm-fluent-form .ff-btn-submit:focus-visible{
  background-color:transparent !important;
  color:var(--ink) !important;
}

/* Optima Express' own buttons, inside the live feed. */
.idx-feed button,
.idx-feed .btn,
.idx-feed input[type=submit],
.idx-feed [class*="button"]{
  background-color:var(--ink) !important;
  border-color:var(--ink) !important;
  color:#FFFFFF !important;
}

/* ============================================================
   18. LINK UNDERLINE RESET
   The base rule (section 1) already sets text-decoration:none on
   every link. Some visitors still see underlines anyway: a browser
   "always underline links" accessibility preference, or certain
   assistive-technology extensions, are applied as a user-preference
   stylesheet, which can outrank a plain author rule of equal
   specificity. Restated here with !important — which a mere
   preference stylesheet cannot override — so links render as
   designed regardless of that setting. The nav-links hover
   indicator is a coloured bar on ::after, not text-decoration, so
   it is untouched by this and still animates in on hover/focus.
   ============================================================ */
body.monad-page a,
body.monad-page a:link,
body.monad-page a:visited,
body.monad-page a:hover,
body.monad-page a:focus,
body.monad-page a:active{
  text-decoration:none !important;
  text-decoration-line:none !important;
}
/* The few links that are SUPPOSED to show an underline (privacy
   modal body copy, the contact card's email/phone) set their own
   text-decoration after this point in the cascade, so this reset
   does not fight them: */
dialog.pm .pm-body a,
.contact-card a{
  text-decoration:underline !important;
}