/* ==========================================================================
   JunkMyThing.com — Towing & Junk Car Removal, Tampa Bay FL
   Design tokens and layout. Mobile-first, dark, call-driven.
   ========================================================================== */

:root{
  --black:#0a0a0c;
  --charcoal:#17191d;
  --charcoal-2:#1f2227;
  --red:#e0161d;
  --red-dark:#8c1116;
  --red-deep:#5c0a0d;
  --white:#f4f4f2;
  --steel:#9aa2ac;
  --line:#2a2d33;
  --plate-yellow:#f4c430;

  --font-head:'Oswald', 'Arial Narrow', sans-serif;
  --font-cond:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --wrap:1120px;
  --gutter:22px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:80px;}

body{
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3{font-family:var(--font-head); text-transform:uppercase; letter-spacing:.5px; line-height:1.15; font-weight:700;}
a{color:inherit;}
img,svg{max-width:100%; display:block;}
ul,ol{list-style:none;}

:where(a,button):focus-visible{
  outline:3px solid var(--plate-yellow);
  outline-offset:3px;
  border-radius:3px;
}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter);}
section{padding:64px 0;}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}


/* --- Eyebrow -------------------------------------------------------------- */
.eyebrow{
  font-family:var(--font-cond);
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:13px;
  font-weight:600;
  color:var(--red);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--red); flex:none;}
.eyebrow.is-centered{justify-content:center;}

/* --- Sticky call bar ------------------------------------------------------ */
.callbar{
  position:sticky; top:0; z-index:50;
  background:var(--red);
  border-bottom:2px solid var(--red-dark);
}
.callbar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:9px 14px;
  min-width:0;
}
.cb-brand{
  font-family:var(--font-head); font-size:16px; letter-spacing:.5px;
  text-transform:uppercase; color:#fff; text-decoration:none; white-space:nowrap;
  display:none; /* the phone number is the priority on small screens */
}
.cb-brand em{font-style:normal; color:#0a0a0c;}
.cb-phone{
  font-family:var(--font-head); font-weight:700; font-size:19px;
  color:#fff; text-decoration:none; letter-spacing:.5px;
  display:flex; align-items:center; gap:8px; white-space:nowrap;
  margin-right:auto;
}
.cb-phone svg{width:18px; height:18px; fill:#fff; flex:none;}
.cb-actions{display:flex; align-items:center; gap:10px;}
.cb-cta{
  background:var(--black); color:#fff; text-decoration:none;
  font-family:var(--font-cond); font-weight:600; letter-spacing:1px;
  text-transform:uppercase; font-size:14px; padding:9px 16px; border-radius:3px;
  white-space:nowrap; display:none;
}
/* Language switch — real links, one per URL */
.lang{
  display:flex; border:1px solid rgba(255,255,255,.5); border-radius:3px; overflow:hidden;
  font-family:var(--font-cond); font-size:13px; font-weight:600; letter-spacing:1px;
}
.lang > *{padding:7px 10px; text-transform:uppercase;}
.lang .lang-on{background:var(--black); color:#fff;}
.lang a{color:#ffd6d7; text-decoration:none;}
.lang a:hover{background:rgba(0,0,0,.35); color:#fff;}

@media(min-width:420px){ .callbar .wrap{padding:10px var(--gutter);} .cb-phone{font-size:20px;} }
@media(min-width:460px){
  .cb-brand{display:block;}
  .cb-phone{margin-right:0;}
}
@media(min-width:700px){ .cb-brand{font-size:19px;} }
@media(min-width:820px){ .cb-cta{display:inline-block;} }

/* --- Road divider — signature element ------------------------------------- */
.road{
  height:34px;
  background:repeating-linear-gradient(90deg, var(--charcoal) 0 46px, #14161a 46px 48px);
  position:relative; overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.road::before{
  content:"";
  position:absolute; inset:50% 0 auto 0; height:4px; transform:translateY(-50%);
  background-image:repeating-linear-gradient(90deg, var(--plate-yellow) 0 34px, transparent 34px 60px);
}

/* --- Hero ---------------------------------------------------------------- */
.hero{
  position:relative;
  padding:76px 0 68px;
  background:
    radial-gradient(120% 90% at 50% 0%, #23262c 0%, var(--black) 62%),
    var(--black);
  overflow:hidden;
  text-align:center;
}
.hero::after{ /* asphalt haze at the base */
  content:""; position:absolute; inset:auto 0 0 0; height:120px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.85));
  pointer-events:none;
}
.hero .wrap{position:relative; z-index:1;}
.hero h1{
  font-size:clamp(34px, 8.2vw, 68px);
  margin-bottom:16px;
  text-wrap:balance;
}
.hero h1 .accent{color:var(--red); display:block;}
.hero-sub{
  color:var(--steel); font-size:clamp(15px,2.4vw,18px);
  max-width:560px; margin:0 auto 30px; text-wrap:balance;
}
.hero-truck{
  width:min(320px, 74%); margin:0 auto 26px; fill:var(--white); opacity:.92;
}
.hero-truck .wheel{fill:var(--charcoal-2); stroke:var(--steel); stroke-width:1.5;}
.hero-truck .hook{fill:var(--red);}

.btn-row{display:flex; flex-wrap:wrap; gap:12px; justify-content:center;}
.btn{
  font-family:var(--font-cond); text-transform:uppercase; letter-spacing:1.5px;
  font-weight:600; font-size:16px; text-decoration:none;
  padding:15px 28px; border-radius:4px; display:inline-flex; align-items:center; gap:10px;
  transition:transform .12s ease, background-color .12s ease;
}
.btn svg{width:18px; height:18px; flex:none;}
.btn-primary{background:var(--red); color:#fff; border:2px solid var(--red);}
.btn-primary svg{fill:#fff;}
.btn-primary:hover{background:#f01d24; transform:translateY(-2px);}
.btn-ghost{background:transparent; color:var(--white); border:2px solid var(--line);}
.btn-ghost svg{fill:var(--red);}
.btn-ghost:hover{border-color:var(--steel); transform:translateY(-2px);}

.hero-badges{
  display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:center;
  margin-top:32px; font-family:var(--font-cond); text-transform:uppercase;
  letter-spacing:1.5px; font-size:13px; font-weight:600; color:var(--steel);
}
.hero-badges li{display:flex; align-items:center; gap:7px;}
.hero-badges li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--red); flex:none;}

/* --- Section head -------------------------------------------------------- */
.section-head{text-align:center; max-width:640px; margin:0 auto 40px;}
.section-head h2{font-size:clamp(26px,4.4vw,38px); margin-bottom:10px; text-wrap:balance;}
.section-head p{color:var(--steel); font-size:16px;}

/* --- Services ------------------------------------------------------------ */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media(max-width:800px){ .services-grid{grid-template-columns:1fr;} }

.svc-card{
  background:var(--charcoal); border:1px solid var(--line); border-radius:10px;
  padding:28px 24px; text-align:center; position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
.svc-card::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--red);}
.svc-icon{
  width:56px; height:56px; border-radius:50%; background:var(--red);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
  box-shadow:0 0 0 6px rgba(224,22,29,.12);
}
.svc-icon svg{width:26px; height:26px; fill:#fff;}
.svc-card h3{font-size:19px; margin-bottom:8px;}
.svc-card p{color:var(--steel); font-size:14.5px;}
.svc-price{
  font-family:var(--font-head); font-size:28px; color:var(--red);
  font-weight:700; margin-top:auto; padding-top:10px;
}
.svc-price small{
  display:block; font-family:var(--font-cond); font-size:12px; letter-spacing:2px;
  color:var(--steel); text-transform:uppercase; font-weight:600;
}

/* --- Why us -------------------------------------------------------------- */
.why{background:var(--charcoal-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:center;}
@media(max-width:760px){ .why-grid{grid-template-columns:1fr; gap:30px;} }
.why-item{display:flex; flex-direction:column; align-items:center; gap:10px;}
.why-icon{width:46px; height:46px; display:flex; align-items:center; justify-content:center;}
.why-icon svg{width:32px; height:32px; fill:var(--red);}
.why-item h3{font-family:var(--font-cond); font-size:15px; font-weight:600; letter-spacing:.5px;}
.why-item span{color:var(--steel); font-size:14px;}

/* --- Service area -------------------------------------------------------- */
.area-wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;}
@media(max-width:800px){ .area-wrap{grid-template-columns:1fr;} }
.area-copy p{color:var(--steel); margin-bottom:18px;}
.city-list{display:flex; flex-wrap:wrap; gap:9px; margin-top:18px;}
.city-chip{
  font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.5px;
  font-size:13.5px; font-weight:600; color:var(--white);
  border:1px solid var(--line); background:var(--charcoal);
  padding:7px 14px; border-radius:3px;
}

/* Florida license plate */
.plate{
  background:linear-gradient(180deg,#f4f4f2,#d9dde2);
  color:var(--black); border-radius:8px; padding:26px; text-align:center;
  border:3px solid var(--black); box-shadow:inset 0 0 0 3px #b8bcc2;
  font-family:var(--font-head);
  padding:clamp(24px,4vw,34px) 26px;
  max-width:420px; margin:0 auto; width:100%;
}
.plate .p-state{
  font-family:var(--font-cond); font-weight:600; letter-spacing:3px;
  font-size:13px; margin-bottom:4px;
}
.plate .p-main{font-size:clamp(28px,7vw,38px); font-weight:700; letter-spacing:4px;}
.plate .p-sub{
  font-family:var(--font-cond); font-size:13px; letter-spacing:2px;
  margin-top:6px; font-weight:600;
}

/* --- Final CTA ----------------------------------------------------------- */
.final-cta{background:linear-gradient(180deg, var(--red-dark), var(--red-deep)); text-align:center;}
.final-cta h2{font-size:clamp(26px,5vw,40px); margin-bottom:14px; text-wrap:balance;}
.final-cta p{color:#ffd6d7; margin-bottom:28px; font-size:16px;}
.big-phone{
  font-family:var(--font-head); font-size:clamp(26px,6.4vw,52px); font-weight:700;
  color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:14px;
  background:var(--black); padding:16px clamp(20px,5vw,34px); border-radius:8px;
  border:2px solid #000; transition:transform .12s ease;
}
.big-phone svg{width:clamp(24px,6vw,34px); height:clamp(24px,6vw,34px); fill:var(--red); flex:none;}
.big-phone:hover{transform:translateY(-2px);}
.cta-sub{margin-top:18px; font-size:14px; color:#ffb9ba;}

/* --- Footer -------------------------------------------------------------- */
footer{background:var(--black); border-top:1px solid var(--line); padding:34px 0; text-align:center;}
.f-name{font-family:var(--font-head); font-size:20px; letter-spacing:.5px; margin-bottom:6px; text-transform:uppercase;}
.f-name small{font-family:var(--font-cond); font-size:14px; letter-spacing:2px; color:var(--steel); font-weight:600;}
.f-name span{color:var(--red);}
footer p{color:var(--steel); font-size:13.5px;}
.f-links{margin-top:12px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap;}
.f-links a{font-size:13.5px; color:var(--steel); text-decoration:none;}
.f-links a:hover{color:var(--white);}
.f-legal{margin-top:16px; font-size:12.5px; color:#5f666f;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}

/* ==========================================================================
   Sections added for the SEO build: how-it-works, junk cars, pricing, FAQ
   ========================================================================== */

/* --- HOW IT WORKS --------------------------------------------------------- */
.steps-section{background:var(--charcoal-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.steps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:none;}
@media(max-width:820px){ .steps-grid{grid-template-columns:1fr;} }
.step{
  background:var(--black); border:1px solid var(--line); border-radius:10px;
  padding:28px 24px; position:relative;
}
.step-n{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:var(--red); color:#fff;
  font-family:var(--font-head); font-size:19px; font-weight:700;
  margin-bottom:14px;
}
.step h3{font-size:18px; margin-bottom:8px;}
.step p{color:var(--steel); font-size:14.5px;}

/* --- JUNK CARS ------------------------------------------------------------ */
.junk-wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:start;}
@media(max-width:860px){ .junk-wrap{grid-template-columns:1fr; gap:30px;} }
.junk-copy h2{font-size:clamp(26px,4.4vw,38px); margin-bottom:16px; text-wrap:balance;}
.junk-copy p{color:var(--steel); margin-bottom:16px;}
.junk-copy .btn{margin-top:6px;}
.junk-card{
  background:var(--charcoal); border:1px solid var(--line); border-radius:10px;
  padding:28px 26px; position:relative; overflow:hidden;
}
.junk-card::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--red);}
.junk-card h3{font-size:17px; margin-bottom:16px;}
.check-list{display:grid; gap:11px;}
.check-list li{
  position:relative; padding-left:28px; color:var(--white); font-size:14.5px;
}
.check-list li::before{
  content:""; position:absolute; left:0; top:6px;
  width:16px; height:9px; border-left:2.5px solid var(--red); border-bottom:2.5px solid var(--red);
  transform:rotate(-45deg);
}
.junk-note{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--line);
  color:var(--steel); font-size:13.5px;
}

/* --- PRICING -------------------------------------------------------------- */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media(max-width:820px){ .price-grid{grid-template-columns:1fr;} }
.price-item{
  border:1px solid var(--line); border-radius:10px; padding:24px 22px;
  background:var(--charcoal); border-left:3px solid var(--red);
}
.price-item h3{font-size:16px; margin-bottom:7px;}
.price-item p{color:var(--steel); font-size:14.5px;}
.price-note{
  margin-top:26px; text-align:center;
  font-family:var(--font-cond); text-transform:uppercase; letter-spacing:1.5px;
  font-size:14px; font-weight:600; color:var(--white);
}

/* --- FAQ ------------------------------------------------------------------ */
.faq-section{background:var(--charcoal-2); border-top:1px solid var(--line);}
.faq-list{max-width:820px; margin:0 auto; display:grid; gap:10px;}
.faq-item{
  background:var(--black); border:1px solid var(--line); border-radius:8px;
  overflow:hidden;
}
.faq-item summary{
  cursor:pointer; padding:18px 52px 18px 20px; position:relative;
  font-family:var(--font-head); text-transform:uppercase; letter-spacing:.4px;
  font-size:15.5px; line-height:1.3;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:""; position:absolute; right:22px; top:50%;
  width:11px; height:11px; margin-top:-6px;
  border-right:2.5px solid var(--red); border-bottom:2.5px solid var(--red);
  transform:rotate(45deg); transition:transform .18s ease;
}
.faq-item[open] summary::after{transform:rotate(-135deg); margin-top:-2px;}
.faq-item summary:hover{background:#101216;}
.faq-a{padding:0 20px 20px;}
.faq-a p{color:var(--steel); font-size:15px;}

/* Wider reading measure for the long-form sections */
.junk-copy p, .faq-a p{max-width:62ch;}

/* ==========================================================================
   LEAD FORM MODAL
   ========================================================================== */
.modal{position:fixed; inset:0; z-index:200; display:flex; align-items:flex-start;
  justify-content:center; padding:24px 16px; overflow-y:auto;}
.modal[hidden]{display:none;}
.modal-backdrop{position:fixed; inset:0; background:rgba(4,5,7,.82);
  backdrop-filter:saturate(120%) blur(2px);}

.modal-panel{
  position:relative; width:100%; max-width:560px; margin:auto;
  background:var(--charcoal); border:1px solid var(--line); border-radius:12px;
  padding:32px 30px 28px; box-shadow:0 30px 80px -20px rgba(0,0,0,.9);
}
.modal-panel::before{content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--red); border-radius:12px 12px 0 0;}

.modal-x{
  position:absolute; top:10px; right:12px; width:38px; height:38px;
  background:transparent; border:0; color:var(--steel); font-size:28px; line-height:1;
  cursor:pointer; border-radius:4px;
}
.modal-x:hover{color:var(--white); background:var(--charcoal-2);}

.modal-body h2{font-size:clamp(22px,4.6vw,29px); margin-bottom:10px;}
.modal-intro{color:var(--steel); font-size:15px; margin-bottom:22px; max-width:46ch;}

/* --- fields -------------------------------------------------------------- */
#lead-form{display:flex; flex-direction:column; gap:15px;}
.field{display:flex; flex-direction:column; gap:6px; border:0; padding:0; margin:0; min-width:0;}
.field > label, .field > legend{
  font-family:var(--font-cond); text-transform:uppercase; letter-spacing:1.2px;
  font-size:12.5px; font-weight:600; color:var(--white); padding:0;
}
.field .opt{color:var(--steel); text-transform:none; letter-spacing:0; font-weight:500;}

.field input[type=text], .field input[type=tel], .field input[type=email],
.field select, .field textarea{
  font-family:var(--font-body); font-size:16px; color:var(--white);
  background:var(--black); border:1px solid var(--line); border-radius:5px;
  padding:11px 13px; width:100%; appearance:none;
}
.field textarea{resize:vertical; min-height:76px;}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--steel) 50%),
                   linear-gradient(135deg,var(--steel) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%, calc(100% - 13px) 50%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
  padding-right:38px;
}
.field :is(input,select,textarea)::placeholder{color:#6b727c;}
.field :is(input,select,textarea):focus-visible{
  outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(224,22,29,.22);
}
.field.is-invalid :is(input,select,textarea){border-color:var(--red);}

.field-err{font-size:13px; color:#ff8b90; min-height:0;}
.field-err:empty{display:none;}

.radio-row{display:flex; flex-wrap:wrap; gap:9px;}
.radio{display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  border:1px solid var(--line); background:var(--black); border-radius:5px;
  padding:10px 14px; font-size:15px;}
.radio input{accent-color:var(--red); width:16px; height:16px; margin:0;}
.radio:has(input:checked){border-color:var(--red); background:rgba(224,22,29,.09);}
.radio:has(input:focus-visible){box-shadow:0 0 0 3px rgba(224,22,29,.22);}

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.form-note{font-size:13px; color:var(--steel);}
.form-error{font-size:14.5px; color:#ff8b90; background:rgba(224,22,29,.09);
  border:1px solid rgba(224,22,29,.35); border-radius:5px; padding:11px 13px;}
.form-error[hidden]{display:none;}

.modal-actions{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:4px;}
.modal-actions .btn{flex:0 0 auto;}
.modal-actions button[type=submit][aria-busy=true]{opacity:.65; pointer-events:none;}
.modal-call{display:inline-flex; align-items:center; gap:8px; color:var(--steel);
  text-decoration:none; font-family:var(--font-cond); text-transform:uppercase;
  letter-spacing:1.2px; font-size:13.5px; font-weight:600;}
.modal-call svg{width:15px; height:15px; fill:var(--red);}
.modal-call:hover{color:var(--white);}

/* --- success view -------------------------------------------------------- */
.modal-ok{text-align:center;}
.modal-ok[hidden]{display:none;}
.modal-ok p{color:var(--steel); margin:0 auto 22px; max-width:40ch;}
.modal-ok .modal-actions{justify-content:center;}
.ok-mark{width:58px; height:58px; margin:6px auto 18px; border-radius:50%;
  background:rgba(28,122,74,.16); border:2px solid #1f9e5c; position:relative;}
.ok-mark::after{content:""; position:absolute; left:17px; top:20px;
  width:22px; height:11px; border-left:3px solid #35c47e; border-bottom:3px solid #35c47e;
  transform:rotate(-45deg);}

body.modal-open{overflow:hidden;}

@media(max-width:520px){
  .modal{padding:0;}
  .modal-panel{border-radius:0; min-height:100%; padding:26px 20px 24px; max-width:none;}
  .modal-panel::before{border-radius:0;}
}