/* ============================================================
   CARBON BLAST AUTO — page components v3 (high-end polish)
   ============================================================ */

/* ---------- premium strip ---------- */
.strip{ background:var(--blue); padding:13px 44px; display:flex; align-items:center; justify-content:center; gap:38px; flex-wrap:wrap; }
.strip-item{ font-family:var(--cond); font-weight:700; font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:#04121c; display:flex; align-items:center; gap:9px; }
.strip-sep{ color:rgba(0,0,0,.28); font-size:15px; }
.strip.gold{ background:var(--gold); }
.strip.gold .strip-item{ color:#1b1203; }
.strip.red{ background:var(--red-acc); }
.strip.red .strip-item{ color:#fff; }
.strip.red .strip-sep{ color:rgba(255,255,255,.4); }

/* ---------- steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); }
.step{ background:var(--dark); padding:40px 32px 36px; position:relative; transition:background .3s; }
.step:hover{ background:var(--panel); }
.step::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.step:hover::before{ transform:scaleX(1); }
.step-num{ font-family:var(--display); font-size:58px; line-height:1; margin-bottom:18px; color:var(--blue); }
@supports (-webkit-text-stroke:1px #000){
  .step-num{ color:transparent; -webkit-text-stroke:1px var(--blue); }
  .step.gold .step-num{ -webkit-text-stroke:1px var(--gold); }
}
.step.gold .step-num{ color:var(--gold); }
.step.gold::before{ background:var(--gold); }
.step.red::before{ background:var(--red-acc); }
.step.red .step-num{ color:var(--red-acc); }
@supports (-webkit-text-stroke:1px #000){
  .step.red .step-num{ color:transparent; -webkit-text-stroke:1px var(--red-acc); }
}
.step.violet::before{ background:var(--violet); }
.step.violet .step-num{ color:var(--violet); }
@supports (-webkit-text-stroke:1px #000){
  .step.violet .step-num{ color:transparent; -webkit-text-stroke:1px var(--violet); }
}
.step-title{ font-family:var(--cond); font-weight:700; font-size:17.5px; letter-spacing:.09em; text-transform:uppercase; margin-bottom:10px; }
.step-desc{ font-size:14.5px; color:var(--muted); line-height:1.65; }

/* ---------- includes ---------- */
.includes-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.includes-media{ position:relative; aspect-ratio:1; }
.includes-media image-slot, .includes-media .ph{ position:absolute; inset:0; width:100%; height:100%; }
.includes-media .tag{ position:absolute; top:18px; left:18px; z-index:3; background:var(--blue); color:#04121c; font-family:var(--cond); font-weight:800; font-size:11px; letter-spacing:.26em; padding:6px 15px; text-transform:uppercase; }
.includes-list{ list-style:none; display:flex; flex-direction:column; }
.includes-list li{ display:flex; gap:18px; align-items:flex-start; padding:21px 0; border-bottom:1px solid var(--border); }
.includes-list li:last-child{ border-bottom:none; }
.inc-icon{ width:40px; height:40px; background:var(--blue-dim); border:1px solid var(--blue-border); display:grid; place-items:center; flex-shrink:0; }
.inc-icon svg{ width:16px; height:16px; fill:var(--blue); }
.inc-title{ font-family:var(--cond); font-weight:700; font-size:17px; letter-spacing:.07em; text-transform:uppercase; margin-bottom:4px; }
.inc-desc{ font-size:14.5px; color:var(--muted); line-height:1.6; }

/* ---------- gallery ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.gallery-item{ position:relative; aspect-ratio:1; overflow:hidden; }
.gallery-item image-slot, .gallery-item .ph{ position:absolute; inset:0; width:100%; height:100%; border:0; transition:transform .7s var(--ease); }
.gallery-item:hover image-slot{ transform:scale(1.035); }
.g-tag{ position:absolute; bottom:14px; left:14px; z-index:3; font-family:var(--cond); font-weight:700; font-size:11px; letter-spacing:.22em; text-transform:uppercase; padding:5px 13px; }
.g-tag.before{ background:rgba(7,9,12,.82); color:rgba(244,247,250,.85); border:1px solid var(--border-2); backdrop-filter:blur(6px); }
.g-tag.after{ background:var(--blue); color:#04121c; }

/* ---------- who it's for ---------- */
.for-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2px; background:var(--border); border:1px solid var(--border); }
.for-card{ background:var(--dark); padding:38px 30px; transition:background .3s; position:relative; }
.for-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.for-card:hover{ background:var(--panel); }
.for-card:hover::before{ transform:scaleX(1); }
.for-card-ic{ width:44px; height:44px; display:grid; place-items:center; background:var(--blue-dim); border:1px solid var(--blue-border); margin-bottom:20px; color:var(--blue); }
.for-card-ic svg{ width:21px; height:21px; }
.for-card-title{ font-family:var(--cond); font-weight:700; font-size:17.5px; letter-spacing:.07em; text-transform:uppercase; margin-bottom:9px; color:var(--text); }
.for-card-desc{ font-size:14.5px; color:var(--muted); line-height:1.6; }

/* ---------- packages / pricing ---------- */
.pkg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; align-items:stretch; background:var(--border); border:1px solid var(--border); }
.pkg{ display:flex; flex-direction:column; background:var(--dark); padding:46px 42px; position:relative; transition:background .3s; }
.pkg:hover{ background:var(--panel); }
.pkg::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; }
.pkg.essentials::before{ background:var(--gold); }
.pkg.pro::before{ background:var(--blue); }
.pkg.defender::before{ background:var(--red-acc); }
.pkg-tag{ font-family:var(--cond); font-weight:600; font-size:12px; letter-spacing:.28em; text-transform:uppercase; margin-bottom:12px; }
.pkg.essentials .pkg-tag{ color:var(--gold); }
.pkg.pro .pkg-tag{ color:var(--blue); }
.pkg.defender .pkg-tag{ color:var(--red-acc); }
.pkg h3{ font-size:44px; line-height:.92; margin-bottom:10px; }
.pkg-desc{ font-size:14.5px; color:var(--muted); line-height:1.6; margin-bottom:28px; min-height:44px; max-width:42ch; }
.pkg-price{ display:flex; align-items:flex-end; gap:12px; padding-bottom:28px; margin-bottom:28px; border-bottom:1px solid var(--border); }
.pkg-price .amt{ font-family:var(--display); font-size:66px; line-height:.85; letter-spacing:.005em; }
.pkg.essentials .pkg-price .amt{ color:var(--gold); }
.pkg.pro .pkg-price .amt{ color:var(--blue); }
.pkg.defender .pkg-price .amt{ color:var(--red-acc); }
.pkg-price .meta{ font-family:var(--cond); font-weight:500; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); padding-bottom:8px; }
.pkg-list{ list-style:none; display:flex; flex-direction:column; gap:14px; margin-bottom:34px; }
.pkg-list li{ display:flex; gap:13px; align-items:flex-start; font-size:15px; color:var(--muted); line-height:1.5; }
.pkg-list li svg{ width:17px; height:17px; flex-shrink:0; margin-top:3px; }
.pkg.essentials .pkg-list li svg{ fill:var(--gold); }
.pkg.pro .pkg-list li svg{ fill:var(--blue); }
.pkg.defender .pkg-list li svg{ fill:var(--red-acc); }
.pkg .btn{ margin-top:auto; align-self:flex-start; }
.pkg-note{ font-family:var(--cond); font-weight:500; font-size:13px; letter-spacing:.08em; color:var(--faint); text-align:center; margin-top:26px; }

/* ---------- new car coating (one offer, two versions) ---------- */
.newcar{ display:grid; grid-template-columns:1.15fr 1fr 1fr; margin-top:24px; border:1px solid var(--border); background:var(--mid); }
.newcar-head{ padding:40px 42px; display:flex; flex-direction:column; align-items:flex-start; }
.newcar-head h3{ font-size:40px; line-height:.92; margin:10px 0 12px; }
.newcar-head p{ font-size:14.5px; color:var(--muted); line-height:1.6; max-width:36ch; }
.nc-chip{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; border:1px solid var(--border-2); padding:7px 14px; font-family:var(--cond); font-weight:600; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--text); }
.nc-chip::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--text); opacity:.5; }
.newcar-opt{ border-left:1px solid var(--border); padding:40px 34px; display:flex; flex-direction:column; transition:background .3s; position:relative; }
.newcar-opt::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.newcar-opt:hover{ background:var(--panel); }
.newcar-opt:hover::before{ transform:scaleX(1); }
.newcar-opt.gold::before{ background:var(--gold); }
.newcar-opt.blue::before{ background:var(--blue); }
.newcar-opt .nc-name{ font-family:var(--cond); font-weight:600; font-size:12px; letter-spacing:.26em; text-transform:uppercase; margin-bottom:14px; }
.newcar-opt.gold .nc-name{ color:var(--gold); }
.newcar-opt.blue .nc-name{ color:var(--blue); }
.newcar-opt .nc-price{ font-family:var(--display); font-size:50px; line-height:.9; }
.newcar-opt.gold .nc-price{ color:var(--gold); }
.newcar-opt.blue .nc-price{ color:var(--blue); }
.newcar-opt .nc-meta{ font-family:var(--cond); font-weight:500; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin:6px 0 14px; }
.newcar-opt .nc-desc{ font-size:14px; color:var(--muted); line-height:1.6; }

/* ---------- dry ice blasting feature band (home) ---------- */
.blast-band{ display:grid; grid-template-columns:1.5fr auto; align-items:center; gap:40px; border:1px solid var(--border); border-top:2px solid var(--violet); background:var(--mid); padding:38px 42px; margin-bottom:24px; }
.blast-band-l .bb-tag{ font-family:var(--cond); font-weight:600; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--violet); display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.blast-band-l .bb-tag::before{ content:''; width:28px; height:1px; background:var(--violet); opacity:.6; }
.blast-band-l h3{ font-size:38px; line-height:.95; margin-bottom:10px; }
.blast-band-l p{ font-size:14.5px; color:var(--muted); line-height:1.6; max-width:58ch; }
.blast-band-r{ display:flex; align-items:center; gap:30px; }
.blast-band-r .bb-price{ text-align:right; }
.blast-band-r .bb-price .amt{ font-family:var(--display); font-size:52px; line-height:.9; color:var(--violet); }
.blast-band-r .bb-price .meta{ font-family:var(--cond); font-weight:500; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-top:5px; }

/* ---------- before/after comparison slider (dry ice section only) ---------- */
.ba-slider{ position:relative; width:100%; aspect-ratio:3024/4032; overflow:hidden; border:1px solid var(--border); background:#000; cursor:ew-resize; user-select:none; touch-action:none; }
.ba-slider img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.ba-slider .ba-after{ clip-path:inset(0 50% 0 0); }
.ba-label{ position:absolute; top:16px; z-index:4; font-family:var(--cond); font-weight:700; font-size:11px; letter-spacing:.22em; text-transform:uppercase; padding:6px 13px; pointer-events:none; }
.ba-label.before{ left:16px; color:rgba(244,247,250,.9); background:rgba(7,9,12,.62); border:1px solid var(--border-2); backdrop-filter:blur(6px); }
.ba-label.after{ right:16px; color:#160d2e; background:var(--violet); transition:opacity .15s; }
.ba-handle{ position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--violet); transform:translateX(-50%); z-index:5; pointer-events:none; box-shadow:0 0 16px var(--violet-glow); }
.ba-handle .ba-knob{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%; background:var(--violet); display:grid; place-items:center; box-shadow:0 6px 20px -4px rgba(0,0,0,.65); }
.ba-handle .ba-knob svg{ width:21px; height:21px; stroke:#160d2e; }
.ba-hint{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:16px; font-family:var(--cond); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.ba-hint svg{ width:14px; height:14px; stroke:currentColor; }
.ba-figure .tag{ position:absolute; top:16px; left:50%; transform:translateX(-50%); z-index:4; }

/* ---------- extras / add-ons ---------- */
.extras-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--border); border:1px solid var(--border); border-top:2px solid var(--violet); }
.extra{ background:var(--dark); padding:32px 34px; display:flex; flex-direction:column; gap:10px; transition:background .3s; }
.extra:hover{ background:var(--panel); }
.extra-head{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; }
.extra-title{ font-family:var(--cond); font-weight:700; font-size:19px; letter-spacing:.05em; text-transform:uppercase; }
.extra-price{ font-family:var(--display); font-size:30px; line-height:1; color:var(--violet); white-space:nowrap; }
.extra-price.poa{ font-size:16px; letter-spacing:.12em; padding-bottom:3px; }
.extra-desc{ font-size:14.5px; color:var(--muted); line-height:1.6; }
.extra-tag{ align-self:flex-start; margin-top:2px; font-family:var(--cond); font-weight:600; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--violet); border:1px solid var(--violet-border); padding:4px 10px; }
@media (max-width:700px){ .extras-grid{ grid-template-columns:1fr; } }

/* ---------- coatings split ---------- */
.coat{ display:grid; grid-template-columns:.92fr 1.08fr; gap:64px; align-items:center; padding:clamp(36px,5vw,60px) 0; border-top:1px solid var(--border); }
.coat:first-child{ border-top:none; padding-top:0; }
.coat:last-child{ padding-bottom:0; }
.coat-media{ position:relative; aspect-ratio:4/3; }
.coat-media image-slot, .coat-media .ph{ position:absolute; inset:0; width:100%; height:100%; }
.coat-media .tag{ position:absolute; top:18px; left:18px; z-index:3; background:var(--blue); color:#04121c; font-family:var(--cond); font-weight:800; font-size:11px; letter-spacing:.24em; padding:6px 15px; text-transform:uppercase; }
.coat-brand{ font-family:var(--cond); font-weight:600; font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--blue); display:flex; align-items:center; gap:14px; }
.coat-brand::before{ content:''; width:34px; height:1px; background:currentColor; opacity:.55; }
.coat h3{ font-size:clamp(36px,4.4vw,54px); margin:14px 0 18px; }
.coat p{ color:var(--muted); font-size:15.5px; line-height:1.7; max-width:56ch; text-wrap:pretty; }
.spec-row{ display:flex; gap:0; margin-top:30px; border:1px solid var(--border); }
.spec{ flex:1; padding:18px 22px; border-left:1px solid var(--border); }
.spec:first-child{ border-left:none; }
.spec .v{ font-family:var(--display); font-size:32px; line-height:1; color:var(--text); }
.spec .k{ font-family:var(--cond); font-weight:500; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-top:6px; }

/* ---------- faq ---------- */
.faq-list{ display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); }
.faq-item{ background:var(--dark); }
.faq-q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:24px 30px; background:none; border:0; text-align:left; color:var(--text); font-family:var(--cond); font-weight:600; font-size:18px; letter-spacing:.05em; text-transform:uppercase; transition:background .25s; }
.faq-q:hover{ background:var(--panel); }
.faq-arrow{ color:var(--blue); font-size:21px; font-weight:400; flex-shrink:0; transition:transform .3s var(--ease); }
.faq-item.open .faq-arrow{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-item.open .faq-a{ max-height:300px; }
.faq-a p{ padding:0 30px 26px; font-size:15px; color:var(--muted); line-height:1.7; max-width:72ch; }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; background:linear-gradient(115deg, #5dbcf0 0%, var(--blue) 45%, #2f8cc4 100%); padding:clamp(68px,9vw,104px) 44px; text-align:center; overflow:hidden; }
.cta-band::before{ content:''; position:absolute; inset:0; background:radial-gradient(70% 130% at 50% -20%, rgba(255,255,255,.16), transparent 60%); pointer-events:none; }
.cta-band.gold{ background:linear-gradient(115deg, #f2b441 0%, var(--gold) 50%, #c9851a 100%); }
.cta-band > *{ position:relative; }
.cta-band h2{ font-size:clamp(48px,6.4vw,80px); color:#04121c; margin-bottom:14px; }
.cta-band p{ font-family:var(--body); font-size:16.5px; color:rgba(4,18,28,.68); margin:0 auto 38px; max-width:480px; line-height:1.6; }
.cta-band-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- form ---------- */
.form-wrap{ max-width:660px; margin:0 auto; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-full{ grid-column:1/-1; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-family:var(--cond); font-weight:600; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }
.field input,.field select,.field textarea{ background:rgba(255,255,255,.028); border:1px solid var(--border-2); color:var(--text); font-family:var(--body); font-size:15px; padding:14px 16px; width:100%; transition:border-color .2s, background .2s; appearance:none; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:rgba(255,255,255,.22); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--blue); background:rgba(78,179,232,.04); }
.field select option{ background:#171c22; color:#fff; }
.field textarea{ resize:vertical; min-height:130px; }

/* ---------- contact info ---------- */
.info-block{ display:flex; gap:18px; padding:24px 0; border-bottom:1px solid var(--border); }
.info-block:first-child{ padding-top:0; }
.ib-ic{ width:46px; height:46px; display:grid; place-items:center; background:var(--blue-dim); border:1px solid var(--blue-border); color:var(--blue); flex-shrink:0; }
.ib-ic svg{ width:20px; height:20px; }
.ib-t{ font-family:var(--cond); font-weight:700; font-size:16px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px; }
.info-block a, .info-block p{ color:var(--muted); font-size:15px; line-height:1.7; }
.info-block a:hover{ color:var(--blue); }

@media (max-width:1060px) and (min-width:861px){
  .pkg{ padding:36px 28px; }
  .pkg-price .amt{ font-size:54px; }
}
@media (max-width:860px){
  .includes-grid{ grid-template-columns:1fr; gap:34px; }
  .pkg-grid{ grid-template-columns:1fr; }
  .newcar{ grid-template-columns:1fr; }
  .newcar-opt{ border-left:none; border-top:1px solid var(--border); }
  .blast-band{ grid-template-columns:1fr; gap:24px; padding:32px 28px; }
  .blast-band-r{ justify-content:space-between; gap:18px; }
  .pkg{ padding:38px 30px; }
  .coat, .coat:first-child{ grid-template-columns:1fr; gap:28px; border-top:1px solid var(--border); padding-top:36px; }
  .coat:first-child{ border-top:none; padding-top:0; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .form-grid{ grid-template-columns:1fr; }
  .spec-row{ flex-direction:column; }
  .spec{ border-left:none; border-top:1px solid var(--border); }
  .spec:first-child{ border-top:none; }
}
@media (max-width:600px){
  .gallery-grid{ grid-template-columns:1fr 1fr; }
  .strip{ gap:16px; padding:12px 22px; }
  .strip-sep{ display:none; }
  .pkg .btn{ align-self:stretch; }
}