/* ══════════════════════════════════════════════════════════
   3647 W 2280 N #E304 — Lehi, Utah
   Palette drawn from the photographs: high-desert cobalt sky,
   dry grass gold, blue-shadowed mountains, white new build.
   Cobalt = the home.  Gold = the money.  Nothing else gets colour.
   ══════════════════════════════════════════════════════════ */

:root{
  --paper:#FFFFFF;
  --mist:#F2F5F8;          /* cool off-white, never cream */
  --line:#E2E8F0;
  --ink:#0E1726;           /* blue-black — the sky is in it */
  --slate:#5A6B80;
  --sky:#1E63C8;           /* cobalt, straight off the photos */
  --sky-d:#154A9B;
  --gold:#C88A2E;          /* dry grass / sunset */
  --gold-d:#A06D1F;
  --gold-w:#FBF6EC;

  --dsp:'Inter',system-ui,-apple-system,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --wrap:1180px;
  --r:14px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--sky);outline-offset:3px;border-radius:3px}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:999}
.skip:focus{left:12px;top:12px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ── type scale ─────────────────────────────────────────── */
.eyebrow{
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sky);
  margin:0 0 20px;
}
.eyebrow--gold{color:var(--gold-d)}
.eyebrow--light{color:rgba(255,255,255,.82)}

.h2{
  font-family:var(--dsp);font-weight:500;
  font-size:clamp(30px,4.4vw,52px);line-height:1.08;letter-spacing:-.024em;
  margin:0 0 22px;text-wrap:balance;
}
.h2--light{color:#fff}
.h3{
  font-family:var(--dsp);font-weight:600;font-size:19px;line-height:1.25;
  letter-spacing:-.01em;margin:0 0 14px;
}
.h3--gap{margin-top:32px}
.lede{
  font-size:clamp(17px,1.6vw,19px);line-height:1.62;color:var(--slate);
  max-width:60ch;margin:0 0 44px;
}
.lede--sm{font-size:16px;margin-bottom:0}
.lede--light{color:rgba(255,255,255,.72)}
.fine{
  font-size:13px;line-height:1.6;color:var(--slate);opacity:.85;
  max-width:78ch;margin:32px 0 0;
}
.fine--tight{margin-top:20px}
.fine--light{color:rgba(255,255,255,.5);margin-top:52px}
.br-lg{display:none}
@media (min-width:900px){.br-lg{display:inline}}

/* ── buttons ────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 27px;border-radius:999px;border:1.5px solid transparent;
  background:var(--sky);color:#fff;font-weight:600;font-size:15px;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .22s var(--ease),background .22s var(--ease),box-shadow .22s var(--ease);
}
.btn:hover{background:var(--sky-d);transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(21,74,155,.5)}
.btn:active{transform:translateY(0)}
.btn--sm{padding:10px 19px;font-size:14px}
.btn--gold{background:var(--gold)}
.btn--gold:hover{background:var(--gold-d);box-shadow:0 10px 24px -8px rgba(160,109,31,.5)}
.btn--ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;box-shadow:none}

/* ── nav ────────────────────────────────────────────────── */
.nav{
  position:fixed;inset:0 0 auto;z-index:100;
  display:flex;align-items:center;gap:28px;
  padding:14px max(24px,calc(50vw - var(--wrap)/2));
  background:rgba(255,255,255,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transform:translateY(-102%);transition:transform .38s var(--ease),border-color .38s;
}
.nav.is-up{transform:translateY(0);border-bottom-color:var(--line)}
.nav__mark{display:flex;flex-direction:column;text-decoration:none;margin-right:auto;line-height:1.2}
.nav__unit{font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:.02em}
.nav__street{font-size:11.5px;color:var(--slate)}
.nav__links{display:none;gap:26px}
.nav__links a{font-size:14.5px;font-weight:500;text-decoration:none;color:var(--slate);transition:color .18s}
.nav__links a:hover{color:var(--sky)}
@media (min-width:1000px){.nav__links{display:flex}}

/* ── hero ───────────────────────────────────────────────── */
.hero{position:relative;min-height:min(100svh,860px);display:flex;align-items:flex-end;overflow:hidden}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%}
.hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,12,24,.52) 0%,rgba(6,12,24,.18) 34%,rgba(6,12,24,.62) 74%,rgba(6,12,24,.88) 100%);
}
.hero__body{position:relative;width:100%;max-width:var(--wrap);margin-inline:auto;padding:0 24px 68px;color:#fff}
.hero__h1{
  font-family:var(--dsp);font-weight:500;
  font-size:clamp(40px,7.4vw,86px);line-height:.98;letter-spacing:-.035em;
  margin:0 0 20px;text-wrap:balance;
  text-shadow:0 2px 30px rgba(0,0,0,.32);
}
.hero__sub{font-size:clamp(16.5px,1.7vw,20px);line-height:1.55;color:rgba(255,255,255,.86);max-width:44ch;margin:0 0 40px}
.hero__stats{display:flex;flex-wrap:wrap;gap:14px 44px;margin-bottom:38px}
.stat{display:flex;flex-direction:column;gap:3px}
.stat__n{font-family:var(--mono);font-weight:700;font-size:clamp(21px,2.5vw,29px);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat__l{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.hero__cta{display:flex;flex-wrap:wrap;gap:13px}

/* animated entrance */
.hero__body>*{animation:rise .9s var(--ease) backwards}
.hero__body>*:nth-child(1){animation-delay:.05s}
.hero__body>*:nth-child(2){animation-delay:.14s}
.hero__body>*:nth-child(3){animation-delay:.23s}
.hero__body>*:nth-child(4){animation-delay:.32s}
.hero__body>*:nth-child(5){animation-delay:.41s}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ── arrival ─────────────────────────────────────────────
   The same idea as the hero's rise, carried down the page. app.js
   hands out .rise and then .is-in as each element reaches the
   viewport; --d is its place in a staggered row. */
.rise{
  opacity:0;transform:translateY(18px);
  transition:opacity .68s var(--ease) var(--d,0ms),transform .68s var(--ease) var(--d,0ms);
}
.rise.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none}
}

/* ── fact strip ─────────────────────────────────────────── */
.facts{background:var(--paper)}
.facts__list li:nth-last-child(-n+1){border-bottom:0}
@media (min-width:560px){.facts__list li:nth-last-child(-n+2){border-bottom:0}}
@media (min-width:900px){.facts__list li:nth-last-child(-n+3){border-bottom:0}}
.facts__list{
  max-width:var(--wrap);margin-inline:auto;padding:0 24px;list-style:none;
  display:grid;grid-template-columns:1fr;gap:0 32px;
}
@media (min-width:560px){.facts__list{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.facts__list{grid-template-columns:repeat(3,1fr)}}
.facts__list li{padding:22px 0;display:flex;align-items:flex-start;gap:13px;border-bottom:1px solid var(--line)}
.facts__list .ico{width:20px;height:20px;color:var(--sky);margin-top:2px}
.facts__b{display:flex;flex-direction:column;gap:3px;min-width:0}
.facts__k{font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:-.01em}
.facts__v{font-size:13.5px;color:var(--slate);line-height:1.4}

/* ── generic section ────────────────────────────────────── */
.sec{padding:clamp(72px,9vw,124px) 0}
.sec--mist{background:var(--mist)}

/* ── offer ──────────────────────────────────────────────── */
.offer{background:var(--gold-w);padding:clamp(72px,9vw,124px) 0;border-block:1px solid #EFE3CE}
.offer .lede{max-width:66ch}
.offer .lede strong{color:var(--ink);font-weight:600}
.offer__cta{margin-top:40px}

.calc{
  display:grid;gap:0;margin-top:8px;
  background:var(--paper);border:1px solid #EBDFCA;border-radius:var(--r);overflow:hidden;
  box-shadow:0 20px 50px -34px rgba(80,55,10,.42);
}
@media (min-width:920px){.calc{grid-template-columns:1fr 1.28fr}}

.calc__controls{padding:34px;display:flex;flex-direction:column;gap:30px;border-bottom:1px solid var(--line)}
@media (min-width:920px){.calc__controls{border-bottom:0;border-right:1px solid var(--line)}}
.field{display:grid;gap:9px}
.field label{font-size:13px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--slate);display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.field__hint{font-weight:400;text-transform:none;letter-spacing:0;font-size:12px;opacity:.75}
.field__out{font-family:var(--mono);font-weight:700;font-size:24px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:99px;
  background:var(--line);cursor:pointer;margin:6px 0;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--gold);border:3.5px solid #fff;box-shadow:0 2px 9px rgba(0,0,0,.24);cursor:grab;
  transition:transform .16s var(--ease);
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.13)}
input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.04)}
input[type=range]::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;background:var(--gold);
  border:3.5px solid #fff;box-shadow:0 2px 9px rgba(0,0,0,.24);cursor:grab;
}

.calc__result{padding:34px;display:flex;flex-direction:column}
.calc__fine{margin-top:4px;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:9px}
.calc__fine p{margin:0;font-size:11.5px;line-height:1.55;color:var(--slate)}
.calc__fine b{color:var(--ink);font-weight:600}
.calc__fine .mono{font-size:11px}
.calc__fine a{color:var(--gold-d);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(160,109,31,.3)}
.calc__fine a:hover{border-bottom-color:var(--gold-d)}

.ab{display:grid;gap:14px;flex:1}
@media (min-width:560px){.ab{grid-template-columns:1fr 1fr}}
.opt{
  display:flex;flex-direction:column;
  border:1.5px solid var(--line);border-radius:var(--r);padding:20px;
  background:var(--paper);transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.opt.is-win{border-color:var(--gold);box-shadow:0 10px 30px -18px rgba(160,109,31,.55)}
.opt__h{display:flex;flex-direction:column;gap:2px;padding-bottom:15px;border-bottom:1px solid var(--line);margin-bottom:4px}
.opt__tag{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);font-weight:500;
}
.opt.is-win .opt__tag{color:var(--gold-d)}
.opt__price{font-family:var(--mono);font-weight:700;font-size:clamp(21px,2.6vw,27px);letter-spacing:-.03em}
.opt__sub{font-size:12.5px;color:var(--slate);line-height:1.35;margin-top:3px}
.opt__rows{margin:0;display:flex;flex-direction:column}
.opt__rows>div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.opt__rows>div:last-child{border-bottom:0}
.opt__rows dt{font-size:13px;color:var(--slate);line-height:1.3}
.opt__r{font-family:var(--mono);font-style:normal;font-size:11px;color:var(--gold-d);display:block;margin-top:1px}
.opt__rows dd{margin:0;font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.opt--b .opt__rows>div:nth-child(-n+2) dd{color:var(--gold-d)}

.verdict{
  margin-top:22px;padding:20px 22px;border-radius:var(--r);
  background:var(--mist);border:1px solid var(--line);transition:background .3s,border-color .3s;
}
.verdict.is-b{background:var(--gold-w);border-color:#EBDFCA}
.verdict__l{margin:0;font-size:13px;font-weight:600;color:var(--slate)}
.verdict__n{
  margin:4px 0 6px;font-family:var(--mono);font-weight:700;
  font-size:clamp(27px,3.6vw,38px);letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.verdict.is-b .verdict__n{color:var(--gold-d)}
.verdict__d{margin:0;font-size:13px;line-height:1.55;color:var(--slate)}

/* ── gallery ────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:28px}
/* One pill. Shared by the gallery filters, the weekend filters and the
   school links — fixed height so they cannot drift apart again. */
.chip,.season,.school__go{
  display:inline-flex;align-items:center;gap:7px;
  height:40px;padding:0 16px;border-radius:999px;
  border:1.5px solid var(--line);background:var(--paper);
  font-size:13.5px;font-weight:500;line-height:1;color:var(--ink);
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
/* :not(.is-on) so hovering a selected pill cannot repaint its label dark
   on the dark selected background */
.chip:not(.is-on):hover,.season:not(.is-on):hover,.school__go:hover{border-color:var(--sky);color:var(--sky)}
.chip.is-on,.season.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip__n{font-family:var(--mono);font-size:11.5px;font-weight:500;opacity:.55}
.chip.is-on .chip__n{opacity:.75}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,278px),1fr));grid-auto-rows:194px;grid-auto-flow:dense;gap:14px}
.tile{
  position:relative;border:0;padding:0;margin:0;cursor:zoom-in;overflow:hidden;
  border-radius:10px;background:var(--mist);height:100%;
  animation:fade .45s var(--ease) backwards;
}
.tile--wide{grid-column:span 2;grid-row:span 2}
@media (max-width:640px){
  .grid{grid-auto-rows:186px}
  .tile--wide{grid-column:span 1;grid-row:span 1}
}
@keyframes fade{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.tile:hover img{transform:scale(1.055)}
.tile__cap{
  position:absolute;inset:auto 0 0;padding:34px 14px 12px;text-align:left;
  font-size:13px;font-weight:500;color:#fff;line-height:1.35;
  background:linear-gradient(transparent,rgba(6,12,24,.82));
  opacity:0;transform:translateY(6px);transition:all .3s var(--ease);
}
.tile:hover .tile__cap,.tile:focus-visible .tile__cap{opacity:1;transform:none}

.specs{display:grid;gap:38px;margin-top:64px;padding-top:52px;border-top:1px solid var(--line)}
@media (min-width:760px){.specs{grid-template-columns:repeat(3,1fr);gap:48px}}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.ticks li{position:relative;padding-left:24px;font-size:15.5px;color:var(--slate);line-height:1.45}
.ticks li::before{
  content:"";position:absolute;left:0;top:9px;width:11px;height:6px;
  border-left:2px solid var(--sky);border-bottom:2px solid var(--sky);
  transform:rotate(-45deg);
}

/* ── floor plan ─────────────────────────────────────────── */
.plan{display:grid;gap:36px}
@media (min-width:920px){.plan{grid-template-columns:1.62fr 1fr;gap:48px;align-items:start}}
.plan__fig{margin:0}
.plan__zoom{
  position:relative;display:block;width:100%;padding:20px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--paper);cursor:zoom-in;
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.plan__zoom:hover{border-color:var(--sky);box-shadow:0 14px 34px -22px rgba(14,23,38,.45)}

.rooms{list-style:none;margin:0;padding:0;display:grid;gap:0}
.room{
  display:flex;align-items:center;gap:15px;padding:11px 12px;margin-left:-12px;
  border-bottom:1px solid var(--line);border-radius:10px;cursor:pointer;
  transition:background .18s var(--ease);
}
.room:last-child{border-bottom:0}
.room.is-on{background:var(--paper)}
.sec--mist .room.is-on{background:var(--paper);box-shadow:0 6px 18px -12px rgba(14,23,38,.35)}
.room__t{
  width:88px;height:66px;flex:none;border-radius:8px;object-fit:cover;background:var(--line);
  transition:transform .22s var(--ease);
}
.room.is-on .room__t{transform:scale(1.04)}
.room__t--none{
  width:88px;height:66px;flex:none;border-radius:8px;
  background:repeating-linear-gradient(-45deg,#E7ECF2 0 5px,#F1F5F9 5px 10px);
}
.room__b{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.room__go{
  flex:none;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--mist);color:var(--slate);
  opacity:0;transform:translateX(-4px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
.room__go .ico{width:15px;height:15px}
.room:hover .room__go,.room.is-on .room__go{opacity:1;transform:none;background:var(--ink);color:#fff}
.room__n{font-size:15.5px;font-weight:600;line-height:1.25}
.room__d{font-family:var(--mono);font-size:13px;color:var(--slate);font-variant-numeric:tabular-nums}

/* ── floor plan hotspots ────────────────────────────────── */
.plan__stage{position:relative}
.plan__zoom{padding:16px}
.hs__layer{position:absolute;inset:16px;pointer-events:none}
.hs{
  position:absolute;transform:translate(-50%,-50%);
  width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;
  pointer-events:auto;display:grid;place-items:center;
}
.hs>span{
  width:11px;height:11px;border-radius:50%;background:var(--sky);
  border:2.5px solid #fff;box-shadow:0 1px 6px rgba(14,23,38,.4);
  transition:transform .2s var(--ease),background .2s var(--ease);
}
.hs:hover>span,.hs.is-on>span{transform:scale(1.5);background:var(--sky-d)}
.hs:focus-visible{outline:2.5px solid var(--sky);outline-offset:0;border-radius:50%}

.hs__peek{
  position:absolute;z-index:6;width:150px;margin:0;pointer-events:none;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:0 14px 34px -10px rgba(14,23,38,.45);
  animation:fade .18s var(--ease);
}
.hs__peek[hidden]{display:none}
.hs__peek img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--mist)}
.hs__peek figcaption{padding:7px 10px 8px;display:flex;flex-direction:column;gap:1px}
.hs__peek b{font-family:var(--body);font-size:12.5px;font-weight:600;letter-spacing:-.01em;text-transform:none;line-height:1.2}
.hs__peek span{font-family:var(--mono);font-size:10.5px;color:var(--slate);text-transform:none;letter-spacing:0}

.plan__cap{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:12px;min-height:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate);
}
.plan__hint{flex:1}
.plan__full{
  border:0;background:none;padding:0;cursor:pointer;color:var(--sky);
  font:inherit;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid rgba(30,99,200,.35);
}
.plan__full:hover{border-bottom-color:var(--sky)}
@media (max-width:620px){
  .room__t,.room__t--none{width:70px;height:53px}
}
/* On touch and narrow screens the plan is too small to hold 11 dots or a
   preview card, and hover does not exist. The photo list below does the job. */
@media (hover:none),(max-width:760px){
  .hs__layer,.hs__peek{display:none}
  .plan__zoom{cursor:pointer}
}

/* ── map ────────────────────────────────────────────────── */
.mapwrap{position:relative;max-width:var(--wrap);margin:8px auto 56px;padding-inline:24px}
#map{height:clamp(460px,68vh,640px);width:100%;z-index:1;background:var(--mist);border-radius:var(--r);border:1px solid var(--line)}
.leaflet-container{font-family:var(--body);border-radius:var(--r)}
.leaflet-control-attribution{font-size:10.5px;background:rgba(255,255,255,.82)!important}

.pin{background:transparent!important;border:0!important}
.pin__d{
  width:19px;height:19px;border-radius:50%;background:var(--sky);
  border:3px solid #fff;box-shadow:0 2px 9px rgba(14,23,38,.36);
  transition:transform .22s var(--ease);cursor:pointer;
}
.pin:hover .pin__d,.pin.is-on .pin__d{transform:scale(1.42)}
.pin--home .pin__d{width:25px;height:25px;background:var(--gold);border-width:4px;box-shadow:0 3px 14px rgba(200,138,46,.6)}
.pin--home::after{
  content:"";position:absolute;inset:-11px;border-radius:50%;
  border:2px solid var(--gold);opacity:.45;animation:ping 2.6s var(--ease) infinite;
}
@keyframes ping{0%{transform:scale(.72);opacity:.6}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}

.mapcard{
  position:absolute;top:20px;left:44px;z-index:500;width:288px;
  background:var(--paper);border-radius:var(--r);overflow:hidden;
  box-shadow:0 20px 48px -16px rgba(14,23,38,.34);border:1px solid var(--line);
  animation:fade .28s var(--ease);pointer-events:none;
}
.mapcard__img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--mist)}
.mapcard__img[hidden]{display:none}
.mapcard__body{padding:13px 15px 15px}
.mapcard__cat{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--sky);font-weight:500}
.mapcard__t{font-family:var(--dsp);font-weight:600;font-size:18px;letter-spacing:-.015em;margin:5px 0 6px;line-height:1.2}
.mapcard__d{font-size:13px;color:var(--slate);line-height:1.45;margin:0 0 9px}
.mapcard__m{margin:0;font-family:var(--mono);font-size:12.5px;color:var(--ink);font-weight:500;display:flex;gap:8px;align-items:center}
.dot{opacity:.35}
.maphint{
  position:absolute;bottom:18px;left:44px;z-index:400;margin:0;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--slate);background:rgba(255,255,255,.9);padding:8px 14px;border-radius:999px;
  border:1px solid var(--line);transition:opacity .3s;
}
.maphint.is-off{opacity:0}
@media (max-width:700px){
  .mapcard{width:auto;left:36px;right:36px;top:12px;display:flex;align-items:stretch}
  .mapcard[hidden]{display:none}
  .mapcard__img{width:104px;aspect-ratio:auto;flex:none}
  .mapcard__body{padding:11px 13px}
  .mapcard__d{display:none}
}

.places{list-style:none;padding:0;margin:0;display:grid;gap:0}
.places__col{display:flex;flex-direction:column}
@media (min-width:760px){.places{grid-template-columns:1fr 1fr;column-gap:52px}}
.places__h{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:22px 0 12px;border-bottom:1.5px solid var(--ink);
}
.places__h>span:first-child{
  font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;
}
.places__n{font-size:12.5px;color:var(--slate)}


.place{
  display:flex;align-items:center;gap:14px;padding:12px 0;
  border-bottom:1px solid var(--line);cursor:pointer;transition:padding-left .22s var(--ease);
}
.place:hover{padding-left:9px}

.place__t{
  width:64px;height:48px;flex:none;border-radius:7px;object-fit:cover;
  background:var(--mist);transition:transform .22s var(--ease);
}
.place:hover .place__t{transform:scale(1.05)}
.place__ic{
  width:64px;height:48px;flex:none;border-radius:7px;background:var(--mist);
  display:grid;place-items:center;color:var(--slate);
}
.place__ic .ico{width:22px;height:22px}
.place__b{flex:1;min-width:0}
.place__n{display:block;font-size:15.5px;font-weight:600;line-height:1.3}
.place__c{display:block;font-size:13px;color:var(--slate);margin-top:1px}
.place__m{font-family:var(--mono);font-size:13px;color:var(--slate);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.place__m b{display:block;color:var(--ink);font-weight:700}

/* ── dials ──────────────────────────────────────────────── */
.dials{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px}
.dial{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px 20px;text-align:center}
.dial__ring{position:relative;width:104px;height:104px;margin:0 auto 15px}
.dial__ring svg{transform:rotate(-90deg);display:block}
.dial__ring circle{fill:none;stroke-width:8;stroke-linecap:round}
.dial__bg{stroke:var(--line)}
.dial__fg{stroke:var(--sky);stroke-dasharray:var(--c);stroke-dashoffset:var(--c);transition:stroke-dashoffset 1.15s var(--ease)}
.dial.is-in .dial__fg{stroke-dashoffset:var(--off)}
.dial__v{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-weight:700;font-size:26px;letter-spacing:-.03em;
}
.dial__n{font-size:15px;font-weight:600;margin:0 0 5px}
.dial__d{font-size:12.5px;color:var(--slate);line-height:1.4;margin:0}

/* ── charts ─────────────────────────────────────────────── */
.charts{display:grid;gap:22px;margin-bottom:64px}
@media (min-width:860px){.charts{grid-template-columns:1fr 1fr}}
.card{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.sec--mist .card{background:var(--paper)}
.sec--mist .hoa{background:var(--paper)}
.card__h{margin-bottom:26px}
.card__s{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--slate);margin:0}
.card__note{font-size:13px;color:var(--slate);line-height:1.5;margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line)}

.bars{display:grid;gap:20px}
.bar__h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.bar__n{font-size:14.5px;font-weight:600}
.bar__v{font-family:var(--mono);font-weight:700;font-size:16px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bar__t{height:11px;border-radius:99px;background:var(--mist);overflow:hidden}
.bar__f{display:block;height:100%;border-radius:99px;width:0;transition:width 1.1s var(--ease)}
.bar--me .bar__f{background:linear-gradient(90deg,var(--sky),#3E86E8)}
.bar--me .bar__v{color:var(--sky)}
.bar--other .bar__f{background:#B8C4D2}
.bar__sub{font-size:12.5px;color:var(--slate);margin:7px 0 0}

.hoa{background:var(--mist);border:1px solid var(--line);border-radius:var(--r);padding:clamp(26px,3.6vw,42px)}
.sec .hoa{background:var(--mist)}
.hoa__intro{margin-bottom:30px;max-width:62ch}
.hoa__list{list-style:none;padding:0;margin:0;display:grid;gap:0}
.hoa__i{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.hoa__i:last-child{border-bottom:0}
.hoa__n{flex:1;font-size:15.5px;font-weight:500}
.hoa__n small{display:block;font-size:12.5px;color:var(--slate);font-weight:400;margin-top:2px}
.hoa__c{font-family:var(--mono);font-size:14px;color:var(--slate);white-space:nowrap;font-variant-numeric:tabular-nums}
.hoa__tot{display:flex;align-items:baseline;gap:16px;padding:20px 0 0;margin-top:8px;border-top:2px solid var(--ink)}
.hoa__tot .hoa__n{font-weight:700;font-size:16.5px}
.hoa__tot .hoa__c{color:var(--ink);font-weight:700;font-size:17px}

/* ── schools ────────────────────────────────────────────── */
.schools{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.school{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.school__b p{margin:0;font-size:13.5px;color:var(--slate)}
.school__b .h3{margin-bottom:4px}
.school__m{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums}

/* ── contact ────────────────────────────────────────────── */
.contact{background:var(--ink);color:#fff;padding:clamp(72px,9vw,124px) 0}
.contact .lede{max-width:56ch}

/* The header's "Schedule a tour" scrolls to the contact section. This is the
   other answer to it: the walkthrough costs the reader nothing and happens
   now. A rule above it keeps it clear of the two contact cards. */
.seenow{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;
  margin-top:44px;padding-top:34px;
  border-top:1px solid rgba(255,255,255,.13);
}
.seenow__q{font-size:17px;color:rgba(255,255,255,.72);margin:0}
.seenow__b{display:inline-flex;align-items:center;gap:10px}
.seenow__b .ico{width:19px;height:19px}
.cards{display:grid;gap:16px;margin-top:48px}
@media (min-width:800px){.cards{grid-template-columns:repeat(2,1fr)}}
.ccard{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r);padding:28px;transition:all .26s var(--ease);
}
.ccard:hover{background:rgba(255,255,255,.09);transform:translateY(-3px)}
.ccard--gold{background:rgba(200,138,46,.14);border-color:rgba(200,138,46,.42)}
.ccard--gold:hover{background:rgba(200,138,46,.2)}
.ccard__role{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.ccard--gold .ccard__role{color:#E7B76A}
.ccard__n{font-family:var(--dsp);font-weight:600;font-size:22px;letter-spacing:-.02em;margin:9px 0 4px;line-height:1.15}
.ccard__todo{font-family:var(--mono);font-size:11px;font-weight:400;color:#E7B76A;letter-spacing:0}
.ccard__o{font-size:13.5px;color:rgba(255,255,255,.6);margin:0 0 18px;line-height:1.4}
.ccard__a{
  font-family:var(--mono);font-size:16px;font-weight:700;color:#fff;text-decoration:none;
  border-bottom:2px solid rgba(255,255,255,.28);padding-bottom:2px;transition:border-color .2s;
}
.ccard__a:hover{border-bottom-color:#fff}
.ccard--gold .ccard__a{color:#F0C685;border-bottom-color:rgba(240,198,133,.4)}
.ccard--gold .ccard__a:hover{border-bottom-color:#F0C685}

/* ── footer ─────────────────────────────────────────────── */
.foot{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  max-width:var(--wrap);margin-inline:auto;padding:26px 24px;
  font-size:12.5px;color:var(--slate);
}
.foot p{margin:0}

/* ── lightbox ───────────────────────────────────────────── */
.lightbox{
  position:fixed;inset:0;z-index:900;background:rgba(6,12,24,.95);
  display:grid;place-items:center;padding:52px 20px 76px;animation:fade .24s var(--ease);
}
.lightbox[hidden]{display:none}
.lb__img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.lb__x{
  position:absolute;top:16px;right:20px;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.11);border:0;color:#fff;font-size:30px;line-height:1;cursor:pointer;
  transition:background .2s;
}
.lb__x:hover{background:rgba(255,255,255,.22)}
.lb__nav{
  position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.11);border:0;color:#fff;font-size:32px;line-height:1;cursor:pointer;
  transition:background .2s;
}
.lb__nav:hover{background:rgba(255,255,255,.22)}
.lb__nav--prev{left:16px}
.lb__nav--next{right:16px}
.lb__cap{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);margin:0;
  color:rgba(255,255,255,.9);font-size:14.5px;text-align:center;max-width:min(90%,620px);
}

/* ── icons ──────────────────────────────────────────────── */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{
  width:21px;height:21px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.ico--lg{width:30px;height:30px;stroke-width:1.5}

.feat{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.feat li{
  display:flex;align-items:center;gap:13px;padding:10px 12px;margin-left:-12px;
  font-size:15.5px;color:var(--ink);line-height:1.4;border-radius:9px;
  transition:background .18s var(--ease);
}
.feat li:hover{background:var(--mist)}
.feat .ico{color:var(--sky)}
.sec--mist .feat li:hover{background:var(--paper)}

.incl{margin-top:44px;padding-top:38px;border-top:1px solid var(--line)}
.incl__list{list-style:none;padding:0;margin:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.incl__list li{
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding:22px 20px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);font-size:15px;font-weight:600;
  transition:border-color .2s var(--ease),transform .2s var(--ease);
}
.incl__list li:hover{border-color:var(--sky);transform:translateY(-2px)}
.incl__list .ico{color:var(--sky)}

/* ── school directions button ───────────────────────────── */
.school__go .ico{width:15px;height:15px;color:var(--sky)}

/* ── hero offer ribbon ──────────────────────────────────── */
.ribbon{
  display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 20px;border-radius:999px;margin:0 0 24px;
  background:rgba(200,138,46,.94);color:#1B1204;text-decoration:none;
  box-shadow:0 8px 26px -10px rgba(0,0,0,.6);
  transition:transform .22s var(--ease),background .22s var(--ease);
}
.ribbon:hover{background:var(--gold);transform:translateY(-2px)}
.ribbon__k{
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;opacity:.78;
}
.ribbon__v{font-size:14.5px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.ribbon__go{font-size:16px;transition:transform .22s var(--ease)}
.ribbon:hover .ribbon__go{transform:translateX(3px)}
@media (max-width:560px){
  .ribbon{gap:3px;flex-direction:column;align-items:flex-start;border-radius:16px}
  .ribbon__go{display:none}
}

/* ── why this one ───────────────────────────────────────── */
.claim{padding:clamp(64px,8vw,104px) 0;border-bottom:1px solid var(--line)}
.claim__big{
  font-family:var(--dsp);font-weight:600;
  font-size:clamp(26px,3.9vw,46px);line-height:1.12;letter-spacing:-.028em;
  margin:0 0 44px;max-width:27ch;text-wrap:balance;
}
.claim__big span{
  color:var(--sky);
  background:linear-gradient(transparent 62%,rgba(30,99,200,.16) 62%);
}
.claim__list{list-style:none;padding:0;margin:0;display:grid;gap:26px}
@media (min-width:720px){.claim__list{grid-template-columns:repeat(2,1fr);gap:28px 48px}}
.claim__list li{display:flex;gap:15px;align-items:flex-start}
.claim__list .ico{width:24px;height:24px;color:var(--sky);margin-top:1px}
.claim__list span{font-size:15.5px;line-height:1.5;color:var(--slate)}
.claim__list b{color:var(--ink);font-weight:600}

/* ── disclosure callout ─────────────────────────────────── */
.disc{
  display:flex;gap:16px;align-items:flex-start;
  margin:34px 0 0;padding:24px 26px;
  background:var(--paper);border:1.5px solid #E4D3B4;border-left-width:4px;
  border-radius:var(--r);
}
.disc__i{width:22px;height:22px;flex:none;margin-top:2px;fill:none;stroke:var(--gold-d);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.disc__t{font-size:15.5px;font-weight:700;margin:0 0 12px;letter-spacing:-.01em;line-height:1.3}
.disc__l{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.disc__l li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.55;color:var(--slate)}
.disc__l li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.disc__l b{color:var(--ink);font-weight:600}
.disc__more{
  display:inline-block;margin-top:16px;font-size:13.5px;font-weight:600;
  color:var(--gold-d);text-decoration:none;border-bottom:1.5px solid rgba(160,109,31,.35);padding-bottom:1px;
}
.disc__more:hover{border-bottom-color:var(--gold-d)}
@media (max-width:560px){.disc{padding:20px;gap:12px}.disc__i{display:none}}

.foot__links{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.foot__links a{color:var(--slate);text-decoration:none;border-bottom:1px solid var(--line)}
.foot__links a:hover{color:var(--sky);border-bottom-color:var(--sky)}

/* ── terms page ─────────────────────────────────────────── */
.legal{max-width:820px;margin-inline:auto;padding:clamp(64px,8vw,104px) 24px}
.legal__h1{font-family:var(--dsp);font-weight:600;font-size:clamp(30px,4.4vw,46px);letter-spacing:-.028em;line-height:1.1;margin:0 0 14px}
.legal__meta{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin:0 0 44px}
.legal h2{
  font-family:var(--dsp);font-weight:600;font-size:20px;letter-spacing:-.015em;
  margin:44px 0 12px;padding-top:22px;border-top:1px solid var(--line);
}
.legal h2:first-of-type{border-top:0;padding-top:0}
.legal h3{font-size:15.5px;font-weight:600;margin:22px 0 8px}
.legal p,.legal li{font-size:15px;line-height:1.65;color:var(--slate)}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 14px;padding-left:20px;display:grid;gap:8px}
.legal strong{color:var(--ink);font-weight:600}
.legal a{color:var(--sky)}
.legal__back{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:36px;
  font-size:14px;font-weight:600;color:var(--slate);text-decoration:none;
}
.legal__back:hover{color:var(--sky)}
.legal__box{background:var(--mist);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin:0 0 30px}
.legal__box p:last-child{margin-bottom:0}
.ccard__a2{
  display:block;margin-top:10px;font-size:13.5px;color:rgba(255,255,255,.72);
  text-decoration:none;border-bottom:1px solid transparent;width:fit-content;
}
.ccard--gold .ccard__a2{color:rgba(240,198,133,.85)}
.ccard__a2:hover{border-bottom-color:currentColor}
.ccard__nmls{
  margin:16px 0 0;padding-top:13px;border-top:1px solid rgba(255,255,255,.12);
  font-family:var(--mono);font-size:10.5px;line-height:1.5;color:rgba(255,255,255,.45);
}

.lightbox[data-mode="plan"] .lb__nav{display:none}
.lightbox[data-mode="plan"] .lb__img{background:#fff;padding:20px}

.mapcard__ico{
  width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.mapcard__ico[hidden]{display:none}
.mapcard__link{
  display:inline-block;margin-top:10px;font-size:12.5px;font-weight:600;color:var(--sky);
  text-decoration:none;pointer-events:auto;
}
.mapcard__link:hover{text-decoration:underline}
.place__url{color:var(--sky);text-decoration:none;font-weight:600;pointer-events:auto}
.place__url:hover{text-decoration:underline}
.pin--far .pin__d{width:15px;height:15px;background:#8494A8;border-width:2.5px}


.mapcard__link[hidden]{display:none}

/* ── fixed assumptions block ────────────────────────────── */
.assume{
  margin:0;display:grid;grid-template-columns:1fr auto;gap:9px 16px;
  padding:16px 18px;background:var(--mist);border-radius:10px;
}
.assume dt{font-size:13px;color:var(--slate);line-height:1.3;display:flex;flex-direction:column;gap:1px}
.assume dd{
  margin:0;font-family:var(--mono);font-weight:700;font-size:13.5px;
  letter-spacing:-.01em;text-align:right;font-variant-numeric:tabular-nums;
}

/* ── lender card with a headshot ────────────────────────── */
.ccard--person{display:flex;align-items:flex-start;gap:20px}
.ccard__pic{
  width:84px;height:84px;flex:none;border-radius:50%;object-fit:cover;
  border:2px solid rgba(240,198,133,.45);background:rgba(255,255,255,.08);
}
.ccard__pic--high{object-position:50% 22%}   /* subject sits high in this crop */
.ccard__body{min-width:0;flex:1}
.ccard--person .ccard__n{margin-top:8px}
@media (max-width:520px){
  .ccard--person{gap:16px}
  .ccard__pic{width:66px;height:66px}
}
.ccard__nmls a{color:rgba(240,198,133,.8);text-decoration:none;border-bottom:1px solid rgba(240,198,133,.3)}
.ccard__nmls a:hover{border-bottom-color:rgba(240,198,133,.9)}

/* ══════════════════════════════════════════════════════════
   PHONE
   Most people will open this from a text message, so the small
   screen gets its own composition rather than a squeezed desktop.
   ══════════════════════════════════════════════════════════ */
@media (max-width:620px){

  /* ── hero: fit one screen, and keep type off the bright sky ── */
  .hero{min-height:100svh}
  .hero__body{padding:0 22px 40px}
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(6,12,24,.62) 0%, rgba(6,12,24,.30) 26%,
      rgba(6,12,24,.72) 62%, rgba(6,12,24,.94) 100%);
  }
  .hero .eyebrow{margin-bottom:14px;font-size:11px}
  .ribbon{margin-bottom:18px;padding:10px 16px}
  .ribbon__v{font-size:13.5px;line-height:1.35}
  .hero__h1{
    font-size:clamp(34px,9.4vw,46px);line-height:1.02;letter-spacing:-.038em;
    margin-bottom:14px;
  }
  /* Let the headline find its own breaks on a phone. Forced to two lines,
     "and the whole horizon." is wider than a 390px screen. */
  .br-hero{display:none}
  .hero__sub{
    font-size:16px;line-height:1.45;margin-bottom:24px;max-width:30ch;
    color:rgba(255,255,255,.9);
  }
  .hero__sub2{display:none}          /* one sentence is enough on a phone */

  /* the sunset and the mountains are on the left of this frame — a centred
     crop on a portrait screen loses both */
  .hero__img{object-position:32% 56%}

  /* 2 x 2 instead of an orphaned "2019" on its own row */
  .hero__stats{
    display:grid;grid-template-columns:1fr 1fr;gap:15px 14px;margin-bottom:26px;
    padding-top:18px;border-top:1px solid rgba(255,255,255,.22);
  }
  .stat__n{font-size:23px}
  .stat__l{font-size:10.5px;letter-spacing:.1em}

  .hero__cta{display:grid;grid-template-columns:1fr;gap:10px}
  .hero__cta .btn{width:100%;padding:16px 24px}

  /* ── facts: two columns so it is not six long rows ── */
  .facts__list{grid-template-columns:1fr 1fr;gap:0 20px}
  .facts__list li{padding:17px 0;gap:10px;align-items:flex-start}
  .facts__list .ico{width:17px;height:17px}
  .facts__k{font-size:12.5px}
  .facts__v{font-size:12px;line-height:1.35}
  .facts__list li:nth-last-child(-n+2){border-bottom:0}

  /* ── a touch tighter vertically, so it reads less endless ── */
  .sec,.offer,.contact,.claim{padding-block:clamp(52px,11vw,72px)}
  .lede{margin-bottom:32px}
  .h2{margin-bottom:16px}

  /* ── filter pills scroll sideways instead of stacking 3 deep ── */
  .chips{
    flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    margin-inline:-22px;padding:2px 22px 6px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none;scroll-snap-align:start}

  /* ── photos deserve more height than a letterbox ── */
  .grid{grid-auto-rows:232px;gap:10px}

  /* ── the offer, where the money is ── */
  .calc__controls,.calc__result{padding:22px}
  .opt{padding:17px}
  .verdict{padding:18px}
  .claim__big{margin-bottom:30px}
  .claim__list{gap:20px}

  /* ── everything else ── */
  .mapwrap{padding-inline:16px}
  #map{height:58svh}
  .mapcard{left:28px;right:28px}
  .maphint{left:28px}
  .specs{gap:30px;margin-top:44px;padding-top:38px}
  .incl__list{grid-template-columns:1fr 1fr;gap:10px}
  .incl__list li{padding:16px 14px;gap:9px;font-size:13.5px}
  .dials{gap:12px}
  .dial{padding:20px 12px}
  .charts{gap:14px}
  .card{padding:22px}
  .school{gap:12px}
  .foot{padding:22px}
}

/* very small phones */
@media (max-width:380px){
  .hero__h1{font-size:33px}
  .facts__list{grid-template-columns:1fr}
  .facts__list li:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .facts__list li:last-child{border-bottom:0}
  .incl__list{grid-template-columns:1fr}
}

/* ── weekends: the drive-time radial ────────────────────── */
.radial{display:grid;gap:34px;align-items:start;margin-top:30px}
@media (min-width:940px){.radial{grid-template-columns:1fr 1fr;gap:44px}}

.radial__chart{position:relative;padding-bottom:66px}
#radialSvg{width:100%;height:auto;display:block;overflow:visible}
#radialSvg .rg{fill:none;stroke:#D8E0E9;stroke-width:1}
#radialSvg .rgl{
  font-family:var(--mono);font-size:10.5px;fill:var(--slate);opacity:.9;
  letter-spacing:.06em;
}
#radialSvg .sp{stroke:#D8E0E9;stroke-width:1;stroke-dasharray:2 6}
#radialSvg .spl{
  font-family:var(--mono);font-size:11px;font-weight:700;fill:var(--slate);
  text-anchor:middle;letter-spacing:.08em;
}
#radialSvg .me{fill:var(--gold);stroke:#fff;stroke-width:3.5}
#radialSvg .rpt{cursor:pointer}
#radialSvg .rpt__hit{fill:transparent}
#radialSvg .rpt__d{
  stroke:#fff;stroke-width:2;
  transition:r .2s var(--ease),opacity .25s var(--ease);
}
#radialSvg .rpt:hover .rpt__d,#radialSvg .rpt.is-on .rpt__d{r:12}
#radialSvg .rpt.is-dim .rpt__d{opacity:.16}
#radialSvg .rpt:focus{outline:none}
#radialSvg .rpt:focus-visible .rpt__d{r:10;stroke:var(--ink);stroke-width:2}

.radial__read{
  margin:0;min-height:60px;position:absolute;inset:auto 0 0;
  display:flex;flex-direction:column;gap:3px;pointer-events:none;
}
.radial__read b{font-size:17px;font-weight:600;letter-spacing:-.015em}
.radial__read em{
  font-family:var(--mono);font-style:normal;font-size:13px;font-weight:700;
  color:var(--sky);
}
.radial__read span{font-size:13.5px;color:var(--slate);line-height:1.45}
.radial__read>span>b+em{margin-left:8px}

.seasons{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.season .ico{width:15px;height:15px;color:var(--cc,var(--slate));stroke-width:1.9}
.season:not(.is-on):hover{border-color:var(--cc,var(--sky));color:var(--ink)}
/* white, not the category colour — several of those are dark enough to
   disappear against the selected pill's near-black background */
.season.is-on .ico{color:#fff}

.radial__story{
  font-size:16px;line-height:1.6;color:var(--slate);margin:0;
  max-width:76ch;min-height:52px;
}

.trips{list-style:none;padding:0;margin:0;max-height:none}
.trip{
  display:flex;align-items:center;gap:13px;padding:11px 10px 11px 0;
  border-bottom:1px solid var(--line);cursor:default;
  transition:background .18s var(--ease),padding-left .18s var(--ease);
}
.trip.is-on{background:var(--paper);padding-left:10px;border-radius:8px}
.trip__c{width:9px;height:9px;border-radius:50%;flex:none}
.trip__b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.trip__n{font-size:15px;font-weight:600;line-height:1.25}
.trip__d{font-size:12.5px;color:var(--slate);line-height:1.35}
.trip__m{
  font-family:var(--mono);font-size:13.5px;font-weight:700;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
@media (max-width:620px){
  .radial{gap:26px}
  .radial__story{min-height:0;font-size:15px}
  .trips{max-height:none}
  .radial__read{min-height:74px}
}

/* ── weekends photo band ────────────────────────────────── */
.playpics{
  list-style:none;padding:0;margin:44px 0 0;
  display:grid;gap:14px;grid-template-columns:repeat(3,1fr);
}
.playpics li{position:relative;border-radius:var(--r);overflow:hidden;background:var(--line);margin:0}
.playpics__wide{grid-column:1 / -1}
.playpics img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.playpics li:hover img{transform:scale(1.04)}
.playpics__wide img{aspect-ratio:2.9/1}
.playpics li:not(.playpics__wide) img{aspect-ratio:4/3}
.playpics figcaption{
  position:absolute;inset:auto 0 0;padding:38px 16px 14px;
  display:flex;flex-direction:column;gap:2px;color:#fff;
  background:linear-gradient(transparent,rgba(6,12,24,.86));
}
.playpics b{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.playpics span{font-family:var(--mono);font-size:11.5px;color:rgba(255,255,255,.82)}
@media (max-width:760px){
  .playpics{grid-template-columns:1fr 1fr;gap:10px;margin-top:32px}
  .playpics__wide img{aspect-ratio:2.2/1}
  .playpics b{font-size:14px}
  .playpics span{font-size:10.5px}
}

/* ── what this page is ──────────────────────────────────── */
.intro{padding:clamp(56px,7.5vw,96px) 0 0}
.intro__lead{
  font-size:clamp(18px,2.1vw,23px);line-height:1.5;letter-spacing:-.012em;
  max-width:46ch;margin:0 0 34px;text-wrap:balance;
}
.intro__nav{display:grid;gap:2px;grid-template-columns:1fr}
@media (min-width:640px){.intro__nav{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.intro__nav{grid-template-columns:repeat(3,1fr)}}
.intro__nav a{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  gap:2px 12px;align-items:center;
  padding:15px 16px;margin-left:-16px;border-radius:11px;text-decoration:none;
  transition:background .18s var(--ease);
}
.intro__nav a:hover{background:var(--mist)}
.intro__nav .ico{grid-row:1 / span 2;width:20px;height:20px;color:var(--sky)}
.intro__nav b{font-size:15px;font-weight:600;line-height:1.2}
.intro__nav span{font-size:12.5px;color:var(--slate);line-height:1.3}

/* ── the ordinary things ────────────────────────────────── */
.daily{margin-top:56px;padding-top:44px;border-top:1px solid var(--line)}
.daily__intro{max-width:60ch;margin-bottom:28px}
.daily__grid{
  list-style:none;padding:0;margin:0;display:grid;gap:2px;
  grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
}
.daily__grid li{display:flex;align-items:flex-start;gap:13px;padding:15px 16px 15px 0}
.daily__grid .ico{width:20px;height:20px;color:var(--sky);margin-top:5px;flex:none}
.daily__b{display:flex;flex-direction:column;gap:1px;min-width:0}
.daily__grid b{
  font-family:var(--mono);font-weight:700;font-size:26px;letter-spacing:-.03em;
  line-height:1;color:var(--ink);
}
.daily__grid span{font-size:14px;font-weight:500;margin-top:5px}
.daily__grid em{font-family:var(--mono);font-style:normal;font-size:11.5px;color:var(--slate)}
@media (max-width:620px){
  .intro__lead{margin-bottom:24px}
  .intro__nav{grid-template-columns:1fr 1fr;gap:0}
  .intro__nav a{padding:13px 10px 13px 0;margin-left:0}
  .intro__nav span{display:none}
  .daily__grid{grid-template-columns:1fr 1fr}
  .daily__grid b{font-size:22px}
}

/* qualifiers that keep lending copy honest without shouting */
.ribbon__fine{
  display:block;font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;opacity:.72;margin-top:2px;
}
.assume__q{
  font-family:var(--body);font-style:normal;font-size:11px;font-weight:400;
  color:var(--slate);opacity:.85;
}

/* ── the pin you just picked ──────────────────────────────
   Rose, because the three pin colours are already spoken for: gold is
   the condo itself, cobalt is a walkable place, grey is a drive. A
   fourth colour is the only way "this is the one you clicked" reads
   unambiguously. */
:root{--lit:#E0356F}
.pin.is-lit .pin__d{
  background:var(--lit);
  border-color:#fff;
  transform:scale(1.55);
  box-shadow:0 3px 16px rgba(224,53,111,.65);
}
.pin.is-lit::after{
  content:"";position:absolute;inset:-13px;border-radius:50%;
  border:2.5px solid var(--lit);
  animation:litPulse 1.5s var(--ease) infinite;
  pointer-events:none;
}
@keyframes litPulse{
  0%   {transform:scale(.6);opacity:.9}
  70%  {transform:scale(1.7);opacity:0}
  100% {opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .pin.is-lit::after{animation:none;opacity:.55}
}

/* ── way into the 360 tour ──────────────────────────────── */
.btn--tour{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:16px;background:var(--ink);
}
.btn--tour:hover{background:#1B2942;box-shadow:0 10px 24px -8px rgba(14,23,38,.5)}
.btn--tour .ico{width:19px;height:19px;color:#fff;stroke-width:1.7}

/* ── weekends: keep the chart in view while the list scrolls ──
   The list runs to sixty-four rows while the chart is a fixed square,
   which left several thousand pixels of empty column beside it. */
@media (min-width:940px){
  .radial__chart{position:sticky;top:24px}
}
.trips{max-height:none}
.trips__more{
  display:block;width:100%;margin-top:14px;
  height:42px;border-radius:999px;border:1.5px solid var(--line);
  background:var(--paper);font:inherit;font-size:13.5px;font-weight:600;
  color:var(--ink);cursor:pointer;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.trips__more:hover{border-color:var(--sky);color:var(--sky)}
.trip.is-folded{display:none}

/* ── gallery: show a first screenful, not all thirty-two ── */
.tile.is-folded{display:none}
.grid__more{
  grid-column:1 / -1;justify-self:center;margin-top:8px;
  height:44px;padding:0 26px;border-radius:999px;
  border:1.5px solid var(--line);background:var(--paper);
  font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.grid__more:hover{border-color:var(--sky);color:var(--sky)}

/* ══════════════════════════════════════════════════════════
   MOBILE NAVIGATION
   The page is a long read on a phone, and the desktop section
   links are hidden below 1000px — which left no way to jump
   anywhere. This is that way.
   ══════════════════════════════════════════════════════════ */
.nav__burger{
  display:none;width:40px;height:40px;padding:0;border:0;border-radius:10px;
  background:none;cursor:pointer;flex-direction:column;gap:5px;
  align-items:center;justify-content:center;
}
.nav__burger span{
  display:block;width:19px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .28s var(--ease),opacity .18s var(--ease);
}
@media (max-width:999px){
  .nav__burger{display:flex}
  .nav__cta{display:none}
}
@media (max-width:380px){
  .nav__street{display:none}
}

/* ── the phone's action bar ──────────────────────────────
   Hiding .nav__cta above also took away the only standing way to act.
   This puts it back along the bottom edge, where a thumb already is:
   the price stays on screen the whole way down, next to the two things
   a buyer does with it. It slides away again over the contact section,
   where the same two buttons are already on the page.            */
.dock{display:none}
@media (max-width:999px){
  .dock{
    position:fixed;left:0;right:0;bottom:0;z-index:150;
    display:flex;align-items:center;gap:10px;
    padding:9px 14px;padding-bottom:calc(9px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.93);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
    box-shadow:0 -10px 30px -18px rgba(14,23,38,.55);
    transform:translateY(105%);transition:transform .38s var(--ease);
  }
  .dock.is-up{transform:none}
  /* just the number: the beds and square feet are in the fact strip a
     screen above, and spelling them out here pushed "Book a showing"
     off the edge of a 390px phone */
  .dock__price{margin-right:auto;font-family:var(--mono);font-weight:700;font-size:16px;letter-spacing:-.01em}
  .dock__b{
    display:inline-flex;align-items:center;gap:7px;
    padding:11px 14px;border-radius:11px;
    border:1.5px solid var(--line);background:var(--paper);
    font-size:14.5px;font-weight:600;text-decoration:none;white-space:nowrap;
  }
  .dock__b .ico{width:16px;height:16px;stroke-width:1.9;color:var(--sky)}
  .dock__b--gold{background:var(--gold);border-color:var(--gold);color:#fff}
  /* clear the bar so the footer's last line is never trapped under it */
  .foot{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media (max-width:349px){
  /* below this even the price has to go so both buttons stay whole */
  .dock__price{display:none}
  .dock__b{flex:1;justify-content:center}
}

.sheet{
  position:fixed;inset:0;z-index:200;
  background:rgba(6,12,24,.55);backdrop-filter:blur(3px);
  animation:fade .22s var(--ease);
}
.sheet[hidden]{display:none}
.sheet__panel{
  position:absolute;inset:0 0 0 auto;width:min(400px,88vw);
  background:var(--paper);display:flex;flex-direction:column;
  box-shadow:-20px 0 60px -20px rgba(6,12,24,.5);
  animation:slideIn .3s var(--ease);
  padding-bottom:env(safe-area-inset-bottom);
}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:none}}
.sheet__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--line);
}
.sheet__addr{font-size:12.5px;color:var(--slate);line-height:1.3}
.sheet__addr b{
  display:block;font-family:var(--mono);font-size:15px;
  color:var(--ink);letter-spacing:.02em;
}
.sheet__x{
  width:40px;height:40px;flex:none;border:0;border-radius:50%;
  background:var(--mist);font-size:26px;line-height:1;color:var(--ink);
  cursor:pointer;transition:background .18s var(--ease);
}
.sheet__x:hover{background:var(--line)}

.sheet__nav{flex:1;overflow-y:auto;padding:6px 0;-webkit-overflow-scrolling:touch}
.sheet__nav a{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  gap:1px 14px;align-items:center;
  padding:13px 18px;text-decoration:none;
  transition:background .16s var(--ease);
}
.sheet__nav a:active{background:var(--mist)}
.sheet__nav .ico{grid-row:1 / span 2;width:21px;height:21px;color:var(--sky)}
.sheet__nav b{font-size:15.5px;font-weight:600;line-height:1.25}
.sheet__nav span{font-size:12.5px;color:var(--slate);line-height:1.3}

.sheet__foot{
  padding:16px 18px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.sheet__foot .btn{width:100%}
.sheet__call{
  font-family:var(--mono);font-size:12.5px;color:var(--slate);text-decoration:none;
}

/* ══════════════════════════════════════════════════════════
   ROOM PREVIEW
   Clicking a room used to leave the page for the full tour.
   This keeps you in the floor plan section: a small live 360
   beside the staged photo, closable, with a way through to the
   full tour if you want it.
   ══════════════════════════════════════════════════════════ */
.peek{
  position:fixed;inset:0;z-index:400;display:grid;place-items:center;
  padding:24px;background:rgba(6,12,24,.72);backdrop-filter:blur(4px);
  animation:fade .2s var(--ease);
}
.peek[hidden]{display:none}
.peek__panel{
  width:min(1040px,100%);max-height:calc(100vh - 48px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper);border-radius:var(--r);
  box-shadow:0 30px 80px -24px rgba(6,12,24,.6);
  animation:peekIn .28s var(--ease);
}
@keyframes peekIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.peek__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:16px 18px;border-bottom:1px solid var(--line);flex:none;
}
.peek__name{font-size:19px;font-weight:600;letter-spacing:-.015em;margin:0}
.peek__dim{font-size:13px;color:var(--slate);margin:2px 0 0}
.peek__x{
  width:38px;height:38px;flex:none;border:0;border-radius:50%;
  background:var(--mist);font-size:25px;line-height:1;color:var(--ink);cursor:pointer;
  transition:background .18s var(--ease);
}
.peek__x:hover{background:var(--line)}

.peek__body{display:grid;gap:10px;padding:14px;flex:1;min-height:0}
@media (min-width:800px){.peek__body{grid-template-columns:1.55fr 1fr}}
.peek__pano{
  position:relative;background:var(--ink);border-radius:10px;overflow:hidden;
  min-height:280px;aspect-ratio:16/10;
}
.peek__loading{
  position:absolute;inset:0;display:grid;place-items:center;margin:0;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.6);
}
.peek__shot{margin:0;position:relative;line-height:0;border-radius:10px;overflow:hidden}
.peek__shot img{width:100%;height:100%;object-fit:cover;display:block}
.peek__shot figcaption{
  position:absolute;inset:auto 0 0;padding:20px 10px 7px;
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.9);background:linear-gradient(transparent,rgba(6,12,24,.72));
}
.peek__foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 18px;border-top:1px solid var(--line);flex:none;
}
.peek__hint{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate);
}
@media (max-width:799px){
  .peek{padding:12px}
  .peek__panel{max-height:calc(100vh - 24px)}
  .peek__body{grid-template-columns:1fr;overflow-y:auto}
  .peek__pano{aspect-ratio:4/3;min-height:0}
  .peek__shot{aspect-ratio:16/10}
  .peek__hint{display:none}
  .peek__foot .btn{width:100%;justify-content:center}
}

/* ══════════════════════════════════════════════════════════
   PRINT
   Buyers print listing pages and carry them into showings, and
   "Save as PDF" is how this link gets forwarded to a spouse. Left
   alone that produces thirty ragged pages with a blank map in the
   middle. This turns it into a fact sheet: the photo, the numbers,
   the plan, the rooms, the schools and who to call.

   The first two rules are load-bearing. Everything that arrives —
   the hero lines, the gallery tiles, every .rise element — starts at
   opacity 0 and is carried in by an animation or a transition. A
   printer runs none of that, so without these the sheet comes out
   with the headline and half the photos as blank space.
   ══════════════════════════════════════════════════════════ */
@media print{
  *{animation:none!important;transition:none!important}
  .rise,.hero__body>*,.tile{opacity:1!important;transform:none!important}
  .tile.is-folded,.trips li[hidden],.places li[hidden]{display:none!important}

  *{box-shadow:none!important;text-shadow:none!important}
  html{scroll-behavior:auto}
  body{
    font-size:10.5pt;line-height:1.45;color:#000;background:#fff;
    overflow-x:visible;
  }
  @page{margin:14mm 12mm}

  /* anything that only exists to be clicked, or cannot render on paper */
  .nav,.sheet,.dock,.skip,.lightbox,.peek,.mapwrap,.radial,.chips,
  .seasons,.intro__nav,.hero__cta,.offer__cta,.btn,.plan__full,.seenow,
  .plan__hint,.hs__layer,.hs__peek,.trips__more,.grid__more,
  .disc__more,.tile__cap,.school__go,input[type=range],
  .playpics{display:none!important}

  /* The payment figures must never print without the rate assumptions
     and the "estimates only, not a quote" note that qualify them —
     both live inside .calc__controls, so only the slider goes. The
     calculator's overflow:hidden clips it at a page break, and its
     two columns have nothing to align across on paper. */
  .calc,.calc__result,.opt,.ab{overflow:visible!important;height:auto;max-height:none}
  .calc{display:block;border-radius:0;border-color:#bbb}
  .calc__controls,.calc__result{padding:10pt 0;border:0}
  .calc__controls{border-bottom:.5pt solid #ddd!important}
  .field__out{font-size:13pt}

  /* the hero becomes a masthead: one photo, the address, the numbers */
  .hero{min-height:0;display:block;page-break-after:avoid}
  .hero__img{position:static;height:78mm;object-position:center 58%}
  .hero__scrim{display:none}
  .hero__body{padding:10px 0 0;color:#000;max-width:none}
  .hero__h1{font-size:20pt;line-height:1.15;margin:6px 0}
  .hero__sub{font-size:10.5pt;color:#000}
  .eyebrow--light,.lede--light,.fine--light,.h2--light{color:#000!important}
  .ribbon{border:1pt solid #000;color:#000;background:none;display:block}

  /* sections stop being full screens and become blocks */
  .sec,.offer,.claim,.intro,.contact{
    padding:14pt 0;background:none!important;color:#000;
    page-break-inside:auto;
  }
  .wrap{max-width:none;padding-inline:0}
  .h2{font-size:14pt;line-height:1.2;margin:0 0 6pt;page-break-after:avoid}
  .h3{font-size:11pt;page-break-after:avoid}
  .eyebrow{font-size:8pt;margin-bottom:6pt;color:#000}
  .lede{font-size:10.5pt;margin-bottom:10pt}
  .fine{font-size:7.5pt;line-height:1.35;color:#333}
  br.br-lg,br.br-hero{display:none}

  /* keep a card, a room, a school from being split across a page.
     break-inside is the one Chrome honours on a grid item; the older
     spelling is there for everything else. */
  .card,.opt,.ab,.school,.ccard,.hoa,.incl,.specs__col,.daily__grid li,
  .facts__list li,.claim__list li,.plan__fig{
    page-break-inside:avoid;break-inside:avoid;
  }
  .card,.opt,.ccard,.hoa,.incl,.room,.school{
    background:none!important;border:.5pt solid #bbb;
  }

  /* the gallery prints as a contact sheet, not one photo per page */
  .grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:44mm;gap:3mm}
  .tile--wide{grid-column:span 1;grid-row:span 1}

  #plan{page-break-before:always}
  .plan__stage{page-break-inside:avoid}
  /* On screen the contact section is white-on-dark, and the two cards
     set their own light colours on top of that. Every one of them has
     to come back to black here, or the agent's name, firm and NMLS
     numbers print as invisible ink on white paper. */
  #contact{page-break-before:always;background:#fff!important}
  #contact *{color:#000!important;border-color:#bbb!important}
  .cards{display:grid;grid-template-columns:1fr 1fr;gap:6mm}
  .ccard{background:none!important}
  .ccard__a,.ccard__a2{font-weight:700}
  .ccard__nmls{font-size:7.5pt;line-height:1.4}

  /* on paper a link is only useful if you can read where it goes */
  .foot{padding:8pt 0;border-top:.5pt solid #bbb;font-size:8pt}
  .foot__links a[href]::after{content:" (3647lehi.com/" attr(href) ")"}
}