/* =========================================================
   Destin Mobile Welding Co — style.css
   Industrial black / steel-gray theme. Gulf teal reserved for CTAs.
   No rounded corners anywhere.
   ========================================================= */

:root{
  --black:#0a0a0a;
  --charcoal:#1a1a1a;
  --steel:#2b2b2e;
  --steel-light:#3d3d42;
  --off-white:#e8e8e8;
  --white:#ffffff;
  --accent:#0f9b8e;
  --accent-dark:#0b7a70;
  --border-gray:#414146;
  --font-body: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --font-head: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

*, *::before, *::after{ box-sizing:border-box; border-radius:0 !important; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-body);
  background:var(--white);
  color:#1c1c1c;
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

h1,h2,h3,h4{
  font-family:var(--font-head);
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--black);
  line-height:1.15;
  margin:0 0 .6em;
}
h1{ font-size:2.4rem; }
h2{ font-size:1.8rem; margin-top:.4em; }
h3{ font-size:1.25rem; margin-top:1.4em; }
p{ margin:0 0 1em; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
ul,ol{ padding-left:1.3em; }
.container{ max-width:1180px; margin:0 auto; padding:0 20px; }
.section{ padding:60px 0; }
.section-dark{ background:var(--black); color:var(--off-white); }
.section-dark h2, .section-dark h3{ color:var(--white); }
.section-steel{ background:var(--steel); color:var(--off-white); }
.section-steel h2, .section-steel h3{ color:var(--white); }
.bg-off{ background:#f4f4f3; }

.eyebrow{
  display:inline-block;
  font-family:var(--font-head);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.8rem;
  color:var(--accent);
  margin-bottom:.5em;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--font-head);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:600;
  font-size:1rem;
  padding:16px 30px;
  border:2px solid var(--accent);
  background:var(--accent);
  color:var(--white);
  cursor:pointer;
  text-align:center;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ background:var(--accent-dark); border-color:var(--accent-dark); color:var(--white); text-decoration:none; }
.btn-outline{
  background:transparent;
  border:2px solid var(--off-white);
  color:var(--off-white);
}
.btn-outline:hover{ background:var(--off-white); color:var(--black); }
.btn-block{ display:block; width:100%; text-align:center; }
.btn-sm{ padding:10px 18px; font-size:.85rem; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:var(--black);
  border-bottom:3px solid var(--accent);
}
.header-inner{
  max-width:1180px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between;
  min-height:76px;
}
.brand{ display:flex; align-items:center; gap:16px; color:var(--white); }
.brand img{ height:44px; width:44px; padding:4px; }
.brand-name{
  font-family:var(--font-head);
  font-weight:700;
  text-transform:uppercase;
  font-size:1.05rem;
  letter-spacing:.03em;
  color:var(--white);
  line-height:1.1;
}
.brand-name span{ display:block; margin-top:6px; font-size:.65rem; color:var(--accent); letter-spacing:.15em; }
.brand:hover{ text-decoration:none; }

.main-nav{ display:flex; align-items:center; gap:26px; }
.main-nav ul{ list-style:none; display:flex; gap:22px; margin:0; padding:0; align-items:center; }
.main-nav > ul > li{ position:relative; }
.main-nav a{
  color:var(--off-white);
  font-family:var(--font-head);
  font-weight:700;
  text-transform:uppercase;
  font-size:.88rem;
  letter-spacing:.04em;
}
.main-nav a:hover{ color:var(--accent); text-decoration:none; }

.header-cta{ display:flex; align-items:center; gap:16px; }
.header-phone{
  color:var(--white);
  font-family:var(--font-head);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.02em;
  white-space:nowrap;
}
.header-phone:hover{ color:var(--accent); text-decoration:none; }

.nav-toggle{
  display:none;
  align-items:center; justify-content:center;
  width:44px; height:44px; padding:0;
  background:none; border:2px solid var(--off-white); color:var(--off-white);
  font-size:1.4rem; line-height:1; cursor:pointer;
}

/* ---------- Mobile sticky quote sub-header ---------- */
.mobile-quote-bar{ display:none; }
@media (max-width:960px){
  .mobile-quote-bar{
    display:block;
    position:sticky; top:79px; z-index:999;
    background:var(--accent);
    width:100%;
  }
  .mobile-quote-bar a{
    display:block; width:100%; text-align:center;
    padding:14px 16px; font-family:var(--font-head); text-transform:uppercase;
    letter-spacing:.06em; font-weight:600; font-size:1rem;
    color:var(--white);
  }
  .mobile-quote-bar a:hover{ background:var(--accent-dark); text-decoration:none; }
}

/* ---------- Floating mobile call button ---------- */
.mobile-call-fab{ display:none; }
@media (max-width:960px){
  .mobile-call-fab{
    display:block;
    position:fixed; left:16px; right:16px; bottom:16px; z-index:1001;
    background:var(--accent); color:var(--white);
    text-align:center;
    padding:16px 20px;
    font-family:var(--font-head); text-transform:uppercase;
    letter-spacing:.06em; font-weight:600; font-size:1rem;
    box-shadow:0 6px 18px rgba(0,0,0,.45);
  }
  .mobile-call-fab:hover{ background:var(--accent-dark); text-decoration:none; }
  body{ padding-bottom:82px; }
}

@media (max-width:960px){
  .main-nav{
    position:fixed; top:76px; left:0; right:0; bottom:0;
    background:var(--black);
    flex-direction:column; align-items:stretch;
    padding:20px; overflow-y:auto;
    transform:translateX(-100%);
    transition:transform .2s ease;
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav ul{ flex-direction:column; align-items:stretch; gap:0; }
  .main-nav > ul > li{ border-bottom:1px solid var(--steel); }
  .main-nav a{ padding:14px 4px; display:block; }
  .header-cta{ margin-top:16px; flex-direction:column; align-items:stretch; gap:10px; }
  .nav-toggle{ display:flex; }
}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(180deg, var(--charcoal) 0%, var(--black) 100%);
  color:var(--white);
  padding:44px 0 70px;
  border-bottom:4px solid var(--accent);
}
.hero-inner{ max-width:760px; }
.hero h1{ color:var(--white); font-size:2.6rem; margin-bottom:.4em; }
.hero .subhead{ font-size:1.15rem; color:var(--off-white); margin-bottom:1.4em; max-width:640px; }

/* Hero background photo (mobile-first image, larger images swapped in at wider breakpoints) */
.hero.hero-with-media{
  background-image:linear-gradient(180deg, rgba(10,10,10,.68) 0%, rgba(10,10,10,.95) 100%), url("../assets/img7-welding-480.jpg");
  background-size:cover;
  background-position:center 20%;
  background-repeat:no-repeat;
  min-height:420px;
  display:flex; align-items:center;
}
@media (min-width:481px){
  .hero.hero-with-media{ background-image:linear-gradient(180deg, rgba(10,10,10,.68) 0%, rgba(10,10,10,.95) 100%), url("../assets/img7-welding-768.jpg"); }
}
@media (min-width:769px){
  .hero.hero-with-media{ background-image:linear-gradient(180deg, rgba(10,10,10,.65) 0%, rgba(10,10,10,.93) 100%), url("../assets/img7-welding-1024.jpg"); min-height:500px; }
}
@media (min-width:1025px){
  .hero.hero-with-media{ background-image:linear-gradient(180deg, rgba(10,10,10,.65) 0%, rgba(10,10,10,.93) 100%), url("../assets/img7-welding-1280.jpg"); min-height:560px; }
}
@media (min-width:1600px){
  .hero.hero-with-media{ background-image:linear-gradient(180deg, rgba(10,10,10,.65) 0%, rgba(10,10,10,.93) 100%), url("../assets/img7-welding-1920.jpg"); }
}
.trust-bullets{ list-style:none; padding:0; margin:0 0 2em; display:grid; gap:10px; }
.trust-bullets li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:.98rem; color:var(--off-white);
}
.trust-bullets li::before{
  content:"\2713"; color:var(--accent); font-weight:700; flex:0 0 auto;
  border:1px solid var(--accent); width:20px; height:20px; text-align:center; line-height:18px; font-size:.75rem;
}
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- Cards / grids ---------- */
.grid{ display:grid; gap:26px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:840px){ .grid-3{ grid-template-columns:1fr 1fr; } .grid-2{grid-template-columns:1fr;} }
@media (max-width:600px){ .grid-3{ grid-template-columns:1fr; } }

.card{
  background:var(--white);
  border:1px solid #ddd;
  border-top:4px solid var(--accent);
  padding:26px 24px;
}
.card h3{ margin-top:0; }
.card a.card-link{ font-family:var(--font-head); text-transform:uppercase; font-size:.82rem; letter-spacing:.05em; }

.city-list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@media (max-width:700px){ .city-list{ grid-template-columns:1fr 1fr; } }
.city-list a{ color:var(--off-white); font-size:.92rem; }
.city-list a::before{ content:"\25B8  "; color:var(--accent); }
.city-list-onlight a{ color:var(--accent); }
.city-list-onlight a:hover{ color:var(--accent-dark); }

.faq{ border-top:1px solid #ddd; }
.faq-item{ border-bottom:1px solid #ddd; padding:18px 0; }
.faq-item h3{ margin:0 0 .4em; font-size:1.05rem; }
.faq-item p{ margin:0; color:#333; }
.section-steel .faq{ border-top-color: rgba(255,255,255,.2); }
.section-steel .faq-item{ border-bottom-color: rgba(255,255,255,.2); }
.section-steel .faq-item p{ color:var(--white); }

.breadcrumb{ font-size:.82rem; color:#666; padding:16px 0; }
.breadcrumb a{ color:#666; }
.breadcrumb a:hover{ color:var(--accent); }

/* ---------- Lead form ---------- */
.lead-section{ background:var(--charcoal); color:var(--off-white); padding:70px 0; }
.lead-section h2{ color:var(--white); }
.lead-wrap{ max-width:720px; margin:0 auto; }
.lead-intro{ text-align:center; margin-bottom:2em; }
#lead-form-container{ background:var(--steel); border:1px solid var(--border-gray); padding:34px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:600px){ .form-row{ grid-template-columns:1fr; } }
.field{ margin-bottom:18px; }
.field label{
  display:block; font-family:var(--font-head); text-transform:uppercase;
  font-size:.78rem; letter-spacing:.05em; margin-bottom:6px; color:var(--off-white);
}
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; background:var(--black); border:1px solid var(--border-gray);
  color:var(--white); font-family:var(--font-body); font-size:.95rem;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--accent); border-color:var(--accent); }
.field textarea{ resize:vertical; min-height:110px; }
.honeypot{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }
.form-disclaimer{ font-size:.78rem; color:#b7b7b7; margin-top:10px; }
.thank-you{ text-align:center; padding:30px 10px; }
.thank-you h3{ color:var(--white); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--black); color:#a9a9a9; padding:50px 0 24px; border-top:3px solid var(--accent); }
.footer-grid{ display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:34px; margin-bottom:30px; }
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{ color:var(--white); font-size:.9rem; margin-bottom:.8em; }
.footer-grid ul{ list-style:none; padding:0; margin:0; }
.footer-grid li{ margin-bottom:6px; }
.footer-grid a{ color:#a9a9a9; font-size:.9rem; }
.footer-grid a:hover{ color:var(--accent); }
.footer-cities{ font-size:.85rem; line-height:1.8; color:#8b8b8b; }
.footer-bottom{ border-top:1px solid var(--steel); padding-top:20px; font-size:.8rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.footer-brandtext{ font-family:var(--font-head); text-transform:uppercase; letter-spacing:.04em; color:#8b8b8b; }

/* ---------- Blog ---------- */
.blog-card{ border:1px solid #ddd; border-top:4px solid var(--accent); padding:24px; background:#fff; }
.blog-meta{ font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); margin-bottom:.4em; font-family:var(--font-head); }
.article-body h2{ font-size:1.5rem; }
.article-body h3{ font-size:1.15rem; }
.article-wrap{ max-width:760px; margin:0 auto; }
.article-header{ max-width:760px; margin:0 auto 2em; }
.tag-row{ display:flex; gap:10px; flex-wrap:wrap; margin:18px 0; }
.tag{ background:var(--steel); color:var(--off-white); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; padding:5px 10px; font-family:var(--font-head); }

/* ---------- Misc ---------- */
.divider{ height:1px; background:#ddd; margin:2.4em 0; }
.two-col{ display:grid; grid-template-columns:1.3fr 1fr; gap:40px; }
@media (max-width:840px){ .two-col{ grid-template-columns:1fr; } }
.stat-strip{ background:var(--steel); color:var(--white); padding:20px 0; }
.stat-strip .container{ display:flex; gap:34px; flex-wrap:wrap; justify-content:center; text-align:center; font-family:var(--font-head); text-transform:uppercase; letter-spacing:.03em; font-size:.92rem; }
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--accent); color:#fff; padding:10px 16px; z-index:2000; }
.skip-link:focus{ left:10px; top:10px; }