/* SMART Property Management theme. Component styles on top of theme.json tokens.
   Rules for this site: body text never under 1.1rem on phones, buttons at least 56px tall,
   the phone number visible in the header on every screen, nothing that needs a hover. */
:root{--r:var(--wp--custom--radius,14px);--rb:var(--wp--custom--radius-button,12px);--shadow:var(--wp--custom--shadow,none)}
body{-webkit-font-smoothing:antialiased}
a:focus-visible,button:focus-visible,input:focus-visible{outline:4px solid var(--wp--preset--color--accent);outline-offset:3px}
.eyebrow{font-size:1rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--wp--preset--color--ink-2);margin:0 0 .5rem}
.lead{font-size:1.25rem;color:var(--wp--preset--color--ink-2);max-width:40ch}
.muted{color:var(--wp--preset--color--ink-2)}.small{font-size:1.0625rem}
h1,h2,h3{text-wrap:balance}
/* header */
/* ---- Site header ------------------------------------------------------
   Sticky, high contrast, large targets. Mark Hall is legally blind and both
   owners are around 70: nothing here shrinks below 16px and no control is
   under 56px. The login buttons stay visible on every screen size (contract
   term), moving to their own row on phones rather than being hidden. */
/* The frosted layer lives on a pseudo-element, NOT on .site-header itself.
   backdrop-filter creates a containing block for position:fixed descendants, and
   the mobile menu overlay is fixed, putting the filter on the header trapped the
   whole menu inside the header box. */
.site-header{position:relative;isolation:isolate;background:transparent;border-bottom:1px solid var(--wp--preset--color--line);padding:0 1rem;transition:box-shadow .28s ease}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:color-mix(in srgb,var(--wp--preset--color--base) 95%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.site-header::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--wp--preset--color--green) 0%,var(--wp--preset--color--accent) 100%)}
.site-header.is-stuck{box-shadow:0 10px 30px rgba(11,31,58,.10)}
.site-header__row{align-items:center;gap:1.25rem;min-height:96px}

.site-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit;flex:0 0 auto}
.site-brand__mark{height:80px;width:auto;display:block}
.site-brand__txt{display:flex;flex-direction:column;line-height:1.08}
.site-brand__txt b{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--wp--preset--color--ink)}
.site-brand__txt span{font-size:1rem;font-weight:600;color:var(--wp--preset--color--ink-2)}

.site-nav .wp-block-navigation-item__content{position:relative;font-size:1.0625rem;font-weight:600;padding:.35rem 0;text-decoration:none}
.site-nav .wp-block-navigation-item__content::after{content:"";position:absolute;left:0;right:100%;bottom:.1rem;height:2px;border-radius:2px;background:var(--wp--preset--color--accent);transition:right .22s cubic-bezier(.4,0,.2,1)}
.site-nav .wp-block-navigation-item__content:hover::after,.site-nav .wp-block-navigation-item__content:focus-visible::after,.site-nav .current-menu-item>.wp-block-navigation-item__content::after{right:0}

.site-header__actions{gap:.5rem;align-items:center;flex:0 0 auto}
.btn{margin:0}
.btn a{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:56px;padding:0 1.2rem;border-radius:999px;font-weight:700;font-size:1.0625rem;text-decoration:none;white-space:nowrap;border:2px solid var(--wp--preset--color--line);color:var(--wp--preset--color--ink);transition:border-color .2s ease,background .2s ease,transform .1s ease}
.btn a:hover{border-color:var(--wp--preset--color--primary)}
.btn a:active{transform:translateY(1px)}
.btn-accent a{background:var(--wp--preset--color--accent);color:#fff;border-color:transparent;font-size:1.1875rem;font-weight:800;box-shadow:0 8px 22px color-mix(in srgb,var(--wp--preset--color--accent) 36%,transparent)}
.btn-accent a:hover{border-color:transparent;filter:brightness(1.06)}
.tel-icon{flex:0 0 auto}

/* Phones: logins get their own full-width row under the bar, so they are never hidden. */
.site-logins-mobile{display:none}
@media(max-width:900px){
  .site-header__row{min-height:92px;gap:.5rem}
  .site-brand__mark{height:80px}
  .site-brand__txt b{font-size:1.25rem}
  .site-header__actions .login-btn{display:none}
  .btn a{min-height:52px;padding:0 1rem}
  .site-logins-mobile{display:flex;gap:.5rem;padding:.6rem 1rem;border-bottom:1px solid var(--wp--preset--color--line)}
  .site-logins-mobile a{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;min-height:56px;border-radius:999px;border:2px solid var(--wp--preset--color--line);background:var(--wp--preset--color--base);font-weight:700;font-size:1.0625rem;text-decoration:none;color:var(--wp--preset--color--ink)}
}

/* hero */
.hero{padding:3rem 0 1rem}
.hero__title{max-width:16ch}
/* doors */
.doors{gap:1rem}
.door{background:var(--wp--preset--color--panel);border:1.5px solid var(--wp--preset--color--line);border-radius:var(--r);padding:1.75rem;box-shadow:var(--shadow)}
.door--owner{border-color:var(--wp--preset--color--accent)}.door--owner .eyebrow{color:var(--wp--preset--color--accent)}
.door--tenant{border-color:var(--wp--preset--color--green)}.door--tenant .eyebrow{color:var(--wp--preset--color--green)}
.arrow-list{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.5rem;font-weight:600}
.arrow-list li::before{content:"→ ";color:var(--wp--preset--color--ink-2)}
.arrow-list a{text-decoration:none;color:var(--wp--preset--color--ink)}
/* trust */
.trust{border-top:1px solid var(--wp--preset--color--line);border-bottom:1px solid var(--wp--preset--color--line);padding:2rem 0;margin:2rem 0}
.stat{margin:0}.stat strong{display:block;font-size:2.5rem;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--wp--preset--color--primary)}
.stat span{color:var(--wp--preset--color--ink-2);font-size:1.0625rem}
/* sections */
.section{padding:3rem 0}
.tiles,.steps,.reviews,.team{gap:1rem}
.tile,.step,.review,.person{background:var(--wp--preset--color--panel);border:1px solid var(--wp--preset--color--line);border-radius:var(--r);padding:1.5rem}
.steps{counter-reset:s}.step{position:relative}.step::before{counter-increment:s;content:counter(s);position:absolute;top:1rem;right:1.25rem;font-size:2.5rem;font-weight:800;color:var(--wp--preset--color--accent-soft);line-height:1}
.stars{color:var(--wp--preset--color--accent);letter-spacing:2px;margin:0 0 .5rem}
.person__photo img{width:120px;height:120px;border-radius:24px;object-fit:cover;background:var(--wp--preset--color--panel)}
/* quote */
.quote{background:var(--wp--preset--color--primary);color:var(--wp--preset--color--contrast);border-radius:28px;padding:2.5rem 1.75rem;margin:1rem 0}
.quote .eyebrow,.quote .lead{color:color-mix(in srgb,var(--wp--preset--color--contrast) 80%,transparent)}
.quote h2{color:var(--wp--preset--color--contrast)}
.quote__form{background:color-mix(in srgb,var(--wp--preset--color--contrast) 10%,transparent);border:1px solid color-mix(in srgb,var(--wp--preset--color--contrast) 20%,transparent);border-radius:20px;padding:1.4rem}
.quote__form input,.quote__form textarea{width:100%;min-height:52px;border-radius:12px;border:1px solid var(--wp--preset--color--line);padding:0 .9rem;font:inherit}
.form-note{font-size:1.0625rem;opacity:.85}
/* contact */
.addr{border-left:6px solid var(--wp--preset--color--accent);padding-left:1.1rem}
.addr--call{border-left:0;background:var(--wp--preset--color--accent-soft);border-radius:var(--r);padding:1.25rem}
.addr__big a{font-size:1.75rem;font-weight:800;letter-spacing:-.02em;text-decoration:none}
/* app tiles (tenants hub) */
.app-tiles{gap:.9rem}.app-tile{background:var(--wp--preset--color--panel);border:1px solid var(--wp--preset--color--line);border-radius:var(--r);padding:1.25rem;min-height:120px}
.app-tile a{text-decoration:none;color:inherit;display:block}.app-tile--accent{background:var(--wp--preset--color--accent);color:var(--wp--preset--color--contrast)}
/* footer */
.site-footer{border-top:1px solid var(--wp--preset--color--line);padding:2.5rem 1rem 3rem;color:var(--wp--preset--color--ink-2)}
.footer-phone a{font-size:1.5rem;font-weight:800;text-decoration:none;color:var(--wp--preset--color--ink)}
.site-footer__bottom{margin-top:1.5rem;font-size:1rem;flex-wrap:wrap;gap:1rem}
/* buttons */
.wp-block-button__link{min-height:56px;display:inline-flex;align-items:center}
.is-style-outline .wp-block-button__link{border:2px solid var(--wp--preset--color--line);color:var(--wp--preset--color--ink);background:transparent}
/* phones */
@media(max-width:781px){.wp-block-columns{gap:1rem}.hero{padding-top:2rem}.stat strong{font-size:2rem}.section{padding:2rem 0}.wp-block-column{flex-basis:100%!important}}
/* look E: reveal on scroll, visible by default, off under reduced motion */
.look-e.motion .section,.look-e.motion .door,.look-e.motion .stat{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.look-e.motion .in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Touch targets: the nav toggle ships at 24px; house rule is 56px minimum. */
/* Menu button.
   WordPress core draws this as two thin rules (literally two <path> rects), which
   reads as a default and not as a control. The svg is hidden and the button is
   redrawn as a glass chip matching the cards: three lines, the middle one short and
   in the brand accent, which extends to full width on hover, focus and when open.
   Done with pseudo-elements so no core markup is filtered and a WordPress update
   cannot break it. 56px square keeps the touch target at the size the rest of the
   site uses. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close{min-width:56px;min-height:56px;display:inline-flex;align-items:center;justify-content:center}
.site-header .wp-block-navigation__responsive-container-open{
  position:relative;width:auto;min-width:56px;height:auto;min-height:56px;
  flex-direction:column;gap:6px;padding:10px 12px;border-radius:16px;
  background:var(--glass-bg);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  box-shadow:var(--glass-shine),0 1px 6px rgba(15,23,32,.06);
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.site-header .wp-block-navigation__responsive-container-open svg{display:none}
/* All three rules are painted on one 22x14 element as background gradients, so the
   block occupies real height and the word underneath cannot be struck through by a
   box-shadow that the layout knows nothing about. Middle rule short and in orange. */
.site-header .wp-block-navigation__responsive-container-open::before{
  content:"";display:block;width:22px;height:14px;
  background-image:
    linear-gradient(var(--wp--preset--color--primary),var(--wp--preset--color--primary)),
    linear-gradient(var(--wp--preset--color--accent),var(--wp--preset--color--accent)),
    linear-gradient(var(--wp--preset--color--primary),var(--wp--preset--color--primary));
  background-size:22px 2px, 11px 2px, 22px 2px;
  background-position:0 0, 0 6px, 0 12px;
  background-repeat:no-repeat;
  transition:background-size .24s cubic-bezier(.4,0,.2,1)}
.site-header .wp-block-navigation__responsive-container-open:hover,
.site-header .wp-block-navigation__responsive-container-open:focus-visible{
  transform:translateY(-1px);border-color:color-mix(in srgb,var(--wp--preset--color--accent) 45%,transparent);
  box-shadow:var(--glass-shine),0 4px 14px rgba(15,23,32,.12)}
.site-header .wp-block-navigation__responsive-container-open:hover::before,
.site-header .wp-block-navigation__responsive-container-open:focus-visible::before{
  background-size:22px 2px, 22px 2px, 22px 2px}
.site-header .wp-block-navigation__responsive-container-open:active{transform:translateY(0)}
/* The close control gets the same chip so the two read as one control. */
.site-header .wp-block-navigation__responsive-container-close{
  width:56px;height:56px;border-radius:16px;
  background:var(--glass-bg);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%)}
.site-header .wp-block-navigation__responsive-container-close svg{width:26px;height:26px}
@media (prefers-reduced-motion: reduce){
  .site-header .wp-block-navigation__responsive-container-open,
  .site-header .wp-block-navigation__responsive-container-open::before{transition:none}
}

/* Nav gets its own row on desktop. Brand + two login buttons + a phone number
   big enough to read will not share 1280px with six real nav labels, and the
   answer is more room, not smaller type. */
.site-header__navrow{align-items:center;gap:0;min-height:48px;border-top:1px solid var(--wp--preset--color--line)}
.site-header .site-nav--desktop{display:flex}
.site-header .site-nav--mobile{display:none}
.site-header__navrow .wp-block-navigation{gap:clamp(1rem,2.2vw,2.25rem)}
@media(max-width:900px){
  .site-header .site-header__row{padding-inline:1rem}
  .site-header__navrow{display:none}
  .site-header .site-nav--mobile{display:flex}
  .site-header .site-nav--desktop{display:none}
}

/* Small phones: the header row is over budget.
   An 80px logo (136px wide), a 56px menu chip and the full phone number come to
   ~360px before any gaps, against ~350px of usable width at 393px. margin-inline:auto
   was centring the chip regardless, which pushed it 18px INTO the logo at 393px and
   48px at 360px. Space it honestly instead and let the phone pill be the thing that
   gives: its icon goes first, then its padding. The number itself stays full size, Mark Hall is legally blind and it is the primary conversion path. */
@media(max-width:430px){
  .site-header .site-header__row{padding-inline:1rem;gap:.5rem;justify-content:space-between;flex-wrap:nowrap}
  .site-header .site-brand{flex:0 0 auto}
  .site-header .site-nav--mobile{flex:0 0 auto;margin-inline:0}
  .site-header .tel-btn{flex:0 1 auto;min-width:0}
  .site-header .tel-btn a{white-space:nowrap}
}
@media(max-width:400px){
  .site-header .tel-icon{display:none}
  .site-header .tel-btn a{padding-inline:.8rem}
}
@media(max-width:380px){
  .site-header .site-header__row{gap:.35rem}
  .site-header .tel-btn a{padding-inline:.6rem}
}

/* One-line nav sits centred under the brand row. */
.site-header__navrow{justify-content:center}
.site-header .site-nav--desktop{flex:0 1 auto;justify-content:center}

/* A constrained group gives any max-width child automatic side margins, which was
   centring the intro paragraph under a left-aligned heading. Keep it left. */
/* WP writes margin-left/right:auto !important on constrained children, so this has to match. */
.section > .lead{margin-inline-start:0 !important;margin-inline-end:auto !important}

/* =======================================================================
   Mobile spacing + glass surfaces
   -----------------------------------------------------------------------
   Two problems this fixes: content ran edge-to-edge on phones (the theme
   defines no root padding), and every panel was a flat grey rectangle.
   Surfaces are now frosted with a top shine over a faint ambient wash, which
   only reads as glass because there is something behind it to pick up.
   Text stays on near-opaque surfaces: Mark Hall is legally blind and contrast
   matters more than the effect.
   ===================================================================== */
:root{
  --gutter:clamp(1.25rem,5.5vw,2.5rem);
  --glass-bg:linear-gradient(180deg,color-mix(in srgb,var(--wp--preset--color--base) 88%,transparent),color-mix(in srgb,var(--wp--preset--color--base) 66%,transparent));
  --glass-line:color-mix(in srgb,#fff 70%,var(--wp--preset--color--line));
  --glass-shine:inset 0 1px 0 color-mix(in srgb,#fff 92%,transparent);
  --glass-lift:0 1px 2px rgba(11,31,58,.04),0 10px 24px rgba(11,31,58,.06),0 28px 56px rgba(11,31,58,.05);
  --glass-lift-sm:0 1px 2px rgba(11,31,58,.04),0 6px 16px rgba(11,31,58,.05);
}

/* Ambient wash so frosted panels have something to refract. */
body{position:relative;background:var(--wp--preset--color--base)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58rem 38rem at 10% -6%,color-mix(in srgb,var(--wp--preset--color--accent) 26%,transparent),transparent 64%),
    radial-gradient(48rem 34rem at 97% 4%,color-mix(in srgb,var(--wp--preset--color--green) 24%,transparent),transparent 64%),
    radial-gradient(44rem 34rem at 88% 62%,color-mix(in srgb,var(--wp--preset--color--accent) 16%,transparent),transparent 62%),
    radial-gradient(52rem 40rem at 50% 106%,color-mix(in srgb,var(--wp--preset--color--primary) 16%,transparent),transparent 62%),
    radial-gradient(40rem 30rem at 4% 74%,color-mix(in srgb,var(--wp--preset--color--green) 14%,transparent),transparent 60%),
    var(--wp--preset--color--base);
}

/* ---- Gutters. The real fix for the edge-to-edge mobile layout. ---- */
main.wp-block-group{padding-inline:var(--gutter)}
.site-footer{padding-inline:var(--gutter)}

/* ---- Vertical rhythm: enterprise pages breathe. ---- */
.section{padding:clamp(3rem,8vw,5rem) 0}
.hero{padding:clamp(2rem,6vw,3.5rem) 0 clamp(1rem,3vw,2rem)}
.trust{padding:clamp(2rem,6vw,3rem) 0;margin:clamp(1.5rem,5vw,2.5rem) 0;border-top:1px solid var(--wp--preset--color--line);border-bottom:1px solid var(--wp--preset--color--line)}
.doors,.tiles,.steps,.reviews,.team,.app-tiles{gap:clamp(1rem,2.5vw,1.25rem)}
.section > .lead{margin-bottom:clamp(1.5rem,4vw,2rem)}

/* ---- Glass surfaces ---- */
.door,.tile,.step,.review,.person,.app-tile,.addr--call{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-line);
  border-radius:var(--r);
  box-shadow:var(--glass-shine),var(--glass-lift);
  position:relative;
  overflow:hidden;
}
.door,.tile,.step,.review,.person{padding:clamp(1.5rem,4vw,2rem)}
.app-tile{padding:clamp(1.25rem,3.5vw,1.5rem);min-height:128px}

/* The shine: a soft diagonal highlight across the top of each panel. */
.door::after,.tile::after,.step::after,.review::after,.person::after,.app-tile::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(135deg,color-mix(in srgb,#fff 55%,transparent) 0%,color-mix(in srgb,#fff 10%,transparent) 26%,transparent 52%);
}
.door > *,.tile > *,.step > *,.review > *,.person > *,.app-tile > *{position:relative;z-index:1}

/* Keep the coloured left edge on the door cards readable against the frost. */
.door--owner{border-color:color-mix(in srgb,var(--wp--preset--color--accent) 45%,var(--glass-line))}
.door--tenant{border-color:color-mix(in srgb,var(--wp--preset--color--green) 45%,var(--glass-line))}

/* ---- Trust bar: two up on phones, as cards, not a flush-left list. ---- */
.trust__row{gap:clamp(.75rem,2.5vw,1.25rem)}
.trust .stat{background:var(--glass-bg);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  border:1px solid var(--glass-line);border-radius:var(--r);box-shadow:var(--glass-shine),var(--glass-lift-sm);
  padding:clamp(1.1rem,3.5vw,1.5rem);height:100%;margin:0}
.trust .stat strong{font-size:clamp(2rem,6vw,2.5rem)}

@media(max-width:781px){
  .trust .trust__row{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:.75rem}
  .trust .trust__row > .wp-block-column{flex-basis:auto!important;margin:0!important}
}

/* ---- Quote / pricing band ---- */
.quote{border-radius:clamp(20px,5vw,28px);padding:clamp(2rem,6vw,3rem) clamp(1.5rem,5vw,2.5rem);margin:clamp(1.5rem,4vw,2rem) 0;
  box-shadow:0 20px 48px color-mix(in srgb,var(--wp--preset--color--primary) 22%,transparent)}
.quote__form{border-radius:18px;padding:clamp(1.25rem,4vw,1.6rem);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 25%,transparent)}

/* ---- Contact block ---- */
.addr--call{padding:clamp(1.25rem,4vw,1.6rem);
  background:linear-gradient(180deg,color-mix(in srgb,var(--wp--preset--color--accent-soft) 96%,transparent),color-mix(in srgb,var(--wp--preset--color--accent-soft) 74%,transparent))}
.site-footer__cols{gap:clamp(1.25rem,4vw,2rem)}
.site-footer{padding-top:clamp(2.5rem,7vw,3.5rem);padding-bottom:clamp(2.5rem,7vw,3.5rem)}

@media(prefers-reduced-transparency:reduce){
  .door,.tile,.step,.review,.person,.app-tile,.trust .stat,.addr--call{
    -webkit-backdrop-filter:none;backdrop-filter:none;background:var(--wp--preset--color--base)}
}

/* A <p> is content-box by default, so height:100% plus padding overflowed the
   grid track and the stat rows overlapped by ~25px. */
.trust .stat{box-sizing:border-box}
.door,.tile,.step,.review,.person,.app-tile,.addr,.addr--call{box-sizing:border-box}

/* Hero CTAs: equal, full-width and thumb-sized on phones. */
@media(max-width:600px){
  .hero .wp-block-buttons{gap:.75rem;width:100%}
  .hero .wp-block-button{width:100%}
  .hero .wp-block-button__link{width:100%;min-height:60px;display:inline-flex;align-items:center;justify-content:center;font-size:1.125rem}
}

/* =======================================================================
   Header responsiveness
   -----------------------------------------------------------------------
   The old rule hid the brand wordmark only below 430px, so between 431px
   and ~630px the wordmark reappeared while the row still had to carry the
   logo, the menu button and the full phone pill. With flex-wrap:nowrap and
   no min-width:0 the children could not shrink, so the phone pill was pushed
   off the right edge and clipped. Real devices sit in that band.

   Order of sacrifice as the screen narrows: the wordmark goes first, the
   phone number last. Mark Hall is legally blind; the number is the one thing
   that must survive.
   ===================================================================== */
.site-header__row{min-width:0}
.site-header__row > *{min-width:0}
.site-brand{flex:0 1 auto;min-width:0;overflow:hidden}
.site-brand__mark{flex:0 0 auto}
.site-brand__txt{min-width:0}
.site-brand__txt b,.site-brand__txt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-header__actions{flex:0 0 auto}
.site-header .tel-btn{flex:0 0 auto}

/* Wordmark only once there is genuinely room for it alongside the phone pill. */
@media(max-width:700px){
  .site-brand__txt{display:none}
}
/* Last resort on very narrow phones: shrink the pill, never drop the number. */
@media(max-width:360px){
  .site-header .tel-btn a{padding:0 .7rem;font-size:1rem;gap:.35rem}
  .site-brand__mark{height:80px}
}

/* ---- Hero headline fills its column on phones ----
   .hero__title is capped at max-width:16ch, which is a deliberate short
   measure for the big desktop display type. On a phone the column is already
   narrow, so the cap just left a ragged 24% of unused width. text-wrap:balance
   made it worse by evening the lines out rather than filling them. */
@media(max-width:900px){
  .hero__title{max-width:none;text-wrap:pretty}
}

/* ---- Mobile menu overlay ----
   Every selector here is scoped to .site-header on purpose. WordPress prints its
   own navigation CSS inline in <head>, i.e. AFTER this stylesheet, so matching its
   specificity loses. The extra class wins the cascade.

   Large, plain, high contrast: this is the screen where someone with poor vision
   has to find where they are going. */
.site-header .wp-block-navigation__responsive-container.is-menu-open{
  background:var(--wp--preset--color--base);
  color:var(--wp--preset--color--ink);
  padding:0 clamp(1.25rem,5.5vw,2rem) 2rem}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
  padding-top:4.5rem;width:100%}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  gap:0;width:100%;align-items:stretch}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{width:100%}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  display:flex;align-items:center;width:100%;min-height:64px;
  font-size:1.25rem;font-weight:700;color:var(--wp--preset--color--ink);
  padding:.5rem 0;border-bottom:1px solid var(--wp--preset--color--line);text-decoration:none}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after{display:none}
.site-header .wp-block-navigation__responsive-container-close{
  min-width:56px;min-height:56px;color:var(--wp--preset--color--ink);right:clamp(.75rem,3vw,1.25rem);top:.5rem}

/* ---- Phone pill on phones ----
   It was carrying desktop proportions into a 393px header and dominating the bar.
   Lighter now, but still a 52px target with the number at 16px, it stays the
   easiest thing on the screen to find and press. */
@media(max-width:900px){
  .site-header__row{gap:.85rem}
  .site-header .tel-btn a{min-height:52px;font-size:1rem;font-weight:800;padding:0 1rem;gap:.45rem;
    box-shadow:0 4px 14px color-mix(in srgb,var(--wp--preset--color--accent) 30%,transparent)}
  .site-header .tel-icon{width:18px;height:18px}
}
@media(max-width:400px){
  .site-header__row{gap:.6rem}
  .site-header .tel-btn a{padding:0 .85rem;gap:.4rem}
}

/* .btn a is content-box, so its 2px borders were added on top of min-height:
   52px of box became 56px of pill. */
.btn a,.site-logins-mobile a,.wp-block-button__link{box-sizing:border-box}

/* ---- One gutter for the whole page ----
   The header was on 32px (its own 1rem plus the row's 1rem), the login row on
   16px and the main column on --gutter. Three different left edges. Everything
   now hangs off --gutter so the header, the login pills, the page content and
   the footer share one vertical line. */
.site-header{padding-inline:0}
.site-header .site-header__row{padding-inline:var(--gutter)}
.site-header__navrow{padding-inline:var(--gutter)}
.site-logins-mobile{padding-inline:var(--gutter)}
@media(max-width:900px){
  .site-header .site-header__row{padding-inline:var(--gutter)}
}
@media(max-width:400px){
  .site-header .site-header__row{padding-inline:var(--gutter)}
}

/* ---- Footer bottom: minimal ----
   Was a three-line copyright above six links wrapping into two ragged rows.
   Now one quiet rule, links first, legal beneath, and on desktop the two sit on
   a single line. Scoped to .site-footer so WordPress's inline flex layout for the
   group does not win the cascade. */
.site-footer .site-footer__bottom{
  margin-top:clamp(2rem,5vw,2.5rem);padding-top:clamp(1.25rem,3.5vw,1.5rem);
  border-top:1px solid var(--wp--preset--color--line);
  display:flex;flex-direction:column;align-items:flex-start;gap:1rem;font-size:1rem}
.site-footer .footer-nav{width:auto}
.site-footer .footer-nav .wp-block-navigation__container{
  display:flex;flex-wrap:wrap;gap:.65rem 1.5rem;align-items:center}
.site-footer .footer-nav .wp-block-navigation-item__content{
  font-size:1rem;font-weight:600;color:var(--wp--preset--color--ink-2);text-decoration:none;
  padding:.35rem 0;min-height:44px;display:inline-flex;align-items:center}
.site-footer .footer-nav .wp-block-navigation-item__content:hover,
.site-footer .footer-nav .wp-block-navigation-item__content:focus-visible{
  color:var(--wp--preset--color--ink);text-decoration:underline;text-underline-offset:.25em}
.site-footer .footer-legal{margin:0;color:var(--wp--preset--color--ink-2);opacity:.85;max-width:60ch}

@media(min-width:782px){
  .site-footer .site-footer__bottom{flex-direction:row;align-items:center;justify-content:space-between;gap:1.5rem}
  .site-footer .footer-legal{order:-1}
}

/* Tighter footer link rows on phones: 44px targets with 10px row gaps stacked
   into a 274px band. Still a comfortable target, far less height. */
@media(max-width:781px){
  .site-footer .footer-nav .wp-block-navigation__container{gap:.15rem 1.25rem}
  .site-footer .footer-nav .wp-block-navigation-item__content{min-height:40px;padding:.2rem 0}
  .site-footer .site-footer__bottom{gap:.85rem}
}

.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* An 80px mark is 136px wide. On a 393px bar that leaves very little for the
   menu button and the phone pill, so the pill tightens rather than losing the
   number, the number is the one thing that must stay readable. */
@media(max-width:480px){
  .site-header .tel-btn a{padding:0 .7rem;gap:.35rem;font-size:1rem}
  .site-header .tel-icon{width:17px;height:17px}
  .site-header .site-header__row{gap:.4rem}
}

/* ---- Hero property photo ----
   A real Las Vegas two-storey from their own site, cut on a diagonal on the
   right and faded into the page on its left edge so it reads as part of the
   hero rather than a pasted-in rectangle. The image is 688px wide, so it is
   only ever asked to cover about half the hero, never full-bleed, where it
   would go soft. */
.hero{position:relative;isolation:isolate}
.hero::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:calc(var(--gutter) * -1);bottom:0;
  /* starts clear of the 55% text column so the headline never lands on the photo */
  left:45.5%;right:calc(50% - 50vw);
  background-image:
    linear-gradient(80deg,
      var(--wp--preset--color--base) 0%,
      color-mix(in srgb,var(--wp--preset--color--base) 72%,transparent) 10%,
      color-mix(in srgb,var(--wp--preset--color--base) 26%,transparent) 28%,
      color-mix(in srgb,var(--wp--preset--color--base) 14%,transparent) 55%,
      color-mix(in srgb,var(--wp--preset--color--base) 14%,transparent) 100%),
    url("../img/hero-home-blur.webp");
  background-size:auto, cover;
  /* framed high so the sky, not the garage, sits behind the video card */
  background-position:center, 62% 88%;
  background-repeat:no-repeat;
  clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 10% 100%);
}

/* Phones: the photo becomes a band along the bottom of the hero, with the page
   colour washing down over its top edge. */
@media(max-width:900px){
  .hero::before{
    top:auto;bottom:0;height:58%;
    left:calc(50% - 50vw);right:calc(50% - 50vw);
    clip-path:none;
    background-image:
      linear-gradient(180deg,
        var(--wp--preset--color--base) 0%,
        color-mix(in srgb,var(--wp--preset--color--base) 72%,transparent) 22%,
        color-mix(in srgb,var(--wp--preset--color--base) 22%,transparent) 50%,
        color-mix(in srgb,var(--wp--preset--color--base) 16%,transparent) 100%),
      url("../img/hero-home-blur.webp");
    background-size:auto, cover;
    background-position:center, center 40%;
  }
}

/* The secondary hero button sits over the hero photo at some widths, and a
   transparent ghost button on grass is unreadable. Give it a solid ground. */
.hero .wp-block-button.is-style-outline .wp-block-button__link,
.hero .wp-block-button__link:not(.has-background){
  background:var(--wp--preset--color--base);
  border:2px solid var(--wp--preset--color--line);
  color:var(--wp--preset--color--ink);
  box-shadow:0 2px 10px rgba(11,31,58,.06)}
.hero .wp-block-button.is-style-outline .wp-block-button__link:hover{
  border-color:var(--wp--preset--color--primary)}
/* keep the primary orange button as it was */
.hero .wp-block-buttons .wp-block-button:first-child .wp-block-button__link{
  background:var(--wp--preset--color--accent);border-color:transparent;color:#fff;
  box-shadow:0 8px 22px color-mix(in srgb,var(--wp--preset--color--accent) 34%,transparent)}

/* ---- Step numbers ----
   Were absolutely positioned in the top-right corner, so the h3 ran straight
   under them, and the glass rule that lifts card children to z-index 1 painted
   the heading over the digit, which is what made it look broken. Now the number
   is a badge in the normal flow: nothing can overlap it. */
.step{overflow:visible}          /* let the glow out; ::after keeps its own radius */
.step::before{
  position:relative;z-index:1;
  top:auto;right:auto;
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  margin:0 0 1.15rem;
  font-size:1.5rem;font-weight:800;line-height:1;letter-spacing:-.02em;
  color:#fff;
  background:linear-gradient(145deg,
    color-mix(in srgb,var(--wp--preset--color--accent) 88%,#fff),
    color-mix(in srgb,var(--wp--preset--color--accent) 78%,#000));
  box-shadow:
    0 10px 24px color-mix(in srgb,var(--wp--preset--color--accent) 42%,transparent),
    0 2px 6px color-mix(in srgb,var(--wp--preset--color--primary) 18%,transparent),
    inset 0 1px 0 rgba(255,255,255,.38);
}
.step h3{margin-top:0}




/* The gap above the eyebrow was 52px on a phone: 20px of WordPress block-gap on
   <main> plus 32px of hero padding. Both trimmed. */
.wp-site-blocks > main.wp-block-group{margin-top:0}
.hero{padding-top:clamp(1.5rem,4vw,3.5rem)}


/* =======================================================================
   One vertical rhythm
   -----------------------------------------------------------------------
   Every band was carrying its own padding PLUS a WordPress block-gap margin
   PLUS, in some cases, its own margin. Content-to-content gaps came out at
   36 / 56 / 104 / 116 / 104 / 104 / 116 / 108px down the page.

   Model now: bands carry no vertical margin, and each contributes half a band
   of padding top and bottom. Two adjacent bands therefore always add up to
   exactly one --band, wherever you are on the page.
   ===================================================================== */
:root{--band:clamp(5rem,9vw,8rem);--band-half:calc(var(--band) / 2)}

/* Scoped to the home-page bands. The earlier blanket `main > *` also stripped
   the margins from post-title and post-content on inner pages, which collapsed
   the title straight onto the footer rule, the divider cut through the
   descender of the "g" in "Management". */
main.wp-block-group > .hero,
main.wp-block-group > .doors,
main.wp-block-group > .section,
main.wp-block-group > .trust,
main.wp-block-group > .quote{margin-block:0}

.hero{padding-top:clamp(1.5rem,4vw,3.5rem);padding-bottom:var(--band-half)}
.doors{padding-block:var(--band-half)}
.section{padding-block:var(--band-half)}
.trust{padding-block:var(--band-half);margin-block:0}
.quote{margin-block:var(--band-half)}
.site-footer{padding-top:var(--band-half);padding-bottom:var(--band)}

/* The footer is a sibling of <main> in .wp-site-blocks, so the rule above does
   not reach it and WordPress's block-gap left a stray 20px above it. */
.wp-site-blocks > footer.wp-block-template-part{margin-top:0}

/* ---- Hero: pitch line and CTAs run centred under both columns ---- */
.hero__pitch{text-align:center;margin-top:0}
/* The headline lives in this panel now, so it needs the panel's own measure. */
.hero__pitch .hero__title{max-width:20ch;margin-inline:auto}
.hero__pitch .eyebrow{margin-bottom:.75rem}
.hero__pitch .lead{max-width:56ch;margin-inline:auto!important}
.hero__pitch .wp-block-buttons{justify-content:center;margin-top:clamp(1.25rem,3vw,1.75rem)}
/* The headline lives inside this panel now, so left-aligning the panel on a
   phone left the home page as the only hero not centred. */
@media(max-width:600px){
  .hero__pitch .lead{margin-inline:auto!important}
}

/* ---- Hero pitch panel ----
   The centred pitch line and CTAs sit across the diagonal, so they need their
   own ground rather than the photo being faded away. Frosted glass: the blurred
   property still reads through it, the text does not fight for contrast. */
.hero__pitch{
  background:color-mix(in srgb,var(--wp--preset--color--base) 76%,transparent);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  backdrop-filter:blur(20px) saturate(170%);
  border:1px solid var(--glass-line);
  border-radius:var(--r);
  box-shadow:var(--glass-shine),var(--glass-lift);
  padding:clamp(1.5rem,4vw,2rem) clamp(1.25rem,4vw,2.5rem);
}
@media(prefers-reduced-transparency:reduce){
  .hero__pitch{-webkit-backdrop-filter:none;backdrop-filter:none;
    background:var(--wp--preset--color--base)}
}

/* The brand row and the nav row are siblings inside .site-header, so WordPress's
   block-gap put 20px between them, 8px of breathing room above the logo against
   28px below it. Zeroed so the divider sits the same distance below the row as
   the page top sits above it. */
.site-header > *{margin-block:0}

/* Inner pages: the title and content need their own breathing room, and the
   page needs space before the footer rule. */
body:not(.home) main.wp-block-group{padding-block:var(--band-half)}
main.wp-block-group > .wp-block-post-title{margin:0 0 clamp(1.25rem,3.5vw,2rem)}
main.wp-block-group > .wp-block-post-content{margin-top:0}

/* ---- Sticky header ----
   position:sticky was on .site-header, but a sticky element can only travel
   inside its own parent's box, and WordPress wraps a template part in a
   <header class="wp-block-template-part"> that is exactly as tall as the header
   itself. There was nowhere to stick to, so it scrolled away like static markup.
   The sticky belongs on that wrapper, whose parent (.wp-site-blocks) is the
   full page. */
.wp-site-blocks > header.wp-block-template-part{position:sticky;top:0;z-index:100}

/* ---- Mobile login row inside the sticky header ----
   It lives in the header template part, so it sticks along with the bar. It had
   no background of its own, so page content scrolled straight through it.
   Given its own frosted ground, and collapsed once the page scrolls so the
   sticky bar stays 93px rather than 169px, a fifth of a phone screen.
   If the scroll script never runs, `is-stuck` is never added and the row simply
   stays open: the login buttons are visible either way. */
.site-logins-mobile{
  position:relative;
  background:color-mix(in srgb,var(--wp--preset--color--base) 92%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  }

/* When the mobile menu is open the sticky login row was painting over the top of
   the overlay and hiding its first item. WordPress puts .has-modal-open on the
   html element while the overlay is up. */
html.has-modal-open .site-logins-mobile,
body.has-modal-open .site-logins-mobile{display:none}

/* Moving the login row out of the header part made it a direct child of
   .wp-site-blocks, so WordPress's block-gap put 20px between it and the bar. */
.wp-site-blocks > .site-logins-mobile{margin-top:0}

/* =======================================================================
   Available Rentals
   -----------------------------------------------------------------------
   The listings come from a cross-origin Matrix IDX frame whose contents we
   cannot style, so the page earns its keep around the frame: a full-bleed
   photographic header, and the feed presented as a framed viewer rather than
   a bare iframe dropped on the page.
   ===================================================================== */
/* Inner-page hero. The About and Property Management heroes below use exactly
   these values; Available Rentals had been left on its own taller box and a
   different, unblurred photograph, which is why it looked like a different site.
   Only the background framing varies between the three. */
.rentals-hero{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(360px,52vh,520px);
  padding-block:clamp(2.75rem,7vw,4.5rem);margin-bottom:var(--band-half)}
.rentals-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  left:calc(50% - 50vw);right:calc(50% - 50vw);
  background-image:
    linear-gradient(180deg,rgba(11,31,58,.80) 0%,rgba(11,31,58,.62) 45%,rgba(11,31,58,.86) 100%),
    url("../img/hero-home-blur.webp");
  background-size:auto, cover;
  background-position:center, center 30%;
  background-repeat:no-repeat}
.rentals-hero__eyebrow{color:color-mix(in srgb,#fff 82%,transparent)}
.rentals-hero__title{color:#fff;max-width:18ch;margin:0 0 1rem;
  font-size:clamp(2.25rem,5.6vw,3.75rem);line-height:1.04;letter-spacing:-.03em;text-wrap:pretty}
.rentals-hero__lead{color:color-mix(in srgb,#fff 90%,transparent);max-width:52ch;
  font-size:clamp(1.125rem,2vw,1.3125rem);margin:0 0 clamp(1.5rem,4vw,2rem)}
.rentals-hero__cta .wp-block-button__link{min-height:56px}
.rentals-hero__cta .is-style-outline .wp-block-button__link{
  background:transparent;border:2px solid color-mix(in srgb,#fff 70%,transparent);color:#fff}
.rentals-hero__cta .is-style-outline .wp-block-button__link:hover{border-color:#fff;background:color-mix(in srgb,#fff 12%,transparent)}

/* ---- the viewer ---- */
.listings-frame{position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-shine),var(--glass-lift);
  background:var(--wp--preset--color--base)}
.listings-frame__bar{display:flex;align-items:center;gap:.6rem;
  padding:.85rem clamp(1rem,3vw,1.5rem);
  background:var(--wp--preset--color--primary);color:#fff;
  font-size:1rem;font-weight:700;letter-spacing:.01em}
.listings-frame__dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;
  background:var(--wp--preset--color--green);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--wp--preset--color--green) 30%,transparent)}
.listings-frame__inner{display:block;width:100%;border:0;background:#fff;
  min-height:clamp(760px,118vh,1500px)}
.listings-note{font-size:1.0625rem;color:var(--wp--preset--color--ink-2);
  margin-top:clamp(1rem,3vw,1.5rem);max-width:70ch}

/* Full-bleed viewer on phones: the frame's own content is dense, so give it the
   whole screen width rather than losing 44px of it to the page gutter. */
@media(max-width:600px){
  /* WordPress's constrained layout sets margin-left/right:auto !important on the
     children of a constrained group, which silently ate the negative margin.
     Same trap as the hero lead paragraph earlier, match the weight. */
  .listings-section .listings-frame{
    margin-left:calc(-1 * var(--gutter)) !important;
    margin-right:calc(-1 * var(--gutter)) !important;
    max-width:none;
    border-radius:0;border-left:0;border-right:0}
}

/* The rentals header is full-bleed and starts flush under the site header, so
   this page does not take the standard top padding that other inner pages get. */
/* body:not(.home) main.wp-block-group is (0,2,2) and was winning, leaving a 64px
   white band above the full-bleed header. Match its weight. */
body:not(.home) main.wp-block-group.rentals,
body:not(.home) main.wp-block-group.about,
body:not(.home) main.wp-block-group.pm,
body:not(.home) main.wp-block-group.fra{padding-top:0;padding-inline:0}
main.wp-block-group.rentals > *,
main.wp-block-group.about > *,
main.wp-block-group.pm > *,
main.wp-block-group.fra > *{padding-inline:var(--gutter)}
main.wp-block-group.rentals > .rentals-hero,
main.wp-block-group.about > .about-hero,
main.wp-block-group.pm > .pm-hero,
main.wp-block-group.fra > .fra-hero{padding-inline:var(--gutter)}

/* ---- Listing cards ----
   Our own markup, built from the IDX feed server-side, so the site's design
   language finally reaches the listings themselves. */
.listings-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin:0 0 clamp(1.25rem,3vw,1.75rem)}
.listings-head--sales{margin-top:clamp(2.5rem,6vw,4rem)}
.listings-head__title{margin:0;font-size:clamp(1.75rem,4vw,2.5rem);letter-spacing:-.02em}
.listings-head__count{margin:0;font-size:1.0625rem;font-weight:700;color:var(--wp--preset--color--ink-2);white-space:nowrap}

.listing-grid{display:grid;gap:clamp(1rem,2.5vw,1.5rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}

/* The glass frame sits on the article, not the link: the photo strip is a sibling
   of the link now, because a horizontal scroller nested inside an anchor fights the
   anchor for the drag gesture. */
.listing{margin:0;display:flex;flex-direction:column;height:100%;
  background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--glass-shine),var(--glass-lift-sm);
  transition:transform .18s ease,box-shadow .18s ease}
.listing:hover,.listing:focus-within{transform:translateY(-3px);
  box-shadow:var(--glass-shine),var(--glass-lift)}
.listing__link{display:block;flex:1 1 auto;text-decoration:none;color:inherit}

.listing__media{position:relative;display:block;aspect-ratio:16/10;background:var(--wp--preset--color--panel);overflow:hidden}
.listing__media img{width:100%;height:100%;object-fit:cover;display:block}
.listing__noimg{position:absolute;inset:0;
  background:linear-gradient(140deg,var(--wp--preset--color--panel),var(--wp--preset--color--accent-soft))}
.listing__badge{position:absolute;top:.75rem;left:.75rem;
  background:var(--wp--preset--color--green);color:#fff;
  font-size:.9375rem;font-weight:800;letter-spacing:.01em;
  padding:.3rem .7rem;border-radius:999px;
  box-shadow:0 4px 14px rgba(11,31,58,.25)}

.listing__body{display:flex;flex-direction:column;gap:.3rem;padding:clamp(1.1rem,3vw,1.4rem)}
.listing__price{font-size:clamp(1.5rem,3.2vw,1.875rem);font-weight:800;letter-spacing:-.02em;
  color:var(--wp--preset--color--ink);line-height:1.1}
.listing__per{font-size:1.0625rem;font-weight:700;color:var(--wp--preset--color--ink-2)}
.listing__address{font-size:1.0625rem;font-weight:700;color:var(--wp--preset--color--primary)}
.listing__city{font-size:1rem;color:var(--wp--preset--color--ink-2)}
.listing__meta{display:flex;flex-wrap:wrap;gap:.25rem .9rem;margin-top:.5rem;
  padding-top:.75rem;border-top:1px solid var(--wp--preset--color--line);
  font-size:1rem;color:var(--wp--preset--color--ink-2)}
.listing__meta strong{color:var(--wp--preset--color--ink);font-weight:800}

.listings-credit{margin-top:clamp(1.5rem,4vw,2rem);font-size:1rem;
  color:var(--wp--preset--color--ink-2);max-width:74ch}
.listings-credit a{color:var(--wp--preset--color--primary)}

@media(prefers-reduced-motion:reduce){.listing__link{transition:none}
  .listing__link:hover,.listing__link:focus-visible{transform:none}}
@media(prefers-reduced-transparency:reduce){
  .listing__link{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--wp--preset--color--base)}}

/* ---- Listing detail panel ----
   Opens on this site, never on mlsmatrix.com. Driven by :target so it works
   with JavaScript disabled; the script only adds Esc, scroll-lock and focus. */
.listing-detail{display:none;position:fixed;inset:0;z-index:200;
  align-items:center;justify-content:center;padding:clamp(0px,3vw,2.5rem)}
.listing-detail:target,.listing-detail.is-open{display:flex}
.listing-detail__scrim{position:absolute;inset:0;background:rgba(11,31,58,.68);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.listing-detail__panel{position:relative;z-index:1;
  width:min(100%,900px);max-height:min(92vh,900px);overflow:auto;-webkit-overflow-scrolling:touch;
  background:var(--wp--preset--color--base);border-radius:clamp(0px,2vw,var(--r));
  box-shadow:0 30px 80px rgba(11,31,58,.45)}
.listing-detail__close{position:absolute;top:.5rem;right:.5rem;z-index:2;
  width:56px;height:56px;display:inline-flex;align-items:center;justify-content:center;
  font-size:2rem;line-height:1;text-decoration:none;border-radius:50%;
  background:color-mix(in srgb,var(--wp--preset--color--base) 88%,transparent);
  color:var(--wp--preset--color--ink);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 4px 14px rgba(11,31,58,.22)}
.listing-detail__close:hover{background:var(--wp--preset--color--base)}
/* Sizes to its content: the gallery sets its own 4:3 and the thumbnail strip sits
   below it. A fixed aspect-ratio here clipped both. The direct-child rule is the
   no-gallery fallback only, so it cannot fight the slides or the thumbnails. */
.listing-detail__media{position:relative;background:var(--wp--preset--color--panel);border-radius:14px 14px 0 0;overflow:hidden}
.listing-detail__media > img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.listing-detail__body{padding:clamp(1.25rem,4vw,2rem)}
.ld__price{margin:0;font-size:clamp(1.875rem,5vw,2.75rem);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.ld__address{margin:.35rem 0 .15rem;font-size:clamp(1.25rem,3vw,1.625rem);letter-spacing:-.01em}
.ld__city{margin:0;color:var(--wp--preset--color--ink-2)}
.ld__meta{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;margin:1rem 0 0;
  color:var(--wp--preset--color--ink-2)}
.ld__meta strong{color:var(--wp--preset--color--ink);font-weight:800}
.ld__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;
  margin:1.25rem 0 0;padding:1.1rem 0 0;border-top:1px solid var(--wp--preset--color--line)}
.ld__fact dt{margin:0;font-size:1rem;color:var(--wp--preset--color--ink-2)}
.ld__fact dd{margin:.1rem 0 0;font-size:1.125rem;font-weight:800;color:var(--wp--preset--color--ink)}
.ld__cta{display:flex;flex-wrap:wrap;gap:.65rem;margin:1.5rem 0 0}
.ld__btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;
  padding:0 1.25rem;border-radius:999px;font-weight:700;font-size:1.0625rem;text-decoration:none;
  border:2px solid var(--wp--preset--color--line);color:var(--wp--preset--color--ink);
  background:var(--wp--preset--color--base)}
.ld__btn:hover{border-color:var(--wp--preset--color--primary)}
.ld__btn--primary{background:var(--wp--preset--color--accent);border-color:transparent;color:#fff;
  box-shadow:0 8px 22px color-mix(in srgb,var(--wp--preset--color--accent) 34%,transparent)}
.ld__note{margin:1.25rem 0 0;font-size:1rem;color:var(--wp--preset--color--ink-2)}
body.listing-open{overflow:hidden}
@media(prefers-reduced-transparency:reduce){
  .listing-detail__scrim{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(11,31,58,.9)}}

/* ---------------------------------------------------------------------------
   Listing gallery
   Baseline is a scroll-snap strip: with no JavaScript a visitor can still swipe
   or trackpad-scroll through every photograph. The arrows, thumbnails and
   counter are enhancements and stay hidden until site.js marks the gallery.
--------------------------------------------------------------------------- */
.ldg {
	position: relative;
	background: #0b1016;
	border-radius: 14px 14px 0 0;
	overflow: hidden;
}
.ldg__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.ldg__track::-webkit-scrollbar { display: none; }
.ldg__slide {
	flex: 0 0 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}
.ldg__slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Arrows and counter: only once the gallery is enhanced. */
.ldg__nav,
.ldg__count { display: none; }
.ldg.is-ready .ldg__nav,
.ldg.is-ready .ldg__count { display: block; }

.ldg__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
	cursor: pointer;
	padding: 0;
	transition: opacity .15s ease, background .15s ease;
}
.ldg__nav:hover { background: #fff; }
.ldg__nav[disabled] { opacity: .32; cursor: default; }
.ldg__nav::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 10px;
	height: 10px;
	border-right: 2px solid #16202b;
	border-bottom: 2px solid #16202b;
}
.ldg__nav--prev { left: 12px; }
.ldg__nav--prev::before { transform: translateX(2px) rotate(135deg); }
.ldg__nav--next { right: 12px; }
.ldg__nav--next::before { transform: translateX(-2px) rotate(-45deg); }

.ldg__count {
	position: absolute;
	right: 12px;
	bottom: 12px;
	margin: 0;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(11, 16, 22, .74);
	color: #fff;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .01em;
	font-variant-numeric: tabular-nums;
	backdrop-filter: blur(6px);
}

.ldg__thumbs {
	display: none;
	gap: 8px;
	overflow-x: auto;
	padding: 10px 12px;
	background: #0b1016;
	scrollbar-width: thin;
}
.ldg.is-ready + .ldg__thumbs { display: flex; }
.ldg__thumb {
	flex: 0 0 auto;
	width: 78px;
	height: 58px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 7px;
	overflow: hidden;
	background: none;
	cursor: pointer;
	opacity: .55;
	transition: opacity .15s ease, border-color .15s ease;
}
.ldg__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ldg__thumb:hover { opacity: .85; }
.ldg__thumb.is-current { opacity: 1; border-color: var(--wp--preset--color--accent, #e07b2a); }

.listing__noimg--lg { display: block; aspect-ratio: 4 / 3; }

@media (prefers-reduced-motion: reduce) {
	.ldg__track { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------------
   Card photo strip
   Swipeable with CSS alone; arrows and dots appear only once site.js marks it.
--------------------------------------------------------------------------- */
.listing__strip {
	display: flex;
	height: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x pan-y;
}
.listing__strip::-webkit-scrollbar { display: none; }
.listing__shot {
	flex: 0 0 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	display: block;
	height: 100%;
	-webkit-user-drag: none;
}
.listing__shot img { pointer-events: none; }

.listing__arrow,
.listing__dots { display: none; }
.listing__media.is-ready .listing__arrow,
.listing__media.is-ready .listing__dots { display: block; }
.listing__media.is-ready .listing__dots { display: flex; }

.listing__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
	cursor: pointer;
	opacity: 0;
	transition: opacity .15s ease;
	z-index: 2;
}
.listing:hover .listing__arrow,
.listing:focus-within .listing__arrow { opacity: 1; }
.listing__arrow[disabled] { opacity: 0 !important; }
.listing__arrow::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid #16202b;
	border-bottom: 2px solid #16202b;
}
.listing__arrow--prev { left: 8px; }
.listing__arrow--prev::before { transform: translateX(2px) rotate(135deg); }
.listing__arrow--next { right: 8px; }
.listing__arrow--next::before { transform: translateX(-2px) rotate(-45deg); }

/* Touch has no hover, so the arrows would never appear, the swipe is the control
   there and the dots say how many photos there are. */
@media (hover: none) {
	.listing__arrow { display: none !important; }
}

.listing__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	justify-content: center;
	gap: 6px;
	z-index: 2;
	pointer-events: none;
}
.listing__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	box-shadow: 0 0 3px rgba(0, 0, 0, .45);
	transition: background .15s ease, width .15s ease;
}
.listing__dot.is-on { background: #fff; width: 16px; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
	.listing__strip { scroll-behavior: auto; }
}

/* Below 375px there is genuinely not enough room for an 80px logo, the menu chip and
   a full phone number on one line, at 360px it overflowed by 13px and at 320px by 52px.
   Rather than shrink the number (Mark Hall is legally blind, and it is the primary
   conversion path) the pill takes its own full-width row. Logo and menu stay on line one. */
@media(max-width:374px){
  .site-header .site-header__row{flex-wrap:wrap;row-gap:.6rem;justify-content:flex-start}
  .site-header .site-brand{order:1;margin-right:auto}
  .site-header .site-nav--mobile{order:2}
  .site-header .site-header__actions{order:3;flex:1 0 100%;justify-content:center}
  .site-header .tel-btn{flex:1 1 auto;display:flex}
  .site-header .tel-btn a{flex:1 1 auto;justify-content:center;padding-inline:1rem}
  .site-header .tel-icon{display:inline-block}
}

/* ---------------------------------------------------------------------------
   About page
   The rentals hero is a dark photograph; this one is deliberately light and
   typographic. An About page reusing a rental listing photo would be saying
   nothing, and the ambient wash on the body already carries the brand.
--------------------------------------------------------------------------- */
/* Matches the rentals hero so the two inner pages read as one site. The photograph
   is the same blurred Las Vegas property the home page uses, so About costs no new
   image bytes (20 KB, already in cache for anyone arriving from the home page). */
.about-hero{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(360px,52vh,520px);
  padding-block:clamp(2.75rem,7vw,4.5rem);margin-bottom:var(--band-half)}
.about-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  left:calc(50% - 50vw);right:calc(50% - 50vw);
  background-image:
    linear-gradient(180deg,rgba(11,31,58,.80) 0%,rgba(11,31,58,.62) 45%,rgba(11,31,58,.86) 100%),
    url("../img/hero-home-blur.webp");
  background-size:auto, cover;
  background-position:center, center 55%;
  background-repeat:no-repeat}
.about-hero__eyebrow{color:color-mix(in srgb,#fff 82%,transparent)}
.about-hero__title{color:#fff;margin:0 0 1rem;max-width:18ch;
  font-size:clamp(2.25rem,5.6vw,3.75rem);line-height:1.04;letter-spacing:-.03em;text-wrap:pretty}
.about-hero__lead{color:color-mix(in srgb,#fff 90%,transparent);margin:0 0 clamp(1.5rem,4vw,2rem);max-width:52ch;
  font-size:clamp(1.125rem,2vw,1.3125rem)}
.about-hero__cta .wp-block-button__link{min-height:56px}
.about-hero__cta .is-style-outline .wp-block-button__link{
  background:transparent;border:2px solid color-mix(in srgb,#fff 70%,transparent);color:#fff}
.about-hero__cta .is-style-outline .wp-block-button__link:hover{border-color:#fff;background:color-mix(in srgb,#fff 12%,transparent)}

/* ---- story + figures ---- */
.about-story__grid{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media(min-width:900px){
  .about-story__grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem)}
}
.about-story__text h2{margin:0 0 1rem;font-size:clamp(1.75rem,3.6vw,2.5rem);letter-spacing:-.02em}
.about-story__text p{margin:0 0 1rem;max-width:62ch}
.about-story__text p:last-child{margin-bottom:0}

.about-facts{display:grid;gap:1px;background:var(--glass-line);
  border:1px solid var(--glass-line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--glass-shine),var(--glass-lift-sm)}
.about-fact{display:flex;flex-direction:column;gap:.15rem;margin:0;
  padding:clamp(1rem,2.6vw,1.4rem) clamp(1.1rem,3vw,1.5rem);
  background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%)}
.about-fact strong{font-size:clamp(1.75rem,4vw,2.25rem);font-weight:800;letter-spacing:-.03em;
  line-height:1;color:var(--wp--preset--color--primary);font-variant-numeric:tabular-nums}
.about-fact span{font-size:1rem;color:var(--wp--preset--color--ink-2)}

/* ---- what you get ---- */
.about-values h2{margin:0 0 clamp(1.5rem,4vw,2.25rem);font-size:clamp(1.75rem,3.6vw,2.5rem);letter-spacing:-.02em}
.about-values__grid{display:grid;gap:clamp(1rem,2.5vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.value-card{padding:clamp(1.25rem,3vw,1.75rem);border-radius:var(--r);
  background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-line);box-shadow:var(--glass-shine),var(--glass-lift-sm)}
.value-card h3{margin:0 0 .5rem;font-size:1.25rem;letter-spacing:-.01em}
.value-card p{margin:0;color:var(--wp--preset--color--ink-2)}

/* ---- the team ----
   The headshots the live site serves are only 154x201, so the avatar is capped at
   84px: at 2x that is 168 device pixels against a 154px source, which still reads
   crisp. A large portrait would visibly soften. Bigger originals would let this grow. */
.about-team h2{margin:0 0 .5rem;font-size:clamp(1.75rem,3.6vw,2.5rem);letter-spacing:-.02em}
.about-team .lead{margin:0 0 clamp(1.5rem,4vw,2.25rem)}
.team-grid{display:grid;gap:clamp(1rem,2.5vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.team-grid .person{display:flex;gap:1.1rem;align-items:flex-start;
  padding:clamp(1.1rem,2.6vw,1.4rem);border-radius:var(--r);
  background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-line);box-shadow:var(--glass-shine),var(--glass-lift-sm);
  transition:transform .18s ease,box-shadow .18s ease}
.team-grid .person:hover{transform:translateY(-3px);box-shadow:var(--glass-shine),var(--glass-lift)}
.team-grid .person__photo{flex:0 0 auto;width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:center 22%;
  background:var(--wp--preset--color--panel);
  border:2px solid color-mix(in srgb,var(--wp--preset--color--accent) 30%,transparent)}
.team-grid .person__body{min-width:0}
.team-grid .person__name{margin:0;font-size:1.1875rem;letter-spacing:-.01em}
.team-grid .person__role{margin:.1rem 0 0;font-size:1rem;font-weight:700;color:var(--wp--preset--color--accent)}
.team-grid .person__note{margin:.5rem 0 0;font-size:1rem;color:var(--wp--preset--color--ink-2)}
.team-grid .person__lic{margin:.55rem 0 0;padding:0;list-style:none;display:grid;gap:.15rem}
.team-grid .person__lic li{font-size:.9375rem;color:var(--wp--preset--color--ink-2);font-variant-numeric:tabular-nums}
.team-grid .person__links{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin:.75rem 0 0}
.team-grid .person__links a{font-size:1rem;font-weight:700;color:var(--wp--preset--color--primary);
  text-decoration:none;border-bottom:2px solid color-mix(in srgb,var(--wp--preset--color--accent) 45%,transparent);
  padding-bottom:1px}
.team-grid .person__links a:hover{border-bottom-color:var(--wp--preset--color--accent)}

/* ---- closing call to action ---- */
.about-cta__inner{text-align:center;padding:clamp(1.75rem,5vw,3rem) clamp(1.25rem,4vw,2.5rem);
  border-radius:var(--r);
  background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-line);box-shadow:var(--glass-shine),var(--glass-lift)}
.about-cta__title{margin:0 0 .6rem;font-size:clamp(1.75rem,3.6vw,2.5rem);letter-spacing:-.02em}
.about-cta__lead{margin:0 auto clamp(1.25rem,3vw,1.75rem);max-width:52ch;color:var(--wp--preset--color--ink-2)}
.about-cta__buttons{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.about-cta__buttons .btn{margin:0}

/* WordPress block-gap adds margins between these siblings; the rhythm here is set
   by .section padding, the same as every other band on the site. */
.about > *{margin-block:0}

/* ---------------------------------------------------------------------------
   Property Management Services page
   Shares the About page's hero treatment and glass cards. Same 20 KB backdrop
   the home and About pages already load, framed lower so it does not read as a
   repeat of the About hero.
--------------------------------------------------------------------------- */
.pm-hero{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(360px,52vh,520px);
  padding-block:clamp(2.75rem,7vw,4.5rem);margin-bottom:var(--band-half)}
.pm-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  left:calc(50% - 50vw);right:calc(50% - 50vw);
  background-image:
    linear-gradient(180deg,rgba(11,31,58,.80) 0%,rgba(11,31,58,.62) 45%,rgba(11,31,58,.86) 100%),
    url("../img/hero-home-blur.webp");
  background-size:auto, cover;
  background-position:center, center 82%;
  background-repeat:no-repeat}
.pm-hero__eyebrow{color:color-mix(in srgb,#fff 82%,transparent)}
.pm-hero__title{color:#fff;margin:0 0 1rem;max-width:18ch;
  font-size:clamp(2.25rem,5.6vw,3.75rem);line-height:1.04;letter-spacing:-.03em;text-wrap:pretty}
.pm-hero__lead{color:color-mix(in srgb,#fff 90%,transparent);margin:0 0 clamp(1.5rem,4vw,2rem);max-width:54ch;
  font-size:clamp(1.125rem,2vw,1.3125rem)}
.pm-hero__cta .wp-block-button__link{min-height:56px}
.pm-hero__cta .is-style-outline .wp-block-button__link{
  background:transparent;border:2px solid color-mix(in srgb,#fff 70%,transparent);color:#fff}
.pm-hero__cta .is-style-outline .wp-block-button__link:hover{border-color:#fff;background:color-mix(in srgb,#fff 12%,transparent)}

.pm-figures h2,.pm-services h2{margin:0 0 clamp(1.25rem,3vw,1.75rem);
  font-size:clamp(1.75rem,3.6vw,2.5rem);letter-spacing:-.02em}
.pm-services .lead{margin:-.5rem 0 clamp(1.5rem,4vw,2.25rem)}

/* The figure tiles reuse .about-fact; only the container differs. */
.pm-figures__grid{display:grid;gap:1px;background:var(--glass-line);
  border:1px solid var(--glass-line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--glass-shine),var(--glass-lift-sm);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}

/* ---- the nine services ---- */
.pm-grid{display:grid;gap:clamp(1rem,2.5vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.svc-card{position:relative;padding:clamp(1.25rem,3vw,1.75rem);border-radius:var(--r);
  background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-line);box-shadow:var(--glass-shine),var(--glass-lift-sm);
  transition:transform .18s ease,box-shadow .18s ease}
.svc-card:hover{transform:translateY(-3px);box-shadow:var(--glass-shine),var(--glass-lift)}
.svc-card__num{display:block;margin-bottom:.4rem;
  font-size:.9375rem;font-weight:800;letter-spacing:.08em;font-variant-numeric:tabular-nums;
  color:var(--wp--preset--color--accent)}
.svc-card__title{margin:0 0 .5rem;font-size:1.25rem;letter-spacing:-.01em}
.svc-card__body{margin:0;color:var(--wp--preset--color--ink-2)}

/* ---- pricing + owner documents ---- */
.pm-pricing__inner{display:grid;gap:clamp(1.5rem,4vw,2.5rem);align-items:start}
@media(min-width:900px){
  .pm-pricing__inner{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem)}
}
.pm-pricing__text h2{margin:0 0 1rem;font-size:clamp(1.75rem,3.6vw,2.5rem);letter-spacing:-.02em}
.pm-pricing__text p{margin:0 0 1rem;max-width:60ch}
.pm-pricing__text p:last-child{margin-bottom:0}

.pm-docs{padding:clamp(1.25rem,3vw,1.75rem);border-radius:var(--r);
  background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-line);box-shadow:var(--glass-shine),var(--glass-lift-sm)}
.pm-docs__title{margin:0;font-size:1.25rem;letter-spacing:-.01em}
.pm-docs__note{margin:0;font-size:1rem;color:var(--wp--preset--color--ink-2)}
.pm-docs__head{margin-bottom:1rem}
.pm-docs__list{margin:0;padding:0;list-style:none;display:grid;gap:.6rem}
.pm-docs__list a{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  min-height:56px;padding:.6rem .9rem;border-radius:12px;
  border:1px solid var(--glass-line);background:color-mix(in srgb,var(--wp--preset--color--base) 55%,transparent);
  color:var(--wp--preset--color--primary);font-weight:700;text-decoration:none;
  transition:border-color .18s ease,transform .18s ease}
.pm-docs__list a:hover{border-color:var(--wp--preset--color--accent);transform:translateY(-2px)}
.pm-docs__list a span{flex:0 0 auto;font-size:.8125rem;font-weight:800;letter-spacing:.06em;
  padding:.2rem .5rem;border-radius:999px;
  background:color-mix(in srgb,var(--wp--preset--color--accent) 16%,transparent);
  color:var(--wp--preset--color--accent)}

main.wp-block-group.pm > *{margin-block:0}

/* Home page team: two owners, same card as the About page. */
.home-team h2{margin:0 0 .5rem;font-size:clamp(1.75rem,3.6vw,2.5rem);letter-spacing:-.02em}
.home-team .lead{margin:0 0 clamp(1.5rem,4vw,2.25rem)}
.team-grid--pair{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.home-team__more{margin:clamp(1.25rem,3vw,1.75rem) 0 0}
.home-team__more a{font-weight:700;color:var(--wp--preset--color--primary);text-decoration:none;
  border-bottom:2px solid color-mix(in srgb,var(--wp--preset--color--accent) 45%,transparent);padding-bottom:2px}
.home-team__more a:hover{border-bottom-color:var(--wp--preset--color--accent)}

/* ---- the explainer video ---- */
.pm-video__grid{display:grid;gap:clamp(1.5rem,4vw,2.5rem);align-items:center}
@media(min-width:900px){
  .pm-video__grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(2rem,4vw,3rem)}
}
.pm-video__text h2{margin:0 0 .75rem;font-size:clamp(1.75rem,3.6vw,2.5rem);letter-spacing:-.02em}
.pm-video__text p{margin:0 0 1rem;color:var(--wp--preset--color--ink-2)}
.pm-video__text p:last-child{margin-bottom:0}

/* ---- pricing aside: photograph above the documents ---- */
.pm-pricing__aside{display:grid;gap:clamp(1rem,2.5vw,1.25rem)}
.pm-pricing__photo{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r);border:1px solid var(--glass-line);box-shadow:var(--glass-shine),var(--glass-lift-sm)}

/* ---------------------------------------------------------------------------
   Anchor targets must clear the sticky header.
   #listings was scrolling to y=0, which put "For rent now" at y=64, behind a
   145px header. The browser has no idea the header is there; scroll-margin is
   how you tell it.
--------------------------------------------------------------------------- */
[id]{scroll-margin-top:calc(96px + 1.25rem)}
@media(min-width:901px){
  [id]{scroll-margin-top:calc(148px + 1.5rem)}
}

/* ---------------------------------------------------------------------------
   The accent tile on the rentals page.
   It set a white text colour and an accent background, but the later glass rule
   replaced the background with frosted glass and left the colour alone, white
   text on a near-white panel, so the "Call (702) 750-9725" tile rendered blank.
   Restated here, after the glass rules, so the tile is genuinely the accent one.
--------------------------------------------------------------------------- */
.app-tile.app-tile--accent{
  background:var(--wp--preset--color--accent);
  border-color:transparent;
  color:#fff;
  box-shadow:0 10px 26px color-mix(in srgb,var(--wp--preset--color--accent) 34%,transparent)}
.app-tile.app-tile--accent::after{
  background:linear-gradient(135deg,color-mix(in srgb,#fff 26%,transparent) 0%,transparent 55%)}
.app-tile.app-tile--accent a,
.app-tile.app-tile--accent strong{color:#fff}

/* ---------------------------------------------------------------------------
   Ken Burns on the hero photographs.
   The three full-bleed heroes get a true slow zoom-and-drift on the whole layer.
   The home hero cannot: its ::before carries both the photograph AND the diagonal
   gradient that Rob positioned by hand, and scaling the element would drag that
   edge across the headline. There, only the photograph layer's background-position
   moves, the gradient's own position stays fixed at "center".
   Off entirely under prefers-reduced-motion.
--------------------------------------------------------------------------- */
@media(prefers-reduced-motion:no-preference){
  .about-hero::before,
  .pm-hero::before,
  .rentals-hero::before{
    transform-origin:center 58%;
    will-change:transform;
    animation:smart-kenburns 32s ease-in-out infinite alternate}

  .hero::before{
    will-change:background-position;
    animation:smart-kenburns-pan 34s ease-in-out infinite alternate}
}

@keyframes smart-kenburns{
  from{transform:scale(1.03) translate3d(0,0,0)}
  to{transform:scale(1.11) translate3d(-1.4%,-1.2%,0)}
}

/* Two layers: the gradient stays put, the photograph drifts. */
@keyframes smart-kenburns-pan{
  from{background-position:center, 62% 88%}
  to{background-position:center, 56% 78%}
}

/* ---------------------------------------------------------------------------
   Menu button: the word, and the right-hand side.
   Rob's note, "(old people lol)", is the whole reason. A bare hamburger is
   learned behaviour; Mark and Cindi are about seventy and will judge this on
   their own phones. The word costs one line of height and removes all doubt.
   The chip also swaps sides with the phone pill so it sits at the right edge, which is where a thumb reaches on a phone held in one hand.
--------------------------------------------------------------------------- */
.nav-open__label{
  display:block;font-size:.6875rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  line-height:1;color:var(--wp--preset--color--primary)}

/* Order on small screens: logo, phone, menu. */
@media(max-width:430px){
  .site-header .site-brand{order:1}
  .site-header .site-header__actions{order:2}
  .site-header .site-nav--mobile{order:3}
}
/* Below 375px the phone still takes its own row underneath. */
@media(max-width:374px){
  .site-header .site-brand{order:1}
  .site-header .site-nav--mobile{order:2}
  .site-header .site-header__actions{order:3}
}

/* ---------------------------------------------------------------------------
   Owner documents: a full-width strip under both columns.
   The text column is shorter than the photograph, which left a tall empty gap
   below it. The documents now span the whole grid and the two PDFs sit side by
   side, so the band closes cleanly under the text and the photo together.
--------------------------------------------------------------------------- */
@media(min-width:900px){
  .pm-pricing__inner{align-items:start}
  .pm-pricing__text{grid-column:1;grid-row:1}
  .pm-pricing__media{grid-column:2;grid-row:1}
  .pm-docs{grid-column:1 / -1;grid-row:2}
  .pm-docs__list{grid-template-columns:1fr 1fr;gap:.75rem}
  .pm-docs__head{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap}
}
@media(max-width:899px){
  .pm-docs__list{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------------
   "Property Management" was losing the tail of its g.
   The brand text gets overflow:hidden so a long name can ellipsis rather than
   push the header apart, but with line-height 1.08 the line box is shorter than
   the glyphs, so overflow:hidden cut every descender off at the baseline. The
   ellipsis still works; the box is just tall enough for a g now.
--------------------------------------------------------------------------- */
.site-brand__txt{line-height:1.2}
.site-brand__txt b{line-height:1.2}
.site-brand__txt span{line-height:1.4}

/* ---------------------------------------------------------------------------
   With the word "Menu" on the chip, logo + phone + menu no longer fit on one
   row on any phone, at 375px it ran 4px past the screen edge and at 393px it
   was sitting inside the right-hand padding. The phone pill takes its own
   full-width row on every phone size now, which also gives the number the
   biggest tap target on the page.
--------------------------------------------------------------------------- */
@media(max-width:430px){
  .site-header .site-header__row{flex-wrap:wrap;row-gap:.6rem;justify-content:flex-start}
  .site-header .site-brand{order:1;margin-right:auto}
  .site-header .site-nav--mobile{order:2}
  .site-header .site-header__actions{order:3;flex:1 0 100%;justify-content:center}
  .site-header .tel-btn{flex:1 1 auto;display:flex}
  .site-header .tel-btn a{flex:1 1 auto;justify-content:center;padding-inline:1rem}
  .site-header .tel-icon{display:inline-block}
}

/* ===========================================================================
   Hover: sheen, lift and glow
   A light band sweeps across a panel when the pointer enters it, over the top of
   the resting corner shine, two background layers on the same pseudo element, so
   no extra markup and no extra paint layer. The sweep runs on background-position
   rather than a transform so it cannot knock the panel's own layout about.

   Pointer devices only (@media (hover:hover)), on a touch screen :hover sticks
   after a tap and the sheen would freeze mid-sweep. Off under reduced motion.
   =========================================================================== */
@media(hover:hover) and (prefers-reduced-motion:no-preference){

  .door::after,.tile::after,.step::after,.review::after,.app-tile::after,
  .team-grid .person::after,.svc-card::after,.value-card::after,
  .pm-docs::after,.about-cta__inner::after{
    background-image:
      linear-gradient(115deg,
        transparent 38%,
        color-mix(in srgb,#fff 58%,transparent) 50%,
        transparent 62%),
      linear-gradient(135deg,
        color-mix(in srgb,#fff 55%,transparent) 0%,
        color-mix(in srgb,#fff 10%,transparent) 26%,
        transparent 52%);
    background-size:260% 100%, auto;
    background-position:190% 0, 0 0;
    background-repeat:no-repeat;
    transition:background-position 1.05s cubic-bezier(.22,.68,.28,1)}

  .door:hover::after,.tile:hover::after,.step:hover::after,.review:hover::after,
  .app-tile:hover::after,.team-grid .person:hover::after,.svc-card:hover::after,
  .value-card:hover::after,.pm-docs:hover::after,.about-cta__inner:hover::after,
}

/* The panels that did not already have a sheen layer need one. */
.svc-card,.value-card,.pm-docs,.about-cta__inner,.team-grid .person{position:relative;overflow:hidden}
.svc-card::after,.value-card::after,.pm-docs::after,.about-cta__inner::after,
.team-grid .person::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(135deg,color-mix(in srgb,#fff 55%,transparent) 0%,color-mix(in srgb,#fff 10%,transparent) 26%,transparent 52%)}
.svc-card > *,.value-card > *,.pm-docs > *,.about-cta__inner > *,
.team-grid .person > *{position:relative;z-index:1}

/* A warmer edge and a deeper lift on hover, the "expensive" part is restraint:
   one shade of border, a few pixels of travel, and a shadow that spreads rather
   than darkens. */
@media(hover:hover){
  .svc-card:hover,.value-card:hover,.pm-docs:hover,
  .door:hover,.tile:hover,.step:hover,.review:hover,.app-tile:hover{
    transform:translateY(-4px);
    border-color:color-mix(in srgb,var(--wp--preset--color--accent) 38%,var(--glass-line));
    box-shadow:var(--glass-shine),0 18px 40px -12px color-mix(in srgb,var(--wp--preset--color--primary) 32%,transparent)}
  .value-card,.door,.tile,.step,.review,.app-tile{
    transition:transform .28s cubic-bezier(.22,.68,.28,1),box-shadow .28s ease,border-color .28s ease}
  .svc-card,.pm-docs{transition:transform .28s cubic-bezier(.22,.68,.28,1),box-shadow .28s ease,border-color .28s ease}
}

/* ---- buttons ---- */
.btn a,.wp-block-button__link,.ld__btn,.pm-docs__list a{
  position:relative;overflow:hidden;isolation:isolate}
@media(hover:hover){
  .btn a,.wp-block-button__link,.ld__btn{
    transition:transform .2s cubic-bezier(.22,.68,.28,1),box-shadow .24s ease,border-color .2s ease,background .2s ease}
  .btn a:hover,.wp-block-button__link:hover,.ld__btn:hover{transform:translateY(-2px)}
  .btn-accent a:hover,.wp-block-button__link:hover{
    box-shadow:0 14px 30px -8px color-mix(in srgb,var(--wp--preset--color--accent) 55%,transparent)}
  .btn a:active,.wp-block-button__link:active,.ld__btn:active{transform:translateY(0)}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .btn a::after,.wp-block-button__link::after,.ld__btn::after,.pm-docs__list a::after{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(115deg,transparent 38%,color-mix(in srgb,#fff 45%,transparent) 50%,transparent 62%);
    background-size:260% 100%;background-position:190% 0;background-repeat:no-repeat;
    transition:background-position .85s cubic-bezier(.22,.68,.28,1)}
  .btn a:hover::after,.wp-block-button__link:hover::after,.ld__btn:hover::after,
  .pm-docs__list a:hover::after{background-position:-90% 0}
}

/* The sheen's resting position, restated last.
   The single-layer `background:` shorthands above reset background-position to
   0 0, which parked the light band across the middle of the panel instead of
   off to the right. Stated here, after everything, so both layers and both
   positions survive. */
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .door::after,.tile::after,.step::after,.review::after,.app-tile::after,
  .team-grid .person::after,.svc-card::after,.value-card::after,
  .pm-docs::after,.about-cta__inner::after{
    background-image:
      linear-gradient(115deg,transparent 38%,color-mix(in srgb,#fff 58%,transparent) 50%,transparent 62%),
      linear-gradient(135deg,color-mix(in srgb,#fff 55%,transparent) 0%,color-mix(in srgb,#fff 10%,transparent) 26%,transparent 52%);
    background-size:260% 100%, auto;
    background-position:190% 0, 0 0;
    background-repeat:no-repeat}

  .app-tile.app-tile--accent::after{
    background-image:
      linear-gradient(115deg,transparent 38%,color-mix(in srgb,#fff 42%,transparent) 50%,transparent 62%),
      linear-gradient(135deg,color-mix(in srgb,#fff 26%,transparent) 0%,transparent 55%);
    background-size:260% 100%, auto;
    background-position:190% 0, 0 0;
    background-repeat:no-repeat}

  .door:hover::after,.tile:hover::after,.step:hover::after,.review:hover::after,
  .app-tile:hover::after,.team-grid .person:hover::after,.svc-card:hover::after,
  .value-card:hover::after,.pm-docs:hover::after,.about-cta__inner:hover::after,
}

/* ---------------------------------------------------------------------------
   Menu chip: word on top, and on the right at every width the chip appears.
   The earlier swap only covered phones (<=430px), so from 431px up to the
   desktop nav the chip was still sitting between the logo and the phone number.
--------------------------------------------------------------------------- */
.site-header .wp-block-navigation__responsive-container-open{flex-direction:column-reverse}

@media(min-width:431px) and (max-width:900px){
  .site-header .site-header__row{justify-content:space-between;flex-wrap:nowrap;gap:.75rem}
  .site-header .site-brand{order:1;margin-right:auto}
  .site-header .site-header__actions{order:2}
  .site-header .site-nav--mobile{order:3;margin-inline:0}
}

/* ===========================================================================
   Blog
   =========================================================================== */
body:not(.home) main.wp-block-group.blog-archive,
body:not(.home) main.wp-block-group.post{padding-top:0;padding-inline:0}
main.wp-block-group.blog-archive > *,
main.wp-block-group.post > *{padding-inline:var(--gutter)}
main.wp-block-group.blog-archive > *,
main.wp-block-group.post > *{margin-block:0}

.blog-hero{padding-block:clamp(2.5rem,7vw,4rem) clamp(1.5rem,4vw,2.25rem)}
.blog-hero__title{margin:0 0 .75rem;max-width:20ch;
  font-size:clamp(2.25rem,5.6vw,3.5rem);line-height:1.05;letter-spacing:-.03em;text-wrap:pretty}
.blog-hero__lead{margin:0;max-width:60ch;font-size:clamp(1.0625rem,2vw,1.25rem);
  color:var(--wp--preset--color--ink-2)}
.blog-empty{padding-block:2rem;color:var(--wp--preset--color--ink-2)}

.post-grid{display:grid;gap:clamp(1rem,2.5vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  padding-bottom:var(--band-half)}
.post-card{margin:0;display:flex;flex-direction:column;
  background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--glass-shine),var(--glass-lift-sm);
  transition:transform .28s cubic-bezier(.22,.68,.28,1),box-shadow .28s ease,border-color .28s ease}
@media(hover:hover){
  .post-card:hover{transform:translateY(-4px);
    border-color:color-mix(in srgb,var(--wp--preset--color--accent) 38%,var(--glass-line));
    box-shadow:var(--glass-shine),0 18px 40px -12px color-mix(in srgb,var(--wp--preset--color--primary) 32%,transparent)}
}
.post-card__link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
/* 16:9-ish for the cards regardless of the source photograph, so a grid of them
   lines up. The photographs are square; object-fit crops rather than letterboxes. */
.post-card__media{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;
  background:var(--wp--preset--color--panel)}
.post-card__img{width:100%;height:100%;object-fit:cover;display:block}
.post-card__noimg{position:absolute;inset:0;background:var(--wp--preset--color--panel)}
.post-card__body{display:flex;flex-direction:column;gap:.4rem;padding:clamp(1.1rem,3vw,1.4rem)}
.post-card__cat{font-size:.875rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--wp--preset--color--accent)}
.post-card__title{font-size:1.25rem;font-weight:800;letter-spacing:-.01em;line-height:1.25;
  color:var(--wp--preset--color--ink)}
.post-card__excerpt{color:var(--wp--preset--color--ink-2);font-size:1rem}
.post-card__meta{margin-top:.25rem;font-size:.9375rem;color:var(--wp--preset--color--ink-2)}

/* The newest post leads, full width, image beside the words on a wide screen.

   The cover is a designed 1200x630 card with text at its own edges, so it cannot
   be cropped to fit and it cannot be letterboxed. That leaves one option: the
   cover has to be the taller of the two columns, so the card height comes from
   the image and the words sit in whatever space is left. Two things make that
   hold, the image takes 56% of the width, and the words are capped at two lines
   each. Below 1024px there is not enough width for the image to out-height the
   text, so the lead card simply stacks like the others. */
@media(min-width:1024px){
  .post-card--lead{grid-column:1 / -1}
  .post-card--lead .post-card__link{flex-direction:row;align-items:stretch}
  .post-card--lead .post-card__media{flex:0 0 56%;aspect-ratio:16/10}
  .post-card--lead .post-card__body{flex:1 1 auto;justify-content:center;gap:.6rem;
    padding:clamp(1.5rem,3.2vw,2.5rem);min-width:0}
  /* line-clamp needs overflow:hidden, and at line-height 1.15 the box is shorter
     than the glyphs, so the tail of a g on the last line was cut off. Same trap
     as the brand tagline in the header. */
  .post-card--lead .post-card__title{font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.28;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .post-card--lead .post-card__excerpt{font-size:1.0625rem;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}

.blog-pager{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;padding-bottom:var(--band-half)}
.blog-pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:46px;min-height:46px;padding:0 .75rem;border-radius:12px;
  border:1px solid var(--glass-line);text-decoration:none;font-weight:700;
  color:var(--wp--preset--color--ink)}
.blog-pager .page-numbers.current{background:var(--wp--preset--color--accent);color:#fff;border-color:transparent}

/* ---- single post ---- */
.post-head{padding-block:clamp(2rem,5vw,3rem) 0;max-width:820px;margin-inline:auto}
.post-head__crumbs{margin:0 0 1rem;font-size:.9375rem;color:var(--wp--preset--color--ink-2)}
.post-head__crumbs a{color:var(--wp--preset--color--primary);text-decoration:none}
.post-head__crumbs a:hover{text-decoration:underline}
.post-head__cat{margin:0 0 .35rem}
.post-head__title{margin:0 0 .6rem;font-size:clamp(2rem,4.8vw,3.125rem);line-height:1.08;
  letter-spacing:-.03em;text-wrap:pretty}
.post-head__meta{margin:0 0 clamp(1.5rem,4vw,2rem);color:var(--wp--preset--color--ink-2)}
.post-head__media{border-radius:var(--r);overflow:hidden;border:1px solid var(--glass-line);
  box-shadow:var(--glass-shine),var(--glass-lift)}
.post-head__media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

.post__body{padding-block:clamp(1.75rem,4vw,2.5rem)}
.post__body p{margin:0 0 1.15rem;max-width:68ch}
.post__body h2{margin:2rem 0 .75rem;font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.02em}
.post__body h3{margin:1.6rem 0 .5rem;font-size:clamp(1.25rem,2.2vw,1.4rem);letter-spacing:-.01em}
.post__body ul,.post__body ol{margin:0 0 1.25rem;padding-left:1.25rem;max-width:68ch}
.post__body li{margin-bottom:.45rem}
.post__body a{color:var(--wp--preset--color--primary);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--wp--preset--color--accent) 55%,transparent)}
.post__body a:hover{text-decoration-color:var(--wp--preset--color--accent)}
.post__body blockquote{margin:1.75rem 0;padding:1rem 0 1rem 1.25rem;
  border-left:3px solid var(--wp--preset--color--accent);
  font-size:1.125rem;color:var(--wp--preset--color--ink)}
.post__body blockquote p:last-child{margin-bottom:0}

.post-tail{padding-block:0 var(--band-half)}
.post-cta{padding-block:clamp(1.5rem,4vw,2.5rem)}
.post-more__title{margin:0 0 clamp(1rem,2.5vw,1.5rem);font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.02em}

/* ===========================================================================
   Free Rental Analysis
   =========================================================================== */
main.wp-block-group.fra > *{margin-block:0}

.fra-hero{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(360px,52vh,520px);
  padding-block:clamp(2.75rem,7vw,4.5rem);margin-bottom:var(--band-half)}
.fra-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  left:calc(50% - 50vw);right:calc(50% - 50vw);
  background-image:
    linear-gradient(180deg,rgba(11,31,58,.80) 0%,rgba(11,31,58,.62) 45%,rgba(11,31,58,.86) 100%),
    url("../img/hero-home-blur.webp");
  background-size:auto, cover;
  background-position:center, center 65%;
  background-repeat:no-repeat}
.fra-hero__eyebrow{color:color-mix(in srgb,#fff 82%,transparent)}
.fra-hero__title{color:#fff;margin:0 0 1rem;max-width:18ch;
  font-size:clamp(2.25rem,5.6vw,3.75rem);line-height:1.04;letter-spacing:-.03em;text-wrap:pretty}
.fra-hero__lead{color:color-mix(in srgb,#fff 90%,transparent);margin:0 0 clamp(1.5rem,4vw,2rem);max-width:54ch;
  font-size:clamp(1.125rem,2vw,1.3125rem)}
.fra-hero__cta .wp-block-button__link{min-height:56px}
.fra-hero__cta .is-style-outline .wp-block-button__link{
  background:transparent;border:2px solid color-mix(in srgb,#fff 70%,transparent);color:#fff}
.fra-hero__cta .is-style-outline .wp-block-button__link:hover{border-color:#fff;background:color-mix(in srgb,#fff 12%,transparent)}

.fra-steps h2{margin:0 0 clamp(1.25rem,3vw,1.75rem);font-size:clamp(1.75rem,3.6vw,2.5rem);letter-spacing:-.02em}
.fra-steps__grid{display:grid;gap:clamp(1rem,2.5vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.fra-step{position:relative;overflow:hidden;padding:clamp(1.25rem,3vw,1.75rem);border-radius:var(--r);
  background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-line);box-shadow:var(--glass-shine),var(--glass-lift-sm)}
.fra-step > *{position:relative;z-index:1}
.fra-step__num{display:block;margin-bottom:.4rem;font-size:.9375rem;font-weight:800;letter-spacing:.08em;
  font-variant-numeric:tabular-nums;color:var(--wp--preset--color--accent)}
.fra-step h3{margin:0 0 .5rem;font-size:1.25rem;letter-spacing:-.01em}
.fra-step p{margin:0;color:var(--wp--preset--color--ink-2)}

.fra-grid{display:grid;gap:clamp(1.5rem,4vw,2.5rem);align-items:start;scroll-margin-top:120px}
@media(min-width:960px){
  .fra-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(2rem,4vw,3rem)}
}
.fra-form-wrap{padding:clamp(1.5rem,3.5vw,2.25rem);border-radius:var(--r);
  background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-line);box-shadow:var(--glass-shine),var(--glass-lift)}
.fra-form__title{margin:0 0 .4rem;font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.02em}
.fra-form__intro{margin:0 0 clamp(1.25rem,3vw,1.75rem);color:var(--wp--preset--color--ink-2)}

.fra-set{border:0;margin:0 0 1.5rem;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.fra-set legend{padding:0;margin:0 0 .75rem;font-size:.9375rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--wp--preset--color--ink-2);grid-column:1 / -1}
.fra-set--wide{grid-template-columns:1fr}
.fld{margin:0;display:flex;flex-direction:column;gap:.35rem}
.fld--address,.fld--upgrades{grid-column:1 / -1}
.fld label{font-weight:700;font-size:1rem;color:var(--wp--preset--color--ink)}
.fld__opt{font-weight:600;font-size:.875rem;color:var(--wp--preset--color--ink-2)}
.fld__hint{font-size:.9375rem;color:var(--wp--preset--color--ink-2)}
.fld__err{font-size:.9375rem;font-weight:700;color:#b3261e}
.fld input,.fld select,.fld textarea{
  width:100%;min-height:52px;padding:.7rem .85rem;font:inherit;font-size:1.0625rem;
  color:var(--wp--preset--color--ink);
  background:color-mix(in srgb,var(--wp--preset--color--base) 82%,transparent);
  border:1px solid var(--glass-line);border-radius:12px;
  transition:border-color .18s ease,box-shadow .18s ease}
.fld textarea{min-height:110px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--wp--preset--color--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--wp--preset--color--accent) 26%,transparent)}
.fld--error input,.fld--error select,.fld--error textarea{border-color:#b3261e}

.fra-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.fra-errors{margin:0 0 1.5rem;padding:1rem 1.1rem;border-radius:12px;
  border:1px solid color-mix(in srgb,#b3261e 40%,transparent);
  background:color-mix(in srgb,#b3261e 8%,transparent)}
.fra-errors p{margin:0 0 .4rem}
.fra-errors ul{margin:0;padding-left:1.1rem}
.fra-errors a{color:#b3261e;font-weight:700}

.fra-submit{display:flex;flex-direction:column;gap:.6rem;margin:0}
.fra-btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:60px;padding:0 1.6rem;border:0;border-radius:999px;cursor:pointer;
  font:inherit;font-size:1.1875rem;font-weight:800;color:#fff;
  background:var(--wp--preset--color--accent);
  box-shadow:0 10px 26px color-mix(in srgb,var(--wp--preset--color--accent) 36%,transparent);
  transition:transform .2s cubic-bezier(.22,.68,.28,1),box-shadow .24s ease,filter .2s ease}
@media(hover:hover){
  .fra-btn:hover{transform:translateY(-2px);filter:brightness(1.05);
    box-shadow:0 16px 34px -8px color-mix(in srgb,var(--wp--preset--color--accent) 55%,transparent)}
}
.fra-btn:active{transform:translateY(0)}
.fra-submit__note{font-size:.9375rem;color:var(--wp--preset--color--ink-2)}

.fra-thanks__title{margin:0 0 .75rem;font-size:clamp(1.5rem,3vw,2.125rem);letter-spacing:-.02em}
.fra-thanks p{margin:0 0 .9rem;color:var(--wp--preset--color--ink-2);max-width:56ch}
.fra-thanks a{color:var(--wp--preset--color--primary);font-weight:700}
.fra-thanks__more{margin-top:1.25rem}

.fra-aside{display:grid;gap:clamp(1rem,2.5vw,1.25rem)}
.fra-aside__card{position:relative;overflow:hidden;padding:clamp(1.25rem,3vw,1.6rem);border-radius:var(--r);
  background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-line);box-shadow:var(--glass-shine),var(--glass-lift-sm)}
.fra-aside__card > *{position:relative;z-index:1}
.fra-aside__card h3{margin:0 0 .5rem;font-size:1.1875rem;letter-spacing:-.01em}
.fra-aside__card p{margin:0 0 .75rem;color:var(--wp--preset--color--ink-2)}
.fra-aside__card .btn{margin:0}
.fra-aside__list{margin:0;padding-left:1.1rem;color:var(--wp--preset--color--ink-2)}
.fra-aside__list li{margin-bottom:.35rem}
.fra-aside__card--quiet{background:color-mix(in srgb,var(--wp--preset--color--panel) 70%,transparent)}

/* ===========================================================================
   Follow strip
   The legacy version was five identical green squares. People find a social
   icon by its colour before they read its shape, so each tile carries its own
   brand colour and lights up on hover.
   =========================================================================== */
.social{position:relative;isolation:isolate;margin-bottom:clamp(2rem,5vw,3rem);
  padding:clamp(1.75rem,4vw,2.75rem) 0 clamp(1.75rem,4vw,2.5rem)}
.social::before{
  content:"";position:absolute;inset:0;z-index:-1;
  left:calc(50% - 50vw);right:calc(50% - 50vw);
  background:
    radial-gradient(60% 120% at 12% 0%, color-mix(in srgb,var(--wp--preset--color--green) 20%,transparent) 0%, transparent 62%),
    radial-gradient(60% 120% at 92% 100%, color-mix(in srgb,var(--wp--preset--color--accent) 24%,transparent) 0%, transparent 60%),
    color-mix(in srgb,var(--wp--preset--color--panel) 72%,transparent);
  border-block:1px solid var(--glass-line)}
.social__inner{display:grid;gap:clamp(1.25rem,3vw,2rem);align-items:center}
@media(min-width:900px){
  .social__inner{grid-template-columns:minmax(0,1fr) auto;gap:clamp(2rem,4vw,3rem)}
}
.social__eyebrow{margin:0 0 .3rem}
.social__title{margin:0;font-size:clamp(1.25rem,2.4vw,1.75rem);letter-spacing:-.02em;
  max-width:26ch;text-wrap:pretty}

.social__list{display:flex;flex-wrap:wrap;gap:clamp(.6rem,1.6vw,.85rem);margin:0;padding:0;list-style:none}
.social__item{margin:0}
.social__link{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;
  width:84px;min-height:84px;padding:.7rem .4rem;border-radius:18px;
  text-decoration:none;color:#fff;
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--brand) 100%,white 0%) 0%,
    color-mix(in srgb,var(--brand) 78%,black 22%) 100%);
  box-shadow:0 8px 20px -8px color-mix(in srgb,var(--brand) 60%,transparent),
    inset 0 1px 0 color-mix(in srgb,#fff 28%,transparent);
  transition:transform .24s cubic-bezier(.22,.68,.28,1),box-shadow .26s ease}
.social__icon{display:flex}
.social__icon svg{display:block}
.social__name{font-size:.8125rem;font-weight:800;letter-spacing:.02em;line-height:1}

@media(hover:hover){
  .social__link:hover{transform:translateY(-4px) scale(1.02);
    box-shadow:0 18px 34px -10px color-mix(in srgb,var(--brand) 78%,transparent),
      inset 0 1px 0 color-mix(in srgb,#fff 38%,transparent)}
  /* the same sheen the panels use, in the tile's own colour */
  .social__link::after{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(115deg,transparent 38%,color-mix(in srgb,#fff 42%,transparent) 50%,transparent 62%);
    background-size:260% 100%;background-position:190% 0;background-repeat:no-repeat;
    transition:background-position .9s cubic-bezier(.22,.68,.28,1)}
  .social__link:hover::after{background-position:-90% 0}
}
.social__link:focus-visible{outline:3px solid var(--wp--preset--color--ink);outline-offset:3px}

/* X's brand is near-black, which needs a visible edge on a light ground. */
.social__link--x{border:1px solid color-mix(in srgb,#fff 22%,transparent)}

@media(max-width:430px){
  .social__list{gap:.5rem}
  .social__link{width:62px;min-height:74px;border-radius:15px}
  .social__name{font-size:.6875rem}
}
@media(prefers-reduced-motion:reduce){
  .social__link,.social__link::after{transition:none}
}

/* The five tiles stay on one row at every width.
   They were fixed at 84px and allowed to wrap, so anywhere around 560-600px the
   fifth one dropped to a second row on its own. They now share the available
   width equally and never wrap; below 560px the labels go and the tiles become
   icon-only squares, which is where the brand colours earn their keep. The link
   still carries an aria-label, so nothing is lost to a screen reader. */
/* border-box matters here: the tiles are flex items sharing the row, and with
   content-box the horizontal padding was added ON TOP of the width flex had
   allotted, 16px per tile, so the row ran 16px past its container at every
   width below 600px. */
.social__list{flex-wrap:nowrap;gap:clamp(.35rem,1.4vw,.85rem);width:100%}
.social__item{flex:1 1 0;min-width:0}
.social__link{box-sizing:border-box;width:100%;max-width:104px;min-width:0}

@media(max-width:560px){
  .social__name{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  .social__link{aspect-ratio:1;min-height:0;padding:.5rem;gap:0}
}

@media(min-width:900px){
  .social__list{width:auto}
  .social__item{flex:0 0 auto}
  .social__link{width:96px}
}

/* ===========================================================================
   Sales agents + print
   =========================================================================== */
.agents{scroll-margin-top:120px}
.agents__title{margin:0 0 .5rem;font-size:clamp(1.75rem,3.6vw,2.5rem);letter-spacing:-.02em}
.agents__lead{margin:0 0 clamp(1.5rem,4vw,2.25rem)}
.agent-grid{display:grid;gap:clamp(1rem,2.5vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.agent{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:clamp(1.25rem,3vw,1.6rem);border-radius:var(--r);
  background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-line);box-shadow:var(--glass-shine),var(--glass-lift-sm);
  transition:transform .28s cubic-bezier(.22,.68,.28,1),box-shadow .28s ease,border-color .28s ease}
.agent > *{position:relative;z-index:1}
@media(hover:hover){
  .agent:hover{transform:translateY(-4px);
    border-color:color-mix(in srgb,var(--wp--preset--color--accent) 38%,var(--glass-line));
    box-shadow:var(--glass-shine),0 18px 40px -12px color-mix(in srgb,var(--wp--preset--color--primary) 32%,transparent)}
}
.agent__photo{width:104px;height:104px;border-radius:50%;object-fit:cover;object-position:center 22%;
  background:var(--wp--preset--color--panel);
  border:3px solid color-mix(in srgb,var(--wp--preset--color--green) 55%,transparent);
  margin-bottom:.85rem}
.agent__name{margin:0;font-size:1.125rem;letter-spacing:-.01em}
.agent__role{margin:.15rem 0 .6rem;font-size:.9375rem;font-weight:700;color:var(--wp--preset--color--accent)}
.agent__lic{margin:0 0 .75rem;padding:0;list-style:none;display:grid;gap:.1rem}
.agent__lic li{font-size:.875rem;color:var(--wp--preset--color--ink-2);font-variant-numeric:tabular-nums}
.agent__links{display:flex;flex-wrap:wrap;gap:.4rem .9rem;justify-content:center;margin:auto 0 0}
.agent__links a{font-size:1rem;font-weight:700;color:var(--wp--preset--color--primary);text-decoration:none;
  border-bottom:2px solid color-mix(in srgb,var(--wp--preset--color--accent) 45%,transparent);padding-bottom:1px}
.agent__links a:hover{border-bottom-color:var(--wp--preset--color--accent)}

.app-note{margin:1rem 0 0;font-size:.9375rem;font-style:italic;color:var(--wp--preset--color--ink-2)}

/* ---- the print button ---- */
.printbar{display:none;margin:0 0 clamp(1rem,2.5vw,1.5rem)}
.printbar.is-ready{display:flex;justify-content:flex-end}
.printbtn{display:inline-flex;align-items:center;gap:.5rem;
  min-height:48px;padding:0 1.1rem;border-radius:999px;cursor:pointer;
  font:inherit;font-size:1rem;font-weight:700;
  color:var(--wp--preset--color--ink);
  background:color-mix(in srgb,var(--wp--preset--color--base) 70%,transparent);
  border:1px solid var(--glass-line);
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
@media(hover:hover){
  .printbtn:hover{border-color:var(--wp--preset--color--accent);transform:translateY(-2px);
    box-shadow:0 10px 22px -10px color-mix(in srgb,var(--wp--preset--color--primary) 40%,transparent)}
}

/* ===========================================================================
   Print sheet
   The legacy "Print HTML" button opened the raw Matrix frame, so an owner or a
   renter ended up printing the MLS interface. This prints the page they are
   already on: the homes, laid out plainly, with SMART's name and number at the
   top and the Las Vegas REALTORS® credit at the bottom, which the IDX rules
   require to travel with the data.
   =========================================================================== */
@media print{
  @page{margin:14mm 12mm}

  html,body{background:#fff !important;color:#111 !important;font-size:11pt}
  body::before,body::after{display:none !important}

  /* Chrome that means nothing on paper. */
  header.wp-block-template-part,
  footer.wp-block-template-part,
  .site-header,.site-footer,.social,.mobile-logins,
  .rentals-hero,.printbar,.app-tiles,.listings-frame__bar,
  .listing__arrow,.listing__dots,.ldg,.ldg__thumbs,
  .listing-detail,.blog-pager{display:none !important}

  main.wp-block-group,main.wp-block-group > *{padding:0 !important;margin:0 !important;max-width:none !important}

  /* A masthead, since the site header is gone. */
  .listings-section::before{
    content:"SMART Property Management  ·  (702) 750-9725  ·  managevegas.com";
    display:block;margin:0 0 6mm;padding:0 0 3mm;
    border-bottom:1.5pt solid #111;
    font-size:12pt;font-weight:800;letter-spacing:.01em}

  .listings-head{display:flex !important;margin:0 0 4mm}
  .listings-head__title{font-size:14pt !important;margin:0}
  .listings-head__count{font-size:10pt !important}

  /* One home per row, so nothing is guessed at. */
  .listing-grid{display:block !important}
  .listing{
    display:grid !important;grid-template-columns:44mm 1fr;gap:5mm;align-items:start;
    margin:0 0 5mm;padding:0 0 4mm;
    background:none !important;border:0 !important;border-bottom:.5pt solid #bbb !important;
    border-radius:0 !important;box-shadow:none !important;
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
    break-inside:avoid;page-break-inside:avoid;transform:none !important}
  .listing::after{display:none !important}
  .listing__link{display:contents !important}
  .listing__media{aspect-ratio:4/3 !important;border-radius:2pt;overflow:hidden}
  .listing__strip{display:block !important;overflow:visible !important}
  /* only the lead photograph prints */
  .listing__shot{display:none !important}
  .listing__shot:first-child{display:block !important}
  .listing__img{width:100% !important;height:auto !important}
  .listing__badge{position:static !important;display:inline-block;margin:0 0 1mm;
    padding:0;background:none !important;color:#111 !important;
    font-size:9pt;font-weight:800;text-transform:uppercase;letter-spacing:.06em;box-shadow:none !important}
  .listing__body{padding:0 !important;display:block !important}
  .listing__price{font-size:15pt !important;font-weight:800;display:block}
  .listing__per{font-size:10pt !important}
  .listing__address{font-size:12pt !important;font-weight:700;display:block;margin-top:1mm}
  .listing__city{font-size:10pt !important;display:block}
  .listing__meta{display:block !important;margin-top:2mm;font-size:10pt}
  .listing__meta span{margin-right:5mm}

  /* The credit has to travel with the data. */
  .listings-credit{
    margin-top:6mm !important;padding-top:3mm;border-top:.5pt solid #bbb;
    font-size:8.5pt !important;color:#333 !important;break-inside:avoid}
  .listings-credit::after{
    content:" Printed from managevegas.com. Availability changes daily, call (702) 750-9725 to confirm.";
    display:block;margin-top:1mm}

  /* Agents fit on the end of the sheet rather than starting a page of their own. */
  .agents{break-before:auto;margin-top:6mm !important}
  .agents__title{font-size:13pt !important}
  .agents__lead{display:none !important}
  .agent-grid{display:grid !important;grid-template-columns:repeat(3,1fr);gap:4mm}
  .agent{display:block !important;text-align:left;padding:0 !important;border:0 !important;
    background:none !important;box-shadow:none !important;border-radius:0 !important;
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
    break-inside:avoid;transform:none !important}
  .agent::after{display:none !important}
  .agent__photo{display:none !important}
  .agent__name{font-size:11pt !important}
  .agent__role{font-size:9.5pt !important;color:#111 !important}
  .agent__lic li{font-size:8.5pt !important;color:#333 !important}
  .agent__links{display:none !important}

  a{color:#111 !important;text-decoration:none !important}
}

/* The MLS number is only useful on paper, on screen the detail panel carries it, and a number under every card would be noise. */
.listing__mls{display:none}

@media print{
  /* The "tell us what you are looking for" block is screen chrome: its tiles are
     already hidden, and what is left is a heading over dead space. The phone
     number is in the masthead and again in the credit line. */
  .rentals-cta{display:none !important}

  .listing__mls{display:block !important;margin-top:1.5mm;
    font-size:9.5pt;font-weight:700;color:#333 !important;font-variant-numeric:tabular-nums}
}

/* Print spacing, tuned on a Letter sheet.
   The first pass was legible but cramped: the masthead sat on the first home and
   the rows ran together. These are the numbers that made it read like a document
   rather than a dump of the page. */
@media print{
  .listings-section::before{margin-bottom:8mm !important;padding-bottom:3.5mm !important}
  .listings-head{margin:0 0 5mm !important;padding-bottom:2mm;border-bottom:.5pt solid #ddd}
  .listings-head--sales{margin-top:9mm !important}

  .listing{margin:0 0 6mm !important;padding:0 0 5mm !important;gap:6mm !important}
  .listing:last-child{border-bottom:0 !important;padding-bottom:0 !important}
  .listing__body{padding-top:.5mm !important}
  .listing__price{margin-bottom:.5mm}
  .listing__meta{margin-top:2.5mm !important}
  .listing__mls{margin-top:2mm !important}

  .listings-credit{margin-top:8mm !important;padding-top:3.5mm !important}
  .agents{margin-top:9mm !important}
  .agents__title{margin:0 0 4mm !important}
  .agent-grid{gap:5mm !important;row-gap:6mm !important}
  .agent__name{margin:0 0 .5mm !important}
  .agent__role{margin:0 0 1.5mm !important}
  .agent__lic{margin:0 !important}

  /* A photograph that never loaded prints as an empty frame rather than a grey
     slab, so a printed sheet with one gap still looks deliberate. */
  .listing__media{background:none !important;border:.5pt solid #ddd}
}

/* The print masthead is markup now, not generated content, because generated
   content cannot carry a logo. Hidden on screen entirely. */
.print-head{display:none}

@media print{
  /* the old text-only masthead */
  .listings-section::before{display:none !important}

  .print-head{
    display:flex !important;align-items:center;gap:5mm;
    margin:0 0 8mm;padding:0 0 4mm;
    border-bottom:1.5pt solid #111;
    break-after:avoid;page-break-after:avoid}
  .print-head__mark{width:26mm;height:auto;display:block}
  .print-head__txt{display:block}
  .print-head__name{display:block;font-size:13pt;font-weight:800;letter-spacing:.01em;line-height:1.15}
  .print-head__meta{display:block;margin-top:1mm;font-size:10.5pt;color:#333}
}

@media print{
  /* Keeping a card whole across a page break.

     `break-inside: avoid` was already on .agent and Chrome ignored it, because the
     cards are grid items and Chrome does not fragment grid containers properly.
     Laying them out as inline-blocks instead gives the same three-up result and
     the break rule is honoured, Nicholas's licence no longer lands on its own
     page without his name. */
  .agent-grid{display:block !important;font-size:0}
  .agent{
    display:inline-block !important;width:32%;margin:0 1% 6mm 0;vertical-align:top;
    font-size:10pt;
    break-inside:avoid !important;page-break-inside:avoid !important}
  .agent:nth-child(3n){margin-right:0}

  /* The whole section prefers to move to the next page rather than split, and the
     heading never sits alone at the foot of one. */
  .agents{break-inside:avoid;page-break-inside:avoid}
  .agents .eyebrow,
  .agents__title{break-after:avoid;page-break-after:avoid}

  /* Same for the credit: a disclaimer split in half is worse than a short page. */
  .listings-credit{break-inside:avoid;page-break-inside:avoid}
  .listings-head{break-after:avoid;page-break-after:avoid}
  .print-head{break-after:avoid;page-break-after:avoid}
}

/* ===========================================================================
   Useful videos
   Same frame as the hero video, 16:9, the same corner radius, the same glass
   card, because a second video style on one page reads as an accident.
   =========================================================================== */
.videos__title{margin:0 0 .5rem;font-size:clamp(1.75rem,3.6vw,2.5rem);letter-spacing:-.02em}
.videos__lead{margin:0 0 clamp(1.5rem,4vw,2.25rem)}
.video-grid{display:grid;gap:clamp(1.25rem,3vw,1.75rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.video-card{margin:0}
.video-card__frame{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  background:var(--wp--preset--color--panel);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-shine),var(--glass-lift);
  transition:transform .28s cubic-bezier(.22,.68,.28,1),box-shadow .28s ease}
.video-card__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media(hover:hover){
  .video-card:hover .video-card__frame{transform:translateY(-4px);
    box-shadow:var(--glass-shine),0 18px 40px -12px color-mix(in srgb,var(--wp--preset--color--primary) 32%,transparent)}
}
.video-card__for{margin:.85rem 0 .15rem;font-size:.875rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--wp--preset--color--accent)}
.video-card__title{margin:0;font-size:1.125rem;letter-spacing:-.01em;line-height:1.3}

@media print{ .videos{display:none !important} }

/* The home page quote block: a photograph and a real route to the form, instead
   of the build note that was sitting there in production. */
/* home-banner.webp is square, so the panel takes its ratio rather than cropping
   a 4:3 window out of it. */
.quote__media{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:var(--r);border:1px solid var(--glass-line);
  box-shadow:var(--glass-shine),var(--glass-lift-sm)}
.quote__cta{margin:1.1rem 0 0;display:flex;flex-wrap:wrap;gap:.65rem}
.quote__cta .btn{margin:0}

/* The quote block is a dark panel, but .btn-ghost takes its colour from the base
   button rule, dark ink, so "Call (702) 750-9725" was navy text on a navy
   card: a button with nothing in it. Same treatment the dark heroes use. */
.quote .btn-ghost a{
  color:var(--wp--preset--color--contrast);
  border-color:color-mix(in srgb,var(--wp--preset--color--contrast) 70%,transparent)}
.quote .btn-ghost a:hover{
  border-color:var(--wp--preset--color--contrast);
  background:color-mix(in srgb,#fff 12%,transparent)}

/* Just the photograph. .quote__form was styled as a form panel, tinted panel,
   border, padding, from when it actually held a form. It holds a picture now, and a picture in a box inside a box reads as a mistake. */
.quote__form{background:none;border:0;padding:0;border-radius:0}
.quote__media{border:0;box-shadow:none}

/* ---- full listing detail ---- */
.ld__about{margin:1.25rem 0 0}
.ld__about h4{margin:0 0 .4rem;font-size:1.0625rem;letter-spacing:-.01em}
.ld__about p{margin:0;color:var(--wp--preset--color--ink-2);line-height:1.6}
.ld__more{margin:1rem 0 0;border-top:1px solid var(--wp--preset--color--line);padding-top:.75rem}
.ld__more summary{cursor:pointer;font-weight:800;font-size:1rem;letter-spacing:-.01em;
  list-style:none;display:flex;align-items:center;gap:.5rem}
.ld__more summary::-webkit-details-marker{display:none}
.ld__more summary::before{content:"";width:8px;height:8px;flex:0 0 auto;
  border-right:2px solid var(--wp--preset--color--accent);
  border-bottom:2px solid var(--wp--preset--color--accent);
  transform:rotate(-45deg);transition:transform .18s ease}
.ld__more[open] summary::before{transform:rotate(45deg)}
.ld__rows{margin:.75rem 0 0;display:grid;gap:.35rem}
.ld__row{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:.75rem;
  padding:.3rem 0;border-bottom:1px solid color-mix(in srgb,var(--wp--preset--color--line) 55%,transparent)}
.ld__row:last-child{border-bottom:0}
.ld__row dt{margin:0;font-size:.9375rem;color:var(--wp--preset--color--ink-2)}
.ld__row dd{margin:0;font-size:.9375rem;font-weight:700;color:var(--wp--preset--color--ink)}
.ld__directions{margin:1rem 0 0;font-size:.9375rem;color:var(--wp--preset--color--ink-2)}
@media(max-width:560px){
  .ld__row{grid-template-columns:1fr;gap:.1rem}
  .ld__row dt{font-size:.875rem}
}
@media print{ .ld__more,.ld__about,.ld__directions{display:none !important} }

/* The header sticks at every width again. The nav row used to stick with it, which was the actual complaint; that row now lives outside the header (see
   smart_pm_render_nav_row) and scrolls away on its own. */


/* ---------------------------------------------------------------------------
   The nav row, now a sibling of the header rather than part of it.
   It used to inherit the header's background, width and gutters by being inside
   it. Standing on its own it needs all three, or it renders as bare links on the
   page background at full bleed.
--------------------------------------------------------------------------- */
/* The class is doubled throughout: WordPress emits its own display:flex on the
   group's generated .wp-container-* class in an inline <style> that lands after
   this file, so a single class here loses. It used to win by being written as
   ".site-header .site-header__navrow", two classes, and unscoping it when the
   row moved out of the header quietly broke the mobile hide. */
.site-header__navrow.site-header__navrow{
  position:relative;z-index:99;
  display:flex;
  background:var(--wp--preset--color--base);
  border-bottom:1px solid var(--wp--preset--color--line);
  border-top:0;
  margin:0}
/* Match the header's 1280px measure and its gutters. */
.site-header__navrow > *{
  width:100%;max-width:1280px;margin-inline:auto;
  padding-inline:var(--gutter)}
@media(max-width:900px){
  .site-header__navrow.site-header__navrow{display:none}
}

/* Eight items need most of the row; below about 980px they wrap to two lines.
   Tighten the gaps rather than let the row double in height. */
@media(min-width:901px) and (max-width:1040px){
  .site-header__navrow .wp-block-navigation{gap:1rem}
  .site-header__navrow .wp-block-navigation-item__content{font-size:1rem}
}

/* ---------------------------------------------------------------------------
   The nav row only appears when it genuinely fits.
   Eight items need about 820px of text plus gaps; between 901 and 1040px they
   wrapped to two lines, which looked like a mistake. The menu chip covers that
   (raised from 1040 to 1080px on Oct 8, 2026: "Available Properties" is longer than the
   old "Available Rentals" and wrapped Blog at 1041-1050, and the three home quick links
   clipped the brand up to ~1080)
   range instead, it is a tablet, and a chip there is normal.
--------------------------------------------------------------------------- */
@media(max-width:1080px){
  .site-header__navrow.site-header__navrow{display:none}
  .site-header .site-nav--mobile{display:flex}
  .site-header .site-nav--desktop{display:none}
}
@media(min-width:1081px){
  .site-header .site-nav--mobile{display:none}
}

/* ===========================================================================
   One line, every width.

   The header used to wrap: the phone pill dropped to its own row below 431px and
   the logo kept its 80px height regardless, so on a phone you got logo + menu,
   then the number, then the login buttons, three storeys before any content.

   The fix is to let the LOGO be the thing that gives. The phone number and the
   menu chip have a floor below which they stop being usable; a logo does not, it just gets smaller. So the brand is the only shrinkable item in the row and
   the image scales with it, keeping its aspect ratio, down to a floor of 96px
   wide. Nothing wraps and nothing bleeds past the gutter.
   =========================================================================== */
@media(max-width:1080px){
  .site-header .site-header__row{
    flex-wrap:nowrap !important;
    justify-content:space-between;
    gap:.5rem;
    row-gap:0}

  /* the one item allowed to shrink */
  .site-header .site-brand{
    order:1 !important;
    flex:0 1 auto !important;
    min-width:0;
    margin-right:auto}
  /* Width-driven rather than height-driven, because the <img> carries
     sizes="136px" and with height:auto the browser uses the density-corrected
     intrinsic size, which pinned it at 136px wide however much room there was.
     An explicit width scales it properly and height:auto keeps the aspect. */
  .site-header .site-brand__mark{
    width:clamp(100px, 30vw, 186px) !important;
    height:auto !important;
    max-width:100%;
    max-height:80px}

  /* these two keep their size */
  .site-header .site-header__actions{
    order:2 !important;
    flex:0 1 auto !important;
    min-width:0}
  .site-header .site-nav--mobile{
    order:3 !important;
    flex:0 0 auto !important;
    margin-inline:0}
  .site-header .tel-btn{flex:0 1 auto;display:block;min-width:0}
  .site-header .tel-btn a{
    flex:0 1 auto;
    width:auto;
    white-space:nowrap;
    justify-content:center}
}

/* Tight phones: the pill loses its icon, then some padding. The number itself
   never shrinks, Mark Hall is legally blind and it is the main conversion path. */
@media(max-width:430px){
  .site-header .tel-icon{display:none !important}
  .site-header .tel-btn a{padding-inline:.85rem}
}
@media(max-width:380px){
  .site-header .site-header__row{gap:.35rem}
  .site-header .tel-btn a{padding-inline:.6rem}
  .site-header .site-brand__mark{width:clamp(88px, 28vw, 120px) !important}
}

/* Very small phones: the pill was running under the menu chip, measured -2px of
   gap at 340px and -11px at 320px. The number stays full size (it is the point of
   the pill), so the logo gives up more width and the chip tightens its padding. */
@media(max-width:360px){
  .site-header .site-brand__mark{width:clamp(72px, 24vw, 104px) !important}
}
@media(max-width:340px){
  .site-header .wp-block-navigation__responsive-container-open{padding-inline:6px}
  .site-header .tel-btn a{padding-inline:.5rem}
}

/* ---------------------------------------------------------------------------
   Team photographs lift and zoom under the pointer.
   The crop is fixed by the circular frame, so the image scales inside it rather
   than the frame growing, the card layout never moves.
--------------------------------------------------------------------------- */
.team-grid .person__photo,
.agent__photo{
  transition:transform .35s cubic-bezier(.22,.68,.28,1);
  will-change:transform}
@media(hover:hover){
  .team-grid .person:hover .person__photo,
  .agent:hover .agent__photo{transform:scale(1.12)}
}
@media(prefers-reduced-motion:reduce){
  .team-grid .person__photo,
  .agent__photo{transition:none}
  .team-grid .person:hover .person__photo,
  .agent:hover .agent__photo{transform:none}
}

/* The extension reads as a qualifier on the number, not a second number. */
.team-grid .person__ext,
.agent__ext{font-weight:600;color:var(--wp--preset--color--ink-2);white-space:nowrap}

/* ===========================================================================
   Ken Burns without the overflow.

   The three inner heroes animated `transform: scale()` on a backdrop that is
   already exactly viewport-wide, so scaling it pushed 6px past the right edge at
   the start of the cycle and about 21px at the end. On a phone that is a page
   that scrolls sideways and jitters under a thumb.

   None of the automated checks caught it, and they could not have: headless
   Chrome reports prefers-reduced-motion: reduce by default, which switches the
   animation off. The overflow only exists when the animation runs. Anything
   motion-related has to be measured with the media feature explicitly emulated.

   The fix is the technique the home hero already used for its own reasons: pan
   the photograph inside the box with background-position instead of scaling the
   box. The geometry never changes, so it cannot overflow. Each hero starts from
   its own framing, hence one keyframe set per hero.
   =========================================================================== */
@media(prefers-reduced-motion:no-preference){
  .about-hero::before,
  .pm-hero::before,
  .rentals-hero::before,
  .fra-hero::before{
    transform:none !important;
    will-change:background-position}

  .about-hero::before{animation:smart-kb-about 34s ease-in-out infinite alternate}
  .pm-hero::before{animation:smart-kb-pm 34s ease-in-out infinite alternate}
  .rentals-hero::before{animation:smart-kb-rentals 34s ease-in-out infinite alternate}
  .fra-hero::before{animation:smart-kb-fra 34s ease-in-out infinite alternate}
}

@keyframes smart-kb-about{
  from{background-position:center, 46% 55%}
  to{background-position:center, 56% 47%}
}
@keyframes smart-kb-pm{
  from{background-position:center, 46% 82%}
  to{background-position:center, 56% 74%}
}
@keyframes smart-kb-rentals{
  from{background-position:center, 46% 30%}
  to{background-position:center, 56% 22%}
}
@keyframes smart-kb-fra{
  from{background-position:center, 46% 65%}
  to{background-position:center, 56% 57%}
}

/* A guard for anything full-bleed that overshoots in future. `clip` rather than
   `hidden` deliberately: hidden makes the element a scroll container, which
   breaks position:sticky on the header. clip does not. */
html{overflow-x:clip}

/* ===========================================================================
   Hub and utility pages
   Tenants, Owners, Contact, Maintenance Request, Apply, FAQ, Forms, Reviews,
   Areas and the five area pages. One hero rule set.page-hero, instead of
   a ninth copy of the About hero with the class renamed. Each page picks its
   own framing of the same 20 KB backdrop with a custom property, and the pan
   keyframes read that property, so there is one animation rather than one per
   page. Same box-geometry pan as the other heroes: it cannot overflow.
   =========================================================================== */
body:not(.home) main.wp-block-group.inner{padding-top:0;padding-inline:0}
main.wp-block-group.inner > *{padding-inline:var(--gutter);margin-block:0}
main.wp-block-group.inner > .page-hero{padding-inline:var(--gutter)}

.page-hero{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;
  --kb-y:50%;
  min-height:clamp(360px,52vh,520px);
  padding-block:clamp(2.75rem,7vw,4.5rem);margin-bottom:var(--band-half)}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  left:calc(50% - 50vw);right:calc(50% - 50vw);
  background-image:
    linear-gradient(180deg,rgba(11,31,58,.80) 0%,rgba(11,31,58,.62) 45%,rgba(11,31,58,.86) 100%),
    url("../img/hero-home-blur.webp");
  background-size:auto, cover;
  background-position:center, 46% var(--kb-y);
  background-repeat:no-repeat}
.page-hero--tenants{--kb-y:40%}
.page-hero--owners{--kb-y:70%}
.page-hero--contact{--kb-y:50%}
.page-hero--repairs{--kb-y:30%}
.page-hero--apply{--kb-y:60%}
.page-hero--faq{--kb-y:45%}
.page-hero--forms{--kb-y:35%}
.page-hero--reviews{--kb-y:75%}
.page-hero--areas{--kb-y:55%}
.page-hero--area{--kb-y:65%}
.page-hero__eyebrow{color:color-mix(in srgb,#fff 82%,transparent)}
.page-hero__title{color:#fff;margin:0 0 1rem;max-width:20ch;
  font-size:clamp(2.25rem,5.6vw,3.75rem);line-height:1.04;letter-spacing:-.03em;text-wrap:pretty}
.page-hero__lead{color:color-mix(in srgb,#fff 90%,transparent);margin:0 0 clamp(1.5rem,4vw,2rem);max-width:54ch;
  font-size:clamp(1.125rem,2vw,1.3125rem)}
.page-hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:flex-start}
.page-hero__cta .wp-block-button__link{min-height:56px}
.page-hero__cta .is-style-outline .wp-block-button__link{
  background:transparent;border:2px solid color-mix(in srgb,#fff 70%,transparent);color:#fff}
.page-hero__cta .is-style-outline .wp-block-button__link:hover{border-color:#fff;background:color-mix(in srgb,#fff 12%,transparent)}
@media(max-width:600px){
  .page-hero__cta{width:100%}
  .page-hero__cta .wp-block-button{width:100%}
  .page-hero__cta .wp-block-button__link{width:100%;min-height:60px;display:inline-flex;align-items:center;justify-content:center;font-size:1.125rem}
}
@media(prefers-reduced-motion:no-preference){
  .page-hero::before{will-change:background-position;animation:smart-kb-page 34s ease-in-out infinite alternate}
}
@keyframes smart-kb-page{
  from{background-position:center, 46% var(--kb-y)}
  to{background-position:center, 56% calc(var(--kb-y) - 8%)}
}

/* Section headings inside these pages share one scale. */
.inner .section > h2,.inner .section h2.videos__title{margin:0 0 clamp(1rem,2.5vw,1.5rem);
  font-size:clamp(1.75rem,3.6vw,2.5rem);letter-spacing:-.02em}
.inner .section > .lead{max-width:60ch;margin-bottom:clamp(1.5rem,4vw,2rem)}
.inner .section > .small{margin-top:1rem}

/* ---- App tiles as links (the hubs). The home/rentals tiles are columns with a
   paragraph inside; these are one <a> each, so the whole card is the target. ---- */
.app-tiles--six,.app-tiles--five{display:grid;gap:clamp(.9rem,2.5vw,1.25rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
@media(min-width:960px){
  .app-tiles--six{grid-template-columns:repeat(3,1fr)}
  .app-tiles--five{grid-template-columns:repeat(5,1fr)}
}
@media(max-width:600px){
  .app-tiles--six,.app-tiles--five{grid-template-columns:1fr 1fr}
}
a.app-tile{display:flex;flex-direction:column;justify-content:flex-end;gap:.35rem;
  text-decoration:none;color:var(--wp--preset--color--ink);min-height:132px}
a.app-tile strong{font-size:1.125rem;letter-spacing:-.01em;line-height:1.2}
a.app-tile span{font-size:.9375rem;color:var(--wp--preset--color--ink-2);line-height:1.35}
a.app-tile.app-tile--accent span{color:color-mix(in srgb,#fff 88%,transparent)}
@media(max-width:600px){
  a.app-tile{min-height:120px;padding:1rem}
  a.app-tile strong{font-size:1.0625rem}
  a.app-tile span{font-size:.875rem}
}

/* ---- Two-column bands with an aside ---- */
.tenant-split{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media(min-width:900px){
  .tenant-split{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  .tenant-split--flip{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
}
.tenant-split h2{margin:0 0 1rem;font-size:clamp(1.625rem,3.2vw,2.25rem);letter-spacing:-.02em}
.tenant-split p{max-width:58ch}
.tenant-split .btn{margin-top:1rem;display:inline-block}
.tenant-aside{position:relative;overflow:hidden;padding:clamp(1.25rem,3vw,1.6rem);border-radius:var(--r);
  background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-line);box-shadow:var(--glass-shine),var(--glass-lift-sm);box-sizing:border-box}
.tenant-aside > *{position:relative;z-index:1}
.tenant-aside h3{margin:0 0 .5rem;font-size:1.1875rem;letter-spacing:-.01em}
.tenant-aside p,.tenant-aside li{color:var(--wp--preset--color--ink-2)}
.tenant-aside p{margin:0 0 .75rem}
.tenant-aside ul{margin:0 0 .75rem;padding-left:1.1rem}
.tenant-aside--alert{border-color:color-mix(in srgb,var(--wp--preset--color--accent) 55%,var(--glass-line));
  background:linear-gradient(180deg,color-mix(in srgb,var(--wp--preset--color--accent-soft) 96%,transparent),color-mix(in srgb,var(--wp--preset--color--accent-soft) 70%,transparent))}
.tenant-aside--alert h2,.tenant-aside--alert h3{color:var(--wp--preset--color--ink)}
.tenant-aside--alert p,.tenant-aside--alert li{color:var(--wp--preset--color--ink)}
.tenant-aside--wide{max-width:none}
.tenant-aside--wide h2{margin:0 0 .5rem;font-size:clamp(1.375rem,2.6vw,1.75rem);letter-spacing:-.02em}
.tenant-aside__big{font-size:clamp(1.75rem,4vw,2.25rem);font-weight:800;letter-spacing:-.02em;margin:0}
.tenant-aside__big a{text-decoration:none;color:var(--wp--preset--color--ink)}

/* ---- Three cards in a row ---- */
.tenant-three{display:grid;gap:clamp(1rem,2.5vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.tenant-three .value-card p:last-child{margin-top:.75rem}
.tenant-three .value-card a{font-weight:700;color:var(--wp--preset--color--primary)}
.check-list{margin:0 0 1.25rem;padding-left:0;list-style:none;display:grid;gap:.5rem}
.check-list li{position:relative;padding-left:1.75rem;color:var(--wp--preset--color--ink)}
.check-list li::before{content:"";position:absolute;left:0;top:.45em;width:.9rem;height:.5rem;
  border-left:3px solid var(--wp--preset--color--green);border-bottom:3px solid var(--wp--preset--color--green);transform:rotate(-45deg)}

/* ---- Utilities ---- */
.util-grid{display:grid;gap:clamp(1rem,2.5vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.util-card{position:relative;overflow:hidden;padding:clamp(1.25rem,3vw,1.6rem);border-radius:var(--r);
  background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-line);box-shadow:var(--glass-shine),var(--glass-lift-sm);box-sizing:border-box}
.util-card > *{position:relative;z-index:1}
.util-card h3{margin:0 0 .75rem;font-size:1.25rem;letter-spacing:-.01em}
.util-list{margin:0;display:grid;gap:.6rem}
.util-row{display:grid;gap:.15rem;padding-bottom:.6rem;border-bottom:1px solid color-mix(in srgb,var(--wp--preset--color--line) 60%,transparent)}
.util-row:last-child{border-bottom:0;padding-bottom:0}
.util-row dt{margin:0;font-size:.875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--wp--preset--color--ink-2)}
.util-row dd{margin:0;font-size:1rem;color:var(--wp--preset--color--ink-2);line-height:1.45}
.util-row dd strong{color:var(--wp--preset--color--ink)}
.util-row dd a{color:var(--wp--preset--color--primary);font-weight:700;text-decoration:none}
.util-row dd a:hover{text-decoration:underline}

/* ---- Documents ---- */
.tenant-docs,.forms-grid{display:grid;gap:clamp(1.25rem,3vw,2rem);align-items:start}
@media(min-width:900px){
  .tenant-docs,.forms-grid{grid-template-columns:1fr 1fr}
  .forms-grid--one{grid-template-columns:1fr}
}
.forms-page__h{margin:clamp(1.5rem,4vw,2.5rem) 0 clamp(1rem,2.5vw,1.5rem);font-size:clamp(1.75rem,3.6vw,2.5rem);letter-spacing:-.02em}
.forms-page__h:first-of-type{margin-top:clamp(1rem,2.5vw,1.5rem)}
.doc-group__title{margin:0 0 .75rem;font-size:1.25rem;letter-spacing:-.01em}
.doc-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.doc{margin:0}
.doc__link{display:flex;gap:1rem;align-items:flex-start;text-decoration:none;color:inherit;
  padding:1rem 1.1rem;border-radius:var(--r);box-sizing:border-box;
  background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-line);box-shadow:var(--glass-shine),var(--glass-lift-sm);
  transition:transform .22s cubic-bezier(.22,.68,.28,1),box-shadow .24s ease,border-color .2s ease}
@media(hover:hover){
  .doc__link:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--wp--preset--color--accent) 45%,var(--glass-line));
    box-shadow:var(--glass-shine),0 14px 30px -10px color-mix(in srgb,var(--wp--preset--color--primary) 28%,transparent)}
}
.doc__icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:56px;border-radius:8px;font-size:.75rem;font-weight:800;letter-spacing:.08em;
  color:#fff;background:var(--wp--preset--color--primary);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,#fff 18%,transparent)}
.doc__body{display:grid;gap:.2rem;min-width:0}
.doc__title{font-weight:800;font-size:1.0625rem;letter-spacing:-.01em;color:var(--wp--preset--color--ink)}
.doc__desc{font-size:.9375rem;color:var(--wp--preset--color--ink-2);line-height:1.45}
.doc__meta{font-size:.8125rem;font-weight:700;letter-spacing:.04em;color:var(--wp--preset--color--ink-2)}

/* ---- FAQ ---- */
.faq-group{margin-bottom:clamp(2rem,5vw,3rem)}
.faq-group:last-child{margin-bottom:0}
.faq-group__title{margin:0 0 .35rem;font-size:clamp(1.625rem,3.2vw,2.25rem);letter-spacing:-.02em}
.faq-group__lead{margin:0 0 clamp(1rem,2.5vw,1.5rem);color:var(--wp--preset--color--ink-2)}
.faq{margin:0 0 .6rem;border-radius:var(--r);box-sizing:border-box;overflow:hidden;
  background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-line);box-shadow:var(--glass-shine),var(--glass-lift-sm)}
.faq[open]{border-color:color-mix(in srgb,var(--wp--preset--color--accent) 40%,var(--glass-line))}
.faq__q{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.1rem;min-height:56px;font-weight:800;font-size:1.0625rem;letter-spacing:-.01em;color:var(--wp--preset--color--ink)}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{content:"";flex:0 0 auto;width:10px;height:10px;margin-right:.25rem;
  border-right:2.5px solid var(--wp--preset--color--accent);border-bottom:2.5px solid var(--wp--preset--color--accent);
  transform:rotate(45deg);transition:transform .2s ease}
.faq[open] .faq__q::after{transform:rotate(-135deg)}
.faq__q:hover{color:var(--wp--preset--color--primary)}
.faq__a{padding:0 1.1rem 1.1rem;color:var(--wp--preset--color--ink-2);line-height:1.6}
.faq__a p{margin:0 0 .75rem;max-width:70ch}
.faq__a p:last-child{margin-bottom:0}
.faq__a a{color:var(--wp--preset--color--primary);font-weight:700}
.tenant-faq__more{margin-top:1rem;font-weight:700}
.tenant-faq__more a{color:var(--wp--preset--color--primary)}
.faq-jump{margin-bottom:clamp(1.5rem,4vw,2.5rem)}

/* ---- Jump links (areas, FAQ, forms) ---- */
.areas-jump ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.areas-jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border-radius:999px;
  text-decoration:none;font-weight:700;font-size:.9375rem;color:var(--wp--preset--color--ink);
  background:var(--wp--preset--color--panel);border:1px solid var(--wp--preset--color--line);
  transition:background .18s ease,border-color .18s ease}
.areas-jump a:hover{border-color:var(--wp--preset--color--accent);background:var(--wp--preset--color--accent-soft)}

/* ---- Contact ---- */
.contact-grid{display:grid;gap:clamp(1rem,2.5vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.contact-card{position:relative;overflow:hidden;padding:clamp(1.25rem,3vw,1.6rem);border-radius:var(--r);box-sizing:border-box;
  background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-line);box-shadow:var(--glass-shine),var(--glass-lift-sm)}
.contact-card > *{position:relative;z-index:1}
.contact-card p{margin:0 0 .5rem}
.contact-card p:last-child{margin-bottom:0}
.contact-card a{color:var(--wp--preset--color--primary);font-weight:700;overflow-wrap:anywhere}
.contact-card--call{background:linear-gradient(180deg,color-mix(in srgb,var(--wp--preset--color--accent-soft) 96%,transparent),color-mix(in srgb,var(--wp--preset--color--accent-soft) 74%,transparent))}
.contact-card__big{font-size:clamp(1.625rem,3.4vw,2rem);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.contact-card__big a{text-decoration:none;color:var(--wp--preset--color--ink)}
.contact-card__addr{line-height:1.5}
.contact-map__frame{position:relative;aspect-ratio:2.4/1;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--glass-line);box-shadow:var(--glass-shine),var(--glass-lift);background:var(--wp--preset--color--panel)}
.contact-map__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:600px){ .contact-map__frame{aspect-ratio:4/3} }

/* ---- Forms on the hub pages: the generic engine's grid ---- */
.form-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.form-grid .fld--message,.form-grid .fld--details,.form-grid .fld--address{grid-column:1 / -1}
.fra-submit__note a{color:var(--wp--preset--color--primary);font-weight:700}
.fra-form__intro a{color:var(--wp--preset--color--primary);font-weight:700}

/* ---- Reviews page ---- */
.reviews-grid{display:grid;gap:clamp(1rem,2.5vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.review--page{margin:0;display:flex;flex-direction:column}
.review__quote{margin:0 0 1rem;color:var(--wp--preset--color--ink);line-height:1.55}
.review__who{margin-top:auto;font-size:.9375rem;color:var(--wp--preset--color--ink-2)}
.review__who strong{color:var(--wp--preset--color--ink)}

/* ---- Areas ---- */
.areas-intro__grid{display:grid;gap:clamp(1.25rem,3vw,2rem);align-items:start}
@media(min-width:900px){ .areas-intro__grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)} }
.areas-intro h2{margin:0 0 .75rem;font-size:clamp(1.625rem,3.2vw,2.25rem);letter-spacing:-.02em}
.areas-intro p{max-width:58ch}
.areas-region__title{margin:0 0 .35rem;font-size:clamp(1.625rem,3.2vw,2.25rem);letter-spacing:-.02em}
.areas-region__blurb{margin:0 0 clamp(1rem,2.5vw,1.5rem);color:var(--wp--preset--color--ink-2);max-width:64ch}
.area-grid{display:grid;gap:clamp(1rem,2.5vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.area-card{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:clamp(1.25rem,3vw,1.6rem);border-radius:var(--r);box-sizing:border-box;
  background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-line);box-shadow:var(--glass-shine),var(--glass-lift-sm)}
.area-card > *{position:relative;z-index:1}
.area-card--page{border-color:color-mix(in srgb,var(--wp--preset--color--accent) 45%,var(--glass-line))}
.area-card__name{margin:0 0 .5rem;font-size:1.25rem;letter-spacing:-.01em}
.area-card__blurb{margin:0 0 1rem;color:var(--wp--preset--color--ink-2);line-height:1.5}
.area-card__link{margin:auto 0 0;font-weight:700}
.area-card__link a{color:var(--wp--preset--color--primary);text-decoration:none}
.area-card__link a:hover{text-decoration:underline}
.area-story__grid{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media(min-width:900px){ .area-story__grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)} }
.area-story__text h2{margin:0 0 1rem;font-size:clamp(1.625rem,3.2vw,2.25rem);letter-spacing:-.02em}
.area-story__text p{max-width:60ch}
.area-asked .eyebrow{margin-bottom:.75rem}
.area-live__grid{display:grid;gap:clamp(1rem,2.5vw,1.5rem); /* auto-fill, not auto-fit: one listing must not stretch to 1100px */
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.area-live__card{display:block;text-decoration:none;color:inherit;border-radius:var(--r);overflow:hidden;box-sizing:border-box;
  background:var(--glass-bg);border:1px solid var(--glass-line);box-shadow:var(--glass-shine),var(--glass-lift-sm);
  transition:transform .22s cubic-bezier(.22,.68,.28,1),box-shadow .24s ease}
.area-live__card img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.area-live__body{display:grid;gap:.15rem;padding:.9rem 1rem 1rem}
.area-live__body strong{font-size:1.125rem;letter-spacing:-.01em}
.area-live__body span{color:var(--wp--preset--color--ink-2);font-size:.9375rem}
.area-live__meta{font-size:.875rem}
@media(hover:hover){ .area-live__card:hover{transform:translateY(-3px);box-shadow:var(--glass-shine),0 16px 34px -12px color-mix(in srgb,var(--wp--preset--color--primary) 30%,transparent)} }
.area-live__all{margin-top:clamp(1rem,2.5vw,1.5rem)}
.area-live__all .btn{display:inline-block}
.area-more__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.area-more__list a{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border-radius:999px;
  text-decoration:none;font-weight:700;font-size:.9375rem;color:var(--wp--preset--color--ink);
  background:var(--wp--preset--color--panel);border:1px solid var(--wp--preset--color--line)}
.area-more__list a:hover{border-color:var(--wp--preset--color--accent);background:var(--wp--preset--color--accent-soft)}

/* The three-steps pattern reused on the area pages is the one section here that
   is a real wp-block-group, so a rule zeroing its inline padding took the page
   gutter away from it and nothing else: on a phone the step cards ran edge to
   edge while every neighbouring band kept its 21px. The gutter from
   main.inner > * is correct for it, so there is nothing to override. */

/* Fewer video cards than the home grid: keep them from stretching to banner size. */
.video-grid--few{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),420px))}

/* Hub pages must never print the emergency callouts as page furniture; the rest prints fine. */
@media print{ .page-hero::before{display:none} .page-hero{min-height:0} .page-hero__title,.page-hero__lead{color:#000} }

/* ---------------------------------------------------------------------------
   Gap above the footer.
   The last band in <main> ends with its own bottom padding, the footer added
   another 40px of its own on top of that, and the social strip inside it a
   further 28px, so "Meet the whole team" sat about 110px above "Follow us".
   Rob circled it. The footer no longer pads the top; the strip's own padding
   is the whole gap.
--------------------------------------------------------------------------- */
.site-footer.site-footer{padding-top:0}

/* ---------------------------------------------------------------------------
   Area page photograph band.
   Sits between the hero and the written copy. Wide and shallow on purpose: it
   is illustration, not the subject of the page, and the real local photography
   is the live listings section further down. See smart_pm_area_photo() for what
   these images actually are.
--------------------------------------------------------------------------- */
/* main.wp-block-group.inner > * sets margin-block:0 at (0,2,2), which zeroed both
   the hero's bottom margin and anything set here at (0,1,0). Every other band on
   these pages gets its air from .section padding; the photograph has none of its
   own, so it sat flush against the hero. Match the weight to restore the gap. */
main.wp-block-group.inner > .area-band{margin-block:var(--band-half)}
.area-band__img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;
  border-radius:var(--r);border:1px solid var(--glass-line);
  box-shadow:var(--glass-shine),var(--glass-lift)}
@media(max-width:600px){ .area-band__img{aspect-ratio:16/10} }
@media print{ .area-band{display:none} }

/* ===========================================================================
   Every hero centred.

   The home page hero sits in a centred panel; the inner pages were all left
   aligned, so moving between them the headline jumped from the middle of the
   screen to the left edge. Rob asked for one treatment everywhere.

   The `!important` on the inline margins is not decoration: WordPress writes
   margin-left/right:auto !important onto the children of a constrained group,
   and these elements set `margin:0 0 <space>` which zeroes the left margin
   again. Matching the weight is the only way the centring holds.
   =========================================================================== */
.page-hero,.about-hero,.pm-hero,.rentals-hero,.fra-hero{align-items:center;text-align:center}

.page-hero__title,.about-hero__title,.pm-hero__title,.rentals-hero__title,.fra-hero__title,
.page-hero__lead,.about-hero__lead,.pm-hero__lead,.rentals-hero__lead,.fra-hero__lead,
.page-hero__eyebrow,.about-hero__eyebrow,.pm-hero__eyebrow,.rentals-hero__eyebrow,.fra-hero__eyebrow{
  margin-inline:auto !important}

/* The titles were capped at 18-20ch for a left-aligned column. Centred, a very
   narrow measure stacks into a thin tower, so let them breathe a little. */
.page-hero__title,.about-hero__title,.pm-hero__title,.rentals-hero__title,.fra-hero__title{
  max-width:22ch}

.page-hero__cta,.about-hero__cta,.pm-hero__cta,.rentals-hero__cta,.fra-hero__cta{
  justify-content:center}

@media(max-width:600px){
  .page-hero__cta .wp-block-button,.about-hero__cta .wp-block-button,
  .pm-hero__cta .wp-block-button,.rentals-hero__cta .wp-block-button,
  .fra-hero__cta .wp-block-button{width:100%}
}

/* ---------------------------------------------------------------------------
   Hero to first section: one gap, not two.

   Each of these heroes carries margin-bottom:var(--band-half) and is followed
   immediately by a .section carrying padding-block:var(--band-half). Both
   applied, so the gap was 128px on desktop and 80px on a phone, which on
   Available Rentals read as a band of empty white above the print button.

   The newer inner pages never had this: main.inner > * zeroes vertical margins
   there, so the section padding alone sets the rhythm at 64/40. These four are
   on the older templates, so the same result is done explicitly. The section
   below supplies the space; the hero does not need to as well.
--------------------------------------------------------------------------- */
.rentals-hero,.about-hero,.pm-hero,.fra-hero{margin-bottom:0}

/* ---------------------------------------------------------------------------
   The valley photograph at the head of the region list on /areas/.
   Wide and shallow: it is a horizon shot, and cropping it tall would throw away
   the thing that makes it worth having, which is the sweep from the rooftops in
   the foreground to the Strip on the skyline.
--------------------------------------------------------------------------- */
.areas-banner{margin:0 0 var(--band-half)}
.areas-banner__img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;
  object-position:center 60%;
  border-radius:var(--r);border:1px solid var(--glass-line);
  box-shadow:var(--glass-shine),var(--glass-lift)}
@media(max-width:600px){ .areas-banner__img{aspect-ratio:16/10} }
@media print{ .areas-banner{display:none} }

/* ===========================================================================
   Below-the-fold sections on the home page: skip layout until they are
   about to be scrolled into view.

   Measured cause of the slow cold open Rob reported: the home page stacks
   eleven sections, including six embedded YouTube iframes in the videos
   block. Tracing a cold load on a throttled phone found a single Layout
   event touching all 469 layout objects and taking over a second by itself,
   because the browser lays out the WHOLE document, including everything far
   below the fold, before it can paint anything. Confirmed by isolating it:
   blocking every script individually left the delay unchanged, and the
   timing was a full synchronous layout pass, not a render-blocking download
   (everything had already finished downloading by then).

   content-visibility:auto tells the browser it may skip layout and paint for
   an element until it is near the viewport, which is exactly this case: nothing
   below the hero and the two doors needs to be ready for first paint.
   contain-intrinsic-size gives it a placeholder height for the scrollbar before
   it has ever measured the real one; "auto" makes it remember the real size the
   first time the section is actually laid out, so it does not re-collapse when
   scrolled away and back.

   Scoped through the main.home ancestor, which exists ONLY on the front page
   template, so this cannot affect .section, .quote or .videos anywhere else on
   the site, including the print-sensitive Available Rentals page.
--------------------------------------------------------------------------- */
main.home .section,
main.home .quote,
main.home .videos,
main.home .home-team{
  content-visibility:auto;
  contain-intrinsic-size:auto 600px}

/* content-visibility:auto content that has never been scrolled into view is
   skipped by some browsers' print rendering too. The home page has no print
   button, but nothing here should silently vanish if someone prints it anyway. */
@media print{
  main.home .section,
  main.home .quote,
  main.home .videos,
  main.home .home-team{content-visibility:visible}
}

/* ---------------------------------------------------------------------------
   The footer, site-wide: same reasoning as the home page sections above, and
   lower risk, since it is below the fold on every page and .site-footer is
   already `display:none` in print (confirmed above), so this cannot touch
   the print sheet at all.
--------------------------------------------------------------------------- */
.site-footer{
  content-visibility:auto;
  contain-intrinsic-size:auto 500px}

/* Home: "Here is what SMART does for you" (Mark's list, replaced the three property boxes 2 Oct 2026).
   A panel so the fifteen items read as one block; two columns from tablet up, filled top to bottom. */
.smart-does{margin-top:clamp(1.25rem,3vw,1.75rem);padding:clamp(1.25rem,3.5vw,2rem);
  background:var(--wp--preset--color--panel);border:1px solid var(--wp--preset--color--line);border-radius:var(--r)}
.smart-does__title{margin:0 0 1rem;font-size:clamp(1.1rem,2.2vw,1.3rem)}
.smart-does .check-list{margin:0}
@media(min-width:720px){
  .check-list--cols{display:block;columns:2;column-gap:2.5rem}
  .check-list--cols li{break-inside:avoid;margin-bottom:.6rem}
}

/* "Follow us" strip: Mark removed the heading beside it (2 Oct 2026), so the label
   itself carries the heading weight instead of sitting there as a small eyebrow. */
.social__eyebrow{margin:0;font-size:clamp(1.25rem,2.4vw,1.75rem);font-weight:800;letter-spacing:-.02em;
  text-transform:none;color:var(--wp--preset--color--ink)}

/* Phone quick-link row: three buttons since Oct 8, 2026 (Repairs, Pay Rent, Owner Portal),
   so a touch smaller and allowed to wrap onto two lines on the narrowest phones
   rather than overflow. Still 56px tall, well over the 44px touch minimum. */
@media(max-width:900px){
  .site-logins-mobile{gap:.4rem}
  .site-logins-mobile a{font-size:1rem;padding:0 .5rem;text-align:center;line-height:1.15;white-space:normal}
}
/* Header with three quick links: between the phone breakpoint and 1080px the bar also
   carries the Menu button, and brand + three buttons + phone + Menu do not fit (the row
   ran 34px too wide and the Menu button slid under the phone pill). Up to 1080px, where the
   Menu chip gives way to the full nav row (see "menu chip" rules), the
   quick links move to their own row under the bar, exactly as they do on phones. */
@media(min-width:901px) and (max-width:1080px){
  .site-header__actions .login-btn{display:none}
  /* z-index: above 900px the home hero photo starts a gutter above the hero to tuck under
     the header, which is exactly where this row sits, so the row must paint over it. */
  .site-logins-mobile{display:flex;gap:.5rem;padding:.6rem var(--gutter,1rem);border-bottom:1px solid var(--wp--preset--color--line);z-index:2}
  .site-logins-mobile a{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;min-height:56px;border-radius:999px;
    border:2px solid var(--wp--preset--color--line);background:var(--wp--preset--color--base);font-weight:700;font-size:1.0625rem;
    text-decoration:none;color:var(--wp--preset--color--ink)}
}

/* ===========================================================================
   Motion layer (Oct 8, 2026). Rob: "a really fast smooth animation when loading,
   and somewhere on the page something very sleek and minimal."

   Everything here is CSS, compositor-only (opacity and transform), and runs only
   when the visitor's device allows motion. Nothing starts hidden in a way that
   depends on it: if animations are off, unsupported or blocked, the page renders
   exactly as before. Total entrance time is under 0.8s.

   1. Page load: the brand line across the top of the header draws in from the
      left, and the hero (eyebrow, headline, lead, buttons) rises in with a short
      stagger. Covers all eight hero types on the site.
   2. Between pages: a 0.2s crossfade (cross-document View Transitions; Chrome,
      Edge and Safari 18.2+; other browsers simply navigate as normal).
   3. The sleek, minimal thing: a 2px brand-gradient line along the bottom of the
      sticky header that fills left to right as you read down the page. Driven by
      the scroll position itself (scroll-driven animations), so there is no script
      and no work on the main thread. Browsers without support show nothing.

   Starting opacity is .01, not 0: Chrome does not count a fully transparent
   element as painted, so the headline would stop being the Largest Contentful
   Paint at first frame and the page would score as slower than it is.
   =========================================================================== */
@media(prefers-reduced-motion:no-preference){
  @keyframes smart-rise{from{opacity:.01;transform:translate3d(0,14px,0)}}
  @keyframes smart-settle{from{opacity:.01;transform:scale(.985)}}
  @keyframes smart-draw{from{transform:scaleX(0)}}

  .site-header::after{transform-origin:left center;animation:smart-draw .7s cubic-bezier(.65,0,.35,1) both}

  .hero__pitch{animation:smart-settle .6s cubic-bezier(.2,.7,.2,1) both}
  :is(.hero__pitch,.pm-hero,.rentals-hero,.about-hero,.fra-hero,.page-hero,.blog-hero,.post-head) > *,
  main .wp-block-post-title{animation:smart-rise .55s cubic-bezier(.2,.7,.2,1) both}
  :is(.hero__pitch,.pm-hero,.rentals-hero,.about-hero,.fra-hero,.page-hero,.blog-hero,.post-head) > :nth-child(2){animation-delay:.07s}
  :is(.hero__pitch,.pm-hero,.rentals-hero,.about-hero,.fra-hero,.page-hero,.blog-hero,.post-head) > :nth-child(3){animation-delay:.14s}
  :is(.hero__pitch,.pm-hero,.rentals-hero,.about-hero,.fra-hero,.page-hero,.blog-hero,.post-head) > :nth-child(4){animation-delay:.21s}
  :is(.hero__pitch,.pm-hero,.rentals-hero,.about-hero,.fra-hero,.page-hero,.blog-hero,.post-head) > :nth-child(n+5){animation-delay:.28s}

  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.2s;animation-timing-function:ease-out}
}

@supports (animation-timeline:scroll()){
  @media(prefers-reduced-motion:no-preference){
    @keyframes smart-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    .wp-site-blocks > header.wp-block-template-part::after{
      content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
      background:linear-gradient(90deg,var(--wp--preset--color--green),var(--wp--preset--color--accent));
      transform-origin:left center;transform:scaleX(0);
      animation:smart-progress linear both;animation-timeline:scroll(root block)}
  }
}
@media print{
  .wp-site-blocks > header.wp-block-template-part::after{display:none}
  *{animation:none !important}
}

/* ===========================================================================
   Home: "Every month, automatically" money-flow loop (Oct 8, 2026), in the steps
   section under "Three steps from 'Should I rent it?' to money in your bank!".
   Rob asked for a sleek cycle showing the money moving from the home to the owner.

   One 4.8s loop: an orange rent coin leaves the rental home and lands at SMART,
   which pulses; a green net-rent coin continues to the owner's bank, a check pops,
   and it starts again. The dashed tracks drift left to right the whole time.
   Inline SVG plus plain HTML captions, transform and opacity only, so it costs
   the GPU next to nothing; the section's content-visibility pauses it off screen.
   With reduced motion the diagram is static, both coins resting mid-track.
   =========================================================================== */
.money-flow{margin:clamp(1rem,3vw,1.5rem) 0 clamp(1.25rem,3vw,1.75rem);padding:clamp(1rem,3vw,1.75rem) clamp(.75rem,3vw,2rem) clamp(1rem,3vw,1.5rem);
  background:var(--glass-bg);border:1px solid var(--glass-line);border-radius:var(--r);box-shadow:var(--glass-shine),var(--glass-lift-sm)}
.money-flow__label{margin:0 0 .25rem;text-align:center;font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--wp--preset--color--ink-2)}
.money-flow__svg{display:block;width:100%;max-width:640px;height:auto;margin:0 auto;overflow:visible}
.money-flow__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.5rem,2vw,1.5rem);max-width:640px;margin:.25rem auto 0;text-align:center}
.money-flow__steps p{margin:0;display:flex;flex-direction:column;gap:.2rem;line-height:1.35}
.money-flow__steps strong{font-size:clamp(.9375rem,1.8vw,1.0625rem);color:var(--wp--preset--color--ink)}
.money-flow__steps span{font-size:clamp(.8125rem,1.6vw,.9375rem);color:var(--wp--preset--color--ink-2)}

.mf-track{stroke:color-mix(in srgb,var(--wp--preset--color--ink) 22%,transparent);stroke-width:2;stroke-linecap:round;stroke-dasharray:2 8}
.mf-node__disc{fill:var(--wp--preset--color--base);stroke:var(--wp--preset--color--line);stroke-width:2}
.mf-node--smart .mf-node__disc{fill:var(--wp--preset--color--primary);stroke:var(--wp--preset--color--primary)}
.mf-node__word{fill:#fff;font-family:inherit;font-size:16px;font-weight:800;letter-spacing:.02em}
.mf-icon{fill:none;stroke:var(--wp--preset--color--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mf-ring{fill:none;stroke-width:2;opacity:0}
.mf-ring--smart{stroke:var(--wp--preset--color--accent)}
.mf-ring--you{stroke:var(--wp--preset--color--green)}
.mf-badge circle{fill:var(--wp--preset--color--green)}
.mf-badge path{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mf-coin text{fill:#fff;font-family:inherit;font-size:16px;font-weight:800}
.mf-coin--rent circle{fill:var(--wp--preset--color--accent)}
.mf-coin--net circle{fill:var(--wp--preset--color--green)}
.mf-coin,.mf-ring,.mf-badge,.mf-node--smart{transform-box:fill-box;transform-origin:center}
.mf-coin{transform:translateX(48px)}

@media(prefers-reduced-motion:no-preference){
  .mf-track{animation:mf-flow 1.1s linear infinite}
  .mf-coin--rent{animation:mf-rent 4.8s cubic-bezier(.45,0,.25,1) infinite}
  .mf-coin--net{animation:mf-net 4.8s cubic-bezier(.45,0,.25,1) infinite}
  .mf-node--smart{animation:mf-bump 4.8s ease-out infinite}
  .mf-ring--smart{animation:mf-ring-smart 4.8s ease-out infinite}
  .mf-ring--you{animation:mf-ring-you 4.8s ease-out infinite}
  .mf-badge{animation:mf-badge 4.8s cubic-bezier(.3,1.4,.5,1) infinite}
}
@keyframes mf-flow{to{stroke-dashoffset:-20}}
@keyframes mf-rent{
  0%{opacity:0;transform:translateX(0) scale(.5)}
  7%{opacity:1;transform:translateX(0) scale(1)}
  36%{opacity:1;transform:translateX(96px) scale(1)}
  41%,100%{opacity:0;transform:translateX(96px) scale(.5)}}
@keyframes mf-net{
  0%,44%{opacity:0;transform:translateX(0) scale(.5)}
  50%{opacity:1;transform:translateX(0) scale(1)}
  79%{opacity:1;transform:translateX(96px) scale(1)}
  84%,100%{opacity:0;transform:translateX(96px) scale(.5)}}
@keyframes mf-bump{0%,36%,50%,100%{transform:scale(1)}41%{transform:scale(1.07)}}
@keyframes mf-ring-smart{0%,36%{opacity:0;transform:scale(1)}40%{opacity:.6;transform:scale(1.05)}60%,100%{opacity:0;transform:scale(1.45)}}
@keyframes mf-ring-you{0%,79%{opacity:0;transform:scale(1)}83%{opacity:.6;transform:scale(1.05)}100%{opacity:0;transform:scale(1.45)}}
@keyframes mf-badge{0%,80%{opacity:0;transform:scale(.3)}86%{opacity:1;transform:scale(1)}95%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.mf-badge{opacity:1}}
@media print{.money-flow{break-inside:avoid}}

/* ===========================================================================
   Repair request: photos and videos (Oct 16, 2026; inc/repair-files.php,
   assets/js/repair-upload.js). A large tap target that opens the camera or the
   photo library, then one row per file with its own progress bar.
   =========================================================================== */
.form-grid .fld--files{grid-column:1 / -1}
.fld--files .fld__label{font-weight:700;font-size:1rem;color:var(--wp--preset--color--ink)}
.up-input{display:block;font-size:1rem}
.fld--files.is-enhanced .up-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.up-drop{display:none}
.fld--files.is-enhanced .up-drop{display:flex;align-items:center;gap:.9rem;min-height:72px;padding:.9rem 1.1rem;cursor:pointer;
  border:2px dashed color-mix(in srgb,var(--wp--preset--color--primary) 35%,var(--wp--preset--color--line));border-radius:var(--rb);
  background:color-mix(in srgb,var(--wp--preset--color--base) 70%,transparent);color:var(--wp--preset--color--ink);transition:border-color .2s,background-color .2s}
.fld--files.is-enhanced .up-drop:hover{border-color:var(--wp--preset--color--accent);background:var(--wp--preset--color--accent-soft)}
.fld--files:has(.up-input:focus-visible) .up-drop{outline:3px solid var(--wp--preset--color--accent);outline-offset:2px}
.up-drop__icon{flex:0 0 auto;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--wp--preset--color--primary);color:#fff}
.up-drop__text{display:flex;flex-direction:column;gap:.1rem}
.up-drop__text strong{font-size:1.0625rem}
.up-drop__text span{font-size:.9375rem;color:var(--wp--preset--color--ink-2)}
.up-list{list-style:none;margin:.25rem 0 0;padding:0;display:grid;gap:.5rem}
.up-list:empty{display:none}
.up-item{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"icon name rm" "icon meta rm";column-gap:.75rem;align-items:center;
  padding:.55rem .75rem;border:1px solid var(--wp--preset--color--line);border-radius:12px;background:var(--wp--preset--color--base);overflow:hidden}
.up-item__icon{grid-area:icon;display:grid;place-items:center;width:44px;height:44px;border-radius:8px;overflow:hidden;background:var(--wp--preset--color--panel);color:var(--wp--preset--color--ink-2);font-size:1.1rem}
.up-item__icon img{width:100%;height:100%;object-fit:cover}
.up-item__name{grid-area:name;font-weight:700;font-size:.9375rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-item__meta{grid-area:meta;font-size:.875rem;color:var(--wp--preset--color--ink-2)}
.up-item__remove{grid-area:rm;min-height:44px;padding:0 .75rem;border:1px solid var(--wp--preset--color--line);border-radius:999px;background:transparent;
  font:inherit;font-size:.875rem;font-weight:700;color:var(--wp--preset--color--ink);cursor:pointer}
.up-item__bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent}
.up-item__bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--wp--preset--color--green),var(--wp--preset--color--accent));transition:width .3s ease}
.up-item.is-done .up-item__meta{color:var(--wp--preset--color--green);font-weight:700}
.up-item.is-done .up-item__bar{display:none}
.up-item.is-failed{border-color:#b3261e;background:#fdecea}
.up-item.is-failed .up-item__meta{color:#b3261e;font-weight:700}
.up-item.is-failed .up-item__bar{display:none}
.fra-btn:disabled{opacity:.7;cursor:progress}

/* The scroll-progress line sits on the header's bottom edge, which is exactly where the first item of the
   open mobile menu starts, so once the page was scrolled it struck through "Home". Not wanted while the
   menu covers the page; WordPress marks the page with .has-modal-open while it is open. */
html.has-modal-open .wp-site-blocks > header.wp-block-template-part::after,
body.has-modal-open .wp-site-blocks > header.wp-block-template-part::after{display:none}

/* Open mobile menu: the first row ("Home") was the only one with no line above it and it sat tight under
   the close button, so it read as thinner and cut off. More room above it, and a line on top so it is framed
   like every other row. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{padding-top:6rem}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:first-child .wp-block-navigation-item__content{
  border-top:1px solid var(--wp--preset--color--line)}

/* Form fields: width:100% plus padding and border was being added together (content-box), so every text,
   phone and email box was 24px too tall and 29px wider than its card, while the dropdowns, which browsers
   already size as border-box, were correct. Seen on the rental analysis form on an iPhone; the repair and
   contact forms had the same fault. */
.fld input,.fld select,.fld textarea{box-sizing:border-box;max-width:100%}
.fld input:not([type=checkbox]):not([type=radio]):not([type=file]),.fld textarea{-webkit-appearance:none;appearance:none}