/* Pocono Pristine Properties
   ---------------------------------------------------------------------------
   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 palette is sampled from the existing logo: navy #103A67, green #84B93A,
   blue #1B7AB5. The brand green is bright enough to fail contrast as text on
   white, so --accent is a darkened version that passes, and the bright green
   is kept for decoration and for use on dark navy where it reads well.
   ------------------------------------------------------------------------- */

:root {
  --ink:        #0d2237;
  --ink-soft:   #33465a;
  --muted:      #5f7286;
  --line:       #dfe6ec;
  --line-strong:#c3cfda;
  --bg:         #ffffff;
  --bg-soft:    #f2f6f9;
  --bg-ink:     #0f2f52;

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

  --accent:     #5e8c1f;
  --accent-hi:  #6fa22e;
  --accent-deep:#4a7016;
  --accent-lite:#9ccb54;
  --on-accent:  #ffffff;

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

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

  --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:   10px;
  --radius-lg:16px;

  --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;
}

h1, h2, h3, h4 {
  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-hi); }

.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
   ------------------------------------------------------------------------ */

.hero {
  padding-block: clamp(3rem, 2rem + 5vw, 6rem);
  background:
    radial-gradient(1200px 400px at 15% -10%, rgba(132, 185, 58, 0.18), transparent 65%),
    radial-gradient(900px 380px at 85% -20%, rgba(27, 122, 181, 0.14), transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}

.hero-home .hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

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

.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: 5px solid var(--brand-green);
  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(--brand-green);
  border-bottom: 2.5px solid var(--brand-green);
  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(13rem, 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(--brand-green);
  border-bottom: 2.5px solid var(--brand-green);
  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(17rem, 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: #1b232c; border-color: #2b3642; }

.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(19rem, 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(19rem, 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(16rem, 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(17rem, 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: #f1f7e8; }

/* --------------------------------------------------------------------------
   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(13rem, 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: #f1f7e8;
  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(20rem, 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(15rem, 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(--brand-green);
  border-bottom: 2.5px solid var(--brand-green);
  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(11rem, 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: 52rem) {
  .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; }

/* Text entry keeps the system I-beam: knowing where the caret lands beats the
   novelty, and the broom hides itself over these. */
.has-broom input,
.has-broom textarea,
.has-broom select,
.has-broom iframe { cursor: auto !important; }
.has-broom textarea { cursor: text !important; }

.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;
  transition: opacity 0.18s ease, scale 0.18s ease;
  will-change: transform;
}
.broom.is-on { opacity: 1; }
.broom.is-over { scale: 1.18; }
.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; }
}