/* Pocono Pristine Properties
   NOTE: every repeat(auto-fit, minmax(...)) floor is wrapped in min(x, 100%).
   A bare rem floor is a hard minimum, so below that width the track pushes
   past its container and the whole page scrolls sideways. Keep the guard.
   ---------------------------------------------------------------------------
   One stylesheet, no framework, no webfont requests. Colors, spacing, and type
   are all custom properties, so rebranding is an edit to :root and nothing
   else.

   The logo is navy #103A67, lime #84B93A, blue #1B7AB5. The interface does not
   use the lime. Lime-green buttons are the strongest visual signal of a budget
   residential cleaner, and this is a commercial contractor — so the structural
   colour is a deep navy (#0B2638) and the interface accent is an evergreen
   (#2F7D57). The logo keeps its lime, which then reads as a highlight rather
   than the dominant colour.

   Lime measures 2.34:1 on white and therefore must never be used as text on a
   light background. It is allowed only on navy (6.66:1) and as decoration.

   Every pair below was measured against WCAG AA:
     ink on white 15.57  ·  evergreen on white 5.01  ·  white on evergreen 5.01
     evergreen-deep on white 7.53  ·  body on white 9.70  ·  muted on white 4.96
     lime on navy 6.66  ·  white on navy 15.57
   ------------------------------------------------------------------------- */

:root {
  --ink:        #0b2638;
  --ink-soft:   #33465a;
  --muted:      #5f7286;
  --line:       #dfe6ec;
  --line-strong:#c3cfda;
  --bg:         #ffffff;
  --bg-soft:    #eef7fa;
  --bg-ink:     #0b2638;
  --ink-2:      #14384f;

  --brand-navy: #103a67;
  --brand-blue: #1b7ab5;
  --brand-green:#84b93a;

  --accent:     #2f7d57;
  --accent-hi:  #37946a;
  --accent-deep:#245f42;
  --accent-lite:#9ccb54;
  --accent-wash:#eaf3ee;
  --on-accent:  #ffffff;

  --ok:         #1b7f4b;
  --warn:       #b45309;
  --err:        #b42318;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  /* Headings only. Archivo is a sturdy grotesque with enough width and
     character to carry a page that has very little photography on it, and it
     does not read as a startup typeface. The fallback is the same system stack
     the body uses, with size-adjust tuned so the swap barely moves the line. */
  --font-display: "Archivo", "Archivo Fallback", var(--font-sans);

  --step--1: clamp(0.84rem, 0.82rem + 0.10vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.16vw, 1.10rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2:  clamp(1.40rem, 1.26rem + 0.70vw, 1.85rem);
  --step-3:  clamp(1.75rem, 1.50rem + 1.25vw, 2.55rem);
  --step-4:  clamp(2.15rem, 1.70rem + 2.25vw, 3.60rem);

  --gap:      1.25rem;
  --pad-y:    clamp(3rem, 2rem + 4vw, 5.5rem);
  --wrap:     72rem;
  --radius:   4px;
  --radius-lg:8px;

  --shadow-sm: 0 1px 2px rgba(13, 34, 55, 0.06), 0 2px 8px rgba(13, 34, 55, 0.04);
  --shadow-md: 0 4px 12px rgba(13, 34, 55, 0.08), 0 12px 32px rgba(13, 34, 55, 0.06);
}

/* --------------------------------------------------------------------------
   Reset
   ------------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

@font-face {
  font-family: "Archivo Fallback";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 97%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); letter-spacing: -0.03em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.01em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: 0.4em; }

strong { color: var(--ink); font-weight: 650; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; z-index: 999;
  background: var(--accent); color: var(--on-accent);
  padding: 0.75rem 1.25rem; font-weight: 650; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; top: 0; }

/* --------------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------------ */

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.section { padding-block: var(--pad-y); }
.section + .section { padding-top: 0; }

.tone-soft { background: var(--bg-soft); padding-block: var(--pad-y); }
.section + .tone-soft { padding-top: var(--pad-y); }
.tone-soft + .section { padding-top: var(--pad-y); }

.tone-ink {
  background: var(--bg-ink);
  color: #cfd6de;
  padding-block: var(--pad-y);
}
.tone-ink h1, .tone-ink h2, .tone-ink h3 { color: #fff; }
.section + .tone-ink { padding-top: var(--pad-y); }

.measure { max-width: 62ch; }

.section-head { max-width: 46rem; margin-bottom: 2.5rem; }
.section-head.centered { margin-inline: auto; text-align: center; }
.section-head :last-child { margin-bottom: 0; }

.eyebrow {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 0.75rem;
}
.tone-ink .eyebrow { color: var(--accent); }

.lede {
  font-size: var(--step-1);
  color: var(--muted);
  line-height: 1.55;
  max-width: 44rem;
}
.centered .lede { margin-inline: auto; }
.tone-ink .lede { color: #a7b3c0; }

/* --------------------------------------------------------------------------
   Draft banner
   ------------------------------------------------------------------------ */

.draft-banner {
  background: repeating-linear-gradient(
    45deg, #fff4d6, #fff4d6 12px, #ffedbf 12px, #ffedbf 24px
  );
  color: #6b4e00;
  font-size: var(--step--1);
  font-weight: 600;
  text-align: center;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid #f0d68a;
}

mark.ph {
  background: #ffe08a;
  color: #6b4e00;
  padding: 0.05em 0.35em;
  border-radius: 4px;
  border-bottom: 2px solid var(--warn);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 4.5rem;
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
  margin-right: auto;
}
.brand { gap: 0.7rem; }
.brand-mark { width: auto; height: 2.4rem; flex: 0 0 auto; }
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  color: var(--ink);
}
.brand-line-1 {
  font-weight: 750;
  font-size: 1.15rem;
  letter-spacing: -0.025em;
}
.brand-line-2 {
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.site-nav ul {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  text-decoration: none;
  font-weight: 550;
  font-size: 0.97rem;
  color: var(--ink-soft);
  padding-block: 0.5rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 0 0 auto;
}
.header-phone {
  font-weight: 700;
  font-size: 1.02rem;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.header-phone:hover { color: var(--accent-deep); }

.nav-toggle {
  display: none;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 1.15rem; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-weight: 650;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.15s ease, border-color 0.15s ease;
  text-align: center;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--accent-deep); }

.btn-secondary {
  background: var(--ink);
  color: #fff;
}
.btn-secondary:hover { background: var(--ink-soft); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { border-color: var(--ink); }
.tone-ink .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.tone-ink .btn-ghost:hover { border-color: #fff; }

.btn-broken {
  background: repeating-linear-gradient(45deg, #ffe08a, #ffe08a 8px, #ffd45c 8px, #ffd45c 16px);
  color: #6b4e00;
  border-color: var(--warn);
  cursor: not-allowed;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.75rem;
}
.btn-row.centered { justify-content: center; }
.section-head + .btn-row { margin-top: 0; }

/* --------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------ */

/* Inner-page heroes sit on the ice-blue field rather than plain white, so the
   page announces itself as a section rather than starting mid-sentence. The
   old gradient tinted this area lime, which is the colour the interface no
   longer uses. */
.hero {
  padding-block: clamp(3rem, 2rem + 5vw, 6rem);
  background:
    radial-gradient(1100px 420px at 12% -20%, rgba(47, 125, 87, 0.10), transparent 62%),
    radial-gradient(900px 380px at 88% -20%, rgba(27, 122, 181, 0.10), transparent 60%),
    var(--bg-soft);
  border-bottom: 1px solid var(--line);
}

/* Breadcrumbs directly under an inner hero belong to it — same field, no rule
   between them, so it reads as one band instead of two stacked strips. */
.hero-inner-page + .breadcrumbs {
  background: var(--bg-soft);
  border-top: 0;
  margin-top: -1px;
}
.hero-inner-page { border-bottom: 0; }

/* The homepage hero is full-bleed navy. A white page opening with a white
   card beside a paragraph is the default shape of every small-business site;
   the dark field is what stops this one reading as a template. Inner-page
   heroes stay light — they are wayfinding, not a first impression. */
.hero-home {
  background: var(--ink);
  border-bottom: 0;
  padding-bottom: 0;
  position: relative;
  overflow: hidden;
}
.hero-home::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 88% 0%, rgba(27, 122, 181, 0.30), transparent 60%),
    radial-gradient(80% 60% at 0% 100%, rgba(47, 125, 87, 0.22), transparent 65%);
  pointer-events: none;
}
.hero-home .hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
  padding-bottom: clamp(2.5rem, 2rem + 3vw, 4rem);
}
.hero.hero-home .hero-title { color: #fff; }
.hero.hero-home .lede { color: #a8bccd; }
.hero.hero-home .eyebrow { color: var(--brand-green); }
.hero.hero-home .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.hero.hero-home .btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }

.hero-title { margin-bottom: 0.5em; }
.hero .lede { font-size: var(--step-2); color: var(--ink-soft); line-height: 1.4; }

/* Terms of the offer, welded to the hero's bottom edge. */
.hero-rail {
  position: relative;
  background: var(--ink-2);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.hero-rail dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  margin-block: 0;
}
.hero-rail div {
  padding: 1.4rem 1.25rem;
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}
.hero-rail div:first-child { border-left: 0; padding-left: 0; }
.hero-rail dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #7d9ab1;
  margin-bottom: 0.4rem;
}
.hero-rail dd {
  margin: 0;
  color: #fff;
  font-weight: 600;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .hero-rail dl { grid-template-columns: 1fr 1fr; }
  .hero-rail div { border-left: 0; padding-left: 0; padding-inline: 0 1rem; }
}
@media (max-width: 520px) {
  .hero-rail dl { grid-template-columns: 1fr; }
  .hero-rail div { padding-block: 1rem; border-top: 1px solid rgba(255,255,255,0.09); }
  .hero-rail div:first-child { border-top: 0; }
}

/* --------------------------------------------------------------------------
   Section archetypes
   ------------------------------------------------------------------------ */

.editorial {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.editorial-head { position: sticky; top: 6rem; }
.editorial-head .section-head { margin-bottom: 0; }
@media (max-width: 900px) {
  .editorial { grid-template-columns: 1fr; }
  .editorial-head { position: static; }
  .editorial-head .section-head { margin-bottom: 2rem; }
}

.probs {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: prob;
}
.probs li {
  counter-increment: prob;
  position: relative;
  margin: 0;
  padding: 1.6rem 0 1.6rem 4rem;
  border-top: 1px solid var(--line);
}
.probs li:first-child { border-top: 0; padding-top: 0; }
.probs li::before {
  content: "0" counter(prob);
  position: absolute;
  left: 0;
  top: 1.6rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent);
  letter-spacing: 0.05em;
}
.probs li:first-child::before { top: 0.15rem; }
.probs h3 { font-size: var(--step-1); margin-bottom: 0.35em; }
.probs p { margin: 0; color: var(--muted); }

.rail-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 2.5rem 0 0;
  padding: 0;
  counter-reset: rstep;
}
.rail-steps li {
  counter-increment: rstep;
  position: relative;
  margin: 0;
  padding-right: 1.5rem;
}
.rail-steps li::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0.72rem;
  height: 1px;
  background: var(--line-strong);
}
.rail-steps li:last-child::before { right: 1.5rem; }
.rail-steps li::after {
  content: counter(rstep);
  position: absolute;
  left: 0; top: 0;
  width: 1.45rem; height: 1.45rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.45rem;
  text-align: center;
}
.rail-steps h3 { margin: 2.4rem 0 0.4rem; font-size: var(--step-1); }
.rail-steps p { margin: 0; color: var(--muted); font-size: 0.97rem; }
.tone-soft .rail-steps li::before { background: #cddde4; }

@media (max-width: 860px) {
  .rail-steps { grid-template-columns: 1fr; }
  .rail-steps li { padding: 0 0 1.75rem 2.5rem; }
  .rail-steps li::before {
    left: 0.72rem; right: auto; top: 0; bottom: 0;
    width: 1px; height: auto;
  }
  .rail-steps li:last-child::before { bottom: 1.75rem; }
  .rail-steps h3 { margin-top: 0; }
}

.hero-points {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 0;
  display: grid;
  gap: 0.6rem;
}
.hero-points li {
  position: relative;
  padding-left: 1.9rem;
  font-weight: 550;
  color: var(--ink);
  margin: 0;
}
.hero-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.45em;
  width: 1.1rem; height: 1.1rem;
  background: var(--accent);
  border-radius: 50%;
}
.hero-points li::after {
  content: "";
  position: absolute;
  left: 0.33rem; top: 0.7em;
  width: 0.42rem; height: 0.22rem;
  border-left: 2px solid var(--on-accent);
  border-bottom: 2px solid var(--on-accent);
  transform: rotate(-45deg);
}

.hero-media { position: relative; }
.hero-image {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Sits where a hero photo goes. Until there are real photos of real work,
   an explicit offer converts better than stock imagery of someone else's
   building — and it doesn't misrepresent the company. */
.offer-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-md);
}
.offer-kicker {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 0.5rem;
}
.offer-title {
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 1.25rem;
}
.offer-points {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  display: grid;
  gap: 0.55rem;
}
.offer-points li {
  position: relative;
  padding-left: 1.6rem;
  margin: 0;
  color: var(--ink-soft);
}
.offer-points li::before {
  content: "";
  position: absolute;
  left: 0.1rem; top: 0.52em;
  width: 0.5rem; height: 0.26rem;
  border-left: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
}
.offer-card .btn { width: 100%; }
.offer-or {
  text-align: center;
  font-size: var(--step--1);
  color: var(--muted);
  margin: 1rem 0 0.25rem;
}
.offer-phone {
  display: block;
  text-align: center;
  font-size: var(--step-2);
  font-weight: 750;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}
.offer-phone:hover { color: var(--accent-deep); }

.hero-inner-page { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
/* Constrain the children rather than the wrap itself: narrowing .wrap would
   re-center it and leave the hero indented past the content below, and zeroing
   its margin would drop the page gutter entirely. */
.hero-inner-page .hero-inner > * { max-width: 52rem; }
.hero-slim { padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem); }

/* --------------------------------------------------------------------------
   Trust strip
   ------------------------------------------------------------------------ */

.trust {
  background: var(--bg-ink);
  color: #cfd6de;
}
.trust ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: 1.25rem 2rem;
  list-style: none;
  margin: 0;
  padding: 1.5rem 0;
}
.trust li {
  margin: 0;
  padding-left: 1.9rem;
  position: relative;
}
.trust li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 0.62rem; height: 0.3rem;
  border-left: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
}
.trust-title {
  display: block;
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.trust-note {
  display: block;
  font-size: var(--step--1);
  color: #93a2b3;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   ------------------------------------------------------------------------ */

.breadcrumbs {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0.85rem 0;
  font-size: var(--step--1);
  color: var(--muted);
}
.breadcrumbs li { margin: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--line-strong); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------------ */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--gap);
}

.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.tone-soft .card { background: #fff; }
.tone-ink .card { background: var(--ink-2); border-color: #27506b; }

.card-link {
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.card-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}

.card-icon {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accent-deep);
  margin-bottom: 0.5rem;
}
.card-title { font-size: var(--step-1); margin-bottom: 0.35em; }
.card-body { color: var(--muted); margin: 0; }
.tone-ink .card-body { color: #a7b3c0; }
.card-points { margin: 0.75rem 0 0; }

.card-more {
  margin-top: auto;
  padding-top: 1rem;
  font-weight: 650;
  font-size: 0.95rem;
  color: var(--ink);
}
.card-more::after { content: " →"; color: var(--accent-deep); }

/* Six-item grids land as 4 + 2 at desktop width, which reads as a mistake.
   A wider track forces the even 3 + 3 the content was written for. */
.cards-promise,
.cards-industries,
.cards-standard { grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }

.cards-problem .card { border-left: 3px solid var(--accent); }
.cards-compact .card { padding: 1.25rem; }
.cards-compact .card-title { font-size: var(--step-0); }

/* --------------------------------------------------------------------------
   Lists
   ------------------------------------------------------------------------ */

.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.65rem;
}
.checklist li {
  position: relative;
  padding-left: 1.75rem;
  margin: 0;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0.1rem; top: 0.52em;
  width: 0.55rem; height: 0.28rem;
  border-left: 2.5px solid var(--accent-deep);
  border-bottom: 2.5px solid var(--accent-deep);
  transform: rotate(-45deg);
}

.link-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  max-width: 30rem;
}
.link-list a { font-weight: 600; }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.split-col h2 { font-size: var(--step-2); }

/* --------------------------------------------------------------------------
   Steps
   ------------------------------------------------------------------------ */

.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.5rem;
  counter-reset: step;
}
.step {
  display: flex;
  gap: 1.1rem;
  margin: 0;
  align-items: flex-start;
}
.step-n {
  flex: 0 0 auto;
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 50%;
  font-weight: 750;
  font-size: 1rem;
}
.step-title { font-size: var(--step-1); margin-bottom: 0.25em; }
.step-body p { color: var(--muted); margin: 0; }

.process .steps { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 2rem; }
.process .step { flex-direction: column; gap: 0.85rem; }

/* --------------------------------------------------------------------------
   Sub-services
   ------------------------------------------------------------------------ */

.sub-services { display: grid; gap: 2rem; }
.sub-service {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  max-width: 52rem;
}
.sub-service h3 { font-size: var(--step-2); }
.sub-service p { color: var(--muted); }

/* --------------------------------------------------------------------------
   Proof
   ------------------------------------------------------------------------ */

.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--gap);
}
.quote {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.quote blockquote {
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink);
}
.quote blockquote::before { content: "\201C"; color: var(--accent); font-weight: 700; }
.quote blockquote::after { content: "\201D"; color: var(--accent); font-weight: 700; }
.quote figcaption {
  margin-top: auto;
  font-weight: 650;
  color: var(--ink);
  font-size: 0.95rem;
}
.quote-meta {
  display: block;
  font-weight: 450;
  color: var(--muted);
  font-size: var(--step--1);
}

/* --------------------------------------------------------------------------
   FAQ
   ------------------------------------------------------------------------ */

.faq { border-top: 1px solid var(--line); max-width: 52rem; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0;
  font-weight: 650;
  font-size: var(--step-1);
  color: var(--ink);
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 0.4rem; top: 1.55rem;
  width: 0.6rem; height: 0.6rem;
  border-right: 2.5px solid var(--accent-deep);
  border-bottom: 2.5px solid var(--accent-deep);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); top: 1.8rem; }
.faq-item summary:hover { color: var(--accent-deep); }
.faq-answer { padding: 0 2.5rem 1.4rem 0; color: var(--muted); max-width: 60ch; }

.faq-group + .faq-group { padding-top: 2.5rem; }
.faq-group h2 { font-size: var(--step-2); }

.jump ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.jump a {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-soft);
}
.jump a:hover { border-color: var(--accent); background: var(--accent-wash); }

/* --------------------------------------------------------------------------
   Area
   ------------------------------------------------------------------------ */

.area-towns {
  margin-top: 2rem;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 2;
  max-width: 60rem;
}

.cards-counties .card { border-top: 3px solid var(--accent); }

/* --------------------------------------------------------------------------
   Creds
   ------------------------------------------------------------------------ */

.creds { display: grid; gap: 1.75rem; max-width: 52rem; }
.cred {
  padding-left: 1.25rem;
  border-left: 3px solid var(--line-strong);
}
.cred h3 { margin-bottom: 0.4em; }
.cred p { color: var(--muted); }

/* --------------------------------------------------------------------------
   Closing CTA
   ------------------------------------------------------------------------ */

.cta-panel { max-width: 44rem; }
.cta-panel h2 { font-size: var(--step-3); }
.cta-panel p { font-size: var(--step-1); color: #a7b3c0; }

/* --------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------ */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

/* The embedded form brings its own card, so this wrapper stays bare. */
.contact-form-panel { min-width: 0; }
.contact-form-panel h2 { font-size: var(--step-2); }

/* The JotForm iframe. Their embed handler sets the real height once loaded;
   the inline height on the element is the pre-load reservation, which stops
   the page shifting under someone who is already reading it. */
.embed { margin-top: 1.5rem; }
.embed iframe {
  display: block;
  width: 100%;
  min-width: 100%;
  border: 0;
}

.form { display: grid; gap: 1.1rem; margin-top: 1.75rem; }

.field { display: grid; gap: 0.4rem; }
.field label { font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.req { color: var(--err); }

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { resize: vertical; min-height: 7rem; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 1.25rem, calc(100% - 0.75rem) 1.25rem;
  background-size: 0.36rem 0.36rem, 0.36rem 0.36rem;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(94, 140, 31, 0.22);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--err); }

.field-help { font-size: var(--step--1); color: var(--muted); margin: 0; }
.field-error { font-size: var(--step--1); color: var(--err); font-weight: 600; margin: 0; }

.field-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: 1.1rem;
}

/* City / State / ZIP — proportioned to what each actually holds. */
.field-trio {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1.1rem;
}
@media (max-width: 30rem) {
  .field-trio { grid-template-columns: 1fr; }
}

.field-radio {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.4rem;
}
.field-radio legend {
  padding: 0;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}
.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.radio {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 550;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.radio:hover { border-color: var(--accent); }
.radio input { accent-color: var(--accent); margin: 0; }
.radio:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-wash);
  font-weight: 650;
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-actions { margin-top: 0.5rem; }
.form-actions .btn { width: 100%; padding-block: 1rem; font-size: 1.05rem; }

.form-status {
  margin: 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  font-weight: 600;
}
.form-status.is-ok  { background: #e8f6ed; color: var(--ok);  border: 1px solid #b7e0c6; }
.form-status.is-err { background: #fdeceb; color: var(--err); border: 1px solid #f5c2be; }

.notice {
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
  margin: 1.5rem 0 0;
}
.notice-test {
  background: #fff8e6;
  border: 1px solid #f0d68a;
  color: #6b4e00;
}

.contact-aside h2 { font-size: var(--step-2); }
.contact-big {
  display: block;
  font-size: var(--step-2);
  font-weight: 750;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
  margin-bottom: 0.35rem;
  word-break: break-word;
}
.contact-big:hover { color: var(--accent-deep); }
.contact-hours { color: var(--muted); font-size: 0.95rem; }
.contact-aside .steps { margin-top: 2.5rem; }
.contact-aside .step-title { font-size: var(--step-0); }

/* --------------------------------------------------------------------------
   Pristine Reserve
   ------------------------------------------------------------------------ */

.tm { font-size: 0.55em; vertical-align: super; letter-spacing: 0; }

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--gap);
  align-items: start;
}
.plan {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
}
.plan-featured { border: 2px solid var(--accent); box-shadow: var(--shadow-md); }
.plan-name {
  font-size: var(--step-1);
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 0.75rem;
}
.plan-price { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.25rem; }
.plan-amount {
  font-size: clamp(2.4rem, 1.9rem + 2vw, 3.2rem);
  font-weight: 780;
  letter-spacing: -0.04em;
  color: var(--ink);
  line-height: 1;
}
.plan-period { color: var(--muted); font-weight: 550; }
.plan-standard {
  font-size: var(--step--1);
  color: var(--muted);
  text-decoration: line-through;
  margin-bottom: 0.35rem;
}
.plan-annual { font-size: var(--step--1); color: var(--muted); margin-bottom: 1.25rem; }
.plan-summary { color: var(--ink-soft); margin-bottom: 1.5rem; }
.plan-includes { margin-bottom: 1.5rem; }

.plan-detail { margin: 0 0 1.5rem; border-top: 1px solid var(--line); font-size: 0.95rem; }
.plan-row {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}
.plan-row dt { color: var(--muted); }
.plan-row dd { margin: 0; color: var(--ink); font-weight: 550; }

.plan-for { font-size: var(--step--1); color: var(--muted); line-height: 1.6; margin-bottom: 1.5rem; }
.plan .btn { margin-top: auto; width: 100%; }

.custom-note, .waiver, .note-inline {
  margin-top: 2rem;
  padding: 1.1rem 1.25rem;
  background: var(--bg-soft);
  border-left: 4px solid var(--brand-green);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.priced-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--gap);
  margin-top: 2rem;
}
.priced { border-top: 3px solid var(--brand-green); padding-top: 1rem; }
.priced-price {
  font-size: var(--step-2);
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 0.2rem;
}
.priced-title { font-weight: 650; color: var(--ink); margin-bottom: 0.35rem; }
.priced-note { font-size: var(--step--1); color: var(--muted); margin: 0; }
.zones-row .priced-price { font-size: var(--step-1); }

.worked-example {
  margin-top: 2.5rem;
  max-width: 52rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.worked-example h3 { font-size: var(--step-1); margin-bottom: 0.75em; }
.worked-example p { color: var(--ink-soft); }

.founding { max-width: 46rem; }
.founding h2 { font-size: var(--step-3); }
.founding p { color: #cfd6de; }

/* Red ticks: these are the things the program does NOT cover. */
.exclusions li::before { border-left-color: var(--err); border-bottom-color: var(--err); }

.reserve-promo {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.reserve-promo-copy .section-head { margin-bottom: 1.5rem; }
.reserve-promo-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.85rem;
}
.reserve-promo-points li {
  position: relative;
  padding-left: 1.8rem;
  margin: 0;
  color: #fff;
  font-weight: 550;
}
.reserve-promo-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.45em;
  width: 0.6rem; height: 0.3rem;
  border-left: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
}

@media (max-width: 60rem) {
  .reserve-promo { grid-template-columns: 1fr; }
  .plan-row { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* --------------------------------------------------------------------------
   Legal / prose
   ------------------------------------------------------------------------ */

.pull-quote {
  margin: 2.5rem 0 0;
  padding-left: 1.5rem;
  border-left: 4px solid var(--brand-green);
  max-width: 44rem;
  font-size: var(--step-2);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

.thanks h2 { margin-top: 3.5rem; font-size: var(--step-2); }

.entity-note { color: var(--muted); font-size: var(--step--1); }

.prose { max-width: 62ch; }
.prose h2 { font-size: var(--step-2); margin-top: 2.25em; }
.prose h2:first-child { margin-top: 0; }
.updated { color: var(--muted); font-size: var(--step--1); margin-bottom: 2rem; }

/* --------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------ */

.site-footer {
  background: var(--bg-ink);
  color: #a7b3c0;
  padding-top: clamp(2.5rem, 2rem + 3vw, 4rem);
  margin-top: 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}

.footer-name {
  color: #fff;
  font-weight: 750;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.footer-area { font-size: 0.95rem; max-width: 24rem; }

.footer-contact, .footer-social, .footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
}
.footer-contact { margin-top: 1.25rem; }
.footer-contact a { font-weight: 650; font-size: 1.05rem; }

.footer-social { margin-top: 1.25rem; grid-auto-flow: column; justify-content: start; gap: 1.25rem; }

.site-footer a { color: #cfd6de; text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }

.footer-col h2 {
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.footer-col li { margin: 0; font-size: 0.95rem; }

.footer-legal {
  border-top: 1px solid #263140;
  padding-block: 1.5rem;
  font-size: var(--step--1);
}
.footer-legal p { margin: 0; }

/* --------------------------------------------------------------------------
   Sticky mobile call bar
   ------------------------------------------------------------------------ */

.call-bar { display: none; }

/* --------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------ */

@media (max-width: 60rem) {
  .hero-home .hero-inner { grid-template-columns: 1fr; }
  /* A photo above the headline is fine; the offer card is not — the pitch has
     to be read before the ask. Only reorder when there is an actual image. */
  .hero-media:has(.hero-image) { order: -1; }
  .hero-image { aspect-ratio: 16 / 9; }
  /* Stacked, the hero buttons and the offer card's button are the same two
     actions twice in a row. The card wins — it explains what you get. */
  .hero-inner:has(.offer-card) .hero-copy .btn-row { display: none; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-aside { order: -1; }
  .contact-aside .steps { margin-top: 1.5rem; }
}

@media (max-width: 1023px) {
  .nav-toggle { display: inline-flex; order: 3; }

  .site-nav {
    display: none;
    order: 4;
    width: 100%;
    padding-bottom: 1rem;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav li { border-top: 1px solid var(--line); margin: 0; }
  .site-nav a {
    display: block;
    padding: 0.9rem 0;
    border-bottom: none;
    border-left: 3px solid transparent;
    padding-left: 0.75rem;
    font-size: 1.05rem;
  }
  .site-nav a[aria-current="page"] { border-left-color: var(--accent); }

  .header-inner { flex-wrap: wrap; }
  /* The sticky call bar already carries the phone number on small screens;
     repeating it in the header only costs space the nav needs. */
  .header-actions { display: none; }

  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }

  /* Phone first on small screens: it is the highest-intent action a facility
     manager takes, and it converts several times better than a form. */
  .call-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 60;
    border-top: 1px solid var(--line-strong);
    background: #fff;
    box-shadow: 0 -4px 16px rgba(13, 34, 55, 0.1);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .call-bar a {
    padding: 1rem 0.5rem;
    text-align: center;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.98rem;
  }
  .call-bar-call { background: var(--ink); color: #fff; }
  .call-bar-quote { background: var(--accent); color: var(--on-accent); }

  body { padding-bottom: 3.75rem; }
}

@media print {
  .site-header, .call-bar, .draft-banner, .btn-row, .jump { display: none; }
  body { padding-bottom: 0; }
  .faq-item[open] .faq-answer, .faq-answer { display: block; }
}

/* --------------------------------------------------------------------------
   Activation cost floors table
   ------------------------------------------------------------------------ */

.floors { margin-top: 2.5rem; }
.floors h3 { font-size: var(--step-1); margin-bottom: 0.6em; }

/* Wide content scrolls inside its own container so the page body never does. */
.table-scroll { overflow-x: auto; margin-top: 1.5rem; }

.floor-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.floor-table th,
.floor-table td {
  padding: 0.7rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.floor-table thead th {
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid var(--line-strong);
  white-space: nowrap;
}
.floor-table .num { text-align: right; white-space: nowrap; }
.floor-plan { font-weight: 650; color: var(--ink); white-space: nowrap; }
.floor-total { font-weight: 750; color: var(--ink); }
.floor-table tbody tr:first-child .floor-total { color: var(--accent-deep); }
.floor-note { margin-top: 1.25rem; }

/* --------------------------------------------------------------------------
   Motion and cursor
   Layout direction borrowed from award-winning corporate sites — oversized
   type, scroll reveals, a marquee band, a full-bleed footer wordmark. What is
   deliberately NOT borrowed: preloaders, scroll-jacking, and multi-megabyte
   payloads. Those win awards and lose facility managers.
   ------------------------------------------------------------------------ */

/* Broom cursor. Hotspot sits at the bristle tip, so pointing still feels
   accurate. Links and fields keep their standard cursors — legibility of
   intent beats novelty on the elements people actually use. */
/* Broom cursor, drawn as a real SVG element that follows the pointer.

   The earlier version used `cursor: url(svg)`. That is rasterised by the OS at
   a fixed small size with no control over antialiasing, which is why it looked
   fuzzy no matter how the artwork was redrawn. A DOM element is composited by
   the browser like any other graphic: crisp at any pixel density, any size.

   `cursor: none` is applied by script via .has-broom, never here. If the script
   does not run, the normal pointer stays — nobody is left with no cursor. */
/* Every element, not a list of them. The stylesheet already sets
   `cursor: pointer` on .btn, summary, .radio and others, and those beat any
   selector list short enough to be readable — which is why the arrow survived
   the first attempt. !important is the right tool for exactly this. */
.has-broom, .has-broom * { cursor: none !important; }

/* No exceptions. Text fields previously kept the system I-beam because it
   shows where the caret will land, but Justin wants the arrow gone entirely
   and it is his site. The broom now covers form fields too.

   One thing genuinely outside our reach: the JotForm embed is a separate
   document and sets its own cursor. Nothing here can change what shows inside
   that frame, so the broom hides while the pointer is over it rather than
   sitting alongside a cursor we cannot remove. */

.broom {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  width: 44px;
  height: 44px;
  pointer-events: none;
  opacity: 0;
  /* Pivot at the handle tip, not the box centre. Rotation and scale both use
     this origin, so the tip stays pinned to the pointer instead of swinging
     away when the broom tilts or grows. */
  transform-origin: 14.2px 4.4px;
  /* Only opacity transitions. Scale lives inside the transform string that
     the script writes each frame — as a standalone property it composes
     OUTSIDE that transform and scales the translation itself, which is what
     was pushing the broom off the pointer on hover. */
  transition: opacity 0.18s ease;
  will-change: transform;
}
.broom.is-on { opacity: 1; }
.broom.is-hidden { opacity: 0; }

/* Reveals. No initial state is applied until the observer adds .reveal, so a
   visitor with JS blocked sees everything immediately rather than a blank page. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; will-change: auto; }

.sparkle {
  position: fixed;
  z-index: 9999;
  width: 7px;
  height: 7px;
  pointer-events: none;
  background: var(--brand-green);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: sweep 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes sweep {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
  to {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
      scale(0.2) rotate(var(--r));
  }
}

/* Marquee band */
.marquee {
  overflow: hidden;
  display: flex;
  background: var(--bg-ink);
  border-block: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: 1.1rem;
  user-select: none;
}
.marquee-track {
  display: flex;
  flex: 0 0 auto;
  gap: 3rem;
  padding-right: 3rem;
  animation: slide 42s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  flex: 0 0 auto;
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
}
.marquee-track span::after {
  content: "◆";
  margin-left: 3rem;
  color: var(--brand-green);
  font-size: 0.6em;
  vertical-align: middle;
}
@keyframes slide { to { transform: translateX(-100%); } }

/* Full-bleed footer wordmark, the one piece of pure showmanship. Clipped so it
   never introduces a horizontal scrollbar. */
.footer-wordmark {
  overflow: hidden;
  padding-top: 2rem;
  line-height: 0.82;
}
.footer-wordmark span {
  display: block;
  font-size: clamp(2.6rem, 13vw, 11rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
  white-space: nowrap;
}
.footer-wordmark span + span {
  color: rgba(255, 255, 255, 0.05);
  -webkit-text-stroke: 0;
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Editorial service index

   The layout language architecture and interiors firms use, and the one award
   convention that survives without photography: the numbering and the type do
   the work. Rows are full-width links; the description is always in the markup
   for search and screen readers, and reveals on hover for sighted visitors.
   ------------------------------------------------------------------------ */

.sindex { border-top: 1px solid var(--line); margin-top: 2.5rem; }

.srow {
  position: relative;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) 2rem;
  align-items: baseline;
  gap: 0 1.5rem;
  padding: clamp(1.4rem, 3vw, 2.4rem) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: padding-left 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Green wash sweeps in from the left on hover. Behind the text, inset so it
   never touches the page gutter. */
.srow::before {
  content: "";
  position: absolute;
  inset: 0 -1.25rem;
  background: var(--bg-soft);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
  border-radius: var(--radius);
}
.srow:hover::before, .srow:focus-visible::before { transform: scaleX(1); }
.srow:hover, .srow:focus-visible { padding-left: 1.25rem; }

.srow-n {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}
.srow-title {
  font-size: clamp(1.4rem, 1rem + 1.9vw, 2.5rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
  text-wrap: balance;
}
.srow-body {
  grid-column: 2;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.55;
  max-width: 46ch;
  margin-top: 0.5rem;
}
.srow-go {
  font-size: 1.5rem;
  color: var(--accent-deep);
  justify-self: end;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.srow:hover .srow-go, .srow:focus-visible .srow-go { transform: translateX(6px); }

/* On a pointer that can hover, the description collapses until it is wanted.
   Touch and keyboard-only visitors always see it — nothing is hidden from
   anyone who cannot trigger a hover. */
@media (hover: hover) and (pointer: fine) {
  .srow-body {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.35s ease, margin-top 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .srow:hover .srow-body,
  .srow:focus-visible .srow-body {
    max-height: 6rem;
    opacity: 1;
    margin-top: 0.5rem;
  }
}

@media (max-width: 34rem) {
  .srow { grid-template-columns: 2.6rem minmax(0, 1fr) 1.4rem; gap: 0 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .srow, .srow::before, .srow-go, .srow-body { transition: none; }
}

/* --------------------------------------------------------------------------
   Cost estimator
   ------------------------------------------------------------------------ */

.calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  margin-top: 2.5rem;
}
.calc { display: grid; gap: 1.1rem; }

.calc-more { margin-top: 0.5rem; }
.calc-more summary {
  cursor: pointer;
  font-weight: 650;
  font-size: 0.95rem;
  color: var(--accent-deep);
  padding: 0.5rem 0;
}
.calc-more > .field-trio { margin-top: 1.1rem; }

/* Sticks while the form is filled in, so the number is never scrolled away
   from the inputs that change it. */
.calc-out {
  position: sticky;
  top: 6rem;
  background: var(--bg-ink);
  color: #cfd6de;
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.calc-out h2 {
  color: #fff;
  font-size: var(--step-1);
  margin-bottom: 1rem;
}
.calc-range {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem);
  font-weight: 780;
  letter-spacing: -0.035em;
  color: #fff;
  line-height: 1.05;
  margin: 0;
}
.calc-dash {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
  color: #93a2b3;
}
.calc-per { color: #93a2b3; font-size: var(--step--1); margin: 0.35rem 0 1.5rem; }

.calc-lines { margin: 0 0 1.5rem; font-size: 0.95rem; }
.calc-lines > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.calc-lines dt { color: #93a2b3; }
.calc-lines dd { margin: 0; color: #fff; font-weight: 650; font-variant-numeric: tabular-nums; }
.calc-total { border-bottom: 0 !important; padding-top: 0.8rem !important; }
.calc-total dt { color: #fff !important; font-weight: 650; }
.calc-total dd { color: var(--brand-green) !important; }

.calc-disclaimer {
  font-size: var(--step--1);
  color: #93a2b3;
  line-height: 1.6;
}
.calc-note { font-size: var(--step--1); color: #93a2b3; margin-top: 1rem; }
.calc-out .btn-row { margin-top: 1.5rem; }
.calc-out .btn-primary { width: 100%; }

@media (max-width: 60rem) {
  .calc-grid { grid-template-columns: 1fr; }
  .calc-out { position: static; }
}

/* The panel is dark but is not .tone-ink, so the ghost button was inheriting
   navy text on a navy background. */
.calc-out .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.calc-out .btn-ghost:hover { border-color: #fff; }

/* Estimator: grouped steps. Fixtures sit in the open rather than behind a
   disclosure, because they move the price as much as floor area does. */
.calc-step {
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
  display: grid;
  gap: 1.1rem;
}
.calc-step:first-child { border-top: 0; padding-top: 0; }
.calc-step-n {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0;
}
.calc-hint {
  font-size: var(--step--1);
  color: var(--muted);
  margin: -0.5rem 0 0;
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   Service figures
   ------------------------------------------------------------------------ */

.service-figure {
  margin: 2.5rem 0 0;
  max-width: 46rem;
}
.service-photo {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}
.service-figure figcaption {
  font-size: var(--step--1);
  color: var(--muted);
  margin-top: 0.7rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Hero entrance
   --------------------------------------------------------------------------
   Runs on load, in CSS, so it starts on the first painted frame rather than
   waiting for a script. Every element animates from opacity 0 with
   `fill-mode: both`, which is safe here because the stylesheet is
   render-blocking — if the CSS arrives at all, the animation runs. If it does
   not, the markup renders as plain visible content.

   Total sequence is under 900ms. A property manager checking this on a phone
   in a parking lot should not be made to watch anything.
   ------------------------------------------------------------------------ */

@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes rise-card {
  from { opacity: 0; transform: translate3d(0, 26px, 0) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes wipe-in {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes field-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -1.5%, 0) scale(1.06); }
}

.hero-home .eyebrow,
.hero-home .hero-title,
.hero-home .lede,
.hero-home .btn-row,
.hero-home .hero-media {
  animation: rise 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-home .eyebrow     { animation-delay: 0.04s; }
.hero-home .hero-title  { animation-delay: 0.12s; }
.hero-home .lede        { animation-delay: 0.24s; }
.hero-home .btn-row     { animation-delay: 0.34s; }
.hero-home .hero-media  { animation: rise-card 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both; }

/* The rail arrives last and wipes rather than rises — it reads as a rule being
   drawn under the statement above it. */
.hero-rail { animation: wipe-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.52s both; }
.hero-rail div { animation: rise 0.5s ease-out both; }
.hero-rail div:nth-child(1) { animation-delay: 0.60s; }
.hero-rail div:nth-child(2) { animation-delay: 0.68s; }
.hero-rail div:nth-child(3) { animation-delay: 0.76s; }
.hero-rail div:nth-child(4) { animation-delay: 0.84s; }

/* The coloured field behind the hero drifts very slowly and indefinitely. It
   is the only perpetual motion on the site; at this speed it registers as
   depth rather than as animation. */
.hero-home::before {
  animation: field-drift 24s ease-in-out infinite alternate;
}

/* Pointer-reactive light. --mx/--my are set by site.js on fine pointers only;
   the fallback position is the default composition, so nothing depends on JS. */
.hero-home::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    38rem 38rem at var(--mx, 80%) var(--my, 15%),
    rgba(132, 185, 58, 0.10),
    transparent 70%
  );
  transition: opacity 0.4s ease;
  opacity: 0;
}
.hero-home.is-lit::after { opacity: 1; }

/* Header condenses once the page moves. */
.site-header { transition: min-height 0.25s ease, box-shadow 0.25s ease; }
.site-header.is-stuck { box-shadow: 0 1px 16px rgba(11, 38, 56, 0.10); }
.site-header.is-stuck .header-inner { min-height: 3.6rem; }
.header-inner { transition: min-height 0.25s ease; }
.site-header.is-stuck .brand-mark { height: 2rem; transition: height 0.25s ease; }
.brand-mark { transition: height 0.25s ease; }

@media (prefers-reduced-motion: reduce) {
  .hero-home .eyebrow,
  .hero-home .hero-title,
  .hero-home .lede,
  .hero-home .btn-row,
  .hero-home .hero-media,
  .hero-rail,
  .hero-rail div,
  .hero-home::before {
    animation: none !important;
  }
  .hero-home::after { display: none; }
}

/* --------------------------------------------------------------------------
   Tap targets
   --------------------------------------------------------------------------
   WCAG 2.2 SC 2.5.8 asks for 24x24 CSS px. Footer and nav links set at 18px
   line-height fall under that on a phone. Padding the block axis lifts the hit
   area without moving anything visually, because the links already sit in
   spaced lists rather than tight rows.
   ------------------------------------------------------------------------ */

.footer-col a,
.link-list a,
.footer-legal a,
.breadcrumbs a,
.footer-contact a,
.header-phone {
  display: inline-block;
  padding-block: 0.28rem;
}

/* The lists already carry their own gaps; pull back the added padding so the
   rhythm of the footer does not change. */
.footer-col li,
.link-list li { margin-bottom: 0.1em; }

/* --------------------------------------------------------------------------
   Before / after pair
   --------------------------------------------------------------------------
   Two frames of the same place, side by side. Not a drag-slider: these were
   shot from different positions, and a slider would imply a single locked
   camera it does not have.
   ------------------------------------------------------------------------ */

.service-pair {
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.service-pair figcaption { grid-column: 1 / -1; }

.pair-half { position: relative; }
.pair-photo {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}
.pair-label {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.4rem 0.65rem;
  border-radius: 2px;
  background: rgba(11, 38, 56, 0.88);
  color: #fff;
}
.pair-after .pair-label { background: var(--accent-deep); }

@media (max-width: 640px) {
  .service-pair { grid-template-columns: 1fr; }
}

/* On the services hub the index IS the page, and a visitor is there to choose.
   Keep every description open. The homepage keeps the hover-reveal, where the
   index is a teaser and the collapsed state keeps the section short. */
@media (hover: hover) and (pointer: fine) {
  .services-hub .srow-body {
    max-height: none;
    opacity: 1;
    margin-top: 0.5rem;
  }
}

/* Display face follows the large type wherever it appears, not just h1-h4. */
.srow-title,
.idx-t,
.hero-title,
.offer-title,
.plan-amount,
.calc-total,
.pull-quote,
.brand-line-1 { font-family: var(--font-display); }

/* Objection-handling at the point of action. Small, quiet, and immediately
   under the button — it is reassurance, not a second headline. */
.cta-reassure {
  margin: 1.1rem 0 0;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #93a7b8;
}
.cta-reassure span { opacity: 0.5; margin-inline: 0.15rem; }
.tone-soft .cta-reassure, .section .cta-reassure { color: var(--muted); }

/* --------------------------------------------------------------------------
   Breaking the container
   --------------------------------------------------------------------------
   Every section was a full-width band with centred content inside it, which is
   what made the page read as competent-but-safe. These are the three places
   the grid is allowed to break. Three, not everywhere — the effect depends on
   the rest of the page holding its line.
   ------------------------------------------------------------------------ */

/* 1. The service figure escapes the text column and runs to the viewport edge
      on one side, so a photograph reads as evidence rather than as an
      illustration sitting politely inside a paragraph. */
@media (min-width: 1000px) {
  .service-figure {
    max-width: none;
    width: calc(50vw + var(--wrap) / 2 - 2rem);
    margin-right: calc(50% - 50vw);
  }
  .service-pair { width: calc(50vw + var(--wrap) / 2 - 2rem); }
}

/* 2. The editorial split's sticky heading hangs into the left gutter, so the
      two columns sit on different optical axes instead of a tidy 50/50. */
@media (min-width: 1100px) {
  .editorial { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }
  .editorial-head { margin-left: clamp(0rem, calc(50% - 50vw + 3rem), 4rem); }
}

/* 3. The process rail runs wider than the prose it follows, so the sequence
      reads as a track laid across the page rather than another paragraph. */
/* The rail may only exceed its column once the viewport is wide enough to
   have that much gutter: --wrap is 72rem, so 3rem each side needs 1248px. */
@media (min-width: 1280px) {
  .rail-steps {
    width: calc(100% + 6rem);
    margin-left: -3rem;
  }
}

/* The header phone is the first thing to go when the row gets tight: it is
   duplicated in the hero, in every closing CTA, and in the mobile sticky bar,
   so losing it here costs nothing and buys the desktop nav ~110px of room. */
@media (max-width: 1151px) {
  .header-phone { display: none; }
}

/* The full-bleed figure escape must not start until the viewport is genuinely
   wider than the content column, or the formula overshoots and pushes the page
   sideways. --wrap is 72rem, so 1240px is the first safe width. */
@media (min-width: 1000px) and (max-width: 1239px) {
  .service-figure,
  .service-pair { width: auto; margin-right: 0; max-width: 46rem; }
  .service-pair { max-width: none; }
}

/* The marquee is a deliberately over-wide track; keep the clipping on the
   element itself so it can never contribute to document scroll width. */
.marquee { max-width: 100%; }

/* --------------------------------------------------------------------------
   Hero photo + offer card
   --------------------------------------------------------------------------
   Two columns, two jobs: the card is the ask and lives with the copy, the
   photograph is the evidence and gets its own column at full height.
   ------------------------------------------------------------------------ */

.hero-home .hero-copy .offer-card { margin-top: 2rem; max-width: 30rem; }
.hero-home .hero-image {
  width: 100%;
  height: 100%;
  min-height: clamp(22rem, 20rem + 18vw, 34rem);
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
}
@media (min-width: 900px) {
  .hero-home .hero-inner { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); }
  .hero-home .hero-media { align-self: stretch; display: flex; }
}
@media (max-width: 899px) {
  /* Evidence before the ask. */
  .hero-home .hero-media { order: -1; }
  .hero-home .hero-image { min-height: 0; aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   Grouped services cards
   --------------------------------------------------------------------------
   Group heading above its own grid, with clear separation between groups so
   the three buying modes read as distinct rather than as one long wall.
   ------------------------------------------------------------------------ */

.sgroup { margin-top: clamp(2.75rem, 2rem + 2.5vw, 4.25rem); }
.sgroup:first-child { margin-top: 2.5rem; }
.sgroup + .sgroup { border-top: 1px solid var(--line); padding-top: clamp(2.25rem, 1.5rem + 2vw, 3.25rem); }

.sgroup-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.5rem;
  margin-bottom: 1.5rem;
}
.sgroup-title {
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  margin: 0;
}
.sgroup-blurb {
  margin: 0;
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.55;
  max-width: 48ch;
  flex: 1 1 22rem;
}

/* --------------------------------------------------------------------------
   Hero photo + offer card
   --------------------------------------------------------------------------
   Two columns, two jobs: the card is the ask and lives with the copy, the
   photograph is the evidence and gets its own column at full height.
   ------------------------------------------------------------------------ */

.hero-home .hero-copy .offer-card { margin-top: 2rem; max-width: 30rem; }
.hero-home .hero-image {
  width: 100%;
  height: 100%;
  min-height: clamp(22rem, 20rem + 18vw, 34rem);
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
}
@media (min-width: 900px) {
  .hero-home .hero-inner { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); }
  .hero-home .hero-media { align-self: stretch; display: flex; }
}
@media (max-width: 899px) {
  /* Evidence before the ask. */
  .hero-home .hero-media { order: -1; }
  .hero-home .hero-image { min-height: 0; aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   Grouped services index
   --------------------------------------------------------------------------
   The group heading sits in the left gutter alongside its rows on wide
   screens, so the page reads as a directory with sections rather than as one
   long list with occasional titles in the way of it.
   ------------------------------------------------------------------------ */

.sgroup { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.sgroup:first-child { margin-top: 2.5rem; }

.sgroup-title {
  font-size: var(--step-1);
  letter-spacing: -0.01em;
  margin: 0 0 0.4rem;
}
.sgroup-blurb {
  margin: 0;
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.55;
  max-width: 34ch;
}
.sgroup .sindex { margin-top: 0; }

@media (min-width: 1000px) {
  .sgroup {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: 0 clamp(2rem, 4vw, 4rem);
    align-items: start;
  }
  .sgroup-head { position: sticky; top: 6.5rem; padding-top: 1.6rem; }
  .sgroup .sindex { border-top: 1px solid var(--line); }
}

@media (max-width: 999px) {
  .sgroup-head { margin-bottom: 1.25rem; }
}