/* Gus Automotive — gusauto.css
   Design system based on MechanicPro (mechanicpro.foxthemes.me) aesthetic.
   Palette  : #1c1c18 (warm near-black) · #dd9142 (amber) · #2e2925 (footer) · #fff
   Fonts    : Roboto Slab (headings/body) · Lato (nav/buttons)
   Radius   : 0 everywhere — sharp industrial corners
   Buttons  : flat rect + box-shadow: 0 5px 0 0 #8d5e2d (press-coin effect)
*/

/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
img{max-width:100%;height:auto;display:block}

/* ── Design tokens ──────────────────────────────────────── */
:root{
  --amber:     #dd9142;
  --amber-dark:#8d5e2d;
  --amber-soft:#f5e6d0;
  /* Accessible amber: passes 4.5:1 on white/light backgrounds (WCAG AA) */
  --amber-accessible: #a05a1a;
  --ink:       #1c1c18;
  --ink-light: #2a2a24;
  --footer-bg: #2e2925;
  --card-bg:   #f7f7f7;
  --card-border:#ececec;
  --muted:     #686868;
  --body-text: #404040;
  --white:     #ffffff;
  --light-bg:  #f4f4f0;
}

/* ── Base ───────────────────────────────────────────────── */
body{
  font-family: "Roboto Slab", Georgia, serif;
  color: var(--body-text);
  background: var(--white);
  line-height: 1.7;
  font-size: 16px;
}
h1,h2,h3,h4,h5,h6{
  font-family: "Roboto Slab", Georgia, serif;
  font-weight: 700;
  line-height: 1.15;
  color: var(--white);
}
a{ color: var(--amber-accessible); text-decoration: none; }
a:hover{ color: var(--amber-dark); }
p{ color: var(--body-text); line-height: 1.75; }

/* ── Layout ─────────────────────────────────────────────── */
.wrap{ max-width: 1160px; margin: 0 auto; padding: 0 28px; }

/* ── Buttons ────────────────────────────────────────────── */
.btn{
  display: inline-block;
  padding: 13px 44px 17px;
  border-radius: 0;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: opacity .15s, box-shadow .1s;
  line-height: 1;
  position: relative;
  top: 0;
}
.btn-amber{
  background: var(--amber);
  color: var(--white);
  box-shadow: 0 5px 0 0 var(--amber-dark);
}
.btn-amber:hover{
  color: var(--white);
  opacity: .9;
  top: 2px;
  box-shadow: 0 3px 0 0 var(--amber-dark);
}
.btn-dark{
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 5px 0 0 #000;
}
.btn-dark:hover{
  color: var(--white);
  opacity: .9;
  top: 2px;
  box-shadow: 0 3px 0 0 #000;
}
.btn-outline-white{
  background: transparent;
  color: var(--white);
  border: 2px solid var(--white);
  box-shadow: none;
  padding: 11px 42px 11px;
}
.btn-outline-white:hover{
  background: var(--white);
  color: var(--ink);
}

/* ── Section divider icon ───────────────────────────────── */
/* Wrench unicode between heading and body — amber on dark, accessible amber on light */
.divider-icon{
  display: block;
  font-size: 28px;
  color: var(--amber-accessible);
  margin: 12px 0 20px;
  line-height: 1;
}

/* ── Topbar ─────────────────────────────────────────────── */
.topbar{
  background: var(--amber);
  color: var(--ink);
  font-family: "Lato", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 7px 0;
  text-align: center;
}
.topbar .wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.topbar a{ color: var(--ink); }
.topbar a:hover{ opacity: .7; color: var(--ink); }

/* ── Header / Nav ───────────────────────────────────────── */
header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--ink);
}
.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 28px;
  max-width: 1160px;
  margin: 0 auto;
}
.brand img{
  height: 54px;
  width: auto;
  display: block;
}
nav.main{
  display: flex;
  align-items: center;
  gap: 2px;
}
nav.main a{
  font-family: "Lato", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white);
  padding: 10px 14px;
  border-bottom: 3px solid transparent;
  transition: border-color .15s, opacity .15s;
}
nav.main a:hover{ border-bottom-color: var(--amber); color: var(--white); }
nav.main a.active{ border-bottom-color: var(--amber); }
.nav-cta{ margin-left: 10px !important; border-bottom: none !important; }

/* ── Services dropdown (removed) ───────────────────────── */

/* ── Hero (parallax) ────────────────────────────────────── */
.hero{
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ink);
}
.hero-bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 35%;
  background-attachment: fixed;
  opacity: 1;
}
.hero-overlay{
  position: absolute;
  inset: 0;
  background: rgba(29,22,17,.72);
}
.hero-content{
  position: relative;
  z-index: 2;
  padding: 100px 28px;
  max-width: 1160px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.hero-text{
  max-width: 560px;
}
.hero h1{
  font-size: clamp(34px, 4.5vw, 52px);
  color: var(--white);
  margin-bottom: 18px;
  line-height: 1.12;
}
.hero h1 b{ font-weight: 700; color: var(--amber); }
.hero p.lead{
  font-family: "Lato", sans-serif;
  font-size: 17px;
  color: rgba(255,255,255,.82);
  margin-bottom: 32px;
  font-weight: 300;
}
.hero-cta{ display: flex; gap: 16px; flex-wrap: wrap; }

/* ── Section base ───────────────────────────────────────── */
.section{ padding: 90px 0; }
.section-sm{ padding: 56px 0; }
.section-dark{ background: var(--ink); }
.section-darker{ background: var(--ink-light); }
.section-light{ background: var(--light-bg); }
.section-white{ background: var(--white); }

/* ── Section header ─────────────────────────────────────── */
.section-header{ margin-bottom: 52px; text-align: center; }
.section-header.left{ text-align: left; }
.section-header h2{
  font-size: clamp(28px, 3vw, 40px);
  margin-bottom: 0;
}
.section-dark .section-header h2,
.section-darker .section-header h2{ color: var(--white); }
.section-light .section-header h2,
.section-white .section-header h2{ color: var(--ink); }
.section-header .subtitle{
  font-family: "Lato", sans-serif;
  font-size: 16px;
  font-weight: 300;
  margin-top: 14px;
  max-width: 58ch;
  margin-left: auto;
  margin-right: auto;
}
.section-dark .section-header .subtitle,
.section-darker .section-header .subtitle{ color: rgba(255,255,255,.55); }
.section-light .section-header .subtitle,
.section-white .section-header .subtitle{ color: var(--muted); }
.section-header.left .subtitle{ margin-left: 0; margin-right: 0; }

/* ── Service cards grid ─────────────────────────────────── */
.services-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 22px;
}
.service-card{
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  padding: 36px 24px 30px;
  text-align: center;
  transition: border-color .18s;
}
.service-card:hover{ border-color: var(--amber); }
.service-card .s-icon{
  font-size: 48px;
  color: var(--ink);
  margin-bottom: 18px;
  display: block;
  line-height: 1;
}
.service-card h3{
  font-size: 17px;
  color: var(--amber-accessible);
  margin-bottom: 10px;
}
.service-card p{
  font-family: "Lato", sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.6;
}
.service-card a.card-link{
  display: inline-block;
  margin-top: 14px;
  font-family: "Lato", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--amber-accessible);
  border-bottom: 1px solid var(--amber-accessible);
  padding-bottom: 2px;
}
.service-card a.card-link:hover{ color: var(--amber-dark); border-color: var(--amber-dark); }

/* ── Split panel (dark text + full-height photo) ────────── */
.split-panel{
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
}
.split-panel .panel-text{
  background: var(--ink);
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.split-panel .panel-photo{
  background-size: cover;
  background-position: center;
  min-height: 480px;
}
.split-panel h2{ color: var(--white); font-size: clamp(24px, 2.8vw, 34px); margin-bottom: 16px; }
.split-panel p{ color: rgba(255,255,255,.72); font-family: "Lato", sans-serif; font-size: 15px; font-weight: 300; margin-bottom: 14px; }

/* ── Cert grid (About page) ─────────────────────────────── */
.cert-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.cert-card{
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  padding: 28px 24px;
}
.cert-card h3{
  font-size: 16px;
  color: var(--amber-accessible);
  margin-bottom: 10px;
}
.cert-card p{
  font-family: "Lato", sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.7;
}

/* ── What We Work On grid (About page) ──────────────────── */
.what-we-work-on-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
.info-block h3{
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 8px;
}
.info-block p{
  font-family: "Lato", sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.7;
}
.split-panel .quote-block{
  border-left: 3px solid var(--amber);
  padding: 14px 18px;
  margin: 20px 0;
  background: rgba(221,145,66,.08);
}
.split-panel .quote-block p{
  font-family: "Lato", sans-serif;
  font-style: italic;
  font-size: 16px;
  color: rgba(255,255,255,.88) !important;
  margin-bottom: 6px !important;
}
.split-panel .quote-block cite{
  font-family: "Lato", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--amber);
  font-style: normal;
}

/* ── Badges row ─────────────────────────────────────────── */
.badges-row{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.badge{
  font-family: "Lato", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white);
  border: 1px solid rgba(221,145,66,.5);
  padding: 6px 14px;
  background: rgba(221,145,66,.10);
}

/* Divider icon on dark backgrounds stays bright amber */
.split-panel .divider-icon,
.section-dark .divider-icon,
.section-darker .divider-icon{ color: var(--amber); }

/* ── Stats strip ────────────────────────────────────────── */
.stats-strip{ background: var(--amber); padding: 44px 0; }
.stats-row{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
  text-align: center;
}
.stat-item .number{
  font-family: "Roboto Slab", serif;
  font-size: 46px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 6px;
}
.stat-item .label{
  font-family: "Lato", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(28,28,24,.75);
}

/* ── Warranty strip ─────────────────────────────────────── */
.warranty-strip{ background: var(--ink-light); padding: 36px 0; text-align: center; }
.warranty-strip h3{ color: var(--amber); font-size: 22px; margin-bottom: 8px; }
.warranty-strip p{ color: rgba(255,255,255,.7); font-family: "Lato", sans-serif; font-size: 15px; max-width: 54ch; margin: 0 auto; }
.warranty-strip a{ color: var(--amber); }

/* ── Photo strip ────────────────────────────────────────── */
.photo-strip{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 300px;
  overflow: hidden;
}
.photo-strip img{ width: 100%; height: 300px; object-fit: cover; }

/* ── CTA full section ───────────────────────────────────── */
.cta-section{ padding: 90px 0; text-align: center; }
.cta-section h2{ font-size: clamp(26px, 3vw, 40px); margin-bottom: 14px; }
.section-dark .cta-section h2{ color: var(--white); }
.cta-section p{
  font-family: "Lato", sans-serif;
  font-size: 17px;
  font-weight: 300;
  max-width: 50ch;
  margin: 0 auto 32px;
  color: rgba(255,255,255,.7);
}
.cta-section .btn-row{ display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ── Page hero (inner pages) ────────────────────────────── */
.page-hero{
  background: var(--ink);
  padding: 70px 0 56px;
  position: relative;
  overflow: hidden;
}
.page-hero-bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: .18;
}
.page-hero .wrap{ position: relative; z-index: 2; }
.page-hero h1{ color: var(--white); font-size: clamp(28px, 4vw, 44px); margin-bottom: 12px; }
.page-hero p{ color: rgba(255,255,255,.65); font-family: "Lato", sans-serif; font-size: 16px; font-weight: 300; max-width: 56ch; }
.breadcrumb{
  font-family: "Lato", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 18px;
}
.breadcrumb a{ color: rgba(255,255,255,.72); }
.breadcrumb a:hover{ color: var(--amber); }

/* ── Info / process list ────────────────────────────────── */
.info-list{ list-style: none; }
.info-list li{
  display: flex;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 15px;
}
.section-light .info-list li,
.section-white .info-list li{ border-color: #e8e4de; }
.info-list li:last-child{ border-bottom: none; }
.info-list .icon{
  flex-shrink: 0;
  width: 26px;
  text-align: center;
  color: var(--amber);
  font-size: 16px;
  margin-top: 2px;
}
/* info-list used on warranty page with icon + body layout */
.info-list-icon{
  flex-shrink: 0;
  color: var(--amber);
  font-size: 18px;
  margin-top: 2px;
  min-width: 22px;
}
.info-list-body strong{
  display: block;
  font-family: "Roboto Slab", serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 5px;
}
.info-list-body p{
  font-family: "Lato", sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: rgba(255,255,255,.80);
  line-height: 1.7;
  margin: 0;
}
.section-white .info-list-body strong,
.section-light .info-list-body strong{ color: var(--ink); }
.section-white .info-list-body p,
.section-light .info-list-body p{ color: var(--muted); }

/* ── Warranty explain layout (section-dark) ─────────────── */
.warranty-explain-grid{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 52px;
  align-items: start;
}
.warranty-explain-text h2{
  color: var(--white);
  font-size: clamp(22px, 2.5vw, 32px);
  margin-bottom: 8px;
}
.warranty-explain-text p{
  font-family: "Lato", sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: rgba(255,255,255,.80);
  line-height: 1.75;
  margin-bottom: 14px;
}

/* ── Not-cover grid (section-light) ────────────────────── */
.not-cover-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
.not-cover-block h3{
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 8px;
}
.not-cover-block p{
  font-family: "Lato", sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.7;
}

/* ── Service detail layout ──────────────────────────────── */
.service-detail-grid{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 52px;
  align-items: start;
}
.service-list{ list-style: none; }
.service-list li{
  padding: 22px 0;
  border-bottom: 1px solid #e8e4de;
}
.service-list li:first-child{ padding-top: 0; }
.service-list li:last-child{ border-bottom: none; }
.service-list h3{ color: var(--ink); font-size: 18px; margin-bottom: 8px; }
.service-list h3 a{ color: var(--amber-accessible); }
.service-list h3 a:hover{ color: var(--amber-dark); }
.service-list p{ font-family: "Lato", sans-serif; font-size: 15px; font-weight: 300; color: var(--muted); }

/* ── Sidebar card ───────────────────────────────────────── */
.sidebar-card{
  background: var(--ink);
  padding: 32px;
  position: sticky;
  top: 80px;
}
.sidebar-card h3{ color: var(--amber); font-size: 18px; margin-bottom: 14px; }
.sidebar-card > p{
  font-family: "Lato", sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,.80) !important;
  margin-bottom: 18px;
  line-height: 1.6;
}
.sidebar-card .btn{ display: block; text-align: center; margin-bottom: 12px; }
.sidebar-hours{ margin-bottom: 4px; }
.hours-row{
  display: flex;
  justify-content: space-between;
  font-family: "Lato", sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,.80);
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hours-row:last-child{ border-bottom: none; }
.sidebar-card .hours-note{
  font-family: "Lato", sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,.65);
  margin-top: 14px;
  line-height: 1.6;
}
.sidebar-card .cert-list{
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cert-badge{
  font-family: "Lato", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--white);
  border: 1px solid rgba(221,145,66,.5);
  padding: 5px 10px;
  background: rgba(221,145,66,.10);
}
.sidebar-card .cert-list p{
  font-family: "Lato", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 8px;
}
.sidebar-card .cert-list span{
  display: block;
  font-family: "Lato", sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,.6);
  margin-bottom: 4px;
}

/* ── Does not offer block ───────────────────────────────── */
.not-offer{
  background: var(--ink-light);
  border-left: 4px solid var(--amber);
  padding: 28px 32px;
  margin-top: 32px;
}
.not-offer h3{ color: var(--white); font-size: 17px; margin-bottom: 10px; letter-spacing: .02em; }
.not-offer h4{ color: var(--amber); font-size: 15px; margin-bottom: 10px; letter-spacing: .05em; }
.not-offer p{ color: rgba(255,255,255,.82); font-family: "Lato", sans-serif; font-size: 14px; margin-bottom: 8px; }
.not-offer ul{ color: rgba(255,255,255,.82); font-family: "Lato", sans-serif; font-size: 14px; margin: 8px 0 8px 20px; }
.not-offer li{ color: rgba(255,255,255,.82); font-family: "Lato", sans-serif; font-size: 14px; margin-bottom: 6px; }
.not-offer strong{ color: var(--white); }

/* ── Contact layout ─────────────────────────────────────── */
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.hours-table{ width: 100%; border-collapse: collapse; }
.hours-table td{
  padding: 10px 0;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.75);
}
.section-white .hours-table td,
.section-light .hours-table td{ border-color: #e8e4de; color: var(--body-text); }
.hours-table td:last-child{ text-align: right; font-weight: 700; color: var(--white); }
.section-white .hours-table td:last-child,
.section-light .hours-table td:last-child{ color: var(--ink); }
.hours-table tr:last-child td{ border-bottom: none; }
.map-wrap{ margin-top: 24px; }
.map-wrap iframe{ display: block; width: 100%; height: 320px; border: none; }
.key-drop-note{
  background: rgba(221,145,66,.12);
  border: 1px solid rgba(221,145,66,.3);
  padding: 18px 22px;
  margin-top: 24px;
}
.key-drop-note h4{ color: var(--amber); font-size: 14px; margin-bottom: 6px; }
.key-drop-note strong{ display: block; color: var(--amber); font-family: "Lato", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
.key-drop-note p{ color: rgba(255,255,255,.80); font-family: "Lato", sans-serif; font-size: 13px; }

/* ── Contact page layout ────────────────────────────────── */
.contact-info-col{ display: flex; flex-direction: column; gap: 0; }

.hours-block{ margin-top: 28px; }
.hours-block h3{ color: var(--amber); font-family: "Lato", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }

.after-hours-note{
  font-family: "Lato", sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,.65);
  margin-top: 14px;
  line-height: 1.6;
}

.closed-row td{ color: rgba(255,255,255,.40) !important; }

.contact-phone-link{
  font-family: "Lato", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--amber) !important;
  letter-spacing: .02em;
}
.contact-phone-link:hover{ color: var(--amber-dark) !important; }

.key-drop-photo{ margin-top: 20px; }
.key-drop-photo img{ width: 100%; display: block; }
.key-drop-caption{
  font-family: "Lato", sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: rgba(255,255,255,.50);
  margin-top: 8px;
  line-height: 1.5;
}

/* ── Process list (What to Expect, section-white) ───────── */
.process-list{ counter-reset: none; }
.process-number{
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: var(--amber-accessible);
  color: var(--white);
  font-family: "Lato", sans-serif;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

/* ── Individual service page hero ───────────────────────── */
.service-page-hero{ position: relative; }
.service-page-back{
  font-family: "Lato", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--amber);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.service-page-back:hover{ color: var(--white); }
.service-body h2{ color: var(--ink); font-size: 26px; margin: 28px 0 10px; }
.service-body p{ font-family: "Lato", sans-serif; font-size: 15px; font-weight: 300; color: var(--muted); margin-bottom: 14px; }
.service-body ul{ font-family: "Lato", sans-serif; font-size: 15px; font-weight: 300; color: var(--muted); }
.service-body ul li{ margin-bottom: 7px; }

/* ── Footer ─────────────────────────────────────────────── */
footer{
  background: var(--footer-bg);
  padding: 72px 0 0;
  font-family: "Lato", sans-serif;
}
.footer-inner{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 56px;
}
footer h4{
  font-family: "Lato", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 18px;
}
footer p{
  font-size: 14px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255,255,255,.75);
}
footer a{
  display: block;
  font-size: 14px;
  font-weight: 300;
  color: rgba(255,255,255,.75);
  padding: 3px 0;
}
footer a:hover{ color: var(--amber); }
.footer-logo{ height: 54px; width: auto; margin-bottom: 16px; }
footer .service-area-list{
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,.72);
  line-height: 2;
}
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  font-weight: 300;
  color: rgba(191,186,176,.75);
}
.footer-bottom a{ display: inline; color: rgba(191,186,176,.75); font-size: 12px; }
.footer-bottom a:hover{ color: var(--amber); }

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width: 960px){
  .split-panel{ grid-template-columns: 1fr; }
  .split-panel .panel-photo{ min-height: 320px; }
  .split-panel .panel-text{ padding: 56px 36px; }
  .contact-grid{ grid-template-columns: 1fr; gap: 36px; }
  .service-detail-grid{ grid-template-columns: 1fr; gap: 32px; }
  .warranty-explain-grid{ grid-template-columns: 1fr; gap: 32px; }
  .footer-inner{ grid-template-columns: 1fr 1fr; }
  .photo-strip{ grid-template-columns: 1fr; height: auto; }
  .photo-strip img{ height: 240px; }
}
@media(max-width: 640px){
  nav.main a:not(.nav-cta){ display: none; }
  .hero-content{ justify-content: flex-start; }
  .footer-inner{ grid-template-columns: 1fr; }
  .stats-row{ grid-template-columns: 1fr 1fr; }
  .hero{ min-height: 480px; }
  .split-panel .panel-text{ padding: 40px 24px; }
}