/* ==========================================================================
ACRE & BEAM GROUP: site.css ("Measured Ground, elevated")
Brand colors, tints, type scale, radii and shadows live in tokens.css.
Edit that file first. This file only uses those tokens.
HOW THIS FILE IS ORGANIZED (search for the number):
00 Base & reset 10 Header & mobile menu 20 Stats
01 Typography 11 Footer & mobile bar 21 Bento tiles & cards
02 Layout & sections 12 Hero 22 Timeline & steps
03 Section heads/eyebrow 13 Buttons & links 23 Owner block, lists, checks
04 Light/dark contexts 14 Gallery, pills, quote 24 Listings & reviews
05 Texture & ruler motif 15 FAQ 25 Tables
06 Utilities 16 Forms & booking 26 Before/after slider
07 Motion & reveal 17 Panels, callouts, chips 27 Call dialog
08 Image slots & photos 18 Sticky split layout 28 Responsive tweaks
========================================================================== */
/* 00 BASE & RESET --------------------------------------------------------- */
:root{
/* Icons drawn with CSS masks (so they take the current text color) */
--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
--check-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23AA6952'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 8.8' fill='none' stroke='%23F4F1E9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--check-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23CAA294'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 8.8' fill='none' stroke='%23102822' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--check:var(--check-light);
--arrows-lr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F1E9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5M3 12h18'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h-solid) + 1rem);-webkit-text-size-adjust:100%;interpolate-size:allow-keywords}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs-body)/var(--lh-body) var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg{max-width:100%}
img,video{display:block;height:auto}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
::selection{background:var(--color-evergreen);color:var(--color-ivory)}
html.menu-open{overflow:hidden}
/* 01 TYPOGRAPHY ----------------------------------------------------------- */
h1,h2,h3,h4{margin:0 0 var(--space-2);color:inherit;text-wrap:balance}
h1{font-size:var(--fs-h1);font-weight:800;line-height:1.02;letter-spacing:-.03em}
h2{font-size:var(--fs-h2);font-weight:750;line-height:1.08;letter-spacing:-.025em}
h3{font-size:var(--fs-h3);font-weight:700;line-height:1.25;letter-spacing:-.01em}
h4{font-size:1.0625rem;font-weight:700;line-height:1.3}
p,ul,ol{margin:0 0 var(--space-2);max-width:var(--measure)}
a{color:inherit;text-decoration-color:var(--rule);text-decoration-thickness:2px;text-underline-offset:.22em;transition:text-decoration-thickness .15s}
a:hover{text-decoration-thickness:3px}
strong{font-weight:700}
.lead{font-size:var(--fs-lead);font-weight:500;line-height:1.55}
.fine{font-size:var(--fs-small);line-height:1.5}
.muted{color:var(--fg-muted)}
.accent{color:var(--accent)} /* two-tone headline phrase. Large type only. */
/* 02 LAYOUT & SECTIONS ---------------------------------------------------- */
.wrap{width:100%;max-width:calc(var(--max) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.section{position:relative;isolation:isolate;padding-block:var(--section-y);background:var(--section-bg,var(--bg));color:var(--fg)}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}
.section--light{--section-bg:var(--color-ivory)}
.section--white{--section-bg:var(--color-white);--card:var(--color-ivory)}
.section--mineral{--section-bg:var(--color-mineral);--fg-muted:var(--color-evergreen);--accent:var(--color-evergreen);--rule:var(--color-clay);--line:rgba(24,61,53,.22);--card:var(--color-white);--card-line:transparent}
.section--dark{--section-bg:var(--color-evergreen)}
.section--deep{--section-bg:var(--evergreen-deep)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,4rem);align-items:center}
.grid-2--top{align-items:start}
.card-grid{display:grid;gap:clamp(1rem,1.8vw,1.5rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.card-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.mt-3{margin-top:var(--space-3)}.mt-4{margin-top:var(--space-4)}.mt-5{margin-top:var(--space-5)}
/* 03 SECTION HEADS & EYEBROW ---------------------------------------------- */
.section-head{max-width:48rem;margin-bottom:clamp(2.25rem,4.5vw,3.75rem)}
.section-head h2{margin-bottom:1.25rem}
.eyebrow{display:inline-flex;align-items:center;gap:.8rem;margin:0 0 1.25rem;max-width:none;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.16em;line-height:1.3;text-transform:uppercase;color:var(--fg)}
.eyebrow::before{content:"";flex:none;width:2rem;height:2px;background:var(--rule)}
.rule-short{display:block;width:3.5rem;height:3px;margin:0 0 1.5rem;border-radius:2px;background:var(--rule)}
.section-intro{max-width:44rem;margin:0;font-size:var(--fs-lead);color:var(--fg-muted)}
/* 04 LIGHT / DARK CONTEXTS ------------------------------------------------
Components read the semantic variables (--fg, --accent, --line, --card ...).
Dark surfaces simply re-point them, so no component needs a dark variant. */
.section--dark,.section--deep,.hero,.site-footer,.on-dark{
--fg:var(--color-ivory);--fg-muted:var(--color-mineral);--accent:var(--clay-soft);--rule:var(--clay-soft);
--line:rgba(244,241,233,.18);--card:rgba(244,241,233,.05);--card-line:rgba(244,241,233,.16);--focus:var(--color-ivory);--check:var(--check-dark);
}
.section--mineral .accent{background:linear-gradient(transparent 84%,var(--color-clay) 84% 94%,transparent 94%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* 05 TEXTURE & RULER MOTIF -------------------------------------------------
A faint blueprint grid plus a "measure" ruler edge, echoing the Equal Measure mark. */
.section--dark::before,.section--deep::before,.hero--plain::before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:
linear-gradient(rgba(244,241,233,.05) 1px,transparent 1px) 0 0/72px 72px,
linear-gradient(90deg,rgba(244,241,233,.05) 1px,transparent 1px) 0 0/72px 72px;
-webkit-mask-image:radial-gradient(110% 100% at 88% 0%,#000 0%,transparent 72%);mask-image:radial-gradient(110% 100% at 88% 0%,#000 0%,transparent 72%);
}
.section--dark::after,.section--deep::after,.hero--plain::after{
content:"";position:absolute;left:var(--gutter);right:var(--gutter);top:0;height:14px;pointer-events:none;opacity:.55;
background:
repeating-linear-gradient(90deg,rgba(244,241,233,.55) 0 1px,transparent 1px 60px) 0 0/100% 14px no-repeat,
repeating-linear-gradient(90deg,rgba(244,241,233,.4) 0 1px,transparent 1px 12px) 0 0/100% 7px no-repeat;
}
.hero--plain::after{top:auto;bottom:0;transform:scaleY(-1)}
.site-footer::after{display:none}
/* 06 UTILITIES ------------------------------------------------------------ */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;z-index:100}
.skip:focus{left:1rem;top:1rem;padding:.75rem 1.25rem;border-radius:var(--radius-pill);background:var(--color-evergreen);color:var(--color-ivory);font-weight:700}
.todo{background:#ffeb3b;color:#000;padding:0 .25em;border-radius:3px}
.br-lg{display:none}
@media(min-width:700px){.br-lg{display:inline}}
/* 07 MOTION & REVEAL ------------------------------------------------------ */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes drift{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(24,61,53,.35)}60%{box-shadow:0 0 0 .45rem rgba(24,61,53,0)}}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.reveal-ready [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.reveal-ready [data-reveal].is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.reveal-ready [data-reveal]{opacity:1;transform:none}
}
/* 08 IMAGE SLOTS & PHOTOS -------------------------------------------------
Every photo is a real ![]()
. If its file is missing, site.js swaps in a labelled slot. */
.photo{display:block;width:100%;height:auto;object-fit:cover;border-radius:var(--radius-lg)}
.zoom{position:relative;overflow:hidden;border-radius:var(--radius-lg)}
.zoom img,.zoom .img-slot{transition:transform var(--dur) var(--ease)}
.zoom:hover img,a:hover>.zoom img{transform:scale(1.03)}
.img-slot{display:flex;align-items:flex-end;padding:.85rem 1rem;border-radius:var(--radius-lg);background:var(--mineral-soft);color:var(--color-evergreen);font-size:.75rem;font-weight:600;overflow-wrap:anywhere}
.stock-note{margin-top:var(--space-2);font-size:var(--fs-small);color:var(--fg-muted)}
/* 10 HEADER & MOBILE MENU -------------------------------------------------
Without JS: a solid, sticky ivory bar. With JS (.js): fixed and transparent over the
hero, turning solid ivory with blur after ~40px of scroll (class .is-solid). */
.site-header{--hdr-fg:var(--color-evergreen);--hdr-rule:var(--color-clay);--focus:var(--color-evergreen);position:sticky;top:0;z-index:60;isolation:isolate;color:var(--hdr-fg);transition:box-shadow .35s var(--ease)}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(244,241,233,.97);border-bottom:1px solid var(--color-mineral);transition:opacity .35s var(--ease)}
@supports((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.site-header::before{background:rgba(244,241,233,.84);-webkit-backdrop-filter:saturate(1.3) blur(16px);backdrop-filter:saturate(1.3) blur(16px)}
}
.js .site-header{position:fixed;left:0;right:0}
.js .site-header:not(.is-solid){--hdr-fg:var(--color-ivory);--hdr-rule:var(--clay-soft);--focus:var(--color-ivory)}
.js .site-header:not(.is-solid)::before{opacity:0}
.js .site-header.is-solid{box-shadow:0 10px 30px rgba(16,40,34,.08)}
.js .site-header.menu-open{--hdr-fg:var(--color-ivory);--hdr-rule:var(--clay-soft);--focus:var(--color-ivory);box-shadow:none}
.js .site-header.menu-open::before{opacity:0}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;height:var(--hdr-h);transition:height .35s var(--ease)}
.js .site-header.is-solid .bar{height:var(--hdr-h-solid)}
.logo{display:inline-flex;align-items:center;flex:none;min-height:44px;line-height:0;text-decoration:none}
.logo img{width:clamp(11rem,16vw,14.5rem);height:auto;transition:width .35s var(--ease)}
.js .site-header.is-solid .logo img{width:clamp(10rem,13vw,12.5rem)}
.logo-light{display:none}
.js .site-header:not(.is-solid) .logo-light,.js .site-header.menu-open .logo-light{display:block}
.js .site-header:not(.is-solid) .logo-dark,.js .site-header.menu-open .logo-dark{display:none}
.nav{display:flex;align-items:center}
.nav-list{display:flex;align-items:center;gap:clamp(1.1rem,2vw,2rem);margin:0;padding:0;max-width:none;list-style:none}
.nav a:not(.btn){position:relative;display:inline-block;padding:.75rem 0;color:var(--hdr-fg);font-size:.9375rem;font-weight:650;text-decoration:none;white-space:nowrap}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:.5rem;height:3px;border-radius:2px;background:var(--hdr-rule);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:not(.btn):hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav-extras{display:none}
.nav-cta .btn{--btn-bg:var(--color-evergreen);--btn-fg:var(--color-ivory);--btn-bd:var(--color-evergreen)}
.nav-cta .btn:hover{--btn-bg:var(--evergreen-deep);--btn-bd:var(--evergreen-deep)}
.js .site-header:not(.is-solid) .nav-cta .btn{--btn-bg:var(--color-ivory);--btn-fg:var(--color-evergreen);--btn-bd:var(--color-ivory)}
.js .site-header:not(.is-solid) .nav-cta .btn:hover{--btn-bg:var(--color-white);--btn-bd:var(--color-white)}
.call-icon{display:none;place-items:center;flex:none;width:44px;height:44px;margin-left:auto;border:1.5px solid currentColor;border-radius:50%;color:var(--hdr-fg)}
.call-icon svg{width:21px;height:21px}
.nav-toggle{display:none;align-items:center;justify-content:center;min-height:44px;padding:0 1.15rem;border:1.5px solid currentColor;border-radius:var(--radius-pill);background:transparent;color:var(--hdr-fg);font:700 .9375rem var(--font-sans);cursor:pointer}
html:not(.js) .bar{height:auto;flex-wrap:wrap;padding-block:.75rem}
@media(max-width:1099px){
.call-icon{display:inline-grid}
.js .nav-toggle{display:inline-flex}
.nav-cta{display:none}
html:not(.js) .nav{width:100%}
html:not(.js) .nav-list{flex-wrap:wrap;gap:.25rem 1.25rem}
.js .nav{position:fixed;inset:0;z-index:-1;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:1.75rem;padding:calc(var(--hdr-h) + 1rem) var(--gutter) calc(2rem + env(safe-area-inset-bottom));overflow-y:auto;background:var(--evergreen-deep);visibility:hidden;opacity:0;transform:translateY(-10px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s}
.js .nav.open{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.js .nav-list{flex-direction:column;align-items:stretch;gap:0;width:100%}
.js .nav-list li{border-bottom:1px solid rgba(244,241,233,.16)}
.js .nav a:not(.btn){display:block;padding:.95rem 0;font-size:clamp(1.35rem,5.4vw,1.9rem);font-weight:700;letter-spacing:-.01em;white-space:normal}
.js .nav a:not(.btn)::after{bottom:.55rem;right:auto;width:2.5rem}
.js .nav-extras{display:grid;gap:.75rem}
}
@media(max-width:1099px) and (min-width:700px){.js .nav-extras{grid-template-columns:1fr 1fr}}
/* 11 FOOTER & MOBILE BAR -------------------------------------------------- */
.site-footer{position:relative;isolation:isolate;padding-top:clamp(3rem,5vw,4.5rem);border-top:1px solid rgba(244,241,233,.14);background:var(--evergreen-deep);color:var(--color-ivory)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:clamp(2rem,4vw,4rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
.footer-brand .logo img{width:clamp(12rem,18vw,15rem)}
.footer-tag{margin:1.5rem 0 .5rem;font-size:1.3rem;font-weight:700;letter-spacing:-.01em}
.footer-sub{margin:0;color:var(--color-mineral)}
.footer-h{margin:0 0 1rem;max-width:none;color:var(--color-mineral);font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.footer-links{display:grid;gap:0;margin:0;padding:0;max-width:none;list-style:none}
.footer-links a,.footer-contact a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.footer-links a:hover,.footer-contact a:hover{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--clay-soft)}
.footer-links a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--clay-soft);text-decoration-thickness:3px}
.footer-contact{display:grid;gap:0;margin:0;font-style:normal}
.footer-contact p{margin:0;max-width:none}
.footer-contact .muted{margin-top:.35rem}
.footer-legal{padding-block:1.75rem 2.25rem;border-top:1px solid rgba(244,241,233,.16)}
.disclosure{max-width:62rem;margin:0 0 1rem;color:var(--color-mineral);font-size:var(--fs-small);line-height:1.6}
.footer-legal .fine{margin:0;max-width:none;color:var(--color-mineral)}
.mobile-bar{display:none}
@media(max-width:700px){
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:grid;grid-template-columns:1fr 1fr 1.25fr;padding-bottom:env(safe-area-inset-bottom);background:var(--evergreen-deep);border-top:1px solid rgba(244,241,233,.22)}
.mobile-bar a{display:flex;align-items:center;justify-content:center;min-height:var(--mobile-bar-h);color:var(--color-ivory);font-size:.9375rem;font-weight:700;text-decoration:none}
.mobile-bar a+a{border-left:1px solid rgba(244,241,233,.22)}
.mobile-bar a:last-child{background:var(--color-ivory);color:var(--color-evergreen)}
.mobile-bar :focus-visible{outline-offset:-4px}
.site-footer{padding-bottom:calc(var(--mobile-bar-h) + env(safe-area-inset-bottom))}
}
/* 12 HERO -----------------------------------------------------------------
.hero--home full-viewport homepage hero with a stat strip pinned to the bottom
.hero--page shorter (about 65vh) image hero for inner pages
.hero--plain textured evergreen hero, for pages with no photo */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;background:var(--evergreen-deep);color:var(--color-ivory)}
.hero--page{min-height:clamp(26rem,66vh,46rem);min-height:clamp(26rem,66svh,46rem);justify-content:flex-end}
.hero--page h1{font-size:var(--fs-h1-page);line-height:1.04}
.hero__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;border-radius:0}
.hero__shade{position:absolute;inset:0;z-index:-1;pointer-events:none;
background:
linear-gradient(to bottom,rgba(16,40,34,.62) 0%,rgba(16,40,34,0) 26%),
linear-gradient(to top,rgba(16,40,34,.82) 0%,rgba(16,40,34,0) 40%),
linear-gradient(98deg,rgba(16,40,34,.94) 0%,rgba(16,40,34,.86) 46%,rgba(24,61,53,.66) 76%,rgba(24,61,53,.5) 100%)}
.hero__inner{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-top:calc(var(--hdr-h) + clamp(2rem,6vh,4rem));padding-bottom:clamp(2.5rem,6vh,4.5rem)}
.hero--page .hero__inner{flex:0 0 auto;justify-content:flex-end;padding-top:calc(var(--hdr-h) + 3rem);padding-bottom:clamp(2.5rem,6vw,4.5rem)}
.hero h1{max-width:15ch}
.hero--page h1{max-width:20ch}
.hero__lead{max-width:36rem;margin:1.5rem 0 2.25rem;font-size:var(--fs-lead);font-weight:500;line-height:1.55;color:var(--color-ivory)}
.hero .chips{margin:0 0 2rem}
.hero--plain::before{z-index:0}
.hero--plain .hero__inner{position:relative;z-index:1}
.hero__stats{border-top:1px solid rgba(244,241,233,.2);background:linear-gradient(to top,rgba(16,40,34,.94),rgba(16,40,34,.72))}
.scroll-cue{position:absolute;right:var(--gutter);bottom:calc(100% + 1.75rem);display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:.9rem .45rem;border-radius:var(--radius-pill);background:rgba(16,40,34,.78);color:var(--color-ivory);font-size:.6875rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;writing-mode:vertical-rl}
.scroll-cue::after{content:"";width:1px;height:3.5rem;background:var(--color-ivory);animation:cue 2.4s var(--ease) infinite}
.hero__stats{position:relative}
@media(prefers-reduced-motion:no-preference){
.hero__img{animation:drift 2.4s var(--ease) both}
.hero__inner>*{animation:rise .9s var(--ease) both}
.hero__inner>:nth-child(2){animation-delay:.08s}.hero__inner>:nth-child(3){animation-delay:.16s}
.hero__inner>:nth-child(4){animation-delay:.24s}.hero__inner>:nth-child(5){animation-delay:.32s}
}
@media(max-width:800px){
.hero__shade{background:linear-gradient(to bottom,rgba(16,40,34,.7) 0%,rgba(16,40,34,.8) 50%,rgba(16,40,34,.92) 100%)}
.scroll-cue{display:none}
.hero h1,.hero--page h1{max-width:none}
}
/* 13 BUTTONS & LINKS ------------------------------------------------------ */
.btn{--btn-bg:var(--color-evergreen);--btn-fg:var(--color-ivory);--btn-bd:var(--color-evergreen);
display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:52px;padding:.5rem 1.75rem;border:2px solid var(--btn-bd);border-radius:var(--radius-pill);background:var(--btn-bg);color:var(--btn-fg);font:700 1rem/1.2 var(--font-sans);letter-spacing:.005em;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s,box-shadow .25s}
.btn::after{content:"";flex:none;width:1.15em;height:1.15em;background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;transition:transform .25s var(--ease)}
.btn:hover{--btn-bg:var(--evergreen-deep);--btn-bd:var(--evergreen-deep);box-shadow:var(--shadow-2);text-decoration:none}
.btn:hover::after,.link-arrow:hover::after,a:hover>.link-arrow::after,.tile:hover .link-arrow::after,.card:hover .link-arrow::after,.booking-card:hover .btn::after{transform:translateX(4px)}
.btn--plain::after{display:none}
.btn--sm{min-height:46px;padding:.4rem 1.25rem;font-size:.9375rem}
.btn--outline{--btn-bg:transparent;--btn-fg:var(--color-evergreen);--btn-bd:var(--color-evergreen)}
.btn--outline:hover{--btn-bg:var(--color-evergreen);--btn-bd:var(--color-evergreen);--btn-fg:var(--color-ivory)}
.btn--light{--btn-bg:var(--color-ivory);--btn-fg:var(--color-evergreen);--btn-bd:var(--color-ivory)}
.btn--light:hover{--btn-bg:var(--color-white);--btn-bd:var(--color-white);--btn-fg:var(--color-evergreen)}
.btn--outline-light{--btn-bg:transparent;--btn-fg:var(--color-ivory);--btn-bd:rgba(244,241,233,.6)}
.btn--outline-light:hover{--btn-bg:rgba(244,241,233,.14);--btn-bd:var(--color-ivory);--btn-fg:var(--color-ivory);box-shadow:none}
.btn-row{width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem}
.link-arrow{position:relative;display:inline-flex;align-items:center;gap:.5rem;font-weight:700;text-decoration:none}
.link-arrow::before,.quote__src::before,.review-src::before{content:"";position:absolute;inset:-.8rem -.3rem}
.link-arrow::after{content:"";flex:none;width:1.1em;height:1.1em;background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;transition:transform .25s var(--ease)}
a.link-arrow:hover{text-decoration:underline;text-decoration-color:var(--rule);text-decoration-thickness:2px;text-underline-offset:.3em}
/* 14 GALLERY, PILLS, QUOTE ------------------------------------------------ */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.75rem,1.6vw,1.25rem);margin:0;padding:0;max-width:none;list-style:none}
.gal-item{position:relative;margin:0}
.gal-item .zoom,.gal-item .photo,.gal-item .img-slot{aspect-ratio:4/3}
.gal-item img{width:100%;height:100%}
.pill{position:absolute;left:.9rem;top:.9rem;z-index:2;display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .9rem;border:1.5px solid var(--color-clay);border-radius:var(--radius-pill);background:var(--color-ivory);color:var(--color-evergreen);font-size:.8125rem;font-weight:700;line-height:1.2;box-shadow:var(--shadow-1)}
.pill i{width:.55rem;height:.55rem;border-radius:50%;background:var(--color-evergreen);animation:pulse 2.4s infinite}
.quote{position:relative;max-width:60rem;margin:0}
.quote__mark{display:block;width:clamp(3.25rem,6vw,5rem);height:auto;margin-bottom:1.25rem;color:var(--accent)}
.quote blockquote{margin:0}
.quote blockquote p{max-width:none;margin:0;font-size:clamp(1.35rem,2.4vw,2.15rem);font-weight:500;line-height:1.4;letter-spacing:-.015em;text-wrap:pretty}
.quote figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem;margin-top:2rem;font-weight:650}
.quote .stars{display:block;margin-bottom:1.25rem}
.stars{color:var(--accent);font-size:1.25rem;letter-spacing:.16em;line-height:1}
.quote__src{position:relative;display:inline-block;font-size:var(--fs-small);font-weight:700}
.quote-wrap{margin-top:clamp(3.5rem,7vw,6rem);padding-top:clamp(3rem,6vw,5rem);border-top:1px solid var(--line)}
.h2-xl{font-size:clamp(2.5rem,6vw,4.75rem);line-height:1.04;letter-spacing:-.03em}
/* 15 FAQ ------------------------------------------------------------------ */
.faq{max-width:52rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:44px;padding:1.4rem 0;font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);font-weight:700;line-height:1.35;letter-spacing:-.005em;list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:2.25rem;height:2.25rem;border:1.5px solid currentColor;border-radius:50%;background:
linear-gradient(currentColor,currentColor) center/.9rem 2px no-repeat,
linear-gradient(currentColor,currentColor) center/2px .9rem no-repeat;transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq-body{max-width:var(--measure);padding:0 3.25rem 1.5rem 0;color:var(--fg-muted)}
.faq-body p:last-child{margin-bottom:0}
.faq details[open] .faq-body{animation:faq-in .35s var(--ease)}
@supports(selector(::details-content)){
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}
.faq details[open]::details-content{block-size:auto}
}
/* 16 FORMS & BOOKING ------------------------------------------------------ */
.form{display:grid;gap:1.1rem;max-width:40rem}
.form h2,.form h3{margin-bottom:.25rem}
.form p{margin:0}
.form label{display:block;font-size:.9375rem;font-weight:650}
.form input,.form select,.form textarea{display:block;width:100%;min-height:52px;margin-top:.45rem;padding:.75rem 1rem;border:1.5px solid var(--color-evergreen);border-radius:var(--radius);background:var(--color-white);color:var(--color-evergreen);font:400 1rem var(--font-sans);transition:box-shadow .2s,border-color .2s}
.form textarea{min-height:9rem;resize:vertical}
.form input[type=file]{padding:.85rem 1rem}
.form input[type=hidden]{display:none}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.form .btn{justify-self:start}
.form-card{padding:clamp(1.5rem,3.5vw,2.75rem);border:1px solid var(--card-line);border-radius:var(--radius-lg);background:var(--card)}
.booking-card{display:grid;gap:1.25rem;max-width:44rem;padding:clamp(1.5rem,3vw,2.25rem);border:1px solid rgba(244,241,233,.22);border-radius:var(--radius-lg);background:var(--color-evergreen);color:var(--color-ivory);box-shadow:var(--shadow-2);text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .3s}
.booking-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-3)}
.section--dark .booking-card,.section--deep .booking-card{background:rgba(244,241,233,.07);box-shadow:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.section--dark .booking-card:hover,.section--deep .booking-card:hover{background:rgba(244,241,233,.12);border-color:rgba(244,241,233,.45)}
.bk-icon{display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:var(--radius);background:var(--color-ivory);color:var(--color-evergreen)}
.bk-icon svg{width:1.6rem;height:1.6rem}
.bk-text{display:grid;gap:.4rem}
.bk-text strong{font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);font-weight:750;letter-spacing:-.01em}
.bk-text span{color:var(--color-mineral)}
.bk-btn{justify-self:start}
.contact-list{display:grid;gap:1.25rem;margin:0;padding:0;list-style:none;max-width:none}
.contact-list strong{display:block;margin-bottom:.15rem;color:var(--fg-muted);font-size:var(--fs-eyebrow);letter-spacing:.16em;text-transform:uppercase}
.contact-list a{font-size:1.25rem;font-weight:700}
/* 17 PANELS, CALLOUTS, CHIPS ---------------------------------------------- */
.panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)}
.panel{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--card-line);border-radius:var(--radius-lg);background:var(--card)}
.panel__img{border-radius:0;aspect-ratio:16/9}
.panel__body{display:flex;flex-direction:column;flex:1;gap:.25rem;padding:clamp(1.5rem,3vw,2.5rem)}
.panel__body h3{font-size:clamp(1.4rem,1.2rem + .8vw,1.9rem)}
.panel--dark{--card:var(--color-evergreen);--card-line:var(--color-evergreen);--fg:var(--color-ivory);--fg-muted:var(--color-mineral);--accent:var(--clay-soft);--rule:var(--clay-soft);--check:var(--check-dark);--focus:var(--color-ivory);color:var(--color-ivory)}
.panel .btn-row{margin-top:auto;padding-top:1.5rem}
.callout{max-width:none;padding:1.1rem 1.5rem;border-left:4px solid var(--color-clay);border-radius:0 var(--radius) var(--radius) 0;background:var(--clay-wash);color:var(--color-evergreen);font-weight:650}
.callout p{max-width:none;margin:0}
.box{max-width:none;padding:1.25rem 1.5rem;border:1.5px solid var(--color-evergreen);border-radius:var(--radius);background:var(--color-white);color:var(--color-evergreen)}
.box h3{margin-bottom:.5rem}
.box p:last-child{margin-bottom:0}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;max-width:none;margin:0 0 var(--space-3);padding:0;list-style:none}
.chips.on-dark li{background:rgba(16,40,34,.8)}
.chips li{padding:.4rem .95rem;border:1px solid var(--line);border-radius:var(--radius-pill);font-size:.8125rem;font-weight:650;line-height:1.3}
.hero .chips li{border-color:rgba(244,241,233,.4)}
.platforms{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 2.25rem;max-width:none;margin:0;padding:0;list-style:none;font-size:clamp(1.3rem,2.4vw,1.85rem);font-weight:750;letter-spacing:-.015em}
.platforms li+li{position:relative}
.platforms li+li::before{content:"";position:absolute;left:-1.35rem;top:50%;width:.4rem;height:.4rem;margin-top:-.2rem;background:var(--color-clay)}
.platforms .platforms__alt{font-weight:600}
/* 18 STICKY SPLIT LAYOUT -------------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.split__head{position:sticky;top:calc(var(--hdr-h-solid) + 2.5rem)}
.split__head .section-head{margin-bottom:0}
/* 20 STATS (proof strip) -------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;margin:0;padding:0;list-style:none}
.stat{position:relative;margin:0;padding:clamp(1.5rem,3vw,2.25rem) clamp(1rem,2.2vw,2rem);border-left:1px solid var(--line)}
.stat:first-child{padding-left:0;border-left:0}
.stat::before{content:"";display:block;width:2rem;height:3px;margin-bottom:1.1rem;border-radius:2px;background:var(--rule)}
.stat__num{margin:0;color:var(--fg);font-size:clamp(2.4rem,4.8vw,3.9rem);font-weight:800;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.stat__unit{margin-left:.2em;font-size:.38em;font-weight:700;letter-spacing:0;color:var(--fg-muted)}
.stat__label{max-width:17rem;margin:.9rem 0 0;color:var(--fg-muted);font-size:.9rem;line-height:1.45}
@media(max-width:800px){
.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.stat:nth-child(odd){padding-left:0;border-left:0}
.stat:nth-child(n+3){border-top:1px solid var(--line)}
.stat{padding-block:1.25rem}
}
/* 21 BENTO TILES & CARDS -------------------------------------------------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(.875rem,1.6vw,1.25rem)}
.tile{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-height:21rem;padding:clamp(1.5rem,3vw,2.5rem);overflow:hidden;border-radius:var(--radius-lg);color:var(--color-ivory);text-decoration:none;box-shadow:var(--shadow-1);transition:box-shadow .4s var(--ease)}
.tile--lg{grid-column:span 7;grid-row:span 2}
.tile--sm{grid-column:span 5}
.tile__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform var(--dur) var(--ease)}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(16,40,34,.95) 0%,rgba(16,40,34,.92) 50%,rgba(16,40,34,.78) 76%,rgba(16,40,34,.3) 100%)}
.tile:hover{box-shadow:var(--shadow-3)}
.tile:hover .tile__img{transform:scale(1.03)}
.tile .eyebrow{color:var(--color-ivory);--rule:var(--clay-soft)}
.tile h3{margin-bottom:.6rem;font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem);letter-spacing:-.02em}
.tile--lg h3{font-size:clamp(2rem,1.4rem + 2vw,3.1rem)}
.tile p{max-width:30rem;margin:0 0 1.25rem;color:var(--color-ivory)}
.tile .link-arrow{align-self:flex-start;padding-bottom:.15rem;border-bottom:2px solid var(--clay-soft)}
.tile .link-arrow::after{width:1.15em}
.card{position:relative;display:flex;flex-direction:column;gap:.5rem;padding:clamp(1.5rem,2.5vw,2rem);border:1px solid var(--card-line);border-radius:var(--radius-lg);background:var(--card);color:var(--fg);text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--color-evergreen)}
.card__icon{display:grid;place-items:center;width:3.25rem;height:3.25rem;margin-bottom:.9rem;border-radius:var(--radius);background:var(--mineral-soft);color:var(--color-evergreen);transition:background-color .3s,color .3s}
.card__icon svg{width:1.6rem;height:1.6rem}
.card:hover .card__icon{background:var(--color-evergreen);color:var(--color-ivory)}
.section--dark .card__icon,.section--deep .card__icon{background:rgba(244,241,233,.1);color:var(--color-ivory)}
.card h3{margin:0}
.card p{margin:0;color:var(--fg-muted)}
.card ul{margin:.5rem 0 0;padding-left:1.1rem;color:var(--fg-muted)}
.card .link-arrow{margin-top:auto;padding-top:1.1rem;color:var(--fg)}
.card .zoom,.card .photo{margin-bottom:1rem}
.feature{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.25rem;border:1px solid var(--card-line);border-radius:var(--radius);background:var(--card);font-weight:650;line-height:1.35}
.feature svg{flex:none;width:1.6rem;height:1.6rem;color:var(--color-evergreen)}
/* 22 TIMELINE & STEPS ----------------------------------------------------- */
.timeline{--p:0;--cols:3;position:relative;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:clamp(1rem,2vw,1.75rem);max-width:none;margin:0;padding:0;list-style:none}
.timeline--5{--cols:5}
.timeline--4{--cols:4}
.timeline::before,.timeline::after{content:"";position:absolute;left:0;right:0;top:.55rem;height:2px;border-radius:2px}
.timeline::before{background:var(--line)}
.timeline::after{background:var(--rule);transform-origin:left;transform:scaleX(var(--p))}
.timeline__item{position:relative;margin:0;padding-top:2.6rem}
.timeline__item::before{content:"";position:absolute;z-index:1;top:0;left:0;width:1.15rem;height:1.15rem;border:2px solid var(--rule);border-radius:50%;background:var(--section-bg,var(--bg));transition:background-color .3s}
.timeline__item.is-on::before{background:var(--rule)}
.timeline__card{height:100%;padding:clamp(1.4rem,2.4vw,2rem);border:1px solid var(--card-line);border-radius:var(--radius-lg);background:var(--card)}
.timeline__num{display:block;margin-bottom:1rem;color:var(--accent);font-size:clamp(2.4rem,4vw,3.4rem);font-weight:800;line-height:1;letter-spacing:-.03em}
.timeline__card h3{margin-bottom:.6rem}
.timeline__card p{margin:0;color:var(--fg-muted)}
.timeline__card p strong{color:var(--fg)}
.steps{display:grid;gap:clamp(1rem,1.8vw,1.5rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));max-width:none;margin:0 0 var(--space-3);padding:0;list-style:none;counter-reset:s}
.steps li{position:relative;margin:0;padding:clamp(1.4rem,2.2vw,1.9rem);border:1px solid var(--card-line);border-radius:var(--radius-lg);background:var(--card);counter-increment:s}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;margin-bottom:1rem;color:var(--accent);font-size:2.4rem;font-weight:800;line-height:1;letter-spacing:-.03em}
.steps h3{margin-bottom:.4rem;font-size:1.125rem}
.steps p{margin:0;color:var(--fg-muted)}
.steps .card__icon{margin-bottom:.9rem}
.num-cards{counter-reset:n}
.num-card{counter-increment:n}
.num-card::before{content:counter(n,decimal-leading-zero);display:block;margin-bottom:1.1rem;color:var(--accent);font-size:3rem;font-weight:800;line-height:1;letter-spacing:-.035em}
/* 23 OWNER BLOCK, LISTS, CHECKS ------------------------------------------- */
.owner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2.5rem,7vw,7rem);align-items:start}
.portrait-frame{position:relative;max-width:27rem;margin-right:1rem;z-index:0}
.portrait-frame::before{content:"";position:absolute;inset:1.1rem -1.1rem -1.1rem 1.1rem;z-index:-1;border:1.5px solid var(--rule);border-radius:var(--radius-lg)}
.portrait{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;border-radius:var(--radius-lg)}
.checklist{display:grid;gap:.9rem;max-width:none;margin:1.75rem 0;padding:0;list-style:none}
.checklist li{display:flex;align-items:flex-start;gap:.85rem;margin:0}
.checklist li::before{content:"";flex:none;width:1.4rem;height:1.4rem;margin-top:.17rem;background:var(--check) center/contain no-repeat}
.owner__note{max-width:none;margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--line);color:var(--fg-muted);font-size:.9375rem}
.owner__note strong{color:var(--fg)}
.owner__who{margin-top:1.5rem;font-weight:700}
.owner__who span{display:block;color:var(--fg-muted);font-weight:500}
/* 24 LISTINGS & REVIEWS (Property Management page) ------------------------ */
.listings{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:clamp(1rem,2vw,1.5rem)}
.listing{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--card-line);border-radius:var(--radius-lg);background:var(--card)}
.listing-img{position:relative;overflow:hidden}
.listing-img .photo,.listing-img .img-slot{width:100%;aspect-ratio:16/10;border-radius:0}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:.75rem .9rem 0}
.thumb{padding:0;border:2px solid transparent;border-radius:10px;background:none;cursor:pointer;overflow:hidden;transition:border-color .2s}
.thumb:hover,.thumb[aria-current="true"]{border-color:var(--color-clay)}
.thumb .photo,.thumb .img-slot{aspect-ratio:16/10;min-height:0;padding:.25rem;border-radius:8px;font-size:.625rem}
.listing-body{display:flex;flex-direction:column;flex:1;gap:.35rem;padding:1.25rem 1.4rem 1.5rem}
.listing-body h3{margin:0;font-size:1.2rem}
.listing-body p{margin:0}
.listing-body .btn{align-self:flex-start;margin-top:auto}
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:clamp(1rem,2vw,1.5rem);margin-top:var(--space-4)}
.review{display:flex;flex-direction:column;margin:0;padding:clamp(1.4rem,2.4vw,1.9rem);border:1px solid var(--card-line);border-radius:var(--radius-lg);background:var(--card)}
.review blockquote{margin:.85rem 0 1.25rem}
.review blockquote p{max-width:none;margin:0;font-size:1.0625rem}
.review figcaption{margin-top:auto;font-size:.9375rem;font-weight:650}
.review-src{position:relative;display:inline-block;font-size:var(--fs-small);font-weight:600}
/* 25 TABLES --------------------------------------------------------------- */
.table-wrap{overflow:clip;border:1px solid var(--color-mineral);border-radius:var(--radius-lg);background:var(--color-white)}
.compare{width:100%;border-collapse:separate;border-spacing:0}
.compare th,.compare td{padding:1.15rem 1.4rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--color-mineral)}
.compare thead th{position:sticky;top:var(--hdr-h-solid);z-index:2;background:var(--color-evergreen);color:var(--color-ivory);font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase}
.compare tbody th{width:20%;font-weight:700}
.compare tbody tr:nth-child(even)>*{background:var(--ivory-deep)}
.compare tbody tr:last-child>*{border-bottom:0}
@media(max-width:700px){.table-wrap{overflow-x:auto}.compare{min-width:34rem}.compare thead th{position:static}}
/* 26 BEFORE / AFTER SLIDER ------------------------------------------------
Without JS the two photos sit side by side. With JS (.is-ready) they overlay, and an
invisible range input drives the reveal, so keyboard and touch work natively. */
.ba{margin:0}
.ba__stage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.ba__img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg)}
.ba__range,.ba__handle,.ba__tag{display:none}
.ba.is-ready .ba__stage{position:relative;display:block;overflow:hidden;border-radius:var(--radius-lg);aspect-ratio:4/3;--pos:50%;touch-action:pan-y;user-select:none}
.ba.is-ready .ba__img{position:absolute;inset:0;height:100%;border-radius:0}
.ba.is-ready .ba__img--before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba.is-ready .ba__range{display:block;position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.ba.is-ready .ba__handle{display:block;position:absolute;z-index:2;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--color-ivory);box-shadow:0 0 0 1px rgba(16,40,34,.25);pointer-events:none}
.ba__handle::after{content:"";position:absolute;top:50%;left:50%;width:3rem;height:3rem;margin:-1.5rem 0 0 -1.5rem;border:2px solid var(--color-ivory);border-radius:50%;background:var(--color-evergreen) var(--arrows-lr) center/1.5rem no-repeat;box-shadow:var(--shadow-2)}
.ba.is-ready .ba__range:focus-visible~.ba__handle::after{outline:3px solid var(--color-ivory);outline-offset:3px}
.ba.is-ready .ba__tag{display:block;position:absolute;z-index:2;bottom:.9rem;padding:.3rem .8rem;border-radius:var(--radius-pill);background:var(--evergreen-deep);color:var(--color-ivory);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;pointer-events:none}
.ba__tag--before{left:.9rem}.ba__tag--after{right:.9rem}
.ba figcaption{margin-top:.75rem;color:var(--fg-muted);font-size:var(--fs-small)}
/* 27 CALL DIALOG ---------------------------------------------------------- */
.call-dialog{width:calc(100% - 2rem);max-width:27rem;padding:var(--space-4);border:0;border-radius:var(--radius-lg);background:var(--color-ivory);color:var(--color-evergreen);box-shadow:var(--shadow-3)}
.call-dialog::backdrop{background:rgba(16,40,34,.7)}
.call-dialog h2{font-size:1.5rem}
.call-number{margin:0 0 var(--space-2);font-size:2.25rem;font-weight:800;letter-spacing:-.02em}
.call-links{padding:0;list-style:none}
.call-links li{margin-bottom:.5rem}
.call-links a{display:inline-flex;align-items:center;min-height:44px}
.copied{font-weight:700}
/* 28b PAGE HELPERS -------------------------------------------------------- */
.card--row{display:grid;align-content:start;grid-template-columns:auto minmax(0,1fr);column-gap:1.4rem;row-gap:.35rem;align-items:start}
.card--row .card__icon{grid-row:1 / span 2;margin:0}
.card--row h3{align-self:end}
.btn-row+.chips{margin-top:1.75rem}
.card .photo,.card .img-slot,.card video.feature-card-video{width:100%;aspect-ratio:4/3;border-radius:var(--radius);object-fit:cover}
.card video.feature-card-video{margin-bottom:1rem;background:var(--color-evergreen)}
.photo-quad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.6rem,1.4vw,1rem)}
.photo-quad .photo,.photo-quad .img-slot{aspect-ratio:4/3;width:100%;border-radius:var(--radius)}
.photo-trio--wide .photo,.photo-trio--wide .img-slot{aspect-ratio:4/3}
.card .btn-row{margin-top:1.25rem}
.banner .photo,.banner .img-slot{aspect-ratio:16/7;width:100%;border-radius:var(--radius-lg)}
.contact-card{padding:clamp(1.5rem,3vw,2.25rem)}
.contact-list{display:grid;gap:1.1rem;max-width:none;margin:1.25rem 0 1.5rem;padding:0;list-style:none}
.contact-list li{display:flex;align-items:center;gap:1rem;margin:0}
.contact-list svg{flex:none;width:2.75rem;height:2.75rem;padding:.7rem;border-radius:var(--radius);background:var(--mineral-soft);color:var(--color-evergreen)}
.contact-list .muted{display:block;font-size:var(--fs-small)}
.contact-list a{font-weight:700;overflow-wrap:anywhere}
.hero__note{margin:0 0 2rem}
.link-list{display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;max-width:none;margin:0;padding:0;list-style:none;font-size:1.125rem;font-weight:650}
.panel .btn-row{width:auto}
.checklist--cols{margin-top:1.25rem}
@media(min-width:760px){.checklist--cols{grid-template-columns:1fr 1fr;column-gap:2.5rem}}
.checklist--x li::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='none' stroke='%23183D35' stroke-width='1.6'/%3E%3Cpath d='M8.5 8.5l7 7M15.5 8.5l-7 7' stroke='%23183D35' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.quote+.reviews{margin-top:clamp(3rem,5vw,4.5rem)}
.photo-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)}
.photo-pair .photo,.photo-pair .img-slot{aspect-ratio:16/10;width:100%;border-radius:var(--radius-lg)}
.photo-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.6rem,1.4vw,1rem)}
.photo-trio .photo,.photo-trio .img-slot{aspect-ratio:4/5;width:100%;border-radius:var(--radius)}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:.9rem}
.chips--lg li{padding:.6rem 1.15rem;font-size:.9375rem;background:var(--card)}
.h3-lg{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);margin-bottom:.5rem}
.num-price .price__num{margin:0 0 .5rem;color:var(--accent);font-size:clamp(3rem,5vw,4.25rem);font-weight:800;line-height:1;letter-spacing:-.035em}
.num-price .price__num--text{font-size:clamp(2.25rem,3.6vw,3rem);padding-top:.5rem;margin-bottom:.9rem}
/* 28c PROCESS STEPS WITH DETAIL (real estate buying and selling) ----------
*/
.process{margin-top:var(--space-6)}
.process .eyebrow{margin-bottom:.75rem}
.process .h3-lg{max-width:30ch;margin-bottom:1.5rem}
.steps h4{margin-bottom:.45rem;font-size:1.125rem;line-height:1.3}
.steps--detail{grid-template-columns:repeat(2,minmax(0,1fr))}
.steps--detail li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1.35rem;align-content:start}
.steps--detail li::before{grid-row:1 / span 2;min-width:3.1rem;margin:0}
.steps--detail h4,.steps--detail p{grid-column:2}
.steps--detail p{max-width:none;line-height:1.6}
@media(max-width:900px){.steps--detail{grid-template-columns:1fr}}
@media(max-width:520px){
.steps--detail li{display:block}
.steps--detail li::before{margin-bottom:.9rem}
}
/* 28d HOME MATCHER (real estate buyer tool) --------------------------------