/* ==========================================================================
   trantenhomes.com — Zachary Tranten Homes / Keys Gate Realty
   No external fonts, no CDNs, no build step. Brand blue #1783CC is sampled
   from the logo file.

   Layout note: every photograph is 960px wide at source, so nothing is ever
   displayed full-bleed at desktop width — images live in contained panels
   whose rendered width stays under the source width. That is why the hero is
   an editorial split rather than a background image.
   ========================================================================== */

:root{
  --brand:#1783CC;
  --brand-dk:#0E62A0;
  --brand-lt:#5AB0E8;
  --brand-wash:#EDF5FC;

  --ink:#08131F;
  --ink-2:#122334;
  --ink-3:#2A3B4C;

  --paper:#FFFFFF;
  --paper-2:#F6F8FA;
  --paper-3:#EDF1F5;
  --line:#E2E8EF;
  --line-2:#D3DCE5;

  --text:#16232F;
  --muted:#5B6B7A;
  --muted-2:#8695A3;
  --gold:#C08A2E;

  --shadow-sm:0 1px 2px rgba(8,19,31,.04),0 4px 12px rgba(8,19,31,.05);
  --shadow:0 2px 6px rgba(8,19,31,.05),0 18px 40px rgba(8,19,31,.09);
  --shadow-lg:0 4px 12px rgba(8,19,31,.07),0 40px 80px rgba(8,19,31,.16);

  --max:1240px;
  --gut:clamp(20px,4vw,48px);
  --r:14px;
  --r-sm:8px;

  --display:"Futura","Avenir Next","Century Gothic","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

/* height:auto is load-bearing: width/height HTML attributes act as CSS
   presentational hints and will stretch an image without it. */
img{max-width:100%;height:auto;display:block}

a{color:var(--brand);text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;color:var(--ink);margin:0;line-height:1.08;letter-spacing:-.03em}
h1{font-size:clamp(2.4rem,5vw,3.6rem)}
h2{font-size:clamp(1.9rem,4vw,3.1rem);letter-spacing:-.028em}
h3{font-size:1.16rem;letter-spacing:-.01em}
p{margin:0}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.lede{font-size:clamp(1.02rem,1.4vw,1.18rem);color:var(--muted);line-height:1.65}
.skip{position:absolute;left:-9999px;background:#fff;padding:.7rem 1rem;z-index:200}
.skip:focus{left:12px;top:12px}

/* ---------- eyebrow / chip ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand);
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.55}
.eyebrow.plain::before{display:none}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--brand); --fg:#fff; --bd:transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1.05rem 2rem;border-radius:999px;border:1.5px solid var(--bd);
  background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:.97rem;font-weight:600;letter-spacing:.005em;
  cursor:pointer;text-decoration:none;white-space:nowrap;overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{box-shadow:0 10px 26px rgba(23,131,204,.3)}
.btn-primary:hover{background:var(--brand-dk);box-shadow:0 16px 34px rgba(23,131,204,.34)}
.btn-ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line-2)}
.btn-ghost:hover{--bd:var(--ink);background:var(--ink);--fg:#fff}
.btn-on-dark{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.32)}
.btn-on-dark:hover{background:#fff;--fg:var(--ink);--bd:#fff}
.btn .arw{transition:transform .35s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:90;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.site-header.stuck{border-bottom-color:var(--line);box-shadow:0 1px 20px rgba(8,19,31,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:84px;transition:height .3s var(--ease)}
.site-header.stuck .header-inner{height:68px}
.header-logo img{height:40px;width:auto;transition:height .3s var(--ease)}
.site-header.stuck .header-logo img{height:34px}
.header-right{display:flex;align-items:center;gap:1.6rem}
.header-phone{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--display);font-size:1.06rem;font-weight:600;color:var(--ink);letter-spacing:-.01em;
}
.header-phone:hover{color:var(--brand)}
.header-phone svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.header-right .btn{padding:.72rem 1.4rem;font-size:.92rem}

/* ---------- header nav ----------
   The site ran without one for a while and /sold and /rented were reachable
   only from the footer, which is to say not reachable. Those two pages are the
   strongest proof on the site, so they get a permanent link. */
.header-nav{display:flex;align-items:center;gap:.5rem}
/* Each link is a bordered pill rather than bare text. Plain text in a header
   reads as a label, not a target - these ran together as one grey phrase and
   nobody could tell they were four separate links. A boundary around each one
   makes both facts obvious at a glance: clickable, and four of them. */
.header-nav a{
  display:inline-flex;align-items:center;white-space:nowrap;
  padding:.46rem .9rem;border-radius:999px;
  border:1px solid var(--line-2);background:var(--paper);
  font-size:.88rem;font-weight:600;letter-spacing:-.005em;color:var(--text);
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.header-nav a:hover,
.header-nav a:focus-visible{
  background:var(--brand-wash);border-color:var(--brand);color:var(--brand);
  text-decoration:none;
}
/* The page you are on is filled rather than outlined, so the nav also answers
   "where am I" without a second mechanism. */
.header-nav a[aria-current="page"]{
  background:var(--brand-wash);border-color:var(--brand);color:var(--brand-dk);
}

@media (max-width:1040px){
  .header-nav{gap:.4rem}
  .header-nav a{padding:.42rem .75rem;font-size:.84rem}
}

@media (max-width:860px){
  /* Below this the logo, nav, phone and button cannot share one line. The nav
     drops to its own row and scrolls sideways if it has to - a hamburger would
     bury the very links that were already too hard to find. */
  /* padding-block, NOT the padding shorthand. `.wrap` and `.header-inner` are
     the same element, so a shorthand here zeroes the page gutter and the logo
     and nav run into the left edge of the screen. */
  .header-inner,.site-header.stuck .header-inner{height:auto;flex-wrap:wrap;padding-block:.7rem 0}
  .header-nav{
    order:3;width:100%;margin-top:.55rem;padding:.1rem 0 .6rem;
    gap:1.35rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    border-top:1px solid var(--line);padding-top:.6rem;
  }
  .header-nav::-webkit-scrollbar{display:none}
}

@media (max-width:760px){
  .header-logo img,.site-header.stuck .header-logo img{height:30px}
  .header-phone span{display:none}
  .header-right{gap:.8rem}
  .header-right .btn{padding:.62rem 1.1rem;font-size:.88rem}
}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(3rem,6vw,5.5rem) 0 clamp(3rem,5vw,4.5rem);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-30% -10% auto -20%;height:120%;
  background:
    radial-gradient(46% 40% at 12% 8%,rgba(23,131,204,.10),transparent 70%),
    radial-gradient(40% 38% at 92% 30%,rgba(23,131,204,.07),transparent 70%);
  pointer-events:none;
}
.hero-grid{
  position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.hero h1{margin:1.5rem 0 0;max-width:none}  /* the <br> sets the break; a ch cap fights it */
.hero h1 .accent{
  display:inline-block;background:linear-gradient(180deg,var(--brand) 0%,var(--brand-dk) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{margin-top:1.5rem;max-width:46ch}
.hero .btn-row{margin-top:2.2rem}

.hero-trust{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 2rem;
  margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--line);
}
.hero-trust .t{display:flex;flex-direction:column;gap:.1rem}
.hero-trust .t b{font-family:var(--display);font-size:1.28rem;color:var(--ink);font-weight:600;letter-spacing:-.02em;display:flex;align-items:center;gap:.4rem}
.hero-trust .t span{font-size:.78rem;color:var(--muted-2);letter-spacing:.06em;text-transform:uppercase}
.hero-trust .stars{color:var(--gold);font-size:.9rem;letter-spacing:.08em}
.hero-trust .div{width:1px;height:34px;background:var(--line)}
@media (max-width:900px){.hero-trust .div{display:none}}

/* hero image panel — contained so a 960px source never upscales */
.hero-figure{
  position:relative;border-radius:var(--r);overflow:hidden;
  aspect-ratio:5/4;background:var(--paper-3);box-shadow:var(--shadow-lg);
}
.hero-figure img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.2s var(--ease)}
.hero-figure::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(190deg,rgba(8,19,31,0) 55%,rgba(8,19,31,.42) 100%);
}
/* The stage holds the house panel and the cut-out portrait that straddles its
   left edge: right half of him over the photo, left half over the page backdrop.
   It is the positioning context, so the figure keeps its own size and the portrait
   is placed against the stage rather than against the whole hero grid. */
.hero-stage{position:relative}
.hero-cutout{
  position:absolute;z-index:4;pointer-events:none;
  left:-36.5%;bottom:-6%;width:72%;height:auto;
  filter:drop-shadow(-14px 14px 26px rgba(8,19,31,.22));
}
/* The badge moves to the TOP right of the panel. Bottom-right collides with him:
   the cut-out is sized as a percentage of the panel so it shrinks with the layout,
   while the badge is a fixed-width pill pinned to the panel's right edge, so the gap
   between the two closes as the window narrows - they touch at about 1100px and by
   950px his shoulder sits over the "5". The top strip of the panel is clear of him at
   every width, because his head starts below the panel's top edge. */
.hero-stage .hero-badge{left:auto;right:-14px;bottom:auto;top:22px}

/* Between the grid breakpoint and about 1180px there is not room for both the copy
   and a figure that overhangs half-way onto the backdrop: at 980px his arm cut 69px
   into the "Call (305) 905-9938" button. The straddle is a wide-screen treatment, so
   it gives way here and he stands on the panel instead. A readable call-to-action
   beats the composition. */
@media (max-width:1180px) and (min-width:901px){
  .hero-cutout{left:-10%;width:66%}
}

/* Below the grid breakpoint the panel goes full width, so the negative offset that
   puts him half on the backdrop would hang him off the left of the screen. On a
   phone he stands inside the panel and spills past the bottom edge instead - same
   idea, no horizontal scroll. */
@media (max-width:900px){
  .hero-cutout{left:1%;width:54%;bottom:-5%;filter:drop-shadow(-8px 10px 18px rgba(8,19,31,.22))}
}
@media (max-width:420px){
  .hero-cutout{width:58%;bottom:-4%}
}

.hero-badge{
  position:absolute;left:-14px;bottom:26px;z-index:3;
  display:flex;align-items:center;gap:.85rem;
  padding:.9rem 1.25rem;border-radius:999px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.7);
}
.hero-badge .num{font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--ink);letter-spacing:-.03em;line-height:1}
.hero-badge .meta{display:flex;flex-direction:column;gap:.1rem}
.hero-badge .stars{color:var(--gold);font-size:.8rem;letter-spacing:.1em;line-height:1}
.hero-badge .cap{font-size:.72rem;color:var(--muted);letter-spacing:.04em}

@media (max-width:940px){
  .hero-grid{grid-template-columns:1fr;gap:2.4rem}
  .hero h1{max-width:none}
  .hero-figure{aspect-ratio:4/3}
  .hero-badge{left:14px}
}

/* On a phone the hero is content-driven and the three labelled trust items
   stack, which pushes it well past one screen. Compress them into a single
   three-up row instead of hiding them — they are the strongest thing here. */
@media (max-width:620px){
  .hero{padding-top:2.4rem}
  .hero h1{font-size:clamp(2.25rem,10vw,2.8rem)}
  .hero-sub{margin-top:1.15rem}
  .hero .btn-row{margin-top:1.7rem}
  .hero .btn-row .btn{flex:1 1 100%}
  .hero-trust{
    display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;
    margin-top:1.9rem;padding-top:1.3rem;
  }
  .hero-trust .t b{font-size:1rem;gap:.25rem;flex-wrap:wrap}
  .hero-trust .t span{font-size:.64rem;letter-spacing:.04em}
  .hero-trust .stars{font-size:.7rem}
  .hero-trust .div{display:none}
}

/* ---------- marquee ---------- */
.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--paper-2);padding:1.05rem 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;width:max-content;animation:slide 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{
  display:inline-flex;align-items:center;gap:2.2rem;padding-right:2.2rem;
  font-family:var(--display);font-size:.94rem;font-weight:600;letter-spacing:.04em;
  color:var(--muted);white-space:nowrap;
}
.marquee-track span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand);opacity:.5}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{padding:clamp(4rem,8vw,7rem) 0}
.tint{background:var(--paper-2)}
.dark{background:var(--ink);color:rgba(255,255,255,.76)}
.dark h2,.dark h3{color:#fff}
.dark .lede{color:rgba(255,255,255,.68)}
.dark .eyebrow{color:var(--brand-lt)}

.sec-head{max-width:56ch;margin-bottom:clamp(2.4rem,4vw,3.6rem)}
.sec-head h2{margin:1.1rem 0 0}
.sec-head .lede{margin-top:1.1rem}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .eyebrow::before{display:none}

/* ---------- services ---------- */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media (max-width:860px){.services{grid-template-columns:1fr}}
.svc{background:var(--paper);padding:clamp(1.8rem,3vw,2.6rem);transition:background .3s ease}
.svc:hover{background:var(--brand-wash)}
.svc .no{font-family:var(--display);font-size:.8rem;font-weight:600;color:var(--brand);letter-spacing:.12em}
.svc h3{margin:1.5rem 0 .6rem}
.svc p{color:var(--muted);font-size:.98rem}
.svc .go{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:1.4rem;
  font-size:.9rem;font-weight:600;color:var(--ink);
}
.svc .go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;transition:transform .35s var(--ease)}
.svc:hover .go svg{transform:translateX(5px)}
.svc:hover .go{color:var(--brand)}

/* ---------- bento gallery ---------- */
/* Three landscape photographs: one feature at 2/3 width, two stacked beside it.
   Every cell lands near 3:2, so the 4:3 sources crop gently instead of being
   sliced into letterbox bands. */
.bento{
  display:grid;grid-template-columns:2fr 1fr;
  grid-auto-rows:clamp(112px,17vw,244px);gap:clamp(10px,1.2vw,16px);
}
.bento figure{position:relative;margin:0;overflow:hidden;border-radius:var(--r);background:var(--paper-3)}
.bento img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.bento figure:hover img{transform:scale(1.05)}
.b-a{grid-column:1;grid-row:span 2}
.b-c{grid-column:2;grid-row:span 1}
.b-d{grid-column:2;grid-row:span 1}
@media (max-width:820px){
  .bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .b-a,.b-c,.b-d{grid-column:1;grid-row:auto;aspect-ratio:3/2}
}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:880px){.about{grid-template-columns:1fr;gap:2.4rem}}
.about-photo{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg);max-width:400px}
.about-photo img{width:100%}
.about-body h2{margin:1.1rem 0 1.4rem}
.about-body p{color:var(--muted);margin-bottom:1.1rem}
.about-body p strong{color:var(--text);font-weight:600}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:2.2rem}
@media (max-width:620px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--paper);padding:1.3rem 1.1rem}
.tint .stat{background:var(--paper-2)}
.stat b{display:block;font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2rem);color:var(--ink);font-weight:600;letter-spacing:-.03em;line-height:1}
.stat span{display:block;margin-top:.45rem;font-size:.76rem;color:var(--muted-2);letter-spacing:.07em;text-transform:uppercase}
/* A value span inside a stat or trust figure, not a label.
   Stamp-Production rewrites the inner text of whatever carries data-prod, so a tile
   that needs a unit alongside the number has to wrap the number: <b><span
   data-prod="soldToListPct">98.88</span>%</b>. That inner span was being caught by
   the LABEL rules above - block, 0.76rem, uppercase - so the number rendered small
   on its own line and the "%" kept the big display size underneath it. Reset it. */
.stat b span,
.hero-trust .t b span{
  display:inline;font-size:inherit;line-height:inherit;color:inherit;
  letter-spacing:inherit;text-transform:none;margin:0;
}


/* ---------- reviews ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.6vw,1.4rem)}
@media (max-width:880px){.reviews{grid-template-columns:1fr}}
.review{
  position:relative;padding:clamp(1.8rem,2.6vw,2.3rem);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  display:flex;flex-direction:column;
}
.review .q{font-family:var(--display);font-size:2.6rem;line-height:1;color:var(--brand-lt);opacity:.5;margin-bottom:.6rem}
.review blockquote{margin:0 0 1.6rem;font-family:var(--display);font-size:1.1rem;line-height:1.48;color:#fff;letter-spacing:-.012em}
.review cite{margin-top:auto;font-style:normal;display:block;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.12);font-size:.84rem;color:rgba(255,255,255,.58)}
.review cite b{display:block;color:#fff;font-weight:600;margin-bottom:.15rem;font-size:.9rem}
.rating-row{display:flex;align-items:center;justify-content:center;gap:1.1rem;margin-top:1.6rem}
.rating-row .score{font-family:var(--display);font-size:3rem;font-weight:600;color:#fff;letter-spacing:-.04em;line-height:1}
.rating-row .stars{color:var(--gold);font-size:1.05rem;letter-spacing:.12em}
.rating-row .of{font-size:.86rem;color:rgba(255,255,255,.6);text-align:left;line-height:1.35}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:920px){.contact{grid-template-columns:1fr;gap:2.4rem}}
.contact-lines{margin-top:2.2rem}
.cline{display:flex;gap:1.2rem;align-items:flex-start;padding:1.15rem 0;border-bottom:1px solid var(--line)}
.cline:first-child{border-top:1px solid var(--line)}
.cline .k{width:88px;flex:none;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);padding-top:.35rem}
.cline .v{font-family:var(--display);font-size:1.1rem;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.cline .v a{color:var(--ink)}
.cline .v a:hover{color:var(--brand)}
.cline .v small{display:block;font-family:var(--sans);font-size:.85rem;font-weight:400;color:var(--muted);margin-top:.2rem;letter-spacing:0}

.form-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.7rem,3vw,2.6rem);box-shadow:var(--shadow-lg)}
.form-card h3{font-size:1.32rem;margin-bottom:.4rem}
.form-card .sub{color:var(--muted);font-size:.95rem;margin-bottom:1.9rem}

/* floating-label fields */
.fl{position:relative;margin-bottom:1.05rem}
.fl input,.fl select{
  width:100%;font:inherit;font-size:1rem;color:var(--text);
  background:var(--paper-2);border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:1.5rem 1rem .62rem;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.fl label{
  position:absolute;left:1rem;top:1.05rem;font-size:1rem;color:var(--muted);
  pointer-events:none;transform-origin:left top;
  transition:transform .18s var(--ease),color .18s ease;
}
.fl input:focus,.fl select:focus{outline:none;border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(23,131,204,.12)}
.fl input:focus+label,
.fl input:not(:placeholder-shown)+label,
.fl select:focus+label,
.fl select:valid+label{transform:translateY(-.72rem) scale(.74);color:var(--brand)}
.fl select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235B6B7A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.05rem center;background-size:12px;padding-right:2.6rem;
}
.fl select:invalid{color:transparent}
.fl select:focus:invalid{color:var(--text)}

.consent{display:flex;gap:.75rem;align-items:flex-start;margin:1.3rem 0 1.5rem}
.consent input{width:18px;height:18px;margin-top:.2rem;flex:none;accent-color:var(--brand)}
.consent label{font-size:.8rem;color:var(--muted);line-height:1.5}
.form-card .btn{width:100%}
.form-status{display:none;margin-top:1.1rem;padding:1rem 1.15rem;border-radius:var(--r-sm);font-size:.94rem;border:1px solid var(--line);background:var(--paper-2)}
.form-status.show{display:block}
.form-status.ok{border-color:#BCDCC8;background:#F0F9F3;color:#1A5133}
.form-status.err{border-color:#E9C6BD;background:#FCF0ED;color:#8A3520}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fine{font-size:.76rem;color:var(--muted-2);margin-top:1.2rem;line-height:1.55}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.6);padding:clamp(3rem,5vw,4.5rem) 0 2.2rem;font-size:.92rem}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.6rem;padding-bottom:2.6rem;border-bottom:1px solid rgba(255,255,255,.12)}
@media (max-width:800px){.foot-top{grid-template-columns:1fr;gap:2rem}}
.foot-logos{display:flex;flex-direction:column;gap:1.4rem;align-items:flex-start}
.foot-logos img.zt{height:46px;width:auto;filter:brightness(0) invert(1);opacity:.94}
.foot-logos img.kg{height:28px;width:auto;background:#fff;padding:8px 12px;border-radius:4px;box-sizing:content-box}
.site-footer h4{font-family:var(--sans);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4);margin:0 0 1.1rem}
.site-footer a{color:rgba(255,255,255,.84)}
.site-footer a:hover{color:#fff}
.flist{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.legal{padding-top:1.9rem;font-size:.76rem;color:rgba(255,255,255,.38);line-height:1.7}
.legal p{margin:0 0 .85rem}
.legal strong{color:rgba(255,255,255,.56);font-weight:600}
.legal a{color:rgba(255,255,255,.56);text-decoration:underline}
.sms-disclosure{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.09);font-size:.72rem;line-height:1.65;color:rgba(255,255,255,.34)}
.sms-disclosure strong{color:rgba(255,255,255,.5)}

/* ---------- mobile call bar ---------- */
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:95;background:rgba(8,19,31,.97);backdrop-filter:blur(12px);padding:.65rem 14px;gap:.6rem;border-top:1px solid rgba(255,255,255,.12)}
.callbar .btn{flex:1;padding:.85rem .5rem;font-size:.94rem}
@media (max-width:760px){.callbar{display:flex}body{padding-bottom:74px}}

/* ---------- scroll reveal ----------
   FAIL-SAFE BY DEFAULT. Content is visible unless JS has positively opted in by
   putting .anim on <html>, which it only does when IntersectionObserver exists
   and motion is allowed. If the script never runs, fails, or the observer never
   fires, the page still reads — an animation must never be able to hide the
   content it is decorating. */
.reveal{opacity:1;transform:none}
html.anim .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.anim .reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}

/* ---------- doc pages ---------- */
.doc{max-width:760px;margin:0 auto}
.doc h1{font-size:clamp(2rem,4vw,2.9rem);margin-bottom:1.2rem}
.doc h2{font-size:1.26rem;margin:2.6rem 0 .7rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.doc p{margin-bottom:1.1rem;color:var(--muted)}
.doc ul{padding-left:1.2rem;color:var(--muted)}
.doc li{margin:.45rem 0}
.doc .callout{background:var(--brand-wash);border-radius:var(--r);padding:1.3rem 1.5rem;margin:1.8rem 0;color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ==========================================================================
   Guide pages (generated by build/Build-Pages.ps1)
   ========================================================================== */
.section-guide{padding:clamp(2.4rem,5vw,4rem) 0 clamp(3.4rem,6vw,5rem)}
.crumbs{font-size:.82rem;color:var(--muted-2);margin-bottom:1.4rem}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--brand)}
.crumbs span{margin:0 .45rem;opacity:.5}

.doc .updated{font-size:.8rem;color:var(--muted-2);margin:1.4rem 0 2.4rem;padding-bottom:1.4rem;border-bottom:1px solid var(--line)}
.doc h1{margin-bottom:1.2rem}
.doc h2{font-size:1.32rem;margin:2.8rem 0 .9rem;padding-top:0;border-top:0}
.doc h2:first-of-type{margin-top:2rem}
.doc p{margin-bottom:1.15rem;color:var(--muted)}
.doc p strong{color:var(--text);font-weight:600}
.doc .lede{color:var(--muted);font-size:clamp(1.05rem,1.5vw,1.2rem)}

/* Tables scroll rather than push the page wide on a phone. */
.table-wrap{overflow-x:auto;margin:1.6rem 0 2rem;border:1px solid var(--line);border-radius:var(--r)}
.table-wrap table{border-collapse:collapse;width:100%;min-width:420px;font-size:.95rem}
.table-wrap th{
  text-align:left;padding:.9rem 1.1rem;background:var(--paper-2);color:var(--ink);
  font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.table-wrap td{padding:.85rem 1.1rem;border-bottom:1px solid var(--line);color:var(--text)}
.table-wrap tr:last-child td{border-bottom:0}
.table-wrap tbody tr:hover{background:var(--brand-wash)}
.table-wrap td:not(:first-child){font-variant-numeric:tabular-nums;white-space:nowrap}

.guide-cta{
  background:var(--ink);color:rgba(255,255,255,.8);border-radius:var(--r);
  padding:clamp(1.8rem,3.4vw,2.6rem);margin:3rem 0 2.4rem;
}
.guide-cta h2{color:#fff;font-size:1.32rem;margin-bottom:.8rem}
.guide-cta p{color:rgba(255,255,255,.76);margin:0}

.related{list-style:none;margin:0 0 2.4rem;padding:0;display:grid;gap:.7rem}
.related li a{
  display:block;padding:1rem 1.2rem;border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--ink);font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:-.01em;
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.related li a:hover{border-color:var(--brand);background:var(--brand-wash);transform:translateX(3px);text-decoration:none}

.source-note{font-size:.82rem;color:var(--muted-2);line-height:1.6;padding-top:1.5rem;border-top:1px solid var(--line)}

/* guides index */
.guide-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,1.6vw,1.4rem)}
@media (max-width:760px){.guide-grid{grid-template-columns:1fr}}
.guide-card{
  display:flex;flex-direction:column;padding:clamp(1.6rem,2.6vw,2.1rem);
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  color:var(--text);box-shadow:var(--shadow-sm);
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.guide-card:hover{border-color:var(--brand);box-shadow:var(--shadow);transform:translateY(-2px);text-decoration:none}
.guide-card h3{margin-bottom:.6rem;font-size:1.14rem}
.guide-card p{color:var(--muted);font-size:.95rem;margin:0 0 1.3rem}
.guide-card .go{
  margin-top:auto;display:inline-flex;align-items:center;gap:.45rem;
  font-size:.9rem;font-weight:600;color:var(--brand);
}
.guide-card .go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;transition:transform .3s var(--ease)}
.guide-card:hover .go svg{transform:translateX(4px)}

/* ==========================================================================
   Single-property pages (generated by build/Build-Listings.ps1)
   ========================================================================== */
.listing-hero{padding:clamp(1.6rem,3vw,2.6rem) 0 0}
.lbanner{
  display:inline-block;padding:.5rem 1rem;border-radius:999px;margin-bottom:1.2rem;
  font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
.lbanner.pending{background:#FDF2DC;color:#8A6416;border:1px solid #EBD9A8}
.lbanner.sold{background:var(--ink);color:#fff}

.lhead{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:flex-end;justify-content:space-between;margin-bottom:1.6rem}
.lhead h1{font-size:clamp(1.8rem,3.8vw,2.9rem);margin-bottom:.4rem}
.lsub{color:var(--muted);font-size:1rem}
.lprice{font-family:var(--display);font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:600;color:var(--brand);letter-spacing:-.03em;white-space:nowrap}

.lphoto{border-radius:var(--r);overflow:hidden;background:var(--paper-3);box-shadow:var(--shadow);aspect-ratio:3/2}
.lphoto img{width:100%;height:100%;object-fit:cover}

.lstats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin-top:1.4rem;
}
.lstat{background:var(--paper);padding:1.1rem 1rem;text-align:center}
.lstat b{display:block;font-family:var(--display);font-size:1.15rem;color:var(--ink);font-weight:600;letter-spacing:-.02em}
.lstat span{display:block;margin-top:.3rem;font-size:.72rem;color:var(--muted-2);letter-spacing:.07em;text-transform:uppercase}

.listing-body{padding:clamp(2.4rem,5vw,4rem) 0}
.lgrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);gap:clamp(2rem,4vw,3.4rem);align-items:start}
@media (max-width:920px){.lgrid{grid-template-columns:1fr}}
.lside{position:sticky;top:96px}
@media (max-width:920px){.lside{position:static}}

.lfeatures{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:.6rem}
.lfeatures li{position:relative;padding-left:1.8rem;color:var(--muted)}
.lfeatures li::before{
  content:"";position:absolute;left:0;top:.45em;width:.72rem;height:.42rem;
  border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(-45deg);
}

.lgallery{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;margin:1.4rem 0 2.2rem}
@media (max-width:560px){.lgallery{grid-template-columns:1fr}}
.lgallery figure{margin:0;border-radius:var(--r-sm);overflow:hidden;background:var(--paper-3);aspect-ratio:4/3}
.lgallery img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.lgallery figure:hover img{transform:scale(1.04)}

.lagent{display:flex;gap:1rem;align-items:center;margin-top:1.4rem;padding:1.1rem;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.lagent img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:top;flex:none}
.lagent b{display:block;font-family:var(--display);color:var(--ink);font-size:1.02rem}
.lagent span{display:block;font-size:.84rem;color:var(--muted)}
.lagent .lrating{color:var(--gold);font-weight:600;margin-top:.15rem}

/* listings index */
.lcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.6vw,1.4rem)}
@media (max-width:900px){.lcards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.lcards{grid-template-columns:1fr}}
.lcard{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper);
  color:var(--text);box-shadow:var(--shadow-sm);
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.lcard:hover{border-color:var(--brand);box-shadow:var(--shadow);transform:translateY(-2px);text-decoration:none}
.lcard-img{aspect-ratio:3/2;background:var(--paper-3);overflow:hidden}
.lcard-img img{width:100%;height:100%;object-fit:cover}
.lcard-body{padding:1.1rem 1.2rem 1.3rem}
.lcard-body b{display:block;font-family:var(--display);font-size:1.02rem;color:var(--ink);letter-spacing:-.01em}
.lcard-price{display:block;margin-top:.35rem;font-family:var(--display);font-size:1.16rem;font-weight:600;color:var(--brand)}
.lcard-meta{display:block;margin-top:.3rem;font-size:.86rem;color:var(--muted)}

/* ---- closed transactions: /sold and /rented ------------------------------
   Not links. A sold home has nowhere useful to send someone, and a card that
   looks clickable but isn't is worse than one that never invited the click. */
.ccards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.6vw,1.4rem)}
@media (max-width:900px){.ccards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.ccards{grid-template-columns:1fr}}
.ccard{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;display:flex;flex-direction:column
}
.ccard-img{aspect-ratio:3/2;background:var(--paper-3);overflow:hidden}
.ccard-img img{width:100%;height:100%;object-fit:cover}
/* No photo is the correct state for another brokerage's listing, so it has to
   look deliberate rather than broken. */
.ccard-img-blank{display:grid;place-items:center;
  background:linear-gradient(160deg,var(--paper-2) 0%,var(--paper-3) 100%)}
.ccard-img-blank svg{width:46px;height:46px;fill:var(--line);opacity:.85}
.ccard-body{padding:1.1rem 1.2rem 1.3rem;flex:1;display:flex;flex-direction:column}
.ccard-body b{display:block;font-family:var(--display);font-size:1.02rem;color:var(--ink);letter-spacing:-.01em}
.ccard-city{display:block;margin-top:.2rem;font-size:.86rem;color:var(--muted)}
.ccard-price{display:block;margin-top:.5rem;font-family:var(--display);font-size:1.16rem;font-weight:600;color:var(--brand)}
.ccard-meta{display:block;margin-top:.3rem;font-size:.86rem;color:var(--muted)}
.ccard-side{display:block;margin-top:auto;padding-top:.7rem;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--muted)}
.ccard-credit{display:block;margin-top:.25rem;font-size:.78rem;color:var(--muted);opacity:.85}
.ccard-note{display:block;margin-top:.55rem;font-size:.86rem;color:var(--ink-2,var(--ink));font-style:italic}

.closed-cta{
  margin-top:clamp(2.6rem,5vw,4rem);padding:clamp(1.8rem,3.5vw,2.8rem);
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper-2);text-align:center
}
.closed-cta h2{font-family:var(--display);font-size:clamp(1.3rem,2.4vw,1.8rem);margin:0 0 .6rem}
.closed-cta p{margin:0 auto 1.4rem;max-width:52ch;color:var(--muted)}

/* ---- closed transactions as a record, not a photo grid -------------------
   Photos are optional here by design. Old closings and anything another
   brokerage listed will never have one, so the row has to look finished
   without it - the thumbnail is an enhancement, never a hole. */
.crows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.crow{
  display:flex;align-items:center;gap:clamp(.9rem,2vw,1.4rem);
  padding:clamp(1rem,2vw,1.35rem) 0;border-bottom:1px solid var(--line)
}
.crow-thumb{
  flex:0 0 auto;width:112px;aspect-ratio:4/3;border-radius:var(--r-sm,10px);
  overflow:hidden;background:var(--paper-3)
}
.crow-thumb img{width:100%;height:100%;object-fit:cover}
.crow-main{flex:1 1 auto;min-width:0}
.crow-addr{
  margin:0;font-family:var(--display);font-size:clamp(1rem,1.5vw,1.12rem);
  font-weight:600;color:var(--ink);letter-spacing:-.01em
}
.crow-where{margin:.2rem 0 0;font-size:.88rem;color:var(--muted)}
.crow-rep{margin:.35rem 0 0;font-size:.82rem;color:var(--muted);opacity:.9}
.crow-note{margin:.45rem 0 0;font-size:.86rem;color:var(--ink);font-style:italic}
.crow-price{
  flex:0 0 auto;text-align:right;font-family:var(--display);
  font-size:clamp(1.05rem,1.8vw,1.3rem);font-weight:600;color:var(--brand);
  white-space:nowrap
}

@media (max-width:640px){
  /* Price moves under the address rather than fighting it for width. */
  .crow{flex-wrap:wrap;align-items:flex-start}
  .crow-thumb{width:84px}
  .crow-price{order:3;width:100%;text-align:left;margin-top:.5rem;
              font-size:1.15rem}
}

/* ---- reviews from two sources -------------------------------------------
   Six cards now instead of three, so the grid goes to two rows of three and
   each card says where it came from. Without the source label a visitor has
   no way to tell a verified-transaction Zillow review from an open Google
   one, and those are not the same claim. */
.rating-pair{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(1.4rem,4vw,3.4rem);margin-top:1.6rem
}
.rating-pair .rating-row{margin-top:0}
@media (max-width:520px){
  /* Side by side they get too cramped to read at phone width. */
  .rating-pair{flex-direction:column;gap:1.1rem}
}
.review cite .src{
  display:inline-block;margin-top:.55rem;padding:.16rem .5rem;border-radius:999px;
  font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.72)
}
.review cite .src-g{border-color:rgba(255,255,255,.3);color:#fff}

/* FAQ accordion (guide pages + the rent report)
   ---------------------------------------------------------------------------
   Every guide already shipped `<div class="faq"><details><summary>` markup and
   there was NO rule for any of it, so all 13 pages were rendering the browser
   default: a bare triangle, no spacing, no separators. Found 2026-10-04 while
   adding the rent report. One rule set fixes every page at once.

   The marker is replaced with a drawn chevron because the native triangle sits
   on the text baseline and cannot be positioned consistently across browsers. */
.faq{margin:1.6rem 0 2.4rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.05rem 2.4rem 1.05rem 0;position:relative;
  font-weight:600;color:var(--ink);line-height:1.45;
  transition:color .18s var(--ease);
}
/* The FAQ question is an <h3> so it lands in the document outline - the question
   text is the exact query a reader types, which makes it the most extractable
   string on the page. It must not LOOK like a heading: the global h1-h4 rule sets
   the display face, tight line-height and negative tracking, all of which have to
   be undone here. */
.faq summary h3{font:inherit;font-weight:600;letter-spacing:inherit;color:inherit;margin:0;display:inline}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--brand)}
.faq summary:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
.faq summary::after{
  content:"";position:absolute;right:.3rem;top:1.45rem;width:9px;height:9px;
  border-right:2px solid var(--muted-2);border-bottom:2px solid var(--muted-2);
  transform:rotate(45deg);transition:transform .2s var(--ease),border-color .2s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);border-color:var(--brand)}
.faq details[open] summary{color:var(--brand)}
.faq details p{margin:0 0 1.15rem;color:var(--muted);line-height:1.68;max-width:68ch}
@media (prefers-reduced-motion:reduce){
  .faq summary,.faq summary::after{transition:none}
}

/* ---- interactive guide widgets (added 2026-10-05) -------------------------
   Checklists and range checks on guide pages. Styled from the same tokens as
   .table-wrap and .faq so they read as part of the page, not a bolted-on tool. */
.widget{
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2);
  padding:clamp(1.2rem,2.6vw,1.8rem);margin:1.8rem 0 2.2rem;
}
.widget .widget-intro{margin:0 0 1rem;color:var(--muted);font-size:.96rem}
.ck-list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.ck-list li{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.75rem .9rem;transition:border-color .18s var(--ease),background .18s var(--ease);
}
.ck-list li:hover{border-color:var(--line-2)}
.ck-list label{display:flex;align-items:flex-start;gap:.7rem;cursor:pointer;font-weight:500;color:var(--text)}
.ck-list input[type=checkbox]{
  appearance:none;flex:none;width:1.15rem;height:1.15rem;margin-top:.15rem;
  border:2px solid var(--line-2);border-radius:4px;background:var(--paper);
  cursor:pointer;position:relative;transition:all .16s var(--ease);
}
.ck-list input[type=checkbox]:checked{background:var(--brand);border-color:var(--brand)}
.ck-list input[type=checkbox]:checked::after{
  content:"";position:absolute;left:.3rem;top:.07rem;width:.26rem;height:.58rem;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.ck-list input[type=checkbox]:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ck-list li:has(input:checked){background:var(--brand-wash);border-color:var(--brand-lt)}
.ck-list small{display:block;margin:.35rem 0 0 1.85rem;color:var(--muted-2);font-size:.85rem;line-height:1.45}
.ck-verdict,.rc-verdict{
  margin:1.1rem 0 0;padding:.85rem 1rem;border-radius:var(--r-sm);
  font-weight:600;line-height:1.5;border-left:3px solid var(--line-2);
  background:var(--paper);color:var(--muted);min-height:1.2rem;
}
.ck-verdict.n0,.rc-verdict.ok{border-left-color:#2E7D52;background:#F1F8F3;color:#1F5A3A}
.ck-verdict.n1{border-left-color:var(--gold);background:#FBF6EC;color:#7A571A}
.ck-verdict.n2,.rc-verdict.over{border-left-color:#B4432F;background:#FBF1EF;color:#7D2C1E}
.rangecheck label{display:block;font-weight:600;color:var(--ink);margin-bottom:.5rem}
.rangecheck input[type=text]{
  width:100%;max-width:18rem;padding:.75rem .9rem;font-size:1.05rem;
  font-variant-numeric:tabular-nums;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--paper);color:var(--ink);
}
.rangecheck input[type=text]:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.rangecheck small{display:block;margin:.9rem 0 0;color:var(--muted-2);font-size:.85rem;line-height:1.5}
@media (prefers-reduced-motion:reduce){.ck-list li,.ck-list input[type=checkbox]{transition:none}}
/* Lead-magnet promise above the buy/sell forms. Styled as a reward rather than
   a warning - it sits inside the form card, so it must not compete with the
   submit button for attention. */
.bonus-note{
  background:var(--brand-wash);border:1px solid var(--line);border-radius:10px;
  padding:.75rem .9rem;margin:0 0 1.1rem;font-size:.87rem;line-height:1.55;color:var(--ink-3);
}
.bonus-note strong{color:var(--brand-dk)}
/* The resource link revealed after a confirmed submit (see deliver() in site.js). */
.form-deliver{margin:.9rem 0 0}

/* Long button labels on narrow phones.
   ---------------------------------------------------------------------------
   .btn carries white-space:nowrap and 2rem of padding each side, so a label of
   any length simply ran off the screen rather than wrapping. Found 2026-10-05:
   "Get an exact net sheet for my address" measured 334px inside a 375px
   viewport and pushed /miami-dade-seller-closing-costs into 18px of sideways
   scroll on a phone.

   Fixing the one label would have left the trap in place for the next page, so
   the rule changes instead: below 420px a button may wrap and its padding
   tightens. nowrap still applies everywhere else, which is where it was wanted. */
@media (max-width:420px){
  .btn{
    white-space:normal;
    padding-left:1.25rem;
    padding-right:1.25rem;
    max-width:100%;
    text-align:center;
    line-height:1.3;
  }
}