/* Featherstone Sadler homepage ("Modern Brokerage").
   Light page, cool grey panels, Featherstone Sadler navy for ink and dark surfaces (as gradients), gold accent.
   Radius rule: 28px sections and hero, 20px cards, 14px images inside cards, pills for every control. */

/* Onest (SIL Open Font License), self hosted: one variable file covers
   weights 300 to 600. Latin plus Latin Extended, as Google Fonts served it. */
@font-face{ font-family:"Onest"; font-style:normal; font-weight:300 600; font-display:swap; src:url("/vendor/onest/onest-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:"Onest"; font-style:normal; font-weight:300 600; font-display:swap; src:url("/vendor/onest/onest-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root{
  --bg:#FFFFFF;
  --panel:#F1F4F8;
  --panel-2:#E4E9F0;
  --ink:#071931;          /* Featherstone Sadler navy (from their brand) */
  --ink-2:#1E2F48;
  --muted:#4F5B6B;
  --muted-dim:#5E6A7A;
  --line:#DFE4EB;
  --line-2:#CBD3DE;
  --accent:#C9A45C;        /* Featherstone Sadler gold: fills, with ink text on top */
  --accent-hover:#BD9549;
  --accent-text:#83642A;   /* gold as text/icons on light, 5.2:1 on white */
  --accent-soft:#F6EEDC;
  --accent-tint:#E8C77E;   /* gold on dark */
  --dark:#071931;
  --navy-2:#0B2446;
  --navy-3:#143A6B;
  --navy-grad:linear-gradient(135deg, #16396A 0%, #0B2446 46%, #071931 100%);
  --r-sec:28px;
  --r-card:20px;
  --r-img:14px;
  --ease:cubic-bezier(.16,1,.3,1);
  --font:"Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --hd-h:72px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{ display:block; max-width:100%; }
[hidden]{ display:none !important; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
h1,h2,h3,p,figure,blockquote,ul,ol{ margin:0; }
ul,ol{ padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--accent-text); outline-offset:3px; border-radius:6px; }
.ph-light,.ph-fill{ line-height:1; }

.skip{ position:absolute; left:16px; top:-60px; z-index:200; background:var(--ink); color:#fff; padding:10px 16px; border-radius:999px; }
.skip:focus{ top:16px; }

.wrap{ width:100%; max-width:1320px; margin:0 auto; padding:0 24px; }
.sec{ padding-top:clamp(72px, 8vw, 120px); }
.sec-tight{ padding-top:clamp(56px, 6vw, 88px); }

.h2{ font-size:clamp(2rem, 3.4vw, 3.15rem); font-weight:400; letter-spacing:-0.035em; line-height:1.04; }
.kicker{ font-size:14px; font-weight:500; color:var(--muted); margin-bottom:16px; }
.lede{ font-size:17px; color:var(--ink-2); line-height:1.6; max-width:44ch; margin-top:20px; }

.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px 32px; flex-wrap:wrap; margin-bottom:32px; }
.sec-head-tools{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.sec-foot{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:clamp(28px, 3vw, 40px); }
.link-arrow{ display:inline-flex; align-items:center; gap:8px; font-weight:500; font-size:15px; min-height:44px; border-bottom:1px solid transparent; }
.link-arrow i{ font-size:18px; transition:transform .3s var(--ease); }
.link-arrow:hover i{ transform:translateX(3px); }
.link-arrow:hover{ color:var(--accent-text); }

/* ---------- Pills ---------- */
.pill{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  height:52px; padding:0 6px 0 22px; border-radius:999px;
  font-size:15px; font-weight:500; letter-spacing:-0.005em; white-space:nowrap;
  transition:background-color .25s ease, color .25s ease, transform .2s var(--ease), box-shadow .25s ease;
}
.pill:not(:has(.pill-ic)){ padding:0 22px; }
.pill:active{ transform:scale(.98); }
.pill-ic{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; flex:none; transition:transform .35s var(--ease); }
.pill-ic i{ font-size:18px; }
.pill:hover .pill-ic{ transform:rotate(45deg); }
.pill:hover .pill-ic:has(.ph-arrow-right){ transform:translateX(2px); }
.pill-accent{ background:var(--accent); color:var(--ink); }
.pill-accent:hover{ background:var(--accent-hover); }
.pill-accent .pill-ic{ background:#fff; color:var(--ink); }
.pill-white{ background:#fff; color:var(--ink); }
.pill-white:hover{ background:#EDF1F6; }
.pill-white .pill-ic{ background:var(--ink); color:#fff; }
.pill-dark{ background:var(--navy-grad); color:#fff; }
.pill-dark:hover{ background:linear-gradient(135deg, #1E4B85 0%, #103160 50%, #0A2242 100%); }
.pill-dark .pill-ic{ background:#fff; color:var(--ink); }
.pill-glass{ background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.38); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.pill-glass:hover{ background:rgba(255,255,255,.24); }
.pill-glass .pill-ic{ background:#fff; color:var(--ink); }
.pill-line{ background:#fff; color:var(--ink); border:1px solid var(--line-2); gap:8px; }
.pill-line:hover{ border-color:var(--ink); }
.pill-line i{ font-size:18px; }
.pill-sm{ height:46px; font-size:14.5px; padding-left:18px; }
.pill-sm .pill-ic{ width:34px; height:34px; }
.pill-sm .pill-ic i{ font-size:16px; }

/* ---------- Header ---------- */
/* Wide bar; three columns so the nav sits in the true middle of the page. */
.hd{ position:fixed; top:0; left:0; right:0; z-index:60; padding:14px clamp(12px, 2vw, 28px) 0; pointer-events:none; }
.hd-in{
  pointer-events:auto; height:var(--hd-h); margin:0 auto; max-width:1760px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:0 clamp(16px, 2vw, 28px); color:#fff;
  border-radius:999px;
  transition:background-color .35s ease, box-shadow .35s ease, color .35s ease, padding .35s var(--ease);
}
.hd.is-solid .hd-in, .hd.menu-open .hd-in{
  background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  color:var(--ink); box-shadow:0 10px 30px -16px rgba(7,25,49,.28), 0 0 0 1px rgba(7,25,49,.06);
  padding:0 10px 0 clamp(18px, 2vw, 28px);
}
/* Hide on scroll down, return on scroll up (JS adds .is-hidden). */
.hd{ transition:transform .5s var(--ease); }
.hd.is-hidden{ transform:translateY(calc(-100% - 12px)); }

/* Wordmark: page font in bold, "Sadler" in gold, tracked caps underneath. */
.logo{ display:inline-flex; flex-direction:column; line-height:1; justify-self:start; }
.logo .word{ font-family:var(--font); font-weight:700; font-size:21px; letter-spacing:-0.025em; }
.logo .word span{ color:var(--accent); transition:color .35s ease; }
.hd.is-solid .logo .word span, .hd.menu-open .logo .word span{ color:var(--accent-text); }
.logo .sub{ font-size:9.5px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; opacity:.72; margin-top:5px; }

.nav{
  display:flex; align-items:center; gap:2px; padding:4px; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transition:background-color .35s ease, border-color .35s ease;
}
.hd.is-solid .nav{ background:var(--panel); border-color:transparent; }
.nav-item{ position:relative; }
.nav-link{ display:inline-flex; align-items:center; gap:4px; height:40px; padding:0 14px; border-radius:999px; font-size:14.5px; font-weight:500; transition:background-color .2s ease; }
.nav-link i{ font-size:13px; opacity:.8; transition:transform .25s ease; }
.nav-link:hover, .nav-item:focus-within > .nav-link{ background:rgba(255,255,255,.18); }
.hd.is-solid .nav-link:hover, .hd.is-solid .nav-item:focus-within > .nav-link{ background:#fff; }
.nav-item:hover > .nav-link i, .nav-item:focus-within > .nav-link i{ transform:rotate(180deg); }
.drop{ position:absolute; top:100%; left:50%; padding-top:14px; transform:translate(-50%, 6px); opacity:0; visibility:hidden; transition:opacity .22s ease, transform .3s var(--ease), visibility .22s; }
.nav-item:hover .drop, .nav-item:focus-within .drop{ opacity:1; visibility:visible; transform:translate(-50%, 0); }
.drop-in{ width:300px; background:#fff; color:var(--ink); border-radius:var(--r-card); padding:8px; box-shadow:0 24px 60px -24px rgba(7,25,49,.35), 0 0 0 1px rgba(7,25,49,.06); }
.drop-in a{ display:block; padding:11px 14px; border-radius:var(--r-img); }
.drop-in a:hover{ background:var(--panel); }
.drop-in b{ display:block; font-size:14.5px; font-weight:500; }
.drop-in span{ display:block; font-size:13px; color:var(--muted); }
.drop-in a[aria-current="page"]{ background:var(--panel); }
/* Communities mega menu: a column per town, its neighbourhood guides under it
   (written by .claude/redesign/nav_communities.py). */
.drop-mega{ width:min(720px, calc(100vw - 48px)); padding:10px; }
.drop-cols{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:4px; }
.drop-col{ display:flex; flex-direction:column; min-width:0; }
.drop-town{ margin-bottom:2px; }
.drop-hoods{ display:flex; flex-direction:column; padding:4px 0 6px; margin:0 6px 0 14px; border-left:1px solid var(--line); }
.drop-in .drop-hoods a{ padding:6px 12px; border-radius:10px; font-size:14px; color:var(--ink-2); }
.drop-in .drop-hoods a:hover{ background:var(--panel); color:var(--ink); }
.drop-in .drop-hoods a.drop-more{ font-weight:500; color:var(--accent-text); }
.drop-in a.drop-all{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; padding:12px 14px; border-radius:var(--r-img); background:var(--panel); font-size:14px; font-weight:500; }
.drop-in a.drop-all:hover{ background:var(--panel-2); }
.drop-all i{ font-size:16px; }
.mnav details a.mnav-sub{ padding:7px 0 7px 18px; font-size:15px; border-left:1px solid var(--line); margin-left:6px; }

.hd-right{ display:flex; align-items:center; gap:14px; justify-self:end; }
.hd-phone{ display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:500; min-height:44px; }
.hd-phone i{ font-size:19px; }
.hd .hd-cta{ height:48px; }
.hd .hd-cta .pill-ic{ width:36px; height:36px; }
.menu-btn{ display:none; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); position:relative; }
.hd.is-solid .menu-btn, .hd.menu-open .menu-btn{ background:var(--panel); border-color:transparent; }
.menu-btn span{ position:absolute; left:13px; right:13px; height:1.5px; background:currentColor; border-radius:2px; transition:transform .3s var(--ease), top .3s var(--ease); }
.menu-btn span:first-child{ top:17px; }
.menu-btn span:last-child{ top:25px; }
.hd.menu-open .menu-btn span:first-child{ top:21px; transform:rotate(45deg); }
.hd.menu-open .menu-btn span:last-child{ top:21px; transform:rotate(-45deg); }

.mnav{ position:fixed; inset:0; z-index:55; background:#fff; overflow-y:auto; padding:calc(var(--hd-h) + 36px) 20px 32px; }
.mnav[hidden]{ display:none; }
.mnav-in{ max-width:560px; margin:0 auto; }
.mnav details{ border-bottom:1px solid var(--line); }
.mnav summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; min-height:60px; font-size:21px; font-weight:400; letter-spacing:-0.02em; cursor:pointer; }
.mnav summary::-webkit-details-marker{ display:none; }
.mnav summary i{ font-size:18px; transition:transform .3s var(--ease); }
.mnav details[open] summary i{ transform:rotate(180deg); }
.mnav details a{ display:block; padding:10px 0 10px 4px; font-size:16px; color:var(--muted); }
.mnav details a:last-child{ padding-bottom:18px; }
.mnav-top{ display:flex; align-items:center; min-height:60px; font-size:21px; letter-spacing:-0.02em; border-bottom:1px solid var(--line); }
.mnav-ctas{ display:grid; gap:10px; margin-top:28px; }
.mnav-ctas .pill{ width:100%; justify-content:space-between; }
.mnav-ctas .pill-line{ justify-content:center; }

/* ---------- Hero ---------- */
/* Full bleed from the very top; only the bottom corners are rounded.
   The live photo has Ryan at the left edge and Paul at the right, so the copy
   sits centred in the gap between them. */
.hero{ position:relative; z-index:5; }
.hero-card{
  position:relative; overflow:hidden; color:#fff; text-align:center;
  border-radius:0 0 var(--r-sec) var(--r-sec);
  height:clamp(640px, 50vw, 860px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:calc(var(--hd-h) + 40px) clamp(24px, 4vw, 56px) 96px;
  background:#0B2446;
}
.hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; transform:scale(1.02); animation:heroIn 2.2s var(--ease) both; will-change:transform; }
@keyframes heroIn{ from{ transform:scale(1.14); filter:brightness(.6); } to{ transform:scale(1.02); filter:none; } }
.hero-shade{ position:absolute; inset:0; pointer-events:none; background:
  linear-gradient(0deg, rgba(4,13,27,.92) 0%, rgba(4,13,27,.76) 26%, rgba(4,13,27,.54) 50%, rgba(4,13,27,.24) 74%, rgba(4,13,27,.06) 92%, rgba(4,13,27,0) 100%); }
.hero-body{ position:relative; max-width:720px; display:flex; flex-direction:column; align-items:center; }
.hero-kicker{ display:inline-flex; align-items:center; gap:10px; min-height:38px; padding:6px 18px; border-radius:999px; font-size:14px; font-weight:500; letter-spacing:.01em; line-height:1.3;
  background:rgba(4,13,27,.34); border:1px solid rgba(255,255,255,.24); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.hero-kicker i{ color:var(--accent-tint); font-size:15px; }
.hero-title{ margin-top:20px; font-size:clamp(2.8rem, 6vw, 6rem); font-weight:600; letter-spacing:-0.035em; line-height:.95; white-space:nowrap; text-transform:uppercase; }
.hero-tag{ margin-top:14px; font-size:clamp(1.25rem, 2vw, 1.9rem); font-weight:600; letter-spacing:-0.025em; line-height:1.2; white-space:nowrap; }
.hero-title .ln{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.hero-title .ln > span{ display:inline-block; animation:lineUp 1.1s var(--ease) both; animation-delay:calc(.25s + var(--i, 0) * .12s); }
.hero-title em{ font-style:normal; color:var(--accent-tint); }
@keyframes lineUp{ from{ transform:translateY(105%); } to{ transform:none; } }
.hero-sub{ margin-top:20px; font-size:clamp(16px, 1.3vw, 18.5px); line-height:1.55; color:rgba(255,255,255,.9); max-width:44ch; }
.hero-ctas{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:30px; }
.proof{ display:inline-flex; align-items:center; gap:10px; min-height:44px; margin-top:22px; font-size:15px; color:rgba(255,255,255,.9); }
.proof b{ color:#fff; font-weight:600; }
.stars-g{ display:inline-flex; gap:2px; color:var(--accent-tint); font-size:16px; }
.proof:hover b{ text-decoration:underline; text-underline-offset:3px; }
/* Promo video button, bottom left of the hero. */
.hero-play{ position:absolute; left:clamp(20px, 3vw, 44px); bottom:clamp(28px, 4vw, 56px); display:inline-flex; align-items:center; gap:14px; color:#fff; text-align:left; z-index:2; }
.hp-btn{ position:relative; width:60px; height:60px; border-radius:50%; display:grid; place-items:center; font-size:20px; color:var(--ink); background:#fff; transition:transform .5s var(--ease), background-color .3s ease; }
.hp-btn::before{ content:""; position:absolute; inset:-8px; border-radius:50%; border:1px solid rgba(255,255,255,.6); animation:pulse 2.4s var(--ease) infinite; }
.hero-play:hover .hp-btn{ transform:scale(1.08); background:var(--accent); }
.hp-txt{ display:flex; flex-direction:column; line-height:1.25; }
.hp-txt b{ font-size:15.5px; font-weight:600; }
.hp-txt span{ font-size:13.5px; color:rgba(255,255,255,.8); }

.hero-capture-wrap{ position:relative; z-index:20; display:flex; justify-content:center; margin-top:-42px; padding:0 24px; }
/* Homepage only: on a normal desktop window the hero runs to 105% of the
   screen, so the home value bar that overlaps its foot starts just below the
   fold. Only for ordinary landscape windows (not phones, and not unusually
   short, tall, narrow or ultrawide windows); anything else keeps the standard
   hero height above, so it never stretches oddly when resized. */
@media (min-width:761px) and (min-height:600px) and (max-height:1200px) and (min-aspect-ratio:5/4) and (max-aspect-ratio:12/5){
  /* 105%, but never less than 64px past the fold (the bar overlaps the hero by 42px). */
  .hero-home .hero-card{ height:calc(100vh + max(5vh, 64px)); height:calc(100svh + max(5svh, 64px)); }
  /* Keep the copy and the video button inside the visible screen, not the part below the fold. */
  .hero-home .hero-card{ padding-bottom:calc(96px + max(5svh, 64px)); }
  .hero-home .hero-play{ bottom:calc(clamp(28px, 4vw, 56px) + max(5svh, 64px)); }
}
/* Homepage, desktop: the photo is wider than most screens, so a single cover
   crop cuts both agents off at the edges. Two copies of the same (cached) photo
   instead: the left half pinned to the left agent, the right half pinned to the
   right agent, both enlarged, feathered together behind the copy. The name
   stacks and "Sadler" gets a slow gold sheen every 5 seconds. */
.hero-media .hm-r{ display:none; }
@media (min-width:761px) and (max-aspect-ratio:2/1){
  .hero-home .hero-media .hm-l, .hero-home .hero-media .hm-r{ display:block; width:58%; overflow:hidden; }
  .hero-home .hm-l{ right:auto; -webkit-mask-image:linear-gradient(90deg, #000 76%, transparent); mask-image:linear-gradient(90deg, #000 76%, transparent); }
  .hero-home .hm-r{ left:auto; -webkit-mask-image:linear-gradient(270deg, #000 76%, transparent); mask-image:linear-gradient(270deg, #000 76%, transparent); }
  /* Natural width, face centred 15% in from each screen edge (the agents sit at 17% and 83% of the photo). */
  .hero-home .hm-l .hero-img, .hero-home .hm-r .hero-img{ inset:auto; top:-3%; height:108%; width:auto; max-width:none; object-fit:fill; }
  .hero-home .hm-l .hero-img{ left:26%; translate:-17% 0; transform-origin:17% 30%; }
  .hero-home .hm-r .hero-img{ right:26%; translate:17% 0; transform-origin:83% 30%; }
}
@media (min-width:761px){
  .hero-home .hero-title{ font-size:clamp(3.4rem, 6.6vw, 8rem); line-height:.9; }
  .hero-home .hero-title em{ display:block; }
  .hero-home .hero-title em{
    color:transparent; -webkit-background-clip:text; background-clip:text;
    background-image:linear-gradient(105deg, var(--accent-tint) 0%, var(--accent-tint) 40%, #FFF6DC 50%, var(--accent-tint) 60%, var(--accent-tint) 100%);
    background-size:300% 100%; background-position:100% 0;
    animation:sadlerShine 5s ease-in-out 1.6s infinite; }
}
@keyframes sadlerShine{ 0%{ background-position:100% 0; } 45%, 100%{ background-position:0% 0; } }
@media (prefers-reduced-motion:reduce){ .hero-home .hero-title em{ animation:none; } }
#heroCapture{
  position:relative; width:min(860px, 100%);
  display:flex; align-items:center; gap:14px;
  background:#fff; border-radius:999px; padding:10px 10px 10px 12px;
  border:1px solid var(--line);
  box-shadow:0 26px 60px -28px rgba(7,25,49,.45), 0 4px 14px -6px rgba(7,25,49,.12);
  transition:box-shadow .3s ease, border-color .3s ease;
}
#heroCapture:focus-within{ border-color:var(--accent); box-shadow:0 26px 60px -28px rgba(7,25,49,.45), 0 0 0 4px rgba(201,164,92,.28); }
.hc-pin{ width:52px; height:52px; border-radius:50%; background:var(--accent-soft); color:var(--accent-text); display:grid; place-items:center; font-size:24px; flex:none; }
.hc-field{ flex:1; min-width:0; display:flex; flex-direction:column; }
.hc-field label{ font-size:13px; font-weight:500; color:var(--muted); line-height:1.2; }
.hc-field input{ width:100%; border:0; outline:0; background:transparent; font:inherit; font-size:17px; color:var(--ink); padding:4px 0 2px; }
.hc-field input::placeholder{ color:#6B7585; }
#heroCapture .ac-wrap{ position:static; }
#heroCapture .btn{ height:58px; padding:0 30px; font-size:15.5px; }

/* ---------- Buttons inside the lead markup ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:54px; padding:0 26px; border-radius:999px; font-size:15.5px; font-weight:500; white-space:nowrap; transition:background-color .25s ease, transform .2s var(--ease); }
.btn:active{ transform:scale(.98); }
.btn-gold{ background:var(--accent); color:var(--ink); }
.btn-gold:hover{ background:var(--accent-hover); }
.btn:disabled{ opacity:.7; cursor:progress; }
.btn svg{ width:20px; height:20px; stroke:currentColor; flex:none; }

/* ---------- Address autocomplete (classes set by lead-capture.js) ---------- */
.ac-wrap{ position:relative; width:100%; }
.ac-list{
  position:absolute; top:calc(100% + 10px); left:0; right:0; z-index:40;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:6px;
  box-shadow:0 24px 50px -22px rgba(7,25,49,.35);
}
.ac-list[hidden]{ display:none; }
.ac-item{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:12px 14px; border-radius:var(--r-img); font-size:15px; min-height:44px; }
.ac-item:hover, .ac-item:focus-visible{ background:var(--panel); }
.ac-item svg{ width:18px; height:18px; stroke:var(--accent-text); flex:none; }
.ac-item .ac-label{ font-weight:500; color:var(--ink); }
.ac-item span{ margin-left:auto; font-size:13px; color:var(--muted); }
.ac-note{ font-size:12px; color:var(--muted); padding:6px 14px 4px; }

/* ---------- Trust strip ---------- */
.trust{ padding:44px 24px 0; }
.trust-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 40px; font-size:15px; color:var(--muted); max-width:1320px; margin:0 auto; }
.trust-list li{ display:inline-flex; align-items:center; gap:10px; }
.trust-list i{ font-size:20px; color:var(--accent-text); }
.trust-list b{ color:var(--ink); font-weight:600; }

/* ---------- Why / difference ---------- */
.why{ background:var(--panel); border-radius:var(--r-sec); padding:clamp(28px, 4.4vw, 60px); display:grid; grid-template-columns:5fr 7fr; gap:clamp(32px, 5vw, 72px); }
.facts{ margin-top:32px; display:grid; gap:8px; }
.facts li{ display:flex; align-items:center; justify-content:space-between; gap:16px; background:#fff; border-radius:999px; padding:10px 10px 10px 24px; }
.facts span{ font-size:15px; color:var(--ink-2); }
.facts b{ min-width:64px; height:48px; padding:0 14px; border-radius:999px; background:var(--accent-soft); color:var(--accent-text); display:grid; place-items:center; font-size:24px; font-weight:500; letter-spacing:-0.03em; }
.why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px 36px; align-content:center; }
.ic{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; flex:none; background:#fff; color:var(--accent-text); font-size:25px; }
.feat h3{ font-size:19px; font-weight:500; letter-spacing:-0.015em; margin:20px 0 8px; }
.feat p{ font-size:15px; color:var(--muted); line-height:1.6; }

/* ---------- Listings ---------- */
.filters{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ height:44px; padding:0 20px; 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; }
.chip:hover{ border-color:var(--ink); }
.chip.is-on{ background:var(--navy-grad); color:#fff; border-color:var(--ink); }
.grid-list{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.lcard{ display:flex; flex-direction:column; background:var(--panel); border-radius:var(--r-card); padding:8px; transition:transform .4s var(--ease), box-shadow .4s ease; }
.lcard:hover{ box-shadow:0 22px 44px -28px rgba(7,25,49,.35); }
.lcard.is-in{ animation:cardIn .7s var(--ease) backwards; }
@keyframes cardIn{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
.lc-img{ position:relative; aspect-ratio:4/3; border-radius:var(--r-img); overflow:hidden; background:var(--panel-2); }
.lc-img img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.lcard:hover .lc-img img{ transform:scale(1.05); }
.lc-body{ padding:16px 12px 8px; display:flex; flex-direction:column; flex:1; }
.lc-meta{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted); }
.lc-status{ font-weight:600; color:var(--accent-text); }
.lc-status.is-sold{ color:var(--ink); }
.lcard h3{ font-size:18.5px; font-weight:500; letter-spacing:-0.015em; margin-top:6px; line-height:1.3; }
.lc-specs{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px; font-size:14px; color:var(--ink-2); }
.lc-specs span{ display:inline-flex; align-items:center; gap:6px; }
.lc-specs i{ font-size:18px; color:var(--muted); }
.lc-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:14px; border-top:1px solid var(--line-2); }
.lc-body .lc-specs{ margin-bottom:16px; }
.lc-price{ font-size:21px; font-weight:600; letter-spacing:-0.02em; }
.lc-go{ width:44px; height:44px; border-radius:50%; background:#fff; display:grid; place-items:center; font-size:18px; transition:background-color .25s ease, color .25s ease, transform .35s var(--ease); }
.lcard:hover .lc-go{ background:var(--ink); color:#fff; transform:rotate(-45deg); }
.card-sk{ background:var(--panel); border-radius:var(--r-card); padding:8px 8px 20px; }
.card-sk span{ display:block; aspect-ratio:4/3; border-radius:var(--r-img); }
.card-sk i{ display:block; height:14px; border-radius:999px; margin:16px 12px 0; }
.card-sk i:nth-of-type(1){ width:40%; }
.card-sk i:nth-of-type(2){ width:75%; height:18px; }
.card-sk i:nth-of-type(3){ width:55%; }
.card-sk span, .card-sk i{ background:linear-gradient(90deg, var(--panel-2) 0%, #F5F7FA 50%, var(--panel-2) 100%); background-size:200% 100%; animation:shimmer 1.4s linear infinite; }
@keyframes shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
.list-fallback{ background:var(--panel); border-radius:var(--r-sec); padding:36px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.list-fallback[hidden], .list-empty[hidden]{ display:none; }
.list-fallback p{ font-size:18px; }
.list-fallback-ctas{ display:flex; gap:10px; flex-wrap:wrap; }
.list-empty{ padding:28px; background:var(--panel); border-radius:var(--r-card); color:var(--muted); }
.list-empty a{ color:var(--accent-text); font-weight:500; text-decoration:underline; text-underline-offset:3px; }

/* ---------- Services ---------- */
.svc{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.svc-item{ display:flex; flex-direction:column; align-items:flex-start; border:1px solid var(--line); border-radius:var(--r-card); padding:28px; background:#fff; transition:border-color .3s ease, transform .4s var(--ease); }
.svc-item:hover{ border-color:var(--line-2); }
.svc-item .ic{ background:var(--accent-soft); }
/* The whole card is the click target: its button's hit area covers the card. */
.svc-item{ position:relative; cursor:pointer; }
.svc-item > .pill{ position:static; }
.svc-item > .pill::before{ content:""; position:absolute; inset:0; border-radius:var(--r-card); z-index:2; }
.svc-item.svc-feature > .pill{ position:static; }
.svc-item > .pill:focus-visible{ outline:none; }
.svc-item:has(> .pill:focus-visible){ outline:2px solid var(--accent-text); outline-offset:3px; }
.svc-item h3{ font-size:20px; font-weight:500; letter-spacing:-0.02em; margin:24px 0 10px; }
.svc-item p{ font-size:15px; color:var(--muted); line-height:1.6; flex:1; margin-bottom:28px; }
.svc-feature{ color:var(--ink); border-color:transparent; overflow:hidden;
  background:linear-gradient(135deg, #F6E3A6 0%, #E6C572 26%, #D4AE5E 52%, #EBCB7F 74%, #F7E6AE 100%);
  box-shadow:0 22px 48px -26px rgba(185,140,50,.75), inset 0 1px 0 rgba(255,255,255,.6); }
.svc-feature::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,.55) 42%, transparent 60%); transform:translateX(-110%); animation:gleam 5s var(--ease) 1.5s infinite; }
@keyframes gleam{ 0%, 55%{ transform:translateX(-110%); } 85%, 100%{ transform:translateX(110%); } }
.svc-feature{ position:relative; }
.svc-feature:hover{ border-color:transparent; box-shadow:0 30px 60px -26px rgba(185,140,50,.85), inset 0 1px 0 rgba(255,255,255,.6); }
.svc-feature > *{ position:relative; z-index:1; }
.svc-feature .ic{ background:rgba(255,255,255,.5); color:var(--ink); }
.svc-feature p{ color:rgba(7,25,49,.8); }

/* ---------- Process ---------- */
.process-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px 32px; flex-wrap:wrap; margin-bottom:clamp(36px, 4vw, 56px); }
.steps{ display:grid; grid-template-columns:repeat(5, 1fr); gap:24px; position:relative; counter-reset:none; }
.steps::before{ content:""; position:absolute; top:32px; left:32px; right:calc(20% - 32px + 5px); height:1px; background:repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px); }
.steps li{ position:relative; }
/* One by one: the dashed line draws across, then each step rises in turn. */
.steps::before{ transform-origin:left center; }
.js-rv .steps.rv{ opacity:1; transform:none; }
.js-rv .steps::before{ transform:scaleX(0); transition:transform 1.6s var(--ease) .1s; }
.js-rv .steps.is-in::before{ transform:none; }
.js-rv .steps li{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .8s var(--ease); transition-delay:calc(.15s + var(--i, 0) * .18s); }
.js-rv .steps.is-in li{ opacity:1; transform:none; }
.js-rv .steps .step-ic{ transform:scale(.6); transition:transform .8s cubic-bezier(.34,1.56,.64,1), background-color .3s ease, color .3s ease, border-color .3s ease; transition-delay:calc(.25s + var(--i, 0) * .18s), 0s, 0s, 0s; }
.js-rv .steps.is-in .step-ic{ transform:none; }
.steps li:hover .step-ic, .js-rv .steps.is-in li:hover .step-ic{ transform:translateY(-4px); }
.step-ic{ position:relative; width:64px; height:64px; border-radius:50%; background:#fff; border:1px solid var(--line-2); display:grid; place-items:center; font-size:26px; color:var(--accent-text); transition:background-color .3s ease, color .3s ease, border-color .3s ease; }
.steps li:hover .step-ic{ background:var(--accent); color:var(--ink); border-color:var(--accent); }
.steps small{ display:block; margin-top:20px; font-size:13px; font-weight:500; color:var(--muted); }
.steps h3{ font-size:18px; font-weight:500; letter-spacing:-0.015em; margin:4px 0 8px; }
.steps p{ font-size:14.5px; color:var(--muted); line-height:1.55; }

/* ---------- Banner ---------- */
.banner{ position:relative; overflow:hidden; border-radius:var(--r-sec); min-height:clamp(340px, 31vw, 440px); display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:clamp(24px, 4vw, 52px); color:#fff; background:#0B2446; }
.banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; transition:transform 1.2s var(--ease); }
.banner:hover img{ transform:scale(1.03); }
.banner-shade{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(4,13,27,.78) 0%, rgba(4,13,27,.45) 32%, rgba(4,13,27,.05) 58%), linear-gradient(0deg, rgba(4,13,27,.5) 0%, rgba(4,13,27,0) 50%); }
.banner-copy{ position:relative; max-width:400px; }
.banner-copy h2{ font-size:clamp(1.75rem, 2.7vw, 2.5rem); font-weight:400; letter-spacing:-0.035em; line-height:1.08; }
.banner-copy p{ margin-top:14px; color:rgba(255,255,255,.88); font-size:16px; }
.banner-cta{ position:relative; }

/* ---------- Team: full width film, then the two of them ---------- */
.film{ position:relative; aspect-ratio:16/9; border-radius:var(--r-sec); overflow:hidden; background:var(--navy-grad); }
.film video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.film-cover{ position:absolute; inset:0; display:block; width:100%; text-align:left; color:#fff; transition:opacity .5s var(--ease), visibility .5s; }
.film-shade{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(4,13,27,.7) 0%, rgba(4,13,27,.1) 45%, rgba(4,13,27,0) 70%); transition:opacity .4s ease; }
.film-cover:hover .film-shade{ opacity:.85; }
.play{ position:absolute; left:50%; top:50%; width:96px; height:96px; margin:-48px 0 0 -48px; border-radius:50%; background:var(--accent); color:var(--ink); display:grid; place-items:center; font-size:30px;
  box-shadow:0 20px 50px -18px rgba(0,0,0,.6); transition:transform .5s var(--ease); }
.play::before{ content:""; position:absolute; inset:-10px; border-radius:50%; border:1px solid rgba(232,199,126,.7); animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse{ 0%{ transform:scale(.9); opacity:.9; } 100%{ transform:scale(1.35); opacity:0; } }
.film-cover:hover .play{ transform:scale(1.08); }
.film-cap{ position:absolute; left:clamp(20px, 3vw, 40px); bottom:clamp(20px, 3vw, 36px); display:flex; flex-direction:column; gap:4px; line-height:1.25; }
.film-cap b{ font-size:clamp(20px, 2vw, 28px); font-weight:500; letter-spacing:-0.02em; }
.film-cap span{ font-size:15px; color:rgba(255,255,255,.86); }
.film.is-playing .film-cover{ opacity:0; visibility:hidden; }

.agents{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px; }
.agent-card{ display:grid; grid-template-columns:minmax(150px, 38%) 1fr; gap:24px; align-items:stretch; padding:10px; background:var(--panel); border-radius:var(--r-card);
  transition:transform .5s var(--ease), box-shadow .5s ease, background-color .3s ease; transition-delay:calc(var(--i, 0) * .12s), 0s, 0s; }
.agent-card:hover{ background:#E8EDF3; box-shadow:0 24px 50px -30px rgba(7,25,49,.4); }
.js-rv .agent-card.rv{ transition:opacity .8s var(--ease), transform .9s var(--ease), box-shadow .5s ease, background-color .3s ease; transition-delay:calc(var(--i, 0) * .14s), calc(var(--i, 0) * .14s), 0s, 0s; }
.ac-photo{ display:block; position:relative; width:100%; min-height:240px; align-self:stretch; border-radius:var(--r-img); overflow:hidden; background:var(--panel-2); }
.ac-photo img{ position:absolute; inset:0; }
.ac-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; transition:transform 1s var(--ease); }
.agent-card:hover .ac-photo img{ transform:scale(1.06); }
.ac-body{ display:flex; flex-direction:column; align-items:flex-start; padding:14px 14px 12px 0; }
.ac-role{ display:inline-flex; height:30px; align-items:center; padding:0 12px; border-radius:999px; background:var(--accent-soft); color:var(--accent-text); font-size:13px; font-weight:600; }
.ac-name{ margin-top:14px; font-size:clamp(22px, 2vw, 28px); font-weight:500; letter-spacing:-0.03em; line-height:1.1; }
.ac-text{ margin-top:10px; font-size:15px; color:var(--muted); line-height:1.6; }
.ac-more{ margin-top:auto; padding-top:18px; display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:500; }
.ac-more i{ width:34px; height:34px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-size:15px; transition:transform .4s var(--ease), background-color .3s ease; }
.agent-card:hover .ac-more i{ transform:translateX(4px); background:var(--accent); color:var(--ink); }

/* ---------- Tools ---------- */
/* Full width dark band: breaks up the light page. */
.tools-band{ position:relative; overflow:hidden; margin-top:clamp(72px, 8vw, 120px); padding:clamp(64px, 7vw, 110px) 0; color:#fff;
  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%); }
.tb-glow{ position:absolute; width:600px; height:600px; left:30%; top:20%; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(232,199,126,.08), rgba(232,199,126,0)); animation:drift 16s ease-in-out infinite alternate; }
.tools-band .wrap{ position:relative; }
.tools-band .kicker{ color:var(--accent-tint); }
.tb-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px 40px; flex-wrap:wrap; margin-bottom:clamp(32px, 4vw, 52px); }
.tb-sub{ margin-top:16px; font-size:17px; color:rgba(255,255,255,.72); max-width:46ch; }
.tb-grid{ display:grid; grid-template-columns:5fr 7fr; gap:16px; align-items:stretch; }
.calc{ border-radius:var(--r-card); padding:28px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); display:flex; flex-direction:column; gap:18px; }
.calc-top{ display:flex; align-items:center; gap:16px; }
.calc-top .ic{ background:rgba(232,199,126,.14); color:var(--accent-tint); }
.calc-top h3{ font-size:19px; font-weight:500; letter-spacing:-0.015em; }
.calc-top p{ font-size:14px; color:rgba(255,255,255,.66); margin-top:2px; }
.calc-row label, .calc-lbl{ display:flex; justify-content:space-between; font-size:14.5px; color:rgba(255,255,255,.78); margin-bottom:10px; }
.calc-row output{ color:#fff; font-weight:600; font-variant-numeric:tabular-nums; }
.calc input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px; outline:none; cursor:pointer;
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent-tint) var(--fill, 50%), rgba(255,255,255,.14) var(--fill, 50%)); }
.calc input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:#fff; border:5px solid var(--accent); box-shadow:0 4px 12px rgba(0,0,0,.35); transition:transform .2s var(--ease); }
.calc input[type=range]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:#fff; border:5px solid var(--accent); }
.calc input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.15); }
.calc input[type=range]:focus-visible{ outline:2px solid var(--accent-tint); outline-offset:6px; }
.seg{ display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; padding:4px; border-radius:999px; background:rgba(255,255,255,.08); }
.seg button{ height:40px; border-radius:999px; font-size:14px; font-weight:500; color:rgba(255,255,255,.8); transition:background-color .25s ease, color .25s ease; }
.seg button.is-on{ background:var(--accent); color:var(--ink); }
.calc-out{ margin-top:4px; padding:20px; border-radius:var(--r-img); background:rgba(0,0,0,.28); border:1px solid rgba(232,199,126,.22); }
.calc-out span{ font-size:14px; color:rgba(255,255,255,.72); }
.calc-out b{ display:block; margin:4px 0 8px; font-size:clamp(2.2rem, 3.4vw, 3rem); font-weight:500; letter-spacing:-0.04em; line-height:1; color:var(--accent-tint); font-variant-numeric:tabular-nums; }
.calc-out small{ display:block; font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.6); }
.calc-note{ display:block; margin-top:6px; font-size:12.5px; color:var(--accent-tint); }
.calc-link{ color:#fff; }
.calc-link:hover{ color:var(--accent-tint); }
.tb-strip{ display:flex; align-items:center; gap:18px; margin-top:16px; padding:14px 14px 14px 16px; border-radius:var(--r-card); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); }
.tb-strip img{ width:52px; height:52px; border-radius:50%; object-fit:cover; object-position:50% 20%; border:2px solid var(--accent); flex:none; }
.tb-strip p{ flex:1; font-size:15.5px; color:rgba(255,255,255,.8); }
.tb-strip b{ color:#fff; font-weight:600; }

/* ---------- Video tours ---------- */
.reels{ display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; }
.reel{ position:relative; display:block; aspect-ratio:9/16; border-radius:var(--r-card); overflow:hidden; background:#0B2446; color:#fff; }
.reel img, .reel video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease), opacity .5s ease; }
.reel video{ opacity:0; }
.reel.is-hover video{ opacity:1; }
.reel:hover img, .reel:hover video{ transform:scale(1.04); }
.reel::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(4,13,27,.55) 0%, rgba(4,13,27,0) 40%); pointer-events:none; }
.reel-play{ position:absolute; left:14px; bottom:14px; z-index:1; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.92); color:var(--ink); display:grid; place-items:center; font-size:16px; transition:transform .4s var(--ease), background-color .3s ease; }
.reel:hover .reel-play{ transform:scale(1.1); background:var(--accent); }
.vm-card.is-portrait{ width:min(420px, 100%); }
.vm-card.is-portrait video{ aspect-ratio:9/16; max-height:calc(100dvh - 40px); }

.tools-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tool{ position:relative; display:block; border-radius:var(--r-card); padding:26px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); transition:background-color .3s ease, border-color .3s ease; }
.tool:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.2); }
.tool .ic{ background:rgba(232,199,126,.12); color:var(--accent-tint); }
.tool h3{ font-size:18.5px; font-weight:500; letter-spacing:-0.015em; margin:20px 0 6px; }
.tool p{ font-size:14.5px; color:rgba(255,255,255,.74); line-height:1.55; max-width:32ch; }
.tool-go{ position:absolute; top:22px; right:22px; width:42px; height:42px; border-radius:50%; background:#fff; color:var(--ink); display:grid; place-items:center; font-size:18px; transition:transform .35s var(--ease); }
.tool:hover .tool-go{ transform:rotate(45deg); }

/* ---------- Areas ---------- */
.areas{ display:grid; grid-template-columns:1.35fr 1fr 1fr; grid-template-rows:280px 280px; gap:16px; }
.area{ position:relative; overflow:hidden; border-radius:var(--r-card); background:var(--panel); }
.area img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.area:hover img{ transform:scale(1.05); }
.area-a{ grid-row:span 2; }
.area-d{ grid-column:span 2; }
.area-tag{ position:absolute; left:12px; right:12px; bottom:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 10px 10px 18px; border-radius:var(--r-img);
  background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); color:var(--ink); }
.area-tag > span{ display:flex; flex-direction:column; line-height:1.3; }
.area-tag b{ font-size:17px; font-weight:500; letter-spacing:-0.01em; }
.area-tag small{ font-size:13.5px; color:var(--muted); }
.area-tag i{ width:40px; height:40px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-size:17px; flex:none; transition:transform .35s var(--ease); }
.area:hover .area-tag i{ transform:rotate(45deg); }

/* ---------- Reviews ---------- */
.reviews{ display:grid; grid-template-columns:1.55fr 1fr; gap:16px; }
.rev-hero{ position:relative; min-height:500px; border-radius:var(--r-sec); overflow:hidden; background:var(--panel); display:flex; align-items:flex-end; padding:20px; }
.rev-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% 50%; }
.rev-glass{ position:relative; max-width:460px; padding:26px; border-radius:var(--r-card);
  background:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.7); -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 20px 40px -24px rgba(7,25,49,.35); }
.rev-glass p{ margin-top:12px; font-size:18px; line-height:1.5; letter-spacing:-0.01em; color:var(--ink); }
.rev-glass footer, .rev-card footer{ margin-top:14px; font-size:14px; color:var(--muted); }
.stars{ display:inline-flex; gap:2px; color:var(--ink); font-size:16px; }
.rev-side{ display:flex; flex-direction:column; gap:16px; }
.rev-score{ display:flex; align-items:center; gap:20px; background:var(--panel); border-radius:var(--r-card); padding:26px; }
.rev-score > b{ font-size:60px; font-weight:400; letter-spacing:-0.05em; line-height:1; }
.rev-score div{ display:flex; flex-direction:column; gap:4px; font-size:14.5px; color:var(--muted); }
.rev-card{ flex:1; border:1px solid var(--line); border-radius:var(--r-card); padding:26px; display:flex; flex-direction:column; justify-content:space-between; }
.rev-card p{ font-size:16.5px; line-height:1.55; color:var(--ink-2); }

/* ---------- FAQ ---------- */
.faq{ max-width:1040px; margin:0 auto; }
.faq-head{ text-align:center; margin-bottom:clamp(28px, 3vw, 40px); }
.faq-head .h2{ margin:0 auto; }
.faq-foot{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:32px; font-size:16.5px; color:var(--muted); }
.faq-head p{ margin:16px auto 0; font-size:16.5px; color:var(--muted); max-width:44ch; }
.acc{ border-top:1px solid var(--line); }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-item h3{ font-size:inherit; font-weight:inherit; }
.acc-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; text-align:left; font-size:18px; font-weight:500; letter-spacing:-0.015em; min-height:44px; }
.acc-ic{ position:relative; width:40px; height:40px; border-radius:50%; background:var(--panel); flex:none; transition:background-color .3s ease, transform .4s var(--ease); }
.acc-ic::before, .acc-ic::after{ content:""; position:absolute; left:50%; top:50%; width:14px; height:1.5px; background:var(--ink); transform:translate(-50%,-50%); transition:background-color .3s ease; }
.acc-ic::after{ transform:translate(-50%,-50%) rotate(90deg); }
.acc-item.is-open .acc-ic{ background:var(--ink); transform:rotate(45deg); }
.acc-item.is-open .acc-ic::before, .acc-item.is-open .acc-ic::after{ background:#fff; }
.acc-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); }
.acc-panel > div{ overflow:hidden; }
.acc-item.is-open .acc-panel{ grid-template-rows:1fr; }
.acc-panel p{ padding:0 56px 24px 0; font-size:16px; color:var(--muted); line-height:1.65; }

/* ---------- Closing contact ---------- */
.close{ background:var(--panel); border-radius:var(--r-sec); padding:12px; display:grid; grid-template-columns:1.1fr 1fr; gap:12px; }
.close-form{ padding:clamp(20px, 3.6vw, 44px); }
.close-sub{ margin:16px 0 28px; font-size:16.5px; color:var(--muted); }
.field-group{ display:grid; gap:14px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fld label{ display:block; font-size:14px; font-weight:500; color:var(--ink-2); margin:0 0 7px 4px; }
.field{
  width:100%; height:54px; border:1px solid var(--line-2); background:#fff; border-radius:999px; padding:0 22px;
  font:inherit; font-size:16px; color:var(--ink); transition:border-color .2s ease, box-shadow .2s ease; appearance:none; -webkit-appearance:none;
}
.field::placeholder{ color:#6B7585; }
.field:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 4px rgba(201,164,92,.28); }
textarea.field{ height:124px; border-radius:var(--r-card); padding:16px 22px; resize:vertical; line-height:1.5; }
select.field{ cursor:pointer; padding-right:48px;
  background-image:linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position:calc(100% - 26px) 50%, calc(100% - 20px) 50%; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; }
#ctaForm .btn{ width:100%; margin-top:6px; }
.close-direct{ display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:26px; font-size:15px; color:var(--ink-2); }
.close-direct a{ display:inline-flex; align-items:center; gap:8px; min-height:44px; }
.close-direct a:hover{ color:var(--accent-text); }
.close-direct i{ font-size:19px; color:var(--accent-text); }
.close-photo{ position:relative; border-radius:var(--r-card); overflow:hidden; min-height:420px; background:var(--panel-2); }
/* The photo fills whatever height the form sets; it never adds height of its own. */
.close-photo picture{ position:absolute; inset:0; display:block; }
.close-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 25%; }

.form-success{ display:none; }
.form-success.show{ display:flex; align-items:flex-start; gap:12px; background:var(--accent-soft); color:#5E4819; border-radius:var(--r-card); padding:18px 20px; font-size:15.5px; line-height:1.5; }
.form-success svg{ width:22px; height:22px; stroke:currentColor; flex:none; margin-top:1px; }
.form-error{ color:#9E3426 !important; font-size:14px !important; margin-top:10px; }
.form-error:empty{ display:none; }

/* ---------- Footer: warm dark gradient, their photo, their wordmark ---------- */
.ft{ position:relative; overflow:hidden; margin:clamp(72px, 8vw, 120px) 0 0; color:#E9EEF5; border-radius:var(--r-sec) var(--r-sec) 0 0;
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(201,164,92,.18) 0%, rgba(201,164,92,0) 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(201,164,92,.10) 0%, rgba(201,164,92,0) 55%),
    linear-gradient(150deg, #143663 0%, #0A2242 40%, #071931 75%, #040C1A 100%); }
.ft-glow{ position:absolute; width:520px; height:520px; left:50%; top:38%; margin-left:-260px; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(232,199,126,.10), rgba(232,199,126,0)); animation:drift 14s ease-in-out infinite alternate; }
@keyframes drift{ from{ transform:translate(-18%, -6%); } to{ transform:translate(22%, 10%); } }
.ft-in{ position:relative; max-width:1320px; margin:0 auto; padding:clamp(48px, 5vw, 72px) clamp(20px, 4vw, 48px) 28px; }
.logo-ft .word{ font-size:26px; color:#fff; }
.logo-ft .word span{ color:var(--accent); }
.logo-ft .sub{ color:rgba(255,255,255,.7); opacity:1; }
.ft-col .ft-cta{ margin-top:14px; padding:0 6px 0 18px; }
.ft-col .ft-cta:hover{ text-decoration:none; }
.ft-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:40px; }
.ft-brand p{ margin-top:20px; font-size:15px; color:rgba(255,255,255,.72); max-width:36ch; }
.ft-social{ display:flex; gap:8px; margin-top:24px; }
.ft-social a{ width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:grid; place-items:center; font-size:19px; transition:background-color .25s ease, color .25s ease; }
.ft-social a{ transition:background-color .25s ease, color .25s ease, transform .35s var(--ease), border-color .25s ease; }
.ft-social a:hover{ background:var(--accent); border-color:var(--accent); color:var(--ink); transform:translateY(-3px); }
.ft-col{ display:flex; flex-direction:column; align-items:flex-start; }
.ft-col h3{ font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-tint); margin-bottom:12px; }
.ft-col a, .ft-col span{ font-size:15px; color:rgba(255,255,255,.88); padding:8px 0; line-height:1.4; overflow-wrap:anywhere; }
.ft-col a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
/* Communities we serve: each town stacked, its neighbourhoods flowing in a row. */
.ft-areas{ margin-top:48px; padding-top:32px; border-top:1px solid rgba(255,255,255,.12); display:grid; gap:26px; }
.ft-area h3{ font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-tint); margin-bottom:12px; }
.ft-area h3 a:hover{ color:#fff; }
.ft-area p a{ display:inline-flex; align-items:center; min-height:24px; transition:color .2s ease; }
.ft-area p a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.ft-area p{ display:flex; flex-wrap:wrap; gap:8px 22px; font-size:14px; color:rgba(255,255,255,.72); }
.ft-bottom{ display:flex; justify-content:space-between; gap:12px 32px; flex-wrap:wrap; margin-top:48px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); font-size:13.5px; color:rgba(255,255,255,.64); }
.ft-credit{ display:block; margin-top:6px; font-size:12.5px; color:rgba(255,255,255,.5); }
.ft-credit a{ color:rgba(255,255,255,.7) !important; }
.ft-bottom a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

/* ---------- Promo video modal ---------- */
.vmodal{ position:fixed; inset:0; z-index:95; display:grid; place-items:center; padding:20px; }
.vmodal[hidden]{ display:none; }
.vm-backdrop{ position:absolute; inset:0; background:rgba(4,13,27,.78); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); animation:fadeIn .3s ease both; }
.vm-card{ position:relative; width:min(1120px, 100%); border-radius:var(--r-card); overflow:hidden; background:#000; animation:popIn .5s var(--ease) both; box-shadow:0 40px 90px -30px rgba(0,0,0,.7); }
.vm-card video{ width:100%; height:auto; aspect-ratio:16/9; background:#111; }
.vm-close{ position:absolute; top:12px; right:12px; z-index:2; width:44px; height:44px; border-radius:50%; background:#fff; color:var(--ink); display:grid; place-items:center; font-size:20px; transition:transform .35s var(--ease); }
.vm-close:hover{ transform:rotate(90deg); }

/* ---------- Chat widget (desktop) ---------- */
.chat{ position:fixed; right:24px; bottom:24px; z-index:80; display:flex; flex-direction:column; align-items:flex-end; gap:14px; }
.chat-launch{ position:relative; display:inline-flex; align-items:center; gap:12px; height:60px; padding:0 22px 0 8px; border-radius:999px; background:var(--navy-grad); color:#fff; font-size:15px; font-weight:500;
  box-shadow:0 18px 40px -16px rgba(4,13,27,.55); animation:chatIn .8s var(--ease) 1.6s both; transition:transform .3s var(--ease), box-shadow .3s ease; }
.chat-launch:hover{ transform:translateY(-2px); box-shadow:0 24px 50px -18px rgba(4,13,27,.6); }
@keyframes chatIn{ from{ opacity:0; transform:translateY(20px) scale(.9); } to{ opacity:1; transform:none; } }
.cl-faces{ display:flex; }
.cl-faces img{ width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:50% 20%; border:2px solid var(--ink); }
.cl-faces img + img{ margin-left:-14px; }
.chat .on{ position:absolute; width:12px; height:12px; border-radius:50%; background:#2FBF5B; border:2px solid var(--ink); }
.chat-launch .on{ left:42px; top:10px; }
.chat-launch .on::after, .dot-live::after{ content:""; position:absolute; inset:-3px; border-radius:50%; border:2px solid rgba(47,191,91,.5); animation:ping 2s ease-out infinite; }
@keyframes ping{ 0%{ transform:scale(.6); opacity:1; } 100%{ transform:scale(1.8); opacity:0; } }
.chat.is-open .chat-launch{ background:var(--accent); color:var(--ink); }
.chat.is-open .chat-launch .on{ border-color:var(--accent); }

.chat-panel{ width:360px; border-radius:24px; overflow:hidden; background:#fff; box-shadow:0 40px 80px -30px rgba(4,13,27,.5), 0 0 0 1px rgba(4,13,27,.06);
  transform-origin:100% 100%; animation:panelIn .45s var(--ease) both; }
@keyframes panelIn{ from{ opacity:0; transform:translateY(14px) scale(.96); } to{ opacity:1; transform:none; } }
.chat-head{ position:relative; padding:26px 24px 22px; color:#fff; text-align:center;
  background:radial-gradient(90% 80% at 100% 0%, rgba(201,164,92,.32), rgba(201,164,92,0) 60%), linear-gradient(150deg, #16396A, #071931); }
.chat-faces{ display:flex; justify-content:center; }
.cf{ position:relative; }
.cf img{ width:64px; height:64px; border-radius:50%; object-fit:cover; object-position:50% 20%; border:3px solid #0B2446; }
.cf + .cf{ margin-left:-12px; }
.cf .on{ right:2px; bottom:4px; width:15px; height:15px; border-color:#0B2446; }
.chat-title{ margin-top:12px; font-size:18px; font-weight:600; letter-spacing:-0.02em; }
.chat-status{ margin-top:4px; display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:rgba(255,255,255,.78); }
.dot-live{ position:relative; width:8px; height:8px; border-radius:50%; background:#2FBF5B; }
.chat-x{ position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; display:grid; place-items:center; font-size:16px; }
.chat-x:hover{ background:rgba(255,255,255,.22); }
.chat-body{ padding:20px; background:var(--panel); }
.bubble{ position:relative; background:#fff; border-radius:18px 18px 18px 6px; padding:14px 16px; font-size:15px; line-height:1.5; color:var(--ink-2); box-shadow:0 6px 16px -10px rgba(4,13,27,.25);
  animation:rise .6s var(--ease) .15s both; }
.chat-actions{ display:grid; gap:8px; margin-top:14px; }
.chat-act{ display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:0 16px; border-radius:14px; background:#fff; border:1px solid var(--line); font-size:15px; font-weight:500; text-align:left;
  transition:border-color .2s ease, transform .3s var(--ease); animation:rise .6s var(--ease) both; }
.chat-act:nth-child(1){ animation-delay:.25s; } .chat-act:nth-child(2){ animation-delay:.33s; } .chat-act:nth-child(3){ animation-delay:.41s; }
.chat-act span{ flex:1; }
.chat-act i:first-child{ font-size:20px; color:var(--accent-text); }
.chat-act i:last-child{ font-size:16px; color:var(--muted); transition:transform .3s var(--ease); }
.chat-act:hover{ border-color:var(--accent); transform:translateX(2px); }
.chat-act:hover i:last-child{ transform:rotate(45deg); color:var(--ink); }

@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes popIn{ from{ opacity:0; transform:translateY(12px) scale(.98); } to{ opacity:1; transform:none; } }

/* ---------- Lead modal (states set by lead-capture.js) ---------- */
.lead-modal{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px; }
.lead-modal[hidden]{ display:none; }
.lm-backdrop{ position:absolute; inset:0; background:rgba(4,13,27,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:fadeIn .3s ease both; }
.lm-card{ position:relative; width:min(480px, 100%); max-height:calc(100dvh - 40px); overflow-y:auto; background:#fff; border-radius:var(--r-sec); padding:40px 32px 32px; box-shadow:0 40px 80px -30px rgba(4,13,27,.5); animation:popIn .45s var(--ease) both; }
.lm-close{ position:absolute; top:16px; right:16px; width:44px; height:44px; border-radius:50%; background:var(--panel); display:grid; place-items:center; }
.lm-close svg, .ts-close svg{ width:18px; height:18px; stroke:var(--ink); }
.lm-progress{ display:flex; gap:6px; margin-bottom:24px; width:120px; }
.lm-progress span{ flex:1; height:4px; border-radius:999px; background:var(--panel-2); transition:background-color .3s ease; }
.lm-progress span.done{ background:var(--accent); }
.lm-step{ display:none; }
.lm-step.active{ display:block; animation:stepIn .4s var(--ease) both; }
@keyframes stepIn{ from{ opacity:0; transform:translateX(8px); } to{ opacity:1; transform:none; } }
.lm-step h3{ font-size:26px; font-weight:400; letter-spacing:-0.03em; line-height:1.15; padding-right:40px; }
.lm-sub{ margin:10px 0 22px; font-size:15px; color:var(--muted); line-height:1.55; }
.lm-step .btn{ width:100%; }
.lm-addr-chip{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:16px 0 20px; padding:10px 10px 10px 18px; border-radius:999px; background:var(--accent-soft); color:var(--ink); font-size:15px; font-weight:500; }
.lm-addr-chip span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lm-addr-chip button{ flex:none; height:36px; padding:0 14px; border-radius:999px; background:#fff; font-size:13.5px; color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.lm-success{ text-align:center; padding:12px 0; }
.lm-success .ring{ width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background:var(--accent-soft); display:grid; place-items:center; }
.lm-success .ring svg{ width:28px; height:28px; stroke:var(--accent-text); }
.lm-success h3{ padding-right:0; }

/* ---------- Get In Touch sheet (states set by lead-capture.js) ---------- */
.touch-sheet{ position:fixed; inset:0; z-index:100; }
.touch-sheet[hidden]{ display:none; }
.ts-backdrop{ position:absolute; inset:0; background:rgba(4,13,27,.5); opacity:0; transition:opacity .4s ease; }
.touch-sheet.in .ts-backdrop{ opacity:1; }
.ts-card{ position:absolute; left:0; right:0; bottom:0; max-height:92dvh; overflow-y:auto; background:#fff; border-radius:var(--r-sec) var(--r-sec) 0 0; padding:18px 20px calc(24px + env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform .42s var(--ease); }
.touch-sheet.in .ts-card{ transform:translateY(0); }
.touch-sheet.dragging .ts-card{ transition:none; }
.ts-grab{ display:block; width:44px; height:4px; border-radius:999px; background:var(--line-2); margin:0 auto 18px; }
.ts-close{ position:absolute; top:14px; right:14px; width:44px; height:44px; border-radius:50%; background:var(--panel); display:grid; place-items:center; }
.ts-card h3{ font-size:26px; font-weight:400; letter-spacing:-0.03em; }
.ts-sub{ margin:8px 0 20px; font-size:15px; color:var(--muted); padding-right:20px; }
.ts-call{ width:100%; }
.ts-hours{ text-align:center; font-size:13.5px; color:var(--muted); margin-top:10px; }
.ts-or{ display:flex; align-items:center; gap:14px; margin:18px 0; color:var(--muted); font-size:13.5px; }
.ts-or::before, .ts-or::after{ content:""; flex:1; height:1px; background:var(--line); }
#touchForm .btn{ width:100%; }
#touchForm textarea.field{ height:96px; }
@media (min-width:620px){
  .ts-card{ left:50%; top:50%; bottom:auto; right:auto; width:440px; border-radius:var(--r-sec); padding:32px 28px 28px;
    transform:translate(-50%, -46%); opacity:0; transition:transform .42s var(--ease), opacity .3s ease; }
  .touch-sheet.in .ts-card{ transform:translate(-50%, -50%); opacity:1; }
  .ts-grab{ display:none; }
}
body.ts-open{ overflow:hidden; }

/* ---------- Sticky mobile CTA ---------- */
.mobile-cta{ display:none; }

/* ---------- Reveal (hidden state only exists once JS adds .js-rv) ---------- */
.js-rv .rv{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .9s var(--ease); }
.js-rv .rv.is-in{ opacity:1; transform:none; }
.hero-rise{ animation:rise 1s var(--ease) both; animation-delay:calc(.25s + var(--i, 0) * .12s); }
.hero-capture-wrap{ animation:riseBig 1.1s var(--ease) .95s both; }
.hd-in{ animation:dropIn .9s var(--ease) .1s both; }
@keyframes riseBig{ from{ opacity:0; transform:translateY(34px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes dropIn{ from{ opacity:0; transform:translateY(-24px); } to{ opacity:1; transform:none; } }
@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

/* ---------- Motion layer (all of it is added by JS and skipped for reduced motion) ---------- */
/* Grid items rise one after another. */
.js-rv .rv-item{ transition-delay:calc(var(--i, 0) * 90ms); }
.js-rv .rv-shell{ transform:none; }
/* Headings: each word rises out of its own mask. */
.rvh .w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.12em; margin-bottom:-.12em; }
.rvh .w > span{ display:inline-block; transform:translateY(108%); transition:transform 1s var(--ease); transition-delay:calc(var(--wi, 0) * 45ms); }
.rvh.is-in .w > span{ transform:none; }
/* Listing cards arrive in sequence. */
.lcard.is-in{ animation-delay:calc(var(--i, 0) * 80ms); }
.lcard{ transition:transform .5s var(--ease), box-shadow .5s ease; }
.lcard:hover{ transform:translateY(-6px); }
/* Big images settle as they come into view. */
.js-rv .banner.rv img, .js-rv .area.rv img{ transform:scale(1.14); transition:transform 1.8s var(--ease), opacity .8s ease; }
.js-rv .banner.rv.is-in img, .js-rv .area.rv.is-in img{ transform:none; }
.js-rv .banner.rv.is-in:hover img, .js-rv .area.rv.is-in:hover img{ transform:scale(1.04); }
.js-rv .film.rv{ transform:translateY(40px) scale(.97); transition:opacity 1s var(--ease), transform 1.2s var(--ease); }
.js-rv .film.rv.is-in{ transform:none; }
/* Hero photo drifts on scroll (JS moves the picture element). */
.hero-media{ position:absolute; inset:-6% 0 0; will-change:transform; }
.hero-media picture{ position:absolute; inset:0; display:block; }
.hero-body{ will-change:transform, opacity; }
/* Thin gold reading progress at the very top. */
.progress{ position:fixed; left:0; right:0; top:0; height:3px; z-index:70; background:linear-gradient(90deg, var(--accent), var(--accent-tint)); transform-origin:0 50%; transform:scaleX(0); pointer-events:none; }
/* Buttons lean toward the cursor. */
.magnet{ translate:var(--mx, 0px) var(--my, 0px); transition:translate .35s var(--ease), background-color .25s ease, color .25s ease, transform .2s var(--ease), box-shadow .25s ease; }
/* A sheen crosses the gold buttons on hover. */
.pill-accent, .btn-gold{ position:relative; overflow:hidden; isolation:isolate; }
.pill-accent::after, .btn-gold::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform:translateX(-120%); }
.pill-accent:hover::after, .btn-gold:hover::after{ transform:translateX(120%); transition:transform .9s var(--ease); }
/* Cursor spotlight on tiles. */
.spot{ position:relative; isolation:isolate; }
.spot::before{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none; opacity:0; transition:opacity .4s ease;
  background:radial-gradient(260px circle at var(--sx, 50%) var(--sy, 50%), rgba(201,164,92,.16), transparent 70%); }
.tool.spot::before{ background:radial-gradient(300px circle at var(--sx, 50%) var(--sy, 50%), rgba(232,199,126,.16), transparent 70%); }
.spot:hover::before{ opacity:1; }
/* Small hover life on icons. */
.feat .ic, .svc-item .ic, .tool .ic{ transition:transform .5s cubic-bezier(.34,1.56,.64,1), background-color .3s ease, color .3s ease; }
.feat:hover .ic, .svc-item:hover .ic, .tool:hover .ic{ transform:translateY(-3px) rotate(-6deg); }
.svc-item{ transition:border-color .3s ease, transform .5s var(--ease), box-shadow .5s ease; }
.svc-item:hover{ transform:translateY(-6px); box-shadow:0 26px 50px -30px rgba(7,25,49,.35); }
.trust-list li i{ transition:transform .5s cubic-bezier(.34,1.56,.64,1); }
.trust-list li:hover i{ transform:scale(1.2) rotate(-8deg); }

/* ---------- Responsive ---------- */
@media (max-width:1240px){
  .hd-phone span{ display:none; }
  .hd-phone{ width:44px; justify-content:center; }
  .nav-link{ padding:0 11px; }
}
@media (max-width:1100px){
  .svc{ grid-template-columns:1fr 1fr; }
  .tb-grid{ grid-template-columns:1fr; }
  .reels{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:1023px){
  .nav{ display:none; }
  .menu-btn{ display:block; }
  .hd-in{ grid-template-columns:1fr auto; }
  .why{ grid-template-columns:1fr; }
  .grid-list{ grid-template-columns:1fr 1fr; }
  .agents{ grid-template-columns:1fr; }
  .reviews{ grid-template-columns:1fr; }
  .close{ grid-template-columns:1fr; }
  .close-photo{ min-height:0; aspect-ratio:16/9; }
  .close-photo img{ object-position:8% 40%; }
  .ft-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:820px){
  .chat{ display:none; }
  body{ padding-bottom:84px; }
  .mobile-cta{ display:block; position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:50;
    transform:translateY(calc(100% + 24px)); transition:transform .45s var(--ease); }
  body.show-mcta .mobile-cta{ transform:none; }
  body.ts-open .mobile-cta{ transform:translateY(calc(100% + 24px)); }
  .mobile-cta .btn{ width:100%; height:54px; box-shadow:0 14px 30px -12px rgba(4,13,27,.45); }
  .steps{ grid-template-columns:1fr; gap:0; }
  /* Phone: one short connector per step, from each icon down to the next,
     so the line never runs past the last step. */
  .steps::before{ display:none; }
  .steps li:not(:last-child)::after{ content:""; position:absolute; left:32px; top:64px; bottom:0; width:1px;
    background:repeating-linear-gradient(180deg, var(--line-2) 0 6px, transparent 6px 12px); transform-origin:center top; transition:transform .8s var(--ease); transition-delay:calc(.3s + var(--i, 0) * .18s); }
  .js-rv .steps li:not(:last-child)::after{ transform:scaleY(0); }
  .js-rv .steps.is-in li:not(:last-child)::after{ transform:none; }
  .steps li{ display:grid; grid-template-columns:64px 1fr; column-gap:20px; padding-bottom:28px; }
  .steps li:last-child{ padding-bottom:0; }
  .step-ic{ grid-row:span 3; }
  .steps small{ margin-top:6px; }
  .areas{ grid-template-columns:1fr 1fr; grid-template-rows:260px 200px 200px; }
  .area-a{ grid-row:auto; grid-column:span 2; }
  .area-d{ grid-column:span 2; }
}
@media (max-width:760px){
  :root{ --hd-h:64px; }
  .wrap{ padding:0 16px; }
  .hd{ padding:8px 8px 0; }
  .hd-in{ padding:0 8px 0 16px; gap:10px; }
  .hd.is-solid .hd-in, .hd.menu-open .hd-in{ padding:0 8px 0 12px; }
  .hd .hd-cta{ display:none; }
  .logo .word{ font-size:18px; }
  .logo .sub{ font-size:8.5px; letter-spacing:.24em; }
  .hd-phone{ width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); }
  .hd.is-solid .hd-phone, .hd.menu-open .hd-phone{ background:var(--panel); border-color:transparent; }

  .hero-title{ white-space:normal; }
  .hero-play{ left:auto; right:16px; bottom:auto; top:calc(var(--hd-h) + 18px); }
  .hp-btn{ width:48px; height:48px; font-size:16px; }
  .hp-txt{ display:none; }
  /* Phone: faces sit in the top of the portrait crop, copy on the dark foot. */
  .hero-card{ height:auto; min-height:min(700px, 88svh); justify-content:flex-end; padding:calc(var(--hd-h) + 24px) 20px 96px; border-radius:0 0 24px 24px; }
  .hero-img{ object-position:50% 0%; }
  .hero-shade{ background:linear-gradient(180deg, rgba(4,13,27,.35) 0%, rgba(4,13,27,0) 22%, rgba(4,13,27,0) 36%, rgba(4,13,27,.78) 62%, rgba(4,13,27,.92) 100%); }
  .hero-kicker{ order:3; margin-top:14px; min-height:0; padding:0; background:none; border:0; -webkit-backdrop-filter:none; backdrop-filter:none; font-size:13px; color:rgba(255,255,255,.82); }
  .hero-kicker i{ display:none; }
  .hero-body{ display:flex; flex-direction:column; }
  .hero-title{ order:1; } .hero-tag{ order:2; } .hero-sub{ order:4; } .proof{ order:5; }
  .hero-title{ margin-top:0; font-size:clamp(2.6rem, 12vw, 3.2rem); line-height:1; }
  .hero-tag{ margin-top:10px; font-size:1.2rem; }
  .hero-sub{ margin-top:12px; font-size:15.5px; }
  .hero-ctas{ display:none; }
  .proof{ margin-top:18px; }
  .avatars img, .av-g{ width:38px; height:38px; }

  .hero-capture-wrap{ margin-top:-74px; padding:0 16px; }
  #heroCapture{ flex-wrap:wrap; border-radius:var(--r-card); padding:10px; gap:8px; }
  .hc-pin{ display:none; }
  .hc-field{ flex-basis:100%; padding:6px 12px 4px; }
  #heroCapture .btn{ width:100%; height:52px; }

  .trust{ padding:32px 16px 0; }
  .trust-list{ justify-content:flex-start; flex-direction:column; gap:12px; font-size:14.5px; }

  .why{ padding:24px 20px; }
  .why-grid{ grid-template-columns:1fr; gap:28px; }
  .facts li{ padding-left:18px; }
  .sec-head{ margin-bottom:24px; }
  .sec-head-tools{ gap:12px; width:100%; justify-content:space-between; }
  .grid-list{ display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:84%; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -16px; padding:0 16px 6px; scroll-padding:0 16px; scrollbar-width:none; overscroll-behavior-x:contain; }
  .grid-list::-webkit-scrollbar{ display:none; }
  .grid-list > *{ scroll-snap-align:start; }
  .svc{ grid-template-columns:1fr; gap:12px; }
  .svc-item{ padding:24px; }
  .svc-item h3{ margin-top:18px; }
  .svc-item p{ margin-bottom:22px; }
  .banner{ flex-direction:column; align-items:flex-start; min-height:460px; justify-content:flex-end; }
  .banner img{ object-position:55% 30%; }
  .banner-shade{ background:linear-gradient(0deg, rgba(4,13,27,.82) 0%, rgba(4,13,27,.5) 45%, rgba(4,13,27,0) 72%); }
  .film{ border-radius:var(--r-card); }
  .play{ width:72px; height:72px; margin:-36px 0 0 -36px; font-size:24px; }
  .film-cap span{ display:none; }
  .agent-card{ grid-template-columns:112px 1fr; gap:16px; }
  .ac-photo{ align-self:start; min-height:0; aspect-ratio:1/1; }
  .ac-body{ padding:6px 6px 6px 0; }
  .ac-text{ font-size:14.5px; }
  .reels{ display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:62%; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -16px; padding:0 16px 6px; scrollbar-width:none; }
  .reels::-webkit-scrollbar{ display:none; }
  .reel{ scroll-snap-align:start; }
  .calc{ padding:22px 18px; }
  .tb-strip{ flex-wrap:wrap; }
  .tb-strip .pill{ width:100%; justify-content:space-between; }
  .tools-grid{ grid-template-columns:1fr; gap:10px; }
  .tool{ padding:22px; }
  .areas{ grid-template-columns:1fr; grid-template-rows:none; grid-auto-rows:220px; gap:12px; }
  .area-a, .area-d{ grid-column:auto; }
  .rev-hero{ min-height:520px; padding:12px; border-radius:var(--r-card); }
  .rev-glass{ padding:20px; }
  .rev-glass p{ font-size:16.5px; }
  .rev-hero img{ object-position:68% 30%; }
  .rev-score{ padding:22px; }
  .rev-score > b{ font-size:52px; }
  .acc-btn{ font-size:17px; padding:18px 0; }
  .acc-panel p{ padding-right:0; }
  .close{ padding:8px; border-radius:24px; }
  .close-form{ padding:20px 12px 12px; }
  .field-row{ grid-template-columns:1fr; }
  .ft{ margin:72px 0 0; border-radius:24px 24px 0 0; }
  .ft-top{ grid-template-columns:1fr; gap:32px; }
  .ft-area p{ gap:6px 16px; font-size:13.5px; }
  .ft-bottom{ flex-direction:column; }
}

/* Phone polish */
@media (max-width:760px){
  .trust-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .trust-list li{ align-items:flex-start; gap:8px; padding:12px; border-radius:var(--r-img); background:var(--panel); font-size:13.5px; line-height:1.35; }
  .trust-list i{ font-size:18px; margin-top:1px; }
  .why-grid{ gap:22px; }
  .feat h3{ margin-top:14px; }
  .svc-item{ padding:22px 20px; }
  .svc-item .ic{ width:46px; height:46px; font-size:22px; }
  .areas{ grid-template-columns:1fr 1fr; grid-auto-rows:170px; gap:10px; }
  .area-a{ grid-column:span 2; grid-row:auto; }
  .area-d{ grid-column:span 2; }
  .area-tag{ left:8px; right:8px; bottom:8px; padding:8px 8px 8px 12px; }
  .area-tag b{ font-size:15px; }
  .area-tag small{ display:none; }
  .area-tag i{ width:34px; height:34px; font-size:15px; }
  .tools-band{ padding:56px 0; }
  .tools-grid{ gap:8px; }
  .tool{ display:grid; grid-template-columns:44px 1fr; column-gap:14px; align-items:center; padding:16px 60px 16px 16px; }
  .tool .ic{ width:44px; height:44px; font-size:21px; grid-row:span 2; }
  .tool h3{ margin:0; font-size:16.5px; }
  .tool p{ font-size:13.5px; margin-top:2px; }
  .tool-go{ top:50%; right:14px; width:36px; height:36px; margin-top:-18px; font-size:16px; }
  .sec-foot .pill{ width:100%; justify-content:space-between; }
  .sec-foot .pill-line{ justify-content:center; }
  .reviews{ gap:12px; }
  .faq-foot{ flex-direction:column; gap:10px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .js-rv .rv{ opacity:1; transform:none; }
  .hero-img{ transform:none; }
  .hero-title .ln > span, .hero-rise, .hero-capture-wrap, .hd-in{ animation:none !important; }
  .ft-glow, .tb-glow, .play::before, .hp-btn::before, .svc-feature::after, .chat-launch .on::after, .dot-live::after{ animation:none; }
  .chat-launch{ animation:none; }
}
@media (prefers-reduced-transparency:reduce){
  .pill-glass, .hero-kicker, .tag{ background:rgba(7,25,49,.78); -webkit-backdrop-filter:none; backdrop-filter:none; }
  .rev-glass, .area-tag{ background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* =====================================================================
   Mobile system (2026-09-28)
   One gutter for every page, centred sliders with arrows and dots
   (site.js wraps .grid-list, .reels, #soldRow and the mobile reviews in
   .msl), the mobile reviews block, the sticky Get In Touch bar with faces.
   ===================================================================== */
.msl-btn, .msl-dots, .mrev, .m-only, .process-foot{ display:none; }
@media (max-width:760px){
  :root{ --gut:30px; }
  .wrap{ padding:0 var(--gut); }
  .hero-card{ padding-left:var(--gut); padding-right:var(--gut); }

  /* Header bubble: solid enough that page text never shows through the logo */
  .hd.is-solid .hd-in, .hd.menu-open .hd-in{ background:rgba(255,255,255,.97); padding:0 8px 0 20px; }
  .hd .logo{ justify-content:center; }
  .hd .logo .word{ line-height:1.05; }
  .hd .logo .sub{ margin-top:4px; }

  .m-only{ display:block; }
  .m-hide{ display:none !important; }

  /* ---- Centred slider: one card in the middle, the next ones peeking ---- */
  .msl{ position:relative; }
  /* site.js measures each slider and sets --msl-item (card width), --msl-pad
     (space either side of the centred card) and --msl-bleed (how far the
     rail runs past the container: the page gutter, or 0 inside a panel). */
  .msl .msl-track{ display:grid !important; grid-template-columns:none !important; grid-auto-flow:column; grid-auto-columns:var(--msl-item, 78vw); gap:12px;
    overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none;
    margin:0 calc(-1 * var(--msl-bleed, var(--gut))); padding:4px var(--msl-pad, 11vw) 8px; scroll-padding:0 var(--msl-pad, 11vw); }
  .msl .msl-track::-webkit-scrollbar{ display:none; }
  .msl .msl-track > *{ scroll-snap-align:center; grid-column:auto !important; min-width:0; }
  .msl-btn{ position:absolute; top:var(--msl-y, 45%); z-index:5; display:grid; place-items:center; width:40px; height:40px; margin-top:-20px; border-radius:50%;
    background:#fff; color:var(--ink); font-size:17px; box-shadow:0 10px 24px -10px rgba(7,25,49,.5), 0 0 0 1px rgba(7,25,49,.06); transition:opacity .25s ease, transform .25s var(--ease); }
  .msl-btn:active{ transform:scale(.94); }
  .msl-btn:disabled{ opacity:.45; pointer-events:none; box-shadow:0 0 0 1px rgba(7,25,49,.08); }
  .msl-prev{ left:calc(var(--msl-pad, 11vw) - var(--msl-bleed, var(--gut)) - 20px); }
  .msl-next{ right:calc(var(--msl-pad, 11vw) - var(--msl-bleed, var(--gut)) - 20px); }
  .msl-dots{ display:flex; justify-content:center; gap:2px; margin-top:8px; }
  .msl-dots button{ position:relative; width:22px; height:32px; }
  .msl-dots button::before{ content:""; position:absolute; left:50%; top:50%; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:999px; background:var(--line-2); transition:width .25s ease, margin .25s ease, background-color .25s ease; }
  .msl-dots button.is-on::before{ width:22px; margin-left:-11px; background:var(--ink); }
  /* The reveal offset must not make rails scroll vertically (it stole the wheel). */
  .grid-list, .reels, .sold-row, .cm-track{ overflow-y:hidden; }

  /* Card meta never splits "For sale" across lines */
  .lc-meta{ flex-wrap:wrap; row-gap:2px; }
  .lc-meta > span{ white-space:nowrap; }
  .lc-meta > span:last-child{ white-space:normal; }
  /* ---- Mobile reviews (same look as the communities page) ---- */
  .mrev{ display:block; }
  .mrev-on > .wrap > :not(.mrev), .mrev-on > .wrap > .mrev ~ *{ display:none !important; }
  .mrev-head .h2{ margin:0; }
  .mrev-score{ display:inline-flex; align-items:center; gap:14px; margin-top:18px; padding:10px 20px 10px 10px; border-radius:999px; background:var(--panel); }
  .mrev-score b{ display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:#fff; font-size:20px; font-weight:600; letter-spacing:-0.03em; }
  .mrev-score > span{ display:flex; flex-direction:column; gap:3px; font-size:14px; color:var(--muted); }
  .mrev-score .stars-g{ display:inline-flex; gap:2px; color:var(--accent); font-size:15px; }
  .mrev .msl{ margin-top:22px; }
  .mrev-card{ display:flex; flex-direction:column; min-height:220px; margin:0; padding:22px 20px; border-radius:var(--r-card); background:var(--panel); }
  .mrev-card .stars-g{ display:inline-flex; gap:2px; color:var(--accent); font-size:16px; }
  .mrev-card blockquote{ margin:16px 0 0; }
  .mrev-card p{ font-size:18px; line-height:1.4; letter-spacing:-0.015em; color:var(--ink); }
  .mrev-card figcaption{ display:flex; flex-direction:column; gap:2px; margin-top:auto; padding-top:20px; font-size:14px; color:var(--muted); }
  .mrev-card figcaption b{ font-size:15px; font-weight:500; color:var(--ink); }

  /* ---- Sticky Get In Touch: white fade behind it, faces with the live dot ---- */
  .mobile-cta::before{ content:""; position:absolute; left:-12px; right:-12px; top:-26px; bottom:calc(-12px - env(safe-area-inset-bottom)); z-index:-1; pointer-events:none;
    background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 42%, #fff 100%); }
  .mobile-cta .btn{ position:relative; justify-content:center; gap:12px; padding:0 20px 0 7px; background:var(--navy-grad); color:#fff; }
  .mobile-cta .btn svg{ display:none; }
  .mcta-faces{ position:absolute; left:7px; top:50%; display:flex; transform:translateY(-50%); }
  .mcta-faces img{ width:40px; height:40px; border-radius:50%; object-fit:cover; object-position:50% 20%; border:2px solid #0B2446; }
  .mcta-faces img + img{ margin-left:-12px; }
  .mcta-faces .on{ position:absolute; left:26px; top:1px; width:11px; height:11px; border-radius:50%; background:#2FBF5B; border:2px solid #0B2446; }
  .mcta-faces .on::after{ content:""; position:absolute; inset:-3px; border-radius:50%; border:2px solid rgba(47,191,91,.5); animation:ping 2s ease-out infinite; }
  .mcta-go{ position:absolute; right:7px; top:50%; width:40px; height:40px; margin-top:-20px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--ink); font-size:17px; }

  /* The Get In Touch slide up: the form only, no phone number */
  .ts-call, .ts-hours, .ts-or{ display:none !important; }

  /* ---- Homepage ---- */
  .process-head > .pill{ display:none; }
  .process-foot{ display:flex; margin-top:28px; }
  .process-foot .pill{ width:100%; justify-content:space-between; }
  /* Agent cards: the photo runs the full card height, faces kept in frame */
  .agent-card{ grid-template-columns:36% 1fr; align-items:stretch; }
  .ac-photo{ align-self:stretch; aspect-ratio:auto; min-height:220px; }
  .ac-photo img{ object-position:50% 12%; }
  /* Where we work: 2 x 2 */
  .areas{ grid-template-columns:1fr 1fr !important; grid-template-rows:none !important; grid-auto-rows:190px !important; gap:10px; }
  .areas .area-a, .areas .area-b, .areas .area-c, .areas .area-d{ grid-column:auto !important; grid-row:auto !important; }
  .areas .area-tag{ left:8px; right:8px; bottom:8px; padding:8px 8px 8px 12px; }
  .areas .area-tag b{ font-size:14px; line-height:1.2; }
  .areas .area-tag i{ width:30px; height:30px; font-size:14px; flex:none; }
}
@media (prefers-reduced-motion:reduce){ .mcta-faces .on::after{ animation:none; } }
@media (max-width:760px){
  /* Every hero and the cards that overlap its foot keep the 30px page gutter */
  .hero .hero-card{ padding-left:var(--gut) !important; padding-right:var(--gut) !important; }
  .hero-capture-wrap, .sh-capture-wrap, .ev-stage-wrap{ padding-left:var(--gut) !important; padding-right:var(--gut) !important; }
}

/* =====================================================================
   Mobile pass 2 (2026-09-28)
   ===================================================================== */
@media (max-width:760px){
  /* Header: just the logo and the menu (a phone icon beside the menu was easy to mis-tap) */
  .hd .hd-phone{ display:none !important; }

  /* Footer: everything centred, a size up, the logo biggest */
  .ft-in{ text-align:center; padding-left:var(--gut); padding-right:var(--gut); }
  .ft-top{ justify-items:center; gap:36px; }
  .ft-brand{ display:flex; flex-direction:column; align-items:center; }
  .logo-ft .word{ font-size:34px; }
  .logo-ft .sub{ font-size:11px; }
  .ft-brand p{ margin:18px auto 0; font-size:16.5px; }
  .ft-social{ justify-content:center; }
  .ft-social a{ width:50px; height:50px; font-size:21px; }
  .ft-col{ align-items:center; }
  .ft-col h3, .ft-area h3{ font-size:14px; }
  .ft-col a, .ft-col span{ font-size:17px; }
  .ft-area p{ justify-content:center; font-size:15px; }
  .ft-bottom{ align-items:center; text-align:center; font-size:14px; }

  /* Mobile reviews: headline and score centred */
  .mrev-head{ display:flex; flex-direction:column; align-items:center; text-align:center; }

  /* Homepage hero: the "Watch our story" button sits under the intro, above the rating */
  .hero-home .hero-body .hero-play{ position:static; order:5; display:inline-flex; margin-top:18px; padding:6px 18px 6px 6px; gap:12px; border-radius:999px;
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
  .hero-home .hero-body .hero-play .hp-btn{ width:40px; height:40px; font-size:14px; }
  .hero-home .hero-body .hero-play .hp-btn::before{ display:none; }
  .hero-home .hero-body .hero-play .hp-txt{ display:flex; text-align:left; }
  .hero-home .hero-body .hero-play .hp-txt b{ font-size:14.5px; }
  .hero-home .hero-body .hero-play .hp-txt span{ font-size:12.5px; }
  .hero-home .hero-body .proof{ order:6; }
}

/* ---------- Homepage reviews: the slider at every size ---------- */
.mrev-static{ display:block; }
.mrev-static .mrev-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px 32px; }
.mrev-static .mrev-head .h2{ margin:0; }
.mrev-static .mrev-score{ display:inline-flex; align-items:center; gap:14px; padding:10px 20px 10px 10px; border-radius:999px; background:var(--panel); transition:background-color .3s ease; }
.mrev-static .mrev-score:hover{ background:#E8EDF3; }
.mrev-static .mrev-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; }
.mrev-static .mrev-score > span{ display:flex; flex-direction:column; gap:3px; font-size:14.5px; color:var(--muted); }
.mrev-static .stars-g{ display:inline-flex; gap:2px; color:var(--accent); font-size:16px; }
.mrev-static .mrev-card{ display:flex; flex-direction:column; min-height:250px; margin:0; padding:clamp(24px, 2.4vw, 32px); border-radius:var(--r-card); background:var(--panel); }
.mrev-static .mrev-card blockquote{ margin:18px 0 0; }
.mrev-static .mrev-card p{ font-size:clamp(18px, 1.5vw, 21px); line-height:1.45; letter-spacing:-0.015em; color:var(--ink); }
.mrev-static .mrev-card figcaption{ display:flex; flex-direction:column; gap:2px; margin-top:auto; padding-top:24px; font-size:14.5px; color:var(--muted); }
.mrev-static .mrev-card figcaption b{ font-size:15.5px; font-weight:500; color:var(--ink); }
@media (min-width:761px){
  .mrev-static .msl{ position:relative; margin-top:clamp(24px, 2.8vw, 36px); }
  .mrev-static .msl-track{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 32px) / 3); gap:16px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
  .mrev-static .msl-track::-webkit-scrollbar{ display:none; }
  .mrev-static .msl-track > *{ scroll-snap-align:start; }
  .mrev-static .msl-btn{ display:grid; place-items:center; position:absolute; top:50%; z-index:5; width:52px; height:52px; margin-top:-44px; border-radius:50%; background:#fff; color:var(--ink); font-size:20px;
    box-shadow:0 14px 30px -14px rgba(7,25,49,.5), 0 0 0 1px rgba(7,25,49,.08); transition:opacity .25s ease, background-color .25s ease, color .25s ease; }
  .mrev-static .msl-btn:hover:not(:disabled){ background:var(--ink); color:#fff; }
  .mrev-static .msl-btn:disabled{ opacity:.35; pointer-events:none; }
  .mrev-static .msl-prev{ left:-26px; } .mrev-static .msl-next{ right:-26px; }
  .mrev-static .msl-dots{ display:flex; justify-content:center; gap:2px; margin-top:14px; }
  .mrev-static .msl-dots button{ position:relative; width:26px; height:36px; }
  .mrev-static .msl-dots button::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:width .25s ease, margin .25s ease, background-color .25s ease; }
  .mrev-static .msl-dots button.is-on::before{ width:24px; margin-left:-12px; background:var(--ink); }
}
@media (min-width:761px) and (max-width:1100px){ .mrev-static .msl-track{ grid-auto-columns:calc((100% - 16px) / 2); } }
@media (max-width:760px){
  /* Homepage hero on phones: the photo keeps to the top so Ryan and Paul's
     faces are clear, fading into the navy the copy sits on. */
  .hero-home .hero-card{ min-height:0; justify-content:flex-start; padding-top:calc(var(--hd-h) + min(92vw, 380px)); background:#071931; }
  .hero-home .hero-media{ inset:0 0 auto 0; height:calc(var(--hd-h) + min(128vw, 520px));
    -webkit-mask-image:linear-gradient(180deg, #000 62%, transparent 100%); mask-image:linear-gradient(180deg, #000 62%, transparent 100%); }
  .hero-home .hero-img{ object-position:50% 12%; }
  .hero-home .hero-shade{ background:linear-gradient(180deg, rgba(4,13,27,.45) 0px, rgba(4,13,27,0) 110px); }
  .hero-home .hero-title{ text-shadow:0 2px 30px rgba(4,13,27,.55); }
}
@media (max-width:760px){
  /* Homepage phone hero a little shorter, heads still clear */
  .hero-home .hero-card{ padding-top:calc(var(--hd-h) + min(64vw, 270px)); }
  .hero-home .hero-media{ height:calc(var(--hd-h) + min(104vw, 430px)); }
  .hero-home .hero-img{ object-position:50% 8%; }
}
@media (max-width:760px){ .hero-home .hero-img{ object-position:50% 26%; } }
@media (max-width:760px){
  /* Phone hero: crop the wall above them so the whole face sits above the name */
  .hero-home .hero-img{ object-position:50% 50%; }
  /* Breadcrumbs are noise on phones (guides, towns) */
  .cg-crumbs{ display:none !important; }
}

/* Ryan + Paul faces in the tools band strip and the calculator "ask" boxes */
.tb-faces{ display:flex; flex:none; }
.tb-strip .tb-faces img{ width:52px; height:52px; border-radius:50%; object-fit:cover; object-position:50% 20%; border:2px solid var(--accent); }
.tb-faces img + img{ margin-left:-14px; }