@charset "UTF-8";
/* ─────────────────────────────────────────────────────────────
   Grace Tarnasky — theme, on HER OWN documented palette
   (grace-brand-palette, made by Grace months before this site):
   Linen #F6F2EC ground · Bark #3A2F27 text (never pure black) ·
   Harvest Gold #C4955A decorative accents (never backgrounds) ·
   Orchard Green #4A6741 text accents & links · Sage Mist #A8B89E
   soft fills · Morning Fog #E8E2D9 bands. Gold and Orchard never
   compete on one element, per her own usage notes.
   Besley (display) + Ephesis (script) + Inter (body).
   ───────────────────────────────────────────────────────────── */
:root{
  --accent:#4A6741;--accent-deep:#3A5233;--accent-soft:#CFD9C5;--pop:#3A2F27;
  --ink:#3A2F27;--ink-2:#4A3F33;--paper:#F6F2EC;--cream:#E8E2D9;--blush:#EFEAE0;
  --clay:#8C6A3F;--slate:#6B5E54;--line:#DDD5C9;
  --r-lg:20px;--r-md:14px;
  --shadow-1:0 2px 6px rgba(43,36,27,.05),0 10px 28px rgba(43,36,27,.07);
  --shadow-2:0 6px 16px rgba(43,36,27,.08),0 24px 56px rgba(43,36,27,.12);
  --wrap:1160px;
}
*{margin:0;padding:0;box-sizing:border-box}
/* overscroll shows paper above the page, ink below — no white flash under the dark footer on iOS */
html{scroll-behavior:smooth;background:linear-gradient(var(--paper) 50%,var(--ink) 50%)}
body{
  font-family:'Inter',system-ui,sans-serif;background:var(--paper);color:var(--ink);
  line-height:1.65;font-size:16.5px;-webkit-font-smoothing:antialiased;
  min-height:100svh;display:flex;flex-direction:column;
}
main{flex:1 0 auto}
h1,h2,h3{font-family:'Besley',Georgia,serif;font-weight:500;letter-spacing:-.01em}
h1 em,h2 em{font-family:'Ephesis',cursive;font-style:normal;font-weight:400;font-size:1.34em;line-height:.5;letter-spacing:0}
a{color:var(--accent-deep);-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;width:100%}
.center{text-align:center}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 18px;z-index:200;border-radius:0 0 10px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}

/* reveal, reduced motion and the ?nofx=1 QA mode now come from the engine's
   core/assets/motion.css. What stood here was `.fade{opacity:0}` with no
   html.js guard, so every faded section on the site needed a script to be
   visible at all and a browser without IntersectionObserver saw a blank page. */
.no-fx .hero{min-height:860px}

/* ── nav ─────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:90;background:rgba(250,247,244,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:background .35s,border-color .35s}
.nav .wrap{display:flex;align-items:center;gap:22px;height:68px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:9px;font-family:'Besley',serif;font-size:19.5px;font-weight:400;letter-spacing:-.02em;color:var(--ink);text-decoration:none;transition:color .35s;white-space:nowrap;flex:none} /* weight was 600, no letter-spacing */
.brand .brand-mark{width:22px;height:28px;color:var(--accent);flex:none;transition:color .35s}
.nav .links{display:flex;gap:22px;list-style:none;margin-left:auto;flex-wrap:nowrap;white-space:nowrap}
.nav .links a{font-size:14px;font-weight:500;color:var(--slate);text-decoration:none;transition:color .2s}
.nav .links a:hover{color:var(--accent-deep)}
/* current page: themed reddish text, never a pill */
.nav .links a[aria-current="page"]{color:var(--accent-deep)}
.nav.overlay:not(.scrolled) .links a[aria-current="page"]{color:var(--accent-soft)}
.nav .cta{display:inline-flex;align-items:center;gap:7px;flex:none;font-size:13px;font-weight:600;color:#fff;background:var(--pop);padding:9px 17px;border-radius:99px;text-decoration:none;white-space:nowrap;transition:background .2s,transform .2s}
.nav .cta:hover{background:#2B221C;transform:translateY(-1px)}
.nav .cta .cta-i{width:16px;height:16px;flex:none}
/* narrower desktops/tablets: keep every text link, just tighten spacing and
   collapse the CTA to a compact icon so the bar stays on ONE line (never wraps) */
@media(max-width:1080px){
  .nav .wrap{gap:16px}
  .nav .links{gap:15px}
  .nav .links a{font-size:13.5px}
  .nav .cta{padding:0;width:36px;height:36px;justify-content:center}
  .nav .cta .cta-t{display:none}
  .nav .cta .cta-i{width:18px;height:18px}
}
/* transparent over the home hero, solid once scrolled */
.nav.overlay{position:fixed;left:0;right:0;background:transparent;border-bottom-color:transparent}
.nav.overlay:not(.scrolled) .brand,.nav.overlay:not(.scrolled) .links a{color:#fff}
.nav.overlay:not(.scrolled) .brand .brand-mark{color:var(--accent-soft)}
.nav.overlay:not(.scrolled) .links a:hover{color:var(--accent-soft)}
.nav.overlay.scrolled{background:rgba(250,247,244,.9);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.menu-btn{display:none;width:46px;height:46px;border:0;background:none;cursor:pointer;flex-direction:column;gap:5.5px;align-items:center;justify-content:center;margin-left:auto}
.menu-btn span{width:23px;height:1.8px;background:var(--ink);border-radius:2px;transition:.28s}
.menu-btn span:nth-child(2){width:14px;margin-right:9px}
.nav.overlay:not(.scrolled) .menu-btn span{background:#fff}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7.3px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.3px) rotate(-45deg)}
.m-cta,.m-meta{display:none}
@media(max-width:820px){
  .menu-btn{display:flex}
  .nav .links{display:none;position:fixed;top:68px;left:0;right:0;height:calc(100vh - 68px);height:calc(100dvh - 68px);background:var(--paper);flex-direction:column;gap:0;padding:14px 0 40px;margin:0;overflow-y:auto;z-index:95;
    background-image:radial-gradient(90% 50% at 50% 110%,var(--blush),transparent 70%)}
  .nav.open .links{display:flex;animation:menuin .28s cubic-bezier(.2,.6,.2,1)}
  @keyframes menuin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .nav.open{background:var(--paper)!important;border-bottom-color:var(--line)!important}
  .nav.open .brand,.nav.open .links a{color:var(--ink)!important}
  /* subtle, on-brand active state: rose + the brand's signature italic (no pill) */
  .nav.open .links a[aria-current="page"]{color:var(--accent-deep)!important;font-style:italic}
  .nav.open .brand .brand-mark{color:var(--accent)!important}
  /* the close (✕) must stay dark on the light open menu — beats the overlay white rule */
  .nav.open .menu-btn span{background:var(--ink)!important}
  .nav .links a{display:block;padding:15px 28px;font-size:21px;font-family:'Besley',serif;color:var(--ink);border-bottom:1px dashed var(--line);margin:0 24px;padding-left:4px;padding-right:4px}
  .nav .links li:nth-last-child(-n+2) a{border-bottom:none}
  .m-cta{display:block;margin:18px 28px 0}
  /* .nav.open scope so the white text OUTRANKS ".nav.open .links a{color:ink!important}" (same importance, more classes) */
  .m-cta a.btn,.nav.open .m-cta a.btn{display:block;text-align:center;font-family:'Inter',sans-serif;font-size:15px;border-bottom:none;padding:15px 24px;margin:0;color:#fff!important}
  .m-meta{display:flex;gap:18px;margin:16px 28px 0;flex-wrap:wrap}
  .m-meta a{font-family:'Inter',sans-serif!important;font-size:13.5px!important;font-weight:600;border-bottom:none!important;padding:6px 0!important;margin:0!important;color:var(--accent-deep)!important}
  .nav .cta{display:none}
}

/* ── buttons ─────────────────────────────────────────────── */
.btn{display:inline-block;padding:14px 28px;border-radius:99px;border:0;cursor:pointer;font-family:'Inter',sans-serif;font-size:15px;font-weight:600;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s,color .2s}
.btn.primary{background:var(--pop);color:#fff;box-shadow:0 8px 24px rgba(47,80,73,.30)}
.btn.primary:hover{background:#2B221C;transform:translateY(-2px);box-shadow:0 12px 30px rgba(47,80,73,.40)}
/* hero button sits on the photo: neutral dark shadow, held through hover (Eric, 2026-07-29) */
.hero .btn.primary{box-shadow:-1px 4px 22px rgba(20,16,12,.34);border:1px solid rgba(196,149,90,.55)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent-deep)}
/* editorial CTA pair: both buttons on ONE row, labels on one line, at every
   width — compact padding/type on phones so they fit side by side (Eric, 8/5) */
.editorial .cta-row{flex-wrap:nowrap}
.editorial .cta-row .btn{white-space:nowrap}
@media(max-width:480px){
  .editorial .cta-row{gap:9px}
  .editorial .cta-row .btn{padding:13px 15px;font-size:13.5px}
}
.btn.ghost.light{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);color:#fff;backdrop-filter:blur(4px)}
.btn.ghost.light:hover{background:rgba(255,255,255,.26);border-color:#fff;color:#fff}
.btn.sm{padding:10px 20px;font-size:13.5px}
.btn.lg{padding:17px 36px;font-size:15.5px}

/* ── hero ────────────────────────────────────────────────── */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;background:var(--ink);padding-top:68px}
.hero-media{position:absolute;top:-12%;right:0;bottom:-12%;left:0;will-change:transform}
.hero-video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s ease}
.hero-video.back{opacity:0;pointer-events:none}
.hero-scrim{position:absolute;top:0;right:0;bottom:0;left:0;background:
  radial-gradient(120% 90% at 20% 85%,rgba(120,52,63,.42),transparent 60%),
  linear-gradient(to bottom,rgba(20,22,26,.5),rgba(20,22,26,.32) 45%,rgba(20,22,26,.68))}
.hero .wrap{position:relative;z-index:2;color:#fff;margin-top:auto;margin-bottom:auto;padding-top:34px;padding-bottom:34px}
.hero-in{animation:heroin 1.1s cubic-bezier(.2,.6,.2,1) .1s backwards}
@keyframes heroin{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.hero .eyebrow{color:var(--accent-soft)}
.hero h1{font-size:clamp(42px,7vw,84px);line-height:1.02;margin:16px 0 22px;font-weight:480}
.hero h1 em{font-style:normal;color:#D9B588}   /* Harvest Gold, lightened for the dark video */
.hero .sub{font-size:clamp(16px,2vw,19px);color:rgba(255,255,255,.9);max-width:640px;margin-bottom:36px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.22);background:linear-gradient(to top,rgba(20,22,26,.45),transparent)}
/* stat cards can link out: identical look, pointer cursor only (Eric, 8/5) */
.hero-stats a.stat{color:inherit;text-decoration:none;cursor:pointer}
/* padding-right reserves the bottom-right corner for the fixed "Ask Gracie" pill,
   which otherwise sits on the last stat's label at fold on 768-1280px screens */
.hero-stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding-top:26px;padding-bottom:30px;padding-right:160px}
.stat{color:#fff;min-width:0}
/* value + label each hold ONE line: a JS fitter in home.php steps the font down
   until they fit (wording is admin-editable); balance is the floor-out fallback */
.stat-v{display:block;font-family:'Besley',serif;font-size:clamp(34px,4.2vw,54px);font-weight:600;line-height:1.05;font-variant-numeric:tabular-nums;text-wrap:balance;letter-spacing:-.015em}
.stat-l{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.66);margin-top:5px;font-weight:500;line-height:1.35;text-wrap:balance}
.scroll-cue{position:absolute;bottom:150px;right:38px;z-index:3;width:30px;height:52px;border:1.5px solid rgba(255,255,255,.55);border-radius:99px;display:flex;justify-content:center;padding-top:9px}   /* clear of the ~120px stats band top border */
/* hero sound toggle — thin white, stacked above the scroll cue */
.vol-toggle{position:absolute;bottom:214px;right:34px;z-index:3;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:6px;opacity:.95;transition:opacity .2s,transform .2s}
.vol-toggle:hover{opacity:1;transform:scale(1.08)}
.vol-toggle svg{width:27px;height:27px;fill:none;stroke:#fff;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 5px rgba(0,0,0,.55))}
.vol-toggle .v-on{display:none}
.vol-toggle.unmuted .v-on{display:block}
.vol-toggle.unmuted .v-off{display:none}
.scroll-cue span{width:3.5px;height:9px;border-radius:99px;background:#fff;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:1}55%{transform:translateY(16px);opacity:.2}}
@media(min-width:761px) and (max-width:1024px){
  /* tablets: two wide columns keep 12px labels on one line (four columns squeeze
     the long award label below readable) */
  .hero-stats .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px;padding-top:20px;padding-bottom:24px}
}
@media(max-width:760px){
  /* hero fills the screen with svh ONLY: dvh grows mid-scroll when the iOS address
     bar collapses, resizing the hero while scrolling — the freshly exposed strip
     painted ink+scrim before the video caught up (the "dark opaque frame"). svh is
     constant, so the hero never resizes under the user's finger. */
  .hero{min-height:100svh}
  /* hero CTAs share one line on phones */
  .hero-ctas{gap:10px}
  .hero-ctas .btn.lg{padding:14px 21px;font-size:14px}
  /* no parallax on phones: drop the 124%-tall promoted layer (inset:-12% +
     will-change) — iOS evicts oversized layer backing stores during scroll and
     flashes the dark hero background where the video hasn't repainted */
  .hero-media{top:0;right:0;bottom:0;left:0;will-change:auto}
  /* stats: two columns of two on phones — four skinny columns forced long labels
     into 3+ tiny lines; the JS fitter keeps value + label on one line each.
     minmax(0,1fr) lets columns shrink. The 3rd/4th swap puts the long award label
     bottom-LEFT, and the padded bottom-right cell breaks before the chat bubble. */
  .hero-stats .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;padding:16px 20px 19px}
  .hero-stats .stat:nth-child(3){order:1;padding-right:56px}
  .hero-stats .stat-v{font-size:19px}
  .hero-stats .stat-l{font-size:9.5px;letter-spacing:.02em;margin-top:3px;line-height:1.3}
  .scroll-cue{display:none}
  .vol-toggle{right:16px;left:auto;top:auto;bottom:150px;padding:5px}   /* right side, above the (now two-row) stats band, clear of the left-aligned CTAs */
  .vol-toggle svg{width:23px;height:23px}
}
@media(max-width:480px){
  .hero h1{font-size:37px}
  .hero .eyebrow{font-size:10.5px;letter-spacing:.16em}
  .hero .sub{font-size:15.5px}
}

/* ── sections ────────────────────────────────────────────── */
.sec{padding:clamp(64px,9vw,104px) 0}
.sec.alt{background:var(--cream)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.shead{margin-bottom:clamp(30px,4vw,44px)}
.shead.center{text-align:center}
.shead.split{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.shead h2,.band h2{font-size:clamp(30px,4.6vw,46px);line-height:1.08;margin-top:10px}
.shead h2 em,.band h2 em,.areas em{font-style:italic;color:var(--accent)}

/* ── listing cards ───────────────────────────────────────── */
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:22px}
.lcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .25s,box-shadow .25s;display:block}
.lcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-2)}
.lphoto{position:relative;aspect-ratio:4/3;background:var(--blush);overflow:hidden;display:flex;align-items:center;justify-content:center}
.lphoto img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.lcard:hover .lphoto img{transform:scale(1.045)}
.lph{color:var(--accent);opacity:.55}
.lstatus{position:absolute;top:13px;left:13px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.94);border-radius:99px;padding:5px 13px;color:var(--slate);backdrop-filter:blur(4px)}
.lstatus.active{color:#0E6B45}
.lstatus.pending{color:#8A6D1E}
.lstatus.coming-soon{color:#3E5E80}
.lstatus.sold{color:var(--accent-deep)}
.lstatus.inline{position:static;border:1px solid var(--line);background:#fff}
.lrep,.lvideo{position:absolute;bottom:13px;right:13px;font-size:11px;font-weight:600;background:rgba(24,26,30,.72);color:#fff;border-radius:99px;padding:5px 13px;backdrop-filter:blur(4px)}

/* ── the photo-less card: a typographic plate ─────────────────────────────
   Photographs of a buyer-side sale belong to the listing brokerage or the
   photographer it hired, so a listing whose photo rights are uncleared shows
   none of them (see photo_rights() in core/helpers.php). The plate fills the
   same 4:3 well the photograph would have filled, so a grid of cards keeps its
   geometry whether or not a given card has pictures, and it says in type what
   the photograph would have said: the address, the city, the close date, and
   the side of the deal Grace was on. The layer themes inherit this and repaint
   only the display face. */
.lphoto.lplate{background:var(--cream);flex-direction:column;padding:38px 22px 24px;text-align:center}
.lphoto.lplate::after{content:"";position:absolute;inset:11px;border:1px solid var(--line);pointer-events:none}
.lplate-in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;max-width:28ch}
.lplate-addr{font-family:'Besley',Georgia,serif;font-size:clamp(17px,2vw,20px);line-height:1.24;color:var(--ink)}
.lplate-city{font-size:13px;color:var(--slate)}
.lplate-when{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--clay);margin-top:5px}
.lplate-role{font-size:12.5px;font-weight:600;color:var(--accent-deep)}
.sold-carousel .lplate-in,.lcard.compact .lplate-in{max-width:24ch}
/* the listing page's own line, where a home's pictures are being held back */
.lnopix{margin:16px 0 0;max-width:62ch;font-size:13.5px;line-height:1.6;color:var(--slate);
  border-left:2px solid var(--line);padding-left:14px}
@media(max-width:420px){
  .lphoto.lplate{padding:30px 16px 18px}
  .lplate-addr{font-size:17px}
}
.lbody{padding:17px 19px 19px}
.lprice{font-family:'Besley',serif;font-size:23px;font-weight:600}
.lclosed{font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--clay);margin-left:4px}
.laddr{font-size:14.5px;margin-top:3px}
.lspecs{font-size:12.5px;color:var(--slate);margin-top:5px}

/* ── sold band (horizontal scroll) ───────────────────────── */
.sold-band{background:var(--blush);padding:clamp(64px,9vw,104px) 0 clamp(48px,6vw,72px)}
.sold-carousel{max-width:var(--wrap);margin:0 auto;padding:6px 24px 10px}
.sold-carousel .splide__track{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
  padding:8px 0 26px}
.sold-carousel .lcard{width:292px}
.sold-carousel .splide__slide.is-active .lcard{transform:translateY(-5px);box-shadow:var(--shadow-2)}
.sold-carousel .splide__arrow{background:#fff;border:1px solid var(--line);width:44px;height:44px;opacity:1;box-shadow:var(--shadow-1);transition:border-color .2s,transform .2s}
.sold-carousel .splide__arrow:hover{border-color:var(--accent);transform:translateY(-50%) scale(1.06)}
.sold-carousel .splide__arrow svg{fill:var(--accent-deep);width:15px;height:15px}
.sold-carousel .splide__arrow--prev{left:-4px}
.sold-carousel .splide__arrow--next{right:-4px}
@media(max-width:760px){.sold-carousel .lcard{width:262px}.sold-carousel .splide__arrow{display:none}}
/* carousel cards are exempt from the per-card scroll fade: Splide's loop CLONES
   are created after the reveal observer runs, so cloned .lcard.fade neighbors
   stayed at opacity 0 forever — the band read as ONE listing on phones. The
   .sold-carousel container still fades in as a unit. */
.sold-carousel .lcard.fade{opacity:1;transform:none}
/* mobile pagination dots: second signal that there are more homes to swipe */
.sold-carousel .splide__pagination{position:static;margin-top:14px;gap:7px}
.sold-carousel .splide__pagination__page{width:7px;height:7px;background:var(--accent-soft);opacity:1;transform:none;transition:background .2s}
.sold-carousel .splide__pagination__page.is-active{background:var(--accent-deep)}
.sold-note{font-size:13.5px;color:var(--clay)}

/* ── editorial (about teaser) ────────────────────────────── */
.editorial{overflow:hidden}
.ed-grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(34px,6vw,84px);align-items:center}
.ed-photo{position:relative}
.ed-photo img{border-radius:var(--r-lg);box-shadow:var(--shadow-2);aspect-ratio:4/5;object-fit:cover;object-position:center 22%;width:100%}
.ed-photo::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:1.5px solid var(--accent-soft);border-radius:var(--r-lg);z-index:-1}
.ed-badge{position:absolute;left:-14px;bottom:26px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:13px 18px;box-shadow:var(--shadow-1)}
.ed-badge .stat-v{color:var(--ink);font-size:24px}
.ed-badge .stat-l{color:var(--slate);text-transform:none;letter-spacing:0;font-size:12px}
.ed-copy h2{font-size:clamp(30px,4.4vw,44px);margin:10px 0 18px}
.ed-copy h2 em{font-style:italic;color:var(--accent)}
.kw-chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}
.kw-chips span{font-size:12.5px;font-weight:600;color:var(--accent-deep);background:var(--blush);border:1px solid #EBD3D6;border-radius:99px;padding:7px 15px}
@media(max-width:560px){
  .kw-chips{flex-wrap:nowrap;gap:5px}
  .kw-chips span{white-space:nowrap;font-size:clamp(9px,2.9vw,12.5px);padding:6px 9px}
}
@media(max-width:860px){.ed-grid{grid-template-columns:1fr;gap:40px}.ed-photo{max-width:420px}}

/* ── feature cards — the three pillars share one box (Grace, 07-05) ── */
.feat3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.fcard{padding:34px 32px;position:relative}
.fcard + .fcard{border-left:1px solid var(--line)}
@media(max-width:860px){
  .feat3{grid-template-columns:1fr}
  .fcard + .fcard{border-left:none;border-top:1px solid var(--line)}
}
.fnum{font-family:'Besley',serif;font-style:italic;font-size:15px;color:var(--accent);letter-spacing:.06em}
.fcard h3{font-size:22px;margin:10px 0 9px}
.fcard p{font-size:14.5px;color:var(--slate)}
.fcontact{grid-column:1/-1;border-top:1px solid var(--line);background:var(--paper);padding:18px 30px;text-align:center;font-size:14.5px;color:var(--slate)}
.fcontact a{font-weight:600;white-space:nowrap}

/* ── quotes ──────────────────────────────────────────────── */
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:860px){.qgrid{grid-template-columns:1fr}}
.qcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 30px 26px;position:relative}
.qcard::before{content:"\201C";position:absolute;top:2px;left:22px;font-family:'Besley',serif;font-size:74px;line-height:1;color:var(--accent-soft)}
.qcard blockquote{font-family:'Besley',serif;font-size:19.5px;line-height:1.45;font-style:italic;margin-top:26px}
.qcard figcaption{margin-top:16px;font-size:12.5px;color:var(--slate)}

/* ── areas strip ─────────────────────────────────────────── */
.areas{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(44px,6vw,64px) 0;text-align:center;background:var(--paper)}
.areas-line{font-family:'Besley',serif;font-size:clamp(18px,2.6vw,25px);margin-top:14px;color:var(--ink-2);line-height:1.6}
.areas-sub{font-size:13.5px;color:var(--clay);margin-top:12px;font-style:italic}

/* ── CTA band ────────────────────────────────────────────── */
.band{background:var(--ink);color:#fff;padding:clamp(70px,9vw,110px) 0;position:relative;overflow:hidden}
.band .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) auto;gap:18px clamp(30px,6vw,80px);align-items:center;text-align:left;border-left:3px solid var(--accent);padding-left:clamp(26px,4vw,44px)}
.band h2{grid-column:1}
.band .sub{grid-column:1;margin:0}
.band .wrap > p:not(.sub){grid-column:2;grid-row:1 / span 2;margin:0;justify-self:end;text-align:right}
.band .band-alt{grid-column:1 / -1 !important;grid-row:auto !important;justify-self:start !important;text-align:left !important;margin-top:6px !important}
@media(max-width:820px){.band .wrap{grid-template-columns:1fr}.band .wrap > p:not(.sub){grid-column:1;grid-row:auto;justify-self:start;text-align:left}}
.band .wrap{position:relative;z-index:1}
.band .sub{color:#B9BEC6;margin:14px 0 30px;font-size:16.5px}
.band-alt{margin-top:22px;font-size:14px;color:#B9BEC6}
.band-alt a{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* on the dark band the deep red button had no contrast: white face, brand-red type (Eric, 2026-07-28) */
.band .btn.primary{background:#fff;color:#3A2F27;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.band .btn.primary:hover{background:var(--paper);color:#2B221C;box-shadow:0 12px 30px rgba(0,0,0,.45)}

/* button pairs inside copy sections */
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* ── page headers ────────────────────────────────────────── */
.phead{padding:clamp(60px,8vw,92px) 0 clamp(36px,5vw,54px);border-bottom:1px solid var(--line)}
.phead h1{font-size:clamp(34px,5.6vw,58px);line-height:1.06;margin-top:10px}
.phead h1 em{font-style:italic;color:var(--accent)}
.psub{color:var(--slate);font-size:17px;max-width:640px;margin-top:14px}
.center .psub{margin-left:auto;margin-right:auto}
.crumbs{font-size:12.5px;color:var(--slate);margin-bottom:16px}
.crumbs a{color:var(--slate);text-decoration:none}
.crumbs a:hover{color:var(--accent-deep)}

/* ── listings index ──────────────────────────────────────── */
.lsearch{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.lsearch input[type=search]{flex:1;min-width:210px;padding:13px 18px;border:1px solid var(--line);border-radius:99px;font:inherit;font-size:15px;background:#fff}
.lsearch select{padding:13px 16px;border:1px solid var(--line);border-radius:99px;font:inherit;font-size:14px;background:#fff}
.empty{color:var(--slate);font-size:16px}

/* ── listing detail ──────────────────────────────────────── */
/* This header opens on a breadcrumb, not an eyebrow, so the shared .phead top
   padding left a band of dead space above a 12.5px line. It starts higher, and
   it runs straight into the gallery with no rule drawn between the two. Phones
   keep the shared .phead rhythm, which was already tight. (Eric, 2026-08-21) */
.listing-head{padding-top:clamp(30px,3.2vw,44px);border-bottom:0}
.listing-head .lh-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.lh-city{color:var(--slate);margin-top:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lh-price p{font-family:'Besley',serif;font-size:clamp(30px,4vw,42px);font-weight:600;text-align:right}
.lh-price span{color:var(--slate);font-size:13.5px}
@media(max-width:700px){.lh-price p{text-align:left}}
.ltour{padding:38px 0 0}
.vwrap{position:relative;border-radius:var(--r-lg);overflow:hidden;cursor:pointer;aspect-ratio:16/9;background:var(--ink);box-shadow:var(--shadow-2)}
.vwrap img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.vwrap:hover img{transform:scale(1.03)}
.vwrap::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(24,26,30,.5),transparent 45%)}
.vplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--accent-deep);z-index:2;transition:transform .2s}
.vwrap:hover .vplay{transform:translate(-50%,-50%) scale(1.08)}
.vlabel{position:absolute;bottom:20px;left:24px;color:#fff;font-weight:600;z-index:2}
.vmodal{position:fixed;inset:0;z-index:120;background:rgba(24,26,30,.94);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:4vh 4vw;opacity:0;pointer-events:none;transition:opacity .3s}
.vmodal.open{opacity:1;pointer-events:auto}
.vmodal video{width:100%;max-width:1100px;max-height:100%;aspect-ratio:16/9;border-radius:var(--r-md);background:#000}
.vclose{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);color:#fff;font-size:17px;cursor:pointer}
.vclose:hover{background:rgba(255,255,255,.25)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:700px){.gallery{grid-template-columns:1fr 1fr}}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-md);border:1px solid var(--line);transition:transform .3s,box-shadow .3s}
.gallery img:hover{transform:scale(1.02);box-shadow:var(--shadow-1)}
.gallery img:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.cols2{display:grid;grid-template-columns:1.6fr 1fr;gap:44px;align-items:start}
@media(max-width:820px){.cols2{grid-template-columns:1fr}}
.feats{list-style:none;margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:8px 22px}
@media(max-width:560px){.feats{grid-template-columns:1fr}}
.feats li{padding:9px 0 9px 26px;position:relative;border-bottom:1px dashed var(--line);font-size:14.5px}
.feats li::before{content:"\2713";position:absolute;left:0;color:var(--accent);font-weight:700}
.sidecard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;margin-bottom:16px}
.sidecard h3{font-size:19px;margin:6px 0 12px}
.sidecard h3 a{color:var(--ink);text-decoration:none}
.sidecard input,.sidecard textarea{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:14px;margin-bottom:10px;background:var(--paper)}
.sidecard textarea{min-height:72px;resize:vertical}
.sidecard .btn{width:100%;text-align:center}

/* ── prose / CMS pages ───────────────────────────────────── */
.prose{font-size:16.5px;line-height:1.78}
/* editable pages: content spans the full content width to line up with the
   photos/gallery. Slightly larger leading keeps the wider measure comfortable. */
.page-prose{max-width:none;line-height:1.8}
.page-prose.faq{max-width:none}
.shortcode-btn{margin:22px 0}
.prose p{margin-bottom:16px}
.prose .lede{font-family:'Besley',serif;font-size:clamp(20px,2.6vw,25px);line-height:1.5;color:var(--ink-2);margin-bottom:26px}
.prose h2{font-size:clamp(23px,3vw,30px);margin:38px 0 14px}
.prose ul{margin:0 0 16px 22px}
.prose li{margin-bottom:8px}
.prose a{text-decoration-color:var(--accent-soft);text-underline-offset:3px}
/* page tab pair (Get to Know Me / Work With Me) + next-page arrow card */
.ptabs{display:flex;gap:9px;flex-wrap:wrap;margin:22px auto 0}
.ptab{display:inline-flex;align-items:center;padding:9px 20px;border-radius:99px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600;font-size:14.5px;text-decoration:none;transition:background .2s,border-color .2s,color .2s,box-shadow .2s}
.ptab:hover{border-color:var(--accent);color:var(--accent-deep)}
.ptab.is-active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 8px 20px rgba(183,110,121,.28)}
.pnext{display:flex;align-items:center;gap:16px;max-width:520px;margin-top:46px;padding:20px 26px;border:1px solid var(--line);border-radius:16px;background:var(--cream);text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s,box-shadow .2s}
.pnext:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 14px 34px rgba(183,110,121,.18)}
.pnext-txt{flex:1;min-width:0}
.pnext-k{display:block;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--clay)}
.pnext-l{display:block;margin-top:3px;font-family:'Besley',serif;font-size:22px;line-height:1.15;color:var(--accent-deep)}
.pnext-arrow{font-size:27px;color:var(--accent);margin-left:auto;transition:transform .2s}
.pnext:hover .pnext-arrow{transform:translateX(5px)}
ol.steps{list-style:none;counter-reset:step;margin:8px 0 18px}
ol.steps li{counter-increment:step;position:relative;padding:16px 0 16px 62px;border-bottom:1px dashed var(--line);font-size:15.5px}
ol.steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:16px;font-family:'Besley',serif;font-style:italic;font-size:21px;color:var(--accent)}

/* ── agents ──────────────────────────────────────────────── */
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.acard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 24px;text-align:center;text-decoration:none;color:var(--ink);transition:transform .25s,box-shadow .25s}
.acard:hover{transform:translateY(-5px);box-shadow:var(--shadow-2)}
.aphoto{width:118px;height:118px;border-radius:50%;background:var(--blush) center/cover no-repeat;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);color:var(--accent);overflow:hidden}
.aphoto img{width:100%;height:100%;object-fit:cover}
.aphoto.lg{width:170px;height:170px;margin:0}
.acard h3{font-size:19.5px}
.acard p{font-size:13px;color:var(--slate)}
.amini{margin-top:9px;font-size:12.5px!important}
/* "we're growing" recruitment card — invites agents, signals momentum */
.acard-soon{border:1.5px dashed var(--accent-soft);background:linear-gradient(180deg,#fff,var(--blush));display:flex;flex-direction:column;align-items:center}
.acard-soon:hover{border-color:var(--accent)}
.aphoto-soon{background:#fff;border:1.5px dashed var(--accent-soft)}
.aphoto-soon svg{width:34px;height:34px;color:var(--accent)}
.acard-soon .soon-cta{margin-top:14px;font-size:13px;font-weight:600;color:var(--accent-deep)}
.agent-hero{display:flex;gap:34px;align-items:center;flex-wrap:wrap;margin-top:12px}
.acontact{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.asocial{margin-top:14px;display:flex;gap:16px;flex-wrap:wrap;font-size:13.5px;font-weight:600}

/* ── intake forms ────────────────────────────────────────── */
.intake{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,4vw,38px);max-width:780px;box-shadow:var(--shadow-1)}
.intake label{display:block;font-size:12.5px;font-weight:600;color:var(--slate);margin:15px 0 6px;letter-spacing:.02em}
.intake input,.intake select,.intake textarea{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:11px;font:inherit;font-size:15px;background:var(--paper)}
.intake textarea{min-height:110px;resize:vertical}
.intake input:focus,.intake select:focus,.intake textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;background:#fff}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
@media(max-width:620px){.fgrid{grid-template-columns:1fr}}
.intake .btn{margin-top:24px}
.fine{font-size:12.5px;color:var(--slate);margin-top:13px;font-style:italic}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* ── FAQ ─────────────────────────────────────────────────── */
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{font-family:'Besley',serif;font-size:18.5px;cursor:pointer;list-style:none;position:relative;padding-right:30px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:2px;top:-2px;color:var(--accent);font-size:22px;transition:transform .2s}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin-top:11px;color:var(--slate);font-size:15px;line-height:1.7}

/* ── about portrait header ───────────────────────────────── */
.phead-me{display:flex;align-items:center;gap:30px}
.me-circle{width:132px;height:132px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:var(--shadow-2),0 0 0 1px var(--accent-soft);flex:none}
@media(max-width:640px){
  /* tighter, even page-header rhythm on phones */
  .phead{padding:26px 0 28px}
  .phead h1{font-size:clamp(29px,8.2vw,36px)}
  .crumbs{margin-bottom:12px}
  .phead-me{flex-direction:column;text-align:center;gap:14px}
  .phead-me .me-circle{width:106px;height:106px}
  /* broker · licenses · phone stays on ONE line */
  .phead-me .psub{margin:4px auto 0;white-space:nowrap;font-size:clamp(11.5px,3.55vw,14px)}
  .phead-me .psub a{white-space:nowrap}
}

/* ── google reviews modal ────────────────────────────────── */
/* Google-reviews prompt: a non-blocking bottom-corner card (z-index below the nav, so it NEVER covers navigation) */
.greview{position:fixed;right:20px;bottom:20px;z-index:70;max-width:322px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(20,22,26,.22);padding:20px 22px 22px;opacity:0;transform:translateY(24px);transition:opacity .3s,transform .3s}
.greview.open{opacity:.9;transform:none}
.greview-x{position:absolute;top:9px;right:11px;width:30px;height:30px;border:0;background:none;color:var(--slate);font-size:15px;cursor:pointer;line-height:1;border-radius:50%;transition:color .15s,background .15s}
.greview-x:hover{color:var(--ink);background:var(--cream)}
.gstars{display:block;color:var(--accent);font-size:16px;letter-spacing:3px;margin-bottom:7px}
.greview-h{font-family:'Besley',serif;font-size:19px;margin-bottom:4px}
.greview-p{color:var(--slate);font-size:13.8px;margin-bottom:15px;line-height:1.5}
.greview-alt{display:block;margin-top:10px;font-size:13px;color:var(--slate);text-decoration:underline;text-underline-offset:3px}
.greview-alt:hover{color:var(--ink)}
@media(max-width:520px){.greview{left:16px;right:16px;bottom:16px;max-width:none}}

/* ── journal / blog ──────────────────────────────────────── */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.pgrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.pgrid{grid-template-columns:1fr}}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-2)}
.pcard.featured{grid-column:1/-1;flex-direction:row;align-items:stretch}
/* aspect-ratio:auto left this box with no height of its own, so the featured card was
   322px tall until the photo arrived and 394px after it: a 72px jump, every time, on the
   first card of the Journal. The phone rule below had already been given a ratio for
   exactly this reason. 3:2 is what the `wide` preset crops to, so the finished page is
   unchanged and only the reserved box is new; min-height still floors it at narrow
   widths, and being a floor it stays definite either way. */
.pcard.featured .pimg{flex:1.3;aspect-ratio:3/2;min-height:320px}
.pcard.featured .pbody{flex:1;display:flex;flex-direction:column;justify-content:center;padding:34px}
.pcard.featured h3,.pcard.featured .pcard-t{font-size:clamp(24px,3vw,32px)}
@media(max-width:760px){.pcard.featured{flex-direction:column}.pcard.featured .pimg{min-height:0;aspect-ratio:16/9}}
.pimg{aspect-ratio:16/9;background:var(--blush);overflow:hidden}
.pimg img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.pcard:hover .pimg img{transform:scale(1.04)}
.pbody{padding:20px 22px 22px}
.pmeta{font-size:12px;letter-spacing:.04em;color:var(--clay);text-transform:uppercase;font-weight:600}
.pcard h3,.pcard .pcard-t{font-family:'Besley',serif;font-weight:500;font-size:21px;line-height:1.25;letter-spacing:-.01em;margin:8px 0 8px}
.pteaser{font-size:14px;color:var(--slate);line-height:1.6}
.ptags{margin-top:14px;display:flex;gap:7px;flex-wrap:wrap}
.ptags span{font-size:11px;font-weight:600;color:var(--accent-deep);background:var(--blush);border-radius:99px;padding:4px 11px}
.ptags a{position:relative;font-size:11px;font-weight:600;color:var(--accent-deep);background:var(--blush);border-radius:99px;padding:4px 11px;text-decoration:none;transition:background .18s,color .18s}
.ptags a:hover{background:var(--accent-deep);color:#fff}
/* Visually 26px so a row of tags stays a row, but the tap target is still 44px
   through an invisible ::after that extends 9px each way. */
.ptags a::after{content:"";position:absolute;inset:-9px 0}

/* The tag cloud, one per tag archive/index/post: links every tag to every
   other, so a reader (or a crawler) can always reach the whole set. */
.tag-cloud{margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.tag-cloud ul{list-style:none;display:flex;flex-wrap:wrap;gap:7px 6px;padding:0;margin:14px 0 0}
.tag-cloud a,.tag-cloud .is-here{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;font-size:12.5px;font-weight:600;color:var(--slate);text-decoration:none;border:1px solid var(--line);border-radius:99px;transition:color .18s,border-color .18s,background .18s}
/* Visually 30px, but the tap target is still 44px through an invisible ::after
   that extends 7px each way. */
.tag-cloud a::after{content:"";position:absolute;inset:-7px 0}
.tag-cloud a:hover{color:var(--accent-deep);border-color:var(--accent-deep)}
.tag-cloud .is-here{background:var(--blush);color:var(--accent-deep);border-color:var(--accent-deep)}
.tag-cloud i{font-style:normal;font-size:.7em;opacity:.7}
.tag-cloud-all{margin:16px 0 0;font-size:14px}
/* The hero is a 3:2 crop from the image pipeline. aspect-ratio + cover means
   it can never stretch and never runs taller than its box, whatever ratio the
   stored file happens to be (a portrait photo used to fill the viewport). */
.posthero{border-radius:var(--r-lg);box-shadow:var(--shadow-2);width:100%;
  aspect-ratio:3/2;height:auto;object-fit:cover;display:block}
.postbody{font-size:17px}
.postbody h2{font-size:clamp(23px,3vw,29px);margin:36px 0 12px}
.postbody ul{margin:0 0 16px 22px}
.postbody li{margin-bottom:9px}
.postbody .lede{font-family:'Besley',serif;font-size:clamp(19px,2.4vw,23px);line-height:1.55;color:var(--ink-2)}
.postcta{margin-top:46px;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;background:#fff}
.postcta h3{font-family:'Besley',serif;font-size:23px;margin:8px 0 16px}
.postcta h3 em{font-style:italic;color:var(--accent)}

/* ── footer (flush to page bottom, no gap) ───────────────── */
/* back-to-top: quiet paper chip, bottom center, fades in once the hero (or the
   first screen on hero-less pages) is scrolled past. margin-left centers it so
   the show/hide translateY never fights a translateX. */
.gotop{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;
  width:44px;height:44px;margin-left:-22px;border-radius:50%;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(250,247,244,.86);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transform:translateY(6px);
  transition:opacity .25s ease,transform .25s ease,background .2s}
.gotop.on{opacity:.92;pointer-events:auto;transform:none}
.gotop:hover{opacity:1;background:#fff}
.gotop svg{width:17px;height:17px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.gotop:hover svg{stroke:var(--accent-deep)}
@media print{.gotop{display:none!important}}
/* signed-in staff also have the bottom-left staff pill; on narrow screens the
   centered chip would clip it, so it rides one row higher for staff only */
@media(max-width:760px){.gotop.gotop-staff{bottom:calc(66px + env(safe-area-inset-bottom,0px))}}
footer{background:var(--ink);color:#fff;padding:clamp(56px,7vw,76px) 0 calc(36px + env(safe-area-inset-bottom,0px));margin-top:auto;position:relative;overflow:hidden}
footer .wrap{position:relative;z-index:1}
/* oversized tulip-rose watermark, bleeding off the bottom-right corner */
.fmark{position:absolute;right:clamp(-70px,-2vw,-24px);bottom:-58px;width:auto;height:clamp(300px,33vw,420px);color:var(--accent-soft);opacity:.09;pointer-events:none;z-index:0}
@media(max-width:520px){.fmark{height:240px;right:-56px;bottom:-32px;opacity:.07}}
footer .cols{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:34px;margin-bottom:44px}
@media(max-width:860px){footer .cols{grid-template-columns:1fr 1fr}}
.fbrand{font-family:'Besley',serif;font-size:22px}
.ftag{color:var(--accent-soft);font-style:italic;font-family:'Besley',serif;margin:8px 0 14px;font-size:16.5px}
.fmeta{font-size:13.5px;color:#B9BEC6}
.fmeta a{color:#D9BCC1;text-decoration:none}
.fmeta a:hover{color:#fff}
.fh{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#8A9099;margin-bottom:12px}
footer .cols a{display:block;color:#B9BEC6;text-decoration:none;font-size:14px;padding:4.5px 0;transition:color .2s}
footer .cols a:hover{color:#fff}
.legal{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;font-size:12px;color:#8A9099;line-height:1.7}
/* brokerage attribution — remove when Grace leaves Works */
.fbrokerage{display:flex;align-items:center;gap:12px;margin:26px 0 18px}
.fbrokerage .bk{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#8A9099}
.fbrokerage img{height:22px;width:auto;filter:brightness(0) invert(1);opacity:.5}
/* compact footer on phones: brand full-width, links in a tight 2-up grid */
@media(max-width:520px){
  footer{padding:36px 0 calc(22px + env(safe-area-inset-bottom,0px))}
  footer .cols{grid-template-columns:1fr 1fr;gap:22px 18px;margin-bottom:26px}
  .fbrandcol{grid-column:1/-1}
  .fbrand{font-size:20px}
  .ftag{margin:6px 0 10px;font-size:15px}
  .fmeta{font-size:13px}
  .fh{margin-bottom:7px}
  footer .cols a{font-size:13.5px;padding:3px 0}
  .legal{padding-top:16px;font-size:11.5px;line-height:1.6}
}
.flogin{color:#8A9099;text-decoration:none;border-bottom:1px dotted #8A9099}
.flogin:hover{color:var(--accent-soft);border-color:var(--accent-soft)}

/* ── Gracie chat slideout (AI home-value helper) ──────────── */
/* Gracie chat styles moved to chat.css (shared with the admin dashboard) */
/* the About reviews card sits above the chat launcher */
.greview{bottom:84px}

/* ── reusable media gallery (thumb grid + lightbox) ──────── */
.rgal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.rgal-t{margin:0;cursor:zoom-in;outline:none}
.rgal-ph{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--blush);box-shadow:0 2px 8px rgba(34,37,42,.06);transition:transform .2s,box-shadow .2s}
.rgal-t:hover .rgal-ph,.rgal-t:focus-visible .rgal-ph{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.rgal-ph img,.rgal-ph video{width:100%;height:100%;object-fit:cover;display:block}
.rgal-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--accent-deep);font-size:15px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(20,22,26,.25)}
.rgal-t figcaption{font-size:13px;color:var(--slate);margin-top:8px;text-align:center}
@media(max-width:640px){.rgal-grid{grid-template-columns:1fr 1fr;gap:10px}.rgal-t figcaption{font-size:12px;margin-top:6px}}

/* The gallery used to carry its own shimmer, painted with an animated
   background-position that never stopped: every tile on a listing page kept
   repainting for the life of the page, long after its photo had arrived. The
   wireframe below does the same job on the same box, is a compositor transform
   rather than a repaint, and comes off the moment the photo lands. */
.rgal-i{opacity:0;transition:opacity .5s ease}
.rgal-i.ld{opacity:1}

/* ── wireframe loading ───────────────────────────────────────
   A photo frame that has not arrived yet draws itself instead of sitting empty:
   blush ground, hairline graph ruling, and one slow sheen crossing it. It reads
   as a plan of the picture rather than the grey shimmer bar every app ships;
   the sheen stays because a frame with no movement at all reads as broken
   rather than as pending.
   .photo-loading is added by assets/imgskel.js ONLY to frames whose photo is
   still on its way, and the photo's opacity is only touched while it carries
   .img-pending — so with JS off, or for anything already in cache, nothing
   hides and nothing flashes.
   The class is doubled on purpose. Every frame it lands on (.pimg, .aphoto,
   .gh-img, .rgal-ph, mid's .pol-img) sets a background SHORTHAND, which resets
   background-image to none, and several are declared later than this block — in
   this file or in the layer stylesheet above it — so at equal specificity the
   ruling simply never drew on them. Doubling the class outranks any single class
   from anywhere, in any file, without an !important. */
.photo-loading.photo-loading{
  background-color:var(--blush);
  background-image:
    linear-gradient(rgba(58,47,39,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(58,47,39,.05) 1px,transparent 1px);
  background-size:32px 32px;background-position:center;position:relative;overflow:hidden}
.photo-loading::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.34) 50%,transparent 62%);
  transform:translateX(-100%);animation:skel 2.4s cubic-bezier(.4,0,.3,1) infinite}
@keyframes skel{to{transform:translateX(100%)}}
.img-pending{opacity:0}
@media(prefers-reduced-motion:reduce){.photo-loading::after{display:none}}
/* A photograph that IS its own box — the post hero, the round portrait on About, the
   thumb in the listings strip — cannot carry a pseudo-element, so it wears the ruling
   on its own background and goes without the sheen. Its border-radius clips it free. */
.photo-loading-self.photo-loading-self{
  background-color:var(--blush);
  background-image:
    linear-gradient(rgba(58,47,39,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(58,47,39,.05) 1px,transparent 1px);
  background-size:32px 32px;background-position:center}
/* the editorial portrait keeps its offset frame while it loads: the wireframe takes the
   photo's own radius rather than clipping the box the frame hangs outside of */
.ed-photo.photo-loading{overflow:visible;border-radius:var(--r-lg)}
.ed-photo.photo-loading::after{border-radius:var(--r-lg)}
/* the life grid sits on ink, so it rules in light rather than in ink */
.life-cell.photo-loading{background-color:var(--ink);
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px)}
.life-cell.photo-loading::after{
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.10) 50%,transparent 62%)}
/* A file that is not there. imgskel.js swaps the source for the drawn Gorge mark, so
   the box, the caption and the alt text all survive and no browser draws its torn page. */
/* !important earns its keep here: the drawn mark is a placeholder, not a photograph,
   and every frame on the site sets object-fit:cover on its own img at a specificity
   this rule cannot reach from one place. `contain` sizes the mark off the SHORT edge,
   so it stays a watermark in a cover photo and stays legible in a 74px thumb. */
img.img-missing{background-color:var(--blush);object-fit:contain!important}
.life-cell img.img-missing{background-color:var(--cream)}

/* editorial variant — cover photo runs large, the rest arrange around it;
   captions are tiny overlays that slide up on hover (and always show in the lightbox) */
/* tight square mosaic: every cell is a square, the lead runs 2x2, dense packing
   fills the gaps (object-fit crops to fit). Capped width keeps the whole block
   a touch smaller and neat rather than full-bleed. */
.rgal.ed{max-width:none}   /* fill the wrap so gallery width matches the page text */
.rgal.ed .rgal-grid{grid-template-columns:repeat(3,1fr);grid-auto-flow:dense;gap:14px}
/* the FIGURE is the square, and the photo fills it 100% — so captions are always
   pinned to the image edge (never floating in leftover cell space) and the rows
   line up with no gaps between the right-hand photos */
.rgal.ed .rgal-t{position:relative;aspect-ratio:1}
.rgal.ed .rgal-ph{aspect-ratio:auto;height:100%}
.rgal.ed .rgal-t:first-child{grid-column:span 2;grid-row:span 2}
.rgal.ed .rgal-t:hover .rgal-ph,.rgal.ed .rgal-t:focus-visible .rgal-ph{transform:none;box-shadow:var(--shadow-2)}
.rgal.ed .rgal-t:hover .rgal-i{transform:scale(1.025)}
.rgal.ed .rgal-i{transition:opacity .5s ease,transform .45s cubic-bezier(.2,.6,.2,1)}
.rgal.ed figcaption{position:absolute;left:1px;right:1px;bottom:1px;margin:0;padding:26px 13px 9px;text-align:left;
  font-size:11px;line-height:1.45;letter-spacing:.015em;color:#fff;border-radius:0 0 13px 13px;
  background:linear-gradient(180deg,rgba(20,22,26,0),rgba(20,22,26,.66));
  transform:translateY(102%);opacity:0;pointer-events:none;
  transition:transform .38s cubic-bezier(.2,.6,.2,1),opacity .3s ease}
.rgal.ed .rgal-t:hover figcaption,.rgal.ed .rgal-t:focus-visible figcaption{transform:none;opacity:1}
@media(max-width:560px){
  .rgal.ed .rgal-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .rgal.ed .rgal-t:first-child{grid-column:span 2;grid-row:span 2}
  .rgal.ed figcaption{display:none}  /* no hover on touch: captions live in the slideshow */
}

/* showcase variant (listing pages) — the cover and ONE side block of thumbs,
   side by side, nothing underneath. The .cmp band below owns that shape at every
   photo count (Eric, 2026-08-21); these --sc-cols / --sc-lead / --sc-rows rules
   now serve the solo cover and the retired rectangle path only. The template
   solves every number (the invariant is stated in full in
   themes/grace/_gallery.php); nothing here decides shape.
   grace-mid inherits this file through asset(), so it gets the same geometry. */
.rgal.ed.sh .rgal-grid{grid-template-columns:repeat(var(--sc-cols,6),1fr)}
.rgal.ed.sh .rgal-t{grid-column:span var(--sc-thumb,1)}
/* the cover fills the cells it spans and asks for no height of its own: its
   photo is taken OUT OF FLOW, so the square thumbs alone size the rows and the
   cover's proportions never enter into it. Exact at any gap, which an
   aspect-ratio of --sc-lead / --sc-rows is not, and it is what lets a cover run
   wider than tall (4x3, 5x3) without dragging the cells out of square. */
.rgal.ed.sh .rgal-t:first-child{grid-column:span var(--sc-lead,4);grid-row:span var(--sc-rows,4);aspect-ratio:auto;min-height:0}
.rgal.ed.sh .rgal-t:first-child .rgal-ph{position:absolute;inset:0;height:auto}
.rgal.ed.sh.solo .rgal-t:first-child{aspect-ratio:3/2;max-height:550px}

/* "See all N photos" — the inline grid stops at seven tiles (cover + six), so
   the sixth thumb carries a pill into the viewer. It sits inside the figure (already
   position:relative) and stays clickable: the click handler reads it and opens
   at the first photo rather than at this tile. The icon is pointer-events:none
   so the event target is always the pill itself. */
.rgal.ed.sh .rgal-more{position:absolute;left:50%;transform:translateX(-50%);bottom:8px;z-index:3;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:7px 12px;border-radius:99px;
  max-width:calc(100% - 12px);
  background:rgba(46,38,31,.84);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#fff;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;
  line-height:1;white-space:nowrap;box-shadow:0 4px 14px rgba(34,30,24,.3);
  transition:background .25s ease,transform .25s cubic-bezier(.2,.6,.2,1)}
.rgal.ed.sh .rgal-more svg{pointer-events:none;opacity:.9}
.rgal.ed.sh .rgal-t:hover .rgal-more,.rgal.ed.sh .rgal-t:focus-visible .rgal-more{
  /* colour only: translateY alone would drop the centring translateX and
     throw the pill half its width to the left on hover */
  background:var(--clay);transform:translateX(-50%)}
@media(max-width:560px){
  .rgal.ed.sh .rgal-more{right:6px;bottom:6px;padding:7px 11px;font-size:11px;gap:5px}
}   /* one photo: 3:2 until the 550px ceiling */

/* compact band — EVERY showcase gallery with a thumb in it. The cover runs down
   the left at 3:2 and the thumbs sit two across beside it, ending exactly level
   with its bottom edge, at most two columns of three (the inline set is capped
   at seven tiles, so the band never grows past that and nothing ever lands
   below the cover). Sized explicitly: the block gets a definite height from --sc-ar, the
   rows divide it as fr, and every cell's column and row span is solved in
   themes/rose/_gallery.php. Desktop only, so the phone rules below are
   untouched — and the placements arrive as custom properties, not inline
   grid-column, so those rules can still override them. */
@media(min-width:561px){
  .rgal.ed.sh.cmp .rgal-grid{grid-template-columns:var(--sc-tracks,3fr 2fr 2fr);
    grid-template-rows:repeat(var(--sc-rw,1),1fr);aspect-ratio:var(--sc-ar,2.532);max-height:550px}
  /* align-self is spelled out because a fork (grace-alt) sets it to start on
     every editorial tile; a compact cell must fill the rows it was given */
  .rgal.ed.sh.cmp .rgal-t,.rgal.ed.sh.cmp .rgal-t:first-child{
    grid-column:var(--gc,auto);grid-row:var(--gr,auto);aspect-ratio:auto;
    align-self:stretch;justify-self:stretch;min-width:0;min-height:0}
  .rgal.ed.sh.cmp .rgal-ph{position:absolute;inset:0;height:auto}
}
@media(max-width:560px){
  /* phone: the cover full width, then --sc-ph thumbs across (3 or 4, whichever
     leaves no straggler; 110px+ targets at 390 either way) */
  .rgal.ed.sh .rgal-grid{grid-template-columns:repeat(var(--sc-ph,3),1fr)}
  .rgal.ed.sh .rgal-t{grid-column:span 1;grid-row:auto;aspect-ratio:1}
  .rgal.ed.sh .rgal-grid{grid-template-rows:none;aspect-ratio:auto;max-height:none}
  .rgal.ed.sh .rgal-t .rgal-ph,.rgal.ed.sh .rgal-t:first-child .rgal-ph{position:relative;inset:auto;height:100%}
  .rgal.ed.sh .rgal-t.phw{grid-column:1/-1;aspect-ratio:var(--sc-ph,3)}
  .rgal.ed.sh .rgal-t:first-child{grid-column:1/-1;grid-row:auto;aspect-ratio:4/3}
}
/* lightbox */
#rgal-m{display:none;position:fixed;inset:0;z-index:150;background:rgba(24,26,30,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);flex-direction:column;align-items:center;justify-content:center;padding:54px 16px calc(20px + env(safe-area-inset-bottom,0px));cursor:zoom-out}
#rgal-m.open{display:flex}
#rgal-m .rgal-stage{display:flex;align-items:center;justify-content:center;max-width:100%;flex:1;min-height:0}
#rgal-m .rgal-media{max-width:min(92vw,1100px);max-height:76vh;width:auto;height:auto;object-fit:contain;border-radius:12px;box-shadow:0 34px 90px rgba(0,0,0,.55);cursor:default}
#rgal-m .rgal-cap{margin-top:14px;color:#E8E4E0;font-size:14.5px;text-align:center;max-width:640px}
#rgal-m .rgal-count{position:fixed;top:max(18px,env(safe-area-inset-top));left:20px;color:#B9BEC6;font:600 12px 'Inter',sans-serif;letter-spacing:.08em}
#rgal-m .rgal-x{position:fixed;top:max(14px,env(safe-area-inset-top));right:14px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(34,37,42,.5);color:#fff;font-size:16px;cursor:pointer;z-index:2}
#rgal-m .rgal-x:hover{background:rgba(255,255,255,.18)}
#rgal-m .rgal-nav{position:fixed;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);background:rgba(34,37,42,.45);color:#fff;font-size:22px;line-height:1;cursor:pointer;z-index:2;transition:background .15s,border-color .15s}
#rgal-m .rgal-nav:hover{background:rgba(255,255,255,.16);border-color:#fff}
#rgal-m .rgal-prev{left:14px}
#rgal-m .rgal-next{right:14px}
@media(max-width:640px){
  #rgal-m .rgal-media{max-width:96vw;max-height:70vh}
  #rgal-m .rgal-nav{top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:none;width:52px;height:44px;border-radius:99px}
  #rgal-m .rgal-prev{left:calc(50% - 62px)}
  #rgal-m .rgal-next{right:calc(50% - 62px)}
  #rgal-m .rgal-cap{margin-bottom:52px;font-size:13.5px}
}

/* ── inline editing (only present when logged in: body.rre-edit) ─────────── */
.rre-edit .rre-editable{position:relative}
.rre-edit .rre-editable:hover{outline:1.5px dashed var(--accent-soft);outline-offset:8px;border-radius:2px}
.rre-edit .rre-edit-tab{
  position:absolute;top:8px;right:8px;z-index:40;
  display:inline-flex;align-items:center;gap:5px;
  font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;line-height:1;
  color:#fff;background:var(--accent);border:0;border-radius:99px;
  padding:6px 12px;cursor:pointer;text-decoration:none;white-space:nowrap;
  box-shadow:0 4px 14px rgba(183,110,121,.4);
  opacity:0;transform:translateY(-4px);transition:opacity .16s,transform .16s,background .16s}
/* Always faintly present, not hover-revealed: Grace could not know a section
   was editable without accidentally mousing over it. Every pill shows at 60%
   wherever she is on the page and firms up as she approaches. */
.rre-edit .rre-edit-tab{opacity:.6;transform:none}
.rre-edit .rre-editable:hover > .rre-edit-tab,
.rre-edit [data-edit-link]:hover > .rre-edit-tab,
.rre-edit .rre-edit-tab:hover,
.rre-edit .rre-edit-tab:focus-visible{opacity:1;transform:none}
.rre-edit .rre-edit-tab:hover{background:var(--accent-deep)}
@media(hover:none){.rre-edit .rre-edit-tab{opacity:.92;transform:none}}   /* touch: keep it visible */

/* fixed Save / Cancel bar */
.rre-bar{position:fixed;left:50%;bottom:22px;z-index:1000;
  display:flex;align-items:center;gap:12px;
  background:var(--ink);color:#fff;border-radius:99px;padding:10px 12px 10px 20px;
  box-shadow:0 12px 40px rgba(20,22,26,.4);transition:transform .28s cubic-bezier(.2,.6,.2,1);
  transform:translate(-50%,140%);visibility:hidden}   /* hidden when idle: keeps iOS from adding phantom scroll space below the footer */
.rre-bar.show{transform:translate(-50%,0);visibility:visible}
.rre-bar-label{font-size:13px;font-weight:500;color:#D9BCC1;margin-right:4px;white-space:nowrap}
.rre-btn{font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;border:0;border-radius:99px;
  padding:9px 20px;cursor:pointer;background:var(--accent);color:#fff;transition:background .15s,opacity .15s}
.rre-btn:hover{background:var(--accent-deep)}
.rre-btn[disabled]{opacity:.6;cursor:default}
.rre-btn.ghost{background:transparent;color:#C9BEB9;padding:9px 14px}
.rre-btn.ghost:hover{background:rgba(255,255,255,.08);color:#fff}

/* toast */
.rre-toast{position:fixed;left:50%;bottom:88px;transform:translate(-50%,16px);z-index:1001;
  background:#22252A;color:#fff;font-size:13.5px;font-weight:500;
  padding:11px 20px;border-radius:99px;box-shadow:0 10px 34px rgba(20,22,26,.35);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.rre-toast.show{opacity:1;transform:translate(-50%,0)}
.rre-toast.err{background:var(--accent-deep)}

/* TinyMCE inline: give the active region a soft rose frame */
.rre-edit .mce-content-body.mce-edit-focus{outline:2px solid var(--accent)!important;outline-offset:8px;border-radius:2px}
.rre-active .rre-edit-tab{display:none}   /* hide tabs while one section is being edited */

/* ── contact modal ───────────────────────────────────────── */
.cmodal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.cmodal[hidden]{display:none}
.cmodal-back{position:absolute;inset:0;background:rgba(34,37,42,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.cmodal-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);max-width:540px;width:100%;padding:38px 36px 34px;box-shadow:var(--shadow-2);max-height:calc(100dvh - 40px);overflow:auto}
.cmodal-x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:99px;border:1px solid var(--line);background:#fff;font-size:19px;line-height:1;cursor:pointer;color:var(--slate)}
.cmodal-x:hover{border-color:var(--accent);color:var(--accent-deep)}
.cmodal h3{font-family:'Besley',serif;font-size:27px;margin-top:8px}
.cmodal h3 em{font-style:italic;color:var(--accent)}
.cmodal-sub{font-size:14px;color:var(--slate);margin-top:8px}
.cmodal-sub a{font-weight:600;white-space:nowrap}
.cm-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:560px){.cm-grid{grid-template-columns:1fr}}
.cm-done{margin-top:20px;font-size:15px;font-weight:600;color:var(--ink)}
.cm-err{margin-top:14px;font-size:13.5px;color:var(--accent-deep)}
/* inline form validation message */
.form-err,.cm-err{margin-top:14px;font-size:13.5px;color:var(--accent-deep);font-weight:500}
.form-err[hidden]{display:none}
.muted-note{font-weight:400;color:var(--slate);font-size:.9em}
/* Turnstile: leave the widget's native Cloudflare card as-is; just center it with spacing */
.cf-turnstile,.cm-turnstile{margin:16px auto 4px;min-height:65px;display:flex;justify-content:center}

/* staff pill: transparent quick-access to the dashboard, bottom-left, logged-in only */
.staff-pill{
  position:fixed;left:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:150;
  display:flex;align-items:center;border-radius:99px;overflow:hidden;
  background:rgba(250,247,244,.55);border:1px solid rgba(34,37,42,.14);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 18px rgba(34,37,42,.12);
}
.staff-pill a{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:none;transition:background .15s,color .15s}
.staff-pill a:hover{background:rgba(255,255,255,.8);color:var(--accent-deep)}
.staff-pill svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.staff-pill span{width:1px;height:15px;background:rgba(34,37,42,.16)}
@media(max-width:560px){.staff-pill{left:10px}.staff-pill a{padding:8px 12px;font-size:12px}}
@media print{.staff-pill{display:none}}
@media(max-width:560px){
  .cm-grid{grid-template-columns:1fr}
  /* stay centered on phones (not a bottom sheet): a native-feeling card that fits */
  .cmodal{padding:14px}
  .cmodal-card{border-radius:18px;max-height:calc(100dvh - 28px);padding:30px 22px 26px}
  .cmodal h3{font-size:24px}
}

/* ── market reports (pSEO pages) ─────────────────────────── */
/* toolbar: search + sort, sticky just under the nav for a long list */
.mtools{position:sticky;top:60px;z-index:40;display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  padding:12px 0;margin-bottom:2px;background:linear-gradient(180deg,var(--paper) 78%,rgba(250,247,244,0))}
.msearch{position:relative;flex:1 1 260px;min-width:220px}
.msearch svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:17px;height:17px;fill:none;stroke:var(--slate);stroke-width:2;stroke-linecap:round}
.msearch input{width:100%;padding:12px 16px 12px 42px;border:1px solid var(--line);border-radius:99px;font:15px 'Inter',sans-serif;background:#fff;color:var(--ink)}
.msearch input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(183,110,121,.16)}
.msort{display:flex;align-items:center;gap:9px;flex-shrink:0}
.msort label{font-size:13px;color:var(--slate)}
.msort select{padding:11px 38px 11px 15px;border:1px solid var(--line);border-radius:99px;font:14px 'Inter',sans-serif;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235F6B7A' stroke-width='1.8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") no-repeat right 15px center;
  color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none}
.msort select:focus{outline:none;border-color:var(--accent)}
.mcount{font-size:12.5px;color:var(--slate);margin:2px 0 18px}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:13px}
.mcard{display:flex;flex-direction:column;gap:3px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:15px 17px;text-decoration:none;color:var(--ink);transition:transform .18s,box-shadow .18s,border-color .18s}
.mcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-1);border-color:var(--accent)}
.mcity-name{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mzip{font-family:'Besley',serif;font-size:20px;font-weight:600;line-height:1.1}
.mval{font-size:14px;color:var(--accent-deep);font-weight:600;margin-top:1px}
.mval-l{font-weight:500;color:var(--slate);font-size:11.5px}
.mmeta{font-size:11.5px;color:var(--slate)}
.mempty{font-size:14.5px;color:var(--slate);padding:26px 2px}
@media(max-width:560px){
  .mtools{top:56px}
  .msort{flex:1 1 100%}
  .msort select{flex:1}
  .mgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
}
/* minmax(0,1fr), not bare 1fr: an fr track refuses to shrink below its
   min-content, and a wide dollar value ("$421,975" at the mid overlay's 30px)
   pushed the second column past the phone viewport — the right cards rendered
   cut off at 390px (Eric, 2026-08-13). */
.mstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:900px){.mstats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mstat{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:20px 18px;text-align:center}
.ms-v{display:block;font-family:'Besley',serif;font-size:clamp(20px,2.6vw,28px);font-weight:600}
.ms-l{display:block;font-size:11.5px;color:var(--slate);margin-top:4px;letter-spacing:.02em}
.mverdict{margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 28px}
.mv-text{font-family:'Besley',serif;font-size:clamp(17px,2.2vw,21px);line-height:1.55}
.mfaq{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
@media(max-width:760px){.mfaq{grid-template-columns:1fr}}
.mqa{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px}
.mqa h3{font-size:17.5px;margin-bottom:6px}
.mqa p{font-size:14px;color:var(--slate)}
.msrc{font-size:12px;margin-top:16px}
.mnear{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center}
.mnear a{font-size:13.5px;white-space:nowrap}

/* ── tiny bright accents (07-09): small bold color moments, kept quiet.
   Jewel tones only — the green is DEEP emerald (brand rule: no light green). ── */
::selection{background:var(--accent-deep);color:#fff}
/* a small pride ribbon tucked under the footer tagline */
.pride{display:inline-flex;width:66px;height:4px;border-radius:99px;overflow:hidden;margin:2px 0 14px}
.pride i{flex:1}
.pride i:nth-child(1){background:#C0394B}
.pride i:nth-child(2){background:#D06B2E}
.pride i:nth-child(3){background:#C9A22E}
.pride i:nth-child(4){background:#1E6B3E}
.pride i:nth-child(5){background:#3F63B0}
.pride i:nth-child(6){background:#7A4E9E}
/* pops: the admin-chosen hero word + the last word of homepage section titles,
   in the same bright pink-red as the primary buttons */
.hero h1 .pop{color:#D9B588}
.shead h2 .pop{color:#B07E3F}   /* deepened Harvest Gold: legible at display sizes */

/* brokerage attribution: typographic, replaces the image badge */
.bk-name{font-family:'Besley',Georgia,serif;font-size:17px;color:var(--paper);letter-spacing:.01em}

/* Slim listings band: shown instead of the four-up grid when her active count
   is under the threshold, because one card in a four-column grid reads as a
   layout bug rather than a small inventory. */
.listings-slim{padding:clamp(44px,6vw,68px) 0}
.lslim{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.lslim-line{font-family:'Besley',Georgia,serif;font-size:clamp(21px,3vw,28px);line-height:1.3;color:var(--ink);max-width:24ch}
@media (min-width:760px){
  .lslim{flex-direction:row;align-items:center;justify-content:space-between;gap:24px}
  .lslim .eyebrow{flex:0 0 auto}
  .lslim-line{flex:1 1 auto;max-width:none}
}

/* ── ZIP market pages: the five-year trend, and the guides behind the numbers ── */

/* Chart is server-drawn SVG so it needs no script and cannot fail to appear. */
.mchart{margin:0;border:1px solid var(--line,#DDD5C9);border-radius:10px;background:var(--paper,#F6F2EC);overflow:hidden}
.mchart svg{display:block;width:100%;height:clamp(140px,22vw,200px)}
.mchart-fill{fill:var(--blush,#EFEAE0)}
.mchart-line{fill:none;stroke:var(--accent,#4A6741);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.mchart figcaption{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;
  border-top:1px solid var(--line,#DDD5C9);font-size:13px;color:var(--ink-2,#4A3F33);background:var(--cream,#E8E2D9)}
.mchart figcaption span:nth-child(2){font-weight:600;color:var(--ink,#3A2F27)}

.mtrend-yoy{display:flex;align-items:baseline;gap:8px;margin:0}
.mt-n{font-family:'Besley',Georgia,serif;font-size:clamp(28px,4vw,40px);line-height:1;color:var(--ink,#3A2F27)}
.mt-n.up{color:var(--accent-deep,#3A5233)}
.mt-n.down{color:var(--clay,#8C6A3F)}
.mt-l{font-size:13px;letter-spacing:.02em;color:var(--slate,#6B5E54)}
.mtrend-say{margin:16px 0 0;max-width:62ch;font-size:clamp(16px,1.6vw,18px);line-height:1.6;color:var(--ink-2,#4A3F33)}

/* Guide teasers + neighborhood index: the Journal card, retold. Image-top
   3:2 smart crop (wcard, same cropper the posts use); a guide with no
   relevant photo is a text card, never a placeholder slab. */
.ghints{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:720px){.ghints{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}
.ghint,.nbcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line,#DDD5C9);
  border-radius:var(--r-lg,20px);overflow:hidden;color:var(--ink,#3A2F27);text-decoration:none;
  transition:transform .25s,box-shadow .25s}
.ghint:hover,.nbcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-2)}
@media (hover:none){.ghint:hover,.nbcard:hover{transform:none;box-shadow:none}}
.ghint:focus-visible,.nbcard:focus-visible{outline:2px solid var(--accent,#4A6741);outline-offset:3px}
.gh-img,.nb-img{display:block;aspect-ratio:16/9;background:var(--blush,#EFEAE0);overflow:hidden}
.gh-img img,.nb-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.ghint:hover .gh-img img,.nbcard:hover .nb-img img{transform:scale(1.04)}
.gh-body,.nb-body{display:flex;flex-direction:column;gap:7px;padding:18px 20px 20px}
.gh-k{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent,#4A6741)}
.gh-t{font-family:var(--display,'Besley',Georgia,serif);font-size:21px;line-height:1.25;color:var(--ink,#3A2F27)}
.gh-d{font-size:14px;line-height:1.6;color:var(--slate,#6B5E54)}
.gh-go{margin-top:2px;font-size:14px;font-weight:600;color:var(--accent-deep,#3A5233)}
/* Guides carry no rules at the top (Eric, 2026-08-13): neither the header
   hairline nor the little dash before the eyebrow. */
.phead.plain{border-bottom:0}
.phead.plain .eyebrow::before{display:none}
.nbgrid{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:720px){.nbgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.nbgrid{grid-template-columns:repeat(3,1fr)}}
.nb-t{font-family:var(--display,'Besley',Georgia,serif);font-size:21px;font-weight:600;line-height:1.25;margin:0;color:var(--ink,#3A2F27)}
.nb-meta{font-size:13px;line-height:1.5;color:var(--slate,#6B5E54)}
.nb-d{font-size:14px;line-height:1.6;color:var(--ink-2,#4A3F33)}

/* Hub: ZIPs with a written guide lead the grid and name the area's guide. */
.mcard.guided{border-color:var(--accent-soft,#CFD9C5);background:linear-gradient(180deg,var(--cream,#E8E2D9) 0%,var(--paper,#F6F2EC) 46%)}
.mguide{display:flex;align-items:center;gap:6px;margin-top:9px;padding-top:9px;
  border-top:1px solid var(--accent-soft,#CFD9C5);font-size:12.5px;font-weight:600;
  color:var(--accent-deep,#3A5233);line-height:1.35}
.mguide svg{width:14px;height:14px;flex:none}

/* Washington ZIP note: the market data spans the river, her licence does not.
   Stated on the page rather than buried, because a valuation CTA on a state
   she cannot transact in is the kind of thing that draws a complaint. */
.wanote{display:flex;gap:11px;align-items:flex-start;margin:0;padding:16px 18px;
  border:1px solid var(--accent-soft,#CFD9C5);border-left:3px solid var(--accent,#4A6741);
  border-radius:10px;background:var(--cream,#E8E2D9);font-size:15px;line-height:1.6;
  color:var(--ink-2,#4A3F33);max-width:74ch}
.wanote svg{width:19px;height:19px;flex:none;margin-top:2px;color:var(--accent,#4A6741)}

/* The hero's edit tab used to render at top:8px — underneath the overlay nav,
   so a logged-in Grace never saw it. It sits below the nav line and stays
   visible without hover: the hero is the first thing she'll want to change. */
.rre-edit .hero > .rre-edit-tab{top:86px;right:14px;opacity:.92;transform:none}
@media(max-width:760px){.rre-edit .hero > .rre-edit-tab{top:74px}}

/* The hero's animated scroll cue is a mystery pill until you hover it: a small
   label slides in from its left naming what a click does. Text rides in the
   data-tip attribute so each theme can phrase it without new CSS. */
.scroll-cue{position:absolute}   /* restated so ::after anchors predictably */
.scroll-cue::after{
  content:attr(data-tip);
  position:absolute;right:calc(100% + 12px);top:50%;
  transform:translateY(-50%) translateX(6px);
  white-space:nowrap;padding:8px 14px;border-radius:99px;
  background:rgba(20,22,26,.82);color:#fff;
  font:600 12.5px/1 'Inter',sans-serif;letter-spacing:.01em;
  opacity:0;pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
}
.scroll-cue:hover::after,.scroll-cue:focus-visible::after{
  opacity:1;transform:translateY(-50%) translateX(0);
}

/* ---------------------------------------------------------------------------
   Old-browser floor (Safari 14 and older, and the Android WebViews that track
   it). Two properties this stylesheet leans on hard did not exist there, and
   both fail to nothing rather than to something smaller:
     aspect-ratio · the photo frames become boxes with no height, so listing
                    cards, blog cards, galleries and guide teasers rendered as
                    invisible slabs.
     inset        · the modals and the lightbox lose their positioning and
                    stop covering the screen.
   The percentages restate the ratios above and have to move with them:
   4/3 = 75%, 16/9 = 56.25%, 3/2 = 66.667%. Check the ratio against the
   VERSIONED asset url (style.css?v=NN) or the rendered box, never the bare
   path: Cloudflare keys on the full url, so the unversioned file can serve an
   hour-old copy and tell you the ratio is still what it used to be. Both blocks are inert wherever the
   real properties exist. The layer themes inherit this file, so it covers
   grace-alt and grace-mid too.
--------------------------------------------------------------------------- */
@supports not (aspect-ratio: 4 / 3) {
  .lphoto, .rgal-ph, .pimg, .vwrap, .gh-img, .nb-img { position: relative; }
  .lphoto, .rgal-ph { height: 0; padding-top: 75%; }        /* 4:3 */
  .pimg, .vwrap { height: 0; padding-top: 56.25%; }         /* 16:9 */
  .gh-img, .nb-img { height: 0; padding-top: 56.25%; }       /* 16:9 */
  .lphoto > *, .rgal-ph > *, .pimg > *, .vwrap > *, .gh-img > *, .nb-img > * {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  }
}
@supports not (inset: 0) {
  .cmodal, .cmodal-back, .vmodal, #rgal-m { top: 0; right: 0; bottom: 0; left: 0; }
}

/* one-photo layout: the image sits in the column, the sidebar rises level with it */
.sec.lsolo .lside{margin-top:0}


/* ── the viewer, while the full-size file is still on its way ──────────────
   Same language as the wireframe loading above, on a dark ground: ruled box,
   one slow sheen, and the 720px rendition blurred underneath as soon as it
   decodes. --rgal-ar is set from that rendition's real proportions, so the box
   is the size the photograph will be and nothing jumps when it arrives. The
   3/2 default is what a listing photo almost always is. */
#rgal-m .rgal-box{width:min(92vw,1100px);aspect-ratio:var(--rgal-ar,3/2);max-height:76vh;
  border-radius:12px;position:relative;overflow:hidden;
  background-color:rgba(255,255,255,.045);box-shadow:0 34px 90px rgba(0,0,0,.45)}
#rgal-m .rgal-box::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:32px 32px;background-position:center}
/* the blurred stand-in overhangs its box so its own soft edge never shows */
#rgal-m .rgal-pre{position:absolute;top:-6%;right:-6%;bottom:-6%;left:-6%;
  background-position:center;background-size:cover;
  -webkit-filter:blur(14px) saturate(1.05);filter:blur(14px) saturate(1.05);opacity:.7}
#rgal-m .rgal-box::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.14) 50%,transparent 62%);
  transform:translateX(-100%);animation:rgalskel 2.2s cubic-bezier(.4,0,.3,1) infinite}
@keyframes rgalskel{to{transform:translateX(100%)}}
#rgal-m .rgal-media{animation:rgalfade .26s ease both}
@keyframes rgalfade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  #rgal-m .rgal-box::after{display:none}
  #rgal-m .rgal-media{animation:none}
}
@media(max-width:640px){#rgal-m .rgal-box{width:96vw;max-height:70vh}}