/* Sadler Welding LLC — Rustic Steel theme */
:root{
  --bg: #0b0d10;        /* deep charcoal */
  --bg-2: #111419;      /* charcoal+ */
  --card: #0c0f14;      /* card charcoal */
  --ink: #e8edf2;       /* near-white ink */
  --muted: #a8b2bb;     /* cool gray */
  --brand: #b08d57;     /* bronze (primary CTA) */
  --accent: #c9d0d6;    /* brushed steel (secondary) */
  --accent-2: #8aa5b5;  /* cool steel highlight */
  --radius: 14px;
  --maxw: 1100px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:"Outfit", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height:1.5}
img{max-width:100%;display:block}
a{color:var(--ink);text-decoration:none}
.muted{color:var(--muted)}

.site-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(120%) blur(8px);
  background:linear-gradient(180deg, rgba(8,10,12,.9), rgba(8,10,12,.6));
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px}
.logo{filter:drop-shadow(0 6px 14px rgba(192,202,210,.25))}

.nav-menu{display:flex; gap:18px; list-style:none; margin:0; padding:0; align-items:center}
.nav-toggle{display:none; background:none; border:0; width:40px; height:40px; position:relative; cursor:pointer}
.nav-toggle span{position:absolute; left:8px; right:8px; height:2px; background:var(--ink); transition:.25s}
.nav-toggle span:nth-child(1){top:12px}
.nav-toggle span:nth-child(2){top:19px}
.nav-toggle span:nth-child(3){top:26px}

.btn, .btn-outline, .btn-small{
  display:inline-block; padding:12px 18px; border-radius:999px; font-weight:600; border:1px solid transparent;
}
.btn{background:var(--brand); color:#1b140a; box-shadow:var(--shadow)}
.btn:hover{transform:translateY(-1px);}
.btn-outline{border-color:rgba(201,208,214,.35); color:var(--ink)}
.btn-outline:hover{border-color:rgba(201,208,214,.6)}
.btn-small{padding:8px 12px; border-color:rgba(201,208,214,.35)}

.hero{
  background:
    radial-gradient(1200px 400px at 20% 10%, rgba(201,208,214,.10), transparent 60%),
    radial-gradient(1200px 400px at 80% 10%, rgba(176,141,87,.14), transparent 60%);
  padding: clamp(60px, 12vw, 160px) 18px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hero-inner{max-width:var(--maxw); margin:0 auto; text-align:center}
.hero h1{font-family:"Alfa Slab One", system-ui; font-size: clamp(38px, 7vw, 64px); line-height:1.0; margin:0 0 12px}
.hero .sub{font-family:"Outfit"; font-weight:300; font-size: clamp(16px, 2.8vw, 22px); letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.hero p{max-width:820px; margin:0 auto 20px; color:var(--muted); font-size: clamp(16px, 2.6vw, 18px)}
.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

.section{padding: 56px 18px}
.section.alt{background:var(--bg-2); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06)}
.section-head{max-width:var(--maxw); margin:0 auto 22px}
.section h2{margin:0 0 6px; font-size: clamp(26px, 3.6vw, 36px)}
.section p{margin:0; color:var(--muted)}

.cards{max-width:var(--maxw); margin:24px auto 0; display:grid; gap:16px; grid-template-columns:repeat(3, 1fr)}
.card{background:linear-gradient(180deg, rgba(15,18,22,1), rgba(13,16,20,1)); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.card h3{margin:0 0 6px; font-size:20px}
.feature-list{margin:10px 0 0 16px; color:var(--muted)}
.card::after{
  content:""; display:block; height:3px; width:48px; margin-top:14px;
  background:linear-gradient(90deg, var(--accent), var(--brand));
  border-radius:999px;
}

.gallery{max-width:var(--maxw); margin:24px auto 0; display:grid; gap:10px; grid-template-columns:repeat(3, 1fr)}
.gallery figure{margin:0; border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,.06)}

.split{max-width:var(--maxw); margin:0 auto; display:grid; gap:24px; grid-template-columns: 1.7fr 1fr}
.about-card{
  background:linear-gradient(180deg, rgba(15,18,22,1), rgba(13,16,20,1));
  border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:20px
}
.about-card h3{color:var(--accent)}

.contact .form{max-width:760px; margin:20px auto 0}
.form-row{display:flex; flex-direction:column; gap:8px; margin:12px 0}
.form-row input, .form-row textarea{
  background:#0a0d10; color:var(--ink);
  border:1px solid rgba(201,208,214,.25); border-radius:10px;
  padding:12px 14px; font:inherit;
}
.form-row input:focus, .form-row textarea:focus{outline:2px solid rgba(176,141,87,.45); outline-offset:1px}
.form-actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:6px}
.form-note{color:var(--muted); font-size:14px}

.site-footer{border-top:1px solid rgba(255,255,255,.06); padding:30px 18px; text-align:center; color:var(--muted)}

.small{font-size:14px}

@media (max-width: 900px){
  .cards{grid-template-columns: 1fr 1fr}
  .gallery{grid-template-columns: 1fr 1fr}
  .split{grid-template-columns: 1fr}
  .nav-toggle{display:block}
  .nav-menu{position:fixed; top:64px; right:18px; background:var(--card); padding:10px; border-radius:12px; border:1px solid rgba(255,255,255,.08); flex-direction:column; gap:12px; min-width:200px; display:none}
  .nav-menu.open{display:flex}
}