:root{--color-bg:#f7f9fc;--color-surface:#ffffff;--color-ink:#102033;--color-muted:#5c6a7a;--color-line:#d9e1ea;--color-brand:#0b2447;--color-brand-2:#155e8a;--color-accent:#c47a2c;--shadow:0 18px 45px rgba(13,31,55,.10);--radius:18px;--max:1160px;--font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--font);color:var(--color-ink);background:var(--color-bg);line-height:1.6}a{color:var(--color-brand-2);text-decoration-thickness:.08em;text-underline-offset:.18em}a:hover{text-decoration-thickness:.14em}img{max-width:100%;height:auto}.container{width:min(100% - 32px,var(--max));margin-inline:auto}.narrow{max-width:840px}.content{max-width:860px}.skip-link{position:absolute;left:1rem;top:-5rem;background:var(--color-ink);color:#fff;padding:.75rem 1rem;border-radius:10px;z-index:20}.skip-link:focus{top:1rem}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}*:focus-visible{outline:3px solid var(--color-accent);outline-offset:3px}.site-header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.96);border-bottom:1px solid var(--color-line);backdrop-filter:saturate(140%) blur(8px)}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:76px}.brand{display:flex;align-items:center;gap:.75rem;color:var(--color-ink);text-decoration:none}.brand small{display:block;color:var(--color-muted);font-size:.76rem}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--color-brand);color:#fff;font-weight:800}.site-nav{display:none;align-items:center;gap:.35rem}.site-nav a,.nav-menu-label{padding:.72rem .82rem;border-radius:999px;border:0;background:transparent;color:var(--color-ink);font:inherit;text-decoration:none;cursor:pointer}.site-nav a:hover,.nav-menu-label:hover{background:#eef4fa}.nav-cta{background:var(--color-brand)!important;color:#fff!important}.call-link{font-weight:700}.nav-toggle{display:inline-flex;width:46px;height:46px;border:1px solid var(--color-line);border-radius:12px;background:#fff;align-items:center;justify-content:center}.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{display:block;width:22px;height:2px;background:var(--color-ink);content:""}.nav-toggle-bars::before{transform:translateY(-7px)}.nav-toggle-bars::after{transform:translateY(5px)}.site-nav.is-open{display:flex;position:absolute;left:0;right:0;top:76px;flex-direction:column;align-items:stretch;background:#fff;border-bottom:1px solid var(--color-line);padding:1rem}.nav-services{position:relative}.service-menu{display:none}.service-menu.is-open{display:grid;gap:.15rem;padding:.5rem;border:1px solid var(--color-line);border-radius:14px;background:#fff}.hero,.page-hero{background:linear-gradient(135deg,#ffffff 0%,#eef5fb 100%);padding:clamp(3rem,7vw,6rem) 0;border-bottom:1px solid var(--color-line)}.hero-grid,.split,.two-col,.form-layout{display:grid;gap:1.5rem}.eyebrow{color:var(--color-brand-2);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem}h1,h2,h3{line-height:1.15;margin:0 0 .8rem}h1{font-size:clamp(2.15rem,5vw,4.8rem);letter-spacing:-.045em}h2{font-size:clamp(1.55rem,3vw,2.35rem);letter-spacing:-.03em}h3{font-size:1.15rem}.lead{font-size:clamp(1.12rem,2vw,1.35rem);color:var(--color-muted);max-width:68ch}.slogan{font-size:1.2rem;font-weight:800;color:var(--color-brand)}.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.25rem}.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.82rem 1.15rem;border:2px solid var(--color-brand);border-radius:999px;background:var(--color-brand);color:#fff;text-decoration:none;font-weight:800;cursor:pointer}.button.secondary{background:transparent;color:var(--color-brand)}.button.light{border-color:#fff;color:#fff}.section{padding:clamp(2.5rem,6vw,5rem) 0}.section.alt{background:#fff;border-block:1px solid var(--color-line)}.hero-panel,.card,.cta-panel,.contact-form,.contact-aside,.faq-item{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow)}.hero-panel ul,.check-list{padding-left:1.25rem}.card-grid{display:grid;grid-template-columns:1fr;gap:1rem}.card h3 a{color:var(--color-ink)}.support-card{margin-top:1rem}.steps{display:grid;gap:1rem}.steps article{background:#fff;border:1px solid var(--color-line);border-radius:var(--radius);padding:1.25rem}.steps span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--color-brand);color:#fff;font-weight:800;margin-bottom:.8rem}.cta-band{padding:clamp(2.5rem,5vw,4rem) 0;background:var(--color-brand);color:#fff}.cta-band p{color:#dce8f3}.cta-band .button{border-color:#fff}.related-links{display:flex;flex-wrap:wrap;gap:.75rem;padding:0;list-style:none}.related-links a{display:inline-flex;border:1px solid var(--color-line);background:#fff;border-radius:999px;padding:.7rem 1rem;text-decoration:none;font-weight:700}.faq-list{display:grid;gap:1rem}.contact-form{display:grid;gap:.65rem}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid var(--color-line);border-radius:12px;padding:.85rem 1rem;font:inherit;background:#fff;color:var(--color-ink)}.contact-form label{font-weight:750}.hidden{display:none}.consent{font-size:.95rem;color:var(--color-muted)}.site-footer{background:#07182d;color:#dce8f3;padding:3rem 0 1.25rem}.site-footer h2{font-size:1rem;color:#fff}.site-footer a{color:#fff}.site-footer ul{padding-left:1.1rem}.footer-grid{display:grid;gap:1.5rem}.footer-bottom{border-top:1px solid rgba(255,255,255,.18);margin-top:2rem;padding-top:1rem;color:#b9c8d8}@media (min-width:760px){.card-grid{grid-template-columns:repeat(2,1fr)}.steps,.two-col,.form-layout,.split{grid-template-columns:repeat(2,1fr)}.hero-grid{grid-template-columns:1.45fr .8fr;align-items:center}.footer-grid{grid-template-columns:1.35fr 1fr 1fr 1fr}}@media (min-width:980px){.nav-toggle{display:none}.site-nav{display:flex}.nav-services:hover .service-menu,.nav-services:focus-within .service-menu{display:grid;position:absolute;min-width:230px;right:0;top:calc(100% + .35rem);padding:.5rem;border:1px solid var(--color-line);border-radius:14px;background:#fff;box-shadow:var(--shadow)}.card-grid{grid-template-columns:repeat(3,1fr)}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* =========================================================
   Phase 1 additions (v0.2). Append-only — preserves v0.1 baseline.
   Token-cascade safe: all custom-property consumers use inline
   var(--token, fallback) syntax. No new :root block is introduced,
   so upstream token definitions take precedence whenever present.
   ========================================================= */

/* Section lead paragraph used under H2s */
.section-lead {
  margin: 0 0 1.25rem;
  max-width: 60ch;
  color: var(--text-muted, #4a5260);
}

/* Common-reasons grid on the homepage */
.reasons .reason-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.75rem 1.25rem;
}
.reasons .reason-grid li {
  padding: 0.85rem 1rem;
  border: 1px solid var(--hairline, rgba(0, 0, 0, 0.08));
  border-radius: 8px;
  background: #fff;
}

/* Repair-first emphasis block */
.repair-first h2 { margin-top: 0; }
.repair-first p  { max-width: 70ch; }

/* Hero compact variant (used on form + thank-you pages) */
.hero.compact { padding: 2.5rem 0 1.5rem; }
.hero.compact h1 { margin: 0.25rem 0 0.75rem; }

/* Homepage FAQ block */
.faq .faq-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.faq .faq-item {
  padding: 1rem 1.1rem;
  border: 1px solid var(--hairline, rgba(0, 0, 0, 0.08));
  border-radius: 8px;
  background: #fff;
}
.faq .faq-item dt {
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.faq .faq-item dd {
  margin: 0;
  color: var(--text-muted, #4a5260);
  max-width: 70ch;
}

/* Appointment form layout */
.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}
@media (min-width: 880px) {
  .form-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
    gap: 2.5rem;
  }
}

.appointment-form .field {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.1rem;
}
.appointment-form .field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1rem;
}
@media (min-width: 600px) {
  .appointment-form .field-row { grid-template-columns: 1fr 1fr; }
}
.appointment-form label {
  font-weight: 600;
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
}
.appointment-form input[type="text"],
.appointment-form input[type="tel"],
.appointment-form input[type="email"],
.appointment-form select,
.appointment-form textarea {
  font: inherit;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--field-border, rgba(0, 0, 0, 0.25));
  border-radius: 6px;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}
.appointment-form textarea {
  resize: vertical;
  min-height: 120px;
}

/* Accent-token focus outlines (cascade-safe via inline fallback) */
.appointment-form input:focus,
.appointment-form select:focus,
.appointment-form textarea:focus,
.appointment-form .checkbox-field input:focus {
  outline: 2px solid var(--accent-focus, var(--accent, #1f4d8a));
  outline-offset: 2px;
}

.appointment-form .checkbox-field label {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.6rem;
  font-weight: 400;
  font-size: 0.95rem;
}
.appointment-form .checkbox-field input { margin-top: 0.25rem; }

.appointment-form .req {
  color: #b00020;
  font-weight: 700;
}
.appointment-form .form-note {
  margin-top: 0.85rem;
  font-size: 0.875rem;
  color: var(--text-muted, #4a5260);
}

/* Honeypot field — visually hidden, accessible-friendly */
.appointment-form .hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Form sidebar cards */
.form-aside {
  display: grid;
  gap: 1rem;
  align-content: start;
}
.aside-card {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--hairline, rgba(0, 0, 0, 0.08));
  border-radius: 8px;
  background: #fff;
}
.aside-card h2 {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
}
.aside-card ol,
.aside-card ul {
  margin: 0 0 0 1.1rem;
  padding: 0;
}
.aside-card .contact-list {
  list-style: none;
  margin-left: 0;
}
.aside-card p:last-child,
.aside-card ul:last-child,
.aside-card ol:last-child {
  margin-bottom: 0;
}

/* =========================================================
   SOR Content Pass v1 additions. Append-only.
   ========================================================= */

/* Trust band — compact horizontal trust-signal row */
.trust-band {
  padding: 1.25rem 0;
  background: var(--surface-alt, #f4f6f9);
  border-top: 1px solid var(--hairline, rgba(0,0,0,0.08));
  border-bottom: 1px solid var(--hairline, rgba(0,0,0,0.08));
}
.trust-band ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: center;
}
.trust-band li {
  font-size: 0.9rem;
  color: var(--text-muted, #4a5260);
  padding: 0.2rem 0;
}
.trust-band li::before {
  content: "✓ ";
  font-weight: 700;
  color: var(--accent, #1f4d8a);
}

/* Owner block — photo left, copy right; stacks on mobile */
.owner-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 680px) {
  .owner-block {
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    align-items: center;
  }
}
.owner-block img {
  width: 100%;
  max-width: 200px;
  height: 240px;
  object-fit: cover;
  object-position: center top;
  border-radius: 8px;
  display: block;
}
.owner-block-copy h2 { margin-top: 0; }

/* Credentials list — About page license block */
.credentials-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.credentials-list li {
  padding: 0.75rem 1rem;
  border: 1px solid var(--hairline, rgba(0,0,0,0.08));
  border-radius: 6px;
  background: #fff;
  font-size: 0.95rem;
  color: var(--text-muted, #4a5260);
}
.credentials-list li strong {
  display: block;
  color: var(--text, #1a1f2e);
  margin-bottom: 0.15rem;
}

/* =========================================================
   Landers Brand Polish — v1.1 color layer.
   Append-only. Branch: landers-sor-content-pass-v1.
   ========================================================= */

/* 1 · Brand token overrides
   Maps existing tokens to confirmed Landers shirt colors.
   --accent / --accent-focus alias the phase-1/SOR token names. */
:root {
  --color-brand:   #1F5DA8;  /* Landers Blue */
  --color-navy:    #0B2A55;  /* Deep Landers Navy */
  --color-accent:  #66C313;  /* Landers Green */
  --color-brand-2: #1F5DA8;  /* Landers Blue — links, eyebrow */
  --accent:        #66C313;  /* phase-1/SOR alias */
  --accent-focus:  #66C313;  /* form focus ring alias */
}

/* 2 · Header — reinforce blue identity */
.site-header {
  border-bottom-color: rgba(31, 93, 168, 0.15);
}
.nav-cta:hover {
  background: #0B2A55 !important;
}

/* 3 · Hero — Landers blue field with white text */
.hero,
.page-hero {
  background: linear-gradient(150deg, #1F5DA8 0%, #0B2A55 100%);
  border-bottom: none;
  color: #fff;
}
.hero .eyebrow,
.page-hero .eyebrow {
  color: #66C313;
}
.hero h1,
.page-hero h1 {
  color: #fff;
}
.hero .lead,
.page-hero .lead {
  color: rgba(255, 255, 255, 0.90);
}
.hero .slogan,
.page-hero .slogan {
  color: rgba(255, 255, 255, 0.90);
}
/* Primary CTA in hero: white fill for contrast against blue bg */
.hero .button:not(.secondary):not(.light),
.page-hero .button:not(.secondary):not(.light) {
  background: #fff;
  border-color: #fff;
  color: #1F5DA8;
}
.hero .button:not(.secondary):not(.light):hover,
.page-hero .button:not(.secondary):not(.light):hover {
  background: #ddeeff;
  border-color: #ddeeff;
}
/* Secondary/outline button in hero: white ghost */
.hero .button.secondary,
.page-hero .button.secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.70);
  color: #fff;
}
.hero .button.secondary:hover,
.page-hero .button.secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}
/* Hero panel (white card): reset inherited white text to dark ink */
.hero-panel {
  color: var(--color-ink);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
}
.hero-panel h2 {
  color: var(--color-ink);
}

/* 4 · Trust band — blue tint background, green checkmarks */
.trust-band {
  background: #eef4fb;
  border-top-color: rgba(31, 93, 168, 0.12);
  border-bottom-color: rgba(31, 93, 168, 0.12);
}
.trust-band li {
  color: #2a3f5c;
}
.trust-band li::before {
  color: #66C313;
}

/* 5 · Button hover states (outside hero/CTA-band contexts) */
.button:hover {
  background: #0B2A55;
  border-color: #0B2A55;
  color: #fff;
}
.button.secondary:hover {
  background: #1F5DA8;
  border-color: #1F5DA8;
  color: #fff;
}

/* 6 · Service / content cards — green top accent, blue border */
.card {
  border-color: rgba(31, 93, 168, 0.12);
  border-top: 3px solid #66C313;
}
.card:hover {
  border-top-color: #1F5DA8;
  box-shadow: 0 22px 48px rgba(31, 93, 168, 0.13);
}
.card h3 a {
  color: #1F5DA8;
}
.card h3 a:hover {
  color: #0B2A55;
  text-decoration: none;
}

/* 7 · Reason grid — green left accent */
.reasons .reason-grid li {
  border-color: rgba(31, 93, 168, 0.10);
  border-left: 3px solid #66C313;
  padding-left: 0.9rem;
}

/* 8 · Section heading — green accent bar
   Scoped to direct-child h2s of .container inside .section,
   which covers main content headings but not card/panel h2s. */
.section > .container > h2::after {
  content: '';
  display: block;
  width: 2.25rem;
  height: 3px;
  background: #66C313;
  border-radius: 2px;
  margin-top: 0.45rem;
}

/* 9 · CTA band — deep navy, Landers Blue primary, ghost secondary */
.cta-band {
  background: #0B2A55;
}
.cta-band .button:not(.secondary):not(.light) {
  background: #1F5DA8;
  border-color: #1F5DA8;
  color: #fff;
}
.cta-band .button:not(.secondary):not(.light):hover {
  background: #fff;
  border-color: #fff;
  color: #0B2A55;
}
.cta-band .button.secondary:hover,
.cta-band .button.light:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
  color: #fff;
}

/* 10 · Owner block photo — subtle blue frame */
.owner-block img {
  border: 3px solid rgba(31, 93, 168, 0.18);
}

/* 11 · Credentials list — green left accent */
.credentials-list li {
  border-color: rgba(31, 93, 168, 0.10);
  border-left: 3px solid #66C313;
}

/* 12 · Aside cards (form sidebar) — blue top accent */
.aside-card {
  border-color: rgba(31, 93, 168, 0.12);
  border-top: 3px solid #1F5DA8;
}

/* 13 · FAQ — green left accent, Landers Blue question label */
.faq .faq-item {
  border-color: rgba(31, 93, 168, 0.10);
  border-left: 3px solid #66C313;
}
.faq .faq-item dt {
  color: #1F5DA8;
}

/* 14 · Related links — branded blue, fill on hover */
.related-links a {
  color: #1F5DA8;
  border-color: rgba(31, 93, 168, 0.18);
}
.related-links a:hover {
  background: #1F5DA8;
  border-color: #1F5DA8;
  color: #fff;
  text-decoration: none;
}

/* 15 · Focus ring — Landers Green (overrides base amber ring) */
*:focus-visible {
  outline-color: #66C313;
}

/* 16 · Footer — deep navy */
.site-footer {
  background: #0B2A55;
}

/* =========================================================
   Brand-Strengthening Pass v1.2 — CSS-only append.
   Targets: section rhythm, heading accents, card depth,
   step accents, nav hover, CTA pop, footer micro-accents.
   ========================================================= */

/* B1 · Section background rhythm
   Replace flat gray/white with a light Landers Blue tint on
   default sections; keep .alt white for contrast. */
.section {
  background: linear-gradient(180deg, #eef4fb 0%, #f4f8fd 100%);
}
.section.alt {
  background: #ffffff;
  border-block-color: rgba(31, 93, 168, 0.09);
}

/* B2 · Section heading accent — wider green bar with a thin blue extension */
.section > .container > h2::after {
  width: 3.5rem;
  height: 4px;
  background: linear-gradient(
    to right,
    #66C313 0,
    #66C313 2rem,
    rgba(31, 93, 168, 0.30) 2rem,
    rgba(31, 93, 168, 0.30) 3.5rem
  );
  margin-top: 0.55rem;
}

/* B3 · Cards — thicker top accent, blue-tinted shadow, smooth hover lift */
.card {
  border-top-width: 4px;
  box-shadow: 0 4px 18px rgba(31, 93, 168, 0.09);
  transition: box-shadow 0.2s ease, border-top-color 0.2s ease;
}
.card:hover {
  box-shadow: 0 14px 36px rgba(31, 93, 168, 0.18);
}

/* B4 · Steps — green left accent reinforces brand in process sections */
.steps article {
  border-left: 3px solid #66C313;
  border-color: rgba(31, 93, 168, 0.12);
  padding-left: 1.35rem;
}

/* B5 · Nav hover — add Landers Blue text color on hover */
.site-nav a:hover,
.nav-menu-label:hover {
  color: #1F5DA8;
  background: #eef4fb;
}

/* B6 · Brand-mark — pin to Landers Blue */
.brand-mark {
  background: #1F5DA8;
}

/* B7 · CTA band — green primary button for maximum contrast on deep navy */
.cta-band .button:not(.secondary):not(.light) {
  background: #66C313;
  border-color: #66C313;
  color: #0B2A55;
}
.cta-band .button:not(.secondary):not(.light):hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #0B2A55;
}

/* B8 · Footer — green link hover, green section divider lines, green markers */
.site-footer a:hover {
  color: #66C313;
  text-decoration-color: #66C313;
}
.site-footer h2 {
  border-bottom: 1px solid rgba(102, 195, 19, 0.28);
  padding-bottom: 0.45rem;
}
.site-footer ul li::marker {
  color: #66C313;
}
.footer-bottom {
  border-top-color: rgba(102, 195, 19, 0.20);
}

/* B9 · Reason grid items — white fill on blue-tinted background, hover shadow */
.reasons .reason-grid li {
  background: #ffffff;
  transition: box-shadow 0.2s ease;
}
.reasons .reason-grid li:hover {
  box-shadow: 0 4px 14px rgba(31, 93, 168, 0.12);
}

/* B10 · FAQ items — hover shadow for interactivity signal */
.faq .faq-item {
  transition: box-shadow 0.2s ease;
}
.faq .faq-item:hover {
  box-shadow: 0 6px 18px rgba(31, 93, 168, 0.10);
}

/* B11 · Aside cards — hover shadow consistent with card treatment */
.aside-card {
  transition: box-shadow 0.2s ease;
}
.aside-card:hover {
  box-shadow: 0 8px 24px rgba(31, 93, 168, 0.14);
}

/* =========================================================
   Green Accent Pass v1.3 — CSS-only append.
   Targets seven unstyled or under-accented elements:
   text-link, call-link hover, active nav indicator,
   hero-panel bullets, service-menu hover,
   step circle ring, form submit hover.
   ========================================================= */

/* C1 · Text links — faint blue underline at rest, solid green on hover */
.text-link {
  font-weight: 600;
  text-decoration-color: rgba(31, 93, 168, 0.28);
}
.text-link:hover {
  color: #0B2A55;
  text-decoration-color: #66C313;
  text-decoration-thickness: 2px;
}

/* C2 · Call link — green text on hover surfaces phone as primary action */
.site-nav .call-link:hover {
  color: #66C313;
}

/* C3 · Active nav link — green underline "you are here" indicator */
.site-nav a[aria-current="page"],
.service-menu a[aria-current="page"] {
  color: #1F5DA8;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #66C313;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* C4 · Hero panel bullets — green marker matching trust-band checkmark colour */
.hero-panel ul li::marker {
  color: #66C313;
}

/* C5 · Service menu links — hover tint and blue text matching main-nav hover */
.service-menu a {
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  color: var(--color-ink);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.service-menu a:hover {
  background: #eef4fb;
  color: #1F5DA8;
}

/* C6 · Step number circles — soft green outer ring echoes the step left-accent */
.steps span {
  box-shadow: 0 0 0 3px rgba(102, 195, 19, 0.22);
}

/* C7 · Appointment form submit — green hover echoes CTA-band action pattern */
.appointment-form button[type="submit"]:hover {
  background: #66C313;
  border-color: #66C313;
  color: #0B2A55;
}

/* =========================================================
   Green-Forward Brand Pass v1.4 — CSS-only append.
   Elevates green from micro-accent to dominant brand/conversion layer.
   Bright Landers Green: #34EA34  |  Deep Navy: #0B2A55
   ========================================================= */

/* D1 · Header nav CTA — green pill with deep navy text */
.nav-cta {
  background: #34EA34 !important;
  border-color: #34EA34 !important;
  color: #0B2A55 !important;
}
.nav-cta:hover {
  background: #ffffff !important;
  border-color: #0B2A55 !important;
  color: #0B2A55 !important;
}

/* D2 · Nav links — green underline accent on hover */
.site-nav a:not(.nav-cta):hover,
.nav-menu-label:hover {
  text-decoration: underline;
  text-decoration-color: #34EA34;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* D3 · Hero primary CTA — green, not white; deep navy text */
.hero .button:not(.secondary):not(.light),
.page-hero .button:not(.secondary):not(.light) {
  background: #34EA34;
  border-color: #34EA34;
  color: #0B2A55;
}
.hero .button:not(.secondary):not(.light):hover,
.page-hero .button:not(.secondary):not(.light):hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #0B2A55;
}

/* D4 · Hero h1 — green accent rule (visible brand line under headline) */
.hero h1::after,
.page-hero h1::after {
  content: '';
  display: block;
  width: 6rem;
  height: 4px;
  background: #34EA34;
  border-radius: 2px;
  margin-top: 0.65rem;
  box-shadow: 0 0 14px rgba(52, 234, 52, 0.38);
}

/* D5 · Section heading accent — 5px high, 6rem wide, bright green */
.section > .container > h2::after {
  width: 6rem;
  height: 5px;
  background: #34EA34;
  margin-top: 0.5rem;
  box-shadow: 0 2px 6px rgba(52, 234, 52, 0.20);
}

/* D6 · Cards — 6px green top band with subtle green top glow */
.card {
  border-top: 6px solid #34EA34;
  box-shadow: 0 -2px 6px rgba(52, 234, 52, 0.12), 0 4px 18px rgba(31, 93, 168, 0.09);
}
.card:hover {
  border-top-color: #34EA34;
  box-shadow: 0 -2px 6px rgba(52, 234, 52, 0.18), 0 14px 36px rgba(31, 93, 168, 0.18);
}

/* D7 · Reason grid — 5px green left accent */
.reasons .reason-grid li {
  border-left: 5px solid #34EA34;
  padding-left: 0.85rem;
}

/* D8 · Trust band — strong green top rule; checkmarks stay green */
.trust-band {
  border-top: 3px solid #34EA34;
  border-bottom: 2px solid rgba(52, 234, 52, 0.30);
}
.trust-band li::before {
  color: #34EA34;
}

/* D9 · Steps — green circle fill with deep navy text */
.steps span {
  background: #34EA34;
  color: #0B2A55;
  box-shadow: 0 0 0 4px rgba(52, 234, 52, 0.22);
}

/* D10 · Steps article — reinstate green left accent (fixes B4 border-color conflict) */
.steps article {
  border: 1px solid rgba(31, 93, 168, 0.12);
  border-left: 5px solid #34EA34;
}

/* D11 · FAQ — 5px green left border; green focus cue */
.faq .faq-item {
  border-left: 5px solid #34EA34;
}
.faq .faq-item:focus-within {
  box-shadow: 0 0 0 2px #34EA34;
}

/* D12 · Aside cards / form sidebar — 5px green left accent */
.aside-card {
  border-left: 5px solid #34EA34;
}

/* D13 · Contact aside — 5px green left accent */
.contact-aside {
  border-left: 5px solid #34EA34;
}

/* D14 · Credentials list — 5px green left accent */
.credentials-list li {
  border-left: 5px solid #34EA34;
}

/* D15 · Footer — visible green top border; green h2 headings and markers */
.site-footer {
  border-top: 4px solid #34EA34;
}
.site-footer h2 {
  color: #66C313;
  border-bottom-color: rgba(52, 234, 52, 0.38);
}
.site-footer ul li::marker {
  color: #34EA34;
}
.site-footer a:hover {
  color: #66C313;
}
.footer-bottom {
  border-top-color: rgba(52, 234, 52, 0.25);
}

/* D16 · Appointment form submit — green pill default */
.appointment-form button[type="submit"] {
  background: #34EA34;
  border: 2px solid #34EA34;
  border-radius: 999px;
  color: #0B2A55;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.appointment-form button[type="submit"]:hover {
  background: #0B2A55;
  border-color: #0B2A55;
  color: #ffffff;
}

/* =========================================================
   Blue-Shirt Composition Pass v1.5 — CSS-only append.
   Shifts site composition to dominant blue surfaces, white
   lettering, and green conversion accents — mirroring the
   Landers shirt: blue field, white text, green accent.
   Landers Blue: #1F5DA8  |  Deep Navy: #0B2A55
   Bright Green: #34EA34  |  Shirt Green: #66C313
   ========================================================= */

/* E1 · Body — deep navy site canvas */
body {
  background: #0B2A55;
  color: #ffffff;
}

/* E2 · Header — deep navy field, white nav text, green bottom rule */
.site-header {
  background: rgba(11, 42, 85, 0.97);
  border-bottom: 3px solid #34EA34;
  backdrop-filter: saturate(120%) blur(8px);
}
.brand {
  color: #ffffff;
}
.brand small {
  color: rgba(255, 255, 255, 0.70);
}
.site-nav a:not(.nav-cta),
.nav-menu-label {
  color: rgba(255, 255, 255, 0.88);
}
.site-nav a:not(.nav-cta):hover,
.nav-menu-label:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
}
.nav-toggle {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  background: #ffffff;
}
/* Mobile open nav — stays deep navy */
.site-nav.is-open {
  background: #0B2A55;
  border-bottom-color: rgba(52, 234, 52, 0.40);
}
/* Service dropdown stays white — scannable menu on hover */
.service-menu,
.service-menu.is-open {
  background: #ffffff;
}
.service-menu a {
  color: #102033;
}
.service-menu a:hover {
  background: #eef4fb;
  color: #1F5DA8;
}
/* Active nav indicator on dark header */
.site-nav a[aria-current="page"] {
  color: #34EA34;
  text-decoration-color: #34EA34;
}

/* E3 · Sections — Landers Blue fields, white text */
.section {
  background: #1F5DA8;
}
.section h1,
.section h2,
.section h3,
.section h4 {
  color: #ffffff;
}
.section p,
.section li,
.section .section-lead,
.section .lead {
  color: rgba(255, 255, 255, 0.88);
}
.section .eyebrow {
  color: #66C313;
}
.section .slogan {
  color: #34EA34;
}
.section a:not(.button):not(.nav-cta) {
  color: rgba(255, 255, 255, 0.88);
  text-decoration-color: rgba(52, 234, 52, 0.45);
}
.section a:not(.button):not(.nav-cta):hover {
  color: #34EA34;
}
/* Alt sections — deeper navy for contrast rhythm */
.section.alt {
  background: #0d2240;
  border-block-color: rgba(52, 234, 52, 0.18);
}

/* E4 · Cards — deep navy panels, white titles, green top band */
.card {
  background: #0B2A55;
  border-color: rgba(52, 234, 52, 0.22);
  color: #ffffff;
}
.card h3,
.card h3 a {
  color: #ffffff;
}
.card h3 a:hover {
  color: #34EA34;
  text-decoration: none;
}
.card p,
.card li {
  color: rgba(255, 255, 255, 0.85);
}

/* E5 · Hero panel — translucent navy, white text, green bullet markers */
.hero-panel {
  background: rgba(11, 42, 85, 0.75);
  border-color: rgba(52, 234, 52, 0.38);
  color: #ffffff;
  backdrop-filter: blur(4px);
}
.hero-panel h2 {
  color: #ffffff;
}
.hero-panel p,
.hero-panel li {
  color: rgba(255, 255, 255, 0.88);
}
.hero-panel a:not(.button) {
  color: #66C313;
}

/* E6 · Reason grid — navy panels on blue section */
.reasons .reason-grid li {
  background: #0B2A55;
  border-color: rgba(52, 234, 52, 0.22);
  color: rgba(255, 255, 255, 0.88);
}

/* E7 · Trust band — deep navy, white text, bright green checkmarks */
.trust-band {
  background: #0B2A55;
}
.trust-band li {
  color: rgba(255, 255, 255, 0.88);
}

/* E8 · Steps articles — navy panels, white text */
.steps article {
  background: #0B2A55;
  color: #ffffff;
}
.steps article h3 {
  color: #ffffff;
}
.steps article p {
  color: rgba(255, 255, 255, 0.88);
}

/* E9 · FAQ items — navy panels, green question label, near-white answer */
.faq .faq-item {
  background: #0B2A55;
  border-color: rgba(52, 234, 52, 0.22);
  color: #ffffff;
}
.faq .faq-item dt {
  color: #34EA34;
}
.faq .faq-item dd {
  color: rgba(255, 255, 255, 0.85);
}

/* E10 · Aside cards / form sidebar — navy panels, white text, green links */
.aside-card {
  background: #0B2A55;
  border-color: rgba(52, 234, 52, 0.22);
  color: #ffffff;
}
.aside-card h2 {
  color: #ffffff;
}
.aside-card p,
.aside-card li {
  color: rgba(255, 255, 255, 0.85);
}
.aside-card a:not(.button) {
  color: #66C313;
}
.aside-card a:not(.button):hover {
  color: #34EA34;
}

/* E11 · Contact aside — navy panel, white text */
.contact-aside {
  background: #0B2A55;
  border-color: rgba(52, 234, 52, 0.22);
  color: #ffffff;
}
.contact-aside h2,
.contact-aside h3 {
  color: #ffffff;
}
.contact-aside p,
.contact-aside li {
  color: rgba(255, 255, 255, 0.88);
}
.contact-aside a:not(.button) {
  color: #66C313;
}

/* E12 · Contact form container — navy panel; inputs stay white for usability */
.contact-form {
  background: #0B2A55;
  border-color: rgba(52, 234, 52, 0.22);
  color: #ffffff;
}
.contact-form label {
  color: #ffffff;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  background: #ffffff;
  color: #102033;
  border-color: rgba(255, 255, 255, 0.35);
}

/* E13 · Credentials list — navy items, white text */
.credentials-list li {
  background: #0B2A55;
  border-color: rgba(52, 234, 52, 0.22);
  color: rgba(255, 255, 255, 0.85);
}
.credentials-list li strong {
  color: #ffffff;
}

/* E14 · Owner section — inherits blue section bg; white copy, green photo frame */
.owner-block-copy h2 {
  color: #ffffff;
}
.owner-block-copy p {
  color: rgba(255, 255, 255, 0.88);
}
.owner-block img {
  border-color: rgba(52, 234, 52, 0.50);
}

/* E15 · Related links — navy pill, green text; override section-link specificity */
.related-links a,
.section .related-links a:not(.button):not(.nav-cta) {
  background: rgba(11, 42, 85, 0.85);
  border-color: rgba(52, 234, 52, 0.35);
  color: #34EA34;
  text-decoration: none;
}
.related-links a:hover,
.section .related-links a:hover {
  background: #34EA34;
  border-color: #34EA34;
  color: #0B2A55;
  text-decoration: none;
}

/* E16 · CTA panel — navy bg, white text */
.cta-panel {
  background: #0B2A55;
  border-color: rgba(52, 234, 52, 0.22);
  color: #ffffff;
}

/* E17 · CTA band — green accent rules to pop from blue sections */
.cta-band {
  border-top: 2px solid rgba(52, 234, 52, 0.32);
  border-bottom: 2px solid rgba(52, 234, 52, 0.32);
}

/* E18 · Appointment form — white labels on dark section bg */
.appointment-form label {
  color: #ffffff;
}
.appointment-form .form-note {
  color: rgba(255, 255, 255, 0.72);
}
.consent {
  color: rgba(255, 255, 255, 0.75);
}

/* E19 · Section lead in blue/dark contexts */
.section-lead {
  color: rgba(255, 255, 255, 0.85);
}

/* =========================================================
   Green Typography Pass v1.6 — CSS-only append.
   Makes major display headings and hero slogan green to
   match the Landers shirt: blue field, green lettering.
   Paragraphs remain white/near-white. No layout changes.
   ========================================================= */

/* F1 · Hero slogan — bright Landers Green on blue hero field */
.hero .slogan,
.page-hero .slogan {
  color: #34EA34;
}

/* F2 · Section h2 headings — bright green on Landers Blue sections
   More specific than E3's .section h2 (0-2-1 vs 0-1-1); preserves
   the green underline rule already in place via ::after. */
.section > .container > h2 {
  color: #34EA34;
}

/* F3 · CTA-band and CTA-panel headlines — green on deep navy */
.cta-band h2,
.cta-panel h2 {
  color: #34EA34;
}

/* =========================================================
   Eyebrow Bright Green Pass v1.7 — CSS-only append.
   Brightens small uppercase brand kicker text on blue fields.
   ========================================================= */

.hero .eyebrow,
.page-hero .eyebrow,
.section .eyebrow {
  color: #34EA34;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(52, 234, 52, 0.35);
}

/* =========================================================
   CTA Green Consistency Fix v1.8 — CSS-only append.
   Aligns CTA-band primary button to the same bright green
   as the header nav CTA (#34EA34), replacing the softer
   #66C313 set in B7.
   ========================================================= */

.cta-band .button:not(.secondary):not(.light) {
  background: #34EA34;
  border-color: #34EA34;
  color: #0B2A55;
}
.cta-band .button:not(.secondary):not(.light):hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #0B2A55;
}

/* =========================================================
   Light-Blue Heading Contrast Fix v1.9 — CSS-only append.
   On lighter Landers Blue section backgrounds (#1F5DA8),
   major h2 text reverts to white for legibility. Green
   headings are preserved only on dark navy contexts where
   the contrast is sufficient. Green underlines, buttons,
   borders, and card accents are unaffected.
   ========================================================= */

/* Standard .section background is #1F5DA8 (Landers Blue) —
   white heading is more legible here than bright green.
   Overrides F2's .section > .container > h2 { #34EA34 }
   via cascade order (equal specificity, later in file). */
.section > .container > h2 {
  color: #ffffff;
}

/* Deep navy alt sections (#0d2240) and CTA contexts have
   sufficient contrast for green headings — keep them green.
   .section.alt specificity (0-3-1) beats the rule above (0-2-1). */
.section.alt > .container > h2,
.cta-band h2,
.cta-panel h2 {
  color: #34EA34;
}

/* =========================================================
   Hero Eyebrow Size Fix v2.0 — CSS-only append.
   Increases hero/page-hero eyebrow size for visual prominence
   on the blue hero field. Color and glow from v1.7 preserved.
   ========================================================= */

.hero .eyebrow,
.page-hero .eyebrow {
  font-size: clamp(0.95rem, 1.15vw, 1.15rem);
  letter-spacing: 0.075em;
  line-height: 1.35;
}

/* =========================================================
   Hero Eyebrow Pop Fix v2.1 — CSS-only append.
   Enlarges the hero/page-hero kicker by ~40% and adds
   controlled depth so green lettering pops on the blue field.
   ========================================================= */

.hero .eyebrow,
.page-hero .eyebrow {
  font-size: clamp(1.33rem, 1.6vw, 1.6rem);
  line-height: 1.28;
  letter-spacing: 0.065em;
  color: #34EA34;
  font-weight: 900;
  text-shadow:
    0 0 8px rgba(52, 234, 52, 0.55),
    0 2px 0 rgba(11, 42, 85, 0.70);
}

/* =========================================================
   Hero Eyebrow Dark Label Fix v2.2 — CSS-only append.
   Adds a dark navy label behind the hero kicker so bright
   green lettering pops without looking like a CTA.
   ========================================================= */

.hero .eyebrow,
.page-hero .eyebrow {
  display: inline-block;
  background: rgba(11, 42, 85, 0.72);
  border-left: 4px solid #34EA34;
  border-radius: 8px;
  padding: 0.35rem 0.65rem;
  box-shadow:
    0 0 16px rgba(52, 234, 52, 0.18),
    0 8px 22px rgba(11, 42, 85, 0.26);
}

/* Site credit — quiet, below copyright */
.site-credit {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.38);
  margin-top: 0.3rem;
}
.site-credit a {
  color: rgba(255, 255, 255, 0.38);
  text-decoration: none;
}
.site-credit a:hover {
  color: rgba(255, 255, 255, 0.68);
  text-decoration: underline;
}

/* =========================================================
   Services Dropdown Repair v2.3 — CSS-only append.
   Root cause: v1.5 set .site-nav a:not(.nav-cta) to
   rgba(255,255,255,0.88) at specificity 0-2-1, overriding
   .service-menu a { color: #102033 } at 0-1-1. Result:
   white text on white (#fff) dropdown = invisible links.
   Fix: switch dropdown to dark navy (white text is then
   readable). Use same selectors as the base CSS desktop
   rule to win the background via cascade order (0-3-0).
   Use .site-nav .service-menu a (0-2-1) to tie and beat
   the white-text rule by cascade order.
   ========================================================= */

/* Desktop dropdown panel — matches base :hover/:focus-within
   specificity (0-3-0) so cascade order wins over #fff bg */
.nav-services:hover .service-menu,
.nav-services:focus-within .service-menu {
  background: #0B2A55;
  border: 1px solid rgba(52, 234, 52, 0.35);
  border-radius: 10px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.30);
  padding: 0.5rem;
  min-width: 220px;
  max-width: 280px;
}

/* Mobile / JS .is-open panel — specificity 0-2-0, beats
   v1.5 .service-menu.is-open { background:#fff } (0-2-0)
   via cascade order */
.service-menu.is-open {
  background: #0B2A55;
  border: 1px solid rgba(52, 234, 52, 0.35);
  border-radius: 10px;
  padding: 0.5rem;
  box-shadow: none;
  max-width: none;
  margin-top: 0.4rem;
}

/* Dropdown links — .site-nav .service-menu a (0-2-1) ties
   v1.5 .site-nav a:not(.nav-cta) (0-2-1); later in file
   wins. Locks in white text on dark navy background. */
.site-nav .service-menu a {
  display: block;
  color: #ffffff;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  text-decoration: none;
}

/* Hover/focus — 0-3-1 ties v1.5 hover rule, later wins */
.site-nav .service-menu a:hover,
.site-nav .service-menu a:focus {
  background: rgba(52, 234, 52, 0.16);
  color: #34EA34;
  text-decoration: none;
}

/* Active page indicator in dropdown */
.site-nav .service-menu a[aria-current="page"] {
  color: #34EA34;
  font-weight: 700;
  background: rgba(52, 234, 52, 0.10);
}

/* =========================================================
   Hero Eyebrow Weight Trim v2.4 — CSS-only append.
   Modest size, spacing, and padding reduction to lighten
   visual weight. Color, glow, and navy label preserved.
   ========================================================= */

.hero .eyebrow,
.page-hero .eyebrow {
  font-size: clamp(0.9rem, 1.1vw, 1.1rem);
  letter-spacing: 0.045em;
  padding: 0.22rem 0.5rem;
}

/* =========================================================
   Footer Brand Column v2.5 — CSS-only append.
   Widens the brand column, enlarges the footer logo on
   desktop, and preserves single-column mobile stacking.
   Selector: .footer-grid > section:first-child — targets
   the structural first child; no HTML class change needed.
   ========================================================= */

/* Widen brand column at the desktop breakpoint */
@media (min-width: 760px) {
  .footer-grid {
    grid-template-columns: minmax(280px, 1.6fr) 1fr 1fr 1fr;
  }
}

/* Logo — CSS width overrides the width="140" HTML attribute;
   height:auto preserves aspect ratio */
.footer-grid > section:first-child img {
  width: clamp(240px, 24vw, 320px);
  height: auto;
  display: block;
  margin-bottom: 1rem;
}

/* Mobile: logo constrained to viewport width */
@media (max-width: 759px) {
  .footer-grid > section:first-child img {
    width: min(240px, 80vw);
  }
}

/* =========================================================
   Footer Logo Tagline v2.6 — CSS-only append.
   Renders the brand phrase below the footer logo as live
   text. Uses #34EA34 (Bright Green) — the existing footer
   accent token (markers, borders); footer-scoped only.
   ========================================================= */

.footer-logo-tagline {
  color: #34EA34;
  font-size: clamp(0.78rem, 1vw, 0.95rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0.35rem 0 1rem;
  line-height: 1.3;
}

/* =========================================================
   Footer Brand Heading v2.7 — CSS-only append.
   Overrides the green .site-footer h2 color on the brand
   column only. Green border-bottom is preserved (inherited
   from .site-footer h2 at line 549). Other footer column
   headings remain green and unaffected.
   v2.7.1: centers brand column elements and increases
   heading size by ~12%. Contact/Services/Site unaffected.
   ========================================================= */

/* Center the entire brand column */
.footer-grid > section:first-child {
  text-align: center;
}

/* Center logo image within the brand column */
.footer-grid > section:first-child img {
  margin-left: auto;
  margin-right: auto;
}

/* Center the green tagline */
.footer-logo-tagline {
  text-align: center;
}

/* Brand heading — white, ~12% larger, centered */
.footer-grid > section:first-child h2 {
  color: #ffffff;
  font-size: clamp(1.12rem, 1.512vw, 1.4rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-align: center;
  width: 100%;
}

/* =========================================================
   Header Brand Icon v2.8 — CSS-only append.
   Replaces the .brand-mark square with the transparent PNG
   icon. Height matches the prior 42px mark; width scales
   naturally from the 991x326 source. Background and
   border-radius from .brand-mark no longer apply.
   ========================================================= */

.brand-icon {
  display: block;
  height: 42px;
  width: auto;
}

/* =========================================================
   Inline CTA Card v2.9 — CSS-only append.
   Compact dark navy conversion card for mid-scroll CTA
   insertions. Scoped entirely to .inline-cta-card.
   Colors: Deep Navy #0B2A55 | Bright Green #34EA34.
   Button pattern mirrors .cta-band dark-bg overrides.
   ========================================================= */

.inline-cta-card {
  background: #0B2A55;
  border: 1px solid rgba(52, 234, 52, 0.35);
  border-radius: var(--radius, 18px);
  padding: 1.75rem 2rem;
  color: #ffffff;
}

.inline-cta-card h2 {
  color: #ffffff;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  margin-bottom: 0.5rem;
}

.inline-cta-card p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0;
  max-width: 56ch;
}

.inline-cta-card .button:not(.secondary) {
  background: #34EA34;
  border-color: #34EA34;
  color: #0B2A55;
}

.inline-cta-card .button.secondary {
  border-color: rgba(255, 255, 255, 0.70);
  color: #ffffff;
}
/* ==========================================================
   v2.10 — Service Area Card
   Contained module for service-area sections on service pages.
   Less prominent than .inline-cta-card; no buttons.
   Colors: Deep Navy variant #0f3060 | Muted green border.
   ========================================================= */

.service-area-card {
  background: #0f3060;
  border: 1px solid rgba(52, 234, 52, 0.20);
  border-radius: var(--radius, 18px);
  padding: 1.25rem 1.5rem;
}

.service-area-card h2 {
  color: #ffffff;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  margin-bottom: 0.4rem;
}

.service-area-card p {
  color: rgba(255, 255, 255, 0.80);
  margin-bottom: 0.5rem;
}

.service-area-card p:last-child {
  margin-bottom: 0;
}

.service-area-card .text-link {
  color: rgba(255, 255, 255, 0.90);
  text-decoration-color: rgba(52, 234, 52, 0.45);
}

.service-area-card .text-link:hover {
  color: #34EA34;
  text-decoration-color: #34EA34;
  text-decoration-thickness: 2px;
}

/* =========================================================
   v2.11 — Owner block image crop correction
   object-position center top cropped faces; center centers the subject.
   ========================================================= */
.owner-block img {
  object-position: center center;
}

/* =========================================================
   v2.12 — Owner block layout alignment fix
   Switches from grid to flex so align-items:center applies
   consistently. flex-wrap:wrap preserves mobile stacking.
   flex:0 0 auto on img prevents grow/shrink distortion.
   ========================================================= */
.owner-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
}
.owner-block img {
  flex: 0 0 auto;
}

/* =========================================================
   v3.1 — Reason-grid and FAQ card hover treatment
   E6/E9's border-color shorthand muted the bright #34EA34 left
   accent (set by D7/D11) to rgba(52,234,52,0.22) on both card
   families. These rules restore the full accent on hover,
   mirroring the .card:hover border brightening + shadow
   intensification pattern from D6. Selectors share identical
   declarations and are scoped tightly; does not affect
   confirmation cards, aside-cards, urgent callouts, or any
   other card family.
   prefers-reduced-motion: covered by the existing global
   *{transition-duration:.01ms!important} rule in this file.
   ========================================================= */

@media (hover: hover) and (pointer: fine) {
  .reasons .reason-grid li,
  .faq .faq-item {
    transition: box-shadow 0.2s ease, border-left-color 0.2s ease;
  }

  .reasons .reason-grid li:hover,
  .faq .faq-item:hover {
    border-left-color: #34EA34;
    box-shadow: 0 6px 18px rgba(31, 93, 168, 0.18);
  }
}

/* =========================================================
   v3.0 — Appointment Confirmation Page
   Supplements .inline-cta-card for the confirmation context.
   All declarations replace previously-inline styles on
   appointment-request-received/index.html. No class names
   used elsewhere; confirmed by grep before authoring.
   ========================================================= */

/* Green left accent and enlarged body-copy size/line-height.
   border-left overrides .inline-cta-card border shorthand
   via cascade order (appended later, equal specificity). */
.confirmation-card {
  border-left: 5px solid #34EA34;
  font-size: 1.125rem;
  line-height: 1.65;
}

/* Specificity 0-2-0 beats .inline-cta-card p (0-1-1):
   restores flow margin, removes the 56ch max-width cap, and
   sets pure white over the card's rgba(255,255,255,0.85). */
.confirmation-card .confirmation-copy {
  margin-bottom: 1rem;
  max-width: none;
  color: #ffffff;
}

/* Scoped H1 white: 0-2-0 beats .hero h1 (0-1-1) by class
   count, so this rule is authoritative for this page only. */
.hero .confirmation-h1 {
  color: #ffffff;
}

/* Nested urgent-service callout: darker-than-card navy,
   green left rule, inset padding, bottom spacing. */
.confirmation-urgent {
  background: #071e3d;
  border-left: 4px solid #34EA34;
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.5rem;
}

/* Specificity 0-2-0 beats .inline-cta-card p (0-1-1):
   resets margin and removes the inherited 56ch cap. */
.confirmation-urgent .confirmation-urgent-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  max-width: none;
}

/* Specificity 0-3-1 matches .section a:not(.button):not(.nav-cta)
   (0-3-1); wins via cascade order — appended later in file. */
.confirmation-card .confirmation-urgent a.confirmation-phone {
  color: #34EA34;
  font-weight: 800;
  white-space: nowrap;
}

/* Button row: flex wrap with gap matching .cta-row pattern. */
.confirmation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* =====================================================
   v4.0 — Mobile sticky header call CTA
   ===================================================== */

.header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 979px) {
  .header-inner { gap: 0.5rem; }
  .brand-icon { width: 80px; height: auto; }
  .brand { gap: 0.6rem; }
}

.header-call-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0 0.6rem;
  border-radius: 999px;
  background: #34EA34;
  color: #0B2A55;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.88rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.header-call-cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.header-call-cta:active {
  background: #239823;
}

@media (max-width: 430px) {
  .brand small { display: none; }
}

@media (max-width: 360px) {
  .brand strong { font-size: 0.82rem; }
}

@media (min-width: 980px) {
  .header-right { display: none; }
}

@media (hover: hover) and (pointer: fine) {
  .header-call-cta {
    transition: background-color 0.15s ease;
  }
  .header-call-cta:hover {
    background: #2DCB2D;
  }
}

/* =====================================================
   v4.1 — Responsive header fixes
   Issue 1: 320px name compression → ≤3 lines
   Issue 2: Desktop breakpoint raised 980px → 1200px
   ===================================================== */

/* 320px: Reduce logo, gaps, and CTA to free enough text
   area for "& Air Service" to fit on line 3 (~98px needed,
   currently 66px). font-size already set in v4.0. */
@media (max-width: 360px) {
  .brand-icon { width: 62px; }
  .brand { gap: 0.4rem; }
  .header-inner { gap: 0.35rem; }
  .header-call-cta { padding: 0 0.4rem; }
  .header-call-cta svg { width: 16px; height: 16px; }
  .brand strong { font-size: 0.82rem; line-height: 1.3; }
}

/* Tablet 980–1199px: keep compact mobile header.
   Overrides base @media (min-width:980px) which hides
   nav-toggle and shows site-nav at 980px. Later in file
   wins at equal specificity. */
@media (min-width: 980px) and (max-width: 1199px) {
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; }
  .header-right { display: flex; }
}

/* Full desktop nav from 1200px.
   Re-states the header-right hide (base 980px rule already
   hides nav-toggle and shows site-nav at this width). */
@media (min-width: 1200px) {
  .header-right { display: none; }
}

/* =========================================================
   Temporary 2026 summer heat-pump promotion — isolated block.
   Safe to delete this whole block (and its HTML/JS counterparts)
   once the promotion ends; nothing outside it depends on these
   rules.
   ========================================================= */

.promo-grid {
  display: grid;
  gap: 1.75rem;
}

/* Mobile-first DOM order is content-first, image-last (see index.html).
   Desktop reorders visually via grid placement only. */
.promo-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  background: #0B2A55;
  border: 1px solid rgba(52, 234, 52, 0.35);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.75rem 1.5rem;
  color: #ffffff;
}

.promo-content .eyebrow {
  margin: 0;
}

.promo-content .promo-badge {
  align-self: flex-start;
  margin: 0;
  background: rgba(52, 234, 52, 0.16);
  border: 1px solid rgba(52, 234, 52, 0.45);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
}

.promo-content h2 {
  margin: 0;
}

.promo-content p {
  margin: 0;
}

.promo-content .promo-microcopy {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.68);
}

.promo-cta-row {
  margin-top: 0.5rem;
}

.promo-cta-row .button {
  min-height: 48px;
}

.promo-content .button:not(.secondary) {
  background: #34EA34;
  border-color: #34EA34;
  color: #0B2A55;
}

.promo-content .button:not(.secondary):hover {
  background: #2DCB2D;
  border-color: #2DCB2D;
  color: #0B2A55;
}

.promo-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.promo-trigger {
  display: block;
  width: 100%;
  max-width: 512px;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  cursor: pointer;
  overflow: hidden;
}

.promo-trigger img {
  display: block;
  width: 100%;
  max-width: 512px;
  height: auto;
}

.promo-tap-hint {
  display: block;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-brand-2);
  text-align: center;
  border-top: 1px solid var(--color-line);
}

.promo-trigger:hover .promo-tap-hint {
  color: var(--color-brand);
}

@media (min-width: 760px) {
  .promo-grid {
    grid-template-columns: 38% 62%;
    column-gap: 3.5rem;
    align-items: center;
  }
  .promo-figure {
    grid-column: 1;
    grid-row: 1;
  }
  .promo-content {
    grid-column: 2;
    grid-row: 1;
    max-width: 580px;
    padding: 3rem 3.25rem;
  }
  .promo-trigger {
    max-width: 380px;
  }
  .promo-trigger img {
    max-width: 380px;
  }
}

@media (max-width: 759px) {
  .promo-content {
    padding: 1.5rem 1.25rem;
  }
}

@media (max-width: 480px) {
  .promo-cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .promo-cta-row .button {
    width: 100%;
  }
}

/* Full-size promotion viewer — native <dialog>, no third-party library */
.promo-dialog {
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  width: min(96vw, 720px);
  max-width: min(96vw, 720px);
  max-height: 96vh;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.promo-dialog::backdrop {
  background: rgba(11, 42, 85, 0.72);
}

.promo-dialog-surface {
  position: relative;
  max-height: 96vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2.75rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.promo-dialog-surface img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(96vh - 140px);
  object-fit: contain;
  margin-inline: auto;
}

.promo-dialog-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 2px solid var(--color-brand);
  border-radius: 999px;
  background: #fff;
  color: var(--color-brand);
  font-weight: 800;
  cursor: pointer;
}

.promo-dialog-close:hover {
  background: var(--color-brand);
  color: #fff;
}

.promo-dialog-link a {
  font-weight: 700;
}