/* ==========================================================================
   /estimate/ — the premium estimator. Loaded on that page only, after
   style.css, so every token and house rule there applies here: --spring is a
   fill and never text, 4px radius, no overshoot, motion only when allowed.
   ========================================================================== */

.vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ------------------------------------------------------------- section */
.est{ padding-block:var(--sec-y); }
.phead + .est{ padding-top:clamp(2.5rem,5vw,4rem); }
.est__panel[hidden]{ display:none !important; }

/* ------------------------------------------------------------- tabs
   A segmented control: one tray, three tactile keys, the chosen one filled. */
.est__tabs{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.375rem;
  max-width:46rem; margin:0 auto clamp(2.25rem,4.5vw,3.5rem); padding:.375rem;
  background:var(--paper-2); border:1px solid var(--rule); border-radius:var(--r);
}
.est__tab{
  display:flex; align-items:center; justify-content:center; gap:.75rem; min-width:0; min-height:4.25rem;
  padding:.6rem 1rem; border:0; border-radius:3px; background:transparent; cursor:pointer;
  font-size:1.0625rem; font-weight:700; line-height:1.2; letter-spacing:-.015em; color:var(--ink);
}
.est__tab .ico{ width:2.5rem; height:2.5rem; }
.est__tab .ico svg{ width:1.25rem; height:1.25rem; }
.est__tab[aria-selected="true"]{
  background:var(--forest); color:#FFFFFF;
  box-shadow:0 1px 2px rgba(10,27,69,.18), 0 10px 20px -12px rgba(10,27,69,.6);
}
.est__tab:active{ transform:scale(.98); }
/* no script, no switching: the home questions stand alone */

/* ------------------------------------------------------------- layout */
.est__grid{ display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:start; }
.est__form{ min-width:0; }
.est__panel{ display:grid; gap:clamp(2.25rem,4vw,3rem); }

/* ------------------------------------------------------------- groups */
.est__group{ display:flex; flex-wrap:wrap; gap:1.5rem 1.25rem; min-width:0; margin:0; padding:0; border:0; }
.est__legend{
  display:flex; align-items:center; gap:.6rem; width:100%; padding:0; margin-bottom:1.35rem;
  font-size:.8125rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
}
.est__legend::before{ content:''; width:.4rem; height:.4rem; background:var(--spring); border-radius:1px; flex:none; }
.est__legend::after{ content:''; flex:1; height:1px; background:var(--rule); }

/* ------------------------------------------------------------- questions
   Half-width by default; a lone half grows to the full row, so nothing orphans. */
.est__q{ flex:1 1 17rem; min-width:0; margin:0; padding:0; border:0; }
.est__q--seg{ flex-basis:100%; }
.est__ql{ display:block; padding:0; margin-bottom:.6rem; font-size:.9375rem; font-weight:700; line-height:1.4; letter-spacing:-.01em; color:var(--ink); }
.est__hint{ margin-top:.45rem; font-size:.875rem; line-height:1.5; color:var(--ink-2); }

/* segmented radios: one equal column per option, the native radio stays in the
   tab order and the span is the key */
.est__seg{ --n:2; display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); gap:.5rem; }
.est__seg:has(> :nth-child(3)){ --n:3; }
.est__seg:has(> :nth-child(4)){ --n:4; }
.est__opt{ position:relative; display:flex; min-width:0; cursor:pointer; }
.est__opt input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.est__opt span{
  display:flex; align-items:center; justify-content:center; width:100%; min-height:3rem;
  padding:.65rem .9rem; text-align:center; text-wrap:balance;
  background:var(--paper); border:1px solid rgba(0,0,0,.42); border-radius:var(--r);
  font-size:.9375rem; font-weight:600; line-height:1.3; color:var(--ink);
}
.est__opt input:checked + span{ background:var(--mint); border-color:var(--forest); box-shadow:inset 0 0 0 1px var(--forest); color:var(--forest); font-weight:700; }
.est__opt input:focus-visible{ outline:none; }
.est__opt input:focus-visible + span{ outline:2px solid var(--forest); outline-offset:2px; }

/* select: the .f select look, with its label above instead of floating */
.est__q--sel select{
  width:100%; min-height:3.25rem; padding:.75rem 2.6rem .75rem .9rem; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-color:var(--paper); color:var(--ink);
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 1.15rem) 50%,calc(100% - .8rem) 50%;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat;
  border:1px solid rgba(0,0,0,.42); border-radius:var(--r);
  font-size:1rem; font-weight:500; line-height:1.4;
}
.est__q--sel select:focus{ outline:none; border-color:var(--forest); box-shadow:0 0 0 3px rgba(27,73,174,.16); }

/* money: label and figure share a row, the slider runs under both */
.est__q--money{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; column-gap:1rem; }
.est__q--money .est__ql{ margin-bottom:0; }
.est__money{ display:contents; }
.est__mval{ font-size:clamp(1.375rem,2.4vw,1.75rem); font-weight:800; line-height:1.1; letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums; }
.est__q--money .est__hint{ grid-column:1 / -1; margin-top:0; }
.est__money input[type="range"]{
  --t:28px;
  grid-column:1 / -1; width:100%; height:44px; margin:.1rem 0 0; padding:0; cursor:pointer;
  appearance:none; -webkit-appearance:none; background:transparent;
}
.est__money input[type="range"]:focus-visible{ outline:none; }
/* the fill ends under the thumb's centre, which travels half a thumb in from each end */
.est__money input[type="range"]::-webkit-slider-runnable-track{
  height:6px; border-radius:var(--r);
  background:linear-gradient(to right, var(--forest) calc(var(--t) / 2 + var(--fill,0) * (100% - var(--t))), var(--rule) 0);
}
.est__money input[type="range"]::-moz-range-track{ height:6px; border-radius:var(--r); background:var(--rule); }
.est__money input[type="range"]::-moz-range-progress{ height:6px; border-radius:var(--r); background:var(--forest); }
.est__money input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; box-sizing:border-box; width:var(--t); height:var(--t); margin-top:-11px;
  background:#FFFFFF; border:2px solid var(--forest); border-radius:50%;
  box-shadow:0 1px 2px rgba(10,27,69,.2), 0 6px 14px -4px rgba(10,27,69,.35);
}
.est__money input[type="range"]::-moz-range-thumb{
  box-sizing:border-box; width:var(--t); height:var(--t);
  background:#FFFFFF; border:2px solid var(--forest); border-radius:50%;
  box-shadow:0 1px 2px rgba(10,27,69,.2), 0 6px 14px -4px rgba(10,27,69,.35);
}
.est__money input[type="range"]:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 3px #FFFFFF, 0 0 0 5px var(--forest), 0 6px 14px -4px rgba(10,27,69,.35); }
.est__money input[type="range"]:focus-visible::-moz-range-thumb{ box-shadow:0 0 0 3px #FFFFFF, 0 0 0 5px var(--forest), 0 6px 14px -4px rgba(10,27,69,.35); }
.est__money input[type="range"]:active::-webkit-slider-thumb{ transform:scale(1.1); }
.est__money input[type="range"]:active::-moz-range-thumb{ transform:scale(1.1); }

/* toggle: text left, switch right, the whole tile is the hit area */
.est__q--tog{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:1rem;
  min-height:44px; padding:.85rem 1rem; cursor:pointer;
  background:var(--paper); border:1px solid rgba(0,0,0,.42); border-radius:var(--r);
}
.est__q--tog:has(.est__cb:checked){ border-color:var(--forest); }
.est__cb{ position:absolute; width:1px; height:1px; margin:0; opacity:0; }
.est__tt{ grid-row:1; grid-column:1; font-size:.9375rem; font-weight:600; line-height:1.35; color:var(--ink); }
.est__tt .est__hint{ display:block; margin-top:.2rem; font-size:.875rem; font-weight:400; }
/* the house has no pills, so the switch keeps the 4px corner; off is 3.6:1 on paper */
.est__sw{ grid-row:1; grid-column:2; position:relative; width:3rem; height:1.75rem; flex:none; border-radius:var(--r); background:#8A8585; }
.est__sw::after{
  content:''; position:absolute; top:3px; left:3px; width:calc(1.75rem - 6px); height:calc(1.75rem - 6px);
  border-radius:2px; background:#FFFFFF; box-shadow:0 1px 3px rgba(10,27,69,.35);
}
.est__cb:checked + .est__sw{ background:var(--forest); }
.est__cb:checked + .est__sw::after{ transform:translateX(1.25rem); }
.est__cb:focus-visible + .est__sw{ outline:2px solid var(--forest); outline-offset:2px; }

/* ------------------------------------------------------------- result card */
.est__card{
  --cp:clamp(1.35rem,2.6vw,2rem);
  container-type:inline-size; min-width:0; padding:var(--cp);
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--r);
  box-shadow:0 1px 2px rgba(10,27,69,.05), 0 10px 24px -12px rgba(10,27,69,.14), 0 36px 72px -36px rgba(10,27,69,.26);
}
.est__art{
  display:grid; place-items:center; height:clamp(8rem,20vh,11rem);
  margin:calc(-1 * var(--cp)) calc(-1 * var(--cp)) var(--cp); padding:1rem var(--cp);
  background:var(--mint); border-radius:3px 3px 0 0;
}
.est__art [data-art]{ display:none; width:100%; height:100%; }
.est__art [data-art].is-active,
html:not(.js-est) .est__art [data-art="home"]{ display:block; }
/* the build lights the default parts, so the no-script drawing is complete too */
.art__p{ opacity:0; }
.art__p.is-on{ opacity:1; }

.est__k{ font-size:.8125rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
/* sized off the card, not the viewport, so five-figure ranges hold one line */
.est__range{
  display:flex; flex-wrap:wrap; align-items:baseline; margin-top:.4rem;
  font-size:clamp(1.75rem,8vw,3.4rem); font-size:clamp(1.75rem,10cqi,3.4rem); font-weight:800; line-height:1.05; letter-spacing:-.04em;
  color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.est__dash{ margin-inline:.12em; font-weight:500; color:var(--ink-2); }
.est__month{ margin-top:.5rem; font-size:1rem; line-height:1.55; color:var(--ink-2); }

/* the band is the estimate on the line's own scale: placed and sized by transform alone */
.est__meter{ position:relative; height:10px; margin-top:1.25rem; overflow:hidden; background:var(--paper-2); border-radius:var(--r); box-shadow:inset 0 0 0 1px var(--rule); }
.est__band{
  position:absolute; inset:0; background:var(--forest); transform-origin:left center;
  transform:translateX(calc(var(--lo,0) * 100%)) scaleX(max(.02, calc(var(--hi,0) - var(--lo,0))));
}

.est__factors{ margin-top:1.5rem; border-top:1px solid var(--rule); }
.est__factors:empty{ display:none; }
.est__f{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.5rem 0; border-bottom:1px solid var(--rule); font-size:.9375rem; line-height:1.4; color:var(--ink); }
.est__f--none span{ color:var(--ink-2); }
.est__f b{ flex:none; font-weight:700; font-variant-numeric:tabular-nums; }
.est__f--up b{ color:#B42318; }
.est__f--down b{ color:#067647; }

.est__cta{ width:100%; margin-top:1.5rem; white-space:normal; text-align:center; }
.est__fine{ margin-top:1rem; font-size:.8125rem; line-height:1.55; color:var(--ink-2); }

.est__fh{ margin-top:1.5rem; font-size:.8125rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.est__fh + .est__factors{ margin-top:.5rem; }
.est__note{ max-width:48rem; margin-top:clamp(2rem,4vw,3rem); font-size:.875rem; line-height:1.6; color:var(--ink-2); }

/* phones: the card sits under the form, so a pinned strip keeps the price in view while answering */
.est__peek{ display:none; }
@media (max-width:959px){
  .js-est .est__peek{
    position:sticky; top:3.75rem; z-index:90; display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
    margin:0 0 1.25rem; padding:.7rem 1rem; text-decoration:none;
    background:var(--forest-2); color:#FFFFFF; border-radius:var(--r);
    box-shadow:0 1px 2px rgba(10,27,69,.2), 0 12px 24px -14px rgba(10,27,69,.55);
  }
  .est__peek span{ min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:.6875rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
  .est__peek b{ font-size:1.0625rem; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
}

/* no script, no estimate: the card keeps its label and the call-us line */
html:not(.js-est) .est__range,
html:not(.js-est) .est__fh,
html:not(.js-est) [data-est-meter]{ display:none; }

/* ------------------------------------------------------------- lead band
   The form is a paper card on the deep band, so its focus rings go back to
   --forest; the band's white ring would vanish on the card. */
.est-lead .form{ color:var(--ink); }
.est-lead .form :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline-color:var(--forest); }
/* the optional select's empty option repeats its floated label, so it prints blank */
.est-lead .f select:has(option[value=""]:checked){ color:transparent; }
.est-sms{ margin-bottom:1.25rem; font-size:.875rem; line-height:1.5; }
.est-consent{ margin-top:1rem; font-size:.8125rem; line-height:1.55; color:var(--ink-2); }

/* ------------------------------------------------------------- wide */
@media (min-width:960px){
  .est__grid{ grid-template-columns:minmax(0,7fr) minmax(20rem,5fr); }
  /* clears the sticky header; a card taller than the screen scrolls inside itself */
}
/* on phones the header plus the price strip cover ~110px, and the call bar covers the bottom */
@media (max-width:959px){ html.js-est{ scroll-padding-top:7.5rem; } }
@media (max-width:620px){ html.js-est{ scroll-padding-bottom:calc(4rem + env(safe-area-inset-bottom)); } }
/* keeps the price above the fold on a 1280x800 laptop */
.phead:has(+ .est){ padding-block:clamp(2rem,4vw,3rem); }
@media (min-width:960px){ .est__art{ height:clamp(6rem,14vh,8rem); } }

/* sticky only where the whole card fits on screen, so its button is never cut off */
@media (min-width:960px) and (min-height:860px){
  .est__card{ position:sticky; top:6.5rem; }
}

/* ------------------------------------------------------------- narrow */
@media (max-width:560px){
  .est__tabs{ gap:.25rem; padding:.25rem; }
  .est__tab{ flex-direction:column; gap:.4rem; min-height:5.25rem; padding:.6rem .25rem; font-size:.875rem; }
  .est__tab .ico{ width:2.25rem; height:2.25rem; }
  .est__seg:has(> :nth-child(4)){ --n:2; }
  .est__opt span{ padding-inline:.5rem; font-size:.875rem; -webkit-hyphens:auto; hyphens:auto; overflow-wrap:break-word; }
}

/* ------------------------------------------------------------- hover */
@media (hover:hover){
  .est__tab[aria-selected="false"]:hover{ background:var(--paper); }
  .est__opt:hover input:not(:checked) + span{ border-color:var(--forest); }
  .est__q--sel select:hover{ border-color:rgba(0,0,0,.4); }
  .est__q--tog:hover{ background:var(--paper-2); }
}

/* ------------------------------------------------------------- motion */
@media (prefers-reduced-motion: no-preference){
  .est__tab{ transition:background-color .2s var(--sta), color .2s var(--sta), box-shadow .2s var(--sta), transform .12s var(--sta); }
  .est__opt span,.est__q--sel select,.est__q--tog{ transition:background-color .18s var(--sta), border-color .18s var(--sta), box-shadow .18s var(--sta), color .18s var(--sta); }
  .est__money input[type="range"]::-webkit-slider-thumb{ transition:transform .16s var(--in), box-shadow .16s var(--sta); }
  .est__money input[type="range"]::-moz-range-thumb{ transition:transform .16s var(--in), box-shadow .16s var(--sta); }
  .est__sw{ transition:background-color .24s var(--sta); }
  .est__sw::after{ transition:transform .26s var(--in); }
  .est__band{ transition:transform .3s var(--in); }
  .art__p{ transition:opacity .3s var(--in); }
  .js-est .est__panel:not([hidden]),
  .est__art [data-art].is-active{ animation:estIn .28s var(--in) both; }
}
@keyframes estIn{ from{ opacity:0; transform:translateY(6px); } }