/* ===== Okla Électrique — Redesign ===== */

:root {
  /* Surfaces */
  --bg: #0b0b0c;
  --bg-2: #131314;
  --bg-3: #1b1b1c;
  --bg-paper: #f3ede0;

  /* Lines */
  --line: rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.16);
  --line-on-paper: rgba(11,11,12,0.10);

  /* Ink */
  --ink: #f5efe4;
  --ink-dim: rgba(245,239,228,0.80);
  --ink-faint: rgba(245,239,228,0.58);
  /* Form placeholders sit BELOW --ink-faint on purpose: a placeholder is a hint, the
     label above it is the real information. Used by every form on the site. */
  --ink-placeholder: rgba(245,239,228,0.38);
  --ink-on-paper: #181715;
  --ink-on-paper-dim: rgba(24,23,21,0.62);

  /* Brand (from logo gradient: warm yellow → orange) */
  --amber: #ffa726;
  --amber-light: #ffd54f;
  --amber-deep: #ff7a18;
  --copper: #f04e23;

  /* Active accent (swappable via Tweaks) */
  --accent: var(--amber);
  --accent-light: var(--amber-light);
  --accent-deep: var(--amber-deep);
  --accent-ink: #181715; /* readable text on accent fill */

  /* Type */
  --display: "Albert Sans", ui-sans-serif, sans-serif;
  --sans: "Albert Sans", ui-sans-serif, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;

  /* Layout */
  --gutter: clamp(20px, 4vw, 64px);
  --container: 1480px;
  --radius-sm: 6px;
  --radius: 14px;
  --radius-lg: 22px;
}

/* Light mode */
[data-theme="light"] {
  --bg: #fafaf7;
  --bg-2: #f1ede4;
  --bg-3: #e6dfd0;
  --line: rgba(11,11,12,0.10);
  --line-2: rgba(11,11,12,0.18);
  --ink: #1a1814;
  --ink-dim: rgba(26,24,20,0.66);
  --ink-faint: rgba(26,24,20,0.42);
  --ink-placeholder: rgba(26,24,20,0.34);
  --accent-ink: #1a1814;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* The [hidden] attribute only hides via the UA stylesheet's `display: none`, so ANY
   author `display:` rule silently defeats it. That broke the case-studies newsletter:
   on success the script sets `row.hidden = true`, but `.newsletter-form__row`
   declares `display: flex`, so the input and a frozen "Sending…" button stayed on
   screen next to the success line. Enforce it once here instead of per component. */
[hidden] { display: none !important; }

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  overflow-x: clip;
}
@media (max-width: 768px) { html, body { font-size: 18px; } }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
svg { display: block; }

/* ===== Type ===== */
.display {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 0.95;
  text-wrap: balance;
}
.h-mega { font-family: var(--display); font-weight: 700; font-size: clamp(56px, 9vw, 168px); line-height: 0.88; letter-spacing: -0.035em; text-wrap: balance; }
.h-xl  { font-family: var(--display); font-weight: 700; font-size: clamp(48px, 6vw, 96px); line-height: 0.92; letter-spacing: -0.03em; text-wrap: balance; }
.h-lg  { font-family: var(--display); font-weight: 700; font-size: clamp(36px, 4vw, 64px); line-height: 0.95; letter-spacing: -0.025em; text-wrap: balance; }
.h-md  { font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.2vw, 36px); line-height: 1.05; letter-spacing: -0.02em; }
.h-sm  { font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1.15; letter-spacing: -0.01em; }

.label, .mono { font-family: var(--mono); font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }
@media (max-width: 768px) { .label, .mono { font-size: 16px; } }
.eyebrow { font-family: var(--mono); font-size: 16px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 768px) { .eyebrow { font-size: 16px; } }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); display: inline-block; }

.lede { font-size: 16px; line-height: 1.6; color: var(--ink-dim); max-width: 56ch; text-wrap: pretty; }

/* ===== Container ===== */
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.005em;
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  white-space: nowrap;
}
@media (max-width: 768px) { .btn { font-size: 16px; } }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { transform: translateY(-1px); background: var(--accent-light); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(255,255,255,0.04); }
.btn--ink { background: var(--ink); color: var(--bg); }
.btn--ink:hover { background: var(--accent); color: var(--accent-ink); }
.btn .arrow { display: inline-flex; transition: transform .25s ease; }
.btn:hover .arrow { transform: translate(2px,-2px); }

/* ===== Utility strip ===== */
.utility {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .utility { font-size: 16px; } }
.utility__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
  gap: 24px;
}
.utility__group { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.utility__group span { display: inline-flex; align-items: center; gap: 8px; }
.utility__group .dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,0.15); }
.utility a:hover { color: var(--ink); }

.lang-toggle {
  display: inline-flex !important;
  align-items: center;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  gap: 0;
}
@media (max-width: 768px) { .lang-toggle { font-size: 16px; } }
.lang-toggle__btn {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.1em;
  font-weight: 500;
  padding: 4px 8px;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color .18s ease;
  border-radius: 4px;
  position: relative;
}
@media (max-width: 768px) { .lang-toggle__btn { font-size: 16px; } }
.lang-toggle__btn + .lang-toggle__btn::before {
  content: "/";
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-faint);
  font-weight: 400;
  pointer-events: none;
}
.lang-toggle__btn:hover { color: var(--ink); }
.lang-toggle__btn.is-on {
  color: var(--ink);
  font-weight: 600;
}
.lang-toggle__btn.is-on:hover { color: var(--accent); }

/* ===== Header (legacy nav — unused) ===== */
.nav { display: none; }

/* ===== Top strip (in normal flow — scrolls with page) ===== */
.okla-strip {
  width: 100%;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  padding-top: 14px;
}
@media (max-width: 768px) { .okla-strip { font-size: 16px; } }
.okla-strip__row {
  max-width: var(--pillnav-max-w);
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 28px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.okla-strip__phone {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  padding: 4px 0;
  transition: color .2s ease;
}
@media (max-width: 768px) { .okla-strip__phone { font-size: 16px; } }
.okla-strip__phone:hover { color: var(--accent); }
.okla-strip__phone svg { opacity: 0.6; }
.okla-strip__right {
  display: inline-flex; align-items: center; gap: 16px;
}
.okla-strip__rbq { text-transform: uppercase; font-weight: 500; }
/* RBQ — desktop strip only; on phones/tablets it lives in the footer bottom line. */
@media (max-width: 60rem) {
  .okla-strip__rbq { display: none; }
}

/* Theme toggle */
.theme-toggle {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--ink-dim);
  cursor: pointer;
  background: transparent;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
/* The icon shows the theme you would switch TO, not the one you are in: moon in light
   theme, sun in dark theme (operator request 2026-07-26). */
.theme-toggle__sun { display: block; }
.theme-toggle__moon { display: none; }
[data-theme="light"] .theme-toggle__sun { display: none; }
[data-theme="light"] .theme-toggle__moon { display: block; }

/* Logo swap based on theme */
.pillnav__logo .pillnav__logo-light,
.footer__brand .footer__logo-light { display: none !important; }
[data-theme="light"] .pillnav__logo .pillnav__logo-dark,
[data-theme="light"] .footer__brand .footer__logo-dark { display: none !important; }
[data-theme="light"] .pillnav__logo .pillnav__logo-light,
[data-theme="light"] .footer__brand .footer__logo-light { display: block !important; }

/* ===== Floating pill header (positioned under the strip) ===== */
:root {
  --pillnav-bg: rgba(20, 20, 21, 0.55);
  --pillnav-ring: rgba(245, 239, 228, 0.16);
  --pillnav-glow: rgba(245, 239, 228, 0.05);
  --pillnav-drop: rgba(0, 0, 0, 0.4);
  --pillnav-blur: 18px;
  --pillnav-fg: var(--ink);
  --pillnav-fg-muted: var(--ink-faint);

  --pillnav-radius: 999px;
  --pillnav-height: 60px;
  --pillnav-top: 16px;
  --pillnav-pad-x: 14px;
  --pillnav-max-w: 1180px;

  --pillnav-ease: cubic-bezier(0.83, 0, 0.17, 1);
  --pillnav-dur-width: 750ms;
  --pillnav-dur-links: 400ms;
  --pillnav-dur-menu: 500ms;

  --pillnav-span: 12;
}

[data-theme="light"] {
  --pillnav-bg: rgba(255, 255, 255, 0.55);
  --pillnav-ring: rgba(24, 23, 21, 0.10);
  --pillnav-glow: rgba(255, 255, 255, 0.4);
  --pillnav-drop: rgba(0, 0, 0, 0.10);
}

@property --pillnav-span {
  syntax: "<number>";
  inherits: true;
  initial-value: 12;
}

.pillnav {
  position: sticky;
  top: var(--pillnav-top);
  margin-top: 14px;
  height: var(--pillnav-height);
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  pointer-events: none;
  transition: --pillnav-span var(--pillnav-dur-width) var(--pillnav-ease);
}
.pillnav__shell {
  pointer-events: auto;
  width: calc(var(--pillnav-span) / 12 * 100%);
  max-width: var(--pillnav-max-w);
  position: relative;
  background: var(--pillnav-bg);
  border-radius: var(--pillnav-radius);
  box-shadow:
    0 0 60px 0 var(--pillnav-glow) inset,
    0 8px 30px 0 var(--pillnav-drop);
  outline: 1px solid var(--pillnav-ring);
  outline-offset: -1px;
  backdrop-filter: blur(var(--pillnav-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--pillnav-blur)) saturate(140%);
  overflow: hidden;
  align-self: flex-start;
  transition: border-radius 0s var(--pillnav-dur-width);
}
.pillnav[data-pillnav-open="true"] .pillnav__shell {
  border-radius: 28px;
  transition: none;
}
.pillnav[data-pillnav-contracted="true"][data-pillnav-open="true"] { --pillnav-span: 12; }

.pillnav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  height: var(--pillnav-height);
  padding: 0 var(--pillnav-pad-x) 0 22px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: default;
  text-align: left;
}
.pillnav[data-pillnav-contracted="true"] .pillnav__bar { cursor: pointer; }
.pillnav__bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--pillnav-radius); }

.pillnav__logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--pillnav-fg);
  height: 40px;
}
.pillnav__logo-full,
.pillnav__logo-icon {
  display: block;
  height: 36px;
  width: auto;
  transition: opacity 0.3s ease, height 0.3s ease;
}
.pillnav__logo-icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  height: 44px;
}
.pillnav[data-pillnav-contracted="true"] .pillnav__logo-full {
  opacity: 0;
  width: 44px;
  pointer-events: none;
}
.pillnav[data-pillnav-contracted="true"] .pillnav__logo-icon {
  opacity: 1;
}

.pillnav__links {
  display: flex; align-items: center; gap: 22px;
  position: relative;
  min-height: 36px;
}

.pillnav__link {
  color: var(--pillnav-fg);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  transition: width 0ms linear 0ms, margin 0ms linear 0ms;
}
@media (max-width: 768px) { .pillnav__link { font-size: 16px; } }
.pillnav__link > span {
  display: inline-block;
  transform: translateY(0);
  transition: transform var(--pillnav-dur-links) var(--pillnav-ease);
}
.pillnav__link:hover > span { color: var(--accent); transition: color 200ms ease; }

.pillnav__cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 16px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease;
  margin-left: 6px;
  overflow: hidden;
}
@media (max-width: 768px) { .pillnav__cta { font-size: 16px; } }
.pillnav__cta:hover { background: var(--accent-light); transform: translateY(-1px); }

.pillnav[data-pillnav-contracted="true"] .pillnav__link > span,
.pillnav[data-pillnav-contracted="true"] .pillnav__cta > * { transform: translateY(-110%); transition: transform var(--pillnav-dur-links) var(--pillnav-ease); }
.pillnav[data-pillnav-contracted="true"] .pillnav__link,
.pillnav[data-pillnav-contracted="true"] .pillnav__cta {
  width: 0; margin: 0; padding-left: 0; padding-right: 0;
  pointer-events: none;
  transition: width 0ms linear var(--pillnav-dur-links),
              margin 0ms linear var(--pillnav-dur-links),
              padding 0ms linear var(--pillnav-dur-links);
  background: transparent;
}
.pillnav[data-pillnav-contracted="true"] .pillnav__link:nth-child(1) > span { transition-delay: 0ms; }
.pillnav[data-pillnav-contracted="true"] .pillnav__link:nth-child(2) > span { transition-delay: 25ms; }
.pillnav[data-pillnav-contracted="true"] .pillnav__link:nth-child(3) > span { transition-delay: 50ms; }
.pillnav[data-pillnav-contracted="true"] .pillnav__link:nth-child(4) > span { transition-delay: 75ms; }

.pillnav__burger {
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%) scaleX(0);
  transform-origin: right center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--pillnav-dur-links) var(--pillnav-ease) var(--pillnav-dur-links),
    opacity   var(--pillnav-dur-links) var(--pillnav-ease) var(--pillnav-dur-links);
}
.pillnav__burger svg {
  width: 22px;
  height: 22px;
  transform: rotate(0deg);
  transition: transform 600ms var(--pillnav-ease);
}
.pillnav__burger path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    stroke-dasharray 600ms var(--pillnav-ease),
    stroke-dashoffset 600ms var(--pillnav-ease);
}
.pillnav__burger .burger__line--top-bottom {
  stroke-dasharray: 12 63;
  stroke-dashoffset: 0;
}
.pillnav[data-pillnav-contracted="true"] .pillnav__burger {
  transform: translateY(-50%) scaleX(1);
  opacity: 1;
  pointer-events: auto;
}
.pillnav[data-pillnav-open="true"] .pillnav__burger svg { transform: rotate(-45deg); }
.pillnav[data-pillnav-open="true"] .pillnav__burger .burger__line--top-bottom {
  stroke-dasharray: 20 300;
  stroke-dashoffset: -32.42;
}
@media (prefers-reduced-motion: reduce) {
  .pillnav__burger svg,
  .pillnav__burger path { transition-duration: 0ms; }
}

/* Mega-menu — drops down inside the shell (original design) */
.pillnav__aside {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--pillnav-dur-menu) var(--pillnav-ease);
}
.pillnav[data-pillnav-open="true"] .pillnav__aside { grid-template-rows: 1fr; }
.pillnav__aside-inner { overflow: hidden; min-height: 0; }
.pillnav__aside-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 24px 32px 32px;
}

/* When open: keep dropdown content inside viewport */
.pillnav[data-pillnav-open="true"] .pillnav__aside-inner {
  max-height: calc(100vh - var(--pillnav-top) - var(--pillnav-height) - 24px);
  overflow: hidden;
}
.pillnav[data-pillnav-open="true"] .pillnav__aside-content {
  padding: clamp(18px, 2vw, 28px) clamp(24px, 4vw, 48px) clamp(18px, 2vw, 24px);
  gap: clamp(18px, 2.2vw, 28px);
}
.pillnav[data-pillnav-open="true"] .pillnav__grid {
  gap: clamp(40px, 5vw, 72px);
  align-items: stretch;
}
.pillnav[data-pillnav-open="true"] .pillnav__col--nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pillnav[data-pillnav-open="true"] .pillnav__menu-link {
  font-size: clamp(32px, 3.6vw, 56px);
  padding: 1px 0;
}
.pillnav[data-pillnav-open="true"] .pillnav__menu-list { gap: 22px; }
.pillnav[data-pillnav-open="true"] .pillnav__group-label { margin-bottom: 12px; font-size: 16px; }
@media (max-width: 768px) { .pillnav[data-pillnav-open="true"] .pillnav__group-label { font-size: 16px; } }
.pillnav__group-label {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pillnav-fg-muted);
  margin: 0 0 16px;
  font-weight: 500;
}
@media (max-width: 768px) { .pillnav__group-label { font-size: 16px; } }

.pillnav__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
}

.pillnav__menu-list { display: flex; flex-direction: column; gap: 14px; }
.pillnav__menu-link {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  width: fit-content;
  color: var(--pillnav-fg);
  font-family: var(--display);
  font-size: clamp(28px, 1.5rem + 1.5vw, 44px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.025em;
  transition: color 250ms var(--pillnav-ease);
}
.pillnav__menu-link sup {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.14em;
  font-weight: 500;
  color: var(--accent);
  vertical-align: super;
}
@media (max-width: 768px) { .pillnav__menu-link sup { font-size: 16px; } }
.pillnav__menu-link:hover { color: var(--accent); }

/* Featured services grid */
.pillnav__svc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pillnav__svc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 8px;
}
.pillnav__svc {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  color: var(--pillnav-fg);
  transition: border-color .2s ease, background .2s ease, transform .25s ease;
}
.pillnav__svc:hover {
  border-color: var(--accent);
  background: rgba(255,167,38,0.06);
  transform: translateY(-2px);
}
.pillnav__svc-icon {
  width: 56px;
  height: 56px;
  color: var(--ink);
  --okla-icon-accent: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pillnav__svc-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.okla-service-icon { overflow: visible; }
.okla-icon__line { fill: none; stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.okla-icon__fill { fill: currentColor; }
.okla-icon__accent { fill: none; stroke: var(--okla-icon-accent, var(--accent)); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.okla-icon__accent-fill { fill: var(--okla-icon-accent, var(--accent)); }
.pillnav__svc-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--pillnav-fg);
  line-height: 1.2;
}
@media (max-width: 768px) { .pillnav__svc-name { font-size: 17px; } }
.pillnav__svc-num {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.16em;
  color: var(--accent);
  flex: none;
}
@media (max-width: 768px) { .pillnav__svc-num { font-size: 16px; } }
.pillnav__svc-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--pillnav-fg);
  line-height: 1.2;
}
@media (max-width: 768px) { .pillnav__svc-name { font-size: 17px; } }

/* Footer strip — phone + email + CTA */
.pillnav__footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--pillnav-ring);
}
.pillnav__footer-phone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--pillnav-fg);
  padding: 6px 0;
  transition: color .2s ease;
}
.pillnav__footer-phone:hover { color: var(--accent); }
.pillnav__footer-phone svg { opacity: 0.6; }
.pillnav__footer-phone small {
  display: block;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 2px;
}
@media (max-width: 768px) { .pillnav__footer-phone small { font-size: 16px; } }
.pillnav__footer-phone strong {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.pillnav__footer-mail {
  color: var(--ink-dim);
  font-size: 16px;
  transition: color .2s ease;
  justify-self: start;
  padding-left: 8px;
}
@media (max-width: 768px) { .pillnav__footer-mail { font-size: 16px; } }
.pillnav__footer-mail:hover { color: var(--accent); }

.pillnav__cta-block {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 16px;
  padding: 12px 18px;
  border-radius: 999px;
  transition: background .2s ease, transform .2s ease;
}
@media (max-width: 768px) { .pillnav__cta-block { font-size: 16px; } }
.pillnav__cta-block:hover { background: var(--accent-light); transform: translateY(-1px); }

/* Entrance animation for menu items */
.pillnav__group-label,
.pillnav__menu-link,
.pillnav__svc,
.pillnav__cta-block,
.pillnav__footer-phone,
.pillnav__footer-mail {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(8px);
  transition:
    opacity   400ms cubic-bezier(0.33, 1, 0.68, 1),
    filter    400ms cubic-bezier(0.33, 1, 0.68, 1),
    transform 400ms cubic-bezier(0.33, 1, 0.68, 1),
    color 200ms ease,
    background .2s ease,
    border-color .2s ease;
}
.pillnav[data-pillnav-open="true"] .pillnav__group-label,
.pillnav[data-pillnav-open="true"] .pillnav__menu-link,
.pillnav[data-pillnav-open="true"] .pillnav__svc,
.pillnav[data-pillnav-open="true"] .pillnav__cta-block,
.pillnav[data-pillnav-open="true"] .pillnav__footer-phone,
.pillnav[data-pillnav-open="true"] .pillnav__footer-mail {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition-delay: 150ms;
}

.pillnav[data-pillnav-open="true"] .pillnav__aside-content:has(:is(.pillnav__menu-link, .pillnav__svc):hover) :is(.pillnav__menu-link, .pillnav__svc) {
  opacity: 0.45; filter: blur(2px); transition-delay: 0ms;
}
.pillnav[data-pillnav-open="true"] .pillnav__aside-content:has(:is(.pillnav__menu-link, .pillnav__svc):hover) :is(.pillnav__menu-link, .pillnav__svc):hover {
  opacity: 1; filter: blur(0);
}

/* Responsive */
.pillnav[data-pillnav-contracted="true"] { --pillnav-span: 5; }
@media (min-width: 80rem) {
  .pillnav[data-pillnav-contracted="true"] { --pillnav-span: 3.5; }
}
@media (max-width: 64rem) {
  .pillnav__grid { grid-template-columns: 1fr; gap: 32px; }
  .pillnav__footer { grid-template-columns: 1fr; gap: 16px; padding-top: 18px; }
  .pillnav__footer-mail { padding-left: 0; }
}
@media (max-width: 39.99rem) {
  /* Mobile: header bar is full-width in every state, so opening the menu
     doesn't visually resize the pill. Matches the mega-menu width. */
  .pillnav { --pillnav-span: 12; --pillnav-top: 10px; padding: 0 12px; margin-top: 10px; }
  .pillnav[data-pillnav-contracted="true"] { --pillnav-span: 12; --pillnav-top: 8px; }
  /* Auto-hide on scroll-down, reveal on scroll-up (mobile only). */
  .pillnav {
    transition:
      transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
      opacity   220ms cubic-bezier(0.4, 0, 0.2, 1),
      width var(--pillnav-dur-width) var(--pillnav-ease);
    will-change: transform;
  }
  .pillnav[data-pillnav-hidden="true"] {
    transform: translateY(calc(-100% - var(--pillnav-top) - 20px));
    opacity: 0;
    pointer-events: none;
  }
  /* Static rounded-rect shell — no shape morph on open, just a clean drop-down. */
  .pillnav__shell { border-radius: 28px; transition: none; }
  .pillnav[data-pillnav-open="true"] .pillnav__shell { border-radius: 28px; }
  .pillnav__link, .pillnav__cta { display: none; }
  .pillnav__burger {
    transform: translateY(-50%) scaleX(1);
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }
  .pillnav__bar { cursor: pointer; padding: 0 14px 0 18px; }
  /* Quick contact actions centered in the bar on mobile.
     Pinned to the bar height so they don't move when the aside drops open.
     Hidden at top of page — revealed only once the header has contracted on scroll. */
  .pillnav__quick {
    position: absolute;
    top: calc(var(--pillnav-height) / 2);
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    opacity: 0;
    z-index: 2;
    transition: opacity 260ms var(--pillnav-ease);
  }
  .pillnav[data-pillnav-contracted="true"] .pillnav__quick {
    opacity: 1;
    pointer-events: auto;
  }
  .pillnav__quick-btn {
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--pillnav-fg);
    background: transparent;
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .pillnav__quick-btn svg { width: 22px; height: 22px; display: block; }
  .pillnav__quick-btn:hover,
  .pillnav__quick-btn:focus-visible {
    background: color-mix(in oklab, var(--pillnav-fg) 10%, transparent);
    color: var(--pillnav-fg);
    outline: none;
  }
  .pillnav__quick-btn:active { transform: translateY(0) scale(0.94); }
  /* === Mobile menu: single-column tappable list, no duplicate contact === */
  .pillnav[data-pillnav-open="true"] .pillnav__aside-inner {
    max-height: calc(100vh - var(--pillnav-top) - var(--pillnav-height) - 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pillnav[data-pillnav-open="true"] .pillnav__aside-content {
    padding: 8px 8px 14px;
    gap: 14px;
  }
  .pillnav__grid {
    display: block;
    gap: 0;
  }
  /* Services tile-grid + group label hidden on mobile — too cramped, and the
     main nav already covers Services. */
  .pillnav__col--svc { display: none; }
  /* Main menu links: full-width rows with separators, large hit target. */
  .pillnav__menu-list { gap: 0; }
  .pillnav__menu-link {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 16px;
    border-bottom: 1px solid var(--pillnav-ring);
    font-size: 22px !important;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }
  .pillnav__menu-link:last-child { border-bottom: 0; }
  .pillnav__menu-link::after {
    content: "";
    width: 8px; height: 8px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.45;
    margin-right: 4px;
  }
  .pillnav__menu-link:hover { color: var(--pillnav-fg); }
  /* Services accordion */
  .pillnav__menu-item--accordion { display: block; width: 100%; }
  .pillnav__menu-link--accordion::after {
    transition: transform 280ms var(--pillnav-ease);
  }
  .pillnav__menu-item--accordion[data-pillnav-accordion-open="true"] .pillnav__menu-link--accordion::after {
    transform: rotate(135deg);
    opacity: 0.9;
  }
  .pillnav__submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 300ms var(--pillnav-ease);
    background: color-mix(in oklab, var(--pillnav-fg) 4%, transparent);
    border-bottom: 1px solid var(--pillnav-ring);
  }
  .pillnav__submenu-link {
    display: block;
    padding: 14px 16px 14px 28px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--pillnav-fg-muted);
    border-bottom: 1px solid color-mix(in oklab, var(--pillnav-ring) 60%, transparent);
    text-decoration: none;
  }
  .pillnav__submenu-link:last-child { border-bottom: 0; }
  .pillnav__submenu-link:active { background: color-mix(in oklab, var(--pillnav-fg) 8%, transparent); }
  /* Footer: hide the duplicate phone + email (live in the bar's quick actions
     when scrolled, and reachable via Contact link). Keep only the CTA, full-width. */
  .pillnav__footer {
    display: block;
    padding: 14px 8px 4px;
    border-top: 0;
  }
  .pillnav__footer-phone,
  .pillnav__footer-mail { display: none; }
  .pillnav__cta-block {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 16px 18px;
    font-size: 18px;
    border-radius: 16px;
  }
  .pillnav__cta-block:hover { transform: none; }
  .pillnav__svc:hover { transform: none; background: rgba(255,255,255,0.02); border-color: var(--line); }
  /* The rest of the mobile-only rules (continued inside the same max-width block). */
  .pillnav__svc-grid, .pillnav__meta { grid-template-columns: 1fr; }
  .pillnav__menu-link { font-size: clamp(36px, 1.3rem + 5vw, 56px); }
  .pillnav[data-pillnav-open="true"] .pillnav__menu-link { font-size: clamp(28px, 8vw, 40px); }
  .pillnav[data-pillnav-open="true"] .pillnav__aside-content { padding: 18px 20px 20px; gap: 16px; }
  .pillnav[data-pillnav-open="true"] .pillnav__aside-inner { max-height: calc(100vh - 90px); overflow-y: auto; }
  .pillnav__footer-mail { display: none; }
  .pillnav__svc { padding: 10px 14px; }
  .pillnav__svc-icon { width: 44px; height: 44px; }
  .pillnav__svc-name { font-size: 16px; }
  .okla-strip__phone { font-size: 17px; padding: 2px 0; }
  .okla-strip__phone svg { width: 17px; height: 17px; }
  .okla-strip { font-size: 16px; }
  .lang-toggle, .lang-toggle__btn { font-size: 18px; }
  /* Keep the strip on one row at 390px: the 17px/18px bump overflows the
     row by 2px with the default 16px gaps. */
  .okla-strip__row { gap: 10px; }
  .okla-strip__right { gap: 10px; }
  .theme-toggle { width: 28px; height: 28px; }
}
/* Narrower phones (iPhone SE/mini, most Android): the 390px sizing above
   still overflows and wraps the strip to two lines (measured shortfall:
   ~6px at 375px, ~21px at 360px, ~61px at 320px). Tighten further so it
   stays on one row down to a 320px floor. */
@media (max-width: 400px) {
  .okla-strip__phone { font-size: 18px; }
  .okla-strip__phone svg { width: 14px; height: 14px; }
  .lang-toggle, .lang-toggle__btn { font-size: 15px; }
  .theme-toggle { width: 24px; height: 24px; }
  .okla-strip__row { padding: 0 14px; gap: 8px; }
  .okla-strip__right { gap: 8px; }
}
/* Desktop: hide the mobile-only quick-action trio + accordion submenu. */
@media (min-width: 40rem) {
  .pillnav__quick { display: none; }
  .pillnav__submenu { display: none !important; }
}

/* ===== Hero ===== */
.hero {
  position: relative;
  padding: clamp(40px, 6vw, 88px) 0 0;
  overflow: visible;
  isolation: isolate;
}
.hero .wrap { position: relative; z-index: 2; }

.hero__bg {
  position: absolute;
  top: -240px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
}
.hero__bg-img {
  position: absolute;
  inset: -4% -2%;
  background:
    radial-gradient(60% 80% at 30% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 80%),
    linear-gradient(135deg, #1a1612 0%, #0f0e0c 100%) center/cover no-repeat;
  filter: saturate(0.85) contrast(1.05);
  transform-origin: 55% 45%;
  animation: heroKenBurns 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroKenBurns {
  0%   { transform: scale(1.04) translate(0, 0); }
  100% { transform: scale(1.12) translate(-1.5%, -1%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg-img { animation: none; transform: scale(1.04); }
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 12%, transparent) 0%, color-mix(in srgb, var(--bg) 6%, transparent) 30%, color-mix(in srgb, var(--bg) 18%, transparent) 75%, var(--bg) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 14%, transparent) 0%, transparent 55%);
  pointer-events: none;
}

/* Lift the header layers above the hero stacking context so the video sits behind them */
.okla-strip { position: relative; z-index: 1; }
.hero__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}
.hero__left { position: relative; z-index: 2; }
.hero__title { margin-top: 28px; }
.hero__title em {
  font-style: normal;
  background: linear-gradient(110deg, var(--accent-light), var(--accent), var(--accent-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}
.hero__sub { margin-top: 28px; max-width: 52ch; }
.hero__actions { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero__rating { display: flex; align-items: center; gap: 10px; padding-left: 8px; }
.hero__rating .stars { color: var(--accent); letter-spacing: 2px; font-size: 16px; }
@media (max-width: 768px) { .hero__rating .stars { font-size: 16px; } }
.hero__rating small { font-family: var(--mono); font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); }
@media (max-width: 768px) { .hero__rating small { font-size: 16px; } }

.hero__right { position: relative; }
.hero__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.hero__media img, .hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s ease;
}
.hero__media:hover img { transform: scale(1.04); }
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(11,11,12,0.55) 100%);
  pointer-events: none;
}
.hero__readout {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  display: flex; justify-content: space-between; align-items: flex-end;
  z-index: 2;
}
.hero__readout .chip {
  font-family: var(--mono); font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase;
  background: rgba(11,11,12,0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 999px;
}
@media (max-width: 768px) { .hero__readout .chip { font-size: 16px; } }
.hero__readout .gauge {
  font-family: var(--display); font-weight: 700;
  font-size: 38px; letter-spacing: -0.02em; line-height: 1; color: var(--ink);
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.hero__readout .gauge small {
  font-family: var(--mono); font-size: 16px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 500; color: var(--accent-light); display: block; margin-top: 4px;
}
@media (max-width: 768px) { .hero__readout .gauge small { font-size: 16px; } }

/* Schematic ticks corner */
.hero__ticks {
  position: absolute;
  top: -8px; right: -8px;
  width: 88px; height: 88px;
  border: 1px dashed var(--accent);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 16px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
  background: var(--bg);
  animation: spin 28s linear infinite;
}
@media (max-width: 768px) { .hero__ticks { font-size: 16px; } }
.hero__ticks span { transform: rotate(0deg); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Stats strip under hero */
.statbar {
  margin-top: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.statbar__cell {
  padding: 22px 24px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.statbar__cell:last-child { border-right: 0; }
.statbar__cell .num { font-family: var(--display); font-weight: 700; font-size: clamp(36px, 4vw, 56px); letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.statbar__cell .num span { color: var(--accent); }
.statbar__cell .lbl { font-family: var(--mono); font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }
@media (max-width: 768px) { .statbar__cell .lbl { font-size: 16px; } }
@media (min-width: 901px) { .statbar__cell .lbl { font-size: 16px; } }

/* ===== Marquee ===== */
.marquee {
  background: var(--accent);
  color: var(--accent-ink);
  overflow: hidden;
  border-top: 1px solid rgba(0,0,0,0.18);
  border-bottom: 1px solid rgba(0,0,0,0.18);
}
.marquee__track {
  display: flex;
  gap: 48px;
  padding: 16px 0;
  animation: marquee 32s linear infinite;
  width: max-content;
  white-space: nowrap;
}
.marquee__track span {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 32px);
  letter-spacing: -0.02em;
  display: inline-flex; align-items: center; gap: 48px;
}
.marquee__track svg { flex: none; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===== Section base ===== */
.section { padding: clamp(104px, 12vw, 200px) 0; position: relative; }
.section__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.section__head .lede { margin-top: 0; }
.section__title { margin-top: 16px; }
.section__title em,
.feature h2 em {
  font-style: normal;
  color: var(--accent);
  background: linear-gradient(110deg, var(--accent-light), var(--accent), var(--accent-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===== Services grid ===== */
.services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.svc {
  position: relative;
  padding: clamp(28px, 3vw, 46px) clamp(24px, 3vw, 40px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 24px;
  transition: background .35s ease;
  overflow: hidden;
  min-height: 220px;
}
.svc:hover { background: var(--bg-2); }
.svc__num { font-family: var(--mono); font-size: 16px; letter-spacing: 0.18em; color: var(--ink-faint); }
@media (max-width: 768px) { .svc__num { font-size: 20px; } }
.svc__cat { font-family: var(--mono); font-size: 16px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
@media (max-width: 768px) { .svc__cat { font-size: 16px; } }
.svc__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.svc__icon {
  width: 88px;
  height: 88px;
  color: var(--ink);
  --okla-icon-accent: var(--accent);
  margin-bottom: 16px;
  transition: color .25s ease;
}
.svc__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 768px) {
  .svc__icon { width: 78px; height: 78px; margin-bottom: 14px; }
}
.svc__title { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.05; letter-spacing: -0.025em; }
.svc__desc { margin-top: 10px; color: var(--ink-dim); max-width: 42ch; font-size: 16px; line-height: 1.45; }
@media (max-width: 768px) { .svc__desc { font-size: 17px; } }
.svc__meta { display: flex; gap: 16px; margin-top: 24px; }
.svc__meta span { font-family: var(--mono); font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
@media (max-width: 768px) { .svc__meta span { font-size: 16px; } }
.svc__arrow {
  width: 52px; height: 52px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  display: grid; place-items: center;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
  color: var(--ink-dim);
  flex: none;
}
.svc:hover .svc__arrow { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); transform: rotate(-25deg); }
.svc__arrow svg { transition: transform .25s ease; }

/* Highlighted variant — every 5th tile flipped */
.svc--highlight { background: var(--accent); color: var(--accent-ink); }
.svc--highlight:hover { background: var(--accent-light); }
.svc--highlight .svc__cat { color: var(--accent-ink); opacity: 0.8; }
.svc--highlight .svc__num { color: rgba(24,23,21,0.5); }
.svc--highlight .svc__icon { background: var(--accent-ink); border-radius: 8px; padding: 9px; }
.svc--highlight .svc__desc { color: rgba(24,23,21,0.78); }
.svc--highlight .svc__meta span { color: rgba(24,23,21,0.55); }
.svc--highlight .svc__arrow { border-color: rgba(24,23,21,0.25); color: var(--accent-ink); }
.svc--highlight:hover .svc__arrow { background: var(--bg); border-color: var(--bg); color: var(--accent); }

/* ===== Process ===== */
.process {
  display: grid; gap: 0;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.process__cell {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(36px, 4vw, 56px);
  position: relative;
}
.process__cell .step {
  font-family: var(--mono); font-size: 16px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
}
@media (max-width: 768px) { .process__cell .step { font-size: 16px; } }
.process__cell h3 { font-family: var(--display); font-weight: 700; font-size: clamp(32px, 3vw, 48px); letter-spacing: -0.03em; margin: 16px 0 18px; line-height: 1; }
.process__cell p { color: var(--ink-dim); max-width: 36ch; }
.process__icon {
  margin-top: 32px;
  width: 100%;
  aspect-ratio: 2/1;
  display: grid; place-items: center;
  border-top: 1px dashed var(--line-2);
  padding-top: 28px;
}
.process__icon img {
  display: block;
  width: clamp(132px, 12vw, 172px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

/* ===== Feature split ===== */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 80px);
  align-items: center;
}
.feature__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.feature__image img { width: 100%; height: 100%; object-fit: cover; }
.feature__image .tag {
  position: absolute; top: 18px; left: 18px;
  font-family: var(--mono); font-size: 16px; letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--bg);
  padding: 8px 12px; border-radius: 999px;
  color: var(--accent);
  border: 1px solid var(--line-2);
}
@media (max-width: 768px) { .feature__image .tag { font-size: 16px; } }
.feature__points { margin-top: 36px; display: grid; gap: 20px; }
.feature__point {
  display: grid; grid-template-columns: 28px 1fr; gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.feature__point:last-child { border-bottom: 1px solid var(--line); }
.feature__point span.idx { font-family: var(--mono); font-size: 16px; letter-spacing: 0.14em; color: var(--accent); padding-top: 2px; }
@media (max-width: 768px) { .feature__point span.idx { font-size: 20px; } }
.feature__point h4 { font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; margin-bottom: 4px; }
@media (max-width: 768px) { .feature__point h4 { font-size: 20px; } }
.feature__point p { font-size: 16px; color: var(--ink-dim); max-width: 42ch; }
@media (max-width: 768px) { .feature__point p { font-size: 18px; } }

/* ===== Service areas (map / chips) ===== */
.areas {
  display: grid;
  grid-template-columns: 0.85fr 1.6fr;
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
}
.areas__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.area-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: transparent;
  font-size: 16px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
@media (max-width: 768px) { .area-chip { font-size: 16px; } }
.area-chip__pin { width: 13px; height: 15px; flex: none; color: var(--ink-faint); transition: color .2s ease; }
.area-chip__name { font-weight: 500; }
.areas__cta { margin-top: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.areas__cta-text { color: var(--ink-dim); font-size: 16px; line-height: 1.5; max-width: none; }
@media (max-width: 768px) { .areas__cta-text { font-size: 16px; } }
.area-chip:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); transform: translateY(-1px); }
/* Contact-page chips are read-only labels: no pointer, no hover lift (Ahmad 2026-07-26). */
.area-chip--static { cursor: default; }
.area-chip--static:hover { border-color: var(--line-2); background: transparent; transform: none; }
.area-chip:hover .area-chip__pin { color: var(--accent); }
.area-chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.area-chip.is-active .area-chip__pin { color: var(--accent-ink); }
.area-chip.is-active .area-chip__name { font-weight: 600; }

/* Map sketch */
.areas__map {
  position: relative;
  aspect-ratio: 16 / 9;
  background: transparent;
  overflow: visible;
}
.areas__map-img { width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.05) brightness(0.92); -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%); mask-image: linear-gradient(to right, transparent 0%, #000 22%); }
.areas__map-grad { display: none; }
.areas__pinwrap { position: absolute; left: 49.2%; top: 59.7%; width: clamp(64px, 16%, 120px); transform: translate(-50%, -88%); transition: left .6s cubic-bezier(.16, 1, .3, 1), top .6s cubic-bezier(.16, 1, .3, 1); z-index: 2; }
.areas__pin { position: relative; width: 100%; aspect-ratio: 1; filter: drop-shadow(0 12px 22px rgba(0,0,0,0.55)); }
.areas__pin-glow { position: absolute; left: 50%; top: 36%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(circle, rgba(255,167,38,0.42), transparent 62%); filter: blur(8px); z-index: -1; }
.areas__pin svg { width: 100% !important; height: 100% !important; }
.areas__map-tag { display: none; }

/* ===== Why us ===== */
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.why__card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(28px, 3vw, 40px);
  background: var(--bg-2);
  display: flex; flex-direction: column; gap: 18px;
  position: relative; overflow: hidden;
  min-height: 320px;
}
.why__card h3 { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.02em; line-height: 1.05; }
.why__card p { color: var(--ink-dim); font-size: 15px; flex: 1; }
@media (max-width: 768px) { .why__card p { font-size: 17px; } }
.why__card .stat { font-family: var(--mono); font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); display: flex; align-items: baseline; gap: 8px; }
@media (max-width: 768px) { .why__card .stat { font-size: 16px; } }
.why__card .stat b { font-family: var(--display); font-weight: 700; font-size: 32px; letter-spacing: -0.02em; color: var(--ink); }
.why__icon { width: 56px; height: 56px; border: 1px solid var(--line-2); border-radius: 12px; display: grid; place-items: center; color: var(--accent); }

/* ===== Testimonials ===== */
.testimonials__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(360px, 420px);
  gap: 18px;
  overflow-x: auto;
  padding: 4px 4px 24px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.testimonials__track::-webkit-scrollbar { height: 6px; }
.testimonials__track::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; }
.review {
  scroll-snap-align: start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  background: var(--bg-2);
  display: flex; flex-direction: column; gap: 24px;
  min-height: 220px;
}
.review .stars { color: var(--accent); letter-spacing: 3px; font-size: 16px; }
@media (max-width: 768px) { .review .stars { font-size: 16px; } }
.review blockquote {
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
  line-height: 1.2;
  flex: 1;
  text-wrap: pretty;
}
.review__by { display: flex; align-items: center; gap: 12px; }
.review__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--line-2); display: grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--accent); }
@media (max-width: 768px) { .review__avatar { font-size: 16px; } }
.review__by strong { font-weight: 600; font-size: 16px; display: block; }
@media (max-width: 768px) { .review__by strong { font-size: 16px; } }
.review__by small { font-family: var(--mono); font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
@media (max-width: 768px) { .review__by small { font-size: 16px; } }

/* ===== FAQ ===== */
.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__btn {
  width: 100%; text-align: left;
  padding: 28px 0;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: -0.02em;
  line-height: 1.2;
  transition: color .2s ease;
}
.faq__btn:hover { color: var(--accent); }
.faq__btn .idx { font-family: var(--mono); font-size: 16px; letter-spacing: 0.16em; color: var(--accent); font-weight: 500; }
@media (max-width: 768px) { .faq__btn .idx { font-size: 20px; } }
.faq__icon {
  width: 36px; height: 36px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  display: grid; place-items: center;
  transition: transform .3s ease, background .25s ease, color .25s ease;
  color: var(--ink-dim);
}
.faq__item.is-open .faq__icon { transform: rotate(45deg); background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.faq__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}
.faq__body > div { overflow: hidden; }
.faq__item.is-open .faq__body { grid-template-rows: 1fr; }
.faq__body p {
  color: var(--ink-dim);
  font-size: 16px;
  max-width: 64ch;
  padding: 0 60px 32px 36px;
  text-wrap: pretty;
}
@media (max-width: 768px) { .faq__body p { font-size: 17px; } }

/* ===== Quote form ===== */
.quote {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.quote__form { padding: clamp(40px, 5vw, 80px) clamp(24px, 4vw, 56px); border-left: 1px solid var(--line); }
.quote__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--wide { grid-column: 1 / -1; }
/* Label above the input carries the information, so it reads brighter than the value
   hint inside the box (operator request 2026-07-28). Every form on the site uses
   `.field`, so this pair sets the hierarchy once. */
.field label { font-family: var(--mono); font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }
@media (max-width: 768px) { .field label { font-size: 16px; } }
/* Fully boxed inputs, not a bottom rule: the underline read as decoration rather than
   as a field, and on the dark panel it was easy to miss where a field started. */
.field input, .field select, .field textarea {
  font: inherit; color: inherit;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 13px 14px;
  font-size: 16px;
  outline: none;
  transition: border-color .2s ease;
}
@media (max-width: 768px) { .field input, .field select, .field textarea { font-size: 18px; } }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-placeholder); }
.field textarea { resize: vertical; min-height: 96px; font-family: var(--sans); }
.field select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23ffa726' fill='none' stroke-width='2'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px; }
.field select option { background: var(--bg); color: var(--ink); }
.field select:hover { border-color: var(--accent); }
/* Contact column, now the LEFT half of the quote panel (operator request 2026-07-28:
   contact details left, form right, service-area chips dropped — the #areas section
   above already carries the map + full chip list). No `overflow: hidden` here: it would
   make this cell the scroll container and kill the sticky child below. */
.quote__side {
  padding: clamp(40px, 5vw, 80px) clamp(24px, 4vw, 56px);
  background: var(--bg-2);
  position: relative;
}
.quote__side .badge {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 16px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
}
@media (max-width: 768px) { .quote__side .badge { font-size: 16px; } }
.quote__side .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: pulse 2s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,167,38,0.55); }
  70% { box-shadow: 0 0 0 14px rgba(255,167,38,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,167,38,0); }
}
.quote__big { font-family: var(--display); font-weight: 700; font-size: clamp(40px, 5vw, 72px); letter-spacing: -0.03em; line-height: 0.95; }
.quote__contact { display: grid; gap: 16px; margin-top: 32px; }
.quote__contact > * { display: flex; align-items: center; gap: 14px; font-size: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
@media (max-width: 768px) { .quote__contact > * { font-size: 18px; } }
.quote__contact > *:first-child { border-top: 0; }
.quote__contact a:hover { color: var(--accent); }
.quote__contact span.k { font-family: var(--mono); font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); flex: none; min-width: 80px; }
@media (max-width: 768px) { .quote__contact span.k { font-size: 16px; } }
/* Pin the contact details beside the form: the form runs ~1,100px tall while the contact
   block is ~300px, so phone/email used to scroll away the moment someone started typing.
   The nav pill is sticky at top:16px and stands 60px tall, so clear it by 24px — same
   offset as `.contact-form-side`. Two columns only exist above 1024px; below that the
   panel stacks and there is nothing to pin. */
@media (min-width: 1025px) {
  .quote__sticky { position: sticky; top: 100px; }
}

/* ===== Footer ===== */
.footer { padding: clamp(72px, 8vw, 120px) 0 32px; border-top: 1px solid var(--line); }

.footer__brand {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
  padding-bottom: clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(48px, 6vw, 72px);
}
.footer__logo {
  height: clamp(80px, 9vw, 120px);
  width: auto;
  display: block;
}
.footer__tagline {
  max-width: 52ch;
  margin: 0;
}

.footer__top {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.footer__col h5 {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 22px;
  font-weight: 500;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 768px) { .footer__col h5 { font-size: 18px; font-weight: 700; } }
.footer__col ul { list-style: none; display: grid; gap: 12px; padding: 0; margin: 0; }
@media (max-width: 768px) { .footer__col ul { font-size: 18px; } }
.footer__col li a {
  color: var(--ink-dim);
  font-size: 16px;
  line-height: 1.5;
  transition: color .2s ease;
}
@media (max-width: 768px) { .footer__col li a { font-size: 18px; } }
.footer__col li a:hover { color: var(--accent); }
.footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 12px 18px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 16px;
  border-radius: 999px;
  transition: background .2s ease, transform .2s ease;
}
@media (max-width: 768px) { .footer__cta { font-size: 16px; } }
.footer__cta:hover { background: var(--accent-light); transform: translateY(-1px); }

.footer__bottom {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
@media (max-width: 768px) { .footer__bottom { font-size: 14px; } }

/* Big foot wordmark — interactive feel */
.foot-wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 11vw, 200px);
  letter-spacing: -0.04em;
  line-height: 1.15;
  text-align: center;
  margin: clamp(40px, 6vw, 96px) 0 -8px;
  color: var(--ink);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}

/* =========================================================
   Letter-rise — per-letter mask reveal with replay
   ========================================================= */
[data-letter-rise] { visibility: hidden; }
[data-letter-rise].lr-ready { visibility: visible; }

[data-letter-rise] .lr-char-wrap {
  display: inline-block;
  overflow: hidden;
  line-height: inherit;
  vertical-align: bottom;
}
[data-letter-rise] .lr-char {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--lr-i, 0) * 45ms);
  will-change: transform;
}
[data-letter-rise].is-revealed .lr-char { transform: translateY(0); }
[data-letter-rise].lr-no-transition .lr-char {
  transition: none !important;
  transition-delay: 0ms !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-letter-rise] .lr-char {
    transition: opacity 200ms ease;
    transform: none;
    transition-delay: 0ms;
  }
}

/* ===== Reveal anim ===== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
.reveal.is-in { opacity: 1; transform: translateY(0); }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  :root { --gutter: clamp(18px, 4vw, 32px); }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__right { max-width: 480px; margin: 0 auto; }
  .section__head { grid-template-columns: 1fr; gap: 20px; }
  .services, .process { grid-template-columns: 1fr 1fr; }
  .why { grid-template-columns: 1fr 1fr; }
  .feature, .areas, .quote { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-template-columns: 1fr; gap: 24px; }
  .nav__links { display: none; }
  .quote__form { border-left: 0; }
  .quote__side { border-bottom: 1px solid var(--line); }
  .statbar { grid-template-columns: 1fr 1fr; }
  .statbar__cell:nth-child(2) { border-right: 0; }
  .statbar__cell:nth-child(1), .statbar__cell:nth-child(2) { border-bottom: 1px solid var(--line); }
  .testimonials__track { grid-auto-columns: minmax(280px, 320px); }
  .review { padding: 22px; min-height: 240px; }
  .review blockquote { font-size: 19px; }
  .h-mega { font-size: clamp(52px, 11vw, 110px); }
  .h-xl   { font-size: clamp(40px, 7vw, 72px); }
  .h-lg   { font-size: clamp(32px, 5vw, 52px); }
  .faq__btn { gap: 16px; padding: 22px 0; }
  .faq__body p { padding: 0 36px 24px 28px; }
  .quote__big { font-size: clamp(36px, 8vw, 64px); }
}
@media (max-width: 640px) {
  :root { --gutter: 18px; }
  .services, .process, .why, .quote__fields, .footer__top { grid-template-columns: 1fr; }
  .statbar { grid-template-columns: 1fr; }
  .statbar__cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .statbar__cell:last-child { border-bottom: 0; }
  .nav__phone { display: none; }
  .h-mega { font-size: clamp(44px, 13vw, 84px); line-height: 0.95; }
  .h-xl   { font-size: clamp(32px, 9vw, 56px); line-height: 0.98; }
  .h-lg   { font-size: clamp(26px, 7vw, 40px); }
  .h-md   { font-size: clamp(22px, 5.5vw, 32px); }
  .lede   { font-size: 18px; line-height: 1.6; }
  .hero { padding-top: clamp(24px, 5vw, 48px); }
  .hero__actions { gap: 10px; }
  .hero__media { aspect-ratio: 4 / 5; }
  .hero__ticks { display: none; }
  .btn { padding: 14px 18px; font-size: 16px; }
  .marquee__track span { font-size: 18px; gap: 36px; }
  .svc { padding: 28px 22px; min-height: auto; }
  .svc__title { font-size: 26px; }
  .svc__desc { font-size: 17px; }
  .process__cell { padding: 32px 22px; }
  .process__cell h3 { font-size: 28px; }
  .feature__image { aspect-ratio: 4 / 4; }
  .feature__point { grid-template-columns: 24px 1fr; gap: 12px; }
  .why__card { padding: 24px; min-height: auto; }
  .why__card h3 { font-size: 22px; }
  .areas { gap: 32px; }
  .areas__map { aspect-ratio: 16 / 9; }
  .area-chip { padding: 10px 14px; font-size: 16px; }
  .faq__btn { font-size: 20px; font-weight: 600; padding: 20px 0; gap: 12px; }
  .faq__icon { width: 32px; height: 32px; }
  .faq__body p { padding: 0 0 22px 26px; font-size: 17px; }
  .quote__form, .quote__side { padding: 32px 20px; }
  .quote__contact > * { font-size: 17px; }
  .quote__contact span.k { min-width: 64px; font-size: 16px; }
  .foot-wordmark { font-size: clamp(36px, 13vw, 84px); }
  .footer { padding: 60px 0 24px; }
  .footer__col h5 { font-size: 18px; font-weight: 700; padding-bottom: 12px; margin-bottom: 16px; }
  .footer__bottom { font-size: 14px; gap: 12px; flex-direction: column; align-items: flex-start; text-align: left; }
  .home-blog__intro { flex-direction: column; align-items: flex-start; }
  .home-post__media { aspect-ratio: 4 / 3; }
  .stat-num { font-size: clamp(36px, 10vw, 56px); }
}
@media (max-width: 400px) {
  :root { --gutter: 16px; }
  .h-mega { font-size: clamp(38px, 13vw, 72px); }
  .marquee__track { gap: 28px; }
  .marquee__track span { font-size: 18px; gap: 28px; }
  .btn { padding: 12px 16px; font-size: 16px; }
  .pillnav__logo-icon { height: 38px !important; }
}

/* ===== Instagram strip ===== */
.instagram-strip { padding-top: 0; }
.ig-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: clamp(28px, 3.5vw, 48px);
  flex-wrap: wrap;
  padding-bottom: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid var(--line);
}
.ig-head__left { display: flex; align-items: center; gap: 20px; }
.ig-avatar {
  position: relative;
  width: 72px; height: 72px;
  border-radius: 50%;
  padding: 4px;
  background: conic-gradient(from 0deg, var(--accent-light), var(--accent), var(--accent-deep), var(--accent), var(--accent-light));
  display: grid; place-items: center;
  flex: none;
  transition: transform .25s ease;
}
.ig-avatar:hover { transform: scale(1.05); }
.ig-avatar__glyph {
  box-sizing: border-box;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--bg);
  padding: 15px;
  border: 2px solid var(--bg);
  color: var(--accent);
}
.ig-handle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: color .2s ease, gap .2s ease;
}
.ig-handle:hover { color: var(--accent); gap: 12px; }
.ig-handle svg { color: var(--accent); transition: transform .2s ease; }
.ig-handle:hover svg { transform: translate(2px, -2px); }
.ig-stats {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .ig-stats { font-size: 16px; } }
.ig-stats strong { color: var(--ink); font-weight: 600; }
.ig-stats__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-faint); }
.ig-follow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 16px;
  transition: background .2s ease, transform .2s ease;
  white-space: nowrap;
}
@media (max-width: 768px) { .ig-follow { font-size: 16px; } }
.ig-follow:hover { background: var(--accent-light); transform: translateY(-1px); }

/* ============================================================
   OKLA ÉLECTRIQUE — Instagram feed (sites-0227)
   Two-row autoplay marquee carousel. 4 posts visible per row,
   opposite directions, pause on hover / focus / touch. Brand
   tokens only. Static-export safe. No libs.
   ============================================================ */

.ig-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* ROW = a clipped viewport with an edge fade */
.ig-row {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

/* TRACK = duplicated set. JS translates it in px for a deterministic speed. */
.ig-track {
  display: flex;
  gap: 16px;
  width: max-content;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* TILE = one slide. 4 visible per row (container-query width). */
.ig-tile {
  flex: 0 0 clamp(190px, 20vw, 264px);
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-3);
  border: 1px solid var(--line);
  display: block;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  transition: transform .45s cubic-bezier(.16,1,.3,1),
              border-color .35s ease,
              box-shadow .45s cubic-bezier(.16,1,.3,1);
}

/* Tablet — 3 visible; Phone — 2 visible (keeps tiles big) */

.ig-tile:hover,
.ig-tile:focus-visible {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: 0 16px 38px -16px rgba(0,0,0,.7),
              0 0 0 1px rgba(255,167,38,.25),
              0 10px 28px -12px rgba(255,122,24,.32);
}
.ig-tile:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 16px 38px -16px rgba(0,0,0,.7);
}

/* MEDIA (img for photos, video for reels) */
.ig-tile__media { position: absolute; inset: 0; display: grid; place-items: center; background: var(--bg-2); z-index: 0; }
.ig-tile__media img,
.ig-tile__media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.01);
  transition: transform .9s cubic-bezier(.16,1,.3,1), filter .5s ease;
}
.ig-tile:hover .ig-tile__media img,
.ig-tile:focus-visible .ig-tile__media img,
.ig-tile:hover .ig-tile__media video,
.ig-tile:focus-visible .ig-tile__media video { transform: scale(1.07); filter: saturate(1.05) contrast(1.02); }

.ig-tile__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,11,12,.26) 0%, transparent 26%, transparent 56%, rgba(11,11,12,.30) 100%);
}

/* OVERLAY — always-on bottom caption gradient.
   NOTE: anything painted on top of this gradient (caption, media-type badge) uses a
   literal cream, not var(--ink). The gradient is a photo scrim and stays dark in light
   mode, so a theme-flipping token turns the text near-black on near-black. */
.ig-tile__overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  padding: 16px; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, transparent 44%, rgba(11,11,12,.55) 72%, rgba(11,11,12,.92) 100%);
  transition: background .35s ease;
}
.ig-tile:hover .ig-tile__overlay,
.ig-tile:focus-visible .ig-tile__overlay {
  background: linear-gradient(180deg, rgba(11,11,12,.05) 0%, rgba(11,11,12,.35) 46%, rgba(11,11,12,.78) 72%, rgba(11,11,12,.96) 100%);
}

.ig-tile__caption {
  font-family: var(--display); font-size: 16px; line-height: 1.4; color: #f5efe4; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
@media (max-width: 768px) { .ig-tile__caption { font-size: 16px; font-weight: 700; } }

.ig-tile__meta { display: flex; align-items: center; }
.ig-tile__cta {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: var(--accent-ink);
  font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: 0; white-space: nowrap;
  box-shadow: 0 4px 14px -4px rgba(255,122,24,.55);
  opacity: 0; transform: translateX(6px);
  transition: opacity .3s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
@media (max-width: 768px) { .ig-tile__cta { font-size: 16px; } }
.ig-tile__cta svg { width: 11px; height: 11px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; }
.ig-tile:hover .ig-tile__cta,
.ig-tile:focus-visible .ig-tile__cta { opacity: 1; transform: translateX(0); }

/* MEDIA-TYPE BADGE (reel / video) */
.ig-tile__type {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(11,11,12,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.16);
}
.ig-tile__type svg { width: 15px; height: 15px; stroke: #f5efe4; fill: none; stroke-width: 1.8; }
.ig-tile__type[data-type="photo"],
.ig-tile__type:not([data-type="reel"]):not([data-type="video"]) { display: none; }

/* Touch / no-hover: CTA always visible */
@media (hover: none) { .ig-tile__cta { opacity: 1; transform: none; } }

/* Reduced motion: stop autoplay, allow manual horizontal scroll */
@media (prefers-reduced-motion: reduce) {
  .ig-track { transform: none; }
  .ig-row { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
  .ig-tile { scroll-snap-align: start; }
  .ig-tile:hover, .ig-tile:focus-visible { transform: none; }
  .ig-tile:hover .ig-tile__media img, .ig-tile:focus-visible .ig-tile__media img { transform: scale(1.01); }
  .ig-tile__cta { opacity: 1; transform: none; }
}

/* Instagram HEADER responsive (preserved) */
@media (max-width: 640px) {
  .ig-head__left { gap: 14px; }
  .ig-avatar { width: 56px; height: 56px; }
  .ig-stats { font-size: 16px; gap: 8px; }
  .ig-follow { padding: 12px 18px; font-size: 16px; }
}

.home-blog__intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.home-blog__all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  padding: 8px 14px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  transition: background .2s ease, color .2s ease, gap .2s ease;
}
@media (max-width: 768px) { .home-blog__all { font-size: 16px; } }
.home-blog__all:hover {
  background: var(--accent);
  color: var(--accent-ink);
  gap: 14px;
}

.home-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}
.home-post {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--ink);
  transition: transform .3s ease;
}
.home-post:hover { transform: translateY(-4px); }
.home-post__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-3);
  border: 1px solid var(--line);
}
.home-post__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.home-post:hover .home-post__media img { transform: scale(1.06); }
.home-post__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(11,11,12,0.7) 100%);
  pointer-events: none;
}
.home-post__cat {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
}
@media (max-width: 768px) { .home-post__cat { font-size: 16px; } }
.home-post__meta {
  position: absolute;
  bottom: 14px; left: 14px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.14em;
  color: var(--ink);
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
@media (max-width: 768px) { .home-post__meta { font-size: 16px; } }
.home-post__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 1.5vw, 24px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
  transition: color .25s ease;
}
.home-post:hover .home-post__title { color: var(--accent); }
.home-post__excerpt {
  font-size: 16px;
  color: var(--ink-dim);
  line-height: 1.55;
  text-wrap: pretty;
  flex: 1;
}
@media (max-width: 768px) { .home-post__excerpt { font-size: 16px; } }
.home-post__author {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .home-post__author { font-size: 16px; } }
.home-post__avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  flex: none;
}
@media (max-width: 768px) { .home-post__avatar { font-size: 16px; } }
.home-post__arrow {
  margin-left: auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  color: var(--ink-dim);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .25s ease;
}
.home-post:hover .home-post__arrow {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  transform: rotate(-15deg);
}

@media (max-width: 1024px) {
  .home-blog__grid { grid-template-columns: 1fr 1fr; }
}

/* ===== Exit-intent popup ===== */
.exit-popup { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
.exit-popup.is-open { opacity: 1; pointer-events: auto; }
.exit-popup__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.35); backdrop-filter: blur(20px) saturate(135%); -webkit-backdrop-filter: blur(20px) saturate(135%); }
.exit-popup__card {
  position: relative;
  overflow: hidden;
  width: min(760px, 100%);
  display: grid;
  grid-template-columns: 300px 1fr;
  background: var(--bg-2);
  border: 0;
  border-radius: var(--radius-lg);
  --notch-r: 12px;
  -webkit-mask: radial-gradient(circle var(--notch-r) at 300px 0%, transparent calc(var(--notch-r) - 0.5px), #000 var(--notch-r)), radial-gradient(circle var(--notch-r) at 300px 100%, transparent calc(var(--notch-r) - 0.5px), #000 var(--notch-r));
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle var(--notch-r) at 300px 0%, transparent calc(var(--notch-r) - 0.5px), #000 var(--notch-r)), radial-gradient(circle var(--notch-r) at 300px 100%, transparent calc(var(--notch-r) - 0.5px), #000 var(--notch-r));
  mask-composite: intersect;
  box-shadow: 0 30px 80px rgba(255,150,40,0.34), 0 12px 38px rgba(255,176,80,0.22);
  filter: drop-shadow(0 0 1px rgba(255,255,255,0.40)) drop-shadow(0 0 26px rgba(255,167,38,0.30)) drop-shadow(0 0 72px rgba(255,167,38,0.16));
  transform: translateY(20px) scale(0.96);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.exit-popup.is-open .exit-popup__card { transform: translateY(0) scale(1); }
[data-theme="light"] .exit-popup__card { filter: none; box-shadow: 0 30px 80px rgba(0,0,0,0.22); }
/* coupon perforation notches at the column seam */
.exit-popup__close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--bg); color: var(--ink-dim);
  display: grid; place-items: center; cursor: pointer; z-index: 6;
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.exit-popup__close:hover { color: var(--ink); border-color: var(--ink); transform: rotate(90deg); }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 2s infinite; }

/* Voucher (left) */
.exit-popup__voucher {
  position: relative; overflow: hidden; padding: 34px 30px;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  background:
    radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 52%),
    radial-gradient(120% 120% at 100% 100%, color-mix(in srgb, var(--copper) 22%, transparent), transparent 55%),
    var(--bg);
  border-right: 2px dashed var(--line-2);
}
.exit-popup__voucher-bolt { position: absolute; right: -26px; bottom: -30px; width: 190px; height: 190px; color: var(--accent); opacity: 0.10; transform: rotate(8deg); }
.exit-popup__voucher-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 16px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
@media (max-width: 768px) { .exit-popup__voucher-eyebrow { font-size: 16px; } }
.exit-popup__voucher-eyebrow svg { width: 14px; height: 14px; }
.exit-popup__amount { position: relative; display: flex; align-items: flex-start; gap: 6px; line-height: 0.82; }
.exit-popup__amount .num { font-family: var(--display); font-weight: 800; font-size: 104px; letter-spacing: -0.04em; background: linear-gradient(160deg, var(--accent-light), var(--accent) 55%, var(--accent-deep)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 40px rgba(255,167,38,0.25); }
.exit-popup__amount .cur { font-family: var(--display); font-weight: 700; font-size: 40px; color: var(--accent-light); margin-top: 8px; }
.exit-popup__amount .off { align-self: flex-end; margin-bottom: 14px; font-family: var(--display); font-weight: 800; font-size: 34px; letter-spacing: -0.02em; color: var(--ink); }
.exit-popup__voucher-for { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--ink); margin-top: 2px; }
.exit-popup__voucher-tag { align-self: flex-start; margin-top: 10px; font-family: var(--mono); font-size: 16px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.5; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 85%, transparent); border: 1px dashed var(--line-2); border-radius: 12px; padding: 9px 13px; }
@media (max-width: 768px) { .exit-popup__voucher-tag { font-size: 16px; } }

/* Form body (right) */
.exit-popup__body { padding: clamp(30px, 3.4vw, 42px); display: flex; flex-direction: column; gap: 13px; justify-content: center; }
.exit-popup__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 74%, transparent); font-weight: 700; }
@media (max-width: 768px) { .exit-popup__eyebrow { font-size: 16px; } }
.exit-popup__eyebrow svg { width: 14px; height: 14px; color: var(--accent); flex: none; }
.exit-popup__title { font-family: var(--display); font-weight: 700; font-size: clamp(27px, 2.6vw, 36px); letter-spacing: -0.025em; line-height: 1.02; text-wrap: balance; }
.exit-popup__sub { color: color-mix(in srgb, var(--ink) 74%, transparent); font-size: 16px; line-height: 1.5; text-wrap: pretty; max-width: 38ch; }
@media (max-width: 768px) { .exit-popup__sub { font-size: 16px; } }
.exit-popup__form { display: flex; flex-direction: column; gap: 12px; }
.exit-popup__form[hidden] { display: none; }
.exit-popup__input-row { display: flex; gap: 6px; padding: 5px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg); margin-top: 4px; transition: border-color .2s ease, box-shadow .2s ease; }
.exit-popup__input-row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.exit-popup__input-row input { font: inherit; background: none; border: 0; outline: none; color: var(--ink); flex: 1; padding: 8px 16px; font-size: 16px; min-width: 0; }
@media (max-width: 768px) { .exit-popup__input-row input { font-size: 16px; } }
.exit-popup__input-row input::placeholder { color: var(--ink-placeholder); }
.exit-popup__input-row .btn { padding: 12px 18px; font-size: 16px; flex: none; }
@media (max-width: 768px) { .exit-popup__input-row .btn { font-size: 16px; } }
.exit-popup__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 2px; }
.exit-popup__trust span { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 16px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 82%, transparent); }
@media (max-width: 768px) { .exit-popup__trust span { font-size: 16px; } }
.exit-popup__trust svg { width: 14px; height: 14px; color: var(--accent); flex: none; }
.exit-popup__alt { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; font-size: 16px; color: color-mix(in srgb, var(--ink) 74%, transparent); }
@media (max-width: 768px) { .exit-popup__alt { font-size: 16px; } }
.exit-popup__alt a { color: var(--ink); font-weight: 600; transition: color .2s ease; }
.exit-popup__alt a:hover { color: var(--accent); }
.exit-popup__alt strong { color: var(--ink); }
.exit-popup__success { display: flex; flex-direction: column; gap: 12px; }
.exit-popup__success[hidden] { display: none; }
.exit-popup__check { color: var(--accent); display: inline-flex; }
/* clean swap: hide the intro once the success state shows */
.exit-popup__body:has(.exit-popup__success:not([hidden])) > .exit-popup__eyebrow,
.exit-popup__body:has(.exit-popup__success:not([hidden])) > #exit-popup-title,
.exit-popup__body:has(.exit-popup__success:not([hidden])) > .exit-popup__sub { display: none; }

@media (max-width: 640px) {
  .exit-popup { padding: 16px; }
  .exit-popup__card { grid-template-columns: 1fr; max-height: 92vh; overflow-y: auto; }
  .exit-popup__card::before, .exit-popup__card::after { display: none; }
  .exit-popup__card { -webkit-mask: none; mask: none; }
  .exit-popup__voucher { border-right: 0; border-bottom: 2px dashed var(--line-2); padding: 28px 26px 26px; gap: 10px; }
  .exit-popup__amount .num { font-size: 84px; }
  .exit-popup__amount .cur { font-size: 34px; }
  .exit-popup__amount .off { font-size: 30px; margin-bottom: 12px; }
  .exit-popup__voucher-bolt { width: 150px; height: 150px; right: -20px; bottom: -22px; }
  .exit-popup__body { padding: 28px 24px; }
  .exit-popup__input-row { flex-direction: column; border-radius: var(--radius); padding: 8px; }
  .exit-popup__input-row .btn { width: 100%; justify-content: center; }
}

/* ===== Tweaks panel root override ===== */
[data-accent="amber"] { --accent: #ffa726; --accent-light: #ffd54f; --accent-deep: #ff7a18; --accent-ink: #181715; }
[data-accent="copper"] { --accent: #f04e23; --accent-light: #ff7a4d; --accent-deep: #c73a17; --accent-ink: #fff8f0; }
[data-accent="electric"] { --accent: #ffe900; --accent-light: #ffee5c; --accent-deep: #ffb800; --accent-ink: #181715; }
[data-accent="volt"] { --accent: #5cffb1; --accent-light: #a8ffd1; --accent-deep: #00d989; --accent-ink: #06251a; }

/* === Hero background video (added post-design) === */
.hero__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  /* Subtle desaturation + tonal shift so the dark-amber palette still reads */
  filter: saturate(0.78) contrast(1.05) brightness(0.65);
}
/* The .hero__bg-img gradient becomes a darkening atmosphere layer on top of the video */
.hero .hero__bg-img {
  z-index: 1;
  background:
    radial-gradient(70% 90% at 30% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 80%),
    linear-gradient(180deg, rgba(11,11,12,0.35) 0%, rgba(11,11,12,0.75) 100%);
  opacity: 1;
}
/* Push hero content above both layers */
.hero .wrap { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .hero__bg-video { display: none; }
}

/* === Hero: single-column layout (image removed; video does the work) === */
.hero .hero__grid { grid-template-columns: 1fr; }
.hero { position: relative; }
.hero .hero__ticks {
  position: absolute;
  top: clamp(24px, 6vw, 96px);
  right: clamp(24px, 5vw, 80px);
  width: clamp(96px, 9vw, 132px);
  height: clamp(96px, 9vw, 132px);
  z-index: 3;
  background: transparent;
}

/* === Desktop pill nav: bigger ONLY when expanded; shrinks to original on scroll === */
@media (min-width: 901px) {
  .pillnav:not([data-pillnav-contracted="true"]) {
    --pillnav-height: 88px;
    --pillnav-top: 28px;
    --pillnav-pad-x: 18px;
    --pillnav-max-w: 1280px;
  }
  .pillnav:not([data-pillnav-contracted="true"]) .pillnav__logo { height: 56px; }
  .pillnav:not([data-pillnav-contracted="true"]) .pillnav__logo-full { height: 52px; }
  .pillnav:not([data-pillnav-contracted="true"]) .pillnav__bar { padding: 0 var(--pillnav-pad-x) 0 28px; }
  .pillnav:not([data-pillnav-contracted="true"]) .pillnav__links { gap: 28px; }
  .pillnav:not([data-pillnav-contracted="true"]) .pillnav__link { font-size: 17px; }
  .pillnav:not([data-pillnav-contracted="true"]) .pillnav__cta { font-size: 15px; padding: 13px 22px; margin-left: 10px; }
}

/* === Desktop upper strip: bigger phone, theme toggle, lang toggle (RBQ unchanged) === */
@media (min-width: 901px) {
  .okla-strip { padding-top: 22px; }
  .okla-strip__phone { font-size: 17px; gap: 12px; padding: 6px 0; }
  .okla-strip__phone svg { width: 17px; height: 17px; }
  .okla-strip__right { gap: 20px; }
  .theme-toggle { width: 40px; height: 40px; }
  .theme-toggle svg { width: 18px; height: 18px; }
  .lang-toggle, .lang-toggle__btn { font-size: 15px; }
  .lang-toggle__btn { padding: 6px 12px; }
}

/* Desktop: bigger hero eyebrow */
@media (min-width: 901px) {
  .hero .eyebrow { font-size: 16px; letter-spacing: 0.22em; }
  .hero .eyebrow::before { width: 32px; }
}

/* Light theme used to swap in a warm, near-transparent wash here, which left the video
   bright and forced near-black hero text. The service heroes carry one dark overlay in both
   themes, so the homepage now does the same: the overlay and the video treatment are
   inherited from the dark rules, and the hero text stays cream (Ahmad 2026-07-26). */
[data-theme="light"] .hero .hero__title {
  color: #f5efe4;
}
/* The stat bar is NOT included: it sits at the foot of the hero where the overlay has
   faded out into the page background, which is light in this theme (measured backdrop
   luminance 0.63). Cream there scores 1.4:1; the page's default ink scores 11.4:1. */

/* Smaller hero H1 (overrides .h-mega for hero only) */
.hero .hero__title {
  font-size: clamp(40px, 5.5vw, 88px);
  line-height: 0.96;
  letter-spacing: -0.025em;
}

/* Hero page titles: fixed 90px on desktop (Ahmad 2026-07-20) */
@media (min-width: 769px) {
  .h-mega,
  .hero .hero__title,
  .svc-hero .svc-hero__title { font-size: 90px; }
}

/* Hero eyebrow: white in both themes (Ahmad 2026-07-23) */
.hero .eyebrow {
  color: #fff;
}
[data-theme="light"] .hero .eyebrow {
  color: #fff;
  font-weight: 600;
}

/* Hero intro paragraph: white in light theme too. It sits over the hero video, where the
   default dim ink disappears against the darker frames (Ahmad 2026-07-26). */
[data-theme="light"] .hero .hero__sub {
  color: #fff;
}

/* Same reason for the hero's secondary button: its default hairline and label are dark
   ink, which vanish into the video. White outline and label in light theme, held white on
   hover so they do not snap back to dark (Ahmad 2026-07-26). */
[data-theme="light"] .hero .hero__actions .btn--ghost,
[data-theme="light"] .hero .hero__actions .btn--ghost:hover {
  border-color: #fff;
  color: #fff;
}

/* Desktop: dropdown caret next to "Services" so the hover affordance is visible.
   Inline strip only — submenu items inside the mega-menu don't get the caret. */
/* The caret is a real inline <svg> in the SiteNav markup (.pillnav__caret) —
   immune to the CSS-minifier mangling that broke an earlier mask approach.
   Hidden by default; only the desktop hover strip shows it. */
.pillnav__caret { display: none; }
@media (min-width: 901px) and (hover: hover) {
  .pillnav__bar .pillnav__link[href="#services"] .pillnav__caret {
    display: inline-block;
    margin-left: 7px;
    vertical-align: middle;
    opacity: 0.9;
    transition: transform 200ms var(--pillnav-ease, ease), opacity 200ms ease;
  }
  .pillnav__bar .pillnav__link[href="#services"]:hover .pillnav__caret { opacity: 1; }
  .pillnav[data-pillnav-open="true"] .pillnav__bar .pillnav__link[href="#services"] .pillnav__caret {
    transform: rotate(180deg);
    opacity: 1;
  }
}

/* Dark mode: lighter hero overlay + brighter video so the footage shows through.
   The H1 is light cream on a still-dim left third (radial), so contrast remains
   readable while the right two-thirds of the frame is fully visible. */
[data-theme="dark"] .hero .hero__bg-img,
.hero .hero__bg-img {
  background:
    radial-gradient(60% 80% at 25% 50%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.20) 60%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(11,11,12,0) 0%, rgba(11,11,12,0.25) 100%);
}
.hero__bg-video {
  filter: saturate(0.92) contrast(1.04) brightness(0.85);
}

/* === Right-edge sticky CTA rail (desktop only) === */
.sticky-cta {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 168px;
  z-index: 90;
  pointer-events: none;
}
.sticky-cta-btn {
  pointer-events: auto;
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  gap: 0;
  height: 52px;
  width: 44px;
  padding: 0;
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  background: rgba(20, 20, 21, 0.55);
  border: 1px solid rgba(255, 167, 38, 0.22);
  border-right: none;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: -2px 6px 18px rgba(0, 0, 0, 0.35);
  color: var(--accent);
  transition: width 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 220ms ease,
              background 220ms ease,
              border-color 220ms ease;
}
.sticky-cta-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 50%, rgba(255,167,38,0.06) 100%);
  pointer-events: none;
}
.sticky-cta-1 { top: 0; }
.sticky-cta-2 { top: 58px; }
.sticky-cta-3 { top: 116px; }
.sticky-cta-btn:hover,
.sticky-cta-btn:focus-visible {
  width: 220px;
  background: rgba(20, 20, 21, 0.75);
  border-color: rgba(255, 167, 38, 0.5);
  box-shadow: -6px 10px 28px rgba(0, 0, 0, 0.55);
  outline: none;
}
.sticky-cta-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sticky-cta-icon svg {
  width: 18px;
  height: 18px;
}
.sticky-cta-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-right: 16px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 180ms ease 60ms, transform 220ms ease 60ms;
  line-height: 1.15;
  color: var(--ink);
}
.sticky-cta-btn:hover .sticky-cta-text,
.sticky-cta-btn:focus-visible .sticky-cta-text {
  opacity: 1;
  transform: translateX(0);
}
.sticky-cta-label {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
@media (max-width: 768px) { .sticky-cta-label { font-size: 17px; } }
.sticky-cta-sub {
  font-family: var(--mono);
  /* 13px is the absolute floor (sites-0483); do not take this below it. */
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.7;
  margin-top: 2px;
}

/* Light-theme variant */
[data-theme="light"] .sticky-cta-btn {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(24, 23, 21, 0.10);
  box-shadow: -2px 6px 18px rgba(0, 0, 0, 0.10);
}
[data-theme="light"] .sticky-cta-btn:hover,
[data-theme="light"] .sticky-cta-btn:focus-visible {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 122, 24, 0.40);
}

/* Mobile: hide the rail entirely — GHL chat bubble already lives bottom-right,
   and a fixed rail at the right edge would crowd the viewport on phones. */
@media (max-width: 900px) {
  .sticky-cta { display: none; }
}

/* Section eyebrows now stand alone as section titles (numbers were stripped).
   Bumping their size so they read as titles, not micro-labels. */
.eyebrow {
  font-size: 16px;
  letter-spacing: 0.22em;
  gap: 12px;
}
@media (max-width: 768px) { .eyebrow { font-size: 16px; } }
.eyebrow::before {
  width: 32px;
  height: 2px;
}
@media (min-width: 901px) {
  .eyebrow {
    font-size: 16px;
    letter-spacing: 0.20em;
    gap: 14px;
  }
  .eyebrow::before {
    width: 40px;
    height: 2px;
  }
  /* Keep hero eyebrow at its previously-set 14px so the small line stays subtle next to the H1. */
  .hero .eyebrow {
    font-size: 16px;
    letter-spacing: 0.22em;
  }
  .hero .eyebrow::before {
    width: 32px;
    height: 1px;
  }
}
/* Mobile/tablet: section eyebrows match desktop's 18px title treatment, semibold.
   Hero eyebrow keeps its subtle 14px, same exception as the desktop block above. */
@media (max-width: 900px) {
  .eyebrow {
    font-size: 18px;
    font-weight: 600;
  }
  .hero .eyebrow {
    font-size: 18px;
    font-weight: inherit;
  }
  @media (max-width: 768px) { .hero .eyebrow { font-size: 16px; } }
}

/* === Final override: hide decorative eyebrow dashes site-wide === */
.eyebrow::before,
.eyebrow::after {
  display: none !important;
}
.eyebrow {
  gap: 0 !important;
}

/* ==========================================================
   Featured Work — scroll-pinned accordion (sites-0226)
   Four cards expand in place as the user scrolls. Each card
   carries a real install photo + title + bullets + CTA.
   Adapted from a generic pricing-accordion reference to
   Okla's dark + amber palette.
   ========================================================== */

.pkg { position: relative; background: var(--bg); color: var(--ink); }
.pkg__content {
  position: relative;
  --phases: 4;
  min-height: calc(var(--phases) * 100svh);
}
.pkg__sticky {
  top: 0;
  position: sticky;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: clamp(40px, 6vw, 72px);
  gap: clamp(24px, 3vw, 40px);
}
.pkg__header {
  padding: 0 var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
}
.pkg__header .eyebrow { margin-bottom: 18px; }
.pkg__header h2 {
  font-family: var(--display);
  font-size: clamp(32px, 4.5vw, 72px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.0;
  margin: 0;
  max-width: 14ch;
  text-wrap: balance;
}
.pkg__header h2 em {
  font-style: normal;
  background: linear-gradient(110deg, var(--accent-light), var(--accent), var(--accent-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pkg__scroller {
  flex-shrink: 0;
  flex-grow: 10;
  height: 100%;
  max-height: 64svh;
  min-height: 560px;
  display: grid;
  overflow-x: hidden;
  position: relative;
}

.pkg__list {
  position: absolute;
  right: 0;
  height: 100%;
  padding: 0 var(--gutter) 0 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: flex-end;
  will-change: transform;
  --card-compact: clamp(200px, 16vw, 300px);
  --card-expanded: min(960px, calc(100vw - 3 * var(--card-compact) - 4rem));
  --col-left: clamp(320px, 30vw, 520px);
}

.pkg__item {
  position: relative;
  flex-shrink: 0;
  height: calc(100% - 8px);
  border-radius: 18px;
  overflow: hidden;
  list-style: none;
  --exp: 0;
  width: calc(var(--card-compact) + var(--exp) * (var(--card-expanded) - var(--card-compact)));
  will-change: width;
  border: 1px solid rgba(255, 167, 38, 0.18);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* Amber-toned gradient progression across the 4 cards, all readable in dark
   and light theme because the title block has a darkening overlay. */
.pkg__item--0 { background: linear-gradient(135deg, #1a1612 0%, #2a2018 100%); }
.pkg__item--1 { background: linear-gradient(135deg, #2a2018 0%, #4a3018 100%); }
.pkg__item--2 { background: linear-gradient(135deg, #4a3018 0%, #6a4020 100%); }
.pkg__item--3 { background: linear-gradient(135deg, #6a4020 0%, #ff7a18 100%); }

/* Compact column: always-visible left strip with title + meta.
   Width matches --card-compact so the title block exactly fills a collapsed card. */
.pkg__compact {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--card-compact);
  height: 100%;
  padding: clamp(20px, 1.8vw, 32px);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  z-index: 3;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.pkg__num {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FFD54F;
  opacity: 0.85;
}
@media (max-width: 768px) { .pkg__num { font-size: 16px; } }
.pkg__title {
  font-family: var(--display);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 8px 0 0;
  color: var(--ink);
}
.pkg__meta {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.04em;
  opacity: 0.85;
  margin: 0;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .pkg__meta { font-size: 18px; } }

/* Image fills the left half of the expanded card. Scales in from bottom-left.
   Sits behind the title overlay (z-1) and below the details panel (z-2). */
.pkg__image {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--col-left);
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 1;
  transform: scale(min(1, var(--exp) * 1.7)); /* reach full scale by ~--exp 0.59 — image is fully grown before the card drifts/clips left */
  transform-origin: left bottom;
  will-change: transform;
}
.pkg__image::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Top + bottom scrims keep the compact title (top) AND the meta line
     (bottom) legible over any photo; light mid tint keeps the image visible. */
  background:
    linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.18) 40%, rgba(0,0,0,0.18) 60%, rgba(0,0,0,0.62) 100%),
    linear-gradient(90deg, rgba(0,0,0,0) 70%, rgba(0,0,0,0.40) 100%);
}

/* Details panel: right column of the expanded card. */
.pkg__details {
  position: absolute;
  top: 0;
  left: var(--col-left);
  width: calc(var(--card-expanded) - var(--col-left));
  height: 100%;
  padding: clamp(22px, 2vw, 36px);
  color: var(--ink);
  z-index: 2;
  opacity: var(--exp);
  transform: translateX(calc((1 - var(--exp)) * -16px));
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 22px);
  overflow: hidden;
}
.pkg__details h4 {
  font-family: var(--display);
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 600;
  margin: 0 0 14px;
  line-height: 1.25;
  color: var(--ink);
}
@media (max-width: 768px) { .pkg__details h4 { font-size: 20px; } }
.pkg__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .pkg__bullets { font-size: 16px; } }
.pkg__bullets li::before {
  content: "✓ ";
  color: var(--accent);
  font-weight: 700;
  margin-right: 4px;
}
.pkg__copy {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0;
}
@media (max-width: 768px) { .pkg__copy { font-size: 18px; } }
.pkg__cta {
  align-self: flex-end;
  margin-top: auto;
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  pointer-events: auto;
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  box-shadow: 0 4px 16px rgba(255, 167, 38, 0.18);
}
@media (max-width: 768px) { .pkg__cta { font-size: 16px; } }
.pkg__cta::after {
  content: "→";
  transition: transform 200ms ease;
}
.pkg__cta:hover {
  background: var(--accent-light);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(255, 167, 38, 0.28);
}
.pkg__cta:hover::after { transform: translateX(4px); }

/* Reduced motion: lock cards open + drop the long pinned scroll. */
@media (prefers-reduced-motion: reduce) {
  .pkg__content { min-height: auto; }
  .pkg__sticky { position: static; min-height: auto; }
  .pkg__scroller { max-height: none; min-height: 0; overflow: visible; }
  .pkg__list { position: static; flex-direction: column; gap: 16px; }
  .pkg__item { --exp: 1 !important; width: 100% !important; height: auto !important; }
  .pkg__image { transform: none !important; position: relative; height: 220px; width: 100%; }
  .pkg__compact { position: relative; width: 100%; height: auto; }
  .pkg__details { position: relative; width: 100%; left: 0; height: auto; opacity: 1 !important; }
}

/* Mobile / small tablet (≤ 1199px): vertical poster stack, no pin. */
@media (max-width: 1199px) {
  .pkg__content { min-height: auto; }
  .pkg__sticky {
    position: static;
    min-height: auto;
    padding-top: clamp(40px, 8vw, 64px);
    padding-bottom: clamp(40px, 8vw, 64px);
    gap: 28px;
  }
  .pkg__scroller {
    flex-shrink: 1;
    flex-grow: 0;
    height: auto;
    max-height: none;
    min-height: 0;
    display: block;
    overflow: visible;
    padding: 0 var(--gutter);
  }
  .pkg__list {
    position: static;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    --card-compact: 100%;
    --card-expanded: 100%;
  }
  .pkg__item {
    --exp: 1 !important;
    width: 100% !important;
    height: auto !important;
    display: block;
    position: relative;
    min-height: auto;
  }
  .pkg__image {
    position: relative;
    width: 100%;
    height: 240px;
    transform: none !important;
  }
  .pkg__image::after {
    background: linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.18) 42%, rgba(0,0,0,0.18) 58%, rgba(0,0,0,0.62) 100%);
  }
  .pkg__compact {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 240px;
    padding: 20px 22px;
    justify-content: space-between;
    z-index: 3;
  }
  .pkg__title { font-size: clamp(24px, 6vw, 32px); }
  @media (max-width: 768px) { .pkg__title { font-size: 22px; font-weight: 600; } }
  .pkg__meta { font-size: 18px; }
  @media (max-width: 768px) { .pkg__meta { font-size: 18px; } }
  .pkg__details {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    padding: 22px;
    opacity: 1 !important;
    transform: none !important;
    gap: 14px;
  }
  .pkg__cta {
    align-self: stretch;
    justify-content: center;
    width: 100%;
    padding: 14px 22px;
    font-size: 15px;
  }
  @media (max-width: 768px) { .pkg__cta { font-size: 17px; } }
}

@media (max-width: 480px) {
  .pkg__image { height: 200px; }
  .pkg__compact { height: 200px; padding: 18px 18px 16px; }
  .pkg__details { padding: 18px; }
}

/* Footer contrast fix + font-size floor (sites-0225 compliance) */
.footer__col h5 {
  color: var(--ink) !important;
  font-size: 16px !important;
  font-weight: 600;
}
@media (max-width: 768px) { .footer__col h5 { font-size: 18px !important; font-weight: 700; } }
@media (min-width: 901px) {
  .footer__col h5 { font-size: 16px !important; letter-spacing: 0.18em; }
}
.footer__col li a,
.footer__contact-line,
.footer__col p {
  color: var(--ink) !important;
  opacity: 0.92;
}
.footer__col li a:hover {
  color: var(--accent) !important;
  opacity: 1;
}
.footer__bottom { color: var(--ink-dim); font-size: 14px; }
@media (max-width: 768px) { .footer__bottom { font-size: 14px; } }
@media (min-width: 901px) {
  .footer__bottom { font-size: 14px; }
}
.footer__bottom a { color: var(--ink) !important; opacity: 0.85; }
.footer__bottom a:hover { color: var(--accent) !important; opacity: 1; }

/* Add breathing room under the pinned Featured Work section so the next section does not slam under the last card. */
.pkg { padding-bottom: clamp(104px, 12vw, 200px); }

/* === Featured Work cards: force readable text on the always-dark
   default gradients used in the dark theme baseline. === */
.pkg__compact .pkg__title,
.pkg__compact .pkg__meta,
.pkg__details h4,
.pkg__copy,
.pkg__bullets {
  color: #f5efe4;
}
.pkg__bullets { color: rgba(245, 239, 228, 0.85); }
.pkg__copy { color: rgba(245, 239, 228, 0.78); }
.pkg__compact .pkg__meta { color: #fff; }

/* Featured Work pinned sticky: add bottom breathing room so the cards do not park flush against the bottom of the viewport during scroll. */
.pkg__sticky { padding-bottom: clamp(48px, 6vw, 96px); }
.pkg__scroller { max-height: 58svh; }

/* === Featured Work height + shadow fix ===
   - Scroller keeps the original tall card height.
   - Sticky leaves a 96px gap at the bottom of the viewport.
   - max-width on the headline cleared so it can sit on one line.
   - padding-bottom on the scroller gives the cards box-shadow room INSIDE
     the overflow-x clip rect (otherwise it gets cropped).
   - z-index lifts the whole pinned section above the section below so the
     cards' box-shadow paints on top of the next section's background
     instead of being hidden by it.
*/
.pkg__header h2 { max-width: none; }
.pkg__sticky { min-height: calc(100svh - 96px); max-height: calc(100svh - 96px); }
.pkg__scroller {
  max-height: 64svh;
  min-height: 480px;
  padding-bottom: 28px;
}
.pkg { position: relative; z-index: 2; }
.pkg + section, .pkg + .why { position: relative; z-index: 1; }

/* Real shadow fix: overflow-x: clip + overflow-y: visible lets the cards
   box-shadow paint BELOW the scroller box (overflow-x: hidden clips both
   axes). The scroller still hides any horizontal stickout from the
   accordion animation, but vertical shadow now escapes. */
.pkg__scroller {
  overflow-x: clip;
  overflow-y: visible;
  padding-bottom: 56px;
}

/* Stronger card shadow so it actually reads on the cream surface. */
.pkg__item {
  box-shadow:
    0 24px 48px -8px rgba(0, 0, 0, 0.45),
    0 8px 16px -4px rgba(0, 0, 0, 0.25);
}

/* Mobile/tablet bleed fix (2026-06-29): the desktop "height + shadow fix"
   rules above are NOT breakpoint-scoped, so their svh max-heights + sticky
   100svh leaked into tablet/mobile, capping .pkg__scroller far shorter than
   the ~2100px stacked cards. With overflow-y:visible the cards spilled below
   the .pkg box and overlapped #why/#areas, which showed through the gaps
   between cards. Re-assert auto heights here so the scroller grows to fit. */
@media (max-width: 1199px) {
  .pkg__sticky { min-height: auto; max-height: none; }
  .pkg__scroller { max-height: none; min-height: 0; height: auto; }
}

/* === Title sizing pass: cap every section title at 1-2 rendered lines.
   Section heads get a 2:1 grid so titles have 2/3 of the width to wrap
   into; h-xl + h-lg get a smaller desktop max so 96px doesn't blow past
   the column on long phrases. */
@media (min-width: 1200px) {
  .section__head { grid-template-columns: 2fr 1fr; }
  .h-xl { font-size: clamp(48px, 4vw, 64px); }
  .h-lg { font-size: clamp(32px, 3vw, 44px); }
}
.section__title { text-wrap: balance; }

/* Reviews iframe has internal top padding from the GHL widget. Pull the
   whole wrapper up with a negative margin so the cards sit closer to the
   title without affecting the structural gap of section__head. */
.ghl-reviews-wrap { margin-top: -80px; }
/* On mobile the widget renders single-column with almost no internal top
   padding, so the desktop pull-up swallowed the gap under the section head.
   Restore breathing room between the lede and the first review card. */
@media (max-width: 768px) { .ghl-reviews-wrap { margin-top: 0; } }

/* Footer newsletter signup (footer Contact column) */
.footer__news { margin-top: 28px; }
.footer__news h5 {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}
@media (max-width: 768px) { .footer__news h5 { font-size: 18px; font-weight: 700; } }
.footer__news-blurb {
  color: var(--ink-dim);
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 14px;
  max-width: 32ch;
}
@media (max-width: 768px) { .footer__news-blurb { font-size: 18px; } }
.footer__news-form {
  display: flex;
  align-items: stretch;
  gap: 8px;
  max-width: 320px;
}
.footer__news-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid var(--line-2, var(--line));
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 16px;
  color: var(--ink);
  font-family: inherit;
  transition: border-color .2s ease;
}
@media (max-width: 768px) { .footer__news-input { font-size: 16px; } }
.footer__news-input::placeholder { color: var(--ink-placeholder); }
.footer__news-input:focus { outline: none; border-color: var(--accent); }
.footer__news-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.footer__news-btn:hover:not(:disabled) { background: var(--accent-light); transform: translateY(-1px); }
.footer__news-btn:disabled { opacity: .6; cursor: default; }
.footer__news-thanks { color: var(--accent); font-size: 16px; line-height: 1.5; margin: 14px 0 0; max-width: 32ch; }
@media (max-width: 768px) { .footer__news-thanks { font-size: 16px; } }
.footer__news-error { color: #e5484d; font-size: 16px; line-height: 1.4; margin: 8px 0 0; }
@media (max-width: 768px) { .footer__news-error { font-size: 16px; } }


/* Short desktops / small laptops: give the pinned Featured Work cards more
   room so Project 4's CTA isn't crowded. Reclaims the wasted bottom gap +
   bottom padding. Stays within 100svh so it always fits vertically. */
@media (min-width: 1200px) and (max-height: 880px) {
  .pkg__sticky {
    min-height: calc(100svh - 16px);
    max-height: calc(100svh - 16px);
    padding-bottom: clamp(18px, 2.6vh, 40px);
    gap: clamp(14px, 2vh, 28px);
  }
  .pkg__scroller { max-height: 86svh; }
  .pkg__details { padding: clamp(16px, 2vh, 26px); gap: clamp(10px, 1.3vh, 16px); }
  .pkg__bullets { gap: 6px; line-height: 1.34; }
  .pkg__copy { line-height: 1.42; }
}

/* =========================================================
   Footer layout v2 — equal-height 4-column band (shared <Footer />)
   Stretches all four columns to the tallest; the two short columns
   pin their secondary block (Get-a-quote / Follow) to the floor so
   nothing spills below the band and there is no empty void.
   ========================================================= */
.footer__top { align-items: stretch; }

.footer__col--contact,
.footer__col--connect {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}

/* Newsletter is the first child of the Connect column — drop its stacked top margin */
.footer__col--connect .footer__news { margin-top: 0; }

/* Follow block sits at the column floor; reuse the column's h5/ul/link styling */
.footer__follow { margin: 0; }

/* Hours block follows the contact list inside the same stack; match the column gap */
.footer__hours { margin-top: 28px; }

/* Get-a-quote keeps its natural pill width instead of stretching full column */
.footer__col--contact .footer__cta { align-self: flex-start; margin-top: 0; }

/* When the grid collapses to one column, stack naturally (no floor-pinning) */
@media (max-width: 900px) {
  .footer__col--contact,
  .footer__col--connect { gap: 32px; }
}
@media (max-width: 640px) {
  .footer__col--contact,
  .footer__col--connect { justify-content: flex-start; gap: 24px; }
}

/* =========================================================
   Contact form — "Service needed" checkbox chips (was unstyled)
   Responsive flex-wrap of tappable pill chips; amber when checked.
   ========================================================= */
.service-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.service-chips label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  min-height: 44px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 16px;
  line-height: 1;
  color: var(--ink-dim);
  cursor: pointer;
  user-select: none;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
@media (max-width: 768px) { .service-chips label { font-size: 16px; } }
.service-chips label:hover { border-color: var(--accent); color: var(--ink); }
.service-chips input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex: none;
  margin: 0;
  border: 1.5px solid var(--line-2);
  border-radius: 6px;
  background: transparent;
  display: grid;
  place-content: center;
  transition: border-color .2s ease, background .2s ease;
}
.service-chips input[type="checkbox"]::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  transform: scale(0);
  transition: transform .15s ease;
  background: var(--accent);
}
.service-chips input[type="checkbox"]:checked { border-color: var(--accent); }
.service-chips input[type="checkbox"]:checked::after { transform: scale(1); }
.service-chips label:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--ink);
}
@media (max-width: 480px) {
  .service-chips { gap: 8px; }
  .service-chips label { padding: 10px 13px; font-size: 16px; }
}

/* =========================================================
   Mobile/tablet vertical rhythm — the base .section padding
   floors at 104px (clamp min) on all narrow screens, leaving
   ~200px gaps between sections on phones. Tighten it.
   ========================================================= */
@media (max-width: 900px) { .section { padding: 84px 0; } }
@media (max-width: 640px) { .section { padding: 60px 0; } }
@media (max-width: 400px) { .section { padding: 52px 0; } }

/* Section-rhythm parity (2026-06-29): About + Contact used plain .section
   (top AND bottom padding) on EVERY section, doubling the inter-section gap
   vs the homepage (which zeroes padding-top on each section after the first).
   Collapse padding-top on the 2nd+ .section of each page so spacing matches
   the homepage's single-padding rhythm. Keyed on shared classes -> EN + FR
   twins both inherit it. Placed after the .section rules so source order wins
   at every breakpoint (equal specificity). First content section
   (.contact-channels / .about-story) keeps its top padding for hero separation. */
.contact-form-section,
.contact-visit,
.contact-areas,
.about-values,
.about-creds,
/* The services pages close with an unnamed .section after .about-creds. Without this it
   kept its own top padding on top of the previous section's bottom padding, so that one
   boundary was 346px against the page's 173px everywhere else. */
.about-creds + .section,
.faq-still { padding-top: 0; }

/* ===== MOBILE FIX WAVE 1 (audit-driven: style sections the generator left unstyled) ===== */

/* ==================== about-page ==================== */
/* ============================================================
   ABOUT PAGE — sections rendered with markup but no CSS.
   All targeted classes confirmed unstyled in public/okla.css.
   Mobile-first; theme-aware via tokens only.
   ============================================================ */

/* ---- Story: orphan year tokens + side rail (app/about/page.tsx .story-grid / .story-side) ---- */
.about-story .story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
.about-story .story-text > p { margin: 0 0 1.1em; }
.about-story .story-text > p:last-child { margin-bottom: 0; }

.about-story .story-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  padding: clamp(20px, 4vw, 30px);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.about-story .story-side__year {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 6vw, 52px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--accent);
}
.about-story .story-side__divider {
  width: 100%;
  height: 1px;
  background: var(--line);
  margin: 2px 0;
}
.about-story .story-side__caption {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-dim);
  max-width: 40ch;
}
@media (max-width: 768px) { .about-story .story-side__caption { font-size: 16px; } }

/* ---- Values: six numbered rules with accent number + divider (.values-grid / .value / .value__num) ---- */
.about-values .values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}
.about-values .value {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(16px, 3vw, 28px);
  row-gap: 8px;
  align-items: start;
  padding: clamp(22px, 4vw, 34px) 0;
  border-bottom: 1px solid var(--line);
}
.about-values .value__num {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--accent);
  line-height: 1.6;
  grid-row: 1 / span 2;
}
@media (max-width: 768px) { .about-values .value__num { font-size: 20px; } }
.about-values .value h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.about-values .value p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 60ch;
}
@media (max-width: 768px) { .about-values .value p { font-size: 16px; } }  /* operator request 2026-07-12: about values copy reads better a notch smaller */
@media (min-width: 768px) {
  .about-values .values-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(32px, 5vw, 72px);
    border-top: none;
  }
  /* keep dividers between rows on desktop without doubling the outer edges */
  .about-values .value { border-bottom: 1px solid var(--line); }
}

/* ---- Team: crew roster as avatar + text cards (.team-grid / .team-card / __avatar / __name / __role / __bio / __years) ---- */
.about-team .team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.about-team .team-card {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 18px;
  row-gap: 4px;
  align-items: start;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  padding: clamp(18px, 3.5vw, 24px);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.about-team .team-card--lead {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.about-team .team-card__avatar {
  grid-row: 1 / span 4;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--ink);
  flex-shrink: 0;
}
@media (max-width: 768px) { .about-team .team-card__avatar { font-size: 18px; } }
.about-team .team-card--lead .team-card__avatar {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}
.about-team .team-card__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 21px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.about-team .team-card__role {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
@media (max-width: 768px) { .about-team .team-card__role { font-size: 16px; } }
.about-team .team-card__bio {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .about-team .team-card__bio { font-size: 16px; } }
.about-team .team-card__years {
  margin-top: 8px;
  display: inline-block;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint, var(--ink-dim));
}
@media (max-width: 768px) { .about-team .team-card__years { font-size: 16px; } }
@media (min-width: 768px) {
  .about-team .team-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
}

/* ---- Credentials: card shell + responsive tile grid (.creds-card / .creds-list / __label / __value) ---- */
.about-creds .creds-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 56px);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: clamp(24px, 5vw, 48px);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  align-items: start;
}
.about-creds .creds-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.about-creds .creds-list li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 16px 18px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.about-creds .creds-list__label {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .about-creds .creds-list__label { font-size: 16px; } }
.about-creds .creds-list__value {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}
@media (max-width: 768px) { .about-creds .creds-list__value { font-size: clamp(18px, 2vw, 19px); } }
@media (min-width: 600px) {
  .about-creds .creds-list { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .about-creds .creds-card { grid-template-columns: 0.9fr 1.1fr; }
  .about-creds .creds-list { grid-template-columns: 1fr 1fr 1fr; }
}

/* ---- Final CTA: stack + wrap so two pills never cram at 360px (.about-cta__inner / __actions) ---- */
.about-cta .about-cta__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: end;
}
.about-cta .about-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.about-cta .about-cta__actions .btn { flex: 1 1 auto; justify-content: center; }
@media (min-width: 600px) {
  .about-cta .about-cta__actions .btn { flex: 0 0 auto; }
}
@media (min-width: 768px) {
  .about-cta .about-cta__inner { grid-template-columns: 1fr auto; }
}

/* ==================== contact-page ==================== */
/* ============================================================
   CONTACT PAGE — fixes for unstyled generator markup
   (hours-list, contact-hero stats, channel-card)
   All three sections were emitted with class names but NO CSS,
   so they rendered as flat run-on text. Styled for all widths,
   refined on mobile.
   ============================================================ */

/* --- HIGH: Hours list — day left, time right (was "Monday7:00. 18:00") --- */
.hours-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.hours-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .hours-status { font-size: 16px; } }
.hours-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  overflow: hidden;
}
.hours-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
}
.hours-list li:last-child {
  border-bottom: 0;
}
.hours-list li > span:first-child {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .hours-list li > span:first-child { font-size: 16px; } }
.hours-list li > span:last-child {
  font-weight: 500;
  color: var(--ink);
  text-align: right;
}
.hours-list li.is-emergency {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.hours-list li.is-emergency > span:first-child,
.hours-list li.is-emergency > span:last-child {
  color: var(--accent);
  font-weight: 600;
}

/* --- MEDIUM: Hero live stats — distinct number + caption, gridded --- */
.contact-hero__live-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 20px;
}
@media (max-width: 768px) { .contact-hero__live-head { font-size: 16px; } }
.contact-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.contact-hero__num {
  font-family: var(--display, var(--sans));
  font-size: clamp(28px, 6vw, 40px);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}
.contact-hero__num small {
  font-size: 0.5em;
  font-weight: 500;
  color: var(--accent);
  margin-left: 1px;
}
.contact-hero__lbl {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  line-height: 1.3;
}
@media (max-width: 768px) { .contact-hero__lbl { font-size: 16px; } }

/* --- LOW: Channel cards — wrap icon/arrow rows into proper cards --- */
.channels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.channel-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  padding: clamp(20px, 4vw, 28px);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--bg-2);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.channel-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.channel-card--primary {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line-2));
}
.channel-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
}
.channel-card__label {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .channel-card__label { font-size: 16px; } }
.channel-card--primary .channel-card__label {
  color: var(--accent);
}
.channel-card__value {
  font-size: clamp(17px, 3vw, 20px);
  font-weight: 600;
  color: var(--ink);
  word-break: break-word;
}
.channel-card__meta {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .channel-card__meta { font-size: 16px; } }
.channel-card__arrow {
  position: absolute;
  top: clamp(20px, 4vw, 28px);
  right: clamp(20px, 4vw, 28px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--ink-dim);
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.channel-card:hover .channel-card__arrow {
  color: var(--accent);
  border-color: var(--accent);
  transform: translate(2px, -2px);
}
.channel-card__value,
.channel-card__meta {
  padding-right: 44px;
}

/* --- Mobile refinements --- */
@media (max-width: 768px) {
  .channels-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .contact-hero__stats {
    gap: 10px;
  }
  .hours-list li {
    padding: 14px 16px;
  }
}

/* ==================== ev-page ==================== */
/* ===== EV · Hardware charger lineup (was unstyled flat text) ===== */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(28px, 4vw, 48px);
}
.brand-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  padding: clamp(20px, 2.4vw, 28px);
  background: color-mix(in srgb, var(--accent) 3%, var(--bg-2));
}
.brand-card__name {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
@media (max-width: 768px) { .brand-card__name { font-size: 16px; } }
.brand-card__model {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 24px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 6px 0 18px;
  color: var(--ink);
}
.brand-card ul {
  list-style: none;
  margin: 0 0 14px;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.brand-card ul li {
  font-size: 16px;
  line-height: 1.35;
  color: var(--ink-dim);
  padding-left: 16px;
  position: relative;
}
@media (max-width: 768px) { .brand-card ul li { font-size: 16px; } }
.brand-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--accent);
}
.brand-card__tag {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 999px;
  padding: 6px 12px;
}
@media (max-width: 768px) { .brand-card__tag { font-size: 16px; } }

/* ===== EV · Pricing tiers (was unstyled run-on text) ===== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: clamp(28px, 4vw, 48px);
}
.price-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: clamp(22px, 2.6vw, 32px);
  background: var(--bg-2);
}
.price-card--featured {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-2));
}
.price-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 12px;
}
.price-card__head h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 24px);
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.price-card__head span {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .price-card__head span { font-size: 16px; } }
.price-card__price {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 3vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  margin: 16px 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.price-card__price small {
  font-size: 0.45em;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink-dim);
  margin-left: 4px;
}
.price-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.price-card ul li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .price-card ul li { font-size: 16px; } }
.price-card ul li strong {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
@media (max-width: 768px) { .price-card ul li strong { font-size: 16px; } }
.ev-pricing__note {
  margin-top: clamp(20px, 3vw, 32px);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 72ch;
}
@media (max-width: 768px) { .ev-pricing__note { font-size: 16px; } }

@media (max-width: 768px) {
  .brand-grid { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .brand-grid { grid-template-columns: 1fr; }
}

/* ==================== faq-page ==================== */
/* ============================================================
   FAQ PAGE — generator emitted markup with these class names but
   wrote NO CSS for them (confirmed 0 matches in okla.css). The
   page rendered as unstyled run-together text. Styled here for
   all widths (mobile-first) since nothing existed at any breakpoint.
   ============================================================ */

/* ---- Category facet row (HIGH): was one wall of run-together text.
   Markup (injected by faq.js):
   <div class="faq-cats__chips" id="faq-cat-chips">
     <button class="faq-cat-chip is-on" data-cat="..">All<span class="faq-cat-chip__count">24</span></button>
   <div class="faq-cats__meta" id="faq-count">24 questions</div>
   Styled as pill-chips to match .service-chips. ---- */
.faq-cats__wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.faq-cats__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}
.faq-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-dim);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
@media (max-width: 768px) { .faq-cat-chip { font-size: 16px; } }
.faq-cat-chip:hover { border-color: var(--accent); color: var(--ink); }
.faq-cat-chip__count {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: .04em;
  color: var(--ink-faint);
}
@media (max-width: 768px) { .faq-cat-chip__count { font-size: 16px; } }
.faq-cat-chip.is-on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--ink);
}
.faq-cat-chip.is-on .faq-cat-chip__count { color: var(--accent); }
.faq-cats__meta {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  white-space: nowrap;
  flex: none;
}
@media (max-width: 768px) { .faq-cats__meta { font-size: 16px; } }

/* ---- "Still have a question?" contact block (MEDIUM): label+value
   were glued ("24/7 Dispatch+1 438-815-9669"). Markup:
   <a class="still-channel"><div class="still-channel__icon">..</div>
     <div><span class="still-channel__label">24/7 Dispatch</span><strong>+1 438-815-9669</strong></div></a>
   Stack the rows; give the label its own line + mono caption styling. ---- */
.still-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: start;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-2) 60%, transparent);
}
.still-card__channels {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.still-channel {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 16px 20px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.still-channel:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.still-channel__icon {
  flex: none;
  display: grid;
  place-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  color: var(--accent);
}
.still-channel > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.still-channel__label {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .still-channel__label { font-size: 16px; } }
.still-channel > div:last-child strong {
  font-size: 16px;
  line-height: 1.2;
  color: var(--ink);
  word-break: break-word;
}
@media (max-width: 768px) { .still-channel > div:last-child strong { font-size: 18px; } }
.still-channel--primary {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
}
.still-channel--primary .still-channel__icon {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* ---- Responsive: stack contact card + tighten chips on mobile ---- */
@media (max-width: 768px) {
  .still-card {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
@media (max-width: 480px) {
  .faq-cats__wrap { gap: 12px; }
  .faq-cats__chips { gap: 8px; }
  .faq-cat-chip { padding: 10px 13px; font-size: 16px; }
}

/* ==================== blog-index-page ==================== */
/* ============================================================
   BLOG INDEX (app/blog/page.tsx + public/blog.js)
   Entire blog archive shipped with markup but ZERO CSS.
   All classes below confirmed unstyled (grep on okla.css = empty).
   Styled for all widths (was unstyled everywhere), refined at breakpoints.
   ============================================================ */

/* --- Hero ------------------------------------------------- */
.blog-hero { padding: clamp(96px, 12vw, 150px) 0 clamp(40px, 6vw, 72px); }
.blog-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: end;
  margin-top: clamp(20px, 4vw, 40px);
}
.blog-hero__title { margin: 12px 0 0; }
.blog-hero__side { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 28px); }
.blog-hero__sub { margin: 0; }

/* Search field — was clipped placeholder + odd light fill */
.blog-search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--ink-dim);
  transition: border-color .18s ease, background .18s ease;
}
.blog-search:focus-within { border-color: var(--accent); background: var(--bg); }
.blog-search svg { flex: none; color: var(--ink-dim); }
.blog-search input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  padding: 14px 0;
  border: 0;
  outline: none;
  background: none;
  color: var(--ink);
}
@media (max-width: 768px) { .blog-search input { font-size: 17px; } }
.blog-search input::placeholder { color: var(--ink-placeholder); }
.blog-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* --- Featured card --------------------------------------- */
.featured-card {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line-2);
  border-radius: 20px;
  padding: clamp(16px, 2.5vw, 24px);
  background: color-mix(in srgb, var(--bg-2) 60%, transparent);
  transition: border-color .2s ease, transform .2s ease;
}
.featured-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.featured-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-2);
}
.featured-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.featured-card__tag {
  position: absolute;
  left: 14px;
  top: 14px;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 7px 12px;
  border-radius: 999px;
}
@media (max-width: 768px) { .featured-card__tag { font-size: 16px; } }
.featured-card__body { display: flex; flex-direction: column; gap: 14px; }
.featured-card__title { margin: 0; }
.featured-card__sub { margin: 0; }
/* Meta was glued: "NOV 14, 2026 8 min read by Sophie Charron" */
.featured-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .featured-card__meta { font-size: 16px; } }
.featured-card__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex: none;
}
.featured-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
@media (max-width: 768px) { .featured-card__cta { font-size: 16px; } }
.featured-card:hover .featured-card__cta svg { transform: translate(2px, -2px); }
.featured-card__cta svg { transition: transform .2s ease; }

/* --- Filters / sort bar ---------------------------------- */
.blog-filters { padding: clamp(8px, 2vw, 16px) 0 0; }
.blog-filters__wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: clamp(24px, 4vw, 36px);
  border-bottom: 1px solid var(--line);
}
.blog-filters__group { display: flex; flex-direction: column; gap: 12px; min-width: 0; flex: 1; }
.blog-filters__label {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .blog-filters__label { font-size: 16px; } }
.blog-filters__chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* Category chips — were run-together plain text */
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
@media (max-width: 768px) { .cat-chip { font-size: 16px; } }
.cat-chip:hover { border-color: var(--ink); color: var(--ink); }
.cat-chip.is-on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--ink);
}
.cat-chip__count {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
@media (max-width: 768px) { .cat-chip__count { font-size: 16px; } }
.cat-chip.is-on .cat-chip__count { color: var(--accent); }

/* Sort select — was a bare empty white rectangle */
.blog-filters__sort { display: flex; flex-direction: column; gap: 12px; flex: none; }
.blog-filters__sort label {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .blog-filters__sort label { font-size: 16px; } }
#sort-select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 16px;
  min-height: 44px;
  padding: 0 38px 0 16px;
  color: var(--ink);
  background-color: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23999' fill='none' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  transition: border-color .16s ease;
}
@media (max-width: 768px) { #sort-select { font-size: 16px; } }
#sort-select:hover { border-color: var(--ink); }
#sort-select:focus-visible { outline: none; border-color: var(--accent); }
#sort-select option { color: var(--ink); background: var(--bg-2); }

/* --- Posts grid ------------------------------------------ */
.blog-posts { padding-top: clamp(40px, 6vw, 72px); }
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
}
.post-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  padding: 14px;
  background: color-mix(in srgb, var(--bg-2) 50%, transparent);
  transition: border-color .2s ease, transform .2s ease;
}
.post-card:hover { border-color: var(--accent); transform: translateY(-3px); }
/* Media was a giant ~600px-tall icon — constrain to a card aspect */
.post-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 11px;
  overflow: hidden;
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.post-card__media-graphic { display: flex; color: var(--accent); opacity: 0.85; }
.post-card__media-graphic svg { width: 56px; height: 56px; }
.post-card__cat {
  position: absolute;
  left: 12px;
  top: 12px;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border: 1px solid var(--line-2);
  padding: 6px 10px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
@media (max-width: 768px) { .post-card__cat { font-size: 16px; } }
.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 4px;
}
@media (max-width: 768px) { .post-card__meta { font-size: 16px; } }
.post-card__meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex: none;
}
.post-card__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
@media (max-width: 768px) { .post-card__title { font-size: 20px; } }
.post-card__excerpt {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0;
  flex: 1;
}
@media (max-width: 768px) { .post-card__excerpt { font-size: 18px; } }
/* Byline was "SC by Sophie Charron" glued — make initials an avatar mark */
.post-card__author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .post-card__author { font-size: 16px; } }
.post-card__author-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid var(--line-2);
  color: var(--accent);
  font-size: 16px;
  letter-spacing: 0.04em;
}
@media (max-width: 768px) { .post-card__author-mark { font-size: 16px; } }

/* --- Empty state + load-more ----------------------------- */
.posts-empty { padding: clamp(40px, 6vw, 64px) 0; text-align: center; }
.posts-empty .lede { margin-inline: auto; }
.posts-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: clamp(36px, 5vw, 56px);
}
.posts-cta .btn { min-height: 48px; }
.posts-cta__meta {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
@media (max-width: 768px) { .posts-cta__meta { font-size: 16px; } }

/* --- Responsive ------------------------------------------ */
@media (max-width: 1024px) {
  .posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .blog-hero__grid { grid-template-columns: 1fr; align-items: start; }
  .featured-card { grid-template-columns: 1fr; }
  .blog-filters__wrap { flex-direction: column; align-items: stretch; }
  .blog-filters__sort { width: 100%; }
  #sort-select { width: 100%; }
}
@media (max-width: 640px) {
  .posts-grid { grid-template-columns: 1fr; }
  .post-card__media-graphic svg { width: 48px; height: 48px; }
}

/* ==================== blog-post-shared ==================== */
/* ============================================================
   BLOG POST — shared components (panels + electrician-callouts)
   Generator emitted markup with these class names but no CSS.
   All selectors below confirmed UNSTYLED in okla.css (grep = 0).
   Shared helpers (.eyebrow .lede .h-md .h-xl .section__head
   .section__title) are already styled — NOT redefined here.
   ============================================================ */

/* --- Article byline: author name was glued to role --- */
.article__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 28px);
  margin-top: clamp(20px, 3vw, 28px);
}
.byline {
  display: flex;
  align-items: center;
  gap: 12px;
}
.byline__avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid var(--line-2);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (max-width: 768px) { .byline__avatar { font-size: 16px; } }
.byline__meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.3;
}
.byline__meta strong {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
@media (max-width: 768px) { .byline__meta strong { font-size: 17px; } }
.byline__meta small {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .byline__meta small { font-size: 16px; } }

/* --- Article stats: icon glued to value; give each its own row chip --- */
.article__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.article__stats span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  white-space: nowrap;
}
@media (max-width: 768px) { .article__stats span { font-size: 16px; } }
.article__stats span svg {
  flex: none;
  color: var(--accent);
}

/* --- Prose lists: browser-default markers + tight spacing fixed --- */
.prose ul,
.prose ol {
  margin: 1.1em 0;
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}
.prose li {
  line-height: 1.6;
  padding-left: 0.2em;
}
.prose ul li::marker {
  color: var(--accent);
}
.prose ol li::marker {
  color: var(--accent);
  font-family: var(--mono);
}

/* --- Checklist: <label> rows were inline, ran together with raw
   native-checkbox squares. Stack as bordered rows, hide native
   input, render .checklist__box as a real tappable amber box. --- */
.checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 1.4em 0;
}
.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 44px;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-2) 60%, transparent);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.checklist__item:hover {
  border-color: var(--accent);
}
.checklist__item input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.checklist__box {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border: 1.5px solid var(--line-2);
  border-radius: 7px;
  background: transparent;
  display: grid;
  place-items: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.checklist__box::after {
  content: "";
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--accent-ink);
  border-bottom: 2px solid var(--accent-ink);
  transform: rotate(-45deg) translateY(-1px) scale(0);
  transition: transform 0.15s ease;
}
.checklist__item input[type="checkbox"]:checked ~ .checklist__box {
  background: var(--accent);
  border-color: var(--accent);
}
.checklist__item input[type="checkbox"]:checked ~ .checklist__box::after {
  transform: rotate(-45deg) translateY(-1px) scale(1);
}
.checklist__item input[type="checkbox"]:focus-visible ~ .checklist__box {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.checklist__text {
  line-height: 1.5;
  color: var(--ink);
}

/* The author card is a ~250px byline strip, but it inherited the full-section rhythm
   (clamp(104px, 12vw, 200px) = 192px top AND bottom at desktop), leaving a void above
   and below it on every case study (operator request 2026-07-27). Tighter band here;
   the surrounding sections keep the normal section rhythm. */
.article-author { padding-top: clamp(28px, 3vw, 48px); padding-bottom: clamp(28px, 3vw, 48px); }
/* The related-articles section directly follows the byline strip, so its full 192px
   top padding re-opened the same void underneath the card. Trimmed to keep the
   article -> byline -> keep-reading sequence reading as one flow. */
.article-related { padding-top: clamp(36px, 4vw, 72px); }

/* --- Author card: bordered card; email link glued to "More articles" --- */
.author-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(18px, 3vw, 28px);
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
}
.author-card__avatar {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid var(--line-2);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.author-card__body {
  flex: 1 1 240px;
  min-width: 0;
}
.author-card__name {
  margin: 8px 0 6px;
}
.author-card__bio {
  margin: 0;
}
.author-card__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 16px;
}
.author-card__links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
@media (max-width: 768px) { .author-card__links a { font-size: 16px; } }
.author-card__links a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* --- Related articles: grid of bordered, tappable cards --- */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(14px, 2vw, 20px);
  margin-top: clamp(20px, 3vw, 32px);
}
.related-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(18px, 3vw, 24px);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.related-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.related-card__cat {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 5px 11px;
}
@media (max-width: 768px) { .related-card__cat { font-size: 16px; } }
.related-card__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
  flex: 1 1 auto;
}
/* Date + read-time meta: the <span class="dot"> separator collapsed
   to zero width, gluing "OCT 15, 202612 min". Render it + add gaps. */
.related-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .related-card__meta { font-size: 16px; } }
.related-card__meta .dot {
  flex: none;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink-faint);
}

/* --- Social share buttons: were 16x16; enlarge to >=44px tap target --- */
.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.share-buttons button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.share-buttons button:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.share-buttons button svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 768px) { .share-buttons button svg { width: 24px; height: 24px; } }

/* --- Mobile refinements --- */
@media (max-width: 768px) {
  .article__byline {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .author-card {
    gap: 16px;
  }
  .related-grid {
    grid-template-columns: 1fr;
  }
}

/* ==================== exit-popup-polish ==================== */
/* === exit-popup-polish === */
/* Primary CTA "Send my code": was 13px -> >=14px, ensure >=44px tap target */
.exit-popup__input-row .btn { font-size: 16px; min-height: 44px; padding: 12px 20px; }
@media (max-width: 768px) { .exit-popup__input-row .btn { font-size: 16px; } }

/* Close X: was 36px -> 44px tap target */
.exit-popup__close { width: 44px; height: 44px; }

/* Email input: was border:0 / ~37px tall -> >=44px with the bordered pill visibly framing it */
.exit-popup__input-row input { min-height: 44px; padding: 11px 18px; }

/* Voucher: was overflow:hidden, clipping the amber glow + bolt (scrollHeight>clientHeight).
   Free the decorative overflow; the card's own overflow:hidden + mask still contains it. */
.exit-popup__voucher { overflow: visible; }
.exit-popup__voucher-bolt { pointer-events: none; }

/* Mobile: keep the >=44px CTA when the row stacks vertically */
@media (max-width: 768px) {
  .exit-popup__input-row .btn { min-height: 46px; }
}

/* ==================== global-controls ==================== */
/* ===== Global controls - mobile tap-target enlargement (scoped <=900px so desktop min-width:901px rules untouched) ===== */
@media (max-width: 900px) {
  .theme-toggle {
    width: 44px;
    height: 44px;
    border-color: transparent;
    background: transparent;
    position: relative;
  }
  .theme-toggle::before {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 32px;
    height: 32px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    border: 1px solid var(--line-2);
    transition: border-color .2s ease, background .2s ease;
    pointer-events: none;
  }
  .theme-toggle svg { position: relative; z-index: 1; }
  .theme-toggle:hover::before {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
  }
  .lang-toggle__btn {
    min-height: 44px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
  }
  .footer__bottom a {
    display: inline-block;
    padding: 8px 6px;
    margin: -8px 0;
  }
}
/* ==================== faq-page sweep (wave 2) ==================== */
/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font: var(--mono);
  font-size: 16px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .breadcrumb { font-size: 16px; } }
.breadcrumb a { color: var(--ink-dim); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb__sep { color: var(--ink-faint); }
.breadcrumb__current { color: var(--ink); }

/* Hero (mirrors blog-hero sibling pattern; clears fixed pillnav) */
.faq-hero { padding: clamp(96px, 12vw, 150px) 0 clamp(40px, 6vw, 72px); }
.faq-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: end;
  margin-top: clamp(20px, 4vw, 40px);
}
.faq-hero__title { margin: 12px 0 0; }
.faq-hero__side { display: flex; flex-direction: column; gap: clamp(18px, 3vw, 26px); }

/* Categories rail wrapper (section border; inner wrap already styled in wave 1) */
.faq-cats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* FAQ list (accordion) */
.faq-section { padding-top: clamp(48px, 7vw, 88px); }
.faq-list { display: flex; flex-direction: column; }

.faq-list__item { border-top: 1px solid var(--line-2); }
.faq-list__item:last-child { border-bottom: 1px solid var(--line-2); }

.faq-list__btn {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 2.5vw, 20px);
  width: 100%;
  min-height: 44px;
  padding: clamp(18px, 3vw, 26px) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.faq-list__btn:hover .faq-list__btn-q { color: var(--accent); }

.faq-list__btn-num {
  flex: none;
  font: var(--mono);
  font-size: 16px;
  letter-spacing: .1em;
  color: var(--ink-faint);
  padding-top: 3px;
}
@media (max-width: 768px) { .faq-list__btn-num { font-size: 20px; } }

.faq-list__btn-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.faq-list__btn-cat {
  font: var(--mono);
  font-size: 16px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .faq-list__btn-cat { font-size: 16px; } }
.faq-list__btn-q {
  font-family: var(--display, var(--sans));
  font-size: clamp(16px, 3.4vw, 19px);
  line-height: 1.35;
  font-weight: 600;
  color: inherit;
  transition: color .18s ease;
}
@media (max-width: 768px) { .faq-list__btn-q { font-size: 20px; font-weight: 600; } }

.faq-list__btn-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-dim);
  transition: transform .25s ease, color .18s ease, border-color .18s ease, background-color .18s ease;
}
.faq-list__item.is-open .faq-list__btn-icon {
  transform: rotate(45deg);
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

/* Collapsible body via grid-rows technique */
.faq-list__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.faq-list__item.is-open .faq-list__body { grid-template-rows: 1fr; }
.faq-list__body > div { overflow: hidden; min-height: 0; }
.faq-list__answer {
  margin: 0;
  /* indent to align under the question, not the number */
  padding: 0 0 clamp(20px, 3vw, 28px) calc(clamp(12px, 2.5vw, 20px) + 2ch);
  max-width: 64ch;
  color: var(--ink-dim);
  font-size: 16px;
  line-height: 1.7;
}
@media (max-width: 768px) { .faq-list__answer { font-size: 17px; } }
.faq-list__answer a { color: var(--accent); }

/* Empty state */
.faq-empty {
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  text-align: center;
}

/* Mobile refinements */
@media (max-width: 720px) {
  .faq-hero__grid { grid-template-columns: 1fr; align-items: start; }
  .faq-list__answer { padding-left: 0; }
}

/* ============================================================
   ABOUT PAGE — systematic sweep (Wave 2)
   Classes emitted by the generator with NO CSS, rendering as
   flat run-on text on mobile. Confirmed unstyled via grep:
   about-hero, breadcrumb(+__sep/__current), about-hero__grid,
   about-hero__title, about-hero__sub, about-stats, stats-grid,
   stat-lbl, about-cta__title.
   Mobile-first; theme-aware tokens; tap targets >=44px.
   ============================================================ */

/* ---- Page hero ---- */
.about-hero {
  padding: clamp(96px, 16vw, 160px) 0 clamp(48px, 9vw, 80px);
  position: relative;
}

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(28px, 5vw, 44px);
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .breadcrumb { font-size: 16px; } }
.breadcrumb a {
  color: var(--ink-dim);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  transition: color 0.18s ease;
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb__sep { color: var(--ink-faint); }
.breadcrumb__current { color: var(--ink); }

.about-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 5vw, 40px);
  align-items: end;
}

.about-hero__title { margin: 14px 0 0; }
.about-hero__title em {
  font-style: normal;
  background: linear-gradient(110deg, var(--accent-light), var(--accent), var(--accent-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-hero__sub { margin: 0; max-width: 52ch; }

@media (min-width: 880px) {
  .about-hero__grid {
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(40px, 6vw, 88px);
  }
  .about-hero__sub { padding-bottom: 6px; }
}

/* ---- Stats band ---- */
.about-stats {
  padding: clamp(40px, 8vw, 72px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 5vw, 40px) clamp(16px, 4vw, 32px);
}
.stats-grid > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-lbl {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.45;
  color: var(--ink-dim);
  max-width: 22ch;
}
@media (max-width: 768px) { .stat-lbl { font-size: 16px; } }

@media (min-width: 720px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Final CTA heading ---- */
/* Top padding trimmed to a token amount: the section above already contributes the page's
   standard section gap, so the old clamp(80px,12vw,160px) doubled it to 309px against
   173px everywhere else. This lands the boundary on the page norm at both ends of the
   viewport range (Ahmad 2026-07-26). */
.about-cta { padding: clamp(24px, 2vw, 28px) 0 clamp(80px, 12vw, 160px); }
.about-cta__title { margin: 14px 0 0; }

/* ============================================================
   CONTACT PAGE — SYSTEMATIC SWEEP (Wave 2)
   Wave 1 styled: hours-list, contact-hero__stats/live-head/num/lbl,
   channels-grid, channel-card*. This sweep covers the rest that
   shipped with class names but NO CSS (flat text):
   breadcrumb, contact-hero shell/grid/title/sub/live,
   contact-form-wrap/side/checklist/form/field-row/actions/thanks,
   visit-grid/card/meta/hours wrapper/map, area-chips-grid.
   Mobile-first; theme-aware tokens; tap targets >= 44px.
   ============================================================ */

/* --- Hero shell (not a .section, needs its own rhythm) --- */
.contact-hero {
  padding: clamp(88px, 12vw, 150px) 0 clamp(48px, 7vw, 80px);
  position: relative;
}

/* --- Breadcrumb --- */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(28px, 5vw, 48px);
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@media (max-width: 768px) { .breadcrumb { font-size: 16px; } }
.breadcrumb a {
  color: var(--ink-dim);
  text-decoration: none;
  transition: color .2s ease;
}
.breadcrumb a:hover {
  color: var(--accent);
}
.breadcrumb__sep {
  color: var(--ink-faint);
}
.breadcrumb__current {
  color: var(--ink);
}

/* --- Hero grid: copy left, live panel right --- */
.contact-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
.contact-hero__title {
  margin-top: 18px;
}
.contact-hero__title em {
  font-style: italic;
  color: var(--accent);
}
.contact-hero__sub {
  margin-top: 20px;
  max-width: 56ch;
}

/* --- Hero live panel (card wrapping the Wave-1 stats) --- */
.contact-hero__live {
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: clamp(20px, 4vw, 30px);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}

/* ============================================================
   FORM SECTION
   ============================================================ */
.contact-form-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}

/* Intro/side column */
.contact-form-side {
  align-self: start;
}
.contact-checklist {
  margin-top: clamp(24px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-checklist > div {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .contact-checklist > div { font-size: 17px; } }
.contact-checklist svg {
  flex: none;
  color: var(--accent);
}

/* Form card */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: clamp(20px, 4vw, 32px);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.contact-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}
.contact-form__actions .btn {
  flex: none;
}
.contact-form__actions small {
  flex: 1 1 200px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-faint);
}
@media (max-width: 768px) { .contact-form__actions small { font-size: 16px; } }

/* Accessible field group + inline submission feedback. */
.contact-form__services {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.contact-form__legend {
  padding: 0;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.contact-form__error {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, #ef4444 55%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, #ef4444 10%, transparent);
  color: color-mix(in srgb, #ef4444 72%, var(--ink));
  font-size: 16px;
  line-height: 1.5;
}
.contact-form__error[hidden] { display: none; }
.contact-form[hidden],
.contact-form__thanks[hidden] { display: none !important; }
.contact-form[aria-busy="true"] { cursor: wait; }
.contact-form[aria-busy="true"] input,
.contact-form[aria-busy="true"] select,
.contact-form[aria-busy="true"] textarea,
.contact-form[aria-busy="true"] .service-chips { opacity: 0.65; }
.contact-form button:disabled { cursor: wait; opacity: 0.72; }
@media (max-width: 768px) {
  .contact-form__legend { font-size: 16px; }
  .contact-form__error { font-size: 16px; }
}

/* Thanks state (toggled via hidden attr) */
.contact-form__thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: clamp(32px, 6vw, 56px);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.thanks-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

/* ============================================================
   VISIT / OFFICE SECTION
   ============================================================ */
.visit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 28px);
}

/* Office card */
.visit-card {
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: clamp(24px, 4vw, 32px);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.visit-meta {
  margin-top: clamp(20px, 3vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.visit-meta > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 1rem;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.visit-meta > div:last-child {
  border-bottom: 0;
}
.visit-meta__label {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .visit-meta__label { font-size: 16px; } }
.visit-meta__value {
  text-align: right;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}
.visit-meta__value a {
  color: var(--ink);
  text-decoration: none;
  transition: color .2s ease;
}
.visit-meta__value a:hover {
  color: var(--accent);
}

/* Hours column (inner .hours-* already styled by Wave 1) */
.visit-hours {
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: clamp(24px, 4vw, 32px);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}

/* Map sketch */
.visit-map {
  position: relative;
  overflow: hidden;
  min-height: 240px;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: var(--bg-2);
}
.visit-map__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.visit-map__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  pointer-events: none;
}
.visit-map__pin {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.visit-map__pulse {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 40%, transparent);
  animation: pulse 2s infinite;
}
.visit-map__chip {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 8px 14px;
  backdrop-filter: blur(4px);
}
@media (max-width: 768px) { .visit-map__chip { font-size: 16px; } }

/* ============================================================
   SERVICE AREAS — chips already styled, only the grid was missing
   ============================================================ */
.area-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(28px, 4vw, 40px);
}

/* ============================================================
   DESKTOP — restore multi-column layouts (don't break desktop)
   ============================================================ */
@media (min-width: 880px) {
  .contact-hero__grid {
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
  }
  .contact-form-wrap {
    grid-template-columns: 0.9fr 1.1fr;
  }
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
  .visit-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
  .visit-map {
    grid-column: 1 / -1;
    min-height: 320px;
  }
}

/* ============================================================
   EV CHARGER PAGE — systematic mobile sweep (Wave 2)
   Mobile-first; desktop layouts gated behind min-width so the
   existing desktop render is never regressed.
   ============================================================ */

/* ---------- Service hero ---------- */
.svc-hero {
  padding: clamp(96px, 22vw, 140px) 0 clamp(48px, 9vw, 72px);
  position: relative;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font: var(--mono);
  font-size: 16px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: clamp(24px, 6vw, 40px);
}
@media (max-width: 768px) { .breadcrumb { font-size: 16px; } }
.breadcrumb a {
  color: var(--ink-dim);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb__sep { color: var(--ink-faint); }
.breadcrumb__current { color: var(--ink); }

.svc-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 8vw, 56px);
  align-items: center;
}

.svc-hero__title { margin: 14px 0 0; }
.svc-hero__title em {
  font-style: normal;
  color: var(--accent);
}
.svc-hero__sub { margin-top: 20px; max-width: 52ch; }

.svc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.svc-hero__actions .btn { flex: 1 1 auto; justify-content: center; }

.svc-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 3vw, 24px);
  margin-top: clamp(32px, 7vw, 48px);
  padding-top: clamp(24px, 5vw, 32px);
  border-top: 1px solid var(--line-2);
}
.svc-hero__num {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(22px, 6vw, 30px);
  line-height: 1;
  color: var(--ink);
}
.svc-hero__num span {
  font-size: .55em;
  color: var(--ink-dim);
  margin-left: 1px;
}
.svc-hero__lbl {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.35;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .svc-hero__lbl { font-size: 16px; } }

.svc-hero__right { min-width: 0; }
.svc-hero__media {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.svc-hero__media img {
  display: block;
  width: 100%;
  height: clamp(260px, 60vw, 440px);
  object-fit: cover;
}
.svc-hero__media-chip {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line-2);
  font: var(--mono);
  font-size: 16px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
@media (max-width: 768px) { .svc-hero__media-chip { font-size: 16px; } }
.svc-hero__readout {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.svc-hero__gauge {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line-2);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(18px, 5vw, 24px);
  line-height: 1;
  color: var(--accent);
}
.svc-hero__gauge--alt { color: var(--ink); }
.svc-hero__gauge small {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .svc-hero__gauge small { font-size: 16px; } }

@media (min-width: 900px) {
  .svc-hero__grid { grid-template-columns: 1.05fr .95fr; align-items: center; }
  .svc-hero__left { display: flex; flex-direction: column; justify-content: center; }
  .svc-hero__actions .btn { flex: 0 0 auto; }
  .svc-hero__media { height: auto; }
  .svc-hero__media img { height: clamp(420px, 40vw, 560px); min-height: 0; }
}

/* ---------- What's included checklist ---------- */
.ev-checklist {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 3vw, 20px);
}
.ev-check {
  border: 1px solid var(--line-2);
  border-radius: 16px;
  padding: clamp(20px, 4vw, 28px);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.ev-check__num {
  font: var(--mono);
  font-size: 16px;
  letter-spacing: .14em;
  color: var(--accent);
  margin-bottom: 12px;
}
@media (max-width: 768px) { .ev-check__num { font-size: 20px; } }
.ev-check h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(17px, 4vw, 20px);
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--ink);
}
@media (max-width: 768px) { .ev-check h3 { font-size: 20px; } }
.ev-check p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .ev-check p { font-size: 18px; } }

@media (min-width: 640px) {
  .ev-checklist { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .ev-checklist { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Rebate spotlight ---------- */
.rebate-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 6vw, 48px);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: clamp(24px, 6vw, 48px);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.rebate-card__left h2 { margin: 14px 0 0; }
.rebate-card__left h2 em { font-style: normal; color: var(--accent); }
.rebate-card__left .lede { margin-top: 18px; }
.rebate-card__left .btn { margin-top: 24px; }

.rebate-card__right {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.rebate-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: clamp(16px, 4vw, 22px) 0;
  border-top: 1px solid var(--line-2);
}
.rebate-stat:first-child { border-top: 0; }
.rebate-stat__num {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(28px, 8vw, 40px);
  line-height: 1;
  color: var(--accent);
}
.rebate-stat__lbl {
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .rebate-stat__lbl { font-size: 16px; } }

@media (min-width: 860px) {
  .rebate-card { grid-template-columns: 1.1fr .9fr; align-items: center; }
}

/* ---------- Process timeline ---------- */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: clamp(16px, 4vw, 24px);
}
.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--line-2);
}
.timeline li {
  position: relative;
  padding-left: 32px;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--bg);
}
.timeline__day {
  font: var(--mono);
  font-size: 16px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
@media (max-width: 768px) { .timeline__day { font-size: 16px; } }
.timeline h4 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(16px, 4vw, 19px);
  line-height: 1.25;
  margin: 0 0 6px;
  color: var(--ink);
}
@media (max-width: 768px) { .timeline h4 { font-size: clamp(18px, 4vw, 19px); } }
.timeline p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .timeline p { font-size: 16px; } }

@media (min-width: 900px) {
  .timeline {
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(16px, 2vw, 28px);
  }
  .timeline::before {
    left: 8px;
    right: 8px;
    top: 7px;
    bottom: auto;
    width: auto;
    height: 1px;
  }
  .timeline li { padding-left: 0; padding-top: 30px; }
  .timeline li::before { top: 0; left: 0; }
}

/* ---------- Final CTA ---------- */
.ev-cta {
  /* Keep the top padding: unlike the other CTA blocks, something in the section above
     this one extends past its own box, so removing it makes the two overlap. */
  padding: clamp(64px, 14vw, 120px) 0;
  position: relative;
}
.ev-cta__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 6vw, 40px);
  align-items: center;
  border: 1px solid var(--line-2);
  border-radius: 20px;
  padding: clamp(28px, 7vw, 56px);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.ev-cta__title { margin: 14px 0 0; }
.ev-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.ev-cta__actions .btn { flex: 1 1 auto; justify-content: center; }

@media (min-width: 820px) {
  .ev-cta__inner { grid-template-columns: 1.3fr .7fr; }
  .ev-cta__actions { flex-direction: column; align-items: stretch; }
  .ev-cta__actions .btn { flex: 0 0 auto; }
}

/* ============================================================
   BLOG POST — systematic mobile sweep (panels + electrician-callouts)
   All theme-token based; mobile-first; desktop scoped >=901px.
   ============================================================ */

/* ---- Article header ---- */
.article__head { padding: clamp(28px, 6vw, 56px) 0 clamp(20px, 4vw, 32px); }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font: 500 13px/1.4 var(--mono);
  letter-spacing: .04em;
  color: var(--ink-dim);
  margin-bottom: clamp(16px, 3vw, 24px);
}
.breadcrumb a { color: var(--ink-dim); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb__sep { color: var(--ink-faint); }
.breadcrumb__current { color: var(--ink); }

.article__cat {
  display: inline-block;
  font: 600 13px/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: clamp(14px, 2.5vw, 20px);
}

.article__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 8vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 clamp(14px, 3vw, 22px);
  max-width: 18ch;
}
.article__title em { color: var(--ink-dim); }

.article__deck {
  font-family: var(--sans);
  font-size: clamp(17px, 4.4vw, 22px);
  line-height: 1.5;
  color: var(--ink-dim);
  max-width: 56ch;
  margin: 0 0 clamp(24px, 5vw, 36px);
}

/* ---- Cover ---- */
.article__cover { padding: 0 0 clamp(28px, 6vw, 48px); }
.cover-figure { margin: 0; }
.cover-figure img {
  display: block; width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 560px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--line-2);
}
.cover-figure figcaption {
  margin-top: 12px;
  font: 500 13px/1.5 var(--mono);
  letter-spacing: .02em;
  color: var(--ink-dim);
}
@media (max-width: 768px) {
  .cover-figure img { aspect-ratio: 4 / 3; }
  .cover-figure figcaption { font-size: 16px; }
}

/* ---- Body layout: mobile single column, desktop sidebar + main ---- */
.article__body { padding-bottom: clamp(40px, 8vw, 72px); }
.article__layout { display: flex; flex-direction: column; gap: clamp(28px, 5vw, 40px); }

@media (min-width: 901px) {
  .article__layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: start;
  }
}

/* ---- Table of contents ---- */
.article-toc { min-width: 0; }
@media (min-width: 901px) {
  .article-toc__sticky { position: sticky; top: 96px; }
}
.article-toc__label {
  /* 13px absolute floor (sites-0483) — note this is the `font:` shorthand. */
  font: 600 13px/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 14px;
}
@media (max-width: 768px) { .article-toc__label { font-size: 18px; } }
.article-toc__list {
  list-style: none; margin: 0 0 clamp(24px, 4vw, 32px); padding: 0;
  display: flex; flex-direction: column; gap: 2px;
  border-left: 1px solid var(--line-2);
}
.article-toc__list li { margin: 0; }
.article-toc__list a {
  display: block;
  padding: 9px 0 9px 16px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font: 500 14px/1.35 var(--sans);
  color: var(--ink-dim);
  text-decoration: none;
  min-height: 38px;
}
@media (max-width: 768px) { .article-toc__list a { font-size: 22px; } }
.article-toc__list a:hover { color: var(--ink); }
.article-toc__list a.is-active {
  color: var(--accent);
  border-left-color: var(--accent);
}
.article-toc__share { /* uses existing .share-buttons styling for the row */ }

/* ---- Prose body typography (root cause: only li markers were styled) ---- */
.prose { max-width: 68ch; }
.prose > p {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 1.25em;
}
.prose > p:first-child { margin-top: 0; }
.prose h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 5vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: clamp(36px, 6vw, 56px) 0 0.6em;
  scroll-margin-top: 90px;
}
.prose h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(18px, 4vw, 22px);
  line-height: 1.25;
  color: var(--ink);
  margin: clamp(28px, 5vw, 40px) 0 0.5em;
  scroll-margin-top: 90px;
}
.prose a:not(.btn) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:not(.btn):hover { text-decoration-thickness: 2px; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose em { font-style: italic; }
/* list rhythm (markers already styled at .prose li) */
.prose ul, .prose ol { margin: 0 0 1.25em; }
.prose li { font-size: 17px; line-height: 1.6; }

/* ---- Callout boxes (TL;DR / quote / CTA) ---- */
.callout {
  border: 1px solid var(--line-2);
  border-radius: 16px;
  padding: clamp(20px, 4vw, 32px);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  margin: clamp(28px, 5vw, 40px) 0;
}
.callout__label {
  /* 13px absolute floor (sites-0483) — `font:` shorthand. */
  font: 600 13px/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
.callout p { margin: 0; }
.callout p + p { margin-top: 0.9em; }

/* TL;DR: accent-tinted summary */
.callout--tldr {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line-2));
}
.callout--tldr p {
  font-size: 17px; line-height: 1.65; color: var(--ink);
}

/* Pull-quote: larger, accent rule, icon */
.callout--quote {
  display: flex; gap: 16px; align-items: flex-start;
  border: none;
  border-left: 3px solid var(--accent);
  border-radius: 0;
  background: transparent;
  padding: 4px 0 4px clamp(16px, 4vw, 24px);
}
.callout--quote svg {
  flex: none;
  width: 22px; height: 22px;
  color: color-mix(in srgb, var(--accent) 70%, transparent);
  margin-top: 4px;
}
.callout--quote p {
  font-family: var(--display);
  font-size: clamp(19px, 4.6vw, 24px);
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
}

/* CTA callout: stacks on mobile, row on desktop */
.callout--cta {
  display: flex; flex-direction: column; gap: 20px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.callout--cta h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(19px, 4.6vw, 24px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 8px;
}
.callout--cta p {
  font-size: 16px; line-height: 1.55; color: var(--ink-dim);
}
@media (max-width: 768px) { .callout--cta p { font-size: 18px; } }
.callout--cta .btn { align-self: flex-start; }
@media (min-width: 640px) {
  .callout--cta {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: clamp(24px, 4vw, 40px);
  }
  .callout--cta .btn { align-self: center; flex: none; }
}

/* ---- Prose figure + SVG load-audit table ----
   The diagram is an inline <svg viewBox="0 0 800 360"> that squeezes to ~358px
   on phones and is illegible. Keep it at a legible min-width and let the
   container scroll horizontally, with a subtle scroll affordance. */
.prose__figure {
  margin: clamp(28px, 5vw, 40px) 0;
}
.prose__figure figcaption {
  margin-top: 12px;
  font: 500 13px/1.5 var(--mono);
  letter-spacing: .02em;
  color: var(--ink-dim);
}
.prose__diagram {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: clamp(16px, 4vw, 24px);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  /* subtle right-edge fade hints there is more to scroll on small screens */
  background-image: linear-gradient(
    to left,
    color-mix(in srgb, var(--accent) 6%, transparent),
    transparent 56px
  );
}
.prose__diagram svg {
  display: block;
  width: 100%;
  min-width: 560px;   /* keeps labels + values legible; container scrolls */
  height: auto;
}
/* thin scrollbar styling for the affordance */
.prose__diagram::-webkit-scrollbar { height: 6px; }
.prose__diagram::-webkit-scrollbar-track { background: transparent; }
.prose__diagram::-webkit-scrollbar-thumb {
  background: var(--line-2); border-radius: 3px;
}
.prose__diagram { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
@media (min-width: 720px) {
  /* enough room to show the full diagram, drop the scroll fade */
  .prose__diagram { background-image: none; }
}

/* ===== MOBILE FIX WAVE 2 (systematic sweep: remaining unstyled sections) ===== */

/* ========== WAVE2: contact ========== */
/* ============================================================
   CONTACT PAGE — SYSTEMATIC SWEEP (Wave 2)
   Wave 1 styled: hours-list, contact-hero__stats/live-head/num/lbl,
   channels-grid, channel-card*. This sweep covers the rest that
   shipped with class names but NO CSS (flat text):
   breadcrumb, contact-hero shell/grid/title/sub/live,
   contact-form-wrap/side/checklist/form/field-row/actions/thanks,
   visit-grid/card/meta/hours wrapper/map, area-chips-grid.
   Mobile-first; theme-aware tokens; tap targets >= 44px.
   ============================================================ */

/* --- Hero shell (not a .section, needs its own rhythm) --- */
.contact-hero {
  padding: clamp(88px, 12vw, 150px) 0 clamp(48px, 7vw, 80px);
  position: relative;
}

/* --- Breadcrumb --- */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(28px, 5vw, 48px);
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@media (max-width: 768px) { .breadcrumb { font-size: 16px; } }
.breadcrumb a {
  color: var(--ink-dim);
  text-decoration: none;
  transition: color .2s ease;
}
.breadcrumb a:hover {
  color: var(--accent);
}
.breadcrumb__sep {
  color: var(--ink-faint);
}
.breadcrumb__current {
  color: var(--ink);
}

/* --- Hero grid: copy left, live panel right --- */
.contact-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
.contact-hero__title {
  margin-top: 18px;
}
.contact-hero__title em {
  font-style: italic;
  color: var(--accent);
}
.contact-hero__sub {
  margin-top: 20px;
  max-width: 56ch;
}

/* --- Hero live panel (card wrapping the Wave-1 stats) --- */
.contact-hero__live {
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: clamp(20px, 4vw, 30px);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}

/* ============================================================
   FORM SECTION
   ============================================================ */
.contact-form-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}

/* Intro/side column */
.contact-form-side {
  align-self: start;
}
.contact-checklist {
  margin-top: clamp(24px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-checklist > div {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .contact-checklist > div { font-size: 17px; } }
.contact-checklist svg {
  flex: none;
  color: var(--accent);
}

/* Form card */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: clamp(20px, 4vw, 32px);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.contact-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}
.contact-form__actions .btn {
  flex: none;
}
.contact-form__actions small {
  flex: 1 1 200px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-faint);
}
@media (max-width: 768px) { .contact-form__actions small { font-size: 16px; } }

/* Thanks state (toggled via hidden attr) */
.contact-form__thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: clamp(32px, 6vw, 56px);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.thanks-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

/* ============================================================
   VISIT / OFFICE SECTION
   ============================================================ */
.visit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 28px);
}

/* Office card */
.visit-card {
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: clamp(24px, 4vw, 32px);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.visit-meta {
  margin-top: clamp(20px, 3vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.visit-meta > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 1rem;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.visit-meta > div:last-child {
  border-bottom: 0;
}
.visit-meta__label {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .visit-meta__label { font-size: 16px; } }
.visit-meta__value {
  text-align: right;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}
.visit-meta__value a {
  color: var(--ink);
  text-decoration: none;
  transition: color .2s ease;
}
.visit-meta__value a:hover {
  color: var(--accent);
}

/* Hours column (inner .hours-* already styled by Wave 1) */
.visit-hours {
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: clamp(24px, 4vw, 32px);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}

/* Map sketch */
.visit-map {
  position: relative;
  overflow: hidden;
  min-height: 240px;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: var(--bg-2);
}
.visit-map__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.visit-map__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  pointer-events: none;
}
.visit-map__pin {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.visit-map__pulse {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 40%, transparent);
  animation: pulse 2s infinite;
}
.visit-map__chip {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 8px 14px;
  backdrop-filter: blur(4px);
}
@media (max-width: 768px) { .visit-map__chip { font-size: 16px; } }

/* ============================================================
   SERVICE AREAS — chips already styled, only the grid was missing
   ============================================================ */
.area-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(28px, 4vw, 40px);
}

/* ============================================================
   DESKTOP — restore multi-column layouts (don't break desktop)
   ============================================================ */
@media (min-width: 880px) {
  .contact-hero__grid {
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
  }
  .contact-form-wrap {
    grid-template-columns: 0.9fr 1.1fr;
  }
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
  .visit-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
  .visit-map {
    grid-column: 1 / -1;
    min-height: 320px;
  }
}

/* ========== WAVE2: faq ========== */

/* ==================== faq-page sweep (wave 2) ==================== */
/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font: var(--mono);
  font-size: 16px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .breadcrumb { font-size: 16px; } }
.breadcrumb a { color: var(--ink-dim); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb__sep { color: var(--ink-faint); }
.breadcrumb__current { color: var(--ink); }

/* Hero (mirrors blog-hero sibling pattern; clears fixed pillnav) */
.faq-hero { padding: clamp(96px, 12vw, 150px) 0 clamp(40px, 6vw, 72px); }
.faq-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: end;
  margin-top: clamp(20px, 4vw, 40px);
}
.faq-hero__title { margin: 12px 0 0; }
.faq-hero__side { display: flex; flex-direction: column; gap: clamp(18px, 3vw, 26px); }

/* Categories rail wrapper (section border; inner wrap already styled in wave 1) */
.faq-cats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* FAQ list (accordion) */
.faq-section { padding-top: clamp(48px, 7vw, 88px); }
.faq-list { display: flex; flex-direction: column; }

.faq-list__item { border-top: 1px solid var(--line-2); }
.faq-list__item:last-child { border-bottom: 1px solid var(--line-2); }

.faq-list__btn {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 2.5vw, 20px);
  width: 100%;
  min-height: 44px;
  padding: clamp(18px, 3vw, 26px) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.faq-list__btn:hover .faq-list__btn-q { color: var(--accent); }

.faq-list__btn-num {
  flex: none;
  font: var(--mono);
  font-size: 16px;
  letter-spacing: .1em;
  color: var(--ink-faint);
  padding-top: 3px;
}
@media (max-width: 768px) { .faq-list__btn-num { font-size: 20px; } }

.faq-list__btn-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.faq-list__btn-cat {
  font: var(--mono);
  font-size: 16px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .faq-list__btn-cat { font-size: 16px; } }
.faq-list__btn-q {
  font-family: var(--display, var(--sans));
  font-size: clamp(16px, 3.4vw, 19px);
  line-height: 1.35;
  font-weight: 600;
  color: inherit;
  transition: color .18s ease;
}
@media (max-width: 768px) { .faq-list__btn-q { font-size: 20px; font-weight: 600; } }

.faq-list__btn-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-dim);
  transition: transform .25s ease, color .18s ease, border-color .18s ease, background-color .18s ease;
}
.faq-list__item.is-open .faq-list__btn-icon {
  transform: rotate(45deg);
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

/* Collapsible body via grid-rows technique */
.faq-list__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.faq-list__item.is-open .faq-list__body { grid-template-rows: 1fr; }
.faq-list__body > div { overflow: hidden; min-height: 0; }
.faq-list__answer {
  margin: 0;
  padding: 0 0 clamp(20px, 3vw, 28px) calc(clamp(12px, 2.5vw, 20px) + 2ch);
  max-width: 64ch;
  color: var(--ink-dim);
  font-size: 16px;
  line-height: 1.7;
}
@media (max-width: 768px) { .faq-list__answer { font-size: 17px; } }
.faq-list__answer a { color: var(--accent); }

/* Empty state */
.faq-empty {
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  text-align: center;
}

/* Mobile refinements */
@media (max-width: 720px) {
  .faq-hero__grid { grid-template-columns: 1fr; align-items: start; }
  .faq-list__answer { padding-left: 0; }
}


/* ========== WAVE2: ev ========== */

/* ============================================================
   EV CHARGER PAGE — systematic mobile sweep (Wave 2)
   Mobile-first; desktop layouts gated behind min-width so the
   existing desktop render is never regressed.
   ============================================================ */

/* ---------- Service hero ---------- */
.svc-hero {
  padding: clamp(96px, 22vw, 140px) 0 clamp(48px, 9vw, 72px);
  position: relative;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font: var(--mono);
  font-size: 16px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: clamp(24px, 6vw, 40px);
}
@media (max-width: 768px) { .breadcrumb { font-size: 16px; } }
.breadcrumb a {
  color: var(--ink-dim);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb__sep { color: var(--ink-faint); }
.breadcrumb__current { color: var(--ink); }

.svc-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 8vw, 56px);
  align-items: center;
}

.svc-hero__title { margin: 14px 0 0; }
.svc-hero__title em {
  font-style: normal;
  color: var(--accent);
}
.svc-hero__sub { margin-top: 20px; max-width: 52ch; }

.svc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.svc-hero__actions .btn { flex: 1 1 auto; justify-content: center; }

.svc-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 3vw, 24px);
  margin-top: clamp(32px, 7vw, 48px);
  padding-top: clamp(24px, 5vw, 32px);
  border-top: 1px solid var(--line-2);
}
.svc-hero__num {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(22px, 6vw, 30px);
  line-height: 1;
  color: var(--ink);
}
.svc-hero__num span {
  font-size: .55em;
  color: var(--ink-dim);
  margin-left: 1px;
}
.svc-hero__lbl {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.35;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .svc-hero__lbl { font-size: 16px; } }

.svc-hero__right { min-width: 0; }
.svc-hero__media {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.svc-hero__media img {
  display: block;
  width: 100%;
  height: clamp(260px, 60vw, 440px);
  object-fit: cover;
}
.svc-hero__media-chip {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line-2);
  font: var(--mono);
  font-size: 16px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
@media (max-width: 768px) { .svc-hero__media-chip { font-size: 16px; } }
.svc-hero__readout {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.svc-hero__gauge {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line-2);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(18px, 5vw, 24px);
  line-height: 1;
  color: var(--accent);
}
.svc-hero__gauge--alt { color: var(--ink); }
.svc-hero__gauge small {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .svc-hero__gauge small { font-size: 16px; } }

@media (min-width: 900px) {
  .svc-hero__grid { grid-template-columns: 1.05fr .95fr; align-items: center; }
  .svc-hero__left { display: flex; flex-direction: column; justify-content: center; }
  .svc-hero__actions .btn { flex: 0 0 auto; }
  .svc-hero__media { height: auto; }
  .svc-hero__media img { height: clamp(420px, 40vw, 560px); min-height: 0; }
}

/* ---------- What's included checklist ---------- */
.ev-checklist {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 3vw, 20px);
}
.ev-check {
  border: 1px solid var(--line-2);
  border-radius: 16px;
  padding: clamp(20px, 4vw, 28px);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.ev-check__num {
  font: var(--mono);
  font-size: 16px;
  letter-spacing: .14em;
  color: var(--accent);
  margin-bottom: 12px;
}
@media (max-width: 768px) { .ev-check__num { font-size: 20px; } }
.ev-check h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(17px, 4vw, 20px);
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--ink);
}
@media (max-width: 768px) { .ev-check h3 { font-size: 20px; } }
.ev-check p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .ev-check p { font-size: 18px; } }

@media (min-width: 640px) {
  .ev-checklist { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .ev-checklist { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Rebate spotlight ---------- */
.rebate-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 6vw, 48px);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: clamp(24px, 6vw, 48px);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.rebate-card__left h2 { margin: 14px 0 0; }
.rebate-card__left h2 em { font-style: normal; color: var(--accent); }
.rebate-card__left .lede { margin-top: 18px; }
.rebate-card__left .btn { margin-top: 24px; }

.rebate-card__right {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.rebate-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: clamp(16px, 4vw, 22px) 0;
  border-top: 1px solid var(--line-2);
}
.rebate-stat:first-child { border-top: 0; }
.rebate-stat__num {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(28px, 8vw, 40px);
  line-height: 1;
  color: var(--accent);
}
.rebate-stat__lbl {
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .rebate-stat__lbl { font-size: 16px; } }

@media (min-width: 860px) {
  .rebate-card { grid-template-columns: 1.1fr .9fr; align-items: center; }
}

/* ---------- Process timeline ---------- */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: clamp(16px, 4vw, 24px);
}
.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--line-2);
}
.timeline li {
  position: relative;
  padding-left: 32px;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--bg);
}
.timeline__day {
  font: var(--mono);
  font-size: 16px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
@media (max-width: 768px) { .timeline__day { font-size: 16px; } }
.timeline h4 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(16px, 4vw, 19px);
  line-height: 1.25;
  margin: 0 0 6px;
  color: var(--ink);
}
@media (max-width: 768px) { .timeline h4 { font-size: clamp(18px, 4vw, 19px); } }
.timeline p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-dim);
}
@media (max-width: 768px) { .timeline p { font-size: 16px; } }

@media (min-width: 900px) {
  .timeline {
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(16px, 2vw, 28px);
  }
  .timeline::before {
    left: 8px;
    right: 8px;
    top: 7px;
    bottom: auto;
    width: auto;
    height: 1px;
  }
  .timeline li { padding-left: 0; padding-top: 30px; }
  .timeline li::before { top: 0; left: 0; }
}

/* ---------- Final CTA ---------- */
.ev-cta {
  /* Keep the top padding: unlike the other CTA blocks, something in the section above
     this one extends past its own box, so removing it makes the two overlap. */
  padding: clamp(64px, 14vw, 120px) 0;
  position: relative;
}
.ev-cta__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 6vw, 40px);
  align-items: center;
  border: 1px solid var(--line-2);
  border-radius: 20px;
  padding: clamp(28px, 7vw, 56px);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.ev-cta__title { margin: 14px 0 0; }
.ev-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.ev-cta__actions .btn { flex: 1 1 auto; justify-content: center; }

@media (min-width: 820px) {
  .ev-cta__inner { grid-template-columns: 1.3fr .7fr; }
  .ev-cta__actions { flex-direction: column; align-items: stretch; }
  .ev-cta__actions .btn { flex: 0 0 auto; }
}


/* ========== WAVE2: about ========== */
already provided above

/* ========== WAVE2: blogindex ========== */
/* ============================================================
   /blog (Field Notes) — systematic sweep, still-unstyled classes
   Theme-adaptive, mobile-first. Appended after Wave 1.
   ============================================================ */

/* --- Breadcrumb (blog hero) --- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: clamp(20px, 4vw, 32px);
}
@media (max-width: 768px) { already provided above .breadcrumb { font-size: 16px; } }
.breadcrumb a {
  color: var(--ink-dim);
  text-decoration: none;
  transition: color 0.18s ease;
}
.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--accent);
}
.breadcrumb__sep {
  color: var(--ink-faint);
}
.breadcrumb__current {
  color: var(--ink);
}

/* --- Featured section (inner .featured-card already styled) --- */
.blog-featured {
  padding-top: 0;
}

/* --- Newsletter section --- */
.blog-newsletter {
  /* Same as .about-cta: the section above already supplies the standard gap. */
  padding-top: clamp(24px, 2vw, 28px);
}

/* --- Newsletter card --- */
.newsletter-card {
  display: grid;
  gap: clamp(24px, 5vw, 48px);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: clamp(24px, 5vw, 48px);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.newsletter-card .eyebrow {
  margin-bottom: 0.75rem;
}
.newsletter-card__title {
  margin: 0 0 0.6rem;
}
.newsletter-card__sub {
  margin: 0;
  color: var(--ink-dim);
  max-width: 42ch;
}

/* --- Newsletter form --- */
.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-self: center;
}
.newsletter-form__row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.newsletter-form__row input {
  flex: 1;
  min-width: 0;
  width: 100%;
  min-height: 48px;
  padding: 0 1rem;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px; /* >=16px prevents iOS zoom-on-focus */
}
@media (max-width: 768px) { .newsletter-form__row input { font-size: 18px; } }
.newsletter-form__row input::placeholder {
  color: var(--ink-placeholder);
}
.newsletter-form__row input:focus-visible {
  outline: none;
  border-color: var(--accent);
}
.newsletter-form__row .btn {
  min-height: 48px;
  white-space: nowrap;
}
.newsletter-form__ok {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.04em;
}
@media (max-width: 768px) { .newsletter-form__ok { font-size: 16px; } }
.newsletter-form__meta {
  color: var(--ink-faint);
  font-size: 16px;
  line-height: 1.5;
}
@media (max-width: 768px) { .newsletter-form__meta { font-size: 16px; } }

/* --- Desktop: two-column card + inline form row --- */
@media (min-width: 760px) {
  .newsletter-card {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
  }
  .newsletter-form__row {
    flex-direction: row;
    align-items: stretch;
  }
  .newsletter-form__row .btn {
    flex: 0 0 auto;
  }
}

/* ========== WAVE2: blogpost ========== */

/* ============================================================
   BLOG POST — systematic mobile sweep (panels + electrician-callouts)
   All theme-token based; mobile-first; desktop scoped >=901px.
   ============================================================ */

/* ---- Article header ---- */
.article__head { padding: clamp(28px, 6vw, 56px) 0 clamp(20px, 4vw, 32px); }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font: 500 13px/1.4 var(--mono);
  letter-spacing: .04em;
  color: var(--ink-dim);
  margin-bottom: clamp(16px, 3vw, 24px);
}
.breadcrumb a { color: var(--ink-dim); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb__sep { color: var(--ink-faint); }
.breadcrumb__current { color: var(--ink); }

.article__cat {
  display: inline-block;
  font: 600 13px/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: clamp(14px, 2.5vw, 20px);
}

.article__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 8vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 clamp(14px, 3vw, 22px);
  max-width: 18ch;
}
.article__title em { color: var(--ink-dim); }

.article__deck {
  font-family: var(--sans);
  font-size: clamp(17px, 4.4vw, 22px);
  line-height: 1.5;
  color: var(--ink-dim);
  max-width: 56ch;
  margin: 0 0 clamp(24px, 5vw, 36px);
}

/* ---- Cover ---- */
.article__cover { padding: 0 0 clamp(28px, 6vw, 48px); }
.cover-figure { margin: 0; }
.cover-figure img {
  display: block; width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 560px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--line-2);
}
.cover-figure figcaption {
  margin-top: 12px;
  font: 500 13px/1.5 var(--mono);
  letter-spacing: .02em;
  color: var(--ink-dim);
}
@media (max-width: 768px) {
  .cover-figure img { aspect-ratio: 4 / 3; }
  .cover-figure figcaption { font-size: 16px; }
}

/* ---- Body layout: mobile single column, desktop sidebar + main ---- */
.article__body { padding-bottom: clamp(40px, 8vw, 72px); }
.article__layout { display: flex; flex-direction: column; gap: clamp(28px, 5vw, 40px); }

@media (min-width: 901px) {
  .article__layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: start;
  }
}

/* ---- Table of contents ---- */
.article-toc { min-width: 0; }
@media (min-width: 901px) {
  .article-toc__sticky { position: sticky; top: 96px; }
}
.article-toc__label {
  /* 13px absolute floor (sites-0483) — note this is the `font:` shorthand. */
  font: 600 13px/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 14px;
}
@media (max-width: 768px) { .article-toc__label { font-size: 18px; } }
.article-toc__list {
  list-style: none; margin: 0 0 clamp(24px, 4vw, 32px); padding: 0;
  display: flex; flex-direction: column; gap: 2px;
  border-left: 1px solid var(--line-2);
}
.article-toc__list li { margin: 0; }
.article-toc__list a {
  display: block;
  padding: 9px 0 9px 16px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font: 500 14px/1.35 var(--sans);
  color: var(--ink-dim);
  text-decoration: none;
  min-height: 38px;
}
@media (max-width: 768px) { .article-toc__list a { font-size: 22px; } }
.article-toc__list a:hover { color: var(--ink); }
.article-toc__list a.is-active {
  color: var(--accent);
  border-left-color: var(--accent);
}

/* ---- Prose body typography (root cause: only li markers were styled) ---- */
.prose { max-width: 68ch; }
.prose > p {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 1.25em;
}
.prose > p:first-child { margin-top: 0; }
.prose h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 5vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: clamp(36px, 6vw, 56px) 0 0.6em;
  scroll-margin-top: 90px;
}
.prose h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(18px, 4vw, 22px);
  line-height: 1.25;
  color: var(--ink);
  margin: clamp(28px, 5vw, 40px) 0 0.5em;
  scroll-margin-top: 90px;
}
.prose a:not(.btn) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:not(.btn):hover { text-decoration-thickness: 2px; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose em { font-style: italic; }
/* list rhythm (markers already styled at .prose li) */
.prose ul, .prose ol { margin: 0 0 1.25em; }
.prose li { font-size: 17px; line-height: 1.6; }

/* ---- Callout boxes (TL;DR / quote / CTA) ---- */
.callout {
  border: 1px solid var(--line-2);
  border-radius: 16px;
  padding: clamp(20px, 4vw, 32px);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  margin: clamp(28px, 5vw, 40px) 0;
}
.callout__label {
  /* 13px absolute floor (sites-0483) — `font:` shorthand. */
  font: 600 13px/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
.callout p { margin: 0; }
.callout p + p { margin-top: 0.9em; }

/* TL;DR: accent-tinted summary */
.callout--tldr {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line-2));
}
.callout--tldr p {
  font-size: 17px; line-height: 1.65; color: var(--ink);
}

/* Pull-quote: larger, accent rule, icon */
.callout--quote {
  display: flex; gap: 16px; align-items: flex-start;
  border: none;
  border-left: 3px solid var(--accent);
  border-radius: 0;
  background: transparent;
  padding: 4px 0 4px clamp(16px, 4vw, 24px);
}
.callout--quote svg {
  flex: none;
  width: 22px; height: 22px;
  color: color-mix(in srgb, var(--accent) 70%, transparent);
  margin-top: 4px;
}
.callout--quote p {
  font-family: var(--display);
  font-size: clamp(19px, 4.6vw, 24px);
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
}

/* CTA callout: stacks on mobile, row on desktop */
.callout--cta {
  display: flex; flex-direction: column; gap: 20px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.callout--cta h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(19px, 4.6vw, 24px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 8px;
}
.callout--cta p {
  font-size: 16px; line-height: 1.55; color: var(--ink-dim);
}
@media (max-width: 768px) { .callout--cta p { font-size: 18px; } }
.callout--cta .btn { align-self: flex-start; }
@media (min-width: 640px) {
  .callout--cta {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: clamp(24px, 4vw, 40px);
  }
  .callout--cta .btn { align-self: center; flex: none; }
}

/* ---- Prose figure + SVG load-audit table ----
   The diagram is an inline <svg viewBox="0 0 800 360"> that squeezes to ~358px
   on phones and is illegible. Keep it at a legible min-width and let the
   container scroll horizontally, with a subtle scroll affordance. */
.prose__figure {
  margin: clamp(28px, 5vw, 40px) 0;
}
.prose__figure figcaption {
  margin-top: 12px;
  font: 500 13px/1.5 var(--mono);
  letter-spacing: .02em;
  color: var(--ink-dim);
}
.prose__diagram {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: clamp(16px, 4vw, 24px);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  /* subtle right-edge fade hints there is more to scroll on small screens */
  background-image: linear-gradient(
    to left,
    color-mix(in srgb, var(--accent) 6%, transparent),
    transparent 56px
  );
}
.prose__diagram svg {
  display: block;
  width: 100%;
  min-width: 560px;   /* keeps labels + values legible; container scrolls */
  height: auto;
}
/* thin scrollbar styling for the affordance */
.prose__diagram::-webkit-scrollbar { height: 6px; }
.prose__diagram::-webkit-scrollbar-track { background: transparent; }
.prose__diagram::-webkit-scrollbar-thumb {
  background: var(--line-2); border-radius: 3px;
}
.prose__diagram { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
@media (min-width: 720px) {
  /* enough room to show the full diagram, drop the scroll fade */
  .prose__diagram { background-image: none; }
}


/* ========== WAVE2: home ========== */

/* ===== MOBILE FIX WAVE 3 (re-audit stragglers) ===== */
:root { --pillnav-bg: rgba(20, 20, 21, 0.82); }
[data-theme="light"] { --pillnav-bg: rgba(255, 255, 255, 0.85); }
.pillnav__menu-link { min-height: 44px; display: flex; align-items: center; }
@media (max-width: 768px) { .footer__bottom { padding-bottom: clamp(64px, 16vw, 92px); } }

/* ===== Instagram feed REBUILT full-width (v=8) ===== */
.ig-grid { width: 100%; }
.ig-row { padding-block: 2px; }

/* IG reels: poster img always visible; video fades in once playing (no dark/cut-off tiles) */
.ig-tile__media .ig-tile__poster,
.ig-tile__media .ig-tile__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ig-tile__video { opacity:0; transition:opacity .35s ease; }
.ig-tile__video.is-playing { opacity:1; }


/* Desktop legibility bumps 2026-06-26 */
.svc-hero__gauge small { font-size: 16px; letter-spacing: .08em; }
@media (max-width: 768px) { .svc-hero__gauge small { font-size: 16px; } }
.svc-hero__lbl { font-size: 16px; }
@media (max-width: 768px) { .svc-hero__lbl { font-size: 16px; } }
.btn { font-size: 15px; }
@media (max-width: 768px) { .btn { font-size: 17px; } }
.breadcrumb { font-size: 16px; }
@media (max-width: 768px) { .breadcrumb { font-size: 16px; } }


/* Body weight bump 2026-06-26 (anti-thin) */
.lede { font-weight: 500; }
.ev-check p { font-weight: 500; }
.faq__body p { font-weight: 500; }
.svc-hero__lbl { font-weight: 500; }
.svc-hero__sub { font-weight: 500; }
.breadcrumb { font-weight: 500; }


/* Logo hover = back-to-home 2026-06-26 */
.pillnav__logo-home {
  position: absolute; left: 2px; top: 50%;
  transform: translateY(-50%) translateX(-6px);
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 16px; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
@media (max-width: 768px) { .pillnav__logo-home { font-size: 16px; } }
.pillnav__logo-home svg { width: 16px; height: 16px; flex: none; }
.pillnav__logo:hover .pillnav__logo-home { opacity: 1; transform: translateY(-50%) translateX(0); }
.pillnav__logo:has(.pillnav__logo-home):hover .pillnav__logo-full,
.pillnav__logo:has(.pillnav__logo-home):hover .pillnav__logo-icon { opacity: 0; }


/* Anti-slop: remove pulsing dots 2026-06-26 */
.pulse-dot, .quote__side .pulse { display: none !important; }
.visit-map__pulse { animation: none !important; box-shadow: none !important; }

/* ===== Services hub (/services, /nos-services) — static reviews strip.
   Reuses the global self-contained .review card; just lays three across,
   collapsing to one column on narrow screens. ===== */
.svchub-reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 900px) {
  .svchub-reviews { grid-template-columns: 1fr; }
}

/* ===== Service hero: full-bleed video background (Ahmad 2026-07-21) ===== */
.svc-hero { position: relative; overflow: visible; isolation: isolate; min-height: clamp(560px, 74vh, 780px); }
.svc-hero__bg {
  position: absolute; top: -240px; left: 0; right: 0; bottom: 0;
  object-fit: cover; object-position: center; z-index: 0; pointer-events: none;
  background: #0b0b0c;
}
.svc-hero__scrim {
  position: absolute; top: -240px; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,8,11,0.94) 0%, rgba(8,8,11,0.78) 44%, rgba(8,8,11,0.42) 100%),
    linear-gradient(0deg, rgba(8,8,11,0.62) 0%, rgba(8,8,11,0) 46%);
}
.svc-hero > .wrap { position: relative; z-index: 2; }
/* single column now that the framed media is gone */
.svc-hero__grid { grid-template-columns: 1fr; }
.svc-hero__left { max-width: 760px; }
/* readable cream text over the darkened video, in both light and dark theme */
.svc-hero .breadcrumb,
.svc-hero .breadcrumb a { color: rgba(245,239,228,0.72); }
.svc-hero .breadcrumb a:hover { color: var(--accent); }
.svc-hero .breadcrumb__current { color: #f5efe4; }
.svc-hero .breadcrumb__sep { color: rgba(245,239,228,0.42); }
/* Scoped to .svc-hero on purpose: these cream values are only readable against the
   darkened hero video. /thank-you/ and /merci/ reuse the stat classes on a plain
   section with no video behind them, and unscoped they rendered cream-on-cream —
   the "01 / 02 / 03" steps were invisible in light theme. Inside the hero nothing
   changes; outside it the theme-aware base colors apply. */
.svc-hero .svc-hero__title { color: #f7f2e7; }
.svc-hero .svc-hero__sub { color: rgba(245,239,228,0.84); }
.svc-hero .svc-hero__num { color: #f7f2e7; }
.svc-hero .svc-hero__lbl { color: rgba(245,239,228,0.66); }
.svc-hero .svc-hero__stats { border-top-color: rgba(245,239,228,0.22); }
.svc-hero .btn--ghost { color: #f7f2e7; border-color: rgba(245,239,228,0.42); background: rgba(255,255,255,0.04); }
.svc-hero .btn--ghost:hover { border-color: #f7f2e7; background: rgba(255,255,255,0.10); }
@media (max-width: 768px) {
  .svc-hero__scrim { background: linear-gradient(180deg, rgba(8,8,11,0.80) 0%, rgba(8,8,11,0.72) 55%, rgba(8,8,11,0.84) 100%); }
  .svc-hero { min-height: clamp(520px, 82vh, 680px); }
}

/* ===== Service hero video: make it fill the hero, and readable on phones (2026-07-26) ===== */
/* A <video> is a replaced element, so with height:auto the `bottom` offset is ignored and
   the old top/left/right/bottom box collapsed to the clip's own 16:9 ratio — the video only
   ever covered the header strip, never the hero. Give it a real box so object-fit works. */
.svc-hero__bg {
  width: 100%;
  height: calc(100% + 240px);
  bottom: auto;
}

@media (max-width: 900px) {
  /* A 16:9 clip cannot fill a ~390x1020 hero without cropping to a ~20%-wide slice of the
     frame, which reads as an unidentifiable smudge. On phones it is a landscape band
     instead, running from the top of the page (bleeding up behind the utility strip and
     the nav pill) down through the bottom of the CTA row, which sits at 72-79% of the hero
     on every service page from 360px to 900px wide (operator request 2026-07-26).
     170px of the band is the bleed above the hero, so it is added outside the percentage. */
  .svc-hero { --svc-band: calc(170px + 75%); }
  .svc-hero__bg,
  .svc-hero__scrim { top: -170px; }
  .svc-hero__bg {
    height: var(--svc-band);
    object-position: center 45%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 90%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 90%, transparent 100%);
  }
  /* Px stops up top pin the darkening to the strip and nav pill, whose heights are fixed;
     percentage stops below track the hero's own text. Kept open enough for the clip to
     read, dark enough for cream text over it, then solid once the band ends. */
  .svc-hero__scrim {
    background: linear-gradient(180deg,
      rgba(8,8,11,0.74) 0px,
      rgba(8,8,11,0.64) 130px,
      rgba(8,8,11,0.54) 215px,
      rgba(8,8,11,0.68) 46%,
      rgba(8,8,11,0.82) 66%,
      rgba(8,8,11,0.93) 80%,
      rgba(8,8,11,0.97) 88%,
      rgba(8,8,11,0.97) 100%);
  }
}

/* The hero video bleeds up behind the utility strip at every width, so the strip needs
   cream text in light theme too (page default is near-black there). */
[data-theme="light"] body:has(.svc-hero) .okla-strip { color: rgba(245,239,228,0.72); }
[data-theme="light"] body:has(.svc-hero) .okla-strip__phone { color: #f5efe4; }
[data-theme="light"] body:has(.svc-hero) .lang-toggle__btn { color: rgba(245,239,228,0.62); }
[data-theme="light"] body:has(.svc-hero) .lang-toggle__btn.is-on { color: #f5efe4; }

/* Numbered-index markers: 20px on mobile, matching .idx / .ev-check__num / .value__num / .svc__num (operator request) */
@media (max-width: 768px) { .proc-step__n { font-size: 20px; } }

/* The theme toggle now renders in the strip on service pages too, so in light theme it
   needs the same cream treatment as its neighbours over that dark hero. Below 900px the
   visible ring is the ::before pseudo-element, not the button's own border. */
[data-theme="light"] body:has(.svc-hero) .theme-toggle { color: rgba(245,239,228,0.78); border-color: rgba(245,239,228,0.34); }
[data-theme="light"] body:has(.svc-hero) .theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 900px) {
  [data-theme="light"] body:has(.svc-hero) .theme-toggle { border-color: transparent; }
  [data-theme="light"] body:has(.svc-hero) .theme-toggle::before { border-color: rgba(245,239,228,0.34); }
  [data-theme="light"] body:has(.svc-hero) .theme-toggle:hover::before { border-color: var(--accent); }
}

/* FAQ typography on desktop: 24px questions, 18px answers, in every FAQ on the site —
   the service-page accordions (.faq__*) and the FAQ hub list (.faq-list__*). Placed last
   so it also wins over the duplicated hub block earlier in this file (Ahmad 2026-07-26). */
@media (min-width: 769px) {
  .faq__btn { font-size: 24px; }
  .faq__body p { font-size: 18px; }
  .faq-list__btn-q { font-size: 24px; }
  .faq-list__answer { font-size: 18px; }
}

/* Mega-menu primary links sit at a flat 32px on desktop (operator request 2026-07-26),
   replacing the clamp that scaled them to 56px on wide screens. 901px is the same
   breakpoint okla.js uses to decide the hover mega menu exists at all, so the burger
   drawer below it keeps its own sizing. */
@media (min-width: 901px) {
  .pillnav[data-pillnav-open="true"] .pillnav__menu-link { font-size: 32px; }
}

/* Footer wordmark: 150px on desktop (Ahmad 2026-07-26). Mobile keeps its own scale.
   "Okla Électrique" is 979px wide at 150px and the element is nowrap + overflow:hidden, so
   a flat 150px silently chops letters off below ~1050px of viewport (143px lost at 900px
   wide). The cap holds a true 150px on any window from ~1070px up and scales down instead
   of cutting below that. */
@media (min-width: 769px) {
  .foot-wordmark { font-size: min(150px, 14vw); }
}

/* Contact form: pin the intro column beside the form. The form runs ~1,080px tall while
   the intro is ~380px, so the licensing and free-survey reassurance used to scroll out of
   sight the moment someone started typing, leaving ~700px of empty column. The nav pill is
   sticky at top:16px and stands 60px tall, so clear it by 24px (Ahmad 2026-07-27).
   Two columns only exist from 880px up; below that the layout stacks and there is no gap. */
@media (min-width: 880px) {
  .contact-form-side {
    position: sticky;
    top: 100px;
    align-self: start;
  }
}


/* ===== One mobile section rhythm (operator request 2026-07-28) =====
   Section spacing had drifted per page family: 52px gaps on the home page, 80px on the
   service pages, 88-104px after most heroes, 40-76px through the case-studies index.
   Scrolling any two pages back to back, the sections breathed differently.
   The site's dominant pattern is "spacing lives in the bottom padding, top padding is
   zero", so that is the rule everywhere below 768px: every adjacent pair of content
   sections is separated by exactly 52px. Heroes keep their own top padding (header
   clearance) and only hand off the same 52px. The sticky filter bars on the blog and
   FAQ carry no bottom padding, so the section after each one re-adds the 52px itself.
   The `body` prefix is load-bearing: all 16 service pages ship their own
   `.section { padding: clamp(40px, 4.5vw, 72px) 0 }` in a page-level <style> block,
   which comes after this file in document order and would otherwise win. Their
   desktop rhythm is left alone; only the mobile gap is unified. */
@media (max-width: 768px) {
  body .hero, body .svc-hero, body .about-hero,
  body .contact-hero, body .blog-hero, body .faq-hero { padding-bottom: 52px; }

  body .section, body .pkg, body .about-stats, body .about-cta,
  body .ev-included, body .ev-feature, body .ev-brands, body .ev-process,
  body .ev-types, body .ev-areas, body .ev-faq, body .ev-cta,
  body .article__body, body .article-author, body .article-related {
    padding-top: 0;
    padding-bottom: 52px;
  }

  body .blog-posts, body .faq-section { padding-top: 52px; }
}


/* === Hero eyebrow hidden on phones (operator request 2026-08-12) ===
   RESIDENTIEL / COMMERCIAL / INDUSTRIEL cannot fit one phone line at 16px +
   0.22em tracking (~430px of text in ~335px of usable width), so it wrapped
   as a ragged two-liner that read as a mistake. Hidden below 768px only --
   desktop and tablet still show it. Scoped to `.hero` so the section eyebrows
   (Services, Avis, FAQ, ...) are untouched. Left as a CSS rule rather than
   deleting the span so the desktop copy keeps one source of truth. */
@media (max-width: 768px) {
  .hero .eyebrow {
    display: none;
  }
}

/* === Hero centred on phones (operator request 2026-08-12) ===
   Everything inside `section.hero` centres below 768px: headline, lede,
   both buttons, and the stat bar that sits in the same section. Desktop keeps
   its left-aligned two-column hero -- this is mobile only, where the hero is
   already a single stacked column (`.hero .hero__grid { grid-template-columns:
   1fr }`) so centring costs no layout. `.hero__actions` is flex, hence
   justify-content rather than text-align; `.hero__sub` needs the auto margins
   because its 52ch max-width would otherwise pin it left on wider phones. */
@media (max-width: 768px) {
  .hero .hero__left {
    text-align: center;
  }
  .hero .hero__sub {
    margin-left: auto;
    margin-right: auto;
  }
  .hero .hero__actions {
    justify-content: center;
  }
  .hero .statbar__cell {
    text-align: center;
  }
}

/* === Gap under the marquee on phones (operator request 2026-08-12) ===
   The mobile rhythm block earlier in this file zeroes `body .section`'s
   top padding on the premise that the preceding section already pays the
   52px with its bottom padding. The orange `.marquee` band is a bare <div>,
   not a section, and carries no vertical spacing at all -- so the testimonials
   section landed flush against it and the "Avis" eyebrow looked glued to the
   strip. Hand the 52px to whatever section follows a marquee. Adjacent-sibling
   so it can never affect a section that does not sit under one. */
@media (max-width: 768px) {
  body .marquee + .section {
    padding-top: 52px;
  }
}

/* === Reviews widget top gap on phones (operator request 2026-08-12) ===
   ~92px of dead space sat between the testimonials lede and the first review
   card. Only 24px is ours (`.section__head` margin-bottom); the other ~68px is
   padding baked into the GoHighLevel review widget, which renders in a
   cross-origin iframe we cannot style.

   Desktop already solves this at line ~3019 with `.ghl-reviews-wrap {
   margin-top: -80px }`, and that rule is deliberately reset to 0 below 768px.
   Rather than re-override the wrapper (a negative margin there slides the
   iframe's hit area 36px up over the last line of the paragraph, even though
   the pixels are transparent), clip instead: the wrapper stays put and the
   iframe is pulled up INSIDE it. Same result on screen -- a ~32px gap in line
   with the mobile rhythm -- with no element sitting on top of the copy and
   nothing lost at the bottom (wrapper 344px -> 284px, pagination intact). */
@media (max-width: 768px) {
  body #ghl-reviews {
    overflow: hidden;
  }
  body #ghl-reviews > iframe {
    margin-top: -60px;
  }
}

/* === Instagram section breathing room on phones (operator request 2026-08-12) ===
   Measured on the live page: EVERY section boundary on this homepage is
   exactly 52px on mobile, Instagram included -- so nothing is broken here.
   It only reads as cramped because the section above it (#areas) ends in a
   full-bleed dark map image, and 52px between a heavy image block and the
   Instagram header is optically tighter than the same 52px between a
   paragraph and the next section's eyebrow. Every other section also opens
   with a small eyebrow above its title, which buys optical air the Instagram
   header (big circular avatar + bold handle) does not have. Deliberate
   exception, not a rhythm fix: +40px -> ~92px of separation. */
@media (max-width: 768px) {
  body #instagram {
    padding-top: 40px;
  }
}

/* === Contact/quote horizontal overflow on phones (operator request 2026-08-12) ===
   REAL BUG, not a spacing tweak: on a 375px viewport the #contact section
   measured 459px wide -- the whole block, form included, hung 84px off the
   right edge (body.scrollWidth 459 vs clientWidth 375).

   Cause: the two <select> menus. A grid/flex item defaults to `min-width:auto`,
   so a track can never shrink below its content's min-content width, and a
   <select>'s min-content is the width of its LONGEST OPTION -- here
   "Résidentiel · maison unifamiliale" and "Installation de borne de recharge".
   That floor (443px) propagated up through `.quote__fields` -> `.quote__form`
   -> `.quote`, and every ancestor inherited an un-shrinkable column.

   Fix is the standard escape hatch at both grid levels: an explicit
   `minmax(0, 1fr)` track plus `min-width: 0` on the items, which lets the
   columns shrink to the viewport. The selects now truncate their closed-state
   label (full text still shows in the open dropdown) -- the intended trade.
   Verified at 375px: body.scrollWidth back to 375, zero overflowing elements,
   nothing clipped. Phones only: the blowout can only occur below ~475px, where
   the available column is narrower than that 443px content floor. */
@media (max-width: 768px) {
  .quote {
    grid-template-columns: minmax(0, 1fr);
  }
  .quote__fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .quote__side,
  .quote__form,
  .quote__fields .field {
    min-width: 0;
  }
}

/* === Footer centred on phones (operator request 2026-08-12) ===
   Operator walked the footer block by block; this is the whole treatment in
   one place rather than six scattered overrides.

   1. No divider lines. Every footer <h5> carries
      `border-bottom: 1px solid rgba(255,255,255,.08)` + 12px padding; both go,
      so the headings sit directly above their content.
   2. Everything centred -- all six blocks (Services, Service Areas, Contact,
      Hours, Newsletter, Follow), the brand block, and the bottom row.
      `text-align` does the heavy lifting because the lists are grids of
      list-items; the three exceptions are flex or fit-content boxes that
      ignore text-align and need explicit centring: the newsletter form, the
      Follow list, and the "Get a quote" pill.
   3. RBQ on its own line, via the spans added in components/Footer.tsx --
      the separator is hidden and the number promoted to a block. Desktop is
      untouched and still renders the single "© ... · RBQ ..." line.
   Phones only; the desktop footer keeps its dividers and left alignment. */
@media (max-width: 768px) {
  .footer h5 {
    border-bottom: none;
    padding-bottom: 0;
  }

  /* 4. More air between blocks. Stacked on mobile they sat 24px apart
     (28px for Hours, which carries its own margin), which read as one
     continuous list rather than six sections -- and losing the divider
     lines above removed the only other visual break. 40px throughout:
     the outer grid between columns, the two inner flex columns
     (Contact+Hours / CTA, Newsletter / Follow), and the Hours margin. */
  .footer__top {
    gap: 40px;
  }
  .footer__col {
    gap: 40px;
  }
  .footer__hours {
    margin-top: 40px;
  }

  .footer__top,
  .footer__col,
  .footer__brand,
  .footer__news,
  .footer__follow,
  .footer__bottom {
    text-align: center;
  }

  .footer__news-form {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }
  .footer__follow ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 20px;
  }
  .footer__cta {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }
  /* The logo is a block-level <img>, so the brand block's text-align does
     nothing for it -- auto margins are what centre the box itself. Both
     theme variants share .footer__logo, so this covers light and dark. */
  .footer__brand .footer__logo {
    margin-left: auto;
    margin-right: auto;
  }

  /* Column flex: the cross axis is horizontal here, so align-items -- not
     justify-content -- is what actually centres these two rows. */
  .footer__bottom {
    justify-content: center;
    align-items: center;
  }
  .footer__bottom .footer__legal-sep {
    display: none;
  }
  .footer__bottom .footer__rbq {
    display: block;
  }
}

/* === Contact section restructured on phones (operator request 2026-08-12) ===
   The quote section's own head is dropped on phones -- eyebrow ("Free
   estimate"), the h2 ("Tell us what needs power.") and the lede -- along with
   the four-item trust checklist in the aside. "Get in touch" / "Nous joindre",
   until now a small mono eyebrow inside the aside, is promoted to carry the
   section as its visible heading.

   The promotion reuses the site's own title scale rather than inventing one:
   `var(--display)` / 700 / `clamp(32px, 9vw, 56px)` / 0.98 line-height are
   exactly what `.h-xl` resolves to below 768px (line ~1688), so it reads as a
   section title and not a one-off. Colour is `var(--ink)`, NOT a hex -- that
   token flips to #1a1814 in the light theme, and hardcoded cream would have
   gone invisible on white for anyone using the theme toggle. The last word is
   wrapped in <em> in the markup and gets the same gradient recipe as
   `.section__title em` (line ~1152).

   Contact rows: the hairline `border-top` separators are dropped and the
   stack tightened (32px heading gap -> 20px, 16px row gap -> 8px, 12px row
   padding -> 6px), since with the checklist gone the block was mostly air.

   All CSS-only: the markup keeps the real <h2>, the lede and the checklist,
   which desktop still shows in full beside the form.

   NOTE for later: on phones the section's only visible heading is now a
   <span>, while the actual <h2> is display:none. Fine visually and no ranking
   risk (the h2 is still in the HTML), but if this becomes the permanent
   design, the honest fix is to swap the tags in the page components rather
   than style a span to look like a heading. */
.quote__side .eyebrow em {
  /* Neutralise the browser default so desktop's small mono eyebrow does not
     suddenly render its last word in italic. */
  font-style: normal;
}

@media (max-width: 768px) {
  #contact .section__head {
    display: none;
  }
  #contact .contact-checklist {
    display: none;
  }
  #contact .quote__side .eyebrow {
    display: block;
    font-family: var(--display);
    font-size: clamp(32px, 9vw, 56px);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.03em;
    text-transform: none;
    color: var(--ink);
    margin-bottom: 20px;
  }
  #contact .quote__side .eyebrow em {
    font-style: normal;
    color: var(--accent);
    background: linear-gradient(110deg, var(--accent-light), var(--accent), var(--accent-deep));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  #contact .quote__contact {
    margin-top: 0;
    gap: 8px;
  }
  #contact .quote__contact > a {
    border-top: none;
    padding: 6px 0;
  }

  /* Gap between the contact card and the first form field: was 96px of dead
     space (32px card padding-bottom + 32px form padding-top + a 32px
     margin-top on .quote__fields). The margin was the least obvious of the
     three and the one doing the most damage -- it exists to clear the form
     heading on desktop, which phones no longer render. Halve the two paddings
     and drop the margin: 33px total. */
  #contact .quote__side {
    padding-bottom: 16px;
  }
  #contact .quote__form {
    padding-top: 16px;
  }
  #contact .quote__fields {
    margin-top: 0;
  }
}

/* === Instagram block reworked on phones (operator request 2026-08-12) ===

   TILES -- drop the "View on Instagram" pill repeated on all 30 tiles. Only
   the `.ig-tile__cta` span goes, NOT its `.ig-tile__meta` wrapper and not the
   tile: the whole tile is already an <a> to the post, so the pill was a second
   redundant affordance and posts stay tappable without it. The caption overlay
   is untouched, and `.ig-tile__meta` carries no padding or margin so it
   collapses to 0px with no ghost gap (verified).

   HEADER -- the avatar/handle/stats row was built as a side-by-side flex row,
   which on a 375px screen left the meta column ~280px wide. The stats then
   wrapped to three ragged lines with the "·" separators stranded at line ends,
   and the avatar floated mid-height against that block with dead space above
   and below it. Reworked as a centred stack, consistent with the hero and
   footer on this breakpoint:
     - avatar first, 56px -> 64px so it reads as a deliberate focal mark
       rather than a leftover icon;
     - the handle becomes the block's heading (clamp 24-30px);
     - the two counts stay on ONE line, and "From the field, daily" is pushed
       onto its own row via flex-basis with its leading separator hidden --
       so the dangling "·" is gone by layout, not by editing the copy;
     - that tagline drops to `--ink-faint`, giving three real tiers: white
       numbers, dim labels, faint tagline.
   No new fonts, colours or effects -- existing tokens only, and every size
   stays above the 13px mobile floor (stats 16px, CTA 16px). */
@media (max-width: 768px) {
  #instagram .ig-tile__cta {
    display: none;
  }

  .ig-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
  }
  .ig-head__left {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .ig-avatar {
    width: 64px;
    height: 64px;
  }
  .ig-head__meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .ig-handle {
    font-size: clamp(24px, 7vw, 30px);
  }
  .ig-stats {
    justify-content: center;
    gap: 10px;
    letter-spacing: 0.08em;
  }
  /* 4th child = the separator before the tagline; 5th = the tagline itself. */
  .ig-stats > span:nth-child(4) {
    display: none;
  }
  .ig-stats > span:nth-child(5) {
    flex-basis: 100%;
    color: var(--ink-faint);
  }
}

/* === Sticky-header contact buttons enlarged (operator request 2026-08-12) ===
   Call / text / email in the pill nav. The hit area was ALREADY 44x44, i.e.
   exactly the iOS HIG minimum and WCAG 2.5.5 AAA -- so these were never
   technically too small to tap. What made them feel small is that the visible
   glyph inside was only 22px, half the button, so the affordance read tiny
   even though the target was fine. Both go up: 44 -> 50px box, 22 -> 26px
   glyph, which also clears Android's 48dp guidance.
   Fit checked, not assumed: at 375px the pill bar has ~33px of slack left,
   and at 320px (iPhone SE) the three buttons end at x=243 inside a 296px bar,
   so the hamburger still sits clear -- `.pillnav__bar` scrollWidth equals its
   width at both sizes, no overflow. */
@media (max-width: 768px) {
  .pillnav__quick-btn {
    width: 50px;
    height: 50px;
  }
  .pillnav__quick-btn svg {
    width: 26px;
    height: 26px;
  }
}