/* ════════════════════════════════════════════════════════════════════
   Robert E. Sutton Co., Inc. — style.css
   Design system: "Sierra Blue" — light theme, Sutton blue on white.
   Typography: Barlow Condensed (display) + Barlow (body).
   Prefix: stn-
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* Palette — from suttonasphalt.com */
  --stn-blue:      #1565A4;   /* primary brand — CTAs, accents */
  --stn-blue-2:    #10507F;   /* darker blue — hovers, deep accents */
  --stn-ink:       #181D27;   /* near-black — headings, footer bg */
  --stn-slate:     #3A3A3A;   /* body text */
  --stn-mist:      #F3F6FA;   /* pale blue-gray section bg */
  --stn-white:     #FFFFFF;
  --stn-rule:      #DFE5EC;   /* hairlines */
  --stn-text-mute: #5C6470;

  --stn-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --stn-body:    'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --stn-shell:   1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--stn-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--stn-slate);
  background: var(--stn-white);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--stn-blue); text-decoration: none; transition: color .15s; }
a:hover { color: var(--stn-blue-2); }

.stn-shell { max-width: var(--stn-shell); margin: 0 auto; padding: 0 28px; }
.stn-section { padding: 88px 0; }

/* ── TYPOGRAPHY ────────────────────────────────────────────────── */
.stn-display {
  font-family: var(--stn-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: .98;
  letter-spacing: .005em;
  color: var(--stn-ink);
}
.stn-display-xl { font-size: clamp(2.8rem, 6vw, 4.8rem); }
.stn-display-lg { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.stn-h3 {
  font-family: var(--stn-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.6rem;
  line-height: 1.05;
  color: var(--stn-ink);
}
.stn-eyebrow {
  font-family: var(--stn-body);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--stn-blue);
  display: inline-flex; align-items: center; gap: 10px;
}
.stn-eyebrow::before {
  content: ""; width: 26px; height: 3px; background: var(--stn-blue);
}
.stn-lede { font-size: 1.12rem; line-height: 1.6; color: var(--stn-text-mute); max-width: 58ch; }

/* ── BUTTONS ───────────────────────────────────────────────────── */
.stn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 30px;
  font-family: var(--stn-body); font-weight: 700; font-size: .95rem;
  letter-spacing: .08em; text-transform: uppercase;
  border: 2px solid transparent; border-radius: 4px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  text-decoration: none;
}
.stn-btn-blue  { background: var(--stn-red); color: #fff; border-color: var(--stn-red); }
.stn-btn-blue:hover { background: var(--stn-red-2); border-color: var(--stn-red-2); color: #fff; }
.stn-btn-outline { background: transparent; color: var(--stn-ink); border-color: var(--stn-ink); }
.stn-btn-outline:hover { background: var(--stn-ink); color: #fff; }
.stn-btn-white { background: #fff; color: var(--stn-blue-2); border-color: #fff; }
.stn-btn-white:hover { background: transparent; color: #fff; border-color: #fff; }
.stn-btn-lg { padding: 18px 36px; font-size: 1rem; }

/* ── MARQUEE ───────────────────────────────────────────────────── */
.stn-marquee {
  background: var(--stn-blue-2);
  color: #fff;
  font-size: .82rem;
  letter-spacing: .04em;
  padding: 9px 0;
}
.stn-marquee-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: nowrap; }
.stn-marquee-left { display: flex; gap: 24px; opacity: .95; min-width: 0; }
.stn-marquee-left span { white-space: nowrap; }
.stn-marquee-phone {
  color: #fff; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; flex: 0 0 auto;
}
.stn-marquee-phone:hover { color: var(--stn-ink); }

/* ── NAV ───────────────────────────────────────────────────────── */
.stn-nav {
  background: #fff;
  border-bottom: 3px solid var(--stn-blue);
  position: sticky; top: 0; z-index: 90;
}
.stn-nav-wrap { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 24px; }
.stn-brand { display: flex; align-items: center; gap: 14px; }
.stn-brand-icon img { width: 120px; height: auto; }
.stn-brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.stn-brand-main {
  font-family: var(--stn-display); font-weight: 700; text-transform: uppercase;
  font-size: 1.3rem; color: var(--stn-ink); letter-spacing: .01em;
}
.stn-brand-sub {
  font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .14em; color: var(--stn-blue); margin-top: 3px;
}
.stn-menu { display: flex; align-items: center; gap: 26px; }
.stn-menu a {
  font-weight: 600; font-size: .95rem; color: var(--stn-ink);
  padding: 8px 0; border-bottom: 3px solid transparent;
  transition: border-color .15s, color .15s;
}
.stn-menu a:hover, .stn-menu a.is-active { border-bottom-color: var(--stn-blue); color: var(--stn-ink); }

.stn-burger { display: none; background: none; border: 0; width: 40px; height: 40px; cursor: pointer; position: relative; }
.stn-burger span { position: absolute; left: 8px; right: 8px; height: 3px; background: var(--stn-ink); border-radius: 2px; transition: all .25s; }
.stn-burger span:nth-child(1) { top: 12px; }
.stn-burger span:nth-child(2) { top: 19px; }
.stn-burger span:nth-child(3) { top: 26px; }
.stn-burger.open span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.stn-burger.open span:nth-child(2) { opacity: 0; }
.stn-burger.open span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* ── HERO — light split (text left / photo right) ──────────────── */
.stn-hero { background: var(--stn-white); overflow: hidden; }
.stn-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  min-height: 560px;
}
.stn-hero-text {
  padding: 84px 56px 84px 0;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 640px;
}
.stn-hero-text .stn-eyebrow { margin-bottom: 20px; }
.stn-hero-text h1 { margin-bottom: 22px; }
.stn-hero-text h1 .blue { color: var(--stn-blue); }
.stn-hero-sub { font-size: 1.12rem; line-height: 1.6; color: var(--stn-text-mute); max-width: 54ch; margin-bottom: 30px; }
.stn-hero-sub strong { color: var(--stn-ink); font-weight: 600; }

.stn-hero-phone {
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 26px; text-decoration: none;
}
.stn-hero-phone .icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; background: var(--stn-blue); color: #fff; border-radius: 6px;
}
.stn-hero-phone .num {
  font-family: var(--stn-display); font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--stn-ink); line-height: 1;
}
.stn-hero-phone .lbl {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--stn-blue); margin-bottom: 4px;
}
.stn-hero-phone:hover .num { color: var(--stn-blue); }
.stn-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.stn-hero-photo { position: relative; }
.stn-hero-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.stn-hero-photo::before {
  /* blue edge strip where photo meets text */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 8px; background: var(--stn-blue); z-index: 2;
}
.stn-hero-photo .badge {
  position: absolute; left: 28px; bottom: 28px; z-index: 3;
  background: var(--stn-ink); color: #fff;
  padding: 14px 22px; border-left: 4px solid var(--stn-blue);
  font-family: var(--stn-display); font-weight: 700; text-transform: uppercase;
  font-size: 1.15rem; line-height: 1.15; letter-spacing: .02em;
}
.stn-hero-photo .badge small {
  display: block; font-family: var(--stn-body); font-weight: 600;
  font-size: .68rem; letter-spacing: .14em; opacity: .8; margin-top: 3px;
}

/* ── TRUST BAR ─────────────────────────────────────────────────── */
.stn-trust { background: var(--stn-blue); color: #fff; }
.stn-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.stn-trust-item { padding: 26px 14px; border-right: 1px solid rgba(255,255,255,.22); }
.stn-trust-item:last-child { border-right: 0; }
.stn-trust-item .n {
  font-family: var(--stn-display); font-weight: 700; font-size: 2.3rem;
  line-height: 1; display: block; margin-bottom: 5px;
}
.stn-trust-item .l { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .92; }

/* ── SERVICES — 3 photo cards ──────────────────────────────────── */
.stn-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 48px; }
.stn-svc-card {
  background: #fff; border: 1px solid var(--stn-rule); border-radius: 6px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .25s, box-shadow .25s;
}
.stn-svc-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(8,112,167,.28); }
.stn-svc-photo { aspect-ratio: 16 / 10; overflow: hidden; background: var(--stn-mist); position: relative; }
.stn-svc-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.stn-svc-card:hover .stn-svc-photo img { transform: scale(1.05); }
.stn-svc-photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--stn-blue);
}
.stn-svc-body { padding: 26px 26px 28px; flex: 1; display: flex; flex-direction: column; }
.stn-svc-body h3 { margin-bottom: 10px; }
.stn-svc-body p { color: var(--stn-text-mute); font-size: .99rem; line-height: 1.6; margin-bottom: 18px; flex: 1; }
.stn-svc-more {
  font-weight: 700; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--stn-blue); display: inline-flex; align-items: center; gap: 8px;
  transition: gap .15s;
}
.stn-svc-more::after { content: "→"; }
.stn-svc-more:hover { gap: 14px; color: var(--stn-blue-2); }

/* ── STORY (since 1965) ────────────────────────────────────────── */
.stn-story { background: var(--stn-mist); }
.stn-story-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 60px; align-items: center; }
.stn-story-text h2 { margin: 16px 0 22px; }
.stn-story-text p { font-size: 1.06rem; line-height: 1.75; color: var(--stn-slate); margin-bottom: 16px; max-width: 58ch; }
.stn-story-photo { border-radius: 6px; overflow: hidden; border-top: 6px solid var(--stn-blue); box-shadow: 0 24px 48px -24px rgba(24,29,39,.3); }
.stn-story-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.stn-story-licenses {
  display: flex; gap: 28px; margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--stn-rule); flex-wrap: wrap;
}
.stn-lic { font-size: .9rem; }
.stn-lic b {
  display: block; font-family: var(--stn-display); font-weight: 700;
  font-size: 1.25rem; color: var(--stn-ink); text-transform: uppercase;
}
.stn-lic span { color: var(--stn-text-mute); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }

/* ── AREAS BAND ────────────────────────────────────────────────── */
.stn-areas { background: var(--stn-ink); color: #fff; padding: 64px 0; }
.stn-areas-grid { display: grid; grid-template-columns: 1fr 1.7fr; gap: 48px; align-items: center; }
.stn-areas h2 { color: #fff; }
.stn-areas h2 .blue { color: var(--stn-blue); }
.stn-areas-list { font-size: 1.02rem; line-height: 1.95; color: rgba(255,255,255,.88); }
.stn-areas-list span { color: rgba(255,255,255,.35); margin: 0 7px; }

/* ── CTA ───────────────────────────────────────────────────────── */
.stn-cta { background: var(--stn-blue); color: #fff; padding: 96px 0 104px; text-align: center; }
.stn-cta .stn-eyebrow { color: #fff; justify-content: center; }
.stn-cta .stn-eyebrow::before { background: #fff; }
.stn-cta h2 { color: #fff; margin: 18px auto 34px; max-width: 22ch; }
.stn-cta-phone {
  display: block; width: fit-content; margin: 0 auto 44px;
  font-family: var(--stn-display); font-weight: 700;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem); color: #fff;
  border-bottom: 4px solid rgba(255,255,255,.55); padding-bottom: 8px;
  transition: opacity .15s;
}
.stn-cta-phone:hover { opacity: .85; color: #fff; }
.stn-cta-btns { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ── FOOTER ────────────────────────────────────────────────────── */
.stn-foot { background: var(--stn-ink); color: rgba(255,255,255,.85); padding: 68px 0 34px; }
.stn-foot a { color: rgba(255,255,255,.85); }
.stn-foot a:hover { color: #6FB1E8; }
.stn-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 44px; }
.stn-foot h4, .stn-foot h2.stn-foot-h, .stn-foot h2 {
  font-family: var(--stn-display); font-weight: 700; text-transform: uppercase;
  font-size: 1.1rem; color: #fff; margin-bottom: 14px; letter-spacing: .03em;
}
.stn-foot ul { list-style: none; }
.stn-foot ul li { padding: 5px 0; font-size: .95rem; }
.stn-foot-brand { font-family: var(--stn-display); font-weight: 700; text-transform: uppercase; font-size: 1.4rem; color: #fff; line-height: 1.1; }
.stn-foot-tag { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--stn-blue); margin-top: 5px; }
.stn-foot-bottom {
  border-top: 1px solid rgba(255,255,255,.14); margin-top: 52px; padding-top: 22px;
  display: flex; justify-content: space-between; font-size: .85rem; opacity: .75;
  flex-wrap: wrap; gap: 14px;
}
.stn-foot-legal { display: flex; gap: 20px; }

/* ── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .stn-hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .stn-hero-text { padding: 56px 0 44px; max-width: 100%; }
  .stn-hero-photo { min-height: 380px; }
  .stn-hero-photo::before { left: 0; top: 0; right: 0; bottom: auto; width: auto; height: 8px; }
  .stn-svc-grid { grid-template-columns: 1fr; }
  .stn-story-grid { grid-template-columns: 1fr; gap: 36px; }
  .stn-areas-grid { grid-template-columns: 1fr; gap: 28px; }
  .stn-trust-grid { grid-template-columns: 1fr 1fr; }
  .stn-trust-item:nth-child(2) { border-right: 0; }
  .stn-trust-item:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.22); }
  .stn-foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 760px) {
  .stn-shell { padding: 0 20px; }
  .stn-section { padding: 60px 0; }
  .stn-burger { display: block; }
  .stn-menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; flex-direction: column; gap: 0; padding: 14px 20px;
    border-top: 3px solid var(--stn-blue); box-shadow: 0 20px 40px -22px rgba(24,29,39,.25);
  }
  .stn-menu.is-open { display: flex; }
  .stn-menu a { padding: 14px 0; border-bottom: 1px solid var(--stn-rule); width: 100%; }
  .stn-menu a:last-child { border-bottom: 0; }
  .stn-nav-wrap { position: relative; }
  .stn-brand-icon img { width: 88px; }
  .stn-brand-main { font-size: 1.05rem; }
  .stn-marquee-left span:nth-child(2) { display: none; }
  .stn-display-xl { font-size: clamp(2.2rem, 9vw, 2.9rem); }
  .stn-display-lg { font-size: clamp(1.9rem, 7vw, 2.5rem); }
  .stn-hero-ctas .stn-btn { width: 100%; }
  .stn-hero-photo .badge { left: 16px; bottom: 16px; font-size: 1rem; padding: 11px 16px; }
  .stn-trust-grid { grid-template-columns: 1fr; }
  .stn-trust-item { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.22); }
  .stn-trust-item:last-child { border-bottom: 0; }
  .stn-foot-grid { grid-template-columns: 1fr; gap: 26px; }
  .stn-foot-bottom { flex-direction: column; align-items: flex-start; }
  html, body { overflow-x: clip; max-width: 100vw; }
}

/* ── SEASON STRIP (authentic urgency band under trust bar) ─────── */
.stn-season {
  background: var(--stn-mist);
  border-bottom: 1px solid var(--stn-rule);
  padding: 18px 0;
}
.stn-season-row {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap; text-align: center;
}
.stn-season-row .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--stn-blue); flex: 0 0 auto;
  animation: stn-pulse 2s infinite;
}
@keyframes stn-pulse {
  0%, 100% { opacity: 1; } 50% { opacity: .45; }
}
.stn-season-row p { font-size: .98rem; color: var(--stn-ink); font-weight: 500; }
.stn-season-row p b { font-weight: 700; }
.stn-season-row a { font-weight: 700; white-space: nowrap; }

/* ── TESTIMONIALS ──────────────────────────────────────────────── */
.stn-reviews-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 24px; margin-top: 48px;
}
.stn-review {
  background: #fff; border: 1px solid var(--stn-rule); border-top: 4px solid var(--stn-blue);
  border-radius: 6px; padding: 28px 26px; display: flex; flex-direction: column;
}
.stn-review .stars { color: #F5A623; font-size: 1.05rem; letter-spacing: 3px; margin-bottom: 14px; }
.stn-review blockquote {
  font-size: 1rem; line-height: 1.65; color: var(--stn-slate);
  margin: 0 0 20px; flex: 1;
}
.stn-review cite { font-style: normal; border-top: 1px solid var(--stn-rule); padding-top: 13px; }
.stn-review cite .name { font-weight: 700; color: var(--stn-ink); display: block; font-size: .96rem; }
.stn-review cite .src { font-size: .8rem; color: var(--stn-text-mute); }

.stn-review.badge-card {
  background: var(--stn-ink); border-color: var(--stn-ink); color: #fff;
  align-items: center; justify-content: center; text-align: center;
}
.stn-review.badge-card .big {
  font-family: var(--stn-display); font-weight: 700; font-size: 4.5rem;
  line-height: 1; color: var(--stn-blue);
}
.stn-review.badge-card .what {
  font-family: var(--stn-display); font-weight: 700; text-transform: uppercase;
  font-size: 1.25rem; margin: 8px 0 10px; color: #fff;
}
.stn-review.badge-card p { font-size: .9rem; color: rgba(255,255,255,.75); line-height: 1.55; }

/* ── FAQ ───────────────────────────────────────────────────────── */
.stn-faq-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 52px; margin-top: 44px;
}
.stn-faq-item { padding: 26px 0; border-top: 2px solid var(--stn-rule); }
.stn-faq-item:first-child, .stn-faq-item:nth-child(2) { border-top-color: var(--stn-blue); }
.stn-faq-q {
  font-family: var(--stn-display); font-weight: 700; text-transform: uppercase;
  font-size: 1.25rem; line-height: 1.1; color: var(--stn-ink);
  margin-bottom: 10px; padding-left: 24px; position: relative;
}
.stn-faq-q::before {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 11px; height: 11px; border-radius: 50%; background: var(--stn-blue);
}
.stn-faq-a { font-size: 1rem; line-height: 1.65; color: var(--stn-text-mute); padding-left: 24px; max-width: 52ch; }

@media (max-width: 1024px) {
  .stn-reviews-grid { grid-template-columns: 1fr; }
  .stn-faq-grid { grid-template-columns: 1fr; }
  .stn-faq-item:nth-child(2) { border-top-color: var(--stn-rule); }
}

/* ── PAGE HERO (interior pages — light, compact) ───────────────── */
.stn-page-hero {
  background: var(--stn-mist);
  border-bottom: 3px solid var(--stn-blue);
  padding: 60px 0 64px;
}
.stn-crumb {
  font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--stn-text-mute); margin-bottom: 18px;
}
.stn-crumb a { color: var(--stn-text-mute); }
.stn-crumb a:hover { color: var(--stn-blue); }
.stn-crumb span { margin: 0 8px; opacity: .5; }
.stn-page-hero h1 { max-width: 22ch; }
.stn-page-hero h1 .blue { color: var(--stn-blue); }
.stn-page-hero .stn-lede { margin-top: 18px; }
.stn-page-hero .actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

/* ── SPLIT FEATURE (photo + text rows on interior pages) ───────── */
.stn-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.stn-split.flip { grid-template-columns: 1fr 1.1fr; }
.stn-split.flip .stn-split-text { order: 2; }
.stn-split-photo { border-radius: 6px; overflow: hidden; border-top: 6px solid var(--stn-blue); box-shadow: 0 24px 48px -24px rgba(24,29,39,.3); }
.stn-split-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.stn-split-text h2 { margin: 14px 0 20px; }
.stn-split-text p { font-size: 1.05rem; line-height: 1.75; color: var(--stn-slate); margin-bottom: 15px; max-width: 58ch; }

/* ── PROCESS STEPS (numbered vertical, blue line) ──────────────── */
.stn-steps { list-style: none; margin: 44px 0 0; padding: 0; max-width: 720px; position: relative; }
.stn-steps::before { content: ""; position: absolute; left: 22px; top: 12px; bottom: 12px; width: 3px; background: var(--stn-rule); }
.stn-steps li { position: relative; padding: 0 0 34px 68px; }
.stn-steps li:last-child { padding-bottom: 0; }
.stn-steps .num {
  position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 50%;
  background: var(--stn-blue); color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--stn-display); font-weight: 700; font-size: 1.35rem;
}
.stn-steps h3 { font-family: var(--stn-display); font-weight: 700; text-transform: uppercase; font-size: 1.35rem; color: var(--stn-ink); margin-bottom: 7px; }
.stn-steps p { color: var(--stn-text-mute); font-size: 1rem; line-height: 1.65; max-width: 56ch; }

/* ── CHECK GRID (what we stripe etc.) ──────────────────────────── */
.stn-checks { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 40px; }
.stn-check {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--stn-rule); border-left: 4px solid var(--stn-blue);
  border-radius: 4px; padding: 16px 18px;
  font-weight: 600; color: var(--stn-ink); font-size: 1rem;
}
.stn-check svg { flex: 0 0 auto; color: var(--stn-blue); }

/* ── CLIENT WALL (About page — the trust list) ─────────────────── */
.stn-clients { columns: 3; column-gap: 34px; margin-top: 40px; }
.stn-clients li {
  list-style: none; break-inside: avoid; padding: 9px 0 9px 20px;
  border-bottom: 1px solid var(--stn-rule); font-size: .98rem; color: var(--stn-slate);
  position: relative;
}
.stn-clients li::before {
  content: ""; position: absolute; left: 0; top: 17px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--stn-blue);
}
.stn-clients li.gov { font-weight: 600; color: var(--stn-ink); }

/* ── GALLERY GRID ──────────────────────────────────────────────── */
.stn-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
.stn-gal figure { margin: 0; }
.stn-gal .ph { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: var(--stn-mist); margin-bottom: 10px; }
.stn-gal .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.stn-gal figure:hover .ph img { transform: scale(1.05); }
.stn-gal figcaption { font-size: .9rem; color: var(--stn-text-mute); }

/* ── CONTACT FORM ──────────────────────────────────────────────── */
.stn-contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: start; }
.stn-form { display: flex; flex-direction: column; gap: 18px; }
.stn-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stn-field { display: flex; flex-direction: column; gap: 7px; }
.stn-field label { font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--stn-ink); }
.stn-field .req { color: var(--stn-blue); }
.stn-field input, .stn-field select, .stn-field textarea {
  font-family: var(--stn-body); font-size: 1rem; padding: 13px 15px;
  border: 1.5px solid var(--stn-rule); border-radius: 4px; background: #fff; color: var(--stn-slate);
  transition: border-color .15s; width: 100%;
}
.stn-field input:focus, .stn-field select:focus, .stn-field textarea:focus { outline: none; border-color: var(--stn-blue); }
.stn-field textarea { resize: vertical; min-height: 130px; }
.stn-honeypot{display:none}
.stn-form-status { padding: 15px 18px; border-radius: 4px; font-size: .98rem; }
.stn-form-status.is-ok { background: #E7F5EC; border-left: 4px solid #2E8B57; color: #1E5E3A; }
.stn-form-status.is-err { background: #FDECEA; border-left: 4px solid #C0392B; color: #86261B; }
.stn-info { background: var(--stn-mist); border: 1px solid var(--stn-rule); border-top: 4px solid var(--stn-blue); border-radius: 6px; padding: 30px; }
.stn-info h3 { font-family: var(--stn-display); font-weight: 700; text-transform: uppercase; font-size: 1.4rem; color: var(--stn-ink); margin-bottom: 16px; }
.stn-info-block { padding: 13px 0; border-bottom: 1px solid var(--stn-rule); }
.stn-info-block:last-child { border-bottom: 0; }
.stn-info-label { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--stn-blue); margin-bottom: 4px; }
.stn-info-value { font-family: var(--stn-display); font-weight: 700; font-size: 1.15rem; color: var(--stn-ink); }
.stn-info-value a { color: inherit; }
.stn-info-value a:hover { color: var(--stn-blue); }

@media (max-width: 1024px) {
  .stn-split, .stn-split.flip { grid-template-columns: 1fr; gap: 34px; }
  .stn-split.flip .stn-split-text { order: -1; }
  .stn-checks { grid-template-columns: 1fr 1fr; }
  .stn-clients { columns: 2; }
  .stn-gal { grid-template-columns: 1fr 1fr; }
  .stn-contact-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 640px) {
  .stn-checks { grid-template-columns: 1fr; }
  .stn-clients { columns: 1; }
  .stn-gal { grid-template-columns: 1fr; }
  .stn-form-row { grid-template-columns: 1fr; }
}

/* ── STAT PANEL (photo-free visual for split sections) ─────────── */
.stn-statpanel {
  background: var(--stn-ink);
  border-radius: 6px;
  border-top: 6px solid var(--stn-blue);
  box-shadow: 0 24px 48px -24px rgba(24,29,39,.4);
  aspect-ratio: 4 / 3;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 40px 32px; color: #fff;
}
.stn-statpanel .big {
  font-family: var(--stn-display); font-weight: 700;
  font-size: clamp(4rem, 8vw, 6.5rem); line-height: .95;
  color: var(--stn-yellow); letter-spacing: .01em;
}
.stn-statpanel .what {
  font-family: var(--stn-display); font-weight: 700; text-transform: uppercase;
  font-size: 1.4rem; margin-top: 12px; color: #fff; letter-spacing: .02em;
}
.stn-statpanel p {
  font-size: .95rem; color: rgba(255,255,255,.75);
  line-height: 1.55; margin-top: 12px; max-width: 34ch;
}
@media (max-width: 1024px) {
  .stn-statpanel { aspect-ratio: auto; padding: 36px 26px; }
}

/* 4-col variant of check grid (desktop only, collapses on smaller screens) */
.stn-checks.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .stn-checks.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .stn-checks.four { grid-template-columns: 1fr; } }

/* ── HERO QUOTE CARD (form floating over the hero photo half) ──── */
.stn-hero-form-wrap {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 44px 28px;
  min-height: 560px;
}
.stn-hero-form-wrap .backdrop {
  position: absolute; inset: 0;
  overflow: hidden;
}
.stn-hero-form-wrap .backdrop img {
  width: 100%; height: 100%; object-fit: cover;
}
.stn-hero-form-wrap .backdrop::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 8px; background: var(--stn-blue); z-index: 2;
}
.stn-hero-form-wrap .backdrop::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(24, 29, 39, .25);
}
.stn-hero-quote-card {
  position: relative; z-index: 3;
  background: #fff;
  border-radius: 8px;
  border-top: 5px solid var(--stn-blue);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .5);
  padding: 26px 26px 28px;
  width: 100%; max-width: 400px;
}
.stn-hero-quote-card h2 {
  font-family: var(--stn-display); font-weight: 700; text-transform: uppercase;
  font-size: 1.9rem; line-height: 1; color: var(--stn-ink); margin-bottom: 6px;
}
.stn-hero-quote-card .sub {
  font-size: .9rem; color: var(--stn-text-mute); margin-bottom: 18px; line-height: 1.5;
}
.stn-hero-quote-card .sub a { font-weight: 700; }
.stn-hero-quote-card .stn-form { gap: 12px; }
.stn-hero-quote-card .stn-field label { font-size: .72rem; }
.stn-hero-quote-card .stn-field input,
.stn-hero-quote-card .stn-field textarea { padding: 11px 13px; font-size: .96rem; }
.stn-hero-quote-card .stn-field textarea { min-height: 76px; }
.stn-hero-quote-card button[type="submit"] { width: 100%; padding: 14px 20px; }
.stn-hero-quote-card .fine {
  font-size: .76rem; color: var(--stn-text-mute); text-align: center; margin-top: 10px;
}

@media (max-width: 1024px) {
  .stn-hero-form-wrap { min-height: 0; padding: 40px 20px; }
}

/* Compact the hero quote card so it fits above the fold on laptops */
.stn-hero-form-wrap { min-height: 500px; padding: 32px 28px; }
.stn-hero-quote-card { padding: 20px 22px 22px; max-width: 380px; }
.stn-hero-quote-card h2 { font-size: 1.55rem; margin-bottom: 4px; }
.stn-hero-quote-card .sub { font-size: .84rem; margin-bottom: 12px; line-height: 1.45; }
.stn-hero-quote-card .stn-form { gap: 9px; }
.stn-hero-quote-card .stn-field { gap: 4px; }
.stn-hero-quote-card .stn-field label { font-size: .66rem; letter-spacing: .08em; }
.stn-hero-quote-card .stn-field input { padding: 9px 12px; font-size: .94rem; }
.stn-hero-quote-card .stn-field textarea { padding: 9px 12px; font-size: .94rem; min-height: 52px; }
.stn-hero-quote-card button[type="submit"] { padding: 12px 18px; font-size: .9rem; }
.stn-hero-quote-card .fine { font-size: .7rem; margin-top: 8px; }
/* Hero left column tightened to match */
.stn-hero-grid { min-height: 500px; }
.stn-hero-text { padding: 56px 48px 56px 0; }

/* Anchor the quote card to the top of the hero so it centers with the
   first screen — the hero column runs taller than the fold on laptops,
   so flex-centering lands the card too low on page load. */
.stn-hero-form-wrap { align-items: flex-start; padding: 56px 28px 52px; }
@media (max-width: 1024px) {
  .stn-hero-form-wrap { align-items: center; padding: 32px 20px 40px; }
}

/* Shrink the hero headline so the whole hero (text + photo + card)
   fits inside the first screen instead of running past the fold. */
@media (min-width: 1025px) {
  .stn-hero-text h1 { font-size: clamp(2.6rem, 4.2vw, 3.8rem); }
  .stn-hero-text { padding: 44px 48px 44px 0; }
  .stn-hero-text .stn-eyebrow { margin-bottom: 14px; }
  .stn-hero-text h1 { margin-bottom: 16px; }
  .stn-hero-sub { font-size: 1.05rem; margin-bottom: 22px; }
  .stn-hero-phone { margin-bottom: 20px; }
  .stn-hero-phone .num { font-size: clamp(1.7rem, 2.4vw, 2rem); }
}

/* Mobile polish: keep the floating a11y/chat buttons off the footer
   legal row, and loosen the license/phone line in the top marquee. */
@media (max-width: 640px) {
  .stn-foot-bottom { padding-bottom: 200px; }
}
@media (max-width: 430px) {
  .stn-marquee { font-size: .68rem; letter-spacing: .02em; }
  .stn-marquee-row { gap: 10px; }
}

/* ── BRAND MATCH: real Sutton logo in the nav + red pulled from it ── */
:root { --stn-red: #CE2143; --stn-red-2: #A81A36; }
.stn-brand-logo { height: 48px; width: auto; display: block; }
@media (max-width: 640px) { .stn-brand-logo { height: 34px; } }
/* top bar goes brand-red, echoing the red bar in the logo */
.stn-marquee { background: var(--stn-red); }
/* red accents where blue was pure decoration */
.stn-eyebrow::before { background: var(--stn-red); }
.stn-hero-photo::before { background: var(--stn-red); }
.stn-hero-form-wrap .backdrop::before { background: var(--stn-red); }
.stn-hero-quote-card { border-top-color: var(--stn-red); }

/* ── Yellow from the logo — dark surfaces only, like the original site ── */
:root { --stn-yellow: #FFFC3D; }
.stn-trust-item .n { color: var(--stn-yellow); }
.stn-cta-phone { color: var(--stn-yellow); border-bottom-color: rgba(255,252,61,.55); }
.stn-cta-phone:hover { color: var(--stn-yellow); opacity: .85; }
.stn-foot-tag { color: var(--stn-yellow); }

/* Color roles, final: red = action (buttons) + the marquee bar; blue frames.
   Decorative accents return to blue so red buttons stay the loudest thing. */
.stn-eyebrow::before { background: var(--stn-blue); }
.stn-hero-photo::before { background: var(--stn-blue); }
.stn-hero-form-wrap .backdrop::before { background: var(--stn-blue); }
.stn-hero-quote-card { border-top-color: var(--stn-blue); }

/* ── Video embed (sealcoating drone footage) ───────────────────── */
.stn-video-frame {
  position: relative; aspect-ratio: 16 / 9;
  margin-top: 34px; border-radius: 8px; overflow: hidden;
  background: var(--stn-ink);
  box-shadow: 0 24px 60px -18px rgba(24, 29, 39, .35);
}
.stn-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Footer upgrade: logo row, social, YelloPost credit ────────── */
.stn-foot-brand-row img { width: 240px; height: auto; }
.stn-foot-blurb { margin-top: 14px; font-size: .95rem; line-height: 1.7; opacity: .85; }
.stn-foot-blurb a { color: inherit; text-decoration: underline; }
.stn-foot-social { display: flex; gap: 12px; margin-top: 18px; }
.stn-foot-social a {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 6px;
  background: rgba(255,255,255,.08); color: #fff; transition: background .15s;
}
.stn-foot-social a:hover { background: var(--stn-blue); }
.stn-foot-credit {
  border-top: 1px solid rgba(255,255,255,.14); margin-top: 26px;
  padding: 14px 0 4px; text-align: center; font-size: .8rem; opacity: .78;
}
.stn-foot-credit a { color: inherit; text-decoration: underline; }
@media (max-width: 640px) {
  /* widget clearance moves to the credit row now that it is the last element */
  .stn-foot-bottom { padding-bottom: 0; }
  .stn-foot-credit { padding-bottom: 190px; }
}

/* ---- Jul 23 2026 audit fixes ---- */
/* the ADA widget injects #stn-skip-link with NO css of its own; style both so a
   bare injected link can never render as a visible banner */
.stn-skip,#stn-skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:#FFFC3D;color:#181D27;padding:10px 18px;font-weight:700}
.stn-skip:focus,#stn-skip-link:focus{left:8px;top:8px}
.stn-form-status{margin:10px 0 0;font-size:.92rem}
.stn-form-status.is-ok{color:#1a7f37}.stn-form-status.is-err{color:#b42318}
.cf-turnstile{margin:10px 0 4px}
@media(max-width:420px){.cf-turnstile{transform:scale(.86);transform-origin:left center}.cf-turnstile iframe{max-width:none}}
@media(max-width:360px){.cf-turnstile{transform:scale(.78)}.stn-marquee-left span:first-child{display:none}}
.stn-season-row a{white-space:normal}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.stn-season-row .dot{animation:none}}

/* ---- knowledge library (Jul 23 2026) ---- */
.stn-lib-hero{background:#181D27;color:#fff;padding:72px 20px 44px}
.stn-lib-wrap{max-width:860px;margin:0 auto}
.stn-lib-eyebrow{color:#FFFC3D;font-size:.8rem;letter-spacing:.14em;font-weight:700}
.stn-lib-hero h1{color:#fff;margin:10px 0 0;font-size:clamp(1.7rem,4vw,2.6rem)}
.stn-lib-sub{color:rgba(255,255,255,.82);margin-top:12px;max-width:62ch}
.stn-lib-body{padding:44px 20px}
.stn-lib-prose p{margin:0 0 14px;line-height:1.65}
.stn-lib-pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:6px}
.stn-lib-pill{border:1px solid #c9c4bd;border-radius:99px;padding:7px 15px;text-decoration:none;color:#181D27;font-weight:600;font-size:.85rem}
.stn-lib-pill:hover{border-color:#181D27}
.stn-lib-qa{border-bottom:1px solid #e2ded6;padding:2px 0}
.stn-lib-qa summary{cursor:pointer;font-weight:700;padding:12px 0;color:#181D27}
.stn-lib-qa p{margin:0 0 14px;line-height:1.6;color:#3b3f4a}
.stn-lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:18px}
.stn-lib-card{display:block;border:1px solid #e2ded6;border-radius:12px;padding:20px;text-decoration:none;color:#181D27;background:#fff}
.stn-lib-card:hover{border-color:#181D27}
.stn-lib-card h3{margin:0 0 8px;font-size:1.05rem;line-height:1.35}
.stn-lib-card p{margin:0;color:#5a5e6a;font-size:.88rem;line-height:1.5}
.stn-lib-cta{background:#f4f2ed;padding:44px 20px;text-align:center}
.stn-lib-cta p{max-width:56ch;margin:10px auto 0}

.stn-foot-segs{border-top:1px solid rgba(255,255,255,.12);margin-top:22px;padding-top:18px}
.stn-foot-segs .stn-foot-h{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#FFFC3D;margin:0 0 10px}
.stn-foot-seglinks{display:flex;flex-wrap:wrap;gap:8px 18px}
.stn-foot-seglinks a{font-size:.85rem}

.stn-sm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:20px}
.stn-sm-card{border:1px solid #e2ded6;border-radius:12px;padding:18px 20px;background:#fff}
.stn-sm-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-bottom:1px solid #ece8e0;padding-bottom:8px}
.stn-sm-head h2{font-family:'Barlow Condensed',sans-serif;font-size:1.15rem;margin:0;color:#181D27}
.stn-sm-count{font-size:.68rem;letter-spacing:.1em;color:#8a8578;white-space:nowrap}
.stn-sm-sub{font-size:.82rem;color:#5a5e6a;margin:8px 0 0}
.stn-sm-ul{list-style:none;padding:0;margin:10px 0 0}
.stn-sm-ul li{padding:4px 0;font-size:.9rem;line-height:1.4}
.stn-sm-ul a{color:#181D27;text-decoration:none;border-bottom:1px solid transparent}
.stn-sm-ul a:hover{border-bottom-color:#181D27}

/* Skip link, deterministic. The ADA widget styles #stn-skip-link with
   transform:translateY(-200%) to hide it, but that transform was being neutralised
   in the cascade and the link rendered as a visible banner across the top of every
   page (Brandon, Jul 23 2026). Force the hidden state for anything that is not
   focused, so no cascade order can make it visible again. */
#stn-skip-link:not(:focus){transform:translateY(-200%) !important}
#stn-skip-link:focus{transform:translateY(0) !important;left:8px !important;top:8px !important;position:fixed !important}

/* footer segs v2: block now lives INSIDE the dark footer container, so inherit the
   footer's own colours instead of sitting on the page background */
.stn-foot-segs{border-top:1px solid rgba(255,255,255,.12);margin:22px 0 0;padding:18px 0 4px}
.stn-foot-segs .stn-foot-h{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#FFFC3D;margin:0 0 10px}
.stn-foot-seglinks{display:flex;flex-wrap:wrap;gap:8px 18px}
.stn-foot-seglinks a{font-size:.85rem;color:rgba(255,255,255,.78);text-decoration:none}
.stn-foot-seglinks a:hover{color:#fff;text-decoration:underline}

/* legal pages */
.stn-legal{max-width:820px}
.stn-legal-toc{background:#f4f2ed;border:1px solid #e2ded6;border-radius:12px;padding:20px 24px;margin:0 0 34px}
.stn-legal-toc h2{font-family:'Barlow Condensed',sans-serif;font-size:.95rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 10px;color:#5a5e6a}
.stn-legal-toc ol{margin:0;padding-left:20px;columns:2;column-gap:28px}
.stn-legal-toc li{padding:3px 0;font-size:.9rem;break-inside:avoid}
.stn-legal-toc a{color:#181D27;text-decoration:none}
.stn-legal-toc a:hover{text-decoration:underline}
.stn-legal-sec{scroll-margin-top:90px;margin:0 0 30px}
.stn-legal-sec h2{font-size:1.3rem;margin:0 0 12px}
.stn-legal-sec p{margin:0 0 13px;line-height:1.68}
.stn-legal-foot{border-top:1px solid #e2ded6;padding-top:20px;margin-top:34px;font-size:.92rem}
@media(max-width:620px){.stn-legal-toc ol{columns:1}}

/* superseded by the bottom-sheet rules below (kept for desktop)
   ADA sidebar open-state fix (Brandon, Jul 23 2026 - "still broken on mobile").
   The widget hides the panel with translateX(-100%) on desktop but translateY(100%)
   on phones, where it becomes a bottom sheet. Its own open rule only resets translateX,
   so on mobile the panel got the .open class and the body got scroll-locked while the
   panel stayed off-screen below the fold: tap the button, page freezes, nothing appears.
   Force both axes to zero when open, whatever the base rule used. */
#stn-a11y-sidebar.open{transform:translate(0,0) !important}
/* and let it scroll if the panel is taller than a short phone viewport */
#stn-a11y-sidebar{overflow-y:auto;-webkit-overflow-scrolling:touch}

/* ---- a11y mobile bottom sheet (Brandon, Jul 23 2026: "still open when new
   [page] open and all the way at bottom") ----
   On phones the widget renders as a bottom sheet, but it was being given a fixed
   666px height while positioned near the bottom of the viewport, so only its header
   was on screen and the rest hung below the fold with no way to scroll to it.
   Take full control of the mobile presentation: pin it to the bottom, cap it at 85%
   of the viewport, let it scroll, and slide it fully in and out on the Y axis. */
@media (max-width: 760px){
  #stn-a11y-sidebar{
    top:auto !important; bottom:0 !important; left:0 !important; right:0 !important;
    width:100% !important; max-width:100% !important;
    height:auto !important; max-height:85vh !important;
    overflow-y:auto !important; -webkit-overflow-scrolling:touch;
    border-radius:16px 16px 0 0;
    transform:translateY(100%) !important;
    transition:transform .25s ease !important;
  }
  #stn-a11y-sidebar.open{ transform:translateY(0) !important; }
}

/* ---- a11y mobile override v2 ----
   ROOT CAUSE (found by dumping every matching rule): ada-widget.js injects its own
   stylesheet at runtime containing, inside @media (max-width:760px),
       #stn-a11y-sidebar { bottom:192px !important }
   Injected AFTER our stylesheet, same specificity, both !important, so the widget won
   and the panel sat 192px up from the bottom with most of it off-screen. Beat it with
   a higher-specificity selector (html body #id = 0,1,0,2 vs #id = 0,1,0,0). */
@media (max-width: 760px){
  html body #stn-a11y-sidebar{
    position:fixed !important;
    top:auto !important; bottom:0 !important; left:0 !important; right:0 !important;
    width:100% !important; max-width:100% !important;
    height:auto !important; max-height:86vh !important;
    overflow-y:auto !important; -webkit-overflow-scrolling:touch;
    border-radius:16px 16px 0 0 !important;
    transform:translateY(100%) !important;
    transition:transform .25s ease !important;
  }
  html body #stn-a11y-sidebar.open{ transform:translateY(0) !important; }
}

/* ---- chatbot header collision (Brandon, Jul 23 2026: "white box??") ----
   The site stylesheet and chatbot.js BOTH use the `stn-` prefix, and both define
   `.stn-info`. The site's version is a light info card (#F3F6FA); the chatbot's
   version is a header block on navy with white text. The site rule won, so the chat
   header rendered as white-on-near-white and was unreadable. Scope the chatbot's
   copy by its own container so the page rule cannot reach it. */
#stn-hdr .stn-info{background:transparent !important;border:0 !important;box-shadow:none !important;
  padding:0 !important;border-radius:0 !important;color:#fff !important}
#stn-hdr .stn-info h4{color:#fff !important}
#stn-hdr .stn-info *{background:transparent !important}

/* ---- hero background video (facade) ---- */
.stn-hero{position:relative;isolation:isolate}
.stn-hero > *:not(.stn-hero-video){position:relative;z-index:2}
.stn-hero-video{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.stn-hero-poster{width:100%;height:100%;object-fit:cover;display:block}
.stn-hero-video iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;
  min-height:100%;min-width:177.77vh;transform:translate(-50%,-50%);border:0;pointer-events:none}
/* scrim keeps the headline readable over moving footage */
.stn-hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,
  rgba(24,29,39,.92) 0%,rgba(24,29,39,.80) 45%,rgba(24,29,39,.55) 100%)}
@media(max-width:900px){.stn-hero-scrim{background:rgba(24,29,39,.88)}}

/* ---- hero-video text treatment ----
   The homepage hero was built for a light background with dark navy type. Putting a
   dark video + scrim behind it made the headline unreadable. When the video layer is
   present, flip the hero copy to light. Scoped to .stn-hero:has(.stn-hero-video) so
   the styling and the background can never get out of sync. */
.stn-hero:has(.stn-hero-video) .stn-hero-text h1,
.stn-hero:has(.stn-hero-video) .stn-hero-text .stn-display{color:#fff}
.stn-hero:has(.stn-hero-video) .stn-hero-text h1 .blue{color:#6FB1E8}
.stn-hero:has(.stn-hero-video) .stn-eyebrow{color:#FFFC3D}
.stn-hero:has(.stn-hero-video) .stn-hero-sub{color:rgba(255,255,255,.92)}
.stn-hero:has(.stn-hero-video) .stn-hero-sub strong{color:#fff}
.stn-hero:has(.stn-hero-video) .stn-hero-phone{color:#fff}
.stn-hero:has(.stn-hero-video) .stn-hero-phone .icon{color:#FFFC3D}

/* ---- hero scrim v2 (Brandon: lighten the video, drop the photo behind the form) ----
   The old scrim ran to 92% opacity and buried the footage. Keep enough weight behind
   the headline for white type to stay legible, then fall away fast so the sealcoating
   footage actually reads across the rest of the hero. The form card carries its own
   solid background, so it no longer needs a photo behind it. */
.stn-hero:has(.stn-hero-video) .stn-hero-scrim{
  background:linear-gradient(90deg,
    rgba(24,29,39,.80) 0%,
    rgba(24,29,39,.62) 34%,
    rgba(24,29,39,.30) 62%,
    rgba(24,29,39,.18) 100%) !important;
}
@media(max-width:900px){
  .stn-hero:has(.stn-hero-video) .stn-hero-scrim{background:rgba(24,29,39,.74) !important}
}
/* the form column no longer holds an image */
.stn-hero:has(.stn-hero-video) .stn-hero-form-wrap{background:transparent !important}
.stn-hero:has(.stn-hero-video) .stn-hero-form-wrap > img{display:none !important}

/* ---- sticky mobile header (Brandon, Jul 23 2026) ----
   Keep the logo and the menu button pinned at the top on phones so the brand and the
   way to navigate are always reachable. The red licence/phone marquee is allowed to
   scroll away: it is context, not navigation, and pinning both would eat too much of
   a small viewport. The dropdown panel is anchored under the sticky bar, and anchor
   targets get scroll-margin so jump links do not land underneath it. */
@media (max-width: 860px){
  .stn-nav{position:sticky;top:0;z-index:900;background:#fff;
    box-shadow:0 2px 10px rgba(24,29,39,.10)}
  .stn-nav-wrap{padding-top:8px;padding-bottom:8px}
  .stn-brand-logo{max-height:42px;width:auto}
  /* the mobile dropdown hangs off the sticky bar and can scroll if it is tall */
  .stn-nav .stn-menu{position:absolute;top:100%;left:0;right:0;
    max-height:calc(100vh - 100%);overflow-y:auto;z-index:901}
  /* jump links and in-page anchors clear the pinned bar */
  :target,[id]{scroll-margin-top:76px}
}

/* ---- hero fixes v3 (Brandon: kill the blue line, we cannot see the phone or the
   second button) ----
   1. The blue vertical rule came from .stn-hero-form-wrap .backdrop::before, a divider
      that made sense against the old two-photo hero and reads as a stray line now that
      one video runs behind the whole thing.
   2. The phone label, the phone number and the outline button were all still using dark
      ink from the original light-background hero. Everything inside the hero text column
      goes light so nothing disappears into the footage. */
.stn-hero:has(.stn-hero-video) .stn-hero-form-wrap .backdrop::before,
.stn-hero:has(.stn-hero-video) .stn-hero-photo::before{display:none !important;background:none !important}

.stn-hero:has(.stn-hero-video) .stn-hero-text,
.stn-hero:has(.stn-hero-video) .stn-hero-text *:not(.stn-btn):not(.stn-btn *){color:#fff}
.stn-hero:has(.stn-hero-video) .stn-hero-text .blue{color:#6FB1E8}
.stn-hero:has(.stn-hero-video) .stn-eyebrow,
.stn-hero:has(.stn-hero-video) .stn-hero-phone .label,
.stn-hero:has(.stn-hero-video) .stn-hero-phone small,
.stn-hero:has(.stn-hero-video) .stn-hero-phone span:first-child{color:#FFFC3D}
.stn-hero:has(.stn-hero-video) .stn-hero-phone a,
.stn-hero:has(.stn-hero-video) .stn-hero-phone strong,
.stn-hero:has(.stn-hero-video) .stn-hero-phone b{color:#fff}

/* the outline button was dark-on-dark: give it a light border and white type */
.stn-hero:has(.stn-hero-video) .stn-btn-outline{
  color:#fff !important;border-color:rgba(255,255,255,.75) !important;background:transparent !important}
.stn-hero:has(.stn-hero-video) .stn-btn-outline:hover{
  background:rgba(255,255,255,.14) !important;border-color:#fff !important}

/* ---- mobile hero repair (Brandon: "not mobile optimized") ----
   The hero copy was running past the right edge on phones: the eyebrow, the H1 and the
   paragraph were all clipped. The hero column had no width ceiling of its own and the
   display type was sized for a desktop column, so long words pushed the box wider than
   the viewport. Constrain the column, scale the type to the viewport, and hard-stop any
   horizontal overflow at the page level so nothing can do this again. */
html,body{overflow-x:clip;max-width:100%}
@media (max-width: 900px){
  .stn-hero{overflow:hidden}
  .stn-hero .stn-shell{max-width:100%;padding-left:20px;padding-right:20px;box-sizing:border-box}
  .stn-hero-grid{grid-template-columns:1fr;gap:22px;min-height:0}
  .stn-hero-text,.stn-hero-form-wrap{max-width:100%;min-width:0}
  .stn-hero-text h1,.stn-hero-text .stn-display-xl{
    font-size:clamp(1.85rem,8.2vw,2.5rem);line-height:1.06;overflow-wrap:break-word;hyphens:none}
  .stn-hero .stn-eyebrow{font-size:.68rem;letter-spacing:.06em;overflow-wrap:break-word}
  .stn-hero-sub{font-size:1rem;line-height:1.55;overflow-wrap:break-word}
  .stn-hero-ctas{flex-wrap:wrap;gap:10px}
  .stn-hero-ctas .stn-btn{flex:1 1 100%;text-align:center}
  /* the floating widgets were landing on top of the hero copy: give the hero room
     below so the buttons sit over dead space rather than over sentences */
  .stn-hero{padding-bottom:84px}
}
@media (max-width: 420px){
  .stn-hero-text h1,.stn-hero-text .stn-display-xl{font-size:clamp(1.6rem,8vw,2.1rem)}
  .stn-hero .stn-shell{padding-left:16px;padding-right:16px}
}

/* ---- marquee + turnstile mobile v2 (Brandon) ----
   1. The red bar was showing only the phone on phones: the licence numbers and the
      "serving since 1965" line were both hidden. Bring the licences back, shrink the
      type, and let the row wrap instead of hiding content. Licences are the strongest
      trust signal this business has and they belong above the fold.
   2. Turnstile was still oversized. The widget has a hard ~300px iframe floor, so it
      has to be scaled, and the earlier rules were being out-specified. Force the scale
      with a transform origin that keeps it inside the card. */

/* --- red top bar keeps its content on mobile --- */
@media (max-width: 900px){
  .stn-marquee{font-size:.62rem;letter-spacing:.01em;padding-block:6px}
  .stn-marquee-row{flex-wrap:wrap;justify-content:center;gap:2px 12px;text-align:center}
  .stn-marquee-left{flex-wrap:wrap;justify-content:center;gap:4px 12px;width:100%}
  .stn-marquee-left span{white-space:normal}
  /* licence numbers stay visible at every width */
  .stn-marquee-left span:first-child{display:inline !important}
  /* the "serving since 1965" line returns above 420px, where there is room */
  .stn-marquee-left span:nth-child(2){display:inline}
  /* Phone is dropped from the red bar on mobile: the sticky Call Now button lives at
     the bottom of the screen, so repeating the number up here only crowds the bar. */
  .stn-marquee-phone{display:none}
}
@media (max-width: 380px){
  .stn-marquee{font-size:.57rem}
  /* only on the narrowest phones does the tagline go; licences and phone always stay */
  .stn-marquee-left span:nth-child(2){display:none}
}

/* --- turnstile actually fits now --- */
@media (max-width: 900px){
  .stn-hero-quote-card .cf-turnstile,
  .stn-hero-form-wrap .cf-turnstile,
  form .cf-turnstile{
    transform:scale(.82) !important;transform-origin:left top !important;
    margin:6px 0 -8px !important}
  form .cf-turnstile iframe{max-width:none !important}
}
@media (max-width: 420px){
  .stn-hero-quote-card .cf-turnstile,
  .stn-hero-form-wrap .cf-turnstile,
  form .cf-turnstile{transform:scale(.74) !important;margin:4px 0 -16px !important}
}
@media (max-width: 360px){
  form .cf-turnstile{transform:scale(.66) !important;margin:4px 0 -24px !important}
}

/* ---- hero video full-bleed fix (Brandon: gray box around the form + pause buttons) ----
   The iframe breaks out to 100vw but .stn-hero-video and its scrim were only as wide as
   the centered content column, so the middle read as a darker box and the raw video
   (with YouTube's controls) showed in the uncovered outer strips. Make the video LAYER
   and the scrim full-bleed to match the iframe, and lay a full-cover mask over the whole
   thing so YouTube's chrome is both un-clickable and visually masked. */
.stn-hero-video{left:50%;right:auto;width:100vw;transform:translateX(-50%);overflow:hidden}
.stn-hero-scrim{position:absolute;inset:0;width:100%;height:100%}
/* an even mask over the entire video so the centre play/pause overlay can never show
   through; the gradient scrim above still carries the left-to-right darkening for text */
.stn-hero-video::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(24,29,39,.22)}
.stn-hero-video iframe{z-index:0}
.stn-hero-scrim{z-index:2}

/* SMS consent checkbox */
.stn-sms{display:flex;gap:9px;align-items:flex-start;margin:6px 0 4px;cursor:pointer}
.stn-sms input{margin-top:3px;flex:0 0 auto;width:16px;height:16px}
.stn-sms span{font-size:.76rem;line-height:1.45;color:#5a5e6a}
.stn-sms a{color:#1565A4}
.stn-hero-quote-card .stn-sms span{color:#5a5e6a}

/* ---- hero balance + video shield (Brandon: form too narrow/tall, controls still show) ----
   1. Widen the quote card and give the form column a bit more of the grid so the hero
      reads balanced instead of a tall skinny column.
   2. Click-shield: a transparent layer over the iframe that swallows all pointer events
      so YouTube never receives hover/focus and cannot show its hover control bar. Pair
      it with the existing tint mask. Note: YouTube's controls=0 removes the bottom bar;
      the click-shield handles the hover controls. */
@media (min-width: 901px){
  .stn-hero-grid{grid-template-columns:1fr 1.02fr !important}
  .stn-hero-quote-card{max-width:560px !important;margin-left:auto}
  .stn-hero-form-wrap{padding:44px 24px 40px}
}
.stn-hero-quote-card{max-width:460px}
/* the shield sits above the iframe, below the scrim/text, and eats pointer events */
.stn-hero-video::before{content:"";position:absolute;inset:0;z-index:1;background:transparent;pointer-events:auto}
.stn-hero-video{pointer-events:auto}
.stn-hero-video iframe{pointer-events:none !important}
/* keep the hero CTAs and form clickable above the shield */
.stn-hero > *:not(.stn-hero-video){pointer-events:auto}

/* ---- uniform dark scrim (Brandon: match the shading around the form to the video,
   and make it darker) ----
   Replace the left-to-right gradient with an EVEN dark tint across the whole hero so
   the video area and the area behind the form read the same, and bump the mask so the
   footage sits back and YouTube's controls/caption are well hidden. */
.stn-hero:has(.stn-hero-video) .stn-hero-scrim{
  background:
    linear-gradient(to bottom, rgba(20,25,34,0) 70%, rgba(20,25,34,.55) 88%, rgba(20,25,34,.96) 100%),
    rgba(20,25,34,.62) !important}
.stn-hero-video::after{background:rgba(20,25,34,.30) !important}
@media(max-width:900px){
  .stn-hero:has(.stn-hero-video) .stn-hero-scrim{background:rgba(20,25,34,.72) !important}
}

/* Phone + Email side by side on desktop only; stacked on mobile (unchanged there).
   Brandon: wider form, phone & email on one line, desktop only. */
.stn-field-row{display:block}
@media(min-width:901px){
  .stn-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .stn-field-row .stn-field{margin:0}
}

/* Desktop hero height lock (Brandon: the one-line form shrank the hero and cut off the
   video). Pin the hero tall enough to show the full video band no matter how short the
   form gets, and center the form card within that height. Mobile is untouched. */
@media(min-width:901px){
  .stn-hero-grid{min-height:712px !important;align-items:center}
  .stn-hero-form-wrap{min-height:712px}
}

/* Turnstile tighten + kill dead space (Brandon: shrink the white space, smaller widget).
   The empty aria-live status div was reserving ~40px between the widget and the button;
   collapse it until it actually has a message. Shrink the Turnstile on desktop and pull
   the button up. Mobile scaling is handled separately and left alone. */
.stn-form-status:empty{display:none !important}
@media(min-width:901px){
  .stn-hero-quote-card .cf-turnstile{
    transform:scale(.84);transform-origin:left top;
    margin:2px 0 -10px !important}
  .stn-hero-quote-card button[type="submit"]{margin-top:6px}
  .stn-hero-quote-card .fine{margin-top:8px}
}

/* hero card center-match (Brandon: move the form down to center with the left text).
   The left copy sits lower than the form; drop the card ~90px on desktop so their
   vertical centers line up. Desktop only. */
@media(min-width:901px){
  .stn-hero-quote-card{transform:translateY(85px)}
}

/* ---- exit-intent 'before you go' popup (ported from the fleet standard, rebranded).
   Fires once per session on desktop mouse-out or a mobile scroll-up. All styling scoped
   under the popup IDs so the generic .x-* class names cannot collide with anything else
   on the page (chatbot included). ---- */
#stn-exit-ov{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgb(20 25 34/.74);backdrop-filter:blur(4px);opacity:0;transition:opacity .22s}
#stn-exit-ov.on{opacity:1}
#stn-exit-ov[hidden]{display:none}
#stn-exit-card{position:relative;width:min(440px,calc(100vw - 36px));background:#fff;border-radius:14px;padding:34px 30px 26px;box-shadow:0 30px 80px rgb(10 12 40/.5);text-align:center;transform:translateY(10px);transition:transform .22s;border-top:5px solid var(--stn-red)}
#stn-exit-ov.on #stn-exit-card{transform:none}
#stn-exit-card .x{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:1px solid #d7dbe2;background:#fff;color:var(--stn-ink);font-size:20px;line-height:1;cursor:pointer}
#stn-exit-card .ic{font-family:var(--stn-display);font-weight:700;color:var(--stn-red);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
#stn-exit-card h3{font-family:var(--stn-display);font-weight:700;text-transform:uppercase;font-size:1.7rem;line-height:1.08;color:var(--stn-ink);margin-bottom:10px}
#stn-exit-card .x-sub{font-size:.95rem;color:#4b5162;line-height:1.6;margin-bottom:20px}
#stn-exit-card .x-btns{display:flex;flex-direction:column;gap:10px}
#stn-exit-card .x-btns a{display:block;padding:13px 20px;border-radius:8px;font-weight:700;text-decoration:none;font-family:var(--stn-body)}
#stn-exit-card .x-cta{background:var(--stn-red);color:#fff}
#stn-exit-card .x-cta:hover{background:var(--stn-red-2);color:#fff}
#stn-exit-card .x-call{background:var(--stn-ink);color:#fff}
#stn-exit-card .x-call:hover{background:#000;color:#fff}
#stn-exit-card .x-skip{margin-top:14px;background:none;border:0;color:#8a8f9c;font-size:.85rem;cursor:pointer;text-decoration:underline}
#stn-exit-card .x-trust{margin-top:16px;font-size:.78rem;color:#8a8f9c}
body.stn-exit-open{overflow:hidden}
/* ==== SITEMAP BROCHURE ==== */
.stn-bro{--bro-line:#e4e0d8}
.stn-bro-eyebrow{font-family:var(--stn-display);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.8rem;color:var(--stn-red)}
.stn-bro-h2{font-family:var(--stn-display);font-weight:700;text-transform:uppercase;font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.02;color:var(--stn-ink);margin:.35rem 0 0}
.stn-bro-intro{max-width:60ch;color:#51566a;font-size:1.02rem;line-height:1.6;margin:14px 0 0}
.stn-bro-sec{padding:64px 0}
.stn-bro-alt{background:var(--stn-mist)}
.stn-bro-go{display:inline-block;font-family:var(--stn-display);font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.82rem;color:var(--stn-blue);margin-top:14px}
.stn-bro-hero{background:radial-gradient(1200px 500px at 15% -10%,#22304a 0%,#181d27 55%,#12151d 100%);color:#fff;padding:84px 0 76px}
.stn-bro-hero-eyebrow{font-family:var(--stn-display);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.82rem;color:#FFD23D;margin:0}
.stn-bro-h1{font-family:var(--stn-display);font-weight:700;text-transform:uppercase;font-size:clamp(2.4rem,6.5vw,4.6rem);line-height:.98;margin:14px 0 0;color:#fff}
.stn-bro-lead{max-width:64ch;color:rgba(255,255,255,.82);font-size:1.1rem;line-height:1.62;margin:20px 0 0}
.stn-bro-cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.stn-bro-btn{display:inline-block;font-family:var(--stn-body);font-weight:700;font-size:.98rem;padding:14px 26px;border-radius:8px;text-decoration:none;transition:transform .12s,background .15s}
.stn-bro-btn:hover{transform:translateY(-2px)}
.stn-bro-btn-red{background:var(--stn-red);color:#fff}
.stn-bro-btn-red:hover{background:var(--stn-red-2);color:#fff}
.stn-bro-btn-ghost{border:1.5px solid rgba(255,255,255,.45);color:#fff}
.stn-bro-btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.stn-bro-btn-white{background:#fff;color:var(--stn-ink)}
.stn-bro-btn-white:hover{background:#f1f1f1;color:var(--stn-ink)}
.stn-bro-btn-ghost2{border:1.5px solid rgba(255,255,255,.55);color:#fff}
.stn-bro-btn-ghost2:hover{background:rgba(255,255,255,.12);color:#fff}
.stn-bro-stats{background:var(--stn-blue-2);color:#fff;padding:26px 0}
.stn-bro-stats-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;text-align:center}
.stn-bro-stats-row>div{display:flex;flex-direction:column;gap:2px;padding:6px 4px}
.stn-bro-stats-row .n{font-family:var(--stn-display);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.3rem);line-height:1;color:#FFD23D}
.stn-bro-stats-row .l{font-size:.74rem;letter-spacing:.04em;color:rgba(255,255,255,.82);text-transform:uppercase}
.stn-bro-cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px;margin-top:30px}
.stn-bro-scard{position:relative;display:block;background:#fff;border:1px solid var(--bro-line);border-top:4px solid var(--stn-red);border-radius:12px;padding:26px 24px 22px;text-decoration:none;transition:transform .14s,box-shadow .14s}
.stn-bro-scard:hover{transform:translateY(-4px);box-shadow:0 18px 40px -20px rgba(24,29,39,.35)}
.stn-bro-scard-k{font-family:var(--stn-display);font-weight:700;font-size:1rem;color:#c9c4b8}
.stn-bro-scard h3{font-family:var(--stn-display);font-weight:700;text-transform:uppercase;font-size:1.5rem;color:var(--stn-ink);margin:4px 0 8px}
.stn-bro-scard p{color:#51566a;font-size:.96rem;line-height:1.55;margin:0}
.stn-bro-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:12px;margin-top:28px}
.stn-bro-chip{display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--bro-line);border-left:3px solid var(--stn-blue);border-radius:8px;padding:13px 16px;text-decoration:none;transition:transform .12s,border-color .12s}
.stn-bro-chip:hover{transform:translateY(-2px);border-left-color:var(--stn-red)}
.stn-bro-chip span{font-family:var(--stn-display);font-weight:700;text-transform:uppercase;font-size:1.02rem;color:var(--stn-ink);letter-spacing:.01em}
.stn-bro-chip small{font-size:.74rem;color:#8a8578;letter-spacing:.03em}
.stn-bro-regions{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:22px 26px;margin-top:30px}
.stn-bro-region h4{font-family:var(--stn-display);font-weight:700;text-transform:uppercase;font-size:1.05rem;color:var(--stn-ink);margin:0 0 8px;padding-bottom:6px;border-bottom:2px solid var(--stn-red);display:flex;justify-content:space-between;align-items:baseline}
.stn-bro-region h4 em{font-style:normal;font-size:.72rem;color:#8a8578;font-family:var(--stn-body);letter-spacing:.06em}
.stn-bro-region ul{list-style:none;margin:0;padding:0}
.stn-bro-region li{padding:3px 0}
.stn-bro-region a{color:#31374a;text-decoration:none;font-size:.94rem;border-bottom:1px solid transparent}
.stn-bro-region a:hover{color:var(--stn-blue);border-bottom-color:var(--stn-blue)}
.stn-bro-allareas{margin:26px 0 0}
.stn-bro-allareas a{font-family:var(--stn-display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--stn-blue);text-decoration:none}
.stn-bro-acard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--bro-line);border-radius:12px;padding:22px 22px;text-decoration:none;transition:transform .14s,box-shadow .14s}
.stn-bro-acard:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(24,29,39,.3)}
.stn-bro-acard h3{font-family:var(--stn-display);font-weight:700;text-transform:uppercase;font-size:1.28rem;color:var(--stn-ink);margin:0 0 6px}
.stn-bro-acard p{color:#51566a;font-size:.92rem;line-height:1.5;margin:0;flex:1}
.stn-bro-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:26px;margin-top:30px}
.stn-bro-libcol h4{font-family:var(--stn-display);font-weight:700;text-transform:uppercase;font-size:1.05rem;color:var(--stn-ink);margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--bro-line)}
.stn-bro-libcol h4 em{font-style:normal;font-size:.72rem;color:#8a8578;font-family:var(--stn-body);margin-left:6px}
.stn-bro-libcol ul{list-style:none;margin:0;padding:0}
.stn-bro-libcol li{padding:4px 0}
.stn-bro-libcol a{color:#31374a;text-decoration:none;font-size:.92rem;line-height:1.4;border-bottom:1px solid transparent}
.stn-bro-libcol a:hover{color:var(--stn-blue);border-bottom-color:var(--stn-blue)}
.stn-bro-accwrap{margin-top:28px;display:grid;gap:10px}
.stn-bro-acc{background:#fff;border:1px solid var(--bro-line);border-radius:10px;overflow:hidden}
.stn-bro-acc summary{cursor:pointer;list-style:none;padding:15px 20px;font-family:var(--stn-display);font-weight:700;text-transform:uppercase;font-size:1.05rem;color:var(--stn-ink);display:flex;justify-content:space-between;align-items:center}
.stn-bro-acc summary::-webkit-details-marker{display:none}
.stn-bro-acc summary::after{content:"+";font-size:1.4rem;color:var(--stn-red);line-height:1}
.stn-bro-acc[open] summary::after{content:"\2013"}
.stn-bro-acc summary em{font-style:normal;font-size:.74rem;color:#8a8578;font-family:var(--stn-body);letter-spacing:.05em;margin-left:auto;margin-right:14px}
.stn-bro-cols{list-style:none;margin:0;padding:6px 20px 18px;columns:3;column-gap:26px}
.stn-bro-cols li{padding:3px 0;break-inside:avoid}
.stn-bro-cols a{color:#31374a;text-decoration:none;font-size:.9rem;border-bottom:1px solid transparent}
.stn-bro-cols a:hover{color:var(--stn-blue);border-bottom-color:var(--stn-blue)}
.stn-bro-cta{background:var(--stn-red);color:#fff;padding:62px 0;text-align:center}
.stn-bro-cta h2{font-family:var(--stn-display);font-weight:700;text-transform:uppercase;font-size:clamp(1.9rem,5vw,3rem);margin:0}
.stn-bro-cta p{max-width:52ch;margin:12px auto 0;color:rgba(255,255,255,.9);font-size:1.05rem;line-height:1.55}
.stn-bro-cta .stn-bro-cta-row{justify-content:center}
@media(max-width:820px){.stn-bro-stats-row{grid-template-columns:repeat(2,1fr);gap:18px 10px}.stn-bro-cols{columns:2}.stn-bro-sec{padding:48px 0}}
@media(max-width:480px){.stn-bro-cols{columns:1}.stn-bro-stats-row{grid-template-columns:1fr 1fr}}

.stn-foot-note{list-style:none;margin-top:10px;opacity:.62;font-size:.82rem;line-height:1.45;max-width:22ch}