/* VIP Auto Customs · Quick Quote (quote.html). Page rules on top of css/home.css, which is linked first.
   The estimator's markup and copy are the archived page's (owner-final); this sheet only restyles it in the house world.
   Ground #050505, panel #0B0B0B with grain, text #F2F1ED, labels 58%, hairlines 14%, boxes 42% (inputs need 3:1).
   Newsreader for the display line, the step titles and the total; Geist for everything else; Geist Mono for the step
   counters and the panel's line items. VIP red stays for the italic word and the invalid-field edge; error text uses
   --err, the same red lifted to #F4474F so 13–14px text holds 4.5:1 on the ground (#E3202A measures 4.4:1).
   Nothing is above 68px or 2px radius. html.qq-embed (?embed=1, the home page's pop-up) hides nav, menu, close, footer. */

:root{color-scheme:dark;--err:#F4474F;--est-w:clamp(320px,26vw,400px)}
html.qq-embed{--nav-h:0px}

/* ---------------------------------------------------------------- frame */
.qq .e-nav{background:rgba(5,5,5,.86);-webkit-backdrop-filter:blur(16px) saturate(.9);backdrop-filter:blur(16px) saturate(.9);border-bottom:1px solid var(--hair)}
.qq-wrap{max-width:1440px;margin:0 auto;padding:0 var(--gutter)}
.qq-embed .e-nav,.qq-embed .e-menu,.qq-embed .e-close,.qq-embed .e-foot,.qq-embed .qq-hero__label{display:none!important}

/* ---------------------------------------------------------------- (1) opening band: short */
.qq-hero{padding-top:calc(var(--nav-h) + clamp(64px,10vh,120px));padding-bottom:clamp(48px,7vh,80px)}
.qq-hero__title{margin-top:22px;font:300 clamp(44px,4.6vw,68px)/1.04 var(--serif);font-variation-settings:'opsz' 72;letter-spacing:-.02em;color:var(--text);text-wrap:balance}
.qq-hero__title em{font-style:italic;color:var(--red)}
.qq-hero__side{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px 40px;margin-top:26px}
.qq-hero__line{max-width:52ch;font:300 17px/1.55 var(--sans);color:rgba(242,241,237,.82)}
.qq-hero>*{animation:e-rise 1.1s var(--ease) both}
.qq-hero>:nth-child(2){animation-delay:.08s}
.qq-hero>:nth-child(3){animation-delay:.16s}
.qq-embed .qq-hero{padding-top:clamp(32px,5vh,56px);padding-bottom:clamp(28px,4vh,44px)}
.qq-embed .qq-hero__title{margin-top:0;font-size:clamp(40px,4vw,60px)}

/* no JavaScript: the archived fallback line */
.qq-nojs{display:none}
html:not(.js) .qq-nojs{display:block;padding-bottom:96px}
html:not(.js) .qq-nojs p{max-width:52ch;padding:24px 28px;border:1px solid var(--box);font:300 17px/1.6 var(--sans)}
html:not(.js) .qq-nojs a{color:var(--text)}
html:not(.js) #estimator{display:none}

/* ---------------------------------------------------------------- (2) layout: the estimator + the panel */
.qq-layout{padding-bottom:clamp(80px,12vh,140px)}
.quote-shell{min-width:0;padding-top:clamp(40px,6vh,64px);border-top:1px solid var(--hair)}
@media (min-width:1024px){
  .qq-layout{display:grid;grid-template-columns:minmax(0,1fr) var(--est-w);gap:clamp(48px,6vw,112px);align-items:start}
  .quote-shell{max-width:920px}
}
.qq-demo{margin-bottom:28px;padding:12px 16px;border:1px dashed var(--box);font:400 13px/1.5 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--label)}
.qq-demo[hidden]{display:none}
.qq-brand{font:600 13px/1.4 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--label)}
.qq-h1{margin-top:16px;font:300 clamp(32px,2.8vw,42px)/1.08 var(--serif);font-variation-settings:'opsz' 72;letter-spacing:-.02em}
.qq-intro{margin-top:12px;font:300 16px/1.55 var(--sans);color:rgba(242,241,237,.78)}

/* progress: the archived three steps, as mono counters over hairlines that fill */
.steps{display:flex;gap:12px;margin:32px 0 clamp(32px,5vh,48px)}
.steps[hidden]{display:none}
.steps li{flex:1;position:relative;padding-top:14px;border-top:1px solid var(--hair);font:400 13px/1.4 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--dim)}
.steps li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--text);transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ease)}
.steps li.done{color:var(--label)}
.steps li.done::before{transform:scaleX(1);opacity:.5}
.steps li[aria-current="step"]{color:var(--text)}
.steps li[aria-current="step"]::before{transform:scaleX(1)}

/* steps */
.qq-step[hidden],#quoteForm[hidden]{display:none}
.qq-step{animation:e-rise .8s var(--ease) both}
.qq-step__title{font:300 clamp(34px,3vw,48px)/1.06 var(--serif);font-variation-settings:'opsz' 72;letter-spacing:-.02em;outline:none;scroll-margin-top:calc(var(--nav-h) + 120px)}
.qq-step__line{margin:12px 0 32px;font:300 15px/1.55 var(--sans);color:rgba(242,241,237,.78);max-width:62ch}

/* fields */
.qq-row{display:grid;grid-template-columns:minmax(0,1fr);gap:22px 16px;margin:0 0 22px}
@media (min-width:640px){
  .qq-row--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qq-row--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .qq-field--wide{grid-column:1 / -1}
}
.qq-field{display:flex;flex-direction:column;gap:10px;min-width:0}
.qq-field[hidden],.qq-reveal[hidden],.service-options[hidden]{display:none}
.qq-label{font:600 13px/1.4 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--label)}
.qq-input{width:100%;min-width:0;min-height:52px;margin:0;padding:14px 16px;border:1px solid var(--box);border-radius:2px;background:var(--ground);color:var(--text);
  font:300 16px/1.4 var(--sans);-webkit-appearance:none;appearance:none;transition:border-color .4s var(--ease)}
.qq-input::placeholder{color:var(--label);opacity:1}
.qq-input:hover{border-color:rgba(242,241,237,.72)}
.qq-input:focus-visible{outline:1px solid var(--text);outline-offset:3px;border-color:var(--text)}
.qq-input:disabled{opacity:.5}
select.qq-input{padding-right:44px;cursor:pointer;text-overflow:ellipsis;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 23px) 50%,calc(100% - 18px) 50%;background-size:5px 5px;background-repeat:no-repeat}
select.qq-input option{background:var(--panel);color:var(--text)}
.qq-input[aria-invalid="true"]{border-color:var(--red)}
.qq-text{font:300 15px/1.55 var(--sans);color:rgba(242,241,237,.78);max-width:62ch}
.qq-fine{font:300 13px/1.55 var(--sans);color:var(--dim)}
.qq-fine:empty{display:none}
.qq-note{padding:14px 16px;border-left:1px solid var(--text);background:rgba(242,241,237,.045);font:300 14px/1.55 var(--sans);color:rgba(242,241,237,.86)}
.qq-note strong{font-weight:500;color:var(--text)}

/* the checkbox: a hairline square; ticked, it fills with a ground-coloured inset */
.qq-check{flex:none;width:18px;height:18px;margin:2px 0 0;border:1px solid var(--box);border-radius:0;background:var(--ground);cursor:pointer;
  -webkit-appearance:none;appearance:none;transition:background-color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.qq-check:hover{border-color:var(--text)}
.qq-check:checked{background:var(--text);border-color:var(--text);box-shadow:inset 0 0 0 4px var(--ground)}
.qq-check:focus-visible{outline:1px solid var(--text);outline-offset:3px}
.qq-check:disabled{cursor:not-allowed}
.qq-check[aria-invalid="true"]{border-color:var(--red)}

/* service cards and the existing-tint cards: hairline-boxed choices */
.service-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:30px 0 8px}
@media (min-width:640px){.service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tq-check-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
@media (min-width:640px){.tq-check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tq-card{display:flex;align-items:flex-start;gap:14px;padding:20px 18px;border:1px solid var(--hair);cursor:pointer;transition:border-color .4s var(--ease),background-color .4s var(--ease)}
.tq-card:hover{border-color:var(--box)}
.tq-card:has(.qq-check:checked){border-color:var(--text);background:rgba(242,241,237,.035)}
.tq-card strong{display:block;font:500 15px/1.35 var(--sans);color:var(--text)}
.tq-card strong+span{display:block;margin-top:4px;font:300 13px/1.45 var(--sans);color:var(--dim)}
.service-grid .tq-card{min-height:112px}
.service-grid .tq-card strong{font:300 26px/1.1 var(--serif);font-variation-settings:'opsz' 72;letter-spacing:-.015em}
.service-grid .tq-card strong+span{margin-top:8px}

/* step 2: one hairline box per chosen service */
.service-options{margin:0 0 16px;padding:4px clamp(18px,2.4vw,32px);border:1px solid var(--hair)}
.tq-step{padding:28px 0}
.tq-step+.tq-step{border-top:1px solid var(--hair)}
.qq-sub{margin-bottom:18px;font:500 13px/1.4 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--text)}
.qq-sub+.qq-text{margin:-6px 0 22px}
.tq-divider{margin-top:26px;padding-top:24px;border-top:1px solid var(--hair);display:grid;gap:10px}
.tq-check-rows{display:grid;gap:8px}
.tq-check-rows--grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.tq-check-rows--grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tq-check-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--hair);cursor:pointer;font:300 15px/1.45 var(--sans);color:rgba(242,241,237,.9);
  transition:border-color .4s var(--ease),background-color .4s var(--ease)}
.tq-check-row .qq-check{margin:0}
.tq-check-row:hover{border-color:var(--box)}
.tq-check-row:has(.qq-check:checked){border-color:var(--box);background:rgba(242,241,237,.03)}
.tq-check-row:has(.qq-check:disabled){opacity:.45;cursor:not-allowed}
.qq-field--sub{padding:6px 0 10px 32px}
.qq-reveal{margin-top:22px;display:grid;gap:12px;animation:e-rise .8s var(--ease) both}
#windshieldStatus{margin-top:12px}
.tq-note:empty{display:none}

/* step 3 */
.qq-summary{margin:0 0 32px;padding:18px 20px;border:1px solid var(--hair);white-space:pre-line;font:400 13px/1.7 var(--sans);color:rgba(242,241,237,.82)}
.qq-summary:empty{display:none}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;align-items:flex-start;gap:14px;margin:12px 0 12px;padding:16px 18px;border:1px solid var(--hair);cursor:pointer;font:300 15px/1.6 var(--sans);color:rgba(242,241,237,.9)}
.consent:has(.qq-check:checked){border-color:var(--box)}
.consent+.qq-fine{margin-bottom:10px}
.qq-textbtn{padding:6px 0;border:0;background:none;cursor:pointer;font:600 13px/1.4 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--text);
  background-image:linear-gradient(var(--box),var(--box));background-position:0 100%;background-size:100% 1px;background-repeat:no-repeat;transition:background-size .4s var(--ease)}
.qq-textbtn:hover{background-size:0 1px;background-position:100% 100%}

/* errors: the archived one-box-per-step message, in the lifted red */
.qq-error{margin:20px 0 0;padding:12px 14px;border:1px solid var(--red);font:400 14px/1.5 var(--sans);color:var(--err)}
.qq-error[hidden]{display:none}

/* the button row of each step: Back as a rule link at the left, the next step as a hairline box at the right */
.qq-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:28px;padding-top:24px;border-top:1px solid var(--hair)}
.qq-primary{min-width:220px;padding:20px 28px;cursor:pointer}
.qq-primary:disabled{opacity:.55;cursor:wait}
.qq-secondary{padding:8px 0 6px;border:0;background-color:transparent;cursor:pointer}
.qq-secondary:disabled{opacity:.5}

/* ---------------------------------------------------------------- the panel */
.qq-est{display:none;padding:32px clamp(22px,2vw,32px) 28px;border:1px solid var(--hair)}
@media (min-width:1024px){
  .qq-est{display:block;position:sticky;top:calc(var(--nav-h) + 28px);margin-top:clamp(40px,6vh,64px);max-height:calc(100vh - var(--nav-h) - 56px);overflow-y:auto;scrollbar-width:thin}
}
html.qq-live .qq-est{display:block;margin-top:40px}
.qq-est__total{margin:22px 0 4px;color:var(--text)}
.qq-est__lo{display:block;font:300 clamp(52px,4.4vw,64px)/1 var(--serif);font-variation-settings:'opsz' 72;letter-spacing:-.025em;font-variant-numeric:lining-nums}
.qq-est__hi{display:block;margin-top:10px;font:300 24px/1.25 var(--serif);font-variation-settings:'opsz' 36;color:var(--dim)}
.qq-est__hi:empty{display:none}
.qq-est__total.is-summary .qq-est__lo{font-size:clamp(30px,2.4vw,36px);line-height:1.1}
.qq-est__total.is-summary .qq-est__hi{margin-top:14px;font:300 14px/1.55 var(--sans)}
.qq-est__total.is-empty .qq-est__lo{color:var(--dim)}
.qq-est__total.is-custom .qq-est__lo{font-size:clamp(34px,2.6vw,40px);line-height:1.1}
.qq-est__total.is-done .qq-est__lo{font-size:clamp(36px,2.8vw,44px);line-height:1.1}
.qq-est__lines{margin:26px 0 20px;border-top:1px solid var(--hair)}
.qq-est__lines[hidden]{display:none}
.qq-est__lines li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;font:400 12px/1.5 var(--sans);color:var(--dim)}
.qq-est__lines li span:last-child{flex:none;text-align:right;color:var(--text)}
.qq-est__lines li span:last-child:empty{display:none}
.qq-est__lines li.is-head{padding-top:14px;border-top:1px solid var(--hair);letter-spacing:.02em;text-transform:none;color:var(--text)}
.qq-est__lines li.is-head:first-child{border-top:0}
.qq-est__lines li.is-sub{padding:3px 0 3px 14px}
.qq-est__lines li.is-sub:last-child{padding-bottom:12px}
.qq-est__fine{padding-top:16px;border-top:1px solid var(--hair)}

/* ---------------------------------------------------------------- the result (replaces the form) */
.qq-result{margin-top:clamp(40px,6vh,64px);padding-top:clamp(40px,6vh,64px);border-top:1px solid var(--hair);animation:e-rise 1s var(--ease) both}
.qq-result[hidden]{display:none}
.qq-result__title{font:300 clamp(44px,4.6vw,68px)/1.04 var(--serif);font-variation-settings:'opsz' 72;letter-spacing:-.02em;outline:none;scroll-margin-top:calc(var(--nav-h) + 40px)}
.qq-result__status{margin-top:18px;font:300 17px/1.55 var(--sans);color:rgba(242,241,237,.82)}
.qq-result__price{margin:32px 0 28px;font:300 clamp(40px,4vw,56px)/1.1 var(--serif);font-variation-settings:'opsz' 72;letter-spacing:-.02em}
.qq-summary--result{margin-bottom:24px}
.qq-result__notes{display:grid;gap:10px;margin:0 0 20px}
.qq-result__notes p:not(.qq-note){font:300 14px/1.55 var(--sans);color:rgba(242,241,237,.78)}
.qq-result__call{margin-top:36px}

/* ---------------------------------------------------------------- privacy policy dialog */
.qq-privacy{width:calc(100% - 32px);max-width:640px;max-height:84vh;overflow-y:auto;padding:clamp(24px,4vw,44px);border:1px solid var(--hair);border-radius:0;
  background:var(--panel);color:var(--text);font:300 15px/1.6 var(--sans)}
.qq-privacy[open]{animation:e-rise .6s var(--ease) both}
.qq-privacy::backdrop{background:rgba(5,5,5,.66);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.qq-privacy h2{font:300 30px/1.15 var(--serif);font-variation-settings:'opsz' 72;letter-spacing:-.015em;margin-bottom:18px;outline:none}
.qq-privacy h3{margin:26px 0 8px;font:500 13px/1.4 var(--sans);letter-spacing:.02em;text-transform:none}
.qq-privacy p{color:rgba(242,241,237,.82);margin-bottom:10px}
.qq-privacy strong{font-weight:500;color:var(--text)}
.qq-privacy a{color:var(--text)}
.qq-privacy .e-btn{margin-top:20px;cursor:pointer}

/* ---------------------------------------------------------------- (3) close on this page: the shop's details only */
.qq-close{padding-top:clamp(72px,12vh,140px)}
.qq-close>.e-label{margin-bottom:36px}

@media (max-width:767px){
  .qq-hero{padding-top:calc(var(--nav-h) + 48px)}
  .qq-hero__title{font-size:clamp(40px,11.2vw,52px)}
  .qq-hero__line{font-size:16px}
  .steps{gap:8px}
  .steps li{font-size:10px;letter-spacing:.02em}
  .service-grid .tq-card{min-height:0}
  .service-options{padding:4px 16px}
  .qq-field--sub{padding-left:0}
  .qq-nav{flex-direction:column-reverse;align-items:stretch}
  .qq-nav>span:empty{display:none}
  .qq-primary{width:100%;min-width:0}
  .qq-secondary{align-self:center}
  .qq-close{padding-top:72px}
}

@media (prefers-reduced-motion:reduce){
  .qq-hero>*,.qq-step,.qq-reveal,.qq-result,.qq-privacy[open]{animation:none}
  .qq-input,.qq-check,.tq-card,.tq-check-row,.qq-textbtn,.steps li::before{transition:none}
}
@media print{
  .qq-est{position:static}
  .qq-nav{display:none}
}