/* Premium facility template (perfected on United Flex Melissa, rolled out to every park).
   Sources: Mart's Facilities Page I PSD + notes (2026-09-27), Rick's Sunday call (Fund 6 hero, max 2 CTAs,
   shorter subpage hero), Fund VI motion grammar (Lenis lerp .1, quint-out eases, 45px/0.8s once-only reveals).
   Unlayered and loaded after site-consistency.css on every facility page. Sharp corners throughout. */

body[data-page-family=facility]{
  --mx-navy:#001523;--mx-deep:#000c13;--mx-panel:#0b2033;--mx-card:#0e2438;--mx-orange:#ff7d01;--mx-orange-ink:#a64a00;
  --mx-paper:#eceeed;--mx-white:#fffdfc;--mx-rule:#c5cdd0;--mx-muted:#4a5a62;
  --mx-ease:cubic-bezier(.22,1,.36,1);--mx-ease-io:cubic-bezier(.65,0,.35,1);--mx-ease-arrow:cubic-bezier(.25,.46,.45,.94);
  --mx-display:var(--uf-display,UF,Helvetica,Arial,sans-serif);--mx-body:var(--uf-body,Helvetica,Arial,sans-serif);
  --mx-pad:clamp(80px,9vw,124px)
}
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
body[data-page-family=facility] main .wrap{max-width:1256px}

/* shared chrome, quieter on the template page */
body[data-page-family=facility] .uf-header{position:sticky;top:0;transition:transform .55s var(--mx-ease),background-color .4s ease;will-change:transform}
body[data-page-family=facility] .uf-header.mx-hdr-scrolled{background:rgba(1,20,30,.9);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%)}
body[data-page-family=facility] .uf-header.mx-hdr-hide{transform:translateY(-100%)}
body[data-page-family=facility] .uf-header:focus-within{transform:none}
body[data-page-family=facility] .uf-reference{padding-block:0}
body[data-page-family=facility] .uf-reference .uf-reference-note{padding-block:9px}

/* type: display / title / body, three styles per section (Mart, New amends p4) */
body[data-page-family=facility] .mxh2{font:400 clamp(30px,3.05vw,44px)/1.06 var(--mx-display);text-transform:uppercase;letter-spacing:.005em;color:var(--mx-navy);margin:0;max-width:none;text-wrap:balance}
body[data-page-family=facility] .mxh2 .o,body[data-page-family=facility] .mxh3 .o,body[data-page-family=facility] .mxh .mxh-name .o{color:var(--mx-orange)}
body[data-page-family=facility] :is(.mxgal,.mxarea,.mxguide,.mxfaq) .mxh2 .o{color:#d96400}
body[data-page-family=facility] .mx-center{text-align:center;margin-inline:auto}
body[data-page-family=facility] .mxkicker{display:flex;align-items:center;gap:14px;margin:0 0 18px;font:400 13px/1 var(--mx-display);letter-spacing:.18em;text-transform:uppercase;color:var(--mx-orange-ink)}
body[data-page-family=facility] .mxkicker::before{content:"";width:38px;height:2px;background:currentColor}
body[data-page-family=facility] .mxnote{margin:26px 0 0;font:400 14px/1.55 var(--mx-body);color:rgba(255,255,255,.62);text-align:center}
body[data-page-family=facility] .mxnote-dark{color:rgba(255,255,255,.55);margin-top:22px}
body[data-page-family=facility] main :is(p,li,address){text-wrap:pretty}

/* buttons: sharp, display face, navy/white fill wipe on hover (Fund VI .btn::before), press confirm */
/* UF-18 (2026-10-03 audit): font, case, height, radius, the wipe-fill and focus/active motion are the
   shared button system now (theme.css); this file keeps only the facility family's own fill colors. */
body[data-page-family=facility] .mxbtn-light{background:var(--mx-white);border-color:var(--mx-white);color:var(--mx-deep)}
body[data-page-family=facility] .mxbtn-light::before{background:var(--mx-orange)}
body[data-page-family=facility] .mxbtn-ghost{background:transparent;border-color:rgba(255,255,255,.45);color:var(--mx-white)}
body[data-page-family=facility] .mxbtn-block{display:flex;width:100%}
body[data-page-family=facility] main :is(a,button,[tabindex]):focus-visible{outline:2px solid var(--mx-orange);outline-offset:3px}
body[data-page-family=facility] :is(.mxchips a,.mx-acc .q,.mxgal .mtabs button):focus-visible{outline:2px solid var(--mx-navy);outline-offset:3px}
body[data-page-family=facility] main section[tabindex='-1']:focus{outline:none}

/* ---------- hero (Fund 6 pattern) ---------- */
body[data-page-family=facility] .mxh{position:relative;isolation:isolate;overflow:hidden;display:flex;background:var(--mx-deep);color:var(--mx-white);min-height:clamp(520px,calc(100svh - 300px),680px)}
body[data-page-family=facility] .mxh-media{position:absolute;inset:0;z-index:-3;overflow:hidden}
body[data-page-family=facility] .mxh-media :is(img,video){position:absolute;left:0;top:-6%;width:100%;height:112%;max-width:none;object-fit:cover;object-position:64% 62%;transform-origin:64% 58%}
/* The hero film (Rick, 2026-10-07: "replace the static image above the fold in facility page hero with one of these")
   sits over the photo, which stays the poster and the fallback: invisible until it plays (src/facility-premium.js
   heroFilm adds .is-playing), then it fades in. The clips are framed by the pilot, so they are centred. It takes no
   part in the photo's 1.1 to 1 settle: arriving after the page has loaded, at its own size, its box is never larger
   than the photo's first paint, so the photo stays the page's LCP element (Rick audit C09-28). */
body[data-page-family=facility] .mxh-media video{object-position:50% 50%;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
body[data-page-family=facility] .mxh-media video.is-playing{opacity:1}
body[data-page-family=facility] .mxh::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(105deg,rgba(0,21,35,.97) 0%,rgba(0,21,35,.92) 30%,rgba(0,21,35,.7) 50%,rgba(0,21,35,.26) 74%,rgba(0,21,35,.12) 100%),linear-gradient(0deg,rgba(0,12,19,.6) 0%,rgba(0,12,19,0) 38%)}
body[data-page-family=facility] .mxh-x{position:absolute;z-index:-1;right:clamp(28px,14.5vw,220px);top:45%;height:min(72%,520px);width:auto;aspect-ratio:1;transform:translateY(-50%);overflow:visible;pointer-events:none}
body[data-page-family=facility] .mxh-x path{fill:none;stroke:rgba(255,255,255,.8);stroke-width:.3;stroke-linecap:square;stroke-dasharray:100 100;stroke-dashoffset:0}
/* Seam sweep (2026-10-12): on a short hero (1280 to 1536px screens) the X's top-right arm started under the Tenant
   login link, which ends 56px down the hero, and elsewhere cleared it by 5px. Where the link is shown, the X now
   starts at least 76px down (20px under it); heroes without the link keep the X centred at 45%. */
body[data-page-family=facility] .mxh:has(.mxh-tenant) .mxh-x{top:max(45%,calc(min(72%,520px) / 2 + 76px))}
body[data-page-family=facility] .mxh-inner{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;gap:48px;padding-block:28px clamp(56px,8vh,92px)}
body[data-page-family=facility] .mxh-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:400 13px/1.4 var(--mx-body);color:rgba(255,255,255,.62)}
body[data-page-family=facility] .mxh-crumb a{color:rgba(255,255,255,.82);text-decoration:none;transition:color .3s ease}
body[data-page-family=facility] .mxh-crumb a:hover{color:var(--mx-orange)}
body[data-page-family=facility] .mxh-crumb b{font-weight:700;color:var(--mx-white)}
body[data-page-family=facility] .mxh-copy{max-width:800px}
body[data-page-family=facility] .mxh-kicker{display:flex;align-items:center;gap:14px;margin:0 0 20px;font:400 13px/1.35 var(--mx-display);letter-spacing:.2em;text-transform:uppercase;color:var(--mx-orange)}
body[data-page-family=facility] .mxh-kicker::before{content:"";width:40px;height:2px;background:var(--mx-orange)}
body[data-page-family=facility] .mxh .mxh-name{margin:0 0 24px;font:400 clamp(40px,4.7vw,68px)/1 var(--mx-display);letter-spacing:0;text-transform:uppercase;color:var(--mx-white);max-width:none}
body[data-page-family=facility] .mxh .mxh-name .o{display:block}
/* UF-20 (2026-10-03 audit): long one-word park names ("Westmoreland", "Somersworth") are wider than the
   template's heading columns at the shared size, and the shared overflow-wrap:normal above only stops the
   mid-word split - it does not make the word fit. Each heading keeps the template size and shrinks only
   when its own column is narrower than the whole name (container query units); moved here from
   content/styles/{westmoreland,somersworth}.css (both files proposed this move; !important is gone with
   them, since this unlayered rule already beats their @layer source rule without it). */
/* Mart's Facilities Page I: the town guide and FAQ titles are about 13% smaller than the section titles (his notes:
   'Adjusted the font sizing in this section'). Park overrides below stay at or under this size. */
body[data-page-family=facility] :is(.mxguide,.mxfaq) .mxh2{font-size:clamp(26px,2.65vw,38px)}
body[data-page-family=facility] :is(.mxh-copy,.mxguide-lhs,.mxlead-copy,.mxfaq-head,.mxfaq-cols,#lead .mxform){container-type:inline-size}
body[data-page=westmoreland][data-page-family=facility] .mxh .mxh-name{font-size:min(clamp(40px,4.7vw,68px),calc(100cqi / 12.9))}
body[data-page=westmoreland][data-page-family=facility] .mxguide-lhs>.mxh2{font-size:min(clamp(26px,2.65vw,38px),calc(100cqi / 13.4));max-width:max(12ch,13.4em)}
body[data-page=westmoreland][data-page-family=facility] .mxlead-copy>.mxh2{font-size:min(clamp(30px,3.05vw,44px),calc(100cqi / 13.4));max-width:max(14ch,13.4em)}
body[data-page=westmoreland][data-page-family=facility] .mxfaq-head>.mxh2{font-size:min(clamp(26px,2.65vw,38px),calc(100cqi / 13.4));max-width:max(10ch,13.4em)}
body[data-page=westmoreland][data-page-family=facility] #lead .mxform h3{font-size:min(22px,calc(100cqi / 13))}
@media (max-width:980px){
  body[data-page=westmoreland][data-page-family=facility] :is(.mxguide-lhs,.mxlead-copy,.mxfaq-head)>.mxh2{max-width:max(16ch,13.4em)}
}
@media (max-width:760px){
  body[data-page=westmoreland][data-page-family=facility] .mxh .mxh-name{font-size:min(clamp(38px,11vw,52px),calc(100cqi / 12.9))}
  body[data-page=westmoreland][data-page-family=facility] :is(.mxguide-lhs,.mxfaq-head)>.mxh2{font-size:min(clamp(26px,7.6vw,32px),calc(100cqi / 13.4))}
  body[data-page=westmoreland][data-page-family=facility] .mxlead-copy>.mxh2{font-size:min(clamp(28px,8vw,34px),calc(100cqi / 13.4))}
}
body[data-page=somersworth][data-page-family=facility] :is(.mxh .mxh-name,.mxguide .mxh2,.mxlead .mxh2,.mxfaq .mxh2){overflow-wrap:normal}
body[data-page=somersworth][data-page-family=facility] .mxh .mxh-name{font-size:min(clamp(40px,4.7vw,68px),calc(100cqi / 12.2))}
/* the guide's unbreakable run is "Somersworth," with its comma */
body[data-page=somersworth][data-page-family=facility] .mxlead .mxh2{font-size:min(clamp(30px,3.05vw,44px),calc(100cqi / 12.6))}
body[data-page=somersworth][data-page-family=facility] .mxguide .mxh2{font-size:min(clamp(26px,2.65vw,38px),calc(100cqi / 12.6))}
/* 12ch is 11.4em in Eurostile Extended Black (its 0 is .95em wide), narrower than that run: the cap follows the run, as on Westmoreland */
body[data-page=somersworth][data-page-family=facility] .mxguide .mxh2{max-width:max(12ch,12.6em)}
/* FAQ: the heading is the grid item itself, so its column is (grid width - gap) x .78fr / 2fr */
body[data-page=somersworth][data-page-family=facility] .mxfaq .mxh2{max-width:13ch;font-size:min(clamp(26px,2.65vw,38px),calc((100cqi - clamp(44px,6.5vw,96px)) * .39 / 12.3))}
@media (max-width:980px){
  body[data-page=somersworth][data-page-family=facility] .mxfaq .mxh2{font-size:min(clamp(26px,2.65vw,38px),calc(100cqi / 12.3))}
}
@media (max-width:760px){
  body[data-page=somersworth][data-page-family=facility] .mxh .mxh-name{font-size:min(clamp(38px,11vw,52px),calc(100cqi / 12.2))}
  body[data-page=somersworth][data-page-family=facility] .mxguide .mxh2{font-size:min(clamp(26px,7.6vw,32px),calc(100cqi / 12.6))}
  body[data-page=somersworth][data-page-family=facility] .mxfaq .mxh2{font-size:min(clamp(26px,7.6vw,32px),calc(100cqi / 12.3))}
  body[data-page=somersworth][data-page-family=facility] .mxlead .mxh2{font-size:min(clamp(28px,8vw,34px),calc(100cqi / 12.6))}
}
body[data-page-family=facility] .mxh-sub{margin:0 0 34px;max-width:34em;font:400 18px/1.55 var(--mx-body);color:rgba(255,255,255,.84)}
body[data-page-family=facility] .mxh-sub b{display:block;margin-bottom:8px;font-weight:700;color:var(--mx-white);letter-spacing:.01em}
body[data-page-family=facility] .mxh-btns{display:flex;flex-wrap:wrap;gap:16px}
body[data-page-family=facility] .mxh-btns .mxbtn{min-width:210px}

/* ---------- features band (PSD orange) ---------- */
body[data-page-family=facility] .mxfeat{background:var(--mx-orange);color:var(--mx-deep);padding:0}
body[data-page-family=facility] .mxfeat-grid{list-style:none;margin:0;padding:18px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
body[data-page-family=facility] .mxfeat-grid li{display:flex;align-items:center;gap:16px;min-height:74px;padding:6px 28px;border-left:3px solid rgba(0,21,35,.16)}
body[data-page-family=facility] .mxfeat-grid li:nth-child(4n+1){border-left:0;padding-left:0}
body[data-page-family=facility] .mxfeat-grid svg{flex:0 0 30px;width:30px;height:30px;fill:none;stroke:var(--mx-navy);stroke-width:1.9;stroke-linecap:square;stroke-linejoin:miter}
body[data-page-family=facility] .mxfeat-grid b{font:700 17px/1.3 var(--mx-body);color:var(--mx-deep)}

/* ---------- available units ---------- */
body[data-page-family=facility] .mxunits{background:var(--mx-navy);color:var(--mx-white);padding:var(--mx-pad) 0 72px}
body[data-page-family=facility] .mxunits .mxh2{color:var(--mx-white);margin-bottom:18px}
body[data-page-family=facility] .mxunits-lede{margin:0 auto 46px;max-width:52ch;text-align:center;font:400 16px/1.55 var(--mx-body);color:rgba(255,255,255,.7)}
body[data-page-family=facility] .mxunits-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:40px}
body[data-page-family=facility] .mxunits .uf-table-scroll{overflow-x:auto;border:0;background:none;box-shadow:none;margin:0}
body[data-page-family=facility] .mxtable{width:100%;min-width:0;border-collapse:collapse;font:400 16px/1.4 var(--mx-body);color:rgba(255,255,255,.84);background:none}
body[data-page-family=facility] .mxtable thead th{padding:0 16px 16px;text-align:left;font:400 12px/1.25 var(--mx-display);letter-spacing:.16em;text-transform:uppercase;color:var(--mx-orange);border-bottom:2px solid rgba(255,255,255,.22);background:none}
body[data-page-family=facility] .mxtable :is(td,tbody th){padding:22px 16px;border-bottom:1px solid rgba(255,255,255,.1);background:none;text-align:left;vertical-align:middle}
body[data-page-family=facility] .mxtable :is(thead th,td,tbody th):first-child{padding-left:4px}
body[data-page-family=facility] .mxtable tbody th.bay{font:400 20px/1 var(--mx-display);color:var(--mx-white);letter-spacing:.04em;white-space:nowrap}
body[data-page-family=facility] .mxtable tbody tr{transition:background-color .35s ease}
body[data-page-family=facility] .mxtable tbody tr>*{transition:transform .5s var(--mx-ease)}
@media (hover:hover){
  body[data-page-family=facility] .mxtable tbody tr:hover{background:rgba(255,255,255,.035)}
  body[data-page-family=facility] .mxtable tbody tr:hover th.bay{transform:translateX(6px)}
}
body[data-page-family=facility] .mxtable .rate{font:600 15px/1.2 var(--mx-body);letter-spacing:0;color:var(--mx-orange)}
body[data-page-family=facility] .mxtag{display:inline-flex;align-items:center;min-height:34px;padding:0 16px;border:1px solid var(--mx-orange);background:var(--mx-orange);color:var(--mx-deep);
  font:400 12px/1 var(--mx-display);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background-color .35s ease,color .35s ease}
body[data-page-family=facility] a.mxtag:hover{background:transparent;color:var(--mx-orange)}
body[data-page-family=facility] .mxtag.is-leased{background:transparent;border-color:rgba(255,255,255,.32);color:rgba(255,255,255,.62)}

/* ---------- site plan + bay card ---------- */
body[data-page-family=facility] .mxplan{background:var(--mx-navy);color:var(--mx-white);padding:24px 0 var(--mx-pad)}
body[data-page-family=facility] .mxplan-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding:28px;background:var(--mx-panel);border:1px solid rgba(255,255,255,.08)}
body[data-page-family=facility] .mxplan-map{display:flex;flex-direction:column;min-width:0}
body[data-page-family=facility] .mxplan-title{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-bottom:22px}
body[data-page-family=facility] .mxh3{margin:0;font:400 clamp(20px,1.8vw,26px)/1.1 var(--mx-display);text-transform:uppercase;letter-spacing:.02em;color:var(--mx-white)}
body[data-page-family=facility] .mxflag{display:inline-flex;align-items:center;min-height:34px;padding:0 26px 0 16px;background:var(--mx-orange);color:var(--mx-deep);
  font:400 12px/1 var(--mx-display);letter-spacing:.14em;text-transform:uppercase;clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}
body[data-page-family=facility] .planbox{position:relative;flex:none;display:block;margin:0;background:#07182a;border:1px solid rgba(255,255,255,.06);overflow:hidden}
body[data-page-family=facility] .planbox img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}
body.uf-site[data-page-family=facility] #park-plan #siteplan-svg{position:absolute;inset:0;width:100%;height:100%;min-width:0;max-width:none;aspect-ratio:auto}
body[data-page-family=facility] .mxlgd{list-style:none;margin:16px 0 0;padding:14px 16px;display:flex;flex-wrap:wrap;gap:12px 28px;background:#06141f}
body[data-page-family=facility] .mxlgd li{display:flex;align-items:center;gap:10px;font:400 11px/1 var(--mx-display);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
body[data-page-family=facility] .mxlgd i{display:block;width:22px;height:12px}
body[data-page-family=facility] .mxlgd .k-leased{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.35)}
body[data-page-family=facility] .mxcard{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);background:var(--mx-card);border:1px solid rgba(255,255,255,.1);color:var(--mx-white)}
body[data-page-family=facility] .mxcard-ph{position:relative;min-height:260px;overflow:hidden;background:#06141f}
body[data-page-family=facility] .mxcard-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
body[data-page-family=facility] .mxcard-note{position:absolute;left:12px;bottom:12px;padding:6px 10px;background:rgba(0,12,19,.78);font:400 12px/1 var(--mx-display);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85)}
body[data-page-family=facility] .mxcard-bd{display:flex;flex-direction:column;gap:14px;padding:26px 28px 28px}
body[data-page-family=facility] .mxcard .sid{display:flex;align-items:center;justify-content:space-between;gap:12px}
body[data-page-family=facility] #sc-id{font:400 22px/1.1 var(--mx-display);text-transform:uppercase;letter-spacing:.03em;color:var(--mx-white)}
body[data-page-family=facility] .sc-st{display:inline-flex;align-items:center;gap:8px;font:400 12px/1 var(--mx-display);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8);white-space:nowrap}
body[data-page-family=facility] .sc-st::before{content:"";width:8px;height:8px;background:var(--mx-orange)}
body[data-page-family=facility] .sc-st[data-s=leased]::before{background:rgba(255,255,255,.45)}
body[data-page-family=facility] .sc-st[data-s=partial]::before{background:linear-gradient(90deg,var(--mx-orange) 50%,rgba(255,255,255,.45) 50%)}
body[data-page-family=facility] .sc-st[data-s=request]{white-space:normal;line-height:1.3}
body[data-page-family=facility] .sc-st[data-s=request]::before{flex-shrink:0;background:rgba(255,255,255,.6)}
body[data-page-family=facility] #sc-specs{margin:0;max-width:60ch;font:400 16px/1.55 var(--mx-body);color:rgba(255,255,255,.78);min-height:3.1em}
body[data-page-family=facility] .sc-feat{list-style:none;margin:0 0 6px;padding:0;display:grid;grid-template-columns:repeat(4,max-content);gap:9px 26px}
body[data-page-family=facility] .sc-feat li{position:relative;padding-left:15px;font:400 14px/1.35 var(--mx-body);color:rgba(255,255,255,.84)}
body[data-page-family=facility] .sc-feat li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;background:var(--mx-orange)}
body[data-page-family=facility] #sc-go{margin-top:6px;min-height:52px;width:auto;align-self:flex-start;display:inline-flex;padding:0 34px}
body.uf-site[data-page-family=facility] #scard #sc-go,body.uf-site[data-page-family=facility] #scard #sc-go:is(:visited,:hover,:focus-visible){background:var(--mx-orange);color:var(--mx-deep);border-color:var(--mx-orange)}

/* ---------- Melissa site plan: Mart's sitemap (Teams, 2026-09-30) ----------
   Melissa only, through .mxplan-melissa on section#park-plan (the other eight parks keep the schematic plan).
   No panel; a two-line title with the key on the right under a 2px rule that ends at the map's right edge;
   the map window is Mart's crop of his map (map px x 0..3982, y 262..1957), and #siteplan-svg uses the same
   viewBox so buildings.json coordinates apply directly. Buildings: navy = available, grey = leased; hover,
   keyboard focus and the shown building (.hot) turn the whole building orange. */
body[data-page-family=facility] .mxplan-melissa{padding-top:clamp(40px,4vw,56px)}
body[data-page-family=facility] .mxplan-melissa .mxplan-panel{gap:28px;padding:0;background:none;border:0}
body[data-page-family=facility] .mxplan-melissa .mxplan-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:22px clamp(32px,4.4vw,64px);margin-bottom:clamp(14px,1.1vw,16px)}
body[data-page-family=facility] .mxplan-melissa .mxplan-head .mxh2{flex:none;color:var(--mx-white);line-height:1.11;letter-spacing:.005em;white-space:nowrap}
body[data-page-family=facility] .mxplan-melissa .mxplan-head .mxh2>span{display:block}
body[data-page-family=facility] .mxplan-melissa .mxlgd{flex:1 1 auto;margin:0 0 9px;padding:22px 0 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;background:none;border-top:2px solid #2b5279}
body[data-page-family=facility] .mxplan-melissa .mxlgd li{gap:12px;font:400 12px/1 var(--mx-display);letter-spacing:0;color:#fff;white-space:nowrap}
body[data-page-family=facility] .mxplan-melissa .mxlgd i{flex:none;box-sizing:border-box;width:34px;height:14px}
/* key swatches use the colours sampled from Mart's comp, not the map fills: his white Overlay glow lifts the
   whole small swatch (navy #011F39 reads as #012E57, grey #B5B5B5 as about #E8E8E8). Overlay brightens the
   navy without greying it, so its edge glow is a lighter navy rather than white. */
body[data-page-family=facility] .mxplan-melissa .mxlgd .k-avail{background:#012e57;border:3px solid #073257;box-shadow:inset 0 0 4px #033a6c}
body[data-page-family=facility] .mxplan-melissa .mxlgd .k-lease{background:repeating-linear-gradient(45deg,#2a4d78 0 2.5px,#1d3b60 2.5px 8px);border:3px solid #3f6390;box-shadow:none}
body[data-page-family=facility] .mxplan-melissa .mxlgd .k-road{width:42px;height:17px;background:#193550}
body[data-page-family=facility] .mxplan-melissa .mxlgd .k-bound{width:42px;height:7px;background:#3c73a8}
body[data-page-family=facility] .mxplan-melissa .planbox{background:#011f39;border:0}
body[data-page-family=facility] .mxplan-pan-hint{display:none}
body[data-page-family=facility] .mxplan-select-label{display:block;margin-bottom:8px;font:600 14px/1.4 var(--mx-body);color:#fff}
body[data-page-family=facility] .mxplan-select{width:100%;min-height:44px;margin-bottom:20px;padding:10px 12px;border:1px solid rgba(255,255,255,.5);border-radius:0;background:#012e57;color:#fff;font:400 16px/1.4 var(--mx-body)}
body[data-page-family=facility] .mxplan-select:focus-visible{outline:3px solid var(--mx-orange);outline-offset:3px}
body[data-page-family=facility] .mxplan-melissa .mxplan-canvas{position:relative}
body[data-page-family=facility] .mxplan-melissa .mxplan-compass{position:absolute;right:4.67%;bottom:8.33%;width:3.48%;min-width:26px;max-width:none;height:auto;aspect-ratio:53/94;pointer-events:none}
body[data-page-family=facility] .mxplan-melissa .bldg{cursor:pointer;outline:none}
body[data-page-family=facility] .mxplan-melissa .bldg rect{stroke-width:4.44;transition:fill .2s ease,stroke .2s ease,opacity .2s ease}
body[data-page-family=facility] .mxplan-melissa .bx-av{fill:#011f39;stroke:#073257;filter:url(#mxg-av)}
/* leased (2026-10-08): the hatched mid navy of #mx-lease, a quiet edge and dim letters (was Mart's light grey, which
   Saqib found off the colour scheme once whole rows of units turned grey) */
body[data-page-family=facility] .mxplan-melissa .bx-ls{fill:url(#mx-lease);stroke:#3f6390;filter:none}
body[data-page-family=facility] .mxplan-melissa .ink-m{fill:rgba(255,255,255,.55)}
body[data-page-family=facility] .mxplan-melissa #siteplan-svg text{pointer-events:none;stroke:none;text-anchor:middle;transition:fill .2s ease}
body[data-page-family=facility] .mxplan-melissa .bn{font-family:var(--mx-display);font-size:40px;font-weight:400;letter-spacing:.04em;text-transform:uppercase}
body[data-page-family=facility] .mxplan-melissa .bn-tight{letter-spacing:.02em}
body[data-page-family=facility] .mxplan-melissa :is(.bs,.pond-l){font-family:Arial,Helvetica,sans-serif;font-size:24px;font-weight:700;letter-spacing:.04em}
body[data-page-family=facility] .mxplan-melissa :is(.ink-l,.pond-l){fill:#fff}
body[data-page-family=facility] .mxplan-melissa .ink-d{fill:#011f39}
body[data-page-family=facility] .mxplan-melissa .bldg:not([role=group]):is(:focus-visible,.hot) rect{fill:var(--mx-orange);stroke:#fffdfc;filter:none}
body[data-page-family=facility] .mxplan-melissa .bldg:not([role=group]):is(:focus-visible,.hot) .bx-top{opacity:0}
body[data-page-family=facility] .mxplan-melissa .bldg:not([role=group]):is(:focus-visible,.hot) text{fill:#021321}
body[data-page-family=facility] .mxplan-melissa .bldg:focus-visible{outline:3px solid #fffdfc;outline-offset:6px}
@media (hover:hover) and (pointer:fine){
  body[data-page-family=facility] .mxplan-melissa .bldg:not([role=group]):hover rect{fill:var(--mx-orange);stroke:#fffdfc;filter:none}
  body[data-page-family=facility] .mxplan-melissa .bldg:not([role=group]):hover .bx-top{opacity:0}
  body[data-page-family=facility] .mxplan-melissa .bldg:not([role=group]):hover text{fill:#021321}
}
@media (max-width:900px){
  /* smaller key so its four items still share one row on tablets */
  body[data-page-family=facility] .mxplan-melissa .mxlgd{gap:12px 20px;padding-top:18px}
  body[data-page-family=facility] .mxplan-melissa .mxlgd li{gap:8px;font-size:11px}
  body[data-page-family=facility] .mxplan-melissa .mxlgd i{width:26px;height:11px;border-width:2px}
  body[data-page-family=facility] .mxplan-melissa .mxlgd .k-road{width:32px;height:13px}
  body[data-page-family=facility] .mxplan-melissa .mxlgd .k-bound{width:32px;height:5px}
}
@media (max-width:760px){
  body[data-page-family=facility] .mxplan-melissa .mxplan-panel{gap:22px}
  body[data-page-family=facility] .mxplan-melissa .mxlgd{justify-content:flex-start}
  body[data-page-family=facility] .mxplan-pan-hint{display:block;margin:0 0 12px;color:#fff;font:400 14px/1.5 var(--mx-body)}
  /* the plan scrolls sideways inside its box, wide enough that every building stays tappable */
  body[data-page-family=facility] .mxplan-melissa .mxplan-canvas{width:900px}
  body.uf-site[data-page-family=facility] #park-plan.mxplan-melissa #siteplan-svg{width:100%}
}
@media (prefers-reduced-motion:reduce){
  body[data-page-family=facility] .mxplan-melissa .bldg rect,body[data-page-family=facility] .mxplan-melissa #siteplan-svg text{transition:none}
}

/* Units (2026-10-08, Rick's 10-02 call: every unit of every building, leased or available). melissa.js draws each
   building as its units (g.unit, sized by square feet) from the park admin's Units feed. Navy = available, grey =
   leased (Mart's two colours), reserved = navy with an orange edge, coming soon = navy with a dashed edge. The unit
   pointed at or shown in the card turns orange; the building it belongs to keeps a white outline. */
body[data-page-family=facility] .mxplan-melissa .bx-box{fill:none;stroke:none}
body[data-page-family=facility] .mxplan-melissa .bldg.picked .bx-box{stroke:#fffdfc;stroke-width:6}
body[data-page-family=facility] .mxplan-melissa .unit{cursor:pointer;outline:none}
body[data-page-family=facility] .mxplan-melissa .bx-rs{fill:#011f39;stroke:var(--mx-orange);filter:url(#mxg-av)}
body[data-page-family=facility] .mxplan-melissa .bx-cs{fill:#011f39;stroke:#9fc3e6;stroke-dasharray:14 9;filter:url(#mxg-av)}
body[data-page-family=facility] .mxplan-melissa .un{font-family:var(--mx-display);font-size:30px;font-weight:400;letter-spacing:0}
body[data-page-family=facility] .mxplan-melissa .bn-units{font-size:34px}
body[data-page-family=facility] .mxplan-melissa .bldg .bn-units.ink-l{fill:#fff}
/* leased (Rick, 2026-10-08 L10 [86:38]): greyed out and inert. The hatch stays (Saqib's colour), dimmed, and the
   unit takes no pointer, so hovering it neither turns it orange nor changes the card */
body[data-page-family=facility] .mxplan-melissa .unit[data-status=leased] rect{opacity:.55;filter:grayscale(.6)}
body[data-page-family=facility] .mxplan-melissa .unit[data-status=leased] text{fill:rgba(255,255,255,.4)}
body[data-page-family=facility] .mxplan-melissa .unit:is(:focus-visible,.hot) rect{fill:var(--mx-orange);stroke:#fffdfc;stroke-dasharray:none;filter:none}
body[data-page-family=facility] .mxplan-melissa .unit:is(:focus-visible,.hot) text{fill:#021321}
body[data-page-family=facility] .mxplan-melissa .unit:focus-visible rect{stroke-width:8}
/* a leased unit answers in a white outline at full strength, never orange: orange is a unit you can take (Saqib, 2026-10-16) */
body[data-page-family=facility] .mxplan-melissa .unit[data-status=leased]:is(:focus-visible,.hot) rect{fill:url(#mx-lease);stroke:#fffdfc;opacity:1;filter:none}
body[data-page-family=facility] .mxplan-melissa .unit[data-status=leased]:is(:focus-visible,.hot) text{fill:#fff}
@media (hover:hover) and (pointer:fine){
  body[data-page-family=facility] .mxplan-melissa .unit:hover rect{fill:var(--mx-orange);stroke:#fffdfc;stroke-dasharray:none;filter:none}
  body[data-page-family=facility] .mxplan-melissa .unit:hover text{fill:#021321}
  body[data-page-family=facility] .mxplan-melissa .unit[data-status=leased]:hover rect{fill:url(#mx-lease);stroke:#fffdfc;opacity:1;filter:none}
  body[data-page-family=facility] .mxplan-melissa .unit[data-status=leased]:hover text{fill:#fff}
}
/* the building number sits above the unit letters; on an orange unit it would vanish into it, so it keeps a
   dark halo */
body[data-page-family=facility] .mxplan-melissa .bldg .bn-units{paint-order:stroke;stroke:#011f39;stroke-width:6px}
body[data-page-family=facility] .mxplan-melissa .mxlgd .k-res{background:#012e57;border:3px solid var(--mx-orange)}
body[data-page-family=facility] .mxplan-melissa .mxlgd .k-soon2{background:#012e57;border:3px dashed #9fc3e6}
/* Melissa's card lists the park specs too (2026-10-08), so its facts wrap in two columns instead of one long row */
body[data-page-family=facility] .mxplan-melissa .sc-feat{grid-template-columns:repeat(2,minmax(0,1fr))}
/* the card's unit buttons: one per unit of the chosen building */
/* each track wide enough for its widest status in Mart's type (measured 2026-10-21: ON REQUEST 178px beside the unit
   code, LEASED 165, AVAILABLE 157); the 122px floor let the status run past the button's edge (homepage 4d895b6) */
body[data-page-family=facility] .sc-units{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:8px;margin:0 0 20px}
body[data-page-family=facility] .sc-unit{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;column-gap:10px;row-gap:3px;min-height:52px;padding:8px 12px;text-align:left;border:1px solid rgba(255,255,255,.4);border-radius:0;background:#012e57;color:#fff;font:400 13px/1.2 var(--mx-body);cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease}
body[data-page-family=facility] .sc-unit b{grid-row:1/3;font:400 20px/1 var(--mx-display)}
/* the card's action on two lines (phones) breaks into even lines, never one word alone (2026-10-21) */
body[data-page-family=facility] #sc-go span{text-wrap:balance}
body[data-page-family=facility] .sc-unit small{font:400 12px/1 var(--mx-display);letter-spacing:.06em;text-transform:uppercase;opacity:.8}
/* Phones (Eurostile Extended Black, 2026-10-15): AVAILABLE is wider than the space beside the unit code in a 142px
   button, so the status goes under the code. */
@media (max-width:480px){
  body[data-page-family=facility] .sc-units{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  body[data-page-family=facility] .sc-unit{grid-template-columns:1fr}
  body[data-page-family=facility] .sc-unit b{grid-row:auto}
}
body[data-page-family=facility] .sc-unit[data-status=leased]{background:transparent;color:rgba(255,255,255,.45);border-color:rgba(255,255,255,.16)}
body[data-page-family=facility] .sc-unit[data-status=reserved]{border-color:var(--mx-orange)}
body[data-page-family=facility] .sc-unit[data-status=coming_soon]{border-style:dashed}
body[data-page-family=facility] .sc-unit[aria-pressed=true]{background:var(--mx-orange);border-color:var(--mx-orange);color:#021321}
body[data-page-family=facility] .sc-unit[data-status=leased][aria-pressed=true]{background:transparent;border-color:#fffdfc;color:#fff}
body[data-page-family=facility] .sc-unit:focus-visible{outline:3px solid var(--mx-orange);outline-offset:3px}
@media (hover:hover) and (pointer:fine){body[data-page-family=facility] .sc-unit:not([aria-pressed=true]):not(:disabled):hover{border-color:#fff;color:#fff}}
@media (prefers-reduced-motion:reduce){
  body[data-page-family=facility] .sc-unit,body[data-page-family=facility] .mxplan-melissa .unit rect{transition:none}
}

/* ---------- explore the property ---------- */
body[data-page-family=facility] .mxgal{background:var(--mx-paper);color:var(--mx-navy);padding:var(--mx-pad) 0 88px}
/* UF (2026-10-03 audit, round 4): grid-auto-columns sizes however many tabs a park actually has (2 today,
   with the 3D walkthrough tab removed - no park has a real tour; 3 again if a real tour URL is ever added
   back to one) instead of a fixed repeat(3,...) that only looked right at exactly three. */
body[data-page-family=facility] .mxgal .mtabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;margin:40px 0 18px;padding:0;background:none;border:0}
body[data-page-family=facility] .mxgal .mtabs button{position:relative;min-height:46px;margin:0 0 0 -10px;padding:0 20px;border:0;border-radius:0;background:var(--mx-navy);color:rgba(255,255,255,.86);
  font:400 13px/1 var(--mx-display);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  clip-path:polygon(16px 0,100% 0,calc(100% - 16px) 100%,0 100%);transition:background-color .4s var(--mx-ease),color .4s var(--mx-ease)}
body[data-page-family=facility] .mxgal .mtabs button:first-child{margin-left:0;clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%)}
body[data-page-family=facility] .mxgal .mtabs button:last-child{clip-path:polygon(16px 0,100% 0,100% 100%,0 100%)}
body[data-page-family=facility] .mxgal .mtabs button:hover{background:#0d2a40;color:#fff}
body[data-page-family=facility] .mxgal .mtabs button.on{background:var(--mx-orange);color:var(--mx-deep)}
body[data-page-family=facility] .mxgal .mtabs button:focus-visible{outline:2px solid var(--mx-navy);outline-offset:-5px}
body[data-page-family=facility] .mxgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,clamp(220px,20vw,292px));gap:18px}
body[data-page-family=facility] .mxgrid .gt{position:relative;margin:0;overflow:hidden;background:#d8dddd}
body[data-page-family=facility] .mxgrid .gt:nth-child(1){grid-row:1/3;grid-column:1}
body[data-page-family=facility] .mxgrid .gt:nth-child(2){grid-row:1;grid-column:2}
body[data-page-family=facility] .mxgrid .gt:nth-child(3){grid-row:2;grid-column:2}
body[data-page-family=facility] .mxgrid .gt:nth-child(4){grid-row:1/3;grid-column:3}
body[data-page-family=facility] .mxgrid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--mx-ease)}
body[data-page-family=facility] .mxgrid .cap{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 16px;background:linear-gradient(0deg,rgba(0,12,19,.78),rgba(0,12,19,0));
  font:400 12px/1.2 var(--mx-display);letter-spacing:.12em;text-transform:uppercase;color:#fff;opacity:0;transform:translateY(8px);transition:opacity .45s var(--mx-ease),transform .45s var(--mx-ease)}
@media (hover:hover) and (pointer:fine){
  body[data-page-family=facility] .mxgrid .gt:hover img{transform:scale(1.04)}
  body[data-page-family=facility] .mxgrid .gt:hover .cap{opacity:1;transform:none}
}
@media (hover:none){body[data-page-family=facility] .mxgrid .cap{opacity:1;transform:none}}
body[data-page-family=facility] .mxgal .film{position:relative;height:calc(2 * clamp(220px,20vw,292px) + 18px);background:var(--mx-deep);overflow:hidden}
body[data-page-family=facility] .mxgal .mpane.on{animation:mx-pane .5s cubic-bezier(.22,1,.36,1)}
@keyframes mx-pane{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
body[data-page-family=facility] .mxgal .film video{width:100%;height:100%;object-fit:cover;display:block}
/* A park film with words at its edges (Melissa's commercial, 2026-10-19: the address, the phone number, the QR code)
   shows whole: the box takes the film's 16:9 shape instead of the gallery's height, and nothing is cropped. */
body[data-page-family=facility] .mxgal .film.film-feature{height:auto;aspect-ratio:16/9}
body[data-page-family=facility] .mxgal .film.film-feature video{object-fit:contain}
body[data-page-family=facility] .mxgal .film .over{position:absolute;left:0;right:0;bottom:0;padding:40px 22px 18px;background:linear-gradient(0deg,rgba(0,12,19,.8),transparent);pointer-events:none}
body[data-page-family=facility] .mxgal .film .cap{font:400 14px/1.4 var(--mx-body);color:rgba(255,255,255,.88)}
body[data-page-family=facility] .mxgal .mp3d{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:calc(2 * clamp(220px,20vw,292px) + 18px);padding:48px 24px;background:var(--mx-navy);color:var(--mx-white);text-align:center}
body[data-page-family=facility] .mxgal .mp3d svg{width:72px;height:72px}
body[data-page-family=facility] .mxgal .mp3d b{font:400 20px/1.2 var(--mx-display);text-transform:uppercase;letter-spacing:.04em}
body[data-page-family=facility] .mxgal .mp3d p{margin:0 0 8px;max-width:44ch;font:400 16px/1.6 var(--mx-body);color:rgba(255,255,255,.76)}

/* ---------- around the park ---------- */
body[data-page-family=facility] .mxarea{background:var(--mx-paper);color:var(--mx-navy);padding:40px 0 var(--mx-pad)}
body[data-page-family=facility] .mxarea-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5.5vw,84px);align-items:stretch}
body[data-page-family=facility] .mxmap{position:relative;min-height:560px;background:#d8dddd;overflow:hidden}
body[data-page-family=facility] .mxmap iframe{position:absolute;left:0;right:0;top:-150px;width:100%;height:calc(100% + 150px);border:0;display:block}
body[data-page-family=facility] .mxarea-copy{display:flex;flex-direction:column;justify-content:center;padding-block:12px}
body[data-page-family=facility] .mxarea-copy .mxh2{max-width:12ch;margin-bottom:30px}
body[data-page-family=facility] .mxlist{list-style:none;margin:0 0 30px;padding:0;border-top:1px solid var(--mx-rule)}
body[data-page-family=facility] .mxlist li{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--mx-rule)}
body[data-page-family=facility] .mxlist b{font:700 17px/1.35 var(--mx-body);color:var(--mx-navy)}
body[data-page-family=facility] .mxlist span{font:400 15px/1.35 var(--mx-body);color:var(--mx-muted);text-align:right;white-space:nowrap}
body[data-page-family=facility] .mxcallout{padding:24px 26px;background:var(--mx-navy);border-top:4px solid var(--mx-orange);color:var(--mx-white)}
body[data-page-family=facility] .mxcallout b{display:block;margin-bottom:10px;font:400 14px/1.2 var(--mx-display);letter-spacing:.12em;text-transform:uppercase;color:var(--mx-orange)}
body[data-page-family=facility] .mxcallout p{margin:0;font:400 16px/1.6 var(--mx-body);color:rgba(255,255,255,.82)}

/* ---------- scrolling photo bands (PSD parts 1-3): one drone pass that keeps moving down the page ---------- */
body[data-page-family=facility] .mxband{position:relative;isolation:isolate;height:clamp(300px,31vw,450px);overflow:hidden;background:var(--mx-deep);border-top:6px solid var(--mx-orange)}
body[data-page-family=facility] .mxband-media{position:absolute;inset:0;z-index:-1;overflow:hidden}
body[data-page-family=facility] .mxband-media img{position:absolute;left:0;top:-12%;width:124%;height:124%;max-width:none;object-fit:cover;object-position:50% 58%;will-change:transform}
body[data-page-family=facility] .mxband::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,12,19,.9) 0%,rgba(0,12,19,.62) 30%,rgba(0,12,19,0) 60%),rgba(0,21,35,.08);pointer-events:none}
body[data-page-family=facility] .mxband-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;
  width:100%;max-width:1256px;margin-inline:auto;padding:0 24px 24px}
body[data-page-family=facility] .mxband-cap b{padding:6px 10px;background:rgba(0,12,19,.82);font:400 13px/1.2 var(--mx-display);letter-spacing:.18em;text-transform:uppercase;color:var(--mx-orange)}
body[data-page-family=facility] .mxband-cap span{font:400 15px/1.45 var(--mx-body);color:rgba(255,255,255,.9)}

/* ---------- local guide (PSD light, two columns) ---------- */
body[data-page-family=facility] .mxguide{background:var(--mx-paper);color:var(--mx-navy);padding:var(--mx-pad) 0}
body[data-page-family=facility] .mxguide-cols{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(44px,6.5vw,96px);align-items:start}
body[data-page-family=facility] .mxguide .mxh2{max-width:12ch;margin-bottom:24px}
body[data-page-family=facility] .mxguide-intro{margin:0 0 26px;max-width:42ch;font:400 17px/1.6 var(--mx-body);color:var(--mx-muted)}
body[data-page-family=facility] .mxchips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
body[data-page-family=facility] .mxchips a{display:inline-flex;align-items:center;min-height:38px;padding:0 13px;border:1px solid rgba(0,21,35,.32);color:var(--mx-navy);text-decoration:none;
  font:400 12px/1 var(--mx-display);letter-spacing:.12em;text-transform:uppercase;transition:background-color .35s var(--mx-ease),color .35s var(--mx-ease),border-color .35s var(--mx-ease)}
body[data-page-family=facility] .mxchips a:hover{background:var(--mx-navy);border-color:var(--mx-navy);color:var(--mx-white)}
body[data-page-family=facility] .mxnap{position:relative;padding:28px 28px 30px;background:var(--mx-navy);color:var(--mx-white);border-top:4px solid var(--mx-orange);clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}
body[data-page-family=facility] .mxnap>b{display:block;margin-bottom:12px;font:400 15px/1.3 var(--mx-display);letter-spacing:.08em;text-transform:uppercase}
body[data-page-family=facility] .mxnap address{margin:0 0 24px;font:400 16px/1.65 var(--mx-body);font-style:normal;color:rgba(255,255,255,.82)}
body[data-page-family=facility] .mxnap address a{color:var(--mx-white);text-decoration:none;border-bottom:1px solid var(--mx-orange)}
/* On phones the site-wide tap padding (site-consistency.css, .mxnap a) moved this border underline 12px down, through
   the next link; a text underline stays under its own words (2026-10-21). */
@media (max-width:760px){body[data-page-family=facility] .mxnap address a{border-bottom:0;text-decoration:underline;text-decoration-color:var(--mx-orange);text-decoration-thickness:1px;text-underline-offset:4px}}
body[data-page-family=facility] .mxnap-row{display:flex;flex-wrap:wrap;gap:12px}
body[data-page-family=facility] .mxnap-row .mxbtn{flex:1 1 auto;min-height:50px;padding:12px 18px;font-size:13px;white-space:normal;text-align:center;line-height:1.2}

/* accordion (guide + FAQ), driven by theme.js #localacc/#facacc */
body[data-page-family=facility] .mx-acc{border-top:1px solid var(--mx-rule)}
body[data-page-family=facility] .mx-acc .it{border-bottom:1px solid var(--mx-rule);background:none;margin:0}
body[data-page-family=facility] .mx-acc .q{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;padding:24px 0;margin:0;border:0;background:none;color:var(--mx-navy);text-align:left;cursor:pointer;border-radius:0}
body[data-page-family=facility] .mx-acc .q h3{margin:0;text-wrap:balance;font:400 clamp(18px,1.66vw,23px)/1.22 var(--mx-display);letter-spacing:.01em;text-transform:uppercase;color:var(--mx-navy);transition:color .35s ease}
body[data-page-family=facility] .mx-acc .q:hover h3{color:var(--mx-orange-ink)}
body[data-page-family=facility] .mx-acc .pl{position:relative;flex:0 0 36px;width:36px;height:40px;background:var(--mx-navy);clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);transition:background-color .4s var(--mx-ease)}
body[data-page-family=facility] .mx-acc .pl::before,body[data-page-family=facility] .mx-acc .pl::after{content:"";position:absolute;left:11px;right:11px;top:19px;height:2px;background:var(--mx-orange);transition:transform .45s var(--mx-ease),background-color .4s ease}
body[data-page-family=facility] .mx-acc .pl::after{transform:rotate(90deg)}
body[data-page-family=facility] .mx-acc .it.open .pl{background:var(--mx-orange)}
body[data-page-family=facility] .mx-acc .it.open .pl::before{transform:rotate(45deg);background:var(--mx-navy)}
body[data-page-family=facility] .mx-acc .it.open .pl::after{transform:rotate(135deg);background:var(--mx-navy)}
body[data-page-family=facility] .mx-acc .bd{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s var(--mx-ease),opacity .35s ease}
body[data-page-family=facility] .mx-acc .it.open .bd{grid-template-rows:1fr;opacity:1}
body[data-page-family=facility] .mx-acc .bd>div{min-height:0;overflow:hidden}
body[data-page-family=facility] .mx-acc .bd p{margin:0;padding:0 56px 28px 0;max-width:62ch;font:400 18px/1.65 var(--mx-body);color:#33444c}

/* ---------- four steps (PSD orange band) ---------- */
body[data-page-family=facility] .mxsteps{background:var(--mx-orange);color:var(--mx-deep);padding:var(--mx-pad) 0}
body[data-page-family=facility] .mxsteps .mxh2{color:var(--mx-deep);max-width:22ch}
body[data-page-family=facility] .mxsteps-track{position:relative;height:2px;margin:64px 0 0;background:rgba(0,21,35,.16)}
body[data-page-family=facility] .mxsteps-track i{position:absolute;inset:0;background:var(--mx-navy);transform-origin:0 50%;transform:scaleX(1)}
body[data-page-family=facility] .mxsteps-grid{list-style:none;margin:-24px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3.4vw,48px)}
body[data-page-family=facility] .mxsteps .step{position:relative}
body[data-page-family=facility] .mxsteps .sn{display:grid;place-items:center;width:46px;height:46px;margin-bottom:26px;background:var(--mx-navy);color:var(--mx-paper);
  font:400 22px/1 var(--mx-display);clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
body[data-page-family=facility] .mxsteps .step b{display:block;margin-bottom:14px;font:400 19px/1.2 var(--mx-display);letter-spacing:.02em;text-transform:uppercase;color:var(--mx-deep)}
body[data-page-family=facility] .mxsteps .step p{margin:0;max-width:30ch;font:400 17px/1.6 var(--mx-body);color:var(--mx-deep)}

/* ---------- talk to the team: scrolling photo part 2 behind, form inverted to navy ---------- */
body[data-page-family=facility] .mxlead{position:relative;isolation:isolate;overflow:hidden;background:var(--mx-deep);color:var(--mx-white);padding:clamp(96px,10vw,140px) 0;border-top:6px solid var(--mx-orange)}
body[data-page-family=facility] .mxlead-media img{opacity:.6;top:-10%;height:120%}
body[data-page-family=facility] .mxlead::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(100deg,rgba(0,12,19,.92) 0%,rgba(0,12,19,.72) 45%,rgba(0,12,19,.42) 100%)}
body[data-page-family=facility] .mxlead-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);gap:clamp(44px,6vw,96px);align-items:center}
body[data-page-family=facility] .mxlead .mxkicker{color:var(--mx-orange)}
body[data-page-family=facility] .mxlead .mxh2{color:var(--mx-white);max-width:14ch;margin-bottom:26px}
body[data-page-family=facility] .mxlead-promise{margin:0 0 28px;max-width:34ch;font:400 18px/1.6 var(--mx-body);color:rgba(255,255,255,.8)}
body[data-page-family=facility] .mxlead-mail{display:inline-block;padding-bottom:6px;border-bottom:2px solid var(--mx-orange);color:var(--mx-white);text-decoration:none;
  font:400 15px/1 var(--mx-display);letter-spacing:.08em;text-transform:uppercase;transition:color .35s ease}
body[data-page-family=facility] .mxlead-mail:hover{color:var(--mx-orange)}
body[data-page-family=facility] #lead .mxform{margin:0;padding:clamp(28px,3vw,42px);background:var(--mx-navy);border:1px solid rgba(255,255,255,.12);border-top:4px solid var(--mx-orange);border-radius:0;box-shadow:0 40px 80px -40px rgba(0,0,0,.6);color:var(--mx-white)}
body[data-page-family=facility] #lead .mxform h3{margin:0 0 26px;font:400 22px/1.15 var(--mx-display);letter-spacing:.03em;text-transform:uppercase;color:var(--mx-orange)}
body[data-page-family=facility] #lead .mxform .row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 16px}
body[data-page-family=facility] #lead .mxform .row.full{grid-template-columns:1fr}
/* UF-19 (2026-10-03 audit): was 11px, under the 12px floor. */
body[data-page-family=facility] #lead .mxform label{display:block;margin:0 0 8px;font:400 12px/1 var(--mx-display);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
body[data-page-family=facility] #lead .mxform :is(input,select,textarea){width:100%;min-height:48px;margin:0;padding:12px 14px;border:1px solid rgba(255,255,255,.42);border-radius:0;background:rgba(255,255,255,.04);color:var(--mx-white);
  font:400 16px/1.4 var(--mx-body);box-shadow:none;transition:border-color .3s ease,background-color .3s ease,box-shadow .3s ease;-webkit-appearance:none;appearance:none}
body[data-page-family=facility] #lead .mxform select{padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ff7d01' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px}
body[data-page-family=facility] #lead .mxform select option{color:#001523;background:#fff}
body[data-page-family=facility] #lead .mxform textarea{min-height:88px;resize:vertical}
body[data-page-family=facility] #lead .mxform ::placeholder{color:rgba(255,255,255,.58)}
body[data-page-family=facility] #lead .mxform :is(input,select,textarea):hover{border-color:rgba(255,255,255,.4)}
body[data-page-family=facility] #lead .mxform :is(input,select,textarea):focus{outline:2px solid var(--mx-orange);outline-offset:0;border-color:var(--mx-orange);background:rgba(255,255,255,.07)}
body[data-page-family=facility] #lead .mxform .mxbtn{margin-top:10px}
body.uf-site[data-page-family=facility] #lead .lform>p.fine{margin:16px 0 0;font:400 13px/1.5 var(--mx-body);color:rgba(255,255,255,.66)!important}
body[data-page-family=facility] #lead .mxform-req{margin:-14px 0 20px;font:400 13px/1.4 var(--mx-body);color:rgba(255,255,255,.66)}
body[data-page-family=facility] #lead .req,body[data-page-family=facility] #lead .mxform-req span{color:var(--mx-orange)}
body.uf-site[data-page-family=facility] #lead .lform>p[data-form-status]{color:var(--mx-white)!important}
body[data-page-family=facility] #lead [data-form-status]{margin:14px 0 0;padding:12px 14px;border-left:3px solid var(--mx-orange);background:rgba(255,255,255,.06);font:400 14px/1.5 var(--mx-body);color:var(--mx-white)}
body[data-page-family=facility] #lead [data-form-status]:empty{display:none}
body[data-page-family=facility] #lead .lok{display:none;padding:32px;background:var(--mx-navy);border-top:4px solid var(--mx-orange)}
body[data-page-family=facility] #lead .lok b{display:block;font:400 22px/1.2 var(--mx-display);text-transform:uppercase;color:var(--mx-orange);margin-bottom:8px}
body[data-page-family=facility] #lead .lok p{margin:0;color:rgba(255,255,255,.8)}
/* the saved-lead confirmation in the form's place (src/theme.js showLeadSaved), with the admin's reference for the lead */
body[data-page-family=facility] #lead .lok.is-shown{display:block}
body[data-page-family=facility] #lead .lok .uf-lead-receipt{display:block;margin-top:18px;font:400 13px/1.4 var(--mx-body);letter-spacing:.04em;color:rgba(255,255,255,.66)}
body[data-page-family=facility] #lead .lok:focus{outline:none}
body[data-page-family=facility] #lead .lok:focus-visible{outline:2px solid var(--mx-orange);outline-offset:4px}

/* ---------- FAQ (PSD light, heading left, questions right) ---------- */
body[data-page-family=facility] .mxfaq{background:var(--mx-paper);color:var(--mx-navy);padding:var(--mx-pad) 0}
body[data-page-family=facility] .mxfaq-cols{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(44px,6.5vw,96px);align-items:start}
body[data-page-family=facility] .mxfaq .mxh2{max-width:10ch}

/* ---------- guide + FAQ: the left column follows the scroll beside the questions (Saqib, 2026-10-09) ----------
   Fund VI's "Five Levers" column: sticky while its row scrolls by, so an opened answer leaves no empty space
   under the heading and address card. It rests 32px under the header (centred in the room left on a short screen);
   a column taller than that room rests by its bottom edge instead, so the address card buttons are never cut off
   (facility-premium.js sets --mx-stick-top from the live heights). Columns stack at 980px and under, so it stops there. */
@media (min-width:981px){
  body[data-page-family=facility] :is(.mxguide-lhs,.mxfaq-cols>:first-child){position:sticky;top:var(--mx-stick-top,131px)}
}

/* ---------- suite schematic plan (the eight parks carry an 800x470 suite drawing instead of a site-plan photo; from the New Fairfield pilot) ---------- */
/* schematic plan: the template positions #siteplan-svg absolutely, so the box takes the drawing's ratio
   (viewBox 0 40 800 440, the drawn area of the shared schematic); capped so the plan never fills the screen */
body[data-page-family=facility] .planbox.mx-schematic::before{content:"";display:block;aspect-ratio:800/440;max-height:540px}
body[data-page-family=facility] .mx-schematic .suite{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.35);stroke-width:1.5;transition:fill .35s ease,stroke .35s ease}
body[data-page-family=facility] .mx-schematic .suite:is(.av,.soon){cursor:pointer}
body[data-page-family=facility] .mx-schematic .suite.av{fill:var(--mx-orange);stroke:var(--mx-orange)}
body[data-page-family=facility] .mx-schematic .suite.soon{fill:rgba(255,125,1,.16);stroke:var(--mx-orange);stroke-dasharray:5 4}
/* A shown unit identifies its location, not its current rental status. */
body[data-page-family=facility] .mx-schematic .suite.ref{cursor:pointer;fill:#2b5279;stroke:rgba(255,255,255,.7)}
body[data-page-family=facility] .mx-schematic .suite.ref+.suite-id{fill:#fff}
body[data-page-family=facility] .mx-schematic .suite.ref:is(:hover,:focus-visible,.hot){fill:var(--mx-orange);stroke:#fff;stroke-width:3}
body[data-page-family=facility] .mx-schematic .suite.ref:is(:hover,:focus-visible,.hot)+.suite-id{fill:var(--mx-deep)}
body[data-page-family=facility] .mx-schematic .suite:is(.av,.soon):is(:hover,:focus-visible,.hot){fill:#ffa04a;stroke:var(--mx-white);stroke-width:3;stroke-dasharray:none}
body[data-page-family=facility] .mx-schematic text{pointer-events:none;font-family:var(--mx-display);text-transform:uppercase}
body[data-page-family=facility] .mx-schematic .bldg-label{font-size:12px;letter-spacing:.14em;fill:rgba(255,255,255,.66)}
body[data-page-family=facility] .mx-schematic .suite-id{font-size:11px;letter-spacing:.04em;fill:var(--mx-deep);text-anchor:middle;dominant-baseline:central}
body[data-page-family=facility] .mx-schematic .aisle{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1;stroke-dasharray:6 5}
body[data-page-family=facility] .mxlgd .k-av{background:var(--mx-orange)}
body[data-page-family=facility] .mxlgd .k-soon{background:rgba(255,125,1,.16);border:1px dashed var(--mx-orange)}
body[data-page-family=facility] .mxlgd .k-ref{background:#2b5279;border:1px solid rgba(255,255,255,.7)}

/* units table: on desktop "Monthly, all in" and "Clear height" stay on one line (the template sets line-height 1,
   so wrapped headers touch); at 1100px and below the template already keeps cells on one line */
@media (min-width:1101px){body[data-page-family=facility] .mxtable thead th{white-space:normal}}

/* gallery: a stock tile says so without hover (template captions only appear on hover on desktop) */
body[data-page-family=facility] .mxgrid .mxgt-note{position:absolute;left:12px;top:12px;z-index:1;max-width:calc(100% - 24px);padding:6px 10px;background:rgba(0,12,19,.8);pointer-events:none;
  font:400 10px/1 var(--mx-display);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.88)}

/* suite card: the whole monthly price, as on Mart's PSD card */
body[data-page-family=facility] .sc-price{margin:0;font:400 30px/1 var(--mx-display);letter-spacing:.02em;color:var(--mx-orange)}
body[data-page-family=facility] .sc-price span{font:400 14px/1 var(--mx-body);letter-spacing:0;color:rgba(255,255,255,.7)}

@media (max-width:760px){
  /* matches the template's 720px scrollable plan on phones */
  body[data-page-family=facility] .planbox.mx-schematic::before{width:720px;max-height:none}
  body[data-page-family=facility] .sc-price{font-size:26px}
  body[data-page-family=facility] .mxgrid .mxgt-note{left:8px;top:8px;padding:5px 7px;font-size:9px;letter-spacing:.08em}
}

/* rollout fixes from the seven park conversions (2026-09-29) */
body[data-page-family=facility] .mx-schematic :is(.suite.soon+.suite-id,.suite.leased+.suite-id,.suite-id.is-soon){fill:var(--mx-white)}
body[data-page-family=facility] .mx-schematic .suite.soon:is(:hover,:focus-visible,.hot)+.suite-id{fill:var(--mx-deep)}
body[data-page-family=facility] .mx-schematic .suite.leased[tabindex]{cursor:pointer}
body[data-page-family=facility] .mx-schematic .suite.leased[tabindex]:is(:hover,:focus-visible,.hot){fill:rgba(255,255,255,.3);stroke:var(--mx-white);stroke-width:3}
body[data-page-family=facility] .sc-price{text-transform:uppercase}
body[data-page-family=facility] :is(.mxh .mxh-name,.mxh2,.mxh3){overflow-wrap:normal;word-break:normal;hyphens:manual}
body[data-page-family=facility] .mxfaq .mxh2{max-width:12ch}
body[data-page-family=facility] .mxlead-mail{overflow-wrap:normal}
@media (max-width:900px){
  body[data-page-family=facility] .mxtable .mxtag{white-space:normal;padding-block:7px;line-height:1.3}
  body[data-page-family=facility] .mxtable td[data-label=Status]{grid-column:1/-1}
}

/* ---------- motion start states (only when JS motion is running; reduced motion never hides) ---------- */
@media (prefers-reduced-motion:no-preference){
  html.mx-js body[data-page-family=facility] [data-mx-in]{opacity:0;transform:translateY(24px)}
  html.mx-js body[data-page-family=facility] .mxh-crumb{opacity:0}
  html.mx-js body[data-page-family=facility] [data-mx-lines]{visibility:hidden}
  html.mx-js body[data-page-family=facility] [data-mx-rise]{opacity:0;transform:translateY(45px)}
  html.mx-js body[data-page-family=facility] [data-mx-stagger]>*{opacity:0;transform:translateY(22px)}
  html.mx-js body[data-page-family=facility] [data-mx-rows]>tr{opacity:0;transform:translateY(18px)}
  html.mx-js body[data-page-family=facility] [data-mx-wipe]{clip-path:inset(0 0 100% 0)}
  html.mx-js body[data-page-family=facility] [data-mx-steps] .step{opacity:0;transform:translateY(30px)}
  html.mx-js body[data-page-family=facility] .mxsteps-track i{transform:scaleX(0)}
  html.mx-js body[data-page-family=facility] .mxh-x path{stroke-dashoffset:100}
  html.mx-js body[data-page-family=facility] .mxh-media img{transform:scale(1.1)}
}
body[data-page-family=facility] .mx-sm{display:none}
body[data-page-family=facility] .mx-line-mask{padding-bottom:.06em;margin-bottom:-.06em}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  body[data-page-family=facility] .mxh-x{display:none}
  body[data-page-family=facility] .sc-feat{grid-template-columns:1fr 1fr}
  body[data-page-family=facility] .mxtable :is(td,tbody th,thead th){padding-inline:10px}
  body[data-page-family=facility] .mxtable thead th{letter-spacing:.1em}
  body[data-page-family=facility] .mxfeat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-page-family=facility] .mxfeat-grid li:nth-child(odd){border-left:0;padding-left:0}
  body[data-page-family=facility] .mxfeat-grid li:nth-child(4n+1){padding-left:0}
  body[data-page-family=facility] .mxfeat-grid li:nth-child(even){border-left:3px solid rgba(0,21,35,.16);padding-left:28px}
}
@media (max-width:980px){
  body[data-page-family=facility] .mxarea-cols,body[data-page-family=facility] .mxguide-cols,body[data-page-family=facility] .mxfaq-cols,body[data-page-family=facility] .mxlead-cols{grid-template-columns:minmax(0,1fr)}
  body[data-page-family=facility] .mxmap{min-height:380px}
  body[data-page-family=facility] .mxarea-copy .mxh2,body[data-page-family=facility] .mxguide .mxh2,body[data-page-family=facility] .mxfaq .mxh2,body[data-page-family=facility] .mxlead .mxh2{max-width:16ch}
  body[data-page-family=facility] .mxsteps-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}
  body[data-page-family=facility] .mxsteps-track{display:none}
  body[data-page-family=facility] .mxsteps-grid{margin-top:52px}
}
@media (max-width:900px){
  body[data-page-family=facility] .mxtable,body[data-page-family=facility] .mxtable tbody{display:block}
  body[data-page-family=facility] .mxtable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  body[data-page-family=facility] .mxtable tbody tr{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 18px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.12)}
  body[data-page-family=facility] .mxtable :is(td,tbody th){display:block;padding:0;border:0}
  body[data-page-family=facility] .mxtable tbody th.bay{grid-column:1/-1;font-size:22px;padding-left:0}
  body[data-page-family=facility] .mxtable td::before{content:attr(data-label);display:block;margin-bottom:5px;font:400 10px/1 var(--mx-display);letter-spacing:.16em;text-transform:uppercase;color:var(--mx-orange)}
  body[data-page-family=facility] .mxtable td:first-of-type{padding-left:0}
}
@media (max-width:760px){
  body[data-page-family=facility]{--mx-pad:68px}
  body[data-page-family=facility] .mxh{min-height:0}
  body[data-page-family=facility] .mxh::before{background:linear-gradient(180deg,rgba(0,21,35,.55) 0%,rgba(0,21,35,.72) 45%,rgba(0,12,19,.96) 100%)}
  body[data-page-family=facility] .mxh-media img{object-position:60% 50%}
  body[data-page-family=facility] .mxh-x{display:none}
  body[data-page-family=facility] .mxh-inner{padding-block:18px 48px;gap:120px}
  body[data-page-family=facility] .mxh .mxh-name{font-size:clamp(30px,9.4vw,52px)}
  body[data-page-family=facility] .mxh-sub{font-size:16px;margin-bottom:28px}
  body[data-page-family=facility] .mxh-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  body[data-page-family=facility] .mxh-btns .mxbtn{min-width:0;padding:0 12px;font-size:13px;min-height:52px}
  body[data-page-family=facility] .mxfeat-grid{padding:10px 0}
  body[data-page-family=facility] .mxfeat-grid li{min-height:64px;gap:12px;padding:6px 0 6px 14px}
  body[data-page-family=facility] .mxfeat-grid li:nth-child(odd){padding-left:0}
  body[data-page-family=facility] .mxfeat-grid li:nth-child(even){padding-left:14px}
  body[data-page-family=facility] .mxfeat-grid b{font-size:14px}
  body[data-page-family=facility] .mxfeat-grid svg{flex-basis:24px;width:24px;height:24px}
  body[data-page-family=facility] .mxunits .mxh2{margin-bottom:32px}
  body[data-page-family=facility] .mxplan-panel{padding:16px}
  body[data-page-family=facility] .planbox{overflow-x:auto;overscroll-behavior-x:contain}
  body[data-page-family=facility] .planbox img{min-width:720px}
  body.uf-site[data-page-family=facility] #park-plan #siteplan-svg{width:720px;max-width:none;right:auto}
  body[data-page-family=facility] .mxcard{display:flex;flex-direction:column}
  body[data-page-family=facility] .mxcard-ph{aspect-ratio:16/10;min-height:0}
  body[data-page-family=facility] .mxcard .sid{flex-wrap:wrap;row-gap:8px}
  body[data-page-family=facility] .sc-st{white-space:normal}
  body[data-page-family=facility] #sc-go{align-self:stretch}
  body[data-page-family=facility] .mxunits-acts .mxbtn{flex:1 1 100%}
  body[data-page-family=facility] .mxchips a{min-height:44px}
  body[data-page-family=facility] .mxgal .mtabs button{font-size:12px;letter-spacing:.05em;line-height:1.15;padding:0 14px;min-height:48px;margin-left:-6px;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
  body[data-page-family=facility] .mxgal .mtabs button:first-child{margin-left:0;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%)}
  body[data-page-family=facility] .mxgal .mtabs button:last-child{clip-path:polygon(8px 0,100% 0,100% 100%,0 100%)}
  body[data-page-family=facility] .mxbtn{font-size:13px;letter-spacing:.08em;padding:0 18px}
  body[data-page-family=facility] .mxbtn-block{white-space:normal;text-align:center;line-height:1.25;padding:14px 18px}
  body[data-page-family=facility] .mxgrid{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:170px;gap:10px}
  body[data-page-family=facility] .mxgrid .gt:nth-child(n){grid-column:auto;grid-row:auto}
  body[data-page-family=facility] .mxgrid .gt:nth-child(1){grid-column:1/-1;grid-row:span 1}
  body[data-page-family=facility] .mxgrid .gt:nth-child(4){grid-column:1/-1}
  body[data-page-family=facility] .mxmap{min-height:320px}
  body[data-page-family=facility] .mxlist span{white-space:normal}
  body[data-page-family=facility] .mxband{height:260px}
  body[data-page-family=facility] .mxband-cap{padding:0 20px 18px}
  body[data-page-family=facility] .mxband-cap span{font-size:14px}
  body[data-page-family=facility] .mxsteps-grid{grid-template-columns:1fr;row-gap:36px}
  body[data-page-family=facility] .mx-acc .bd p{padding-right:0;font-size:16px}
  body[data-page-family=facility] #lead .mxform .row{grid-template-columns:1fr}
  body[data-page-family=facility] .mxnap{padding:24px 22px 26px}
  body[data-page-family=facility] .mxh2{font-size:clamp(24px,7.2vw,32px)}
  body[data-page-family=facility] .mxlead .mxh2{font-size:clamp(28px,8vw,34px)}
  body[data-page-family=facility] .mxlead-mail{font-size:13px;letter-spacing:.04em;overflow-wrap:anywhere}
  body[data-page-family=facility] .uf-reference .uf-reference-note{padding-block:7px}
  body[data-page-family=facility] .uf-reference p{font-size:11px;line-height:1.4}
}
@media (max-width:420px){
  body[data-page-family=facility] .mx-lg{display:none}
  body[data-page-family=facility] .mx-sm{display:inline}
  body[data-page-family=facility] .mxgal .mtabs button{font-size:12px;letter-spacing:.03em;padding:0 8px}
}
@media (prefers-reduced-motion:reduce){
  body[data-page-family=facility] .mxh-media video{display:none}
  body[data-page-family=facility] .uf-header,body[data-page-family=facility] .mxbtn,body[data-page-family=facility] .mxbtn::before,body[data-page-family=facility] .mxgrid img,body[data-page-family=facility] .mx-acc .bd{transition-duration:.01ms}
}

/* ---------- Rick + Mart call, 2026-10-02: full-colour photos, one hero standard, units list hover ----------
   C2: no colour filter over any photo; a gradient may sit on an edge, never over the whole frame.
   C4, E3: the navy gradient carries the hero copy and stops part-way, so the right of the photo is full colour.
   E7: the units row under the pointer or keyboard focus turns navy with white and orange, and the highlight
   glides between rows (src/facility.js adds .mxrows-live and the .mxrow-hl layer). */
body[data-page-family=facility] .mxh::before{background:linear-gradient(100deg,rgba(0,21,35,.97) 0%,rgba(0,21,35,.93) 32%,rgba(0,21,35,.62) 47%,rgba(0,21,35,0) 63%),linear-gradient(0deg,rgba(0,12,19,.5) 0%,rgba(0,12,19,0) 16%)}
/* Somersworth's hero is Rick's summer still (fix round, 2026-10-02): its roofs are bright where the park's long
   name ends, so its gradient carries a little further. The right quarter of the photo stays full colour. */
@media (max-width:760px){
  /* phones show the photo as a band above the copy; the summer still's buildings sit in its lower half, so the
     photo is fitted to the band instead of the whole hero (otherwise the band shows only the treeline) */
  body[data-page=somersworth] .mxh-media img{top:0;height:40%;object-position:50% 50%}
  /* Anna's drone photo (2026-10-06) sets the park in the middle of open fields: over the whole hero the band above
     the copy showed only grass and a roof edge, so it is fitted to the band the same way and the park shows. The
     kicker always starts 256px down the hero (the crumb, then the 220px gap), but Anna's longer paragraph makes the
     hero 648 to 693px tall, so 40% ran 3 to 21px into the kicker; the band stops at 236px, 20px above it. */
  body[data-page=anna] .mxh-media :is(img,video){top:0;height:min(40%,236px);object-position:50% 50%}
}
@media (min-width:761px) and (max-width:1700px){
  /* Anna on desktop: the shared 64% 62% framing put the end of the park's long right-hand building on the hero's
     bottom edge at 1280 to 1680px. 68% keeps it in frame; the top-left roofs it gives up sit under the navy copy
     gradient. Wider screens keep 62%: at 1920px the hero holds 554 of the frame's 1050 rows and the park needs
     630, so 68% only traded the top building for part of the long one (compared 2026-10-06; an open item). */
  body[data-page=anna] .mxh-media img{object-position:64% 68%}
}
@media (min-width:1101px){
  body[data-page=somersworth] .mxh::before{background:linear-gradient(100deg,rgba(0,21,35,.97) 0%,rgba(0,21,35,.93) 36%,rgba(0,21,35,.74) 52%,rgba(0,21,35,.34) 63%,rgba(0,21,35,0) 74%),linear-gradient(0deg,rgba(0,12,19,.5) 0%,rgba(0,12,19,0) 16%)}
}
body[data-page-family=facility] .mxlead-media img{opacity:1}
body[data-page-family=facility] .mxlead::after{background:linear-gradient(100deg,rgba(0,12,19,.97) 0%,rgba(0,12,19,.9) 34%,rgba(0,12,19,.45) 50%,rgba(0,12,19,0) 64%)}
body[data-page-family=facility] .mxband::after{background:linear-gradient(0deg,rgba(0,12,19,.85) 0%,rgba(0,12,19,.45) 24%,rgba(0,12,19,0) 44%)}
body[data-page-family=facility] .mxunits .mxrows-live{position:relative}
body[data-page-family=facility] .mxrow-hl{position:absolute;left:-14px;right:-14px;top:0;height:0;z-index:0;background:#073257;box-shadow:inset 4px 0 0 var(--mx-orange);opacity:0;pointer-events:none;
  transition:transform .45s var(--mx-ease),height .45s var(--mx-ease),opacity .3s ease}
body[data-page-family=facility] .mxrow-hl.is-on{opacity:1}
body[data-page-family=facility] .mxrows-live .mxtable{position:relative;z-index:1}
body[data-page-family=facility] .mxrows-live .mxtable tbody tr,body[data-page-family=facility] .mxrows-live .mxtable tbody tr:hover{background:none}
body[data-page-family=facility] .mxtable tbody tr{outline:none}
body[data-page-family=facility] .mxtable tbody tr.is-hot>*{color:var(--mx-white)}
body[data-page-family=facility] .mxtable tbody tr.is-hot th.bay{color:var(--mx-orange);transform:translateX(10px)}
body[data-page-family=facility] .mxtable tbody tr:focus-visible{box-shadow:inset 0 0 0 2px var(--mx-orange)}
/* Galleries hold only the park's own photos (E9), so a park can have one to four */
body[data-page-family=facility] .mxgrid.mxgrid-1{grid-template-columns:minmax(0,1fr);grid-template-rows:calc(2 * clamp(220px,20vw,292px) + 18px)}
body[data-page-family=facility] .mxgrid.mxgrid-2{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:calc(2 * clamp(220px,20vw,292px) + 18px)}
body[data-page-family=facility] .mxgrid.mxgrid-3{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
body[data-page-family=facility] :is(.mxgrid-1,.mxgrid-2) .gt:nth-child(n){grid-row:1;grid-column:auto}
body[data-page-family=facility] .mxgrid-3 .gt:nth-child(1){grid-row:1/3;grid-column:1}
body[data-page-family=facility] .mxgrid-3 .gt:nth-child(2){grid-row:1;grid-column:2}
body[data-page-family=facility] .mxgrid-3 .gt:nth-child(3){grid-row:2;grid-column:2}
/* Keep Medford's single approved exterior fully visible at its original 4:3 proportion. */
body[data-page=medford][data-page-family=facility] .mxgal .mxgrid-1{grid-template-rows:auto;max-width:960px;margin:32px auto 0}
body[data-page=medford][data-page-family=facility] .mxgal .gt{aspect-ratio:4/3}
body[data-page=medford][data-page-family=facility] .mxgal .cap{opacity:1;transform:none}
/* Medfield's one gallery photo (Mart, 2026-10-08) at its own 16:9, like Medford's. */
body[data-page=medfield][data-page-family=facility] .mxgal .mxgrid-1{grid-template-rows:auto;max-width:960px;margin:32px auto 0}
body[data-page=medfield][data-page-family=facility] .mxgal .gt{aspect-ratio:1672/941}
body[data-page=medfield][data-page-family=facility] .mxgal .cap{opacity:1;transform:none}
/* the park map's own label on the top edge (the bottom carries Google's logo and terms, which stay visible) */
body[data-page-family=facility] .mxmap-open{position:absolute;left:0;top:0;z-index:2;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;background:var(--mx-navy);color:var(--mx-white);
  font:400 12px/1.2 var(--mx-display);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:background-color .35s ease,color .35s ease}
body[data-page-family=facility] .mxmap-open:hover,body[data-page-family=facility] .mxmap-open:focus-visible{background:var(--mx-orange);color:var(--mx-deep)}
body[data-page-family=facility] :is(.mxnap-phone,.mxnap-site){display:block;width:fit-content}
body[data-page-family=facility] .mxnap-site{margin-top:10px}
@media (min-width:761px) and (max-width:1100px){
  body[data-page-family=facility] .mxh::before{background:linear-gradient(100deg,rgba(0,21,35,.97) 0%,rgba(0,21,35,.9) 46%,rgba(0,21,35,.55) 68%,rgba(0,21,35,0) 88%),linear-gradient(0deg,rgba(0,12,19,.5) 0%,rgba(0,12,19,0) 16%)}
}
@media (max-width:980px){
  /* stacked: the copy and the navy form need the whole width, so the section is plain navy instead of a tinted photo */
  body[data-page-family=facility] .mxlead-media,body[data-page-family=facility] .mxlead::after{display:none}
}
@media (max-width:760px){
  /* the photo shows full colour above the copy; the navy comes in behind the copy only */
  body[data-page-family=facility] .mxh::before{background:linear-gradient(180deg,rgba(0,21,35,.55) 0%,rgba(0,21,35,0) 10%,rgba(0,21,35,0) 21%,rgba(0,21,35,.86) 35%,rgba(0,12,19,.97) 49%)}
  /* Seam sweep (2026-10-12): where the photo is a band above the copy (Melissa, Medford, Anna, Somersworth) the
     navy was only about 88% at the band's bottom, so the photo ended on a hard line across the screen. Its last
     56px now fade out (an edge gradient, rule C2); a photo that fills the hero fades under the 97% navy unseen. */
  body[data-page-family=facility] .mxh-media :is(img,video){-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 56px),transparent)}
  body[data-page-family=facility] .mxh-inner{gap:220px}
  /* longer labels (Join the waitlist, Talk with our team) wrap inside the button instead of clipping */
  body[data-page-family=facility] .mxh-btns .mxbtn{white-space:normal;text-align:center;line-height:1.2;padding-block:8px}
  body[data-page-family=facility] .mxgrid.mxgrid-1,body[data-page-family=facility] .mxgrid.mxgrid-2{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-rows:220px}
  body[data-page-family=facility] :is(.mxgrid-1,.mxgrid-2) .gt:nth-child(n){grid-row:auto;grid-column:1/-1}
  body[data-page-family=facility] .mxgrid.mxgrid-3{grid-template-columns:1fr 1fr}
  body[data-page-family=facility] .mxgrid-3 .gt:nth-child(n){grid-row:auto;grid-column:auto}
  body[data-page-family=facility] .mxgrid-3 .gt:nth-child(1){grid-column:1/-1}
  body[data-page-family=facility] .mxrow-hl{left:-10px;right:-10px}
}
@media (prefers-reduced-motion:reduce){
  body[data-page-family=facility] .mxrow-hl,body[data-page-family=facility] .mxtable tbody tr>*{transition:none}
}

/* ---------- each photo once (2026-10-03 polish, P2 and E9; Rick and Mart call, 2026-10-02) ----------
   The three scrolling bands, the lead band and the plan card used to repeat the hero or gallery photos. Where a park
   has no further photo of its own, a band keeps its caption as a slim bar on the navy (no photo, no wash), the lead
   band sits on the plain navy, and the plan card shows the park's name on Mart's navy X (.uf-noimg, market-continuity.css). */
body[data-page-family=facility] .mxband.mxband-plain{height:auto;min-height:0}
body[data-page-family=facility] .mxband.mxband-plain::after{content:none}
body[data-page-family=facility] .mxband-plain .mxband-cap{position:relative;padding:30px 24px 32px}
body[data-page-family=facility] .mxcard-ph.mxcard-ph-plain{background:#001523}
body[data-page-family=facility] .mxcard-ph-plain>.uf-noimg{position:absolute;inset:0}
body[data-page-family=facility] .mxcard-ph-plain .mxcard-note{display:none}
@media (max-width:560px){
  body[data-page-family=facility] .mxband-plain .mxband-cap{padding:24px 20px 26px}
}

/* ---------- uf-1004 mobile pass (Sun Oct 4, 2026) ----------
   1. Park microsites drop the breadcrumb, so on phones the copy began at the very top of the hero and the
      county line sat on the bright sky (melissaflex at 375x812). The copy now starts under a photo band, as on
      the United Flex park pages, and the photo is fitted to that band so the buildings show.
   2. Medfield's frontage photo showed only sky and cloud on phones; it is fitted to the band like Somersworth's.
   3. Breadcrumb links get a 44px tall tap area without moving anything (PLAYBOOK M1, tap targets). */
@media (max-width:760px){
  body.ufm[data-page-family=facility] .mxh-inner>.mxh-copy:first-child{margin-top:clamp(150px,44vw,210px)}
  body.ufm[data-page-family=facility] .mxh-media :is(img,video){top:0;height:42%;object-position:50% 60%}
  body[data-page=medfield][data-page-family=facility] .mxh-media img{top:0;height:40%;object-position:50% 70%}
  body[data-page-family=facility] .mxh-crumb a{display:inline-block;padding-block:13px;margin-block:-13px}
}

/* ---------- film bands (Rick, Teams 2026-10-06 3:35 PM PT: the bottom four blocks are text heavy, "need some video or
   parralax imagery"; his sample is the patriotholdings.com home page, a full-bleed aerial film with no text on it) ----------
   Two per park page, each between two text blocks: a 10 second clip of the park, edge to edge, muted and looping,
   with Mart's 6px orange rule on top like the photo bands. The box has a fixed height, so the page never shifts when
   the film arrives; the poster (the clip's first frame) holds the navy until then. facility-premium.js loads the clip
   only when the band comes near, plays it while it shows, and drifts it gently as it passes. Anna's bands show
   Melissa (Anna has no footage yet) and say so in the caption, which reuses the photo bands' chip and line. */
body[data-page-family=facility] .mxreel{position:relative;isolation:isolate;overflow:hidden;width:100%;height:clamp(300px,40vw,620px);margin:0;
  background:var(--mx-deep);border-top:6px solid var(--mx-orange);contain:paint}
body[data-page-family=facility] .mxreel-v{position:absolute;left:0;top:-6%;z-index:-1;display:block;width:100%;height:112%;max-width:none;
  object-fit:cover;object-position:50% 40%;background:var(--mx-deep);border-radius:0;pointer-events:none}
body[data-page-family=facility] .mxreel.mxreel-captioned::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(0deg,rgba(0,12,19,.85) 0%,rgba(0,12,19,.45) 24%,rgba(0,12,19,0) 44%)}
@media (max-width:760px){
  body[data-page-family=facility] .mxreel{height:max(220px,56vw)}
  /* On a phone the film is about as tall as the clip itself, so a caption laid over it would hide the park: the
     caption becomes a navy bar under the film, and the film keeps its own fixed box above it. */
  body[data-page-family=facility] .mxreel.mxreel-captioned{height:auto;padding-top:max(220px,56vw)}
  body[data-page-family=facility] .mxreel.mxreel-captioned::after{content:none}
  body[data-page-family=facility] .mxreel-captioned .mxreel-v{top:calc(max(220px,56vw) * -.06);height:calc(max(220px,56vw) * 1.12)}
  body[data-page-family=facility] .mxreel-captioned .mxband-cap{position:relative;background:var(--mx-deep);padding:16px 20px 18px}
  body[data-page-family=facility] .mxreel .mxband-cap span{font-size:14px}
}
/* UF-S04 (2026-10-07): on phones the guide contact card stacks its two buttons in a column with a real gap. The
   site-wide tap-target rule for .mxnap links (site-consistency.css, margin-block:-12px) pulled the second button
   12px up over the first; the buttons carry their own 50px height, so they drop that margin here. */
@media (max-width:760px){
  body[data-page-family=facility] .mxnap-row{flex-direction:column;align-items:stretch;gap:12px}
  body[data-page-family=facility] .mxnap-row .mxbtn{margin:0}
}
/* UF-S05 (2026-10-07): on phones the gallery captions sit on a darker bottom gradient (white type was landing on
   bright sky) and run to two lines at most. The bottom spacing is a border, so the clamp also hides a third line. */
@media (max-width:760px){
  body[data-page-family=facility] .mxgrid .cap{padding:40px 12px 0;border-bottom:12px solid rgba(0,21,35,.72);font-size:12px;letter-spacing:.02em;background:linear-gradient(rgba(0,21,35,0),rgba(0,21,35,.72));display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
  /* .02em, not .06em: SURROUNDINGS in Eurostile Extended Black (2026-10-15) fits a third of a 390px row at 12px */
}

/* ---------- Rick's Melissa review (Teams, 2026-10-07) ----------
   1. 12:46 PM PT: "padding for the hero block is a bit off i.e., text etc is sitting high in the block vs centered".
      On wider screens the copy is centred in the room the hero leaves it: under the breadcrumb row on United Flex,
      the whole hero on a park site (no breadcrumb row there; microsite.css evens its top padding with the bottom).
      Phones keep the photo band above the copy (uf-1004 mobile pass).
   2. 12:44 PM PT: a Tenant Login on each facility page. It ends the breadcrumb row and opens Rent Manager's tenant
      portal in a new tab; its 44px tap area hangs into the padding so the row keeps its height. */
body[data-page-family=facility] .mxh-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px}
body[data-page-family=facility] .mxh-tenant{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-block:-12px;margin-left:auto;font:700 13px/1.3 var(--mx-body);letter-spacing:.02em;color:var(--mx-white);text-decoration:none;white-space:nowrap;transition:color .3s ease}
body[data-page-family=facility] .mxh-tenant svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--mx-orange);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){body[data-page-family=facility] .mxh-tenant:hover{color:var(--mx-orange)}}
body[data-page-family=facility] .mxh-tenant:focus-visible{outline:2px solid var(--mx-orange);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){html.mx-js body[data-page-family=facility] .mxh-tenant{opacity:0}}
@media (prefers-reduced-motion:reduce){body[data-page-family=facility] .mxh-tenant{transition:none}}
@media (min-width:761px){
  body[data-page-family=facility] .mxh-copy{margin-block:auto}
}
/* The link ends the row over the photo, where the hero's navy fades out (as low as 2:1 over bright roofs), so it
   sits on a navy backing at every width (4.5:1 or better on any photo). */
body[data-page-family=facility] .mxh-tenant{margin-block:-8px;padding:0 12px;min-height:36px;background:rgba(0,21,35,.86)}
@media (max-width:760px){
  /* the link sits at the row's right end, out of the flow, so it never moves the copy; the breadcrumb wraps before it */
  body[data-page-family=facility] .mxh-top{position:relative;padding-right:132px}
  body[data-page-family=facility] .mxh-tenant{position:absolute;top:50%;right:0;transform:translateY(-50%);margin:0;min-height:44px}
}

/* ---------- Cheline's review (PDF, 2026-10-09) ----------
   B5 to B8: the features band reads as pairs, a bold value over its label, so all four items share one two-line
   layout (pages that keep a single bold line are unchanged). */
body[data-page-family=facility] .mxfeat-pairs .mxfeat-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
body[data-page-family=facility] .mxfeat-pairs .mxfeat-txt>b{font:700 18px/1.2 var(--mx-body)}
body[data-page-family=facility] .mxfeat-pairs .mxfeat-txt>span{font:400 13px/1.3 var(--mx-body);color:rgba(0,21,35,.8)}
@media (max-width:600px){body[data-page-family=facility] .mxfeat-pairs .mxfeat-txt>b{font-size:15px}body[data-page-family=facility] .mxfeat-pairs .mxfeat-txt>span{font-size:12px}}
/* B13: a status is a small badge, not an orange button: outlined, with a dot; Available in orange, Leased muted. */
body[data-page-family=facility] .mxtable .mxtag{min-height:0;padding:5px 10px 5px 9px;gap:7px;border:1px solid rgba(255,255,255,.28);background:transparent;
  color:rgba(255,255,255,.78);font:400 12px/1.2 var(--mx-display);letter-spacing:.08em;border-radius:999px}
body[data-page-family=facility] .mxtable .mxtag::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
body[data-page-family=facility] .mxtable .mxtag.is-available{border-color:rgba(255,125,1,.6);color:var(--mx-orange)}
body[data-page-family=facility] .mxtable .mxtag.is-leased{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.55)}
/* B14: the monthly rate is plain text, not orange (it is not a link). */
body[data-page-family=facility] .mxtable .rate{font:400 15px/1.3 var(--mx-body);color:rgba(255,255,255,.84)}
/* B11/B16: the wider Melissa table (eight columns) keeps its spec cells compact and its unit numbers on the right. */
body[data-page-family=facility] .mxtable-specs :is(thead th,td,tbody th){padding-inline:10px}
body[data-page-family=facility] .mxtable-specs td{font-size:14px}
body[data-page-family=facility] .mxtable-specs tbody th.bay{font-size:18px}
body[data-page-family=facility] .mxtable-specs td.units{font-size:13px;color:rgba(255,255,255,.72);min-width:0}
/* the status pill may wrap ("AVAILABILITY ON / REQUEST") so the table fits its box from 901 to 1186px (2026-10-21) */
body[data-page-family=facility] .mxtable .mxtag{white-space:normal}
@media (min-width:901px){body[data-page-family=facility] .mxtable-specs :is(thead th:last-child,td.units){text-align:right;padding-right:4px}}
/* B18: under 900px each bay is its own card: the size on top, then its rate, status, specs and units. */
@media (max-width:900px){
  body[data-page-family=facility] .mxtable tbody{display:grid;gap:14px}
  body[data-page-family=facility] .mxtable tbody tr{padding:18px 18px 20px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.035)}
  body[data-page-family=facility] .mxtable tbody th.bay{padding-left:0}
  body[data-page-family=facility] .mxtable-specs td.units{grid-column:1/-1;min-width:0}
  body[data-page-family=facility] .mxtable-specs :is(td,tbody th){padding-inline:0}
  body[data-page-family=facility] .mxtable-specs tbody tr{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
}