/* Park microsite chrome (melissaflex.com and the other local domains). Rick, 2026-10-02 call, 01:45:22:
   "United Flex Parks" plus the park's own mark, a menu of anchor links into the one page, a phone number that
   always shows, and a Get started button that follows on scroll (two CTAs in the page plus this one).
   Loaded last, after the facility template, only on the microsites (scripts/build_microsites.py).
   Visual language: Mart's header (#01141e, the display face, orange #ff7d01, sharp corners);
   the button wipe and press follow the facility template's Fund VI grammar. */

body.ufm{--ufm-bar:76px;--ufm-top:0px;--ufm-h:calc(var(--ufm-bar) + var(--ufm-top));--ufm-ease:cubic-bezier(.22,1,.36,1)}
body.ufm.ufm-top-on{--ufm-top:36px}
@media (max-width:1239px){body.ufm,body.ufm.ufm-top-on{--ufm-bar:72px;--ufm-top:0px}}
@media (max-width:599px){body.ufm,body.ufm.ufm-top-on{--ufm-bar:64px}}

/* ---------- sticky header: always in view (the facility engine's tuck-away is switched off here) ---------- */
body.ufm .uf-header.ufm-header{position:sticky;top:0;z-index:100;background:#01141e;border:0;box-shadow:inset 0 -1px rgba(255,255,255,.07)}
body.uf-site.ufm[data-page-family] .uf-header.ufm-header.mx-hdr-hide{transform:none}
body.ufm .ufm-bar{position:relative;display:flex;align-items:center;gap:clamp(16px,2vw,32px);box-sizing:border-box;width:100%;
  max-width:calc(var(--uf-width,1208px) + var(--uf-gutter,24px) * 2);height:var(--ufm-bar);margin-inline:auto;padding-inline:var(--uf-gutter,24px)}
/* anchors land 16px below the sticky header. Native jumps (reduced motion, no JavaScript) use scroll-margin;
   while Lenis runs (html.lenis) the scripts pass the header offset themselves, and Lenis 1.3 also subtracts any
   CSS scroll-margin and root scroll-padding, so both are zero then. The main site's html scroll-padding (104px,
   sized for its own header) never applies here. */
html[data-ufm]{scroll-padding-top:0}
body.ufm main [id]{scroll-margin-top:calc(var(--ufm-h) + 16px)}
html.lenis body.ufm main [id]{scroll-margin-top:0}

/* toolbar (desktop): the park and its address, then the number to call and the email */
body.ufm .ufm-top{height:var(--ufm-top);background:#000c13;color:rgba(255,253,252,.78);font:400 13px/1 var(--uf-body);letter-spacing:.02em}
body.ufm .ufm-top-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;box-sizing:border-box;height:100%;
  max-width:calc(var(--uf-width,1208px) + var(--uf-gutter,24px) * 2);margin-inline:auto;padding-inline:var(--uf-gutter,24px)}
body.ufm .ufm-top-place{display:flex;align-items:center;gap:10px;margin:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.ufm .ufm-top-place b{font:400 11px/1 var(--uf-display);letter-spacing:.16em;text-transform:uppercase;color:#ff7d01}
body.ufm .ufm-top-place span{color:rgba(255,255,255,.4)}
body.ufm .ufm-top-contact{display:flex;align-items:center;gap:26px;flex:none}
/* UF-19 (2026-10-03 audit): was 32px, under the 44px tap-target floor. */
body.ufm .ufm-top-contact a{display:inline-flex;align-items:center;gap:9px;min-height:44px;color:#fffdfc;text-decoration:none;white-space:nowrap;transition:color .3s var(--ufm-ease)}
body.ufm .ufm-top-contact b{font-weight:700;color:#ff7d01}
body.ufm .ufm-top-contact svg{width:16px;height:16px;fill:none;stroke:#ff7d01;stroke-width:1.8;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){body.ufm .ufm-top-contact a:hover{color:#ff7d01}}
body.ufm .ufm-top-contact a:focus-visible{outline:2px solid #ff7d01;outline-offset:2px}
@media (max-width:1239px){body.ufm .ufm-top{display:none}}

/* lockup: United Flex Parks logo, a hairline, the park's mark (src/microsite/lockup.html) */
body.ufm .ufm-lockup{display:flex;align-items:center;gap:16px;flex:none;color:#fffdfc;text-decoration:none}
body.ufm .ufm-lockup-brand{display:block;width:150px;max-width:none;height:auto}
body.ufm .ufm-lockup-rule{display:block;flex:none;width:1px;height:34px;background:rgba(255,255,255,.32)}
body.ufm .ufm-local{display:block;padding-top:3px;font:400 19px/1 var(--uf-display);letter-spacing:.16em;text-transform:uppercase;color:#fffdfc;white-space:nowrap}
body.ufm .ufm-local-img{display:block;width:auto;height:36px;max-width:180px}
body.ufm .ufm-lockup-art{display:block;width:auto;height:54px;max-width:none}
body.ufm .ufm-lockup:focus-visible{outline:2px solid #ff7d01;outline-offset:6px}

/* in-page menu */
body.ufm .ufm-header .ufm-nav{position:static;inset:auto;display:flex;flex:1 1 auto;align-items:center;justify-content:center;gap:clamp(14px,1.5vw,24px);
  min-width:0;max-height:none;margin:0;padding:0;overflow:visible;background:none;border:0;box-shadow:none}
body.ufm .ufm-header .ufm-nav>a{position:relative;display:flex;align-items:center;min-height:44px;padding:0;font:700 14px/1.3 var(--uf-body);color:#fffdfc;text-decoration:none;white-space:nowrap;border:0}
body.ufm .ufm-header .ufm-nav>a::after{content:"";position:absolute;left:0;right:0;bottom:6px;width:auto;height:2px;background:#ff7d01;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ufm-ease)}
body.ufm .ufm-header .ufm-nav>a:is(:hover,:focus-visible,.is-active){color:#ff7d01}
body.ufm .ufm-header .ufm-nav>a:is(:hover,:focus-visible,.is-active)::after{transform:scaleX(1)}
body.ufm .ufm-header .ufm-nav>a:focus-visible{outline:2px solid #ff7d01;outline-offset:4px}
body.ufm .ufm-nav-contact{display:none}

/* always-visible contact and the Get started that follows */
body.ufm .ufm-actions{display:flex;align-items:center;gap:14px;flex:none;margin-left:auto}
body.ufm .ufm-call{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:#fffdfc;text-decoration:none}
body.ufm .ufm-call svg{flex:none;box-sizing:border-box;width:44px;height:44px;padding:11px;border:1px solid rgba(255,255,255,.28);fill:none;stroke:#ff7d01;stroke-width:1.7;stroke-linejoin:round;
  transition:background-color .35s var(--ufm-ease),border-color .35s var(--ufm-ease),stroke .35s var(--ufm-ease)}
body.ufm .ufm-call-text{display:flex;flex-direction:column;gap:4px;font:700 15px/1.1 var(--uf-body);letter-spacing:.01em;white-space:nowrap}
body.ufm .ufm-call-text small{font:400 10px/1 var(--uf-display);letter-spacing:.16em;text-transform:uppercase;color:#ff7d01}
body.ufm.ufm-top-on .ufm-actions .ufm-call{display:none}
body.ufm .ufm-call-email .ufm-call-text{display:none}
body.ufm .ufm-call:focus-visible{outline:2px solid #ff7d01;outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  body.ufm .ufm-call:hover svg{background:#ff7d01;border-color:#ff7d01;stroke:#01141e}
}

/* Get started: the main header's button ("Find a bay"): orange, navy Helvetica bold, the left diagonal cut */
body.ufm .ufm-cta{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:12px;flex:none;box-sizing:border-box;min-height:48px;padding:0 21px 0 27px;
  background:#ff7d01;color:#001523;font:700 13px/1 var(--uf-body);letter-spacing:.01em;text-decoration:none;white-space:nowrap;clip-path:polygon(17px 0,100% 0,100% 100%,0 100%);
  transition:color .45s var(--ufm-ease),transform .16s ease-out}
body.ufm .ufm-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:#fffdfc;transform:translateX(-102%);transition:transform .65s var(--ufm-ease)}
/* The main site's button arrow (shell-polish.css .uf-button svg): 20px, 2.2 stroke, square ends, mitred corner. */
body.ufm .ufm-cta svg{display:block;flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ufm-ease)}
@media (hover:hover) and (pointer:fine){
  body.ufm .ufm-cta:hover::before{transform:none}
  body.ufm .ufm-cta:hover svg{transform:translate(2px,-2px)}
}
body.ufm .ufm-cta:focus-visible{outline:2px solid #fffdfc;outline-offset:3px}
body.ufm .ufm-cta:active{transform:scale(.98)}
body.ufm .ufm-header .ufm-toggle{display:none}

/* ---------- compact header (tablets and phones): lockup, contact, Get started, menu ---------- */
@media (max-width:1239px){
  body.ufm .ufm-lockup-brand{width:132px}
  body.ufm .ufm-local{font-size:16px}
  body.ufm .ufm-lockup-rule{height:28px}
  /* the menu button sits before the menu in the markup (keyboard order: button, then the open panel) and at the
     right end of the bar on screen */
  body.ufm .ufm-header .ufm-toggle{order:1;display:block;flex:none;width:44px;height:44px;margin:0 -8px 0 0;padding:11px 8px}
  body.ufm .ufm-header .ufm-toggle:focus-visible{outline:2px solid #ff7d01;outline-offset:2px}
  body.ufm .ufm-header .ufm-nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    max-height:calc(100dvh - var(--ufm-h));padding:6px var(--uf-gutter,24px) 26px;overflow:auto;overscroll-behavior:contain;background:#01141e;
    box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 28px 44px rgba(0,0,0,.42)}
  body.ufm .ufm-header .ufm-nav.is-open{display:flex}
  body.ufm .ufm-header .ufm-nav>a{min-height:54px;padding:0;font-size:17px;border-bottom:1px solid rgba(255,255,255,.09)}
  body.ufm .ufm-header .ufm-nav>a::after{right:auto;width:26px;bottom:9px}
  body.ufm .ufm-nav-contact{display:grid;gap:2px;padding-top:14px}
  body.ufm .ufm-nav-contact a{display:flex;align-items:center;gap:14px;min-height:48px;color:#fffdfc;text-decoration:none;font:400 16px/1.3 var(--uf-body);overflow-wrap:anywhere}
  body.ufm .ufm-nav-contact svg{flex:none;width:22px;height:22px;fill:none;stroke:#ff7d01;stroke-width:1.7;stroke-linejoin:round}
  body.ufm .ufm-nav-contact a:focus-visible{outline:2px solid #ff7d01;outline-offset:2px}
  body.ufm .ufm-actions{gap:10px}
  body.ufm.ufm-top-on .ufm-actions .ufm-call{display:inline-flex}
  body.ufm .ufm-call-text{display:none}
}
/* The number beside the call icon from 820px (was 700px): at 768 the waitlist parks' longer "Join the waitlist" label
   plus the number pushed the menu button 15px past the edge (Medford, live QA 2026-10-14). Below 820 the icon stays. */
@media (min-width:820px) and (max-width:1239px){
  body.ufm .ufm-call:not(.ufm-call-email) .ufm-call-text{display:flex}
}
/* Medford's wide name still pushed the menu button up to 24px past the edge from 820 to 847px (measured 2026-10-21):
   the icon alone there, the number from 848px. */
@media (min-width:820px) and (max-width:847px){
  html[data-ufm=medford] body.ufm .ufm-call:not(.ufm-call-email) .ufm-call-text{display:none}
}
/* Up to 679px (was 599px): Medford's wide name plus the call button and "Join the waitlist" overflowed by 28px at 600
   (live QA 2026-10-14), so the lockup stacks a little earlier. */
@media (max-width:679px){
  body.ufm .ufm-bar{gap:8px}
  /* the lockup stacks so the phone, Get started and the menu button fit at 360px */
  body.ufm .ufm-lockup{flex-direction:column;align-items:flex-start;justify-content:center;gap:5px}
  body.ufm .ufm-lockup-brand{width:104px}
  body.ufm .ufm-lockup-rule{display:none}
  /* UF-19 (2026-10-03 audit): was 10px, under the 12px floor. */
  body.ufm .ufm-local{padding:0;font-size:12px;letter-spacing:.42em}
  body.ufm .ufm-local-img{height:14px;max-width:104px}
  body.ufm .ufm-lockup-art{height:40px}
  body.ufm .ufm-actions{gap:6px}
  body.ufm .ufm-cta{min-height:44px;padding:0 10px 0 17px;gap:0;font-size:13px;clip-path:polygon(12px 0,100% 0,100% 100%,0 100%)}
  body.ufm .ufm-cta svg{display:none}
}
@media (max-width:399px){
  /* The website number's call button (2026-10-07) sits beside Get started or Join the waitlist and the menu: tighter
     gaps and button padding keep all three inside 360px, the longer waitlist label included. Up to 399px since the
     live QA of 2026-10-14 found the waitlist parks 2 to 7px over at 380 to 385px. */
  body.ufm .ufm-bar{gap:4px}
  body.ufm .ufm-actions{gap:4px}
  body.ufm .ufm-cta{padding:0 7px 0 13px}
  /* Live QA 2026-10-14: the waitlist label still put the menu button past a 360px screen (Anna, Medford). */
  body.ufm .ufm-lockup-brand{width:92px}
  body.ufm .ufm-local-img{max-width:92px}
  body.ufm .ufm-local{letter-spacing:.3em}
}
@media (max-width:359px){
  /* Email remains in the menu and footer; keep the primary action and menu inside the smallest viewport. The call
     button steps aside the same way; the number stays in the menu, the contact blocks and the footer. */
  body.ufm.ufm-top-on .ufm-actions .ufm-call,body.ufm .ufm-actions .ufm-call{display:none}
}
/* Long park marks (header fit check, 2026-10-07): with the call button in the bar, New Fairfield, Somersworth and
   Westmoreland pushed the menu button off a phone (up to 31px at 360px) and off a small tablet (up to 58px at
   700px). Their mark tracks tighter on phones and stacks under the logo on small tablets, so the call button,
   Get started and the menu stay in the bar. Medford's longer Join the waitlist label stacks it from 680 (700 before
   the Eurostile swap of 2026-10-15) to 729px.
   Every other park, and every width outside these ranges, is unchanged. A new park whose mark is longer than ten
   letters joins this list (measure it at 360 and 700px first). */
@media (max-width:429px){
  html:is([data-ufm=newfairfield],[data-ufm=somersworth],[data-ufm=westmoreland]) body.ufm .ufm-local{letter-spacing:.1em}
}
@media (min-width:600px) and (max-width:779px){
  html:is([data-ufm=newfairfield],[data-ufm=somersworth],[data-ufm=westmoreland]) body.ufm .ufm-lockup{flex-direction:column;align-items:flex-start;justify-content:center;gap:5px}
  html:is([data-ufm=newfairfield],[data-ufm=somersworth],[data-ufm=westmoreland]) body.ufm .ufm-lockup-rule{display:none}
  html:is([data-ufm=newfairfield],[data-ufm=somersworth],[data-ufm=westmoreland]) body.ufm .ufm-local{padding:0}
}
@media (min-width:680px) and (max-width:729px){
  html[data-ufm=medford] body.ufm .ufm-lockup{flex-direction:column;align-items:flex-start;justify-content:center;gap:5px}
  html[data-ufm=medford] body.ufm .ufm-lockup-rule{display:none}
  html[data-ufm=medford] body.ufm .ufm-local{padding:0}
}

/* Eurostile Extended Black (2026-10-15) sets about 27% wider than Saira, so on phones the park name tracks tighter and
   the bar's button label breaks into two lines (GET / STARTED, JOIN THE / WAITLIST) inside the same 44px button: it is
   then as wide as its longest word, narrower than the one-line Saira label at the same size. The call button, the
   label and the menu button all stay in the bar, and nothing gets smaller. */
@media (max-width:679px){
  body.ufm .ufm-local{letter-spacing:.2em}
}
@media (max-width:599px){
  body.ufm .ufm-cta{width:min-content;white-space:normal;line-height:1.1;text-align:left}
  html:is([data-ufm=newfairfield],[data-ufm=somersworth],[data-ufm=westmoreland]) body.ufm .ufm-local{letter-spacing:0}
}
@media (max-width:399px){
  body.ufm .ufm-local{letter-spacing:.08em}
  html:is([data-ufm=newfairfield],[data-ufm=somersworth],[data-ufm=westmoreland]) body.ufm .ufm-local{letter-spacing:0}
}
/* WESTMORELAND, the longest mark, was 4px over at 360px: the button's right padding and the bar's gaps give it back. */
@media (max-width:379px){
  body.ufm .ufm-bar,body.ufm .ufm-actions{gap:2px}
  body.ufm .ufm-cta{padding-right:4px}
}

/* ---------- page details on the microsite ---------- */
/* a media tab removed by the park's JSON (footage of another park) leaves the others full width */
body.ufm .mxgal .mtabs[data-ufm-tabs="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
body.ufm .mxgal .mtabs[data-ufm-tabs="1"]{display:none}

/* ---------- footer: the park, its contact, United Flex Parks (backlink) and the park's legal pages ---------- */
body.ufm .ufm-footer-contact :is(a,address){font-size:15px;line-height:1.45}
body.ufm .ufm-footer-contact address{display:block;padding:7px 0;font-style:normal;letter-spacing:.02em;color:#fffdfc}
body.ufm .ufm-footer-contact a{overflow-wrap:normal;word-break:normal}
body.ufm .ufm-footer-parent h2{margin:0 0 18px;color:#fffdfc;letter-spacing:.02em}
body.ufm .ufm-footer-parent .uf-footer-note{max-width:420px;margin:0 0 28px}
body.uf-site.ufm .uf-footer a.ufm-parent-link{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:12px;width:fit-content;min-height:56px;padding:0 24px;
  background:#ff7d01;color:#021321;font:700 15px/1.2 var(--uf-body);letter-spacing:.01em;text-decoration:none;white-space:nowrap;transition:color .45s var(--ufm-ease),transform .16s ease-out}
body.uf-site.ufm .uf-footer a.ufm-parent-link::before{content:"";position:absolute;inset:0;z-index:-1;background:#fffdfc;transform:translateX(-102%);transition:transform .65s var(--ufm-ease)}
/* one arrow on every button (Saqib, 2026-10-13): the shared action icon and its stroke, here and on the sticky button */
body.uf-site.ufm .uf-footer a.ufm-parent-link svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){
  body.uf-site.ufm .uf-footer a.ufm-parent-link:hover{color:#021321}
  body.uf-site.ufm .uf-footer a.ufm-parent-link:hover::before{transform:none}
}
body.uf-site.ufm .uf-footer a.ufm-parent-link:focus-visible{outline:2px solid #fffdfc;outline-offset:3px;color:#021321}
body.uf-site.ufm .uf-footer a.ufm-parent-link:active{transform:scale(.98)}
@media (max-width:1099px){body.ufm .ufm-footer-parent{margin-top:52px}}

/* ---------- legal pages: a park's own site shows no photo of another building, so the shared editorial
   hero keeps Mart's navy and orange chevron without the stock warehouse photograph behind it ---------- */
body.uf-site.ufm[data-page-family=legal] :is(.phero,.uf-editorial .uf-ed-hero){background-image:none;background-color:#011b2b}

/* ---------- 404 ---------- */
body.ufm .ufm-404{background:#001523;color:#fffdfc;padding:clamp(88px,12vw,168px) 0}
body.ufm .ufm-404 .mxh2{margin:0 0 22px;color:#fffdfc;max-width:14ch}
body.ufm .ufm-404 .mxkicker{color:#ff7d01}
body.ufm .ufm-404-lede{max-width:40ch;margin:0 0 34px;font:400 18px/1.55 var(--uf-body);color:rgba(255,255,255,.8)}
body.ufm .ufm-404-acts{display:flex;flex-wrap:wrap;gap:14px}

@media (prefers-reduced-motion:reduce){
  body.ufm :is(.ufm-cta,.ufm-cta::before,.ufm-cta svg,.ufm-call svg,.ufm-nav>a::after,.ufm-top-contact a,.uf-footer a.ufm-parent-link,.uf-footer a.ufm-parent-link::before){transition:none}
  body.ufm .ufm-cta:active,body.uf-site.ufm .uf-footer a.ufm-parent-link:active{transform:none}
}

/* uf-1004 mobile pass (Sun Oct 4, 2026): on a phone the hero already shows Get started and a second button, so
   the header Get started steps aside while the hero is on screen (PLAYBOOK M6: two calls to action above the
   fold, not three). It comes back as soon as the hero scrolls away. The email button stays (M15). Without
   JavaScript the class is never set and the header keeps its button. */
@media (max-width:767px){
  body.ufm.ufm-hero-in .ufm-actions .ufm-cta{visibility:hidden;opacity:0;pointer-events:none}
  body.ufm .ufm-actions .ufm-cta{transition:opacity .3s ease,visibility .3s ease}
}

/* Rick, Teams 2026-10-07: the hero copy is centred (12:46 PM PT; facility-premium.css centres it, and with no
   breadcrumb row on a park site the top padding matches the bottom), and the top bar ends with the Rent Manager
   tenant login (12:45 PM PT), set apart from the number and email by a hairline. */
@media (min-width:761px){body.ufm[data-page-family=facility] .mxh-inner{padding-top:clamp(56px,8vh,92px)}}
body.ufm .ufm-top-contact .ufm-top-login{position:relative}
body.ufm .ufm-top-contact .ufm-top-login::before{content:"";position:absolute;left:-13px;top:50%;height:16px;transform:translateY(-50%);border-left:1px solid rgba(255,255,255,.18)}
body.ufm .ufm-top-contact .ufm-top-login:first-child::before{content:none}
body.ufm :is(.ufm-top-contact,.ufm-nav-contact) svg{stroke-linecap:round}

/* Cheline's review (PDF, 2026-10-09, B2): one button style. The header's Get Started had the body face in sentence
   case beside the hero's display-face capitals; it now uses the same face, size and capitals as every page button. */
body.ufm .ufm-cta{font:400 13px/1.2 var(--uf-display);letter-spacing:.1em;text-transform:uppercase}
/* Phones: the capitals run wider than the old sentence-case label, so the header button tightens its tracking and size
   to keep the logo, call button, Get Started and menu inside 360px. */
@media (max-width:600px){body.ufm .ufm-cta{font-size:11px;letter-spacing:.05em}}
@media (max-width:379px){body.ufm .ufm-cta{font-size:10.5px;letter-spacing:.03em;padding:0 8px 0 15px}}