/* ═══ TEMPLATE B — DIRECT ACTION — SHARED STYLESHEET ═══
   Best fit: trades / home services (plumbing, electrical, HVAC,
   contracting, auto repair). Phone-number-forward, bold, industrial.
   Multi-page site: index.html, services.html, about.html, contact.html
   all share this stylesheet. Keep the persistent phone bar, the icon
   tile grid (not alternating rows), and the stat band. Do not soften
   this into Template A's narrative tone. See README.md for full guidance. */

:root {
  --navy:      #0F1E33;
  --navy-dark: #0A1523;
  --safety:    #E8A23D;
  --safety-dark: #C9871F;
  --red:       #D64545;
  --white:     #FFFFFF;
  --off-white: #F4F6F8;
  --ink:       #1A2433;
  --muted:     #5B6B7D;
  --border:    #DCE3EA;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Barlow', sans-serif; background: var(--white); color: var(--ink); line-height: 1.6; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
h1, h2, h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.01em; color: var(--navy); }
.container { max-width: 1160px; margin: 0 auto; padding: 0 2rem; }
section { padding: 5rem 0; }

/* TOP BAR — phone number ALWAYS visible on every page */
.top-bar { background: var(--navy-dark); color: var(--white); font-size: 0.85rem; }
.top-bar-inner { max-width: 1160px; margin: 0 auto; padding: 0.6rem 2rem; display: flex; justify-content: space-between; align-items: center; }
.top-bar a { color: var(--safety); font-weight: 600; }
.top-bar .hours { color: #A8B5C4; }

nav { background: var(--navy); padding: 1.1rem 0; }
.nav-inner { max-width: 1160px; margin: 0 auto; padding: 0 2rem; display: flex; justify-content: space-between; align-items: center; }
.nav-logo { font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--white); text-transform: uppercase; letter-spacing: 0.02em; display: flex; align-items: center; gap: 0.6rem; }
.nav-logo span { color: var(--safety); }
.nav-logo img { height: 44px; width: 44px; border-radius: 50%; background: var(--white); object-fit: cover; }
.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav-links a { color: #C7D2DD; font-size: 0.9rem; font-weight: 600; }
.nav-links a.current { color: var(--safety); }
.nav-cta { background: var(--safety); color: var(--navy-dark) !important; padding: 0.65rem 1.4rem; border-radius: 4px; font-weight: 700 !important; text-transform: uppercase; font-size: 0.82rem !important; }

/* PAGE HEADER — used on Services/About/Contact instead of the full hero */
.page-header { background: var(--navy); color: var(--white); padding: 3.5rem 0; text-align: center; }
.page-header h1 { color: var(--white); font-size: clamp(2rem, 4.5vw, 3rem); }
.page-header .hero-tag { margin-bottom: 1rem; }

/* HERO — full-bleed dark, giant phone number CTA (home page only) */
#hero { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%); color: var(--white); padding: 4.5rem 0; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
.hero-tag { display: inline-block; background: var(--red); color: var(--white); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.4rem 0.9rem; border-radius: 3px; margin-bottom: 1.5rem; }
#hero h1 { font-size: clamp(2.4rem, 5.5vw, 3.6rem); color: var(--white); margin-bottom: 1.25rem; }
#hero h1 .accent { color: var(--safety); }
#hero .sub { color: #B8C4D2; font-size: 1.05rem; max-width: 480px; margin-bottom: 2rem; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.btn-call { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--safety); color: var(--navy-dark); padding: 1.1rem 2rem; border-radius: 4px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.3rem; text-transform: uppercase; }
.btn-outline { border: 2px solid var(--white); color: var(--white); padding: 1rem 1.9rem; border-radius: 4px; font-weight: 700; text-transform: uppercase; font-size: 0.9rem; }

.hero-card { background: var(--white); border-radius: 6px; padding: 2rem; color: var(--ink); }
.hero-card h3 { font-size: 1.3rem; margin-bottom: 1rem; }
.hero-card .form-group { margin-bottom: 1rem; }
.hero-card input, .hero-card select, .hero-card textarea { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 4px; font-family: 'Barlow', sans-serif; font-size: 0.95rem; }
.hero-card textarea { resize: vertical; min-height: 90px; }
.hero-card .btn-submit { width: 100%; background: var(--navy); color: var(--white); padding: 0.9rem; border-radius: 4px; font-weight: 700; text-transform: uppercase; text-align: center; margin-top: 0.5rem; font-size: 0.95rem; border: none; cursor: pointer; }

/* TRUST STRIP — horizontal bar, not floating badges */
.trust-strip { background: var(--off-white); border-top: 4px solid var(--safety); border-bottom: 1px solid var(--border); }
.trust-strip-inner { max-width: 1160px; margin: 0 auto; padding: 1.5rem 2rem; display: flex; justify-content: space-around; flex-wrap: wrap; gap: 1.5rem; text-align: center; }
.trust-item { font-size: 0.85rem; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: 0.02em; }
.trust-item span { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 1.8rem; color: var(--safety-dark); font-weight: 800; }

/* SERVICES — big icon tiles, NO body paragraphs, action-oriented labels only */
.section-header { text-align: center; margin-bottom: 3rem; }
.section-header .eyebrow { color: var(--red); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; display: block; margin-bottom: 0.5rem; }
.service-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }
.service-tile { background: var(--navy); color: var(--white); padding: 2rem 1.5rem; border-radius: 6px; text-align: center; transition: 0.2s; }
.service-tile:hover { background: var(--navy-dark); transform: translateY(-4px); }
.service-tile .icon-box { width: 56px; height: 56px; background: var(--safety); border-radius: 50%; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; }
.service-tile h3 { color: var(--white); font-size: 1.1rem; margin-bottom: 0; }
.service-tile p { color: #B8C4D2; font-size: 0.85rem; margin-top: 0.5rem; text-transform: none; font-family: 'Barlow', sans-serif; font-weight: 400; letter-spacing: normal; }

/* STAT BAND — numbers, not paragraphs */
#stats { background: var(--safety); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
.stat-num { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 800; color: var(--navy-dark); line-height: 1; }
.stat-label { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; color: var(--navy); margin-top: 0.5rem; }

/* PROCESS — horizontal steps with connecting line, industrial feel */
.step-track { display: flex; justify-content: space-between; position: relative; }
.step-track::before { content: ''; position: absolute; top: 28px; left: 5%; right: 5%; height: 3px; background: var(--border); z-index: 0; }
.step { position: relative; z-index: 1; text-align: center; flex: 1; padding: 0 1rem; }
.step-circle { width: 56px; height: 56px; border-radius: 50%; background: var(--safety); color: var(--navy-dark); font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; border: 4px solid var(--white); }
.step h4 { font-size: 1.05rem; color: var(--navy); margin-bottom: 0.4rem; }
.step p { font-size: 0.85rem; color: var(--muted); }

/* ABOUT PAGE — credentials list, direct/plain tone, no narrative drop-cap */
.about-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.about-visual { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--navy), var(--navy-dark)); border-radius: 6px; }
.about-text p { color: var(--muted); margin-bottom: 1.25rem; font-size: 1rem; }
.credentials-list { list-style: none; margin-top: 1.5rem; }
.credentials-list li { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; font-weight: 600; color: var(--navy); font-size: 0.95rem; }
.credentials-list li::before { content: '✓'; color: var(--safety-dark); font-weight: 800; font-size: 1.1rem; }

/* CONTACT PAGE */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.contact-details { background: var(--off-white); border-radius: 6px; padding: 2rem; }
.contact-details h3 { font-size: 1.2rem; margin-bottom: 1.25rem; }
.contact-detail { margin-bottom: 1.25rem; }
.contact-detail .label { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); display: block; margin-bottom: 0.3rem; font-weight: 700; }
.contact-detail .value { font-size: 1rem; color: var(--ink); font-weight: 600; }
.contact-form { display: flex; flex-direction: column; gap: 1rem; }
.form-group label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--navy); display: block; margin-bottom: 0.4rem; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: 4px;
  font-family: 'Barlow', sans-serif; font-size: 0.95rem; background: var(--white); color: var(--ink);
}
.form-group textarea { resize: vertical; min-height: 120px; }

/* URGENCY CTA — bold, red-accented, phone-first, not a soft form */
#cta { background: var(--navy-dark); color: var(--white); text-align: center; }
#cta h2 { color: var(--white); font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 1rem; }
#cta p { color: #B8C4D2; margin-bottom: 2rem; }

footer { background: var(--navy); color: #8FA0B5; text-align: center; padding: 2.5rem 2rem; }
.footer-logo { font-family: 'Barlow Condensed', sans-serif; font-size: 1.3rem; color: var(--white); text-transform: uppercase; font-weight: 800; }
.footer-links { display: flex; justify-content: center; gap: 1.75rem; list-style: none; margin: 1rem 0; }
.footer-links a { font-size: 0.8rem; color: #8FA0B5; text-transform: uppercase; font-weight: 600; }
.footer-links a:hover { color: var(--safety); }
footer p { font-size: 0.8rem; margin-top: 1rem; }

@media (max-width: 850px) {
  .hero-grid, .stats-grid, .about-layout, .contact-layout { grid-template-columns: 1fr; }
  .step-track { flex-direction: column; gap: 2rem; }
  .step-track::before { display: none; }
  .top-bar-inner { flex-direction: column; gap: 0.3rem; text-align: center; }
  .nav-links { display: none; }
}