/* ============================================================
   IntegrityTeks — Homepage Concept v2
   Editorial, asymmetric art direction.
   Navy #12296B primary · deep #0A1A52 · charcoal #2B2B2B
   Green #28A745 = deliberate small accents only.
   ============================================================ */

:root {
  --navy: #12296B;
  --deep: #0A1A52;
  --ink: #2B2B2B;
  --muted: #5C5C5C;
  --cool: #F5F7FA;
  --border: #E5E8EF;
  --green: #28A745;
  --white: #FFFFFF;
  --radius: 16px;
  --radius-sm: 14px;
  --shadow-card: 0 8px 28px rgba(10, 26, 82, 0.10);
  --shadow-float: 0 16px 44px rgba(10, 26, 82, 0.18);
  --font-head: "Space Grotesk", "Helvetica Neue", sans-serif;
  --font-body: "Inter", "Helvetica Neue", sans-serif;
  --font-mono: "Space Mono", monospace;
  --navy-grad: linear-gradient(160deg, #16307C 0%, var(--navy) 38%, var(--deep) 100%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-head); color: var(--deep); line-height: 1.08; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--green); }
img { max-width: 100%; display: block; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 36px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--green); }
.eyebrow-light { color: rgba(255, 255, 255, 0.75); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
  padding: 15px 30px;
  border-radius: 12px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--navy); color: var(--white); }
.btn-primary:hover { background: var(--deep); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { color: var(--deep); border-color: var(--deep); transform: translateY(-2px); }
.btn-white { background: var(--white); color: var(--navy); }
.btn-white:hover { color: var(--deep); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.25); }
.btn-lg { font-size: 18px; padding: 19px 38px; }

/* ---------- Concept Preview badge ---------- */
.concept-badge {
  position: absolute;
  top: 6px;
  right: 10px;
  z-index: 2000;
  background: #D03227;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(208, 50, 39, 0.35);
  pointer-events: none;
}

/* ---------- Utility bar ---------- */
.utilbar { background: var(--deep); color: rgba(255, 255, 255, 0.92); font-size: 13px; }
.utilbar .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 38px;
  flex-wrap: wrap;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-right: 175px;
}
.utilbar a { color: #fff; font-weight: 600; }
.utilbar a:hover { color: var(--green); }
.utilbar-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* ---------- Sticky header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.2s ease;
}
.site-header.scrolled { box-shadow: 0 6px 24px rgba(10, 26, 82, 0.08); }
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 78px; }
.logo-link { flex: 0 0 auto; display: flex; align-items: center; }
.logo-link img { height: 46px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.main-nav a {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover { color: var(--navy); border-bottom-color: var(--green); }
.main-nav a.active { color: var(--navy); border-bottom-color: var(--navy); }

.header-actions { display: flex; align-items: center; gap: 18px; }
.header-actions .remote-link { font-family: var(--font-head); font-weight: 500; font-size: 15px; color: var(--ink); }
.header-actions .remote-link:hover { color: var(--navy); }
.header-phone { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--navy); display: inline-flex; align-items: center; gap: 7px; }
.header-phone:hover { color: var(--deep); }
.header-actions .btn { padding: 11px 22px; font-size: 15px; }

.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--border);
  border-radius: 10px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--navy); transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu { display: none; background: var(--white); border-bottom: 1px solid var(--border); padding: 8px 36px 20px; }
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.mobile-menu a:last-child { border-bottom: none; }

/* ---------- Image areas (styled placeholders) ---------- */
.img-area {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 46%),
    radial-gradient(90% 80% at 85% 90%, rgba(40, 167, 69, 0.10) 0%, rgba(40, 167, 69, 0) 55%),
    linear-gradient(150deg, #2E4490 0%, #16307C 45%, #0A1A52 100%);
}
.img-area::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 55% at 62% 38%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}
.img-area .img-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-caption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(10, 26, 82, 0.55);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 7px 12px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 32px);
}
.img-caption::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: 0 0 auto; }

/* ---------- Hero ---------- */
.hero { padding: 80px 0 0; overflow: hidden; background: linear-gradient(180deg, var(--white) 70%, var(--cool) 100%); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
  gap: 64px;
  align-items: center;
}
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.hero-kicker { font-size: 15px; font-weight: 600; color: var(--muted); }
.hero h1 {
  font-size: clamp(46px, 5.8vw, 82px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
}
.hl-green {
  position: relative;
  z-index: 0;
  white-space: nowrap;
}
.hl-green::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.04em;
  height: 0.12em;
  background: var(--green);
  border-radius: 99px;
  opacity: 0.85;
  z-index: -1;
}
.hero-sub { font-size: 18px; color: var(--muted); max-width: 560px; }
.hero-brandline { font-family: var(--font-head); font-size: 15px; font-weight: 600; color: var(--navy); letter-spacing: 0.03em; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.hero-trustline {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-photo-panel { position: relative; }
.hero-photo-panel .img-area { height: 560px; }
.hero-photo-panel .img-caption { top: 16px; right: 16px; bottom: auto; left: auto; }
.hero-overlap-card {
  position: absolute;
  left: -28px;
  bottom: 36px;
  z-index: 3;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-float);
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-overlap-card strong { font-family: var(--font-head); color: var(--deep); display: block; font-size: 16px; line-height: 1.2; }
.hero-overlap-card small { color: var(--muted); font-size: 13px; }
.open-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--green); flex: 0 0 auto; box-shadow: 0 0 0 5px rgba(40, 167, 69, 0.16); }

/* ---------- Audience selector (no overlap) + bridge ---------- */
.selector { margin: 72px 0 0; padding-bottom: 88px; }
.selector-prompt {
  font-family: var(--font-head);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--deep);
  margin-bottom: 24px;
}
.selector-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sel-panel {
  border-radius: var(--radius);
  padding: 40px 38px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.sel-panel:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); }
.sel-panel .sel-icon { width: 58px; height: 58px; border-radius: 15px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.sel-panel h3 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; letter-spacing: -0.015em; }
.sel-panel .sel-tag { font-size: 16px; }
.sel-panel .sel-go { font-family: var(--font-head); font-weight: 600; font-size: 15px; margin-top: 10px; }
.sel-check {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green);
  display: none;
  align-items: center;
  justify-content: center;
}
.sel-panel.active .sel-check { display: inline-flex; }
.sel-panel.active { box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.35), var(--shadow-float); transform: translateY(-4px); }

.sel-business { background: var(--navy-grad); box-shadow: 0 16px 40px rgba(18, 41, 107, 0.28); }
.sel-business h3 { color: var(--white); }
.sel-business .sel-tag { color: rgba(255, 255, 255, 0.78); }
.sel-business .sel-go { color: #fff; }
.sel-business:hover .sel-go { color: var(--green); }
.sel-business .sel-icon { background: rgba(255, 255, 255, 0.12); }

.sel-home { background: var(--white); border: 2px solid var(--navy); }
.sel-home h3 { color: var(--navy); }
.sel-home .sel-tag { color: var(--muted); }
.sel-home .sel-go { color: var(--navy); }
.sel-home:hover .sel-go { color: var(--green); }
.sel-home .sel-icon { background: var(--cool); }

.bridge {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 5px solid var(--green);
  border-radius: var(--radius-sm);
  padding: 18px 26px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--deep);
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.bridge:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); color: var(--deep); }
.bridge .bridge-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(40, 167, 69, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bridge .bridge-go { margin-left: auto; color: var(--green); font-size: 22px; line-height: 1; }

/* ---------- Stats band (full bleed) ---------- */
.stats-band { background: var(--navy-grad); color: var(--white); padding: 64px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.stat { border-left: 2px solid rgba(255, 255, 255, 0.18); padding-left: 24px; }
.stat .stat-num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(40px, 4vw, 60px);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 12px;
}
.stat .stat-num.sm { font-size: clamp(26px, 2.4vw, 38px); line-height: 1.1; display: block; padding: 4px 0; }
.stat .stat-label {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

/* ---------- Problem-first band ---------- */
.problem { padding: 100px 0; background: var(--white); }
.problem-inner { max-width: 1000px; }
.problem h2 {
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
}
.problem h2 .q { color: var(--muted); font-weight: 500; display: block; }
.problem h2 .fix { color: var(--deep); }
.problem h2 .fix em { font-style: normal; position: relative; }
.problem h2 .fix em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.02em;
  height: 0.1em;
  background: var(--green);
  border-radius: 99px;
}
.problem .problem-cta { margin-top: 36px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.problem .problem-note { font-size: 15px; color: var(--muted); }

/* ---------- Section scaffolding (left-aligned heads) ---------- */
.section { padding: 96px 0; }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 52px;
  flex-wrap: wrap;
}
.section-head .head-copy { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.section-head h2 { font-size: clamp(32px, 3.8vw, 50px); font-weight: 700; letter-spacing: -0.025em; }
.section-head p { color: var(--muted); font-size: 17px; }
.section-head .head-aside { font-family: var(--font-head); font-weight: 600; font-size: 16px; padding-bottom: 6px; }

/* ---------- Pillars (asymmetric) ---------- */
.pillars-grid { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 24px; align-items: stretch; }
.pillar-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 38px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pillar-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.pillar-card .sel-icon { width: 52px; height: 52px; border-radius: 13px; background: var(--cool); display: flex; align-items: center; justify-content: center; }
.pillar-card h3 { font-size: 23px; letter-spacing: -0.01em; }
.pillar-card p { color: var(--muted); font-size: 15px; flex: 1; }
.pillar-card .learn { font-family: var(--font-head); font-weight: 600; font-size: 15px; }
.pillar-img { height: 150px; border-radius: 12px; margin: -10px 0 4px; }
.pillar-img .img-caption { left: 10px; bottom: 10px; font-size: 10px; padding: 5px 9px; }
.pillar-special { border: 2px solid var(--green); box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.10); position: relative; }
.pillar-special .sel-icon { background: rgba(40, 167, 69, 0.10); }
.pillar-flag {
  position: absolute;
  top: -12px;
  right: 24px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--white);
  color: var(--green);
  border: 1px solid var(--green);
  border-radius: 999px;
  padding: 3px 12px;
}

/* ---------- Services — bento grid ---------- */
.services { background: var(--cool); }
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(170px, auto);
  gap: 20px;
}
.bento-tile {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.bento-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.bento-tile .sel-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--cool); display: flex; align-items: center; justify-content: center; }
.bento-tile h3 { font-size: 19px; letter-spacing: -0.01em; }
.bento-tile p { color: var(--muted); font-size: 13.5px; line-height: 1.65; }
.tile-recovery {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  background: var(--navy-grad);
  border: none;
  box-shadow: inset 0 0 0 2px rgba(40, 167, 69, 0.55), 0 16px 40px rgba(18, 41, 107, 0.25);
  padding: 40px 38px;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}
.tile-recovery .sel-icon { background: rgba(40, 167, 69, 0.18); }
.tile-recovery h3 { color: var(--white); font-size: clamp(26px, 2.4vw, 34px); }
.tile-recovery p { color: rgba(255, 255, 255, 0.78); font-size: 15px; }
.tile-recovery .tile-flag {
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  border: 1px solid rgba(40, 167, 69, 0.6);
  border-radius: 999px;
  padding: 4px 12px;
  background: rgba(10, 26, 82, 0.4);
}
.tile-recovery .tile-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.26;
  pointer-events: none;
}
.tile-recovery > :not(.tile-photo) { position: relative; z-index: 1; }
.tile-laptop { grid-column: 3 / 5; }
.tile-web { grid-column: 1 / 3; }
.tile-cameras { grid-column: 3 / 5; }

/* ---------- Why / Synergy (full-bleed band + motif) ---------- */
.why-band { background: var(--navy-grad); color: rgba(255, 255, 255, 0.88); padding: 110px 0; position: relative; overflow: hidden; }
.why-band .synergy-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.why-band .wrap { position: relative; z-index: 1; }
.why-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: center; }
.why-band h2 { color: var(--white); font-size: clamp(34px, 4vw, 54px); letter-spacing: -0.025em; margin: 16px 0 12px; }
.why-quote { font-size: 17px; line-height: 1.75; color: rgba(255, 255, 255, 0.85); margin-top: 24px; }
.why-close { font-family: var(--font-head); font-weight: 600; font-size: 20px; color: var(--white); margin-top: 20px; }
.why-list { display: flex; flex-direction: column; gap: 16px; }
.why-item {
  display: flex;
  gap: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  font-size: 15px;
  line-height: 1.6;
  transition: transform 0.18s ease, background 0.18s ease;
}
.why-item:hover { transform: translateX(6px); background: rgba(255, 255, 255, 0.09); }
.why-item .check { margin-top: 2px; }
.why-item strong { color: var(--white); }
.check {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(40, 167, 69, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Guarantee ---------- */
.guarantee-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.guarantee-card {
  background: var(--cool);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 30px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.guarantee-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.guarantee-card .g-num { font-family: var(--font-head); font-weight: 700; font-size: 30px; color: var(--navy); letter-spacing: -0.02em; }
.guarantee-card .ph-note { font-family: var(--font-mono); font-size: 12px; color: var(--muted); line-height: 1.6; }

/* ---------- Emergency band ---------- */
.emergency { background: linear-gradient(150deg, var(--deep) 0%, #071240 100%); color: var(--white); padding: 88px 0; position: relative; overflow: hidden; }
.emergency .wrap { display: flex; align-items: center; justify-content: space-between; gap: 48px; position: relative; z-index: 1; }
.emergency h2 { color: var(--white); font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -0.02em; max-width: 680px; }
.emergency p { color: rgba(255, 255, 255, 0.78); margin-top: 14px; font-size: 16px; max-width: 600px; }
.emergency .stat-kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); margin-bottom: 16px; display: inline-block; }

/* ---------- Service areas (asymmetric) ---------- */
.areas-layout { display: grid; grid-template-columns: 0.8fr 1.6fr; gap: 56px; align-items: center; }
.areas-copy { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.areas-copy h2 { font-size: clamp(32px, 3.6vw, 46px); letter-spacing: -0.025em; }
.areas-copy p { color: var(--muted); font-size: 16px; }
.areas-van { height: 250px; width: 100%; margin-top: 14px; }
.areas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.area-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.area-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); border-color: var(--navy); }
.area-card h3 { font-size: 21px; }
.area-card small { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.area-card .learn { font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--navy); margin-top: 6px; }
.area-card:hover .learn { color: var(--green); }

/* ---------- Reviews (offset rhythm) ---------- */
.reviews { background: var(--cool); }
.reviews-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 44px; align-items: start; }
.review-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.review-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.review-card:nth-child(even) { margin-top: 28px; }
.stars { color: #E8A33D; font-size: 16px; letter-spacing: 2px; }
.review-card p { font-size: 14px; color: var(--muted); flex: 1; }
.review-card .reviewer { font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--deep); }

/* ---------- FAQ (two-column asymmetric) ---------- */
.faq-layout { display: grid; grid-template-columns: 0.8fr 1.4fr; gap: 64px; align-items: start; }
.faq-copy { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; position: sticky; top: 110px; }
.faq-copy h2 { font-size: clamp(32px, 3.6vw, 46px); letter-spacing: -0.025em; }
.faq-copy p { color: var(--muted); }
.faq-copy .faq-more-link { font-family: var(--font-head); font-weight: 600; font-size: 16px; margin-top: 8px; }
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 26px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 17px;
  color: var(--deep);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 24px; color: var(--navy); font-weight: 400; transition: transform 0.2s ease; flex: 0 0 auto; }
.faq-item[open] summary::after { transform: rotate(45deg); color: var(--green); }
.faq-item .faq-body { padding: 0 26px 22px; color: var(--muted); font-size: 15px; }

/* ---------- Final CTA ---------- */
.final-cta { background: var(--navy-grad); padding: 110px 0; color: var(--white); position: relative; overflow: hidden; }
.final-cta .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
.final-cta h2 { color: var(--white); font-size: clamp(36px, 4.4vw, 60px); letter-spacing: -0.025em; }
.final-cta .cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.final-cta .or-call { font-size: 15px; color: rgba(255, 255, 255, 0.75); }
.final-cta .or-call a { color: var(--white); font-weight: 700; font-size: 18px; }
.final-cta .or-call a:hover { color: var(--green); }
.final-cta .synergy-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Footer ---------- */
.site-footer { background: var(--deep); color: rgba(255, 255, 255, 0.72); padding: 80px 0 36px; font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }
.footer-wordmark { font-family: var(--font-head); font-weight: 700; font-size: 27px; letter-spacing: 0.04em; color: var(--white); }
.footer-tagline { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-top: 8px; }
.footer-col h4 { color: var(--white); font-size: 14px; font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 18px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: rgba(255, 255, 255, 0.72); }
.footer-col a:hover { color: var(--green); }
.footer-nap { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; line-height: 1.5; }
.footer-nap a { color: var(--white); font-weight: 600; }
.footer-nap a:hover { color: var(--green); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; margin-left: auto; }
  .header-actions .remote-link { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-photo-panel .img-area { height: 380px; }
  .hero-overlap-card { left: 20px; bottom: -20px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .pillars-grid { grid-template-columns: 1fr; max-width: 620px; }
  .why-grid { grid-template-columns: 1fr; gap: 48px; }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .final-cta .wrap { grid-template-columns: 1fr; }
  .areas-layout { grid-template-columns: 1fr; gap: 40px; }
  .faq-layout { grid-template-columns: 1fr; gap: 40px; }
  .faq-copy { position: static; }
}

@media (max-width: 860px) {
  .selector-row { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr 1fr; }
  .tile-recovery { grid-column: 1 / 3; grid-row: auto; min-height: 320px; }
  .tile-laptop, .tile-web, .tile-cameras { grid-column: auto; }
  .tile-laptop { grid-column: 1 / 3; }
  .guarantee-grid { grid-template-columns: 1fr; }
  .emergency .wrap { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 20px; }
  .mobile-menu { padding: 8px 20px 16px; }
  .section { padding: 64px 0; }
  .hero { padding-top: 48px; }
  .problem { padding: 72px 0; }
  .why-band { padding: 72px 0; }
  .utilbar .wrap { justify-content: center; text-align: center; }
  .utilbar-left { display: none; }
  .header-actions .header-phone span { display: none; }
  .header-actions .btn { padding: 10px 16px; font-size: 14px; }
  .logo-link img { height: 38px; }
  .hero h1 { font-size: clamp(40px, 11vw, 52px); }
  .hero-photo-panel .img-area { height: 300px; }
  .hero-ctas .btn { width: 100%; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .stat { padding-left: 16px; }
  .bento { grid-template-columns: 1fr; }
  .tile-recovery, .tile-laptop { grid-column: auto; }
  .areas-grid, .reviews-grid { grid-template-columns: 1fr; }
  .review-card:nth-child(even) { margin-top: 0; }
  .bridge { flex-wrap: wrap; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { justify-content: center; text-align: center; }
}

/* ============================================================
   v3 DENSITY PASS — tighter, photo-forward, above-the-fold hero
   (overrides; appended last so they win the cascade)
   ============================================================ */

/* Header: larger logo, slimmer chrome, More dropdown */
.site-header .wrap { min-height: 92px; }
.logo-link img { height: 69px; }
.nav-more { position: relative; display: flex; align-items: center; }
.nav-more-btn {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav-more-btn:hover { color: var(--navy); border-bottom-color: #28A745; }
.nav-more-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
  padding: 8px;
  min-width: 180px;
  z-index: 1100;
}
.nav-more.open .nav-more-menu { display: block; }
.nav-more-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  border-bottom: none;
  font-size: 15px;
}
.nav-more-menu a:hover { background: var(--cool); color: var(--navy); }

/* Buttons: confident, not loud */
.btn-lg { font-size: 15px; padding: 12px 24px; }

/* Hero: 2–3 line headline, compact column, smaller photo */
.hero { padding: 20px 0 0; }
.hero-grid { gap: 40px; align-items: center; }
.hero-copy { gap: 8px; }
.hero h1 { font-size: clamp(32px, 3vw, 42px); line-height: 1.1; letter-spacing: -0.02em; }
.hero-sub { font-size: 16px; max-width: 620px; }
.hero-kicker { font-size: 14px; }
.hero-brandline { font-size: 14px; }
.hero-ctas { margin-top: 4px; gap: 12px; }
.hero-trustline { font-size: 11px; }
.hero-photo-panel .img-area { height: 300px; }
.hero-overlap-card { bottom: 20px; padding: 12px 18px; }
.hero-overlap-card strong { font-size: 15px; }

/* Selector: reads as one unit with the hero, fully above the fold */
.selector { margin: 18px 0 0; padding-bottom: 12px; }
.selector-prompt { font-size: 18px; margin-bottom: 8px; }
.selector-row { gap: 18px; }
.sel-panel { padding: 16px 24px; gap: 5px; }
.sel-panel .sel-icon { width: 40px; height: 40px; border-radius: 11px; margin-bottom: 2px; }
.sel-panel .sel-icon svg { width: 22px; height: 22px; }
.sel-panel h3 { font-size: clamp(20px, 1.7vw, 24px); }
.sel-panel .sel-tag { font-size: 14px; }
.sel-panel .sel-go { font-size: 14px; margin-top: 4px; }
.sel-check { top: 14px; right: 14px; width: 24px; height: 24px; }
.bridge { margin-top: 12px; padding: 11px 20px; font-size: 15px; }
.bridge .bridge-icon { flex: 0 0 36px; width: 36px; height: 36px; }

/* Stats: slim strip */
.stats-band { padding: 14px 0; }
.stats-grid { gap: 28px; }
.stat { padding-left: 16px; }
.stat .stat-num { font-size: clamp(24px, 2vw, 32px); }
.stat .stat-num.sm { font-size: clamp(18px, 1.6vw, 20px); padding: 5px 0; white-space: nowrap; }
.stat .stat-label { margin-top: 5px; font-size: 11px; }

/* Sections: ~40% less vertical padding, smaller headings */
.section { padding: 56px 0; }
.section-head { margin-bottom: 30px; }
.section-head h2 { font-size: clamp(26px, 2.4vw, 32px); }
.section-head p { font-size: 16px; }
.problem { padding: 56px 0; }
.problem h2 { font-size: clamp(26px, 2.8vw, 38px); }
.problem .problem-cta { margin-top: 22px; }

.pillar-card { padding: 26px 24px; gap: 12px; }
.pillar-card h3 { font-size: 20px; }
.pillar-img { height: 140px; }

.bento { gap: 16px; grid-auto-rows: minmax(150px, auto); }
.bento-tile { padding: 24px 22px; }
.bento-tile h3 { font-size: 17px; }
.tile-recovery { padding: 30px 28px; }
.tile-recovery h3 { font-size: clamp(22px, 1.8vw, 26px); }

.why-band { padding: 64px 0; }
.why-grid { gap: 48px; }
.why-band h2 { font-size: clamp(28px, 2.6vw, 36px); margin: 12px 0 10px; }
.why-quote { font-size: 16px; margin-top: 18px; }
.why-close { font-size: 18px; margin-top: 14px; }
.why-item { padding: 14px 16px; }

.guarantee-card { min-height: 140px; padding: 24px; }
.guarantee-card .g-num { font-size: 24px; }

.emergency { padding: 56px 0; }
.emergency h2 { font-size: clamp(24px, 2.2vw, 32px); }

.areas-layout { gap: 40px; }
.areas-copy h2 { font-size: clamp(26px, 2.4vw, 32px); }
.areas-van { height: 220px; }
.area-card { padding: 22px; }

.reviews-grid { margin-bottom: 28px; }
.review-card { padding: 22px; }
.review-card:nth-child(even) { margin-top: 20px; }

.faq-layout { gap: 44px; }
.faq-copy h2 { font-size: clamp(26px, 2.4vw, 32px); }
.faq-item summary { padding: 16px 20px; font-size: 16px; }
.faq-item .faq-body { padding: 0 20px 16px; }

.final-cta { padding: 64px 0; }
.final-cta h2 { font-size: clamp(28px, 3vw, 40px); }

/* Extra bottom padding so the bottom-right LiveZilla chat button never overlaps footer text. */
.site-footer { padding: 56px 0 72px; }
.footer-grid { gap: 40px; margin-bottom: 40px; }
.footer-wordmark { font-size: 24px; }

/* v3 responsive re-assertions (must follow the overrides above) */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-photo-panel .img-area { height: 300px; }
}
@media (max-width: 560px) {
  .logo-link img { height: 44px; }
  .site-header .wrap { gap: 12px; min-height: 72px; }
  .header-actions { gap: 10px; }
  .header-actions .btn { padding: 9px 12px; font-size: 13px; }
  .hero { padding-top: 24px; }
  .hero h1 { font-size: clamp(28px, 8vw, 36px); }
  .hero-photo-panel .img-area { height: 230px; }
  .section { padding: 44px 0; }
  .problem { padding: 44px 0; }
  .why-band { padding: 48px 0; }
  .review-card:nth-child(even) { margin-top: 0; }
  .hero-ctas .btn { width: 100%; }
}

/* ============================================================
   v3.1 — bigger logo, photo-driven audience cards, bold bridge
   ============================================================ */

/* 1) Logo: cropped asset (logo-tight.png), much larger */
.logo-link img { height: 56px; }
.site-header .wrap { min-height: 96px; }

/* 2) Audience cards: photo backgrounds + overlays + chips */
.sel-titlerow { display: flex; align-items: center; gap: 14px; }
.sel-panel .sel-icon { margin-bottom: 0; flex: 0 0 40px; }
.sel-business {
  background:
    linear-gradient(100deg, rgba(14, 30, 86, 0.93) 0%, rgba(10, 26, 82, 0.80) 55%, rgba(10, 26, 82, 0.62) 100%),
    url("uploads/small-business.png") center / cover no-repeat;
}
.sel-home {
  background:
    linear-gradient(100deg, rgba(250, 251, 253, 0.95) 0%, rgba(245, 247, 250, 0.88) 55%, rgba(245, 247, 250, 0.74) 100%),
    url("uploads/residential-home.png") center / cover no-repeat;
}
.sel-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sel-chips span {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12px;
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.sel-business .sel-chips span { background: rgba(255, 255, 255, 0.14); color: #fff; border: 1px solid rgba(255, 255, 255, 0.30); }
.sel-home .sel-chips span { background: rgba(255, 255, 255, 0.85); color: var(--navy); border: 1px solid var(--border); }

/* 3) Data Recovery bridge: bold, green, unmissable */
.bridge {
  margin-top: 10px;
  padding: 13px 16px;
  gap: 16px;
  background: linear-gradient(95deg, #E4F4E9 0%, #F0FAF3 100%);
  border: 2px solid #28A745;
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 28px rgba(40, 167, 69, 0.16);
}
.bridge:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(40, 167, 69, 0.24); }
.bridge .bridge-icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #28A745;
}
.bridge-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bridge-copy strong { font-weight: 700; font-size: 16px; color: var(--deep); line-height: 1.3; }
.bridge-copy small { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); }
.bridge-btn {
  margin-left: auto;
  background: #28A745;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  padding: 11px 20px;
  border-radius: 10px;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
}
.bridge:hover .bridge-btn { background: #1E8838; }

/* Fold compensation: reclaim the height the bigger bridge adds */
.selector { margin-top: 8px; }
.selector-prompt { margin-bottom: 6px; }
.stats-band { padding: 6px 0; }

@media (max-width: 1100px) {
  .logo-link img { height: 50px; }
}
@media (max-width: 560px) {
  .logo-link img { height: 28px; max-width: 40vw; object-fit: contain; }
  .site-header .wrap { min-height: 60px; gap: 8px; }
  .header-actions { gap: 8px; }
  .header-actions .btn { padding: 8px 10px; font-size: 12px; }
  .bridge { flex-wrap: wrap; padding: 14px 16px; }
  .bridge-btn { margin-left: 0; width: 100%; text-align: center; }
}

/* ============================================================
   v3.2 — clickable audience cards, selector first in the hero
   ============================================================ */

/* Selector now sits directly beneath the menu, hero copy below */
.hero { padding: 12px 0 0; }
.selector { margin-top: 0; padding-bottom: 0; }
.selector-prompt { margin-bottom: 4px; }
.hero-grid { margin-top: 12px; padding-bottom: 8px; }

/* Whole card = one obvious click target */
.sel-panel { cursor: pointer; gap: 4px; }
.sel-business { border: 2px solid rgba(255, 255, 255, 0.22); }
.sel-business:hover { border-color: rgba(255, 255, 255, 0.92); }
.sel-home:hover { border-color: #28A745; }

/* Up-right arrow affordance (swaps to the green check when active) */
.sel-arrow {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease;
}
.sel-business .sel-arrow { background: rgba(255, 255, 255, 0.16); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); }
.sel-home .sel-arrow { background: var(--cool); color: var(--navy); border: 1px solid var(--border); }
.sel-panel:hover .sel-arrow { transform: translate(3px, -3px); }
.sel-panel.active .sel-arrow { display: none; }

/* Explore links as button pills */
.sel-chips { margin-top: 2px; }
.sel-panel .sel-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; padding: 6px 16px; border-radius: 999px; font-size: 14px; }
.sel-business .sel-go { background: #fff; color: var(--navy); }
.sel-business:hover .sel-go { color: var(--deep); }
.sel-home .sel-go { border: 2px solid var(--navy); color: var(--navy); background: rgba(255, 255, 255, 0.65); padding: 4px 14px; }
.sel-home:hover .sel-go { border-color: var(--deep); color: var(--deep); }

/* Bridge: same affordances */
.bridge { cursor: pointer; }
.bridge:hover { border-color: #2EBF53; }

/* v3.2 mobile header shave */
@media (max-width: 560px) {
  .logo-link img { height: 26px; max-width: 36vw; }
  .header-actions { gap: 6px; }
  .header-actions .btn { padding: 7px 8px; font-size: 12px; }
}

/* ============================================================
   v3.3 — selector leads on a tinted band; hero is the support beat
   ============================================================ */
.selector-band { background: var(--cool); border-bottom: 1px solid var(--border); padding: 12px 0 16px; }
.selector-band .sel-home { background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.96) 0%, rgba(250, 251, 253, 0.90) 55%, rgba(248, 250, 252, 0.76) 100%),
    url("uploads/residential-home.png") center / cover no-repeat; }
.hero { background: var(--white); padding: 14px 0 0; }
.hero h1 { font-size: clamp(26px, 2.3vw, 34px); }
.hero-grid { margin-top: 0; padding-bottom: 10px; }

/* v3.3 — FEATURED badge: auto-width pill, top-left (re-assert absolute,
   which the `.tile-recovery > :not(.tile-photo)` rule had overridden) */
.tile-recovery .tile-flag {
  position: absolute;
  top: 22px;
  left: 22px;
  right: auto;
  width: auto;
  align-self: flex-start;
  z-index: 2;
}

/* v3.4 — final preview spacing and mobile polish */
#top.selector-band { padding-bottom: 28px; }
.hero { padding: 32px 0; }
.problem { background: var(--cool); }
[data-screen-label="Service areas"] {
  position: relative;
  overflow: hidden;
  background: #F2F5F8;
  isolation: isolate;
}
[data-screen-label="Service areas"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("uploads/oakville-map.png") 50% 43% / 135% auto no-repeat;
  opacity: 0.36;
  filter: grayscale(1) saturate(0.12) contrast(1.06);
  transform: scale(1.02);
  pointer-events: none;
}
[data-screen-label="Service areas"] .wrap {
  position: relative;
  z-index: 1;
}
[data-screen-label="Service areas"] .area-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(2px);
}
.bento-tile {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.bento-tile:focus-visible {
  outline: 3px solid rgba(40, 167, 69, 0.45);
  outline-offset: 4px;
}
.bento-tile:not(.tile-recovery) p { flex: 1; }
.tile-learn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--navy);
  transition: color 0.15s ease, transform 0.15s ease;
}
.bento-tile:hover .tile-learn,
.bento-tile:focus-visible .tile-learn {
  color: var(--green);
  transform: translateX(3px);
}
.tile-recovery .tile-learn {
  color: var(--white);
}
.tile-recovery:hover .tile-learn,
.tile-recovery:focus-visible .tile-learn {
  color: var(--green);
}

.mobile-menu {
  display: block;
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  z-index: 1200;
  padding: 12px 36px 22px;
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 18px 36px rgba(10, 26, 82, 0.14);
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}
.mobile-menu.open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

@media (max-width: 560px) {
  .concept-badge { display: none; }
  [data-screen-label="Service areas"]::before {
    background-size: auto 112%;
    background-position: 68% 72%;
    opacity: 0.20;
  }
  .utilbar { font-size: 12px; }
  .utilbar .wrap {
    min-height: 34px;
    padding-top: 5px;
    padding-right: 20px;
    padding-bottom: 5px;
    justify-content: stretch;
    text-align: left;
  }
  .utilbar-right {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .utilbar-right span { white-space: nowrap; }
  .mobile-menu {
    padding: 10px 20px 18px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
  }
  .mobile-menu a {
    padding: 13px 0;
    font-size: 17px;
  }
  .hero { padding: 32px 0; }
}

/* ============================================================
   v4 — selector stays 2-up on mobile · Google rating in the trust
   strip · data-driven core-services collage (bento, distinct icons)
   (appended last so these win the cascade; no earlier rules touched)
   ============================================================ */

/* 1) Audience selector — keep Business + Residential SIDE BY SIDE at
   every width (was stacking to 1 column at <=860px). */
.selector-row { grid-template-columns: 1fr 1fr; }
/* Short CTA label is desktop-hidden; it swaps in on narrow phones (see below). */
.go-short { display: none; }

@media (max-width: 860px) {
  .selector-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  /* Two columns on a phone, decluttered: the WHOLE card is the tap target
     (the corner arrow is the only affordance), icon stacks above a clean
     full-width title, and the secondary chips + Explore button are dropped. */
  .selector-row { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sel-panel { padding: 16px 15px 18px; gap: 8px; min-height: 132px; }
  /* Stack icon over title so titles wrap cleanly instead of squeezing beside the icon */
  .sel-panel .sel-titlerow { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sel-panel .sel-icon { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; }
  .sel-panel .sel-icon svg { width: 20px; height: 20px; }
  .sel-panel h3 { font-size: 16px; line-height: 1.15; }
  .sel-panel .sel-tag { font-size: 12.5px; line-height: 1.3; }
  .sel-arrow { top: 12px; right: 12px; width: 26px; height: 26px; }
  /* Drop the busy secondary detail — corner arrow signals the whole card is tappable */
  .sel-chips { display: none; }
  .sel-panel .sel-go { display: none; }
}

/* 2) Google rating — sits at the end of the trust strip (right on
   desktop, full-width below the stats on mobile). Gold stars read on navy. */
.stats-band .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.stats-band .stats-grid { flex: 1 1 420px; }
.google-rating {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--white);
  transition: transform 0.18s ease, background 0.18s ease;
}
.google-rating:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.13); color: var(--white); }
.google-rating .g-stars { display: inline-flex; line-height: 0; }
.google-rating .g-rating-meta { display: inline-flex; align-items: center; gap: 10px; }
.google-rating .g-rating-num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: var(--white);
  letter-spacing: -0.02em;
}
.google-rating .g-rating-label {
  display: flex;
  flex-direction: column;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.2;
}
.google-rating .g-brand { color: var(--white); }
.google-rating .g-count {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 3px;
}

@media (max-width: 860px) {
  .stats-band .wrap { gap: 20px; }
  .stats-band .stats-grid { flex: 1 1 100%; }
  .google-rating { flex: 1 1 100%; justify-content: flex-start; }
}
@media (max-width: 560px) {
  .google-rating { padding: 12px 14px; gap: 12px; }
  .google-rating .g-rating-num { font-size: 26px; }
}

/* 3) Core-services collage — data-driven bento.
   Size is set per tile via --featured / --wide / (default standard);
   dense auto-flow packs them into a varied collage. Featured = Data Recovery. */
.bento { grid-auto-flow: dense; }
.bento-tile { grid-column: span 1; }                                  /* standard */
.bento-tile--wide { grid-column: span 2; }                            /* 2 cols   */
.bento-tile--featured { grid-column: span 2; grid-row: span 2; }      /* big tile */

/* Distinct icon per service (SVG inherits color via currentColor) */
.svc-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--cool);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.svc-icon svg { width: 24px; height: 24px; }

/* Featured tile: navy + reused data-recovery photo, white content */
.bento-tile--featured {
  background: var(--navy-grad);
  border: none;
  box-shadow: inset 0 0 0 2px rgba(40, 167, 69, 0.55), 0 16px 40px rgba(18, 41, 107, 0.25);
  padding: 34px 30px;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}
.bento-tile--featured .svc-icon { background: rgba(40, 167, 69, 0.18); color: var(--white); }
.bento-tile--featured h3 { color: var(--white); font-size: clamp(22px, 1.8vw, 28px); }
.bento-tile--featured p { color: rgba(255, 255, 255, 0.80); font-size: 15px; flex: 0 0 auto; }
.bento-tile--featured .tile-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.24;
  pointer-events: none;
}
.bento-tile--featured > :not(.tile-photo) { position: relative; z-index: 1; }
.bento-tile--featured .tile-flag {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  border: 1px solid rgba(40, 167, 69, 0.6);
  border-radius: 999px;
  padding: 4px 12px;
  background: rgba(10, 26, 82, 0.4);
}
.bento-tile--featured .tile-learn { color: var(--white); }
.bento-tile--featured:hover .tile-learn,
.bento-tile--featured:focus-visible .tile-learn { color: var(--green); }

/* Collage responsive: 2-up tablet, single column phone */
@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento-tile--wide { grid-column: span 2; }
  .bento-tile--featured { grid-column: span 2; grid-row: span 1; min-height: 260px; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .bento-tile--wide,
  .bento-tile--featured { grid-column: span 1; }
  .bento-tile--featured { min-height: 240px; }
}

/* ============================================================
   v5 — image-driven core services: photo cards + featured photo
   tile. Replaces the v4 flat-icon treatment. Appended last so it
   wins the cascade; no earlier sections touched.
   ============================================================ */

/* 3-column photo collage on desktop; Data Recovery stays the big featured tile. */
.bento { grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; }

/* ---- Standard photo-card: clean header image, then body ---- */
.svc-card {
  padding: 0;
  gap: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.svc-photo-wrap {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--cool);
}
.svc-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.svc-card:hover .svc-photo,
.svc-card:focus-visible .svc-photo { transform: scale(1.04); }
.svc-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px 22px;
}
.svc-body p { flex: 1; }

/* Visible placeholder when a service has no photo yet (never a blank tile) */
.svc-photo-missing {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: repeating-linear-gradient(45deg, #eef1f6 0 12px, #e6eaf2 12px 24px);
}

/* ---- Featured tile: full-bleed photo + dark-to-transparent overlay ---- */
.bento-tile--featured {
  padding: 0;
  background: var(--deep);
  border: none;
  box-shadow: inset 0 0 0 2px rgba(40, 167, 69, 0.55), 0 16px 40px rgba(18, 41, 107, 0.25);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  min-height: 340px;
}
.bento-tile--featured .svc-photo-wrap {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  z-index: 0;
}
.bento-tile--featured .svc-photo { opacity: 1; }
.bento-tile--featured:hover .svc-photo,
.bento-tile--featured:focus-visible .svc-photo { transform: scale(1.04); }
.bento-tile--featured::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10, 26, 82, 0.10) 0%, rgba(10, 26, 82, 0.32) 42%, rgba(10, 26, 82, 0.90) 100%);
  pointer-events: none;
}
.bento-tile--featured .svc-feat-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 28px 30px;
}
.bento-tile--featured h3 { color: var(--white); font-size: clamp(22px, 1.8vw, 28px); }
.bento-tile--featured p { color: rgba(255, 255, 255, 0.88); font-size: 15px; }
.bento-tile--featured .tile-learn { color: var(--white); }
.bento-tile--featured:hover .tile-learn,
.bento-tile--featured:focus-visible .tile-learn { color: var(--green); }
.bento-tile--featured .tile-flag { position: absolute; top: 18px; left: 18px; z-index: 3; }

/* ---- Responsive (must follow everything above to win the cascade) ---- */
@media (max-width: 860px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  /* Data Recovery becomes a full-width banner so its photo still reads big. */
  .bento-tile--featured { grid-column: 1 / -1; grid-row: auto; min-height: 300px; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; gap: 16px; }
  .bento-tile--featured { grid-column: 1 / -1; min-height: 300px; }
  .svc-photo-wrap { aspect-ratio: 16 / 10; }
  .svc-body { padding: 18px 18px 20px; }
}

/* ============================================================
   v6 — uniform grid of EQUAL photo cards for all six services.
   Retires the oversized featured tile; Data Recovery is now a
   normal card placed first, marked with a "Most requested" badge.
   Columns 3 / 2 / 1 are inherited from v5. Appended last to win.
   ============================================================ */

/* Even, non-bento flow; equal row heights on desktop so all cards match. */
.bento { grid-auto-flow: row; }
@media (min-width: 861px) { .bento { grid-auto-rows: 1fr; } }

/* Card anchors the corner badge; body pins "Learn more" to the bottom so
   every card lines up regardless of how long the copy or chips run. */
.svc-card { position: relative; }
.svc-body p { flex: 0 0 auto; }
.svc-body .tile-learn { margin-top: auto; }

/* "Most requested" corner badge over the photo header */
.svc-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(40, 167, 69, 0.55);
  border-radius: 999px;
  padding: 5px 12px;
  box-shadow: 0 4px 12px rgba(10, 26, 82, 0.18);
}

/* Optional feature chips under each description */
.svc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.svc-tags span {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 11.5px;
  color: var(--navy);
  background: var(--cool);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* ============================================================
   v7 — reference-driven TOP of page: dark hero band, three
   category boxes, "what we do" value boxes. Built on the site's
   existing brand tokens (navy / green accent / light); the
   reference's literal hexes and shield/"Path2Clarity" branding
   are intentionally NOT adopted. Appended last to win the cascade.
   ============================================================ */

/* ---------- 1) HERO band (dark navy, copy left, image right) ---------- */
.herox {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(120% 130% at 88% 8%, rgba(46,68,144,.55) 0%, rgba(10,26,82,0) 55%),
    var(--navy-grad);
}
.herox-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
}
.herox-copy {
  padding: 60px 30px 60px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}
.herox-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.herox-eyebrow::before { content:""; width:26px; height:2px; background: var(--green); }
.herox-title {
  color: #fff;
  font-size: clamp(30px, 3.3vw, 50px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.herox-title .hl-green { color: var(--green); white-space: normal; }
.herox-title .hl-green::after { display: none; }
.herox-sub { font-size: 16px; color: rgba(255,255,255,.82); max-width: 540px; }
.herox-cats { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 2px; }
.herox-cat {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; font-size: 13.5px;
  color: rgba(255,255,255,.92);
}
.herox-cat-ic {
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  color: var(--green); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.herox-cat-ic svg { width: 17px; height: 17px; }
.herox-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.herox .btn-primary { background: #fff; color: var(--navy); border-color: #fff; }
.herox .btn-primary:hover { background: var(--cool); color: var(--deep); }
.herox .btn-outline { color: #fff; border-color: rgba(255,255,255,.55); }
.herox .btn-outline:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.08); }
.herox-meta { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.herox-serving {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; font-size: 13.5px;
  color: rgba(255,255,255,.9);
}
.herox-serving .herox-pin { color: var(--green); display: inline-flex; }
.herox-serving .herox-pin svg { width: 16px; height: 16px; }
.herox-brandline {
  font-family: var(--font-head); font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.04em; color: rgba(255,255,255,.6);
}

/* image column with angled left edge (desktop) */
.herox-media { position: relative; clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%); }
.herox-img { width: 100%; height: 100%; min-height: 440px; object-fit: cover; display: block; }
/* angled green divider over the seam (desktop only) */
.herox-divider {
  position: absolute; top: -8%; left: 50.5%;
  width: 4px; height: 116%;
  background: var(--green);
  transform: skewX(-9deg);
  box-shadow: 0 0 24px rgba(40,167,69,.45);
  z-index: 3; pointer-events: none;
}
/* "A real person answers" — now a tappable call button on the image */
.herox-badge {
  position: absolute; left: 22px; bottom: 22px; z-index: 4;
  display: inline-flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-float); padding: 12px 18px; color: var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.herox-badge:hover { transform: translateY(-2px); color: var(--ink); box-shadow: 0 20px 50px rgba(10,26,82,.26); }
.herox-badge .herox-badge-txt { display: flex; flex-direction: column; }
.herox-badge strong { font-family: var(--font-head); color: var(--deep); font-size: 15px; line-height: 1.2; }
.herox-badge small { color: var(--muted); font-size: 12.5px; }

/* ---------- 2) THREE CATEGORY BOXES (whole card is a link) ---------- */
.cats { padding: 44px 0 6px; background: var(--white); }
.cats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cat-card {
  display: flex; flex-direction: column;
  border-radius: var(--radius); overflow: hidden;
  background: var(--navy-grad); color: #fff;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 14px 36px rgba(18,41,107,.22);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); color: #fff; }
.cat-card:focus-visible { outline: 3px solid rgba(40,167,69,.5); outline-offset: 3px; }
.cat-top { display: flex; align-items: stretch; min-height: 152px; }
.cat-copy { flex: 1 1 58%; padding: 22px 20px; display: flex; flex-direction: column; gap: 8px; }
.cat-copy h3 { color: #fff; font-size: 18px; line-height: 1.15; position: relative; padding-bottom: 9px; }
.cat-copy h3::after { content:""; position:absolute; left:0; bottom:0; width:34px; height:3px; border-radius:2px; background: var(--green); }
.cat-copy p { color: rgba(255,255,255,.8); font-size: 13.5px; line-height: 1.55; }
.cat-media { flex: 0 0 42%; position: relative; overflow: hidden; background: var(--deep); }
.cat-media img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; }
.cat-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px 20px 18px;
  background: rgba(0,0,0,.18);
  border-top: 1px solid rgba(255,255,255,.08);
}
.cat-tags span {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-weight: 600; font-size: 12px;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px; padding: 5px 11px;
}
.cat-tags span svg { width: 14px; height: 14px; color: var(--green); flex: none; }

/* ---------- 5) "WHAT WE DO" value boxes ---------- */
.values { padding: 60px 0; background: var(--white); }
.values-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.value-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy-grad); color: #fff;
  padding: 24px 20px; min-height: 196px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 12px 30px rgba(18,41,107,.18);
  transition: transform .18s ease, box-shadow .18s ease;
}
.value-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-float); }
.value-ic {
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(40,167,69,.16); color: var(--green); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.value-ic svg { width: 24px; height: 24px; }
.value-card h3 { color: #fff; font-size: 16.5px; line-height: 1.18; letter-spacing: -0.01em; }
.value-card p { color: rgba(255,255,255,.78); font-size: 13px; margin-top: auto; }
/* card 2: van photo + dark overlay */
.value-photo { background: var(--deep); justify-content: flex-end; }
.value-photo::before { content:""; position:absolute; inset:0; z-index:0; background: var(--photo) center/cover no-repeat; }
.value-photo::after { content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(10,26,82,.25) 0%, rgba(10,26,82,.55) 55%, rgba(10,26,82,.92) 100%); }
.value-photo h3, .value-photo p { position: relative; z-index: 2; }
/* card 4: subtle "synergy" dotted motif */
.value-synergy { background: radial-gradient(80% 80% at 80% 12%, rgba(40,167,69,.18) 0%, rgba(10,26,82,0) 60%), var(--navy-grad); }
.value-synergy::before { content:""; position:absolute; inset:0; z-index:0; opacity:.5;
  background-image: radial-gradient(rgba(255,255,255,.16) 1.5px, transparent 1.6px); background-size: 22px 22px; }
.value-synergy > * { position: relative; z-index: 1; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .values-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1000px) {
  .herox-inner { grid-template-columns: 1fr; }
  .herox-divider { display: none; }
  .herox-copy { padding: 44px 24px 28px; }
  .herox-media { clip-path: none; }
  .herox-img { min-height: 300px; }
  .cats-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 760px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .herox-copy { padding: 34px 20px 22px; gap: 14px; }
  .herox-img { min-height: 240px; }
  .herox-ctas .btn { width: 100%; }
  .herox-badge { left: 12px; right: 12px; bottom: 12px; justify-content: flex-start; }
  .values-grid { grid-template-columns: 1fr; }
  .value-card { min-height: 150px; }
  .cat-copy h3 { font-size: 17px; }
}

/* ============================================================
   v8 — scoped fixes (hero + three category boxes only)
   FIX 1: compact hero, full-bleed diagonal image, green seam = the
          clip-path edge (no floating line).
   FIX 2: the three category boxes become LIGHT, photo-forward cards.
   Appended last to win the cascade; nothing else is touched.
   ============================================================ */

/* ---------- FIX 1: HERO ---------- */
.herox {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 440px;          /* compact banner — about one viewport at most */
}
.herox > .wrap { position: relative; z-index: 2; width: 100%; }
.herox-copy {
  max-width: 470px;
  padding: 44px 0;
  gap: 12px;
}
.herox-title { font-size: clamp(27px, 2.5vw, 40px); line-height: 1.06; }
.herox-sub { font-size: 15px; }
.herox-cats { gap: 9px 16px; }
.herox-ctas { margin-top: 6px; }

/* Image: full-bleed to the right page edge, full height, diagonal left edge.
   The drop-shadow paints the green line exactly along the clip seam. */
.herox-media {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  left: auto;
  width: 54%;
  clip-path: polygon(12.5% 0, 100% 0, 100% 100%, 3.5% 100%);
  background: var(--green);          /* peeks out as the thin green seam line */
  z-index: 1;
}
/* photo clipped slightly inside the green panel, leaving a thin green line on the diagonal seam */
.herox-media .herox-img { width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block;
  clip-path: polygon(13% 0, 100% 0, 100% 100%, 4% 100%); }
.herox-badge { z-index: 3; left: auto; right: 30px; bottom: 24px; }

@media (max-width: 1100px) {
  .herox { display: block; min-height: 0; }
  .herox > .wrap { z-index: auto; }
  .herox-copy { max-width: none; padding: 36px 0 26px; }
  .herox-media {
    position: static; width: 100%; height: 280px;
    clip-path: none; filter: none; background: none;
  }
  .herox-media .herox-img { clip-path: none; }
  .herox-badge { right: auto; left: 20px; bottom: 20px; }
}
@media (max-width: 560px) {
  .herox-media { height: 230px; }
  .herox-badge { left: 12px; right: 12px; bottom: 12px; }
}

/* ---------- FIX 2: THREE CATEGORY BOXES → light, photo-forward ---------- */
.cats { padding: 56px 0; background: var(--white); }
.cats-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.cat-card {
  display: flex; flex-direction: column;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); color: var(--ink); }
/* prominent photo header (large, not a thumbnail) */
.cat-media {
  display: block; position: relative;
  width: 100%; aspect-ratio: 16 / 10;
  overflow: hidden; background: var(--cool);
}
.cat-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.cat-card:hover .cat-media img { transform: scale(1.04); }
.cat-body {
  flex: 1;
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 22px 24px;
}
.cat-body h3 { color: var(--deep); font-size: 20px; line-height: 1.15; position: relative; padding-bottom: 10px; }
.cat-body h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px; border-radius: 2px; background: var(--green); }
.cat-body p { color: var(--muted); font-size: 14px; line-height: 1.55; }
.cat-body .cat-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: auto; padding: 4px 0 0;
  background: none; border-top: none;
}
.cat-body .cat-tags span {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-weight: 600; font-size: 12px;
  color: var(--navy);
  background: var(--cool); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 11px;
}
.cat-body .cat-tags span svg { width: 14px; height: 14px; color: var(--green); flex: none; }

@media (max-width: 1000px) {
  .cats-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}

/* ============================================================
   v9 — client-vision tweaks (hero entry points + sharper cards +
   left/right value tiles). Appended last to win the cascade.
   ============================================================ */

/* ---- 1) HERO: three items become clickable tap targets, green seam ---- */
.herox-cats { gap: 8px 8px; }
.herox-cat {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  min-height: 48px;                 /* comfortable tap target */
  transition: background .15s ease, transform .15s ease;
}
.herox-cat:hover,
.herox-cat:focus-visible { background: rgba(255,255,255,.08); color: #fff; transform: translateY(-1px); }
.herox-cat:focus-visible { outline: 2px solid rgba(40,167,69,.6); outline-offset: 2px; }
.herox-cat-ic {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(40,167,69,.16); border: 1px solid rgba(40,167,69,.42);
  color: var(--green); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}
.herox-cat-ic svg { width: 20px; height: 20px; }
.herox-cat:hover .herox-cat-ic { background: rgba(40,167,69,.30); border-color: rgba(40,167,69,.65); }
.herox-cat-tx {
  font-family: var(--font-head); font-weight: 600; font-size: 13px;
  line-height: 1.18; color: #fff; max-width: 92px;
}

/* Green angled divider is now drawn as a thin seam sliver behind the photo
   (a filter drop-shadow can't show — clip-path clips it away). */
.herox-media { filter: none; }

/* ---- 2) THREE CATEGORY BOXES: sharper corners ---- */
.cat-card { border-radius: 4px; }

/* ---- 3) FIVE VALUE TILES: sharper corners + text-left / graphic-right ---- */
.value-card {
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-radius: 4px;
  min-height: 158px;
  overflow: hidden;
}
.value-body {
  flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 20px 16px;
}
.value-card h3 { font-size: 15.5px; }
.value-card p { margin-top: 0; }
.value-graphic {
  flex: 0 0 38%;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, rgba(255,255,255,.09), rgba(255,255,255,0) 70%), rgba(10,26,82,.42);
  border-left: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
}
.value-graphic .value-ic {
  width: 58px; height: 58px; border-radius: 14px;
  background: rgba(40,167,69,.18); color: var(--green);
  display: inline-flex; align-items: center; justify-content: center;
}
.value-graphic .value-ic svg { width: 30px; height: 30px; }
/* van photo fills the right panel */
.value-graphic-photo { background: var(--photo) center/cover no-repeat; border-left: none; }
/* neutralize the old full-card photo/synergy treatments (now panel-based) */
.value-photo { background: var(--navy-grad); justify-content: flex-start; }
.value-photo::before, .value-photo::after { content: none; }
.value-synergy { background: var(--navy-grad); }
.value-synergy::before { content: none; }

@media (max-width: 560px) {
  /* phone: stack the hero entry points as full-width rows; value tiles stay split but roomy */
  .herox-cats { flex-direction: column; align-items: stretch; gap: 6px; }
  .herox-cat-tx { max-width: none; }
  .value-card { min-height: 132px; }
}

/* ============================================================
   v10 — two flat-look fixes (category panels + value tiles).
   Appended last to win the cascade; nothing else is touched.
   ============================================================ */

/* ---- 1) THREE CATEGORY BOXES → flat editorial panels (no elevation) ---- */
.cat-card {
  border-radius: 2px;          /* squared, near-zero */
  box-shadow: none;            /* no floating-card effect */
  border: 1px solid var(--border);   /* hairline separation instead of a shadow */
  transition: border-color .15s ease;
}
.cat-card:hover {
  transform: none;             /* no lift */
  box-shadow: none;            /* no elevation on hover either */
  border-color: #cdd5e6;
}
/* photo sits flush, edge to edge, squared (no rounded photo corners, no gap) */
.cat-media { border-radius: 0; }

/* ---- 2) FIVE VALUE TILES → one continuous fill, no two-tone panel/seam ---- */
.value-graphic {
  flex: 0 0 36%;
  background: none;            /* remove the contrasting panel */
  border-left: none;           /* remove the visible seam */
}
/* the icon now rests directly on the tile's single background (no chip box) */
.value-graphic .value-ic {
  width: auto; height: auto;
  background: none; border: none; border-radius: 0;
  color: var(--green);
}
.value-graphic .value-ic svg { width: 62px; height: 62px; }
/* van photo fades softly into the tile background — no hard edge */
.value-graphic-photo {
  background: var(--photo) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 30%, #000 60%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 30%, #000 60%);
}

/* ============================================================
   v11 — THREE CATEGORY BOXES rebuilt to match client target:
   light upper LEFT/RIGHT split (title+desc | photo) over a
   full-width DARK NAVY tag bar. Flat, squared, no shadow,
   boxes sit close together. Appended last to win the cascade;
   PHASE 1 — only the three category boxes are touched.
   ============================================================ */

/* tight grid, equal-height boxes, only a small gap */
.cats-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: stretch; }

/* flat panel — no card elevation, squared corners, hairline edge */
.cat-card {
  display: flex; flex-direction: column;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 2px;
  box-shadow: none;
  overflow: hidden;
  transition: border-color .15s ease;
}
.cat-card:hover { transform: none; box-shadow: none; border-color: #cdd5e6; color: var(--ink); }

/* upper area: LEFT copy / RIGHT photo split */
.cat-top {
  display: flex; align-items: stretch;
  flex: 1;
  min-height: 156px;
}
.cat-copy {
  flex: 1 1 54%;
  display: flex; flex-direction: column; gap: 9px;
  padding: 22px 20px;
}
.cat-copy h3 {
  color: var(--deep); font-size: 19px; line-height: 1.15; margin: 0;
  position: relative; padding-bottom: 10px;
}
.cat-copy h3::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 34px; height: 3px; border-radius: 2px; background: var(--green);
}
.cat-copy p { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 0; }

/* photo fills the right side, flush to the edges, squared */
.cat-media {
  flex: 0 0 44%;
  position: relative; align-self: stretch;
  width: auto; aspect-ratio: auto;
  overflow: hidden; border-radius: 0; background: var(--cool);
}
.cat-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: none; }
.cat-card:hover .cat-media img { transform: none; }

/* full-width dark navy tag bar — replaces the old light pill chips */
.cat-card .cat-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  margin: 0; padding: 14px 20px;
  background: var(--deep);
  border: none; border-top: none;
}
.cat-card .cat-tags span {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; font-size: 12.5px;
  color: rgba(255,255,255,.92);
  background: none; border: none; border-radius: 0; padding: 0;
}
.cat-card .cat-tags span svg { width: 16px; height: 16px; color: var(--green); flex: none; }

/* tablet / single-column: one box per row (keeps the left/right split).
   Breakpoint raised to 1100px so 3-up only applies where cards are wide
   enough for all three tags to sit on one line. */
@media (max-width: 1100px) {
  .cats-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; gap: 12px; }
}

/* phone: stack vertically — photo on top, then text, then the navy tag bar */
@media (max-width: 560px) {
  .cats-grid { grid-template-columns: 1fr; gap: 12px; }
  .cat-top { flex-direction: column; }
  .cat-media { order: -1; flex: none; width: 100%; height: 180px; }
  .cat-copy { flex: none; padding: 20px 18px 16px; }
  .cat-card .cat-tags { gap: 12px 18px; padding: 14px 18px; }
}

/* ============================================================
   v12 — three category boxes, two refinements (boxes only):
   (1) the photo becomes a FULL-WIDTH background in the upper
       area, anchored RIGHT (right side fully shown, crops left),
       running behind the copy under a white veil that is opaque
       on the LEFT (text stays crisp) and fades to transparent on
       the RIGHT (more of the image shows, reads larger).
   (2) the dark navy tag bar is tuned so all three tags + green
       icons sit on ONE line.
   Appended last to win the cascade.
   ============================================================ */

/* (1) image runs full-width behind the copy */
.cat-top { position: relative; overflow: hidden; }
.cat-media {
  position: absolute; inset: 0;
  flex: none; width: 100%; height: 100%;
  z-index: 0; background: var(--cool);
}
.cat-media img { object-position: right center; }
/* white veil: opaque behind the text on the left, clear on the right.
   Kept lighter overall so the photo reads more strongly; still opaque
   enough on the left edge to keep the title and description crisp. */
.cat-media::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right,
    rgba(255,255,255,1)   0%,
    rgba(255,255,255,.96) 26%,
    rgba(255,255,255,.58) 46%,
    rgba(255,255,255,.16) 62%,
    rgba(255,255,255,0)   74%);
}
/* copy floats over the veiled left side */
.cat-copy {
  position: relative; z-index: 2;
  flex: none; width: 62%;
}

/* (2) navy tag bar: compact so all three fit on one row */
.cat-card .cat-tags {
  flex-wrap: nowrap; justify-content: space-between;
  gap: 8px; padding: 12px 13px;
}
.cat-card .cat-tags span {
  font-size: 10px; gap: 5px; white-space: nowrap;
}
.cat-card .cat-tags span svg { width: 12px; height: 12px; }

/* mobile: stack image ABOVE text (cleanest readability) — no veil needed;
   let the tag bar wrap only if it truly cannot fit */
@media (max-width: 560px) {
  .cat-media { position: relative; inset: auto; height: 180px; order: -1; z-index: 0; }
  .cat-media::after { content: none; }
  .cat-copy { width: 100%; }
  .cat-card .cat-tags { flex-wrap: wrap; justify-content: flex-start; gap: 10px 16px; }
}

/* ============================================================
   v13 — three category boxes, four tweaks (boxes only):
   (a) background photo starts ~25% in from the left edge;
   (b) softer (slightly rounded) corners;
   (c) tighter top/bottom padding on the section (~18px);
   (d) subtle clickable hover feedback (gentle lift) like the
       other cards on the page.
   Appended last to win the cascade.
   ============================================================ */

/* (c) tighter section padding */
.cats { padding: 18px 0; }

/* (b) a touch more rounded */
.cat-card { border-radius: 8px; }

/* (d) subtle feedback — these are clickable, so lift gently on hover/focus */
.cat-card { transition: transform .18s ease, box-shadow .18s ease, border-color .15s ease; }
.cat-card:hover,
.cat-card:focus-visible {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card);
  border-color: #cdd5e6;
}

/* (a) background photo begins ~25% in from the left (split layout only;
   on mobile the photo stays full-width on top) */
@media (min-width: 561px) {
  .cat-media { left: 25%; }
}

/* ============================================================
   v14 — FIVE "WHAT WE DO" value tiles rebuilt to match target:
   tiles 1/3/4/5 = ANGLED (diagonal) split — navy copy on the
   left, photo on the right with a thin green seam matching the
   hero diagonal; tile 2 = FULL-BLEED van photo with a location
   badge. Dark navy, sharp corners, flat. Only this section
   changes. Appended last to win the cascade.
   ============================================================ */
.values { padding: 56px 0; background: var(--white); }
.values-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: stretch; }

.value-card {
  position: relative; overflow: hidden;
  display: block;                       /* override old flex row */
  border-radius: 4px;                   /* sharp corners */
  background: var(--navy-grad); color: #fff;
  min-height: 208px; padding: 0;
  box-shadow: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.value-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }

/* copy on the left, above the photo */
.value-body {
  position: relative; z-index: 4;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 7px;
  padding: 18px 16px;
  max-width: 60%;
}
.value-card h3 { color: #fff; font-size: 14.5px; line-height: 1.16; letter-spacing: -0.01em; margin: 0; }
.value-card p  { color: rgba(255,255,255,.82); font-size: 12px; line-height: 1.5; margin: 0; }

/* ---- angled split tiles (1,3,4,5) ---- */
.value-split .value-img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  clip-path: polygon(60% 0, 100% 0, 100% 100%, 48% 100%);
}
/* dark veil along the seam so copy stays readable where it meets the photo */
.value-split::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  clip-path: polygon(60% 0, 100% 0, 100% 100%, 48% 100%);
  background: linear-gradient(to right,
    rgba(10,26,82,0) 34%,
    rgba(10,26,82,.92) 50%,
    rgba(10,26,82,.55) 64%,
    rgba(10,26,82,0) 82%);
}

/* ---- tile 2: full-bleed van photo + location badge ---- */
.value-full { background: var(--photo) center / cover no-repeat, var(--deep); }
.value-full::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,26,82,.12) 0%, rgba(10,26,82,.10) 50%, rgba(10,26,82,.42) 100%);
}
.value-badge {
  position: absolute; z-index: 2; left: 14px; bottom: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  width: max-content; max-width: calc(100% - 28px);
  padding: 9px 14px; border-radius: 999px;
  background: rgba(8,20,62,.82); border: 1px solid rgba(255,255,255,.20);
  color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 13px;
  line-height: 1.2; letter-spacing: -0.01em;
}
.value-badge svg { width: 17px; height: 17px; color: var(--green); flex: none; }

/* visually-hidden (kept for wording/accessibility, e.g. tile 2's description) */
.u-sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* responsive grid (re-declared so it wins over the v14 base rule) */
@media (max-width: 1100px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .values-grid { grid-template-columns: 1fr; }
  .value-card { min-height: 168px; }
  .value-body { max-width: 58%; }
}

/* ============================================================
   v15 — MOBILE-ONLY hero polish (phones ≤560px; desktop untouched).
   Smaller headline + tighter vertical rhythm + a compact stack of
   the three entry points, so the photo and the content below come
   into view sooner. No wording changes. Appended last to win.
   ============================================================ */
@media (max-width: 560px) {
  /* tighter copy padding + overall rhythm (less space below eyebrow,
     around the subhead, before the meta) */
  .herox-copy { padding: 22px 20px 18px; gap: 9px; }

  /* smaller headline so it takes less vertical room */
  .herox-title { font-size: 23px; line-height: 1.12; }

  /* trim the subhead */
  .herox-sub { font-size: 13.5px; line-height: 1.4; }

  /* compact entry-point stack — smaller gaps, each still a tap target */
  .herox-cats { gap: 6px; margin-top: 0; }
  .herox-cat { min-height: 44px; padding: 5px 6px; gap: 10px; }
  .herox-cat-ic { width: 34px; height: 34px; border-radius: 9px; }
  .herox-cat-ic svg { width: 18px; height: 18px; }

  /* trim the gap before "Proudly serving…" and the tagline */
  .herox-meta { margin-top: 3px; gap: 3px; }
}