/* ==========================================================
   SHARK EXTERIOR — Theme layer
   Loaded after styles.css. Owns the header, footer, homepage
   sections, buttons, headings, motion and the contact bubble.
   Brand colours sampled from the Shark Exterior logo files.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --sx-blue: #0463EE;
  --sx-blue-600: #0352C7;
  --sx-blue-300: #5B9BFF;
  --sx-blue-100: #E7F0FF;
  --sx-orange: #F86A05;
  --sx-orange-600: #DC5A00;
  --sx-orange-300: #FF9A4D;
  --sx-orange-rgb: 248 106 5;
  --sx-navy: #04143C;
  --sx-navy-800: #0A2152;
  --sx-slate: #6E7F94;
  --sx-slate-dark: #56687E;
  --sx-ink: #0B1A33;
  --sx-text: #4A5568;
  --sx-muted: #8A94A6;
  --sx-line: #E6EAF0;
  --sx-bg: #FFFFFF;
  --sx-bg-soft: #F4F8FE;

  --sx-font: 'Lexend', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --sx-ease: cubic-bezier(.22, 1, .36, 1);
  --sx-wrap: 1280px;
  --sx-gutter: 24px;
  --sx-radius: 12px;
  --sx-section: 110px;

  /* Legacy tokens used by styles.css — remapped to the brand */
  --shark-blue: var(--sx-blue);
  --shark-blue-dark: var(--sx-blue-600);
  --shark-blue-light: var(--sx-blue-300);
  --shark-orange: var(--sx-orange);
  --shark-orange-dark: var(--sx-orange-600);
  --shark-orange-light: var(--sx-orange-300);
  --shark-navy: var(--sx-navy);
  --shark-navy-deep: #020C26;
  --leaf-navy: var(--sx-navy);
  --leaf-navy-deep: #020C26;
  --leaf-green: var(--sx-blue);
  --leaf-green-dark: var(--sx-blue-600);
  --leaf-mint: var(--sx-blue-300);
  --leaf-light: var(--sx-bg-soft);
  --text-dark: var(--sx-ink);
  --text-muted: var(--sx-text);
  --font-heading: var(--sx-font);
  --font-body: var(--sx-font);
  --shadow-glow: 0 8px 28px rgba(4, 99, 238, .32);
}

/* ---------- Base ---------- */
body {
  font-family: var(--sx-font);
  font-weight: 300;
  color: var(--sx-ink);
  background: var(--sx-bg);
}
body::before { display: none; }
body.sx-lock { overflow: hidden; }
::selection { background: var(--sx-blue); color: #fff; }
:focus-visible { outline: 2px solid var(--sx-orange); outline-offset: 3px; }

.sx-wrap {
  width: 100%;
  max-width: var(--sx-wrap);
  margin-inline: auto;
  padding-inline: var(--sx-gutter);
}
.sx-center { display: flex; justify-content: center; margin-top: 40px; }
.sx-section { position: relative; padding-block: var(--sx-section); overflow: hidden; background: var(--sx-bg); }
.sx-section > .sx-wrap { position: relative; z-index: 1; }

/* ---------- Motion ----------
   Content fades up once when it scrolls into view.
   Hidden state only applies when JS is running (html.sx-js). */
/* Once settled (entrance finished) these release the card so its own hover transform can apply */
.sx-js .sx-r:not(.sx-settled) {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .8s var(--sx-ease), transform .8s var(--sx-ease);
  transition-delay: var(--d, 0ms);
}
.sx-js .sx-r.is-in:not(.sx-settled) { opacity: 1; transform: none; }
.sx-in { animation: sx-rise .9s var(--sx-ease) both; animation-delay: var(--d, 0ms); }
@keyframes sx-rise { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .sx-js .sx-r, .sx-in { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .sx-glow { animation: none !important; }
}

/* ---------- Glow blobs ---------- */
.sx-glow {
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(4, 99, 238, .30) 0%, rgba(91, 155, 255, .16) 38%, rgba(91, 155, 255, 0) 68%);
  pointer-events: none;
  z-index: 0;
  animation: sx-float 14s ease-in-out infinite alternate;
}
.sx-glow--left { left: -140px; top: 40px; }
.sx-glow--right { right: -160px; top: 30%; background: radial-gradient(circle, rgba(248, 106, 5, .28) 0%, rgba(255, 154, 77, .14) 40%, rgba(255, 154, 77, 0) 70%); }
.sx-section--glow { background: linear-gradient(180deg, #fff 0%, var(--sx-bg-soft) 100%); }
@keyframes sx-float { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(40px, 30px, 0) scale(1.08); } }

/* ---------- Headings ---------- */
.sx-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 56px; gap: 10px; }
.sx-eyebrow {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--sx-blue);
}
.sx-eyebrow--under { font-size: 1.02rem; letter-spacing: .06em; font-weight: 500; }
.sx-title {
  font-family: var(--sx-font);
  font-size: clamp(2.2rem, 3.8vw, 3.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sx-navy);
  text-wrap: balance;
  margin: 0;
}
.sx-title--left { text-align: left; }
.sx-title--mixed { text-transform: none; letter-spacing: 0; }
.sx-sub { max-width: 640px; color: var(--sx-text); font-size: 1.12rem; line-height: 1.6; margin-top: 8px; }
.sx-head--light .sx-title { color: #fff; }
.sx-head--light .sx-eyebrow { color: #9CC3FF; }
.sx-note { text-align: center; color: var(--sx-muted); font-size: 1rem; margin-top: 28px; }
.sx-note a { color: var(--sx-blue); font-weight: 600; }

/* ---------- Buttons ---------- */
.sx-btn {
  --bg: var(--sx-orange);
  --bg-h: var(--sx-orange-600);
  --glow: rgba(248, 106, 5, .45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 36px;
  border: 0;
  border-radius: 999px;
  background: var(--bg);
  color: #fff;
  font-family: var(--sx-font);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px -6px var(--glow);
  transition: transform .35s var(--sx-ease), box-shadow .35s var(--sx-ease), background-color .25s ease;
  white-space: nowrap;
}
.sx-btn svg { width: 16px; height: 16px; transition: transform .35s var(--sx-ease); }
.sx-btn:hover { background: var(--bg-h); transform: translateY(-3px); box-shadow: 0 14px 30px -8px var(--glow), 0 0 0 4px rgba(255, 255, 255, .06); color: #fff; }
.sx-btn:hover svg { transform: translateX(4px); }
.sx-btn:active { transform: translateY(-1px) scale(.98); }
.sx-btn--blue { --bg: var(--sx-blue); --bg-h: var(--sx-blue-600); --glow: rgba(4, 99, 238, .45); }
.sx-btn--navy { --bg: var(--sx-navy); --bg-h: var(--sx-navy-800); --glow: rgba(4, 20, 60, .45); }
.sx-btn--ghost { --bg: transparent; --bg-h: var(--sx-navy); --glow: transparent; color: var(--sx-navy); box-shadow: inset 0 0 0 1.5px var(--sx-navy); }
.sx-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--sx-navy), 0 12px 26px -10px rgba(4, 20, 60, .4); }
.sx-btn--sm { padding: 15px 28px; font-size: .8rem; }
.sx-btn--xs { padding: 11px 20px; font-size: .74rem; letter-spacing: .08em; }
.sx-btn--block { width: 100%; }

/* ==========================================================
   HEADER
   ========================================================== */
.sx-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color .4s var(--sx-ease), box-shadow .4s var(--sx-ease), backdrop-filter .4s;
}
.sx-nav-inner {
  max-width: 1480px;
  margin-inline: auto;
  padding: 22px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: padding .4s var(--sx-ease);
}
.sx-nav.scrolled {
  background: rgba(4, 20, 60, .82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .45);
}
.sx-nav.scrolled .sx-nav-inner { padding-block: 10px; }
.sx-nav-logo img { height: 50px; width: auto; transition: transform .35s var(--sx-ease), height .4s var(--sx-ease); }
.sx-nav.scrolled .sx-nav-logo img { height: 42px; }
.sx-nav-logo:hover img { transform: scale(1.04); }
.sx-nav-links { display: flex; align-items: center; gap: 6px; }
.sx-nav-link {
  line-height: 1.2;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  color: #fff;
  font-family: var(--sx-font);
  font-size: 1rem;
  font-weight: 400;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .25s ease;
}
.sx-nav-link::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--sx-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--sx-ease);
}
.sx-nav-link:hover, .sx-nav-link[aria-current="page"] { color: #fff; }
.sx-nav-link:hover::after, .sx-nav-link[aria-current="page"]::after { transform: scaleX(1); }
.sx-nav-link svg { width: 18px; height: 18px; fill: currentColor; transition: transform .3s var(--sx-ease); }
.sx-nav-call, .sx-nav-quote {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 600;
  color: #fff;
  transition: transform .35s var(--sx-ease), box-shadow .35s var(--sx-ease), background-color .25s;
}
.sx-nav-call { background: var(--sx-blue); margin-right: 6px; box-shadow: 0 6px 16px -6px rgba(4, 99, 238, .7); }
.sx-nav-call svg { width: 15px; height: 15px; fill: currentColor; }
.sx-nav-call:hover { background: var(--sx-blue-600); transform: translateY(-2px); box-shadow: 0 10px 24px -6px rgba(4, 99, 238, .8); color: #fff; }
/* phone sits next to the quote button as the quieter of the two: outlined, number shown */
.sx-nav-links .sx-nav-call { margin: 0 0 0 10px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .42); font-variant-numeric: tabular-nums; }
.sx-nav-links .sx-nav-call:hover { background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1.5px #fff; }
.sx-nav-quote { background: var(--sx-orange); margin-left: 6px; box-shadow: 0 6px 16px -6px rgb(var(--sx-orange-rgb) / .7); }
.sx-nav-quote:hover { background: var(--sx-orange-600); transform: translateY(-2px); box-shadow: 0 10px 24px -6px rgb(var(--sx-orange-rgb) / .8); color: #fff; }

.sx-nav-drop { position: relative; }
.sx-nav-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  min-width: 290px;
  padding: 10px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 50px -18px rgba(4, 20, 60, .45);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity .15s linear, transform .15s linear, visibility 0s linear .15s;
}
.sx-nav-drop:hover .sx-nav-menu, .sx-nav-drop.is-open .sx-nav-menu { transition: opacity .3s var(--sx-ease), transform .3s var(--sx-ease), visibility 0s; }
.sx-nav-menu::before { content: ''; position: absolute; inset: -12px 0 auto 0; height: 12px; }
.sx-nav-menu a {
  display: block;
  padding: 12px 16px;
  border-radius: 9px;
  color: var(--sx-ink);
  font-size: .98rem;
  font-weight: 400;
  transition: background-color .2s, color .2s, padding-left .25s var(--sx-ease);
}
.sx-nav-menu a:hover { background: var(--sx-blue-100); color: var(--sx-blue); padding-left: 18px; }
.sx-nav-drop:hover .sx-nav-menu, .sx-nav-drop.is-open .sx-nav-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.sx-nav-drop:hover .sx-nav-drop-btn svg, .sx-nav-drop.is-open .sx-nav-drop-btn svg { transform: rotate(180deg); }

.sx-burger {
  display: none;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .1);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  position: relative;
  z-index: 1002;
}
.sx-burger span { width: 22px; height: 2px; border-radius: 2px; background: #fff; transition: transform .35s var(--sx-ease), opacity .2s; }
.sx-burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sx-burger.active span:nth-child(2) { opacity: 0; }
.sx-burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.sx-drawer {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: rgba(2, 12, 38, .6);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--sx-ease), visibility .35s;
}
.sx-drawer.open { opacity: 1; visibility: visible; }
.sx-drawer-panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(380px, 88vw);
  background: var(--sx-navy);
  padding: calc(92px + env(safe-area-inset-top, 0px)) 28px calc(28px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .45s var(--sx-ease);
}
.sx-drawer.open .sx-drawer-panel { transform: none; }
.sx-drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.sx-drawer-link::-webkit-details-marker { display: none; }
.sx-drawer-link svg { width: 22px; height: 22px; fill: currentColor; transition: transform .3s var(--sx-ease); }
.sx-drawer-group[open] .sx-drawer-link svg { transform: rotate(180deg); }
.sx-drawer-sub { display: flex; flex-direction: column; padding: 6px 0 10px 12px; }
.sx-drawer-sub a { padding: 9px 4px; color: rgba(255, 255, 255, .72); font-size: .95rem; }
.sx-drawer-sub a:hover { color: #fff; }
.sx-drawer-ctas { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }

/* ==========================================================
   HERO
   ========================================================== */
.sx-hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: flex;
  align-items: center;
  padding-block: 140px 90px;
  overflow: hidden;
  background: var(--sx-navy);
  isolation: isolate;
}
.sx-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  animation: sx-kenburns 18s ease-out both;
}
.sx-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(2, 12, 38, .78) 0%, rgba(2, 12, 38, .45) 45%, rgba(2, 12, 38, .08) 100%),
    linear-gradient(180deg, rgba(2, 12, 38, .45) 0%, rgba(2, 12, 38, 0) 30%);
}
@keyframes sx-kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
.sx-hero-inner { color: #fff; }
.sx-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: .9rem;
  font-weight: 400;
  margin-bottom: 26px;
}
.sx-hero h1 {
  font-family: var(--sx-font);
  font-size: clamp(2.8rem, 6vw, 5.4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: #fff;
  margin: 0 0 20px;
  max-width: 14ch;
  text-wrap: balance;
}
.sx-hero h1 span { color: var(--sx-orange); }
.sx-hero p { max-width: 600px; font-size: 1.22rem; line-height: 1.6; color: rgba(255, 255, 255, .88); margin: 0 0 30px; }
.sx-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* Stars */
.sx-stars { display: inline-flex; gap: 2px; }
.sx-stars svg { width: 17px; height: 17px; fill: #FFB400; }

/* ==========================================================
   SERVICES BENTO
   ========================================================== */
.sx-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(220px, 21vw, 300px);
  gap: 12px;
  max-width: 1120px;
  margin-inline: auto;
}
.sx-tile {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  background: var(--sx-navy);
  box-shadow: 0 10px 24px -16px rgba(4, 20, 60, .55);
  transition: transform .5s var(--sx-ease), box-shadow .5s var(--sx-ease);
}
.sx-tile--wide { grid-column: span 2; }
.sx-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .9s var(--sx-ease); }
.sx-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(4, 20, 60, .15) 0%, rgba(4, 20, 60, .5) 100%);
  transition: background-color .5s var(--sx-ease), opacity .5s;
}
.sx-tile span {
  padding: 0 16px;
  color: #fff;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
  transition: transform .5s var(--sx-ease);
}
.sx-tile:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -18px rgba(4, 99, 238, .6); }
.sx-tile:hover img { transform: scale(1.08); }
.sx-tile:hover::after { background-color: rgba(4, 99, 238, .28); }
.sx-tile:hover span { transform: scale(1.05); }

/* ==========================================================
   SAVE BIG — PLANS
   ========================================================== */
.sx-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1080px; margin-inline: auto; align-items: stretch; }
.sx-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 30px 34px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 40px -18px rgba(4, 20, 60, .28);
  transition: transform .45s var(--sx-ease), box-shadow .45s var(--sx-ease);
}
.sx-plan:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -20px rgba(4, 99, 238, .42); }
.sx-plan--pop { box-shadow: 0 0 0 2px var(--sx-orange), 0 20px 46px -18px rgb(var(--sx-orange-rgb) / .4); }
.sx-plan--pop:hover { box-shadow: 0 0 0 2px var(--sx-orange), 0 28px 54px -18px rgb(var(--sx-orange-rgb) / .5); }
.sx-plan-badge { position: absolute; top: -14px; padding: 7px 14px; border-radius: 999px; background: var(--sx-orange); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sx-plan-label { color: var(--sx-blue); font-size: .88rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.sx-plan-price { margin-top: 12px; color: var(--sx-navy); font-size: 2.8rem; font-weight: 800; line-height: 1; }
.sx-plan-price em { font-style: normal; color: var(--sx-orange); }
.sx-plan-per { margin-top: 8px; color: var(--sx-muted); font-size: .8rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.sx-plan p { margin: 16px 0 14px; color: var(--sx-text); font-size: 1rem; line-height: 1.55; }
.sx-plan ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; text-align: left; width: 100%; max-width: 270px; }
.sx-plan li { display: flex; align-items: center; gap: 10px; font-size: .96rem; color: var(--sx-ink); font-weight: 400; }
.sx-plan li svg { flex: none; width: 22px; height: 22px; padding: 3px; border-radius: 50%; }
.sx-plan li.is-yes svg { color: var(--sx-blue); background: var(--sx-blue-100); }
.sx-plan li.is-no { color: var(--sx-muted); }
.sx-plan li.is-no svg { color: #D64545; background: #FDECEC; }
.sx-plan .sx-btn { margin-top: auto; }

/* ==========================================================
   REVIEWS
   ========================================================== */
.sx-rating { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 14px; margin: -26px 0 40px; color: var(--sx-text); font-size: 1rem; }
.sx-rating b { color: var(--sx-navy); font-weight: 700; }
.sx-g { width: 20px; height: 20px; flex: none; }
.sx-carousel { position: relative; max-width: 1180px; margin-inline: auto; }
.sx-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 56px) / 3);
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 8px 2px 14px;
}
.sx-track::-webkit-scrollbar { display: none; }
.sx-review {
  scroll-snap-align: start;
  padding: 28px 28px 30px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--sx-line);
  transition: transform .4s var(--sx-ease), box-shadow .4s var(--sx-ease), border-color .4s;
}
.sx-review:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 20px 40px -22px rgba(4, 20, 60, .35); }
.sx-review header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sx-review header div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sx-review strong { color: var(--sx-navy); font-size: 1.02rem; font-weight: 600; }
.sx-review header span:not(.sx-avatar) { color: var(--sx-muted); font-size: .86rem; }
.sx-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .9rem; font-weight: 600; flex: none; }
.sx-review p { margin: 12px 0 0; color: var(--sx-text); font-size: 1rem; line-height: 1.6; }
.sx-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: var(--sx-navy);
  box-shadow: 0 8px 20px -8px rgba(4, 20, 60, .4);
  display: grid;
  place-items: center;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color .25s, color .25s, transform .3s var(--sx-ease);
}
.sx-arrow svg { width: 18px; height: 18px; }
.sx-arrow:hover { background: var(--sx-blue); color: #fff; transform: translateY(-50%) scale(1.08); }
.sx-arrow--prev { left: -66px; }
.sx-arrow--next { right: -66px; }

/* ==========================================================
   4 STEP PROCESS (homepage stepper)
   ========================================================== */
.sx-process { background: var(--sx-slate); }
.sx-stepper { max-width: 1080px; margin-inline: auto; }
.sx-steps { position: relative; }
.sx-step {
  display: grid;
  grid-template-columns: 44% 1fr;
  min-height: 420px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--sx-slate-dark);
  box-shadow: 0 30px 60px -30px rgba(2, 12, 38, .6);
}
.sx-step[hidden] { display: none; }
.sx-step.is-active { animation: sx-step-in .3s var(--sx-ease) both; }
@keyframes sx-step-in { from { opacity: .35; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.sx-step img { width: 100%; height: 100%; object-fit: cover; }
.sx-step-body { padding: 48px 56px; color: #fff; display: flex; flex-direction: column; justify-content: center; }
.sx-step-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sx-orange);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  box-shadow: 0 0 0 6px rgb(var(--sx-orange-rgb) / .18);
}
.sx-step h3 { margin: 20px 0 14px; font-size: clamp(2.2rem, 3.8vw, 3.4rem); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #fff; line-height: 1; }
.sx-step p { margin: 0; color: rgba(255, 255, 255, .88); font-size: 1.08rem; line-height: 1.7; max-width: 42ch; }
.sx-dots { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 26px; }
.sx-dots-line { position: absolute; left: 12.5%; right: 12.5%; top: 11px; height: 2px; background: rgba(255, 255, 255, .28); border-radius: 2px; }
.sx-dots-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--sx-orange); border-radius: 2px; transition: width .6s var(--sx-ease); }
.sx-dot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; color: rgba(255, 255, 255, .7); font-family: var(--sx-font); font-size: .86rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.sx-dot i { width: 24px; height: 24px; border-radius: 50%; background: var(--sx-slate); border: 2px solid rgba(255, 255, 255, .6); transition: background-color .3s, border-color .3s, transform .3s var(--sx-ease); }
.sx-dot:hover i { transform: scale(1.15); }
.sx-dot.is-done i, .sx-dot.is-active i { background: var(--sx-orange); border-color: var(--sx-orange); }
.sx-dot.is-active { color: #fff; }
.sx-dot.is-active i { box-shadow: 0 0 0 6px rgb(var(--sx-orange-rgb) / .25); }

/* ==========================================================
   ABOUT
   ========================================================== */
.sx-about { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.sx-about-img { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3.3; box-shadow: 0 30px 60px -30px rgba(4, 20, 60, .5); }
.sx-about-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--sx-ease); }
.sx-about-img:hover img { transform: scale(1.05); }
.sx-about-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.sx-about-copy p { margin: 0; color: var(--sx-text); font-size: 1.1rem; line-height: 1.7; max-width: 58ch; }
.sx-checks { list-style: none; padding: 0; margin: 4px 0 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.sx-checks li { display: flex; align-items: center; gap: 10px; font-size: 1.02rem; color: var(--sx-ink); font-weight: 400; }
.sx-checks svg { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; color: #fff; background: var(--sx-blue); }

/* ==========================================================
   PROUDLY SERVING
   ========================================================== */
.sx-areas { display: grid; gap: 48px; max-width: 1060px; margin-inline: auto; }
.sx-area { display: grid; grid-template-columns: 380px 1fr; gap: 56px; align-items: start; }
.sx-area-map { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1 / .9; background: var(--sx-bg-soft); box-shadow: 0 16px 36px -18px rgba(4, 20, 60, .4); }
.sx-area-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.sx-area-maplink { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; background: var(--sx-blue); color: #fff; font-size: .72rem; font-weight: 600; box-shadow: 0 6px 14px -6px rgba(4, 99, 238, .7); transition: transform .3s var(--sx-ease); }
.sx-area-maplink:hover { transform: translateY(-2px); color: #fff; }
.sx-area-maplink svg { width: 13px; height: 13px; fill: currentColor; }
.sx-area-list h3 { margin: 6px 0 18px; text-align: center; color: var(--sx-navy); font-size: 1.7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sx-acc { border-bottom: 1px solid var(--sx-line); }
.sx-acc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 2px;
  list-style: none;
  cursor: pointer;
  color: var(--sx-navy);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .2s;
}
.sx-acc summary::-webkit-details-marker { display: none; }
.sx-acc summary:hover { color: var(--sx-blue); }
.sx-acc-chev { width: 20px; height: 20px; fill: currentColor; transition: transform .35s var(--sx-ease); }
.sx-acc[open] .sx-acc-chev { transform: rotate(180deg); }
.sx-acc p { margin: 0 0 16px; padding-right: 20px; color: var(--sx-text); font-size: 1rem; line-height: 1.6; animation: sx-rise .45s var(--sx-ease) both; }

/* ==========================================================
   FEATURED REVIEW BAND
   ========================================================== */
.sx-band { position: relative; padding-block: 110px; overflow: hidden; isolation: isolate; background: var(--sx-navy); }
.sx-band-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.sx-band::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(4, 20, 60, .7); }
.sx-band-inner { max-width: 860px; color: #fff; }
.sx-band blockquote { margin: 0 0 22px; font-size: clamp(1.25rem, 2.3vw, 1.75rem); font-weight: 300; line-height: 1.55; color: #fff; }
.sx-band-meta { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, .8); font-size: .85rem; }

/* ==========================================================
   BLOG CARDS
   ========================================================== */
.sx-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1180px; margin-inline: auto; }
.sx-post { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 20px; border-radius: 16px; background: #fff; box-shadow: 0 14px 34px -22px rgba(4, 20, 60, .4); transition: transform .45s var(--sx-ease), box-shadow .45s var(--sx-ease); }
.sx-post:hover { transform: translateY(-6px); box-shadow: 0 26px 46px -22px rgba(4, 99, 238, .45); }
.sx-post-img { border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 10; }
.sx-post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--sx-ease); }
.sx-post:hover .sx-post-img img { transform: scale(1.07); }
.sx-post-cat { margin: 8px 8px 0; color: var(--sx-blue); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.sx-post h3 { margin: 0 8px; color: var(--sx-navy); font-size: 1.2rem; font-weight: 600; line-height: 1.35; }
.sx-post-more { margin: auto 8px 0; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; color: var(--sx-orange); font-size: .86rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.sx-post-more svg { width: 15px; height: 15px; transition: transform .35s var(--sx-ease); }
.sx-post:hover .sx-post-more svg { transform: translateX(4px); }

/* ==========================================================
   FINAL CTA + FOOTER (one continuous navy block)
   ========================================================== */
.sx-final { position: relative; padding-block: 150px 120px; overflow: hidden; isolation: isolate; text-align: center; background: var(--sx-navy); }
.sx-final-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .55; }
.sx-final::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(4, 20, 60, .55) 0%, rgba(4, 20, 60, .72) 55%, var(--sx-navy) 100%);
}
.sx-final::before { content: ''; position: absolute; inset: 0 0 auto; height: 120px; background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%); opacity: .0; }
.sx-final-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #fff; }
.sx-final h2 { margin: 0; font-size: clamp(2.3rem, 5vw, 4.2rem); font-weight: 700; line-height: 1.08; color: #fff; text-wrap: balance; }
.sx-final p { margin: 0 0 14px; max-width: 620px; color: rgba(255, 255, 255, .85); font-size: 1.18rem; line-height: 1.6; }

.sx-footer { background: var(--sx-navy); color: rgba(255, 255, 255, .72); padding: 40px 0 calc(32px + env(safe-area-inset-bottom, 0px)); font-size: .98rem; }
.sx-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 40px; padding-bottom: 44px; }
.sx-footer-brand img { height: 54px; width: auto; margin-bottom: 16px; }
.sx-footer-brand p { margin: 0 0 18px; max-width: 30ch; line-height: 1.6; }
.sx-footer-social { display: flex; gap: 10px; }
.sx-footer-social a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); transition: background-color .25s, transform .3s var(--sx-ease); }
.sx-footer-social a:hover { background: var(--sx-blue); transform: translateY(-3px); }
.sx-footer-social svg { width: 16px; height: 16px; fill: #fff; }
.sx-footer-col { display: flex; flex-direction: column; gap: 12px; }
.sx-footer-col h4 { margin: 0 0 8px; color: #fff; font-size: .9rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.sx-footer-col a { color: rgba(255, 255, 255, .72); transition: color .2s, transform .3s var(--sx-ease); width: fit-content; }
.sx-footer-col a:hover { color: var(--sx-orange-300); transform: translateX(3px); }
.sx-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 24px; font-size: .88rem; color: rgba(255, 255, 255, .5); }
.sx-footer-bottom p { margin: 0; }

/* ==========================================================
   FLOATING CONTACT
   ========================================================== */
.sx-chat { position: fixed; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 990; }
.sx-chat-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 0;
  background: var(--sx-blue);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 14px 30px -10px rgba(4, 99, 238, .75);
  transition: transform .35s var(--sx-ease), background-color .25s;
  animation: sx-pop .6s var(--sx-ease) 1.2s both;
}
.sx-chat-btn::before { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(4, 99, 238, .5); animation: sx-pulse 2.6s ease-out 2s infinite; }
.sx-chat-btn:hover { transform: scale(1.08); background: var(--sx-blue-600); }
.sx-chat-btn svg { width: 26px; height: 26px; fill: currentColor; grid-area: 1 / 1; transition: transform .35s var(--sx-ease), opacity .25s; }
.sx-chat-ico-close { opacity: 0; transform: rotate(-90deg); }
.sx-chat.open .sx-chat-ico-open { opacity: 0; transform: rotate(90deg); }
.sx-chat.open .sx-chat-ico-close { opacity: 1; transform: none; }
.sx-chat.open .sx-chat-btn::before { animation: none; }
@keyframes sx-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes sx-pulse { 0% { box-shadow: 0 0 0 0 rgba(4, 99, 238, .5); } 70% { box-shadow: 0 0 0 16px rgba(4, 99, 238, 0); } 100% { box-shadow: 0 0 0 0 rgba(4, 99, 238, 0); } }
.sx-chat-panel {
  position: absolute;
  right: 0;
  bottom: 74px;
  width: min(340px, calc(100vw - 32px));
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 60px -20px rgba(4, 20, 60, .5);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.96);
  transform-origin: bottom right;
  transition: opacity .35s var(--sx-ease), transform .35s var(--sx-ease), visibility .35s;
}
.sx-chat.open .sx-chat-panel { opacity: 1; visibility: visible; transform: none; }
.sx-chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--sx-navy); color: #fff; }
.sx-chat-head img { width: 40px; height: 40px; border-radius: 10px; }
.sx-chat-head div { display: flex; flex-direction: column; }
.sx-chat-head strong { font-size: .95rem; font-weight: 600; }
.sx-chat-head span { font-size: .74rem; color: rgba(255, 255, 255, .7); }
.sx-chat-form { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.sx-chat-form label { font-size: .74rem; font-weight: 500; color: var(--sx-navy); margin-top: 4px; }
.sx-chat-form input, .sx-chat-form textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--sx-line);
  font-family: var(--sx-font);
  font-size: .88rem;
  color: var(--sx-ink);
  background: var(--sx-bg-soft);
  resize: vertical;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.sx-chat-form input:focus, .sx-chat-form textarea:focus { outline: none; border-color: var(--sx-blue); background: #fff; box-shadow: 0 0 0 3px rgba(4, 99, 238, .15); }
.sx-chat-form .sx-btn { margin-top: 10px; }
.sx-chat-error { min-height: 0; margin: 2px 0 0; color: #C53030; font-size: .76rem; }
.sx-chat-error:empty { display: none; }
.sx-chat-done { display: flex; flex-direction: column; gap: 6px; padding: 22px 18px 24px; font-size: .86rem; color: var(--sx-text); line-height: 1.55; }
.sx-chat-done[hidden] { display: none; }
.sx-chat-done strong { color: var(--sx-navy); font-size: 1rem; }
.sx-chat-done a { color: var(--sx-blue); font-weight: 600; }

/* Hide legacy mobile sticky bar — replaced by the contact bubble */
.mobile-sticky-cta { display: none !important; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1180px) {
  .sx-arrow--prev { left: -8px; }
  .sx-arrow--next { right: -8px; }
  .sx-carousel { padding-inline: 30px; }
}

/* Tablet (iPad) */
@media (max-width: 1100px) {
  .sx-nav-links { display: none; }
  .sx-burger { display: flex; }
  .sx-nav-inner { padding: 14px 24px; }
}

@media (max-width: 900px) {
  :root { --sx-section: 72px; }
  .sx-track { grid-auto-columns: calc((100% - 20px) / 2); gap: 20px; }
  .sx-about { grid-template-columns: 1fr; gap: 36px; }
  .sx-posts { grid-template-columns: 1fr 1fr; }
  .sx-posts > :last-child { display: none; }
  .sx-footer-grid { grid-template-columns: 1fr 1fr; }
  .sx-plans { gap: 14px; }
  .sx-plan { padding: 26px 16px 22px; }
}

/* Phone */
@media (max-width: 680px) {
  :root { --sx-section: 60px; --sx-gutter: 18px; }
  .sx-nav-logo img, .sx-nav.scrolled .sx-nav-logo img { height: 36px; }
  .sx-hero { min-height: 0; padding-block: 128px 70px; }
  .sx-hero h1 { font-size: clamp(2.2rem, 10vw, 2.8rem); }
  .sx-hero p { font-size: .95rem; }
  .sx-head { margin-bottom: 30px; }
  .sx-bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 6px; }
  .sx-tile span { font-size: .9rem; }
  .sx-plans { grid-template-columns: 1fr; max-width: 380px; gap: 22px; }
  .sx-plan--pop { order: -1; }
  .sx-rating { margin-top: -10px; }
  .sx-carousel { padding-inline: 0; }
  .sx-track { grid-auto-columns: 86%; gap: 14px; }
  .sx-arrow { display: none; }
  .sx-step { grid-template-columns: 1fr; min-height: 0; }
  .sx-step img { aspect-ratio: 16 / 10; height: auto; }
  .sx-step-body { padding: 24px 22px 28px; }
  .sx-dot span { font-size: .6rem; letter-spacing: .04em; }
  .sx-checks { grid-template-columns: 1fr; }
  .sx-area { grid-template-columns: 1fr; gap: 18px; }
  .sx-area-map { aspect-ratio: 16 / 10; }
  .sx-band { padding-block: 80px; }
  .sx-posts { grid-template-columns: 1fr; max-width: 420px; }
  .sx-posts > :last-child { display: flex; }
  .sx-final { padding-block: 110px 90px; }
  .sx-footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .sx-footer-brand { grid-column: 1 / -1; }
  .sx-chat { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .sx-chat-btn { width: 54px; height: 54px; }
}

/* ==========================================================
   INNER PAGES — service, commercial, about
   ========================================================== */
.sx-hero--page { min-height: min(78vh, 720px); }
.sx-hero--page h1 { max-width: 16ch; }
.sx-section--tight { padding-block: calc(var(--sx-section) * .75); }
.sx-title--sm { font-size: clamp(1.8rem, 2.8vw, 2.4rem); letter-spacing: 0; }
.sx-eyebrow--dark { color: var(--sx-navy); font-size: .8rem; font-weight: 600; letter-spacing: .1em; }
.sx-btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.sx-final .sx-btn-row { margin-top: 4px; }
.sx-btn--glass { --bg: rgba(255, 255, 255, .12); --bg-h: rgba(255, 255, 255, .22); --glow: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sx-btn--glass svg { width: 15px; height: 15px; }
.sx-btn--glass:hover svg { transform: none; }

/* Article + sidebar */
.sx-article-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 72px; align-items: start; }
.sx-article { color: var(--sx-text); font-size: 1.08rem; line-height: 1.75; }
.sx-article h2 { margin: 0 0 18px; color: var(--sx-navy); font-size: 1.9rem; font-weight: 700; line-height: 1.25; }
.sx-article h3 { margin: 34px 0 14px; color: var(--sx-navy); font-size: 1.35rem; font-weight: 600; }
.sx-article p { margin: 0 0 14px; }
.sx-article strong { color: var(--sx-ink); font-weight: 600; }
.sx-article ul { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 10px; }
.sx-article ul li { position: relative; padding-left: 22px; }
.sx-article ul li::before { content: ''; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--sx-orange); }
.sx-article-areas { color: var(--sx-navy); font-weight: 500; }
.sx-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 22px; }
.sx-side nav { display: flex; flex-direction: column; border-top: 1px solid var(--sx-line); }
.sx-side nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--sx-line);
  color: var(--sx-navy);
  font-size: 1rem;
  font-weight: 500;
  transition: color .2s, padding-left .3s var(--sx-ease);
}
.sx-side nav a svg { width: 16px; height: 16px; color: var(--sx-muted); transition: transform .3s var(--sx-ease), color .2s; }
.sx-side nav a:hover { color: var(--sx-blue); padding-left: 10px; }
.sx-side nav a:hover svg { color: var(--sx-blue); transform: translateX(3px); }
.sx-side nav a.is-active { color: var(--sx-blue); font-weight: 600; }
.sx-side nav a.is-active::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sx-orange); margin-right: -2px; flex: none; order: -1; }
.sx-side-cta { display: flex; flex-direction: column; gap: 8px; padding: 28px; border-radius: 18px; background: var(--sx-navy); color: rgba(255, 255, 255, .8); font-size: .96rem; }
.sx-side-cta strong { color: #fff; font-size: 1.25rem; font-weight: 600; }
.sx-side-cta .sx-btn { margin-top: 8px; }
.sx-side-phone { display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-top: 4px; color: #fff; font-weight: 500; }
.sx-side-phone svg { width: 15px; height: 15px; }
.sx-side-phone:hover { color: var(--sx-orange-300); }

/* Process photo tiles */
.sx-ptiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; max-width: 1220px; margin-inline: auto; }
.sx-ptile { position: relative; aspect-ratio: 1 / 1.05; border-radius: 12px; overflow: hidden; isolation: isolate; background: var(--sx-navy); box-shadow: 0 16px 34px -20px rgba(4, 20, 60, .6); outline: none; }
.sx-ptile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .9s var(--sx-ease), filter .5s; }
.sx-ptile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4, 20, 60, 0) 35%, rgba(4, 20, 60, .82) 100%); transition: background-color .5s var(--sx-ease); }
.sx-ptile-label { position: absolute; left: 20px; right: 20px; bottom: 20px; color: #fff; font-size: 1.35rem; font-weight: 800; font-style: italic; letter-spacing: .04em; text-transform: uppercase; line-height: 1.15; transition: transform .5s var(--sx-ease); }
.sx-ptile-desc { position: absolute; left: 20px; right: 20px; bottom: 20px; margin: 0; color: rgba(255, 255, 255, .92); font-size: .95rem; line-height: 1.5; opacity: 0; transform: translateY(12px); transition: opacity .45s var(--sx-ease), transform .45s var(--sx-ease); }
.sx-ptile:hover img, .sx-ptile:focus-visible img { transform: scale(1.08); }
.sx-ptile:hover::after, .sx-ptile:focus-visible::after { background-color: rgba(4, 20, 60, .45); }
.sx-ptile:hover .sx-ptile-label, .sx-ptile:focus-visible .sx-ptile-label { transform: translateY(-86px); }
.sx-ptile:hover .sx-ptile-desc, .sx-ptile:focus-visible .sx-ptile-desc { opacity: 1; transform: none; }

/* Numbered FAQ */
.sx-faq { max-width: 860px; margin-inline: auto; }
.sx-faq-item { display: grid; grid-template-columns: 96px 1fr; gap: 22px; padding: 30px 0; border-bottom: 1px solid var(--sx-line); }
.sx-faq-item:first-child { border-top: 1px solid var(--sx-line); }
.sx-faq-num { color: #D5DCE6; font-size: 3.4rem; font-weight: 700; line-height: 1; }
.sx-faq-item h3 { margin: 4px 0 10px; color: var(--sx-navy); font-size: 1.25rem; font-weight: 600; line-height: 1.4; }
.sx-faq-a, .sx-faq-a p { margin: 0; color: var(--sx-text); font-size: 1.02rem; line-height: 1.7; }
.sx-faq-a a { color: var(--sx-blue); font-weight: 500; }

/* Commercial — clients speak for us */
.sx-clients-wrap { background: var(--sx-bg-soft); }
.sx-clients { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1100px; margin-inline: auto; }
.sx-client { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 22px; border-radius: 12px; background: #fff; box-shadow: 0 12px 30px -20px rgba(4, 20, 60, .35); transition: transform .4s var(--sx-ease), box-shadow .4s var(--sx-ease); }
.sx-client:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(4, 99, 238, .45); }
.sx-client p { margin: 0; color: var(--sx-ink); font-size: 1rem; line-height: 1.6; }
.sx-client div { display: flex; align-items: center; gap: 8px; color: var(--sx-muted); font-size: .72rem; }
.sx-client div span { color: var(--sx-navy); font-weight: 600; letter-spacing: .04em; }

@media (max-width: 1000px) {
  .sx-article-wrap { grid-template-columns: 1fr; gap: 40px; }
  .sx-side { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  .sx-ptiles { grid-template-columns: repeat(2, 1fr); max-width: 620px; }
}
@media (max-width: 680px) {
  .sx-hero--page { min-height: 0; }
  .sx-side { grid-template-columns: 1fr; }
  .sx-ptiles { gap: 10px; }
  .sx-ptile-label { font-size: .9rem; left: 12px; bottom: 12px; }
  .sx-ptile-desc { display: none; }
  .sx-ptile:hover .sx-ptile-label { transform: none; }
  .sx-faq-item { grid-template-columns: 52px 1fr; gap: 12px; padding: 20px 0; }
  .sx-faq-num { font-size: 1.9rem; }
  .sx-clients { grid-template-columns: 1fr; max-width: 420px; }
  .sx-final .sx-btn-row { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
}

/* About page */
.sx-section--soft { background: var(--sx-bg-soft); }
.sx-story { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; max-width: 1180px; margin-inline: auto; }
.sx-story-copy p { margin: 0 0 18px; color: var(--sx-text); font-size: 1.1rem; line-height: 1.8; }
.sx-story-img { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 28px 56px -28px rgba(4, 20, 60, .5); }
.sx-story-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--sx-ease); }
.sx-story-img:hover img { transform: scale(1.05); }
.sx-experience { max-width: 900px; margin-inline: auto; }
.sx-experience a { color: var(--sx-blue); font-weight: 500; }
.sx-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1220px; margin-inline: auto; }
.sx-value { padding: 26px 22px; border-radius: 14px; background: #fff; box-shadow: 0 14px 34px -22px rgba(4, 20, 60, .35); transition: transform .45s var(--sx-ease), box-shadow .45s var(--sx-ease); }
.sx-value:hover { transform: translateY(-6px); box-shadow: 0 26px 46px -22px rgba(4, 99, 238, .45); }
.sx-value-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--sx-blue-100); color: var(--sx-blue); margin-bottom: 16px; transition: background-color .3s, color .3s, transform .45s var(--sx-ease); }
.sx-value:hover .sx-value-ico { background: var(--sx-orange); color: #fff; transform: rotate(-6deg) scale(1.06); }
.sx-value-ico svg { width: 22px; height: 22px; fill: currentColor; }
.sx-value h3 { margin: 0 0 10px; color: var(--sx-navy); font-size: 1.2rem; font-weight: 600; }
.sx-value p { margin: 0; color: var(--sx-text); font-size: 1rem; line-height: 1.6; }
@media (max-width: 900px) {
  .sx-story { grid-template-columns: 1fr; gap: 32px; }
  .sx-values { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .sx-values { grid-template-columns: 1fr; } }

/* ==========================================================
   INTERACTION POLISH — hover, pop-in and page transitions
   ========================================================== */

/* Page transitions: a navy curtain lifts away when a page opens
   and drops back down when you click through to another page. */
html.sx-js::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 3000;
  pointer-events: none;
  background: var(--sx-navy) url('images/icon-512.png') center / 84px no-repeat;
  animation: sx-curtain-out .7s cubic-bezier(.76, 0, .24, 1) .05s both;
}
html.sx-js.sx-leaving::after { animation: sx-curtain-in .45s cubic-bezier(.76, 0, .24, 1) both; }
@keyframes sx-curtain-out { from { transform: translateY(0); } to { transform: translateY(-100%); visibility: hidden; } }
@keyframes sx-curtain-in { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* Cards pop in (scale + rise) instead of a plain fade */
.sx-js .sx-tile.sx-r:not(.sx-settled),
.sx-js .sx-plan.sx-r:not(.sx-settled),
.sx-js .sx-post.sx-r:not(.sx-settled),
.sx-js .sx-ptile.sx-r:not(.sx-settled),
.sx-js .sx-value.sx-r:not(.sx-settled),
.sx-js .sx-client.sx-r:not(.sx-settled),
.sx-js .sx-area.sx-r:not(.sx-settled),
.sx-js .sx-social.sx-r:not(.sx-settled),
.sx-js .sx-member.sx-r:not(.sx-settled) {
  transform: translate3d(0, 40px, 0) scale(.92);
  transition: opacity .75s var(--sx-ease), transform .9s cubic-bezier(.34, 1.4, .64, 1);
  transition-delay: var(--d, 0ms);
}
.sx-js .sx-tile.sx-r.is-in:not(.sx-settled),
.sx-js .sx-plan.sx-r.is-in:not(.sx-settled),
.sx-js .sx-post.sx-r.is-in:not(.sx-settled),
.sx-js .sx-ptile.sx-r.is-in:not(.sx-settled),
.sx-js .sx-value.sx-r.is-in:not(.sx-settled),
.sx-js .sx-client.sx-r.is-in:not(.sx-settled),
.sx-js .sx-area.sx-r.is-in:not(.sx-settled),
.sx-js .sx-social.sx-r.is-in:not(.sx-settled),
.sx-js .sx-member.sx-r.is-in:not(.sx-settled) { transform: none; }
/* Once in, hover transitions run at their own speed (no reveal delay) */
.sx-r.is-in.sx-settled { transition-delay: 0ms; }
.sx-js .sx-r.sx-settled:is(.sx-tile, .sx-plan, .sx-post, .sx-ptile, .sx-value, .sx-client, .sx-area, .sx-member) {
  transition: transform .5s var(--sx-ease), box-shadow .5s var(--sx-ease), opacity .5s;
}

/* Button shine sweep */
.sx-btn, .sx-nav-call, .sx-nav-quote { position: relative; overflow: hidden; isolation: isolate; }
.sx-btn::after, .sx-nav-call::after, .sx-nav-quote::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-20deg);
  transition: left .7s var(--sx-ease);
}
.sx-btn:hover::after, .sx-nav-call:hover::after, .sx-nav-quote:hover::after { left: 120%; }
.sx-btn--ghost::after { display: none; }
.sx-btn--ghost:hover { color: #fff; }

/* Service tiles: lift, glow ring, label rises and a "View service" pill appears */
.sx-tile { cursor: pointer; }
.sx-tile span { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sx-tile span::after {
  content: 'View Service  →';
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--sx-orange);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: none;
  white-space: pre;
  opacity: 0;
  transform: translateY(14px) scale(.9);
  transition: opacity .4s var(--sx-ease), transform .45s cubic-bezier(.34, 1.4, .64, 1);
  box-shadow: 0 10px 24px -8px rgb(var(--sx-orange-rgb) / .7);
}
.sx-tile:hover span::after, .sx-tile:focus-visible span::after { opacity: 1; transform: none; }
.sx-tile:hover, .sx-tile:focus-visible { transform: translateY(-8px) scale(1.02); box-shadow: 0 0 0 3px var(--sx-blue), 0 30px 50px -20px rgba(4, 99, 238, .65); z-index: 2; }
.sx-tile:hover::after, .sx-tile:focus-visible::after { background-color: rgba(4, 20, 60, .45); }
.sx-tile:hover span, .sx-tile:focus-visible span { transform: none; }
.sx-bento:hover .sx-tile:not(:hover) img { filter: saturate(.7) brightness(.85); }
.sx-tile img { transition: transform .9s var(--sx-ease), filter .5s var(--sx-ease); }

/* Cards: stronger lift + brand ring */
.sx-plan:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 0 0 2px var(--sx-blue), 0 34px 60px -24px rgba(4, 99, 238, .5); }
.sx-plan--pop:hover { box-shadow: 0 0 0 3px var(--sx-orange), 0 34px 60px -22px rgb(var(--sx-orange-rgb) / .55); }
.sx-plan:hover .sx-plan-price { transform: scale(1.06); }
.sx-plan-price { transition: transform .45s cubic-bezier(.34, 1.4, .64, 1); }
.sx-review:hover { transform: translateY(-8px); border-color: transparent; box-shadow: 0 0 0 2px var(--sx-blue-100), 0 28px 50px -24px rgba(4, 20, 60, .4); }
.sx-post:hover { transform: translateY(-10px); box-shadow: 0 0 0 2px var(--sx-blue-100), 0 34px 56px -24px rgba(4, 99, 238, .5); }
.sx-post:hover h3 { color: var(--sx-blue); }
.sx-post h3 { transition: color .25s; }
.sx-value:hover, .sx-client:hover { transform: translateY(-8px) scale(1.02); }
.sx-ptile { cursor: default; transition: transform .5s var(--sx-ease), box-shadow .5s var(--sx-ease); }
.sx-ptile:hover { transform: translateY(-8px); box-shadow: 0 0 0 3px var(--sx-orange), 0 30px 50px -22px rgba(4, 20, 60, .7); }
.sx-area-map { transition: transform .5s var(--sx-ease), box-shadow .5s var(--sx-ease); }
.sx-area-map:hover { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--sx-blue), 0 26px 46px -20px rgba(4, 99, 238, .5); }
.sx-about-img, .sx-story-img { transition: transform .6s var(--sx-ease), box-shadow .6s var(--sx-ease); }
.sx-about-img:hover, .sx-story-img:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 40px 70px -30px rgba(4, 99, 238, .55); }
.sx-acc summary { transition: color .2s, padding-left .3s var(--sx-ease), background-color .3s; border-radius: 8px; }
.sx-acc summary:hover { padding-left: 12px; background: var(--sx-blue-100); }
/* FAQ hover: only the number lights up — no shifting or background */
.sx-faq-num { transition: color .45s var(--sx-ease), text-shadow .45s var(--sx-ease), transform .45s var(--sx-ease); transform-origin: left center; }
.sx-faq-item:hover .sx-faq-num { color: var(--sx-blue); text-shadow: 0 0 22px rgba(4, 99, 238, .35); transform: scale(1.06); }
.sx-faq-item:nth-child(even):hover .sx-faq-num { color: var(--sx-orange); text-shadow: 0 0 22px rgb(var(--sx-orange-rgb) / .35); }
.sx-faq-item h3 { transition: color .35s var(--sx-ease); }

/* Nav dropdown: staggered pop-in of each service */
/* Links cascade in on open; on close everything fades out together (no lingering links) */
.sx-nav-menu a { opacity: 0; transform: translateY(6px); transition: background-color .2s, color .2s, padding-left .25s var(--sx-ease), opacity .12s linear, transform .12s linear; }
.sx-nav-drop:hover .sx-nav-menu a, .sx-nav-drop.is-open .sx-nav-menu a { opacity: 1; transform: none; transition: background-color .2s, color .2s, padding-left .25s var(--sx-ease), opacity .3s var(--sx-ease), transform .35s var(--sx-ease); }
.sx-nav-drop:hover .sx-nav-menu a:nth-child(2), .sx-nav-drop.is-open .sx-nav-menu a:nth-child(2) { transition-delay: 0s, 0s, 0s, .03s, .03s; }
.sx-nav-drop:hover .sx-nav-menu a:nth-child(3), .sx-nav-drop.is-open .sx-nav-menu a:nth-child(3) { transition-delay: 0s, 0s, 0s, .06s, .06s; }
.sx-nav-drop:hover .sx-nav-menu a:nth-child(4), .sx-nav-drop.is-open .sx-nav-menu a:nth-child(4) { transition-delay: 0s, 0s, 0s, .09s, .09s; }
.sx-nav-drop:hover .sx-nav-menu a:nth-child(5), .sx-nav-drop.is-open .sx-nav-menu a:nth-child(5) { transition-delay: 0s, 0s, 0s, .12s, .12s; }
.sx-nav-drop:hover .sx-nav-menu a:nth-child(6), .sx-nav-drop.is-open .sx-nav-menu a:nth-child(6) { transition-delay: 0s, 0s, 0s, .15s, .15s; }
.sx-nav-drop:hover .sx-nav-menu a:nth-child(7), .sx-nav-drop.is-open .sx-nav-menu a:nth-child(7) { transition-delay: 0s, 0s, 0s, .18s, .18s; }
.sx-nav-drop:hover .sx-nav-menu a:nth-child(8), .sx-nav-drop.is-open .sx-nav-menu a:nth-child(8) { transition-delay: 0s, 0s, 0s, .21s, .21s; }
.sx-nav-menu a[aria-current="page"] { color: var(--sx-blue); font-weight: 500; background: var(--sx-blue-100); }

/* Drawer links slide in one after another */
.sx-drawer-panel > * { opacity: 0; transform: translateX(24px); transition: opacity .4s var(--sx-ease), transform .5s var(--sx-ease); }
.sx-drawer.open .sx-drawer-panel > * { opacity: 1; transform: none; }
.sx-drawer.open .sx-drawer-panel > :nth-child(2) { transition-delay: .05s; }
.sx-drawer.open .sx-drawer-panel > :nth-child(3) { transition-delay: .1s; }
.sx-drawer.open .sx-drawer-panel > :nth-child(4) { transition-delay: .15s; }
.sx-drawer.open .sx-drawer-panel > :nth-child(5) { transition-delay: .2s; }
.sx-drawer.open .sx-drawer-panel > :nth-child(6) { transition-delay: .25s; }
.sx-drawer.open .sx-drawer-panel > :nth-child(7) { transition-delay: .3s; }

@media (hover: none) {
  /* Touch screens: show the tile pill so the tap target is obvious */
  .sx-tile span::after { content: 'View  →'; opacity: 1; transform: none; padding: 6px 12px; font-size: .66rem; }
  .sx-ptile-desc { display: none; }
  .sx-ptile:hover .sx-ptile-label { transform: none; }
}
@media (max-width: 680px) {
  .sx-tile span { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html.sx-js::after { display: none; }
  .sx-tile:hover, .sx-plan:hover, .sx-post:hover, .sx-review:hover { transform: none; }
}

/* ==========================================================
   SMOOTH SCROLLING (Lenis)
   ========================================================== */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ==========================================================
   MEMBERSHIPS — a touch larger
   ========================================================== */
.sx-plans { max-width: 1180px; gap: 32px; }
.sx-plan { padding: 46px 34px 38px; }
.sx-plan-label { font-size: .95rem; }
.sx-plan-price { font-size: 3.1rem; }
.sx-plan-per { font-size: .86rem; }
.sx-plan p { font-size: 1.06rem; }
.sx-plan ul { max-width: 290px; gap: 11px; }
.sx-plan li { font-size: 1.02rem; }
.sx-plan .sx-btn--sm { padding: 16px 30px; font-size: .84rem; }

/* ==========================================================
   BLOG POSTS — readable call-to-action pieces
   ========================================================== */
/* "Not sure which your home needs?" box */
.blog-post-article .blog-cta-inline {
  background: linear-gradient(180deg, #fff 0%, var(--sx-bg-soft) 100%);
  border: 1px solid var(--sx-line);
  border-radius: 20px;
  padding: 40px 44px;
  box-shadow: 0 18px 40px -26px rgba(4, 20, 60, .35);
}
.blog-post-article .blog-cta-inline h3 { color: var(--sx-navy); font-size: 1.45rem; font-weight: 700; line-height: 1.3; margin-bottom: 12px; }
.blog-post-article .blog-cta-inline p { color: var(--sx-text); font-size: 1.02rem; line-height: 1.65; margin-bottom: 24px; }
.blog-post-article a.btn-primary,
.blog-post-sidebar a.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 999px;
  background: var(--sx-orange);
  color: #fff !important;
  font-family: var(--sx-font);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none !important;
  border: 0;
  box-shadow: 0 8px 20px -10px rgb(var(--sx-orange-rgb) / .7);
  transition: transform .35s var(--sx-ease), box-shadow .35s var(--sx-ease), background-color .25s;
}
.blog-post-article a.btn-primary:hover,
.blog-post-sidebar a.btn-primary:hover { background: var(--sx-orange-600); color: #fff !important; transform: translateY(-3px); box-shadow: 0 14px 28px -12px rgb(var(--sx-orange-rgb) / .75); }
.blog-post-article a.btn-primary svg,
.blog-post-sidebar a.btn-primary svg { width: 16px; height: 16px; stroke: currentColor; transition: transform .35s var(--sx-ease); }
.blog-post-article a.btn-primary:hover svg,
.blog-post-sidebar a.btn-primary:hover svg { transform: translateX(4px); }

/* Service tag buttons under each post */
.blog-post-article .blog-service-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.blog-post-article a.blog-service-tag {
  display: inline-flex;
  align-items: center;
  padding: 11px 20px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid var(--sx-line);
  color: var(--sx-navy) !important;
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none !important;
  transition: background-color .25s, border-color .25s, color .25s, transform .35s var(--sx-ease), box-shadow .35s var(--sx-ease);
}
.blog-post-article a.blog-service-tag:hover {
  background: var(--sx-navy);
  border-color: var(--sx-navy);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -12px rgba(4, 20, 60, .55);
}

/* Sidebar "Get a Free Quote" box — matches the service-page sidebar */
.blog-post-sidebar .blog-sidebar-cta {
  background: var(--sx-navy);
  border-radius: 18px;
  padding: 30px 26px;
  box-shadow: 0 20px 40px -24px rgba(4, 20, 60, .6);
}
.blog-post-sidebar .blog-sidebar-cta h4 { color: #fff; font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; }
.blog-post-sidebar .blog-sidebar-cta p { color: rgba(255, 255, 255, .82); font-size: .98rem; line-height: 1.6; margin-bottom: 20px; }
.blog-post-sidebar .blog-sidebar-cta a.btn-primary { width: 100%; padding: 15px 20px; }
.blog-post-sidebar .blog-sidebar-cta .sidebar-phone { color: #fff; font-size: .98rem; font-weight: 500; margin-top: 16px; transition: color .2s; }
.blog-post-sidebar .blog-sidebar-cta .sidebar-phone:hover { color: var(--sx-orange-300); }
.blog-post-sidebar .blog-sidebar-cta .sidebar-phone svg { stroke: none; fill: currentColor; width: 15px; height: 15px; }
.blog-post-sidebar .blog-sidebar-widget { border-radius: 18px; }
.blog-post-sidebar .blog-sidebar-widget ul li a { transition: color .2s, transform .3s var(--sx-ease); }
.blog-post-sidebar .blog-sidebar-widget ul li a:hover { color: var(--sx-orange); transform: translateX(3px); }
.blog-post-sidebar .blog-sidebar-widget ul li a svg { stroke: var(--sx-orange); }

/* ==========================================================
   QUOTE PAGE (quote.html) — matches the main site theme
   ========================================================== */
body.qp {
  font-family: var(--sx-font);
  font-weight: 300;
  color: var(--sx-ink);
  background:
    radial-gradient(640px 420px at 0% 18%, rgba(4, 99, 238, .10), transparent 70%),
    radial-gradient(560px 380px at 100% 70%, rgba(248, 106, 5, .07), transparent 70%),
    var(--sx-bg-soft);
  min-height: 100vh;
}

/* Brand bar + progress */
body.qp .qp-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 84px 16px 32px;
  background: var(--sx-navy);
}
body.qp .qp-brand-logo img { height: 44px; width: auto; display: block; transition: transform .35s var(--sx-ease); }
body.qp .qp-brand-logo:hover img { transform: scale(1.04); }
body.qp .qp-brand-phone { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--sx-blue); color: #fff; font-size: .92rem; font-weight: 600; transition: background-color .25s, transform .35s var(--sx-ease); }
body.qp .qp-brand-phone:hover { background: var(--sx-blue-600); transform: translateY(-2px); color: #fff; }
body.qp .qp-brand-phone svg { width: 15px; height: 15px; }
body.qp .qp-close-float { top: calc(22px + env(safe-area-inset-top, 0px)); right: 24px; width: 42px; height: 42px; background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
body.qp .qp-close-float:hover { background: var(--sx-orange); color: #fff; transform: rotate(90deg); }
body.qp .qp-progress-bar { background: var(--sx-navy); padding: 0 32px 20px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
body.qp .qp-progress-bar .wizard-step-dots { max-width: 720px; }
body.qp .qp-progress-bar .step-dot { height: 6px; background: rgba(255, 255, 255, .16); transition: background-color .4s var(--sx-ease); }
body.qp .qp-progress-bar .step-dot.done,
body.qp.theme-lincoln .qp-progress-bar .step-dot.done { background: var(--sx-blue-300); }
body.qp .qp-progress-bar .step-dot.active,
body.qp.theme-lincoln .qp-progress-bar .step-dot.active { background: var(--sx-orange); box-shadow: 0 0 12px rgb(var(--sx-orange-rgb) / .6); }
body.qp .qp-progress-bar .step-connector { width: 8px; }

/* Layout + headings */
body.qp .qp-main { padding: 60px 24px 140px; }
body.qp .qp-step { max-width: 1000px; }
body.qp .qp-title {
  margin: 0 0 14px;
  color: var(--sx-navy);
  font-family: var(--sx-font);
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
}
body.qp .qp-subtitle { margin: 0 0 40px; color: var(--sx-text); font-size: 1.1rem; font-weight: 300; line-height: 1.6; text-align: center; }
body.qp .qp-title + .qp-form,
body.qp .qp-title + .qp-card-row { margin-top: 26px; }
body.qp .qp-error { color: #C53030; font-size: .95rem; font-weight: 500; }

/* Location + property choice cards */
body.qp .qp-card-row { gap: 24px; }
body.qp .qp-sel-card {
  width: 260px;
  min-height: 270px;
  padding: 34px 24px 28px;
  gap: 8px;
  border-radius: 22px;
  background: #fff;
  border: 2px solid var(--sx-line);
  box-shadow: 0 16px 36px -24px rgba(4, 20, 60, .4);
  transition: transform .45s var(--sx-ease), box-shadow .45s var(--sx-ease), border-color .25s, background-color .25s;
}
body.qp .qp-sel-card:hover:not(.selected) { transform: translateY(-8px); border-color: var(--sx-blue); box-shadow: 0 0 0 4px rgba(4, 99, 238, .1), 0 28px 50px -24px rgba(4, 99, 238, .45); }
body.qp .qp-sel-card.selected { transform: translateY(-4px); border-color: var(--sx-blue); background: #fff; box-shadow: 0 0 0 4px rgba(4, 99, 238, .16), 0 26px 50px -24px rgba(4, 99, 238, .5); }
body.qp .qp-card-icon { width: 96px; height: 96px; color: var(--sx-blue); transition: transform .45s cubic-bezier(.34, 1.4, .64, 1); }
body.qp .qp-sel-card:hover .qp-card-icon, body.qp .qp-sel-card.selected .qp-card-icon { transform: scale(1.08) translateY(-2px); }
body.qp .qp-card-label { margin-top: 6px; color: var(--sx-navy); font-family: var(--sx-font); font-size: 1.3rem; font-weight: 700; letter-spacing: .06em; }
body.qp .qp-card-sub { color: var(--sx-text); font-size: .95rem; font-weight: 400; }
body.qp .qp-card-check { width: 30px; height: 30px; top: 16px; right: 16px; background: var(--sx-blue); }
body.qp .qp-loc-badge { margin-top: 8px; padding: 6px 14px; border-radius: 999px; background: var(--sx-blue-100); color: var(--sx-blue); font-size: .72rem; font-weight: 700; letter-spacing: .1em; }
body.qp .qp-sel-card[data-location="lincoln"].selected .qp-loc-badge { background: var(--sx-blue); color: #fff; }
/* Orange accents for the second choice on each step */
body.qp .qp-sel-card[data-location="kearney"] .qp-card-icon,
body.qp .qp-sel-card[data-property="commercial"] .qp-card-icon { color: var(--sx-orange); }
body.qp .qp-sel-card[data-location="kearney"]:hover:not(.selected),
body.qp .qp-sel-card[data-property="commercial"]:hover:not(.selected) { border-color: var(--sx-orange); box-shadow: 0 0 0 4px rgb(var(--sx-orange-rgb) / .1), 0 28px 50px -24px rgb(var(--sx-orange-rgb) / .45); }
body.qp .qp-sel-card[data-location="kearney"].selected,
body.qp .qp-sel-card[data-property="commercial"].selected { border-color: var(--sx-orange); background: #fff; box-shadow: 0 0 0 4px rgb(var(--sx-orange-rgb) / .16), 0 26px 50px -24px rgb(var(--sx-orange-rgb) / .5); }
body.qp .qp-sel-card[data-location="kearney"].selected .qp-card-check,
body.qp .qp-sel-card[data-property="commercial"].selected .qp-card-check { background: var(--sx-orange); }
body.qp .qp-sel-card[data-property="residential"].selected,
body.qp .qp-sel-card[data-location="lincoln"].selected { background: #fff; }

/* Form fields */
body.qp .qp-form { max-width: 620px; gap: 20px; padding: 34px; border-radius: 22px; background: #fff; border: 1px solid var(--sx-line); box-shadow: 0 18px 44px -28px rgba(4, 20, 60, .4); }
body.qp .qp-form-row { gap: 18px; }
body.qp .qp-form-group { gap: 8px; }
body.qp .qp-form-group label { color: var(--sx-navy); font-family: var(--sx-font); font-size: .82rem; font-weight: 600; letter-spacing: .08em; }
body.qp .qp-form-group .req { color: var(--sx-orange); }
body.qp .qp-form-group input,
body.qp .qp-form-group textarea,
body.qp .qp-form-group select {
  width: 100%;
  padding: 15px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--sx-line);
  background: var(--sx-bg-soft);
  color: var(--sx-ink);
  font-family: var(--sx-font);
  font-size: 1rem;
  font-weight: 400;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
body.qp .qp-form-group input::placeholder,
body.qp .qp-form-group textarea::placeholder { color: #A0AABB; }
body.qp .qp-form-group input:hover,
body.qp .qp-form-group textarea:hover { border-color: #C9D4E4; }
body.qp .qp-form-group input:focus,
body.qp .qp-form-group textarea:focus,
body.qp .qp-form-group select:focus { outline: none; border-color: var(--sx-blue); background: #fff; box-shadow: 0 0 0 4px rgba(4, 99, 238, .14); }
body.qp .qp-form-group textarea { min-height: 110px; }

/* SMS consents */
body.qp .qp-sms-consents { margin-top: 6px; padding: 18px 20px; border-radius: 14px; background: var(--sx-bg-soft); border: 1px solid var(--sx-line); gap: 12px; }
body.qp .qp-consent-text { color: var(--sx-ink); font-size: .92rem; line-height: 1.5; }
body.qp .qp-consent-check { width: 22px; height: 22px; border-radius: 7px; border: 2px solid #C9D4E4; background: #fff; }
body.qp .qp-consent-row input[type="checkbox"]:checked + .qp-consent-check { background: var(--sx-blue); border-color: var(--sx-blue); }
body.qp .qp-consent-link, body.qp .qp-consent-fine-print a { color: var(--sx-blue); font-weight: 500; }
body.qp .qp-consent-fine-print { color: var(--sx-muted); font-size: .8rem; line-height: 1.55; }

/* Service photo cards */
body.qp .qp-img-svc-grid { gap: 16px; }
body.qp .qp-img-svc-card { height: 200px; border-radius: 18px; border: 0; box-shadow: 0 16px 34px -22px rgba(4, 20, 60, .6); transition: transform .45s var(--sx-ease), box-shadow .45s var(--sx-ease); }
body.qp .qp-img-svc-card--large { height: 260px; }
body.qp .qp-img-svc-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 0 0 3px var(--sx-blue), 0 30px 50px -22px rgba(4, 99, 238, .6); }
body.qp .qp-img-svc-overlay { background: linear-gradient(180deg, rgba(4, 20, 60, .05) 30%, rgba(4, 20, 60, .78) 100%); }
body.qp .qp-img-svc-name { font-family: var(--sx-font); font-size: 1.15rem; font-weight: 700; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .4); }
body.qp .qp-img-svc-card.selected,
body.qp .qp-img-svc-grid.service-selected .qp-img-svc-card.selected,
body.qp .qp-img-svc-grid.service-selected .qp-img-svc-card.selected:hover { box-shadow: 0 0 0 4px var(--sx-orange), 0 28px 50px -22px rgb(var(--sx-orange-rgb) / .55); }
body.qp .qp-img-svc-grid.service-selected .qp-img-svc-card.selected { max-width: 620px; height: 280px; }
body.qp .qp-img-svc-card.selected .qp-img-svc-check { background: var(--sx-orange); }
body.qp .qp-svc-change-btn { padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--sx-navy); font-family: var(--sx-font); font-size: .8rem; font-weight: 600; border: 0; transition: background-color .25s, color .25s, transform .3s var(--sx-ease); }
body.qp .qp-svc-change-btn:hover { background: var(--sx-orange); color: #fff; transform: translateY(-2px); }

/* Add-ons */
body.qp .qp-addons-panel { max-width: 620px; padding: 30px; border-radius: 22px; background: #fff; border: 1px solid var(--sx-line); box-shadow: 0 18px 44px -28px rgba(4, 20, 60, .4); }
body.qp .qp-addons-title { color: var(--sx-navy); font-family: var(--sx-font); font-size: 1.3rem; font-weight: 700; }
body.qp .qp-addons-sub { color: var(--sx-text); font-size: .98rem; }
body.qp .qp-addon-card { padding: 16px 18px; border-radius: 14px; border: 1.5px solid var(--sx-line); background: #fff; transition: border-color .25s, background-color .25s, transform .35s var(--sx-ease), box-shadow .35s var(--sx-ease); }
body.qp .qp-addon-card:hover { border-color: var(--sx-blue); transform: translateY(-2px); box-shadow: 0 12px 26px -18px rgba(4, 99, 238, .5); }
body.qp .qp-addon-card.selected { border-color: var(--sx-blue); background: var(--sx-blue-100); }
body.qp .qp-addon-name { color: var(--sx-navy); font-family: var(--sx-font); font-size: 1rem; font-weight: 600; }
body.qp .qp-addon-desc { color: var(--sx-text); font-size: .88rem; }
body.qp .qp-addon-card.selected .qp-addon-name { color: var(--sx-blue); }
body.qp .qp-addon-card.selected .qp-addon-check { background: var(--sx-blue); border-color: var(--sx-blue); }

/* Plan cards — same look as the membership cards */
body.qp .qp-plan-svc-summary { border: 1.5px solid var(--sx-line); border-radius: 999px; padding: 12px 22px 12px 12px; box-shadow: 0 12px 28px -20px rgba(4, 20, 60, .45); color: var(--sx-navy); font-size: 1rem; }
body.qp .qp-plan-svc-summary::before { background: var(--sx-blue); }
body.qp .qp-plan-svc-summary strong { color: var(--sx-blue); }
body.qp .qp-plan-grid { gap: 26px; max-width: 1000px; }
body.qp .qp-plan-card {
  padding: 40px 28px 32px;
  border-radius: 22px;
  background: #fff;
  border: 2px solid var(--sx-line);
  box-shadow: 0 18px 40px -26px rgba(4, 20, 60, .4);
  transition: transform .45s var(--sx-ease), box-shadow .45s var(--sx-ease), border-color .25s, background-color .3s;
}
body.qp .qp-plan-card:hover:not(.selected) { transform: translateY(-8px); border-color: var(--sx-blue); box-shadow: 0 30px 54px -26px rgba(4, 99, 238, .45); }
body.qp .qp-plan-card--featured { border-color: var(--sx-orange); box-shadow: 0 0 0 3px rgb(var(--sx-orange-rgb) / .14), 0 22px 46px -24px rgb(var(--sx-orange-rgb) / .45); }
body.qp .qp-plan-card--featured:hover:not(.selected) { border-color: var(--sx-orange); box-shadow: 0 0 0 4px rgb(var(--sx-orange-rgb) / .2), 0 30px 54px -24px rgb(var(--sx-orange-rgb) / .5); }
body.qp .qp-plan-badge,
body.qp .qp-plan-card--featured .qp-plan-badge { color: var(--sx-blue); font-size: .78rem; font-weight: 600; letter-spacing: .14em; }
body.qp .qp-plan-card--featured .qp-plan-badge { color: var(--sx-orange); }
body.qp .qp-plan-name,
body.qp .qp-plan-card--featured .qp-plan-name { color: var(--sx-navy); font-family: var(--sx-font); font-size: 1.15rem; font-weight: 700; letter-spacing: .08em; }
body.qp .qp-plan-savings,
body.qp .qp-plan-card--featured .qp-plan-savings { color: var(--sx-navy); font-family: var(--sx-font); font-size: 2.9rem; font-weight: 800; }
body.qp .qp-plan-savings span,
body.qp .qp-plan-card--featured .qp-plan-savings span { color: var(--sx-orange); font-size: 1.4rem; font-weight: 800; }
body.qp .qp-plan-sub,
body.qp .qp-plan-card--featured .qp-plan-sub { color: var(--sx-muted); font-size: .88rem; }
body.qp .qp-plan-desc,
body.qp .qp-plan-card--featured .qp-plan-desc { color: var(--sx-text); font-size: 1rem; line-height: 1.55; }
body.qp .qp-plan-features li { font-size: .98rem; }
body.qp .qp-plan-features .feat-yes,
body.qp .qp-plan-card--featured .qp-plan-features .feat-yes { color: var(--sx-ink); }
body.qp .qp-plan-features .feat-no { color: var(--sx-muted); }
/* Selected plan turns navy, like the site's dark sections */
body.qp .qp-plan-card.selected,
body.qp .qp-plan-card--featured.selected { background: var(--sx-navy); border-color: var(--sx-navy); transform: translateY(-6px); box-shadow: 0 0 0 4px var(--sx-orange), 0 30px 56px -24px rgba(4, 20, 60, .7); }
body.qp .qp-plan-card.selected .qp-plan-name,
body.qp .qp-plan-card.selected .qp-plan-savings { color: #fff; }
body.qp .qp-plan-card.selected .qp-plan-savings span,
body.qp .qp-plan-card.selected .qp-plan-badge { color: var(--sx-orange-300); }
body.qp .qp-plan-card.selected .qp-plan-sub,
body.qp .qp-plan-card.selected .qp-plan-desc { color: rgba(255, 255, 255, .78); }
body.qp .qp-plan-card.selected .qp-plan-features .feat-yes { color: #fff; }
body.qp .qp-plan-card.selected .qp-plan-features .feat-no { color: rgba(255, 255, 255, .5); }
body.qp .qp-plan-card.selected .qp-card-check { background: var(--sx-orange); }
body.qp .qp-plan-onetime-note { color: var(--sx-text); font-size: 1rem; margin-top: 28px; }
body.qp .qp-plan-onetime-note a { color: var(--sx-blue); font-weight: 600; }

/* Bottom Back / Next buttons */
body.qp .qp-nav { gap: 14px; padding: 18px 24px calc(22px + env(safe-area-inset-bottom, 0px)); background: none; }
body.qp .qp-nav .qp-next-btn,
body.qp.theme-lincoln .qp-nav .qp-next-btn {
  position: relative;
  overflow: hidden;
  padding: 18px 54px;
  border-radius: 999px;
  background: var(--sx-orange);
  color: #fff;
  font-family: var(--sx-font);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .1em;
  box-shadow: 0 12px 26px -10px rgb(var(--sx-orange-rgb) / .65);
  transition: transform .35s var(--sx-ease), box-shadow .35s var(--sx-ease), background-color .25s;
}
body.qp .qp-nav .qp-next-btn:hover,
body.qp.theme-lincoln .qp-nav .qp-next-btn:hover { background: var(--sx-orange-600); transform: translateY(-3px); box-shadow: 0 18px 34px -12px rgb(var(--sx-orange-rgb) / .7); }
body.qp .qp-nav .qp-back-btn { padding: 17px 30px; border-radius: 999px; border: 1.5px solid var(--sx-navy); background: #fff; color: var(--sx-navy); font-family: var(--sx-font); font-size: .9rem; font-weight: 600; transition: background-color .25s, color .25s, transform .35s var(--sx-ease); }
body.qp .qp-nav .qp-back-btn:hover { background: var(--sx-navy); color: #fff; transform: translateY(-2px); }

/* Confirmation */
body.qp .qp-confirm-icon { width: 88px; height: 88px; background: var(--sx-blue); box-shadow: 0 0 0 10px rgba(4, 99, 238, .12); }
body.qp .wizard-summary { background: #fff; border: 1px solid var(--sx-line); border-radius: 16px; font-size: .98rem; padding: 20px 26px; }
body.qp .qp-btn-primary { background: var(--sx-orange); padding: 16px 30px; font-family: var(--sx-font); font-size: .95rem; box-shadow: 0 10px 24px -10px rgb(var(--sx-orange-rgb) / .65); }
body.qp .qp-btn-primary:hover { background: var(--sx-orange-600); color: #fff; }

@media (max-width: 700px) {
  body.qp .qp-brand { padding: calc(12px + env(safe-area-inset-top, 0px)) 70px 12px 18px; }
  body.qp .qp-brand-logo img { height: 36px; }
  body.qp .qp-brand-phone { padding: 9px 12px; font-size: 0; gap: 0; }
  body.qp .qp-brand-phone svg { width: 18px; height: 18px; }
  body.qp .qp-close-float { top: calc(14px + env(safe-area-inset-top, 0px)); right: 16px; }
  body.qp .qp-progress-bar { padding: 0 18px 16px; }
  body.qp .qp-main { padding: 36px 16px 130px; }
  body.qp .qp-card-row { gap: 14px; }
  body.qp .qp-card-row { flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: stretch; width: 100%; }
  body.qp .qp-sel-card { flex-direction: column; align-items: center; justify-content: center; text-align: center; width: calc(50% - 7px); min-width: 0; min-height: 220px; padding: 26px 12px 22px; }
  body.qp .qp-card-sub { text-align: center; }
  body.qp .qp-card-icon { width: 72px; height: 72px; }
  body.qp .qp-card-label { font-size: 1.05rem; }
  body.qp .qp-form, body.qp .qp-addons-panel { padding: 22px 18px; }
  body.qp .qp-form-row { grid-template-columns: 1fr; }
  body.qp .qp-img-svc-card { height: 160px; }
  body.qp .qp-img-svc-card--large { height: 190px; }
  body.qp .qp-nav .qp-next-btn { padding: 17px 30px; white-space: nowrap; }
  body.qp .qp-nav .qp-back-btn { padding: 16px 22px; white-space: nowrap; }
}

/* Custom / one-time strip under the membership cards */
.sx-plan-custom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1180px;
  margin: 30px auto 0;
  padding: 24px 30px;
  border-radius: 18px;
  background: linear-gradient(100deg, #fff 0%, var(--sx-blue-100) 100%);
  border: 1px solid var(--sx-line);
  box-shadow: 0 14px 34px -24px rgba(4, 20, 60, .35);
  transition: transform .45s var(--sx-ease), box-shadow .45s var(--sx-ease);
}
.sx-plan-custom:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -24px rgba(4, 99, 238, .4); }
.sx-plan-custom div { display: flex; flex-direction: column; gap: 4px; }
.sx-plan-custom strong { color: var(--sx-navy); font-size: 1.15rem; font-weight: 700; }
.sx-plan-custom span { color: var(--sx-text); font-size: 1rem; line-height: 1.5; }
@media (max-width: 680px) {
  .sx-plan-custom { flex-direction: column; align-items: flex-start; padding: 22px; max-width: 380px; }
  .sx-plan-custom .sx-btn { width: 100%; }
}

/* ---------- Quote step 4: service grid ---------- */
body.qp .qp-img-svc-grid { grid-template-columns: repeat(6, 1fr); gap: 16px; }
body.qp .qp-img-svc-card { grid-column: span 2; }
body.qp .qp-img-svc-card--large,
body.qp .qp-img-svc-card--wide { grid-column: span 3; }
body.qp .qp-img-svc-card:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--sx-blue), 0 30px 50px -22px rgba(4, 99, 238, .6); }
body.qp .qp-img-svc-content { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
body.qp .qp-img-svc-desc {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, .9);
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.4;
  transition: max-height .45s var(--sx-ease), opacity .35s var(--sx-ease);
}
body.qp .qp-img-svc-card:hover .qp-img-svc-desc,
body.qp .qp-img-svc-card:focus-visible .qp-img-svc-desc,
body.qp .qp-img-svc-card.selected .qp-img-svc-desc { max-height: 3em; opacity: 1; }
body.qp .qp-svc-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--sx-orange);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px -8px rgb(var(--sx-orange-rgb) / .8);
}

/* ---------- Quote step 4: add-ons ---------- */
body.qp .qp-addons-panel { max-width: 760px; width: 100%; }
body.qp .qp-addons-title { font-size: 1.45rem; }
body.qp .qp-addons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
body.qp .qp-addon-bundle {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 20px;
  border: 2px dashed rgba(248, 106, 5, .55);
  border-radius: 16px;
  background: linear-gradient(100deg, #FFF6EF 0%, #fff 100%);
  font-family: var(--sx-font);
  text-align: left;
  cursor: pointer;
  transition: border-color .25s, background-color .25s, transform .35s var(--sx-ease), box-shadow .35s var(--sx-ease);
}
body.qp .qp-addon-bundle:hover { transform: translateY(-2px); border-color: var(--sx-orange); box-shadow: 0 14px 28px -18px rgb(var(--sx-orange-rgb) / .6); }
body.qp .qp-addon-bundle.selected { border-style: solid; border-color: var(--sx-orange); background: #FFF6EF; }
body.qp .qp-addon-bundle-text { display: flex; flex-direction: column; gap: 3px; }
body.qp .qp-addon-bundle-text strong { color: var(--sx-navy); font-size: 1.05rem; font-weight: 700; }
body.qp .qp-addon-bundle-text span { color: var(--sx-text); font-size: .88rem; }
body.qp .qp-addon-bundle-btn { flex: none; padding: 10px 18px; border-radius: 999px; background: var(--sx-orange); color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
body.qp .qp-addon-card { display: flex; align-items: stretch; gap: 0; padding: 0; overflow: hidden; cursor: pointer; }
body.qp .qp-addon-card:focus-visible { outline: none; border-color: var(--sx-blue); box-shadow: 0 0 0 4px rgba(4, 99, 238, .16); }
body.qp .qp-addon-thumb { flex: none; width: 88px; background-size: cover; background-position: center; transition: transform .6s var(--sx-ease); }
body.qp .qp-addon-card:hover .qp-addon-thumb { transform: scale(1.08); }
body.qp .qp-addon-content { flex: 1; display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-width: 0; }
body.qp .qp-addon-text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.qp .qp-addon-tag { color: var(--sx-blue); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
body.qp .qp-addon-check { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #C9D4E4; display: grid; place-items: center; background: #fff; transition: background-color .25s, border-color .25s, transform .35s cubic-bezier(.34, 1.4, .64, 1); }
body.qp .qp-addon-check svg { width: 14px; height: 14px; stroke: #fff; opacity: 0; transition: opacity .2s; }
body.qp .qp-addon-card.selected .qp-addon-check { transform: scale(1.1); }
body.qp .qp-addon-card.selected .qp-addon-check svg { opacity: 1; }
/* Featured "Most Popular" add-on spans the full row */
body.qp .qp-addon-card--featured { grid-column: 1 / -1; border-color: rgba(248, 106, 5, .5); box-shadow: 0 14px 30px -20px rgb(var(--sx-orange-rgb) / .55); }
body.qp .qp-addon-card--featured .qp-addon-thumb { width: 130px; }
body.qp .qp-addon-card--featured .qp-addon-tag { color: #fff; background: var(--sx-orange); align-self: flex-start; padding: 4px 10px; border-radius: 999px; }
body.qp .qp-addon-card--featured .qp-addon-name { font-size: 1.12rem; }
body.qp .qp-addon-card--featured:hover { border-color: var(--sx-orange); }
body.qp .qp-addon-card--featured.selected { border-color: var(--sx-orange); background: #FFF6EF; }
body.qp .qp-addon-card--featured.selected .qp-addon-check { background: var(--sx-orange); border-color: var(--sx-orange); }

/* ---------- Quote step 5: plans ---------- */
body.qp .qp-plan-card[hidden] { display: none !important; }
body.qp .qp-plan-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1080px; width: 100%; }
body.qp .qp-plan-card { padding: 46px 30px 36px; }
body.qp .qp-plan-savings { font-size: 3.2rem; }
body.qp .qp-plan-badge { min-height: 1.2em; }
body.qp .qp-plan-card--featured .qp-plan-badge { align-self: center; padding: 6px 14px; border-radius: 999px; background: var(--sx-orange); color: #fff; }
body.qp .qp-plan-card.selected.qp-plan-card--featured .qp-plan-badge { color: #fff; }
body.qp .qp-plan-card--custom {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 32px;
  text-align: left;
  background: linear-gradient(100deg, #fff 0%, var(--sx-blue-100) 100%);
}
body.qp .qp-plan-custom-text { display: flex; flex-direction: column; gap: 6px; }
body.qp .qp-plan-card--custom .qp-plan-name { letter-spacing: .02em; text-transform: none; font-size: 1.2rem; }
body.qp .qp-plan-card--custom .qp-plan-desc { margin: 0; text-align: left; }
body.qp .qp-plan-custom-pill { flex: none; padding: 12px 20px; border-radius: 999px; background: var(--sx-navy); color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: background-color .25s; }
body.qp .qp-plan-card--custom.selected .qp-plan-custom-pill { background: var(--sx-orange); }
body.qp .qp-plan-card--custom.selected .qp-plan-desc { color: rgba(255, 255, 255, .8); }

@media (max-width: 820px) {
  body.qp .qp-img-svc-grid { grid-template-columns: repeat(2, 1fr); }
  body.qp .qp-img-svc-card, body.qp .qp-img-svc-card--wide { grid-column: span 1; }
  body.qp .qp-img-svc-card--large { grid-column: 1 / -1; }
  body.qp .qp-plan-grid { grid-template-columns: 1fr; max-width: 420px; }
  body.qp .qp-plan-card--featured { order: -1; }
  body.qp .qp-plan-card--custom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  body.qp .qp-addons-grid { grid-template-columns: 1fr; }
  body.qp .qp-addon-bundle { flex-direction: column; align-items: flex-start; }
  body.qp .qp-addon-thumb, body.qp .qp-addon-card--featured .qp-addon-thumb { width: 76px; }
  body.qp .qp-img-svc-desc { display: none; }
}

/* ==========================================================
   BLOG POSTS — photo header, glows, service cards, thumb lists
   ========================================================== */
.blog-post-header.blog-post-header--photo {
  position: relative;
  isolation: isolate;
  min-height: min(68vh, 620px);
  display: flex;
  align-items: flex-end;
  padding: 150px 0 72px;
  background: var(--sx-navy);
}
.blog-post-header--photo::before { display: none; }
.blog-post-header-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  animation: sx-kenburns 18s ease-out both;
}
.blog-post-header--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(4, 20, 60, .93) 0%, rgba(4, 20, 60, .76) 50%, rgba(4, 20, 60, .42) 100%),
    linear-gradient(180deg, rgba(4, 20, 60, .55) 0%, rgba(4, 20, 60, .1) 35%, rgba(4, 20, 60, .4) 75%, var(--sx-bg-soft) 100%);
}
.blog-post-header--photo .container { width: 100%; }
.blog-post-header--photo h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 700; line-height: 1.12; max-width: 860px; text-wrap: balance; text-shadow: 0 2px 24px rgba(0, 0, 0, .3); }
.blog-post-header--photo .blog-post-breadcrumb,
.blog-post-header--photo .blog-post-breadcrumb a,
.blog-post-header--photo .blog-post-meta-item { color: rgba(255, 255, 255, .82); }
.blog-post-header--photo .blog-post-breadcrumb a:hover { color: var(--sx-orange-300); }
.blog-post-header--photo .blog-post-category-badge { background: var(--sx-orange); border-color: var(--sx-orange); color: #fff; padding: 7px 16px; }
.blog-post-header--photo .blog-post-meta-item svg { stroke: var(--sx-orange-300); }

/* Soft brand glows behind the article so the page isn't flat white */
.blog-post-layout {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(700px 520px at 0% 12%, rgba(4, 99, 238, .10), transparent 70%),
    radial-gradient(620px 520px at 100% 55%, rgba(248, 106, 5, .08), transparent 70%),
    radial-gradient(760px 560px at 20% 100%, rgba(4, 99, 238, .10), transparent 70%),
    var(--sx-bg-soft);
}
.blog-post-article { background: #fff; border-radius: 22px; padding: 44px 48px; box-shadow: 0 24px 60px -40px rgba(4, 20, 60, .45); }

/* "Exterior Cleaning Services" cards at the end of each article */
.blog-post-article .blog-service-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 18px; }
.blog-post-article a.blog-service-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  min-height: 150px;
  padding: 16px;
  border-radius: 16px;
  overflow: hidden;
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 14px 30px -20px rgba(4, 20, 60, .6);
  transition: transform .45s var(--sx-ease), box-shadow .45s var(--sx-ease);
}
.blog-post-article a.blog-service-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; margin: 0; border-radius: 0; transition: transform .8s var(--sx-ease); }
.blog-post-article a.blog-service-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4, 20, 60, .05) 20%, rgba(4, 20, 60, .85) 100%); transition: background-color .4s; }
.blog-service-card-name { font-size: 1.02rem; font-weight: 700; line-height: 1.25; }
.blog-service-card-more { display: inline-flex; align-items: center; gap: 6px; color: var(--sx-orange-300); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transform: translateY(6px); transition: opacity .35s var(--sx-ease), transform .35s var(--sx-ease); }
.blog-service-card-more svg { width: 14px; height: 14px; }
.blog-post-article a.blog-service-card:hover { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--sx-blue), 0 26px 44px -20px rgba(4, 99, 238, .55); }
.blog-post-article a.blog-service-card:hover img { transform: scale(1.08); }
.blog-post-article a.blog-service-card:hover::after { background-color: rgba(4, 20, 60, .25); }
.blog-post-article a.blog-service-card:hover .blog-service-card-more { opacity: 1; transform: none; }

/* Sidebar lists with photo thumbnails */
.blog-post-sidebar .blog-sidebar-widget { padding: 26px 22px; box-shadow: 0 18px 40px -30px rgba(4, 20, 60, .45); border: 1px solid var(--sx-line); }
.blog-post-sidebar .blog-sidebar-widget h4 { color: var(--sx-navy); font-size: .82rem; letter-spacing: .14em; margin-bottom: 14px; }
.blog-post-sidebar .blog-sidebar-widget ul { gap: 8px; }
.blog-post-sidebar .blog-sidebar-widget ul li a.bsw-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 14px;
  color: var(--sx-navy);
  font-size: .94rem;
  font-weight: 500;
  line-height: 1.35;
  transition: background-color .3s var(--sx-ease), transform .35s var(--sx-ease), color .25s;
}
.bsw-thumb { flex: none; width: 58px; height: 58px; border-radius: 12px; background-size: cover; background-position: center; box-shadow: 0 8px 16px -10px rgba(4, 20, 60, .6); transition: transform .45s var(--sx-ease); }
.bsw-label { flex: 1; min-width: 0; }
.blog-post-sidebar .blog-sidebar-widget ul li a.bsw-link svg { flex: none; width: 16px; height: 16px; margin: 0; stroke: none; color: var(--sx-orange); opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .35s var(--sx-ease); }
.blog-post-sidebar .blog-sidebar-widget ul li a.bsw-link:hover { background: var(--sx-bg-soft); color: var(--sx-blue); transform: none; }
.blog-post-sidebar .blog-sidebar-widget ul li a.bsw-link:hover .bsw-thumb { transform: scale(1.06) rotate(-2deg); }
.blog-post-sidebar .blog-sidebar-widget ul li a.bsw-link:hover svg { opacity: 1; transform: none; }

@media (max-width: 768px) {
  .blog-post-header.blog-post-header--photo { min-height: 0; padding: 130px 0 56px; }
  .blog-post-article { padding: 28px 20px; border-radius: 18px; }
  .blog-post-article .blog-service-cards { grid-template-columns: 1fr 1fr; }
  .blog-service-card-more { opacity: 1; transform: none; }
}

/* ==========================================================
   QUOTE FORM v3 — one "selected" color everywhere, scenes,
   bundle savings meter, prepaid plans
   ========================================================== */

/* Every chosen option looks the same: blue ring, light-blue fill, blue check */
body.qp .qp-sel-card.selected,
body.qp .qp-sel-card[data-location].selected,
body.qp .qp-sel-card[data-property].selected {
  border-color: var(--sx-blue) !important;
  background: #F2F7FF !important;
  box-shadow: 0 0 0 4px rgba(4, 99, 238, .18), 0 26px 50px -24px rgba(4, 99, 238, .5) !important;
}
body.qp .qp-sel-card.selected .qp-card-check,
body.qp .qp-sel-card[data-location].selected .qp-card-check,
body.qp .qp-sel-card[data-property].selected .qp-card-check,
body.qp .qp-plan-card.selected .qp-card-check,
body.qp .qp-img-svc-card.selected .qp-img-svc-check,
body.qp .qp-addon-card.selected .qp-addon-check,
body.qp .qp-addon-card--featured.selected .qp-addon-check { background: var(--sx-blue) !important; border-color: var(--sx-blue) !important; }
body.qp .qp-img-svc-card.selected,
body.qp .qp-img-svc-grid.service-selected .qp-img-svc-card.selected,
body.qp .qp-img-svc-grid.service-selected .qp-img-svc-card.selected:hover { box-shadow: 0 0 0 4px var(--sx-blue), 0 28px 50px -22px rgba(4, 99, 238, .55) !important; }
body.qp .qp-addon-card.selected,
body.qp .qp-addon-card--featured.selected { border-color: var(--sx-blue) !important; background: #F2F7FF !important; box-shadow: 0 0 0 3px rgba(4, 99, 238, .14); }
body.qp .qp-addon-card.selected .qp-addon-name { color: var(--sx-blue); }
/* "Most popular" is shown with a badge only — no border that could look selected */
body.qp .qp-addon-card--featured { border-color: var(--sx-line); box-shadow: 0 14px 30px -22px rgba(4, 20, 60, .4); }
body.qp .qp-addon-card--featured:hover { border-color: var(--sx-blue); }

/* City + property scenes along the bottom of each choice card */
body.qp .qp-sel-card { position: relative; overflow: hidden; padding-bottom: 92px; min-height: 320px; isolation: isolate; }
body.qp .qp-card-scene { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 86px; z-index: -1; fill: var(--sx-blue); stroke: var(--sx-blue); opacity: .13; transition: opacity .45s var(--sx-ease), transform .6s var(--sx-ease); transform-origin: bottom center; }
body.qp .qp-sel-card[data-location="kearney"] .qp-card-scene,
body.qp .qp-sel-card[data-property="commercial"] .qp-card-scene { fill: var(--sx-orange); stroke: var(--sx-orange); }
body.qp .qp-sel-card::after { content: ''; position: absolute; inset: auto 0 0 0; height: 110px; z-index: -2; background: linear-gradient(180deg, rgba(231, 240, 255, 0) 0%, rgba(231, 240, 255, .9) 100%); transition: opacity .45s; }
body.qp .qp-sel-card[data-location="kearney"]::after,
body.qp .qp-sel-card[data-property="commercial"]::after { background: linear-gradient(180deg, rgba(255, 240, 228, 0) 0%, rgba(255, 240, 228, .9) 100%); }
body.qp .qp-sel-card:hover .qp-card-scene { opacity: .24; transform: scale(1.04); }
body.qp .qp-sel-card.selected .qp-card-scene { opacity: .3; fill: var(--sx-blue); stroke: var(--sx-blue); }
body.qp .qp-sel-card.selected::after { background: linear-gradient(180deg, rgba(231, 240, 255, 0) 0%, rgba(207, 225, 255, .95) 100%); }
body.qp .qp-sel-card .qp-card-label { font-size: 1.4rem; }

/* Bundle savings meter */
body.qp .qp-bundle-meter { grid-column: 1 / -1; padding: 18px 20px 26px; border-radius: 16px; background: var(--sx-navy); color: #fff; transition: transform .35s var(--sx-ease); }
body.qp .qp-bundle-meter.is-bump { transform: scale(1.015); }
body.qp .qp-bundle-meter-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
body.qp .qp-bundle-meter-label { font-size: .95rem; line-height: 1.4; color: rgba(255, 255, 255, .88); }
body.qp .qp-bundle-meter-pct { flex: none; color: rgba(255, 255, 255, .7); font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
body.qp .qp-bundle-meter-pct b { color: var(--sx-orange-300); font-size: 1.9rem; font-weight: 800; letter-spacing: 0; }
body.qp .qp-bundle-meter.is-max .qp-bundle-meter-pct b { color: #fff; text-shadow: 0 0 18px rgb(var(--sx-orange-rgb) / .9); }
body.qp .qp-bundle-meter-track { position: relative; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); }
body.qp .qp-bundle-meter-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--sx-blue-300), var(--sx-orange)); box-shadow: 0 0 14px rgb(var(--sx-orange-rgb) / .6); transition: width .7s cubic-bezier(.34, 1.3, .64, 1); }
body.qp .qp-bundle-meter-track i { position: absolute; top: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--sx-navy); border: 3px solid rgba(255, 255, 255, .35); transform: translateY(-50%); }
body.qp .qp-bundle-meter-track i em { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: .72rem; font-weight: 700; color: rgba(255, 255, 255, .7); }
body.qp .qp-bundle-meter-track i:first-of-type { margin-left: 0; }
body.qp .qp-bundle-meter-track i:last-of-type { margin-left: -18px; }
body.qp .qp-addon-bundle.selected { border-style: solid; border-color: var(--sx-blue); background: #F2F7FF; }
body.qp .qp-addon-bundle.selected .qp-addon-bundle-btn { background: var(--sx-blue); }

/* Prepaid plan cards */
body.qp .qp-plan-savings { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
body.qp .qp-plan-savings small { font-size: 1rem; font-weight: 600; color: var(--sx-muted); letter-spacing: .04em; text-transform: uppercase; }
body.qp .qp-plan-savings span { font-size: 1rem !important; color: var(--sx-muted) !important; font-weight: 600 !important; }
body.qp .qp-plan-sub { color: var(--sx-navy) !important; font-weight: 500; font-size: .95rem !important; }
body.qp .qp-plan-prepaid { display: inline-flex; align-self: center; margin: 4px 0 2px; padding: 6px 12px; border-radius: 999px; background: #EAF7EF; color: #1F7A45; font-size: .78rem; font-weight: 600; }
body.qp .qp-subtitle a { color: var(--sx-blue); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
/* Featured plan: badge only, never a ring that looks like a selection */
body.qp .qp-plan-card--featured { border-color: var(--sx-line) !important; box-shadow: 0 18px 40px -26px rgba(4, 20, 60, .4) !important; }
body.qp .qp-plan-card--featured:hover:not(.selected) { border-color: var(--sx-blue) !important; }
/* Selected plan — same blue treatment as every other selection */
body.qp .qp-plan-card.selected,
body.qp .qp-plan-card--featured.selected {
  background: #F2F7FF !important;
  border-color: var(--sx-blue) !important;
  transform: translateY(-6px);
  box-shadow: 0 0 0 4px rgba(4, 99, 238, .18), 0 30px 56px -24px rgba(4, 99, 238, .5) !important;
}
body.qp .qp-plan-card.selected .qp-plan-name,
body.qp .qp-plan-card.selected .qp-plan-savings { color: var(--sx-navy) !important; }
body.qp .qp-plan-card.selected .qp-plan-sub { color: var(--sx-navy) !important; }
body.qp .qp-plan-card.selected .qp-plan-desc { color: var(--sx-text) !important; }
body.qp .qp-plan-card.selected .qp-plan-badge { color: var(--sx-blue); }
body.qp .qp-plan-card--featured.selected .qp-plan-badge { color: #fff; }
body.qp .qp-plan-card.selected .qp-plan-features .feat-yes { color: var(--sx-ink) !important; }
body.qp .qp-plan-card.selected .qp-plan-features .feat-no { color: var(--sx-muted) !important; }

/* Small, centered custom / one-time option */
body.qp .qp-plan-card--custom {
  grid-column: 1 / -1;
  justify-self: center;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  width: auto;
  max-width: 560px;
  padding: 12px 12px 12px 22px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1.5px solid var(--sx-line) !important;
  box-shadow: none !important;
  transform: none !important;
}
body.qp .qp-plan-card--custom:hover { border-color: var(--sx-blue) !important; }
body.qp .qp-plan-custom-label { color: var(--sx-text); font-size: .95rem; font-weight: 400; }
body.qp .qp-plan-custom-pill { padding: 9px 16px; border-radius: 999px; background: var(--sx-bg-soft); color: var(--sx-navy); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transition: background-color .25s, color .25s; }
body.qp .qp-plan-card--custom:hover .qp-plan-custom-pill { background: var(--sx-navy); color: #fff; }
body.qp .qp-plan-card--custom.selected { border-color: var(--sx-blue) !important; background: #F2F7FF !important; box-shadow: 0 0 0 4px rgba(4, 99, 238, .18) !important; }
body.qp .qp-plan-card--custom.selected .qp-plan-custom-pill { background: var(--sx-blue); color: #fff; }
body.qp .qp-plan-card--custom.selected .qp-plan-custom-pill::before { content: '✓ '; }
body.qp .qp-plan-card--custom .qp-card-check { display: none; }

@media (max-width: 700px) {
  body.qp .qp-sel-card { min-height: 270px; padding-bottom: 76px; }
  body.qp .qp-card-scene { height: 70px; }
  body.qp .qp-bundle-meter-top { flex-direction: column; align-items: flex-start; gap: 6px; }
  body.qp .qp-plan-card--custom { flex-direction: column; border-radius: 20px !important; padding: 14px 18px !important; text-align: center; }
}

/* Prepaid membership cards */
.sx-plan-price { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.sx-plan-price small { color: var(--sx-muted); font-size: .95rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.sx-plan-price em { color: var(--sx-muted); font-size: 1.05rem; font-weight: 600; font-style: normal; }
.sx-plan-per { color: var(--sx-navy); font-size: .98rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.sx-plan-prepaid { margin-top: 10px; padding: 6px 14px; border-radius: 999px; background: #EAF7EF; color: #1F7A45; font-size: .8rem; font-weight: 600; }
.sx-plan-example {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  max-width: 290px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--sx-bg-soft);
  font-size: .88rem;
  text-align: left;
}
.sx-plan-example span { color: var(--sx-text); }
.sx-plan-example s { color: var(--sx-muted); text-decoration-thickness: 1.5px; }
.sx-plan-example b { color: var(--sx-orange); font-size: 1.05rem; font-weight: 800; }
.sx-plan p { margin-top: 14px; }
.sx-plan-footnote { max-width: 760px; margin: 22px auto 0; color: var(--sx-muted); font-size: .9rem; text-align: center; line-height: 1.6; }
.sx-plan-footnote a { color: var(--sx-blue); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* Legal pages */
.sx-legal-hero { padding: calc(150px + env(safe-area-inset-top, 0px)) 0 64px; background: radial-gradient(700px 400px at 85% 20%, rgba(4, 99, 238, .35), transparent 70%), var(--sx-navy); color: #fff; }
.sx-legal-hero .sx-eyebrow { color: var(--sx-orange-300); }
.sx-legal-hero h1 { margin: 10px 0 12px; color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.sx-legal-hero p { max-width: 620px; margin: 0 0 18px; color: rgba(255, 255, 255, .85); font-size: 1.12rem; line-height: 1.6; }
.sx-legal-updated { display: inline-block; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8); font-size: .85rem; }
.sx-legal-wrap { background: radial-gradient(600px 460px at 0% 20%, rgba(4, 99, 238, .08), transparent 70%), var(--sx-bg-soft); }
.sx-legal { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; align-items: start; }
.sx-legal-toc { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 2px; padding: 22px; border-radius: 18px; background: #fff; border: 1px solid var(--sx-line); }
.sx-legal-toc strong { margin-bottom: 8px; color: var(--sx-navy); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.sx-legal-toc a { padding: 8px 10px; border-radius: 10px; color: var(--sx-text); font-size: .95rem; transition: background-color .25s, color .25s; }
.sx-legal-toc a:hover { background: var(--sx-bg-soft); color: var(--sx-blue); }
.sx-legal-body { padding: 44px 48px; border-radius: 22px; background: #fff; box-shadow: 0 24px 60px -40px rgba(4, 20, 60, .45); }
.sx-legal-body h2 { margin-top: 38px; scroll-margin-top: 100px; font-size: 1.45rem; }
.sx-legal-body h2:first-of-type { margin-top: 24px; }
.sx-legal-body h3 { margin-top: 22px; font-size: 1.12rem; }
.sx-legal-body a { color: var(--sx-blue); font-weight: 500; }
@media (max-width: 900px) {
  .sx-legal { grid-template-columns: 1fr; gap: 24px; }
  .sx-legal-toc { position: static; }
  .sx-legal-body { padding: 28px 20px; }
}

/* Footer legal links */
.sx-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; }
.sx-footer-legal { display: flex; gap: 20px; }
.sx-footer-legal a { color: rgba(255, 255, 255, .6); transition: color .2s; }
.sx-footer-legal a:hover { color: var(--sx-orange-300); }

/* Quote form: Back / Next always sit below the step — never on top of it */
body.qp .qp-nav,
body.qp .qp-nav[style] {
  position: static !important;
  pointer-events: auto;
  width: 100%;
  max-width: 1000px;
  margin: 36px auto 0;
  padding: 0 0 calc(10px + env(safe-area-inset-bottom, 0px));
  background: none;
}
body.qp .qp-main { padding-bottom: 80px; }

/* Quote plan step: yearly breakdown + how to pay */
body.qp .qp-plan-example { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 8px; width: 100%; margin: 12px 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--sx-bg-soft); font-size: .86rem; text-align: left; }
body.qp .qp-plan-example span { color: var(--sx-text); }
body.qp .qp-plan-example s { color: var(--sx-muted); }
body.qp .qp-plan-example b { color: var(--sx-orange); font-size: 1rem; font-weight: 800; }
body.qp .qp-plan-example small { grid-column: 1 / -1; color: var(--sx-muted); font-size: .72rem; }
body.qp .qp-plan-card.selected .qp-plan-example { background: #fff; }
body.qp .qp-pay-choice { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; width: 100%; max-width: 1000px; margin: 30px auto 0; }
body.qp #wizard-step-5:has(.qp-plan-card--custom.selected) .qp-pay-choice { display: none; }
body.qp .qp-pay-label { flex-basis: 100%; text-align: center; color: var(--sx-navy); font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
body.qp .qp-pay-opt { position: relative; display: flex; align-items: center; gap: 12px; min-width: 280px; padding: 14px 18px; border-radius: 16px; background: #fff; border: 2px solid var(--sx-line); cursor: pointer; transition: border-color .25s, background-color .25s, box-shadow .3s; }
body.qp .qp-pay-opt:hover { border-color: #C9D4E4; }
body.qp .qp-pay-opt input { width: 20px; height: 20px; margin: 0; accent-color: var(--sx-blue); flex: none; }
body.qp .qp-pay-opt span { display: flex; flex-direction: column; gap: 2px; }
body.qp .qp-pay-opt strong { color: var(--sx-navy); font-size: 1rem; font-weight: 600; }
body.qp .qp-pay-opt em { color: var(--sx-text); font-size: .85rem; font-style: normal; }
body.qp .qp-pay-opt:has(input:checked) { border-color: var(--sx-blue); background: #F2F7FF; box-shadow: 0 0 0 4px rgba(4, 99, 238, .14); }
@media (max-width: 700px) { body.qp .qp-pay-opt { min-width: 0; width: 100%; } }
.sx-plan-per + ul { margin-top: 22px; }
body.qp .qp-plan-example { grid-template-columns: auto auto; justify-content: center; text-align: center; column-gap: 10px; row-gap: 2px; }
body.qp .qp-plan-example span,
body.qp .qp-plan-example small { grid-column: 1 / -1; }

/* City pages */
.sx-city-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.sx-city-intro p { margin: 0 0 16px; color: var(--sx-text); font-size: 1.1rem; line-height: 1.75; max-width: 58ch; }
.sx-city-intro .sx-title { margin: 8px 0 18px; }
.sx-city-intro .sx-btn { margin-top: 10px; }
.sx-city-map .sx-area-map { aspect-ratio: 4 / 3; }
.sx-city-note { margin: 16px 0 0; color: var(--sx-text); font-size: .95rem; line-height: 1.6; }
.sx-city-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1180px; margin-inline: auto; }
.sx-area-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--sx-orange); font-size: .9rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transition: gap .3s var(--sx-ease), color .2s; }
.sx-area-more svg { width: 16px; height: 16px; }
.sx-area-more:hover { gap: 12px; color: var(--sx-orange-600); }
.sx-nav-drop--sm .sx-nav-menu { min-width: 190px; }
@media (max-width: 900px) {
  .sx-city-intro { grid-template-columns: 1fr; gap: 32px; }
  .sx-city-reviews { grid-template-columns: 1fr; max-width: 520px; }
}
.sx-nav-link, .sx-nav-call, .sx-nav-quote { white-space: nowrap; }
@media (max-width: 1320px) {
  .sx-nav-links { gap: 2px; }
  .sx-nav-link { padding: 10px 11px; font-size: .95rem; }
  .sx-nav-call, .sx-nav-quote { padding: 11px 18px; }
}
@media (max-width: 1240px) {
  .sx-nav-links { display: none; }
  .sx-burger { display: flex; }
}
/* bundle meter: three tier markers */
body.qp .qp-bundle-meter-track i:nth-of-type(2) { margin-left: -9px; }
body.qp .qp-bundle-meter-track i:first-of-type { margin-left: -9px; }

/* ==========================================================
   FLOATING HEADER — a rounded, see-through bubble with a gap
   above it that rides down the page with you
   ========================================================== */
.sx-nav {
  inset: 14px 0 auto 0;
  padding-inline: 20px;
  pointer-events: none;
}
.sx-nav, .sx-nav.scrolled { background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.sx-nav-inner {
  pointer-events: auto;
  max-width: 1400px;
  padding: 12px 14px 12px 30px;
  border-radius: 999px;
  background: rgba(4, 20, 60, .34);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .5);
  transition: padding .4s var(--sx-ease), background-color .4s var(--sx-ease), box-shadow .4s var(--sx-ease), max-width .5s var(--sx-ease);
}
.sx-nav.scrolled .sx-nav-inner {
  padding-block: 8px;
  max-width: 1320px;
  background: rgba(4, 20, 60, .72);
  box-shadow: 0 18px 40px -16px rgba(2, 12, 38, .55);
}
.sx-nav-logo img { height: 44px; }
.sx-nav.scrolled .sx-nav-logo img { height: 38px; }
@media (max-width: 1240px) {
  .sx-nav-inner { padding: 10px 12px 10px 24px; }
}
@media (max-width: 680px) {
  .sx-nav { inset: 10px 0 auto 0; padding-inline: 10px; }
  .sx-nav-inner, .sx-nav.scrolled .sx-nav-inner { padding: 8px 8px 8px 18px; border-radius: 22px; }
}

/* ==========================================================
   SAVE BIG — schedule-first cards (savings live in the quote)
   ========================================================== */
.sx-plan-visits { display: flex; align-items: center; gap: 12px; margin-top: 14px; color: var(--sx-navy); }
.sx-plan-visits b { font-size: 4rem; font-weight: 800; line-height: .9; background: linear-gradient(135deg, var(--sx-blue) 0%, var(--sx-blue-300) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; transition: transform .45s cubic-bezier(.34, 1.4, .64, 1); }
.sx-plan--pop .sx-plan-visits b { background-image: linear-gradient(135deg, var(--sx-orange) 0%, var(--sx-orange-300) 100%); }
.sx-plan-visits span { text-align: left; font-size: .82rem; font-weight: 600; letter-spacing: .14em; line-height: 1.35; text-transform: uppercase; color: var(--sx-muted); }
.sx-plan:hover .sx-plan-visits b { transform: scale(1.1); }
.sx-plan p.sx-plan-desc { margin: 14px 0 18px; min-height: 3.1em; }
.sx-plan-footnote { text-align: center; }

/* Custom & one-time — a slim bar instead of a big box */
.sx-plan-custom {
  max-width: 820px;
  margin-top: 24px;
  padding: 10px 10px 10px 26px;
  border-radius: 999px;
  gap: 18px;
}
.sx-plan-custom p { margin: 0; font-size: .98rem; line-height: 1.4; color: var(--sx-text); }
.sx-plan-custom strong { font-size: 1rem; margin-right: 6px; }
.sx-plan-custom span { font-size: .95rem; }
.sx-plan-custom .sx-btn { flex: none; }
@media (max-width: 680px) {
  .sx-plan-custom { border-radius: 18px; padding: 16px 18px; gap: 12px; }
  .sx-plan-custom strong { display: block; margin: 0 0 2px; }
}

/* ==========================================================
   4 STEP PROCESS — deep navy with colour-coded steps
   ========================================================== */
.sx-process {
  background:
    radial-gradient(900px 500px at 12% 0%, rgba(4, 99, 238, .45), transparent 60%),
    radial-gradient(700px 480px at 92% 100%, rgba(248, 106, 5, .30), transparent 60%),
    linear-gradient(160deg, #0A2152 0%, var(--sx-navy) 60%, #020C26 100%);
  isolation: isolate;
}
.sx-process::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
}
.sx-process::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 160px;
  z-index: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0 90c160-50 320-50 480 0s320 50 480 0 320-50 480 0v70H0z' fill='%230463EE' fill-opacity='.14'/%3E%3Cpath d='M0 120c180-40 360-40 540 0s360 40 540 0 270-30 360-10v50H0z' fill='%23F86A05' fill-opacity='.10'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
.sx-step[data-step="0"], .sx-dot[data-go="0"] { --c: #0463EE; --c2: #5B9BFF; }
.sx-step[data-step="1"], .sx-dot[data-go="1"] { --c: #0FA3E0; --c2: #6FD3FF; }
.sx-step[data-step="2"], .sx-dot[data-go="2"] { --c: #F86A05; --c2: #FFB066; }
.sx-step[data-step="3"], .sx-dot[data-go="3"] { --c: #F86A05; --c2: #0463EE; }
.sx-step {
  position: relative;
  background: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.sx-step::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  z-index: 2;
  background: linear-gradient(90deg, var(--c), var(--c2));
}
.sx-step-body { position: relative; }
.sx-step-body::before {
  content: '';
  position: absolute;
  right: -80px; top: -80px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 45%, transparent), transparent 70%);
  pointer-events: none;
}
.sx-step-num {
  position: relative;
  width: 72px;
  height: 72px;
  font-size: 1.35rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--c), var(--c2));
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--c) 22%, transparent), 0 18px 36px -12px var(--c);
}
.sx-step h3 { margin-top: 24px; }
.sx-dots-line { background: rgba(255, 255, 255, .18); }
.sx-dots-fill { background: linear-gradient(90deg, #0463EE, #0FA3E0, #F86A05); }
.sx-dot i { background: var(--sx-navy); border-color: rgba(255, 255, 255, .45); }
.sx-dot.is-done i, .sx-dot.is-active i { background: linear-gradient(135deg, var(--c), var(--c2)); border-color: transparent; }
.sx-dot.is-active i { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 30%, transparent); }
.sx-dot:hover { color: #fff; }
@media (max-width: 680px) {
  .sx-step-num { width: 58px; height: 58px; font-size: 1.1rem; }
}

/* ==========================================================
   SOCIAL — big icons that pop on hover
   ========================================================== */
.sx-socials-band { background: linear-gradient(180deg, var(--sx-bg-soft) 0%, #fff 100%); }
.sx-socials { display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); justify-content: center; gap: 28px; }
.sx-social {
  --brand: var(--sx-blue);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 34px 20px 28px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--sx-line);
  box-shadow: 0 16px 36px -26px rgba(4, 20, 60, .45);
  text-decoration: none;
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), box-shadow .45s var(--sx-ease), border-color .3s;
}
.sx-social--fb { --brand: #1877F2; --brand-bg: #1877F2; }
.sx-social--ig { --brand: #E1306C; --brand-bg: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.sx-social--tt { --brand: #111; --brand-bg: #111; }
.sx-social-ico {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  background: var(--brand-bg);
  color: #fff;
  box-shadow: 0 16px 30px -12px var(--brand);
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), box-shadow .45s var(--sx-ease);
}
.sx-social-ico svg { width: 44px; height: 44px; fill: currentColor; }
.sx-social--tt .sx-social-ico svg { filter: drop-shadow(2px 2px 0 #FE2C55) drop-shadow(-2px -2px 0 #25F4EE); }
.sx-social-name { color: var(--sx-navy); font-size: 1.25rem; font-weight: 700; }
.sx-social-handle { color: var(--sx-muted); font-size: .95rem; }
.sx-social:hover { transform: translateY(-12px) scale(1.04); border-color: transparent; box-shadow: 0 0 0 2px var(--brand), 0 34px 60px -26px var(--brand); }
.sx-social:hover .sx-social-ico { transform: scale(1.14) rotate(-8deg); box-shadow: 0 24px 40px -12px var(--brand); }
.sx-social:focus-visible { outline: 3px solid var(--sx-blue); outline-offset: 4px; }
@media (max-width: 680px) {
  .sx-socials { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .sx-social { padding: 22px 6px 18px; border-radius: 18px; }
  .sx-social-ico { width: 64px; height: 64px; margin-bottom: 8px; }
  .sx-social-ico svg { width: 30px; height: 30px; }
  .sx-social-name { font-size: 1rem; }
  .sx-social-handle { font-size: .7rem; }
}

/* ==========================================================
   WHY HOMEOWNERS CHOOSE US — navy band, glowing cards
   ========================================================== */
.sx-values-band {
  background:
    radial-gradient(800px 420px at 50% 0%, rgba(4, 99, 238, .35), transparent 65%),
    linear-gradient(170deg, #0A2152 0%, var(--sx-navy) 70%, #020C26 100%);
}
.sx-values-band .sx-sub { color: rgba(255, 255, 255, .78); }
.sx-values-band .sx-value {
  --c: var(--sx-blue); --c2: var(--sx-blue-300);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 34px 26px 28px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 30px 60px -36px rgba(0, 0, 0, .8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.sx-values-band .sx-value--sky { --c: #0FA3E0; --c2: #6FD3FF; }
.sx-values-band .sx-value--orange { --c: var(--sx-orange); --c2: var(--sx-orange-300); }
.sx-values-band .sx-value--navy { --c: #F86A05; --c2: #0463EE; }
.sx-values-band .sx-value::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c), var(--c2));
  transform: scaleX(.25);
  transform-origin: left;
  transition: transform .6s var(--sx-ease);
}
.sx-values-band .sx-value::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -30%; top: -40%;
  width: 90%; height: 90%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 40%, transparent), transparent 70%);
  opacity: .55;
  transition: opacity .5s, transform .8s var(--sx-ease);
}
.sx-value-bg { position: absolute; right: -26px; bottom: -26px; z-index: -1; width: 150px; height: 150px; color: #fff; opacity: .05; transition: transform .8s var(--sx-ease), opacity .5s; }
.sx-value-bg svg { width: 100%; height: 100%; fill: currentColor; }
.sx-values-band .sx-value-ico {
  width: 66px;
  height: 66px;
  border-radius: 20px;
  margin-bottom: 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--c), var(--c2));
  box-shadow: 0 16px 30px -12px var(--c), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.sx-values-band .sx-value-ico svg { width: 32px; height: 32px; }
.sx-values-band .sx-value h3 { color: #fff; font-size: 1.28rem; font-weight: 700; }
.sx-values-band .sx-value p { color: rgba(255, 255, 255, .78); }
.sx-value-chip {
  display: inline-flex;
  margin-top: 20px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: color-mix(in srgb, var(--c) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 60%, transparent);
}
.sx-values-band .sx-value:hover { transform: translateY(-10px); border-color: color-mix(in srgb, var(--c) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent), 0 40px 70px -30px var(--c); }
.sx-values-band .sx-value:hover::before { transform: scaleX(1); }
.sx-values-band .sx-value:hover::after { opacity: 1; transform: translate(20%, 20%); }
.sx-values-band .sx-value:hover .sx-value-bg { opacity: .1; transform: rotate(-12deg) scale(1.1); }
.sx-values-band .sx-value:hover .sx-value-ico { background: linear-gradient(135deg, var(--c), var(--c2)); color: #fff; transform: rotate(-8deg) scale(1.1); }

/* ==========================================================
   MEET THE TEAM
   ========================================================== */
.sx-team { display: grid; grid-template-columns: repeat(2, minmax(0, 470px)); justify-content: center; gap: 36px; }
.sx-member {
  display: flex;
  flex-direction: column;
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 50px -30px rgba(4, 20, 60, .45);
  transition: transform .5s var(--sx-ease), box-shadow .5s var(--sx-ease);
}
.sx-member:hover { transform: translateY(-8px); box-shadow: 0 0 0 2px var(--sx-blue), 0 40px 70px -32px rgba(4, 99, 238, .55); }
.sx-member-photo { position: relative; aspect-ratio: 4 / 4.2; overflow: hidden; background: var(--sx-navy); }
.sx-member-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; opacity: 0; transform: scale(1.04); transition: opacity .6s var(--sx-ease), transform 1.2s var(--sx-ease); }
.sx-member-photo img.is-active { opacity: 1; transform: none; }
.sx-member:hover .sx-member-photo img.is-active { transform: scale(1.04); }
.sx-member-photo::after { content: ''; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(180deg, transparent, rgba(4, 20, 60, .55)); pointer-events: none; }
.sx-member-role {
  position: absolute;
  z-index: 2;
  left: 20px; top: 20px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--sx-orange);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px -8px rgb(var(--sx-orange-rgb) / .8);
}
.sx-member-role--blue { background: var(--sx-blue); box-shadow: 0 10px 24px -8px rgba(4, 99, 238, .8); }
.sx-member-thumbs { position: absolute; z-index: 2; right: 16px; bottom: 16px; display: flex; gap: 8px; }
.sx-member-thumbs { gap: 2px; }
.sx-member-thumbs button { display: grid; place-items: center; width: 26px; height: 26px; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.sx-member-thumbs button::before { content: ''; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-sizing: border-box; transition: background-color .3s, transform .3s; }
.sx-member-thumbs button[aria-current="true"]::before { background: #fff; transform: scale(1.2); }
.sx-member-body { padding: 28px 30px 32px; }
.sx-member-body h3 { margin: 0; color: var(--sx-navy); font-size: 1.6rem; font-weight: 800; }
.sx-member-title { margin: 4px 0 14px; color: var(--sx-blue); font-size: .9rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.sx-member-body > p:not(.sx-member-title) { margin: 0; color: var(--sx-text); font-size: 1.04rem; line-height: 1.65; }
.sx-member-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 18px 0 0; }
.sx-member-facts li { padding: 7px 14px; border-radius: 999px; background: var(--sx-blue-100); color: var(--sx-blue); font-size: .84rem; font-weight: 600; }
@media (max-width: 800px) {
  .sx-team { grid-template-columns: minmax(0, 460px); gap: 26px; }
  .sx-member-body { padding: 22px 22px 26px; }
}
.sx-js .sx-social.sx-r.sx-settled { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), box-shadow .45s var(--sx-ease), border-color .3s; }

/* ==========================================================
   SERVICE PAGE PROCESS — colour-coded icon step cards
   ========================================================== */
.sx-ptile--icon {
  --c: #0463EE; --c2: #5B9BFF;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px 24px 26px;
  aspect-ratio: auto;
  min-height: 330px;
  border-radius: 20px;
  background:
    radial-gradient(420px 260px at 110% -10%, color-mix(in srgb, var(--c2) 55%, transparent), transparent 60%),
    linear-gradient(155deg, var(--c) 0%, color-mix(in srgb, var(--c) 55%, #04143C) 100%);
  color: #fff;
}
.sx-ptiles > .sx-ptile--icon:nth-child(2) { --c: #0FA3E0; --c2: #6FD3FF; }
.sx-ptiles > .sx-ptile--icon:nth-child(3) { --c: #F86A05; --c2: #FFB066; }
.sx-ptiles > .sx-ptile--icon:nth-child(4) { --c: #0A2152; --c2: #F86A05; }
.sx-ptile--icon::after {
  background:
    radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.4px) 0 0 / 18px 18px;
  -webkit-mask-image: linear-gradient(200deg, #000, transparent 60%);
  mask-image: linear-gradient(200deg, #000, transparent 60%);
}
.sx-ptile-num {
  position: absolute;
  right: 16px; top: 6px;
  font-size: 5.6rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, .14);
  letter-spacing: -.02em;
  transition: transform .6s var(--sx-ease), color .4s;
}
.sx-ptile-ico {
  position: absolute;
  left: 24px; top: 26px;
  width: 74px; height: 74px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 16px 30px -14px rgba(0, 0, 0, .45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), background-color .3s;
}
.sx-ptile-ico svg { width: 38px; height: 38px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sx-ptile--icon .sx-ptile-label,
.sx-ptile--icon .sx-ptile-desc { position: static; transform: none; opacity: 1; }
.sx-ptile--icon .sx-ptile-label { font-style: normal; font-size: 1.3rem; margin-bottom: 8px; }
.sx-ptile--icon .sx-ptile-desc { color: rgba(255, 255, 255, .88); font-size: .95rem; line-height: 1.55; }
.sx-ptile--icon:hover .sx-ptile-label, .sx-ptile--icon:focus-visible .sx-ptile-label { transform: none; }
.sx-ptile--icon:hover .sx-ptile-ico { transform: rotate(-8deg) scale(1.1); background: rgba(255, 255, 255, .26); }
.sx-ptile--icon:hover .sx-ptile-num { transform: translateY(-4px) scale(1.06); color: rgba(255, 255, 255, .24); }
.sx-ptile--icon:hover { box-shadow: 0 0 0 3px var(--c2), 0 30px 50px -22px color-mix(in srgb, var(--c) 80%, transparent); }
@media (max-width: 680px) {
  .sx-ptile--icon { min-height: 230px; padding: 16px 14px 16px; border-radius: 16px; }
  .sx-ptile--icon .sx-ptile-ico { left: 14px; top: 16px; width: 52px; height: 52px; border-radius: 16px; }
  .sx-ptile--icon .sx-ptile-ico svg { width: 28px; height: 28px; }
  .sx-ptile--icon .sx-ptile-num { font-size: 3.6rem; right: 10px; }
  .sx-ptile--icon .sx-ptile-label { font-size: .98rem; margin-bottom: 4px; }
  .sx-ptile--icon .sx-ptile-desc { display: block; font-size: .78rem; line-height: 1.45; }
}
.sx-value-ico--line svg { fill: none !important; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sx-value-bg svg[stroke] { fill: none; }
.sx-values-band .sx-center { margin-top: 44px; }

/* Save Big: dollars off every cleaning */
.sx-plan-off { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.sx-plan-off b { font-size: 3.6rem; font-weight: 800; line-height: .95; color: var(--sx-navy); transition: transform .45s cubic-bezier(.34, 1.4, .64, 1); }
.sx-plan--pop .sx-plan-off b { color: var(--sx-orange); }
.sx-plan-off span { text-align: left; font-size: .8rem; font-weight: 600; letter-spacing: .14em; line-height: 1.35; text-transform: uppercase; color: var(--sx-blue); }
.sx-plan:hover .sx-plan-off b { transform: scale(1.08); }

/* ==========================================================
   QUOTE FORM — add-on tiles, savings chip, simpler plans
   ========================================================== */
body.qp .qp-addons-panel { max-width: 860px; }
body.qp .qp-addons-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
body.qp .qp-bundle-meter, body.qp .qp-addon-bundle { grid-column: 1 / -1; }
body.qp .qp-addon-card,
body.qp .qp-addon-card--featured { grid-column: auto; flex-direction: column; align-items: stretch; border-radius: 16px; }
body.qp .qp-addon-thumb,
body.qp .qp-addon-card--featured .qp-addon-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; }
body.qp .qp-addon-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 20, 60, .35), transparent 55%); }
body.qp .qp-addon-tag,
body.qp .qp-addon-card--featured .qp-addon-tag {
  position: absolute; z-index: 1; left: 10px; top: 10px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .94); color: var(--sx-blue);
  font-size: .64rem; letter-spacing: .1em;
}
body.qp .qp-addon-card--featured .qp-addon-tag { background: var(--sx-orange); color: #fff; }
body.qp .qp-addon-check { position: absolute; z-index: 1; right: 10px; top: 10px; }
body.qp .qp-addon-content { flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px 16px; flex: 1; }
body.qp .qp-addon-name,
body.qp .qp-addon-card--featured .qp-addon-name { font-size: 1.02rem; line-height: 1.3; }
body.qp .qp-addon-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; min-height: 2.9em; }
body.qp .qp-addon-hint { margin-top: auto; padding-top: 8px; color: var(--sx-orange); font-size: .8rem; font-weight: 700; }
body.qp .qp-addon-card.selected .qp-addon-hint { color: var(--sx-blue); }
body.qp .qp-addon-card--featured.selected .qp-addon-hint { color: var(--sx-orange); }
@media (max-width: 680px) {
  body.qp .qp-addons-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  body.qp .qp-addon-content { padding: 10px 12px 12px; }
  body.qp .qp-addon-name { font-size: .92rem; }
  body.qp .qp-addon-desc { font-size: .78rem; }
  body.qp .qp-addon-hint { font-size: .72rem; }
}

/* Savings chip beside Back / Next */
body.qp .qp-savings-chip {
  flex: 1;
  align-self: center;
  justify-self: center;
  text-align: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--sx-blue-100);
  color: var(--sx-navy);
  font-size: .88rem;
  line-height: 1.3;
}
body.qp .qp-savings-chip b { color: var(--sx-blue); }
body.qp .qp-savings-chip.is-saving { background: #FFF1E6; }
body.qp .qp-savings-chip.is-saving b { color: var(--sx-orange); }
body.qp .qp-savings-chip[hidden] { display: none; }
@media (max-width: 680px) {
  body.qp .qp-savings-chip { order: -1; flex-basis: 100%; font-size: .8rem; }
  body.qp .qp-nav { flex-wrap: wrap; }
}

/* Plan cards: just dollars off each cleaning */
body.qp .qp-plan-off { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; }
body.qp .qp-plan-off b { color: var(--sx-navy); font-size: 3rem; font-weight: 800; line-height: 1; }
body.qp .qp-plan-card--featured .qp-plan-off b { color: var(--sx-orange); }
body.qp .qp-plan-off span { text-align: left; color: var(--sx-blue); font-size: .74rem; font-weight: 700; letter-spacing: .12em; line-height: 1.35; text-transform: uppercase; }
body.qp .qp-plan-card .qp-plan-sub { margin-top: 8px; }
body.qp .qp-addon-card.selected .qp-addon-desc { color: var(--sx-text); }
.sx-values--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1080px; }
@media (max-width: 900px) { .sx-values--3 { grid-template-columns: 1fr; max-width: 480px; } }
body.qp .qp-plan--onetime .qp-plan-card--custom { max-width: 560px; margin-inline: auto; }

/* Stepper autoplay: a thin timer ring fills around the active dot */
.sx-dot i { position: relative; }
.sx-dot.is-active i::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: conic-gradient(var(--c2, #fff) var(--sx-tick, 0deg), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 13px, #000 13.5px);
  mask: radial-gradient(circle, transparent 13px, #000 13.5px);
  opacity: 0;
}
@property --sx-tick { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.sx-stepper.is-ticking .sx-dot.is-active i::after { opacity: .9; animation: sx-tick 5.5s linear forwards; }
@keyframes sx-tick { from { --sx-tick: 0deg; } to { --sx-tick: 360deg; } }

/* Plan cards: faint blue outline so white cards don't melt into the page */
.sx-plan:not(.sx-plan--pop) { border: 1.5px solid #D6E6FF; }

/* Dropdown menus: soft brand gradient instead of flat white */
.sx-nav-menu {
  background:
    radial-gradient(220px 140px at 100% 0%, rgba(248, 106, 5, .10), transparent 70%),
    linear-gradient(160deg, #FFFFFF 0%, #EEF4FF 100%);
  border: 1px solid rgba(4, 99, 238, .14);
}
.sx-nav-menu a:hover { background: rgba(4, 99, 238, .10); }

/* Meet the Team: name, title, bio and tags flow in one after another */
.sx-js .sx-member.sx-r .sx-member-body > *,
.sx-js .sx-member.sx-r .sx-member-facts li,
.sx-js .sx-member.sx-r .sx-member-role {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--sx-ease), transform .8s cubic-bezier(.34, 1.4, .64, 1);
}
.sx-js .sx-member.sx-r .sx-member-role { transform: scale(.6); }
.sx-js .sx-member.sx-r.is-in .sx-member-body > *,
.sx-js .sx-member.sx-r.is-in .sx-member-facts li,
.sx-js .sx-member.sx-r.is-in .sx-member-role { opacity: 1; transform: none; }
.sx-js .sx-member.sx-r.is-in .sx-member-role { transition-delay: calc(var(--d, 0ms) + 250ms); }
.sx-js .sx-member.sx-r.is-in .sx-member-body > :nth-child(1) { transition-delay: calc(var(--d, 0ms) + 350ms); }
.sx-js .sx-member.sx-r.is-in .sx-member-body > :nth-child(2) { transition-delay: calc(var(--d, 0ms) + 480ms); }
.sx-js .sx-member.sx-r.is-in .sx-member-body > :nth-child(3) { transition-delay: calc(var(--d, 0ms) + 610ms); }
.sx-js .sx-member.sx-r.is-in .sx-member-body > :nth-child(4) { transition-delay: calc(var(--d, 0ms) + 740ms); }
.sx-js .sx-member.sx-r.is-in .sx-member-facts li:nth-child(1) { transition-delay: calc(var(--d, 0ms) + 820ms); }
.sx-js .sx-member.sx-r.is-in .sx-member-facts li:nth-child(2) { transition-delay: calc(var(--d, 0ms) + 900ms); }
.sx-js .sx-member.sx-r.is-in .sx-member-facts li:nth-child(3) { transition-delay: calc(var(--d, 0ms) + 980ms); }
/* Orange underline sweeps in under each name */
.sx-member-body h3 { position: relative; display: inline-block; }
.sx-member-body h3::after { content: ''; position: absolute; left: 0; bottom: -6px; height: 4px; width: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--sx-orange), var(--sx-orange-300)); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--sx-ease) calc(var(--d, 0ms) + 700ms); }
.sx-member.is-in .sx-member-body h3::after, html:not(.sx-js) .sx-member-body h3::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .sx-js .sx-member.sx-r .sx-member-body > *, .sx-js .sx-member.sx-r .sx-member-facts li, .sx-js .sx-member.sx-r .sx-member-role { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================
   HOLIDAY LIGHTING — "Everything Included" split layout
   ========================================================== */
.sx-incl { display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: center; }
.sx-incl-media { position: relative; border-radius: 26px; overflow: visible; }
.sx-incl-media img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: 26px; box-shadow: 0 40px 70px -34px rgba(4, 20, 60, .6); }
.sx-incl-lights { position: absolute; z-index: 2; left: 4%; right: 4%; top: -14px; height: 40px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.sx-incl-lights::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 26px; border-bottom: 2px solid rgba(4, 20, 60, .5); border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.sx-incl-lights i { position: relative; width: 12px; height: 18px; margin-top: calc(10px + 12px * sin(var(--i) * 0.45rad)); border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; background: var(--b, #FFC23D); box-shadow: 0 0 14px 3px var(--b, #FFC23D); animation: sx-twinkle 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s); }
.sx-incl-lights i:nth-child(3n+1) { --b: #F86A05; }
.sx-incl-lights i:nth-child(3n+2) { --b: #5B9BFF; }
@keyframes sx-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.sx-incl-badge { position: absolute; left: -22px; bottom: 30px; display: flex; flex-direction: column; gap: 2px; padding: 16px 22px; border-radius: 18px; background: var(--sx-navy); color: #fff; box-shadow: 0 24px 40px -18px rgba(4, 20, 60, .7); }
.sx-incl-badge b { color: var(--sx-orange); font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.sx-incl-badge span { font-size: .8rem; letter-spacing: .06em; color: rgba(255, 255, 255, .85); }
.sx-incl-copy .sx-eyebrow { display: block; margin-bottom: 8px; }
.sx-incl-sub { margin: 14px 0 26px; color: var(--sx-text); font-size: 1.08rem; line-height: 1.6; }
.sx-incl-list { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 12px; }
.sx-incl-list li { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid #DCE8FB; box-shadow: 0 12px 28px -24px rgba(4, 20, 60, .5); transition: transform .4s var(--sx-ease), border-color .3s, box-shadow .4s var(--sx-ease); }
.sx-incl-list li:hover { transform: translateX(8px); border-color: var(--sx-orange); box-shadow: 0 18px 34px -22px rgb(var(--sx-orange-rgb) / .5); }
.sx-incl-list li > div { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.sx-incl-list strong { color: var(--sx-navy); font-size: 1.08rem; font-weight: 700; }
.sx-incl-list li > div span { color: var(--sx-text); font-size: .95rem; line-height: 1.5; }
.sx-incl-ico { flex: none; width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: #FFF1E6; color: var(--sx-orange); }
.sx-incl-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sx-incl-check { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--sx-blue); }
.sx-incl-check svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) {
  .sx-incl { grid-template-columns: 1fr; gap: 44px; }
  .sx-incl-media { max-width: 520px; margin-inline: auto; width: 100%; }
  .sx-incl-media img { aspect-ratio: 16 / 11; }
  .sx-incl-badge { left: 12px; bottom: 12px; padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) { .sx-incl-lights i { animation: none; } }

/* ==========================================================
   BLOG — Top Picks + topic filter
   ========================================================== */
.sx-picks-wrap { padding-top: 56px; }
.sx-picks-head { margin-bottom: 22px; }
.sx-picks-head .sx-eyebrow { display: block; margin-bottom: 6px; }
.sx-picks { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 20px; min-height: 520px; }
.sx-pick { position: relative; display: block; overflow: hidden; border-radius: 22px; isolation: isolate; color: #fff; text-decoration: none; box-shadow: 0 24px 50px -30px rgba(4, 20, 60, .6); transition: transform .5s var(--sx-ease), box-shadow .5s var(--sx-ease); }
.sx-pick--lead { grid-row: 1 / 3; }
.sx-pick img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1s var(--sx-ease); }
.sx-pick-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4, 20, 60, .05) 20%, rgba(4, 20, 60, .88) 100%); }
.sx-pick-badge { position: absolute; left: 18px; top: 18px; padding: 7px 14px; border-radius: 999px; background: var(--sx-orange); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 10px 22px -8px rgb(var(--sx-orange-rgb) / .8); }
.sx-pick-body { position: absolute; left: 24px; right: 24px; bottom: 22px; display: flex; flex-direction: column; gap: 8px; }
.sx-pick-cat { color: #9CC3FF; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.sx-pick-title { font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
.sx-pick--lead .sx-pick-title { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.sx-pick-exc { color: rgba(255, 255, 255, .82); font-size: 1rem; line-height: 1.55; max-width: 52ch; }
.sx-pick-go { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: .86rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sx-pick-go svg { width: 18px; height: 18px; transition: transform .35s var(--sx-ease); }
.sx-pick:hover { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--sx-orange), 0 34px 60px -30px rgba(4, 20, 60, .7); }
.sx-pick:hover img { transform: scale(1.06); }
.sx-pick:hover .sx-pick-go svg { transform: translateX(5px); }
.sx-blog-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.sx-chip { padding: 11px 20px; border-radius: 999px; border: 1.5px solid #CFE0FA; background: #fff; color: var(--sx-navy); font-family: var(--sx-font); font-size: .92rem; font-weight: 600; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, transform .3s var(--sx-ease); }
.sx-chip:hover { border-color: var(--sx-blue); color: var(--sx-blue); transform: translateY(-2px); }
.sx-chip.is-active { background: var(--sx-blue); border-color: var(--sx-blue); color: #fff; box-shadow: 0 10px 22px -10px rgba(4, 99, 238, .7); }
.blog-card[hidden] { display: none !important; }
.blog-card.sx-filter-in { animation: sx-rise .5s var(--sx-ease) both; }
@media (max-width: 800px) {
  .sx-picks { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; }
  .sx-pick--lead { grid-row: auto; }
  .sx-pick { aspect-ratio: 16 / 11; }
  .sx-pick--lead { aspect-ratio: 4 / 4.2; }
  .sx-pick-exc { display: none; }
  .sx-blog-filter { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; margin-inline: calc(-1 * var(--sx-gutter)); padding-inline: var(--sx-gutter); scrollbar-width: none; }
  .sx-chip { flex: none; }
}

/* ==========================================================
   QUOTE FORM — "add one more service" pop-up
   ========================================================== */
.qp-bundle-pop { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 18px; background: rgba(4, 20, 60, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s var(--sx-ease); font-family: var(--sx-font); }
.qp-bundle-pop.is-open { opacity: 1; }
.qp-bundle-pop-card { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 36px); overflow: auto; padding: 34px 30px 26px; border-radius: 26px; text-align: center; background: radial-gradient(360px 200px at 100% 0%, rgb(var(--sx-orange-rgb) / .14), transparent 70%), linear-gradient(170deg, #fff 0%, #F1F6FF 100%); box-shadow: 0 40px 80px -30px rgba(2, 12, 38, .7); transform: translateY(24px) scale(.94); transition: transform .5s cubic-bezier(.34, 1.4, .64, 1); }
.qp-bundle-pop.is-open .qp-bundle-pop-card { transform: none; }
.qp-bundle-pop-x { position: absolute; right: 14px; top: 12px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(4, 20, 60, .06); color: var(--sx-navy); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.qp-bundle-pop-x:hover { background: rgba(4, 20, 60, .12); }
.qp-bundle-pop-badge { display: inline-block; padding: 8px 16px; border-radius: 999px; background: var(--sx-orange); color: #fff; font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 12px 24px -10px rgb(var(--sx-orange-rgb) / .8); animation: sx-pop-badge .7s cubic-bezier(.34, 1.56, .64, 1) .15s both; }
@keyframes sx-pop-badge { from { transform: scale(.4) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
.qp-bundle-pop h3 { margin: 16px 0 8px; color: var(--sx-navy); font-size: clamp(1.35rem, 3.6vw, 1.7rem); font-weight: 800; line-height: 1.2; }
.qp-bundle-pop-sub { margin: 0 0 20px; color: var(--sx-text); font-size: 1rem; line-height: 1.5; }
.qp-bundle-pop-sub b { color: var(--sx-navy); }
.qp-bundle-pop-list { display: grid; gap: 10px; text-align: left; }
.qp-bundle-pop-opt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 14px 10px 10px; border-radius: 16px; border: 1.5px solid #D6E6FF; background: #fff; cursor: pointer; font-family: inherit; text-align: left; transition: border-color .25s, background-color .25s, transform .3s var(--sx-ease); }
.qp-bundle-pop-opt:hover { border-color: var(--sx-blue); transform: translateY(-2px); }
.qp-bundle-pop-opt.selected { border-color: var(--sx-blue); background: var(--sx-blue-100); }
.qp-bundle-pop-thumb { flex: none; width: 58px; height: 58px; border-radius: 12px; background-size: cover; background-position: center; }
.qp-bundle-pop-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qp-bundle-pop-text b { color: var(--sx-navy); font-size: 1rem; }
.qp-bundle-pop-text small { color: var(--sx-text); font-size: .84rem; line-height: 1.35; }
.qp-bundle-pop-add { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--sx-navy); color: #fff; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.qp-bundle-pop-opt.selected .qp-bundle-pop-add { background: var(--sx-blue); }
.qp-bundle-pop-status { min-height: 1.4em; margin: 14px 0 4px; color: var(--sx-navy); font-weight: 600; }
.qp-bundle-pop-status b { color: var(--sx-orange); }
.qp-bundle-pop-actions { display: flex; gap: 12px; justify-content: center; margin-top: 6px; }
.qp-bundle-pop-skip, .qp-bundle-pop-go { padding: 15px 24px; border-radius: 999px; font-family: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; transition: transform .3s var(--sx-ease), background-color .25s, opacity .25s; }
.qp-bundle-pop-skip { border: 1.5px solid #C9D4E4; background: #fff; color: var(--sx-navy); }
.qp-bundle-pop-skip:hover { border-color: var(--sx-navy); }
.qp-bundle-pop-go { border: 0; background: var(--sx-orange); color: #fff; box-shadow: 0 14px 26px -12px rgb(var(--sx-orange-rgb) / .8); }
.qp-bundle-pop-go:hover:not(:disabled) { transform: translateY(-2px); background: var(--sx-orange-600); }
.qp-bundle-pop-go:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
@media (max-width: 480px) {
  .qp-bundle-pop-card { padding: 30px 18px 20px; }
  .qp-bundle-pop-actions { flex-direction: column-reverse; }
  .qp-bundle-pop-skip, .qp-bundle-pop-go { width: 100%; }
}

/* ==========================================================
   FINAL CTA — curved "horizon" top edge
   ========================================================== */
.sx-final {
  --arch: 80px;
  z-index: 2;
  margin-top: calc(-1 * var(--arch));
  padding-top: calc(150px + var(--arch) / 2);
  border-radius: 50% 50% 0 0 / var(--arch) var(--arch) 0 0;
}
.sx-final::before {
  inset: 0;
  height: auto;
  z-index: 1;
  opacity: 1;
  pointer-events: none;
  border-radius: inherit;
  background: none;
  box-shadow:
    inset 0 3px 0 rgba(255, 154, 77, .95),
    inset 0 26px 40px -24px rgb(var(--sx-orange-rgb) / .45),
    inset 0 60px 80px -50px rgba(4, 99, 238, .5);
}
.sx-final-inner { position: relative; z-index: 2; }
@media (max-width: 680px) {
  .sx-final { --arch: 40px; padding-top: calc(110px + var(--arch) / 2); }
}

/* ==========================================================
   POWER WASHING — "from quote to curb appeal" timeline
   ========================================================== */
.sx-journey-section { background: linear-gradient(180deg, #fff 0%, var(--sx-bg-soft) 100%); }
.sx-journey { --node: 76px; position: relative; max-width: 1220px; margin-inline: auto; }
.sx-journey-line { position: absolute; left: 12.5%; right: 12.5%; top: calc(var(--node) / 2 - 3px); height: 6px; border-radius: 6px; background: #DCE8FB; overflow: hidden; }
.sx-journey-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--sx-blue), #0FA3E0, var(--sx-orange)); transform: scaleX(0); transform-origin: left; transition: transform .25s linear; }
.sx-journey-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
.sx-journey-step { display: flex; flex-direction: column; align-items: center; }
.sx-journey-node { position: relative; z-index: 1; width: var(--node); height: var(--node); border-radius: 50%; display: grid; place-items: center; background: #fff; border: 3px solid #DCE8FB; box-shadow: 0 14px 30px -18px rgba(4, 20, 60, .5); transition: border-color .4s, background-color .4s, transform .6s cubic-bezier(.34, 1.56, .64, 1), box-shadow .4s; }
.sx-journey-num { color: var(--sx-muted); font-size: 1.7rem; font-weight: 800; transition: color .4s; }
.sx-journey-step.is-lit .sx-journey-node { border-color: transparent; background: linear-gradient(135deg, var(--sx-blue), #0FA3E0); transform: scale(1.08); box-shadow: 0 0 0 8px rgba(4, 99, 238, .14), 0 18px 34px -14px rgba(4, 99, 238, .7); }
.sx-journey-step:last-child.is-lit .sx-journey-node { background: linear-gradient(135deg, var(--sx-orange), var(--sx-orange-300)); box-shadow: 0 0 0 8px rgb(var(--sx-orange-rgb) / .16), 0 18px 34px -14px rgb(var(--sx-orange-rgb) / .7); }
.sx-journey-step.is-lit .sx-journey-num { color: #fff; }
.sx-journey-card { position: relative; margin-top: 26px; padding: 28px 24px 26px; border-radius: 20px; background: #fff; border: 1.5px solid #DCE8FB; box-shadow: 0 20px 40px -30px rgba(4, 20, 60, .5); text-align: left; flex: 1; transition: transform .45s var(--sx-ease), border-color .3s, box-shadow .45s var(--sx-ease); }
.sx-journey-card::before { content: ''; position: absolute; left: 50%; top: -9px; width: 16px; height: 16px; background: #fff; border-left: 1.5px solid #DCE8FB; border-top: 1.5px solid #DCE8FB; transform: translateX(-50%) rotate(45deg); transition: border-color .3s; }
.sx-journey-step.is-lit .sx-journey-card { border-color: rgba(4, 99, 238, .35); }
.sx-journey-step.is-lit .sx-journey-card::before { border-color: rgba(4, 99, 238, .35); }
.sx-journey-card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(4, 99, 238, .6); }
.sx-journey-ico { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 14px; border-radius: 14px; background: var(--sx-blue-100); color: var(--sx-blue); }
.sx-journey-step:last-child .sx-journey-ico { background: #FFF1E6; color: var(--sx-orange); }
.sx-journey-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sx-journey-card h3 { margin: 0 0 10px; color: var(--sx-navy); font-size: 1.18rem; font-weight: 700; line-height: 1.3; }
.sx-journey-card p { margin: 0; color: var(--sx-text); font-size: .98rem; line-height: 1.6; }
@media (max-width: 900px) {
  .sx-journey { --node: 58px; max-width: 560px; }
  .sx-journey-line { left: calc(var(--node) / 2 - 3px); right: auto; top: 10px; bottom: 10px; width: 6px; height: auto; }
  .sx-journey-fill { transform: scaleY(0); transform-origin: top; }
  .sx-journey-list { grid-template-columns: 1fr; gap: 22px; }
  .sx-journey-step { flex-direction: row; align-items: flex-start; gap: 18px; }
  .sx-journey-num { font-size: 1.3rem; }
  .sx-journey-card { margin-top: 0; padding: 20px 18px; }
  .sx-journey-card::before { left: -9px; top: 22px; transform: rotate(-45deg); }
}

/* ==========================================================
   ENTRANCES — smooth, sequenced intros (service, city,
   commercial and blog pages). Opacity/transform only.
   ========================================================== */
@keyframes sx-hero-pop {
  0% { opacity: 0; transform: translate3d(0, 34px, 0) scale(.96); filter: blur(8px); }
  60% { filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes sx-badge-pop {
  0% { opacity: 0; transform: translate3d(0, 14px, 0) scale(.7); }
  100% { opacity: 1; transform: none; }
}
/* Page heroes: reviews badge → title → subtitle → buttons */
.sx-hero--page .sx-in {
  animation: sx-hero-pop 1s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--d, 0ms) * 2.6 + 200ms);
}
.sx-hero--page .sx-hero-badge.sx-in { animation-name: sx-badge-pop; animation-timing-function: cubic-bezier(.34, 1.5, .64, 1); }
.sx-hero--page .sx-hero-ctas.sx-in { animation-timing-function: cubic-bezier(.34, 1.35, .64, 1); }

/* Blog headers: breadcrumb → topic → title → details */
.page-header .container > *,
.blog-post-header .container > * { animation: sx-hero-pop 1s cubic-bezier(.22, 1, .36, 1) both; }
.page-header .container > :nth-child(1), .blog-post-header .container > :nth-child(1) { animation-delay: .32s; }
.page-header .container > :nth-child(2), .blog-post-header .container > :nth-child(2) { animation-delay: .52s; }
.page-header .container > :nth-child(3), .blog-post-header .container > :nth-child(3) { animation-delay: .72s; }
.page-header .container > :nth-child(4), .blog-post-header .container > :nth-child(4) { animation-delay: .92s; }

/* Text blocks that flow in piece by piece once scrolled into view */
.sx-js .sx-seq > * { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .7s var(--sx-ease), transform .85s cubic-bezier(.22, 1, .36, 1); }
.sx-js .sx-seq.is-in > * { opacity: 1; transform: none; }
.sx-js .sx-seq.is-in > :nth-child(2) { transition-delay: .12s; }
.sx-js .sx-seq.is-in > :nth-child(3) { transition-delay: .24s; }
.sx-js .sx-seq.is-in > :nth-child(4) { transition-delay: .36s; }
.sx-js .sx-seq.is-in > :nth-child(5) { transition-delay: .48s; }
.sx-js .sx-seq.is-in > :nth-child(6) { transition-delay: .6s; }
.sx-js .sx-seq.sx-r:not(.sx-settled) { transform: none; }

/* Service step cards: icon spins in, big number slides across */
.sx-js .sx-ptile--icon.sx-r .sx-ptile-ico { opacity: 0; transform: scale(.3) rotate(-35deg); transition: opacity .5s var(--sx-ease), transform .8s cubic-bezier(.34, 1.56, .64, 1), background-color .3s; }
.sx-js .sx-ptile--icon.sx-r .sx-ptile-num { opacity: 0; transform: translateX(30px); transition: opacity .6s var(--sx-ease), transform .9s var(--sx-ease), color .4s; }
.sx-js .sx-ptile--icon.sx-r.is-in .sx-ptile-ico { opacity: 1; transform: none; transition-delay: calc(var(--d, 0ms) + .35s); }
.sx-js .sx-ptile--icon.sx-r.is-in .sx-ptile-num { opacity: 1; transform: none; transition-delay: calc(var(--d, 0ms) + .45s); }
.sx-js .sx-ptile--icon.sx-r.sx-settled .sx-ptile-ico, .sx-js .sx-ptile--icon.sx-r.sx-settled .sx-ptile-num { transition-delay: 0s; }
.sx-js .sx-ptile--icon.sx-r.sx-settled:hover .sx-ptile-ico { transform: rotate(-8deg) scale(1.1); }
.sx-js .sx-ptile--icon.sx-r.sx-settled:hover .sx-ptile-num { transform: translateY(-4px) scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .sx-hero--page .sx-in, .page-header .container > *, .blog-post-header .container > * { animation: none !important; }
  .sx-js .sx-seq > *, .sx-js .sx-ptile--icon.sx-r .sx-ptile-ico, .sx-js .sx-ptile--icon.sx-r .sx-ptile-num { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================
   QUOTE STEP 4 — silky service cards
   ========================================================== */
@keyframes qp-svc-in { from { opacity: 0; transform: translate3d(0, 26px, 0) scale(.96); } to { opacity: 1; transform: none; } }
/* "backwards" (not "both") so the entrance never locks the hover transform afterwards */
body.qp #wizard-step-4:not([hidden]) .qp-img-svc-card { animation: qp-svc-in .6s cubic-bezier(.22, 1, .36, 1) backwards; }
body.qp #wizard-step-4:not([hidden]) .qp-img-svc-card:nth-child(1) { animation-delay: .04s; }
body.qp #wizard-step-4:not([hidden]) .qp-img-svc-card:nth-child(2) { animation-delay: .09s; }
body.qp #wizard-step-4:not([hidden]) .qp-img-svc-card:nth-child(3) { animation-delay: .14s; }
body.qp #wizard-step-4:not([hidden]) .qp-img-svc-card:nth-child(4) { animation-delay: .19s; }
body.qp #wizard-step-4:not([hidden]) .qp-img-svc-card:nth-child(5) { animation-delay: .24s; }
body.qp #wizard-step-4:not([hidden]) .qp-img-svc-card:nth-child(6) { animation-delay: .29s; }
body.qp #wizard-step-4:not([hidden]) .qp-img-svc-card:nth-child(7) { animation-delay: .34s; }
body.qp #wizard-step-4:not([hidden]) .qp-img-svc-card:nth-child(n+8) { animation-delay: .39s; }
body.qp #wizard-step-4:not([hidden]) .qp-img-svc-card.selected,
body.qp #wizard-step-4:not([hidden]) .qp-img-svc-card.svc-fade-out { animation: none; }
body.qp #wizard-step-4:not([hidden]) .qp-img-svc-card.svc-return { animation: qp-svc-in .55s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
/* Only animate cheap properties (no width/height tweening = no jitter) */
body.qp .qp-img-svc-card { transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .45s var(--sx-ease), opacity .35s ease; will-change: transform; backface-visibility: hidden; }
body.qp .qp-img-svc-card:hover { transform: translate3d(0, -6px, 0) scale(1.015); }
body.qp .qp-img-svc-bg { transition: transform .9s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
body.qp .qp-img-svc-card.svc-fade-out { opacity: 0; transform: scale(.92); pointer-events: none; transition: opacity .32s ease, transform .34s cubic-bezier(.4, 0, .2, 1); }
body.qp .qp-img-svc-grid.service-selected .qp-img-svc-card.selected { animation: none; }
body.qp .qp-img-svc-grid.service-selected .qp-img-svc-card.selected:hover { transform: none; }
/* Add-ons slide up after a service is picked */
@keyframes qp-panel-in { from { opacity: 0; transform: translate3d(0, 30px, 0); } to { opacity: 1; transform: none; } }
body.qp .qp-addons-panel.qp-panel-in { animation: qp-panel-in .65s cubic-bezier(.22, 1, .36, 1) .12s backwards; }
body.qp .qp-addons-panel.qp-panel-in .qp-addon-card { animation: qp-svc-in .55s cubic-bezier(.22, 1, .36, 1) backwards; }
body.qp .qp-addons-panel.qp-panel-in .qp-addon-card:nth-of-type(1) { animation-delay: .3s; }
body.qp .qp-addons-panel.qp-panel-in .qp-addon-card:nth-of-type(2) { animation-delay: .38s; }
body.qp .qp-addons-panel.qp-panel-in .qp-addon-card:nth-of-type(3) { animation-delay: .46s; }
body.qp .qp-addons-panel.qp-panel-in .qp-addon-card:nth-of-type(4) { animation-delay: .54s; }
@media (prefers-reduced-motion: reduce) {
  body.qp .qp-img-svc-card, body.qp .qp-addons-panel.qp-panel-in, body.qp .qp-addons-panel.qp-panel-in .qp-addon-card { animation: none !important; }
}

/* Quote form: labelled Exit pill (icon-only on phones) */
.qp-close-label { display: none; }
@media (min-width: 681px) {
  body.qp .qp-brand { padding-right: 128px; }
  body.qp .qp-close-float { width: auto; height: 42px; padding: 0 16px 0 13px; gap: 7px; border-radius: 999px; font-family: var(--sx-font); font-size: .88rem; font-weight: 600; }
  body.qp .qp-close-float:hover { transform: none; }
  body.qp .qp-close-float:hover svg { transform: rotate(90deg); }
  body.qp .qp-close-float svg { transition: transform .35s var(--sx-ease); }
  .qp-close-label { display: inline; }
}

/* Dropdowns: see-through navy glass that matches the floating header */
.sx-nav-menu {
  background:
    radial-gradient(240px 160px at 100% 0%, rgba(248, 106, 5, .16), transparent 70%),
    linear-gradient(165deg, rgba(10, 33, 82, .9) 0%, rgba(4, 20, 60, .86) 100%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 30px 60px -24px rgba(2, 12, 38, .75), inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.sx-nav-menu a { color: rgba(255, 255, 255, .88); }
.sx-nav-menu a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.sx-nav-menu a[aria-current="page"] { background: rgba(4, 99, 238, .45); color: #fff; }

/* ==========================================================
   PAGE TRANSITIONS — content flows up and in (no curtain)
   ========================================================== */
html.sx-js::after { display: none !important; }
@keyframes sx-page-in { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
@keyframes sx-page-out { to { opacity: 0; transform: translate3d(0, -18px, 0); } }
html.sx-js body > :is(main, section, footer, header.page-header, header.blog-post-header) {
  animation: sx-page-in .75s cubic-bezier(.22, 1, .36, 1) both;
}
html.sx-js body > :is(section, footer) { animation-delay: .06s; }
html.sx-js.sx-leaving body > :is(main, section, footer, header.page-header, header.blog-post-header) {
  animation: sx-page-out .3s cubic-bezier(.4, 0, 1, 1) both;
}
html.sx-js.sx-leaving .sx-nav-inner { opacity: .6; transition: opacity .3s; }
@media (prefers-reduced-motion: reduce) {
  html.sx-js body > :is(main, section, footer, header.page-header, header.blog-post-header) { animation: none !important; }
}

/* Quote plan perks: clear blue checks on every card, selected or not */
body.qp .qp-plan-features { margin: 16px auto 0; }
body.qp .qp-plan-card .qp-plan-features .feat-yes,
body.qp .qp-plan-card.selected .qp-plan-features .feat-yes { color: var(--sx-navy); font-weight: 500; }
body.qp .qp-plan-card .qp-plan-features .feat-yes::before,
body.qp .qp-plan-card.selected .qp-plan-features .feat-yes::before {
  background-color: var(--sx-blue-100);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='%230463EE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.qp .qp-plan-card.selected .qp-plan-features .feat-no { color: var(--sx-muted); }

/* ==========================================================
   SCROLL PERFORMANCE — keep every section equally light so the
   glide never speeds up or slows down
   ========================================================== */
.sx-glow { will-change: transform; contain: strict; }
/* Large frosted cards: same look via a slightly stronger tint instead of live blur */
.sx-values-band .sx-value,
.sx-step,
.sx-ptile-ico { backdrop-filter: none; -webkit-backdrop-filter: none; }
.sx-values-band .sx-value { background: linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04)); }
.sx-step { background: linear-gradient(145deg, rgba(20, 44, 100, .92), rgba(8, 26, 70, .92)); }
/* Maps never swallow the wheel while scrolling past */
.sx-area-map iframe, .sx-city-map iframe { pointer-events: none; }

/* 4-step slides: slow cross-fade + gentle zoom on the photo, text glides in, number stays instant */
.sx-step.is-active { animation: none; }
.sx-step.is-active img { animation: sx-step-img 1.1s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes sx-step-img { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
.sx-step.is-active .sx-step-body > :not(.sx-step-num) { animation: sx-step-text .8s cubic-bezier(.22, 1, .36, 1) both; }
.sx-step.is-active .sx-step-body > h3 { animation-delay: .12s; }
.sx-step.is-active .sx-step-body > p { animation-delay: .24s; }
@keyframes sx-step-text { from { opacity: 0; transform: translate3d(18px, 0, 0); } to { opacity: 1; transform: none; } }
.sx-step { background-color: #0A2152; }
@media (prefers-reduced-motion: reduce) { .sx-step.is-active img, .sx-step.is-active .sx-step-body > * { animation: none !important; } }

/* Service tiles: title only until hover; the orange "View" pill appears on hover (never pinned on touch) */
@media (hover: none) {
  .sx-tile span::after { content: none; }
}

/* ==========================================================
   QUOTE — "You're all set" confirmation
   ========================================================== */
body.qp .qp-step--confirm { text-align: left; }
.qp-done { width: 100%; max-width: 760px; margin: 0 auto; display: grid; gap: 22px; font-family: var(--sx-font); }
.qp-done > * { animation: qp-svc-in .7s cubic-bezier(.22, 1, .36, 1) backwards; }
.qp-done > :nth-child(2) { animation-delay: .25s; }
.qp-done > :nth-child(3) { animation-delay: .38s; }
.qp-done > :nth-child(4) { animation-delay: .5s; }
.qp-done > :nth-child(5) { animation-delay: .6s; }
.qp-done-hero { position: relative; overflow: hidden; isolation: isolate; padding: 38px 30px 36px; border-radius: 28px; text-align: center; color: #fff; background: linear-gradient(160deg, #0A2152 0%, var(--sx-navy) 70%); box-shadow: 0 40px 70px -40px rgba(2, 12, 38, .8); }
.qp-done-glow { position: absolute; z-index: -1; width: 360px; height: 360px; border-radius: 50%; filter: blur(10px); }
.qp-done-glow--a { left: -120px; top: -160px; background: radial-gradient(circle, rgba(4, 99, 238, .55), transparent 65%); }
.qp-done-glow--b { right: -130px; bottom: -190px; background: radial-gradient(circle, rgba(248, 106, 5, .45), transparent 65%); }
.qp-done-logo { height: 40px; width: auto; margin: 0 auto 26px; display: block; opacity: .95; }
.qp-done-check { position: relative; width: 92px; height: 92px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--sx-orange), var(--sx-orange-300)); box-shadow: 0 18px 40px -14px rgb(var(--sx-orange-rgb) / .9); animation: qp-check-pop .8s cubic-bezier(.34, 1.56, .64, 1) .25s backwards; }
.qp-done-check svg { width: 46px; height: 46px; color: #fff; stroke-dasharray: 30; stroke-dashoffset: 30; animation: qp-check-draw .55s ease-out .75s forwards; }
.qp-done-ring { position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(255, 154, 77, .6); animation: qp-ring 1.6s ease-out .6s backwards; }
@keyframes qp-check-pop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes qp-check-draw { to { stroke-dashoffset: 0; } }
@keyframes qp-ring { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.qp-done-ring { opacity: 0; }
.qp-done-title { margin: 0 0 10px; color: #fff; font-size: clamp(2rem, 5vw, 2.9rem); font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.qp-done-sub { max-width: 520px; margin: 0 auto; color: rgba(255, 255, 255, .82); font-size: 1.05rem; line-height: 1.6; }

.qp-done-next { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.qp-done-next li { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 18px; background: #fff; border: 1.5px solid #D6E6FF; }
.qp-done-next li > span { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--sx-blue); color: #fff; font-weight: 800; font-size: .9rem; }
.qp-done-next li:first-child > span { background: var(--sx-orange); }
.qp-done-next b { display: block; color: var(--sx-navy); font-size: .95rem; line-height: 1.3; }
.qp-done-next small { display: block; margin-top: 3px; color: var(--sx-text); font-size: .82rem; line-height: 1.4; }

.qp-done-card { padding: 26px 26px 18px; border-radius: 24px; background: #fff; border: 1.5px solid #D6E6FF; box-shadow: 0 24px 50px -36px rgba(4, 20, 60, .5); }
.qp-done-card h3 { margin: 0 0 12px; color: var(--sx-navy); font-size: 1.15rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
body.qp .qp-done-summary { padding: 0; border: 0; background: none; border-radius: 0; font-size: 1rem; }
.qp-done-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-top: 1px solid #EDF2FA; }
.qp-done-row:first-child { border-top: 0; }
.qp-done-ico { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--sx-blue-100); color: var(--sx-blue); }
.qp-done-ico svg { width: 20px; height: 20px; fill: currentColor; }
.qp-done-row small { display: block; color: var(--sx-muted); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.qp-done-row > div > div { margin-top: 3px; color: var(--sx-navy); font-weight: 500; line-height: 1.5; word-break: break-word; }
.qp-done-chip { display: inline-block; margin: 3px 6px 3px 0; padding: 5px 12px; border-radius: 999px; background: var(--sx-blue-100); color: var(--sx-blue); font-size: .85rem; font-weight: 600; }
.qp-done-save { color: var(--sx-orange); }

.qp-done-contact { text-align: center; }
.qp-done-contact p { margin: 0 0 12px; color: var(--sx-text); }
.qp-done-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.qp-done-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 14px; border-radius: 999px; font-size: .92rem; font-weight: 700; text-decoration: none; transition: transform .35s var(--sx-ease), box-shadow .35s var(--sx-ease), background-color .25s; }
.qp-done-btn svg { width: 18px; height: 18px; flex: none; }
.qp-done-btn--call { background: var(--sx-blue); color: #fff; box-shadow: 0 14px 26px -14px rgba(4, 99, 238, .8); }
.qp-done-btn--text { background: var(--sx-navy); color: #fff; }
.qp-done-btn--email { background: #fff; color: var(--sx-navy); box-shadow: inset 0 0 0 1.5px #C9D8F0; }
.qp-done-btn:hover { transform: translateY(-3px); color: inherit; }
.qp-done-btn--call:hover, .qp-done-btn--text:hover { color: #fff; }

.qp-done-exit { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 6px; }
.qp-done-home { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 999px; color: var(--sx-navy); font-weight: 700; text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--sx-navy); transition: background-color .25s, color .25s; }
.qp-done-home svg { width: 18px; height: 18px; transition: transform .3s var(--sx-ease); }
.qp-done-home:hover { background: var(--sx-navy); color: #fff; }
.qp-done-home:hover svg { transform: translateX(-4px); }
@media (max-width: 680px) {
  .qp-done-hero { padding: 30px 18px 28px; border-radius: 22px; }
  .qp-done-next { grid-template-columns: 1fr; }
  .qp-done-actions { grid-template-columns: 1fr; }
  .qp-done-card { padding: 20px 18px 12px; }
  .qp-done-exit { flex-direction: column-reverse; }
  .qp-done-exit > * { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .qp-done > *, .qp-done-check, .qp-done-ring { animation: none !important; }
  .qp-done-check svg { animation: none; stroke-dashoffset: 0; }
}
body.qp .qp-done-summary { display: block; width: 100%; max-width: none; margin: 0; text-align: left; }
body.qp .qp-done-row > div { flex: 1; min-width: 0; }

/* ==========================================================
   Breathing room between the last section and the curved CTA
   ========================================================== */
.sx-section:has(+ .sx-final), .sx-band:has(+ .sx-final) { padding-bottom: calc(var(--sx-section) + 90px); }
@media (max-width: 680px) { .sx-section:has(+ .sx-final), .sx-band:has(+ .sx-final) { padding-bottom: calc(var(--sx-section) + 50px); } }

/* ==========================================================
   SOFT WASHING — steps winding down a path
   ========================================================== */
.sx-wind-section {
  background:
    radial-gradient(700px 400px at 0% 0%, rgba(15, 163, 224, .16), transparent 70%),
    radial-gradient(700px 420px at 100% 100%, rgba(4, 99, 238, .14), transparent 70%),
    linear-gradient(180deg, #EAF3FF 0%, #F4F9FF 100%);
}
.sx-wind-section::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M0 20c20-12 40-12 60 0s40 12 60 0' fill='none' stroke='%230463EE' stroke-opacity='.07' stroke-width='2'/%3E%3C/svg%3E");
}
.sx-wind { position: relative; max-width: 980px; margin: 0 auto 10px; }
.sx-wind-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sx-wind-track, .sx-wind-draw { fill: none; stroke-linecap: round; }
.sx-wind-track { stroke: rgba(4, 99, 238, .14); stroke-width: 1.1; }
.sx-wind-draw { stroke: #0FA3E0; stroke-width: 1.1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .15s linear; filter: drop-shadow(0 4px 10px rgba(15, 163, 224, .45)); }
.sx-wind-list { list-style: none; margin: 0; padding: 0; position: relative; }
.sx-wind-step { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 230px; }
.sx-wind-node {
  position: absolute; top: 50%; left: 75%; transform: translate(-50%, -50%);
  width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: #0FA3E0; border: 4px solid #D3E9FA;
  box-shadow: 0 18px 36px -18px rgba(4, 20, 60, .5);
  transition: background-color .5s, color .5s, border-color .5s, transform .6s cubic-bezier(.34, 1.56, .64, 1), box-shadow .5s;
}
.sx-wind-node svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sx-wind-node b { position: absolute; right: -6px; top: -6px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--sx-navy); color: #fff; font-size: .85rem; font-weight: 800; }
.sx-wind-step.is-lit .sx-wind-node { background: linear-gradient(135deg, #0463EE, #0FA3E0); color: #fff; border-color: #fff; transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 0 10px rgba(15, 163, 224, .15), 0 22px 40px -16px rgba(4, 99, 238, .7); }
.sx-wind-card { grid-column: 1; margin-right: 90px; padding: 26px 28px; border-radius: 22px; background: #fff; border: 1.5px solid #D6E6FF; box-shadow: 0 24px 50px -34px rgba(4, 20, 60, .55); text-align: right; transition: transform .45s var(--sx-ease), box-shadow .45s var(--sx-ease); }
.sx-wind-step:nth-child(even) .sx-wind-node { left: 25%; }
.sx-wind-step:nth-child(even) .sx-wind-card { grid-column: 2; margin: 0 0 0 90px; text-align: left; }
.sx-wind-card:hover { transform: translateY(-5px); box-shadow: 0 30px 56px -30px rgba(4, 99, 238, .55); }
.sx-wind-kicker { color: #0FA3E0; font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.sx-wind-card h3 { margin: 6px 0 8px; color: var(--sx-navy); font-size: 1.35rem; font-weight: 800; }
.sx-wind-card p { margin: 0; color: var(--sx-text); font-size: 1rem; line-height: 1.6; }
@media (max-width: 760px) {
  .sx-wind-path { display: none; }
  .sx-wind::before { content: ''; position: absolute; left: 34px; top: 20px; bottom: 20px; width: 6px; border-radius: 6px; background: linear-gradient(#0463EE, #0FA3E0); opacity: .35; }
  .sx-wind-step, .sx-wind-step:nth-child(even) { grid-template-columns: 1fr; min-height: 0; padding: 12px 0 12px 88px; }
  .sx-wind-node, .sx-wind-step:nth-child(even) .sx-wind-node { left: 37px; width: 68px; height: 68px; }
  .sx-wind-node svg { width: 28px; height: 28px; }
  .sx-wind-card, .sx-wind-step:nth-child(even) .sx-wind-card { grid-column: 1; margin: 0; text-align: left; padding: 20px; }
}

/* ==========================================================
   GUTTER CLEANING — steps hanging from a gutter
   ========================================================== */
.sx-trough-section { background: linear-gradient(180deg, #F2F5F9 0%, #E9EEF5 100%); }
.sx-trough-roof { position: absolute; left: 0; right: 0; top: 0; height: 70px; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(90deg, transparent 0 58px, rgba(4, 20, 60, .06) 58px 60px), linear-gradient(180deg, rgba(4, 20, 60, .12), transparent); }
.sx-trough { position: relative; max-width: 1180px; margin: 0 auto; padding-top: 10px; }
.sx-trough-gutter { position: relative; height: 34px; margin: 0 70px 0 0; border-radius: 6px 6px 18px 18px;
  background: linear-gradient(180deg, #FFFFFF 0%, #E8EDF4 60%, #D5DDE8 100%);
  box-shadow: inset 0 -4px 0 rgba(4, 20, 60, .08), 0 14px 26px -16px rgba(4, 20, 60, .5); overflow: visible; }
.sx-trough-gutter::before { content: ''; position: absolute; left: 10px; right: 10px; top: 5px; height: 12px; border-radius: 0 0 10px 10px; background: rgba(4, 20, 60, .08); }
.sx-trough-water { position: absolute; left: 12px; right: 12px; top: 8px; height: 8px; overflow: hidden; border-radius: 6px; }
.sx-trough-water i { position: absolute; top: 0; left: -40px; width: 34px; height: 8px; border-radius: 8px; background: linear-gradient(90deg, rgba(15, 163, 224, 0), #0FA3E0); animation: sx-flow 3.2s linear infinite; animation-delay: calc(var(--i) * -.55s); }
@keyframes sx-flow { to { transform: translateX(1200px); } }
.sx-trough-spout { position: absolute; right: -58px; top: 6px; width: 60px; height: 40px; border-radius: 0 18px 0 0; border: 14px solid #DDE4EE; border-left: 0; border-bottom: 0; }
.sx-trough-spout::after { content: ''; position: absolute; right: -14px; top: 26px; width: 28px; height: 140px; border-radius: 0 0 8px 8px; background: linear-gradient(90deg, #E8EDF4, #D0D8E4); box-shadow: 0 10px 20px -12px rgba(4, 20, 60, .5); }
.sx-trough-stream { position: absolute; right: -8px; top: 170px; width: 16px; height: 50px; border-radius: 0 0 50% 50%; background: linear-gradient(180deg, rgba(15, 163, 224, .8), rgba(15, 163, 224, 0)); animation: sx-drip 1.6s ease-in infinite; }
@keyframes sx-drip { 0% { opacity: 0; transform: translateY(-10px) scaleY(.6); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(24px) scaleY(1.1); } }
.sx-trough-list { list-style: none; margin: 0 70px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.sx-trough-step { position: relative; padding-top: 44px; }
.sx-trough-hanger { position: absolute; left: 50%; top: -2px; width: 4px; height: 46px; transform: translateX(-50%); background: linear-gradient(#B8C3D2, #8E9BAE); border-radius: 2px; }
.sx-trough-hanger::before { content: ''; position: absolute; left: 50%; top: -8px; width: 22px; height: 10px; transform: translateX(-50%); border-radius: 4px; background: #8E9BAE; }
.sx-trough-card { position: relative; height: 100%; padding: 30px 22px 24px; border-radius: 20px; background: #fff; border: 1.5px solid #D9E2EE; box-shadow: 0 26px 46px -32px rgba(4, 20, 60, .6); transform-origin: 50% -44px; transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), box-shadow .45s var(--sx-ease); }
.sx-trough-step:hover .sx-trough-card { transform: rotate(-2deg); box-shadow: 0 34px 56px -30px rgba(4, 99, 238, .5); }
.sx-trough-step:nth-child(even):hover .sx-trough-card { transform: rotate(2deg); }
.sx-trough-ico { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 16px; border-radius: 18px; background: linear-gradient(135deg, #0463EE, #0FA3E0); color: #fff; box-shadow: 0 14px 26px -12px rgba(4, 99, 238, .7); }
.sx-trough-step:nth-child(3) .sx-trough-ico { background: linear-gradient(135deg, #0A2152, #0463EE); }
.sx-trough-step:nth-child(4) .sx-trough-ico { background: linear-gradient(135deg, var(--sx-orange), var(--sx-orange-300)); box-shadow: 0 14px 26px -12px rgb(var(--sx-orange-rgb) / .7); }
.sx-trough-ico svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sx-trough-num { position: absolute; right: 18px; top: 14px; color: rgba(4, 20, 60, .08); font-size: 3.2rem; font-weight: 900; line-height: 1; }
.sx-trough-card h3 { margin: 0 0 8px; color: var(--sx-navy); font-size: 1.2rem; font-weight: 800; }
.sx-trough-card p { margin: 0; color: var(--sx-text); font-size: .96rem; line-height: 1.6; }
@media (max-width: 900px) {
  .sx-trough-gutter { display: none; }
  .sx-trough::before { content: ''; position: absolute; left: 14px; top: 0; bottom: 0; width: 22px; border-radius: 8px; background: linear-gradient(90deg, #E8EDF4, #D0D8E4); box-shadow: 0 10px 20px -12px rgba(4, 20, 60, .5); }
  .sx-trough-list { grid-template-columns: 1fr; margin: 0; gap: 16px; }
  .sx-trough-step { padding: 0 0 0 58px; }
  .sx-trough-hanger { left: 24px; top: 40px; width: 36px; height: 4px; transform: none; }
  .sx-trough-hanger::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sx-trough-water i, .sx-trough-stream { animation: none; } }

/* ==========================================================
   POWER WASHING timeline — photo background + photo cards
   ========================================================== */
.sx-journey-section--photo { background: var(--sx-navy); isolation: isolate; }
.sx-journey-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .28; filter: saturate(1.1); }
.sx-journey-section--photo::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4, 20, 60, .88) 0%, rgba(4, 20, 60, .72) 45%, rgba(4, 20, 60, .92) 100%); }
.sx-journey-section--photo .sx-sub { color: rgba(255, 255, 255, .8); }
.sx-journey-section--photo .sx-journey-line { background: rgba(255, 255, 255, .16); }
.sx-journey-section--photo .sx-journey-node { border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .1); }
.sx-journey-section--photo .sx-journey-num { color: rgba(255, 255, 255, .7); }
.sx-journey-section--photo .sx-journey-card { padding: 0 0 24px; overflow: visible; border-color: transparent; }
.sx-journey-section--photo .sx-journey-card::before { background: #fff; border-color: transparent; }
.sx-journey-photo { margin: 0; height: 150px; overflow: hidden; border-radius: 18px 18px 0 0; }
.sx-journey-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--sx-ease); }
.sx-journey-card:hover .sx-journey-photo img { transform: scale(1.06); }
.sx-journey-ico--solid { position: relative; z-index: 1; width: 58px; height: 58px; margin: -30px 0 12px 22px; border-radius: 18px; background: linear-gradient(135deg, #0463EE, #0FA3E0); color: #fff; border: 4px solid #fff; box-shadow: 0 14px 26px -10px rgba(4, 99, 238, .7); }
.sx-journey-step:last-child .sx-journey-ico--solid { background: linear-gradient(135deg, var(--sx-orange), var(--sx-orange-300)); box-shadow: 0 14px 26px -10px rgb(var(--sx-orange-rgb) / .7); color: #fff; }
.sx-journey-ico--solid svg { width: 28px; height: 28px; fill: currentColor; stroke: none; }
.sx-journey-section--photo .sx-journey-card h3,
.sx-journey-section--photo .sx-journey-card p { padding: 0 22px; }
@media (max-width: 900px) { .sx-journey-photo { height: 130px; } }

/* ===== About: Why Homeowners Choose Us (real photos + line icons) ===== */
.sx-why { background: linear-gradient(180deg, #F4F8FE 0%, #EEF3FA 100%); border-top: 1px solid var(--sx-line); border-bottom: 1px solid var(--sx-line); }
.sx-why-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: auto auto; gap: 22px; max-width: 1220px; margin-inline: auto; }
.sx-why-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #E1E8F2; border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(4, 20, 60, .04), 0 18px 40px -30px rgba(4, 20, 60, .35); transition: transform .5s var(--sx-ease), box-shadow .5s var(--sx-ease); }
.sx-why-card:hover { transform: translateY(-6px); box-shadow: 0 1px 2px rgba(4, 20, 60, .05), 0 30px 60px -32px rgba(4, 99, 238, .45); }
.sx-why-card--team { grid-row: span 2; }
.sx-why-card:not(.sx-why-card--team):nth-child(4) { grid-column: 2 / 4; flex-direction: row; }
.sx-why-card:nth-child(4) .sx-why-photo { flex: 0 0 46%; aspect-ratio: auto; }
.sx-why-card:nth-child(4) .sx-why-body { padding-top: 26px; }
.sx-why-photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #dfe7f2; }
.sx-why-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--sx-ease); }
.sx-why-card:hover .sx-why-photo img { transform: scale(1.05); }
.sx-why-photo--team { aspect-ratio: auto; flex: 1; min-height: 320px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: #fff; }
.sx-why-photo--team img { object-position: 50% 28%; }
.sx-why-tag { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 9px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--sx-navy); font-size: .82rem; font-weight: 600; box-shadow: 0 6px 18px -8px rgba(4, 20, 60, .5); }
.sx-why-tag svg { width: 16px; height: 16px; color: var(--sx-orange); }
.sx-why-body { position: relative; padding: 30px 24px 26px; }
.sx-why-ico { position: absolute; top: -24px; left: 22px; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #fff; color: var(--sx-blue); border: 1px solid #E1E8F2; box-shadow: 0 10px 22px -12px rgba(4, 20, 60, .45); transition: background-color .35s, color .35s, transform .5s var(--sx-ease); }
.sx-why-card:nth-child(4) .sx-why-ico { position: static; margin-bottom: 14px; }
.sx-why-card:hover .sx-why-ico { background: var(--sx-blue); color: #fff; transform: translateY(-3px); }
.sx-why-ico svg { width: 24px; height: 24px; }
.sx-why-body h3 { margin: 0 0 8px; color: var(--sx-navy); font-size: 1.18rem; font-weight: 700; }
.sx-why-body p { margin: 0; color: var(--sx-text); font-size: .98rem; line-height: 1.6; }
.sx-why-sign { margin-top: 14px !important; padding-top: 14px; border-top: 1px dashed #D5DEEA; font-size: .9rem !important; }
.sx-why-sign b { color: var(--sx-navy); font-weight: 700; }
.sx-why-proof { max-width: 1220px; margin: 26px auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; padding: 18px 24px; background: #fff; border: 1px solid #E1E8F2; border-radius: 16px; }
.sx-why-stat { display: flex; align-items: center; gap: 10px; color: var(--sx-text); font-size: .96rem; }
.sx-why-stat b { color: var(--sx-navy); }
.sx-why-stars { display: inline-flex; gap: 1px; color: #FBBC05; }
.sx-why-stars svg { width: 17px; height: 17px; }
.sx-why-mini { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--sx-blue-100); color: var(--sx-blue); }
.sx-why-mini svg { width: 18px; height: 18px; }
.sx-why-call { margin-left: auto; padding: 11px 18px; border-radius: 999px; background: var(--sx-orange); color: #fff; font-weight: 700; font-size: .95rem; text-decoration: none; transition: background-color .3s, transform .3s var(--sx-ease); }
.sx-why-call:hover { background: var(--sx-orange-600); transform: translateY(-2px); }
@media (max-width: 1024px) {
  .sx-why-grid { grid-template-columns: 1fr 1fr; }
  .sx-why-card--team { grid-column: 1 / -1; grid-row: auto; }
  .sx-why-photo--team { min-height: 300px; }
  .sx-why-card:not(.sx-why-card--team):nth-child(4) { grid-column: auto; flex-direction: column; }
  .sx-why-card:nth-child(4) .sx-why-photo { flex: none; aspect-ratio: 16 / 10; }
  .sx-why-card:nth-child(4) .sx-why-ico { position: absolute; margin: 0; }
  .sx-why-card:nth-child(4) .sx-why-body { padding-top: 30px; }
}
@media (max-width: 640px) {
  .sx-why-grid { grid-template-columns: 1fr; }
  .sx-why-photo--team { min-height: 240px; }
  .sx-why-call { margin-left: 0; width: 100%; text-align: center; }
}
.sx-js .sx-why-card.sx-r:not(.sx-settled) { transform: translate3d(0, 36px, 0) scale(.96); transition: opacity .75s var(--sx-ease), transform .9s var(--sx-ease); transition-delay: var(--d, 0ms); }
.sx-js .sx-why-card.sx-r.is-in:not(.sx-settled) { transform: none; }
.sx-js .sx-why-card.sx-r.sx-settled { transition: transform .5s var(--sx-ease), box-shadow .5s var(--sx-ease), opacity .5s; }

/* ===== Service pages: sidebar, quote box, article extras ===== */
.sx-svc .sx-side nav { gap: 4px; border-top: 0; padding: 10px; border-radius: 18px; background: #fff; border: 1px solid #E1E8F2; box-shadow: 0 18px 40px -32px rgba(4, 20, 60, .45); }
.sx-svc .sx-side nav a { justify-content: flex-start; gap: 12px; padding: 11px 12px; border: 0; border-radius: 12px; font-size: .97rem; position: relative; transition: background-color .25s, color .2s, padding-left .3s var(--sx-ease); }
.sx-svc .sx-side nav a span { flex: 1; }
.sx-svc .sx-side-ico { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: #F1F5FB; color: var(--sx-slate-dark); flex: none; transition: background-color .25s, color .25s; }
.sx-svc .sx-side nav a .sx-side-chev { width: 16px; height: 16px; opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .3s var(--sx-ease); }
.sx-svc .sx-side nav a:hover { background: #F4F8FE; padding-left: 16px; color: var(--sx-blue); }
.sx-svc .sx-side nav a:hover .sx-side-ico { background: var(--sx-blue-100); color: var(--sx-blue); }
.sx-svc .sx-side nav a:hover .sx-side-chev { opacity: 1; transform: none; }
.sx-svc .sx-side nav a.is-active::before { content: none; }
.sx-svc .sx-side nav a.is-active { background: linear-gradient(90deg, #E7F0FF, #F4F8FE); color: var(--sx-navy); font-weight: 700; padding-left: 16px; }
.sx-svc .sx-side nav a.is-active::after { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 4px; background: var(--sx-blue); }
.sx-svc .sx-side nav a.is-active .sx-side-ico { background: var(--sx-blue); color: #fff; box-shadow: 0 8px 16px -8px rgba(4, 99, 238, .8); }
.sx-svc .sx-side nav a.is-active .sx-side-chev { opacity: 1; transform: none; color: var(--sx-blue); }
.sx-svc .sx-side-cta { position: relative; overflow: hidden; isolation: isolate; padding: 26px; border-radius: 20px; background: linear-gradient(150deg, #0A6CFF 0%, #0452C9 100%); color: rgba(255, 255, 255, .88); box-shadow: 0 24px 44px -26px rgba(4, 99, 238, .9); }
.sx-svc .sx-side-cta::before { content: ''; position: absolute; right: -40px; top: -40px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 70%); z-index: -1; }
.sx-svc .sx-side-cta strong { font-size: 1.3rem; font-weight: 700; }
.sx-svc .sx-side-cta .sx-btn { background: #fff; color: var(--sx-blue); box-shadow: 0 10px 20px -12px rgba(4, 20, 60, .6); }
.sx-svc .sx-side-cta .sx-btn:hover { background: var(--sx-navy); color: #fff; }
.sx-svc .sx-side-phone { padding: 10px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); transition: background-color .25s; }
.sx-svc .sx-side-phone:hover { background: rgba(255, 255, 255, .24); color: #fff; }
/* "Why choose" list as check cards, areas as pills */
.sx-svc .sx-article-list { grid-template-columns: 1fr 1fr; gap: 12px !important; }
.sx-svc .sx-article-list li { padding: 16px 16px 16px 50px !important; border-radius: 14px; background: #F4F8FE; border: 1px solid #E1E8F2; line-height: 1.5; font-size: .95rem; }
.sx-svc .sx-article-list li::before { left: 16px !important; top: 16px !important; width: 22px !important; height: 22px !important; background: var(--sx-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat !important; }
.sx-svc .sx-article-list li strong { display: block; color: var(--sx-navy); margin-bottom: 2px; }
.sx-article-areas { display: flex; flex-wrap: wrap; gap: 10px; }
.sx-article-areas span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; background: #fff; border: 1px solid #D8E2EF; color: var(--sx-navy); font-weight: 600; font-size: .95rem; }
.sx-article-areas span svg { width: 17px; height: 17px; color: var(--sx-orange); }
.sx-article-areas span.is-muted { background: transparent; border-style: dashed; color: var(--sx-slate-dark); font-weight: 500; }
@media (max-width: 640px) { .sx-svc .sx-article-list { grid-template-columns: 1fr; } }

/* ===== Service pages: distinct section backgrounds ===== */
.sx-svc #reviews { background: radial-gradient(900px 420px at 85% -10%, rgba(4, 99, 238, .45), transparent 60%), radial-gradient(700px 380px at 0% 110%, rgba(248, 106, 5, .18), transparent 60%), var(--sx-navy); }
.sx-svc #reviews .sx-eyebrow { color: #7FB3FF; }
.sx-svc #reviews .sx-title { color: #fff; }
.sx-svc #reviews .sx-rating { color: rgba(255, 255, 255, .82); }
.sx-svc #reviews .sx-rating b, .sx-svc #reviews .sx-rating strong { color: #fff; }
.sx-svc #reviews .sx-btn--navy { background: #fff; color: var(--sx-navy); }
.sx-svc #reviews .sx-btn--navy:hover { background: var(--sx-orange); color: #fff; }
.sx-svc #reviews .sx-review { border-color: transparent; box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .7); }
.sx-svc #about-service { background: #fff; }
.sx-svc #process:not(.sx-xmas-section) { background: linear-gradient(180deg, #EEF4FC 0%, #F7FAFE 100%); border-top: 1px solid #E1E8F2; border-bottom: 1px solid #E1E8F2; }
.sx-svc #process:not(.sx-xmas-section)::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(rgba(4, 99, 238, .12) 1px, transparent 1.4px) 0 0 / 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 55%); mask-image: linear-gradient(180deg, #000, transparent 55%); }
.sx-svc #process > .sx-wrap { position: relative; }
.sx-svc #faq { background: #fff; }

/* ===== 4-step process tiles: flip-up entrance, then icon, number and text in sequence ===== */
.sx-ptiles { perspective: 1400px; }
.sx-js .sx-ptile--icon.sx-r:not(.sx-settled) { opacity: 0; transform: translate3d(0, 70px, 0) rotateX(28deg) scale(.94); transform-origin: 50% 100%; transition: opacity .6s var(--sx-ease), transform 1s cubic-bezier(.2, .9, .25, 1.12); transition-delay: calc(var(--d, 0ms) * 1.6); }
.sx-js .sx-ptile--icon.sx-r.is-in:not(.sx-settled) { opacity: 1; transform: none; }
.sx-js .sx-ptile--icon.sx-r:not(.is-in) .sx-ptile-ico { opacity: 0; transform: scale(.3) rotate(-25deg); }
.sx-js .sx-ptile--icon.sx-r:not(.is-in) .sx-ptile-num { opacity: 0; transform: translateX(40px); }
.sx-js .sx-ptile--icon.sx-r:not(.is-in) .sx-ptile-label,
.sx-js .sx-ptile--icon.sx-r:not(.is-in) .sx-ptile-desc { opacity: 0; transform: translateY(16px); }
.sx-js .sx-ptile--icon.sx-r:not(.sx-settled) .sx-ptile-ico { transition: opacity .4s, transform .8s cubic-bezier(.34, 1.7, .64, 1); transition-delay: calc(var(--d, 0ms) * 1.6 + 280ms); }
.sx-js .sx-ptile--icon.sx-r:not(.sx-settled) .sx-ptile-num { transition: opacity .6s, transform .9s var(--sx-ease); transition-delay: calc(var(--d, 0ms) * 1.6 + 380ms); }
.sx-js .sx-ptile--icon.sx-r:not(.sx-settled) .sx-ptile-label { transition: opacity .5s, transform .7s var(--sx-ease); transition-delay: calc(var(--d, 0ms) * 1.6 + 460ms); }
.sx-js .sx-ptile--icon.sx-r:not(.sx-settled) .sx-ptile-desc { transition: opacity .5s, transform .7s var(--sx-ease); transition-delay: calc(var(--d, 0ms) * 1.6 + 560ms); }
.sx-ptile--icon.is-in::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .28) 48%, transparent 62%); transform: translateX(-120%); animation: sx-ptile-shine 1.3s var(--sx-ease) forwards; animation-delay: calc(var(--d, 0ms) * 1.6 + 500ms); z-index: 2; }
@keyframes sx-ptile-shine { to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .sx-ptile--icon.is-in::before { animation: none; display: none; } }

/* ===== "Book It When You Need It" — four unique layouts ===== */
.sx-book { --glass: rgba(255, 255, 255, .06); --glass-b: rgba(255, 255, 255, .13); }
.sx-book .sx-wrap { position: relative; z-index: 1; }
.sx-book-ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: 44px; }
.sx-book-phone { display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 999px; color: #fff; font-weight: 600; background: var(--glass); border: 1px solid var(--glass-b); transition: background-color .25s, transform .3s var(--sx-ease); }
.sx-book-phone:hover { background: rgba(255, 255, 255, .14); transform: translateY(-2px); }
.sx-book-phone svg { width: 16px; height: 16px; }
.sx-bstep-ico, .sx-brow-ico { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(145deg, var(--c, #0463EE), color-mix(in srgb, var(--c, #0463EE) 55%, #04143C)); box-shadow: 0 12px 24px -12px var(--c, #0463EE); }
.sx-bstep-ico svg, .sx-brow-ico svg { width: 26px; height: 26px; }
.sx-bstep--blue, .sx-brow--blue, .sx-bmini--blue { --c: #0463EE; }
.sx-bstep--orange, .sx-brow--orange { --c: #F86A05; }
.sx-bstep--sky, .sx-brow--sky, .sx-bmini--sky { --c: #0FA3E0; }
.sx-bstep-kick { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--c, #F86A05) 55%, #fff); }
.sx-bstep-chip { display: inline-flex; margin-top: 16px; padding: 6px 12px; border-radius: 999px; font-size: .82rem; font-weight: 600; color: #fff; background: color-mix(in srgb, var(--c, #0463EE) 30%, transparent); border: 1px solid color-mix(in srgb, var(--c, #0463EE) 60%, transparent); }
.sx-book h3 { color: #fff; font-size: 1.3rem; font-weight: 700; margin: 6px 0 8px; }
.sx-book p { color: rgba(255, 255, 255, .78); line-height: 1.6; margin: 0; }

/* 1 · Soft wash: numbered steps on a flowing track */
.sx-bsteps { list-style: none; margin: 0 auto; padding: 0; max-width: 1180px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; position: relative; }
.sx-bsteps::before { content: ''; position: absolute; left: 16%; right: 16%; top: 31px; height: 3px; border-radius: 3px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 10px, transparent 10px 20px); background-size: 40px 3px; animation: sx-dash-flow 1.6s linear infinite; }
@keyframes sx-dash-flow { to { background-position: 40px 0; } }
.sx-bstep { display: flex; flex-direction: column; align-items: center; }
.sx-bstep-num { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #04143C; border: 3px solid var(--c); box-shadow: 0 0 0 8px rgba(4, 20, 60, .9), 0 0 30px -4px var(--c); margin-bottom: 22px; }
.sx-bstep-num b { color: #fff; font-size: 1.6rem; font-weight: 800; }
.sx-bstep-card { width: 100%; flex: 1; padding: 30px 26px 28px; border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border: 1px solid var(--glass-b); text-align: left; transition: transform .45s var(--sx-ease), border-color .3s, box-shadow .45s var(--sx-ease); }
.sx-bstep-card .sx-bstep-ico { margin-bottom: 18px; }
.sx-bstep:hover .sx-bstep-card { transform: translateY(-8px); border-color: color-mix(in srgb, var(--c) 70%, transparent); box-shadow: 0 30px 60px -34px var(--c); }
.sx-bstep:hover .sx-bstep-num { transform: scale(1.08); }
.sx-bstep-num { transition: transform .4s cubic-bezier(.34, 1.6, .64, 1); }
@media (max-width: 900px) {
  .sx-bsteps { grid-template-columns: 1fr; max-width: 560px; gap: 18px; }
  .sx-bsteps::before { left: 31px; right: auto; top: 30px; bottom: 30px; width: 3px; height: auto; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .55) 0 10px, transparent 10px 20px); animation: none; }
  .sx-bstep { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; }
  .sx-bstep-num { margin: 0; }
}

/* 2 · Power washing: intro on the left, stacked rows on the right */
.sx-book-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; max-width: 1220px; }
.sx-head--left { align-items: flex-start; text-align: left; margin-bottom: 26px; }
.sx-book-price { display: inline-flex; flex-direction: column; padding: 18px 24px; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-b); color: rgba(255, 255, 255, .75); font-size: .9rem; }
.sx-book-price b { color: #fff; font-size: 2.6rem; font-weight: 800; line-height: 1.05; background: linear-gradient(90deg, #fff, #FFB27A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sx-book-price small { font-size: .82rem; color: rgba(255, 255, 255, .6); }
.sx-book--split .sx-book-ctas { justify-content: flex-start; margin-top: 28px; }
.sx-brows { display: flex; flex-direction: column; gap: 16px; }
.sx-brow { display: flex; align-items: center; gap: 20px; padding: 22px 24px; border-radius: 20px; background: var(--glass); border: 1px solid var(--glass-b); border-left: 4px solid var(--c); transition: transform .45s var(--sx-ease), background-color .3s; }
.sx-brow:hover { transform: translateX(8px); background: rgba(255, 255, 255, .1); }
.sx-brow h3 { margin: 0 0 4px; font-size: 1.15rem; }
.sx-brow p { font-size: .95rem; }
.sx-brow > div { flex: 1; }
.sx-brow-chip { flex: none; padding: 7px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700; color: #fff; background: color-mix(in srgb, var(--c) 35%, transparent); white-space: nowrap; }
.sx-book--split .sx-brows .sx-brow:nth-child(2) { margin-left: 28px; }
@media (max-width: 1000px) {
  .sx-book-split { grid-template-columns: 1fr; gap: 34px; }
  .sx-book--split .sx-brows .sx-brow:nth-child(2) { margin-left: 0; }
}
@media (max-width: 560px) { .sx-brow { flex-wrap: wrap; } .sx-brow-chip { margin-left: 72px; } }

/* 3 · Gutter: seasonal calendar feature */
.sx-bseason { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; max-width: 1180px; margin-inline: auto; }
.sx-bseason-main { --c: #0FA3E0; padding: 34px 32px; border-radius: 24px; background: radial-gradient(500px 260px at 100% 0%, rgba(15, 163, 224, .25), transparent 60%), rgba(255, 255, 255, .06); border: 1px solid var(--glass-b); }
.sx-bseason-main .sx-bstep-ico { margin-bottom: 16px; }
.sx-bmonths { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin-top: 24px; }
.sx-bmonths span { display: grid; place-items: center; height: 46px; border-radius: 10px; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .55); font-weight: 700; font-size: .9rem; }
.sx-bmonths .is-spring { background: linear-gradient(180deg, #34C38F, #16965f); color: #fff; box-shadow: 0 10px 20px -10px #34C38F; }
.sx-bmonths .is-fall { background: linear-gradient(180deg, #FF8A2B, #E05A00); color: #fff; box-shadow: 0 10px 20px -10px #F86A05; }
.sx-bmonths-key { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; font-size: .86rem; color: rgba(255, 255, 255, .78); }
.sx-bmonths-key span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: 0; }
.sx-bmonths-key .k-spring::before { background: #34C38F; }
.sx-bmonths-key .k-fall::before { background: #F86A05; }
.sx-bseason-side { display: flex; flex-direction: column; gap: 16px; }
.sx-bseason-side .sx-brow { flex: 1; align-items: flex-start; }
@media (max-width: 900px) { .sx-bseason { grid-template-columns: 1fr; } .sx-bmonths { gap: 4px; } .sx-bmonths span { height: 38px; font-size: .78rem; } }

/* 4 · Solar: savings meter in the middle */
.sx-bmeter { display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 22px; max-width: 1220px; margin-inline: auto; align-items: stretch; }
.sx-bmini { padding: 28px 24px; border-radius: 22px; background: var(--glass); border: 1px solid var(--glass-b); display: flex; flex-direction: column; align-items: flex-start; }
.sx-bmini .sx-brow-ico { margin-bottom: 16px; }
.sx-bmini p { flex: 1; font-size: .95rem; }
.sx-bmeter-main { --c: #F86A05; padding: 30px 30px 28px; border-radius: 24px; background: radial-gradient(420px 240px at 50% 0%, rgba(248, 106, 5, .28), transparent 65%), rgba(255, 255, 255, .08); border: 1px solid rgba(248, 106, 5, .45); text-align: center; box-shadow: 0 40px 80px -46px rgba(248, 106, 5, .8); }
.sx-bbars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: end; height: 190px; margin: 22px 8px 18px; }
.sx-bbars > div { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; }
.sx-bbars i { display: block; width: 100%; height: var(--h); border-radius: 12px 12px 6px 6px; background: linear-gradient(180deg, #FFB066, #F86A05); box-shadow: 0 14px 30px -16px #F86A05; transform-origin: bottom; }
.sx-bbars b { color: #fff; font-size: 1.35rem; font-weight: 800; }
.sx-bbars span { color: rgba(255, 255, 255, .7); font-size: .82rem; font-weight: 600; }
.sx-book--meter.is-live .sx-bbars i { animation: sx-bar-grow 1s cubic-bezier(.34, 1.4, .64, 1) both; }
.sx-book--meter.is-live .sx-bbars > div:nth-child(2) i { animation-delay: .15s; }
.sx-book--meter.is-live .sx-bbars > div:nth-child(3) i { animation-delay: .3s; }
@keyframes sx-bar-grow { from { transform: scaleY(.05); } to { transform: none; } }
@media (max-width: 1000px) { .sx-bmeter { grid-template-columns: 1fr 1fr; } .sx-bmeter-main { grid-column: 1 / -1; order: -1; } }
@media (max-width: 600px) { .sx-bmeter { grid-template-columns: 1fr; } }
.sx-js .sx-book--meter:not(.is-live) .sx-bbars i { transform: scaleY(.05); }

/* ==========================================================
   PINNED SCROLL SCENES (power washing)
   ========================================================== */
.sx-pin { padding: 0 !important; overflow: clip; }
.sx-js .sx-pin--steps { height: 430vh; }
.sx-js .sx-pin--sweep { height: 280vh; }
.sx-pin-sticky { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 110px 0 60px; overflow: hidden; }
.sx-js .sx-pin-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; padding: 96px 0 28px; }
.sx-pin-sticky > .sx-wrap { position: relative; z-index: 2; width: 100%; }
.sx-pin .sx-head { margin-bottom: clamp(18px, 3.5vh, 40px); }

/* --- Steps pop in one by one --- */
.sx-pin--steps { background: var(--sx-navy); }
.sx-pin-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; filter: saturate(.8); }
.sx-pin--steps .sx-pin-sticky::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(900px 500px at 50% 0%, rgba(4, 99, 238, .45), transparent 65%), linear-gradient(180deg, rgba(4, 20, 60, .82), rgba(4, 20, 60, .95)); }
.sx-pin--steps .sx-sub { color: rgba(255, 255, 255, .78); }
.sx-pin-track { position: relative; list-style: none; margin: 0 auto clamp(18px, 3vh, 34px); padding: 0; max-width: 1100px; display: grid; grid-template-columns: repeat(4, 1fr); }
.sx-pin-track::before, .sx-pin-track-fill { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 17px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .16); }
.sx-pin-track-fill { right: auto; width: calc(75% * var(--fill, 0)); background: linear-gradient(90deg, var(--sx-blue), var(--sx-orange)); transition: width .5s var(--sx-ease); box-shadow: 0 0 16px rgb(var(--sx-orange-rgb) / .6); }
.sx-pin-track li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255, 255, 255, .5); font-size: .86rem; font-weight: 600; text-align: center; transition: color .4s; }
.sx-pin-track b { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #0A2152; border: 2px solid rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .7); font-weight: 800; transition: background-color .4s, border-color .4s, transform .5s cubic-bezier(.34, 1.7, .64, 1), box-shadow .4s; }
.sx-pin-track li.is-on { color: #fff; }
.sx-pin-track li.is-on b { background: var(--sx-blue); border-color: #fff; color: #fff; }
.sx-pin-track li.is-cur b { background: var(--sx-orange); transform: scale(1.18); box-shadow: 0 0 0 6px rgb(var(--sx-orange-rgb) / .25), 0 0 26px rgb(var(--sx-orange-rgb) / .7); }
.sx-pin-cards { list-style: none; margin: 0 auto; padding: 0; max-width: 1220px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.sx-pin-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .8); transition: opacity .6s var(--sx-ease), transform .8s cubic-bezier(.34, 1.45, .64, 1), box-shadow .5s; }
.sx-pin-photo { margin: 0; height: clamp(90px, 17vh, 180px); overflow: hidden; }
.sx-pin-photo img { width: 100%; height: 100%; object-fit: cover; }
.sx-pin-body { padding: 16px 18px 18px; }
.sx-pin-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sx-pin-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--sx-blue); color: #fff; flex: none; }
.sx-pin-ico svg { width: 20px; height: 20px; fill: currentColor; }
.sx-pin-num { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sx-orange); }
.sx-pin-card h3 { margin: 0 0 6px; color: var(--sx-navy); font-size: 1.06rem; font-weight: 700; line-height: 1.3; }
.sx-pin-card p { margin: 0; color: var(--sx-text); font-size: .9rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.sx-js .sx-pin--steps .sx-pin-card { opacity: 0; transform: translateY(70px) scale(.85); }
.sx-js .sx-pin--steps .sx-pin-card.is-on { opacity: .55; transform: scale(.96); }
.sx-js .sx-pin--steps .sx-pin-card.is-cur { opacity: 1; transform: translateY(-12px) scale(1.04); box-shadow: 0 0 0 3px var(--sx-orange), 0 40px 70px -30px rgb(var(--sx-orange-rgb) / .55); }
.sx-js .sx-pin--steps.is-all .sx-pin-card { opacity: 1; transform: none; box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .8); }
.sx-js .sx-pin--steps .sx-pin-card.is-cur .sx-pin-ico { animation: sx-ico-pop .7s cubic-bezier(.34, 1.8, .64, 1); }
@keyframes sx-ico-pop { 0% { transform: scale(.3) rotate(-30deg); } 100% { transform: none; } }
@media (max-height: 760px) { .sx-pin--steps .sx-sub { display: none; } .sx-pin-card p { -webkit-line-clamp: 3; } }
@media (max-width: 1000px) and (min-width: 761px) { .sx-pin-cards { grid-template-columns: repeat(2, 1fr); } .sx-pin-photo { height: 12vh; } .sx-pin-card p { -webkit-line-clamp: 3; } }
@media (max-width: 760px) {
  .sx-pin--steps .sx-sub { display: none; }
  .sx-pin-track span { display: none; }
  .sx-js .sx-pin--steps .sx-pin-cards { position: relative; height: min(60vh, 520px); display: block; }
  .sx-js .sx-pin--steps .sx-pin-card { position: absolute; inset: 0; transform: translateY(40%) scale(.9); }
  .sx-js .sx-pin--steps .sx-pin-card.is-on { opacity: .35; transform: translateY(-5%) scale(.9); }
  .sx-js .sx-pin--steps .sx-pin-card.is-cur { opacity: 1; transform: none; box-shadow: 0 0 0 3px var(--sx-orange), 0 30px 60px -30px rgba(0, 0, 0, .8); }
  .sx-pin-photo { height: 24vh; }
  .sx-js .sx-pin--steps.is-all .sx-pin-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; height: auto; }
  .sx-js .sx-pin--steps.is-all .sx-pin-card { position: relative; inset: auto; }
  .sx-js .sx-pin--steps.is-all .sx-pin-photo { height: 11vh; }
  .sx-js .sx-pin--steps.is-all .sx-pin-card p { display: none; }
  .sx-js .sx-pin--steps.is-all .sx-pin-body { padding: 12px; }
  .sx-js .sx-pin--steps.is-all .sx-pin-card h3 { font-size: .9rem; margin: 0; }
  .sx-js .sx-pin--steps.is-all .sx-pin-meta { margin-bottom: 6px; }
  .sx-js .sx-pin--steps.is-all .sx-pin-ico { width: 30px; height: 30px; }
}

/* --- Clean sweep across a faint house --- */
.sx-pin--sweep { background: linear-gradient(180deg, #EAF2FD 0%, #F6F9FE 100%); }
.sx-sweep-scene { position: absolute; inset: 0; z-index: 0; --wx: calc(var(--p, 0) * 116 - 8); }
.sx-sweep-house { position: absolute; left: 50%; bottom: 0; width: min(1400px, 130%); transform: translateX(-50%); color: var(--sx-blue); opacity: .16; }
.sx-sweep-grime { position: absolute; inset: 0; clip-path: inset(0 0 0 calc(var(--wx) * 1%)); background:
  radial-gradient(140px 90px at 12% 70%, rgba(92, 70, 38, .22), transparent 70%),
  radial-gradient(200px 120px at 34% 30%, rgba(80, 68, 44, .18), transparent 70%),
  radial-gradient(160px 110px at 58% 80%, rgba(98, 76, 40, .22), transparent 70%),
  radial-gradient(220px 140px at 78% 40%, rgba(80, 66, 40, .2), transparent 70%),
  radial-gradient(160px 100px at 92% 76%, rgba(92, 70, 38, .22), transparent 70%),
  radial-gradient(rgba(70, 56, 30, .16) 1.3px, transparent 1.8px) 0 0 / 14px 14px,
  linear-gradient(180deg, rgba(120, 104, 74, .22), rgba(90, 76, 50, .3)); }
.sx-sweep-wand { position: absolute; top: 0; bottom: 0; left: calc(var(--wx) * 1%); width: 120px; transform: translateX(-60%); pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95) 55%, rgba(120, 190, 255, .7) 62%, transparent); filter: blur(1px); }
.sx-sweep-wand span { position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 255, 255, .95) 1.5px, transparent 2.5px) 0 0 / 16px 22px; opacity: .8; animation: sx-spray .45s linear infinite; -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%, transparent); mask-image: linear-gradient(90deg, transparent, #000 50%, transparent); }
@keyframes sx-spray { to { background-position: -8px 44px; } }
.sx-pin--sweep.is-done .sx-sweep-wand { opacity: 0; transition: opacity .5s; }
.sx-sweep-tiles .sx-ptile--icon { min-height: clamp(220px, 34vh, 330px); transition: filter .7s var(--sx-ease), transform .5s var(--sx-ease), box-shadow .5s var(--sx-ease); }
.sx-js .sx-sweep-tiles .sx-ptile--icon:not(.is-clean) { filter: grayscale(.9) sepia(.45) brightness(.72) contrast(.9); }
.sx-js .sx-sweep-tiles .sx-ptile--icon:not(.is-clean) .sx-ptile-ico { transform: scale(.85); }
.sx-sweep-tiles .sx-ptile--icon.is-clean { animation: sx-clean-pop .7s cubic-bezier(.34, 1.6, .64, 1); }
@keyframes sx-clean-pop { 0% { transform: scale(.96); } 60% { transform: scale(1.04); } 100% { transform: none; } }
.sx-sweep-tiles .sx-ptile--icon.is-clean::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 48%, transparent 62%); transform: translateX(-120%); animation: sx-ptile-shine 1.1s var(--sx-ease) forwards; }
.sx-pin--sweep .sx-center { margin-top: clamp(16px, 3vh, 36px); }
@media (max-height: 760px) { .sx-sweep-tiles .sx-ptile-desc { display: none; } }

@media (prefers-reduced-motion: reduce) { .sx-sweep-wand span { animation: none; } }
.sx-pin-cards { position: relative; }
.sx-pin-hint { display: none; }
.sx-js .sx-pin-hint { display: flex; position: absolute; left: 0; right: 0; margin-top: 70px; justify-content: center; align-items: center; gap: 8px; color: rgba(255, 255, 255, .75); font-weight: 600; font-size: .95rem; transition: opacity .4s; pointer-events: none; }
.sx-pin-hint svg { width: 18px; height: 18px; animation: sx-hint-bob 1.4s ease-in-out infinite; }
@keyframes sx-hint-bob { 50% { transform: translateY(5px); } }
.sx-pin.has-on .sx-pin-hint { opacity: 0; }
@media (max-width: 760px) {
  .sx-js .sx-pin--steps .sx-pin-card { inset: 0 0 auto 0; }
  .sx-js .sx-pin--steps.is-all .sx-pin-card.is-on { opacity: 1; transform: none; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .8); }
  .sx-js .sx-pin-sticky { padding-top: 84px; }
  .sx-pin--sweep .sx-title { font-size: 1.7rem; }
  .sx-sweep-tiles { gap: 10px; }
  .sx-sweep-tiles .sx-ptile--icon { min-height: 0; aspect-ratio: auto; height: clamp(150px, 26vh, 210px); padding: 16px; }
  .sx-sweep-tiles .sx-ptile-desc { display: none; }
  .sx-sweep-tiles .sx-ptile-ico { width: 52px; height: 52px; left: 16px; top: 16px; border-radius: 16px; }
  .sx-sweep-tiles .sx-ptile-num { font-size: 3.4rem; }
  .sx-sweep-tiles .sx-ptile-label { position: static; font-size: 1rem; }
}

/* --- Gutter: water fills the trough as you scroll, flushing leaves out --- */
.sx-trough-leaves { position: absolute; left: 12px; right: 12px; top: 2px; height: 16px; pointer-events: none; }
.sx-trough-leaves i { position: absolute; left: var(--x); top: 0; width: 16px; height: 11px; border-radius: 0 12px 0 12px; background: linear-gradient(135deg, #B7791F, #8A5A12); transform: rotate(-18deg); transition: transform 1s cubic-bezier(.5, 0, .75, 0), opacity .9s; }
.sx-trough-leaves i:nth-child(2n) { background: linear-gradient(135deg, #A3A83A, #6E7520); width: 13px; transform: rotate(24deg); }
.sx-trough-leaves i.is-gone { transform: translate(140px, -10px) rotate(200deg); opacity: 0; }
@media (min-width: 1001px) {
  .sx-js .sx-pin--flow { height: 300vh; }
  .sx-pin--flow .sx-pin-sticky { padding-top: 110px; }
  .sx-js .sx-pin--flow .sx-trough-water { right: auto; width: calc(min(1, var(--p, 0) * 1.18) * (100% - 24px)); transition: width .15s linear; }
  .sx-js .sx-pin--flow:not(.is-done) .sx-trough-stream { opacity: 0; animation-play-state: paused; }
  .sx-js .sx-pin--flow .sx-trough-stream { transition: opacity .5s; }
  .sx-js .sx-pin--flow .sx-trough-step .sx-trough-card { transform-origin: 50% -44px; }
  .sx-js .sx-pin--flow .sx-trough-step:not(.is-on) .sx-trough-card { opacity: 0; transform: translateY(-30px) rotate(-12deg); }
  .sx-js .sx-pin--flow .sx-trough-step:not(.is-on) .sx-trough-hanger { transform: translateX(-50%) scaleY(.2); transform-origin: top; }
  .sx-js .sx-pin--flow .sx-trough-hanger { transition: transform .5s var(--sx-ease); }
  .sx-js .sx-pin--flow .sx-trough-step.is-on .sx-trough-card { animation: sx-swing 1.1s cubic-bezier(.3, .8, .4, 1) both; }
  .sx-js .sx-pin--flow .sx-trough-step.is-on:hover .sx-trough-card { animation: none; }
}
@keyframes sx-swing { 0% { opacity: 0; transform: translateY(-30px) rotate(-12deg); } 35% { opacity: 1; transform: rotate(7deg); } 60% { transform: rotate(-3.5deg); } 80% { transform: rotate(1.5deg); } 100% { opacity: 1; transform: none; } }
@media (max-width: 1000px) {
  .sx-js .sx-pin--flow .sx-pin-sticky { position: relative; height: auto; padding: 80px 0; }
  .sx-js .sx-trough-step:not(.is-live) .sx-trough-card { opacity: 0; transform: translateX(-24px); }
  .sx-js .sx-trough-step .sx-trough-card { transition: opacity .6s var(--sx-ease), transform .8s cubic-bezier(.34, 1.4, .64, 1); }
}
.sx-js .sx-pin--flow .sx-trough-water { background: linear-gradient(90deg, rgba(15, 163, 224, .35), rgba(15, 163, 224, .75)); box-shadow: 0 0 10px rgba(15, 163, 224, .5); }

/* --- Solar: a real-looking panel that gets inspected, brushed, rinsed and checked as you scroll --- */
.sx-pin--solar { background: radial-gradient(1000px 600px at 85% 0%, rgba(255, 196, 0, .16), transparent 60%), linear-gradient(180deg, #0B2A66 0%, #04143C 100%); }
.sx-js .sx-pin--solar { height: 380vh; }
.sx-pin--solar { --s0: clamp(0, var(--p, 0) * 4, 1); --s1: clamp(0, (var(--p, 0) - .25) * 4, 1); --s2: clamp(0, (var(--p, 0) - .5) * 4, 1); --s3: clamp(0, (var(--p, 0) - .75) * 4, 1); }
.sx-solar-sun { position: absolute; right: 6%; top: 12%; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, #FFE58A 0%, #FFC21A 45%, rgba(255, 194, 26, 0) 72%); filter: blur(2px); opacity: calc(.45 + var(--s3) * .55); transform: scale(calc(.9 + var(--s3) * .25)); pointer-events: none; }
.sx-solar { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: center; max-width: 1220px; margin: 0 auto; }
.sx-solar-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sx-solar-step { display: flex; gap: 16px; align-items: flex-start; padding: 14px 18px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); color: rgba(255, 255, 255, .55); transition: background-color .4s, border-color .4s, color .4s, transform .5s var(--sx-ease); }
.sx-solar-step h3 { margin: 2px 0 0; color: inherit; font-size: 1.1rem; font-weight: 700; }
.sx-solar-step p { margin: 0; max-height: 0; overflow: hidden; opacity: 0; font-size: .92rem; line-height: 1.55; transition: max-height .5s var(--sx-ease), opacity .4s, margin .4s; }
.sx-solar-num { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.sx-solar-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: none; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .7); transition: background-color .4s, color .4s, transform .5s cubic-bezier(.34, 1.7, .64, 1); }
.sx-solar-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sx-solar-step.is-on { color: rgba(255, 255, 255, .85); }
.sx-solar-step.is-on .sx-solar-ico { background: rgba(52, 195, 143, .2); color: #5BE0A8; }
.sx-solar-step.is-cur { color: #fff; background: rgba(255, 255, 255, .09); border-color: rgba(255, 194, 26, .55); transform: translateX(8px); box-shadow: 0 20px 40px -28px rgba(255, 194, 26, .8); }
.sx-solar-step.is-cur .sx-solar-ico { background: linear-gradient(135deg, #FFC21A, #F86A05); color: #fff; transform: scale(1.08); }
.sx-solar-step.is-cur .sx-solar-num { color: #FFC21A; }
.sx-solar-step.is-cur p { max-height: 120px; opacity: 1; margin-top: 6px; color: rgba(255, 255, 255, .8); }
.sx-solar-stage { position: relative; perspective: 1400px; padding-bottom: 40px; }
.sx-solar-panel { position: relative; aspect-ratio: 6 / 4; border-radius: 10px; padding: 10px; background: linear-gradient(135deg, #D9E0EA, #9AA7B8 60%, #C7D0DC); box-shadow: 0 50px 80px -40px rgba(0, 0, 0, .9), inset 0 0 0 2px rgba(255, 255, 255, .5); transform: rotateX(24deg) rotateZ(-3deg); transform-origin: 50% 80%; overflow: hidden; }
.sx-solar-cells { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); gap: 4px; background: #BFC8D4; }
.sx-solar-cells i { position: relative; background: radial-gradient(120% 90% at 30% 20%, #2A62C9 0%, #123A86 45%, #0A2458 100%); overflow: hidden; }
.sx-solar-cells i::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 32%, rgba(210, 225, 255, .35) 33%, transparent 34%, transparent 65%, rgba(210, 225, 255, .35) 66%, transparent 67%), repeating-linear-gradient(0deg, transparent 0 7px, rgba(160, 190, 255, .12) 7px 8px); }
.sx-solar-dirt, .sx-solar-spots, .sx-solar-scan, .sx-solar-brush, .sx-solar-rain, .sx-solar-glare { position: absolute; inset: 10px; pointer-events: none; }
.sx-solar-dirt { background: radial-gradient(60% 50% at 30% 40%, rgba(196, 168, 110, .75), transparent 70%), radial-gradient(50% 60% at 75% 65%, rgba(180, 150, 96, .7), transparent 70%), radial-gradient(rgba(150, 120, 70, .5) 1.2px, transparent 1.8px) 0 0 / 9px 9px, linear-gradient(180deg, rgba(200, 176, 120, .45), rgba(160, 130, 80, .55)); opacity: calc(1 - var(--s1) * .7 - var(--s2) * .3); }
.sx-solar-spots { background: radial-gradient(10px 8px at 22% 30%, rgba(255, 255, 255, .95), transparent 70%), radial-gradient(8px 7px at 64% 22%, rgba(255, 255, 255, .9), transparent 70%), radial-gradient(12px 9px at 80% 70%, rgba(255, 255, 255, .92), transparent 70%), radial-gradient(9px 8px at 40% 76%, rgba(255, 255, 255, .9), transparent 70%), radial-gradient(22px 16px at 55% 48%, rgba(120, 150, 40, .6), transparent 70%); opacity: calc(1 - var(--s1)); }
.sx-solar-scan { inset: 10px; background: linear-gradient(180deg, transparent calc(var(--s0) * 100% - 8%), rgba(90, 255, 190, .0) calc(var(--s0) * 100% - 8%), rgba(90, 255, 190, .55) calc(var(--s0) * 100%), transparent calc(var(--s0) * 100% + .5%)); opacity: 0; transition: opacity .3s; }
.sx-pin--solar[data-cur="0"] .sx-solar-scan { opacity: 1; }
.sx-solar-brush { inset: auto; top: 0; bottom: 0; left: calc(var(--s1) * 108% - 12%); width: 13%; opacity: 0; transition: opacity .3s; }
.sx-solar-brush b { position: absolute; inset: 0; border-radius: 10px; background: linear-gradient(90deg, #F86A05, #FF9A4D); box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .6); }
.sx-solar-brush b::after { content: ''; position: absolute; right: -10px; top: 4%; bottom: 4%; width: 12px; background: repeating-linear-gradient(0deg, #EFE7D8 0 2px, transparent 2px 4px); border-radius: 2px; }
.sx-pin--solar[data-cur="1"] .sx-solar-brush { opacity: 1; }
.sx-solar-rain { background: radial-gradient(ellipse 1.6px 6px, rgba(210, 235, 255, .95), transparent 70%) 0 0 / 18px 26px, linear-gradient(180deg, rgba(120, 200, 255, .22), rgba(120, 200, 255, .12)); opacity: 0; transition: opacity .4s; animation: sx-rain .5s linear infinite; }
@keyframes sx-rain { to { background-position: -4px 52px, 0 0; } }
.sx-pin--solar[data-cur="2"] .sx-solar-rain { opacity: 1; }
.sx-solar-glare { background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 47%, transparent 58%); background-size: 250% 100%; background-position: calc(160% - var(--s3) * 180%) 0; opacity: calc(var(--s3) * 1.4); }
.sx-solar-legs { position: absolute; left: 22%; right: 22%; bottom: 0; height: 60px; background: linear-gradient(90deg, transparent 8%, #8E9BAE 8%, #8E9BAE 11%, transparent 11%, transparent 89%, #8E9BAE 89%, #8E9BAE 92%, transparent 92%); opacity: .7; }
.sx-solar-meter { position: absolute; right: 0; bottom: -6px; display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 2px 12px; padding: 12px 16px; border-radius: 14px; background: rgba(4, 20, 60, .85); border: 1px solid rgba(255, 255, 255, .15); color: rgba(255, 255, 255, .7); font-size: .8rem; font-weight: 600; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8); min-width: 190px; }
.sx-solar-meter b { color: #fff; font-size: 1.4rem; justify-self: end; }
.sx-solar-meter i { grid-column: 1 / -1; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.sx-solar-meter em { display: block; height: 100%; width: calc(62% + var(--s1) * 14% + var(--s2) * 12% + var(--s3) * 12%); border-radius: inherit; background: linear-gradient(90deg, #F86A05, #FFC21A, #5BE0A8); }
.sx-pin--solar.is-done .sx-solar-meter { border-color: rgba(91, 224, 168, .6); }
.sx-pin--solar .sx-center { margin-top: clamp(14px, 3vh, 34px); }
@media (max-height: 780px) { .sx-solar-step.is-cur p { max-height: 60px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; } }
@media (max-width: 900px) {
  .sx-solar { grid-template-columns: 1fr; gap: 16px; }
  .sx-solar-stage { order: -1; max-width: 420px; width: 88%; margin: 0 auto; padding-bottom: 26px; }
  .sx-solar-step:not(.is-cur) { display: none; }
  .sx-solar-step.is-cur { transform: none; }
  .sx-solar-steps { min-height: 150px; }
  .sx-solar-meter { right: -6%; min-width: 150px; padding: 8px 12px; }
  .sx-solar-meter b { font-size: 1.1rem; }
  .sx-solar-sun { width: 90px; height: 90px; top: 9%; }
  .sx-pin--solar .sx-title { font-size: 1.6rem; }
}
.sx-js .sx-pin--solar:not([data-cur]) .sx-solar-step:first-child { color: #fff; }
.sx-svc #process.sx-pin--solar { background: radial-gradient(1000px 600px at 85% 0%, rgba(255, 196, 0, .16), transparent 60%), linear-gradient(180deg, #0B2A66 0%, #04143C 100%); border: 0; }
.sx-svc #process.sx-pin--solar::before { content: none; }

/* --- Holiday lighting page: strings of lights across the page --- */
.sx-lights { position: absolute; left: 0; right: 0; top: 0; height: clamp(60px, 7vw, 110px); z-index: 3; pointer-events: none; }
.sx-lights svg { width: 100%; height: 100%; overflow: visible; }
.sx-lights .g { filter: drop-shadow(0 0 5px var(--c)) drop-shadow(0 0 12px var(--c)); animation: sx-twinkle 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s); }
@keyframes sx-twinkle { 0%, 100% { opacity: 1; } 45% { opacity: .45; } 55% { opacity: .95; } }
.sx-final .sx-lights { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .sx-lights .g { animation: none; } }
@media (max-width: 700px) { .sx-lights { height: 54px; } .sx-lights .g { filter: drop-shadow(0 0 4px var(--c)); } }

/* --- Commercial: skyline where each building gets cleaned in turn --- */
.sx-svc #process.sx-pin--city { background: linear-gradient(180deg, #06183F 0%, #0B2F74 55%, #1B4FA8 100%); border: 0; }
.sx-svc #process.sx-pin--city::before { content: none; }
.sx-js .sx-pin--city { height: 380vh; }
.sx-city-stars { position: absolute; inset: 0 0 40% 0; background: radial-gradient(rgba(255, 255, 255, .7) 1px, transparent 1.6px) 0 0 / 90px 70px, radial-gradient(rgba(255, 255, 255, .4) 1px, transparent 1.6px) 40px 30px / 130px 90px; opacity: .5; pointer-events: none; }
.sx-city { display: grid; grid-template-columns: 1.35fr 1fr; gap: 44px; align-items: end; max-width: 1220px; margin: 0 auto; }
.sx-city-skyline { position: relative; height: clamp(260px, 48vh, 460px); display: flex; align-items: flex-end; gap: 3%; padding: 0 3%; }
.sx-city-ground { position: absolute; left: -4%; right: -4%; bottom: -10px; height: 12px; border-radius: 6px; background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .25), rgba(255, 255, 255, .05)); }
.sx-bldg { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.sx-bldg--1 { flex: 1; } .sx-bldg--2 { flex: 1.25; } .sx-bldg--3 { flex: .9; } .sx-bldg--4 { flex: 1.35; }
.sx-bldg-body { position: relative; height: var(--h); border-radius: 6px 6px 0 0; background: linear-gradient(90deg, #1C2C4E, #26395F 50%, #1A2847); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06), 0 30px 50px -30px rgba(0, 0, 0, .9); overflow: hidden; transform-origin: bottom; transition: transform 1s cubic-bezier(.34, 1.3, .64, 1), box-shadow .5s; }
.sx-bldg--1 .sx-bldg-body { --h: 58%; } .sx-bldg--2 .sx-bldg-body { --h: 88%; border-radius: 40px 40px 0 0; } .sx-bldg--3 .sx-bldg-body { --h: 70%; } .sx-bldg--4 .sx-bldg-body { --h: 100%; border-radius: 4px 60px 0 0; }
.sx-bldg-win, .sx-bldg-dirt { position: absolute; inset: 14px 12px 0; }
.sx-bldg-win { background: linear-gradient(90deg, #26395F 0 3px, transparent 3px) 0 0 / 22px 100%, linear-gradient(180deg, #26395F 0 4px, transparent 4px) 0 0 / 100% 26px, linear-gradient(160deg, #BFE3FF 0%, #6FB5FF 35%, #2F7BE8 60%, #9CD2FF 100%); }
.sx-bldg-win::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .7) 50%, transparent 60%); background-size: 260% 100%; background-position: 160% 0; }
.sx-bldg.is-clean .sx-bldg-win::after { animation: sx-glint 1.4s var(--sx-ease) forwards; }
@keyframes sx-glint { to { background-position: -60% 0; } }
.sx-bldg-dirt { background: linear-gradient(90deg, #1C2C4E 0 3px, transparent 3px) 0 0 / 22px 100%, linear-gradient(180deg, #1C2C4E 0 4px, transparent 4px) 0 0 / 100% 26px, radial-gradient(rgba(60, 48, 30, .5) 1px, transparent 1.6px) 0 0 / 7px 7px, linear-gradient(180deg, #4A4F5C, #3A3E48); transition: clip-path .1s linear; clip-path: inset(var(--wash, 0%) 0 0 0); }
.sx-bldg.is-clean .sx-bldg-dirt { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--sx-ease); }
.sx-bldg-rig { position: absolute; left: 10%; right: 10%; top: var(--wash, 0%); height: 10px; margin-top: -10px; border-radius: 3px; background: var(--sx-orange); box-shadow: 0 6px 14px -4px rgb(var(--sx-orange-rgb) / .8); opacity: 0; transition: opacity .3s; }
.sx-bldg-rig i { position: absolute; left: 8px; right: 8px; bottom: 100%; height: 400px; background: linear-gradient(90deg, rgba(255, 255, 255, .5) 0 1px, transparent 1px calc(100% - 1px), rgba(255, 255, 255, .5) calc(100% - 1px)); }
.sx-bldg.is-cur .sx-bldg-rig { opacity: 1; }
.sx-js .sx-pin--city .sx-bldg:not(.is-on) .sx-bldg-body { transform: scaleY(.18); box-shadow: none; }
.sx-bldg.is-cur .sx-bldg-body { box-shadow: inset 0 0 0 2px rgb(var(--sx-orange-rgb) / .9), 0 0 40px -6px rgb(var(--sx-orange-rgb) / .6); }
.sx-bldg-tag { position: absolute; left: 50%; bottom: -44px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: .8rem; font-weight: 700; color: rgba(255, 255, 255, .55); transition: color .4s; }
.sx-bldg-tag b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: .72rem; }
.sx-bldg.is-on .sx-bldg-tag { color: #fff; }
.sx-bldg.is-clean .sx-bldg-tag b { background: #34C38F; }
.sx-bldg.is-cur .sx-bldg-tag b { background: var(--sx-orange); }
.sx-city-caps { position: relative; min-height: 230px; margin-bottom: 20px; }
.sx-city-cap { position: absolute; inset: auto 0 0 0; display: flex; gap: 16px; padding: 26px 24px; border-radius: 22px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transform: translateY(24px); transition: opacity .5s var(--sx-ease), transform .6s var(--sx-ease); }
.sx-city-cap.is-cur { opacity: 1; transform: none; }
.sx-no-js .sx-city-cap, html:not(.sx-js) .sx-city-cap { position: relative; opacity: 1; transform: none; margin-bottom: 10px; }
.sx-city-ico { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; flex: none; background: linear-gradient(135deg, var(--sx-orange), #FFB066); color: #fff; box-shadow: 0 14px 26px -12px rgba(248, 106, 5, .9); }
.sx-city-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sx-city-num { font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #FFB27A; }
.sx-city-cap h3 { margin: 4px 0 8px; color: #fff; font-size: 1.35rem; font-weight: 700; }
.sx-city-cap p { margin: 0; color: rgba(255, 255, 255, .8); line-height: 1.6; }
.sx-pin--city .sx-center { margin-top: clamp(40px, 6vh, 64px); }
@media (max-width: 900px) {
  .sx-city { grid-template-columns: 1fr; gap: 56px; }
  .sx-city-skyline { height: 30vh; }
  .sx-bldg-tag { font-size: 0; gap: 0; }
  .sx-city-caps { min-height: 190px; margin: 0; }
  .sx-city-cap { padding: 18px; }
  .sx-city-cap h3 { font-size: 1.1rem; }
  .sx-city-cap p { font-size: .9rem; }
  .sx-pin--city .sx-title { font-size: 1.6rem; }
  .sx-pin--city .sx-eyebrow--under { display: none; }
  .sx-pin--city .sx-center { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) { .sx-city-cap { position: relative; opacity: 1; transform: none; margin-bottom: 10px; } .sx-city-caps { min-height: 0; } }

/* ==========================================================
   QUOTE FORM POLISH (header, even cards, spacing, done screen)
   ========================================================== */
/* Header: progress centered in the blue bar, bigger phone + exit */
body.qp { position: relative; }
body.qp .qp-brand { min-height: 84px; padding-right: 170px; }
body.qp .qp-brand-phone { padding: 12px 22px; font-size: 1.08rem; font-weight: 700; letter-spacing: .01em; box-shadow: 0 10px 22px -12px rgba(4, 99, 238, .9); }
body.qp .qp-brand-phone svg { width: 18px; height: 18px; }
body.qp .qp-close-float { top: calc(18px + env(safe-area-inset-top, 0px)); right: 24px; width: auto; height: 48px; padding: 0 20px 0 16px; gap: 8px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 1rem; font-weight: 700; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
body.qp .qp-close-float svg { width: 20px; height: 20px; }
body.qp .qp-close-float .qp-close-label { display: inline; }
body.qp .qp-close-float:hover { transform: none; background: var(--sx-orange); box-shadow: none; }
@media (min-width: 900px) {
  body.qp .qp-progress-bar { position: absolute; z-index: 5; top: calc(39px + env(safe-area-inset-top, 0px)); left: 50%; width: min(520px, 38vw); transform: translateX(-50%); padding: 0; border: 0; background: none; }
  body.qp .qp-progress-bar .wizard-step-dots { max-width: none; }
  body.qp .qp-progress-bar .step-dot { height: 7px; border-radius: 7px; }
}
@media (max-width: 899px) {
  body.qp .qp-brand { padding-right: 76px; min-height: 0; }
  body.qp .qp-close-float { width: 48px; height: 48px; padding: 0; justify-content: center; }
  body.qp .qp-close-float .qp-close-label { display: none; }
  body.qp .qp-progress-bar { padding: 2px 18px 14px; }
}
@media (max-width: 760px) {
  body.qp .qp-brand-phone { padding: 11px 13px; font-size: 0; }
  body.qp .qp-close-float { top: calc(12px + env(safe-area-inset-top, 0px)); right: 14px; width: 46px; height: 46px; }
}

/* Location / property cards: identical size, aligned, smooth hover */
body.qp .qp-card-row { align-items: stretch; }
body.qp .qp-sel-card { justify-content: flex-start; will-change: transform; transition: transform .35s var(--sx-ease), box-shadow .35s var(--sx-ease), border-color .2s; }
body.qp .qp-sel-card:hover:not(.selected) { transform: translateY(-4px); }
body.qp .qp-sel-card.selected { transform: none; }
body.qp .qp-loc-badge--alt { background: #FFF1E6; color: var(--sx-orange-600); }
body.qp .qp-sel-card[data-location="kearney"].selected .qp-loc-badge--alt { background: var(--sx-blue); color: #fff; }
@media (max-width: 760px) { body.qp .qp-sel-card { min-height: 280px; } }

/* Service grid: every box the same size, rows centered */
body.qp .qp-img-svc-grid { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 1000px; margin-inline: auto; }
body.qp .qp-img-svc-card, body.qp .qp-img-svc-card--large, body.qp .qp-img-svc-card--wide { flex: 0 0 calc((100% - 48px) / 4); height: 210px; grid-column: auto; }
body.qp .qp-img-svc-card .qp-img-svc-name { font-size: 1.02rem; line-height: 1.25; }
body.qp .qp-img-svc-grid.service-selected .qp-img-svc-card.selected { flex: 0 1 620px; max-width: 620px; height: 280px; }
@media (max-width: 900px) { body.qp .qp-img-svc-card, body.qp .qp-img-svc-card--large, body.qp .qp-img-svc-card--wide { flex-basis: calc((100% - 16px) / 2); height: 170px; } }
@media (max-width: 480px) { body.qp .qp-img-svc-grid { gap: 10px; } body.qp .qp-img-svc-card, body.qp .qp-img-svc-card--large, body.qp .qp-img-svc-card--wide { flex-basis: calc((100% - 10px) / 2); height: 140px; } body.qp .qp-img-svc-card .qp-img-svc-name { font-size: .9rem; } }

/* Plan step: roomier on desktop, easy-to-read selection */
body.qp .qp-plan-svc-summary { margin: 6px auto 34px; padding: 14px 26px 14px 14px; font-size: 1.15rem; font-weight: 600; background: #fff; border-color: #CFE0FA; }
body.qp .qp-plan-svc-summary strong { font-size: 1.05rem; margin-right: 6px; }
@media (min-width: 1000px) {
  body.qp #wizard-step-5 { max-width: 1180px; }
  body.qp .qp-plan-grid { gap: 40px; max-width: 1160px; }
  body.qp .qp-plan-card { padding-block: 40px 36px; }
  body.qp .qp-plan-card--custom { margin-top: 26px; }
  body.qp .qp-plan-onetime-note { margin-top: 26px; }
}

/* Back / Next sit right under each step */
body.qp .qp-nav, body.qp .qp-nav[style] { margin-top: 26px; }
body.qp .qp-main { padding-bottom: 60px; }

/* Done screen */
.qp-done-next li { align-items: center; gap: 14px; padding: 16px 16px; }
.qp-done-next li > span.qp-done-step { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--sx-blue), #3F8BFF); box-shadow: 0 10px 20px -10px rgba(4, 99, 238, .8); }
.qp-done-next li:first-child > span.qp-done-step { background: linear-gradient(135deg, var(--sx-orange), #FFA45C); box-shadow: 0 10px 20px -10px rgb(var(--sx-orange-rgb) / .8); }
.qp-done-next li:last-child > span.qp-done-step { background: linear-gradient(135deg, #0A2152, #1B4FA8); }
.qp-done-step svg { width: 24px; height: 24px; }
.qp-done-next em { display: block; font-style: normal; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sx-orange); margin-bottom: 2px; }
.qp-done-next b { font-size: 1rem; }
.qp-done-card h3 { font-size: 1.3rem; margin-bottom: 16px; }
body.qp .qp-done-summary { font-size: 1.08rem; }
.qp-done-row { gap: 16px; padding: 15px 0; align-items: center; }
.qp-done-ico { width: 46px; height: 46px; border-radius: 14px; }
.qp-done-ico svg { width: 23px; height: 23px; fill: none; }
.qp-done-row small { font-size: .78rem; }
.qp-done-row > div > div { font-size: 1.1rem; font-weight: 600; }
.qp-done-row--state .qp-done-ico { width: 64px; background: linear-gradient(180deg, #EEF5FF, #DDEAFF); }
.qp-done-row--state .qp-done-ico svg { width: 50px; height: 50px; }
.qp-done-state { display: block; margin-top: 2px; font-size: .85rem; font-weight: 500; color: var(--sx-text); }
.qp-done-chip { font-size: .95rem; }
.qp-done-save-card { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 22px; background: linear-gradient(135deg, #0A2152, #04143C); color: #fff; box-shadow: 0 24px 50px -34px rgba(4, 20, 60, .8); }
.qp-done-save-ico { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; flex: none; background: rgba(255, 255, 255, .1); color: #fff; }
.qp-done-save-ico svg { width: 26px; height: 26px; }
.qp-done-save-card > div { flex: 1; min-width: 0; }
.qp-done-save-card b { display: block; font-size: 1.1rem; }
.qp-done-save-card small { display: block; margin-top: 3px; color: rgba(255, 255, 255, .72); font-size: .88rem; line-height: 1.45; }
.qp-done-save-btn { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 13px 20px; border-radius: 999px; background: var(--sx-orange); color: #fff; font-weight: 700; text-decoration: none; transition: background-color .25s, transform .3s var(--sx-ease); }
.qp-done-save-btn:hover { background: var(--sx-orange-600); color: #fff; transform: translateY(-2px); }
.qp-done-save-btn svg { width: 18px; height: 18px; }
@media (max-width: 640px) { .qp-done-save-card { flex-wrap: wrap; } .qp-done-save-btn { width: 100%; justify-content: center; } }
.qp-done-row--state .qp-done-ico { width: 72px; height: 52px; }
.qp-done-row--state .qp-done-ico svg.qp-ne { width: 58px; height: 28px; overflow: visible; }

/* Exterior / interior photo steps: rise in, photo wipes open, then number and text follow */
.sx-svc .sx-wsteps { perspective: 1400px; }
.sx-js .sx-svc .sx-wsteps .sx-wstep.sx-r:not(.sx-settled) { opacity: 0; transform: translate3d(0, 60px, 0) rotateX(18deg); transform-origin: 50% 100%; transition: opacity .6s var(--sx-ease), transform .9s cubic-bezier(.2, .9, .25, 1.1); transition-delay: var(--d, 0ms); }
.sx-js .sx-svc .sx-wsteps .sx-wstep.sx-r.is-in:not(.sx-settled) { opacity: 1; transform: none; }
.sx-js .sx-svc .sx-wsteps .sx-wstep.sx-r .sx-wstep-photo { clip-path: inset(100% 0 0 0 round 10px); transition: clip-path .9s cubic-bezier(.65, 0, .35, 1); transition-delay: calc(var(--d, 0ms) + 120ms); }
.sx-js .sx-svc .sx-wsteps .sx-wstep.sx-r.is-in .sx-wstep-photo { clip-path: inset(0 0 0 0 round 10px); }
.sx-js .sx-svc .sx-wsteps .sx-wstep.sx-r .sx-wstep-photo img { transform: scale(1.18); transition: transform 1.4s var(--sx-ease); transition-delay: calc(var(--d, 0ms) + 120ms); }
.sx-js .sx-svc .sx-wsteps .sx-wstep.sx-r.is-in .sx-wstep-photo img { transform: none; }
.sx-js .sx-svc .sx-wsteps .sx-wstep.sx-r.is-in:hover .sx-wstep-photo img { transform: scale(1.05); transition-delay: 0ms; }
.sx-js .sx-svc .sx-wsteps .sx-wstep.sx-r .sx-wstep-num { opacity: 0; transform: translateY(-10px) scale(.6); transition: opacity .4s, transform .6s cubic-bezier(.34, 1.8, .64, 1); transition-delay: calc(var(--d, 0ms) + 650ms); }
.sx-js .sx-svc .sx-wsteps .sx-wstep.sx-r.is-in .sx-wstep-num { opacity: 1; transform: none; }
.sx-js .sx-svc .sx-wsteps .sx-wstep.sx-r .sx-wstep-body > :not(.sx-wstep-rule) { opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .6s var(--sx-ease); transition-delay: calc(var(--d, 0ms) + 750ms); }
.sx-js .sx-svc .sx-wsteps .sx-wstep.sx-r.is-in .sx-wstep-body > :not(.sx-wstep-rule) { opacity: 1; transform: none; }

/* ===== Pinned scenes: work in every browser, never leave blank space =====
   overflow:clip isn't understood by older Safari, which then falls back to
   overflow:hidden and breaks sticky. Use visible (the sticky frame clips). */
.sx-section.sx-pin, .sx-section.sx-pin.sx-trough-section { overflow: visible !important; }
/* If a browser can't hold the section on screen, show it as a normal section */
.sx-js .sx-pin.sx-pin-off { height: auto !important; }
.sx-js .sx-pin.sx-pin-off .sx-pin-sticky { position: relative !important; height: auto !important; min-height: 0; padding: 110px 0 80px; }
.sx-js .sx-pin--steps.sx-pin-off .sx-pin-cards { position: static; height: auto !important; display: grid !important; }
.sx-js .sx-pin--steps.sx-pin-off .sx-pin-card { position: relative !important; inset: auto !important; opacity: 1 !important; transform: none !important; }
.sx-js .sx-pin.sx-pin-off .sx-pin-hint { display: none; }
@media (max-width: 760px) { .sx-js .sx-pin--steps.sx-pin-off .sx-pin-cards { grid-template-columns: 1fr; } }
.sx-js .sx-pin--city.sx-pin-off .sx-city-cap { position: relative; opacity: 1; transform: none; margin-bottom: 10px; }
.sx-js .sx-pin--city.sx-pin-off .sx-city-caps { min-height: 0; }
.sx-js .sx-pin--solar.sx-pin-off .sx-solar-step p { max-height: 120px; opacity: 1; margin-top: 6px; }
.sx-js .sx-pin--solar.sx-pin-off .sx-solar-step { display: flex !important; }

/* Power washing driveway section: faint house drawn behind the driveway */
.sx-slab-section > .sx-wrap { position: relative; z-index: 1; }
.sx-slab-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sx-slab-bg svg { position: absolute; left: 50%; bottom: -2%; width: min(1500px, 140%); transform: translateX(-50%); color: var(--sx-blue); opacity: .12; }

/* Reviews next to a navy pricing band get the light treatment so the two never blend */
.sx-svc #reviews.sx-reviews--light { background: radial-gradient(800px 360px at 90% 0%, rgba(4, 99, 238, .10), transparent 60%), linear-gradient(180deg, #EEF4FC, #F7FAFE); border-top: 1px solid #E1E8F2; border-bottom: 1px solid #E1E8F2; }
.sx-svc #reviews.sx-reviews--light .sx-eyebrow { color: var(--sx-blue); }
.sx-svc #reviews.sx-reviews--light .sx-title { color: var(--sx-navy); }
.sx-svc #reviews.sx-reviews--light .sx-rating { color: var(--sx-text); }
.sx-svc #reviews.sx-reviews--light .sx-rating b, .sx-svc #reviews.sx-reviews--light .sx-rating strong { color: var(--sx-navy); }
.sx-svc #reviews.sx-reviews--light .sx-btn--navy { background: var(--sx-navy); color: #fff; }
.sx-svc #reviews.sx-reviews--light .sx-review { border: 1px solid #E1E8F2; box-shadow: 0 20px 40px -30px rgba(4, 20, 60, .45); }

/* Service sidebar: real photo thumbnails instead of drawn icons */
.sx-svc .sx-side-thumb { width: 40px; height: 40px; border-radius: 11px; object-fit: cover; flex: none; box-shadow: 0 0 0 2px #fff, 0 6px 14px -8px rgba(4, 20, 60, .6); filter: saturate(.9); transition: transform .35s var(--sx-ease), box-shadow .3s, filter .3s; }
.sx-svc .sx-side nav a:hover .sx-side-thumb { transform: scale(1.06); filter: none; }
.sx-svc .sx-side nav a.is-active .sx-side-thumb { filter: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sx-blue), 0 8px 18px -8px rgba(4, 99, 238, .8); }

/* Quote box: a soft light sweeps across the whole card every few seconds */
.sx-svc .sx-side-cta::after { content: ''; position: absolute; inset: -20% -60%; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .28) 48%, rgba(255, 255, 255, .06) 54%, transparent 62%); transform: translateX(-60%); animation: sx-cta-sweep 4.2s var(--sx-ease) infinite; }
@keyframes sx-cta-sweep { 0%, 35% { transform: translateX(-60%); } 75%, 100% { transform: translateX(60%); } }
.sx-svc .sx-side-cta { animation: sx-cta-glow 4.2s ease-in-out infinite; }
@keyframes sx-cta-glow { 0%, 100% { box-shadow: 0 24px 44px -26px rgba(4, 99, 238, .9); } 55% { box-shadow: 0 24px 50px -20px rgba(4, 99, 238, 1), 0 0 0 4px rgba(91, 155, 255, .25); } }
@media (prefers-reduced-motion: reduce) { .sx-svc .sx-side-cta, .sx-svc .sx-side-cta::after { animation: none; } }

/* Service write-up: a branded card so it reads as a feature, not a wall of text */
.sx-svc #about-service .sx-article { position: relative; padding: 44px 44px 40px; border-radius: 26px; background: linear-gradient(180deg, #EEF5FF 0%, #FFFFFF 42%); border: 1px solid #DCE7F5; box-shadow: 0 30px 60px -44px rgba(4, 20, 60, .5); overflow: hidden; }
.sx-svc #about-service .sx-article::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--sx-blue), var(--sx-orange)); }
.sx-svc #about-service .sx-article > h2 { font-size: clamp(1.6rem, 2.6vw, 2.15rem); line-height: 1.15; margin-bottom: 18px; }
.sx-svc #about-service .sx-article > h2 + p { padding: 4px 0 4px 18px; border-left: 4px solid var(--sx-blue); color: var(--sx-navy); font-size: 1.14rem; font-weight: 500; line-height: 1.65; }
.sx-svc #about-service .sx-article p strong { color: var(--sx-blue); }
.sx-svc #about-service .sx-article > h3 { display: flex; align-items: center; gap: 10px; margin-top: 30px; }
.sx-svc #about-service .sx-article > h3::before { content: ''; width: 26px; height: 4px; border-radius: 4px; background: var(--sx-orange); flex: none; }
@media (max-width: 640px) { .sx-svc #about-service .sx-article { padding: 30px 20px 26px; border-radius: 20px; } }

/* ===== About page: branded bands instead of one long white page ===== */
.sx-aboutpg #story { background: radial-gradient(900px 500px at 100% 0%, rgba(4, 99, 238, .45), transparent 60%), radial-gradient(700px 400px at 0% 100%, rgba(248, 106, 5, .16), transparent 60%), var(--sx-navy); }
.sx-aboutpg #story .sx-title { color: #fff; }
.sx-aboutpg #story .sx-story-copy p { color: rgba(255, 255, 255, .82); }
.sx-aboutpg #story .sx-story-img { box-shadow: 0 0 0 6px rgba(255, 255, 255, .08), 0 40px 70px -30px rgba(0, 0, 0, .8); }
.sx-story-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.sx-story-chips span { padding: 10px 16px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .85); font-size: .92rem; }
.sx-story-chips b { color: #FFB27A; font-size: 1.15rem; margin-right: 4px; }
.sx-aboutpg #team { background: #fff; }
.sx-aboutpg #experience { background: linear-gradient(180deg, #FFF5EC 0%, #FFFFFF 100%); border-top: 1px solid #FBE3CF; border-bottom: 1px solid #F1F4F9; padding-block: 90px; }
.sx-aboutpg #experience .sx-article { position: relative; max-width: 980px; margin: 0 auto; padding: 44px 44px 36px; border-radius: 26px; background: #fff; border: 1px solid #F3DDCA; box-shadow: 0 30px 60px -44px rgb(var(--sx-orange-rgb) / .55); overflow: hidden; }
.sx-aboutpg #experience .sx-article::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--sx-orange), var(--sx-blue)); }
.sx-aboutpg #experience h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.sx-aboutpg #experience ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0 18px; }
.sx-aboutpg #experience ul li { padding: 16px 16px 16px 50px; border-radius: 14px; background: #FFF7F1; border: 1px solid #F8E2D1; line-height: 1.5; }
.sx-aboutpg #experience ul li::before { left: 16px; top: 17px; width: 22px; height: 22px; background: var(--sx-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.sx-aboutpg #experience ul li strong { display: block; color: var(--sx-navy); margin-bottom: 2px; }
.sx-aboutpg #services { background: linear-gradient(180deg, #EEF4FC 0%, #F7FAFE 100%); border-bottom: 1px solid #E1E8F2; }
.sx-aboutpg #blog { background: #fff; }
@media (max-width: 700px) { .sx-aboutpg #experience ul { grid-template-columns: 1fr; } .sx-aboutpg #experience .sx-article { padding: 30px 20px 24px; } }

/* About: story photo collage (fills the height of the story text) */
.sx-aboutpg .sx-story { align-items: stretch; }
.sx-story-collage { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 12px; min-height: 460px; }
.sx-story-collage figure { margin: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .9); }
.sx-story-collage img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--sx-ease); }
.sx-story-collage figure:hover img { transform: scale(1.06); }
.sx-collage-a { grid-row: 1 / 3; } .sx-collage-a img { object-position: 64% 30%; }
.sx-collage-b { grid-row: 1 / 2; } .sx-collage-b img { object-position: 78% 40%; }
.sx-collage-c { grid-row: 2 / 4; } .sx-collage-c img { object-position: 60% 30%; }
.sx-collage-d { grid-row: 3 / 4; } .sx-collage-d img { object-position: 60% 50%; }
.sx-collage-tag { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 10px; border-radius: 999px; background: #fff; color: var(--sx-navy); font-size: .86rem; font-weight: 700; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); }
.sx-collage-tag svg { width: 16px; height: 16px; color: var(--sx-orange); }
@media (max-width: 900px) { .sx-story-collage { min-height: 380px; } }

/* About: The Shark Experience as picture cards */
.sx-aboutpg #experience .sx-head { margin-bottom: 40px; }
.sx-xp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1220px; margin: 0 auto; }
.sx-xp-card { display: flex; flex-direction: column; border-radius: 22px; background: #fff; border: 1px solid #F1DECF; box-shadow: 0 26px 50px -38px rgb(var(--sx-orange-rgb) / .6); overflow: hidden; transition: transform .45s var(--sx-ease), box-shadow .45s var(--sx-ease); }
.sx-xp-card:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -34px rgb(var(--sx-orange-rgb) / .7); }
.sx-xp-card h3 { margin: 18px 20px 6px; color: var(--sx-navy); font-size: 1.14rem; font-weight: 700; }
.sx-xp-card p { margin: 0 20px 22px; color: var(--sx-text); font-size: .95rem; line-height: 1.55; }
.sx-xp-vis { position: relative; height: 210px; overflow: hidden; }
.sx-xp-card--save .sx-xp-vis { display: grid; place-items: center; background: radial-gradient(260px 160px at 70% 10%, rgba(255, 255, 255, .25), transparent 60%), linear-gradient(145deg, #F86A05, #FF9A4D); }
.sx-xp-ticket { position: relative; width: 78%; padding: 16px 18px 14px; border-radius: 14px; background: #fff; text-align: center; box-shadow: 0 18px 30px -14px rgba(120, 40, 0, .6); transform: rotate(-3deg); transition: transform .5s var(--sx-ease); }
.sx-xp-card:hover .sx-xp-ticket { transform: rotate(0) scale(1.03); }
.sx-xp-ticket::before, .sx-xp-ticket::after { content: ''; position: absolute; top: 58%; width: 16px; height: 16px; border-radius: 50%; background: #FB8330; }
.sx-xp-ticket::before { left: -8px; } .sx-xp-ticket::after { right: -8px; }
.sx-xp-ticket-k { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sx-blue); }
.sx-xp-ticket b { display: block; color: var(--sx-orange); font-size: 2.4rem; font-weight: 900; line-height: 1.1; }
.sx-xp-ticket b small { font-size: 1rem; }
.sx-xp-ticket > span:not(.sx-xp-ticket-k) { display: block; font-size: .82rem; color: var(--sx-text); }
.sx-xp-ticket-row { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 2px dashed #F1DECF; font-style: normal; font-size: .78rem; }
.sx-xp-ticket-row em { font-style: normal; color: var(--sx-text); } .sx-xp-ticket-row strong { color: #16965f; }
.sx-xp-chat { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 14px 16px; background: linear-gradient(180deg, #EAF2FF, #F7FAFF); }
.sx-xp-msg { max-width: 86%; padding: 7px 11px; border-radius: 14px; font-size: .76rem; line-height: 1.35; box-shadow: 0 4px 10px -6px rgba(4, 20, 60, .4); opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--sx-ease); }
.sx-xp-msg b { display: block; font-size: .64rem; color: var(--sx-blue); margin-bottom: 1px; }
.sx-xp-msg--in { align-self: flex-start; background: #fff; color: var(--sx-navy); border-bottom-left-radius: 4px; }
.sx-xp-msg--out { align-self: flex-end; background: var(--sx-blue); color: #fff; border-bottom-right-radius: 4px; }
.sx-xp-msg--photo i { display: inline-block; width: 46%; height: 34px; margin: 5px 4% 0 0; border-radius: 6px; background-size: cover; background-position: center; }
.sx-xp-card.is-in .sx-xp-msg, html:not(.sx-js) .sx-xp-msg { opacity: 1; transform: none; }
.sx-xp-card.is-in .sx-xp-msg:nth-child(1) { transition-delay: .3s; } .sx-xp-card.is-in .sx-xp-msg:nth-child(2) { transition-delay: .8s; }
.sx-xp-card.is-in .sx-xp-msg:nth-child(3) { transition-delay: 1.3s; } .sx-xp-card.is-in .sx-xp-msg:nth-child(4) { transition-delay: 1.8s; }
.sx-xp-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--sx-ease); }
.sx-xp-card:hover .sx-xp-photo img { transform: scale(1.06); }
.sx-xp-stamp { position: absolute; right: 12px; top: 12px; width: 92px; height: 92px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(4, 99, 238, .92); color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; box-shadow: 0 0 0 4px rgba(255, 255, 255, .85), 0 12px 24px -8px rgba(0, 0, 0, .6); transform: rotate(10deg); }
.sx-xp-stamp b { font-size: 1.15rem; letter-spacing: 0; }
.sx-xp-pill { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--sx-navy); font-size: .74rem; font-weight: 700; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .6); }
.sx-xp-chips { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.sx-xp-chips span { padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--sx-navy); font-size: .74rem; font-weight: 700; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .6); }
.sx-xp-cta { margin: 30px auto 0; text-align: center; color: var(--sx-text); font-size: 1.02rem; }
.sx-xp-cta a { color: var(--sx-blue); font-weight: 700; }
@media (max-width: 1100px) { .sx-xp { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .sx-xp { grid-template-columns: 1fr; } }
.sx-xp-chat { gap: 5px; padding: 10px 14px; }
.sx-xp-msg { padding: 6px 10px; font-size: .74rem; }
.sx-xp-msg--photo i { height: 30px; margin-top: 4px; }

/* ==========================================================
   COMMERCIAL: one building, four effects
   0 walk in · 1 glare down the glass · 2 building opens, interior shine · 3 signed off
   ========================================================== */
.sx-hq-scene { position: relative; height: clamp(320px, 54vh, 500px); display: flex; align-items: flex-end; justify-content: center; perspective: 1400px; }
.sx-hq-ground { position: absolute; left: -6%; right: -6%; bottom: -8px; height: 10px; border-radius: 6px; background: linear-gradient(90deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .25), rgba(255, 255, 255, .04)); }
.sx-hq-side { position: absolute; bottom: 0; width: 22%; border-radius: 6px 6px 0 0; background: linear-gradient(90deg, #15254A, #1C2F5A); opacity: .55; }
.sx-hq-side::after { content: ''; position: absolute; inset: 14px 12px 0; background: linear-gradient(90deg, #15254A 0 3px, transparent 3px) 0 0 / 20px 100%, linear-gradient(180deg, #15254A 0 4px, transparent 4px) 0 0 / 100% 22px, #2B4577; opacity: .7; }
.sx-hq-side--l { left: 0; height: 52%; } .sx-hq-side--r { right: 0; height: 66%; border-radius: 6px 40px 0 0; }
.sx-hq { position: relative; width: min(46%, 300px); height: 94%; transform-style: preserve-3d; }
.sx-hq-roof { position: absolute; left: 6%; right: 6%; top: 0; height: 18px; border-radius: 6px 6px 0 0; background: #2A3E68; }
.sx-hq-roof i { position: absolute; left: 50%; bottom: 100%; width: 4px; height: 34px; background: #8E9BAE; transform: translateX(-50%); }
.sx-hq-roof i::after { content: ''; position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #FF4D4D; box-shadow: 0 0 10px #FF4D4D; animation: sx-twinkle 1.6s ease-in-out infinite; }
.sx-hq-body { position: absolute; left: 0; right: 0; top: 18px; bottom: 0; border-radius: 4px 4px 0 0; background: #1A2B52; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .9), inset 0 0 0 3px #2A3E68; transform-style: preserve-3d; }
/* interior (seen when the face swings open) */
.sx-hq-inside { position: absolute; inset: 10px 10px 54px; display: grid; grid-template-rows: repeat(5, 1fr); gap: 6px; background: #0E1A36; overflow: hidden; }
.sx-hq-floor { position: relative; display: flex; align-items: flex-end; gap: 8%; padding: 0 8% 6px; background: linear-gradient(180deg, #FFE7B0, #FFD27A); border-bottom: 4px solid #C9A060; }
.sx-hq-floor .d { width: 22%; height: 30%; border-radius: 2px 2px 0 0; background: #8A6A3E; }
.sx-hq-floor .p { width: 8%; height: 58%; border-radius: 6px 6px 0 0; background: #0A2152; }
.sx-hq-floor .l { position: absolute; right: 10%; top: 0; width: 16%; height: 5px; border-radius: 0 0 6px 6px; background: #fff; box-shadow: 0 6px 16px rgba(255, 255, 255, .9); }
.sx-hq-sweep { position: absolute; left: 0; right: 0; top: -30%; height: 30%; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .85), transparent); opacity: 0; }
.sx-pin--city[data-cur="2"] .sx-hq-sweep { opacity: 1; animation: sx-hq-down 1.6s var(--sx-ease) infinite; }
@keyframes sx-hq-down { to { top: 100%; } }
/* glass face */
.sx-hq-face { position: absolute; inset: 10px 10px 54px; transform-origin: 0 50%; transition: transform 1.1s cubic-bezier(.6, 0, .25, 1), box-shadow 1s; background: #0E1A36; }
.sx-pin--city[data-cur="2"] .sx-hq-face { transform: rotateY(-78deg); box-shadow: 30px 0 40px -10px rgba(0, 0, 0, .7); }
.sx-hq-glass { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(6, 1fr); gap: 4px; }
.sx-hq-glass i { background: linear-gradient(160deg, #CDEBFF 0%, #7DBBFF 38%, #2F7BE8 62%, #A6D6FF 100%); }
.sx-hq-dirt { position: absolute; inset: 0; background: radial-gradient(rgba(70, 56, 34, .45) 1px, transparent 1.6px) 0 0 / 7px 7px, linear-gradient(180deg, rgba(92, 88, 80, .92), rgba(70, 66, 60, .95)); clip-path: inset(var(--wash, 0%) 0 0 0); -webkit-mask: linear-gradient(90deg, #000 0 100%); }
.sx-hq-rig { position: absolute; left: -8px; right: -8px; top: var(--wash, 0%); height: 10px; margin-top: -10px; border-radius: 3px; background: var(--sx-orange); box-shadow: 0 6px 14px -4px rgb(var(--sx-orange-rgb) / .9); opacity: 0; transition: opacity .3s; }
.sx-hq-rig i { position: absolute; left: 10px; right: 10px; bottom: 100%; height: 600px; background: linear-gradient(90deg, rgba(255, 255, 255, .6) 0 1px, transparent 1px calc(100% - 1px), rgba(255, 255, 255, .6) calc(100% - 1px)); }
.sx-hq-glare { position: absolute; left: 0; right: 0; top: calc(var(--wash, 0%) - 22%); height: 22%; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .75)); opacity: 0; pointer-events: none; }
.sx-pin--city[data-cur="1"] .sx-hq-rig, .sx-pin--city[data-cur="1"] .sx-hq-glare { opacity: 1; }
.sx-pin--city[data-cur="2"] .sx-hq-dirt, .sx-pin--city[data-cur="3"] .sx-hq-dirt, .sx-pin--city.sx-pin-off .sx-hq-dirt { clip-path: inset(100% 0 0 0); }
.sx-hq-sparks b { position: absolute; left: var(--x); top: var(--y); width: 18px; height: 18px; opacity: 0; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 6px #fff); }
.sx-pin--city[data-cur="1"] .sx-hq-sparks b { animation: sx-spark 1.4s ease-in-out infinite; animation-delay: var(--dl, 0s); }
.sx-pin--city[data-cur="3"] .sx-hq-sparks b, .sx-pin--city.sx-pin-off .sx-hq-sparks b { animation: sx-spark 1.2s ease-in-out infinite; animation-delay: var(--dl, 0s); }
@keyframes sx-spark { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
.sx-hq-door { position: absolute; left: 50%; bottom: 0; width: 56px; height: 44px; margin-left: -28px; border-radius: 4px 4px 0 0; background: linear-gradient(90deg, #0E1A36 0 49%, #2A3E68 49% 51%, #0E1A36 51%); box-shadow: inset 0 0 0 3px #3A5288; transition: background-color .4s, box-shadow .4s; }
.sx-pin--city[data-cur="0"] .sx-hq-door { box-shadow: inset 0 0 0 3px #3A5288, 0 0 30px rgba(255, 210, 122, .8); background: linear-gradient(90deg, #FFD27A 0 49%, #2A3E68 49% 51%, #FFD27A 51%); }
/* walker */
.sx-walker { position: absolute; bottom: 0; left: calc(4% + var(--lp, 0) * 42%); width: 30px; height: 68px; z-index: 3; opacity: 0; transition: opacity .4s; }
.sx-pin--city[data-cur="0"] .sx-walker { opacity: calc(1.6 - var(--lp, 0) * 1.4); }
.sx-walker-leg { transform-origin: 20px 48px; }
.sx-pin--city[data-cur="0"] .sx-walker-leg--a { animation: sx-step .55s ease-in-out infinite alternate; }
.sx-pin--city[data-cur="0"] .sx-walker-leg--b { animation: sx-step .55s ease-in-out infinite alternate-reverse; }
@keyframes sx-step { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
/* sign-off stamp */
.sx-hq-stamp { position: absolute; right: -34%; top: 22%; z-index: 4; display: grid; justify-items: center; gap: 2px; padding: 16px 18px 14px; border-radius: 18px; background: #16965f; color: #fff; text-align: center; box-shadow: 0 0 0 5px rgba(255, 255, 255, .85), 0 24px 40px -14px rgba(0, 0, 0, .8); transform: scale(.2) rotate(-30deg); opacity: 0; transition: transform .7s cubic-bezier(.34, 1.7, .64, 1), opacity .3s; }
.sx-hq-stamp svg { width: 34px; height: 34px; } .sx-hq-stamp b { font-size: 1rem; } .sx-hq-stamp small { font-size: .7rem; opacity: .85; }
.sx-pin--city[data-cur="3"] .sx-hq-stamp, .sx-pin--city.sx-pin-off .sx-hq-stamp { opacity: 1; transform: rotate(-8deg); }
/* step tags under the scene */
.sx-hq-tags { position: absolute; left: 0; right: 0; bottom: -46px; list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 18px; }
.sx-hq-tags li { display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .5); font-size: .8rem; font-weight: 700; transition: color .3s; }
.sx-hq-tags b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: .72rem; transition: background-color .3s; }
.sx-hq-tags li.is-on { color: #fff; } .sx-hq-tags li.is-on b { background: #34C38F; } .sx-hq-tags li.is-cur b { background: var(--sx-orange); }
/* illustrated caption icons */
.sx-city-ico--ill { width: 60px; height: 60px; border-radius: 18px; }
.sx-city-ico--ill svg { width: 40px; height: 40px; fill: initial; stroke: none; }
@media (max-width: 900px) {
  .sx-hq-scene { height: 34vh; }
  .sx-hq { width: 52%; }
  .sx-hq-stamp { right: -20%; padding: 10px 12px; } .sx-hq-stamp svg { width: 24px; height: 24px; }
  .sx-hq-tags { gap: 8px; } .sx-hq-tags li { font-size: 0; gap: 0; }
  .sx-walker { width: 22px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) { .sx-hq-sweep, .sx-hq-sparks b, .sx-walker-leg { animation: none !important; } }
.sx-walker { width: 44px; height: 100px; left: calc(2% + var(--lp, 0) * 44%); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
@media (max-width: 900px) { .sx-walker { width: 30px; height: 68px; } }
.sx-solar-ico--ill { width: 54px; height: 54px; border-radius: 16px; background: rgba(255, 255, 255, .1); }
.sx-solar-ico--ill svg { width: 40px; height: 40px; fill: initial; stroke: none; }
.sx-solar-step:not(.is-cur):not(.is-on) .sx-solar-ico--ill svg { filter: grayscale(.6) opacity(.7); }
.sx-solar-step.is-on .sx-solar-ico--ill { background: rgba(52, 195, 143, .18); }
.sx-solar-step.is-cur .sx-solar-ico--ill { background: linear-gradient(135deg, rgba(255, 194, 26, .35), rgba(248, 106, 5, .35)); }

/* ===== Curved transitions: dark bands arch into the sections around them ===== */
.sx-aboutpg #story,
.sx-svc .sx-values-band,
.sx-svc #reviews:not(.sx-reviews--light),
.sx-svc .sx-xmas-section {
  --arc: clamp(34px, 5vw, 72px);
  position: relative; z-index: 2;
  border-radius: 50% 50% 50% 50% / var(--arc) var(--arc) var(--arc) var(--arc);
  margin-block: calc(var(--arc) * -1);
  padding-block: calc(var(--sx-section) + var(--arc) * .6);
  box-shadow: 0 -18px 40px -30px rgba(4, 20, 60, .5), 0 18px 40px -30px rgba(4, 20, 60, .5);
}
/* give the neighbours room so nothing hides under the curve */
.sx-aboutpg #story + .sx-section, .sx-svc .sx-values-band + .sx-section,
.sx-svc #reviews:not(.sx-reviews--light) + .sx-section, .sx-svc .sx-xmas-section + .sx-section { padding-top: calc(var(--sx-section) + clamp(34px, 5vw, 72px)); }
.sx-section:has(+ #story), .sx-section:has(+ .sx-values-band), .sx-section:has(+ #reviews:not(.sx-reviews--light)), .sx-section:has(+ .sx-xmas-section) { padding-bottom: calc(var(--sx-section) + clamp(34px, 5vw, 72px)); }
/* a band right before the final CTA keeps its own flat bottom (the CTA already curves) */
.sx-svc .sx-values-band:has(+ .sx-final), .sx-svc #reviews:has(+ .sx-final) { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
@media (max-width: 700px) {
  .sx-aboutpg #story, .sx-svc .sx-values-band, .sx-svc #reviews:not(.sx-reviews--light), .sx-svc .sx-xmas-section { --arc: 28px; border-radius: 28px; margin-inline: 8px; }
}

/* Soft wash winding steps: every card reads left-aligned, like the right-hand ones */
.sx-wind-card { text-align: left; }
/* Gutter calendar: month names instead of single letters */
.sx-bmonths { gap: 5px; margin-top: 34px; }
.sx-bmonths span { position: relative; height: 50px; font-size: .82rem; letter-spacing: .01em; }
.sx-bmonths span em { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); font-style: normal; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.sx-bmonths .is-spring em { color: #5BE0A8; } .sx-bmonths .is-fall em { color: #FFB27A; }
@media (max-width: 900px) {
  .sx-bmonths { grid-template-columns: repeat(6, 1fr); row-gap: 28px; }
  .sx-bmonths span { height: 44px; font-size: .9rem; }
}

/* ===== Solar: realistic sun ===== */
.sx-solar-sun { width: 150px; height: 150px; top: 9%; right: 7%; border-radius: 0; background: none; filter: none; }
.sx-solar-sun i { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.sx-sun-core { width: 58px; height: 58px; background: radial-gradient(circle at 45% 42%, #FFFFFF 0%, #FFF8D6 28%, #FFE27A 55%, #FFC21A 78%, #FFA800 100%); box-shadow: 0 0 20px 6px rgba(255, 226, 122, .9), 0 0 60px 24px rgba(255, 194, 26, .45), 0 0 120px 60px rgba(255, 170, 0, .18); }
.sx-sun-rays { width: 190px; height: 190px; background: repeating-conic-gradient(from 0deg, rgba(255, 230, 150, .28) 0deg 5deg, transparent 5deg 18deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%); animation: sx-sun-spin 40s linear infinite; }
.sx-sun-flare { width: 16px; height: 16px; left: -40% !important; top: 140% !important; background: radial-gradient(circle, rgba(255, 220, 140, .5), transparent 70%); box-shadow: 60px 50px 0 -2px rgba(120, 190, 255, .18), 120px 100px 0 4px rgba(255, 200, 120, .12); }
@keyframes sx-sun-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.sx-pin--solar .sx-solar-sun { opacity: calc(.75 + var(--s3) * .25); transform: scale(calc(.92 + var(--s3) * .14)); }
@media (prefers-reduced-motion: reduce) { .sx-sun-rays { animation: none; } }
@media (max-width: 900px) { .sx-solar-sun { width: 90px; height: 90px; } .sx-sun-core { width: 38px; height: 38px; } .sx-sun-rays { width: 120px; height: 120px; } }

/* ===== Solar: real debris that the brush knocks off and the rinse washes away ===== */
.sx-solar-debris { position: absolute; inset: 10px; pointer-events: none; overflow: hidden; z-index: 1; }
.sx-solar-debris > * { position: absolute; left: var(--x); top: var(--y); }
.sx-solar-debris .d-leaf { width: 46px; height: 28px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45)); transform: translateX(calc(var(--s1) * var(--dx, 140px))) translateY(calc(var(--s1) * 60px)) rotate(calc(var(--r) + var(--s1) * 160deg)); opacity: calc(1 - var(--s1) * 1.4); }
.sx-solar-debris .d-twig { width: 76px; height: 18px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45)); transform: translateX(calc(var(--s1) * var(--dx))) translateY(calc(var(--s1) * 40px)) rotate(calc(var(--r) + var(--s1) * 90deg)); opacity: calc(1 - var(--s1) * 1.5); }
.sx-solar-debris .d-drop { width: 26px; height: 26px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); opacity: calc(1 - var(--s1) * .55 - var(--s2) * .7); transform: scale(calc(1 - var(--s2) * .5)) translateY(calc(var(--s2) * 30px)); }
.sx-solar-debris .d-pollen { width: 34px; height: 22px; border-radius: 50%; background: radial-gradient(rgba(230, 200, 90, .9) 1.2px, transparent 1.8px) 0 0 / 5px 5px; opacity: calc(1 - var(--s1) * .6 - var(--s2) * .6); }
/* power meter: hover or tap to see the gain */
.sx-solar-meter { cursor: help; transition: transform .35s var(--sx-ease), box-shadow .35s, border-color .35s; }
.sx-solar-meter:hover, .sx-solar-meter:focus-visible { transform: translateY(-4px) scale(1.04); border-color: rgba(91, 224, 168, .7); box-shadow: 0 0 0 4px rgba(91, 224, 168, .18), 0 24px 44px -18px rgba(0, 0, 0, .8); outline: none; }
.sx-solar-meter:hover em, .sx-solar-meter:focus-visible em { box-shadow: 0 0 12px rgba(91, 224, 168, .9); }
.sx-solar-tip { position: absolute; right: 0; bottom: calc(100% + 12px); width: 250px; padding: 14px 16px; border-radius: 14px; background: #fff; color: var(--sx-text); font-size: .8rem; line-height: 1.45; box-shadow: 0 24px 44px -18px rgba(0, 0, 0, .7); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .3s, transform .35s var(--sx-ease); text-align: left; }
.sx-solar-tip::after { content: ''; position: absolute; right: 28px; top: 100%; border: 8px solid transparent; border-top-color: #fff; }
.sx-solar-tip b { display: block; color: var(--sx-navy); font-size: .92rem; margin-bottom: 6px; }
.sx-solar-tip span { display: block; }
.sx-solar-tip s { color: #C0392B; font-weight: 700; } .sx-solar-tip strong { color: #16965f; font-size: 1rem; }
.sx-solar-tip small { display: block; margin-top: 6px; color: var(--sx-slate-dark); }
.sx-solar-meter:hover .sx-solar-tip, .sx-solar-meter:focus-visible .sx-solar-tip { opacity: 1; transform: none; }

/* Commercial interior: each floor's window gets squeegeed while the building is open */
.sx-hq-floor .w { position: absolute; left: 6%; right: 6%; top: 10%; height: 52%; border-radius: 2px; background: linear-gradient(160deg, #DDF1FF, #9FD0FF 45%, #6FB5FF 70%, #CDEBFF); box-shadow: inset 0 0 0 2px #C9A060; overflow: hidden; z-index: 0; }
.sx-hq-floor .w i { position: absolute; inset: 0; background: radial-gradient(rgba(90, 76, 50, .5) 1px, transparent 1.6px) 0 0 / 6px 6px, linear-gradient(180deg, rgba(120, 110, 90, .75), rgba(95, 88, 72, .8)); transition: clip-path .7s var(--sx-ease); clip-path: inset(0 0 0 0); }
.sx-hq-floor.is-wiping .w i { clip-path: inset(0 0 0 55%); }
.sx-hq-floor.is-clean .w i { clip-path: inset(0 0 0 100%); }
.sx-hq-floor .w b { position: absolute; top: -10%; bottom: -10%; width: 6px; left: -8px; border-radius: 3px; background: var(--sx-orange); box-shadow: 0 0 10px rgb(var(--sx-orange-rgb) / .8); opacity: 0; transition: left .7s var(--sx-ease), opacity .3s; }
.sx-hq-floor.is-wiping .w b { left: 55%; opacity: 1; }
.sx-hq-floor.is-clean .w b { left: 102%; opacity: 0; }
.sx-hq-floor.is-clean .w::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .8) 50%, transparent 65%); background-size: 260% 100%; animation: sx-glint 1.2s var(--sx-ease) forwards; }
.sx-hq-floor .d, .sx-hq-floor .p { position: relative; z-index: 1; }
.sx-hq-floor .l { z-index: 1; }

/* Signed-off badge sits fully beside the building (never over it) */
.sx-hq-stamp { left: calc(100% + 22px); right: auto; top: 26%; transform-origin: 0 50%; transform: translateX(-20px) scale(.4); }
.sx-hq-stamp::before { content: ''; position: absolute; right: 100%; top: 50%; width: 22px; height: 3px; background: rgba(255, 255, 255, .85); }
.sx-pin--city[data-cur="3"] .sx-hq-stamp, .sx-pin--city.sx-pin-off .sx-hq-stamp { transform: none; }
.sx-hq-side--r { z-index: 0; }
.sx-hq { z-index: 1; }
.sx-hq-stamp { z-index: 5; }
@media (max-width: 900px) {
  .sx-hq-stamp { left: 50%; top: -58px; transform-origin: 50% 100%; transform: translate(-50%, 10px) scale(.4); display: flex; align-items: center; gap: 8px; padding: 8px 14px; }
  .sx-hq-stamp::before { right: auto; left: 50%; top: 100%; width: 3px; height: 14px; }
  .sx-hq-stamp small { display: none; }
  .sx-pin--city[data-cur="3"] .sx-hq-stamp, .sx-pin--city.sx-pin-off .sx-hq-stamp { transform: translateX(-50%); }
  .sx-hq-roof i { opacity: 0; }
}
.sx-hq-stamp { width: max-content; min-width: 150px; white-space: nowrap; padding: 14px 18px 12px; }
.sx-hq-stamp b { font-size: 1.05rem; }
.sx-solar-debris .d-leaf { width: 70px; height: 42px; }
.sx-solar-debris .d-twig { width: 110px; height: 24px; }
.sx-solar-debris .d-drop { width: 38px; height: 38px; }
.sx-solar-debris .d-pollen { width: 56px; height: 34px; }
@media (max-width: 900px) { .sx-solar-debris .d-leaf { width: 44px; height: 26px; } .sx-solar-debris .d-twig { width: 70px; height: 16px; } .sx-solar-debris .d-drop { width: 24px; height: 24px; } }
@media (max-width: 900px) {
  .sx-hq-stamp { left: calc(100% + 8px); top: 22%; min-width: 0; width: 76px; white-space: normal; flex-direction: column; gap: 2px; padding: 8px 6px; border-radius: 14px; text-align: center; transform-origin: 0 50%; transform: translateX(-10px) scale(.4); }
  .sx-hq-stamp b { font-size: .72rem; line-height: 1.15; }
  .sx-hq-stamp svg { width: 20px; height: 20px; }
  .sx-hq-stamp::before { right: 100%; left: auto; top: 50%; width: 8px; height: 3px; }
  .sx-pin--city[data-cur="3"] .sx-hq-stamp, .sx-pin--city.sx-pin-off .sx-hq-stamp { transform: none; }
}

/* Lincoln: nearby towns */
.sx-towns { margin-top: 18px; padding: 20px 22px; border-radius: 18px; background: #fff; border: 1px solid #DCE7F5; box-shadow: 0 20px 40px -32px rgba(4, 20, 60, .5); }
.sx-towns h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--sx-navy); font-size: 1.1rem; font-weight: 700; }
.sx-towns h3 svg { width: 20px; height: 20px; color: var(--sx-orange); }
.sx-towns p { margin: 0 0 12px; color: var(--sx-text); font-size: .95rem; }
.sx-towns ul { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.sx-towns li { padding: 6px 12px; border-radius: 999px; background: #F1F6FD; border: 1px solid #DCE7F5; color: var(--sx-navy); font-size: .86rem; font-weight: 600; }
.sx-towns-note { margin: 0 !important; font-size: .88rem !important; }
.sx-towns-note a { color: var(--sx-blue); font-weight: 700; }
.sx-article-areas a.is-muted { display: inline-flex; align-items: center; padding: 9px 15px; border-radius: 999px; border: 1px dashed #D8E2EF; color: var(--sx-slate-dark); font-weight: 500; font-size: .95rem; text-decoration: none; transition: border-color .2s, color .2s; }
.sx-article-areas a.is-muted:hover { border-color: var(--sx-blue); color: var(--sx-blue); }
/* Detailed sun: textured surface, corona, long/short rays, lens streak — brightens as the panel gets clean */
.sx-solar-sun { width: 190px; height: 190px; top: 5%; right: 5%; }
.sx-sun-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 18px rgba(255, 200, 60, calc(.35 + var(--s3, 0) * .5))); }
.sx-sun-rays2 { transform-origin: 100px 100px; animation: sx-sun-turn 60s linear infinite; }
@keyframes sx-sun-turn { to { transform: rotate(360deg); } }
.sx-sun-halo { transform-origin: 100px 100px; opacity: calc(.55 + var(--s3, 0) * .45); transform: scale(calc(.9 + var(--s3, 0) * .3)); }
.sx-sun-streak { position: absolute; left: 50%; top: 50%; width: 300px; height: 3px; border-radius: 3px; transform: translate(-50%, -50%) rotate(-28deg); background: linear-gradient(90deg, transparent, rgba(255, 236, 170, .55), transparent); opacity: calc(.3 + var(--s3, 0) * .6); }
.sx-solar-sun .sx-sun-flare { left: -35% !important; top: 150% !important; }
@media (prefers-reduced-motion: reduce) { .sx-sun-rays2 { animation: none; } }
@media (max-width: 900px) { .sx-solar-sun { width: 110px; height: 110px; } .sx-sun-streak { width: 170px; } }

/* ===== Areas We Serve page ===== */
.sx-areas-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; max-width: 1180px; margin: 0 auto; }
.sx-areas-card { position: relative; display: block; min-height: 300px; border-radius: 24px; overflow: hidden; color: #fff; text-decoration: none; box-shadow: 0 30px 60px -36px rgba(4, 20, 60, .7); isolation: isolate; }
.sx-areas-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.1s var(--sx-ease); }
.sx-areas-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4, 20, 60, .05) 20%, rgba(4, 20, 60, .88)); }
.sx-areas-card:hover img { transform: scale(1.05); }
.sx-areas-card > div { position: absolute; left: 26px; right: 26px; bottom: 24px; }
.sx-areas-card h2 { margin: 8px 0 4px; font-size: 2rem; font-weight: 800; color: #fff; }
.sx-areas-card p { margin: 0 0 10px; color: rgba(255, 255, 255, .85); }
.sx-areas-card b { display: inline-flex; align-items: center; gap: 6px; color: #FFB27A; font-size: .95rem; }
.sx-areas-card b svg { width: 16px; height: 16px; }
.sx-areas-tag { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--sx-blue); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sx-areas-tag--o { background: var(--sx-orange); }
.sx-areas-towns { max-width: 1180px; margin: 28px auto 0; padding: 34px 34px 30px; border-radius: 24px; background: #fff; border: 1px solid #DCE7F5; box-shadow: 0 30px 60px -44px rgba(4, 20, 60, .5); }
.sx-areas-towns h2 { margin: 0 0 6px; color: var(--sx-navy); font-size: 1.6rem; font-weight: 800; }
.sx-areas-towns-head p { margin: 0 0 20px; color: var(--sx-text); }
.sx-areas-towns ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.sx-areas-towns li { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 14px; background: #F4F8FE; border: 1px solid #E1E8F2; color: var(--sx-navy); font-weight: 600; }
.sx-areas-towns li svg { width: 17px; height: 17px; color: var(--sx-orange); flex: none; }
.sx-areas-note { margin: 0 0 18px; color: var(--sx-text); }
.sx-areas-note a { color: var(--sx-blue); font-weight: 700; }
@media (max-width: 800px) { .sx-areas-grid { grid-template-columns: 1fr; } .sx-areas-card { min-height: 240px; } .sx-areas-towns { padding: 24px 18px; } .sx-areas-towns ul { grid-template-columns: 1fr 1fr; } }
/* Footer: nearby towns line */
.sx-footer-towns { margin: 4px 0 8px; color: rgba(255, 255, 255, .6); font-size: .82rem; line-height: 1.55; max-width: 240px; }
.sx-footer-towns a { display: inline !important; padding: 0 !important; color: rgba(255, 255, 255, .85) !important; font-weight: 600; }
.sx-footer-hours { margin: 2px 0 0; color: rgba(255, 255, 255, .7); font-size: .88rem; }

/* ===== Subtle brand motifs ===== */
.sx-motif { position: absolute; z-index: 0; pointer-events: none; background: center / contain no-repeat; opacity: .07; }
.sx-motif--fin { width: 150px; height: 125px; background-image: url('images/brand/fin-blue.svg'); }
.sx-motif--house { width: 170px; height: 142px; background-image: url('images/brand/motif-house.svg'); opacity: .08; }
.sx-motif--drops { width: 110px; height: 110px; background-image: url('images/brand/motif-drops.svg'); opacity: .1; }
.sx-motif--tl { left: 2.5%; top: 36px; transform: rotate(-8deg); }
.sx-motif--br { right: 2.5%; bottom: 36px; transform: rotate(6deg); }
.sx-section > .sx-wrap { position: relative; z-index: 1; }
@media (max-width: 900px) { .sx-motif { transform: scale(.6); opacity: .05; } .sx-motif--tl { left: -10px; top: 10px; } .sx-motif--br { right: -10px; bottom: 10px; } }

/* ==========================================================
   TRUST + QUICK CONTACT
   ========================================================== */
/* "★ 5.0 Google" next to the logo */
.sx-nav-rating { display: inline-flex; align-items: center; gap: 6px; margin: 0 auto 0 4px; padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); color: #fff; font-size: .82rem; line-height: 1; white-space: nowrap; transition: background-color .25s, transform .35s var(--sx-ease); }
.sx-nav-rating svg { width: 15px; height: 15px; fill: #FFC21A; }
.sx-nav-rating b { font-weight: 800; }
.sx-nav-rating span { opacity: .85; font-weight: 500; }
.sx-nav-rating:hover { background: rgba(255, 255, 255, .2); color: #fff; transform: translateY(-1px); }
@media (min-width: 1241px) and (max-width: 1300px) { .sx-nav-rating { display: none; } }
@media (max-width: 380px) { .sx-nav-rating span { display: none; } }

/* phone bar pinned to the bottom of the screen */
.sx-mbar { display: none; }
@media (max-width: 760px) {
  .sx-mbar { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 980; display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; padding: 8px; border-radius: 22px; background: rgba(255, 255, 255, .92); border: 1px solid rgba(4, 20, 60, .08); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); box-shadow: 0 16px 40px -16px rgba(2, 12, 38, .45); }
  .sx-mbar a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 16px; font-family: var(--sx-font); font-size: .95rem; font-weight: 700; text-decoration: none; }
  .sx-mbar svg { width: 17px; height: 17px; fill: currentColor; }
  .sx-mbar-call { color: var(--sx-navy); background: #fff; box-shadow: inset 0 0 0 1.5px rgba(4, 20, 60, .18); }
  .sx-mbar-quote { color: #fff; background: var(--sx-orange); box-shadow: 0 10px 22px -10px rgb(var(--sx-orange-rgb) / .8); }
  .sx-mbar a:active { transform: scale(.97); }
  body:has(.sx-mbar) { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .sx-mbar ~ .sx-chat { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}

/* contact bubble: close button in the header, roomier message box that grows as you type */
.sx-chat-panel { width: min(380px, calc(100vw - 32px)); display: flex; flex-direction: column; max-height: calc(100vh - 140px); max-height: calc(100svh - 140px); }
.sx-chat-form, .sx-chat-done { overflow-y: auto; overscroll-behavior: contain; }
.sx-chat-head { position: relative; padding-right: 58px; flex-shrink: 0; }
.sx-chat-x { position: absolute; top: 50%; right: 12px; width: 36px; height: 36px; margin-top: -18px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; transition: background-color .2s, transform .3s var(--sx-ease); }
.sx-chat-x svg { width: 18px; height: 18px; }
.sx-chat-x:hover { background: rgba(255, 255, 255, .24); transform: rotate(90deg); }
.sx-chat-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sx-chat-form textarea { min-height: 110px; font-size: 1rem; line-height: 1.5; resize: none; overflow-y: hidden; }
.sx-chat-form textarea::placeholder { color: #8A97AB; }
@media (max-width: 760px) {
  .sx-chat-form input, .sx-chat-form textarea { font-size: 16px; } /* stops iPhone from zooming in on tap */
  .sx-mbar ~ .sx-chat .sx-chat-panel { max-height: calc(100svh - 190px - env(safe-area-inset-bottom, 0px)); }
}

/* Local know-how cards on the Lincoln and Kearney pages */
.sx-local { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sx-local-card { padding: 26px 24px; border-radius: 20px; background: #fff; border: 1px solid var(--sx-line); box-shadow: 0 18px 40px -32px rgba(4, 20, 60, .45); }
.sx-local-card h3 { margin: 0 0 10px; font-size: 1.15rem; color: var(--sx-navy); }
.sx-local-card h3::before { content: ''; display: block; width: 36px; height: 4px; margin-bottom: 14px; border-radius: 4px; background: var(--sx-blue); }
.sx-local-card p { margin: 0; color: var(--sx-text); font-size: 1rem; line-height: 1.65; }
@media (max-width: 900px) { .sx-local { grid-template-columns: 1fr; gap: 14px; } }

/* ==========================================================
   PHOTO PROCESS — 4 compact photo cards (home + service pages)
   ========================================================== */
.ps-section > .sx-wrap { position: relative; z-index: 1; }
.ps-grid { list-style: none; margin: 0 0 36px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: none; }
.ps-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--sx-line); border-radius: 18px; overflow: hidden; box-shadow: 0 18px 40px -30px rgba(4, 20, 60, .55); transition: transform .4s var(--sx-ease), box-shadow .4s var(--sx-ease); }
.ps-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(4, 20, 60, .6); }
.ps-photo { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sx-bg-soft); }
.ps-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--sx-ease); }
.ps-card:hover .ps-photo img { transform: scale(1.05); }
.ps-num { position: absolute; left: 14px; top: 14px; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 12px; display: grid; place-items: center; background: var(--sx-orange); color: #fff; font-weight: 800; font-size: 1.05rem; letter-spacing: .02em; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .45); }
.ps-body { padding: 18px 20px 22px; }
.ps-body h3 { margin: 0 0 8px; color: var(--sx-navy); font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.ps-body p { margin: 0; color: var(--sx-text); font-size: .95rem; line-height: 1.6; }
.ps-section--dark .ps-card { border-color: rgba(255, 255, 255, .2); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .6); }
.ps-section--dark .ps-num { background: #fff; color: var(--sx-blue); }
@media (max-width: 1080px) { .ps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .ps-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 28px; }
  .ps-card { flex-direction: row; align-items: stretch; border-radius: 14px; }
  .ps-photo { flex: none; width: 112px; aspect-ratio: auto; }
  .ps-num { left: 8px; top: 8px; min-width: 32px; height: 32px; font-size: .85rem; border-radius: 9px; }
  .ps-body { padding: 12px 14px; }
  .ps-body h3 { font-size: 1rem; margin-bottom: 4px; }
  .ps-body p { font-size: .86rem; line-height: 1.5; }
}

/* ==========================================================
   PRICING — "Book It When You Need It" photo + list
   ========================================================== */
.pz { background: var(--sx-bg-soft); }
.pz-wrap { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.pz-photo { position: relative; margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 640px; box-shadow: 0 34px 70px -40px rgba(4, 20, 60, .7); }
.pz-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pz-free { position: absolute; left: 20px; bottom: 20px; right: 20px; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); box-shadow: 0 18px 40px -20px rgba(4, 20, 60, .6); }
.pz-free b { color: var(--sx-orange); font-size: 1.5rem; font-weight: 800; }
.pz-free span { color: var(--sx-navy); font-size: .92rem; font-weight: 600; line-height: 1.35; }
.pz-copy .sx-eyebrow { display: inline-block; margin-bottom: 8px; }
.pz-sub { margin: 12px 0 24px; color: var(--sx-text); font-size: 1.05rem; line-height: 1.65; }
.pz-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; }
.pz-list li { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--sx-line); box-shadow: 0 12px 28px -24px rgba(4, 20, 60, .5); transition: border-color .3s, transform .4s var(--sx-ease); }
.pz-list li:hover { border-color: var(--sx-orange); transform: translateX(4px); }
.pz-list li > img { flex: none; width: 72px; height: 72px; border-radius: 12px; object-fit: cover; }
.pz-list li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pz-list strong { color: var(--sx-navy); font-size: 1.06rem; font-weight: 700; }
.pz-list li > div > span { color: var(--sx-text); font-size: .93rem; line-height: 1.5; }
.pz-tag { flex: none; align-self: center; padding: 6px 10px; border-radius: 999px; background: rgb(var(--sx-orange-rgb) / .1); color: var(--sx-orange); font-style: normal; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.pz-tiers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pz-tiers span { padding: 4px 9px; border-radius: 8px; background: var(--sx-bg-soft); color: var(--sx-text); font-size: .8rem; }
.pz-tiers b { color: var(--sx-orange); }
.pz-note { margin: 0 0 22px; padding: 12px 16px; border-left: 3px solid var(--sx-orange); border-radius: 0 10px 10px 0; background: #fff; color: var(--sx-text); font-size: .95rem; line-height: 1.55; }
.pz-note b { color: var(--sx-navy); }
.pz-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.pz-call { display: inline-flex; align-items: center; gap: 8px; color: var(--sx-navy); font-weight: 700; font-size: 1.05rem; text-decoration: none; }
.pz-call svg { width: 20px; height: 20px; fill: var(--sx-orange); }
.pz-call:hover { color: var(--sx-orange); }
@media (max-width: 960px) {
  .pz-wrap { grid-template-columns: 1fr; gap: 28px; }
  .pz-photo { aspect-ratio: 16 / 10; max-height: none; }
}
@media (max-width: 600px) {
  .pz-photo { aspect-ratio: 4 / 3; border-radius: 16px; }
  .pz-free { left: 12px; right: 12px; bottom: 12px; padding: 10px 14px; }
  .pz-free b { font-size: 1.2rem; }
  .pz-free span { font-size: .82rem; }
  .pz-list li { display: grid; grid-template-columns: 56px 1fr; align-items: start; gap: 6px 12px; padding: 12px; }
  .pz-list li > img { width: 56px; height: 56px; grid-row: span 2; }
  .pz-tag { grid-column: 2; justify-self: start; }
}

/* ==========================================================
   WHAT TO EXPECT — compact 4-card row (power washing)
   ========================================================== */
.jx-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.jx-card { position: relative; padding: 22px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--sx-line); border-top: 3px solid var(--sx-orange); box-shadow: 0 12px 30px -26px rgba(4, 20, 60, .5); }
.jx-num { display: block; margin-bottom: 10px; color: var(--sx-orange); font-weight: 800; font-size: 1.4rem; }
.jx-card h3 { margin: 0 0 6px; color: var(--sx-navy); font-size: 1.08rem; font-weight: 700; }
.jx-card p { margin: 0; color: var(--sx-text); font-size: .93rem; line-height: 1.6; }
@media (max-width: 1080px) { .jx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .jx-grid { grid-template-columns: 1fr; gap: 10px; } .jx-card { padding: 16px; } }

/* Everything Included — real photos in place of drawn icons */
.sx-incl-ico--photo { width: 64px; height: 64px; padding: 0; overflow: hidden; background: none; }
.sx-incl-ico--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Commercial process — navy band with photo cards + property tiles */
.ps-section--navy, .sx-svc #process.ps-section--navy { border: 0; background: radial-gradient(900px 480px at 10% 0%, rgba(4, 99, 238, .4), transparent 60%), radial-gradient(800px 420px at 95% 100%, rgba(4, 99, 238, .22), transparent 60%), var(--sx-navy); }
.sx-svc #process.ps-section--navy::before { content: none; }
.ps-section--navy .ps-card { border-color: rgba(255, 255, 255, .12); box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .7); }
.ps-section--navy .ps-num { background: var(--sx-blue); }
.cx-band { margin: 8px 0 40px; }
.cx-band-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 24px; margin-bottom: 18px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .14); }
.cx-band-head .sx-eyebrow { color: #9CC3FF; }
.cx-band-head p { margin: 0; color: rgba(255, 255, 255, .75); font-size: .98rem; }
.cx-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cx-tile { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; isolation: isolate; }
.cx-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--sx-ease); }
.cx-tile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, rgba(2, 12, 38, .88) 100%); }
.cx-tile:hover img { transform: scale(1.06); }
.cx-tile div { position: absolute; left: 18px; right: 18px; bottom: 16px; display: flex; flex-direction: column; gap: 3px; color: #fff; }
.cx-tile b { font-size: 1.1rem; font-weight: 700; }
.cx-tile span { font-size: .86rem; color: rgba(255, 255, 255, .8); line-height: 1.4; }
@media (max-width: 1080px) { .cx-tiles { grid-template-columns: repeat(2, 1fr); } .cx-tile { aspect-ratio: 4 / 3.4; } }
@media (max-width: 600px) {
  .cx-tiles { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--sx-gutter); margin: 0 calc(var(--sx-gutter) * -1); padding: 0 var(--sx-gutter) 4px; scrollbar-width: none; }
  .cx-tiles::-webkit-scrollbar { display: none; }
  .cx-tile { flex: 0 0 64%; aspect-ratio: 4 / 5; scroll-snap-align: start; }
  .cx-band { margin-bottom: 30px; }
}

/* Home "About" photo */
.sx-about-img img[src*="about-home"] { object-position: center 60%; }

/* ==========================================================
   SERVICE ABOUT — article + quote card + other services
   ========================================================== */
.as-section b, .as-section strong { font-weight: 700; }
.as-section { background: linear-gradient(180deg, #fff 0%, var(--sx-bg-soft) 100%); }
.as-section p { color: var(--sx-text); font-size: 1.02rem; line-height: 1.75; margin: 0 0 16px; }
.as-section .as-lead { font-size: 1.14rem; color: var(--sx-ink); line-height: 1.7; }
.as-h3 { margin: 0 0 18px; color: var(--sx-navy); font-size: 1.35rem; font-weight: 800; }
.as-section .sx-eyebrow { display: inline-block; margin-bottom: 10px; }
.as-section .sx-title { margin-bottom: 18px; }
.as-call { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--sx-navy); text-decoration: none; }
.as-call svg { width: 18px; height: 18px; color: var(--sx-orange); }
.as-trust { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 8px; }
.as-trust li { display: flex; align-items: center; gap: 10px; font-size: .94rem; }
.as-trust svg { width: 18px; height: 18px; flex: none; color: var(--sx-orange); }
.as-section img { display: block; }

/* ---------- B: Sticky quote panel ---------- */
.as-b { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; }
.as-b-photo { margin: 0 0 24px; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 7; }
.as-b-photo img { width: 100%; height: 100%; object-fit: cover; }
.as-b-why { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.as-b-why li { display: flex; gap: 14px; padding: 18px; border-radius: 16px; background: #fff; border: 1px solid var(--sx-line); }
.as-b-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--sx-orange); color: #fff; }
.as-b-ico svg { width: 18px; height: 18px; }
.as-b-why b { display: block; color: var(--sx-navy); margin-bottom: 4px; }
.as-b-why p { margin: 0; font-size: .92rem; line-height: 1.55; }
.as-b-quote { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 22px; background: radial-gradient(500px 260px at 100% 0%, rgba(4, 99, 238, .45), transparent 60%), var(--sx-navy); color: rgba(255, 255, 255, .85); box-shadow: 0 30px 60px -36px rgba(4, 20, 60, .9); }
.as-b-tag { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--sx-orange); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.as-b-quote strong { color: #fff; font-size: 1.4rem; line-height: 1.25; }
.as-b-sub { color: rgba(255, 255, 255, .7); }
.as-b-quote .sx-btn { justify-content: center; }
.as-b-quote .as-call { justify-content: center; color: #fff; padding-top: 4px; }
.as-b-svcs-h { display: block; margin-bottom: 12px; color: var(--sx-muted); font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- B2: bigger photo rows filling the sidebar ---------- */
.as-b2-svcs { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 22px; background: #fff; border: 1px solid var(--sx-line); box-shadow: 0 20px 40px -32px rgba(4, 20, 60, .5); }
.as-b2-svcs .as-b-svcs-h { margin-bottom: 4px; }
.as-b2-svcs a { display: flex; align-items: center; gap: 14px; padding: 8px; border-radius: 14px; text-decoration: none; transition: background-color .2s, transform .3s var(--sx-ease); }
.as-b2-svcs a:hover { background: #FFF7F0; transform: translateX(4px); }
.as-b2-svcs img { width: 92px; height: 70px; border-radius: 10px; object-fit: cover; flex: none; }
.as-b2-svcs a > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.as-b2-svcs b { color: var(--sx-navy); font-size: .98rem; line-height: 1.25; }
.as-b2-svcs small { color: var(--sx-text); font-size: .82rem; line-height: 1.4; }
.as-b2-svcs svg { width: 18px; height: 18px; flex: none; color: var(--sx-muted); }
.as-b2-svcs a:hover svg { color: var(--sx-orange); }
.as-b-side { display: flex; flex-direction: column; gap: 18px; }

.as-b-photo { position: relative; }
@media (max-width: 1080px) {
  .as-b { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .as-b-why { grid-template-columns: 1fr; }
  .as-b-photo { aspect-ratio: 16 / 10; }
  .as-b2-svcs img { width: 80px; height: 62px; }
}