/* Community guide pages (/st-thomas first, then /port-stanley and /london).
   Loads after /site.css. One template for every town: hero, at a glance
   strip, sticky jump nav, live IDX homes, neighbourhood explorer with a
   Google map, price bars, travel time bars, who it suits, things to do,
   schools, history timeline, growth chart, reviews, FAQ, closing form,
   nearby communities and sources. community.js drives the toggles.
   Same rules as the rest of the site: navy only as gradients on dark
   surfaces, gold fills with navy text, 28px sections, 20px cards, 14px
   images, pills for every control. */

/* ---------- Current page in the nav ---------- */
.hd .nav-link.is-active{ background:rgba(255,255,255,.2); }
.hd.is-solid .nav-link.is-active{ background:#fff; box-shadow:0 1px 3px rgba(7,25,49,.1); }
.drop-in a[aria-current="page"]{ background:var(--panel); }
.mnav details a[aria-current="page"]{ color:var(--ink); font-weight:500; }

html{ scroll-padding-top:calc(var(--hd-h) + 80px); }

/* ---------- Hero: copy lower left, like /homes-for-sale ---------- */
.cg-hero .hero-card{
  height:auto; min-height:clamp(560px, 42vw, 680px);
  align-items:stretch; justify-content:flex-end; text-align:left;
  /* Extra room at the foot: the at a glance strip overlaps it. */
  padding:calc(var(--hd-h) + 32px) max(24px, calc((100vw - 1320px) / 2 + 24px)) clamp(120px, 10vw, 150px);
}
.cg-hero .hero-img{ object-position:50% 62%; }
.cg-hero .hero-shade{ background:
  linear-gradient(90deg, rgba(4,13,27,.82) 0%, rgba(4,13,27,.58) 32%, rgba(4,13,27,.16) 60%, rgba(4,13,27,0) 76%),
  linear-gradient(0deg, rgba(4,13,27,.6) 0%, rgba(4,13,27,0) 48%),
  linear-gradient(180deg, rgba(4,13,27,.5) 0%, rgba(4,13,27,0) 26%); }
.cg-hero-body{ align-items:flex-start; max-width:680px; }
.cg-crumbs{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:8px; min-height:36px; padding:4px 16px; border-radius:999px; font-size:14px; font-weight:500;
  background:rgba(4,13,27,.34); border:1px solid rgba(255,255,255,.24); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.cg-crumbs a{ color:rgba(255,255,255,.78); display:inline-flex; align-items:center; min-height:44px; margin:-12px 0; }
.cg-crumbs a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.cg-crumbs i{ font-size:12px; opacity:.6; }
.cg-title{ margin-top:18px; font-size:clamp(2.5rem, 5vw, 4.6rem); font-weight:500; letter-spacing:-0.04em; line-height:1.02; }
.cg-title .ln{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.cg-title .ln > span{ display:inline-block; animation:lineUp 1.1s var(--ease) both; animation-delay:calc(.25s + var(--i, 0) * .12s); }
.cg-title em{ font-style:normal; color:var(--accent-tint); }
.cg-sub{ margin-top:16px; font-size:clamp(15.5px, 1.25vw, 18px); line-height:1.55; color:rgba(255,255,255,.88); max-width:50ch; }
.cg-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.cg-ctas .pill:hover .pill-ic:has(.ph-arrow-down){ transform:translateY(2px); }

/* ---------- At a glance: four numbers lifting over the hero foot ---------- */
.cg-glance-wrap{ position:relative; z-index:6; max-width:1320px; margin:-74px auto 0; padding:0 24px; }
.cg-glance{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; padding:6px; border-radius:var(--r-card); background:#fff;
  box-shadow:0 30px 60px -34px rgba(7,25,49,.45), 0 0 0 1px rgba(7,25,49,.04); animation:rise 1s var(--ease) .8s both; }
.cg-glance li{ padding:18px 20px 18px; border-radius:14px; background:var(--panel); }
.cg-glance b{ display:block; font-size:clamp(1.6rem, 2.4vw, 2.2rem); font-weight:500; letter-spacing:-0.035em; line-height:1.05; }
.cg-glance span{ display:block; margin-top:6px; font-size:14px; line-height:1.4; color:var(--muted); }

/* ---------- Jump nav: sticky pill row that docks as the only bar ----------
   Undocked it sits under the site header. Docked (body.cg-docked, set by
   community.js once the bar reaches the top) the header slides away and this
   bar moves to the top edge, gaining the phone and home value button, so two
   bars never stack. The mobile menu still brings the header back. */
.cg-jump-mark{ height:0; }
.cg-jump{ position:sticky; top:calc(var(--hd-h) + 10px); z-index:30; margin-top:28px; padding:0 24px; pointer-events:none; transition:top .45s var(--ease); }
body.cg-docked .cg-jump{ top:12px; }
body.cg-docked .hd:not(.menu-open){ transform:translateY(calc(-100% - 12px)); }
.cg-jump-in{ pointer-events:auto; display:flex; align-items:center; gap:6px; width:max-content; max-width:100%; margin:0 auto; padding:5px; border-radius:999px;
  background:rgba(255,255,255,.86); border:1px solid var(--line); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 12px 30px -20px rgba(7,25,49,.35); transition:box-shadow .3s ease, background-color .3s ease; }
body.cg-docked .cg-jump-in{ background:rgba(255,255,255,.94); box-shadow:0 16px 40px -22px rgba(7,25,49,.5); }
.cg-jump-links{ display:flex; gap:4px; min-width:0; overflow-x:auto; scrollbar-width:none; }
.cg-jump-links::-webkit-scrollbar{ display:none; }
.cg-jump-links a{ flex:none; display:inline-flex; align-items:center; height:40px; padding:0 16px; border-radius:999px; font-size:14px; font-weight:500; color:var(--muted); white-space:nowrap; transition:background-color .25s ease, color .25s ease; }
.cg-jump-links a:hover{ color:var(--ink); background:var(--panel); }
.cg-jump-links a.is-on{ background:var(--navy-grad); color:#fff; }
/* Docked extras: collapsed to nothing until the bar docks. */
.cg-jump-cta{ display:flex; align-items:center; gap:6px; max-width:0; overflow:hidden; opacity:0; visibility:hidden; transition:max-width .5s var(--ease), opacity .3s ease, visibility 0s linear .5s; }
body.cg-docked .cg-jump-cta{ max-width:360px; opacity:1; visibility:visible; transition:max-width .5s var(--ease), opacity .3s ease .1s, visibility 0s; }
.cg-jump-tel{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px 0 16px; border-left:1px solid var(--line); font-size:14px; font-weight:500; white-space:nowrap; }
.cg-jump-tel i{ font-size:17px; color:var(--accent-text); }
.cg-jump-tel:hover{ color:var(--accent-text); }
.cg-jump-cta .pill{ height:40px; padding-left:16px; gap:8px; font-size:14px; }
.cg-jump-cta .pill .pill-ic{ width:30px; height:30px; }
.cg-jump-cta .pill .pill-ic i{ font-size:15px; }
@media (max-width:1240px){ .cg-jump-tel span{ display:none; } .cg-jump-tel{ padding:0 12px; } }

/* ---------- Shared bits ---------- */
.cg-head{ max-width:760px; margin:0 auto clamp(28px, 3.4vw, 44px); text-align:center; }
.cg-head .h2{ text-wrap:balance; }
.cg-head .cg-lede{ margin:16px auto 0; }
.cg-head-left{ text-align:left; margin:0; }
.cg-head-left .cg-lede{ margin-left:0; }
.cg-lede{ margin-top:14px; font-size:17px; line-height:1.6; color:var(--ink-2); max-width:56ch; }
.kicker-light{ color:rgba(255,255,255,.7); }
.cg-h3{ font-size:clamp(1.4rem, 2vw, 1.8rem); font-weight:500; letter-spacing:-0.03em; line-height:1.15; }
.cg-split{ display:grid; grid-template-columns:5fr 7fr; gap:clamp(28px, 5vw, 80px); align-items:center; }
.cg-split-top{ align-items:start; }
.cg-src{ margin-top:16px; font-size:13px; line-height:1.5; color:var(--muted); }
.cg-src a{ text-decoration:underline; text-underline-offset:2px; }
.cg-arrows{ display:flex; gap:8px; }
.cg-arrow{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-size:20px; border:1px solid var(--line-2); background:#fff; transition:background-color .25s ease, color .25s ease, border-color .25s ease; }
.cg-arrow:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.cg-arrow:disabled{ opacity:.35; pointer-events:none; }

/* Two option toggle (prices, travel mode) */
.cg-seg{ display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:var(--panel); }
.cg-seg .seg-btn{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 18px; border-radius:999px; font-size:14.5px; font-weight:500; color:var(--muted); transition:background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.cg-seg .seg-btn i{ font-size:18px; }
.cg-seg .seg-btn:hover{ color:var(--ink); }
.cg-seg .seg-btn.is-on{ background:#fff; color:var(--ink); box-shadow:0 2px 8px -2px rgba(7,25,49,.18); }
.cg-seg-dark{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); }
.cg-seg-dark .seg-btn{ color:rgba(255,255,255,.74); }
.cg-seg-dark .seg-btn:hover{ color:#fff; }
.cg-seg-dark .seg-btn.is-on{ background:var(--accent); color:var(--ink); box-shadow:none; }

/* ---------- Homes: IDX shell (same as /homes-for-sale) ---------- */
.cg-homes{ padding-top:clamp(56px, 6vw, 88px); }
.cg-homes .sec-head .cg-lede{ max-width:60ch; }
.idx-shell{ position:relative; margin-top:14px; min-height:420px; border-radius:var(--r-sec); background:var(--panel); padding:clamp(12px, 1.6vw, 20px); }
.idx-shell > idx-listings-showcase{ display:block; opacity:0; transition:opacity .6s var(--ease); }
.idx-shell.is-ready > idx-listings-showcase{ opacity:1; }
.idx-shell.is-ready{ min-height:0; }
.idx-sk{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.idx-sk .card-sk{ background:#fff; }
.idx-shell.is-ready .idx-sk, .idx-shell.is-missing .idx-sk{ display:none; }
.idx-fallback{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px 24px; min-height:280px; padding:clamp(20px, 3vw, 40px); border-radius:var(--r-card); background:#fff; }
.idx-fallback[hidden]{ display:none; }
.idx-fallback .ic{ background:var(--accent-soft); }
.idx-fb-t{ font-size:clamp(19px, 1.6vw, 23px); font-weight:500; letter-spacing:-0.02em; }
.idx-fb-s{ margin-top:6px; font-size:15.5px; line-height:1.6; color:var(--muted); max-width:52ch; }
.idx-fb-ctas{ display:flex; flex-wrap:wrap; gap:8px; }
.idx-note{ margin-top:14px; font-size:13.5px; color:var(--muted); text-align:center; }

/* ---------- Neighbourhood explorer ---------- */
.nbx{ display:grid; grid-template-columns:minmax(250px, 3fr) 9fr; gap:14px; }
.nbx-tabs{ display:flex; flex-direction:column; gap:6px; }
.nbx-tab{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; min-height:62px; padding:12px 44px 12px 20px; border-radius:16px;
  text-align:left; font-size:16px; font-weight:500; letter-spacing:-0.01em; line-height:1.25; background:var(--panel); transition:background-color .25s ease, color .25s ease, transform .3s var(--ease); }
.nbx-tab::after{ content:""; position:absolute; right:18px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:var(--line-2); transition:background-color .25s ease, transform .3s var(--ease); }
.nbx-dir{ font-size:12.5px; font-weight:500; color:var(--muted); letter-spacing:.01em; }
.nbx-tab:hover{ background:var(--panel-2); }
.nbx-tab[aria-selected="true"]{ background:var(--navy-grad); color:#fff; }
.nbx-tab[aria-selected="true"] .nbx-dir{ color:var(--accent-tint); }
.nbx-tab[aria-selected="true"]::after{ background:var(--accent); transform:scale(1.4); }
.nbx-stage{ display:grid; grid-template-columns:1fr 1fr; gap:14px; min-width:0; }
.nbx-panels{ min-width:0; }
.nbx-panel{ height:100%; padding:clamp(22px, 2.6vw, 34px); border-radius:var(--r-card); background:var(--panel); }
.nbx-panel + .nbx-panel{ margin-top:14px; }
.js-nbx .nbx-panel + .nbx-panel{ margin-top:0; }
.nbx-panel[hidden]{ display:none; }
.nbx-panel.is-in{ animation:nbxIn .5s var(--ease) both; }
@keyframes nbxIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.nbx-panel h3{ font-size:clamp(1.5rem, 2.2vw, 2rem); font-weight:500; letter-spacing:-0.03em; line-height:1.1; }
.nbx-line{ margin-top:12px; font-size:16px; line-height:1.62; color:var(--ink-2); }
.nbx-facts{ margin:20px 0 0; display:grid; gap:0; border-top:1px solid var(--line-2); }
.nbx-facts > div{ display:grid; grid-template-columns:118px 1fr; gap:14px; padding:11px 0; border-bottom:1px solid var(--line-2); }
.nbx-facts dt{ font-size:13.5px; font-weight:500; color:var(--muted); padding-top:1px; }
.nbx-facts dd{ margin:0; font-size:15px; line-height:1.5; }
.nbx-acts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.nbx-map{ position:relative; min-height:420px; border-radius:var(--r-card); overflow:hidden; background:var(--panel-2); }
.nbx-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:saturate(.85); }
.nbx-map-note{ position:absolute; left:12px; bottom:12px; display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border-radius:999px; font-size:13px; font-weight:500;
  background:rgba(255,255,255,.94); box-shadow:0 6px 16px -8px rgba(7,25,49,.35); pointer-events:none; }
.nbx-map-note i{ color:var(--accent-text); font-size:16px; }
.cg-also{ margin-top:18px; font-size:14.5px; line-height:1.55; color:var(--muted); text-align:center; max-width:78ch; margin-left:auto; margin-right:auto; }

/* ---------- Prices ---------- */
.cg-minis{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:26px; }
.cg-minis li{ padding:14px 14px 13px; border-radius:14px; background:var(--panel); }
.cg-minis b{ display:block; font-size:19px; font-weight:500; letter-spacing:-0.02em; line-height:1.15; }
.cg-minis span{ display:block; margin-top:4px; font-size:13px; line-height:1.35; color:var(--muted); }
.cg-price-ctas{ margin-top:24px; }
.cg-chart-card{ padding:clamp(20px, 2.6vw, 32px); border-radius:var(--r-sec); background:var(--panel); }
.pbars{ margin-top:22px; }
.pbars + .pbars{ margin-top:0; }
.js-cg .pbars[hidden]{ display:none; }
.pbars-cap{ font-size:14.5px; color:var(--muted); margin-bottom:14px; }
.pbars ul{ display:grid; gap:10px; }
.pbars li{ display:grid; grid-template-columns:minmax(150px, 34%) 1fr auto; align-items:center; gap:14px; padding:12px 14px 12px 16px; border-radius:14px; background:#fff; }
.pb-name{ font-size:15px; font-weight:500; line-height:1.25; }
.pb-name small{ display:block; margin-top:2px; font-size:12.5px; font-weight:400; color:var(--muted); }
.pb-track{ position:relative; height:12px; border-radius:999px; background:var(--panel-2); overflow:hidden; }
/* One shared $0 to $900,000 scale: width = value / 900,000. */
.pb-track i{ position:absolute; left:0; top:0; bottom:0; width:calc(var(--v) / 900000 * 100%); border-radius:999px; background:var(--navy-grad);
  transform-origin:0 50%; transition:transform 1.1s var(--ease); }
.pbars li b{ font-size:16px; font-weight:600; letter-spacing:-0.015em; min-width:84px; text-align:right; }
.pbars li.is-ref{ background:var(--accent-soft); }
.pbars li.is-ref .pb-track{ background:rgba(201,164,92,.25); }
.pbars li.is-ref .pb-track i{ background:var(--accent); }
.pbars-note{ margin-top:12px; font-size:13.5px; line-height:1.5; color:var(--muted); }
.js-cg .pbars:not(.is-drawn) .pb-track i{ transform:scaleX(0); }
.pbars li:nth-child(2) .pb-track i{ transition-delay:.06s; }
.pbars li:nth-child(3) .pb-track i{ transition-delay:.12s; }
.pbars li:nth-child(4) .pb-track i{ transition-delay:.18s; }
.pbars li:nth-child(5) .pb-track i{ transition-delay:.24s; }

.cg-buy{ margin-top:clamp(48px, 5vw, 72px); }
.cg-buy-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin-top:20px; }
.cg-buy-grid li{ display:flex; flex-direction:column; padding:22px; border-radius:var(--r-card); background:var(--panel); }
.cg-buy-grid .ic{ width:48px; height:48px; font-size:23px; }
.cg-buy-grid h4{ margin:18px 0 0; font-size:18px; font-weight:500; letter-spacing:-0.015em; line-height:1.25; }
.cg-buy-grid p{ margin-top:8px; font-size:15px; line-height:1.55; color:var(--muted); }
.cg-buy-where{ margin-top:auto !important; padding-top:14px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 10px; font-size:13.5px !important; color:var(--ink-2) !important; font-weight:500; }
.cg-buy-where span{ display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:999px; background:#fff; color:var(--accent-text); font-size:12.5px; font-weight:600; }
.cg-era{ display:flex; align-items:flex-start; gap:12px; margin-top:14px; padding:16px 20px; border-radius:16px; border:1px solid var(--line); font-size:15px; line-height:1.55; color:var(--ink-2); }
.cg-era i{ font-size:22px; color:var(--accent-text); flex:none; margin-top:1px; }

/* ---------- Travel times ---------- */
.cg-tt-card{ position:relative; overflow:hidden; padding:clamp(24px, 4vw, 56px); border-radius:var(--r-sec); background:var(--navy-grad); color:#fff; }
.cg-tt-card::before{ content:""; position:absolute; right:-10%; top:-30%; width:60%; height:90%; border-radius:50%; background:radial-gradient(closest-side, rgba(201,164,92,.16), rgba(201,164,92,0)); pointer-events:none; }
.cg-tt-head{ position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:20px 32px; flex-wrap:wrap; }
.cg-tt-head .cg-lede{ color:rgba(255,255,255,.8); }
.tt-cats{ position:relative; display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.tt-cat{ height:40px; padding:0 16px; border-radius:999px; font-size:14px; font-weight:500; color:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.2); transition:background-color .2s ease, color .2s ease, border-color .2s ease; }
.tt-cat:hover{ border-color:rgba(255,255,255,.6); color:#fff; }
.tt-cat.is-on{ background:#fff; color:var(--ink); border-color:#fff; }
.tt{ position:relative; margin-top:22px; }
/* Minute labels over the bar column: link padding + name column + gap. */
.tt-scale{ display:flex; justify-content:space-between; margin:0 106px 6px calc(32px + min(30%, 320px)); font-size:12px; color:rgba(255,255,255,.55); }
.tt-list{ display:grid; gap:4px; }
.tt-row[hidden]{ display:none; }
.tt-link{ display:grid; grid-template-columns:min(30%, 320px) 1fr 76px; align-items:center; gap:16px; min-height:54px; padding:8px 14px 8px 16px; border-radius:14px; transition:background-color .25s ease; }
.tt-link:hover{ background:rgba(255,255,255,.07); }
.tt-link:focus-visible{ outline-color:var(--accent-tint); }
.tt-name{ font-size:15.5px; font-weight:500; line-height:1.25; }
.tt-name small{ display:block; margin-top:2px; font-size:12.5px; font-weight:400; color:rgba(255,255,255,.6); }
.tt-bar{ position:relative; height:14px; border-radius:999px;
  /* 15 minute gridlines on the 75 minute scale. */
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 20%), rgba(255,255,255,.06); }
.tt-bar i{ position:absolute; left:0; top:0; bottom:0; width:calc(var(--m, 0) / 75 * 100%); min-width:10px; border-radius:999px;
  background:linear-gradient(90deg, #E8C77E, #C9A45C); transition:width .8s var(--ease); }
.tt-row.is-np .tt-bar i{ width:100%; background:repeating-linear-gradient(-45deg, rgba(255,255,255,.14) 0 6px, rgba(255,255,255,.04) 6px 12px); }
.tt-val{ font-size:16px; font-weight:600; text-align:right; white-space:nowrap; }
.tt-row.is-np .tt-val{ font-size:13px; font-weight:500; color:rgba(255,255,255,.6); white-space:normal; line-height:1.2; }
.tt-link .tt-val::after{ content:"\2197"; margin-left:6px; font-size:13px; font-weight:400; opacity:0; transition:opacity .2s ease; }
.tt-link:hover .tt-val::after{ opacity:.7; }
.tt-row.is-np .tt-link .tt-val::after{ display:none; }
.tt-table{ position:relative; margin-top:22px; border-top:1px solid rgba(255,255,255,.14); }
.tt-table summary{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px; font-size:15px; font-weight:500; cursor:pointer; list-style:none; }
.tt-table summary::-webkit-details-marker{ display:none; }
.tt-table summary i{ font-size:18px; transition:transform .3s var(--ease); }
.tt-table[open] summary i{ transform:rotate(180deg); }
.tt-table-scroll{ overflow-x:auto; }
.tt-table table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.tt-table caption{ text-align:left; font-size:13px; color:rgba(255,255,255,.6); padding-bottom:8px; }
.tt-table th, .tt-table td{ padding:10px 12px; text-align:left; border-bottom:1px solid rgba(255,255,255,.1); white-space:nowrap; }
.tt-table thead th{ font-size:13px; font-weight:500; color:rgba(255,255,255,.65); }
.tt-table tbody th{ font-weight:500; white-space:normal; }
.tt-foot{ position:relative; margin-top:16px; font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.66); max-width:90ch; }
.tt-foot a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }

/* ---------- Who it suits ---------- */
.fit{ max-width:1040px; margin:0 auto; }
.fit-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.fit-tab{ display:inline-flex; align-items:center; gap:8px; height:48px; padding:0 20px; border-radius:999px; border:1px solid var(--line-2); background:#fff; font-size:15px; font-weight:500;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease; }
.fit-tab i{ font-size:19px; color:var(--accent-text); transition:color .25s ease; }
.fit-tab:hover{ border-color:var(--ink); }
.fit-tab[aria-selected="true"]{ background:var(--navy-grad); color:#fff; border-color:var(--ink); }
.fit-tab[aria-selected="true"] i{ color:var(--accent-tint); }
.fit-panels{ margin-top:18px; }
.fit-panel{ padding:clamp(24px, 3.4vw, 44px); border-radius:var(--r-sec); background:var(--panel); text-align:center; }
.fit-panel + .fit-panel{ margin-top:12px; }
.js-cg .fit-panel + .fit-panel{ margin-top:0; }
.fit-panel[hidden]{ display:none; }
.fit-panel.is-in{ animation:nbxIn .5s var(--ease) both; }
.fit-why{ font-size:clamp(19px, 1.8vw, 24px); font-weight:400; letter-spacing:-0.02em; line-height:1.42; max-width:44ch; margin:0 auto; text-wrap:balance; }
.fit-look{ margin-top:22px; font-size:13.5px; font-weight:500; color:var(--muted); }
.fit-goto{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:10px; }
.fit-goto button{ display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 18px 0 20px; border-radius:999px; background:#fff; font-size:15px; font-weight:500;
  box-shadow:0 1px 3px rgba(7,25,49,.08); transition:background-color .25s ease, color .25s ease; }
.fit-goto button::after{ content:""; width:7px; height:7px; border-right:1.5px solid currentColor; border-top:1.5px solid currentColor; transform:rotate(45deg); margin-top:0; opacity:.6; transition:transform .3s var(--ease); }
.fit-goto a{ display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 18px 0 20px; border-radius:999px; background:#fff; font-size:15px; font-weight:500; box-shadow:0 1px 3px rgba(7,25,49,.08); transition:background-color .25s ease; }
.fit-goto a::after{ content:""; width:7px; height:7px; border-right:1.5px solid currentColor; border-top:1.5px solid currentColor; transform:rotate(45deg); opacity:.6; }
.fit-goto a:hover{ background:var(--accent); }
.fit-goto button:hover{ background:var(--accent); }
.fit-goto button:hover::after{ transform:translateX(2px) rotate(45deg); }
.fit-link{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; min-height:44px; font-size:15px; font-weight:500; color:var(--accent-text); }
.fit-link:hover{ text-decoration:underline; text-underline-offset:3px; }
.fit-honest{ display:flex; align-items:flex-start; justify-content:center; gap:10px; margin-top:16px; font-size:15px; line-height:1.5; color:var(--muted); text-align:left; }
.fit-honest i{ font-size:19px; color:var(--accent-text); flex:none; margin-top:1px; }
.fit-honest b{ color:var(--ink); font-weight:500; }

/* ---------- Things to do ---------- */
.do-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.do-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.do-card{ display:flex; flex-direction:column; padding:24px 24px 18px; border-radius:var(--r-card); background:var(--panel); transition:transform .5s var(--ease), box-shadow .5s ease; }
.do-card:hover{ transform:translateY(-4px); box-shadow:0 22px 44px -30px rgba(7,25,49,.4); }
.do-card[hidden]{ display:none; }
.do-card.is-in{ animation:nbxIn .45s var(--ease) both; }
.do-km{ font-size:13px; font-weight:500; color:var(--accent-text); }
.do-card h3{ margin-top:10px; font-size:20px; font-weight:500; letter-spacing:-0.02em; line-height:1.2; }
.do-card p{ margin-top:8px; font-size:15px; line-height:1.58; color:var(--muted); }
.do-links{ display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:auto; padding-top:14px; }
.do-links a{ display:inline-flex; align-items:center; gap:6px; min-height:44px; font-size:14.5px; font-weight:500; }
.do-links a i{ font-size:17px; color:var(--accent-text); }
.do-links a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- Schools and services ---------- */
.sc-list{ display:grid; gap:8px; }
.sc-list li{ position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; padding:16px 16px 16px 16px; border-radius:var(--r-card); background:var(--panel); transition:background-color .25s ease; }
.sc-list li:hover{ background:var(--panel-2); }
.sc-list .ic{ width:48px; height:48px; font-size:22px; }
.sc-list h3{ font-size:17px; font-weight:500; letter-spacing:-0.015em; line-height:1.3; }
.sc-list p{ margin-top:3px; font-size:14.5px; line-height:1.5; color:var(--muted); }
.sc-go{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:#fff; font-size:18px; transition:background-color .25s ease, color .25s ease, transform .35s var(--ease); }
.sc-go::after{ content:""; position:absolute; inset:0; border-radius:var(--r-card); }
.sc-list li:hover .sc-go{ background:var(--ink); color:#fff; transform:rotate(45deg); }

/* ---------- History timeline ---------- */
.tl{ display:grid; grid-auto-flow:column; grid-auto-columns:clamp(240px, 22vw, 300px); gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain;
  padding:34px max(24px, calc((100vw - 1320px) / 2 + 24px)) 8px; scroll-padding:0 max(24px, calc((100vw - 1320px) / 2 + 24px)); position:relative; }
.tl::-webkit-scrollbar{ display:none; }
.tl li{ position:relative; scroll-snap-align:start; padding:26px 22px 22px; border-radius:var(--r-card); background:var(--panel); }
.tl li::before{ content:""; position:absolute; left:22px; top:-22px; width:12px; height:12px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px var(--accent-soft); }
.tl li::after{ content:""; position:absolute; left:34px; right:-12px; top:-17px; height:2px; background:var(--line-2); }
.tl li:last-child::after{ display:none; }
.tl b{ display:block; font-size:clamp(1.8rem, 2.6vw, 2.4rem); font-weight:500; letter-spacing:-0.04em; line-height:1; }
.tl p{ margin-top:12px; font-size:15px; line-height:1.55; color:var(--ink-2); }
.tl li.is-next{ background:var(--navy-grad); color:#fff; }
.tl li.is-next p{ color:rgba(255,255,255,.84); }
.tl li.is-next::before{ background:#fff; box-shadow:0 0 0 5px rgba(201,164,92,.5); }
.tl:focus-visible{ outline-offset:-3px; }
.uniq{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:clamp(32px, 4vw, 56px); }
.uniq li{ padding:26px 26px 28px; border-radius:var(--r-card); border:1px solid var(--line); }
.uniq-n{ font-size:14px; font-weight:600; color:var(--accent-text); }
.uniq h3{ margin-top:14px; font-size:21px; font-weight:500; letter-spacing:-0.02em; line-height:1.2; }
.uniq p{ margin-top:8px; font-size:15.5px; line-height:1.58; color:var(--muted); }

/* ---------- Growth ---------- */
.cg-grow-card{ position:relative; overflow:hidden; padding:clamp(24px, 4vw, 56px); border-radius:var(--r-sec); background:var(--navy-grad); color:#fff; }
.cg-grow-card .cg-lede{ color:rgba(255,255,255,.82); }
.pop{ margin:0; }
.pop-cols{ display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(8px, 1.4vw, 18px); align-items:end; height:300px; padding:0 4px; border-bottom:1px solid rgba(255,255,255,.2); }
.pop-col{ display:flex; flex-direction:column; align-items:stretch; justify-content:flex-end; height:100%; text-align:center; }
.pop-col b{ font-size:clamp(15px, 1.5vw, 19px); font-weight:600; letter-spacing:-0.015em; margin-bottom:8px; }
/* Heights share one 0 to 80,000 scale. */
.pop-col i{ display:block; height:calc(var(--v) / var(--max, 80000) * (100% - 34px)); border-radius:12px 12px 0 0; background:linear-gradient(180deg, #E8C77E, #C9A45C); transform-origin:50% 100%; transition:transform 1.1s var(--ease); }
.pop-col:nth-child(2) i{ transition-delay:.08s; }
.pop-col:nth-child(3) i{ transition-delay:.16s; }
.pop-col:nth-child(4) i{ transition-delay:.24s; }
.pop-col.is-fc i{ background:repeating-linear-gradient(-45deg, rgba(232,199,126,.9) 0 7px, rgba(232,199,126,.45) 7px 14px); }
.pop-col span{ order:3; margin-top:10px; font-size:15px; font-weight:500; }
.pop-col span small{ display:block; font-size:12px; font-weight:400; color:rgba(255,255,255,.62); }
.pop-cols + figcaption{ margin-top:48px; font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.6); }
.js-cg .pop:not(.is-drawn) .pop-col i{ transform:scaleY(0); }
.chg{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:10px; margin-top:clamp(32px, 4vw, 52px); }
.chg li{ display:flex; flex-direction:column; padding:22px; border-radius:var(--r-card); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); }
.chg-tag{ align-self:flex-start; display:inline-flex; align-items:center; min-height:26px; padding:3px 11px; border-radius:999px; background:rgba(201,164,92,.18); color:var(--accent-tint); font-size:12px; font-weight:600; line-height:1.3; }
.chg h3{ margin-top:14px; font-size:18.5px; font-weight:500; letter-spacing:-0.02em; line-height:1.25; }
.chg p{ margin-top:8px; font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.78); }
.chg a{ margin-top:auto; padding-top:14px; display:inline-flex; align-items:center; gap:6px; min-height:44px; font-size:14px; font-weight:500; color:#fff; }
.chg a:hover{ text-decoration:underline; text-underline-offset:3px; }
.chg-note{ margin-top:20px; font-size:15.5px; line-height:1.55; color:rgba(255,255,255,.86); max-width:80ch; }

/* ---------- Reviews ---------- */
.cg-score{ display:inline-flex; align-items:center; gap:14px; min-height:56px; padding:6px 20px 6px 8px; border-radius:999px; background:var(--panel); transition:background-color .25s ease; }
.cg-score:hover{ background:var(--panel-2); }
.cg-score > b{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--navy-grad); color:#fff; font-size:17px; font-weight:600; }
.cg-score-meta{ display:flex; flex-direction:column; gap:2px; font-size:13.5px; font-weight:500; }
.cg-score .stars-g{ color:var(--accent); font-size:14px; }
.rev-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.rev-row li{ display:flex; flex-direction:column; padding:26px; border-radius:var(--r-card); background:var(--panel); }
.rev-row .stars-g{ color:var(--accent); }
.rev-row blockquote{ margin:14px 0 0; }
.rev-row blockquote p{ font-size:17px; line-height:1.55; letter-spacing:-0.01em; }
.rev-who{ margin-top:auto; padding-top:18px; display:flex; flex-direction:column; }
.rev-who b{ font-size:15px; font-weight:500; }
.rev-who span{ font-size:13.5px; color:var(--muted); }

/* ---------- Nearby communities + sources ---------- */
.cg-more{ padding-bottom:clamp(72px, 8vw, 120px); }
.more-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:18px; }
.more-grid a{ position:relative; display:flex; align-items:flex-end; min-height:200px; padding:20px; border-radius:var(--r-card); overflow:hidden; color:#fff; isolation:isolate; }
.more-grid img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .9s var(--ease); }
.more-grid a::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(4,13,27,.82) 0%, rgba(4,13,27,.2) 60%, rgba(4,13,27,.05) 100%); }
.more-grid a:hover img{ transform:scale(1.05); }
.more-grid span{ display:flex; flex-direction:column; gap:2px; }
.more-grid b{ font-size:20px; font-weight:500; letter-spacing:-0.02em; }
.more-grid small{ font-size:14px; color:rgba(255,255,255,.82); }
.more-grid a > i{ position:absolute; right:16px; top:16px; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:#fff; color:var(--ink); font-size:17px; transition:transform .35s var(--ease); }
.more-grid a:hover > i{ transform:rotate(45deg); }
.src{ margin-top:28px; border-radius:var(--r-card); background:var(--panel); }
.src summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:72px; padding:14px 22px; cursor:pointer; list-style:none; }
.src summary::-webkit-details-marker{ display:none; }
.src summary > span{ display:flex; flex-direction:column; gap:2px; }
.src summary b{ font-size:16.5px; font-weight:500; }
.src summary small{ font-size:13.5px; color:var(--muted); }
.src summary i{ font-size:20px; flex:none; transition:transform .3s var(--ease); }
.src[open] summary i{ transform:rotate(180deg); }
.src-list{ list-style:decimal; padding:0 22px 0 44px; display:grid; gap:8px; font-size:14.5px; line-height:1.5; color:var(--muted); }
.src-list a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--line-2); }
.src-list a:hover{ text-decoration-color:var(--ink); }
.src-note{ padding:16px 22px 22px; font-size:13.5px; line-height:1.55; color:var(--muted); }

/* ---------- Neighbourhood pages (/st-thomas/<name>) ----------
   Navy hero with the copy left and a live Google map of the neighbourhood
   right (real, specific, and no stock photo). Then an overview with a facts
   card, fit cards and sibling links; the rest reuses the town components. */
.nb-hero .hero-card{
  height:auto; min-height:clamp(560px, 42vw, 660px);
  display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); align-items:center; gap:clamp(24px, 4vw, 64px); text-align:left;
  padding:calc(var(--hd-h) + 40px) max(24px, calc((100vw - 1320px) / 2 + 24px)) clamp(120px, 10vw, 150px);
  background:
    radial-gradient(55% 80% at 88% 0%, rgba(201,164,92,.18) 0%, rgba(201,164,92,0) 62%),
    radial-gradient(45% 70% at 6% 100%, rgba(201,164,92,.10) 0%, rgba(201,164,92,0) 60%),
    linear-gradient(160deg, #16396A 0%, #0B2446 44%, #071931 82%, #050F20 100%);
}
/* The town's own photo sits behind the navy, fading in left to right, so the
   hero reads as St. Thomas (or Port Stanley, or London) at a glance. */
.nb-hero-bg{ position:absolute; inset:0; pointer-events:none; }
.nb-hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 45%; }
.nb-hero-bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(7,25,49,.97) 0%, rgba(7,25,49,.88) 34%, rgba(7,25,49,.52) 66%, rgba(7,25,49,.3) 100%),
    linear-gradient(0deg, rgba(5,15,32,.55) 0%, rgba(5,15,32,0) 40%); }
.nb-hero-body, .nb-hero-map{ z-index:1; }
.nb-hero-body{ align-items:flex-start; max-width:640px; }
/* No staggered delay on the guide heroes: with no photo, the headline and
   intro are the page's largest paint, and a delayed fade in pushes LCP back. */
.nb-hero .hero-rise, .nb-hero .cg-title .ln > span{ animation-delay:0s !important; animation-duration:.6s; }
.nb-dir{ display:inline-flex; align-items:center; gap:6px; margin-top:18px; font-size:14.5px; font-weight:500; color:var(--accent-tint); }
.nb-dir i{ font-size:17px; }
.nb-hero .cg-title{ margin-top:10px; font-size:clamp(2.4rem, 4.6vw, 4.2rem); }
.nb-hero-map{ position:relative; align-self:stretch; min-height:380px; border-radius:var(--r-card); overflow:hidden; background:#0B2446; box-shadow:0 30px 60px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.12); }
.nb-hero-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.nb-hero-map-ph{ position:absolute; inset:0; display:grid; place-items:center; font-size:44px; color:rgba(255,255,255,.3); background:repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px), #0B2446; }
.nb-hero-open{ position:absolute; left:12px; bottom:12px; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:999px; background:#fff; color:var(--ink); font-size:14px; font-weight:500;
  box-shadow:0 8px 20px -10px rgba(7,25,49,.5); transition:background-color .25s ease; }
.nb-hero-open i{ font-size:17px; color:var(--accent-text); }
.nb-hero-open:hover{ background:var(--accent); }
.nb-hero-open:hover i{ color:var(--ink); }
.nb-ov-grid{ display:grid; grid-template-columns:7fr 5fr; gap:clamp(28px, 5vw, 80px); align-items:start; }
.nb-ov-copy .h2{ text-wrap:balance; }
.nb-ov-copy p:not(.kicker){ margin-top:18px; font-size:17px; line-height:1.68; color:var(--ink-2); max-width:62ch; }
.nb-ov-copy .h2 + p{ margin-top:22px; }
.nb-ov-facts{ position:sticky; top:96px; padding:clamp(22px, 2.4vw, 30px); border-radius:var(--r-card); background:var(--panel); }
.nb-ov-facts h3{ font-size:19px; font-weight:500; letter-spacing:-0.02em; margin-bottom:14px; }
.nb-fit-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px; }
.nb-fit-grid li{ padding:24px; border-radius:var(--r-card); background:var(--panel); }
.nb-fit-grid h3{ font-size:18.5px; font-weight:500; letter-spacing:-0.02em; line-height:1.25; }
.nb-fit-grid h3::before{ content:""; display:block; width:28px; height:3px; border-radius:3px; background:var(--accent); margin-bottom:14px; }
.nb-fit-grid p{ margin-top:8px; font-size:15px; line-height:1.58; color:var(--muted); }
.nb-fit .fit-honest{ margin-top:18px; }
.nb-more-head{ display:flex; align-items:center; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; }
.nb-sibs{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-top:16px; }
.nb-sibs a{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:72px; padding:14px 16px 14px 20px; border-radius:16px; background:var(--panel); transition:background-color .25s ease; }
.nb-sibs a:hover{ background:var(--panel-2); }
.nb-sibs span{ display:flex; flex-direction:column; }
.nb-sibs b{ font-size:16px; font-weight:500; letter-spacing:-0.01em; line-height:1.25; }
.nb-sibs small{ font-size:13px; color:var(--muted); }
.nb-sibs i{ flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#fff; font-size:16px; transition:transform .35s var(--ease); }
.nb-sibs a:hover i{ transform:rotate(45deg); }
@media (max-width:1100px){ .nb-sibs{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:1023px){
  .nb-hero .hero-card{ grid-template-columns:1fr; }
  .nb-hero-map{ min-height:320px; }
  .nb-ov-grid{ grid-template-columns:1fr; }
  .nb-ov-facts{ position:static; }
}
@media (max-width:760px){
  .nb-hero .hero-card{ padding:calc(var(--hd-h) + 24px) 20px 110px; gap:22px; }
  .nb-hero .cg-title{ font-size:clamp(2.1rem, 10vw, 2.7rem); }
  .nb-dir{ margin-top:14px; font-size:13.5px; }
  .nb-hero-map{ min-height:240px; margin:0 -4px; }
  .nb-hero-bg::after{ background:linear-gradient(180deg, rgba(7,25,49,.62) 0%, rgba(7,25,49,.9) 42%, rgba(7,25,49,.97) 100%); }
  .nb-ov-copy p:not(.kicker){ font-size:16px; }
  .nb-ov-facts{ margin:0 -16px; border-radius:0; padding:24px 16px; }
  .nb-sibs{ grid-template-columns:1fr; }
}

/* ---------- London neighbourhood finder ---------- */
.lf-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:22px; }
.lf-card h3 a:hover{ text-decoration:underline; text-underline-offset:3px; }
.lf-card.has-guide{ background:var(--accent-soft); }
.lf-card:target{ box-shadow:0 0 0 2px var(--accent); }
@media (max-width:760px){ .lf-chips{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; margin:0 -16px 18px; padding:0 16px; } .lf-chips::-webkit-scrollbar{ display:none; } .lf-chips .chip{ flex:none; } }

/* ---------- Buy or sell pop-up ----------
   Centred card on desktop, bottom sheet on phones. The backdrop does not
   close it (only the X or Escape), as asked. */
.cg-pop{ position:fixed; inset:0; z-index:96; display:grid; place-items:center; padding:20px; }
.cg-pop[hidden]{ display:none !important; }
.cg-pop-backdrop{ position:absolute; inset:0; background:rgba(4,13,27,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); animation:popFade .4s ease both; }
@keyframes popFade{ from{ opacity:0; } to{ opacity:1; } }
.cg-pop-card{ position:relative; width:min(480px, 100%); max-height:calc(100dvh - 40px); overflow:auto; padding:30px 30px 22px; border-radius:var(--r-sec); background:#fff;
  box-shadow:0 40px 90px -30px rgba(4,13,27,.6); animation:popIn .55s var(--ease) both; }
.cg-pop-x{ position:absolute; right:14px; top:14px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-size:20px; background:var(--panel); transition:background-color .25s ease, color .25s ease, transform .35s var(--ease); }
.cg-pop-x:hover{ background:var(--ink); color:#fff; transform:rotate(90deg); }
.cg-pop-who{ display:flex; align-items:center; gap:12px; padding-right:48px; font-size:14px; line-height:1.3; }
.cg-pop-who b{ font-weight:500; display:block; }
.cg-pop-faces{ display:flex; flex:none; }
.cg-pop-faces img{ width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid #fff; box-shadow:0 0 0 1px var(--line); }
.cg-pop-faces img + img{ margin-left:-12px; }
.cg-pop-live{ display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:13px; }
.cg-pop-title{ margin-top:20px; font-size:clamp(1.6rem, 3vw, 2rem); font-weight:500; letter-spacing:-0.035em; line-height:1.1; text-wrap:balance; }
.cg-pop-step[hidden]{ display:none; }
.cg-pop-step.is-in{ animation:nbxIn .45s var(--ease) both; }
.cg-pop-sub{ margin-top:10px; font-size:15.5px; line-height:1.55; color:var(--muted); }
.cg-pop-opts{ display:grid; gap:8px; margin-top:20px; }
.cg-pop-opt{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; width:100%; padding:12px 18px 12px 12px; border-radius:var(--r-card); background:var(--panel); text-align:left;
  transition:background-color .25s ease, transform .3s var(--ease); }
.cg-pop-opt .ic{ width:48px; height:48px; font-size:23px; }
.cg-pop-opt-t{ display:flex; flex-direction:column; }
.cg-pop-opt-t b{ font-size:17px; font-weight:500; letter-spacing:-0.015em; }
.cg-pop-opt-t span{ font-size:14px; color:var(--muted); }
.cg-pop-go{ font-size:20px; transition:transform .3s var(--ease); }
.cg-pop-opt:hover{ background:var(--accent-soft); }
.cg-pop-opt:hover .cg-pop-go{ transform:translateX(3px); }
.cg-pop-opt:active{ transform:scale(.99); }
.cg-pop-vc{ display:grid; gap:8px; margin-top:18px; }
.cg-pop-vc input:not([name="website"]){ height:54px; padding:0 20px; border-radius:999px; border:1px solid var(--line-2); background:#fff; font:inherit; font-size:16px; color:var(--ink); }
.cg-pop-vc input:not([name="website"]):focus{ outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(201,164,92,.35); }
.cg-pop-vc .btn{ width:100%; }
.cg-pop-cta{ width:100%; justify-content:space-between; margin-top:18px; }
.cg-pop-browse{ display:flex; justify-content:center; align-items:center; min-height:44px; margin-top:6px; font-size:14.5px; font-weight:500; color:var(--accent-text); }
.cg-pop-browse:hover{ text-decoration:underline; text-underline-offset:3px; }
.cg-pop-back{ display:inline-flex; align-items:center; gap:6px; min-height:44px; margin-top:4px; font-size:14px; font-weight:500; color:var(--muted); }
.cg-pop-back:hover{ color:var(--ink); }
.cg-pop-call{ display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:14.5px; color:var(--muted); }
.cg-pop-call i{ font-size:18px; color:var(--accent-text); }
.cg-pop-call b{ color:var(--ink); font-weight:500; }
.cg-pop-call:hover b{ color:var(--accent-text); }
@media (max-width:760px){
  .cg-pop{ place-items:end center; padding:0; }
  .cg-pop-card{ width:100%; max-height:92dvh; border-radius:24px 24px 0 0; padding:22px 18px calc(16px + env(safe-area-inset-bottom)); animation:sheetUp .5s var(--ease) both; }
  .cg-pop-title{ margin-top:16px; }
}
@keyframes sheetUp{ from{ transform:translateY(100%); } to{ transform:none; } }

/* ---------- Responsive ---------- */
@media (max-width:1240px){
}
@media (max-width:1100px){
  .idx-sk{ grid-template-columns:repeat(3, 1fr); }
  .idx-sk .card-sk:nth-child(4){ display:none; }
  .nbx{ grid-template-columns:1fr; }
  .nbx-tabs{ flex-direction:row; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; margin:0 -24px; padding:0 24px 2px; }
  .nbx-tabs::-webkit-scrollbar{ display:none; }
  .nbx-tab{ flex:none; width:auto; min-height:58px; padding:10px 18px; scroll-snap-align:start; }
  .nbx-tab::after{ display:none; }
}
@media (max-width:1023px){
  .cg-split{ grid-template-columns:1fr; }
  .cg-glance{ grid-template-columns:repeat(2, 1fr); }
  .idx-fallback{ grid-template-columns:auto 1fr; }
  .idx-fb-ctas{ grid-column:1 / -1; }
  .do-grid{ grid-template-columns:repeat(2, 1fr); }
  .uniq{ grid-template-columns:1fr; }
  .rev-row{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(78%, 420px); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin:0 -24px; padding:0 24px; scroll-padding:0 24px; }
  .rev-row::-webkit-scrollbar{ display:none; }
  .rev-row li{ scroll-snap-align:start; }
  .more-grid{ grid-template-columns:1fr 1fr; }
  .more-grid li:last-child{ grid-column:1 / -1; }
}
@media (max-width:820px){
  .nbx-stage{ grid-template-columns:1fr; }
  .nbx-map{ min-height:300px; }
}
@media (max-width:760px){
  html{ scroll-padding-top:120px; }
  /* Phone hero: photo up top fading into navy, the copy on the dark foot. */
  .cg-hero .hero-card{ height:auto; min-height:0; padding:230px 20px 110px; background:#071931; }
  .cg-hero .hero-media{ inset:0 0 auto 0; height:320px; overflow:hidden; }
  .cg-hero .hero-img{ object-position:40% 50%; }
  .cg-hero .hero-shade{ bottom:auto; height:322px; background:linear-gradient(180deg, rgba(4,13,27,.5) 0%, rgba(4,13,27,0) 26%, rgba(4,13,27,0) 46%, rgba(7,25,49,.9) 84%, #071931 100%); }
  .cg-crumbs{ min-height:32px; padding:2px 12px; font-size:13px; gap:6px; }
  .cg-title{ margin-top:14px; font-size:clamp(2.2rem, 10.4vw, 2.8rem); line-height:1.04; }
  .cg-sub{ margin-top:10px; font-size:15.5px; }
  .cg-ctas{ display:grid; grid-template-columns:1fr; gap:8px; width:100%; margin-top:20px; }
  .cg-ctas .pill{ width:100%; justify-content:space-between; }
  .cg-glance-wrap{ margin-top:-84px; padding:0 16px; }
  .cg-glance{ gap:4px; padding:4px; }
  .cg-glance li{ padding:14px 14px 13px; }
  .cg-glance span{ font-size:13px; }
  .cg-jump{ margin-top:18px; padding:0 12px; top:calc(var(--hd-h) + 6px); }
  body.cg-docked .cg-jump{ top:8px; }
  .cg-jump-in{ width:100%; }
  .cg-jump-links a{ height:38px; padding:0 14px; font-size:13.5px; }
  /* Phones keep the sticky Get In Touch bar at the bottom instead. */
  .cg-jump-cta{ display:none; }
  .wrap{ padding:0 16px; }
  .cg-head{ text-align:left; }
  .cg-head .cg-lede{ margin-left:0; }
  .cg-lede{ font-size:16px; }
  .sec-head > .pill{ width:100%; justify-content:center; }

  .idx-shell{ margin:12px -16px 0; padding:12px 0; border-radius:0; background:none; min-height:340px; }
  .idx-sk{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:80%; overflow:hidden; padding:0 16px; }
  .idx-sk .card-sk{ background:var(--panel); }
  .idx-sk .card-sk:nth-child(4){ display:block; }
  .idx-fallback{ grid-template-columns:1fr; margin:0 16px; min-height:0; background:var(--panel); }
  .idx-fb-ctas{ display:grid; }
  .idx-fb-ctas .pill{ width:100%; justify-content:space-between; }
  .idx-fb-ctas .pill-line{ justify-content:center; }
  .idx-note{ margin-top:10px; text-align:left; }

  .nbx-tabs{ margin:0 -16px; padding:0 16px 2px; }
  .nbx-tab{ font-size:15px; }
  .nbx-panel{ padding:22px 18px; }
  .nbx-facts > div{ grid-template-columns:1fr; gap:2px; }
  .nbx-acts{ display:grid; }
  .nbx-acts .pill{ width:100%; justify-content:space-between; }
  .nbx-acts .pill-line{ justify-content:center; }
  .nbx-map{ min-height:260px; }
  .cg-also{ text-align:left; }

  .cg-minis{ grid-template-columns:1fr 1fr; }
  .cg-minis li:last-child{ grid-column:1 / -1; }
  .cg-price-ctas .pill{ width:100%; justify-content:space-between; }
  .cg-chart-card{ margin:0 -16px; border-radius:0; padding:22px 16px; }
  .cg-seg{ display:flex; width:100%; }
  .cg-seg .seg-btn{ flex:1; justify-content:center; padding:0 10px; font-size:14px; }
  .pbars li{ grid-template-columns:1fr auto; gap:8px 12px; padding:12px 14px; }
  .pb-track{ grid-column:1 / -1; grid-row:2; }
  .cg-buy-grid{ grid-template-columns:1fr; }

  .cg-tt-card{ margin:0 -16px; border-radius:0; padding:40px 16px 32px; }
  .tt-controls{ width:100%; }
  .tt-cats{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:22px -16px 0; padding:0 16px; }
  .tt-cats::-webkit-scrollbar{ display:none; }
  .tt-cat{ flex:none; }
  .tt-scale{ margin-left:0; margin-right:0; }
  .tt-link{ grid-template-columns:1fr auto; gap:8px 12px; padding:10px 4px; min-height:0; border-radius:10px; }
  .tt-bar{ grid-column:1 / -1; grid-row:2; height:12px; }
  .tt-name{ font-size:15px; }

  .fit-tabs{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:0 16px; }
  .fit-tabs::-webkit-scrollbar{ display:none; }
  .fit-tab{ flex:none; }
  .fit-panel{ padding:26px 18px; text-align:left; }
  .fit-goto{ justify-content:flex-start; }
  .fit-honest{ justify-content:flex-start; }

  .do-chips{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:0 16px; width:calc(100% + 32px); }
  .do-chips::-webkit-scrollbar{ display:none; }
  .do-chips .chip{ flex:none; }
  .do-grid{ grid-template-columns:1fr; gap:8px; }
  .do-card{ padding:20px 18px 12px; }

  .sc-list li{ gap:14px; padding:14px; }
  .sc-list .ic{ display:none; }
  .sc-list li{ grid-template-columns:1fr auto; }

  .tl{ grid-auto-columns:78%; padding:30px 16px 8px; scroll-padding:0 16px; }
  .cg-hist .cg-arrows{ display:none; }

  .cg-grow-card{ margin:0 -16px; border-radius:0; padding:40px 16px 32px; }
  .pop-cols{ height:240px; }
  .pop-cols + figcaption{ margin-top:44px; }
  .chg{ grid-template-columns:1fr; }

  .rev-row{ margin:0 -16px; padding:0 16px; scroll-padding:0 16px; grid-auto-columns:84%; }
  .cg-rev .sec-head{ align-items:flex-start; }

  .more-grid{ grid-template-columns:1fr; }
  .more-grid a{ min-height:150px; }
  .src summary{ padding:14px 18px; }
  .src-list{ padding:0 18px 0 38px; }
}

@media (prefers-reduced-motion:reduce){
  .cg-title .ln > span, .cg-glance, .nbx-panel.is-in, .fit-panel.is-in, .do-card.is-in, .cg-pop-card, .cg-pop-backdrop, .cg-pop-step.is-in{ animation:none !important; }
  .pb-track i, .tt-bar i, .pop-col i{ transition:none !important; }
  .js-cg .pbars:not(.is-drawn) .pb-track i{ transform:none; }
  .js-cg .pop:not(.is-drawn) .pop-col i{ transform:none; }
}
@media (prefers-reduced-transparency:reduce){
  .cg-crumbs{ background:rgba(7,25,49,.9); -webkit-backdrop-filter:none; backdrop-filter:none; }
  .cg-jump-in{ background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media (max-width:760px){
  /* Phones: no sticky section bar, and the buy or sell pop-up sits in the middle of the screen */
  .cg-jump, .cg-jump-mark{ display:none !important; }
  .cg-pop{ place-items:center; padding:20px; }
  .cg-pop-card{ border-radius:24px; max-height:calc(100dvh - 40px); padding:22px 18px 16px; animation:popIn .45s var(--ease) both; }
}

/* ---------- web4realty IDX: search bar + town feed (their widgets, framed only) ---------- */
.idx-live{ display:grid; gap:14px; margin-top:14px; padding:clamp(12px, 1.6vw, 20px); border-radius:var(--r-sec); background:var(--panel); }
.idx-live-search{ min-height:60px; }
.idx-live-feed{ min-height:420px; }
@media (max-width:760px){ .idx-live{ padding:10px; border-radius:22px; } }