/* ===================================================================
   BLACK HELMET JUNK REMOVAL — industrial / firehouse aesthetic
   Palette: matte black + charcoal, safety yellow, fire-engine red
=================================================================== */

:root{
  --black: #0b0b0c;
  --charcoal: #17171a;
  --charcoal-2: #202024;
  --steel: #3a3a40;
  --smoke: #9a9aa0;
  --paper: #f4f1ea;
  --yellow: #ffc400;
  --yellow-dim: #d9a800;
  --red: #d81f26;
  --red-dark: #a5151b;
  --font-display: 'Anton', 'Barlow Condensed', sans-serif;
  --font-cond: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--black);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
.wrap{ max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* grain overlay */
.grain{
  position: fixed; inset:0; pointer-events:none; z-index: 500;
  opacity:.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hazard-strip{
  height: 10px;
  background: repeating-linear-gradient(135deg, var(--yellow) 0 18px, var(--black) 18px 36px);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-cond); font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding: 13px 26px; border-radius: 3px; border: 2px solid transparent;
  cursor:pointer; transition: transform .18s var(--ease), background .18s, border-color .18s, box-shadow .18s;
  font-size: 15px;
}
.btn-primary{ background: var(--yellow); color: var(--black); box-shadow: 4px 4px 0 var(--red); }
.btn-primary:hover{ transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--red); }
.btn-ghost{ border-color: var(--paper); color: var(--paper); }
.btn-ghost:hover{ background: var(--paper); color: var(--black); }
.btn-lg{ padding: 17px 34px; font-size: 17px; }
.btn-full{ width:100%; }

/* ---------- header ---------- */
.site-header{ position: sticky; top:0; z-index: 300; background: rgba(11,11,12,.92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.06); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap: 24px; padding-top:14px; padding-bottom:14px; }
.logo{ display:flex; align-items:center; }
.logo-img{ height: 96px; width:auto; display:block; }
.main-nav{ display:flex; gap: 30px; }
.main-nav a{ font-family: var(--font-cond); font-weight:600; text-transform:uppercase; font-size:14px; letter-spacing:.05em; color: var(--smoke); position:relative; padding: 4px 0; }
.main-nav a:hover{ color: var(--paper); }
.main-nav a::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background: var(--yellow); transition: width .25s var(--ease); }
.main-nav a:hover::after{ width:100%; }
.header-cta{ display:flex; align-items:center; gap:14px; }
.phone-pill{ display:flex; align-items:center; gap:8px; font-family: var(--font-cond); font-weight:700; font-size:15px; letter-spacing:.03em; color: var(--paper); border:1px solid var(--steel); padding: 9px 16px; border-radius: 30px; }
.phone-pill svg{ fill: var(--yellow); }
.phone-pill:hover{ border-color: var(--yellow); }
.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; background:none; border:none; cursor:pointer; }
.nav-toggle span{ height:2px; background: var(--paper); border-radius:2px; }

/* ---------- hero ---------- */
.hero{ position:relative; padding: 130px 0 90px; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-diagonal{ position:absolute; top:-20%; right:-15%; width:70%; height:160%; background: linear-gradient(160deg, var(--red-dark), var(--red) 45%, transparent 46%); opacity:.35; transform: rotate(8deg); }
.hero-logo-mark{
  position:absolute; right: 5%; top:50%; transform: translateY(-46%);
  width: clamp(300px, 34vw, 520px); height:auto; opacity:.26;
  filter: grayscale(1) brightness(1.7);
  -webkit-mask-image: radial-gradient(circle, #000 70%, transparent 96%);
  mask-image: radial-gradient(circle, #000 70%, transparent 96%);
}
.hero-inner{ position:relative; z-index:1; max-width: 760px; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family: var(--font-cond); font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:13px; color: var(--yellow); margin: 0 0 22px; }
.eyebrow .dot{ width:8px; height:8px; border-radius:50%; background: var(--red); box-shadow: 0 0 0 4px rgba(216,31,38,.25); }
.hero h1{ font-family: var(--font-display); text-transform:uppercase; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 0.98; letter-spacing:.005em; margin: 0 0 24px; }
.hero h1 .accent{ display:block; color: var(--yellow); -webkit-text-stroke: 1px var(--black); }
.hero-sub{ font-size: 19px; color: var(--smoke); max-width: 560px; margin: 0 0 36px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom: 44px; }
.hero-badges{ display:flex; gap:28px; flex-wrap:wrap; }
.hero-badges li{ display:flex; align-items:center; gap:8px; font-family: var(--font-cond); font-weight:600; letter-spacing:.03em; font-size:14px; color: var(--paper); }
.hero-badges svg{ width:18px; height:18px; fill: var(--yellow); flex-shrink:0; }

/* ---------- marquee ---------- */
.marquee{ background: var(--yellow); color: var(--black); overflow:hidden; white-space:nowrap; border-top:2px solid var(--black); border-bottom:2px solid var(--black); }
.marquee-track{ display:inline-flex; width: max-content; animation: scroll 30s linear infinite; }
.marquee-copy{ display:inline-block; flex-shrink:0; font-family: var(--font-cond); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size: 15px; padding: 10px 0; }
/* script.js pads each .marquee-copy with repeats until it exceeds the
   viewport width and sets an explicit animation-duration for constant
   speed; the 30s above is only a no-JS fallback. translateX(-50%) always
   shifts by exactly one copy width, so the loop is seamless at any size. */
@keyframes scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ---------- section shared ---------- */
.section-tag{ font-family: var(--font-cond); font-weight:700; text-transform:uppercase; letter-spacing:.18em; font-size:13px; color: var(--red); margin: 0 0 14px; }
.section-tag-light{ color: var(--yellow); }
.section-title{ font-family: var(--font-display); text-transform:uppercase; font-size: clamp(1.9rem, 4vw, 3rem); line-height:1.03; margin: 0 0 20px; color: var(--black); }
.section-title-light{ color: var(--paper); }

/* ---------- services ---------- */
.services{ background: var(--paper); color: var(--black); padding: 100px 0; }
.service-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--black); margin-top: 50px; }
.service-card{ position:relative; background: var(--paper); padding: 36px 30px 32px; transition: background .25s var(--ease); }
.service-card:hover{ background: #eae5d8; }
.service-num{ position:absolute; top:20px; right:24px; font-family: var(--font-display); font-size: 40px; color: rgba(0,0,0,.08); }
.service-icon{ width:40px; height:40px; fill:none; stroke: var(--red); stroke-width:2.5; margin-bottom: 20px; }
.service-card h3{ font-family: var(--font-cond); text-transform:uppercase; font-size: 21px; font-weight:700; margin: 0 0 10px; letter-spacing:.01em; }
.service-card p{ margin:0; color:#4a4a48; font-size: 15px; }
.service-card-cta{ background: var(--black); display:flex; flex-direction:column; justify-content:center; }
.service-card-cta:hover{ background: var(--charcoal); }
.service-card-cta h3{ color: var(--yellow); }
.service-card-cta p{ color: var(--smoke); margin-bottom: 22px; }
.btn-ghost-dark{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family: var(--font-cond); font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding: 12px 22px; border-radius: 3px; border: 2px solid var(--yellow); color: var(--yellow); align-self:flex-start; font-size:14px; transition: background .18s, color .18s; }
.btn-ghost-dark:hover{ background: var(--yellow); color: var(--black); }

/* ---------- how ---------- */
.how{ background: var(--charcoal); padding: 100px 0; }
.how-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 40px; margin-top: 50px; }
.how-step{ position: relative; padding-top: 10px; border-top: 3px solid var(--yellow); }
.how-num{ display:block; font-family: var(--font-display); font-size: 46px; color: var(--yellow); margin-bottom: 10px; }
.how-step h3{ font-family: var(--font-cond); text-transform:uppercase; font-size: 21px; margin: 0 0 10px; }
.how-step p{ color: var(--smoke); margin:0; font-size:15px; }

/* ---------- service area ---------- */
.area{ background: var(--paper); color: var(--black); padding: 100px 0; }
.area-inner{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items:center; }
.area-sub{ font-size:16px; color:#4a4a48; max-width: 480px; margin: 0 0 28px; }
.chip-row{ display:flex; flex-wrap:wrap; gap: 10px; }
.chip{ font-family: var(--font-cond); font-weight:600; letter-spacing:.03em; text-transform:uppercase; font-size:13px; background: var(--black); color: var(--paper); padding: 9px 16px; border-radius: 30px; }
.chip:last-child{ background: var(--red); }
.area-visual svg{ width:100%; height:auto; }
.ring{ fill:none; stroke: var(--black); stroke-opacity: .12; }
.ring-2{ stroke-opacity:.2; } .ring-3{ stroke-opacity: .3; }
.pin{ fill: var(--red); }

/* ---------- story ---------- */
.story{ background: var(--black); padding: 110px 0; }
.story-inner{ display:grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items:center; }
.story-badge{ background: var(--charcoal); border: 2px dashed var(--yellow); border-radius: 50%; aspect-ratio:1; width: 100%; max-width: 300px; display:flex; align-items:center; justify-content:center; margin: 0 auto; overflow:hidden; padding: 26px; }
.story-badge img{ width: 100%; height:auto; object-fit:contain; }
.story-copy p{ color: var(--smoke); font-size: 17px; max-width: 560px; margin: 0 0 34px; }
.value-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.value h4{ font-family: var(--font-cond); text-transform:uppercase; color: var(--yellow); font-size:17px; margin:0 0 8px; letter-spacing:.04em; }
.value p{ font-size: 14px; margin:0; color: var(--smoke); }

/* ---------- gallery ---------- */
.gallery{ background: var(--black); padding: 100px 0; }
.gallery .section-tag, .gallery .section-title{ text-align:left; }
.gallery-grid{ display:grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 260px; gap: 20px; margin-top: 50px; }
.gallery-card{ margin:0; position:relative; grid-column: span 2; border-radius: 6px; overflow:hidden; border: 1px solid var(--steel); }
.gallery-card-wide{ grid-column: span 2; }
.gallery-card img{ width:100%; height:100%; object-fit:cover; }
.gallery-card figcaption{ position:absolute; left:0; right:0; bottom:0; padding: 14px 18px; background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,0)); color: var(--paper); font-family: var(--font-cond); text-transform:uppercase; letter-spacing:.04em; font-size:14px; }

/* ---------- pricing ---------- */
.pricing{ background: var(--charcoal-2); padding: 100px 0; text-align:center; }
.pricing .section-tag, .pricing .section-title{ text-align:left; }
.pricing-sub{ color: var(--smoke); max-width: 640px; margin: 0 0 50px; text-align:left; font-size:16px; }
.pricing-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; text-align:left; }
.price-card{ background: var(--charcoal); border: 1px solid var(--steel); border-radius: 6px; padding: 34px 28px; position:relative; }
.price-card-featured{ border-color: var(--yellow); background: #221d0d; }
.price-flag{ position:absolute; top:-13px; right: 24px; background: var(--yellow); color: var(--black); font-family: var(--font-cond); font-weight:700; text-transform:uppercase; font-size:11px; letter-spacing:.08em; padding: 5px 12px; border-radius: 20px; }
.price-card h3{ font-family: var(--font-cond); text-transform:uppercase; font-size: 22px; margin: 0 0 6px; }
.price-tag{ color: var(--yellow); font-family: var(--font-cond); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:13px; margin: 0 0 16px; }
.price-desc{ color: var(--smoke); font-size:14.5px; margin:0; }
.pricing-note{ text-align:left; color:#6f6f76; font-size:13px; margin-top: 24px; font-style: italic; }

/* ---------- testimonials ---------- */
.testimonials{ background: var(--paper); color: var(--black); padding: 100px 0; }
.testimonial-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; margin-top: 50px; }
.testimonial{ background: var(--black); color: var(--paper); padding: 30px 26px; border-radius: 4px; margin:0; border-left: 4px solid var(--yellow); }
.testimonial p{ font-size: 16px; line-height:1.55; margin: 0 0 18px; }
.testimonial cite{ font-family: var(--font-cond); font-style:normal; text-transform:uppercase; letter-spacing:.05em; font-size:13px; color: var(--yellow); }

/* ---------- faq ---------- */
.faq{ background: var(--paper); color: var(--black); padding: 0 0 110px; }
.faq-wrap{ max-width: 820px; }
.faq-list{ margin-top: 40px; display:flex; flex-direction:column; gap: 12px; }
.faq-item{ background: #fff; border: 1px solid #e2ddce; border-radius: 4px; padding: 6px 22px; }
.faq-item summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; padding: 16px 0; font-family: var(--font-cond); font-weight:700; font-size:17px; text-transform:uppercase; letter-spacing:.01em; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-icon{ font-family: var(--font-display); color: var(--red); font-size: 20px; transition: transform .2s var(--ease); }
.faq-item[open] .faq-icon{ transform: rotate(45deg); }
.faq-item p{ margin: 0 0 18px; color:#4a4a48; font-size:15px; max-width: 640px; }

/* ---------- final cta ---------- */
.cta-banner{ background: linear-gradient(120deg, var(--red-dark), var(--red)); padding: 80px 0; text-align:center; }
.cta-inner h2{ font-family: var(--font-display); text-transform:uppercase; font-size: clamp(2rem,4.5vw,3.2rem); margin: 0 0 10px; }
.cta-inner p{ font-size:18px; margin: 0 0 34px; opacity:.9; }
.cta-inner .hero-actions{ justify-content:center; margin-bottom:0; }
.cta-inner .btn-ghost{ border-color: var(--black); color: var(--black); }
.cta-inner .btn-ghost:hover{ background: var(--black); color: var(--paper); }

/* ---------- footer ---------- */
.site-footer{ background: var(--black); padding-top: 0; }
.footer-inner{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 70px; padding: 90px 32px 70px; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.quote-form{ display:flex; flex-direction:column; gap: 18px; margin-top: 36px; }
.quote-form label{ display:flex; flex-direction:column; gap:8px; font-family: var(--font-cond); font-weight:600; text-transform:uppercase; font-size:12.5px; letter-spacing:.07em; color: var(--smoke); }
.quote-form input, .quote-form textarea{
  background: var(--charcoal); border: 1px solid var(--steel); border-radius: 3px; padding: 13px 14px;
  color: var(--paper); font-family: var(--font-body); font-size: 15px; resize: vertical;
}
.quote-form input:focus, .quote-form textarea:focus{ outline:none; border-color: var(--yellow); }
.form-note{ font-size: 12.5px; color:#6f6f76; text-align:center; font-style:italic; text-transform:none; letter-spacing:0; font-weight:400; }
.footer-info-col{ display:flex; flex-direction:column; gap: 40px; padding-top: 90px; }
.footer-block h4{ font-family: var(--font-cond); text-transform:uppercase; letter-spacing:.1em; color: var(--yellow); font-size:14px; margin: 0 0 12px; }
.footer-block p{ margin: 0 0 4px; color: var(--smoke); font-size:15px; }
.footer-block a:hover{ color: var(--paper); }
.social-row{ display:flex; gap: 10px; }
.social-row a{ width:36px; height:36px; border:1px solid var(--steel); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family: var(--font-cond); font-size:11px; font-weight:700; }
.social-row a:hover{ border-color: var(--yellow); color: var(--yellow); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: 10px; padding: 26px 32px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; color: #6f6f76; }
.footer-logo-img{ height: 40px; width:auto; }

/* ---------- scroll reveal ---------- */
/* Content is visible by default; JS opts elements into the pre-reveal
   (hidden) state right before observing them, so no-JS / slow-JS visitors
   never see permanently blank sections. */
.reveal{ transition: opacity .6s var(--ease), transform .6s var(--ease); }
.pre-reveal{ opacity:0; transform: translateY(22px); }
.reveal-in{ opacity:1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .pre-reveal{ opacity:1; transform:none; }
  .marquee-track{ animation: none; }
}

/* ---------- responsive ---------- */
.main-nav.open{
  display:flex !important; flex-direction:column; gap:0;
  position:absolute; top:100%; left:0; right:0; background: var(--charcoal);
  padding: 10px 32px 20px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.main-nav.open a{ padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
.nav-toggle span{ transition: transform .2s var(--ease), opacity .2s var(--ease); }

@media (max-width: 980px){
  .main-nav{ display:none; }
  .header-cta .btn{ display:none; }
  .nav-toggle{ display:flex; }
  .hero{ padding: 100px 0 70px; }
  .hero-helmet{ opacity:.35; width:280px; height:280px; }
  .service-grid, .how-grid, .pricing-grid, .testimonial-grid{ grid-template-columns: 1fr 1fr; }
  .area-inner, .story-inner, .footer-inner{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; }
  .footer-info-col{ padding-top:0; }
  .story-badge{ margin: 0 0 20px; }
}
@media (max-width: 620px){
  .wrap{ padding: 0 20px; }
  .service-grid, .how-grid, .pricing-grid, .testimonial-grid, .value-grid, .form-row{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: 1fr; grid-auto-rows: 260px; }
  .hero-badges{ flex-direction:column; gap:14px; }
  .header-cta{ gap:8px; }
}