:root{
    --asphalt:#1D1D20;
    --asphalt-lo:#141416;
    --stripe:#F2F0E9;
    --orange:#F2700A;
    --yellow:#F4C33A;
    --ada:#1E64B4;
    --fire:#C8392E;
    --concrete:#EDEAE2;
    --concrete-lo:#DFDACF;
    --ink:#141416;
    --ink-soft:#55555C;
    --maxw:720px;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;
    background:var(--concrete);
    color:var(--ink);
    font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
    font-size:21px;
    line-height:1.62;
    font-weight:450;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
  h1,h2,.num{font-family:"Barlow Condensed","Archivo",Impact,sans-serif;font-weight:700;letter-spacing:-.005em}

  /* ---------- header ---------- */
  header{padding:26px 0 2px}
  .head{display:block}
  .logo{width:236px;max-width:66vw;height:auto;display:block;margin:0 auto}
  .tel{
    font-weight:600;font-size:17px;color:var(--ink);text-decoration:none;
    border-bottom:2px solid var(--orange);padding-bottom:2px;white-space:nowrap;
  }
  .tel:hover{color:var(--orange)}

  /* ---------- hero ---------- */
  .hero{padding-top:30px;padding-bottom:40px}
  h1{
    font-size:clamp(37px,7.1vw,58px);
    line-height:1.02;margin:0 0 18px;max-width:none;
  }
  .lede{font-size:23px;line-height:1.45;max-width:40ch;margin:0;color:var(--ink);font-weight:500}

  /* ---------- estimator ---------- */
  .lot{
    background:#FFFFFF;
    color:var(--ink);
    border:2px solid var(--concrete-lo);
    border-radius:4px;
    padding:0 0 28px;
    margin:0 0 44px;
    overflow:hidden;
  }
  .lotHead{
    background:var(--orange);
    color:#231200;
    padding:20px 24px 18px;
    margin-bottom:24px;
  }
  .lotBody{padding:0 24px}
  .lot h2{font-size:31px;margin:0 0 2px;line-height:1.12;color:#231200}
  .hint{margin:0;font-size:18px;color:#5C3200;font-weight:500}

  .diagram{
    width:100%;height:auto;display:block;
    background:var(--asphalt-lo);
    border-radius:2px;
  }

  .opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 4px}
  .opts-sm{grid-template-columns:repeat(3,1fr);gap:10px}
  .opts-sm .opt{text-align:center;padding:16px 6px}
  .opts-sm .opt b{font-size:20px}
  .opt{
    background:#FFFFFF;border:2px solid #CFC9BD;color:var(--ink);
    font-family:inherit;font-size:17px;line-height:1.25;
    padding:16px 12px;border-radius:2px;cursor:pointer;text-align:left;
  }
  .opt b{display:block;font-weight:600;font-size:20px}
  .opt span{color:var(--ink-soft);font-size:17px}
  .opt:hover{border-color:var(--ink-soft)}
  .opt[aria-pressed="true"]{background:var(--asphalt);border-color:var(--asphalt);color:var(--stripe)}
  .opt[aria-pressed="true"] span{color:#B9B9C0}
  .opt:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
  .lot h3{font-family:"Barlow Condensed","Archivo",sans-serif;font-weight:700;
    font-size:24px;margin:26px 0 10px;color:var(--ink)}
  .reset{
    background:none;border:0;color:var(--ink-soft);font-family:inherit;font-size:16px;
    cursor:pointer;padding:6px 2px;text-decoration:underline;text-underline-offset:3px;
  }
  .reset:hover{color:var(--ink)}
  #result{margin-top:26px}
  #result .diagram{margin-bottom:24px}
  #result .btnRow{margin-top:22px}
  .sliderRow{margin:20px 0 4px}
  input[type=range]{
    -webkit-appearance:none;appearance:none;
    width:100%;height:30px;background:transparent;cursor:grab;margin:0;
  }
  input[type=range]:active{cursor:grabbing}
  input[type=range]::-webkit-slider-runnable-track{
    height:6px;background:#3A3A40;border-radius:99px;
  }
  input[type=range]::-moz-range-track{height:6px;background:#3A3A40;border-radius:99px}
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;
    width:32px;height:32px;margin-top:-13px;border-radius:99px;
    background:var(--orange);border:4px solid var(--asphalt);
    box-shadow:0 0 0 2px var(--orange);
  }
  input[type=range]::-moz-range-thumb{
    width:24px;height:24px;border-radius:99px;
    background:var(--orange);border:4px solid var(--asphalt);
    box-shadow:0 0 0 2px var(--orange);
  }
  input[type=range]:focus-visible{outline:none}
  input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--orange),0 0 0 6px rgba(242,112,10,.4)}
  input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px var(--orange),0 0 0 6px rgba(242,112,10,.4)}

  .count{font-size:16px;color:#9A9AA2;margin:0 0 22px}
  .count b{color:var(--stripe);font-weight:600}

  .priceRow{
    display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
    border-top:2px solid var(--concrete-lo);padding-top:20px;
  }
  .num{font-size:64px;line-height:.85;color:var(--orange)}
  .fine{font-size:17px;color:var(--ink-soft);margin:18px 0 0;max-width:50ch;line-height:1.55}
  .fine span{display:block;margin-bottom:3px}

  /* ---------- buttons ---------- */
  .btn{
    display:inline-block;background:var(--orange);color:#161608;
    font-family:"Barlow Condensed","Archivo",sans-serif;font-weight:700;
    font-size:23px;letter-spacing:.01em;
    text-decoration:none;padding:13px 30px 12px;border-radius:2px;border:0;cursor:pointer;
  }
  .btn:hover{background:#FF7E19}
  .btn:focus-visible{outline:3px solid var(--stripe);outline-offset:3px}
  .lot .btn:focus-visible{outline-color:var(--ink)}
  .concrete .btn:focus-visible{outline-color:var(--ink)}
  .btnRow{margin-top:0;display:flex;align-items:center;gap:18px;flex-wrap:wrap}

  .fix{
    font-family:"Barlow Condensed","Archivo",sans-serif;
    font-weight:700;color:var(--orange);
    font-size:clamp(30px,6vw,40px);line-height:1;
    margin:14px 0 0;letter-spacing:-.005em;
  }

  /* ---------- proof ---------- */
  .proof{padding-bottom:44px}
  .proof figure{margin:0}
  .ba{
    display:grid;grid-template-columns:1fr;gap:8px;
    max-width:440px;
  }
  .ba figure{margin:0;min-width:0}
  .ba img{
    width:100%;height:auto;display:block;
    border-radius:3px;background:var(--concrete-lo);
  }
  .ba figcaption{
    margin-top:8px;font-family:"Barlow Condensed","Archivo",sans-serif;
    font-weight:700;font-size:22px;color:var(--ink);
  }
  .baArrow{color:var(--orange);margin:6px auto 8px}
  .baArrow svg{width:24px;height:44px;display:block}

  /* ---------- benefits ---------- */
  .gets{padding-bottom:44px}
  .gets h2{font-size:31px;margin:0 0 20px}
  ul{list-style:none;margin:0;padding:0}
  li{
    position:relative;padding-left:42px;margin-bottom:20px;
    max-width:46ch;line-height:1.45;
  }
  li::before{
    content:"";position:absolute;left:0;top:.6em;
    width:28px;height:6px;background:var(--orange);border-radius:1px;
  }

  /* ---------- close ---------- */
  .close{
    border-top:2px solid var(--concrete-lo);
    padding-top:30px;padding-bottom:46px;
  }
  .close p{font-size:23px;font-weight:500;max-width:44ch;margin:0;line-height:1.5}

  footer{
    background:var(--asphalt);color:#A0A0A8;
    padding:30px 0 34px;font-size:16px;
  }
  .ftel{
    display:inline-block;font-family:"Barlow Condensed","Archivo",sans-serif;
    font-weight:700;font-size:30px;color:var(--stripe);text-decoration:none;
    border-bottom:3px solid var(--orange);padding-bottom:3px;margin-bottom:14px;
  }
  .ftel:hover{color:var(--orange)}
  .fine2{margin-top:8px;color:#7E7E88;font-size:15px}

  @media (max-width:520px){
    .btn{
      display:block;width:100%;text-align:center;
      font-size:clamp(15px,4.7vw,22px);padding:15px 8px 14px;
    }
    .btnRow{flex-direction:column;align-items:flex-start;gap:12px}
    .opts{grid-template-columns:1fr}
    .opts-sm{grid-template-columns:repeat(2,1fr)}
    .num{font-size:52px}
    .lot{padding:0 0 24px}
    .lotHead{padding:18px 16px 16px}
    .lotBody{padding:0 16px}
    .logo{width:172px}
  }
  /* ---------- motion ---------- */
  .js .reveal{opacity:0;transform:translateY(16px)}
  .js .reveal.in{
    opacity:1;transform:none;
    transition:opacity .6s ease-out, transform .6s cubic-bezier(.2,.75,.3,1);
  }

  .js .baArrow svg path{stroke-dasharray:70;stroke-dashoffset:70}
  .js .baArrow.in svg path{stroke-dashoffset:0;transition:stroke-dashoffset .6s ease-out .1s}

  .js #result{animation:resultIn .45s ease-out both}
  @keyframes resultIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  @media (prefers-reduced-motion:reduce){
    *{transition:none!important;animation:none!important}
    .js .reveal{opacity:1!important;transform:none!important}
    .js .baArrow svg path{stroke-dashoffset:0!important}
  }