/* =====================================================================
   CORE HR SOLUTIONS — STYLESHEET
   ---------------------------------------------------------------------
   Tokens, reset, header, and home hero. Validate WCAG AA contrast on
   every new color combination (see conventions/accessibility.md).
   ===================================================================== */


/* =========================================================
   FONT FALLBACKS — metric-matched stand-ins
   ---------------------------------------------------------
   The webfont stylesheet loads asynchronously, so the first paint uses a
   local font. Arial is narrower than both branded faces, so headings wrap
   to fewer lines and then reflow when the real font arrives, which shows up
   as layout shift on text-heavy pages. These faces re-map Arial's metrics
   onto the branded faces' proportions so the pre-swap and post-swap layouts
   occupy the same space. Purely additive: if no local face resolves, the
   stack falls through to the system font as before.
   Re-measure these ratios if the branded typefaces ever change.
   ========================================================= */
@font-face {
  font-family: "Lato Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 99.13%;
  ascent-override: 99.57%;
  descent-override: 21.49%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 120.7%;
  ascent-override: 80.2%;
  descent-override: 20.8%;
  line-gap-override: 0%;
}


/* =========================================================
   TOKENS — design system variables
   ========================================================= */
:root{
  /* Surfaces */
  --bg: #FFFFFF;
  --surface: #F4F7F9;

  /* Brand (teal pulled from the CoreHR Solutions logo) */
  --brand-primary: #156082;     /* logo teal: 6.94:1 on white */
  --brand-bright: #1C7BA6;      /* buttons/hover: white text 4.74:1 */
  --brand-light: #B8E0F2;       /* accent text on dark grounds: 10.2:1 on --navy-deep */
  --navy-deep: #0A2E3E;         /* dark section ground (matches hero scrim) */
  --brand-gray: #BFBFBF;        /* logo gray: decorative, or text on dark only */
  --sky: #E8F1F6;               /* pale teal icon wells */

  /* Text */
  --ink: #1B1B1B;
  --ink-soft: #555555;

  /* Lines */
  --rule: rgba(0,0,0,.10);
  --rule-strong: rgba(0,0,0,.18);

  /* Type stacks */
  --display: "Montserrat", "Montserrat Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --sans: "Lato", "Lato Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Layout */
  --maxw: 1440px;
  --gut: clamp(20px, 3vw, 48px);
  --hdr-h: 116px;
}


/* =========================================================
   RESET
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, picture, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--brand-bright); }
h1, h2, h3, h4, h5, h6 { font-family: var(--display); font-weight: 700; margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 3px; }


/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: var(--sans);
  line-height: 1.2;
  border: 2px solid transparent;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn-pill {
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--brand-bright);
  color: #fff;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.btn-pill:hover { background: var(--brand-primary); color: #fff; }

.btn-outline,
.btn-solid {
  padding: 13px 29px;
  border-width: 1px;
  border-radius: 3px;
  font-size: clamp(18px, 1.6vw, 22px);
  /* hover fill sweeps in from the left */
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: background-size .35s ease, color .35s ease;
}
.btn-outline:hover,
.btn-solid:hover { background-size: 100% 100%; }
.btn-outline {
  color: #fff;
  border-color: #fff;
  background-color: rgba(0,0,0,.15);
  background-image: linear-gradient(#fff, #fff);
}
.btn-outline:hover { color: var(--brand-primary); }
.btn-solid {
  color: #fff;
  border-color: rgba(255,255,255,.85);
  background-color: var(--brand-bright);
  background-image: linear-gradient(var(--brand-primary), var(--brand-primary));
}
.btn-solid:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .btn-outline,
  .btn-solid { transition: none; }
}


/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  transition: box-shadow .2s;
}
.site-header.is-scrolled { box-shadow: 0 2px 16px rgba(0,0,0,.08); }

.hdr-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px var(--gut);
  min-height: var(--hdr-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { flex-shrink: 0; }
.brand img { width: 147px; height: 68px; }

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.7vw, 30px);
}
.nav-list > li { position: relative; display: flex; align-items: center; }
.nav-list a {
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-list > li { flex-shrink: 0; }
.nav-list > li > a { padding: 10px 0; }
.nav-list a:hover,
.nav-list a[aria-current="page"] { color: var(--brand-bright); }
.nav-list > li > .btn-pill { padding: 13px 24px; }
.nav-list .btn-pill,
.nav-list .btn-pill:hover { color: #fff; }

/* Nav quote CTA: a shine sweeps across the face every 7 seconds and a soft
   glow pulses behind it, drawing the eye without moving layout. */
.nav-cta .btn-pill {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 0 0 0 rgba(31,95,214,.45);
  animation: ctaGlow 7s ease-in-out infinite;
}
.nav-cta .btn-pill::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  translate: -120% 0;
  animation: ctaShine 7s ease-in-out infinite;
}
@keyframes ctaShine {
  0%, 84% { translate: -120% 0; }
  97%, 100% { translate: 120% 0; }
}
@keyframes ctaGlow {
  0%, 75%, 100% { box-shadow: 0 0 0 0 rgba(31,95,214,0); }
  90% { box-shadow: 0 0 18px 2px rgba(31,95,214,.35); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-cta .btn-pill,
  .nav-cta .btn-pill::after { animation: none; }
  .nav-cta .btn-pill::after { display: none; }
}

.menu-btn {
  display: none;
  padding: 8px;
  border: 0;
  background: none;
  color: var(--brand-primary);
}
.menu-btn .ic-close { display: none; }
.site-header[data-open="true"] .menu-btn .ic-open { display: none; }
.site-header[data-open="true"] .menu-btn .ic-close { display: block; }

@media (min-width: 1181px){
  .nav-cta { margin-left: 4px; }
}

/* Tablet + mobile: hamburger menu */
@media (max-width: 1180px){
  :root { --hdr-h: 88px; }
  .brand img { width: 110px; height: 51px; }
  .menu-btn { display: block; }

  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--hdr-h));
    overflow-y: auto;
    background: var(--bg);
    border-top: 1px solid var(--rule);
    box-shadow: 0 16px 28px rgba(0,0,0,.12);
    display: none;
  }
  .site-header[data-open="true"] .primary-nav { display: block; }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gut) 24px;
  }
  .nav-list > li {
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom: 1px solid var(--rule);
  }
  .nav-list > li > a { flex: 1; padding: 16px 0; }

  .nav-list > li.nav-cta { border-bottom: 0; padding-top: 20px; }
  .nav-cta .btn-pill { flex: 1; padding: 15px 22px; }
}

@media (max-width: 640px){
  :root { --hdr-h: 76px; }
  .brand img { width: 93px; height: 43px; }
}


/* =========================================================
   HERO (home)
   ========================================================= */
.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(560px, calc(100vh - var(--hdr-h)), 780px);
  display: grid;
  place-items: center;
  padding: clamp(64px, 10vw, 120px) var(--gut);
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg picture,
.hero-bg img { width: 100%; height: 100%; }
.hero-bg img { object-fit: cover; object-position: center 35%; max-width: none; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(3,14,38,.6) 0%, rgba(3,14,38,.68) 100%);
}

.hero-content { max-width: 1080px; }
.hero h1 {
  font-size: clamp(32px, 4.6vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0 0 22px;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.hero-lede {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.6;
  max-width: 90ch;
  margin: 0 auto 36px;
}
.hero-lede { text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.hl { color: var(--brand-light); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

@media (max-width: 640px){
  .hero { min-height: 540px; }
  .hero-actions .btn { flex: 1 1 100%; max-width: 320px; }
  .hero-actions { flex-direction: column; align-items: center; }
}


/* =========================================================
   SERVICES (home) — photo tiles
   ---------------------------------------------------------
   Ported from the HMS Heating & Air tile pattern, restyled on this
   project's tokens: Montserrat headings, navy-tinted scrims instead of
   neutral black, and the surface tint behind the grid.
   ========================================================= */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
}

.eyebrow {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

.services {
  padding: clamp(56px, 7vw, 96px) 0;
  /* Anchor jumps land below the sticky header rather than under it. */
  scroll-margin-top: var(--hdr-h);
  background: var(--surface);
  text-align: center;
}
.services-head h2 {
  font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}
.services-head .accent { color: var(--brand-bright); }

.service-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: clamp(36px, 5vw, 56px) 0 0;
}

.service-tile {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  min-height: clamp(300px, 34vw, 360px);
  padding: 0 28px 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;
}
/* Resting scrim. Navy-tinted to match the hero overlay rather than neutral
   black, and heavy enough at the base to hold white text at AA. */
.service-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(3,14,38,.78), rgba(3,14,38,.34) 60%, rgba(3,14,38,.18));
}

.service-tile-bg { position: absolute; inset: 0; z-index: 0; }
.service-tile-bg picture { display: block; width: 100%; height: 100%; }
.service-tile-bg img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform .3s ease;
}

/* Per-photo crops: keep faces and subjects clear of the title at the bottom. */
.service-tile--pos1 .service-tile-bg img { object-position: 50% 55%; }
.service-tile--pos2 .service-tile-bg img { object-position: 50% 50%; }
.service-tile--pos3 .service-tile-bg img { object-position: 50% 35%; }
.service-tile--pos4 .service-tile-bg img { object-position: 50% 30%; }
.service-tile--pos5 .service-tile-bg img { object-position: 50% 30%; }
.service-tile--pos6 .service-tile-bg img { object-position: 50% 40%; }

/* Slides up on hover so the body copy reads against a solid field. */
.service-tile-hover-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(3,14,38,.95), rgba(3,14,38,.82) 65%, rgba(3,14,38,.45));
  transform: translateY(100%);
  transition: transform .4s ease;
  pointer-events: none;
}
.service-tile:hover .service-tile-hover-overlay,
.service-tile:focus-within .service-tile-hover-overlay { transform: translateY(0); }

.service-tile-border {
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 3px;
  pointer-events: none;
  z-index: 2;
}

/* Left static on purpose: the stretched-link ::after below needs .service-tile
   as its containing block. z-index still applies here because h3 is a flex item. */
.service-tile h3 {
  z-index: 2;
  font-size: clamp(19px, 2vw, 23px);
  letter-spacing: -0.01em;
  margin: 0;
}
.service-tile h3 a { color: #fff; text-decoration: none; }
.service-tile h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* The whole tile is the hit target; the heading link carries the accessible name. */
.service-tile h3 a::after { content: ""; position: absolute; inset: 0; z-index: 3; }

.service-tile-body {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 15px;
  line-height: 1.55;
  margin: 10px 0 0;
  transition: max-height .3s ease, opacity .3s ease;
}
.service-tile:focus-within .service-tile-body { max-height: 240px; opacity: 1; }

/* Touch devices get the copy permanently visible — there is no hover to
   reveal it. Only pointer devices collapse it behind the hover interaction. */
@media (hover: hover) and (pointer: fine) {
  .service-tile-body { max-height: 0; opacity: 0; overflow: hidden; }
  .service-tile:hover .service-tile-body { max-height: 240px; opacity: 1; }
  .service-tile:hover .service-tile-bg img,
  .service-tile:focus-within .service-tile-bg img { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .service-tile-bg img,
  .service-tile-hover-overlay,
  .service-tile-body { transition: none; }
}

.services-actions { margin-top: clamp(30px, 4vw, 48px); }

.btn-ghost {
  padding: 13px 30px;
  border-radius: 999px;
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background: transparent;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.btn-ghost:hover { background: var(--brand-primary); color: #fff; }

@media (max-width: 1024px){
  .service-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .service-tiles { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
}


/* =========================================================
   SHARED SECTION PIECES
   ========================================================= */
/* Sections that paint absolutely positioned layers (grids, photos, map card) */
.about-b, .process-a, .reviews-b, .faq-b, .quote-a, .visit-a,
.page-hero, .cta-band { position: relative; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.accent { color: var(--brand-bright); }
.eyebrow--light { color: var(--brand-light); }

main > section h2 {
  font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.lede {
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}

.section-head {
  max-width: 760px;
  margin: 0 auto clamp(48px, 6vw, 80px);
  text-align: center;
}
.section-head h2 { margin: 0; }
.section-actions { margin-top: clamp(40px, 5vw, 64px); text-align: center; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
  color: var(--brand-primary);
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
.text-link .ic { transition: transform .25s ease; }
.text-link:hover .ic { transform: translateX(4px); }
.text-link--light,
.text-link--light:hover { color: #fff; }

.stars { display: flex; gap: 4px; color: #F5B400; }
.stars svg { width: 18px; height: 18px; }

/* Scroll reveal. Hidden only when JS is running, so content never
   disappears for no-JS visitors. Hovers use `translate` (not `transform`)
   so they don't fight the reveal's transform.
   Variants: (default) rise a little · rise (bigger lift) · left · right ·
   pop (scale up) · fade. [data-reveal-group] staggers its children. */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .8s ease, transform .9s cubic-bezier(.16,.84,.3,1),
              translate .4s ease, background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.js [data-reveal="rise"]  { transform: translate3d(0, 56px, 0); }
.js [data-reveal="left"]  { transform: translate3d(-56px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(56px, 0, 0); }
.js [data-reveal="pop"]   { transform: scale(.9); }
.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Side-entering elements start past the viewport edge; clip so phones never
   get a horizontal scrollbar. `clip` keeps sticky columns working. */
main, .footer-a { overflow-x: clip; }

/* How It Works: the connector line draws across once the steps arrive. */
.js [data-reveal-line]::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s cubic-bezier(.16,.84,.3,1) .35s;
}
.js [data-reveal-line].line-in::after { transform: scaleX(1); }

/* Hero entrance on load: photo settles from a slight zoom, copy rises in. */
@keyframes heroZoom { from { transform: scale(1.1); } to { transform: none; } }
@keyframes heroRise { from { opacity: 0; transform: translate3d(0, 30px, 0); } to { opacity: 1; transform: none; } }
.hero-bg img { animation: heroZoom 2.2s cubic-bezier(.16,.84,.3,1) both; }
.hero-content > * { animation: heroRise 1s cubic-bezier(.16,.84,.3,1) both; }
.hero-content > :nth-child(1) { animation-delay: .15s; }
.hero-content > :nth-child(2) { animation-delay: .35s; }
.hero-content > :nth-child(3) { animation-delay: .55s; }

/* Gentle parallax where the browser supports scroll-driven animations. */
@supports (animation-timeline: view()) {
  @keyframes parallaxDrift { from { translate: 0 -6%; } to { translate: 0 6%; } }
  @keyframes heroDrift { from { translate: 0 0; } to { translate: 0 10%; } }
  /* The hero photo sits 10% taller than the hero, so drifting down as the
     hero scrolls away never exposes its top edge. */
  .hero { overflow: hidden; }
  .hero-bg picture { position: absolute; inset: -10% 0 0; height: auto; animation: heroDrift linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  .about-a-media picture img { scale: 1.14; animation: parallaxDrift linear both; animation-timeline: view(); animation-range: cover; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js [data-reveal-line]::after { transform: none; transition: none; }
  .hero-bg img,
  .hero-content > *,
  .hero-bg picture,
  .about-a-media picture img { animation: none; }
  .about-a-media picture img { scale: 1; }
}


/* =========================================================
   ABOUT · STORY — split photo + story
   ========================================================= */
.about-a { padding: clamp(80px, 10vw, 140px) 0; background: var(--bg); }
.about-a-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(48px, 7vw, 112px);
  align-items: center;
}
.about-a-media { position: relative; padding: 0 0 36px 36px; }
.about-a-media::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 72%;
  height: 72%;
  border-radius: 5px;
  background: var(--brand-primary);
}
.about-a-media picture {
  position: relative;
  z-index: 1;
  display: block;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  border-radius: 5px;
  overflow: hidden;
}
.about-a-media picture::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 3px;
}
.about-a-media img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.about-a-card {
  position: absolute;
  z-index: 2;
  right: -28px;
  bottom: 88px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px 18px 18px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 22px 50px -12px rgba(3,14,38,.28);
}
.about-a-card .ic {
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: 50%;
  background: var(--sky);
  color: var(--brand-primary);
}
.about-a-card p { margin: 0; }
.about-a-card-title { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink); }
.about-a-card-sub { font-size: 14px; color: var(--ink-soft); }
.about-a-card-link { display: inline-block; margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--brand-bright); }
.about-a-card-link:hover { color: var(--brand-primary); }

.about-a-copy h2 { margin: 0 0 24px; font-size: clamp(32px, 3.8vw, 52px); max-width: 16ch; }
.about-a-copy .lede + .lede { margin-top: 16px; }
.about-a-quote {
  margin: 36px 0;
  padding: 4px 0 4px 26px;
  border-left: 2px solid var(--brand-bright);
}
.about-a-quote p {
  margin: 0 0 12px;
  font-style: italic;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.5;
  color: var(--ink);
}
.about-a-quote footer {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-primary);
}

.check-list {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: start;
  gap: 14px clamp(32px, 5vw, 72px);
  margin: 0 0 40px;
}
.check-list li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.check-list .ic {
  width: 24px;
  height: 24px;
  padding: 5px;
  border-radius: 50%;
  background: var(--sky);
  color: var(--brand-bright);
  stroke-width: 2.4;
}

@media (max-width: 900px){
  .about-a-grid { grid-template-columns: 1fr; }
  .about-a-media { max-width: 520px; width: 100%; margin: 0 auto; }
  .about-a-card { right: 12px; bottom: 60px; }
}
@media (max-width: 480px){
  .about-a-media { padding: 0 0 20px 20px; }
  .check-list { grid-template-columns: max-content; }
}


/* =========================================================
   ABOUT · STATEMENT — dark editorial statement
   ========================================================= */
.about-b {
  overflow: hidden;
  padding: clamp(96px, 12vw, 170px) 0 clamp(80px, 10vw, 140px);
  color: #fff;
  background: var(--navy-deep);
}
/* Blue glow on the right edge. site.js drives --glow-y from 100% (bottom)
   to 0% (top) as the section scrolls through the viewport; without JS, or
   with reduced motion, it rests in the top right corner. */
.about-b::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(50% 70% at 100% var(--glow-y, 0%), rgba(31,95,214,.11), transparent 62%);
}
/* Fine blueprint grid, faded out toward the lower left */
.about-b::after,
.quote-a::after,
.page-hero::after,
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 90% 0%, #000 0%, transparent 60%);
          mask-image: radial-gradient(ellipse at 90% 0%, #000 0%, transparent 60%);
}
.about-b .wrap { position: relative; z-index: 1; }
.about-b h2 {
  max-width: none;
  text-wrap: pretty;
  margin: 0 0 clamp(28px, 3.5vw, 48px);
  font-size: clamp(34px, 5.2vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.032em;
}
.about-b-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: clamp(44px, 5vw, 64px);
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.about-b-lede {
  max-width: none;
  text-wrap: pretty;
  margin: 0;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.65;
  color: rgba(255,255,255,.82);
}
.about-b-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; }
.about-b-facts > div { padding: 36px 32px 0 0; }
.about-b-facts > div + div { padding-left: 32px; border-left: 1px solid rgba(255,255,255,.16); }
.about-b-facts dt {
  margin: 0 0 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-light);
}
.about-b-facts dd { margin: 0; font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; }

@media (max-width: 760px){
  .about-b-facts { grid-template-columns: 1fr; }
  .about-b-facts > div,
  .about-b-facts > div + div { padding: 24px 0; border-left: 0; }
  .about-b-facts > div + div { border-top: 1px solid rgba(255,255,255,.16); }
}


/* =========================================================
   HOW IT WORKS — connected timeline
   ========================================================= */
.process-a { padding: clamp(80px, 10vw, 140px) 0; background: var(--bg); text-align: center; }
.process-a-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 64px);
}
.process-a-steps::after {
  content: "";
  position: absolute;
  top: 40px;
  left: 16.6%;
  right: 16.6%;
  height: 1px;
  background: linear-gradient(90deg, var(--brand-bright), rgba(31,95,214,.15));
}
.process-a-steps li { position: relative; z-index: 1; }
.process-a-dot {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  margin: 0 auto 30px;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 7px #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  color: var(--brand-primary);
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.process-a-steps li:hover .process-a-dot {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
  box-shadow: inset 0 0 0 7px #fff, 0 0 0 8px rgba(31,95,214,.12);
}
.process-a-steps h3 { margin: 0 0 12px; font-size: 21px; letter-spacing: -0.01em; }
.process-a-steps p { max-width: 34ch; margin: 0 auto; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }

@media (max-width: 800px){
  .process-a-steps { grid-template-columns: 1fr; gap: 48px; }
  .process-a-steps::after { display: none; }
}


/* =========================================================
   REVIEWS · SHARED — reviewer line
   ========================================================= */
.reviews-person { display: flex; align-items: center; gap: 14px; margin: 0; }
.reviews-person > span:last-child { display: flex; flex-direction: column; font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink); }
.reviews-person small { margin-top: 2px; font-family: var(--sans); font-weight: 400; font-size: 13px; color: var(--ink-soft); }
.reviews-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-primary);
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}


/* =========================================================
   REVIEWS — featured quote + two supporting cards
   ========================================================= */
.reviews-b { padding: clamp(80px, 10vw, 140px) 0; background: var(--surface); }
.reviews-b .section-head { max-width: none; }
.reviews-b .section-head h2 { text-wrap: balance; }
.reviews-b-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
}
.reviews-b-card {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 40px);
  border-radius: 6px;
  background: #fff;
  transition: translate .3s ease, box-shadow .3s ease;
}
.reviews-b-card:hover { translate: 0 -4px; box-shadow: 0 30px 60px -32px rgba(3,14,38,.3); }
.reviews-b-card .stars { margin-bottom: 18px; }
.reviews-b-card blockquote { flex: 1; margin: 0 0 28px; }
.reviews-b-card blockquote p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--ink); }

.reviews-b-card--feature {
  position: relative;
  grid-row: 1 / span 2;
  justify-content: flex-end;
  overflow: hidden;
  padding: clamp(36px, 4.5vw, 64px);
  color: #fff;
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(31,95,214,.45), transparent 65%),
    var(--navy-deep);
}
.reviews-b-mark { position: absolute; top: clamp(32px, 4vw, 56px); left: clamp(36px, 4.5vw, 64px); width: 64px; height: 48px; color: var(--brand-bright); }
.reviews-b-card--feature .stars { margin-top: 96px; }
.reviews-b-card--feature blockquote { flex: 0; }
.reviews-b-card--feature blockquote p { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.3; letter-spacing: -0.015em; color: #fff; }
.reviews-b-card--feature .reviews-person > span:last-child { color: #fff; }
.reviews-b-card--feature .reviews-person small { color: rgba(255,255,255,.7); }
.reviews-b-card--feature .reviews-avatar { background: var(--brand-bright); }

.reviews-b-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--rule-strong);
}
.reviews-b-bar-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.reviews-b-bar-score { font-family: var(--display); font-weight: 700; font-size: 28px; color: var(--brand-primary); }
.reviews-b-bar-sub { font-size: 15px; color: var(--ink-soft); }

@media (max-width: 900px){
  .reviews-b-grid { grid-template-columns: 1fr; }
  .reviews-b-card--feature { grid-row: auto; }
  .reviews-b-card--feature .stars { margin-top: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .reviews-b-card { transition: none; }
}


/* =========================================================
   FAQ · ACCORDION — built on <details>, works without JS
   ========================================================= */
.faq-b summary { list-style: none; cursor: pointer; }
.faq-b summary::-webkit-details-marker { display: none; }
.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  transition: background-color .3s ease, border-color .3s ease, rotate .3s ease;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 2px;
  background: var(--brand-primary);
  transition: background-color .3s ease, rotate .3s ease;
}
.faq-icon::after { rotate: 90deg; }
details[open] > summary .faq-icon { background: var(--brand-bright); border-color: var(--brand-bright); rotate: 180deg; }
details[open] > summary .faq-icon::before,
details[open] > summary .faq-icon::after { background: #fff; }
details[open] > summary .faq-icon::after { rotate: 0deg; }
@media (prefers-reduced-motion: reduce) {
  .faq-icon, .faq-icon::before, .faq-icon::after { transition: none; }
}


/* =========================================================
   FAQ — sticky heading + numbered accordion
   ========================================================= */
.faq-b { padding: clamp(80px, 10vw, 140px) 0; background: var(--bg); }
.faq-b-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  align-items: start;
  gap: clamp(48px, 7vw, 120px);
}
.faq-b-head { position: sticky; top: calc(var(--hdr-h) + 40px); }
.faq-b-head h2 { margin: 0 0 22px; max-width: 14ch; }
.faq-b-head .lede { max-width: 38ch; margin-bottom: 36px; }
.faq-b-phone {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 10px 30px 10px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-primary);
  text-decoration: none;
  transition: box-shadow .3s ease, translate .3s ease;
}
.faq-b-phone:hover { color: var(--brand-primary); translate: 0 -2px; box-shadow: 0 16px 34px -14px rgba(3,14,38,.3); }
.faq-b-phone .ic { width: 52px; height: 52px; padding: 15px; border-radius: 50%; background: var(--brand-bright); color: #fff; }
.faq-b-phone span { display: flex; flex-direction: column; font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.2; }
.faq-b-phone small { font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: .04em; color: var(--ink-soft); }

.faq-b-list { display: grid; gap: 14px; }
.faq-b-item {
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface);
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.faq-b-item[open] { background: #fff; border-color: var(--rule-strong); box-shadow: 0 24px 48px -30px rgba(3,14,38,.3); }
.faq-b-item summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
}
.faq-b-num { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .08em; color: var(--brand-bright); }
.faq-b-q { font-family: var(--display); font-weight: 700; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.35; color: var(--ink); }
.faq-b-item summary:hover .faq-b-q { color: var(--brand-primary); }
.faq-b-item p { margin: 0; padding: 0 76px 26px 62px; font-size: 16px; line-height: 1.7; color: var(--ink-soft); }

@media (max-width: 900px){
  .faq-b-grid { grid-template-columns: 1fr; }
  .faq-b-head { position: static; }
}
@media (max-width: 640px){
  .faq-b-item summary { gap: 14px; padding: 18px; }
  .faq-b-item p { padding: 0 18px 22px; }
}


/* =========================================================
   QUOTE CTA — contact info + form mockup
   ========================================================= */
.quote-a {
  overflow: hidden;
  padding: clamp(80px, 10vw, 140px) 0;
  color: #fff;
  background:
    radial-gradient(60% 70% at 100% 100%, rgba(31,95,214,.42), transparent 62%),
    var(--navy-deep);
  scroll-margin-top: var(--hdr-h);
}
.quote-a-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 60fr 40fr;
  align-items: center;
  gap: clamp(48px, 6vw, 96px);
}
/* Form on the left, copy on the right. The copy stays first in the markup so
   it still reads first on small screens and to screen readers. */
.quote-a-copy { grid-column: 2; grid-row: 1; }
.quote-a-card { grid-column: 1; grid-row: 1; }
.quote-a-copy h1,
.quote-a-copy h2 { margin: 0 0 22px; max-width: 13ch; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.05; letter-spacing: -0.02em; }
.quote-a-copy .lede { max-width: 46ch; color: rgba(255,255,255,.82); }
.quote-a-contact { display: grid; gap: 26px; margin: 44px 0 0; }
.quote-a-contact li { display: flex; align-items: flex-start; gap: 18px; font-size: 17px; line-height: 1.5; }
.quote-a-contact .ic {
  width: 48px;
  height: 48px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  color: var(--brand-light);
}
.quote-a-contact small {
  display: block;
  margin-bottom: 4px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-light);
}
.quote-a-contact a { font-family: var(--display); font-weight: 700; font-size: 24px; color: #fff; text-decoration: none; }
.quote-a-contact a:hover { color: var(--brand-light); }

.quote-a-card {
  position: relative;
  padding: clamp(30px, 4vw, 48px);
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 50px 90px -40px rgba(0,0,0,.6);
}
.quote-a-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(30px, 4vw, 48px);
  width: 56px;
  height: 3px;
  background: var(--brand-bright);
}
.quote-a-card h3 { margin: 0 0 26px; font-size: 26px; letter-spacing: -0.015em; }

/* Pre-load height floor only; form_embed.js sets the real height. */
.qf-embed iframe { display: block; width: 100%; min-height: 320px; border: 0; background: transparent; }

@media (max-width: 900px){
  .quote-a-grid { grid-template-columns: 1fr; }
  .quote-a-copy,
  .quote-a-card { grid-column: auto; grid-row: auto; }
}


/* =========================================================
   VISIT — map with floating info card
   ========================================================= */
.visit-a { background: var(--surface); }
.visit-a-map { height: clamp(460px, 44vw, 600px); }
.visit-a-map iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(.4) contrast(1.05); }
.visit-a-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
}
.visit-a-card {
  max-width: 560px;
  padding: clamp(30px, 3.5vw, 46px);
  border-radius: 5px;
  background: #fff;
  box-shadow:
    0 2px 6px rgba(3,14,38,.08),
    0 18px 36px -8px rgba(3,14,38,.22),
    0 50px 100px -20px rgba(3,14,38,.5);
  pointer-events: auto;
}
.visit-a-card h2 { margin: 0 0 26px; font-size: clamp(28px, 2.8vw, 38px); line-height: 1.08; text-wrap: balance; }
.visit-list { display: grid; gap: 18px; margin: 0 0 32px; }
.visit-list li { display: flex; align-items: flex-start; gap: 14px; font-size: 16px; line-height: 1.5; }
.visit-list .ic { width: 22px; height: 22px; margin-top: 1px; color: var(--brand-bright); }
.visit-list a { color: var(--ink); font-weight: 700; text-decoration: none; }
.visit-list a:hover { color: var(--brand-bright); }

@media (max-width: 760px){
  .visit-a-map { height: 360px; }
  .visit-a-wrap { position: relative; display: block; margin-top: -72px; padding-bottom: 56px; }
  .visit-a-card { max-width: none; }
}


/* =========================================================
   FOOTER — deep teal, four columns
   ========================================================= */
.footer-a {
  padding-top: clamp(64px, 8vw, 104px);
  background: var(--navy-deep);
  color: rgba(255,255,255,.76);
  font-size: 15px;
}
.footer-a-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: clamp(48px, 6vw, 80px);
}
.footer-a-brand img { width: 110px; height: auto; margin-bottom: 24px; }
.footer-a-brand p { max-width: 34ch; margin: 0 0 22px; line-height: 1.65; }
.footer-a-phone { font-family: var(--display); font-weight: 700; font-size: 22px; color: #fff; text-decoration: none; }
.footer-a-phone:hover { color: var(--brand-light); }
.footer-a h3 {
  margin: 0 0 22px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-light);
}
.footer-a ul { display: grid; gap: 12px; }
.footer-a-grid a:not(.footer-a-phone):not(.text-link) { color: rgba(255,255,255,.76); text-decoration: none; transition: color .2s; }
.footer-a-grid a:not(.footer-a-phone):not(.text-link):hover { color: #fff; }
.footer-a address { margin: 0 0 22px; font-style: normal; line-height: 1.65; }
.footer-a-bottom {
  /* Three tracks keep the legal line centered on the page while the
     credit sits in the right-hand track. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 26px 0;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 14px;
}
.footer-a-bottom p { margin: 0; }
.footer-a-bottom a { color: rgba(255,255,255,.76); text-decoration: none; }
.footer-a-bottom a:hover { color: #fff; }
.footer-a-tagline { grid-column: 1; justify-self: start; color: rgba(255,255,255,.76); }
.footer-a-legal { grid-column: 2; margin: 0; text-align: center; }
.footer-a-legal .sep { margin: 0 10px; color: rgba(255,255,255,.4); }
.footer-a-credit { grid-column: 3; justify-self: end; display: inline-flex; }
.footer-a-credit img { display: block; width: 96px; height: auto; opacity: .85; transition: opacity .3s ease; }
.footer-a-credit:hover img { opacity: 1; }

@media (max-width: 900px){
  .footer-a-grid { grid-template-columns: 1fr 1fr; }
  .footer-a-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px){
  .footer-a-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1100px){
  .footer-a-bottom { grid-template-columns: 1fr; justify-items: center; gap: 12px; }
  .footer-a-tagline, .footer-a-legal, .footer-a-credit { grid-column: auto; justify-self: center; text-align: center; }
}


/* =========================================================
   SERVICE AREA PAGE — /service-area
   Ported 1:1 from the HMS Heating & Air service-area page:
   page hero, opening statement, Leaflet city map synced to a
   card grid, a three-card coverage strip, then a CTA banner.
   Retokened to this site's palette and type stacks.
   ========================================================= */
.sv-hero,
.sa-intro,
.sa-cities,
.sa-strip,
.cta-banner {
  --maxw: 1360px;
  --gut: clamp(20px, 4vw, 56px);
  --content-w: calc(var(--maxw) - 2 * var(--gut));
}

.sv-h1 {
  font-size: 72px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.sv-h1 strong { font-weight: 700; }
main > section .sv-h2 {
  font-size: 48px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.sv-h2 strong { font-weight: 700; }
.sv-h2-center { text-align: center; }

/* ---- Hero ---- */
.sv-hero { position: relative; overflow: hidden; background: #fff; }
.sv-hero__bg { position: absolute; inset: 0; z-index: 0; }
.sv-hero__bg picture { width: 100%; height: 100%; }
.sv-hero__bg img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 72% 40%; }
.sv-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(3,14,38,.85) 0%, rgba(3,14,38,.6) 45%, rgba(3,14,38,.15) 100%);
}
.sv-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 128px var(--gut) 80px;
}
.sv-hero__inner > * { max-width: var(--content-w); }
.sv-hero__content { width: 100%; max-width: var(--content-w); margin-inline: auto; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.sv-hero__title { margin: 0; color: #fff; }
.sv-hero__sub { font-size: 20px; line-height: 1.6; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.92); margin: 0; }
.sv-hero__title + .sv-hero__sub { margin-top: -14px; }
.sv-hero--area .sv-hero__bg img { object-position: 50% 60%; }
.sv-hero--area .sv-hero__inner { padding-bottom: 132px; }

/* Shared section eyebrow: centred label with a rule on each side. */
.sv-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-bright);
  margin: 0 0 18px;
}
.sv-eyebrow::before,
.sv-eyebrow::after { content: ""; width: 44px; height: 2px; background: var(--brand-bright); }

/* ---- Opening statement ---- */
.sa-intro { background: var(--bg); padding: clamp(48px, 6.5vw, 92px) var(--gut) clamp(16px, 2vw, 32px); }
.sa-intro .wrap.sa-intro__inner { width: 85%; max-width: 1200px; text-align: center; }
.sa-intro .sv-h2 { margin: 0; color: var(--ink); }
.sa-intro__body { max-width: 100%; margin: clamp(20px, 2.4vw, 32px) auto 0; text-align: left; }
.sa-intro__body p { margin: 0 0 clamp(16px, 1.8vw, 24px); font-size: 18px; line-height: 1.75; color: #434343; }
.sa-intro__body p:last-child { margin-bottom: 0; }

/* ---- City map + grid ---- */
.sa-cities { padding: clamp(8px, 1vw, 16px) var(--gut) clamp(64px, 8vw, 120px); background: var(--bg); }

.sa-map {
  position: relative;
  width: 100%;
  aspect-ratio: 600 / 460;
  margin: 0 auto clamp(32px, 4vw, 48px);
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(1, 49, 137, .16);
  overflow: hidden;
  z-index: 0;
}
@media (min-width: 901px) {
  .sa-map { aspect-ratio: 21 / 8; }
}
.sa-map.leaflet-container { font-family: var(--sans); }
.sa-map img { max-width: none; }

.sa-map .sa-dfw-label {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: .6;
  white-space: nowrap;
}
.sa-map .sa-dfw-label::before { display: none; }

.sa-map .sa-marker-label {
  background: var(--ink);
  border: 0;
  box-shadow: 0 2px 6px rgba(1,49,137,.35);
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
.sa-map .sa-marker-label::before { border-top-color: var(--ink); }

/* Markers carry a shield glyph on a white disc; hover/home states are
   signaled with rings rather than fill swaps. */
.sa-marker { background: none; border: 0; }
.sa-marker-badge {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: var(--brand-primary);
  overflow: hidden;
  box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 2px 6px rgba(1,49,137,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.sa-marker-badge svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sa-marker.is-linked .sa-marker-badge {
  transform: scale(1.15);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand-bright), 0 3px 9px rgba(1,49,137,.4);
}
.sa-marker--home .sa-marker-badge {
  background: var(--brand-primary);
  color: #fff;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--brand-primary), 0 2px 6px rgba(1,49,137,.35);
}
.sa-marker--home.is-linked .sa-marker-badge {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand-primary), 0 3px 9px rgba(1,49,137,.4);
}

.sa-map .leaflet-popup-content-wrapper { border-radius: 8px; }
.sa-map .leaflet-popup-content {
  margin: 8px 12px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.sa-map .leaflet-control-attribution {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--ink-soft);
  background: rgba(255,255,255,.75);
}

.sa-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.8vw, 20px);
}
.sa-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 190px;
  padding: clamp(22px, 2.4vw, 28px) clamp(18px, 2vw, 22px);
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--surface);
  transition: border-color .25s ease, translate .25s ease, background .25s ease;
}
.sa-card:hover { border-color: var(--brand-bright); translate: 0 -2px; }
.sa-card.is-linked { border-color: var(--brand-bright); translate: 0 -2px; background: #fff; }
.sa-card.is-pinged { animation: saCardPulse .9s ease; }
@keyframes saCardPulse {
  0%   { box-shadow: 0 0 0 0 rgba(31,95,214,.35); }
  70%  { box-shadow: 0 0 0 10px rgba(31,95,214,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,95,214,0); }
}
.sa-card-icon { color: var(--brand-bright); margin: 0 0 12px; display: block; fill: none; stroke: currentColor; stroke-width: 1.3; }
.sa-card-name a { color: inherit; text-decoration: none; }
.sa-card-name a::after { content: ""; position: absolute; inset: 0; }
.sa-card:hover .sa-card-name a,
.sa-card-name a:focus-visible { color: var(--brand-bright); }
.sa-card-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  margin: 0;
}
.sa-card-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 6px 0 0;
  opacity: 0;
  transition: opacity .2s ease;
}
.sa-card:hover .sa-card-note,
.sa-card:focus-within .sa-card-note,
.sa-card.is-linked .sa-card-note { opacity: 1; }
.sa-card--more { background: var(--brand-primary); border-color: var(--brand-primary); }
.sa-card--more .sa-card-icon,
.sa-card--more .sa-card-name { color: #fff; }
.sa-card--more .sa-card-note { color: rgba(255,255,255,.78); }
.sa-card--more .sa-card-note a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.sa-card--more .sa-card-note a:hover { color: var(--brand-light); }

/* ---- Coverage strip ---- */
.sa-strip { background: var(--surface); padding: clamp(56px, 7vw, 100px) var(--gut); }
.sa-strip__head { text-align: center; max-width: 720px; margin: 0 auto clamp(32px, 4vw, 48px); }
.sa-strip__head .sv-h2 { margin: 0; color: var(--ink); }
.sa-strip__sub { margin: 14px 0 0; font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.sa-strip__list {
  list-style: none;
  margin: 0 0 clamp(28px, 3.5vw, 40px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.sa-strip__card {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 30px) clamp(20px, 2.2vw, 26px);
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: #fff;
  transition: border-color .25s ease, translate .25s ease;
}
.sa-strip__card:hover { border-color: var(--brand-bright); translate: 0 -2px; }
.sa-strip__icon { color: var(--brand-bright); margin: 0 0 14px; display: block; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.sa-strip__name { margin: 0 0 8px; font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--ink); }
.sa-strip__desc { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.sa-strip__link {
  margin-top: auto;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-bright);
  text-decoration: none;
}
.sa-strip__link::after { content: " \2192"; }
.sa-strip__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.sa-strip__foot { margin: 0; text-align: center; font-size: 15px; color: var(--ink-soft); }
.sa-strip__foot a { color: var(--brand-bright); text-decoration: underline; text-underline-offset: 3px; }

/* ---- CTA banner ---- */
.cta-banner { position: relative; overflow: hidden; background: var(--bg); padding: clamp(56px, 9vw, 90px) 0 clamp(32px, 5vw, 56px); }
.cta-banner-bg { position: absolute; inset: 0; z-index: 0; }
.cta-banner-bg picture { display: block; width: 100%; height: 100%; }
.cta-banner-bg img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 80% 50%; }
/* Dark type sits straight on the photo, so a white scrim guarantees contrast
   on the left and fades out before the subject on the right. */
.cta-banner-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(255,255,255,.90) 0%,
    rgba(255,255,255,.88) 42%,
    rgba(255,255,255,.45) 62%,
    rgba(255,255,255,0) 78%);
}
.cta-banner-wrap { position: relative; z-index: 1; }
.cta-banner-inner { max-width: 560px; }
main > section.cta-banner h2 { font-size: clamp(21px, 2.9vw, 36px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 16px; }
.cta-banner-accent { display: block; color: var(--brand-bright); white-space: nowrap; }
.cta-banner-line2 { display: block; color: var(--ink); white-space: nowrap; }
.cta-banner-inner p { color: #434343; font-size: 17px; line-height: 1.5; margin: 0 0 28px; max-width: 56ch; }
.cta-banner-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-banner .btn { gap: 10px; border-radius: 999px; font-family: var(--display); font-weight: 600; transition: background-color .2s, color .2s, border-color .2s, translate .2s; }
.cta-banner .btn:hover { translate: 0 -1px; }
.cta-banner .btn-lg { padding: 15px 32px; font-size: 16px; }
.cta-banner .btn-primary { background: var(--brand-bright); color: #fff; }
.cta-banner .btn-primary:hover { background: var(--brand-primary); color: #fff; }
.cta-banner .btn-ghost-dark { background: transparent; color: var(--ink); border-color: var(--ink); }
.cta-banner .btn-ghost-dark:hover { background: var(--surface); color: var(--ink); }
.cta-banner-btn { text-transform: uppercase; letter-spacing: .03em; }
.sv-btn-phone svg { width: 20px; height: 20px; flex-shrink: 0; }

@media (max-width: 991px) {
  .sv-h1 { font-size: 62px; }
  main > section .sv-h2 { font-size: 40px; }
  .sv-hero__inner { padding-top: 96px; }
}
@media (max-width: 900px) {
  .sa-grid { grid-template-columns: repeat(3, 1fr); }
  .cta-banner-bg img { object-position: 85% 50%; opacity: .35; }
  .cta-banner-inner { max-width: none; }
}
@media (max-width: 780px) {
  .sa-strip__list { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .sv-h1 { font-size: 52px; }
  main > section .sv-h2 { font-size: 32px; }
}
@media (max-width: 700px) {
  .sa-intro .wrap.sa-intro__inner { width: 100%; }
}
@media (max-width: 640px) {
  .sa-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .cta-banner-accent,
  .cta-banner-line2 { white-space: normal; }
}
@media (max-width: 479px) {
  .sv-h1 { font-size: 40px; }
  .sv-eyebrow { font-size: 12px; letter-spacing: .08em; gap: 10px; }
  .sv-eyebrow::before,
  .sv-eyebrow::after { width: 20px; }
  main > section .sv-h2 { font-size: 28px; }
}
@media (max-width: 359px) {
  .sv-eyebrow { gap: 6px; }
  .sv-eyebrow::before,
  .sv-eyebrow::after { width: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .sa-card.is-pinged { animation: none; }
}


/* =========================================================
   PAGE HERO — compact dark header for interior pages
   ---------------------------------------------------------
   No background photo on purpose: the LCP element is the h1, which
   keeps interior pages cheap to load. The blueprint grid overlay is
   shared with the other dark sections above.
   ========================================================= */
.page-hero {
  overflow: hidden;
  padding: clamp(48px, 6vw, 84px) 0 clamp(64px, 8vw, 110px);
  color: #fff;
  background: var(--navy-deep);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(55% 80% at 100% 0%, rgba(31,95,214,.16), transparent 62%);
}
.page-hero-inner { position: relative; z-index: 1; }
.page-hero h1 {
  /* em, not ch: ch resolves against the active font, so the measure (and the
     wrap) would change when the webfont swaps in. */
  max-width: 15em;
  margin: 0 0 22px;
  font-size: clamp(34px, 5vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: pretty;
}
.page-hero-lede {
  max-width: 47em;
  margin: 0 0 clamp(28px, 3.5vw, 40px);
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.65;
  color: rgba(255,255,255,.82);
}
.page-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.crumbs { margin-bottom: clamp(24px, 3vw, 40px); font-size: 14px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.crumbs li { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.66); }
.crumbs li + li::before { content: "/"; color: rgba(255,255,255,.34); }
.crumbs a { color: var(--brand-light); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px){
  .page-hero-actions .btn { flex: 1 1 100%; }
}


/* =========================================================
   SERVICE INDEX — every service in one linked grid
   ========================================================= */
.svc-index { padding: clamp(72px, 9vw, 120px) 0; background: var(--surface); }
.svc-index .section-head { max-width: 920px; }
.svc-index .section-head h2 { text-wrap: balance; }
.svc-index .section-head .lede { max-width: 640px; margin: 18px auto 0; }
.svc-index-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.svc-index-grid a {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 20px 22px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, translate .2s ease;
}
.svc-index-grid a:hover {
  border-color: var(--brand-bright);
  box-shadow: 0 18px 40px -28px rgba(3,14,38,.35);
  translate: 0 -2px;
}
.svc-index-grid a:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 2px; }
.svc-index-grid .ic {
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 50%;
  background: var(--sky);
  color: var(--brand-primary);
}
.svc-index-more a { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.svc-index-more a:hover { border-color: var(--brand-light); }
.svc-index-more .ic { background: rgba(255,255,255,.1); color: var(--brand-light); }
.svc-index-sub {
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  color: rgba(255,255,255,.82);
}

@media (max-width: 1100px){
  .svc-index-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px){
  .svc-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .svc-index-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-index-grid a { transition: none; }
  .svc-index-grid a:hover { translate: none; }
}


/* =========================================================
   SERVICE DETAIL — alternating photo and copy rows
   ========================================================= */
.svc-detail { padding: clamp(72px, 9vw, 120px) 0; background: var(--bg); }
.svc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(36px, 5vw, 80px);
  /* Clears the sticky header when an anchor link jumps to a row. */
  scroll-margin-top: calc(var(--hdr-h) + 24px);
}
.svc-row + .svc-row {
  margin-top: clamp(64px, 8vw, 110px);
  padding-top: clamp(64px, 8vw, 110px);
  border-top: 1px solid var(--rule);
}
/* Source order stays photo-then-copy so the reading order is consistent;
   only the visual column flips on the alternating rows. */
.svc-row--flip .svc-media { order: 2; }

.svc-media picture {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: 6px;
  overflow: hidden;
}
.svc-media picture::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 4px;
}
.svc-media img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.svc-row:nth-of-type(1) .svc-media img { object-position: 50% 55%; }
.svc-row:nth-of-type(3) .svc-media img { object-position: 50% 35%; }
.svc-row:nth-of-type(4) .svc-media img { object-position: 50% 30%; }
.svc-row:nth-of-type(5) .svc-media img { object-position: 50% 30%; }
.svc-row:nth-of-type(6) .svc-media img { object-position: 50% 40%; }

.svc-copy h2 {
  margin: 0 0 18px;
  font-size: clamp(28px, 3.1vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.svc-copy .lede { margin: 0 0 16px; }
.svc-copy > p:not(.lede) { margin: 0 0 28px; font-size: 16px; line-height: 1.7; color: var(--ink-soft); }

/* Single column, left aligned: these lists are longer than the home page's
   six-item grid and read better stacked beside the copy. */
.check-list--stack { grid-template-columns: 1fr; gap: 12px; margin-bottom: 32px; }
.check-list--stack li { align-items: flex-start; line-height: 1.5; }
.check-list--stack .ic { flex-shrink: 0; margin-top: 1px; }

@media (max-width: 900px){
  .svc-row { grid-template-columns: 1fr; gap: 32px; }
  .svc-row--flip .svc-media { order: 0; }
}


/* =========================================================
   ENGAGEMENT OPTIONS — three cards
   ========================================================= */
.engage { padding: clamp(80px, 10vw, 140px) 0; background: var(--surface); text-align: center; }
.engage .section-head { margin-inline: auto; }
.engage .section-head .lede { margin-inline: auto; }
.engage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; }
.engage-card {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 44px);
  border-radius: 6px;
  background: #fff;
  transition: translate .3s ease, box-shadow .3s ease;
}
.engage-card:hover { translate: 0 -4px; box-shadow: 0 30px 60px -32px rgba(3,14,38,.3); }
.engage-card .ic {
  width: 52px;
  height: 52px;
  margin-bottom: 22px;
  padding: 13px;
  border-radius: 50%;
  background: var(--sky);
  color: var(--brand-primary);
}
.engage-card h3 { margin: 0 0 14px; font-size: 22px; letter-spacing: -0.015em; }
.engage-card p { margin: 0 0 18px; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
/* Pinned to the card's bottom edge so the rule lines up across the row
   regardless of how long each description runs. */
.engage-card .engage-fit {
  margin: auto 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 15px;
}
.engage-fit strong { color: var(--ink); }

@media (max-width: 900px){
  .engage-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   CTA BAND — closing conversion strip
   ========================================================= */
.cta-band {
  overflow: hidden;
  padding: clamp(72px, 9vw, 120px) 0;
  color: #fff;
  background: var(--navy-deep);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(50% 70% at 100% var(--glow-y, 0%), rgba(31,95,214,.14), transparent 62%);
}
.cta-band-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.cta-band h2 {
  margin: 0 0 18px;
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}
.cta-band-lede { max-width: 32.5em; margin: 0; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.65; color: rgba(255,255,255,.82); }
.cta-band-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.cta-band-phone {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: #fff;
  text-decoration: none;
}
.cta-band-phone:hover { color: var(--brand-light); }
.cta-band-phone .ic { width: 48px; height: 48px; padding: 13px; border-radius: 50%; background: rgba(255,255,255,.1); color: var(--brand-light); }
.cta-band-phone span { display: flex; flex-direction: column; font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.2; }
.cta-band-phone small { font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: .04em; color: rgba(255,255,255,.7); }

@media (max-width: 860px){
  .cta-band-inner { grid-template-columns: 1fr; }
}

/* Legal page: plain reading column, no imagery */
.legal { padding-block: clamp(48px, 7vw, 96px) clamp(64px, 9vw, 120px); }
.legal-inner { max-width: 900px; }
.legal-title { font-size: clamp(32px, 4.4vw, 48px); line-height: 1.1; color: var(--navy-deep); }
.legal-date { margin: 10px 0 32px; color: var(--ink-soft); font-size: 15px; }
.legal h2 { margin: 40px 0 12px; font-size: clamp(20px, 2.2vw, 24px); line-height: 1.25; color: var(--navy-deep); }
.legal p, .legal li, .legal address { font-size: 17px; line-height: 1.7; color: var(--ink); }
.legal p { margin: 0 0 16px; }
.legal ul { margin: 0 0 16px; padding-left: 1.3em; list-style: disc; }
.legal li { margin-bottom: 8px; }
.legal address { font-style: normal; }
.legal a { color: var(--brand-primary); text-decoration: underline; }