/* ===================================================
   Safety Shine Maintenance Inc
   Post Construction Cleaning Services
   style.css – color-matched to logo palette
   Navy #0b2a4a | Gold #f4b400 | Gray #6b7280
   =================================================== */

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: 'Segoe UI', Arial, sans-serif; color: #1e2a38; background: #fff; line-height: 1.65; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
/* ── CSS VARIABLES ── */
:root {
  --navy:    #0b2a4a;
  --navy-dk: #071e35;
  --navy-md: #103d6a;
  --blue2:   #1a4a7a;
  --gold:    #f4b400;
  --gold-lt: #f7c933;
  --gold-dk: #c99200;
  --gray:    #6b7280;
  --gray1:   #f8fafc;
  --gray2:   #e2e8f0;
  --gray3:   #94a3b8;
  --text:    #1e2a38;
  --muted:   #4a5a70;
  --white:   #ffffff;
  --radius:  6px;
  --shadow:  0 2px 14px rgba(11,42,74,.10);
  --transition: .2s ease;
}
/* ── TYPOGRAPHY ── */
h1,h2,h3,h4 { line-height: 1.2; font-weight: 700; color: var(--navy); }
h1 { font-size: clamp(1.8rem,4vw,2.9rem); }
h2 { font-size: clamp(1.5rem,3vw,2.2rem); }
h3 { font-size: 1.2rem; }
p  { color: var(--muted); margin-bottom: .9rem; }
p:last-child { margin-bottom: 0; }
/* ── LAYOUT ── */
.container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.section    { padding: 72px 0; }
.section-label {
  display: inline-block;
  font-size: .72rem; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--blue2);
  margin-bottom: 10px;
}
.text-center { text-align: center; }
/* ── BUTTONS ── */
.btn {
  display: inline-block;
  padding: 13px 28px; border-radius: var(--radius);
  font-weight: 700; font-size: .95rem; letter-spacing: .3px;
  cursor: pointer; border: 2px solid transparent;
  transition: background var(--transition), color var(--transition), transform var(--transition);
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn-gold   { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: var(--gold-lt); }
.btn-navy   { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--blue2); }
.btn-outline { border-color: rgba(255,255,255,.5); color: var(--white); background: transparent; }
.btn-outline:hover { background: rgba(255,255,255,.12); border-color: var(--white); }
.btn-lg { padding: 16px 36px; font-size: 1.05rem; }
.btn-block { display: block; width: 100%; }
/* ── HEADER / NAV ── */
header {
  background: var(--navy);
  position: sticky; top: 0; z-index: 1000;
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.nav-topbar {
  background: var(--navy-dk);
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 100px;
}
/* ── LOGO – HEADER ── */
.site-logo-link {
  display: flex; align-items: center; flex-shrink: 0;
  line-height: 0; text-decoration: none;
}
.site-logo {
  height: 90px; width: auto;
  object-fit: contain; object-position: left center;
  display: block;
  /* white background strip so navy logo shows on dark header */
  background: var(--white);
  border-radius: 6px;
  padding: 4px 8px;
}
/* ── LOGO – FOOTER ── */
.footer-logo {
  height: 50px; width: auto;
  object-fit: contain; object-position: left center;
  display: block;
  background: var(--white);
  border-radius: 4px;
  padding: 3px 6px;
}
/* ── NAV MENU ── */
.nav-menu { display: flex; gap: 6px; align-items: center; }
.nav-menu a {
  color: #b8c9df; font-size: .875rem; font-weight: 600;
  padding: 8px 12px; border-radius: 4px;
  transition: color var(--transition), background var(--transition);
}
.nav-menu a:hover,
.nav-menu a.active { color: var(--white); background: rgba(255,255,255,.08); }
.nav-cta {
  background: var(--gold) !important;
  color: var(--navy) !important;
  border-radius: var(--radius) !important;
  font-weight: 800 !important;
}
.nav-cta:hover { background: var(--gold-lt) !important; transform: translateY(-1px); }
/* Hamburger */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--white); margin: 5px 0; transition: .3s; }
/* ── HERO ── */
.hero {
  background: linear-gradient(135deg, var(--navy-dk) 0%, var(--navy) 55%, var(--navy-md) 100%);
  color: var(--white); padding: 90px 0 80px; position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Crect x='0' y='0' width='2' height='2'/%3E%3Crect x='40' y='40' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E");
}
.hero-inner { position: relative; z-index: 1; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(244,180,0,.15); border: 1px solid rgba(244,180,0,.45);
  color: var(--gold-lt); font-size: .78rem; font-weight: 700; letter-spacing: 2px;
  padding: 5px 14px; border-radius: 2px; margin-bottom: 20px; text-transform: uppercase;
}
.hero h1 { font-size: clamp(2rem,4.5vw,3.2rem); color: var(--white); margin-bottom: 18px; }
.hero h1 span { color: var(--gold); }
.hero p { font-size: 1.1rem; color: #90aace; max-width: 600px; margin-bottom: 32px; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-stats {
  display: flex; gap: 40px; flex-wrap: wrap;
  margin-top: 56px; padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.hero-stat strong { display: block; font-size: 2rem; font-weight: 800; color: var(--gold); }
.hero-stat span   { font-size: .82rem; color: #6a8aaa; letter-spacing: .5px; }
/* ── PAGE HERO (inner pages) ── */
.page-hero {
  background: linear-gradient(130deg, var(--navy-dk), var(--navy), var(--navy-md));
  color: var(--white); padding: 64px 0 56px;
}
.page-hero h1 { color: var(--white); margin-bottom: 14px; }
.page-hero p  { color: #90aace; font-size: 1.05rem; max-width: 640px; }
.page-hero .hero-badge { margin-bottom: 16px; }
/* ── TRUST BAR ── */
.trust-bar { background: var(--blue2); padding: 14px 0; }
.trust-bar-inner {
  display: flex; gap: 32px; flex-wrap: wrap;
  align-items: center; justify-content: center;
}
.trust-item {
  display: flex; align-items: center; gap: 8px;
  color: var(--white); font-size: .85rem; font-weight: 600; letter-spacing: .4px;
}
.trust-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
/* ── CARDS ── */
.card {
  background: var(--white); border-radius: var(--radius);
  border: 1px solid var(--gray2); box-shadow: var(--shadow);
  padding: 28px 24px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover { box-shadow: 0 8px 32px rgba(11,42,74,.14); transform: translateY(-3px); }
.card-icon { font-size: 2.2rem; margin-bottom: 14px; }
.card h3   { color: var(--navy); margin-bottom: 8px; }
.card p    { font-size: .9rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.grid-auto    { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 20px; }
.grid-auto-sm { display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 12px; }
/* ── SECTION BG ── */
.bg-gray  { background: var(--gray1); }
.bg-navy  { background: var(--navy); }
.bg-navy h2 { color: var(--white); }
.bg-navy .section-label { color: var(--gold); }
.bg-navy p { color: #8aaccc; }
/* ── PROCESS STEPS ── */
.step-num {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--gold); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 800; margin: 0 auto 16px;
}
.step { text-align: center; }
.step h3 { color: var(--white); margin-bottom: 10px; }
/* ── CHECKLIST ── */
.checklist { list-style: none; margin: 0; }
.checklist li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--gray2);
  font-size: .93rem; color: var(--muted);
}
.checklist li:last-child { border-bottom: none; }
.checklist li::before { content: '✔'; color: var(--gold); font-weight: 700; flex-shrink: 0; margin-top: 2px; }
/* ── FORM ── */
.form-card {
  background: var(--white); border-radius: var(--radius);
  padding: 36px 32px; box-shadow: var(--shadow);
}
.form-card h3 { color: var(--navy); margin-bottom: 22px; font-size: 1.4rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block; font-size: .78rem; font-weight: 700; color: var(--muted);
  letter-spacing: .5px; margin-bottom: 5px; text-transform: uppercase;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; border: 1px solid var(--gray2); border-radius: var(--radius);
  padding: 10px 14px; font-size: .95rem; color: var(--text);
  font-family: inherit; outline: none; background: var(--gray1);
  transition: border-color var(--transition), background var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--gold); background: var(--white); }
.form-group textarea { resize: vertical; min-height: 100px; }
.form-note { font-size: .76rem; color: var(--gray3); text-align: center; margin-top: 10px; }
/* ── SIDEBAR ── */
.sidebar-card {
  background: var(--gray1); border-radius: var(--radius);
  border: 1px solid var(--gray2); padding: 26px 22px; margin-bottom: 20px;
}
.sidebar-card h3 { color: var(--navy); margin-bottom: 16px; font-size: 1.1rem; }
.sidebar-cta {
  display: block; background: var(--gold); color: var(--navy);
  text-align: center; font-weight: 800; padding: 12px 18px;
  border-radius: var(--radius); margin-bottom: 10px;
  transition: background var(--transition);
}
.sidebar-cta:hover { background: var(--gold-lt); }
.sidebar-phone {
  display: block; border: 2px solid var(--navy); color: var(--navy);
  text-align: center; font-weight: 700; padding: 10px 18px;
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition);
}
.sidebar-phone:hover { background: var(--navy); color: var(--white); }
.link-list li { padding: 7px 0; border-bottom: 1px solid var(--gray2); }
.link-list li:last-child { border-bottom: none; }
.link-list a { font-size: .9rem; color: var(--blue2); font-weight: 600; }
.link-list a:hover { color: var(--gold-dk); text-decoration: underline; }
/* ── CITY PILLS ── */
.city-pill {
  display: block; background: var(--white); border: 1px solid var(--gray2);
  border-radius: var(--radius); padding: 11px 14px;
  text-align: center; font-size: .86rem; font-weight: 600; color: var(--navy);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.city-pill:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
/* ── BREADCRUMB ── */
.breadcrumb { font-size: .8rem; color: var(--gray3); margin-bottom: 20px; }
.breadcrumb a { color: var(--gold); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { margin: 0 6px; }
/* ── HIGHLIGHT BOX ── */
.highlight-box {
  background: #eef4ff; border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 20px; margin: 24px 0;
}
.highlight-box p { color: var(--text); font-size: .94rem; margin: 0; }
/* ── FAQ ── */
.faq-item { border-bottom: 1px solid var(--gray2); padding: 20px 0; }
.faq-q { font-weight: 700; color: var(--navy); font-size: 1rem; cursor: pointer; }
.faq-a { font-size: .93rem; color: var(--muted); margin-top: 10px; line-height: 1.7; }
/* ── CONTENT LAYOUT ── */
.content-with-sidebar { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
.content-area h2 { margin: 36px 0 14px; }
.content-area h2:first-child { margin-top: 0; }
.content-area h3 { color: var(--navy); margin: 24px 0 10px; }
.content-area p  { font-size: .98rem; }
.content-area ul { margin: 12px 0 16px 0; }
.content-area ul li { font-size: .96rem; color: var(--muted); padding: 5px 0 5px 20px; position: relative; }
.content-area ul li::before { content: '▸'; position: absolute; left: 0; color: var(--gold); }
.sticky-sidebar { position: sticky; top: 120px; }
/* ── FOOTER ── */
footer { background: #040f1e; color: #5a7898; padding: 60px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer-brand p { font-size: .88rem; line-height: 1.7; }
footer h4 { color: var(--white); font-size: .9rem; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 16px; }
footer ul li { margin-bottom: 8px; }
footer ul li a { font-size: .86rem; color: #5a7898; transition: color var(--transition); }
footer ul li a:hover { color: var(--gold); }
.footer-bottom {
  border-top: 1px solid #0b2a4a; padding-top: 24px;
  text-align: center; font-size: .78rem; color: #2a4060;
}
/* ── LOGO (text fallback, legacy) ── */
.logo {
  font-size: 1.25rem; font-weight: 800; color: var(--white);
  letter-spacing: .5px; white-space: nowrap;
}
.logo span { color: var(--gold); }
/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
.grid-4 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .nav-wrap { height: 80px; }
.site-logo { height: 65px; padding: 3px 6px; }
.nav-menu {
    display: none; position: absolute; top: 106px; left: 0; right: 0;
    background: var(--navy); padding: 16px; flex-direction: column; gap: 4px;
  }
.nav-menu.open { display: flex; }
.nav-toggle { display: block; }
.hero { padding: 60px 0 50px; }
.hero-stats { gap: 24px; }
.content-with-sidebar { grid-template-columns: 1fr; }
.sticky-sidebar { position: static; top: auto; }
.grid-2, .grid-3 { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: 32px; }
.section { padding: 52px 0; }
}
@media (max-width: 480px) {
  .hero-btns { flex-direction: column; }
.hero-btns .btn { text-align: center; }
.footer-grid { grid-template-columns: 1fr; }
}
/* Skip link — visually hidden until keyboard focus (no layout impact) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;background:#f4b400;color:#0b2a4a;
  padding:10px 18px;font-weight:700;text-decoration:none;border-radius:0 0 6px 0;}
.skip-link:focus{left:0;}
#main-content:focus{outline:none;}

/* ── LAYOUT-SHIFT RESERVATION (Core Web Vitals / CLS) ──
   #site-header and #site-footer are filled by nav.js after the document parses.
   Empty, they occupy zero height, so every element below them jumps down once the
   script runs. Reserving the measured height keeps CLS at zero without changing
   the rendered design. Values measured in Chromium at each breakpoint. */
#site-header { min-height: 135px; }
@media (max-width: 1024px) { #site-header { min-height: 115px; } }
#site-footer { min-height: 934px; }
@media (max-width: 1024px) { #site-footer { min-height: 2138px; } }
@media (max-width: 480px)  { #site-footer { min-height: 2207px; } }

/* ── REMOVED: testimonial component ──
   .testi-card, .stars, .testi-author, .testi-role and .industry-badge styled a
   testimonial/badge block that this site does not use, because we publish no
   reviews or ratings. Their rules are stripped at build time rather than shipped
   as dead CSS. */

/* ── SPLIT CONTENT + FORM ──
   Replaces inline fixed-pixel grid columns that bypassed the media queries and
   caused horizontal overflow below ~700px. Desktop layout is unchanged. */
.split-form { display: grid; gap: 60px; }
.split-form--420 { grid-template-columns: 1fr 420px; align-items: center; }
.split-form--380 { grid-template-columns: 1fr 380px; align-items: start; }
@media (max-width: 900px) {
  .split-form--420, .split-form--380 {
    grid-template-columns: 1fr; gap: 36px; align-items: start;
  }
}
/* Grid children default to min-width:auto, so a long word can force a track
   wider than its 1fr share and push the row past the viewport. */
.grid-2 > *, .grid-3 > *, .grid-4 > *,
.grid-auto > *, .grid-auto-sm > * { min-width: 0; }
.card h3, .card p { overflow-wrap: break-word; }

@media (max-width: 600px) {
  .grid-4 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .form-card { padding: 26px 20px; }
  /* minmax(160px) forced two tracks wider than the viewport at 320-360px */
  .grid-auto-sm { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  .grid-auto    { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}