/* ============================================================
   Willow Real Estate — Shell v2 ("The Refined Advisor")
   Base + fixed top bar (dropdowns) + mobile drawer + footer.
   Single typeface (Forma DJR Banner), four colours, hairlines,
   calm motion. Shared across every page.
   ============================================================ */

:root{
  --wv-black:#161616;   /* primary ink / dark hero */
  --wv-dark:#282018;    /* footer, drawer */
  --wv-cream:#F2EEEB;   /* primary light surface / ink on dark */
  --wv-white:#FFFFFF;
  --wv-line:rgba(22,22,22,.12);
  --wv-line-inv:rgba(242,238,235,.18);
  --wv-font:'Forma DJR Banner','Helvetica Neue',Arial,sans-serif;
  --wv-maxw:1180px;
  --wv-nav-h:86px;
}

*,*::before,*::after{ box-sizing:border-box; }
/* overflow-x:clip (not hidden) contains full-bleed sections WITHOUT creating a
   scroll container — hidden would break position:sticky on iOS (the pinned
   Values stage). */
html,body{ margin:0; padding:0; background:#FFFFFF; overflow-x:clip; }
body{
  font-family:var(--wv-font);
  color:var(--wv-black);
  font-weight:300;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{ display:block; max-width:100%; }
/* FAQ rows: the question is a flex child, so its default min-width:auto stops
   long questions wrapping — they overflowed and were clipped by overflow-x on
   narrow screens. Let the text wrap; keep the +/- icon at its natural size. */
[data-faq]{ align-items:flex-start !important; -webkit-tap-highlight-color:transparent; flex-wrap:nowrap; }
[data-faq] > span:first-child{ min-width:0 !important; flex:1 1 auto; overflow-wrap:anywhere; word-break:break-word; }
[data-faq] > span:last-child{ flex:0 0 auto; margin-top:2px; }
/* Recent-results grid (home / sell / manage): heading + View-all, then a row
   of cards — photo, address, divider, "Sold for" + price, specs. */
.wv-rr{ background:#fff; padding:calc(var(--secpy,100px) * 1.4) 6.5vw; letter-spacing:1.5px; }
.wv-rr-inner{ max-width:1300px; margin:0 auto; }
.wv-rr-head{ display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:52px; }
.wv-rr-h{ margin:0; font-family:var(--wv-font); font-weight:400; font-size:40px; line-height:1.05; letter-spacing:1.5px; color:#161616; }
.wv-rr-controls{ display:flex; align-items:center; gap:16px; flex:0 0 auto; }
.wv-rr-arrow{ width:46px; height:46px; border-radius:50%; border:1px solid rgba(22,22,22,.28); background:transparent; color:#161616; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s ease, color .2s ease, opacity .2s ease; -webkit-tap-highlight-color:transparent; }
.wv-rr-arrow:hover{ background:#282018; color:#F2EEEB; border-color:#282018; }
.wv-rr-arrow:disabled{ opacity:.28; cursor:default; }
.wv-rr-arrow:disabled:hover{ background:transparent; color:#161616; border-color:rgba(22,22,22,.28); }
.wv-rr-viewall{ display:inline-flex; align-items:center; gap:16px; flex:0 0 auto; font-size:13px; font-weight:500; letter-spacing:2px; text-transform:uppercase; color:#161616; text-decoration:none; }
.wv-rr-viewall:hover{ opacity:.6; }
/* Carousel: horizontal scroll-snap track, 3 cards per view (2 tablet, 1 phone),
   driven by the prev/next arrows and native swipe. Scrollbar hidden. */
.wv-rr-viewport{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; margin:0 -4px; }
.wv-rr-viewport::-webkit-scrollbar{ display:none; }
.wv-rr-track{ display:flex; gap:40px; padding:4px; }
.wv-rr-card{ flex:0 0 calc((100% - 80px) / 3); scroll-snap-align:start; display:flex; flex-direction:column; color:#161616; text-decoration:none; }
.wv-rr-card:hover{ opacity:1; }
.wv-rr-thumb{ position:relative; aspect-ratio:16/11; overflow:hidden; background:#e7e1db; }
.wv-rr-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1s cubic-bezier(.16,1,.3,1); }
.wv-rr-card:hover .wv-rr-thumb img{ transform:scale(1.04); }
.wv-rr-addr{ font-family:var(--wv-font); font-weight:300; font-size:20px; line-height:1.3; letter-spacing:1px; margin-top:24px; }
.wv-rr-divider{ height:1px; background:rgba(22,22,22,.16); margin:18px 0; }
.wv-rr-plabel{ font-size:11px; font-weight:500; letter-spacing:2px; text-transform:uppercase; color:rgba(22,22,22,.5); }
.wv-rr-price{ font-family:var(--wv-font); font-weight:300; font-size:25px; letter-spacing:1px; margin-top:10px; }
.wv-rr-stats{ font-size:13px; letter-spacing:1px; color:rgba(22,22,22,.55); margin-top:16px; }
@media (max-width:900px){ .wv-rr-track{ gap:32px; } .wv-rr-card{ flex-basis:calc((100% - 32px) / 2); } .wv-rr-h{ font-size:32px; } }
@media (max-width:600px){ .wv-rr-track{ gap:22px; } .wv-rr-card{ flex-basis:88%; } .wv-rr-head{ flex-wrap:wrap; gap:16px; margin-bottom:32px; } .wv-rr-h{ font-size:26px; } .wv-rr-viewall{ font-size:11px; } .wv-rr-arrow{ width:42px; height:42px; } }
/* Kill the mobile tap-flash everywhere (iOS/Android paint a coloured overlay —
   pink on the hamburger, blue on links — on touch). The site has its own
   hover/active states, so no default highlight is wanted anywhere. */
html{ -webkit-tap-highlight-color:transparent; }
a, button, summary, label, [role="button"], [onclick]{ -webkit-tap-highlight-color:transparent; }
/* iOS Safari repaints link/button text with the system blue on :active (tap)
   via -webkit-text-fill-color, which `color` alone does NOT override — this is
   why setting the colour didn't stop the blue flash. Pin the text fill to each
   element's own colour in every state so CTAs keep their colour on tap/click.
   currentColor means every link/button stays exactly its intended colour. */
a, a:link, a:visited, a:hover, a:focus, a:active, a:focus-visible,
button, button:hover, button:focus, button:active, button:focus-visible,
[role="button"], [role="button"]:active,
.wv-clink, .wv-clink:active, .wv-quicklink, .wv-quicklink:active{ -webkit-text-fill-color:currentColor; }
a{ color:var(--wv-black); text-decoration:none; transition:opacity .18s ease; }
a:hover{ opacity:.6; }

/* ---- Link / CTA colour lock ----
   An external stylesheet (Elementor's global kit / Hello parent theme) paints
   a blue link colour on :hover / :active that outranks the theme on any link
   without its own hover rule — that's why setting the colour before didn't
   hold and links flashed blue on tap AND on mouse hover. Re-assert the brand
   colours across every interactive state with !important. Scoped to .site-main
   so the header nav and footer keep their own colour logic untouched.
   :not([style*="color"]) excludes only links whose inline style sets a text
   colour (e.g. the dark CTA buttons) so the lock never overrides those — while
   links with a non-colour inline style (e.g. margin-top) ARE still covered. */
.site-main a:not([style*="color"]):link, .site-main a:not([style*="color"]):visited, .site-main a:not([style*="color"]):hover, .site-main a:not([style*="color"]):focus, .site-main a:not([style*="color"]):active,
.site-main a:not([style*="color"]):focus-visible{ color:var(--wv-black) !important; }
/* Component colours re-pinned ABOVE the generic rule (a.class form wins on
   specificity), so quicklinks keep their tone and light-on-dark CTAs stay
   cream in every state instead of being darkened to near-invisible. */
.site-main a.wv-quicklink:link, .site-main a.wv-quicklink:visited, .site-main a.wv-quicklink:hover, .site-main a.wv-quicklink:focus, .site-main a.wv-quicklink:active{ color:#282018 !important; }
.site-main a.wv-clink--dark:link, .site-main a.wv-clink--dark:visited, .site-main a.wv-clink--dark:hover, .site-main a.wv-clink--dark:focus, .site-main a.wv-clink--dark:active,
.site-main a.btn-light:link, .site-main a.btn-light:visited, .site-main a.btn-light:hover, .site-main a.btn-light:focus, .site-main a.btn-light:active,
.site-main a.wv-lqm-getbtn:link, .site-main a.wv-lqm-getbtn:visited, .site-main a.wv-lqm-getbtn:hover, .site-main a.wv-lqm-getbtn:focus, .site-main a.wv-lqm-getbtn:active{ color:#F2EEEB !important; }
/* Dropdown tab-menu links (in the header, outside .site-main): solid black. */
.wv-nav .wv-dd a:link, .wv-nav .wv-dd a:visited, .wv-nav .wv-dd a:hover, .wv-nav .wv-dd a:focus, .wv-nav .wv-dd a:active{ color:#000 !important; }
/* Inline-styled CTA links are excluded from the lock above (:not([style])) so
   their own inline colour is respected — but the external kit still repaints
   them blue on :hover. Re-pin each to the brand colour named in its inline
   style, across all states. No CTA uses either hex as a background, so matching
   the token is safe. */
.site-main a[style*="161616" i], .site-main a[style*="161616" i]:hover, .site-main a[style*="161616" i]:focus, .site-main a[style*="161616" i]:active{ color:#161616 !important; }
.site-main a[style*="F2EEEB" i], .site-main a[style*="F2EEEB" i]:hover, .site-main a[style*="F2EEEB" i]:focus, .site-main a[style*="F2EEEB" i]:active{ color:#F2EEEB !important; }

button{ font-family:var(--wv-font); }
::selection{ background:var(--wv-dark); color:var(--wv-cream); }
input{ font-family:var(--wv-font); }
input::placeholder{ color:rgba(22,22,22,.4); letter-spacing:.02em; }

.wv-container{ max-width:var(--wv-maxw); margin-inline:auto; padding-inline:6.5vw; }

/* Release Hello Elementor / Elementor content-width cap so full-bleed
   sections span edge-to-edge (carried from v1). */
.site-main{ max-width:100% !important; width:100% !important; margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; }
.site-main > .elementor, .site-main .e-con, .site-main .elementor-container{
  max-width:100% !important; width:100% !important;
}
body:not(.has-hero) .site-main{ padding-top:var(--wv-nav-h); }
/* Every hero (template) page must be edge-to-edge like the home page — some
   inner pages (.wv-page) were boxed by a parent-theme wrapper on mobile, so
   force the page wrapper + its sections full-bleed with no side inset/radius. */
body.has-hero .site-main{ padding-top:0 !important; padding-bottom:0 !important; }
.wv-page, .wv-home, .wv-listing{ width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; border-radius:0 !important; overflow:visible; }
.wv-page > section, .wv-home > section{ width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; }

/* ============================================================
   Fixed top bar
   ============================================================ */
.wv-nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:24px 6.5vw;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease;
}
.wv-nav.is-scrolled{
  background:#FFFFFF;
  border-bottom:1px solid var(--color-line);
  backdrop-filter:saturate(1.05) blur(6px);
  -webkit-backdrop-filter:saturate(1.05) blur(6px);
}

/* ink: cream over the hero; DARK over the scrolled solid-white bar. */
.wv-nav .wv-nav-btn,
.wv-nav .wv-nav-link{ color:var(--wv-cream); }
.wv-nav.is-scrolled .wv-nav-btn,
.wv-nav.is-scrolled .wv-nav-link{ color:var(--wv-black); }
.wv-nav .wv-burger span{ background:#FFFFFF; }
.wv-nav.is-scrolled .wv-burger span{ background:var(--wv-black); }
/* Pages with a light hero keep dark ink from the top — but only until the bar
   scrolls to solid black, when the ink returns to cream. */
body.wv-dark-nav .wv-nav:not(.is-scrolled) .wv-nav-btn,
body.wv-dark-nav .wv-nav:not(.is-scrolled) .wv-nav-link{ color:var(--wv-black); }
body.wv-dark-nav .wv-nav:not(.is-scrolled) .wv-burger span{ background:var(--wv-black); }

/* No tap-flash on touch (iPad/iOS shows a coloured highlight otherwise) and
   lock the interactive states to the ink swap — hover/focus/active must never
   introduce another colour (e.g. a UA/parent-theme link colour). */
.wv-nav a,
.wv-nav button{ -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; -webkit-appearance:none; appearance:none; }
.wv-nav ::selection{ background:transparent; }
/* Some outside stylesheet (parent theme / Elementor / UA) paints a coloured
   background on the focused/active/open nav item. Force it transparent in every
   state so only the ink swap ever changes. */
.wv-nav .wv-nav-btn,
.wv-nav .wv-nav-btn:hover, .wv-nav .wv-nav-btn:focus, .wv-nav .wv-nav-btn:active, .wv-nav .wv-nav-btn:focus-visible,
.wv-nav-item.is-open > .wv-nav-btn,
.wv-nav .wv-nav-link,
.wv-nav .wv-nav-link:hover, .wv-nav .wv-nav-link:focus, .wv-nav .wv-nav-link:active, .wv-nav .wv-nav-link:focus-visible{
  background:transparent !important; background-color:transparent !important; box-shadow:none !important;
}
.wv-nav a:focus,
.wv-nav button:focus,
.wv-nav a:focus-visible,
.wv-nav button:focus-visible{ outline:none; }
.wv-nav .wv-nav-btn:hover, .wv-nav .wv-nav-btn:focus, .wv-nav .wv-nav-btn:active,
.wv-nav .wv-nav-link:hover, .wv-nav .wv-nav-link:focus, .wv-nav .wv-nav-link:active{ color:var(--wv-cream); }
.wv-nav.is-scrolled .wv-nav-btn:hover, .wv-nav.is-scrolled .wv-nav-btn:focus, .wv-nav.is-scrolled .wv-nav-btn:active,
.wv-nav.is-scrolled .wv-nav-link:hover, .wv-nav.is-scrolled .wv-nav-link:focus, .wv-nav.is-scrolled .wv-nav-link:active{ color:var(--wv-black); }
body.wv-dark-nav .wv-nav:not(.is-scrolled) .wv-nav-btn:hover, body.wv-dark-nav .wv-nav:not(.is-scrolled) .wv-nav-btn:focus, body.wv-dark-nav .wv-nav:not(.is-scrolled) .wv-nav-btn:active,
body.wv-dark-nav .wv-nav:not(.is-scrolled) .wv-nav-link:hover, body.wv-dark-nav .wv-nav:not(.is-scrolled) .wv-nav-link:focus, body.wv-dark-nav .wv-nav:not(.is-scrolled) .wv-nav-link:active{ color:var(--wv-black); }

.wv-navgroup{ display:flex; gap:40px; align-items:center; font-size:15px; font-weight:500; letter-spacing:.16em; }
.wv-navgroup.wv-left{ grid-column:1; justify-self:start; }
.wv-navgroup.wv-right{ grid-column:3; justify-self:end; }

.wv-nav-item{ position:relative; }
.wv-nav-btn{
  display:inline-flex; align-items:center; gap:7px;
  background:none; border:none; padding:0; cursor:pointer;
  font-family:var(--wv-font); font-size:15px; font-weight:500; letter-spacing:.16em;
}
.wv-nav-caret{ transition:transform .25s ease; font-size:.7em; opacity:.7; }
.wv-nav-item.is-open .wv-nav-caret{ transform:rotate(180deg); }
.wv-nav-link{ font-size:15px; font-weight:500; letter-spacing:.16em; }

/* dropdown popover */
.wv-dd{
  position:absolute; top:calc(100% + 16px); left:0; min-width:236px;
  background:#FFFFFF; border:1px solid rgba(22,22,22,.14);
  box-shadow:0 26px 52px -30px rgba(0,0,0,.45);
  padding:10px 0; display:flex; flex-direction:column; z-index:60;
  opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
.wv-dd--right{ left:auto; right:0; }
/* Invisible bridge across the 16px gap so hovering button → dropdown doesn't
   cross dead space and close the menu. */
.wv-dd::before{ content:""; position:absolute; top:-16px; left:0; right:0; height:16px; }
.wv-nav-item.is-open .wv-dd{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.wv-dd a{
  display:block; padding:11px 22px; color:#000;
  font-family:"Richmond Display Light","Richmond Display",Georgia,serif;
  font-size:18px; font-weight:300; letter-spacing:.06em; white-space:nowrap;
}

.wv-logo{ grid-column:2; justify-self:center; display:inline-flex; align-items:center; }
.wv-logo img{ height:40px; width:auto; display:block; }
.wv-logo .wv-logo-cream{ display:block; }
.wv-logo .wv-logo-dark{ display:none; }
/* Light-hero pages show the dark logo at the top; and once the bar scrolls to
   the solid-white state, the dark logo shows everywhere (dark ink on white). */
body.wv-dark-nav .wv-nav:not(.is-scrolled) .wv-logo-cream{ display:none; }
body.wv-dark-nav .wv-nav:not(.is-scrolled) .wv-logo-dark{ display:block; }
.wv-nav.is-scrolled .wv-logo-cream{ display:none; }
.wv-nav.is-scrolled .wv-logo-dark{ display:block; }

.wv-burger{
  display:none; flex-direction:column; justify-content:center; gap:7px;
  width:24px; height:22px; border:none; background:transparent; cursor:pointer; padding:0;
}
.wv-burger span{ display:block; width:100%; height:1.5px; transition:background .3s ease; }
/* Elementor's global Buttons style fills every bare <button> with its charcoal
   background + border-radius, turning the hamburger (and drawer close) into a
   dark box. Pin these toggles back to transparent/borderless in every state. */
.wv-nav .wv-burger, .wv-nav .wv-burger:hover, .wv-nav .wv-burger:focus, .wv-nav .wv-burger:active, .wv-nav .wv-burger:focus-visible,
.wv-drawer .wv-drawer-close, .wv-drawer .wv-drawer-close:hover, .wv-drawer .wv-drawer-close:focus, .wv-drawer .wv-drawer-close:active, .wv-drawer .wv-drawer-close:focus-visible{
  background:transparent !important; background-color:transparent !important;
  border:none !important; border-radius:0 !important; box-shadow:none !important;
}
.wv-nav .wv-burger{ padding:0 !important; }

/* ============================================================
   Mobile / tablet drawer
   ============================================================ */
.wv-drawer-ov{
  position:fixed; inset:0; z-index:55; background:rgba(15,13,11,.5);
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.wv-drawer-ov.is-open{ opacity:1; pointer-events:auto; }
.wv-drawer{
  position:fixed; top:0; right:0; height:100%; width:320px; max-width:82vw;
  background:var(--wv-black); color:var(--wv-cream); z-index:60;
  padding:96px 40px 40px; overflow-y:auto;
  box-shadow:-30px 0 60px -30px rgba(0,0,0,.5);
  transform:translateX(100%); transition:transform .35s ease;
}
.wv-drawer.is-open{ transform:translateX(0); }
.wv-drawer-close{
  position:absolute; top:34px; right:34px; background:none; border:none;
  color:var(--wv-cream); cursor:pointer; padding:6px; line-height:0;
}
.wv-drawer-inner{ display:flex; flex-direction:column; }
.wv-acc-btn{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  background:none; border:none; padding:16px 0; cursor:pointer;
  color:var(--wv-cream); font-family:var(--wv-font); font-size:18px; font-weight:300;
  letter-spacing:.12em; text-transform:uppercase; text-align:left;
}
.wv-acc-icon{ font-size:24px; font-weight:300; line-height:1; color:rgba(242,238,235,.6); transition:transform .3s ease; }
.wv-acc-btn.is-open .wv-acc-icon{ transform:rotate(45deg); }
.wv-acc-panel{ overflow:hidden; max-height:0; opacity:0; transition:max-height .4s cubic-bezier(.22,.61,.36,1), opacity .3s ease; }
.wv-acc-panel.is-open{ max-height:320px; opacity:1; }
.wv-acc-panel a{ display:block; color:rgba(242,238,235,.72); font-size:15px; font-weight:300; letter-spacing:.04em; padding:12px 0 12px 14px; }
.wv-drawer-inner > a{ color:var(--wv-cream); font-size:18px; font-weight:300; letter-spacing:.12em; text-transform:uppercase; padding:16px 0; }
/* Kill the pink tap/press highlight everywhere. It comes from the platform's
   -webkit-tap-highlight-color (set to an accent by a parent rule), so this has
   to be universal + !important to win — a scoped rule was being overridden. */
*{ -webkit-tap-highlight-color:rgba(0,0,0,0) !important; }
.wv-drawer button, .wv-drawer a{ -webkit-appearance:none; appearance:none; -webkit-user-select:none; user-select:none; }
.wv-drawer button:focus, .wv-drawer a:focus, .wv-drawer button:focus-visible, .wv-drawer a:focus-visible{ outline:none; }
/* Explicit background on every interactive state, so no inherited accent can
   fill the tab/menu row. */
.wv-acc-btn, .wv-acc-btn:hover, .wv-acc-btn:focus, .wv-acc-btn:active, .wv-acc-btn:focus-visible,
.wv-acc-panel a, .wv-acc-panel a:hover, .wv-acc-panel a:focus, .wv-acc-panel a:active,
.wv-drawer-inner > a, .wv-drawer-inner > a:hover, .wv-drawer-inner > a:focus, .wv-drawer-inner > a:active{ background:transparent !important; }
.wv-acc-btn:active, .wv-acc-panel a:active, .wv-drawer-inner > a:active{ background:rgba(242,238,235,.06) !important; }

/* Desktop / iPad (>=768px): inline tabs in the top bar, dropdowns on click.
   Mobile (<768px): tabs hidden, 3-bar toggle opens the right-side drawer. */
.wv-navgroup{ display:none; }
.wv-burger{ display:flex; }
@media (min-width:768px){
  .wv-navgroup{ display:flex; }
  .wv-burger{ display:none; }
  .wv-drawer, .wv-drawer-ov{ display:none; }
}
@media (min-width:768px) and (max-width:1060px){
  .wv-navgroup{ gap:22px; }
  .wv-nav{ padding-left:3.5vw; padding-right:3.5vw; }
}

/* ============================================================
   Footer (markup + base styling is inline in footer.php, matching
   Design-v2; these are the shared responsive rules so the footer
   collapses correctly on every page).
   ============================================================ */
@media (max-width:1200px){
  .wv-footer{ padding:56px 5vw 32px !important; }
  .wv-footer .wv-footer-grid{ grid-template-columns:1fr 1fr !important; gap:40px 32px !important; }
  .wv-footer .wv-footer-grid > div{ margin-top:0 !important; }
}
@media (max-width:640px){
  .wv-footer{ padding:48px 22px 28px !important; }
  .wv-footer .wv-footer-grid{ grid-template-columns:1fr !important; gap:32px !important; }
}

/* ============================================================
   Reveal-on-scroll (used across pages)
   ============================================================ */
/* Calm reveal: a small, slow drift on one shared ease-out curve. Letter-reveal
   elements fade as whole blocks through this same path (no per-letter motion). */
[data-reveal], [data-letter-reveal]{ opacity:0; transform:translateY(10px); transition:opacity 1s ease, transform 1s cubic-bezier(.16,1,.3,1); }
[data-reveal].is-in, [data-letter-reveal].is-in{ opacity:1; transform:none; }
/* If scripting never runs (JS disabled / failed to load), reveal content is
   shown outright rather than left permanently hidden. Wins over the per-page
   [data-reveal]{opacity:0} rules on specificity. */
html:not(.wv-js) [data-reveal], html:not(.wv-js) [data-letter-reveal]{ opacity:1 !important; transform:none !important; }

/* ============================================================
   Scroll motion (home + about): hero zoom-out, letter reveal,
   full-bleed sticky reveal, directional curtain wipes.
   ============================================================ */
/* Hero — image zooms out + title rises (pure CSS, runs on load) */
[data-hero-zoom]{ animation:wvHeroZoom 2s cubic-bezier(.16,1,.3,1) both; will-change:transform; }
@keyframes wvHeroZoom{ from{ transform:scale(1.16); opacity:0; } to{ transform:scale(1); opacity:1; } }
[data-hero-title]{ animation:wvHeroTitle 1.2s cubic-bezier(.16,1,.3,1) .45s both; }
@keyframes wvHeroTitle{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }

/* Letter-by-letter reveal (JS splits text into .wv-ltr spans; fades via
   colour alpha, so every glyph renders on the same path and stays uniform) */
[data-letter-reveal] .wv-ltr{ transition:color .3s ease; }

/* Full-bleed sticky: image pins, the next [data-cover] section scrolls over it */
[data-fullbleed-media]{ position:sticky; top:0; height:100vh; overflow:hidden; }
[data-cover]{ position:relative; z-index:2; }

/* Curtain wipes — direction set per image via data-dir */
[data-curtain]{ overflow:hidden; clip-path:inset(0 0 0 0); }
[data-curtain][data-dir="up"]{ clip-path:inset(100% 0 0 0); }
[data-curtain][data-dir="down"]{ clip-path:inset(0 0 100% 0); }
[data-curtain][data-dir="lr"]{ clip-path:inset(0 100% 0 0); }
[data-curtain][data-dir="rl"]{ clip-path:inset(0 0 0 100%); }
[data-curtain].is-in{ clip-path:inset(0 0 0 0); transition:clip-path 1.15s cubic-bezier(.16,1,.3,1); }
[data-curtain] > *{ transition:transform 1.5s cubic-bezier(.16,1,.3,1); }
[data-curtain]:not(.is-in) > *{ transform:scale(1.12); }

/* No-JS / reduced-motion safety — never leave content hidden */
html:not(.wv-js) [data-curtain]{ clip-path:inset(0 0 0 0) !important; }
html:not(.wv-js) [data-curtain] > *{ transform:none !important; }
@media (prefers-reduced-motion:reduce){
  [data-hero-zoom],[data-hero-title]{ animation:none !important; opacity:1 !important; transform:none !important; }
  [data-curtain]{ clip-path:inset(0 0 0 0) !important; }
  [data-curtain] > *{ transform:none !important; }
  [data-reveal],[data-letter-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* Image-slot placeholders (real photos filled by slots.css) */
image-slot{ display:block; background:#1b1712; }
.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{ left:12px; top:12px; z-index:999; background:var(--wv-dark); color:var(--wv-cream); padding:10px 16px; }

/* ============================================================
 * Listings pages (Buy / Lease / Sold / Leased / single property):
 * solid-black type with 1.5px tracking, per client direction.
 * Inverted controls (dark buttons, badges) keep their light ink.
 * ============================================================ */
body.willow-tpl-buy, body.willow-tpl-lease, body.willow-tpl-sold,
body.willow-tpl-leased{ color:#000; letter-spacing:1.5px; }
/* The single-property page owns its own typography (see page-listing.css). */

/* un-dim + force solid black on the reading text */
body.willow-tpl-buy :is(.prop-hero-lead,.prop-card-price,.prop-card-addr,.prop-card-suburb,.prop-card-stats,.prop-count,.prop-filter-cell label,.prop-filter-clear,.prop-empty),
body.willow-tpl-lease :is(.prop-hero-lead,.prop-card-price,.prop-card-addr,.prop-card-suburb,.prop-card-stats,.prop-count,.prop-filter-cell label,.prop-filter-clear,.prop-empty),
body.willow-tpl-sold :is(.sold-hero-lead,.sold-card-addr,.sold-card-suburb,.sold-card-price,.sold-card-pricelabel,.sold-card-settled,.sold-avg-days),
body.willow-tpl-leased :is(.sold-hero-lead,.sold-card-addr,.sold-card-suburb,.sold-card-price,.sold-card-pricelabel,.sold-card-settled,.sold-avg-days){
  color:#000 !important; opacity:1 !important; letter-spacing:1.5px;
}
/* filter dropdown text to solid black too */
body.willow-tpl-buy .prop-filter-cell select,
body.willow-tpl-lease .prop-filter-cell select{ color:#000 !important; }

/* ============================================================
   Listing grid — alternating asymmetric cards (buy / lease / sold / leased)
   27-column track, zero column-gap; each card claims a span and the gutter
   comes from the card's own padding-inline, so edge cards sit flush.
   ============================================================ */
.prop-grid{ display:grid; grid-template-columns:repeat(5,1fr); column-gap:0; row-gap:var(--space-lg); }
.prop-card{ display:block; padding-inline:clamp(.75rem,1.4vw,1.6rem); color:#000; min-width:0; overflow:hidden; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
/* 2 cards per row, alternating big (3/5) + small (2/5); the big side swaps
   each row (repeats every 4 cards): row1 big|small, row2 small|big. */
.prop-card:nth-child(4n+1){ grid-column:span 3; }
.prop-card:nth-child(4n+2){ grid-column:span 2; }
.prop-card:nth-child(4n+3){ grid-column:span 2; }
.prop-card:nth-child(4n){ grid-column:span 3; }
.prop-card:nth-child(4n+1), .prop-card:nth-child(4n+3){ padding-left:0; }
.prop-card:nth-child(4n+2), .prop-card:nth-child(4n){ padding-right:0; }

/* Thumb: fixed HEIGHT (not aspect-ratio) so a row of differently-wide cards
   keeps images the same height. B&W until hover / tap (:active) / keyboard. */
/* Fixed HEIGHT (not aspect-ratio) so the big (wider) and small (narrower)
   cards in each row stay the SAME height — big differs by width only. */
.prop-card-thumb{ position:relative; height:clamp(240px,22vw,380px); overflow:hidden; margin:0 12px var(--space-md); background:rgba(40,32,24,.05); }
/* Photos stay in full colour at all times — no black-&-white / colour reveal.
   The only interaction is a gentle zoom-in on hover (desktop), finger-down
   (:active), press-and-hold (.is-press) or keyboard focus. */
.prop-card-thumb img,
.prop-card-thumb .prop-card-img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.1s var(--ease-editorial); will-change:transform; }
.prop-card-thumb .prop-card-img{ background-size:cover; background-position:center center; background-repeat:no-repeat; }
@media (hover:hover){ .prop-card:hover .prop-card-thumb img, .prop-card:hover .prop-card-thumb .prop-card-img{ transform:scale(1.04); } }
.prop-card:active .prop-card-thumb img, .prop-card:active .prop-card-thumb .prop-card-img,
.prop-card.is-press .prop-card-thumb img, .prop-card.is-press .prop-card-thumb .prop-card-img,
.prop-card:focus-visible .prop-card-thumb img, .prop-card:focus-visible .prop-card-thumb .prop-card-img{ transform:scale(1.04); }
.prop-card-noimg{ display:block; width:100%; height:100%; background:rgba(40,32,24,.05); }

/* Status band — cream slab, bottom-right of the photo (Under Offer / Off Market).
   Serif (Richmond Display), matching the previous badge treatment. */
.prop-card-badge{ position:absolute; bottom:14%; right:0; z-index:3; background:var(--color-cream); color:var(--color-ink); font-family:'Richmond Display','Richmond Text',Georgia,serif; font-weight:300; font-size:clamp(1.1rem,.6rem + 1vw,1.9rem); letter-spacing:.03em; line-height:1; text-transform:uppercase; padding:.5em 1.1em .55em; min-width:52%; text-align:center; }

/* Meta — address (left) + price/specs (right); two hairlines with equal gap. */
.prop-card-meta{ border-top:1px solid var(--color-ink); border-bottom:1px solid var(--color-ink); padding-block:var(--space-sm); display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:flex-start; gap:clamp(.5rem,1.2vw,1.4rem); }
.prop-card-meta > *{ min-width:0; overflow:hidden; margin:0; }
/* Address + suburb: 14.4px (mobile) → 16.6px (@1024) → 17.7px (large desktop). */
.prop-card-where{ font-size:clamp(14.4px, 12.5px + 0.4vw, 17.7px); line-height:1.4; letter-spacing:0; flex:1 1 auto; }
.prop-card-suburb{ text-transform:uppercase; letter-spacing:.04em; color:#000; opacity:1; }
/* Price + specs: 12.5px (mobile) → 15.2px (@1024) → 16.1px (large desktop). */
.prop-card-figs{ font-size:clamp(12.5px, 10.1px + 0.5vw, 16.1px); line-height:1.4; text-align:right; color:#000; white-space:nowrap; flex:0 1 auto; }
.prop-fit{ display:block; white-space:nowrap; }
/* Every line of card text is Forma DJR Text at Regular (400) — no display cut,
   no bold. Only the status badge keeps its Richmond serif (set above). */
.prop-card, .prop-card-thumb, .prop-card-meta, .prop-card-where, .prop-card-suburb,
.prop-card-figs, .prop-card-stats, .prop-fit{ font-family:var(--font-text); font-weight:400; }
/* Belt-and-braces for EVERY .prop-card-meta — the results grids and the
   Recently Sold / Leased carousels alike. !important beats both an
   Elementor/plugin global font that would otherwise re-style the price/specs
   and the ambient letter-spacing the pages carry (listing pages set 1.5px
   globally; the .wv-rr carousel section sets 1.5px too). Result: every line —
   address, suburb, price and specs — is Forma DJR Text Regular at 0 tracking.
   The badge sits in .prop-card-thumb, not .prop-card-meta, so it keeps serif. */
.prop-card-meta, .prop-card-meta *{
  font-family:var(--font-text) !important; font-weight:400 !important; letter-spacing:0 !important;
}
/* Recently Sold / Leased carousel: reuse the grid's text block under the
   existing carousel photo. Keep the photo/carousel exactly as-is; just give the
   meta room below the image and let it fill the card width. */
.wv-rr-card .prop-card-meta{ margin-top:22px; width:100%; }

@media (max-width:1024px){
  .prop-card-thumb{ height:clamp(190px,24vw,300px); }
}
@media (max-width:760px){
  .prop-grid{ grid-template-columns:repeat(2,1fr); row-gap:var(--space-lg); column-gap:var(--space-sm); }
  .prop-card,
  .prop-card:nth-child(4n+1), .prop-card:nth-child(4n+2),
  .prop-card:nth-child(4n+3), .prop-card:nth-child(4n){ grid-column:auto; padding-inline:0; }
  .prop-card-thumb{ height:auto; aspect-ratio:4/3; margin:0 0 var(--space-xs); }
  .prop-card-meta{ flex-direction:row; flex-wrap:nowrap; gap:var(--space-xs); padding-block:var(--space-xs); }
}
@media (max-width:640px){
  /* Single-column editorial list — Buy / Sold / Lease / Leased share this card.
     Full-width landscape photo, then a hairline, then a details row: street +
     SUBURB on the left, price/status + specs on the right. */
  .prop-grid{ grid-template-columns:1fr; row-gap:0; column-gap:0; }
  .prop-card,
  .prop-card:nth-child(4n+1), .prop-card:nth-child(4n+2),
  .prop-card:nth-child(4n+3), .prop-card:nth-child(4n){ grid-column:auto; padding-left:0; padding-right:0; }
  /* Each card is a list row with a hairline separator beneath it. */
  .prop-card{ padding-block:22px; border-bottom:1px solid var(--color-line); }
  .prop-card:first-child{ padding-top:0; }
  /* Full-width landscape photo. */
  .prop-card-thumb{ height:auto; aspect-ratio:3/2; margin:0 0 16px; }
  /* Black-&-white until the card reaches the viewport centre. JS adds .is-scan
     to the grid and .is-live to the centred card. Fail-safe: with no JS the
     .is-scan class is never set, so every photo stays in full colour. */
  .prop-card-thumb .prop-card-img,
  .prop-card-thumb img{ transition:filter .6s var(--ease-out-soft); }
  .prop-grid.is-scan .prop-card .prop-card-thumb .prop-card-img,
  .prop-grid.is-scan .prop-card .prop-card-thumb img{ filter:grayscale(1); }
  .prop-grid.is-scan .prop-card.is-live .prop-card-thumb .prop-card-img,
  .prop-grid.is-scan .prop-card.is-live .prop-card-thumb img{ filter:grayscale(0); }
  /* Details row: hairline above (under the photo), no boxed bottom line. */
  .prop-card-meta{ border-top:1px solid var(--color-ink); border-bottom:0; padding-block:14px 0; align-items:flex-start; gap:16px; }
  .prop-card-where{ font-size:14px; line-height:1.5; }
  .prop-card-suburb{ margin-top:2px; }
  .prop-card-figs{ font-size:13px; line-height:1.5; }
  .prop-card-figs .prop-card-stats{ margin-top:2px; opacity:.72; }
}
@media (prefers-reduced-motion:reduce){
  .prop-card-thumb .prop-card-img,
  .prop-card-thumb img{ transition:none; }
}

/* Footer monogram logo sizing (responsive stacking lives with the footer
   block above). */
.wv-foot-logo svg{ width:100%; height:auto; display:block; }

/* ============================================================
   Premium editorial craft layer
   Scroll-progress hairline · image hover-zoom · arrow micro-
   interaction · reveal stagger · pull-quote (Instrument Serif) ·
   focus states. Calm eases, no bounce. Reduced-motion guarded.
   ============================================================ */

/* --- Scroll-progress hairline: 1px bar pinned under the nav, scales with
   scroll position. JS sets --wv-scroll (0→1). --- */
.wv-scrollbar{
  display:none !important;
  position:fixed; top:var(--wv-nav-h,0); left:0; right:0; height:1px; z-index:1200;
  transform:scaleX(var(--wv-scroll,0)); transform-origin:0 50%;
  background:var(--wv-black); opacity:.9; pointer-events:none;
  transition:transform .1s linear;
}
body.wv-dark-nav .wv-scrollbar{ background:rgba(22,22,22,.4); }

/* --- Image hover-zoom: frames scale their photo gently, overflow clipped.
   Applies to known editorial frames + any element tagged [data-zoom]. --- */
[data-zoom], [data-hero-img], [data-team-card], .wv-rr-card .wv-rr-thumb{ overflow:hidden; }
[data-zoom] image-slot, [data-zoom] img,
[data-hero-img] image-slot,
[data-team-card] image-slot,
.wv-rr-card .wv-rr-thumb image-slot, .wv-rr-card .wv-rr-thumb img{
  transition:transform 1s cubic-bezier(.22,1,.36,1); will-change:transform;
}
[data-zoom]:hover image-slot, [data-zoom]:hover img,
[data-hero-img]:hover image-slot,
[data-team-card]:hover image-slot,
.wv-rr-card:hover .wv-rr-thumb image-slot, .wv-rr-card:hover .wv-rr-thumb img{
  transform:scale(1.045);
}
/* Extend the same gentle hover-zoom to the remaining editorial photo frames so
   every image on the site behaves like the hero images. The About full-bleed is
   deliberately left static (excluded below). */
.wv-splitcard-img, .wv-lq-img, [data-bio-portrait], .tmrec-img, .wv-formsplit{ overflow:hidden; }
.wv-splitcard-img image-slot,
.wv-lq-img image-slot,
[data-bio-portrait] image-slot,
.tmrec-img image-slot,
.wv-formsplit-img{
  transition:transform 1s cubic-bezier(.22,1,.36,1); will-change:transform;
}
.wv-splitcard-img:hover image-slot,
.wv-lq-img:hover image-slot,
[data-bio-portrait]:hover image-slot,
.tmrec-img:hover image-slot,
.wv-formsplit-img:hover{
  transform:scale(1.045);
}
/* Never zoom the About full-bleed image. */
[data-about-fullbleed] image-slot, image-slot#about-fullbleed{ transform:none !important; }

/* --- Arrow micro-interaction: thin arrow shifts right on hover/focus. --- */
.wv-arrow, [data-path-arrow]{ transition:transform .35s cubic-bezier(.22,1,.36,1); }
a:hover .wv-arrow, a:focus-visible .wv-arrow,
button:hover .wv-arrow, button:focus-visible .wv-arrow,
[data-path-cta]:hover [data-path-arrow], [data-path-cta]:focus-visible [data-path-arrow]{ transform:translateX(5px); }
/* Back-link arrow is flipped inline (scaleX(-1)); animate margin, not
   transform, so the flip is preserved while it nudges left on hover. */
.wv-back svg{ transition:margin-left .35s cubic-bezier(.22,1,.36,1); }
.wv-back:hover svg, .wv-back:focus-visible svg{ margin-left:-4px; }

/* --- Reveal stagger: a delayed group fades in just after its lead element. --- */
[data-reveal][data-reveal-delay]{ transition-delay:.15s; }

/* --- Accessibility: visible keyboard focus across editorial pages. --- */
.wv-page a:focus-visible, .wv-page button:focus-visible,
.wv-page input:focus-visible, .wv-page select:focus-visible, .wv-page textarea:focus-visible{
  outline:2px solid currentColor; outline-offset:3px; border-radius:1px;
}

/* ============================================================
   Lead-magnet pull-quote (.wv-lq) — Selling + Manage
   ============================================================ */
.wv-lq{ background:#161616; color:#F2EEEB; padding:clamp(72px,9vw,120px) 6.5vw; }
.wv-lq-in{ max-width:1500px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:stretch; justify-content:space-between; gap:clamp(40px,5vw,84px); }
.wv-lq-img{ position:relative; overflow:hidden; flex:0 0 auto; width:46%; min-height:480px; background:#0f0f0f; }
.wv-lq-img image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.wv-lq--flip .wv-lq-img{ order:2; }         /* image on the right */
.wv-lq-copy{ flex:1 1 420px; display:flex; flex-direction:column; align-items:flex-start; padding:clamp(4px,1vw,18px) 0; }
.wv-lq-top{ display:flex; justify-content:space-between; align-items:baseline; gap:24px; width:100%; margin-bottom:clamp(30px,4vw,54px); }
.wv-lq-eyebrow, .wv-lq-page{
  font-family:var(--font-text); font-weight:500; text-transform:uppercase;
  color:rgba(242,238,235,.5);
}
.wv-lq-eyebrow{ font-size:12px; letter-spacing:2.5px; }
.wv-lq-page{ font-size:12px; letter-spacing:1px; white-space:nowrap; }
.wv-lq-quote{
  margin:0; max-width:16ch;
  font-family:var(--font-serif); font-style:italic; font-weight:400;
  font-size:clamp(36px,4vw,50px); line-height:1.16; letter-spacing:0; color:#F2EEEB;
}
.wv-lq-bottom{ margin-top:auto; padding-top:clamp(40px,5vw,64px); display:flex; flex-direction:column; align-items:flex-start; gap:26px; width:100%; max-width:460px; }
.wv-lq-source{
  margin:0; font-family:var(--font-text); font-weight:300;
  font-size:15px; line-height:1.7; letter-spacing:.4px; color:rgba(242,238,235,.6);
}
.wv-lq-source b{ font-weight:500; color:rgba(242,238,235,.92); }
/* CTA spans the full width of the copy block — label left, arrow right, one
   hairline running the whole way underneath. */
/* !important on the frame properties: Elementor's global button styling fills
   bare <button>s with its accent colour (showed as a pink box). Force the
   transparent, underline-only treatment so nothing can repaint it. */
.wv-lq-cta{
  display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%;
  background:transparent !important; border:none !important; border-bottom:1px solid rgba(242,238,235,.5) !important; border-radius:0 !important; box-shadow:none !important; cursor:pointer;
  font-family:var(--font-text); font-weight:500; font-size:13px; letter-spacing:1.8px;
  text-transform:uppercase; color:#F2EEEB !important; padding:0 0 10px !important; text-align:left; transition:opacity .2s ease;
}
.wv-lq-cta .wv-arrow{ flex:0 0 auto; }
.wv-lq-cta:hover{ opacity:.7; }
/* Manage variant (image left) — copy sits on the right, right-aligned. */
.wv-lq:not(.wv-lq--flip) .wv-lq-copy{ align-items:flex-end; text-align:right; }
.wv-lq:not(.wv-lq--flip) .wv-lq-bottom{ align-items:flex-end; }
@media (max-width:900px){
  .wv-lq{ padding:56px 24px 62px; }
  .wv-lq-in{ flex-direction:column; gap:0; }
  .wv-lq-img, .wv-lq--flip .wv-lq-img{ order:0; width:100%; min-height:300px; margin-bottom:44px; }
  .wv-lq-copy, .wv-lq:not(.wv-lq--flip) .wv-lq-copy{ align-items:flex-start; text-align:left; }
  .wv-lq:not(.wv-lq--flip) .wv-lq-bottom{ align-items:flex-start; }
  .wv-lq-top{ margin-bottom:36px; }
  .wv-lq-page{ display:none; }
  .wv-lq-quote{ font-size:34px; line-height:1.2; max-width:none; }
  .wv-lq-bottom{ margin-top:44px; padding-top:0; gap:24px; max-width:none; }
}

/* Guide capture modal (opened from the lead-magnet CTA) */
.wv-lqm{ position:fixed; inset:0; z-index:1300; display:flex; align-items:center; justify-content:center; padding:24px; }
.wv-lqm[hidden]{ display:none; }
.wv-lqm-ov{ position:absolute; inset:0; background:rgba(16,16,16,.62); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); border:0; }
.wv-lqm-panel{ position:relative; z-index:1; width:100%; max-width:440px; background:#F2EEEB; color:#161616; padding:clamp(30px,4vw,48px); box-shadow:0 40px 100px -40px rgba(0,0,0,.6); }
.wv-lqm-x{ position:absolute; top:16px; right:16px; background:none; border:none; color:#161616; cursor:pointer; padding:6px; line-height:0; opacity:.55; transition:opacity .2s ease; }
.wv-lqm-x:hover{ opacity:1; }
.wv-lqm-h{ margin:0 0 8px; font-family:var(--wv-font); font-weight:300; font-size:24px; line-height:1.15; letter-spacing:.5px; color:#161616; }
.wv-lqm-sub{ margin:0 0 26px; font-size:14px; line-height:1.5; letter-spacing:.4px; color:rgba(22,22,22,.6); }
.wv-lqm-sub b{ font-weight:500; color:#161616; }
.wv-lqm-hp{ position:absolute; left:-9999px; }
.wv-lqm-field{ display:block; margin-bottom:16px; }
.wv-lqm-field span{ display:block; font-size:11px; font-weight:500; letter-spacing:2px; text-transform:uppercase; color:rgba(22,22,22,.55); margin-bottom:7px; }
.wv-lqm-field input{ width:100%; background:#FFFFFF; border:1px solid rgba(22,22,22,.16); border-radius:2px; padding:12px 14px; font-family:var(--wv-font); font-size:15px; color:#161616; }
.wv-lqm-field input:focus{ outline:none; border-color:#161616; }
.wv-lqm-field input.is-invalid{ border-color:#161616; box-shadow:0 0 0 1px #161616 inset; }
.wv-lqm-err{ margin:0 0 14px; font-size:13px; color:#161616; font-weight:500; letter-spacing:.3px; }
.wv-lqm-submit{ width:100%; margin-top:6px; background:#161616; color:#F2EEEB; border:none; padding:15px 20px; font-family:var(--wv-font); font-size:13px; font-weight:500; letter-spacing:2px; text-transform:uppercase; cursor:pointer; transition:opacity .2s ease; }
.wv-lqm-submit:hover{ opacity:.85; }
.wv-lqm-submit:disabled{ opacity:.5; cursor:default; }
.wv-lqm-getbtn{ display:inline-flex; align-items:center; gap:14px; margin-top:22px; background:#161616; color:#F2EEEB; padding:15px 26px; font-size:13px; font-weight:500; letter-spacing:2px; text-transform:uppercase; text-decoration:none; transition:opacity .2s ease; }
.wv-lqm-getbtn:hover{ opacity:.85; }

/* ============================================================
   Editorial spacing — more generous rhythm on the story pages.
   ============================================================ */
body.willow-tpl-about [data-team],
body.willow-tpl-about [data-cta],
body.willow-tpl-contact [data-enquiry],
body.willow-tpl-contact [data-visit]{ padding-top:170px; padding-bottom:170px; }
body.willow-tpl-about [data-team-grid]{ gap:44px; }

@media (max-width:900px){
  body.willow-tpl-about [data-team],
  body.willow-tpl-about [data-cta],
  body.willow-tpl-contact [data-enquiry],
  body.willow-tpl-contact [data-visit]{ padding-top:88px; padding-bottom:88px; }
}

/* Reduced motion: hold everything still. */
@media (prefers-reduced-motion:reduce){
  .wv-scrollbar{ display:none; }
  [data-zoom] image-slot, [data-zoom] img,
  [data-hero-img] image-slot, [data-team-card] image-slot,
  .wv-rr-card .wv-rr-thumb image-slot,
  .wv-splitcard-img image-slot, .wv-lq-img image-slot,
  [data-bio-portrait] image-slot, .tmrec-img image-slot, .wv-formsplit-img,
  .wv-arrow, [data-path-arrow]{ transition:none !important; transform:none !important; }
}

/* ============================================================
   Site-wide typographic direction (client)
   Headings → Light (300), 1.1px tracking.
   Body copy → Regular (400), 0.4px tracking.
   Forced over the templates' inline weights; the admin Design
   Editor's per-element overrides are more specific and still win,
   so anything hand-tuned there is preserved.
   ============================================================ */
.wv-home :is(h1,h2,h3,h4,h5,h6),
.wv-page :is(h1,h2,h3,h4,h5,h6){ font-weight:300 !important; letter-spacing:1.1px !important; }
.wv-home p,
.wv-page p{ font-weight:400 !important; letter-spacing:.4px !important; }
/* Pricing quote (between Sell and Manage) stays Light — beats the body=Regular
   rule above (which was quietly overriding the inline 300). */
.wv-home [data-screen-label="Pricing note"] p{ font-weight:300 !important; letter-spacing:0.2px !important; }

/* Home — 2nd section (the "boutique Adelaide agency" statement): Extra Light. */
.wv-home [data-screen-label="Local expertise"] :is(h1,h2,h3),
.wv-home [data-letter-reveal]{ font-weight:200 !important; letter-spacing:1.1px !important; }

/* ============================================================
   Client fine-tuning (typography + interactions)
   ============================================================ */
/* FAQ questions: keep every question Regular (400), uniform across the grid. */
[data-faq] > span:first-child{ font-weight:400 !important; }

/* Why-Willow (Selling / Manage): the big quote heading → Light. */
[data-quote]{ font-weight:300 !important; }
[data-why-mobile] blockquote{ font-weight:300 !important; }

/* Letter-reveal spans: render each glyph uniformly (no per-letter size drift). */
[data-letter-reveal] .wv-ltr{ display:inline; }

/* FAQ mobile robustness: keep the question wrapping inside the button and
   keep closed answers at zero height (prevents off-screen text + tall gaps). */
[data-faq-grid] > div{ min-width:0; }
button[data-faq]{ width:100%; }
button[data-faq] > span:first-child{ min-width:0 !important; flex:1 1 auto; white-space:normal; overflow-wrap:anywhere; word-break:break-word; }
button[data-faq]:not(.is-open) + div{ max-height:0 !important; opacity:0 !important; overflow:hidden !important; }

/* Form validation — invalid fields (brand palette: charcoal, no red).
   The inline status line carries the reason; fields darken + shake. */
input.is-invalid, textarea.is-invalid, select.is-invalid,
[data-field].is-invalid input, [data-field].is-invalid textarea, [data-field].is-invalid select,
.willow-form-row.is-invalid input, .willow-form-row.is-invalid textarea{ border-color:#282018 !important; }
[data-field].is-invalid{ border-bottom-color:#282018 !important; }
@keyframes wvFieldShake{ 10%,90%{transform:translateX(-1px)} 30%,70%{transform:translateX(-2px)} 50%{transform:translateX(2px)} }
input.is-invalid, textarea.is-invalid, select.is-invalid{ animation:wvFieldShake .35s ease; }

/* ============================================================
   404 — page not found (Willow charcoal, single-line headline)
   ============================================================ */
.wv-404{ background:var(--wv-dark); }
.wv-404-stage{ position:relative; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:140px 6.5vw 90px; background:var(--wv-dark); color:var(--wv-cream); overflow:hidden; letter-spacing:1.1px; }
.wv-404-ghost{ position:absolute; top:50%; left:50%; transform:translate(-50%,-46%); font-family:var(--wv-font); font-weight:200; font-size:clamp(240px,42vw,520px); line-height:1; color:rgba(242,238,235,.04); pointer-events:none; user-select:none; }
.wv-404-content{ position:relative; z-index:2; max-width:680px; }
.wv-404-eyebrow{ font-size:12px; font-weight:500; letter-spacing:3px; text-transform:uppercase; color:rgba(242,238,235,.5); margin-bottom:28px; }
.wv-404-rule{ display:block; width:44px; height:1px; background:rgba(242,238,235,.4); margin:0 auto 28px; }
.wv-404-title{ font-family:var(--wv-font); font-weight:200; font-size:clamp(38px,6vw,72px); line-height:1.02; letter-spacing:1.1px; color:var(--wv-cream); margin:0 0 24px; white-space:nowrap; }
.wv-404-sub{ font-size:18px; font-weight:300; line-height:1.7; letter-spacing:.4px; color:rgba(242,238,235,.66); max-width:520px; margin:0 auto 44px; }
.wv-404-actions{ display:flex; gap:18px 26px; flex-wrap:wrap; align-items:center; justify-content:center; }
.wv-404-btn{ display:inline-flex; align-items:center; gap:14px; background:var(--wv-cream); color:var(--wv-black); font-size:13px; font-weight:500; letter-spacing:2.5px; text-transform:uppercase; padding:17px 34px; border-radius:2px; }
.wv-404-lnk{ display:inline-flex; align-items:center; gap:12px; color:var(--wv-cream); font-size:13px; font-weight:500; letter-spacing:2.5px; text-transform:uppercase; border-bottom:1px solid rgba(242,238,235,.4); padding-bottom:7px; }
@media (max-width:640px){
  .wv-404-title{ white-space:normal; font-size:34px; }
  .wv-404-stage{ padding:120px 22px 70px; }
  .wv-404-actions{ flex-direction:column; gap:20px; }
}

/* ============================================================
   Solid-black body copy, form-field labels & headings (site-wide)
   ------------------------------------------------------------
   Request: make all text solid black EXCEPT eyebrows and sublines.
   - Targets block prose + form labels + headings only, so the many
     un-classed inline eyebrows (rendered as <span>/<div>) stay muted.
   - Hero regions are excluded, which keeps the hero *sublines* muted
     AND leaves the dark home hero's cream text intact.
   - The remaining dark sections (Testimonials, Values, Full-bleed,
     Footer, 404) and the editorial pull-quote are excluded, so their
     cream / designed colours are untouched.
   - !important is required to beat the inline muted charcoal colours
     baked into the page templates. Solid = Willow black #161616.
   Old Safari (<15.4) without complex :not() simply keeps today's look
   (the rule is ignored, nothing breaks).
   ============================================================ */
:is(.wv-page, .wv-home)
  :is(h1, h2, h3, h4, h5, h6, p, li, dd, dt, blockquote, figcaption, address, th, td, label, .ofx-label)
  :not([data-screen-label="Hero"] *)
  :not([data-screen-label="Alerts hero"] *)
  :not([data-screen-label="Terms hero"] *)
  :not([data-screen-label="Privacy hero"] *)
  :not([data-screen-label="Testimonials"] *)
  :not([data-screen-label="Values"] *)
  :not([data-screen-label="Full-bleed image"] *)
  :not([data-screen-label="Pricing note"] *)
  :not(.wv-why *)
  :not([data-screen-label="Footer"] *)
  :not(.wv-404 *)
  :not(.wv-lq *)
  :not(.wv-lqm *)
  :not(.apr-hero-lead)
  :not(.eyebrow){
    color:#161616 !important;
}

/* ============================================================
   Why Willow — shared static five-column section (Sell + Manage)
   White, non-interactive. One typeface (Forma DJR Banner). 0.5px tracking.
   ============================================================ */
.wv-why{ background:#FFFFFF; padding:150px 5vw 170px; letter-spacing:.5px; }
.wv-why *{ font-family:var(--wv-font); }
.wv-why-panel{ max-width:1420px; margin:0 auto; }
.wv-why-intro{ display:flex; gap:80px; align-items:flex-end; margin-bottom:110px; }
.wv-why-intro-l{ flex:1 1 auto; min-width:0; }
.wv-why-intro-r{ flex:0 0 380px; max-width:380px; }
.wv-why-eyebrow{ display:block; font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:3px; color:rgba(22,22,22,.45); margin-bottom:24px; }
.wv-why-head{ margin:0; font-weight:300; font-size:46px; line-height:1.04; letter-spacing:.5px; color:#161616; text-wrap:pretty; }
.wv-why-sub{ display:block; margin-top:4px; font-weight:200; color:rgba(22,22,22,.35); }
.wv-why-lead{ margin:0; max-width:380px; font-size:14px; font-weight:300; line-height:1.85; letter-spacing:.5px; color:rgba(22,22,22,.6); text-wrap:pretty; }
.wv-why-row{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:44px; align-items:start; }
.wv-why-item{ min-width:0; }
.wv-why-principle{ display:block; font-size:27px; font-weight:300; line-height:1.08; letter-spacing:.5px; color:#161616; text-wrap:pretty; }
.wv-why-rule{ display:block; height:1px; background:rgba(22,22,22,.3); margin:26px 0 30px; }
.wv-why-commit{ margin:0; font-size:16px; font-weight:400; line-height:1.32; letter-spacing:.5px; color:#161616; text-wrap:pretty; }
.wv-why-support{ margin:14px 0 0; font-size:13.5px; font-weight:300; line-height:1.78; letter-spacing:.5px; color:rgba(22,22,22,.62); text-wrap:pretty; }

/* Tablet / small laptop — five columns become three (items 4-5 wrap) */
@media (max-width:1200px){
  .wv-why{ padding:100px 5vw 120px; }
  .wv-why-intro{ gap:56px; margin-bottom:70px; }
  .wv-why-intro-r{ flex-basis:320px; max-width:320px; }
  .wv-why-head{ font-size:34px; }
  .wv-why-row{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px 34px; }
  .wv-why-principle{ font-size:24px; }
  .wv-why-commit{ font-size:15px; }
  .wv-why-support{ font-size:13px; }
}
/* Phone — single column */
@media (max-width:640px){
  .wv-why{ padding:72px 22px 88px; }
  .wv-why-intro{ flex-direction:column; align-items:flex-start; gap:34px; margin-bottom:56px; }
  .wv-why-intro-r{ flex-basis:auto; max-width:none; width:100%; }
  .wv-why-head{ font-size:28px; }
  .wv-why-row{ grid-template-columns:1fr; gap:44px; }
  .wv-why-principle{ font-size:26px; }
  .wv-why-rule{ margin:18px 0 20px; }
}

/* --- Uniform sizing for repeated list components ---
   FAQ questions and Why-Willow item lines MUST render at one size across
   every item. If a stray per-element Design Editor override lands on a single
   item (e.g. one FAQ question bumped larger, or one Why-Willow support line
   left at the old default), it breaks that uniformity. These rules are scoped
   by the section id, so their id-level specificity outranks the editor's
   class/nth-of-type overrides (printed at wp_head:99) and every item matches.
   Static CSS in <head> = no flash. */
#wv-faq [data-faq] > span:first-child{ font-size:19px !important; }
#wv-why .wv-why-support{ font-size:16px !important; }
@media (max-width:640px){
  #wv-why .wv-why-support{ font-size:15px !important; }
}

/* Scroll reveals — gated on .wv-why-anim so it renders final if JS is off */
.wv-why.wv-why-anim [data-wv-why-intro],
.wv-why.wv-why-anim [data-wv-why-item]{ opacity:0; transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.wv-why.wv-why-anim [data-wv-why-intro]{ transform:translateY(28px); }
.wv-why.wv-why-anim [data-wv-why-item]{ transform:translateY(40px); }
.wv-why.wv-why-anim [data-wv-why-intro].is-in,
.wv-why.wv-why-anim [data-wv-why-item].is-in{ opacity:1; transform:none; }
.wv-why.wv-why-anim [data-wv-why-item]:nth-child(1).is-in{ transition-delay:0s; }
.wv-why.wv-why-anim [data-wv-why-item]:nth-child(2).is-in{ transition-delay:.1s; }
.wv-why.wv-why-anim [data-wv-why-item]:nth-child(3).is-in{ transition-delay:.2s; }
.wv-why.wv-why-anim [data-wv-why-item]:nth-child(4).is-in{ transition-delay:.3s; }
.wv-why.wv-why-anim [data-wv-why-item]:nth-child(5).is-in{ transition-delay:.4s; }
@media (prefers-reduced-motion:reduce){
  .wv-why [data-wv-why-intro], .wv-why [data-wv-why-item]{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ============================================================
   Wide screens: content should fill the screen like the full-width
   heroes — not sit in a narrow centred column. The section's own
   ~6.5vw side gutters define the width, so content spans the same
   extent as the hero images. Only the layout CONTAINER wrappers are
   released; per-element text caps (paragraphs, headings, CTAs) keep
   their own max-widths for readability. Under 1280px nothing changes.
   ============================================================ */
@media (min-width:1280px){
  .wv-page [style*="max-width:1180px"],
  .wv-home [style*="max-width:1180px"],
  .wv-splitcard,
  .wv-why-panel,
  .wv-rr-inner{
    max-width:none !important;
  }
}

/* ============================================================
   Split form layout — image-slot beside the form on the five
   form pages (sell/rental appraisal, sales/rental alerts,
   contact enquiry). Heading spans full width on top; image and
   form sit in equal 50/50 columns at matching height, minimum
   gap. Image side is controlled by markup order per page.
   ============================================================ */
.wv-formhead{ margin:0 0 clamp(30px,4vw,54px); }
.wv-formhead h2{ max-width:none !important; }
@media (min-width:901px){
  /* Heading runs across on one line on desktop. */
  .wv-formhead h2{ white-space:nowrap; }
}
.wv-formsplit{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; }
.wv-formsplit > .wv-formsplit-img{ display:block; width:100%; height:100%; min-height:100%; align-self:stretch; background:#161616; }
.wv-formsplit > .wv-formsplit-form{ min-width:0; align-self:stretch; }
/* Form column boxed to read like the reference (image | form box). */
.wv-formsplit-panel{ background:#FFFFFF; border:1px solid rgba(22,22,22,.14);  padding:clamp(26px,3vw,46px); height:100%; }
@media (max-width:900px){
  .wv-formsplit{ grid-template-columns:1fr; gap:22px; }
  /* Photo always on top when stacked, regardless of desktop side. */
  .wv-formsplit > .wv-formsplit-img{ order:-1; min-height:300px; }
}

/* ============================================================
   Asymmetric feature — a photo running off one edge with the
   text in a narrow column (Sell image-left, Manage --rev image-right).
   ============================================================ */
.wv-asym{ display:grid; grid-template-columns:1.5fr 1fr; align-items:stretch; min-height:82vh; background:#F2EEEB; }
.wv-asym-img{ overflow:hidden; }
.wv-asym-img image-slot, .wv-asym-img img{ width:100%; height:100%; display:block; }
.wv-asym-txt{ display:flex; flex-direction:column; justify-content:center; padding:0 6.5vw 0 8vw; }
.wv-asym-txt h2{ margin:0; font-family:var(--wv-font); font-weight:300; font-size:clamp(30px,3.4vw,46px); line-height:1.08; letter-spacing:1px; color:#161616; max-width:14ch; }
.wv-asym-txt p{ margin:30px 0 0; max-width:36ch; font-size:18px; font-weight:300; line-height:1.75; letter-spacing:.5px; color:rgba(40,32,24,.7); }
.wv-asym-txt a{ margin-top:56px; display:inline-flex; align-items:center; gap:16px; font-size:13px; font-weight:500; letter-spacing:2.5px; text-transform:uppercase; color:#161616; }
.wv-asym-txt a:hover{ opacity:.6; }
/* Mirror: image on the right — keep the image on the wide track, text narrow,
   and put the text's outer edge on the page's 6.5vw margin so it lines up with
   the hero/serif above it. */
.wv-asym.wv-asym--rev{ grid-template-columns:1fr 1.5fr; }
.wv-asym.wv-asym--rev .wv-asym-img{ order:2; }
.wv-asym.wv-asym--rev .wv-asym-txt{ order:1; padding:0 8vw 0 6.5vw; }
@media (max-width:900px){
  .wv-asym, .wv-asym.wv-asym--rev{ grid-template-columns:1fr; min-height:0; }
  .wv-asym-img, .wv-asym.wv-asym--rev .wv-asym-img{ order:-1; height:52vh; min-height:340px; }
  .wv-asym-txt, .wv-asym.wv-asym--rev .wv-asym-txt{ order:1; padding:64px 7vw 80px; }
}

/* Google Places address autocomplete dropdown (appraisal forms) — brand-matched:
   charcoal ink on white, cream hover, no default blue. The Google attribution
   in the corner is kept (required by the Places terms). */
.pac-container{ background:#FFFFFF; border:1px solid rgba(22,22,22,.16); border-top:none; border-radius:0; box-shadow:0 20px 44px rgba(22,22,22,.16); margin-top:2px; font-family:'Forma DJR Text','Helvetica Neue',Arial,sans-serif; z-index:100000; }
.pac-item{ padding:11px 15px; border-top:1px solid rgba(22,22,22,.07); font-size:14px; line-height:1.4; letter-spacing:.3px; color:rgba(22,22,22,.66); cursor:pointer; }
.pac-item:hover, .pac-item-selected{ background:#F2EEEB; }
.pac-item-query{ font-size:14px; color:#161616; }
.pac-matched{ font-weight:600; }
.pac-icon{ display:none; }
.pac-logo:after{ opacity:.5; }