/* Communities hub ("Modern Brokerage"). Loads after /site.css and only adds
   what this page needs: the hero, the sticky town tabs and overview panels,
   the lifestyle chips and neighbourhood grid, the match maker, the selling to
   buy band, the review slider and the closing form. Same radius rule as the
   rest of the site: 28px sections, 20px cards, 14px images inside cards,
   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); }
.hd .drop a[aria-current="page"] b{ color:var(--accent-text); }
.mnav details a[href="/communities"]{ color:var(--ink); font-weight:500; }

/* ---------- Hero (same pattern and text position as /selling) ---------- */
.hero-cm .hero-card{
  height:clamp(520px, 40vw, 640px);
  align-items:stretch; justify-content:flex-end; text-align:left;
  padding:calc(var(--hd-h) + 40px) max(24px, calc((100vw - 1320px) / 2 + 24px)) clamp(64px, 6vw, 88px);
  background:#071931;
}
.hero-cm .hero-img{ object-position:50% 62%; }
.hero-cm .hero-shade{ background:
  linear-gradient(90deg, rgba(4,13,27,.78) 0%, rgba(4,13,27,.5) 36%, rgba(4,13,27,.08) 64%, rgba(4,13,27,0) 100%),
  linear-gradient(0deg, rgba(4,13,27,.62) 0%, rgba(4,13,27,0) 46%),
  linear-gradient(180deg, rgba(4,13,27,.45) 0%, rgba(4,13,27,0) 24%); }
.cm-hero-body{ align-items:flex-start; max-width:820px; }
.cm-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); }
.cm-crumbs a{ color:rgba(255,255,255,.78); display:inline-flex; align-items:center; min-height:44px; margin:-12px 0; }
.cm-crumbs a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.cm-crumbs i{ font-size:12px; opacity:.6; }
.cm-title{ margin-top:22px; font-size:clamp(2.4rem, 4.4vw, 4rem); font-weight:500; letter-spacing:-0.035em; line-height:1.02; }
.cm-title .ln{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
@media (min-width:761px){ .cm-title .ln{ white-space:nowrap; } }
.cm-title .ln > span{ display:inline-block; animation:lineUp 1.1s var(--ease) both; animation-delay:calc(.25s + var(--i, 0) * .12s); }
.cm-sub{ margin-top:18px; font-size:clamp(16px, 1.3vw, 18.5px); line-height:1.55; color:rgba(255,255,255,.88); max-width:44ch; }
.cm-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.cm-ctas .pill-accent:hover .pill-ic{ transform:translateY(2px); }

/* ---------- Explore: heading and town filter ---------- */
.cm-explore{ padding-top:clamp(56px, 6vw, 88px); }
.cm-explore-head{ max-width:760px; margin-bottom:clamp(24px, 2.6vw, 34px); }
.cm-explore-head .h2{ text-wrap:balance; }
.cm-explore-head .lede{ max-width:58ch; }

/* Town filter: a plain segmented control above the lifestyle chips. It stays
   in the flow (no sticky bar), so choosing a town never moves the page. */
.cm-tabs{ display:inline-flex; gap:4px; padding:5px; border-radius:999px; background:var(--panel); max-width:100%; }
.cm-tab{ display:inline-flex; align-items:center; gap:10px; height:48px; padding:0 8px 0 20px; border-radius:999px; font-size:15px; font-weight:500; white-space:nowrap; color:var(--ink-2);
  transition:background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.cm-tab:hover{ background:#fff; color:var(--ink); }
.cm-tab-n{ min-width:32px; height:32px; padding:0 8px; border-radius:999px; display:grid; place-items:center; font-size:13px; font-weight:600; background:#fff; color:var(--muted); font-variant-numeric:tabular-nums;
  transition:background-color .25s ease, color .25s ease; }
.cm-tab:hover .cm-tab-n{ background:var(--panel); }
.cm-tab.is-on{ background:var(--navy-grad); color:#fff; box-shadow:0 8px 18px -10px rgba(7,25,49,.6); }
.cm-tab.is-on .cm-tab-n{ background:var(--accent); color:var(--ink); }
.cm-tab:focus-visible{ outline:2px solid var(--accent-text); outline-offset:2px; }


/* ---------- Neighbourhood finder ---------- */
.cm-find{ margin-top:0; scroll-margin-top:calc(var(--hd-h) + 24px); }
.cm-find-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px 32px; flex-wrap:wrap; margin-bottom:22px; }
.cm-find-title{ font-size:clamp(1.6rem, 2.3vw, 2.1rem); font-weight:400; letter-spacing:-0.03em; line-height:1.1; }
.cm-count{ margin-top:6px; font-size:15px; color:var(--muted); }
.cm-count b{ color:var(--ink); font-weight:600; }
.cm-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.cm-chip{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 8px 0 16px; border-radius:999px; border:1px solid var(--line-2); background:#fff; font-size:14.5px; font-weight:500;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease; }
.cm-chip > i{ font-size:17px; color:var(--accent-text); transition:color .2s ease; }
.cm-chip:hover{ border-color:var(--ink); }
.cm-chip-n{ min-width:28px; height:28px; padding:0 7px; border-radius:999px; display:grid; place-items:center; background:var(--panel); font-size:12.5px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; }
.cm-chip[aria-pressed="true"]{ background:var(--navy-grad); color:#fff; border-color:var(--ink); }
.cm-chip[aria-pressed="true"] > i{ color:var(--accent-tint); }
.cm-chip[aria-pressed="true"] .cm-chip-n{ background:var(--accent); color:var(--ink); }
.cm-chip.is-zero:not([aria-pressed="true"]){ color:var(--muted); }
.cm-clear{ display:inline-flex; align-items:center; gap:6px; height:44px; padding:0 14px; border-radius:999px; font-size:14.5px; font-weight:500; color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; }
.cm-clear[hidden]{ display:none; }
.cm-clear:hover{ color:var(--accent-text); }

.cm-matchbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; padding:8px 8px 8px 18px; border-radius:999px; background:var(--accent-soft); color:#5E4819; font-size:15px; }
.cm-matchbar[hidden]{ display:none; }
.cm-matchbar i{ font-size:18px; color:var(--accent-text); }
.cm-matchbar p{ flex:1; font-weight:500; }
.cm-matchbar-btn{ height:40px; padding:0 16px; border-radius:999px; background:#fff; font-size:14px; font-weight:500; color:var(--ink); }
.cm-matchbar-btn:hover{ background:var(--ink); color:#fff; }

.cm-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }
.nb{ position:relative; display:flex; flex-direction:column; background:var(--panel); border-radius:var(--r-card); padding:8px;
  transition:transform .5s var(--ease), box-shadow .5s ease, background-color .3s ease; }
.nb.is-hidden{ display:none; }
.nb:hover{ transform:translateY(-4px); box-shadow:0 22px 44px -28px rgba(7,25,49,.4); }
.nb.is-enter{ animation:cardIn .6s var(--ease) backwards; animation-delay:calc(var(--k, 0) * 45ms); }
.nb-img{ position:relative; aspect-ratio:3/2; border-radius:var(--r-img); overflow:hidden; background:var(--panel-2); }
.nb-img img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.nb:hover .nb-img img{ transform:scale(1.05); }
.nb-body{ display:flex; flex-direction:column; flex:1; padding:14px 10px 8px; }
.nb-town{ font-size:13px; font-weight:500; color:var(--accent-text); }
.nb h3{ margin-top:4px; font-size:18px; font-weight:500; letter-spacing:-0.015em; line-height:1.25; padding-right:44px; }
.nb h3 a::after{ content:""; position:absolute; inset:0; border-radius:var(--r-card); z-index:1; }
.nb h3 a:focus-visible{ outline:none; }
.nb:has(h3 a:focus-visible){ outline:2px solid var(--accent-text); outline-offset:3px; }
.nb-line{ margin-top:8px; font-size:14.5px; line-height:1.55; color:var(--muted); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.nb-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:14px; }
.nb-tags li{ display:inline-flex; align-items:center; height:28px; padding:0 11px; border-radius:999px; background:#fff; font-size:12.5px; font-weight:500; color:var(--ink-2); }
.nb-go{ position:absolute; right:16px; bottom:14px; width:40px; height:40px; border-radius:50%; background:#fff; display:grid; place-items:center; font-size:17px;
  transition:background-color .25s ease, color .25s ease, transform .35s var(--ease); }
.nb:hover .nb-go{ background:var(--ink); color:#fff; transform:rotate(45deg); }
/* Match state from the match maker. */
.nb-match{ position:absolute; left:10px; top:10px; z-index:1; display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px 0 9px; border-radius:999px;
  background:var(--ink); color:#fff; font-size:12.5px; font-weight:600; box-shadow:0 8px 18px -8px rgba(4,13,27,.6); }
.nb-match[hidden]{ display:none; }
.nb-match i{ font-size:14px; color:var(--accent-tint); }
.nb.is-top{ background:linear-gradient(180deg, var(--accent-soft), #F9F4E8); box-shadow:inset 0 0 0 1.5px var(--accent); }
.nb.is-top .nb-match{ background:var(--accent); color:var(--ink); }
.nb.is-top .nb-match i{ color:var(--ink); }

.cm-empty{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px 28px; background:var(--panel); border-radius:var(--r-sec); padding:clamp(24px, 3.4vw, 40px); }
.cm-empty[hidden]{ display:none; }
.cm-empty-ic{ width:56px; height:56px; border-radius:50%; background:#fff; color:var(--accent-text); display:grid; place-items:center; font-size:27px; }
.cm-empty h3{ font-size:clamp(20px, 1.8vw, 24px); font-weight:500; letter-spacing:-0.02em; }
.cm-empty p{ margin-top:6px; font-size:16px; color:var(--muted); max-width:56ch; }
.cm-empty-ctas{ display:flex; flex-wrap:wrap; gap:10px; }
.cm-more{ display:flex; justify-content:center; margin-top:clamp(24px, 3vw, 36px); }
.cm-more[hidden]{ display:none; }
.cm-more .pill:hover .pill-ic{ transform:translateY(2px); }

/* ---------- Match maker (dark band) ---------- */
.cm-mm{ position:relative; overflow:hidden; margin-top:clamp(72px, 8vw, 120px); padding:clamp(64px, 7vw, 104px) 0; color:#fff; scroll-margin-top:0;
  background:
    radial-gradient(60% 70% at 100% 0%, rgba(201,164,92,.16) 0%, rgba(201,164,92,0) 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(201,164,92,.10) 0%, rgba(201,164,92,0) 60%),
    linear-gradient(150deg, #16396A 0%, #0B2446 42%, #071931 78%, #050F20 100%); }
.cm-mm .kicker{ color:var(--accent-tint); }
.cm-mm-head{ max-width:720px; margin-bottom:clamp(28px, 3.4vw, 44px); }
.cm-mm-sub{ margin-top:16px; font-size:17px; line-height:1.6; color:rgba(255,255,255,.74); max-width:48ch; }
.cm-mm-in{ display:grid; grid-template-columns:1.45fr 1fr; gap:16px; align-items:start; }
.cm-q{ display:flex; flex-direction:column; border-radius:var(--r-card); padding:clamp(22px, 2.6vw, 34px); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); }
.cm-q-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.cm-q-prog{ display:flex; gap:6px; width:150px; }
.cm-q-prog span{ flex:1; height:4px; border-radius:999px; background:rgba(255,255,255,.16); transition:background-color .4s ease; }
.cm-q-prog span.is-done{ background:var(--accent); }
.cm-q-step{ font-size:14px; color:rgba(255,255,255,.7); font-variant-numeric:tabular-nums; }
.cm-qs{ margin-top:22px; }
.cm-qs[hidden]{ display:none; }
.cm-qs.is-in{ animation:stepIn .45s var(--ease) both; }
.cm-q-title{ font-size:clamp(22px, 2.1vw, 28px); font-weight:400; letter-spacing:-0.03em; line-height:1.15; outline:none; }
.cm-opts{ display:grid; gap:10px; margin-top:20px; }
.cm-opts-5{ grid-template-columns:repeat(6, 1fr); }
.cm-opts-5 .cm-opt{ grid-column:span 2; }
.cm-opts-5 .cm-opt:nth-child(4){ grid-column:2 / span 2; }
.cm-opts-5 .cm-opt:nth-child(n+4){ grid-column:span 3; }
.cm-opts-3{ grid-template-columns:repeat(3, 1fr); }
.cm-opts-6{ grid-template-columns:repeat(3, 1fr); }
.cm-opt{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-height:118px; padding:18px; border-radius:var(--r-img); text-align:left;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#fff;
  transition:background-color .25s ease, border-color .25s ease, color .25s ease, transform .3s var(--ease); }
.cm-opts-6 .cm-opt{ min-height:96px; }
.cm-opt > i{ font-size:26px; color:var(--accent-tint); margin-bottom:auto; padding-bottom:12px; transition:color .25s ease, transform .5s var(--ease); }
.cm-opt b{ font-size:16px; font-weight:500; letter-spacing:-0.01em; line-height:1.3; }
.cm-opt span{ font-size:13.5px; line-height:1.45; color:rgba(255,255,255,.66); }
.cm-opt:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); }
.cm-opt:hover > i{ transform:translateY(-2px) rotate(-6deg); }
.cm-opt:active{ transform:scale(.98); }
.cm-opt[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.cm-opt[aria-pressed="true"] > i{ color:var(--ink); }
.cm-opt[aria-pressed="true"] span{ color:rgba(7,25,49,.78); }
.cm-opt[aria-pressed="true"]::after{ content:""; position:absolute; top:14px; right:14px; width:22px; height:22px; border-radius:50%; background:#fff center / 12px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071931' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }
.cm-opt:focus-visible{ outline:2px solid var(--accent-tint); outline-offset:3px; }
.cm-q-nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:20px; min-height:64px; }
.cm-q-back, .cm-q-restart{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 16px 0 12px; border-radius:999px; font-size:14.5px; font-weight:500; color:rgba(255,255,255,.86); border:1px solid rgba(255,255,255,.2); }
.cm-q-back[hidden], .cm-q-restart[hidden]{ display:none; }
.cm-q-restart{ margin-left:auto; }
.cm-q-back:hover, .cm-q-restart:hover{ background:rgba(255,255,255,.1); color:#fff; }
.cm-q-back:focus-visible, .cm-q-restart:focus-visible{ outline:2px solid var(--accent-tint); outline-offset:3px; }

.cm-res{ border-radius:var(--r-card); padding:10px; background:#fff; color:var(--ink); display:flex; flex-direction:column; outline:none; }
.cm-res-idle{ display:flex; flex-direction:column; height:100%; }
.cm-res-idle[hidden], .cm-res-live[hidden]{ display:none; }
.cm-res-img{ position:relative; flex:1; min-height:220px; border-radius:var(--r-img); overflow:hidden; background:var(--panel-2); }
.cm-res-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cm-res-idle h3{ margin:20px 14px 0; font-size:22px; font-weight:500; letter-spacing:-0.02em; }
.cm-res-idle p{ margin:8px 14px 14px; font-size:15px; line-height:1.55; color:var(--muted); max-width:40ch; }
.cm-res-live{ display:flex; flex-direction:column; height:100%; padding:14px 14px 10px; }
.cm-res-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.cm-res-top h3{ font-size:22px; font-weight:500; letter-spacing:-0.02em; }
.cm-res-basis{ font-size:13.5px; color:var(--muted); }
.cm-res-list{ display:grid; gap:8px; margin-top:16px; }
.cm-res-item{ display:grid; grid-template-columns:76px 1fr; gap:14px; align-items:center; padding:8px; border-radius:var(--r-img); background:var(--panel); animation:rise .5s var(--ease) both; animation-delay:calc(var(--k, 0) * 70ms); }
.cm-res-item img{ width:76px; height:76px; border-radius:10px; object-fit:cover; background:var(--panel-2); }
.cm-res-item p{ font-size:13px; color:var(--accent-text); font-weight:500; }
.cm-res-item h4{ font-size:16.5px; font-weight:500; letter-spacing:-0.01em; line-height:1.25; }
.cm-res-item h4 a:hover{ text-decoration:underline; text-underline-offset:3px; }
.cm-res-why{ display:flex; flex-wrap:wrap; gap:4px 6px; margin-top:6px; }
.cm-res-why li{ font-size:12.5px; line-height:1.3; padding:4px 9px; border-radius:999px; background:#fff; color:var(--ink-2); }
.cm-res-ctas{ display:grid; gap:8px; margin-top:auto; padding-top:18px; }
.cm-res-ctas[hidden]{ display:none; }
.cm-res-ctas .pill{ width:100%; justify-content:space-between; }
.cm-res-ctas .pill-glass{ background:var(--navy-grad); border:0; -webkit-backdrop-filter:none; backdrop-filter:none; }
.cm-res-links{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; margin-top:4px; }
.cm-res-link{ display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:14.5px; font-weight:500; color:var(--ink-2); }
.cm-res-link i{ font-size:18px; color:var(--accent-text); }
.cm-res-link:hover{ color:var(--accent-text); text-decoration:underline; text-underline-offset:3px; }

/* ---------- Selling to buy ---------- */
.cm-value{ position:relative; overflow:hidden; border-radius:var(--r-sec); min-height:clamp(420px, 34vw, 500px); display:flex; align-items:flex-end; padding:clamp(24px, 4vw, 56px); color:#fff; background:#0B2446; }
.cm-value-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% 45%; transition:transform 1.8s var(--ease); }
.js-rv .cm-value.rv .cm-value-img{ transform:scale(1.1); }
.js-rv .cm-value.rv.is-in .cm-value-img{ transform:none; }
.cm-value-shade{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(4,13,27,.86) 0%, rgba(4,13,27,.62) 36%, rgba(4,13,27,.1) 66%), linear-gradient(0deg, rgba(4,13,27,.55) 0%, rgba(4,13,27,0) 50%); }
.cm-value-copy{ position:relative; z-index:2; max-width:560px; }
.cm-value-copy .h2{ text-wrap:balance; }
.cm-value-copy > p:not(.cm-value-note){ margin-top:14px; font-size:17px; line-height:1.6; color:rgba(255,255,255,.86); max-width:46ch; }
.cm-value-copy .value-capture{ margin-top:26px; }
.cm-value-note{ display:flex; align-items:center; gap:8px; margin-top:14px; font-size:14.5px; color:rgba(255,255,255,.78); }
.cm-value-note i{ font-size:18px; color:var(--accent-tint); }

/* Address bar (the exact markup main.js expects; it wraps the input in .ac-wrap). */
.value-capture{ position:relative; z-index:5; display:flex; align-items:center; gap:10px; background:#fff; border-radius:999px; padding:8px 8px 8px 24px;
  border:1px solid transparent; box-shadow:0 22px 50px -26px rgba(0,0,0,.55); transition:box-shadow .3s ease; }
.value-capture:focus-within{ box-shadow:0 22px 50px -26px rgba(0,0,0,.55), 0 0 0 4px rgba(201,164,92,.45); }
.value-capture .ac-wrap{ position:static; flex:1; min-width:0; }
.value-capture input:not([name="website"]){ width:100%; height:48px; border:0; outline:0; background:transparent; font:inherit; font-size:16.5px; color:var(--ink); }
.value-capture input::placeholder{ color:#6B7585; }
.value-capture .btn{ flex:none; height:54px; }
.value-capture .ac-list{ z-index:40; color:var(--ink); }

/* ---------- Review slider ---------- */
.cm-rev-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(24px, 2.8vw, 36px); }
.cm-rev-title{ display:flex; align-items:center; flex-wrap:wrap; gap:18px 32px; }
.cm-score{ display:inline-flex; align-items:center; gap:14px; padding:10px 20px 10px 12px; border-radius:999px; background:var(--panel); transition:background-color .3s ease; }
.cm-score:hover{ background:#E8EDF3; }
.cm-score b{ display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:#fff; font-size:21px; font-weight:600; letter-spacing:-0.03em; }
.cm-score-meta{ display:flex; flex-direction:column; gap:3px; font-size:14.5px; color:var(--muted); }
.cm-score-meta .stars-g{ color:var(--accent); font-size:16px; }
.cm-score-meta i.ph-arrow-up-right{ font-size:14px; vertical-align:-1px; transition:transform .3s var(--ease); }
.cm-score:hover i.ph-arrow-up-right{ transform:translate(2px, -2px); }
.cm-arrows{ display:flex; gap:8px; flex:none; }
.cm-arrows[hidden]{ display:none; }
.cm-arrow{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-size:20px; background:#fff; color:var(--ink); border:1px solid var(--line-2);
  transition:background-color .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease; }
.cm-arrow:hover:not(:disabled){ background:var(--ink); color:#fff; border-color:var(--ink); }
.cm-arrow:disabled{ opacity:.35; cursor:default; }
.cm-arrow:focus-visible, .cm-dot:focus-visible, .cm-track:focus-visible{ outline:2px solid var(--accent-text); outline-offset:3px; }
.cm-track{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 32px) / 3); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
  scrollbar-width:none; border-radius:var(--r-card); }
.cm-track::-webkit-scrollbar{ display:none; }
.cm-slide{ scroll-snap-align:start; display:flex; flex-direction:column; min-height:240px; margin:0; padding:clamp(24px, 2.4vw, 32px); border-radius:var(--r-card); background:var(--panel); }
.cm-slide .stars-g{ color:var(--accent); font-size:17px; }
.cm-slide blockquote{ margin:18px 0 0; }
.cm-slide p{ font-size:clamp(19px, 1.55vw, 22px); line-height:1.4; letter-spacing:-0.015em; color:var(--ink); text-wrap:pretty; }
.cm-slide figcaption{ display:flex; flex-direction:column; gap:2px; margin-top:auto; padding-top:24px; font-size:14.5px; color:var(--muted); }
.cm-slide figcaption b{ font-size:15.5px; font-weight:500; color:var(--ink); }
.cm-dots{ display:flex; justify-content:center; gap:4px; margin-top:18px; }
.cm-dots[hidden]{ display:none; }
.cm-dot{ position:relative; width:32px; height:44px; }
.cm-dot::before{ content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:999px; background:var(--line-2); transition:background-color .25s ease; }
.cm-dot.is-on::before{ width:24px; margin-left:-12px; background:var(--ink); }

/* ---------- Closing form ---------- */
#page-cta{ scroll-margin-top:calc(var(--hd-h) + 24px); }
#pageCtaForm .btn{ width:100%; margin-top:6px; }

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .cm-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .cm-mm-in{ grid-template-columns:1fr; }
  .cm-res-idle{ display:grid; grid-template-columns:minmax(200px, 38%) 1fr; align-items:center; }
  .cm-res-img{ min-height:170px; height:100%; grid-row:span 2; }
  .cm-res-idle h3{ margin-top:0; align-self:end; }
  .cm-res-idle p{ align-self:start; }
  .cm-res-live{ padding:14px; }
  .cm-res-list{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .cm-res-item{ grid-template-columns:1fr; align-content:start; }
  .cm-res-item img{ width:100%; height:auto; aspect-ratio:3/2; }
  .cm-res-ctas{ grid-template-columns:1fr 1fr; }
  .cm-res-links{ grid-column:1 / -1; }
  .cm-track{ grid-auto-columns:calc((100% - 16px) / 2); }
}
@media (max-width:1023px){
  .cm-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .cm-empty{ grid-template-columns:auto 1fr; }
  .cm-empty-ctas{ grid-column:1 / -1; }
}
@media (max-width:760px){
  /* Phone hero: the photo holds the top of the card and fades into navy. */
  .hero-cm .hero-card{ height:auto; min-height:0; justify-content:flex-end; padding:272px 20px 36px; background:#071931; }
  .hero-cm .hero-media{ inset:0 0 auto 0; height:360px; }
  .hero-cm .hero-img{ object-position:50% 70%; -webkit-mask-image:linear-gradient(180deg, #000 60%, transparent 96%); mask-image:linear-gradient(180deg, #000 60%, transparent 96%); }
  .hero-cm .hero-shade{ bottom:auto; height:362px; background:linear-gradient(180deg, rgba(4,13,27,.5) 0%, rgba(4,13,27,0) 22%, rgba(4,13,27,0) 58%, rgba(7,25,49,.9) 86%, #071931 100%); }
  .cm-crumbs{ min-height:32px; padding:2px 12px; font-size:13px; gap:6px; }
  .cm-title{ margin-top:14px; font-size:clamp(2.1rem, 9.6vw, 2.6rem); line-height:1.04; }
  .cm-sub{ margin-top:12px; font-size:15.5px; }
  .cm-ctas{ margin-top:22px; width:100%; }
  .cm-ctas .pill-accent{ width:100%; justify-content:space-between; }
  .cm-cta-2{ display:none; }

  .cm-explore{ padding-top:48px; }
  /* Tabs: one swipeable row that runs edge to edge. */
  .cm-tabs{ display:flex; width:auto; margin:0 16px; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; scroll-padding:0 8px; }
  .cm-tabs::-webkit-scrollbar{ display:none; }
  .cm-tab{ height:44px; padding:0 6px 0 16px; font-size:14.5px; gap:8px; flex:none; }
  .cm-tab-n{ min-width:28px; height:28px; font-size:12px; }

  .cm-find-head{ margin-bottom:16px; gap:14px; }
  .cm-chips{ flex-wrap:nowrap; overflow-x:auto; margin:0 -16px; padding:0 16px 4px; scrollbar-width:none; width:calc(100% + 32px); }
  .cm-chips::-webkit-scrollbar{ display:none; }
  .cm-chip, .cm-clear{ flex:none; }
  .cm-matchbar{ border-radius:var(--r-card); padding:12px 12px 12px 16px; font-size:14.5px; }
  .cm-matchbar-btn{ width:100%; }
  .cm-grid{ grid-template-columns:1fr; gap:10px; }
  /* Phone cards: photo left, words right, so the list stays scannable. */
  .nb{ display:grid; grid-template-columns:104px 1fr; gap:0; padding:6px; }
  .nb:hover{ transform:none; }
  .nb-img{ aspect-ratio:auto; height:100%; min-height:128px; border-radius:12px; }
  .nb-body{ padding:8px 8px 6px 14px; }
  .nb-town{ font-size:12.5px; }
  .nb h3{ font-size:16.5px; padding-right:0; }
  .nb-line{ font-size:13.5px; -webkit-line-clamp:3; margin-top:4px; }
  .nb-tags{ padding-top:10px; }
  .nb-tags li{ height:26px; font-size:12px; padding:0 9px; }
  .nb-go{ display:none; }
  .nb-match{ left:6px; top:6px; right:6px; height:26px; padding:0 8px 0 7px; font-size:11.5px; justify-content:center; }
  .nb-match i{ display:none; }
  .cm-empty{ grid-template-columns:1fr; padding:24px 20px; border-radius:var(--r-card); }
  .cm-empty-ctas{ grid-column:auto; display:grid; }
  .cm-empty-ctas .pill{ width:100%; justify-content:space-between; }
  .cm-empty-ctas .pill-line{ justify-content:center; }
  .cm-more .pill{ width:100%; justify-content:space-between; }

  .cm-mm{ padding:56px 0; }
  .cm-mm-sub{ font-size:16px; }
  .cm-q{ padding:20px 16px 16px; }
  .cm-q-prog{ width:110px; }
  .cm-opts-5, .cm-opts-3, .cm-opts-6{ grid-template-columns:1fr 1fr; gap:8px; }
  .cm-opts-5 .cm-opt, .cm-opts-5 .cm-opt:nth-child(n){ grid-column:auto; }
  .cm-opts-5 .cm-opt:last-child{ grid-column:1 / -1; }
  .cm-opts-3 .cm-opt:last-child{ grid-column:1 / -1; }
  .cm-opt{ min-height:104px; padding:14px; }
  .cm-opts-6 .cm-opt{ min-height:84px; }
  .cm-opt > i{ font-size:23px; padding-bottom:10px; }
  .cm-opt b{ font-size:15px; }
  .cm-opt span{ font-size:12.5px; }
  .cm-opt[aria-pressed="true"]::after{ top:10px; right:10px; }
  .cm-q-nav{ min-height:56px; padding-top:16px; }
  .cm-res{ padding:8px; }
  .cm-res-idle{ grid-template-columns:96px 1fr; column-gap:14px; row-gap:0; }
  .cm-res-img{ min-height:96px; height:96px; border-radius:12px; }
  .cm-res-idle h3{ margin:0; font-size:18px; }
  .cm-res-idle p{ margin:4px 0 0; font-size:14px; }
  .cm-res-live{ padding:10px 6px 6px; }
  .cm-res-list{ grid-template-columns:1fr; }
  .cm-res-item{ grid-template-columns:64px 1fr; }
  .cm-res-item img{ width:64px; height:64px; aspect-ratio:auto; }
  .cm-res-ctas{ grid-template-columns:1fr; }

  .cm-value{ min-height:0; padding:244px 16px 18px; border-radius:24px; align-items:flex-end; }
  .cm-value-img{ height:300px; bottom:auto; object-position:50% 40%; }
  .cm-value-shade{ height:302px; bottom:auto; background:linear-gradient(180deg, rgba(11,36,70,0) 0%, rgba(11,36,70,0) 40%, rgba(11,36,70,.8) 72%, #0B2446 100%); }
  .cm-value-copy > p:not(.cm-value-note){ font-size:15.5px; }
  .value-capture{ flex-wrap:wrap; border-radius:var(--r-card); padding:8px; gap:6px; }
  .value-capture .ac-wrap{ flex-basis:100%; }
  .value-capture input:not([name="website"]){ padding:0 12px; }
  .value-capture .btn{ width:100%; height:52px; }

  .cm-rev-head{ display:block; }
  .cm-rev-title{ gap:18px; }
  .cm-arrows{ display:none; }
  .cm-track{ grid-auto-columns:86%; gap:10px; margin:0 -16px; padding:0 16px; scroll-padding:0 16px; border-radius:0; }
  .cm-slide{ min-height:200px; padding:22px 20px; }
  .cm-slide p{ font-size:18px; }
  .cm-dots{ margin-top:10px; }
}

@media (prefers-reduced-motion:reduce){
  .nb.is-enter, .cm-qs.is-in, .cm-res-item{ animation:none !important; }
  .cm-title .ln > span{ animation:none !important; }
}
@media (prefers-reduced-transparency:reduce){
  /* (unused) */ .cm-none .cm-tabs{ background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .cm-crumbs{ background:rgba(7,25,49,.78); -webkit-backdrop-filter:none; backdrop-filter:none; }
}
.cm-selects{ display:none; }
@media (max-width:760px){
  /* Phones: two dropdowns instead of two rows of chips */
  .cm-selects{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:18px; }
  .cm-town-filter, .cm-chips{ display:none !important; }
  .cm-select{ position:relative; display:flex; flex-direction:column; padding:8px 36px 8px 16px; border-radius:16px; background:var(--panel); }
  .cm-select > span{ font-size:12px; font-weight:600; color:var(--muted); }
  .cm-select select{ width:100%; margin-top:1px; padding:0; border:0; background:transparent; font:inherit; font-size:15px; font-weight:500; color:var(--ink); -webkit-appearance:none; appearance:none; outline:0; }
  .cm-select > i{ position:absolute; right:14px; top:50%; margin-top:-8px; font-size:16px; pointer-events:none; }
  .cm-select:focus-within{ box-shadow:0 0 0 2px var(--accent); }
  /* "Your matches" placeholder before the quiz is answered: not on phones */
  .cm-res-idle{ display:none !important; }
  .cm-track{ margin:0 calc(-1 * var(--gut)) !important; padding:0 var(--gut) !important; scroll-padding:0 var(--gut) !important; }
}