/* =========================================================
   KEELY ELECTRIC — STYLE SHEET
   -----------------------------------------------------------
   Colors, fonts and spacing are set as CSS variables at the
   top of this file. Change a value here and it updates
   everywhere on the site — you shouldn't need to touch
   anything below the ":root" block to restyle colors/fonts.
========================================================= */

:root {
  /* Brand colors */
  --green: #6dbe4c;
  --green-dark: #00743b;
  --near-black: #15150f;
  --dark-panel: #0e0e0b;
  --deep-green: #16261a;
  --cream: #f5f4f0;
  --white: #ffffff;
  --text-dark: #1c1c18;
  --text-muted: #5c5c54;
  --border-light: #e7e6e0;

  /* Type */
  --font-display: 'Archivo', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Layout */
  --max-width: 1640px;
  --radius: 6px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
h1, h2, h3 { font-family: var(--font-display); margin: 0 0 .5em; line-height: 1.1; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 14px 26px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .03em;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { flex-shrink: 0; }
.btn-primary { background: var(--green); color: var(--near-black); }
.btn-primary:hover { background: var(--green-dark); color: var(--white); }
.btn-outline { background: transparent; border-color: var(--white); color: var(--white); }
.btn-outline:hover { background: var(--white); color: var(--near-black); }
.btn-outline-dark { background: transparent; border-color: var(--near-black); color: var(--near-black); }
.btn-outline-dark:hover { background: var(--near-black); color: var(--white); }
.btn-lg { padding: 18px 32px; font-size: 16px; border-radius: 4px; font-weight: 800; }
.btn-block { width: 100%; }

/* ---------- Section title helper ---------- */
.section-title {
  text-align: center;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: .02em;
}
.title-underline {
  width: 60px;
  height: 4px;
  background: var(--green);
  margin: 0 auto 40px;
  border-radius: 2px;
}

/* =========================================================
   HEADER
========================================================= */
.site-header {
  background: var(--near-black);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: transform .3s ease, opacity .3s ease;
}
.site-header.header-hidden {
  transform: translateY(-16px);
  opacity: 0;
  pointer-events: none;
}
.header-inner {
  max-width: none;
  width: 100%;
  margin: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 20px;
  min-height: 84px;
}
.logo { display: flex; flex-direction: column; line-height: 1; flex-shrink: 0; }
.logo-main { font-family: 'OCR A BT', 'OCR A Std', 'OCRA', monospace; font-weight: 900; font-size: 20px; color: var(--green); letter-spacing: .02em; }
.logo-sub { font-family: 'OCR A BT', 'OCR A Std', 'OCRA', monospace; font-weight: 700; font-size: 11px; color: var(--white); letter-spacing: .25em; }

/* ---- Angled logo drop panel ----
   The header bar itself stays a constant height edge to edge. At the
   logo, a panel (same header color) drops well past the nav row and is
   sliced by a diagonal edge, wide enough at every height to fully
   contain the icon and the "KEELY ELECTRIC" wordmark. */
.logo-spacer { width: 520px; flex-shrink: 0; }
.logo-drop {
  position: absolute;
  top: 0;
  left: 0;
  width: 520px;
  height: 224px;
  background: var(--near-black);
  clip-path: polygon(0 0, 100% 0, calc(100% - 156px) 100%, 0 100%);
  z-index: 1;
  pointer-events: none;
}
.header-logo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 224px;
  padding-left: 19px;
}
.header-logo img { height: 198px; width: auto; display: block; }
.header-logo .logo-text { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.header-logo .logo-main { font-size: 60px; color: var(--green); }
.header-logo .logo-sub { font-size: 31px; color: var(--white); letter-spacing: .12em; }

.main-nav { display: flex; align-items: center; gap: 9px; flex: 1; }
.main-nav a {
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.main-nav a.active,
.main-nav a:hover { color: var(--green); border-color: var(--green); }
.has-dropdown { position: relative; }
.has-dropdown .caret { font-size: 10px; }
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--near-black);
  border: 1px solid #2a2a22;
  min-width: 220px;
  padding: 8px 0;
  display: none;
  border-radius: var(--radius);
}
.has-dropdown:hover .dropdown { display: block; }
.dropdown a { display: block; padding: 10px 16px; border: none; }
.dropdown a:hover { background: #1e1e17; }

.header-cta { flex-shrink: 0; padding: 8px 12px; font-size: 11.5px; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--white); }

/* =========================================================
   HERO
========================================================= */
.hero { position: relative; }
.hero-bg {
  position: absolute; inset: 0;
  background: url('images/hero-building.jpg') center 62% / cover no-repeat;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(9,9,7,.92) 0%, rgba(9,9,7,.78) 32%, rgba(9,9,7,.42) 60%, rgba(9,9,7,.18) 100%);
}
.hero-inner {
  position: relative;
  z-index: 3;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 64px 32px 56px;
}
.hero-content { color: var(--white); padding-top: 165px; max-width: 700px; }
.hero-content h1 {
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 900;
  letter-spacing: .01em;
}
.hero-content h1 .accent { color: var(--green); }
.hero-text { color: #cfcfc7; font-size: 17px; max-width: 560px; }

@media (min-width: 600px) {
  .hero-content h1 { white-space: nowrap; }
}

.trust-row {
  display: flex;
  gap: 34px;
  margin: 24px 0 32px;
  flex-wrap: wrap;
}
.trust-item { display: flex; align-items: center; gap: 10px; }
.trust-icon { display: flex; align-items: center; justify-content: center; color: var(--green); flex-shrink: 0; }
.trust-icon svg { width: 32px; height: 32px; }
.trust-item strong { display: block; font-size: 15px; font-weight: 800; color: var(--white); }
.trust-item span { font-size: 12.5px; color: #d5d5cc; }

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.service-list { font-size: 12.5px; color: #9c9c92; letter-spacing: .02em; }

/* ---- Lead form card ---- */
.hero-form {
  background: #1a1a13;
  border: 1px solid #2c2c22;
  border-radius: 10px;
  padding: 24px;
  color: var(--white);
}
@media (min-width: 1340px) {
  .hero-form {
    position: absolute;
    top: 64px;
    right: 32px;
    width: 480px;
    z-index: 5;
  }
}
.hero-form h2 { color: var(--green); font-size: 17px; letter-spacing: .04em; margin-bottom: 14px; }
.form-label-top { font-size: 12.5px; color: #b9b9ae; margin: 14px 0 8px; font-weight: 600; }
.checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-bottom: 6px; }
.checkbox-grid label, .radio-row label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #d8d8cf; cursor: pointer;
}
.checkbox-grid .full-width { grid-column: 1 / -1; }
.checkbox-grid input, .radio-row input { accent-color: var(--green); width: 15px; height: 15px; }

.field { display: block; font-size: 12.5px; font-weight: 600; color: #b9b9ae; margin-top: 14px; }
.field input, .field textarea {
  display: block; width: 100%; margin-top: 6px;
  background: #101009; border: 1px solid #33332a; border-radius: var(--radius);
  padding: 11px 12px; color: var(--white); font-family: var(--font-body); font-size: 14px;
}
.field input::placeholder, .field textarea::placeholder { color: #6b6b60; }
.field input:focus, .field textarea:focus, .file-drop:focus-within {
  outline: none; border-color: var(--green);
}
.radio-row { display: flex; gap: 20px; flex-wrap: wrap; }

.file-drop {
  margin-top: 6px; border: 1.5px dashed #3a3a2f; border-radius: var(--radius);
  padding: 22px; text-align: center; font-size: 12.5px; color: #8f8f83; position: relative;
}
.file-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.hero-form .btn-block { margin-top: 20px; }

/* =========================================================
   SERVICES GRID
========================================================= */
.services { max-width: var(--max-width); margin: 0 auto; padding: 72px 20px 60px; background: var(--white); position: relative; }

/* On the homepage, the lead-capture form floats independently of the
   hero's height and can hang down past the hero photo into this
   section (see .hero-form). This section's white background is made
   full-bleed edge to edge here so there's no seam where the form
   crosses the boundary. Extra top padding pushes the icon grid down
   far enough to clear the form vertically, so the grid is free to run
   wide and spaced-out rather than being squeezed into a narrow column.
   The title sits higher up and can pass behind the form — that's
   expected. Scoped to .services-hero-fill only; other pages' plain
   services sections are unaffected. Desktop only — the stacked mobile
   hero has no floating form to clear. */
@media (min-width: 1340px) {
  .services-hero-fill {
    max-width: none;
    margin: 0;
    padding-left: 32px;
    padding-right: 32px;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .services-hero-fill .section-title,
  .services-hero-fill .title-underline {
    text-align: left;
    margin-left: 0;
  }
  .services-hero-fill .service-grid {
    max-width: calc(100% - 480px - 150px);
    margin: 30px 0 0;
    gap: 36px 30px;
  }
  .services-hero-fill .service-icon { width: 60px; height: 60px; }
  .services-hero-fill .service-icon svg { width: 28px; height: 28px; }
}

/* Below 1340px there isn't reliably enough room for the text and a
   480px floating form side by side, so both the form and this section
   fall back to their normal, stacked, full-width behavior. */
@media (max-width: 1339px) {
  .hero-content { max-width: 100%; }
  .hero-form { margin-top: 32px; width: 100%; }
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px 20px;
}
.service-card { text-align: center; }
.service-icon {
  width: 56px; height: 56px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: var(--green);
  background: #eef7e5; border-radius: 12px;
}
.service-icon svg { width: 26px; height: 26px; }
.service-card h3 { font-size: 15px; margin-bottom: 6px; }
.service-card p { font-size: 13px; color: var(--text-muted); margin: 0; }

/* =========================================================
   WHY CHOOSE US
========================================================= */
.why-us { background: var(--deep-green); color: var(--white); padding: 70px 20px; }
.why-inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: center; }
.why-left h2 { font-size: clamp(24px, 3vw, 32px); }
.why-left p { color: #cdd9cd; max-width: 440px; }
.why-right { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; }
.why-item { display: flex; gap: 12px; align-items: flex-start; }
.why-icon { font-size: 30px; flex-shrink: 0; }
.why-item strong { font-size: 14px; display: block; margin-bottom: 2px; }
.why-item p { font-size: 12.5px; color: #b7c4b7; margin: 0; }

/* =========================================================
   REVIEWS + CTA
========================================================= */
.reviews-cta { display: grid; grid-template-columns: 1.3fr 1fr; }
.reviews-col { padding: 70px 40px 70px 20px; max-width: var(--max-width); margin-left: auto; }
.reviews-col h2 { font-size: clamp(22px, 2.6vw, 28px); }
.reviews-sub { color: var(--text-muted); font-size: 14px; }
.stars-inline { color: #f2b400; letter-spacing: 2px; font-size: 15px; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0; }
.review-card {
  background: var(--cream); border-radius: var(--radius); padding: 18px;
  border: 1px solid var(--border-light); font-size: 13px;
}
.review-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.google-g { width: 18px; height: 18px; flex-shrink: 0; }
.stars { color: #f2b400; letter-spacing: 2px; font-size: 13px; }
.review-card p { margin-bottom: 10px; color: var(--text-dark); }
.reviewer { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.btn-google {
  background: var(--white); color: var(--text-dark); border-color: var(--border-light);
  gap: 10px;
}
.btn-google:hover { background: var(--cream); }

.cta-col { position: relative; min-height: 380px; color: var(--white); overflow: hidden; }
.cta-bg { position: absolute; inset: 0; background: url('images/Home Need help.jpg') center 30% / cover no-repeat; }
.cta-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,12,9,1) 0%, rgba(12,12,9,.85) 25%, rgba(12,12,9,0) 50%, rgba(12,12,9,0) 100%); }
.cta-content { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 50px 40px; }
.cta-content h2 { font-size: 24px; }
.cta-content p { color: #cfcfc7; }
.or-divider { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #9c9c92; margin: 16px 0; }
.or-divider span { flex: 1; height: 1px; background: #333327; }
.cta-content .btn { align-self: flex-start; }

/* =========================================================
   GALLERY
========================================================= */
.gallery { max-width: var(--max-width); margin: 0 auto; padding: 72px 20px 40px; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gallery-item { margin: 0; }
.gallery-item figcaption { margin-top: 8px; font-size: 13px; font-weight: 600; text-align: center; }
.gallery-item img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--border-light);
}
.center-btn { text-align: center; margin-top: 32px; }

/* Placeholder image blocks — replace with real <img> tags */
.ph-image {
  background: repeating-linear-gradient(45deg, #eceae3, #eceae3 10px, #e4e2d9 10px, #e4e2d9 20px);
  color: #8c8b80; font-size: 13px; font-weight: 600; letter-spacing: .05em;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius); border: 1px solid var(--border-light);
  aspect-ratio: 4/3;
}

/* =========================================================
   TEAM + SERVICE AREA
========================================================= */
.team-area { max-width: var(--max-width); margin: 0 auto; padding: 40px 20px 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.team-col { position: relative; border-radius: 10px; overflow: hidden; }
.team-photo { aspect-ratio: 16/10; border-radius: 10px; }
.team-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; background: linear-gradient(0deg, rgba(0,0,0,.75), transparent); color: var(--white); }
.team-caption h2 { font-size: 20px; }
.team-caption p { font-size: 13px; color: #ddd; }

.area-col h2 { font-size: 20px; }
.area-col p { color: var(--text-muted); font-size: 14px; }
.map-photo { aspect-ratio: 16/10; }
.map-embed {
  width: 100%; aspect-ratio: 16/10; border: 1px solid var(--border-light);
  border-radius: var(--radius); display: block; object-fit: cover; background: #f0ede3;
}
.map-link {
  display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600;
  color: var(--green-dark);
}
.map-link:hover { text-decoration: underline; }

/* =========================================================
   FINAL CTA BANNER
========================================================= */
.final-cta { background: var(--deep-green); color: var(--white); padding: 40px 20px; }
.final-cta-inner {
  max-width: var(--max-width); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.final-cta-text { display: flex; align-items: center; gap: 16px; }
.bolt { font-size: 30px; color: var(--green); }
.final-cta-text h2 { font-size: 20px; margin-bottom: 2px; }
.final-cta-text p { margin: 0; color: #cdd9cd; font-size: 13px; }
.final-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* =========================================================
   FOOTER
========================================================= */
.site-footer { background: var(--near-black); color: #c9c9bf; padding: 56px 20px 0; }
.footer-inner {
  max-width: var(--max-width); margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 32px;
  padding-bottom: 40px; border-bottom: 1px solid #26261d;
}
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h3 { color: var(--white); font-size: 13px; letter-spacing: .05em; margin-bottom: 4px; }
.footer-col a, .footer-col span { font-size: 13px; color: #b3b3a8; }
.footer-col a:hover { color: var(--green); }
.footer-brand p { font-size: 13px; color: #9d9d92; max-width: 260px; }
.social-row { display: flex; gap: 10px; margin-top: 6px; }
.social-row a {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid #33332a;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.social-row a:hover { background: var(--green); color: var(--near-black); border-color: var(--green); }
.footer-bottom { text-align: center; font-size: 12px; color: #6f6f66; padding: 20px 0; }

/* =========================================================
   SUB-PAGE HERO (Residential, Commercial, About, etc.)
========================================================= */
.page-hero {
  position: relative;
  background: linear-gradient(120deg, #23231a 0%, #15150f 55%, #0c0c09 100%);
  color: var(--white);
  padding: 54px 20px 60px;
  text-align: center;
  overflow: hidden;
}
@media (min-width: 1361px) {
  .page-hero { padding-top: 210px; }
  .service-detail { scroll-margin-top: 260px; }
}
.page-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 10%, rgba(122,193,66,.12), transparent 55%);
}
.page-hero .breadcrumb { position: relative; font-size: 12.5px; color: #a9a99f; margin-bottom: 14px; }
.page-hero .breadcrumb a { color: var(--green); font-weight: 600; }
.page-hero h1 { position: relative; font-size: clamp(28px, 4.2vw, 44px); }
.page-hero p { position: relative; color: #cfcfc7; max-width: 600px; margin: 0 auto; }

/* =========================================================
   GENERIC CONTENT SECTIONS (used on sub-pages)
========================================================= */
.content-wrap { max-width: var(--max-width); margin: 0 auto; padding: 70px 20px; }
.content-wrap.narrow { max-width: 615px; margin: 0 auto; transform: translateX(-25px); }

.content-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.content-grid-2 .ph-image { aspect-ratio: 4/3; width: 100%; object-fit: cover; display: block; }
.content-grid-2 h2 { font-size: clamp(22px, 2.6vw, 30px); }
.content-grid-2 p { color: var(--text-muted); }
.content-grid-2.reverse .content-text { order: 2; }
.content-grid-2.reverse .ph-image { order: 1; }

.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  color: var(--green-dark); background: #eef7e5; padding: 6px 12px; border-radius: 20px;
  margin-bottom: 14px; text-transform: uppercase;
}

.check-list { list-style: none; padding: 0; margin: 18px 0; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; font-size: 14px; color: var(--text-dark); }
.check-list li::before { content: "✓"; color: var(--green); font-weight: 700; flex-shrink: 0; }

/* Service detail cards (services.html)
   All services share one layout now (originally proven out on Electrical
   Repairs): a wide row with a square photo (sized to match the text
   box's height) and a text box that's proportionally wider than the
   photo. Every service has the same number of checklist items (4) and
   a 2-line-clamped description, so content amount is consistent across
   all of them — which is what keeps every row the same height, rather
   than a guessed pixel value. */
.service-detail-grid { display: grid; gap: 22px; }

.service-detail {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch;
  scroll-margin-top: 110px;
}
.service-detail .service-photo-wrap {
  width: 100%; height: 100%;
  border-radius: 10px; border: 1px solid var(--border-light);
  overflow: hidden;
}
.service-detail .service-photo-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.service-box {
  display: flex; flex-direction: column; justify-content: center;
  padding: 15px; border: 1px solid var(--border-light); border-radius: 10px;
  background: var(--cream);
}
.service-box .service-icon { margin: 0 0 8px; width: 34px; height: 34px; font-size: 16px; }
.service-box h3 { font-size: 13px; margin-bottom: 3px; }
.service-box p {
  color: var(--text-muted); margin-bottom: 5px; font-size: 11px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.service-box .check-list li { margin-bottom: 5px; font-size: 10.5px; }
.service-box .check-list { margin: 3px 0 0; }

/* Wide-screen template (proven out on Electrical Repairs): a wide row
   with a square photo matching the box's height, and a proportionally
   wider text box with larger type. This MUST come after the base rules
   above — same-specificity selectors resolve by source order, so if
   this block were earlier, the base rules below would silently win
   regardless of screen width. */
@media (min-width: 1350px) {
  .service-detail {
    width: 1230px; margin-left: -307.5px; margin-right: -307.5px;
    grid-template-columns: 300px 880px; gap: 50px;
  }
  .service-detail .service-photo-wrap {
    width: 300px; height: 300px;
    justify-self: start;
  }
  .service-box {
    height: 300px; overflow: hidden; box-sizing: border-box;
  }
  .service-box .service-icon { width: 51px; height: 51px; font-size: 24px; margin-bottom: 12px; }
  .service-box h3 { font-size: 20px; margin-bottom: 5px; }
  .service-box p { font-size: 16.5px; margin-bottom: 8px; }
  .service-box .check-list li { font-size: 16px; margin-bottom: 8px; }
}


/* Area / city grid (service-areas.html) */
.area-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 30px; }
.area-chip {
  background: var(--cream); border: 1px solid var(--border-light); border-radius: var(--radius);
  padding: 18px 12px; text-align: center; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.area-chip span { color: var(--green); }

/* Safety / values cards (safety-plan.html, about.html) */
.safety-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 10px; }
.safety-card {
  background: var(--cream); border: 1px solid var(--border-light); border-radius: 10px; padding: 28px;
}
.safety-card .service-icon { margin: 0 0 14px; }
.safety-card h3 { font-size: 16px; }
.safety-card p { color: var(--text-muted); font-size: 13.5px; margin: 0; }

/* Numbered process steps (about.html / safety-plan.html) */
.step-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 10px; }
.step-item { position: relative; padding-top: 10px; }
.step-num { font-family: var(--font-display); font-size: 34px; font-weight: 900; color: var(--green); display: block; margin-bottom: 6px; }
.step-item h3 { font-size: 15px; margin-bottom: 6px; }
.step-item p { font-size: 13px; color: var(--text-muted); margin: 0; }

/* Team member grid (about.html) */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 10px; }
.team-card { text-align: center; }
.team-card .ph-image { aspect-ratio: 1/1; border-radius: 50%; width: 100%; object-fit: cover; display: block; }
.team-card h3 { font-size: 14px; margin: 12px 0 2px; }
.team-card span { font-size: 12px; color: var(--text-muted); }

/* Book Online page — embedded ServiceM8 widget */
.booking-embed-wrap { max-width: 900px; margin: 0 auto; padding: 50px 20px 80px; }
.booking-embed {
  width: 100%; height: 1400px; border: 1px solid var(--border-light);
  border-radius: 10px; display: block;
}
.booking-fallback { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 16px; }
.booking-fallback a { color: var(--green-dark); font-weight: 600; }

/* Careers page job listings */
.job-list { display: flex; flex-direction: column; gap: 16px; max-width: 820px; margin: 0 auto; }
.job-card {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: var(--cream); border: 1px solid var(--border-light); border-radius: 10px; padding: 22px 26px;
}
.job-card-main h3 { font-size: 17px; margin-bottom: 4px; }
.job-card-main p { font-size: 13px; color: var(--text-muted); margin: 0; }

/* Contact page */
.contact-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; max-width: var(--max-width); margin: 0 auto; padding: 70px 20px; align-items: start; }
.contact-info h2 { font-size: clamp(22px, 2.6vw, 30px); }
.contact-info .info-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px; }
.contact-info .info-icon { font-size: 20px; color: var(--green); flex-shrink: 0; }
.contact-info .info-row strong { display: block; font-size: 14px; margin-bottom: 2px; }
.contact-info .info-row span, .contact-info .info-row a { font-size: 13.5px; color: var(--text-muted); }
.contact-form-card {
  background: var(--cream); border: 1px solid var(--border-light); border-radius: 10px; padding: 28px;
}
.contact-form-card .field { color: var(--text-muted); }
.contact-form-card .field input, .contact-form-card .field textarea {
  background: var(--white); border: 1px solid var(--border-light); color: var(--text-dark);
}
.contact-form-card .field input::placeholder, .contact-form-card .field textarea::placeholder { color: #9a9a90; }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 980px) {
  .service-grid { grid-template-columns: repeat(3, 1fr); }
  .why-inner { grid-template-columns: 1fr; }
  .reviews-cta { grid-template-columns: 1fr; }
  .reviews-col { margin: 0; padding: 60px 20px; }
  .review-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .team-area { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

/* The logo is now large enough that the full nav bar can't
   realistically fit beside it until quite wide screens, so the
   hamburger menu now kicks in much earlier than a typical mobile
   breakpoint. */
@media (max-width: 1360px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .header-cta { display: none; }
  .logo-spacer { width: 230px; }
  .logo-drop { width: 230px; height: 128px; clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 0 100%); }
  .header-logo { height: 128px; padding-left: 14px; }
  .header-logo img { height: 88px; }
  .header-logo .logo-main { font-size: 18px; }
  .hero-content { padding-top: 20px; }
  .header-logo .logo-sub { font-size: 9.5px; }
  .site-header.open .main-nav {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    position: absolute; top: 100%; left: 0; right: 0; background: var(--near-black);
    padding: 16px 20px; border-top: 1px solid #2a2a22;
  }
}

@media (max-width: 720px) {
  .checkbox-grid { grid-template-columns: 1fr; }
  .trust-row { gap: 20px; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .final-cta-inner { flex-direction: column; align-items: flex-start; }
  .content-grid-2 { grid-template-columns: 1fr; }
  .content-grid-2.reverse .content-text,
  .content-grid-2.reverse .ph-image { order: initial; }
  .area-grid { grid-template-columns: repeat(2, 1fr); }
  .safety-grid { grid-template-columns: 1fr; }
  .step-list { grid-template-columns: 1fr 1fr; }
  .contact-wrap { grid-template-columns: 1fr; }
  .service-detail { grid-template-columns: 1fr; }
  .service-box p { -webkit-line-clamp: initial; }
  .service-detail .service-photo-wrap { width: 100%; height: auto; aspect-ratio: 4/3; transform: none; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .area-grid { grid-template-columns: repeat(3, 1fr); }
}