:root{
  --ink:#081033;
  --ink-2:#0D1740;
  --blue:#0C41EA;
  --blue-lift:#3A67F0;
  --sand:#D9B382;
  --mist:#F2F4FB;
  --slate:#5B6486;
  --line:rgba(255,255,255,.14);
  --line-dark:rgba(8,16,51,.12);
  --display:"Fraunces",Georgia,serif;
  --body:"Inter Tight",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--body);
  background:var(--mist);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ── Hero ─────────────────────────────────────── */
.stage{
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(12,65,234,.38) 0%, transparent 62%),
    linear-gradient(180deg,var(--ink) 0%, var(--ink-2) 100%);
  color:#fff;
  padding-bottom:76px;
  position:relative;
  overflow:hidden;
}

/* ── Hero slideshow ───────────────────────────────────────
   Full-bleed property photography behind the whole hero. Slides cross-fade
   with a slow drift so the page has motion without anything sliding under the
   reader's eye while they type. The scrim is what keeps the headline and the
   prompt box legible over an unpredictable photo.                           */
.slides{position:absolute;inset:0;z-index:0;overflow:hidden}
.slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transform:scale(1.04);
  transition:opacity 1.5s ease;
}
/* Only the visible slide animates, so the browser is not running four
   transforms behind an opaque scrim the whole time. */
.slide.on{opacity:1;animation:kenburns 14s ease-in-out infinite alternate}
@keyframes kenburns{
  from{transform:scale(1.02) translate3d(0,0,0)}
  to  {transform:scale(1.14) translate3d(-1.5%,-1%,0)}
}
@media (prefers-reduced-motion:reduce){
  .slide.on{animation:none;transform:scale(1.02)}
}
.slides::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(8,16,51,.90) 0%, rgba(8,16,51,.74) 42%, rgba(8,16,51,.93) 100%),
    linear-gradient(90deg, rgba(8,16,51,.72) 0%, transparent 62%);
}
.stage .wrap,.stage .horizon{position:relative;z-index:1}

/* Slide counter and dashes, bottom-left of the hero. */
.slide-nav{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:18px;
  margin-top:40px;
}
.slide-count{
  font-family:var(--display);font-variation-settings:"opsz" 60;
  font-size:26px;font-weight:600;letter-spacing:-.01em;line-height:1;
}
.slide-count .now{color:var(--sand)}
.slide-count .tot{color:rgba(255,255,255,.35);font-size:19px}
.dashes{display:flex;gap:7px}
.dashes button{
  width:22px;height:3px;border:0;padding:0;border-radius:2px;cursor:pointer;
  background:rgba(255,255,255,.28);transition:background .3s ease, width .3s ease;
}
.dashes button[aria-current="true"]{background:var(--sand);width:38px}
.dashes button:hover{background:rgba(255,255,255,.55)}

/* ── Marquee ──────────────────────────────────────────────
   Two identical tracks side by side, the pair translated by exactly half its
   width; when the animation loops the second track is where the first began,
   so the seam never shows.                                                  */
.marquee{
  position:relative;z-index:1;
  background:var(--ink);border-top:1px solid rgba(255,255,255,.09);
  overflow:hidden;padding:15px 0;
}
.marquee-track{display:flex;width:max-content;animation:marquee 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-group{display:flex;align-items:center;flex-shrink:0}
.marquee span{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.62);
  padding:0 26px;white-space:nowrap;
}
.marquee i{
  width:5px;height:5px;border-radius:50%;background:var(--sand);
  flex-shrink:0;opacity:.85;
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Social rail ──────────────────────────────────────────
   Fixed to the right edge, clear of content at every width. Hidden on small
   screens, where it would sit on top of the cards.                          */
.social-rail{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:6px;
}
.social-rail a{
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:#fff;
  border-radius:12px 0 0 12px;
  transition:background .2s ease, width .2s ease;
}
.social-rail a:first-child{border-top-left-radius:14px}
.social-rail a:last-child{border-bottom-left-radius:14px}
.social-rail a svg{width:18px;height:18px;fill:currentColor}
.social-rail a:hover{width:54px}
.social-rail a.wa:hover{background:#25D366;color:#06301A}
.social-rail a.fb:hover{background:#1877F2}
.social-rail a.ig:hover{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)}
.social-rail a.tw:hover{background:#000}
.social-rail a.li:hover{background:#0A66C2}
@media (max-width:900px){.social-rail{display:none}}
.horizon{
  position:absolute; left:0; right:0; bottom:112px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(217,179,130,.5) 22%,rgba(217,179,130,.5) 78%,transparent);
  opacity:.7;
}
nav{display:flex;align-items:center;justify-content:space-between;padding:26px 0 0;gap:20px}
nav img{height:60px;width:auto;display:block}
@media (max-width:620px){ nav img{height:46px} }
.nav-right{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.markets{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
  display:flex;gap:14px;flex-wrap:wrap;
}
.markets span[aria-current]{color:var(--sand)}

.nav-link{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.6);text-decoration:none;transition:color .18s ease;
}
.nav-link:hover{color:var(--sand)}
.nav-link[aria-current="page"]{color:var(--sand)}

/* Recruiting is the one nav item asking for something rather than offering it,
   so it is a button among links instead of another word in the row. */
.nav-cta{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);background:var(--sand);
  border-radius:100px;padding:9px 16px;font-weight:600;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.nav-cta svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none}
.nav-cta:hover{
  background:#E8C69A;transform:translateY(-1px);
  box-shadow:0 8px 20px -8px rgba(217,179,130,.7);
}
.nav-cta[aria-current="page"]{background:#fff}

/* Invitation to send a request, once the visitor has seen the results. */
.after-results{
  margin-top:44px;padding:30px;border-radius:14px;text-align:center;
  background:linear-gradient(160deg,rgba(12,65,234,.05),rgba(217,179,130,.09));
  border:1px solid var(--line-dark);
}
.after-results p{margin:0 0 14px;font-size:16px;color:var(--slate)}
.after-cta{
  color:var(--blue);font-weight:600;font-size:16px;text-decoration:none;
}
.after-cta:hover{text-decoration:underline}

.dealer-btn{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:rgba(255,255,255,.6);
  border-radius:100px;padding:7px 13px;cursor:pointer;
  display:flex;align-items:center;gap:7px;transition:all .18s ease;
}
.dealer-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.dealer-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3);transition:background .18s}
.dealer-btn[aria-pressed="true"]{background:rgba(217,179,130,.18);border-color:rgba(217,179,130,.5);color:var(--sand)}
.dealer-btn[aria-pressed="true"] .dealer-dot{background:var(--sand);box-shadow:0 0 8px var(--sand)}

.hero{padding:70px 0 0;max-width:760px}
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sand);margin:0 0 18px;
}
h1{
  font-family:var(--display);
  font-variation-settings:"opsz" 120,"SOFT" 0,"WONK" 1;
  font-weight:300;font-size:clamp(38px,6.2vw,68px);
  line-height:1.02;letter-spacing:-.02em;margin:0 0 18px;
}
h1 em{font-style:normal;font-weight:600;color:var(--sand)}
.sub{font-size:17px;line-height:1.6;color:rgba(255,255,255,.68);max-width:520px;margin:0 0 38px}

/* ── Prompt box ───────────────────────────────── */
.box{
  position:relative;z-index:2;
  background:#fff;color:var(--ink);border-radius:18px;
  box-shadow:0 28px 70px -22px rgba(4,10,38,.8), 0 0 0 1px rgba(255,255,255,.08);
  padding:6px 6px 6px 22px;
  display:flex;align-items:flex-end;gap:12px;
  transition:box-shadow .25s ease, transform .25s ease;
}
.box:focus-within{
  box-shadow:0 28px 70px -22px rgba(4,10,38,.85), 0 0 0 2px var(--blue);
  transform:translateY(-2px);
}
#q{
  flex:1;border:0;outline:0;resize:none;
  font-family:var(--body);font-size:17px;line-height:1.5;color:var(--ink);
  padding:18px 0;background:transparent;max-height:150px;
}
#q::placeholder{color:#9AA2BE}
.ask{
  border:0;cursor:pointer;flex-shrink:0;
  background:var(--blue);color:#fff;
  font-family:var(--body);font-size:15px;font-weight:600;
  padding:14px 22px;border-radius:13px;margin-bottom:6px;
  display:flex;align-items:center;gap:9px;transition:background .18s ease;
}
.ask:hover:not(:disabled){background:var(--blue-lift)}
.ask:disabled{opacity:.45;cursor:default}
.ask svg{width:15px;height:15px}

/* ── Advanced search ──────────────────────────────────────
   A structured alternative to the free-text box, for people who would rather
   pick than type. It composes a plain-language query and runs it through the
   same parser, so there is one search path rather than two to keep in step. */
.adv-toggle{
  margin-top:16px;background:none;border:0;cursor:pointer;padding:6px 0;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.6);display:flex;align-items:center;gap:8px;
  transition:color .18s ease;
}
.adv-toggle:hover{color:var(--sand)}
.adv-toggle svg{
  width:11px;height:11px;stroke:currentColor;stroke-width:2.4;fill:none;
  transition:transform .28s ease;
}
.adv-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.adv-toggle[aria-expanded="true"]{color:var(--sand)}

.adv{
  overflow:hidden;max-height:0;opacity:0;
  transition:max-height .42s cubic-bezier(.3,.7,.3,1), opacity .3s ease, margin .42s ease;
}
.adv.open{max-height:640px;opacity:1;margin-top:16px}

.adv-card{
  background:#fff;border-radius:16px;padding:24px;
  box-shadow:0 24px 60px -30px rgba(4,10,38,.8);
}
.adv-grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.adv-grid .field{margin:0}
.adv-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.adv-actions .find{
  flex:1;min-width:170px;border:0;background:var(--blue);color:#fff;cursor:pointer;
  font-family:var(--body);font-size:15px;font-weight:600;letter-spacing:.02em;
  padding:14px 24px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  transition:background .18s ease;
}
.adv-actions .find:hover{background:var(--blue-lift)}
.adv-actions .reset{
  border:1px solid #D6DBEC;background:#fff;color:var(--slate);cursor:pointer;
  font-family:var(--body);font-size:14.5px;font-weight:500;
  padding:14px 22px;border-radius:11px;
  display:flex;align-items:center;gap:8px;transition:all .18s ease;
}
.adv-actions .reset:hover{border-color:var(--blue);color:var(--blue)}
.adv-actions svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none}

.chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.chip{
  border:1px solid var(--line);background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.82);border-radius:100px;
  padding:9px 16px;font-size:13.5px;cursor:pointer;font-family:var(--body);
  transition:all .18s ease;
}
.chip:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3);color:#fff}

.index-line{
  margin-top:22px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.34);
}
.index-line .warn{color:var(--sand)}

/* ── Results ──────────────────────────────────── */
#out{padding:48px 0 90px;min-height:60px}
/* ── Page loader ──────────────────────────────────────────
   Covers the page until the fonts and the first hero image are ready, so the
   visitor never sees the headline reflow or the photo pop in. Painted from
   CSS with no JS needed to appear — the script only removes it — and it
   self-destructs on a timer so a slow image can never trap anyone.          */
#loader{
  position:fixed;inset:0;z-index:9999;
  background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:opacity .55s ease, visibility .55s ease;
}
#loader.done{opacity:0;visibility:hidden}
#loader .mark{
  font-family:var(--display);font-variation-settings:"opsz" 120;
  font-size:clamp(30px,6vw,46px);font-weight:300;letter-spacing:.26em;
  text-transform:uppercase;color:#fff;padding-left:.26em;
  animation:breathe 2.2s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.5}50%{opacity:1}}
#loader .bar{
  width:min(190px,42vw);height:2px;border-radius:2px;
  background:rgba(255,255,255,.14);overflow:hidden;
}
#loader .bar span{
  display:block;height:100%;width:38%;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--sand),transparent);
  animation:sweep 1.25s ease-in-out infinite;
}
@keyframes sweep{
  from{transform:translateX(-110%)}
  to  {transform:translateX(370%)}
}
#loader .tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.36);
}
@media (prefers-reduced-motion:reduce){
  #loader .mark,#loader .bar span{animation:none}
}

/* ── Loading state ────────────────────────────────────────
   Skeleton cards rather than a spinner: the layout that is coming is already
   on screen, so nothing jumps when the results land, and the wait reads as
   work in progress rather than as a stall.                                  */
.loading-head{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  color:var(--slate);text-transform:uppercase;
  display:flex;align-items:center;gap:12px;margin-bottom:28px;
}
.spinner{
  width:16px;height:16px;flex-shrink:0;
  border:2px solid rgba(12,65,234,.18);border-top-color:var(--blue);
  border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.loading-steps{
  display:flex;gap:8px;flex-wrap:wrap;margin-left:auto;
  font-size:11px;letter-spacing:.04em;
}
.loading-steps b{color:var(--ink);font-weight:500}

.skeleton{
  background:#fff;border:1px solid var(--line-dark);border-radius:14px;overflow:hidden;
}
.sk-shot{aspect-ratio:4/3}
.sk-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:11px}
.sk-line{height:11px;border-radius:5px}
.sk-shot,.sk-line{
  background:linear-gradient(90deg,#EDEFF7 25%,#E1E5F2 37%,#EDEFF7 63%);
  background-size:400% 100%;
  animation:shimmer 1.3s ease-in-out infinite;
}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* Stagger the cards so the block breathes instead of pulsing as one slab. */
.skeleton:nth-child(2) .sk-shot,.skeleton:nth-child(2) .sk-line{animation-delay:.09s}
.skeleton:nth-child(3) .sk-shot,.skeleton:nth-child(3) .sk-line{animation-delay:.18s}
.skeleton:nth-child(4) .sk-shot,.skeleton:nth-child(4) .sk-line{animation-delay:.27s}
.skeleton:nth-child(5) .sk-shot,.skeleton:nth-child(5) .sk-line{animation-delay:.36s}
.skeleton:nth-child(6) .sk-shot,.skeleton:nth-child(6) .sk-line{animation-delay:.45s}

/* Results fade in so the swap from skeleton to real cards is not a flash. */
.grid .card{animation:rise .34s ease both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.answer{font-size:17.5px;line-height:1.68;max-width:680px;margin:0 0 14px}
.answer strong{font-weight:600}

.readout{
  display:flex;gap:22px;flex-wrap:wrap;margin:0 0 30px;
  font-family:var(--mono);font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--slate);
}
.readout b{color:var(--ink);font-weight:500}

.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.card{
  background:#fff;border-radius:14px;overflow:hidden;
  border:1px solid var(--line-dark);
  display:flex;flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px -14px rgba(8,16,51,.28)}

.shot{
  position:relative;aspect-ratio:4/3;
  background:linear-gradient(135deg,#E7EAF5 0%,#DCE2F2 100%);
  display:block;overflow:hidden;
}
/* ── Source watermarks ────────────────────────────────────
   Portal and agency watermarks are burned into the source pixels, so they can
   only be covered, never removed. Two mechanisms together, because either one
   alone leaves traces:

   1. The image is scaled up and the frame clips it, so anything sitting in a
      corner or along an edge — portal badges, agency straplines — is pushed
      outside the visible box entirely.
   2. A frosted panel over the middle third, where agency logos sit. It is
      soft-masked at its edges so it reads as a treatment rather than as a
      rectangle taped over the photo, and it is deep enough to swallow a tall
      logo with a strapline under it.

   Our own mark then sits on top, so the covered area carries a name instead of
   looking like something was hidden.                                         */
.shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.28);
  transition:transform .35s ease;
}
.card:hover .shot img{transform:scale(1.33)}

.shot .wm-patch{
  position:absolute;pointer-events:none;
  backdrop-filter:blur(16px) saturate(.35) brightness(1.04);
  -webkit-backdrop-filter:blur(16px) saturate(.35) brightness(1.04);
}
/* Agency mark: a deep band, faded at top and bottom so it has no hard edge. */
.shot .wm-mid{
  left:0;right:0;top:28%;height:44%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
/* Whatever survives the crop in the lower-right. */
.shot .wm-corner{
  right:0;bottom:0;width:46%;height:24%;
  -webkit-mask-image:linear-gradient(315deg,#000 55%,transparent);
  mask-image:linear-gradient(315deg,#000 55%,transparent);
}

/* Our mark, over the covered band. */
.shot .wm-brand{
  position:absolute;left:0;right:0;top:28%;height:44%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-variation-settings:"opsz" 90;
  font-size:clamp(15px,4.4vw,23px);font-weight:600;letter-spacing:.18em;
  color:rgba(255,255,255,.9);text-transform:uppercase;
  text-shadow:0 2px 16px rgba(8,16,51,.7);
  pointer-events:none;user-select:none;
}

/* Older browsers without backdrop-filter would show the watermark through a
   transparent panel, which is worse than a plain tint. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .shot .wm-patch{background:rgba(20,28,60,.92)}
}

/* ── Our placeholder, when a listing has no photo ───────── */
.shot .noimg{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(12,65,234,.10) 0%, transparent 60%),
    linear-gradient(135deg,#EDF0F9 0%,#DFE5F4 100%);
}
.shot .noimg svg{width:44px;height:44px;opacity:.4}
.shot .noimg span{
  font-family:var(--display);font-variation-settings:"opsz" 80;
  font-size:15px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:#8790B0;
}
.shot .noimg small{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#A3ABC7;
}

.shot-count{
  position:absolute;left:10px;bottom:10px;
  background:rgba(8,16,51,.72);color:#fff;border-radius:6px;
  font-family:var(--mono);font-size:10px;padding:4px 8px;letter-spacing:.06em;
  z-index:3;
}

/* ── Card gallery ─────────────────────────────────────────
   Every photo is in the DOM and cross-faded, rather than swapping one src.
   Swapping would show a blank frame on each step while the next image loads;
   this way the first flip through is instant once they are cached.          */
.shot .frame{
  position:absolute;inset:0;opacity:0;
  transition:opacity .3s ease;
}
.shot .frame.on{opacity:1}
.shot .frame img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.28)}

.gal-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:30px;height:30px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(8,16,51,.6);color:#fff;font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s ease, background .2s ease;
}
.card:hover .gal-btn{opacity:1}
.gal-btn:hover{background:var(--blue)}
.gal-btn.prev{left:8px}
.gal-btn.next{right:8px}
@media (hover:none){ .gal-btn{opacity:.85} }

.gal-dots{
  position:absolute;left:0;right:0;bottom:9px;z-index:4;
  display:flex;justify-content:center;gap:5px;pointer-events:none;
}
.gal-dots i{
  width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.45);
  transition:background .2s ease, width .2s ease;
}
.gal-dots i.on{background:#fff;width:14px;border-radius:3px}

/* Play button over the cover, when there are enough photos for a tour. */
.play-tour{
  position:absolute;right:10px;top:10px;z-index:4;
  display:flex;align-items:center;gap:7px;
  border:0;cursor:pointer;border-radius:100px;padding:7px 13px 7px 10px;
  background:rgba(8,16,51,.72);color:#fff;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  transition:background .2s ease;
}
.play-tour:hover{background:var(--blue)}
.play-tour svg{width:13px;height:13px;fill:currentColor}
.card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:11px;flex:1}
.price{
  font-family:var(--display);font-variation-settings:"opsz" 60;
  font-size:27px;font-weight:600;letter-spacing:-.015em;line-height:1;
}
.price .ppm{
  font-family:var(--mono);font-size:11px;font-weight:400;color:var(--slate);
  letter-spacing:.04em;margin-left:9px;
}
.loc{font-size:14.5px;font-weight:500}
.loc .district{color:var(--slate);font-weight:400}
.desc{font-size:13.5px;line-height:1.55;color:var(--slate);flex:1}
.specs{
  font-family:var(--mono);font-size:11.5px;color:var(--slate);
  display:flex;gap:12px;flex-wrap:wrap;
  padding-top:12px;border-top:1px solid var(--line-dark);
}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 9px;border-radius:5px;background:rgba(12,65,234,.09);color:var(--blue);
}
.tag.warn{background:rgba(217,179,130,.24);color:#8A6428}
.tag.good{background:rgba(16,140,90,.12);color:#0B6B45}

/* "I want this one" — the point of every card. */
.want{
  margin-top:14px;width:100%;border:1px solid rgba(12,65,234,.25);
  background:rgba(12,65,234,.06);color:var(--blue);cursor:pointer;
  font-family:var(--body);font-size:14.5px;font-weight:600;
  padding:12px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.want svg{width:14px;height:14px;transition:transform .22s ease}
.want:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.want:hover svg{transform:translateX(3px)}
.want.picked{
  background:rgba(16,140,90,.12);color:#0B6B45;border-color:rgba(16,140,90,.3);
}

.dealer-strip{
  border-top:1px dashed rgba(217,179,130,.55);
  background:rgba(217,179,130,.07);
  padding:11px 20px;display:flex;justify-content:space-between;
  align-items:center;gap:10px;flex-wrap:wrap;
}
.dealer-strip .who{font-family:var(--mono);font-size:11px;color:#8A6428;letter-spacing:.04em}
.dealer-strip a{font-size:12.5px;font-weight:600;color:var(--blue);text-decoration:none}
.dealer-strip a:hover{text-decoration:underline}

.note{
  margin-top:34px;padding:18px 20px;border-radius:12px;
  background:rgba(12,65,234,.05);border-left:3px solid var(--blue);
  font-size:14px;line-height:1.6;color:var(--slate);max-width:680px;
}
.empty{color:var(--slate);font-size:16px;line-height:1.6;max-width:600px}
.more{
  margin:28px auto 0;display:block;background:#fff;border:1px solid var(--line-dark);
  color:var(--ink);font-family:var(--body);font-size:14px;font-weight:600;
  padding:13px 28px;border-radius:11px;cursor:pointer;transition:all .18s ease;
}
.more:hover{border-color:var(--blue);color:var(--blue)}

/* ── Section furniture ────────────────────────────────── */
section{padding:76px 0}
section.alt{background:#fff;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.sec-eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);margin:0 0 14px;
}
.sec-title{
  font-family:var(--display);font-variation-settings:"opsz" 100;
  font-weight:300;font-size:clamp(28px,4.4vw,44px);line-height:1.08;
  letter-spacing:-.02em;margin:0 0 16px;
}
.sec-title em{font-style:normal;font-weight:600;color:var(--blue)}
.sec-lead{font-size:16.5px;line-height:1.65;color:var(--slate);max-width:560px;margin:0 0 40px}

/* ── Request form ─────────────────────────────────────── */
.req-wrap{display:grid;gap:44px;grid-template-columns:1.15fr .85fr;align-items:start}
@media (max-width:880px){.req-wrap{grid-template-columns:1fr;gap:34px}}

.form-card{
  background:#fff;border:1px solid var(--line-dark);border-radius:18px;
  padding:30px;box-shadow:0 20px 50px -30px rgba(8,16,51,.4);
}
.stage .form-card{box-shadow:0 26px 60px -28px rgba(4,10,38,.75)}
.field{margin-bottom:18px}
.field label{
  display:block;font-size:13px;font-weight:500;margin-bottom:7px;color:var(--ink);
}
.field label .req{color:var(--blue);margin-left:3px}
.field label .opt{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--slate);font-weight:400;margin-left:6px;
}
.field input,.field select,.field textarea{
  width:100%;border:1px solid #D6DBEC;border-radius:11px;
  padding:13px 14px;font-family:var(--body);font-size:15px;color:var(--ink);
  background:#FBFCFF;transition:border-color .16s ease, box-shadow .16s ease;
}
.field textarea{resize:vertical;min-height:88px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(12,65,234,.12);background:#fff;
}
.field.bad input{border-color:#C4362F;box-shadow:0 0 0 3px rgba(196,54,47,.1)}
.field .err{color:#C4362F;font-size:12.5px;margin-top:6px;display:block}
.field-row{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.seg{display:flex;gap:8px}
.seg button{
  flex:1;border:1px solid #D6DBEC;background:#FBFCFF;border-radius:11px;
  padding:13px;font-family:var(--body);font-size:14.5px;font-weight:500;
  color:var(--slate);cursor:pointer;transition:all .16s ease;
}
.seg button[aria-pressed="true"]{
  border-color:var(--blue);background:rgba(12,65,234,.07);color:var(--blue);font-weight:600;
}
.submit{
  width:100%;border:0;background:var(--blue);color:#fff;cursor:pointer;
  font-family:var(--body);font-size:16px;font-weight:600;
  padding:16px;border-radius:12px;margin-top:6px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:background .18s ease;
}
.submit:hover:not(:disabled){background:var(--blue-lift)}
.submit:disabled{opacity:.55;cursor:default}
.form-foot{font-size:12.5px;color:var(--slate);text-align:center;margin:14px 0 0;line-height:1.55}

.sent{text-align:center;padding:22px 6px}
.sent .tick{
  width:56px;height:56px;border-radius:50%;background:rgba(16,140,90,.12);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
}
.sent .tick svg{width:26px;height:26px;stroke:#0B6B45;stroke-width:2.5;fill:none}
.sent h3{font-family:var(--display);font-weight:600;font-size:23px;margin:0 0 10px}
.sent p{color:var(--slate);font-size:15px;line-height:1.6;margin:0 0 20px}
.sent .ref{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--slate);
  background:var(--mist);border-radius:8px;padding:10px 14px;display:inline-block;
}

/* ── Contact ──────────────────────────────────────────── */
.contact-card{
  background:linear-gradient(160deg,var(--ink) 0%,var(--ink-2) 100%);
  color:#fff;border-radius:18px;padding:34px 30px;
}
.contact-card h3{
  font-family:var(--display);font-variation-settings:"opsz" 80;
  font-weight:600;font-size:24px;margin:0 0 8px;
}
.contact-card .who{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sand);margin:0 0 24px;
}
.contact-row{
  display:flex;align-items:center;gap:14px;padding:15px 0;
  border-top:1px solid rgba(255,255,255,.1);
}
.contact-row:first-of-type{border-top:0}
.contact-row .ico{
  width:38px;height:38px;flex-shrink:0;border-radius:10px;
  background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;
}
.contact-row .ico svg{width:17px;height:17px;stroke:var(--sand);stroke-width:1.8;fill:none}
.contact-row .lbl{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:3px;
}
.contact-row a,.contact-row .val{
  color:#fff;text-decoration:none;font-size:16px;font-weight:500;direction:ltr;
}
.contact-row a:hover{color:var(--sand)}
.wa-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:22px;background:#25D366;color:#06301A;
  border-radius:12px;padding:14px;font-size:15px;font-weight:600;text-decoration:none;
  transition:filter .18s ease;
}
.wa-btn:hover{filter:brightness(1.08)}
.wa-btn svg{width:18px;height:18px;fill:currentColor}

/* ── FAQ ──────────────────────────────────────────────── */
.faq{max-width:820px;margin:0 auto}
.faq details{
  border-bottom:1px solid var(--line-dark);
}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-size:17px;font-weight:500;line-height:1.45;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;
  width:9px;height:9px;margin-top:-6px;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:rotate(45deg);transition:transform .22s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq summary:hover{color:var(--blue)}
.faq .ans{padding:0 44px 24px 0;color:var(--slate);font-size:15.5px;line-height:1.7}
.faq .ans p{margin:0 0 12px}
.faq .ans p:last-child{margin:0}

footer{background:var(--ink);color:rgba(255,255,255,.55);padding:40px 0;font-size:13.5px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer a{color:rgba(255,255,255,.8);text-decoration:none}
footer a:hover{color:#fff}
.fmono{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.35)}

/* ── Responsive ───────────────────────────────────────────
   Three real breakpoints rather than one: the nav row runs out of space long
   before the content grid does, and the hero needs its own treatment on a
   phone where vertical space, not width, is the constraint.                 */

/* Tablet and narrow laptops: the nav row wraps rather than overflowing. */
@media (max-width:1024px){
  .wrap{padding:0 20px}
  nav{flex-wrap:wrap;row-gap:14px}
  .nav-right{gap:14px;row-gap:10px}
  .markets{display:none}          /* the market list is the first thing to go */
  section{padding:60px 0}
}

/* Phones and small tablets. */
@media (max-width:760px){
  .wrap{padding:0 16px}
  .box{padding:6px 6px 6px 16px;flex-direction:column;align-items:stretch}
  .ask{margin:0;justify-content:center}
  #q{padding:16px 0 10px}
  .hero{padding:40px 0 0}
  .stage{padding-bottom:52px}
  .horizon{display:none}

  nav{gap:12px}
  nav img{height:40px}
  .nav-right{width:100%;justify-content:flex-start}
  .dealer-btn{display:none}       /* dealer view is a desk tool, not a phone one */

  .slide-nav{margin-top:26px;gap:13px}
  .slide-count{font-size:20px}
  .slide-count .tot{font-size:15px}
  .dashes button{width:16px}
  .dashes button[aria-current="true"]{width:28px}

  .adv-grid{grid-template-columns:1fr}
  .adv.open{max-height:900px}
  .adv-card{padding:18px}
  .adv-actions .find,.adv-actions .reset{width:100%;justify-content:center}

  /* One column of cards reads better than two cramped ones. */
  .grid{grid-template-columns:1fr}
  .answer{font-size:16.5px}
  .readout{gap:12px;font-size:10px}

  section{padding:48px 0}
  .req-wrap{gap:26px}
  .form-card{padding:22px 18px}
  .contact-card{padding:26px 20px}
  .cta-band{padding:34px 20px}
  .stats-band{margin-top:0;grid-template-columns:repeat(2,1fr)}
  .faq summary{font-size:15.5px;padding-right:34px}
  .faq .ans{padding-right:0;font-size:14.5px}

  .marquee span{font-size:10px;padding:0 16px}

  footer .wrap{flex-direction:column;align-items:flex-start;gap:12px}
}

/* Very small phones: stop the display type from overflowing. */
@media (max-width:400px){
  .wrap{padding:0 13px}
  h1{font-size:31px}
  .price{font-size:23px}
  .card-body{padding:15px 16px 17px}
  .stats-band{grid-template-columns:1fr}
  .seg{flex-direction:column}
}

/* Landscape phones: the full-height hero would push everything off screen. */
@media (max-height:520px) and (orientation:landscape){
  .hero{padding-top:22px}
  .hero h1{font-size:30px}
  .sub{margin-bottom:20px}
  .slide-nav{margin-top:18px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}