/* ============================================================
   Miami Waterfront Estates — chrome.css
   miamiwaterfrontestates.com · The Luxury Team | The Agency

   Loaded on every page that wears the site chrome (functions.php
   mwe_is_site_page()): the homepage, the 404, the Privacy Policy
   and, from Batch 3, the iHomefinder virtual pages.

     1  Tokens                 7  Mobile menu
     2  Base and reset         8  Footer
     3  Layout helpers         9  Shared motion states
     4  Type                  10  Reduced motion
     5  Buttons               11  Final overrides (keep last)
     6  Header, top bar, nav

   Rules this file keeps:
     - Only the portfolio tokens below; no other color names.
     - Everything is scoped to body.mwe-page so the parent theme's
       own screens are untouched.
     - Motion animates opacity, transform and clip-path only, and
       CSS never hides content on its own (section 9).
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  --paper:#FBF8F3;
  --sand:#F2EBE1;
  --dune:#E9E0D2;
  --hair:#D6C9B4;
  --hair-soft:#E4DACB;
  --white:#FFFFFF;
  --ink:#0F2A3F;
  --surf:#1B7370;
  --dusk:#8A5C2C;

  --f-dsp:'EB Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --f-body:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap:1320px;
  --gutter:clamp(16px, 4vw, 48px);
  --topbar-h:46px;
  --nav-h:76px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (max-width: 1080px){
  :root{ --nav-h:64px; }
}
@media (max-width: 600px){
  :root{ --topbar-h:40px; --nav-h:60px; }
}

/* Anchor jumps land below the pinned nav row (the top bar has scrolled away
   by then: see section 6), with or without JavaScript. */
html{ scroll-padding-top:calc(var(--nav-h) + 16px); }
html.nav-open{ overflow:hidden; }

/* ---------- 2. BASE AND RESET ---------- */
:where(body.mwe-page) *,
:where(body.mwe-page) *::before,
:where(body.mwe-page) *::after{ box-sizing:border-box; }

body.mwe-page{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16.5px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
/* The resets below stop at iHomefinder's markup (.idx-feed on the homepage,
   .idx-content on the IDX pages, and Twenty Twenty-Five's post-content
   wrapper in the safety-net case, functions.php section 15): the plugin styles its own images, lists
   and headings, and a reset reaching into it (display:block on its images
   in particular) can break its grid and carousels. :where() keeps every
   one of these at zero specificity. */
:where(body.mwe-page img:not(:where(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content) *)){ max-width:100%; height:auto; display:block; }
:where(body.mwe-page svg:not(:where(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content) *)){ display:block; }
:where(body.mwe-page) a{ color:var(--surf); text-underline-offset:.2em; text-decoration-thickness:1px; }
:where(body.mwe-page) a:hover{ color:var(--ink); }
:where(body.mwe-page) :where(p):not(:where(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content) *){ margin:0 0 1em; }
:where(body.mwe-page) :where(h1, h2, h3, h4):not(:where(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content) *){ margin:0; font-weight:400; }
:where(body.mwe-page) :where(ul, ol):not(:where(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content) *){ margin:0; padding:0; }
:where(body.mwe-page) :where(figure):not(:where(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content) *){ margin:0; }
:where(body.mwe-page) :where(button):not(:where(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content) *){ font:inherit; color:inherit; }
:where(body.mwe-page) ::selection{ background:var(--dune); color:var(--ink); }

body.mwe-page :focus-visible{ outline:2px solid var(--surf); outline-offset:3px; }

.skip{
  position:absolute; left:12px; top:-200px; z-index:100;
  padding:10px 16px; background:var(--ink); color:var(--white);
  font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
}
.skip:focus{ top:12px; color:var(--white); }

/* ---------- 3. LAYOUT HELPERS ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.sec{ padding-block:clamp(64px, 9vw, 128px); }
.band{ background:var(--sand); }
.on-ink{ background:var(--ink); color:var(--paper); }
.visually-hidden{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ---------- 4. TYPE ---------- */
.dsp{
  font-family:var(--f-dsp);
  font-weight:400;
  letter-spacing:-.012em;
  line-height:1.06;
  font-feature-settings:'kern', 'liga', 'onum' 0;
}
.h-hero{ font-size:clamp(2.55rem, 6.2vw, 5.4rem); line-height:1.02; }
.h-page{ font-size:clamp(2.3rem, 5vw, 4.2rem); }
.h-sec{ font-size:clamp(2rem, 3.8vw, 3.3rem); }
.h-card{ font-size:clamp(1.35rem, 1.9vw, 1.65rem); line-height:1.15; }

.eyebrow{
  display:block;
  margin:0 0 18px;
  font-family:var(--f-mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--dusk);
}
.lede{
  font-size:clamp(17px, 1.35vw, 19.5px);
  line-height:1.62;
  color:color-mix(in srgb, var(--ink) 84%, var(--paper));
  max-width:60ch;
}
.on-ink .lede{ color:color-mix(in srgb, var(--paper) 84%, var(--ink)); }
.on-ink .eyebrow{ color:var(--hair); }
.label:not(:where(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content) *){
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* ---------- 5. BUTTONS ----------
   Hover color changes are instant on purpose (only opacity, transform and
   clip-path animate); the small lift is the transform. Solid buttons pin
   white text with !important, restated in every inverted context. */
/* .btn, .label and .nav are also Bootstrap class names, and iHomefinder
   ships Bootstrap: these rules skip the plugin's markup (and our header's
   .nav is scoped to .hdr) so they never restyle or re-lay-out its buttons,
   badges or tabs. Specificity is unchanged. */
.btn:not(:where(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content) *){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:0 24px;
  border:1px solid var(--ink);
  border-radius:0;
  background:transparent;
  color:var(--ink);
  font-family:var(--f-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.16em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .25s var(--ease);
}
.btn:not(:where(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content) *):hover{ background:var(--ink); color:var(--white); transform:translate3d(0,-1px,0); }
.btn:not(:where(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content) *):active{ transform:none; }

.btn-solid{ background:var(--ink); border-color:var(--ink); color:var(--white) !important; }
.btn-solid:hover{ background:var(--surf); border-color:var(--surf); color:var(--white) !important; }

.btn-ghost{ border-color:color-mix(in srgb, var(--white) 70%, transparent); color:var(--white); }
.btn-ghost:hover{ background:var(--white); border-color:var(--white); color:var(--ink); }

.on-ink .btn{ border-color:color-mix(in srgb, var(--paper) 55%, transparent); color:var(--paper); }
.on-ink .btn:hover{ background:var(--paper); border-color:var(--paper); color:var(--ink); }
.on-ink .btn-solid{ background:var(--surf); border-color:var(--surf); color:var(--white) !important; }
.on-ink .btn-solid:hover{ background:var(--dusk); border-color:var(--dusk); color:var(--white) !important; }

/* ---------- 6. HEADER, TOP BAR, NAV ----------
   Sticky, not fixed, so it reserves its own space (no layout shift and no
   measured --hdr).

   CONDENSING IS PURE CSS. The header sticks at top: -(top bar height), so as
   the page scrolls, the top bar scrolls away with it and the nav row pins to
   the top of the window. Nothing animates and no script moves it.

   CHANGED 2026-10-30: it used to slide up with a transform (0.4s) when a
   class was toggled. A transform moves the header's picture but not the
   space it reserves, so on a quick mouse-wheel scroll back to the top the
   empty slot behind it showed as a pale band between the nav and the hero
   photo for the length of the slide. Never transform the sticky header.

   html.hdr-condensed (set by the chrome script in chrome-footer.php once
   .hdr-sentinel, exactly the top bar's height, has scrolled out of view)
   now only switches on the nav's shadow and the phone number in the nav
   row, at the moment the top bar carrying the phone leaves the screen. */
.hdr-sentinel{ position:absolute; top:0; left:0; width:1px; height:var(--topbar-h); pointer-events:none; visibility:hidden; }

.hdr{
  position:sticky;
  top:calc(-1 * var(--topbar-h));
  z-index:60;
}

.topbar{
  height:var(--topbar-h);
  background:var(--sand);
  border-bottom:1px solid var(--hair-soft);
}
.topbar-in{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.presented{ display:flex; align-items:center; gap:14px; min-width:0; }
.presented-by{
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--ink) 70%, var(--sand));
}
.topbar .lg-tlt{ height:20px; width:auto; }
.topbar .lg-agency{ height:24px; width:auto; }
.lg-rule{ width:1px; height:22px; background:var(--hair); flex:none; }
/* Stretched to the bar's full height so the tap target is the whole strip,
   not the 18px line of text (no visual change). */
.topbar-phone{
  display:inline-flex;
  align-items:center;
  align-self:stretch;
  font-family:var(--f-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--ink);
  white-space:nowrap;
}
.topbar-phone:hover{ color:var(--surf); }

.hdr .nav{
  position:relative;
  height:var(--nav-h);
  background:var(--paper);
  border-bottom:1px solid var(--hair-soft);
}
.hdr .nav::after{
  content:'';
  position:absolute; inset:auto 0 -12px 0; height:12px;
  background:linear-gradient(to bottom, color-mix(in srgb, var(--ink) 10%, transparent), transparent);
  opacity:0;
  pointer-events:none;
  transition:opacity .4s var(--ease);
}
.hdr-condensed .hdr .nav::after{ opacity:1; }
.nav-in{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  gap:28px;
}

.brand{ display:flex; align-items:baseline; gap:10px; color:var(--ink); white-space:nowrap; margin-right:auto; }
.brand:hover{ color:var(--ink); }
.brand-mark{
  font-family:var(--f-dsp);
  font-size:clamp(22px, 2.1vw, 27px);
  font-weight:400;
  letter-spacing:-.01em;
  line-height:1;
}
.brand-sub{
  font-family:var(--f-mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--dusk);
  transform:translateY(-1px);
}

.nav-main{ height:100%; }
.nav-links{ list-style:none; display:flex; align-items:stretch; gap:6px; height:100%; }
.nav-links > li{ position:relative; display:flex; align-items:center; }
.nav-links > li > a,
.nav-drop-toggle{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 14px;
  border:0;
  background:none;
  color:var(--ink);
  font-family:var(--f-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
}
.nav-links > li > a::after,
.nav-drop-toggle::after{
  content:'';
  position:absolute; left:14px; right:14px; bottom:6px; height:1px;
  background:var(--surf);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .3s var(--ease);
}
.nav-links > li > a:hover::after,
.nav-drop-toggle:hover::after,
.nav-drop-toggle[aria-expanded="true"]::after{ transform:scaleX(1); }
.nav-drop-caret{
  width:10px; height:7px;
  fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s var(--ease);
}
.nav-drop-toggle[aria-expanded="true"] .nav-drop-caret{ transform:rotate(180deg); }

/* Dropdown panels. Open when the toggle says so (JavaScript), while focus
   is inside the panel, or, with JavaScript off, whenever focus is anywhere
   in the dropdown (keyboard users can Tab in). */
.nav-drop-menu{
  position:absolute;
  top:calc(100% - 4px);
  left:50%;
  z-index:5;
  min-width:240px;
  padding:22px 24px 18px;
  background:var(--white);
  border:1px solid var(--hair-soft);
  box-shadow:0 18px 40px -18px color-mix(in srgb, var(--ink) 35%, transparent);
  visibility:hidden;
  opacity:0;
  transform:translate3d(-50%, 8px, 0);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
}
.nav-drop-toggle[aria-expanded="true"] + .nav-drop-menu,
.nav-drop-menu:focus-within,
html:not(.js) .nav-drop:focus-within .nav-drop-menu{
  visibility:visible;
  opacity:1;
  transform:translate3d(-50%, 0, 0);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility 0s;
}
.nav-drop-menu ul{ list-style:none; }
.nav-drop-menu li a{
  display:block;
  padding:7px 0;
  color:var(--ink);
  font-size:15px;
  line-height:1.3;
  white-space:nowrap;
}
.nav-drop-menu li a:hover{ color:var(--surf); }
.nav-links > li.nav-drop--wide{ position:static; }
.nav-drop--wide .nav-drop-menu{
  top:calc(100% - 10px);
  left:auto;
  right:var(--gutter);
  width:min(780px, calc(100vw - 2 * var(--gutter)));
  transform:translate3d(0, 8px, 0);
}
.nav-drop--wide .nav-drop-toggle[aria-expanded="true"] + .nav-drop-menu,
.nav-drop--wide .nav-drop-menu:focus-within,
html:not(.js) .nav-drop--wide:focus-within .nav-drop-menu{ transform:translate3d(0, 0, 0); }
.nav-drop-cols{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:8px 32px;
}
.nav-drop-cols .nav-drop-col:first-child ul{ columns:2; column-gap:32px; }
.nav-drop-cols li{ break-inside:avoid; }
.nav-drop-label{
  margin:0 0 8px;
  padding-bottom:8px;
  border-bottom:1px solid var(--hair-soft);
  font-family:var(--f-mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--dusk);
}
.nav-drop-all{
  display:block;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--hair-soft);
  font-family:var(--f-mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--surf);
}

.nav-cta{ display:flex; align-items:center; gap:18px; }
.nav-cta .btn{ min-height:44px; padding:0 22px; }
.nav-phone{
  display:none;
  font-family:var(--f-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--ink);
  white-space:nowrap;
}
/* The phone moves into the nav row only once the top bar has slid away. */
.hdr-condensed .nav-phone{ display:inline; }

.menu-btn{
  display:none;
  position:relative;
  width:44px; height:44px;
  margin-right:-10px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
}
.menu-btn span{
  position:absolute; left:11px; right:11px; height:1.5px;
  background:var(--ink);
  transition:transform .3s var(--ease);
}
.menu-btn span:first-child{ transform:translate3d(0,-4px,0); }
.menu-btn span:last-child{ transform:translate3d(0,4px,0); }
.menu-btn[aria-expanded="true"] span:first-child{ transform:rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child{ transform:rotate(-45deg); }

@media (max-width: 1080px){
  .nav-main{ display:none; }
  .hdr-condensed .nav-phone{ display:none; }
  .js .menu-btn{ display:block; }
  .nav-in{ gap:14px; }
}
@media (max-width: 600px){
  .presented-by{ display:none; }
  .presented{ gap:10px; }
  .topbar .lg-tlt{ height:16px; }
  .topbar .lg-agency{ height:20px; }
  .lg-rule{ height:18px; }
  .topbar-phone{ font-size:11.5px; letter-spacing:.06em; }
  .brand{ gap:7px; }
  .brand-mark{ font-size:21px; }
  .brand-sub{ font-size:9.5px; letter-spacing:.26em; }
  .nav-cta .btn{ min-height:40px; padding:0 14px; font-size:11px; letter-spacing:.14em; }
}
@media (max-width: 370px){
  .brand-sub{ display:none; }
}

/* ---------- 7. MOBILE MENU ----------
   Rendered only with JavaScript (the menu button needs it). The panel hangs
   below the nav row and scrolls on its own. */
.mobile-nav{ display:none; }
@media (max-width: 1080px){
  .js .mobile-nav{
    display:block;
    position:absolute;
    left:0; right:0;
    top:100%;
    max-height:calc(100vh - var(--nav-h));
    max-height:calc(100dvh - var(--nav-h));
    overflow-y:auto;
    overscroll-behavior:contain;
    background:var(--paper);
    border-bottom:1px solid var(--hair);
    box-shadow:0 24px 40px -24px color-mix(in srgb, var(--ink) 40%, transparent);
    visibility:hidden;
    opacity:0;
    transform:translate3d(0,-8px,0);
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
  }
  .js .mobile-nav[data-open="true"]{
    visibility:visible;
    opacity:1;
    transform:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s;
  }
  /* The top bar is still showing when the menu opens near the top of the
     page, so the panel gives up that much height too. */
  html:not(.hdr-condensed) .mobile-nav{ max-height:calc(100dvh - var(--nav-h) - var(--topbar-h)); }
}
.mobile-nav-in{ padding-block:20px 28px; }
.mnav-top{
  display:block;
  padding:12px 0;
  border-bottom:1px solid var(--hair-soft);
  color:var(--ink);
  font-family:var(--f-dsp);
  font-size:24px;
}
.mnav-label{
  margin:22px 0 6px;
  font-family:var(--f-mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--dusk);
}
.mnav-grid{
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 18px;
}
.mnav-grid a{
  display:block;
  padding:9px 0;
  border-bottom:1px solid var(--hair-soft);
  color:var(--ink);
  font-size:15.5px;
  line-height:1.3;
}
.mnav-cta{ display:grid; gap:10px; margin-top:26px; }
.mnav-cta .btn{ width:100%; }

/* ---------- 8. FOOTER ---------- */
.foot{
  background:var(--ink);
  color:var(--paper);
  padding-block:clamp(56px, 7vw, 88px) 32px;
}
.foot a{ color:var(--paper); }
.foot a:hover{ color:var(--hair); }
.foot-top{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px 48px;
  padding-bottom:36px;
  border-bottom:1px solid color-mix(in srgb, var(--paper) 16%, transparent);
}
.foot-mark{
  margin:0 0 12px;
  font-family:var(--f-dsp);
  font-size:clamp(28px, 3vw, 36px);
  line-height:1;
  letter-spacing:-.01em;
}
.foot-mark em{
  margin-left:10px;
  font-family:var(--f-mono);
  font-style:normal;
  font-size:11px;
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--hair);
  vertical-align:.4em;
}
.foot-loc,
.foot-broker{
  margin:0;
  font-size:14.5px;
  color:color-mix(in srgb, var(--paper) 78%, var(--ink));
}
.foot-broker{ margin-top:4px; }
.logos{ display:flex; align-items:center; gap:18px; }
.logos .lg-tlt{ width:280px; height:auto; }
.logos .lg-agency{ width:78px; height:auto; }
.logos .lg-rule{ height:30px; background:color-mix(in srgb, var(--paper) 30%, transparent); }

.legal{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px 48px;
  padding-block:30px;
  font-size:12.5px;
  line-height:1.65;
  color:color-mix(in srgb, var(--paper) 70%, var(--ink));
}
.legal p{ margin:0 0 10px; }
.legal strong{ color:var(--paper); font-weight:600; }

.foot-btm{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px 28px;
  padding-top:22px;
  border-top:1px solid color-mix(in srgb, var(--paper) 16%, transparent);
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--paper) 72%, var(--ink));
}
.foot-legal-links{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.foot-legal-links .sep{ color:color-mix(in srgb, var(--paper) 30%, transparent); }
.eho{ display:inline-flex; align-items:center; gap:7px; }
.eho svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; }
.mark-item{ display:inline; }
.mark-item .reg{ font-size:1.45em; font-weight:400; vertical-align:middle; position:relative; top:.05em; }

@media (max-width: 760px){
  .legal{ grid-template-columns:1fr; }
}
@media (max-width: 600px){
  .logos .lg-tlt{ width:220px; }
  .logos .lg-agency{ width:64px; }
  .foot-mark em{ display:block; margin:10px 0 0; vertical-align:baseline; }
  .foot-legal-links .sep{ display:none; }
  .foot-legal-links{ gap:10px 22px; }
}
/* 320px phones (iPhone SE 1st gen and similar): the logo pair is 304px wide
   at the 600px sizes and the column is 288px. */
@media (max-width: 359px){
  /* top bar: logos 210px + phone 106px don't fit in 288px; the Agency logo
     ran under the phone number */
  .topbar-in{ gap:12px; }
  .presented{ gap:8px; }
  .topbar .lg-tlt{ height:13px; }
  .topbar .lg-agency{ height:17px; }
  .topbar .lg-rule{ height:14px; }
  .topbar-phone{ font-size:11px; letter-spacing:.04em; }
  /* footer */
  .logos{ gap:12px; }
  .logos .lg-tlt{ width:180px; }
  .logos .lg-agency{ width:52px; }
}

/* ---------- 9. SHARED MOTION STATES ----------
   CONTENT IS VISIBLE BY DEFAULT. Nothing here hides anything unless
   motion.js (Batch 2) has put .motion-ready on <html>, which it does only
   when the visitor has not asked for reduced motion, right before it
   starts observing, and only after marking anything already on screen as
   .is-in so nothing above the fold ever animates in from hidden. If the
   script is late, blocked or broken, every element stays as authored.

     data-reveal          fade and rise 20px
     data-reveal="clip"   photo reveal, wiped up from the bottom edge
     data-reveal="line"   an underline (::after) drawn left to right
     --reveal-delay       per-element stagger, set by motion.js
                          (60ms apart at most, total capped)

   Never put data-reveal on iHomefinder markup: the plugin re-renders it.
   Animate our own wrappers only. */
@media (prefers-reduced-motion: no-preference){
  .motion-ready [data-reveal]:not(.is-in){
    opacity:0;
    transform:translate3d(0, 20px, 0);
  }
  .motion-ready [data-reveal="clip"]:not(.is-in){
    opacity:1;
    transform:none;
    clip-path:inset(0 0 100% 0);
  }
  .motion-ready [data-reveal="line"]:not(.is-in){ opacity:1; transform:none; }
  .motion-ready [data-reveal="line"]:not(.is-in)::after{ transform:scaleX(0); }

  .motion-ready [data-reveal]{
    transition:
      opacity .8s var(--ease) var(--reveal-delay, 0ms),
      transform .8s var(--ease) var(--reveal-delay, 0ms),
      clip-path 1.1s var(--ease) var(--reveal-delay, 0ms);
  }
  .motion-ready [data-reveal="line"]::after{
    transition:transform .9s var(--ease) calc(var(--reveal-delay, 0ms) + 150ms);
  }
}
[data-reveal="line"]{ position:relative; }
[data-reveal="line"]::after{
  content:'';
  position:absolute; left:0; bottom:-.18em;
  width:min(120px, 40%); height:1px;
  background:var(--dusk);
  transform-origin:left center;
}

/* Small hover lift for linked cards, used by later batches. */
.lift{ transition:transform .35s var(--ease); }
@media (hover: hover){
  .lift:hover{ transform:translate3d(0,-4px,0); }
}

/* ---------- 10. REDUCED MOTION ----------
   No motion at all: every transition and animation is cut, and every
   element shows in its final state. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  body.mwe-page *,
  body.mwe-page *::before,
  body.mwe-page *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
  }
  .lift:hover{ transform:none; }
}

/* ---------- 11. FINAL OVERRIDES (keep last) ---------- */
.skip,
.btn,
.brand,
.topbar-phone,
.nav-phone,
.nav-links a,
.nav-drop-menu a,
.mobile-nav a,
.foot-top a,
.foot-btm a{ text-decoration:none !important; }
.foot-btm a:hover,
.foot-top a:hover{ text-decoration:underline !important; }