/* Layout: Amy's template image as the homepage, exactly as supplied, with invisible links over its logo and menu.
   Every color is sampled from that photo: sapphire sky, iris and orchid clouds, coral and apricot horizon, lamp glow, midnight river.
   Light sections alternate with midnight "after dark" bands lit by soft sunset glows. */
:root {
  --midnight: #171236;     /* river after dark */
  --midnight-2: #231d4e;
  --sapphire: #1e45be;     /* upper sky */
  --iris: #5854d3;         /* mid sky */
  --orchid: #b862d6;       /* clouds */
  --coral: #f97d7b;        /* horizon */
  --apricot: #fd9f6c;      /* horizon glow */
  --lamp: #ffc66d;         /* street lamps */
  --river: #4b65f0;        /* reflected water */
  --periwinkle: #646fc4;   /* Seaflower periwinkle, nudged toward the photo's iris sky: menu bar + calls to action */
  --periwinkle-hi: #7a84d4;
  --sunset: linear-gradient(100deg, var(--iris) 0%, var(--orchid) 38%, var(--coral) 72%, var(--apricot) 100%);

  --page: #ffffff;
  --haze: #f5f3fd;         /* faint lavender wash */
  --text: #1f1c35;
  --muted: #62647f;
  --line: #e7e5f3;
  --card: #ffffff;
  --link: #4a46c6;
  --on-dark: #ffffff;
  --on-dark-muted: #c9c8ee;

  --f-head: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Figtree", "Helvetica Neue", Arial, sans-serif;

  --s-hero: clamp(2.6rem, 5.4vw + .6rem, 5.2rem);
  --s-2: clamp(2rem, 2.8vw + .8rem, 3rem);
  --s-3: clamp(1.25rem, .6vw + 1rem, 1.5rem);
  --wrap: 1200px;
  --radius: 22px;
}
@media all {
  :root {
    --page: #120f2b; --haze: #1a173a; --text: #eceaff; --muted: #a9a8cf; --line: #2e2958; --card: #1c193d; --link: #a9a6ff;
    color-scheme: dark;
  }
}
:root {
  --page: #120f2b; --haze: #1a173a; --text: #eceaff; --muted: #a9a8cf; --line: #2e2958; --card: #1c193d; --link: #a9a6ff;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--text); font-family: var(--f-body); font-size: 1.0625rem; line-height: 1.65; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--midnight); }
h1, h2, h3 { font-family: var(--f-head); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--lamp); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

.band { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.wrap { max-width: var(--wrap); margin: 0 auto; }
.eyebrow { font-family: var(--f-head); font-size: .8rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--link); }
.glow-text { background: linear-gradient(100deg, #9a97ff 0%, #c98ae6 38%, var(--coral) 72%, var(--apricot) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sunset-rule { height: 4px; border-radius: 4px; background: var(--sunset); width: 72px; }

.logo { display: block; aspect-ratio: 752 / 180; background: currentColor;
  -webkit-mask: url(images/seaflower-logo-white.png) no-repeat center / contain; mask: url(images/seaflower-logo-white.png) no-repeat center / contain; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: 500 1rem/1 var(--f-head); padding: 1.05rem 1.6rem; border-radius: 999px; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-cta { background: var(--periwinkle); color: #fff; box-shadow: 0 12px 30px -14px rgba(100,111,196,.9), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-cta:hover { background: var(--periwinkle-hi); box-shadow: 0 16px 36px -12px rgba(184,98,214,.7), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-glass { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.55); color: #fff; backdrop-filter: blur(8px); }
.btn-glass:hover { background: rgba(255,255,255,.22); }

/* ---------- Header: frozen at the top on every page ----------
   Wide screens: at the top of Home, Amy's template image is the menu (invisible links sit over its logo and
   ABOUT/SERVICES/LISTINGS/CONTACT and scroll away with the photo). As that menu scrolls off, the periwinkle
   bar glides down into place and stays frozen. Every other page shows the periwinkle bar from the start.
   Narrow screens: a slim bar with the logo and a hamburger that opens a side drawer over the page. */
:root { --hh: 84px; --logo-periwinkle: var(--periwinkle); }
@media (max-width: 760px) { :root { --hh: 78px; } }
.site-header { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 50; pointer-events: none; }
.site-header > * { pointer-events: auto; }
.img-nav { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1535 / 1025; pointer-events: none; }
.img-nav a { pointer-events: auto; }
.img-nav .hotspot { position: absolute; z-index: 2; display: block; border-radius: 6px; }
.img-nav .hs-logo { left: 4.3%; top: 5%; width: 31.8%; height: 11.6%; }
.img-nav .hs-about { left: 55.1%; top: 5.2%; width: 6.6%; height: 4.4%; }
.img-nav .hs-services { left: 64.4%; top: 5.2%; width: 8.4%; height: 4.4%; }
.img-nav .hs-listings { left: 75.7%; top: 5.2%; width: 8%; height: 4.4%; }
.img-nav .hs-contact { left: 86.6%; top: 5.2%; width: 8.4%; height: 4.4%; }
/* HOME added to the photo's menu, set to match its lettering (Amy asked for Home before About) */
.hero-template { container-type: inline-size; }
.img-nav .img-home { position: absolute; z-index: 2; right: 48%; top: 6.27%; width: 4.594%; }
.img-nav .img-home img { display: block; width: 100%; height: auto; }
/* Hover: a frosted rounded highlight eases in behind each menu word */
.img-nav .hotspot:not(.hs-logo)::before, .img-nav .img-home::before { content: ""; position: absolute; z-index: -1; border-radius: 999px;
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.45); box-shadow: 0 6px 18px -8px rgba(18,12,49,.6);
  opacity: 0; transform: scale(.88); transition: opacity .2s ease, transform .2s ease; }
.img-nav .hotspot:not(.hs-logo)::before { inset: 4% -14%; }
.img-nav .img-home::before { inset: -.72cqw -1.25cqw; }
.img-nav .hotspot:not(.hs-logo):hover::before, .img-nav .img-home:hover::before,
.img-nav .hotspot:not(.hs-logo):focus-visible::before, .img-nav .img-home:focus-visible::before { opacity: 1; transform: scale(1); }
/* Phones: the periwinkle bar carries the logo and menu, and the photo below it shows without its own small copies */
@media (max-width: 760px) { .img-nav { display: none; } }
.bar { display: none; }
/* Periwinkle menu bar: on every page except the top of Home, where the image itself is the menu */
.pbar { display: none; height: var(--hh); background: var(--logo-periwinkle); color: #fff; box-shadow: 0 10px 30px -14px rgba(13,9,32,.7);
  transition: transform .45s cubic-bezier(.22,.8,.3,1), opacity .35s ease, visibility 0s linear 0s; }
.pbar-in { max-width: 1320px; margin: 0 auto; height: 100%; display: flex; align-items: center; gap: 1.2rem; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.pbar .brand { width: 230px; color: #fff; flex: none; }
.est { font-family: var(--f-head); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.85); padding-left: 1.1rem; border-left: 1px solid rgba(255,255,255,.4); white-space: nowrap; }
.pnav { margin-left: auto; display: flex; gap: clamp(.6rem, 1.6vw, 1.8rem); }
.pnav a { font-family: var(--f-head); font-weight: 500; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; position: relative; padding: .45rem .9rem; border-radius: 999px; border: 1px solid transparent; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.pnav a:hover, .pnav a:focus-visible { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); }
.pnav a::after { content: ""; position: absolute; left: .9rem; right: .9rem; bottom: 2px; height: 2px; border-radius: 2px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.pnav a[aria-current="page"]::after { transform: scaleX(1); }
@media (max-width: 1080px) {
  .pbar-in { gap: .9rem; }
  .pbar .brand { width: 170px; }
  .pbar .est { font-size: .66rem; padding-left: .8rem; }
  .pnav { gap: .2rem; }
  .pnav a { font-size: .86rem; letter-spacing: .05em; padding-inline: .6rem; }
  .pnav a::after { left: .6rem; right: .6rem; }
}
@media (min-width: 761px) {
  .pbar { display: block; }
  body[data-page="home"] .site-header:not(.scrolled) .pbar { transform: translateY(-100%); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .35s ease, opacity .3s ease, visibility 0s linear .35s; }
}
@media (max-width: 760px) {
  .bar { display: flex; align-items: center; justify-content: space-between; height: var(--hh); padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); background: var(--logo-periwinkle); color: #fff; }
  .bar .brand { width: min(240px, calc(100vw - 140px)); flex: none; color: #fff; }
  .bar .est { margin-right: auto; margin-left: .6rem; font-size: .58rem; letter-spacing: .1em; padding-left: .6rem; }
  .bar { box-shadow: 0 10px 30px -14px rgba(13,9,32,.7); }
}
@media (max-width: 400px) { .bar .est { display: none; } .bar .brand { width: min(240px, calc(100vw - 96px)); } }
.menu-btn { background: none; border: 0; color: #fff; padding: .5rem; cursor: pointer; border-radius: 10px; }
.menu-btn svg { width: 30px; height: 30px; display: block; }

/* Side drawer (opens over the page, never pushes it down) */
.backdrop { position: fixed; inset: 0; z-index: 65; background: rgba(11,8,24,.55); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(260px, 72vw); display: flex; flex-direction: column; gap: .2rem;
  padding: calc(env(safe-area-inset-top, 0px) + 1rem) max(20px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 2rem) 1.6rem;
  background: linear-gradient(170deg, var(--midnight) 0%, #2b2262 60%, #3a2c86 100%); color: #fff; box-shadow: -20px 0 50px -20px rgba(0,0,0,.6);
  transform: translateX(100%); visibility: hidden; transition: transform .32s ease, visibility .32s ease; overflow-y: auto; }
body.menu-open .drawer { transform: none; visibility: visible; }
body.menu-open .backdrop { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }
.drawer .close { align-self: flex-end; margin-bottom: .4rem; }
.drawer .close svg { width: 22px; height: 22px; }
.drawer a.link { font-family: var(--f-head); font-size: 1rem; letter-spacing: .02em; text-decoration: none; padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.drawer a.link[aria-current="page"] { color: var(--lamp); }
.drawer .call { margin-top: 1.4rem; }
.drawer .call-btn { width: 100%; min-width: 0; display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 42px; padding: .5rem .9rem; border: 0; border-radius: 999px; background: var(--logo-periwinkle); color: #fff; font-family: var(--f-head); font-size: .9rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background-color .2s ease, transform .15s ease; }
.drawer .call-btn svg, .choice svg { width: 16px; height: 16px; flex: none; }
.drawer .call-btn .num { display: block; min-width: 0; white-space: nowrap; }
.drawer .call-btn:hover, .drawer .call-btn:focus-visible, .drawer .call-btn[aria-expanded="true"] { background: #7680d2; }
.call-choices { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 0; max-height: 0; opacity: 0; overflow: hidden; visibility: hidden; transition: max-height .25s ease, opacity .2s ease, visibility 0s linear .25s; }
.call-choices.open { margin-top: .5rem; max-height: 4rem; opacity: 1; visibility: visible; transition: max-height .25s ease, opacity .2s ease; }
.choice { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 40px; padding: .4rem .6rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; font-family: var(--f-head); font-size: .85rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color .2s ease, transform .15s ease; }
.choice:hover, choice:focus-visible { background: rgba(255,255,255,.14); }
.drawer .call-btn:active, .choice:active { transform: scale(.96); }
.foot-choices { max-width: 240px; }
.site-footer .copied { text-align: left; margin-top: 0; }
.site-footer .copied:empty { display: none; }
.foot-contact .foot-link:first-child { margin-left: -.65rem; }
.copied { min-height: 1.2em; margin-top: .5rem; font-size: .8rem; color: var(--lamp); text-align: center; }

/* Pages */
main { padding-top: var(--hh); }
/* On phones the bar sits above the photo, so the whole photo shows below it */
@media (min-width: 761px) { body[data-page="home"] main { padding-top: 0; } }
[id] { scroll-margin-top: calc(var(--hh) + 12px); }
.page-intro .wrap { padding-block: clamp(3rem, 6vw, 4.5rem) 0; }
.page-intro h1 { font-size: var(--s-2); margin-top: .7rem; }
.page-intro p.lead { color: var(--muted); max-width: 40rem; margin-top: 1rem; }

/* ---------- Homepage image: Amy's template, shown exactly as supplied ---------- */
.hero-template { background: var(--midnight); }
.hero-template img { display: block; width: 100%; height: auto; }

/* Home: text box on the photo (wide screens); below the photo on phones and narrow tablets */
.hero-template { position: relative; }
.photo-box { line-height: 1.6; color: #fff; }
.photo-box h1 { font-size: clamp(1.6rem, 1.9vw + .3rem, 2.5rem); font-weight: 300; line-height: 1.12; }
.photo-box h1 .l1 { display: block; }
.photo-box h1 .glow-text { display: inline-block; font-weight: 500; background: linear-gradient(100deg, var(--lamp), var(--apricot) 40%, var(--coral) 75%, var(--orchid)); -webkit-background-clip: text; background-clip: text; }
.photo-box h1, .photo-box .what { text-align: center; }
.photo-box .what { margin-top: 1.1rem; font-family: var(--f-head); font-size: .9rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--lamp); }
.photo-box .what b { font-weight: 500; white-space: nowrap; }
.photo-box .what span { color: #fff; font-weight: 900; font-size: 1.35em; line-height: 0; vertical-align: -.08em; margin-inline: .15em; }
.photo-box p.blurb { margin-top: .9rem; color: #f0eefd; font-size: clamp(1.1rem, .6vw + .7rem, 1.3rem); }
@media (min-width: 640px) {
  .photo-box { position: absolute; left: 4.3%; bottom: 7%; width: min(760px, 56%); padding: 2rem 2.4rem 2.2rem; border-radius: 22px;
    background: rgba(20,15,43,.58); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
}
@media (min-width: 640px) and (max-width: 999px) {
  .photo-box { width: 66%; bottom: 5%; padding: 1.1rem 1.25rem 1.2rem; border-radius: 16px; line-height: 1.45; }
  .photo-box h1 { font-size: clamp(1.1rem, 1.9vw + .3rem, 1.6rem); }
  .photo-box .what { margin-top: .6rem; font-size: clamp(.62rem, .9vw + .1rem, .78rem); letter-spacing: .07em; }
  .photo-box p.blurb { margin-top: .5rem; font-size: clamp(.9rem, 1vw + .35rem, 1.1rem); }
}
@media (max-width: 639px) {
  .photo-box { background: linear-gradient(180deg, #120f45, var(--midnight)); padding: 2.4rem max(20px, env(safe-area-inset-right, 0px)) 2.6rem max(20px, env(safe-area-inset-left, 0px)); text-align: center; }
  .photo-box { padding-top: 2rem; padding-bottom: 2.2rem; }
  .photo-box h1 { font-size: min(calc((100vw - 40px) / 17.6), 2.2rem); letter-spacing: -.025em; }
  .photo-box h1 .l1, .photo-box h1 .glow-text { display: block; white-space: nowrap; }
  .photo-box .what { white-space: nowrap; }
  .photo-box .what { font-size: min(calc((100vw - 40px) / 23), .9rem); letter-spacing: .06em; line-height: 1.9; }
  .photo-box .what .sep-last { display: none; }
  .home-services .section-head h2 { font-size: min(var(--s-2), calc((100vw - 40px) / 14.2)); }
  .home-services .section-head h2 { white-space: nowrap; }
  .photo-box .what b:last-child { display: block; }
  .photo-box p.blurb { max-width: 36rem; margin-inline: auto; font-size: 1.04rem; line-height: 1.55; }
}

/* Home: tap-to-call number in the text box and in the phone bar */
.photo-box .call-line { margin-top: 1.1rem; text-align: center; }
.photo-box .call-line .call-num { background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.35); border-radius: 0; cursor: pointer; display: inline-flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; font-family: var(--f-head); font-weight: 500; font-size: clamp(1.3rem, .8vw + .9rem, 1.7rem); letter-spacing: .05em; white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: .1rem; }
.photo-box .call-line .call-num:hover, .photo-box .call-line .call-num[aria-expanded="true"] { border-bottom-color: var(--lamp); }
.photo-box .call-line svg { width: .9em; height: .9em; color: var(--lamp); flex: none; }
.photo-box .call-msg { margin: 0; font-size: .85rem; color: var(--lamp); text-align: center; }
.photo-box .call-msg:not(:empty) { margin-top: .5rem; }
@media (min-width: 640px) and (max-width: 999px) {
  .photo-box .call-line { margin-top: .6rem; }
  .photo-box .call-line .call-num { font-size: clamp(1rem, 1vw + .5rem, 1.25rem); }
}
@media (max-width: 639px) { .photo-box .call-line { margin-top: 1.2rem; } .photo-box .call-line .call-num { font-size: min(calc((100vw - 40px) / 17.6), 1.35rem); } }  /* never bigger than the headline */
.bar-call { background: none; border: 0; cursor: pointer; padding: 0; display: grid; place-items: center; width: 40px; height: 40px; flex: none; color: #fff; border-radius: 10px; margin-left: auto; margin-right: .1rem; }
.bar-call svg { width: 22px; height: 22px; }
.bar-pop { position: absolute; top: 100%; left: 0; right: 0; }
.bar-pop .call-choices { padding-inline: max(16px, env(safe-area-inset-left, 0px)); background: var(--midnight); box-shadow: 0 14px 30px -12px rgba(13,9,32,.8); }
.bar-pop .call-choices.open { margin-top: 0; padding-block: .7rem; max-height: 6rem; }
.bar-msg { margin: 0; padding: .5rem 1rem; background: var(--midnight); color: var(--lamp); font-size: .85rem; text-align: center; }
.bar-msg:empty { display: none; }
.hero-choices { max-width: 240px; margin-inline: auto; }
.fact-num { margin-left: -.65rem; }
.fact-choices { max-width: 240px; }
.fact-copied { text-align: left; }
.fact-copied:empty { display: none; }
.bar { position: relative; }

/* Listings: current rental, sales portfolio, Bromley buildings */
.for-rent .wrap { padding-block: clamp(2rem, 4vw, 3rem) 0; }
.rent-card { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 680px; margin-inline: auto; background: var(--midnight); color: #fff; border: 4px solid var(--logo-periwinkle); }
.rent-card.has-photo { grid-template-columns: 220px minmax(0, 1fr); }
.rent-card { box-shadow: 0 18px 40px -22px rgba(23,18,54,.55); }
@media all {
  :root .rent-card { background: linear-gradient(160deg, #322b6e 0%, #251f56 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 44px -16px rgba(100,111,196,.55); }
}
:root .rent-card { background: linear-gradient(160deg, #322b6e 0%, #251f56 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 44px -16px rgba(100,111,196,.55); }
.rent-card .rent-photo { margin: 0; min-height: 100%; }
@media (min-width: 640px) {
  .rent-card .rent-photo { position: relative; min-height: 220px; }
  .rent-card.has-photo .rent-photo img { position: absolute; inset: 0; max-height: none; }
}
.rent-card .rent-photo img { display: block; width: 100%; height: 100%; min-height: 0; max-height: 240px; object-fit: cover; object-position: 58% 40%; }
.rent-text { align-self: center; }
.rent-text { padding: 1rem 1.3rem; }
.rent-card .eyebrow { color: var(--lamp); }
.rent-card .eyebrow { font-size: .64rem; }
.rent-card h1 { font-size: 1.2rem; margin-top: .2rem; line-height: 1.2; }
.rent-dek { color: var(--on-dark-muted); margin-top: .35rem; max-width: 36rem; font-size: .82rem; line-height: 1.45; }
.rent-facts { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.rent-facts li { display: block; text-align: center; padding: .2rem .6rem; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; font-size: .74rem; line-height: 1.3; color: #fff; white-space: nowrap; }
.rent-facts b { font-family: var(--f-head); font-size: 1em; font-weight: 600; line-height: 1; }
.rent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .75rem; }
.rent-actions .btn { padding: .45rem .95rem; font-size: .8rem; box-shadow: none; }
.rent-email { color: var(--on-dark-muted); font-size: .76rem; }
.rent-email a { color: #fff; text-underline-offset: 3px; }
.rent-email a:hover { color: var(--lamp); }
.rent-card .copied { text-align: left; margin-top: .6rem; }
.rent-card .copied:empty { display: none; }
.rent-addr { display: flex; align-items: flex-start; gap: .4rem; margin-top: .35rem; font-family: var(--f-head); font-size: .86rem; line-height: 1.35; color: #fff; }
.rent-addr svg { width: 15px; height: 15px; flex: none; margin-top: .12rem; color: var(--lamp); }
.rent-apply { margin-top: .75rem; padding-top: .7rem; border-top: 1px solid rgba(255,255,255,.18); }
.apply-link { display: inline-block; padding: .38rem .9rem; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; font-family: var(--f-head); font-weight: 500; font-size: .8rem; color: #fff; text-decoration: none; transition: background-color .2s ease; }
.apply-link:hover, .apply-link:focus-visible { background: rgba(255,255,255,.14); }
.apply-note { font-size: .74rem; line-height: 1.4; color: var(--on-dark-muted); margin-top: .4rem; }

.list-intro { display: grid; grid-template-columns: minmax(0, 1.5fr) auto; gap: 1.5rem clamp(2rem, 5vw, 4rem); align-items: end; margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }
.list-intro h2 { font-size: var(--s-2); margin-top: .5rem; line-height: 1.1; }
.list-dek { color: var(--muted); margin-top: .8rem; max-width: none; text-wrap: pretty; }
.rent-dek { text-wrap: balance; }
.sold-stats { display: flex; gap: 1rem clamp(1.4rem, 3vw, 2.4rem); flex-wrap: wrap; margin: 0; }
.sold-stats div { display: flex; flex-direction: column-reverse; align-items: center; }
.sold-stats dt { font-family: var(--f-head); font-size: clamp(1.6rem, 1.5vw + 1rem, 2.2rem); font-weight: 500; line-height: 1.1; color: var(--logo-periwinkle); }
.sold-stats dd { margin: .2rem 0 0; font-family: var(--f-head); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

.sold .wrap { padding-block: clamp(3rem, 6vw, 4.5rem); }
.sold-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.6rem 1.2rem; }
.sale { margin: 0; }
.sale .frame { position: relative; margin: 0; border: 4px solid var(--logo-periwinkle); background: var(--logo-periwinkle); overflow: hidden; }
.sale .frame { aspect-ratio: 13 / 5; isolation: isolate; }
/* the whole photo fits its square; a soft blur of the same photo fills the space around it */
.sale .frame::before { content: ""; position: absolute; inset: -24px; z-index: -1; background: var(--bg, none) center / cover no-repeat; filter: blur(14px) saturate(1.1) brightness(.92); }
.sale .frame img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease; }
.sale:hover .frame img { transform: scale(1.03); }
/* a small price-tag shaped SOLD label on the corner of each photo */
.sold-tag { flex: none; position: relative; padding: .18rem .5rem .18rem .95rem; background: var(--logo-periwinkle); color: #fff; font-family: var(--f-head); font-size: .6rem; font-weight: 700; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%); }
.sold-tag::before { content: ""; position: absolute; left: 5px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #fff; }
.sale .price { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; }
.sale .price { font-family: var(--f-head); font-size: 1.12rem; font-weight: 500; line-height: 1.2; margin-top: .6rem; }
.sale .city { color: var(--muted); font-size: .86rem; margin-top: .1rem; }
.st-short { display: none; }

.bromley { border-top: 1px solid var(--line); }
.bromley .wrap { padding-block: clamp(3rem, 6vw, 4.5rem); }
.bromley-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.bromley-grid .frame { margin: 0; border: 4px solid var(--logo-periwinkle); background: var(--logo-periwinkle); overflow: hidden; }
.bromley-grid .frame.big { grid-column: 1 / -1; }
.bromley-grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s ease; }
.bromley-grid .big img { aspect-ratio: 16 / 7; }
.bromley-grid .frame:hover img { transform: scale(1.03); }

@media (max-width: 899px) {
  .list-intro { grid-template-columns: minmax(0, 1fr); }
  .rent-card.has-photo { grid-template-columns: 180px minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .rent-card.has-photo { grid-template-columns: minmax(0, 1fr); }
  .rent-card .rent-photo img { max-height: none; aspect-ratio: 16 / 10; }
  .rent-text { text-align: center; }
  .rent-dek { margin-inline: auto; }
  .rent-facts, .rent-actions { justify-content: center; }
  .rent-actions .btn { width: 100%; }
  .rent-card .copied { text-align: center; }
  .rent-addr { justify-content: center; text-align: left; }
  .list-intro { text-align: center; }
  .list-dek { margin-inline: auto; }
  .rent-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rent-card .rent-photo img { object-position: 50% 0%; }
  .sold-stats { justify-content: center; }
  .sold-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem .75rem; }
  .sale .frame { border-width: 3px; }
  .sale .price { font-size: .95rem; margin-top: .45rem; flex-wrap: nowrap; gap: .4rem; }
  .sold-tag { font-size: .5rem; letter-spacing: .1em; padding: .16rem .4rem .16rem .8rem; }
  .sale .city { font-size: .78rem; }
  .st-long { display: none; } .st-short { display: inline; }
  .bromley-grid .big img { aspect-ratio: 16 / 9; }
}

/* Home: three service tiles */
.home-services .wrap { padding-block: clamp(4rem, 8vw, 6rem); }
[data-fit] { max-width: 100%; min-width: 0; }
.home-services .section-head > div { width: 100%; min-width: 0; }
.home-services .eyebrow.wwd { max-width: none; font-size: 1.05rem; font-weight: 600; letter-spacing: .22em; text-align: center; padding-left: .22em; }
.home-services .section-head { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.8rem; }
.tile { border-radius: var(--radius); text-decoration: none; overflow: hidden; display: flex; transition: transform .25s ease, box-shadow .25s ease; min-width: 0; }
.tile:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(40,30,120,.6); }
.tile .svc-top { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2.2rem 1.9rem 2rem; }
.tile .svc-top .icon { width: 56px; height: 56px; border-radius: 16px; }
.tile .svc-top .icon svg { width: 28px; height: 28px; }
.tile .svc-top p { max-width: 22rem; }
.tile .more { display: inline-block; margin-top: auto; padding-top: 1.6rem; font-family: var(--f-head); font-weight: 500; color: #fff; position: relative; z-index: 1; }
.tile.sales .svc-top { background: linear-gradient(135deg, var(--coral), var(--apricot) 60%, var(--lamp)); }
.tile.rentals .svc-top { background: linear-gradient(135deg, var(--sapphire), var(--river) 55%, var(--iris)); }
.badge { position: absolute; top: 1rem; right: 1rem; z-index: 2; font-family: var(--f-head); font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: .35rem .7rem; border-radius: 999px; background: rgba(255,255,255,.92); color: #6b3fa8; }
.tile.condo .svc-top { background: linear-gradient(135deg, var(--iris), var(--orchid) 70%, #e07fbf); }
@media (max-width: 900px) { .tiles { grid-template-columns: 1fr; } }

/* ---------- Services ---------- */
.services .wrap { padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 4rem; align-items: end; }
.section-head h2 { font-size: var(--s-2); margin-top: .7rem; }
.section-head p { color: var(--muted); max-width: 32rem; }
.dotsep { color: var(--orchid); margin-inline: .15em; }
@media (max-width: 820px) { .section-head { grid-template-columns: 1fr; } }
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 3rem; }
.svc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; min-width: 0; transition: transform .25s ease, box-shadow .25s ease; }
.svc:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -34px rgba(40,30,120,.55); }
.svc-top { position: relative; padding: 1.8rem 1.8rem 1.6rem; color: #fff; overflow: hidden; }
.svc-top::after { content: ""; position: absolute; right: -40px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.18); filter: blur(4px); }
.svc.sellers .svc-top { background: linear-gradient(135deg, var(--coral), var(--apricot) 60%, var(--lamp)); }
.svc.buyers .svc-top { background: linear-gradient(135deg, #136d8f, #2391a8 55%, #4db3b9); }
.svc.rentals .svc-top { background: linear-gradient(135deg, var(--sapphire), var(--river) 55%, var(--iris)); }
.svc.condo .svc-top { background: linear-gradient(135deg, var(--iris), var(--orchid) 70%, #e07fbf); }
.svc-top .icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,.2); display: grid; place-items: center; }
.svc-top .icon svg { width: 24px; height: 24px; }
.svc-top h3 { font-size: 1.7rem; font-weight: 500; margin-top: 1.1rem; position: relative; z-index: 1; }
.svc-top p { color: rgba(255,255,255,.88); margin-top: .3rem; position: relative; z-index: 1; }
.svc-body { padding: 1.6rem 1.8rem 1.8rem; display: flex; flex-direction: column; gap: 1.2rem; flex: 1; }
.svc-body ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.svc-body li { display: grid; grid-template-columns: 18px 1fr; gap: .65rem; }
.svc-body li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; margin-top: .6rem; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.svc.sellers { --accent: var(--coral); }
.svc.buyers { --accent: #2391a8; }
.svc.rentals { --accent: var(--river); }
.svc.condo { --accent: var(--orchid); }
.svc-body .go { margin-top: auto; font-family: var(--f-head); font-weight: 500; color: var(--link); text-decoration: none; }
.svc-body .go:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr; } }
/* four categories: colored tops are evened out by script; numbered steps read in order */
.svc { container-type: inline-size; }
.svc-top p { text-wrap: pretty; }
.svc-body h4 { font-family: var(--f-head); font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.svc-body .who { display: grid; gap: .6rem; }
.svc-body .who + .who { padding-top: 1.1rem; border-top: 1px solid var(--line); }
.svc-body .who p, .svc-close { color: var(--muted); }
.svc-close { font-style: italic; }
.svc-body .step-list { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.svc-body .step-list li { counter-increment: step; display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); align-items: center; gap: .6rem; padding: .3rem 0; break-inside: avoid; }
.svc-body .step-list li::before { content: counter(step); width: 1.7rem; height: 1.7rem; margin: 0; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-head); font-size: .74rem; font-weight: 600; color: color-mix(in srgb, var(--accent) 70%, var(--text)); background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: none; }
@container (min-width: 500px) { .svc-body .step-list.two { columns: 2; column-gap: 1.6rem; } }
.svc-body .go-row { margin-top: auto; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }

/* ---------- After-dark bands ---------- */
.after-dark { position: relative; background: var(--midnight); color: var(--on-dark); overflow: hidden; isolation: isolate; }
.after-dark::before, .after-dark::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(90px); opacity: .55; }
.after-dark::before { width: 520px; height: 520px; left: -160px; top: -180px; background: var(--iris); }
.after-dark::after { width: 560px; height: 460px; right: -180px; bottom: -200px; background: var(--coral); opacity: .4; }
.after-dark .eyebrow { color: var(--lamp); }
.after-dark p { color: var(--on-dark-muted); }

/* Condo board */
.board .wrap { padding-block: clamp(4.5rem, 9vw, 7.5rem); display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.board h2 { font-size: var(--s-2); margin-top: .7rem; }
.board .intro p { margin-top: 1.2rem; max-width: 31rem; }
.board .intro .btn { margin-top: 2rem; }
@media (max-width: 900px) { .board .wrap { grid-template-columns: 1fr; } }
.board .wrap { align-items: center; }
.not-pm { padding: clamp(1.5rem, 3vw, 2.3rem); border-radius: var(--radius); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); min-width: 0; }
.not-pm h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); font-weight: 500; line-height: 1.2; color: #fff; margin-top: .55rem; }
.not-pm > p:not(.eyebrow) { margin-top: .8rem; }
.pm-points { list-style: none; margin: 1.4rem 0 0; padding: 1.3rem 0 0; display: grid; gap: 1rem; border-top: 1px solid rgba(255,255,255,.14); }
.pm-points li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: .75rem; color: var(--on-dark-muted); font-size: .96rem; }
.pm-points li::before { content: ""; width: 28px; height: 28px; border-radius: 50%; background: var(--sunset); -webkit-mask: radial-gradient(circle, #000 69%, transparent 70%); mask: radial-gradient(circle, #000 69%, transparent 70%); }
.pm-points li { position: relative; }
.pm-points li::after { content: ""; position: absolute; left: 9px; top: 7px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); }
.pm-points b { display: block; color: #fff; font-family: var(--f-head); font-weight: 500; font-size: 1.05rem; margin-bottom: .1rem; }

/* ---------- Testimonials carousel ---------- */
.reviews .wrap { padding-block: clamp(4.5rem, 9vw, 7rem) 0; text-align: center; }
.reviews h2 { font-size: var(--s-2); margin-top: .7rem; color: #fff; }
.reviews .sunset-rule { margin: 1.4rem auto 0; }
.reviews h2 .nw { white-space: nowrap; }
.marquee { position: relative; padding-block: 3rem clamp(4rem, 8vw, 6rem); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee.dragging { cursor: grabbing; }
.track { display: flex; align-items: stretch; gap: 1.5rem; width: max-content; will-change: transform; }
.quote { --c1: var(--iris); --c2: var(--orchid); width: min(420px, 84vw); flex: none; margin: 0; border-radius: var(--radius); padding: 2.1rem 2rem 1.8rem; text-align: left; display: flex; flex-direction: column; gap: 1.1rem; position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--c1) 55%, transparent), transparent 60%), radial-gradient(120% 100% at 100% 100%, color-mix(in srgb, var(--c2) 45%, transparent), transparent 65%), rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(6px); }
.quote::before { content: "\201C"; position: absolute; right: 1.2rem; top: -.6rem; font-family: Georgia, serif; font-size: 7rem; line-height: 1; color: rgba(255,255,255,.12); }
.quote:nth-child(5n+1) { --c1: var(--coral); --c2: var(--orchid); }
.quote:nth-child(5n+2) { --c1: var(--sapphire); --c2: var(--iris); }
.quote:nth-child(5n+3) { --c1: var(--orchid); --c2: var(--apricot); }
.quote:nth-child(5n+4) { --c1: var(--river); --c2: var(--orchid); }
.quote:nth-child(5n+5) { --c1: var(--apricot); --c2: var(--iris); }
.quote .stars { color: var(--lamp); letter-spacing: .2em; font-size: .95rem; }
.quote .tag { font-family: var(--f-head); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lamp); line-height: 1.4; }
.quote blockquote { margin: 0; font-family: var(--f-head); font-weight: 300; font-size: 1.16rem; line-height: 1.55; }
.quote figcaption { margin-top: auto; display: flex; align-items: center; gap: .8rem; font-family: var(--f-head); font-weight: 500; font-size: 1rem; }
.quote .initial { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 500; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 0 18px -2px var(--c1); flex: none; }
@media (max-width: 639px) {
  .reviews .wrap { padding-top: 3.5rem; }
  .marquee { padding-block: 2rem 3rem; }
  .track { gap: 1rem; }
  .quote { width: 78vw; padding: 1.6rem 1.4rem 1.4rem; gap: .8rem; }
  .quote::before { font-size: 5rem; }
  .quote blockquote { font-size: 1rem; line-height: 1.5; }
}

/* ---------- Listings ---------- */
.listings .wrap { padding-block: clamp(4.5rem, 9vw, 7rem); }
.list-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
.listing { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--card); min-width: 0; }
.listing .ph { aspect-ratio: 4 / 3; display: grid; place-items: center; color: rgba(255,255,255,.9); font-family: var(--f-head); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; }
.listing:nth-child(1) .ph { background: linear-gradient(160deg, var(--sapphire), var(--iris) 55%, var(--orchid)); }
.listing:nth-child(2) .ph { background: linear-gradient(160deg, var(--iris), var(--orchid) 50%, var(--coral)); }
.listing:nth-child(3) .ph { background: linear-gradient(160deg, var(--orchid), var(--coral) 55%, var(--apricot)); }
.listing .meta { padding: 1.3rem 1.4rem 1.5rem; }
.listing .tag { display: inline-block; font-family: var(--f-head); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px; background: var(--haze); color: var(--link); }
.listing h3 { font-size: 1.25rem; font-weight: 500; margin-top: .7rem; }
.listing p { color: var(--muted); font-size: .95rem; margin-top: .2rem; }
.idx-note { margin-top: 1.5rem; padding: 1rem 1.3rem; border-radius: 14px; border: 1px dashed var(--orchid); color: var(--muted); font-size: .92rem; }
@media (max-width: 900px) { .list-grid { grid-template-columns: 1fr; } }

/* ---------- About ---------- */
.about .wrap { padding-block: clamp(4rem, 8vw, 6rem); }
.about .story { color: var(--muted); max-width: 42rem; margin-top: 1.2rem; }
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3rem; }
.person { min-width: 0; }
.person .frame { border-radius: var(--radius); padding: 4px; background: var(--sunset); }
.person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; border-radius: calc(var(--radius) - 4px); display: block; background: var(--haze); }
.person h3 { font-size: 1.4rem; font-weight: 500; margin-top: 1.1rem; }
.person p { color: var(--muted); font-size: .95rem; }
@media (max-width: 860px) { .team { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .team { grid-template-columns: 1fr; } }

/* ---------- Contact ---------- */
.contact .wrap { padding-block: clamp(4.5rem, 9vw, 7rem); display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2.5rem, 6vw, 5rem); }
.contact h2 { font-size: var(--s-2); margin-top: .7rem; }
.contact .info { min-width: 0; }
.facts { margin: 2.2rem 0 0; display: grid; gap: 1.4rem; }
.facts dt { font-family: var(--f-head); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--apricot); }
.facts dd { margin: .2rem 0 0; font-family: var(--f-head); font-size: 1.25rem; color: #fff; overflow-wrap: anywhere; }
.facts dd small { display: block; font-family: var(--f-body); font-size: .92rem; color: var(--on-dark-muted); }
form.inq { background: var(--card); color: var(--text); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.4rem); display: grid; gap: 1.1rem; min-width: 0; box-shadow: 0 40px 80px -40px rgba(0,0,0,.7); }
form.inq h3 { font-size: 1.5rem; font-weight: 500; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }
label { display: grid; gap: .35rem; font-weight: 500; font-size: .9rem; }
input, textarea { font: 400 1rem var(--f-body); color: var(--text); background: var(--page); border: 1px solid var(--line); border-radius: 12px; padding: .85rem .95rem; width: 100%; }
input:focus, textarea:focus { border-color: var(--iris); outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--iris) 18%, transparent); }
textarea { min-height: 120px; resize: vertical; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 500; font-size: .9rem; margin-bottom: .55rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips label { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-weight: 500; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips label:has(input:checked) { background: var(--sunset); color: #fff; border-color: transparent; }
.chips label:has(input:focus-visible) { outline: 3px solid var(--lamp); outline-offset: 2px; }
.sent { font-size: .92rem; color: var(--link); }
:root { --req: #c93a3a; }
@media all { :root { --req: #ff8f8f; } }
:root { --req: #ff8f8f; }
.req { color: var(--req); font-weight: 600; }
.req-key { margin-top: -.6rem; font-size: .85rem; color: var(--muted); }
select { font: 400 1rem var(--f-body); color: var(--text); background: var(--page); border: 1px solid var(--line); border-radius: 12px; padding: .85rem .95rem; width: 100%; }
select:focus { border-color: var(--iris); outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--iris) 18%, transparent); }
form.inq input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: .1rem 0 0; padding: 0; accent-color: var(--iris); cursor: pointer; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.check { display: flex; align-items: flex-start; gap: .6rem; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-weight: 500; font-size: .92rem; line-height: 1.35; }
.check:has(input:checked) { border-color: var(--iris); background: color-mix(in srgb, var(--iris) 10%, transparent); }
.consents { display: grid; gap: .9rem; }
.consent { display: flex; align-items: flex-start; gap: .65rem; font-weight: 500; font-size: .9rem; line-height: 1.45; cursor: pointer; }
.consent small { display: block; margin-top: .25rem; font-weight: 400; font-size: .8rem; color: var(--muted); }
.consent a { color: var(--link); }
.robot { display: flex; align-items: center; gap: .8rem; width: min(100%, 300px); padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 6px; background: var(--haze); cursor: pointer; font-weight: 500; }
form.inq .robot input[type="checkbox"] { width: 26px; height: 26px; margin: 0; }
.robot-text { flex: 1; }
.robot-mark { display: grid; justify-items: center; color: var(--muted); }
.robot-mark svg { width: 26px; height: 26px; color: var(--iris); }
.robot-mark small { font-size: .62rem; letter-spacing: .04em; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.send-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.err { display: block; color: var(--req); font-size: .82rem; font-weight: 500; }
.invalid input:not([type="checkbox"]), .invalid textarea { border-color: var(--req); }
fieldset.invalid .check, .robot.invalid { border-color: var(--req); }
.consent .err, .robot .err { flex-basis: 100%; }
.consent.invalid { flex-wrap: wrap; }
.consent > span:not(.err), .robot-text { flex: 1 1 0; min-width: 0; }
.consent .err { margin-left: calc(20px + .65rem); }
.robot.invalid { flex-wrap: wrap; }
@media (max-width: 560px) { .checks { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .contact .wrap { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { background: #0f0b24; color: var(--on-dark-muted); }
.site-footer .wrap { padding-block: 3rem; display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; justify-content: space-between; align-items: center; }
.site-footer .logo { width: 220px; color: #fff; }
.site-footer .foot-brand { display: flex; flex-direction: column; gap: .9rem; }
.foot-contact { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; font-size: .92rem; }
.foot-link { color: #fff; text-decoration: none; background: none; border: 1px solid transparent; font: inherit; cursor: pointer; padding: .25rem .65rem; border-radius: 999px; transition: background-color .2s ease, border-color .2s ease; }
.foot-link:hover, .foot-link:focus-visible, .foot-link[aria-expanded="true"] { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }
.foot-contact span { color: rgba(255,255,255,.4); }
/* REALTOR®, MLS® and Equal Housing Opportunity logos, each complete and unaltered (one-color white on the solid footer).
   NAR: the R always keeps its REALTOR® identifier, no frame or border, and clear space of half the block's width around it.
   HUD: the house always keeps its EQUAL HOUSING OPPORTUNITY wording. */
.site-footer .badges { display: flex; align-items: center; gap: 16px; list-style: none; margin: 0; padding: 0; }
.site-footer .badges img { display: block; height: 30px; width: auto; }
.site-footer nav { display: flex; gap: .6rem; flex-wrap: wrap; font-family: var(--f-head); font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; }
.site-footer nav a { text-decoration: none; color: #fff; padding: .35rem .75rem; border-radius: 999px; border: 1px solid transparent; transition: background-color .2s ease, border-color .2s ease; }
.site-footer nav a:hover, .site-footer nav a:focus-visible { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }
.social { display: flex; gap: .7rem; }
.social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); transition: background .2s ease; }
.social a:hover { background: var(--logo-periwinkle); }
.social svg { width: 18px; height: 18px; }
.site-footer .legal { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 1.6rem; font-size: .82rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); }
@media (max-width: 760px) {
  .site-footer .wrap { flex-direction: column; justify-content: center; text-align: center; gap: 1.6rem; padding-block: 2.6rem 2rem; }
  .site-footer .foot-brand { align-items: center; }
  .foot-contact { justify-content: center; }
  .site-footer nav { justify-content: center; flex-wrap: nowrap; white-space: nowrap; gap: 0; font-size: min(.76rem, calc((100vw - 40px) / 28)); letter-spacing: .05em; }
  .site-footer .legal { flex-direction: column-reverse; justify-content: center; gap: 1.1rem; padding-top: 1.4rem; font-size: .76rem; }
  .site-footer .legal > span { white-space: nowrap; }
  .foot-contact { flex-direction: column; gap: .2rem; white-space: nowrap; }
  .site-footer nav a { padding: .35rem .55rem; }
  .foot-choices { margin-inline: auto; width: 100%; }
  .site-footer .copied { text-align: center; }
  .foot-contact .foot-link:first-child { margin-left: 0; }
  .foot-contact span { display: none; }
}
/* ---------- Terms and Privacy ---------- */
.legal-page .wrap { max-width: 46rem; padding-block: clamp(3rem, 6vw, 4.5rem) clamp(4rem, 8vw, 6rem); }
.legal-page h1 { font-size: var(--s-2); margin-top: .7rem; }
.legal-page .updated { color: var(--muted); font-size: .92rem; margin-top: .8rem; }
.legal-doc { margin-top: 1.8rem; overflow-wrap: anywhere; }
.legal-doc h2 { font-size: var(--s-3); font-weight: 500; margin: 2.4rem 0 .7rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.legal-doc p + p, .legal-doc p + ul, .legal-doc p + ol, .legal-doc ul + p, .legal-doc ol + p, .legal-doc .copied + p, .legal-doc .call-choices + p { margin-top: .9rem; }
.legal-doc ul, .legal-doc ol { margin: .8rem 0 0; padding-left: 1.3rem; }
.legal-doc li + li { margin-top: .5rem; }
.legal-doc a { color: var(--link); }
.legal-num { font: inherit; color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.legal-choices { max-width: 240px; }
.legal-choices .choice { color: var(--text); border-color: var(--line); }
.legal-choices .choice:hover, .legal-choices .choice:focus-visible { background: var(--haze); }
.legal-copied { text-align: left; }
.legal-copied:empty { display: none; }
.form-note { font-size: .85rem; color: var(--muted); }
.form-note a { color: var(--link); }
.site-footer .legal-left { display: flex; flex-direction: column; gap: .35rem; }
.site-footer .legal-links { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; }
.site-footer .legal-links a { color: #fff; text-decoration: none; opacity: .85; }
.site-footer .legal-links a:hover, .site-footer .legal-links a:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .site-footer .legal-left { align-items: center; }
  .site-footer .legal-left > span { white-space: nowrap; }
  .site-footer .legal-links { justify-content: center; }
}
/* ---------- Team bios ---------- */
a.person { display: block; text-decoration: none; color: inherit; border-radius: var(--radius); }
a.person .frame { transition: transform .25s ease, box-shadow .25s ease; }
a.person:hover .frame, a.person:focus-visible .frame { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(23,18,54,.55); }
a.person:focus-visible { outline: 3px solid var(--lamp); outline-offset: 6px; }
.person img { object-position: center; }
.read-bio { display: inline-block; margin-top: .55rem; font-family: var(--f-head); font-size: .9rem; font-weight: 500; color: var(--link); }
a.person:hover .read-bio { text-decoration: underline; text-underline-offset: 3px; }
html:has(dialog.bio[open]) { overflow: hidden; }
dialog.bio { width: min(42rem, calc(100vw - 24px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: var(--radius); background: var(--card); color: var(--text); box-shadow: 0 40px 100px -30px rgba(13,9,32,.7); overflow-y: auto; overscroll-behavior: contain; }
dialog.bio::backdrop { background: rgba(15,11,36,.62); backdrop-filter: blur(3px); }
.bio-inner { padding: clamp(1.3rem, 4vw, 2.2rem); }
.bio-close { position: sticky; top: 0; float: right; z-index: 2; width: 44px; height: 44px; margin: -.3rem -.3rem .3rem .6rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--haze); color: var(--text); cursor: pointer; }
.bio-close svg { width: 20px; height: 20px; }
.bio-close:hover, .bio-close:focus-visible { background: var(--line); }
.bio-head { display: flex; align-items: center; gap: 1.1rem; }
.bio-head .frame { flex: none; width: 96px; padding: 3px; border-radius: 18px; background: var(--sunset); }
.bio-head img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 15px; }
.bio-head h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.8rem); font-weight: 500; }
.bio-role { color: var(--muted); font-size: .92rem; margin-top: .35rem; line-height: 1.45; }
.bio-body { margin-top: 1.4rem; }
.bio-body p + p { margin-top: .9rem; }
.bio-tags { list-style: none; margin: 1.3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.bio-tags li { font-family: var(--f-head); font-size: .82rem; padding: .35rem .8rem; border-radius: 999px; background: var(--haze); border: 1px solid var(--line); }
.bio-contact { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); display: grid; gap: .55rem; }
.bio-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; }
.bio-label { width: 3.4rem; font-family: var(--f-head); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bio-num, .bio-mail { font: inherit; font-family: var(--f-head); font-size: 1.05rem; color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.bio-contact .legal-choices { margin-left: 4.2rem; }
.bio-contact .legal-choices.open { margin-top: .1rem; margin-bottom: .3rem; }
.ll-link { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin-top: 1.4rem; padding: 1rem 1.2rem .9rem; border-radius: 18px; background: #fefffa; border: 1px solid #ece6d6; text-decoration: none; color: #6e1e3a; font-family: var(--f-head); font-size: .9rem; font-weight: 500; transition: transform .2s ease, box-shadow .2s ease; }
.ll-link img { width: min(100%, 300px); height: auto; display: block; }
.ll-link:hover, .ll-link:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(0,0,0,.45); }
@media (max-width: 520px) {
  .bio-head { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .bio-head .frame { width: 92px; }
  .bio-contact .legal-choices { margin-left: 0; }
}
.bio-lic { margin-top: 1.4rem; padding: 1rem 1.1rem; border-radius: 16px; background: var(--haze); border: 1px solid var(--line); }
.bio-lic h3 { font-family: var(--f-head); font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bio-lic ul { list-style: none; margin: .55rem 0 0; padding: 0; display: grid; gap: .4rem; }
.bio-lic li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem 1rem; font-size: .95rem; }
.bio-lic b { font-family: var(--f-head); font-weight: 500; letter-spacing: .02em; white-space: nowrap; }
/* Lovely Ledgers: a slimmer banner, logo and link side by side */
.ll-link { flex-direction: row; justify-content: center; gap: .6rem 1.6rem; padding: .7rem 1.2rem; }
.ll-link img { width: min(100%, 190px); }
@media (max-width: 520px) { .ll-link { flex-direction: column; gap: .4rem; padding: .7rem 1rem .65rem; } .ll-link img { width: min(100%, 200px); } }
/* Services heading: centered so the short headline and the paragraph sit in balance */
.services .section-head { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 1rem; }
.services .section-head p { max-width: 40rem; }
/* v58: three cards across on wide screens; plain dots instead of numbers */
.svc-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc-body .step-list li { grid-template-columns: 18px minmax(0, 1fr); gap: .65rem; padding: .22rem 0; align-items: start; }
.svc-body .step-list li::before { content: ""; width: 8px; height: 8px; margin-top: .6rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.svc-body .who .go { margin-top: .3rem; }
.svc-body .who:last-child { margin-top: auto; }
/* condo band: callout under the intro, Amy's list on the right */
.pm-note { margin-top: 1.6rem; padding: 1rem 1.2rem; border-left: 4px solid var(--lamp); border-radius: 0 14px 14px 0; background: rgba(255,255,255,.07); }
.pm-note b { font-family: var(--f-head); font-weight: 500; font-size: 1.1rem; color: #fff; }
.pm-note p { margin-top: .35rem; max-width: none; }
.board .intro .pm-note p { margin-top: .35rem; }
.not-pm .pm-points { margin-top: 1rem; padding-top: 0; border-top: 0; gap: .95rem; }
.not-pm .pm-points li { color: #e4e3fa; font-size: 1rem; line-height: 1.5; }
/* bios: each label sits above its number or address */
.bio-line { flex-direction: column; align-items: flex-start; gap: .2rem; }
.bio-label { width: auto; }
.bio-contact .legal-choices { margin-left: 0; }
.facts dd { overflow-wrap: normal; }
.facts > div, .facts dd { min-width: 0; }
#factEmail { display: inline-block; white-space: nowrap; max-width: calc(100% + .65rem); }
/* Contact form: the send button sits centered (Amy) */
.send-row { justify-content: center; text-align: center; }
.send-row .sent { flex-basis: 100%; }
.what-link { color: inherit; text-decoration: none; border-radius: 4px; transition: color .2s ease, text-shadow .2s ease; -webkit-tap-highlight-color: transparent; }
.what-link:hover, .what-link:focus-visible, .what-link:active { color: #fff; text-shadow: 0 0 6px rgba(255,198,109,1), 0 0 16px rgba(255,198,109,.85), 0 0 32px rgba(255,198,109,.55); }
.what-link:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; }

@media (min-width: 761px) {
  .about .wrap > .eyebrow, .about .wrap > h2 { text-align: center; text-wrap: balance; }
  .about .wrap > .eyebrow { padding-left: .22em; }
  .about .story { text-align: center; margin-inline: auto; text-wrap: pretty; }
}

.svc-body .who.ll-box { padding: 1.3rem 1.4rem 1.4rem; border-radius: 14px; background: linear-gradient(135deg, var(--sapphire), var(--iris)); color: #fff; box-shadow: 0 10px 28px -14px color-mix(in srgb, var(--sapphire) 70%, transparent); }
.svc-body .who.ll-box h4 { color: #fff; font-size: 1.02rem; font-weight: 700; letter-spacing: .14em; }
.svc-body .who.ll-box p { color: #fff; opacity: .94; }
.svc-body .who.ll-box .go { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in srgb, #fff 55%, transparent); text-underline-offset: 4px; }
.svc-body .who.ll-box .go:hover, .svc-body .who.ll-box .go:focus-visible { text-decoration-color: #fff; }
.svc-body .who.ll-box + .who.ll-box { border-top: 0; padding-top: 1.3rem; }
.svc-body .who.renters { margin-top: 0; flex: 1; display: flex; flex-direction: column; gap: .6rem; }
.svc-body .who.renters .go { margin-top: auto; padding-top: .3rem; }

.apply-label { font-family: var(--f-head); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: .45rem; }
.rent-apply .apply-link { position: relative; overflow: hidden; isolation: isolate; padding: .6rem 1.5rem; border: 0; font-size: .95rem; font-weight: 700; letter-spacing: .02em; color: #2a1a00; background: linear-gradient(135deg, #ffe39a, var(--lamp) 45%, #f5a623); box-shadow: 0 0 0 1px rgba(255,214,120,.7), 0 6px 22px -6px rgba(255,190,80,.75); transition: transform .2s ease, box-shadow .2s ease; }
.rent-apply .apply-link::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%); transform: translateX(-120%); animation: apply-shine 3.2s ease-in-out infinite; }
.rent-apply .apply-link:hover, .rent-apply .apply-link:focus-visible { background: linear-gradient(135deg, #fff0bf, #ffd27f 45%, #f7b13c); transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255,214,120,.9), 0 10px 28px -6px rgba(255,190,80,.95); }
@keyframes apply-shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .rent-apply .apply-link::after { animation: none; } }
.rent-apply .apply-note { font-size: .8rem; margin-top: .55rem; }
@media (max-width: 639px) { .rent-apply { text-align: center; } .rent-apply .apply-link { display: block; } }

.svc-body .who.ll-box.renters li { color: #fff; }
.svc-body .who.ll-box.renters .step-list li::before { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.22); }

body { overflow-x: clip; }  /* hidden made body its own scroll box, which stops sticky */
.contact.after-dark { overflow: clip; }
@media (min-width: 861px) and (min-height: 600px) {
  .contact .info { position: sticky; top: calc(var(--hh) + 2rem); align-self: start; }
}

.svc-body .who.ll-box { background: var(--card); color: var(--text); border: 1.5px solid color-mix(in srgb, var(--periwinkle) 60%, transparent); box-shadow: none; }
.svc-body .who.ll-box h4 { color: var(--text); }
.svc-body .who.ll-box p { color: var(--text); opacity: .92; }
.svc-body .who.ll-box + .who.ll-box { border-top: 1.5px solid color-mix(in srgb, var(--periwinkle) 60%, transparent); }
.svc-body .who.ll-box .go { color: var(--link); text-decoration-color: color-mix(in srgb, var(--link) 50%, transparent); }
.svc-body .who.ll-box .go:hover, .svc-body .who.ll-box .go:focus-visible { text-decoration-color: var(--link); }

.inq > h3, .inq > .req-key { text-align: center; justify-self: center; }

.meet .wrap { padding-block: clamp(3.5rem, 7vw, 5.5rem) 0; }
.meet-wrap { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 34rem); justify-content: center; align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
.meet-photo { display: block; border-radius: var(--radius); text-decoration: none; }
.meet-photo .frame { border-radius: var(--radius); padding: 4px; background: var(--sunset); transition: transform .25s ease, box-shadow .25s ease; }
.meet-photo img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius) - 4px); background: radial-gradient(120% 90% at 50% 30%, #fbf3ff 0%, #e4e2fb 55%, #c9cbf2 100%); }
.meet-photo:hover .frame, .meet-photo:focus-visible .frame { transform: translateY(-3px); box-shadow: 0 18px 40px -18px rgba(100,111,196,.8); }
.meet-text h1 { font-size: var(--s-2); margin-top: .7rem; text-wrap: balance; }
.meet-role { color: var(--text); font-family: var(--f-head); font-weight: 500; font-size: 1.05rem; line-height: 1.45; margin-top: .6rem; }
.meet-text > p:not(.eyebrow):not(.meet-role) { color: var(--muted); margin-top: 1rem; }
.meet-btn { margin-top: 1.6rem; }
.team.team-two { grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; }
@media (max-width: 760px) {
  .meet-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .meet-photo { width: min(78%, 300px); }
  .meet-text { max-width: 34rem; }
}
@media (max-width: 520px) { .team.team-two { grid-template-columns: minmax(0, 1fr); } }

/* Meet Amy on phones: photo centered, text left-aligned like the rest of the page */
@media (max-width: 760px) { .meet-wrap { text-align: left; } .meet-text { width: 100%; } }
/* Contact form: "I'm not a robot" box centered (Amy) */
form.inq .robot { margin-inline: auto; justify-self: center; }
/* Footer: one centered column at every width so nothing hangs off to one side (Amy: too unbalanced) */
@media (min-width: 761px) {
  .site-footer .wrap { flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 1.5rem; padding-block: 3.2rem 2.4rem; }
  .site-footer .foot-brand { align-items: center; }
  .foot-contact { justify-content: center; }
  .foot-contact .foot-link:first-child { margin-left: 0; }
  .site-footer .copied { text-align: center; }
  .foot-choices { margin-inline: auto; }
  .site-footer .legal { flex-direction: column; justify-content: center; gap: 1.1rem; }
  .site-footer .legal-left { align-items: center; }
  .site-footer .legal-links { justify-content: center; }
}

.team.team-two { grid-template-columns: repeat(2, minmax(0, 250px)); gap: clamp(2rem, 5vw, 4rem); }
.team.team-two .person h3 { font-size: 1.25rem; }
.team.team-two .person p { font-size: .9rem; }
@media (max-width: 760px) { .meet-photo { width: min(72%, 280px); } }
@media (max-width: 520px) { .team.team-two { grid-template-columns: minmax(0, 230px); justify-content: center; text-align: center; } }

/* Footer: tighter, even spacing (Amy). The hidden Call/Copy row no longer adds an extra gap */
.site-footer .foot-brand { gap: 0; }
.site-footer .foot-contact { margin-top: .7rem; }
@media (min-width: 761px) {
  .site-footer .wrap { gap: 1.1rem; padding-block: 2.6rem 2rem; }
  .site-footer .legal { padding-top: 1.3rem; gap: .9rem; }
}
@media (max-width: 760px) {
  .site-footer .wrap { gap: 1.1rem; padding-block: 2.2rem 1.8rem; }
  .site-footer .foot-contact { gap: 0; margin-top: .5rem; line-height: 1.3; }
  .site-footer .foot-contact .foot-link { padding-block: .3rem; }
  .site-footer .legal { padding-top: 1.2rem; gap: .9rem; }
}
/* Bromley: a compact showcase (bigger than the sold cards, no longer full width): large photo left, two stacked right */
.bromley-grid { max-width: 940px; margin-inline: auto; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto auto; }
.bromley-grid .frame.big { grid-column: 1; grid-row: 1 / span 2; }
.bromley-grid .frame.big img { aspect-ratio: auto; height: 100%; }
.bromley-grid .frame:not(.big) img { aspect-ratio: 4 / 3; }
@media (max-width: 639px) {
  .bromley-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bromley-grid .frame.big { grid-column: 1 / -1; grid-row: auto; }
  .bromley-grid .frame.big img { aspect-ratio: 16 / 10; height: auto; }
}

.for-rent .wrap { display: grid; gap: clamp(1.4rem, 3vw, 2rem); }
.rent-card .rent-h { font-size: 1.2rem; margin-top: .2rem; line-height: 1.2; }
.rent-card.rent-2.has-photo .rent-photo img { object-position: 50% 50%; }
/* Meet Amy photo larger (Amy, 2026-10-25) */
@media (min-width: 761px) { .meet-wrap { grid-template-columns: minmax(0, 420px) minmax(0, 34rem); } }
@media (max-width: 760px) { .meet-photo { width: min(86%, 360px); } }

/* Rental photos: show the whole house, never crop it (Amy, 2026-10-25). Both photos are 4:3 */
.rent-card.has-photo .rent-photo { position: static; min-height: 0; }
.rent-card.has-photo .rent-photo img { position: static; inset: auto; width: 100%; height: auto; max-height: none; aspect-ratio: 4 / 3; object-fit: contain; }
@media (min-width: 761px) {
  .rent-card { max-width: 880px; }
  .rent-card.has-photo { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
  .rent-card.has-photo .rent-photo { align-self: center; padding: 1.2rem 0 1.2rem 1.2rem; }
  .rent-card.has-photo .rent-photo img { border-radius: 6px; box-shadow: 0 10px 28px -14px rgba(0,0,0,.6); }
}

.board .intro .pm-note + .pm-note { margin-top: 1rem; }

.rent-card .rent-more { position: relative; overflow: hidden; isolation: isolate; }
.rent-card .rent-more::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); animation: apply-shine 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .rent-card .rent-more::after { animation: none; } }

/* Skip to main content: appears only when someone tabs onto the page with a keyboard */
.skip-link { position: fixed; top: calc(env(safe-area-inset-top, 0px) + .6rem); left: max(16px, env(safe-area-inset-left, 0px)); z-index: 200; padding: .6rem 1.1rem; border-radius: 999px; background: #fff; color: #171236; font-family: var(--f-head); font-weight: 600; text-decoration: none; transform: translateY(-200%); }
.skip-link:focus, .skip-link:focus-visible { transform: none; outline: 3px solid var(--lamp); outline-offset: 2px; }
main:focus, main [tabindex="-1"]:focus { outline: none; }
/* Reviews Previous / Next */
.reviews { position: relative; }
.mq-ctrl { display: flex; justify-content: center; gap: .9rem; padding-top: 1.2rem; }
.mq-btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.3); transition: background-color .2s ease; }
.mq-btn:hover, .mq-btn:focus-visible { background: var(--periwinkle); }
.mq-btn:focus-visible { outline: 3px solid var(--lamp); outline-offset: 2px; }
.mq-btn svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .mq-ctrl:not(:focus-within) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Contrast (WCAG 2.2 AA): navy words on the orange Sales/Sellers tops; deeper teal and purple
   on Buyers and Condo so white words read clearly; full white for card intros and "Est. 2016" */
.tile.sales .svc-top, .svc.sellers .svc-top, .tile.sales .svc-top .more, .tile.sales .svc-top p, .svc.sellers .svc-top p { color: #171236; }
.tile.sales .svc-top .icon, .svc.sellers .svc-top .icon { background: rgba(255,255,255,.35); }
.svc.buyers .svc-top { background: linear-gradient(135deg, #0f6584, #16758f 55%, #1d7f8c); }
.tile.condo .svc-top, .svc.condo .svc-top { background: linear-gradient(135deg, var(--iris), #9450bb 70%, #a84f95); }
.tile.rentals .svc-top, .svc.rentals .svc-top { background: linear-gradient(135deg, var(--sapphire), #3d58e0 55%, var(--iris)); }
.svc-top p { color: #fff; }
.tile.sales .svc-top p, .svc.sellers .svc-top p { color: #171236; }
.svc-top::after { background: rgba(255,255,255,.12); }
.est { color: #fff; }

.tile.sales .svc-top, .svc.sellers .svc-top, .tile.sales .svc-top .more, .tile.sales .svc-top p, .svc.sellers .svc-top p { color: #3b1d78; }

.tile.sales .svc-top, .svc.sellers .svc-top { background: linear-gradient(135deg, #c74a4a, #c65227 55%, #b8541c); }
.tile.sales .svc-top, .svc.sellers .svc-top, .tile.sales .svc-top .more, .tile.sales .svc-top p, .svc.sellers .svc-top p { color: #fff; }
.tile.sales .svc-top .icon, .svc.sellers .svc-top .icon { background: rgba(255,255,255,.2); }

/* v96: rental photos smaller, framed like a listing thumbnail */
.rent-card.has-photo .rent-photo{padding:1.1rem 1.1rem 0;display:flex;justify-content:center}
.rent-card.has-photo .rent-photo img{width:100%;max-width:230px;border-radius:6px;box-shadow:0 10px 28px -14px rgba(0,0,0,.6)}
@media (min-width:761px){
  .rent-card{max-width:800px}
  .rent-card.has-photo{grid-template-columns:minmax(0,280px) minmax(0,1fr)}
  .rent-card.has-photo .rent-photo{padding:1.2rem 0 1.2rem 1.2rem}
  .rent-card.has-photo .rent-photo img{max-width:260px}
}

/* v99: in-between widths (tablets, small laptops) get side-by-side layouts, not stretched phone stacks */
@media (min-width:761px) and (max-width:900px){
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
  .tile .svc-top{padding-inline:1.1rem}
  .board .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:2.2rem}
}
@media (min-width:761px) and (max-width:999px){
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-grid > .svc.rentals{grid-column:1 / -1}
  .svc-grid > .svc.rentals .svc-top{min-height:0!important}
  .svc-grid > .svc.rentals .svc-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;align-items:stretch}
  .svc-grid > .svc.rentals .svc-body > *:not(.who){grid-column:1 / -1}
  .svc-body .who.ll-box + .who.ll-box{border-top:1.5px solid color-mix(in srgb, var(--periwinkle) 60%, transparent);margin-top:0}
  .sold-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:761px) and (max-width:860px){
  .contact .facts{grid-template-columns:repeat(3,minmax(0,auto));justify-content:space-between;gap:1.4rem 2rem}
}

/* v100 Coastal Sea Glass palette */
:root{--sand:#e0cba0;--lamp:#e0cba0}
body .glow-text{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#a8d8cf}
body .photo-box h1 .glow-text{background:none;color:var(--sand)}
body .tile.sales .svc-top,body .svc.sellers .svc-top{background:linear-gradient(160deg,#245f69,#1b4b55)}
body .svc.buyers .svc-top{background:linear-gradient(160deg,#2f5f7d,#244b66)}
body .tile.rentals .svc-top,body .svc.rentals .svc-top{background:linear-gradient(160deg,#454c9c,#363c82)}
body .tile.condo .svc-top,body .svc.condo .svc-top{background:linear-gradient(160deg,#5a4a80,#47396a)}
body .svc-top::after{display:none}
body .svc-top .icon,body .tile.sales .svc-top .icon,body .svc.sellers .svc-top .icon{background:rgba(255,255,255,.14)}
body .svc.sellers{--accent:#8fd0c6} body .svc.buyers{--accent:#8fc0dd} body .svc.rentals{--accent:#a9b0f0}
body .eyebrow,body .after-dark .eyebrow,body .rent-card .eyebrow{color:var(--sand)}
body .dotsep{color:var(--sand)}
body .rent-apply .apply-link{background:linear-gradient(135deg,#efe0bf,var(--sand) 55%,#cdb27c);color:#231a08;box-shadow:0 8px 22px -10px rgba(224,203,160,.6)}
body .pm-points li::before{background:var(--sand)}
/* the rest of the warm sunset accents, in sea glass */
:root{--sunset:linear-gradient(120deg,#2f7f86 0%,#4b5fa8 55%,#5a62b8 100%)}
body .after-dark::after{background:#2f7f86;opacity:.3}
body .facts dt{color:var(--sand)}
body .quote,body .quote:nth-child(5n+1),body .quote:nth-child(5n+3),body .quote:nth-child(5n+4),body .quote:nth-child(5n+5){--c1:#2f7f86;--c2:#4b5fa8}
body .quote:nth-child(odd){--c1:#4b5fa8;--c2:#5a4a80}
body .btn-cta:hover{box-shadow:0 16px 36px -12px rgba(100,111,196,.8),inset 0 1px 0 rgba(255,255,255,.25)}
body .svc.condo{--accent:#a9b0f0}

/* v101: the watercolor has no logo or menu painted in, so the live periwinkle bar shows at the top of Home on every screen */
.img-nav { display: none; }
body[data-page="home"] .site-header:not(.scrolled) .pbar { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
@media (min-width: 761px) { body[data-page="home"] main { padding-top: var(--hh); } }
/* v101 Watercolor Dusk cards (softer than Sea Glass, Amy: "too primary") */
body .tile.sales .svc-top,body .svc.sellers .svc-top{background:linear-gradient(160deg,#556672,#45545f)}
body .svc.buyers .svc-top{background:linear-gradient(160deg,#4f5a80,#3f4870)}
body .tile.rentals .svc-top,body .svc.rentals .svc-top{background:linear-gradient(160deg,#4f5a80,#3f4870)}
body .tile.condo .svc-top,body .svc.condo .svc-top{background:linear-gradient(160deg,#5f5675,#4d4660)}
body .glow-text{color:#bcd5cf}
/* AMY palette (her sample 10-31): charcoal #313131, mauve #7f778e, linen #e4e3de, stone gray #b1b5b6 */
:root{--page:#e4e3de;--haze:#dbdad4;--text:#313131;--muted:#55535a;--line:#b1b5b6;--card:#f3f2ee;--link:#5e5671;color-scheme:light;
 --periwinkle:#7a7289;--periwinkle-hi:#8f88a0;--logo-periwinkle:#7a7289;
 --midnight:#313131;--peri-d:#5e5671;--gold:#5e5671;--peach:#cfc8db;--lamp:#cfc8db;--on-dark-muted:#e4e3de;--req:#a3241c}
body{background:var(--page);color:var(--text)}
body .glow-text{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#5e5671}
body .after-dark .glow-text,body .photo-box .glow-text,body .rent-card .glow-text{color:var(--peach)}
body .eyebrow{color:#5e5671}
body .after-dark .eyebrow,body .rent-card .eyebrow,body .photo-box .what{color:var(--peach)}
body .dotsep{color:#7f778e}
body .tile.sales .svc-top,body .svc.sellers .svc-top,body .svc.buyers .svc-top,body .tile.rentals .svc-top,body .svc.rentals .svc-top,body .tile.condo .svc-top,body .svc.condo .svc-top{background:linear-gradient(160deg,#3a393c,#2c2c2d);border-top:0}
body .svc-top::after{display:none}
body .svc-top .icon,body .tile.sales .svc-top .icon,body .svc.sellers .svc-top .icon{background:#7f778e}
body .svc{background:var(--card);border-color:var(--line);box-shadow:0 14px 34px -22px rgba(49,49,49,.45)}
body .svc.sellers,body .svc.buyers,body .svc.rentals,body .svc.condo,body .svc{--accent:#7f778e}
body .tile{box-shadow:0 14px 34px -20px rgba(49,49,49,.5)}
body .after-dark{background:#313131}
body .after-dark::before,body .after-dark::after{opacity:0}
body .site-footer{background:#313131}
body .photo-box{background:#313131}
body .rent-card.rent-card{background:#313131;box-shadow:0 18px 44px -18px rgba(49,49,49,.5);border-color:#7f778e}
body .rent-card .rent-more{background:#e4e3de;color:#313131;border-color:#e4e3de}
body .rent-apply .apply-link{background:linear-gradient(135deg,#ddd8e6,#cfc8db 55%,#b9b1c8);color:#262626}
body .pm-points li::before{background:var(--peach)}
body .quote{background:rgba(255,255,255,.07)}
body .quote,body .quote:nth-child(n){--c1:#7f778e;--c2:#5e5671}
:root{--sunset:linear-gradient(120deg,#b1b5b6,#7f778e)}
body .facts dt,body .sold-stats dt{color:#5e5671}
body .req{color:#a3241c}
body .after-dark .inq p{color:var(--muted)}
body .after-dark .facts dt,body .after-dark .sold-stats dt{color:var(--peach)}
body .photo-box h1 .glow-text{color:var(--peach)}
/* v103 audit fixes: drawer, hover, focus rings that show on both linen and charcoal */
body .drawer{background:#313131}
body .drawer .call-btn:hover,body .drawer .call-btn:focus-visible,body .drawer .call-btn[aria-expanded="true"]{background:#5e5671}
body :focus-visible{outline-color:#4a4359}
body .chips label:has(input:focus-visible){outline-color:#4a4359}
body .after-dark :focus-visible,body .site-footer :focus-visible,body .rent-card :focus-visible,body .photo-box :focus-visible,body .drawer :focus-visible,body .tile:focus-visible,body .tile :focus-visible,body .svc-top :focus-visible,body .pbar :focus-visible,body .site-header :focus-visible,body .bio :focus-visible{outline-color:#cfc8db}
body .after-dark .inq :focus-visible,body .after-dark .inq .chips label:has(input:focus-visible){outline-color:#4a4359}
body .backdrop{background:rgba(25,25,25,.55)}
body .after-dark::before,body .after-dark::after{background:none}
body .frame img{background:radial-gradient(120% 90% at 50% 30%,#f3f2ee 0%,#e4e3de 55%,#cfcfcb 100%)}
body .btn-cta{box-shadow:0 12px 30px -14px rgba(49,49,49,.55),inset 0 1px 0 rgba(255,255,255,.18)}
body .robot-mark{color:#5e5671}
body .robot-mark svg{color:#5e5671}
/* v103: Services card headers centered on phones (Amy) */
@media(max-width:760px){
 body .svc .svc-top{text-align:center;align-items:center;justify-items:center}
 body .svc .svc-top .icon{margin-inline:auto}
 body .svc .svc-top h3,body .svc .svc-top p{margin-inline:auto}
 body .svc h4{text-align:center}
 body .svc .svc-cta,body .svc .svc-body > a:last-child{display:table;margin-inline:auto;text-align:center}
}
body .reviews .quote{background:linear-gradient(160deg,#7a7289,#6a6280);border-color:rgba(255,255,255,.22);color:#fff}
body .reviews .quote p{color:#fff}
body .reviews .quote .stars,body .reviews .quote .tag{color:#fff}
body .reviews .quote,body .reviews .quote:nth-child(n){--c1:#4a4359;--c2:#3b3547}
/* v107: Jackie and Laura get a smaller bio button in proportion to their cards; Amy's centered on phones (Amy 10-31) */
body .person .read-bio{display:inline-flex;align-items:center;gap:.4rem;margin-top:.8rem;padding:.5rem 1rem;border-radius:999px;background:var(--periwinkle);color:#fff;font-size:.85rem;font-weight:500;white-space:nowrap;border:1px solid transparent;box-shadow:0 10px 22px -14px rgba(49,49,49,.55),inset 0 1px 0 rgba(255,255,255,.18);transition:background .2s ease}
body a.person:hover .read-bio,body a.person:focus-visible .read-bio{background:#5e5671}
@media(max-width:760px){body .meet-btn{display:flex;width:max-content;max-width:100%;margin-inline:auto}}
/* v108: Services page, every button and link centered (Amy 10-31) */
body .svc .go{display:table;margin-inline:auto;text-align:center}
body .svc .ll-box .go{max-width:100%}
body #condo .intro .btn-cta,body .intro .btn-cta{display:flex;width:max-content;max-width:100%;margin-inline:auto;justify-content:center}
.nw{white-space:nowrap}body .svc .go{text-wrap:balance}/* v109: wide and in-between balance (Amy 10-31) */
@media(min-width:761px){
 body .svc .svc-top{text-align:center}
 body .svc .svc-top .icon{margin-inline:auto}
 body .svc h4{text-align:center}
 body .team a.person{display:flex;flex-direction:column;align-items:center;text-align:center}
 body .team a.person .frame{align-self:stretch}
 body .team a.person .read-bio{margin-top:auto}
 body .team a.person p{margin-bottom:.8rem}
 body .sold .list-intro{text-align:center;justify-content:center}
 body .sold .list-intro .list-dek{margin-inline:auto}
 body .bromley .list-intro{max-width:940px;margin-inline:auto}
}
:root{color-scheme:only light}
/* v110: sunset peach accent (Amy chose B), Apply now buttons peach too */
body .photo-box h1 .glow-text{font-size:1.45em;font-weight:600;letter-spacing:-.01em;color:#f9cd86;margin-top:.15em}
body .rent-apply .apply-link{background:linear-gradient(135deg,#fce2b4,#f9cd86 55%,#eeb868);color:#2a1a0e}
body .rent-apply .apply-link:hover,body .rent-apply .apply-link:focus-visible{background:#fce2b4;color:#2a1a0e}
/* v111: top service words peach with a gentle shimmer; hero phone number peach (Amy 10-31) */
body .photo-box .what,body .photo-box .what span{color:#f9cd86}
body .photo-box .what-link{color:#f9cd86;background:linear-gradient(100deg,#f9cd86 0%,#f9cd86 32%,#fffaf4 50%,#f9cd86 68%,#f9cd86 100%);background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:peach-shimmer 5s ease-in-out infinite}
body .photo-box .what b:nth-of-type(2) .what-link{animation-delay:.25s}
body .photo-box .what b:nth-of-type(3) .what-link{animation-delay:.5s}
body .photo-box .what b:nth-of-type(4) .what-link{animation-delay:.75s}
@keyframes peach-shimmer{0%{background-position:100% 0}55%,100%{background-position:0 0}}
body .photo-box .what-link:hover,body .photo-box .what-link:focus-visible,body .photo-box .what-link:active{text-shadow:none;filter:drop-shadow(0 0 6px rgba(249,205,134,.75))}
@media (prefers-reduced-motion: reduce){body .photo-box .what-link{animation:none;background:none;-webkit-text-fill-color:#f9cd86}}
body .photo-box .call-line .call-num{color:#f9cd86;border-bottom-color:rgba(249,205,134,.5)}
body .photo-box .call-line .call-num:hover,body .photo-box .call-line .call-num[aria-expanded="true"]{border-bottom-color:#f9cd86}
body .photo-box .call-line svg{color:#f9cd86}