/* Justice Energy Co. — site styles
   Mobile-first. Breakpoints: 640px (large phone), 768px (tablet), 1024px (desktop). */

:root {
  --navy-950: #060947;
  --navy-900: #090d64;
  --navy-800: #161c88;
  --navy-700: #090d64;
  --teal-800: #090d64;
  --teal-700: #090d64;
  --teal-600: #090d64;
  --teal-500: #090d64;
  --teal-100: #e1e3f5;
  --teal-50: #f3f4fc;
  --amber-500: #93d16b;
  --amber-600: #7cbf52;
  --amber-100: #eaf7e0;
  --blue-500: #090d64;
  --red-700: #b42318;

  --ink: #090d64;
  --body: #3f4d63;
  --muted: #5c6a80;
  --line: #e3e4f0;
  --surface: #ffffff;
  --surface-2: #f6f6fc;
  --surface-3: #ececf8;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --shadow-sm: 0 1px 2px rgba(9, 13, 100, 0.06), 0 2px 8px rgba(9, 13, 100, 0.05);
  --shadow: 0 2px 4px rgba(9, 13, 100, 0.05), 0 12px 32px rgba(9, 13, 100, 0.09);
  --shadow-lg: 0 4px 8px rgba(9, 13, 100, 0.05), 0 28px 64px rgba(9, 13, 100, 0.16);

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 80px;
  --font-head: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
/* Base size 15px (93.75% of the browser default), so all rem-based text is a notch more compact while
   still following the visitor's text-size setting. */
html { font-size: 93.75%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--surface);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--teal-700); text-underline-offset: 3px; }
a[href^="tel:"] { white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--teal-800); } }
h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 1.3rem + 2.8vw, 3.2rem); line-height: 1.05; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); }
h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 0.85em; }
/* Phones: headings can grow with the text-size setting, but never so far that a long word such as
   "Energy-efficiency" is wider than the screen. */
@media (max-width: 639px) {
  h1 { font-size: min(clamp(1.9rem, 1.3rem + 2.8vw, 3.2rem), 9.2vw); }
  h2 { font-size: min(clamp(1.375rem, 1.2rem + 1.5vw, 2.25rem), 6.6vw); }
  h3 { font-size: min(1.125rem, 6.2vw); }
}
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--teal-100); color: var(--ink); }

.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;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  background: var(--navy-900); color: #fff; padding: 12px 18px; border-radius: var(--radius-sm); font-weight: 600;
}
.skip-link:focus { top: 12px; color: #fff; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(34px, 4.5vw, 62px); }
.section--tight { padding-block: clamp(22px, 3vw, 38px); }
.section--tint { background: var(--surface-2); }
.section--mint { background: linear-gradient(180deg, var(--teal-50), #fff); }
.section + .section--tint, .section--tint + .section--tint { border-top: 1px solid var(--line); }

/* Small titles above section headings, with a short accent line underneath. */
.eyebrow {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 8px;
  margin-bottom: 14px;
  color: var(--teal-700); font-family: var(--font-head); font-size: 0.8125rem; font-weight: 700; line-height: 1.35;
  letter-spacing: 0.12em; text-transform: uppercase; text-wrap: balance;
}
/* Phones: small titles stay within two lines, even with enlarged text (the size is capped by the screen width). */
@media (max-width: 639px) {
  .eyebrow { font-size: min(0.8125rem, 3.4vw); letter-spacing: 0.1em; }
  .eyebrow::after { width: 22px; }
}
.eyebrow::after { content: ''; width: 28px; height: 3px; border-radius: 3px; background: var(--teal-600); }
.lead { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); color: var(--body); max-width: 62ch; }
.section-head { max-width: 760px; margin-bottom: clamp(18px, 2.5vw, 32px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { align-items: center; }
/* Wide heads: title and intro each on one line where the screen allows; balanced wrapping on smaller screens. */
.section-head--wide { max-width: none; }
.section-head--wide .lead { max-width: none; margin-inline: auto; }
.section-head--wide > * { text-wrap: balance; }
.section-head p:last-child { margin-bottom: 0; }
.muted { color: var(--muted); }
.small { font-size: 0.9rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  border: 2px solid transparent; border-radius: 999px;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.btn svg { width: 20px; height: 20px; flex: none; }
/* On phones a long label (or text the visitor has enlarged) wraps inside the button instead of pushing it,
   and the box around it, past the edge of the screen. */
@media (max-width: 639px) {
  .btn { max-width: 100%; white-space: normal; text-align: center; }
  /* Phones: every button spans its container, one per row, at one size, so stacks line up edge to edge. */
  .btn, .btn-sm, .btn-lg { width: 100%; min-height: 48px; padding: 10px 18px; font-size: 1rem; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row[style] { justify-content: flex-start !important; }
  .card--feature .btn, .program .btn { align-self: stretch; }
}
.hero-grid > *, .split > *, .cta-card > *, .cards > *, .info-item > * { min-width: 0; }
.eyebrow { max-width: 100%; }
.info-item a { overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-1px); } }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--teal-700); color: #fff; box-shadow: 0 8px 20px rgba(9, 13, 100, 0.28); }
@media (hover: hover) and (pointer: fine) { .btn-primary:hover { background: var(--teal-800); color: #fff; } }
/* Green buttons: a deeper brand green so the white label stays readable. */
.btn-accent { background: #4f9a2e; color: #fff; text-shadow: 0 1px 1px rgba(9, 13, 100, 0.2); box-shadow: 0 8px 20px rgba(79, 154, 46, 0.28); }
.btn-accent svg { color: #fff; }
@media (hover: hover) and (pointer: fine) { .btn-accent:hover { background: #458a27; color: #fff; } }
.btn-outline { border-color: #c9d5e6; color: var(--ink); background: #fff; }
@media (hover: hover) and (pointer: fine) { .btn-outline:hover { border-color: var(--navy-900); color: var(--navy-900); } }
.btn-ghost-light { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
@media (hover: hover) and (pointer: fine) { .btn-ghost-light:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.06); } }
.btn-sm { min-height: 42px; padding: 9px 18px; font-size: 0.9375rem; }
.btn-lg { min-height: 52px; padding: 12px 26px; font-size: 1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.text-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-family: var(--font-head); text-decoration: none; }
.text-link svg { width: 18px; height: 18px; transition: transform 0.2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .text-link:hover svg { transform: translateX(3px); } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 4px 20px rgba(9, 13, 100, 0.06); }
.header-inner { display: flex; align-items: center; gap: 20px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex: none; }
.brand-logo { display: block; height: 60px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; font-family: var(--font-head); }
.brand-text strong { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.01em; }
.brand-text span { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-700); }
@media (hover: hover) and (pointer: fine) { .brand:hover { color: var(--ink); } }

.nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-list > li { position: relative; display: flex; align-items: center; }
.nav-list > li > a {
  display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 999px;
  color: var(--ink); font-family: var(--font-head); font-weight: 600; font-size: 0.975rem; text-decoration: none;
}
.nav-list > li > a[aria-current='page'] { background: var(--surface-3); color: var(--navy-900); }
@media (hover: hover) and (pointer: fine) { .nav-list > li > a:hover { background: var(--surface-3); color: var(--navy-900); } }
.sub-toggle {
  display: inline-grid; place-items: center; width: 30px; height: 30px; margin-left: -10px;
  border: 0; background: none; border-radius: 50%; cursor: pointer; color: var(--ink);
}
.sub-toggle svg { width: 16px; height: 16px; transition: transform 200ms var(--ease); }
.sub {
  position: absolute; top: calc(100% + 10px); left: -16px; width: 380px;
  list-style: none; margin: 0; padding: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(4px) scale(0.97); transform-origin: 32px 0;
  transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 180ms;
}
.sub::before { content: ''; position: absolute; inset: -12px 0 auto; height: 12px; }
.has-sub:focus-within .sub, .has-sub.is-open .sub { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) and (pointer: fine) { .has-sub:hover .sub { opacity: 1; visibility: visible; transform: none; } }
.has-sub.is-open .sub-toggle svg { transform: rotate(180deg); }
.sub a {
  display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; align-items: center;
  padding: 10px 12px; border-radius: var(--radius); text-decoration: none; color: var(--ink);
}
.sub a[aria-current='page'] { background: var(--surface-2); }
@media (hover: hover) and (pointer: fine) { .sub a:hover { background: var(--surface-2); } }
.sub .ico { grid-row: span 2; }
.sub strong { font-family: var(--font-head); font-size: 0.95rem; }
.sub small { color: var(--muted); font-size: 0.8125rem; line-height: 1.35; }
/* Service-area submenu: two columns of city names. */
.sub--areas { width: 400px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.sub--areas a { grid-template-columns: 18px 1fr; gap: 10px; padding: 9px 12px; }
.sub--areas a svg { width: 16px; height: 16px; color: var(--teal-600); }
.sub--areas .sub-wide { grid-column: 1 / -1; }
.sub .sub-all { display: block; margin-top: 4px; padding: 12px; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); font-weight: 700; font-family: var(--font-head); color: var(--teal-700); }

.header-actions { display: flex; align-items: center; gap: 10px; margin-left: 12px; }
.header-phone {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px;
  color: var(--ink); font-family: var(--font-head); font-weight: 700; text-decoration: none; white-space: nowrap;
}
.header-phone svg { width: 20px; height: 20px; color: var(--teal-700); }
.menu-toggle {
  display: none; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; cursor: pointer; place-items: center;
}
.menu-toggle .bars, .menu-toggle .bars::before, .menu-toggle .bars::after {
  display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}
.menu-toggle .bars { position: relative; }
.menu-toggle .bars::before, .menu-toggle .bars::after { content: ''; position: absolute; left: 0; }
.menu-toggle .bars::before { top: -6px; }
.menu-toggle .bars::after { top: 6px; }
.menu-toggle[aria-expanded='true'] .bars { background: transparent; }
.menu-toggle[aria-expanded='true'] .bars::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] .bars::after { transform: translateY(-6px) rotate(-45deg); }
.nav-mobile-cta { display: none; }

/* Below 1100px the header phone shows as an icon only. */
@media (max-width: 1099px) {
  .header-phone span { display: none; }
}
/* Desktop header: sized in rem, but capped at its normal size so an enlarged text setting on a
   landscape tablet cannot push the menu and buttons off screen. */
@media (min-width: 1024px) {
  .site-header .nav-list > li > a { font-size: min(0.975rem, 15.6px); }
  .site-header .brand-text strong { font-size: min(1.125rem, 18px); }
  .site-header .brand-text span { font-size: min(0.75rem, 12px); }
  .header-phone { font-size: min(1.0625rem, 17px); }
  .site-header .header-actions .btn { font-size: min(0.9375rem, 15px); }
}
@media (max-width: 1023px) {
  .menu-toggle { display: grid; }
  .header-actions { margin-left: auto; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
    margin: 0; padding: 16px var(--gutter) calc(32px + env(safe-area-inset-bottom));
    background: #fff; overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 160ms var(--ease), transform 160ms var(--ease), visibility 160ms;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { flex-wrap: wrap; border-bottom: 1px solid var(--line); }
  .nav-list > li > a { flex: 1; padding: 16px 4px; border-radius: 0; font-size: 1.125rem; }
  .nav-list > li > a[aria-current='page'] { background: none; color: var(--teal-700); }
  .nav-list > li > a:hover { background: none; }
  .sub-toggle { width: 46px; height: 46px; margin: 0; }
  .sub {
    position: static; width: 100%; padding: 0 0 12px; border: 0; box-shadow: none; border-radius: 0;
    opacity: 1; visibility: visible; transform: none; display: none;
  }
  .has-sub:hover .sub, .has-sub:focus-within .sub { display: none; }
  .has-sub.is-open .sub { display: block; }
  .has-sub.is-open .sub--areas { display: grid; }
  .sub--areas { width: 100%; }
  .sub::before { display: none; }
  .nav-mobile-cta { display: grid; gap: 12px; margin-top: 24px; }
  .nav-mobile-cta .btn { width: 100%; }
  body.nav-open { overflow: hidden; }
}
@media (max-width: 639px) {
  :root { --header-h: 74px; }
  .header-actions .btn { display: none; }
  .brand-logo { height: 58px; }
  /* Grows with the visitor's text size, but never so far that the name pushes the menu button off screen. */
  .brand-text strong { font-size: min(1.0625rem, 5.2vw); }
  .brand-text span { font-size: min(0.75rem, 3.7vw); }
  .brand { flex: 0 1 auto; min-width: 0; }
}

/* ---------- Icons ---------- */
.ico {
  display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--teal-50); color: var(--teal-700);
}
.ico svg { width: 22px; height: 22px; }
.ico--lg { width: 56px; height: 56px; border-radius: 16px; }
.ico--lg svg { width: 28px; height: 28px; }
.ico--amber { background: var(--amber-100); color: #3d7a1c; }
.ico--navy { background: var(--navy-900); color: var(--amber-500); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(24px, 3.5vw, 52px) clamp(32px, 4.5vw, 62px);
  background:
    radial-gradient(900px 480px at 85% 10%, rgba(60, 70, 200, 0.12), transparent 60%),
    radial-gradient(700px 420px at 0% 100%, rgba(147, 209, 107, 0.12), transparent 60%),
    linear-gradient(180deg, #f7f7fd 0%, #fff 100%);
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px; opacity: 0.35;
  -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 65%); mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 65%);
}
.hero-grid { position: relative; display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero h1 { margin-bottom: 20px; }
/* Landscape tablets and small laptops: the two-column hero has a narrower text column. */
@media (min-width: 960px) and (max-width: 1279px) {
  .hero h1 { font-size: min(clamp(2.2rem, 1.5rem + 3.2vw, 3.6rem), 4.3vw); }
}
.hero h1 .hl { color: #4f9a2e; }
/* Home headline: always three lines. Each line is kept whole and the size follows the width of the text
   column (container units), capped at the normal h1 size. */
.hero-grid > div:first-child { container-type: inline-size; }
.home-title > span { display: block; white-space: nowrap; }
/* --fit is set by main.js when a phone's text zoom still makes a line too wide for the screen. */
.hero .home-title { font-size: calc(min(3.2rem, 6.9cqi) * var(--fit, 1)); line-height: 1.08; }
@supports not (font-size: 1cqi) { .hero .home-title { font-size: calc(min(3.2rem, 6.6vw) * var(--fit, 1)); } }
/* Phones: the title lines fill the width of the column (main.js still shrinks them if text zoom makes a line too wide). */
@media (max-width: 639px) {
  .hero .home-title { font-size: calc(min(3.2rem, 9.4cqi) * var(--fit, 1)); }
  @supports not (font-size: 1cqi) { .hero .home-title { font-size: calc(min(3.2rem, 8.6vw) * var(--fit, 1)); } }
  /* The eyebrow above it stays on one line, with tighter letter spacing (main.js shrinks it if it still does not fit). */
  .hero .eyebrow[data-fit-line] { letter-spacing: 0.06em; }
}
.hero .lead { margin-bottom: 28px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; padding: 0; margin: 28px 0 0; }
.hero-points li { display: inline-flex; align-items: flex-start; gap: 8px; font-weight: 600; color: var(--ink); font-size: 0.95rem; }
.hero-points svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--teal-600); }
.hero-media { position: relative; }
.hero-media .frame {
  position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg);
  background: var(--surface-3); aspect-ratio: 4 / 3;
}
.hero-media .frame img { width: 100%; height: 100%; object-fit: cover; }
.hero-badge {
  position: absolute; left: -12px; bottom: -22px;
  display: flex; align-items: center; gap: 12px; max-width: 290px;
  padding: 14px 18px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
}
.hero-badge strong { display: block; font-family: var(--font-head); color: var(--ink); font-size: 0.975rem; line-height: 1.3; }
.hero-badge span { display: block; color: var(--muted); font-size: 0.85rem; line-height: 1.35; }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.02fr 0.98fr; }
  /* Desktop: the photo stretches to the full height of the text beside it instead of a fixed 4:3 box. */
  .hero-grid { align-items: stretch; }
  .hero-grid > div:first-child { align-self: center; }
  .hero-media { display: flex; flex-direction: column; }
  .hero-media .frame { flex: 1; aspect-ratio: auto; min-height: 380px; }
  .hero-media .frame img { position: absolute; inset: 0; }
}
/* Home hero slider: the service photos crossfade in the same frame; the caption links to the service. */
.hero-slider .slides { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.hero-slider .slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.7s var(--ease), visibility 0s linear 0.7s; }
.hero-slider .slide.is-active { opacity: 1; visibility: visible; transition: opacity 0.7s var(--ease), visibility 0s; }
.hero-slider .slide a { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; }
.hero-slider .slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide-cap {
  position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 2px;
  padding: 64px clamp(16px, 2.5vw, 28px) 62px; background: linear-gradient(180deg, transparent, rgba(6, 9, 71, 0.82));
}
.slide-cap strong { font-family: var(--font-head); font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); line-height: 1.2; }
.slide-cap span { font-size: 0.875rem; line-height: 1.35; opacity: 0.92; max-width: 46ch; }
.slider-controls { position: absolute; left: clamp(16px, 2.5vw, 28px); right: clamp(12px, 2vw, 22px); bottom: 14px; display: flex; align-items: center; gap: 6px; }
.slider-controls[hidden] { display: none; }
.slider-dots { display: flex; gap: 2px; margin-right: auto; order: -1; }
.slider-dot { width: 24px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.slider-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); transition: width 0.25s var(--ease), background-color 0.25s var(--ease); }
.slider-dot[aria-current='true']::before { width: 20px; border-radius: 4px; background: #fff; }
.slider-btn {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); color: var(--ink); cursor: pointer; transition: background-color 0.2s var(--ease), transform 0.15s var(--ease);
}
.slider-btn svg { width: 18px; height: 18px; }
.slider-btn:active { transform: scale(0.94); }
.slider-dot:focus-visible, .slider-btn:focus-visible, .hero-slider .slide a:focus-visible { outline: 3px solid var(--amber-500); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .slider-btn:hover { background: #fff; } .hero-slider .slide a:hover strong { text-decoration: underline; } }
@media (max-width: 639px) { .slide-cap { padding-bottom: 56px; } .slide-cap span { display: none; } .slider-btn { width: 34px; height: 34px; } }
@media (prefers-reduced-motion: reduce) { .hero-slider .slide, .hero-slider .slide.is-active { transition: none; } }
/* Phones and tablets (one column): the photo or slider sits between the intro text and the buttons (home page
   and service pages). The text column is unwrapped so its parts join the grid; the grid then serves as the
   container for the home title's cqi size. */
@media (max-width: 959px) {
  .hero-grid--media-mid { row-gap: 0; container-type: inline-size; }
  .hero-grid--media-mid > div:first-child { display: contents; }
  .hero-grid--media-mid .eyebrow { justify-self: start; }
  .hero-grid--media-mid .hero-media { order: 1; margin-bottom: 24px; }
  .hero-grid--media-mid .btn-row, .hero-grid--media-mid .hero-points { order: 2; }
}
@media (max-width: 639px) {
  .hero-badge { position: relative; left: auto; bottom: auto; margin: -28px 16px 0; max-width: none; }
}

/* Inner page hero */
.page-hero { padding-block: clamp(18px, 2.5vw, 32px) clamp(28px, 3.5vw, 48px); }
.page-hero .lead { margin-bottom: 28px; }
.page-hero--compact .hero-grid { grid-template-columns: 1fr; }
.page-hero--compact { padding-bottom: clamp(36px, 5vw, 64px); }

.breadcrumbs { margin-bottom: clamp(20px, 3vw, 36px); font-size: 0.875rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.breadcrumbs li + li::before { content: '/'; color: #a8b5c9; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .breadcrumbs a:hover { color: var(--teal-700); text-decoration: underline; } }
.breadcrumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* ---------- Value strip ---------- */
.values { display: grid; gap: 16px; }
.value { display: flex; gap: 16px; align-items: flex-start; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.value h3 { font-size: 1.05rem; margin-bottom: 4px; }
.value p { margin: 0; font-size: 0.95rem; color: var(--muted); }
@media (min-width: 640px) { .values { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .values { grid-template-columns: repeat(4, 1fr); } }
.values--overlap { position: relative; z-index: 2; margin-top: clamp(-56px, -4vw, -32px); }
.values--overlap .value { box-shadow: var(--shadow); border-color: transparent; }

/* Trust bar under the home page hero */
.trust { padding-block: clamp(8px, 2vw, 24px) 0; text-align: center; }
/* A divider under the trust bar, with equal space above it and above the next section's content. */
.trust .container::after { content: ''; display: block; height: 1px; margin-top: clamp(32px, 4vw, 56px); background: var(--line); }
.trust + .section { padding-top: clamp(32px, 4vw, 56px); }
.partners + .section { padding-top: clamp(32px, 4vw, 56px); }
/* Our partners: a slowly scrolling logo row; it pauses on hover or keyboard focus, and logos
   always show in full colour. With reduced motion it is a still, wrapping row. */
.partners { padding-block: clamp(32px, 4vw, 52px) 0; }
.partners .section-head { margin-bottom: clamp(16px, 2vw, 24px); }
.partners-track {
  overflow: hidden; padding-block: 8px clamp(32px, 4vw, 52px); border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.partners-row { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; gap: clamp(16px, 3vw, 40px); animation: partners-scroll 32s linear infinite; }
.partners-track:hover .partners-row, .partners-track:focus-within .partners-row { animation-play-state: paused; }
@keyframes partners-scroll { to { transform: translateX(calc(-100% / 3)); } }
.partner {
  display: grid; place-items: center; min-width: 220px; height: 88px; padding: 14px 24px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); text-decoration: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.partner img { height: auto; max-height: 48px; max-width: 180px; width: auto; }
.partner img.is-compact { max-height: 60px; }
.partner-name { font-family: var(--font-head); font-weight: 800; font-size: 1.125rem; color: var(--muted); letter-spacing: -0.01em; white-space: nowrap; transition: color 0.2s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .partner:hover { border-color: var(--teal-600); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
  .partner:hover .partner-name { color: var(--ink); }
}
@media (max-width: 639px) { .partner { min-width: 160px; height: 72px; padding: 10px 18px; } .partner img { max-height: 38px; max-width: 140px; } .partner img.is-compact { max-height: 48px; } .partner-name { font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) {
  .partners-track { -webkit-mask-image: none; mask-image: none; }
  .partners-row { animation: none; width: auto; flex-wrap: wrap; justify-content: center; padding-inline: var(--gutter); }
  .partners-row li[aria-hidden] { display: none; }
}
/* A line break used only on phones (e.g. "energy-saving / programs" in the trust bar). */
@media (min-width: 640px) { .br-phone { display: none; } }
.trust-title { margin: 0 0 clamp(20px, 2.5vw, 28px); font: 700 min(clamp(0.8rem, 0.75rem + 0.3vw, 0.95rem), 3.4vw)/1.35 var(--font-head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
/* Phones: two columns, or one when the visitor's text size is enlarged (the minimum is in rem, so it grows with it). */
.trust-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 24px 12px; margin: 0; padding: 0; list-style: none; }
.trust-items li { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.trust-items strong { font: 800 clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem)/1.1 var(--font-head); color: var(--ink); letter-spacing: -0.01em; }
.trust-items li > span { font-size: 0.95rem; color: var(--muted); }
.trust-star { color: var(--ink); font-size: 0.85em; margin-left: 2px; }
.trust-stars { margin: clamp(20px, 2.5vw, 28px) 0 0; font-size: 1.6rem; letter-spacing: 0.12em; color: #f6b941; }
.trust-stars a { color: inherit; text-decoration: none; }
@media (min-width: 768px) {
  .trust-items { display: flex; gap: 0; }
  .trust-items li { flex: 1 1 0; padding-inline: clamp(12px, 2vw, 32px); }
  .trust-items li + li { border-left: 1px solid var(--line); }
}

/* ---------- Cards ---------- */
.cards { display: grid; gap: 20px; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
/* Two-column tablets: an odd last card spans the row instead of sitting alone at half width. */
@media (min-width: 640px) and (max-width: 1023px) {
  .cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s;
}
@media (hover: hover) and (pointer: fine) { .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; } }
.card-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-3); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
@media (hover: hover) and (pointer: fine) { .card:hover .card-media img { transform: scale(1.04); } }
.card-body { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.card-body .ico { margin-bottom: 14px; }
/* Service cards use an h2 on the Services page and an h3 elsewhere; both look and click the same. */
.card-body :is(h2, h3) { margin-bottom: 8px; }
.card-body h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.card-body :is(h2, h3) a { color: inherit; text-decoration: none; }
.card-body :is(h2, h3) a::after { content: ''; position: absolute; inset: 0; }
.card-body p { color: var(--muted); font-size: 0.975rem; }
.card-body .text-link { margin-top: auto; }
.card--feature { background: linear-gradient(160deg, var(--navy-900), var(--navy-700)); border: 0; color: #d7e1f0; justify-content: center; }
.card--feature .card-body { justify-content: center; padding: 32px; }
.card--feature h3 { color: #fff; font-size: 1.5rem; }
.card--feature p { color: #c8d5ea; }
.card--feature .btn { align-self: flex-start; position: relative; z-index: 1; }
/* Consultation and call buttons stacked at one shared width (the wider of the two). */
.feature-actions { display: grid; grid-template-columns: max-content; gap: 12px; align-self: flex-start; position: relative; z-index: 1; }
.feature-actions .btn { width: 100%; }
@media (max-width: 639px) { .feature-actions { grid-template-columns: 1fr; align-self: stretch; } }

.option { padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.option .ico { margin-bottom: 18px; }
.option p { color: var(--muted); margin: 0; }

/* ---------- Split / media ---------- */
.split { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 960px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse > :first-child { order: 2; }
}
.media-frame { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 3; background: var(--surface-3); }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }

.checklist { list-style: none; padding: 0; margin: 0 0 1.5em; display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); font-weight: 500; }
.checklist li svg { flex: none; width: 24px; height: 24px; margin-top: 1px; padding: 4px; border-radius: 50%; background: var(--teal-100); color: var(--teal-700); }
.checklist--amber li svg { background: var(--amber-100); color: #3d7a1c; }

.panel { padding: clamp(24px, 3vw, 36px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.panel h3 { margin-bottom: 16px; }
.two-panels { display: grid; gap: 20px; }
@media (min-width: 900px) { .two-panels { grid-template-columns: 1fr 1fr; } }

/* ---------- Steps ---------- */
.steps { display: grid; gap: 20px; counter-reset: step; list-style: none; padding: 0; margin: 0; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding: 28px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); counter-increment: step; }
.step-icon {
  display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px;
  border-radius: 14px; background: var(--navy-900); color: var(--amber-500);
}
.step-icon svg { width: 24px; height: 24px; }
.step h3 { font-size: 1.1rem; margin-bottom: 6px; }
.step p { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* ---------- Pills ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0 0 1.5em; }
.pills--center { justify-content: center; margin-bottom: 0; }
/* Areas we serve: two balanced rows (6 + 5) on wide screens; one continuous wrap on narrower ones. */
.area-rows { display: grid; gap: 10px; }
@media (max-width: 1099px) { .area-rows { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .area-rows .pills { display: contents; } }
/* Service-area pages: utilities and local facts, and city cards that link as a whole. */
.facts { display: grid; gap: 14px; margin: 18px 0 16px; }
.facts > div { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; align-items: start; }
.facts svg { width: 20px; height: 20px; margin-top: 2px; color: var(--teal-600); grid-row: span 2; }
.facts dt { font-family: var(--font-head); font-weight: 700; color: var(--ink); }
.facts dd { margin: 0; color: var(--muted); }
.area-card { position: relative; display: flex; flex-direction: column; }
.area-card h3 a { color: inherit; text-decoration: none; }
.area-card h3 a::after { content: ''; position: absolute; inset: 0; }
.area-card .text-link { margin-top: auto; padding-top: 8px; }
@media (hover: hover) and (pointer: fine) { .area-card:hover { border-color: var(--teal-600); } }
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  color: var(--ink); font-family: var(--font-head); font-weight: 600; font-size: 0.925rem; text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { a.pill:hover { border-color: var(--teal-600); color: var(--teal-700); } }
.pill--soft { background: var(--teal-50); border-color: transparent; color: var(--teal-800); }

.notice {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px;
  background: var(--amber-100); border-radius: var(--radius); color: #2f5d14; font-size: 0.95rem;
}
.notice svg { flex: none; width: 22px; height: 22px; margin-top: 2px; }
.notice p { margin: 0; }

/* ---------- Programs ---------- */
.program-grid { display: grid; gap: 20px; }
@media (min-width: 768px) { .program-grid { grid-template-columns: repeat(2, 1fr); } }
.program { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 32px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); scroll-margin-top: calc(var(--header-h) + 24px); }
.program:target { border-color: var(--teal-600); box-shadow: 0 0 0 4px var(--teal-100); }
.program-head { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.program-brand {
  display: flex; align-items: center; justify-content: center; width: 200px; height: 84px; padding: 14px 20px; margin-bottom: 16px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.program-brand img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; }
.program-brand--compact img { max-width: 88%; max-height: 80%; }
.program-brand--square img { max-width: 70%; max-height: 92%; }
@media (max-width: 639px) { .program-brand { width: 176px; height: 74px; padding: 12px 16px; } }
.program-logo {
  display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 16px;
  background: var(--navy-900); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 1rem; letter-spacing: 0.02em;
}
.program h2 { font-size: 1.375rem; margin: 0; }
.program .long-name { display: block; color: var(--muted); font-size: 0.9rem; font-weight: 500; font-family: var(--font-body); letter-spacing: 0; }
.program p { color: var(--body); }
.program .pills { margin-bottom: 20px; }
.program .btn { margin-top: auto; align-self: flex-start; }
/* Long program names ("Ask about TECH Clean California") must wrap on small phones instead of widening the card. */
.program-grid > * { min-width: 0; }
.program .btn { max-width: 100%; white-space: normal; text-align: left; }
.program-label { display: block; margin-bottom: 8px; font-size: 0.8125rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; max-width: 860px; }
.faq--center { margin-inline: auto; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: border-color 0.2s, box-shadow 0.2s; }
.faq details[open] { border-color: transparent; box-shadow: var(--shadow); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 22px; cursor: pointer; list-style: none;
  color: var(--ink); font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3354' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform 0.2s;
}
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--teal-100); }
.faq .faq-a { padding: 0 22px 20px; color: var(--body); }
.faq .faq-a p { margin: 0; }

/* ---------- CTA band ---------- */
.cta-band { padding-block: clamp(28px, 3.5vw, 52px); }
.cta-card {
  position: relative; overflow: hidden; display: grid; gap: 32px; align-items: center;
  padding: clamp(32px, 5vw, 64px);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(60, 70, 200, 0.35), transparent 60%),
    radial-gradient(500px 300px at 0% 100%, rgba(147, 209, 107, 0.18), transparent 60%),
    linear-gradient(140deg, var(--navy-950), var(--navy-800));
  color: #cbd7ea;
}
.cta-card h2 { color: #fff; }
.cta-card p { max-width: 54ch; }
.cta-card .eyebrow { color: var(--amber-500); }
.cta-card .eyebrow::after { background: var(--amber-500); }
.cta-media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3); }
.cta-media img { width: 100%; height: 100%; object-fit: cover; }
.cta-phone { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: #fff; font-weight: 600; text-decoration: none; }
.cta-phone svg { width: 18px; height: 18px; color: var(--amber-500); }
@media (hover: hover) and (pointer: fine) { .cta-phone:hover { color: var(--amber-500); } }
@media (min-width: 960px) { .cta-card { grid-template-columns: 1.15fr 0.85fr; } }

/* ---------- Contact / forms ---------- */
.contact-grid { display: grid; gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1.45fr 0.85fr; } }
.form-card { padding: clamp(24px, 4vw, 44px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow); }
.form-card > h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); }
.form-grid { display: grid; gap: 18px 20px; }
@media (min-width: 640px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field label, .field legend { color: var(--ink); font-weight: 600; font-size: 0.95rem; }
.field .opt { color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 16px;
  background: var(--surface-2); border: 1.5px solid #d3dcea; border-radius: 12px;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
  font-size: max(16px, 1rem);
}
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3354' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 18px;
}
.field textarea { min-height: 140px; resize: vertical; }
@media (hover: hover) and (pointer: fine) { .field input:hover, .field select:hover, .field textarea:hover { border-color: #b5c3d8; } }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background: #fff; border-color: var(--teal-600); box-shadow: 0 0 0 4px var(--teal-100); }
.field [aria-invalid='true'] { border-color: var(--red-700); background: #fff7f6; }
.field-error { color: var(--red-700); font-size: 0.875rem; font-weight: 500; min-height: 0; }
.field-error:empty { display: none; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field legend { padding: 0; margin-bottom: 8px; }
.choice-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); }
.choice { position: relative; display: flex; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px;
  background: var(--surface-2); border: 1.5px solid #d3dcea; border-radius: 12px;
  color: var(--ink); font-weight: 500; font-size: 0.95rem; cursor: pointer; transition: background-color 150ms var(--ease), border-color 150ms var(--ease), transform 150ms var(--ease);
}
.choice span::before {
  content: ''; flex: none; width: 20px; height: 20px; border-radius: 6px; border: 2px solid #b5c3d8; background: #fff;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease);
}
.choice input:checked + span { background: var(--teal-50); border-color: var(--teal-600); }
.choice input:checked + span::before {
  border-color: var(--teal-700);
  background: var(--teal-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.choice input:focus-visible + span { outline: 3px solid var(--amber-500); outline-offset: 2px; }
/* Upgrade tiles at the top of the form: large tap targets with the service icon. */
.choice-grid--tiles { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.choice--tile span { min-height: 56px; font-weight: 600; }
.choice--tile svg { flex: none; width: 22px; height: 22px; color: var(--teal-700); }
/* Phones: two columns, or one when the visitor's text size is enlarged (the minimum is in rem, so it grows with it). */
@media (max-width: 639px) { .choice-grid--tiles { grid-template-columns: repeat(auto-fill, minmax(min(8.75rem, 100%), 1fr)); gap: 8px; } .choice--tile span { gap: 8px; padding: 10px; font-size: 0.875rem; line-height: 1.25; } .choice--tile span::before { width: 18px; height: 18px; } .choice--tile svg { display: none; } }
.field-hint { margin: 2px 0 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.35; }
.form-trust { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); list-style: none; color: var(--muted); font-size: 0.875rem; }
.form-trust li { display: flex; align-items: center; gap: 8px; }
.form-trust svg { flex: none; width: 18px; height: 18px; color: var(--teal-700); }
.form-trust a { font-weight: 700; white-space: nowrap; }
/* Thank-you page: what to have ready for the call. */
.thanks-ready { margin: 4px 0 24px; }
.thanks-ready h2 { font-size: 1.125rem; margin-bottom: 12px; }
.thanks-ready .checklist { margin-bottom: 14px; }
.thanks-save { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.thanks-save svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--teal-700); }
.thanks-save a { font-weight: 700; white-space: nowrap; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.8125rem; line-height: 1.4; color: var(--muted); }
.consent span { font-weight: 400; color: var(--muted); }
/* A clear (white) checkbox with a navy tick, drawn the same on every phone instead of the browser default. */
.consent input {
  -webkit-appearance: none; appearance: none; flex: none; width: 18px; height: 18px; min-height: 0; padding: 0; margin: 1px 0 0;
  border: 1.5px solid #9aa0c8; border-radius: 4px; background: #fff; cursor: pointer;
  display: grid; place-items: center;
}
.consent input::after { content: ''; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); opacity: 0; }
.consent input:checked, .field .consent input:checked { background: var(--teal-700); border-color: var(--teal-700); }
.consent input:checked::after { opacity: 1; }
.consent input:focus-visible { outline: 3px solid var(--teal-100); outline-offset: 2px; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 8px; }
.form-actions .btn { min-width: 240px; }
@media (max-width: 639px) { .form-actions .btn { min-width: 0; } }
.form-status { margin-top: 18px; }
.form-status:empty { display: none; }
.form-status .notice--error { background: #fdecea; color: var(--red-700); }
.form-status .notice--ok { background: var(--teal-50); color: var(--teal-800); }
.btn[aria-busy='true'] { opacity: 0.75; pointer-events: none; }
.btn[aria-busy='true']::after {
  content: ''; width: 16px; height: 16px; border-radius: 50%;
  border: 2.5px solid currentColor; border-right-color: transparent; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.info-stack { display: grid; gap: 16px; }
.info-item { display: flex; gap: 16px; align-items: flex-start; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.info-item h3 { font-size: 1rem; margin-bottom: 2px; }
.info-item p, .info-item a { margin: 0; font-size: 0.975rem; }
.info-item a { color: var(--ink); font-weight: 600; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .info-item a:hover { color: var(--teal-700); text-decoration: underline; } }
.mini-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: ms; }
.mini-steps li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; counter-increment: ms; font-size: 0.95rem; }
.mini-steps li::before {
  content: counter(ms); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--teal-100); color: var(--teal-800); font-weight: 800; font-family: var(--font-head);
}
.mini-steps strong { display: block; color: var(--ink); }

/* ---------- Prose (privacy) ---------- */
.prose { max-width: 760px; }
.prose h2 { font-size: 1.5rem; margin-top: 2em; }
.prose h3 { margin-top: 1.5em; }
.prose li { margin-bottom: 0.4em; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-950); color: #aebcd2; font-size: 0.95rem; }
.footer-top { display: grid; gap: 32px; padding-block: clamp(36px, 4.5vw, 56px) 32px; }
@media (min-width: 768px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1100px) { .footer-top { grid-template-columns: 1.5fr 1fr 0.8fr 1.2fr; } }
/* White logo directly on the dark footer. */
.site-footer .brand { margin-bottom: 18px; }
.site-footer .brand-logo { height: 56px; }
.site-footer h2 { color: #fff; font-size: 0.875rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 18px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-footer a { color: #d6e0ee; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .site-footer a:hover { color: var(--amber-500); text-decoration: underline; } }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact svg { flex: none; width: 18px; height: 18px; margin-top: 4px; color: #aeb3ea; }
/* Comfortable tap targets for footer links on touch screens. */
@media (max-width: 767px) {
  .site-footer ul:not(.footer-contact) { gap: 0; }
  .site-footer ul:not(.footer-contact) a { display: block; padding-block: 10px; }
  .footer-contact { gap: 4px; }
  .footer-contact a { display: inline-block; padding-block: 8px; margin-block: -8px; }
  .footer-bottom a { display: inline-block; padding-block: 10px; margin-block: -10px; }
}
/* Bottom strip in the top bar's yellow, with navy text. */
.footer-bar { background: #f6b941; color: #090d64; font-weight: 600; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block: 18px; font-size: 0.85rem; }
.footer-bottom p { margin: 0; }
.site-footer .footer-bar a { color: #090d64; font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .site-footer .footer-bar a:hover { color: #090d64; text-decoration: underline; } }
/* Lines that must stay on one line on phones; main.js shrinks them if text zoom makes them too wide. */
[data-fit-line] { white-space: nowrap; min-width: 0; max-width: 100%; overflow: hidden; }
.action-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
.footer-disclaimer { padding-bottom: 24px; font-size: 0.8125rem; color: #8797b0; max-width: none; }

/* ---------- Mobile action bar ---------- */
.action-bar { display: none; }
@media (max-width: 767px) {
  .action-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--line);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 -8px 24px rgba(9, 13, 100, 0.08);
    transition: transform 0.25s var(--ease);
  }
  /* Capped by screen width so the labels stay on one line even with enlarged text. */
  .action-bar .btn { min-height: 44px; padding: 8px 10px; font-size: min(0.95rem, 3.8vw); }
}
@media (max-width: 359px) {
  .action-bar { gap: 8px; padding-inline: 8px; }
  .action-bar .btn { padding-inline: 6px; gap: 6px; font-size: min(0.875rem, 3.8vw); }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.nav-open .action-bar { transform: translateY(110%); }
}

/* ---------- Reveal on scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Misc ---------- */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.stack-lg > * + * { margin-top: clamp(40px, 5vw, 64px); }
.error-page { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.error-code { font-family: var(--font-head); font-weight: 800; font-size: clamp(5rem, 14vw, 9rem); line-height: 1; color: var(--teal-100); -webkit-text-stroke: 2px var(--teal-600); }

@media print {
  .site-header, .action-bar, .cta-band, .site-footer { display: none !important; }
}

/* ---------- Gallery ---------- */
.gallery-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.gallery-filters .pill { cursor: pointer; font-family: var(--font-head); }
.gallery-filters .pill.is-active { background: var(--teal-700); border-color: transparent; color: #fff; }
.gallery-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.gallery-grid li[hidden] { display: none; }
.gallery-item { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--surface-3); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.gallery-item:focus-visible img { transform: scale(1.04); }
@media (hover: hover) and (pointer: fine) { .gallery-item:hover img { transform: scale(1.04); } }
.gallery-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 16px 12px;
  color: #fff; font-weight: 600; font-size: 0.95rem; line-height: 1.35;
  background: linear-gradient(transparent, rgba(9, 13, 100, 0.8));
}
.gallery-empty { max-width: 680px; margin: 0 auto; padding: clamp(32px, 5vw, 56px) 24px; text-align: center; background: var(--surface-2); border-radius: var(--radius-lg); }
.gallery-empty p { margin-inline: auto; }
.lightbox { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100dvh; overflow: visible; }
.lightbox::backdrop { background: rgba(10, 18, 32, 0.9); }
.lightbox figure { margin: 0; }
.lightbox img { display: block; width: auto; height: auto; max-width: min(1200px, 92vw); max-height: 80dvh; margin: 0 auto; border-radius: 12px; }
.lightbox figcaption { margin-top: 12px; color: #fff; text-align: center; font-weight: 600; }
.lightbox figcaption:empty { display: none; }
.lightbox-close, .lightbox-nav {
  position: fixed; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); color: var(--navy-900); font-size: 30px; line-height: 1; cursor: pointer;
}
.lightbox-close { top: calc(16px + env(safe-area-inset-top)); right: 16px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-nav[hidden] { display: none; }
@media (max-width: 639px) { .lightbox-nav { top: auto; bottom: calc(20px + env(safe-area-inset-bottom)); transform: none; } }
@media (max-width: 639px) {
  .gallery-filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 8px; scrollbar-width: none; }
  .gallery-filters::-webkit-scrollbar { display: none; }
  .gallery-filters .pill { flex: none; }
}

/* ---------- Top bar ---------- */
.topbar { background: #f6b941; color: #090d64; font-size: 0.875rem; font-weight: 700; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.topbar-text { display: flex; align-items: center; gap: 8px; margin: 0; }
.topbar-text svg { width: 16px; height: 16px; flex: none; }
.topbar-text .short { display: none; }
.topbar-info { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 20px; min-width: 0; }
.topbar-license { padding-left: 20px; border-left: 1px solid rgba(9, 13, 100, 0.25); }
.topbar-social { display: flex; align-items: center; gap: 4px; }
.topbar-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #090d64; transition: background-color 0.2s, color 0.2s; }
.topbar-icon svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { a.topbar-icon:hover { background: #090d64; color: #f6b941; } }
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #d6e0ee; }
.footer-icon svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { a.footer-icon:hover { background: #f6b941; color: #090d64; } }
/* Phones: the top bar shows the license and social icons; the service area is already in the hero and footer. */
@media (max-width: 639px) {
  .topbar { font-size: 0.8125rem; }
  .topbar-area { display: none; }
  .topbar-license { padding-left: 0; border-left: 0; }
  .topbar-icon { width: 30px; height: 30px; }
}
/* Narrow phones: the short license form ("CSLB #1007786") so it sits on one line beside the icons. */
@media (max-width: 389px) {
  .topbar-license .long { display: none; }
  .topbar-license .short { display: inline; }
}
/* A backdrop filter would trap the fixed menu drawer inside the header; drop it while the menu is open. */
body.nav-open .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }

/* Phone call buttons: amber, matching the top bar. */
.btn-call { background: #f6b941; color: #090d64; border-color: transparent; box-shadow: 0 8px 20px rgba(246, 185, 65, 0.3); }
@media (hover: hover) and (pointer: fine) { .btn-call:hover { background: #eaa92a; color: #090d64; } }
.btn-call svg { color: #090d64; }


/* ---------- Native feel on touch screens ---------- */
/* No grey flash on tap: every control below has its own pressed state instead. */
html { -webkit-tap-highlight-color: transparent; }
/* Fire taps immediately (no double-tap-zoom wait) on controls. */
a, button, summary, label, [role='button'], input[type='checkbox'] { touch-action: manipulation; }
/* Labels of controls are not text to select; long-press should not highlight them. */
.btn, .pill, .sub-toggle, .menu-toggle, .faq summary, .choice span, .lightbox button, .topbar-icon, .footer-icon, .nav-list > li > a {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
/* Press feedback the moment a finger lands, on touch and mouse alike. */
.btn:active { transform: scale(0.97); transition-duration: 100ms; }
.card:active { transform: scale(0.99); transition-duration: 120ms; }
.gallery-item:active img { transform: scale(0.98); transition-duration: 120ms; }
.pill:active, .topbar-icon:active, .footer-icon:active, .sub-toggle:active, .menu-toggle:active, .lightbox button:active { transform: scale(0.94); transition: transform 100ms var(--ease); }
.faq summary:active { background: var(--surface-2); }
.choice span:active { transform: scale(0.98); }
.nav-list > li > a:active, .sub a:active { background: var(--surface-3); }
/* Keep content clear of the notch in landscape on iPhone. */
.container {
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* ---------- Motion polish ---------- */
/* Phone menu: open with ease-out, close faster than it opens. */
@media (max-width: 1023px) {
  .nav.is-open { transition-duration: 240ms; }
}
/* Grids reveal as a short cascade rather than all at once. */
@media (prefers-reduced-motion: no-preference) {
  .cards > [data-reveal]:nth-child(2), .steps > [data-reveal]:nth-child(2), .values > [data-reveal]:nth-child(2) { transition-delay: 60ms; }
  .cards > [data-reveal]:nth-child(3), .steps > [data-reveal]:nth-child(3), .values > [data-reveal]:nth-child(3) { transition-delay: 120ms; }
  .cards > [data-reveal]:nth-child(4), .steps > [data-reveal]:nth-child(4), .values > [data-reveal]:nth-child(4) { transition-delay: 180ms; }
  .cards > [data-reveal]:nth-child(n+5) { transition-delay: 240ms; }
  /* FAQ answers ease in instead of popping open. */
  .faq details[open] .faq-a { animation: faq-in 200ms var(--ease); }
  /* Lightbox: fade and scale in from almost full size; leave quickly. */
  .lightbox[open] { animation: lightbox-in 220ms var(--ease); }
  .lightbox[open]::backdrop { animation: backdrop-in 220ms var(--ease); }
  .lightbox.is-closing { animation: lightbox-out 150ms var(--ease) forwards; }
  .lightbox.is-closing::backdrop { animation: backdrop-out 150ms var(--ease) forwards; }
  .lightbox img { transition: opacity 180ms var(--ease); }
  .lightbox img.is-loading { opacity: 0; }
}
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes lightbox-in { from { opacity: 0; transform: scale(0.96); } }
@keyframes lightbox-out { to { opacity: 0; transform: scale(0.98); } }
@keyframes backdrop-in { from { opacity: 0; } }
@keyframes backdrop-out { to { opacity: 0; } }
/* Pressed controls settle back instead of snapping. */
.pill, .topbar-icon, .footer-icon, .lightbox button { transition: transform 160ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease); }

/* Page tops without a picture use the full width. */
.page-hero--text .hero-grid { grid-template-columns: 1fr; }
/* Short headings that must stay on one line shrink with the screen instead of wrapping. */
.page-hero--one-line h1 { white-space: nowrap; font-size: calc(min(clamp(2.2rem, 1.5rem + 3.2vw, 3.6rem), 7.4vw) * var(--fit, 1)); }
.contact-grid > * { min-width: 0; }

/* ---------- Testimonials ---------- */
.testimonials { display: grid; gap: 20px; }
@media (min-width: 900px) { .testimonials { grid-template-columns: repeat(3, 1fr); } }
.testimonial {
  display: flex; flex-direction: column; margin: 0; padding: clamp(24px, 3vw, 32px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.testimonial-mark { display: block; height: 0.55em; margin-bottom: 18px; font: 700 5rem/1 Georgia, 'Times New Roman', serif; color: var(--amber-500); }
.testimonial blockquote { flex: 1; margin: 0 0 24px; }
.testimonial blockquote p { margin: 0; color: var(--ink); font-size: 1.0625rem; line-height: 1.4; }
.testimonial figcaption { display: flex; align-items: center; gap: 14px; }
.testimonial-avatar {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%;
  background: var(--teal-100); color: var(--teal-700); font-family: var(--font-head); font-weight: 800; font-size: 1rem;
}
.testimonial-who strong { display: block; color: var(--ink); font-family: var(--font-head); font-size: 1.05rem; }
.testimonial-who span { display: block; color: var(--muted); font-size: 0.9rem; }

/* Phones: content text a size smaller (about 14px at the default text setting). Kept last so it
   overrides the base sizes above. Form fields stay at 16px so iPhones do not zoom in on focus. */
@media (max-width: 639px) {
  body { font-size: 0.9375rem; }
  .lead, .hero .lead { font-size: 0.9375rem; }
  .hero .lead { margin-bottom: 22px; }
  .card-body p, .info-item p, .info-item a, .option p { font-size: 0.875rem; }
  .testimonial blockquote p { font-size: 0.9375rem; }
  .faq .faq-a, .checklist li, .hero-points li { font-size: 0.875rem; }
}

/* Phones: icon cards (service options, About values, service-area cards, process steps) put the icon
   on the left with the title and text beside it, with tighter padding and gaps. */
@media (max-width: 639px) {
  .cards, .steps { gap: 12px; }
  .option, .step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 18px 16px; }
  .option > .ico, .step > .step-icon { grid-row: 1 / span 3; margin: 0; }
  .option > :not(.ico), .step > :not(.step-icon) { grid-column: 2; }
  .option .ico--lg, .step-icon { width: 44px; height: 44px; border-radius: 12px; }
  .option .ico--lg svg, .step-icon svg { width: 22px; height: 22px; }
  .option h3, .step h3 { margin: 2px 0 4px; font-size: 1rem; line-height: 1.25; }
  .step p { font-size: 0.875rem; }
  .area-card .text-link { padding-top: 6px; }
}