:root{
  --r:#e10600;
  --r2:#8a0a06;
  --bg:#050505;
  --bg2:#0a0a0a;
  --g:#9b9b9b;
  --pad:clamp(20px,5vw,90px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--bg);
  color:#fff;
  font:400 16px/1.6 Inter,system-ui,sans-serif;
  max-width:100%;
  overflow-x:hidden;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:99;
  pointer-events:none;
  opacity:.045;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

button,
input,
select{
  font:inherit;
}

button,
a,
input,
select{
  -webkit-tap-highlight-color:transparent;
}

a{
  color:inherit;
  text-decoration:none;
}

button{
  cursor:pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible{
  outline:2px solid var(--r);
  outline-offset:4px;
}

[hidden]{
  display:none !important;
}


/* =========================================================
   PAGE WRAPPER
   Extra top space keeps calculator below existing header.
========================================================= */

.wtc-page{
  position:relative;
  isolation:isolate;
  width:100%;
  min-height:100vh;
  padding:clamp(120px,14vh,165px) var(--pad) 80px;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(225,6,0,.09),transparent 42%),
    var(--bg);
}

.wtc-page::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:min(900px,90%);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(225,6,0,.6),transparent);
}


/* =========================================================
   INTRO
========================================================= */

.wtc-intro{
  width:100%;
  max-width:900px;
  margin:0 auto 55px;
  text-align:center;
}

.wtc-eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:var(--r);
  font-size:11px;
  font-weight:700;
  letter-spacing:.25em;
  text-transform:uppercase;
}

.wtc-eyebrow-line{
  display:inline-block;
  width:28px;
  height:2px;
  background:var(--r);
}

.wtc-title{
  margin-top:23px;
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:clamp(54px,8vw,104px);
  font-weight:400;
  line-height:.88;
  letter-spacing:.015em;
}

.wtc-title em,
.wtc-bottom-note h2 em{
  color:var(--r);
  font-style:normal;
}

.wtc-intro-text{
  max-width:560px;
  margin:24px auto 0;
  color:var(--g);
  font-size:15px;
  line-height:1.85;
}


/* =========================================================
   MAIN CALCULATOR CARD
========================================================= */

.wtc-calculator{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(145deg,#101010,#080808 75%);
  box-shadow:0 30px 100px rgba(0,0,0,.4);
}

.wtc-calculator-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:30px 35px;
  border-bottom:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.015);
}

.wtc-step-label{
  color:var(--g);
  font-size:10px;
  font-weight:700;
  letter-spacing:.22em;
}

.wtc-calculator-head h2{
  margin-top:6px;
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:clamp(28px,4vw,43px);
  font-weight:400;
  line-height:1;
}

.wtc-calculator-head h2 span{
  color:var(--r);
}

.wtc-live-indicator{
  display:inline-flex;
  align-items:center;
  gap:9px;
  flex-shrink:0;
  padding:9px 12px;
  border:1px solid rgba(225,6,0,.25);
  background:rgba(225,6,0,.06);
  color:#e6e6e6;
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
}

.wtc-live-indicator span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#e10600;
  box-shadow:0 0 12px rgba(225,6,0,.8);
}


/* =========================================================
   TWO COLUMN LAYOUT
========================================================= */

.wtc-layout{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.8fr);
  align-items:stretch;
}

.wtc-options{
  min-width:0;
  padding:35px;
}

.wtc-field{
  min-width:0;
  margin-bottom:34px;
}

.wtc-label{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:15px;
  color:#f2f2f2;
  font-size:11px;
  font-weight:700;
  letter-spacing:.15em;
}

.wtc-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:29px;
  height:29px;
  flex-shrink:0;
  background:rgba(225,6,0,.1);
  border:1px solid rgba(225,6,0,.4);
  color:var(--r);
  font-size:11px;
  letter-spacing:0;
}

.wtc-select-wrap{
  position:relative;
  display:flex;
  align-items:center;
  min-width:0;
  height:57px;
  border:1px solid rgba(255,255,255,.13);
  background:#080808;
  transition:border-color .25s ease,background .25s ease;
}

.wtc-select-wrap:focus-within{
  border-color:var(--r);
  background:#0c0c0c;
}

.wtc-select-wrap > i:first-child{
  position:absolute;
  left:17px;
  color:var(--r);
  font-size:15px;
  pointer-events:none;
}

.wtc-select-wrap select{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  min-width:0;
  height:100%;
  padding:0 45px;
  border:0;
  outline:0;
  background:transparent;
  color:#fff;
  font-size:13px;
  cursor:pointer;
}

.wtc-select-wrap select option{
  background:#101010;
  color:#fff;
}

.wtc-select-arrow{
  position:absolute;
  right:17px;
  color:var(--g);
  font-size:10px;
  pointer-events:none;
}

.wtc-hint{
  margin-top:9px;
  color:#858585;
  font-size:11px;
  line-height:1.6;
}


/* =========================================================
   FILM OPTION CARDS
========================================================= */

.wtc-films{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.wtc-film-card{
  position:relative;
  display:block;
  min-width:0;
  cursor:pointer;
}

.wtc-film-card > input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.wtc-film-inner{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-height:178px;
  padding:16px 12px 13px;
  border:1px solid rgba(255,255,255,.12);
  background:#090909;
  transition:border-color .25s ease,background .25s ease,transform .25s ease;
}

.wtc-film-card:hover .wtc-film-inner{
  border-color:rgba(225,6,0,.55);
  transform:translateY(-2px);
}

.wtc-film-card > input:checked + .wtc-film-inner{
  border-color:var(--r);
  background:linear-gradient(145deg,rgba(225,6,0,.12),#0a0a0a 75%);
  box-shadow:inset 0 0 25px rgba(225,6,0,.035);
}

.wtc-film-card > input:focus-visible + .wtc-film-inner{
  outline:2px solid var(--r);
  outline-offset:3px;
}

.wtc-film-check{
  position:absolute;
  top:10px;
  right:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:19px;
  height:19px;
  border:1px solid rgba(255,255,255,.2);
  color:transparent;
  font-size:9px;
}

.wtc-film-card > input:checked + .wtc-film-inner .wtc-film-check{
  border-color:var(--r);
  background:var(--r);
  color:#fff;
}

.wtc-film-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:37px;
  height:37px;
  margin-bottom:13px;
  border:1px solid rgba(225,6,0,.3);
  background:rgba(225,6,0,.08);
  color:var(--r);
  font-size:15px;
}

.wtc-film-inner strong{
  max-width:100%;
  color:#fff;
  font-size:12px;
  line-height:1.5;
  overflow-wrap:anywhere;
}

.wtc-film-inner small{
  margin-top:5px;
  color:var(--g);
  font-size:10px;
  line-height:1.5;
}

.wtc-film-tag{
  margin-top:auto;
  padding-top:12px;
  color:#888;
  font-size:8px;
  font-weight:700;
  letter-spacing:.1em;
}

.wtc-film-card > input:checked + .wtc-film-inner .wtc-film-tag{
  color:var(--r);
}


/* =========================================================
   OLD TINT REMOVAL
========================================================= */

.wtc-removal{
  border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.018);
}

.wtc-removal-toggle{
  position:relative;
  display:flex;
  align-items:center;
  gap:13px;
  min-height:78px;
  padding:15px;
  cursor:pointer;
}

.wtc-removal-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  flex-shrink:0;
  background:rgba(225,6,0,.09);
  color:var(--r);
  font-size:15px;
}

.wtc-removal-copy{
  display:flex;
  flex:1;
  flex-direction:column;
  min-width:0;
  gap:3px;
}

.wtc-removal-copy strong{
  font-size:12px;
  font-weight:600;
}

.wtc-removal-copy small{
  color:var(--g);
  font-size:11px;
}

.wtc-removal-toggle input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
}

.wtc-switch{
  position:relative;
  width:38px;
  height:22px;
  flex-shrink:0;
  border-radius:30px;
  background:#333;
  transition:background .25s ease;
}

.wtc-switch::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff;
  transition:transform .25s ease;
}

.wtc-removal-toggle input:checked + .wtc-switch{
  background:var(--r);
}

.wtc-removal-toggle input:checked + .wtc-switch::after{
  transform:translateX(16px);
}

.wtc-removal-toggle input:focus-visible + .wtc-switch{
  outline:2px solid var(--r);
  outline-offset:4px;
}

.wtc-removal-quantity{
  padding:16px;
  border-top:1px solid rgba(255,255,255,.09);
}

.wtc-removal-quantity > label{
  display:block;
  margin-bottom:12px;
  color:var(--g);
  font-size:11px;
}

.wtc-quantity-control{
  display:flex;
  align-items:center;
  width:150px;
  height:43px;
  border:1px solid rgba(255,255,255,.15);
}

.wtc-quantity-control button{
  width:43px;
  height:100%;
  flex-shrink:0;
  color:#fff;
  font-size:20px;
  transition:background .2s ease;
}

.wtc-quantity-control button:hover{
  background:var(--r);
}

.wtc-quantity-control output{
  flex:1;
  text-align:center;
  font-size:13px;
  font-weight:700;
}

.wtc-removal-quantity > p{
  margin-top:12px;
  color:var(--g);
  font-size:11px;
}

.wtc-removal-quantity > p strong{
  color:#fff;
}


/* =========================================================
   PRICE SUMMARY
========================================================= */

.wtc-summary{
  position:relative;
  min-width:0;
  padding:30px;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(225,6,0,.12),transparent 50%),
    #070707;
  border-left:1px solid rgba(255,255,255,.1);
}

.wtc-summary-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.wtc-summary-label{
  display:flex;
  align-items:center;
  gap:9px;
  color:#eee;
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
}

.wtc-summary-label i{
  color:var(--r);
  font-size:14px;
}

.wtc-summary-badge{
  padding:5px 8px;
  border:1px solid rgba(225,6,0,.35);
  color:var(--r);
  font-size:8px;
  font-weight:700;
  letter-spacing:.12em;
}

.wtc-price-area{
  padding:36px 0 27px;
}

.wtc-price-caption{
  color:var(--g);
  font-size:10px;
  font-weight:700;
  letter-spacing:.15em;
}

.wtc-price{
  margin-top:12px;
  color:#fff;
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:clamp(35px,4.1vw,54px);
  line-height:1.08;
  white-space:nowrap;
}

.wtc-price span{
  padding:0 4px;
  color:var(--r);
}

.wtc-price-note{
  margin-top:13px;
  color:#929292;
  font-size:11px;
  line-height:1.7;
}

.wtc-summary-divider{
  height:1px;
  background:rgba(255,255,255,.12);
}

.wtc-summary-details{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:9px 0;
}

.wtc-summary-details > div{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:15px;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.065);
}

.wtc-summary-details > div:last-child{
  border-bottom:0;
}

.wtc-summary-details span{
  color:var(--g);
  font-size:11px;
}

.wtc-summary-details strong{
  max-width:60%;
  color:#fff;
  font-size:11px;
  font-weight:600;
  text-align:right;
  overflow-wrap:anywhere;
}

.wtc-total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:18px 0;
  border-top:1px solid rgba(225,6,0,.35);
}

.wtc-total span{
  color:var(--g);
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
}

.wtc-total strong{
  color:var(--r);
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:clamp(22px,2.5vw,30px);
  font-weight:400;
  text-align:right;
  white-space:nowrap;
}

.wtc-quote-button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  width:100%;
  min-height:54px;
  padding:15px 18px;
  background:var(--r);
  color:#fff;
  border:1px solid var(--r);
  font-size:10px;
  font-weight:700;
  letter-spacing:.13em;
  transition:background .3s ease,color .3s ease,box-shadow .3s ease;
}

.wtc-quote-button i{
  font-size:15px;
  transition:transform .3s ease;
}

.wtc-quote-button:hover{
  background:#fff;
  color:#000;
  box-shadow:0 0 30px rgba(225,6,0,.25);
}

.wtc-quote-button:hover i{
  transform:translateX(4px);
}

.wtc-call-link{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:18px;
  color:#d1d1d1;
  font-size:11px;
  transition:color .2s ease;
}

.wtc-call-link i{
  color:var(--r);
}

.wtc-call-link:hover{
  color:var(--r);
}

.wtc-disclaimer{
  margin-top:23px;
  color:#777;
  font-size:10px;
  line-height:1.8;
}


/* =========================================================
   TRUST STRIP
========================================================= */

.wtc-trust{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;
  max-width:1200px;
  margin:25px auto 0;
  border:1px solid rgba(255,255,255,.09);
  background:#080808;
}

.wtc-trust > div{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:70px;
  padding:15px;
  border-right:1px solid rgba(255,255,255,.08);
}

.wtc-trust > div:last-child{
  border-right:0;
}

.wtc-trust i{
  color:var(--r);
  font-size:15px;
}

.wtc-trust span{
  color:#c9c9c9;
  font-size:9px;
  font-weight:600;
  letter-spacing:.1em;
  text-align:center;
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.wtc-bottom-note{
  max-width:750px;
  margin:100px auto 0;
  text-align:center;
}

.wtc-bottom-note h2{
  margin-top:20px;
  font-family:"Bebas Neue",Impact,sans-serif;
  font-size:clamp(48px,7vw,80px);
  font-weight:400;
  line-height:.92;
}

.wtc-bottom-note > p{
  max-width:540px;
  margin:20px auto 25px;
  color:var(--g);
  font-size:14px;
  line-height:1.8;
}

.wtc-bottom-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  min-height:52px;
  padding:15px 23px;
  border:1px solid rgba(255,255,255,.3);
  background:transparent;
  color:#fff;
  font-size:10px;
  font-weight:700;
  letter-spacing:.15em;
  transition:all .3s ease;
}

.wtc-bottom-button i{
  color:var(--r);
  font-size:15px;
}

.wtc-bottom-button:hover{
  border-color:var(--r);
  background:var(--r);
}

.wtc-bottom-button:hover i{
  color:#fff;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1000px){

  .wtc-layout{
    grid-template-columns:minmax(0,1fr) minmax(270px,.8fr);
  }

  .wtc-options{
    padding:27px;
  }

  .wtc-summary{
    padding:25px;
  }

  .wtc-films{
    gap:7px;
  }

  .wtc-film-inner{
    padding:13px 9px;
  }

  .wtc-film-inner strong{
    font-size:11px;
  }

  .wtc-film-inner small{
    font-size:9px;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

  .wtc-page{
    padding:110px 16px 55px;
  }

  .wtc-intro{
    margin-bottom:35px;
  }

  .wtc-title{
    font-size:clamp(52px,12vw,78px);
  }

  .wtc-intro-text{
    max-width:430px;
    margin-top:19px;
    font-size:13px;
  }

  .wtc-calculator-head{
    align-items:flex-start;
    padding:23px 20px;
  }

  .wtc-calculator-head h2{
    font-size:33px;
  }

  .wtc-live-indicator{
    padding:8px;
    font-size:8px;
  }

  .wtc-layout{
    grid-template-columns:minmax(0,1fr);
  }

  .wtc-options{
    padding:24px 20px 28px;
  }

  .wtc-field{
    margin-bottom:28px;
  }

  .wtc-label{
    font-size:10px;
  }

  .wtc-select-wrap{
    height:54px;
  }

  .wtc-select-wrap select{
    padding-left:43px;
    padding-right:37px;
    font-size:12px;
  }

  .wtc-films{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
  }

  .wtc-film-inner{
    min-height:164px;
    padding:12px 9px 11px;
  }

  .wtc-film-icon{
    width:32px;
    height:32px;
    margin-bottom:11px;
    font-size:13px;
  }

  .wtc-film-inner strong{
    font-size:10px;
    line-height:1.4;
  }

  .wtc-film-inner small{
    font-size:9px;
    line-height:1.45;
  }

  .wtc-film-tag{
    font-size:7px;
    letter-spacing:.05em;
  }

  .wtc-summary{
    padding:26px 22px;
    border-top:1px solid rgba(255,255,255,.1);
    border-left:0;
  }

  .wtc-price{
    font-size:clamp(43px,10vw,58px);
  }

  .wtc-price-area{
    padding:28px 0 23px;
  }

  .wtc-summary-details > div{
    padding:13px 0;
  }

  .wtc-total strong{
    font-size:28px;
  }

  .wtc-trust{
    grid-template-columns:1fr;
  }

  .wtc-trust > div{
    justify-content:flex-start;
    min-height:58px;
    padding:15px 22px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  .wtc-trust > div:last-child{
    border-bottom:0;
  }

  .wtc-trust span{
    text-align:left;
  }

  .wtc-bottom-note{
    margin-top:70px;
  }

  .wtc-bottom-note h2{
    font-size:clamp(48px,11vw,70px);
  }

  .wtc-bottom-note > p{
    font-size:13px;
  }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:380px){

  .wtc-page{
    padding-right:12px;
    padding-left:12px;
  }

  .wtc-calculator-head{
    flex-direction:column;
    gap:15px;
  }

  .wtc-options{
    padding:20px 13px;
  }

  .wtc-films{
    gap:5px;
  }

  .wtc-film-inner{
    padding:10px 6px;
    min-height:158px;
  }

  .wtc-film-inner strong{
    font-size:9px;
  }

  .wtc-film-inner small{
    font-size:8px;
  }

  .wtc-film-tag{
    font-size:6px;
  }

  .wtc-summary{
    padding:22px 15px;
  }

  .wtc-price{
    font-size:39px;
  }

  .wtc-total{
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
  }

  .wtc-total strong{
    text-align:left;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    transition:none !important;
    animation:none !important;
  }
}