/* =========================================================================
   Self-hosted webfonts — Inter (body) and Poppins (headings)
   =========================================================================
   These were served from fonts.googleapis.com, which put a THIRD-PARTY
   STYLESHEET ON THE CRITICAL PATH: the browser had to fetch Google's CSS
   before it could even discover the font files, making a three-hop chain
   (document -> googleapis CSS -> gstatic woff2) that measured 1,926ms and
   accounted for essentially all of a 1,923ms LCP.

   Self-hosted, the faces are declared here in a stylesheet the browser is
   already fetching, and includes/head.php preloads the two needed above the
   fold (Inter variable + Poppins 700, the h1 weight), so the fonts start
   downloading alongside this file instead of after it.

   Inter is a VARIABLE font: one file covers 400-700, which is why a single
   face carries "font-weight: 400 700" rather than four separate files.
   Poppins is static, so each weight is its own file.

   Subsets are latin and latin-ext only. The unicode-range values are Google's
   own, so a page containing only ASCII never downloads the -ext files.

   Both families are SIL Open Font License 1.1, which permits self-hosting.
   To refresh: re-request the css2 URL with a modern browser UA and re-download.
   ========================================================================= */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/inter-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/inter-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/poppins-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/poppins-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/poppins-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/poppins-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/poppins-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/poppins-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== California Ignition Interlock — Complete Stylesheet ===== */
:root {
  --navy: #0A4D68;
  --navy-dark: #073547;
  --blue: #146c8f;
  --sky: #e7f1f5;
  --green: #16C79A;
  --green-dark: #0fa27d;
  --gold: #F4A100;
  --ink: #142433;
  --slate: #3d4c58;
  --line: #e1e8ec;
  --paper: #ffffff;
  --fog: #f4f8f9;
  --radius: 16px;
  --shadow: 0 20px 48px rgba(10, 40, 60, 0.18);
  --shadow-sm: 0 2px 8px rgba(10, 40, 60, 0.08);
  --maxw: 1180px;
  font-size: 16px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
}
h1, h2, h3, h4 {
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
p  { margin: 0 0 1em; color: var(--slate); }
a  { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { padding-left: 1.2em; }
img { max-width: 100%; display: block; }
address { font-style: normal; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
section { padding: 52px 0; }
.section-alt { background: var(--sky); }

/* Eyebrow */
.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green-dark);
  background: rgba(22,199,154,.1);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.section-head { max-width: 680px; margin-bottom: 44px; }
.section-head.centered { text-align: center; margin-left: auto; margin-right: auto; }
.section-head p { font-size: 1.08rem; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 1rem;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-decoration: none !important;
  line-height: 1.2;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--green); color: #fff; box-shadow: 0 8px 20px rgba(22,199,154,.3); }
.btn-primary:hover { background: var(--green-dark); }
.btn-accent { background: var(--gold); color: #3d2800; box-shadow: 0 8px 20px rgba(244,161,0,.3); }
.btn-accent:hover { background: #e09610; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--navy); }
.btn-ghost:hover { border-color: var(--navy); background: var(--fog); }
.btn-outline-light { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.btn-outline-light:hover { background: rgba(255,255,255,.1); }
.btn-lg { padding: 16px 32px; font-size: 1.05rem; }
.btn-sm { padding: 9px 18px; font-size: .9rem; }

/* ===== Utility Bar ===== */
.utility-bar {
  background: var(--navy-dark);
  color: #cfe3ee;
  font-size: .84rem;
  padding: 8px 0;
}
.utility-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.ub-left { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.ub-left span { opacity: .85; }
.utility-bar a { color: #fff; font-weight: 600; text-decoration: none; }

/* ===== Header ===== */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--navy);
  text-decoration: none !important;
  flex-shrink: 0;
}
.brand-mark {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 1rem;
  flex: none;
}
.brand-logo { height: 42px; width: auto; display: block; }
.brand .state { display: block; font-weight: 500; font-size: .68rem; color: var(--slate); letter-spacing: .04em; }
.main-nav { display: flex; align-items: center; gap: 24px; }
.main-nav a { color: var(--ink); font-weight: 500; font-size: .94rem; white-space: nowrap; }
.main-nav a:hover { color: var(--blue); text-decoration: none; }
.nav-cta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.nav-phone { font-weight: 700; color: var(--navy); font-size: .95rem; white-space: nowrap; }
.nav-reviews { display: flex; align-items: center; gap: 7px; text-decoration: none; flex-shrink: 0; }
.nav-reviews:hover { text-decoration: none; }
.nav-reviews .nav-stars { display: inline-flex; gap: 1px; }
.nav-reviews .nav-stars svg { width: 15px; height: 15px; color: var(--gold); }
.nav-reviews .nav-rev-text { font-size: .8rem; color: var(--slate); white-space: nowrap; line-height: 1.1; }
.nav-reviews .nav-rev-text strong { color: var(--navy); font-weight: 700; }

/* Mobile nav */
#menu-toggle { display: none; }
.menu-toggle-label { display: none; cursor: pointer; width: 28px; height: 28px; color: var(--navy); }
.menu-toggle-label svg { width: 100%; height: 100%; }
@media (max-width: 960px) {
  .utility-bar { display: none; }
  .main-nav { display: none; }
  .nav-cta { display: none; }
  .menu-toggle-label { display: block; margin-left: auto; }
  .nav-wrap { padding: 12px 8px; }
  #menu-toggle:checked ~ .main-nav {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: #fff;
    border-bottom: 2px solid var(--line);
    padding: 16px 24px;
    box-shadow: var(--shadow);
    z-index: 100;
  }
}

/* ===== Hero ===== */
.hero {
  background: radial-gradient(ellipse at 80% 15%, #eaf6f2 0%, var(--sky) 50%, #fff 100%);
  overflow: hidden;
  padding: 0;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
  padding-top: 44px;
  padding-bottom: 80px;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
}
.hero-badges { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 28px; }
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid var(--line);
  padding: 7px 14px; border-radius: 999px; font-size: .84rem; font-weight: 600;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}
.pill svg { width: 16px; height: 16px; color: var(--green); flex-shrink: 0; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.hero-note { font-size: .84rem; color: var(--slate); line-height: 1.5; }

/* Device card */
.device-card {
  background: #fff;
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 24px;
  position: relative;
}
.badge-float {
  position: absolute; top: -14px; right: 22px;
  background: var(--gold); color: #3d2800;
  font-weight: 700; font-size: .78rem;
  padding: 8px 16px; border-radius: 999px;
  box-shadow: var(--shadow-sm);
  z-index: 2;
}
.device-frame {
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--navy), var(--blue) 70%);
  padding: 26px;
}
.video-wrap { max-width: 840px; margin: 0 auto; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); background: #000; }
.site-video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.device-frame img { border-radius: 10px; box-shadow: 0 12px 24px rgba(0,0,0,.25); width: auto; max-width: 100%; max-height: 540px; height: auto; margin: 0 auto; display: block; }
.device-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  gap: 12px;
}
.device-caption strong { color: var(--navy); display: block; font-size: .95rem; }
.device-caption span:last-child { font-size: .82rem; color: var(--slate); }

/* ===== City ticker ===== */
.city-ticker {
  background: var(--navy);
  color: #fff;
  padding: 16px 0;
  overflow: hidden;
}
.city-ticker .container { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ticker-label {
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gold);
  flex-shrink: 0;
}
.ticker-track { display: flex; flex-wrap: wrap; gap: 8px; font-size: .85rem; }
.ticker-track a {
  color: #eaf4fb; text-decoration: none;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  padding: 5px 12px; border-radius: 999px;
  line-height: 1.2; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.ticker-track a:hover { color: #fff; background: rgba(22,199,154,.22); border-color: rgba(22,199,154,.5); }
@media (max-width: 600px) {
  .city-ticker { padding: 20px 0; }
  .city-ticker .container { display: block; }
  .ticker-label { display: block; margin-bottom: 12px; }
  .ticker-track { gap: 7px; font-size: .82rem; }
  .ticker-track a { padding: 5px 11px; }
}

/* ===== Stepper ===== */
.stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
@media (max-width: 900px) { .stepper { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .stepper { grid-template-columns: 1fr; } }
.step-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 22px;
  box-shadow: var(--shadow-sm);
}
.step-num {
  counter-increment: step;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--green); color: #fff; font-weight: 700; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  font-family: 'Poppins', sans-serif;
}
.step-card h3 { font-size: 1.1rem; }
.step-card p { font-size: .92rem; }

/* ===== Grids ===== */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; align-items: start; }
@media (max-width: 900px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

/* ===== Comparison table ===== */
.compare-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); margin-top: 10px; }
.compare-table th, .compare-table td { padding: 16px 20px; border-bottom: 1px solid var(--line); text-align: left; font-size: .94rem; }
.compare-table thead th { background: var(--navy); color: #fff; font-family: 'Poppins', sans-serif; font-weight: 600; }
.compare-table thead th.col-us { background: var(--green-dark); color: #fff; }
.compare-table .col-us { background: rgba(22,199,154,.04); }
.col-us.check { color: var(--green-dark); font-weight: 600; }
.compare-table tr:last-child td { border-bottom: none; }
@media (max-width: 640px) {
  .compare-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ===== Card ===== */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}

/* ===== Feature list ===== */
.feature-list { list-style: none; padding: 0; margin: 0 0 24px; }
.hero-feature-list { margin: 22px 0 26px; }
.feature-list li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; font-size: .95rem; color: var(--ink);
}
.feature-list li svg { width: 20px; height: 20px; color: var(--green); flex-shrink: 0; margin-top: 2px; }

/* ===== Location cards ===== */
.location-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.loc-pin {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--sky); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
/* A column so the buttons sit on one line across the row whatever length each
   card's blurb runs to, instead of floating wherever its own text ends. */
.location-card { display: flex; flex-direction: column; }
.location-card h3 { margin-bottom: 6px; }
.location-card address { color: var(--slate); font-size: .92rem; margin-bottom: 14px; line-height: 1.5; font-style: normal; }
.loc-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }

/* ===== Testimonials ===== */
.testimonial-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.stars { color: var(--gold); letter-spacing: 2px; margin-bottom: 10px; font-size: 1.1rem; }
.quote { font-size: .95rem; line-height: 1.6; font-style: italic; }
.who { font-weight: 600; color: var(--navy); margin-top: 10px; font-size: .88rem; }

/* ===== FAQ ===== */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  padding: 20px 4px;
  cursor: pointer;
  font-weight: 600;
  color: var(--navy);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--green); font-weight: 400; flex-shrink: 0; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-answer { padding: 0 4px 20px; font-size: .95rem; }
.faq-answer a { color: var(--blue); font-weight: 500; }

/* ===== CTA Band ===== */
/* A full-bleed band in the same green as the primary button it contains, with
   square corners so it reads as a section of the page rather than a floating
   card. --green-deep, not --green: the band carries text, and the lighter token
   does not clear 4.5:1 behind it. */
.cta-band {
  background: var(--green-deep);
  color: #fff;
  text-align: center;
  border-radius: 0;
  padding: 64px 40px;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.92); font-size: 1.08rem; max-width: 560px; margin: 0 auto 28px; }
.cta-band .hero-cta { justify-content: center; margin-bottom: 0; flex-wrap: wrap; }
/* Both buttons are restyled FOR this surface. Left alone, .btn-primary is green
   on green (invisible) and .btn-ghost is navy text inside a pale-grey border on
   green (unreadable, and the border all but disappears). The two-class selector
   outranks the flat .btn-* rules wherever they sit in this file. */
.cta-band .btn-primary {
  background: #fff;
  color: var(--green-deeper);
  box-shadow: 0 8px 22px rgba(4, 48, 36, .28);
}
.cta-band .btn-primary:hover { background: var(--fog); color: var(--green-deeper); }
.cta-band .btn-ghost {
  background: transparent;
  border-color: rgba(255,255,255,.7);
  color: #fff;
}
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }
.cta-band .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 600px) {
  .cta-band { padding: 48px 20px; }
  .cta-band .hero-cta .btn { width: 100%; justify-content: center; }
}

/* ===== Local SEO content block ===== */
.local-seo-block { padding: 56px 0; }
.local-seo-block h2 { margin-bottom: 20px; }
.local-seo-block p { max-width: 820px; font-size: .97rem; }
.local-seo-block .city-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.local-seo-block .city-links a {
  background: var(--sky); color: var(--navy); padding: 6px 14px;
  border-radius: 999px; font-size: .84rem; font-weight: 600;
  text-decoration: none; transition: background .15s;
}
.local-seo-block .city-links a:hover { background: #d0e8f5; }

/* ===== Stats row ===== */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
  padding: 0;
}
@media (max-width: 640px) { .stats-row { grid-template-columns: 1fr 1fr; } }
.stat-item .stat-number {
  font-family: 'Poppins', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
}
.stat-item .stat-label { color: var(--slate); font-size: .88rem; margin-top: 6px; }

/* ===== Footer ===== */
.site-footer {
  background: var(--navy-dark);
  color: #b9cfdd;
  padding: 60px 0 24px;
}
.site-footer h4 { color: #fff; font-size: .95rem; margin-bottom: 16px; }
.site-footer a { color: #b9cfdd; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 32px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand p { font-size: .9rem; line-height: 1.6; margin-top: 12px; color: #b9cfdd; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 10px; font-size: .9rem; }
.footer-cities { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .84rem; line-height: 2; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 40px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: .82rem;
}

/* ===== Mobile call bar ===== */
.mobile-call-bar { display: none; }
@media (max-width: 720px) {
  .mobile-call-bar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 60;
    background: var(--green);
    justify-content: center;
    padding: 0;
  }
  .mobile-call-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    padding: 16px;
    width: 100%;
  }
  .mobile-call-bar svg { flex-shrink: 0; width: 20px; height: 20px; }
  body { padding-bottom: 56px; }
}

/* ===== Mobile Hero (phones only) — desktop layout untouched ===== */
.hero-mobile { display: none; }
@media (max-width: 600px) {
  /* header overflow fix: drop the inline nowrap phone; call bar covers calling */
  .nav-phone { display: none; }

  /* the utility bar stacks to several lines on mobile and looks bulky — its info
     (locations, Spanish display, phone) is already in the hero and the sticky call bar */
  .utility-bar { display: none; }

  /* swap desktop hero grid for the mobile hero below the phone breakpoint */
  .hero-grid { display: none; }
  .hero { background: radial-gradient(ellipse at 100% 0%, #eaf6f2 0%, var(--sky) 58%, #fff 100%); }

  .hero-mobile {
    display: block;
    position: relative;
    overflow: hidden;
    padding: 20px 0 34px;
  }
  .hero-mobile .container { position: relative; z-index: 2; }

  /* device: solid product cutout in its own right column — no filter, no fade */
  .hm-device {
    position: absolute;
    top: 33%; right: 24px; left: auto;
    transform: translateY(-50%);
    width: 114px; height: auto;
    opacity: 1;
    z-index: 1;
    pointer-events: none;
  }

  .hm-eyebrow {
    display: inline-block;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--green-dark);
    background: rgba(22,199,154,.12);
    padding: 6px 12px; border-radius: 999px; margin-bottom: 18px;
  }
  .hm-loc-line {
    display: flex; align-items: center; gap: 6px;
    font-size: .9rem; font-weight: 600; color: var(--slate);
    margin: 0 0 14px;
  }
  .hm-loc-line svg { width: 15px; height: 15px; color: var(--blue); flex-shrink: 0; }
  .hm-stars { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; text-decoration: none; cursor: pointer; }
  .hm-stars .stars { display: inline-flex; gap: 2px; }
  .hm-stars svg { width: 18px; height: 18px; color: var(--gold); }
  .hm-stars .rtext { font-size: .85rem; font-weight: 600; color: var(--ink); }

  .hm-h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.85rem; line-height: 1.15; font-weight: 700;
    color: var(--navy); margin: -8px 0 20px; max-width: calc(15ch + 132px);
  }

  .hm-features { list-style: none; margin: 0 0 24px; padding: 0; }
  /* reserve the right-hand column (beside the meta + headline) for the device */
  .hm-loc-line, .hm-stars, .hm-h1 { padding-right: 132px; }
  .hm-features li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: .98rem; font-weight: 500; color: var(--navy);
    padding: 5px 0; line-height: 1.35;
  }
  .hm-features svg {
    width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px;
    color: var(--navy);
  }

  .hm-cta { display: flex; gap: 10px; margin-bottom: 14px; }
  .hm-cta .btn { flex: 1; justify-content: center; padding: 13px 4px; font-size: .82rem; white-space: nowrap; border-radius: 12px; }
  .hm-phone { font-size: .92rem; color: var(--slate); margin: 0 0 14px; }
  .hm-phone a { font-weight: 700; color: var(--navy); }
  .hm-locs { font-size: .82rem; color: var(--slate); margin: 0; }
}

/* ============================================================
   MOBILE OPTIMIZATION + SHARED PAGE STYLES
   Added for multi-page build. Safe to merge with above.
   ============================================================ */

/* Prevent any horizontal overflow site-wide */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, svg, iframe { max-width: 100%; height: auto; }
/* Long words/URLs never force a sideways scroll.
   Headings are excluded from mid-word breaking so brand terms like
   "Interlock" never split across lines. */
p, li, td, th, a { overflow-wrap: break-word; word-wrap: break-word; }
h1, h2, h3, h4 { overflow-wrap: normal; word-break: keep-all; hyphens: none; }
/* Any wide block scrolls inside itself */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* iOS: stop auto-zoom on focus (inputs must be >=16px) */
input, select, textarea { font-size: 16px; font-family: inherit; }

/* Accessible tap targets on touch devices */
@media (max-width: 960px) {
  .main-nav a, .footer-cities a, .site-footer ul a { min-height: 44px; display: flex; align-items: center; }
  .btn { min-height: 46px; }
}

/* Visible keyboard focus for accessibility */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 6px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .ticker-track { animation: none !important; }
}

/* ---- Interior page header band ---- */
.page-hero { background: linear-gradient(180deg, var(--sky) 0%, #fff 100%); padding: 44px 0 36px; }
.page-hero h1 { font-size: clamp(1.7rem, 5vw, 2.6rem); line-height: 1.15; margin: 8px 0 14px; color: var(--navy); }
.page-hero p.lead { font-size: clamp(1rem, 2.6vw, 1.12rem); color: var(--slate); max-width: 62ch; margin: 0 0 20px; }

/* Breadcrumbs */
.breadcrumbs { font-size: .82rem; color: var(--slate); margin-bottom: 4px; }
.breadcrumbs a { color: var(--slate); }
.breadcrumbs a:hover { color: var(--blue); }

/* Generic content section */
.section { padding: 48px 0; }
.prose > * + * { margin-top: 14px; }
.prose h2 { font-family: 'Poppins', sans-serif; color: var(--navy); font-size: clamp(1.3rem, 3.6vw, 1.75rem); margin-top: 32px; }
.prose h3 { font-family: 'Poppins', sans-serif; color: var(--navy); font-size: 1.1rem; margin-top: 22px; }
.prose ul, .prose ol { padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; font-size: .93rem; }
.prose th { background: var(--fog); font-weight: 600; color: var(--navy); }

/* Price cards */
.price-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.price-card h3 { font-family: 'Poppins', sans-serif; color: var(--navy); margin-bottom: 6px; font-size: 1.15rem; }
.price-card .price { font-size: 1.9rem; font-weight: 800; color: var(--green-dark); font-family: 'Poppins', sans-serif; line-height: 1.1; }
.price-card .price small { display: block; font-size: .8rem; font-weight: 600; color: var(--slate); margin-top: 4px; }
.price-card.featured { border-color: var(--green); box-shadow: 0 10px 30px rgba(22,199,154,.16); }

.note-box { background: var(--fog); border-left: 4px solid var(--blue); padding: 14px 16px; border-radius: 8px; font-size: .92rem; color: var(--ink); }
.note-box strong { color: var(--navy); }

/* Contact/booking form */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.form-row { display: grid; gap: 14px; margin-bottom: 14px; }
@media (min-width: 620px) { .form-row.two { grid-template-columns: 1fr 1fr; } }
.form-row label { display: block; font-size: .86rem; font-weight: 600; color: var(--navy); margin-bottom: 5px; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 12px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink);
}
.form-row textarea { min-height: 110px; resize: vertical; }
.req { color: #c0392b; }

/* City page quick facts */
.fact-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.fact { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.fact .fact-label { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--slate); font-weight: 700; }
.fact .fact-value { font-size: 1rem; font-weight: 600; color: var(--navy); margin-top: 4px; }

/* Small-screen typography tightening */
@media (max-width: 600px) {
  .page-hero { padding: 30px 0 26px; }
  .section { padding: 34px 0; }
  .price-card { padding: 18px; }
}

/* Small phones (<=380px): the reserved device column leaves the headline column
   too narrow for long words like "Installation", so shrink the device and the
   reserved gutter, and ease the headline size. */
@media (max-width: 380px) {
  .hm-device { width: 92px; right: 14px; }
  .hm-loc-line, .hm-stars, .hm-h1 { padding-right: 104px; }
  .hm-h1 { font-size: 1.6rem; max-width: calc(15ch + 104px); }
}
@media (max-width: 340px) {
  .hm-device { width: 78px; right: 10px; opacity: .85; }
  .hm-loc-line, .hm-stars, .hm-h1 { padding-right: 88px; }
  .hm-h1 { font-size: 1.45rem; max-width: calc(15ch + 88px); }
}

/* =========================================================================
   PHP LAYER ADDITIONS
   -------------------------------------------------------------------------
   Everything above this line is the design package's stylesheet, unchanged.
   Everything below is styling the static package had no need for, because the
   markup it styles did not exist until the site became PHP:

     - accessibility utilities the shared includes emit (.sr-only, and the
       reduced-motion block the package omitted entirely)
     - the breadcrumb trail, now rendered once by includes/header.php instead of
       being inline-styled into 24 pages
     - the recalibration page, which is a new page on this site
     - form status messages and the Turnstile widget, for book-install.php
     - the handful of footer and icon classes the PHP footer introduces

   It uses the SAME :root tokens defined at the top of this file. Nothing here
   redefines a colour; a value that is not a var() is a value that had no token.
   ========================================================================= */

/* --- Accessibility utilities -------------------------------------------- */

/* Visually-hidden text for screen readers. Also used on the nav's menu
   checkbox, which must stay focusable, so this deliberately does NOT use
   display:none. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* The package styled .skip-link but never dropped it out of the flow, so it sat
   visible above the utility bar on every page. */
.skip-link{position:absolute;left:8px;top:-48px;z-index:1000;background:var(--navy);color:#fff;padding:10px 16px;border-radius:6px;font-weight:700;transition:top .15s}
.skip-link:focus{top:8px}

/* A visible focus ring on every interactive element. The package removed the
   default outline in places without replacing it. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,.menu-toggle-label:focus-visible{
  outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* --- Inline icons (lib/functions.php icon()) ----------------------------- */
.ico{width:1em;height:1em;flex:none;vertical-align:-.125em}
.feature-list .ico{width:20px;height:20px;color:var(--green-dark);margin-right:10px}
.nav-stars .ico{width:14px;height:14px;color:var(--gold)}

/* --- Breadcrumbs --------------------------------------------------------- */
.breadcrumbs{padding-top:14px}
.breadcrumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px;font-size:.88rem;color:var(--slate)}
/* The separator is generated, not typed into the markup, so it is never read
   aloud as "slash" between every crumb. */
.breadcrumbs li+li::before{content:"/";margin-right:4px;color:var(--line)}

/* --- Footer additions ---------------------------------------------------- */
.footer-heading{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:#fff;margin:0 0 14px}
.footer-phone a{color:#fff;font-weight:700;font-size:1.05rem}
.footer-areas .footer-cities{margin-top:0}

/* --- Form status + Turnstile (book-install.php, partners.php) ------------- */
.form-note{border-radius:8px;padding:12px 16px;font-size:.9rem;font-weight:600;margin-bottom:16px}
.form-note.ok{background:rgba(22,199,154,.12);color:var(--green-dark);border:1px solid rgba(22,199,154,.4)}
.form-note.err{background:#fdecec;color:#b3261e;border:1px solid #f5c6c6}
.cf-turnstile{margin-top:20px}
.cf-turnstile iframe{max-width:100%}

/* --- Recalibration page --------------------------------------------------- */
.recal{padding:clamp(32px,6vw,64px) 0;text-align:center}
.recal-title{color:var(--navy);font-size:clamp(24px,4vw,34px);margin-bottom:14px}
.recal-subtitle{color:var(--navy);font-size:clamp(20px,3vw,26px);margin:8px 0 18px}
.recal-intro{max-width:640px;margin:0 auto 28px;color:var(--slate)}

/* Step 1: phone entry. 16px minimum on the input is load-bearing - anything
   smaller makes iOS Safari zoom the page on focus. */
.recal-phone{max-width:420px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.recal-phone input{width:100%;padding:14px 16px;font-size:20px;text-align:center;border:1px solid var(--line);border-radius:8px}
.recal-phone .btn{align-self:center}

.recal-msg{margin:4px 0 0;font-size:.95rem}
.recal-msg.err{color:#c0392b}
.recal-msg a{font-weight:600}

/* Step 2: location select */
.recal-select{width:100%;max-width:420px;margin:0 auto;padding:12px 16px;font-size:17px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}

/* Step 3: schedulers */
.recal-info{max-width:760px;margin:24px auto;padding:18px 22px;background:var(--fog);border:1px solid var(--line);border-radius:10px;text-align:left;color:var(--slate);font-size:.88rem}
.recal-info p{margin:0 0 10px}.recal-info p:last-child{margin-bottom:0}
.recal-device-label{font-weight:600;color:var(--navy);margin:8px 0 16px}
.recal-devices{display:flex;justify-content:center;gap:32px;flex-wrap:wrap;margin-bottom:24px}
.recal-devices figure{margin:0}
.recal-devices img{margin:0 auto;width:clamp(120px,20vw,180px);height:auto}
.recal-devices figcaption{margin-top:8px;font-weight:600;color:var(--navy)}
.recal-iframe-wrap{max-width:820px;margin:0 auto}
.recal-iframe-wrap iframe{width:100%;max-width:800px;height:600px;border:0}

@media(max-width:520px){
  .recal-devices{gap:18px}
  .recal-iframe-wrap iframe{height:520px}
}

/* --- Video facade (home page) -------------------------------------------- */
/* The poster is a button, so it needs the button chrome removed rather than a
   div with a click handler bolted on: a button is focusable and operable from
   the keyboard for free, which the design package's <video> element was too. */
.video-facade{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;position:relative;border-radius:var(--radius);overflow:hidden;line-height:0}
.video-facade img{width:100%;height:auto;border-radius:var(--radius)}
/* The poster image carries its own play button, and the whole poster is the
   click target, so there is no overlay button: two read as two controls. */
.video-facade img{transition:filter .15s}
.video-facade:hover img{filter:brightness(1.08)}
.video-frame{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--radius);display:block}
.video-fallback{display:inline-block;margin-top:14px;font-weight:600;color:var(--blue)}

/* --- Form layout additions ----------------------------------------------- */
.form-card-title{font-family:'Poppins','Segoe UI',system-ui,sans-serif;color:var(--navy);font-size:1.25rem;margin-bottom:6px}
.form-card-sub{font-size:.9rem;color:var(--slate);margin-bottom:18px}
.form-submit{width:100%}
.form-fineprint{font-size:.8rem;color:var(--slate);margin-top:12px}
/* The honeypot. Off-screen rather than display:none or hidden — a bot that
   skips hidden inputs would skip the trap, which is the one thing it must not
   do. Kept out of the tab order and the a11y tree by the markup's tabindex=-1
   and aria-hidden. */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* --- Page hero variant used by 404.php ----------------------------------- */
.page-hero-centered{text-align:center}
.page-hero-centered .hero-cta{justify-content:center}

/* --- Location card blurb (home page, generated from config) --------------- */
.loc-blurb{font-size:.88rem;color:var(--slate);margin-bottom:16px}

/* =========================================================================
   ACCESSIBILITY: colour contrast (WCAG 2.2 AA, 1.4.3 / 1.4.11)
   -------------------------------------------------------------------------
   The brand green --green (#16C79A) is a BACKGROUND-ONLY colour behind white
   text at 2.17:1, and as text on the pale green chip at 2.98:1. Both are well
   under the 4.5:1 required for normal text, and the failures were on the
   elements that matter most: the primary button and the sticky "Tap to Call"
   bar that is the main mobile CTA.

   Rather than restyle the design, this darkens the same hue until it passes:

     --green-deep    #0b7a5e   5.30:1 on white text, 4.87:1 as chip text
     --green-deeper  #09644d   7.14:1  (hover / active, so the state change is
                                        still visible and also passes)

   --green itself is UNCHANGED and still correct wherever it is decorative or
   sits behind no text: borders, shadows, the aria-hidden check icons, the
   pale tints. Only the text-bearing combinations are overridden below.

   Verified with the contrast formula against the composited background, not
   against the rgba() value - a semi-transparent chip must be measured as it
   actually renders over white, or it scores far worse than it looks.
   ========================================================================= */
:root{
  --green-deep: #0b7a5e;
  --green-deeper: #09644d;
}

/* White text on green */
.btn-primary{background:var(--green-deep);box-shadow:0 8px 20px rgba(11,122,94,.3)}
.btn-primary:hover{background:var(--green-deeper)}
.step-num{background:var(--green-deep)}
.mobile-call-bar{background:var(--green-deep)}
.compare-table thead th.col-us{background:var(--green-deep)}

/* Green text on white or on the pale green tint.
   The eyebrow chip is the awkward one: its 10% green tint composites over
   --sky on .section-alt, not over white, so it renders #d2edec and needs the
   deeper of the two greens to clear 4.5:1 (it lands at 5.8:1). Measuring it
   against white, as the obvious calculation does, says it passes when it does
   not. */
.eyebrow{color:var(--green-deeper)}
.col-us.check{color:var(--green-deep)}
.form-note.ok{color:var(--green-deep)}
/* The FAQ "+" is an affordance, not decoration, so it carries the same
   requirement as the text beside it. */
.faq-item summary::after{color:var(--green-deep)}

/* The city ticker's label was gold; it is green now, to match the rest of the
   site's green.

   NOT --green-deep, which is the token the request named: the ticker sits on
   --navy, and --green-deep on navy is 1.76:1 - all but invisible, several times
   worse than the gold it replaces. A green ON a dark surface has to go the other
   way from a green on white. --green itself lands at 4.35:1, just under, so this
   is --green nudged two steps lighter to clear 4.5:1 for small bold text.
   #29D2A5 on --navy is 4.83:1. */
.ticker-label{color:#29D2A5}

/* Only the WRAPPER scrolls the comparison table, never the table itself.
   The package gave the table its own overflow below 640px, which made the
   scrollable box an element with no tabindex - unreachable by keyboard, so the
   right-hand columns were simply unavailable without a mouse. .table-scroll
   (already defined above) is the focusable container; the table goes back to
   laying out normally inside it. */
@media (max-width: 640px){
  .compare-table{display:table;overflow-x:visible}
}
.table-scroll:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* --- Classes replacing the design package's inline style attributes --------
   The package carried 16 one-off style="" attributes that each restated a
   token. They are classes now so the stylesheet stays the one place styling
   lives, and so a token change reaches them. */
.note-sm{font-size:.88rem;color:var(--slate)}
.card-note{margin-top:12px;color:var(--slate);font-size:.94rem}
.lede-sm{font-size:.9rem;color:var(--slate);margin-bottom:18px}
.muted{color:var(--slate)}
.card-title{font-family:'Poppins','Segoe UI',system-ui,sans-serif;color:var(--navy)}
.lead-lg{font-size:1.08rem}
.pill-green{background:rgba(22,199,154,.08);border-color:rgba(22,199,154,.2);font-size:.78rem}
.mt-14{margin-top:14px}
.mt-20{margin-top:20px}
.mt-28{margin-top:28px}
.mt-34{margin-top:34px}
/* .quote is italic by default; these three are body copy that happens to sit in
   a quote card, so they opt out rather than each restating font-style inline. */
.quote-plain{font-style:normal}

/* --- WCAG 2.2 AA 1.4.1: links in body text must not rely on colour alone ----
   The package set `a { text-decoration: none }` globally, so an inline link
   inside a paragraph was distinguishable from the text around it only by being
   blue - which is exactly the failure 1.4.1 describes, and axe flags it as
   serious.

   Underlines are restored for links inside <main> body copy only. Navigation,
   buttons, cards, the city ticker and the footer are excluded: those are lists
   of links or discrete controls, where position and shape already do the work
   and underlining every one would be noise. */
main p a:not(.btn):not([class*="btn-"]),
main li a:not(.btn):not([class*="btn-"]),
main address a:not(.btn),
.prose a:not(.btn){
  text-decoration:underline;
  text-underline-offset:2px;
}
/* These ARE link lists, not links in a sentence. */
.ticker-track a, .footer-cities a, .loc-actions a, .hero-cta a, .nav-reviews{text-decoration:none}

/* --- WCAG 2.2 AA 2.5.8 Target Size -----------------------------------------
   The menu toggle rendered at 28x28. It is the most-tapped control on a phone
   and the only way to reach the navigation there, so it gets the full 44x44 the
   group's standard asks for on touch breakpoints. The icon itself stays 24px;
   padding does the work, so nothing about the design changes visually.

   Scoped to the SAME breakpoint that shows the toggle. Unscoped, its
   `display:inline-flex` overrode the base `display:none` further up this file
   and the hamburger sat next to the full desktop nav at every width. The
   right-hand margin:auto lives here too, for the same reason: a `margin`
   shorthand down here silently cancelled the `margin-left:auto` set in the
   breakpoint above. */
@media (max-width: 960px){
  .menu-toggle-label{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:44px;min-height:44px;
    /* -8px on three sides keeps the optical position it had at 28x28;
       auto on the left keeps it pushed to the end of the header row. */
    margin:-8px -8px -8px auto;
    cursor:pointer;
  }
}
.menu-toggle-label svg{width:24px;height:24px}

/* Form labels sat at 23px against a 24px minimum. A label is exempt when it
   labels a taller field, but the extra pixel costs nothing and makes the whole
   label comfortably tappable to focus its input. */
.pform label{display:inline-block;min-height:24px;line-height:1.5}

/* --- Footer logo on the dark surface ---------------------------------------
   The logo is a real transparent PNG, so it needs no background plate. But its
   ink is navy, which against the navy footer is close to invisible - solving the
   transparency exposed a contrast problem rather than removing one.

   brightness(0) invert(1) flattens it to solid white: the mark loses its colour
   but becomes legible, which is the right trade on a dark surface and is what
   the sibling sites do with the same logo family. The header copy is untouched -
   it sits on white, where the navy ink is correct.

   If a white/reversed version of the logo is ever supplied, drop this filter and
   point the footer at that asset instead. */
.footer-brand .brand img{filter:brightness(0) invert(1)}

/* --- Recalibration: third-party partner shop ------------------------------
   Lake Forest has no Fullslate calendar; it books through the partner's own
   site. Styled as a card rather than made to look like the embedded scheduler,
   because it behaves differently - it navigates off-site. */
.recal-partner{max-width:640px;margin:0 auto;padding:26px 24px;background:var(--fog);border:1px solid var(--line);border-radius:10px}
.recal-partner p{color:var(--slate)}
.recal-partner .btn{margin:6px 0 14px}
.recal-partner-note{font-size:.88rem;margin-bottom:0}