/* Shared 'service page' template components (.sp-*) — used by end-to-end-solar-services.html,
   pe-stamping.html, permitting-service.html, plansets.html, pto-interconnection.html,
   sales-proposals.html, and site-survey.html. Page-specific .sp-* blocks that only one
   page uses stay in that page's own CSS file. */

/* ---- Template details (label + card grid) ---- */

.sp-details {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  background: var(--white-pure);
  padding: clamp(64px,9vw,112px) var(--gutter-x);
}

.sp-details-grid {
  grid-template-columns: minmax(240px,380px) 1fr;
  gap: clamp(32px,6vw,64px);
}

.sp-details-heading {
  margin: 0 0 20px;
  font-family: 'Geist', sans-serif;
  font-weight: 250;
  font-size: clamp(28px,3vw,40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-charcoal);
}

.sp-details-text {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.sp-details-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap: 20px;
  align-content: start;
}

.sp-details-bullets {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.sp-details-bullet {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.sp-details-bullet-dot {
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ---- Tool compatibility (platform breakdown + "service at a glance" table) ----
   Centered single column, modeled on .sp-compare (below): numbered
   .value-card pair for the platform breakdown (same component as the
   Template Details grid above), closed by a bordered label/value table in
   the same dark-header-plus-rows shape as .sp-compare-table. */

.sp-compat {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  background: var(--surface-section-alt);
  padding: clamp(64px,9vw,112px) var(--gutter-x);
}

.sp-compat--white {
  background: var(--white-pure);
}

.sp-compat-inner {
  box-sizing: border-box;
  max-width: 860px;
  margin: 0 auto;
}

.sp-compat-heading {
  margin: 0 0 20px;
  font-family: 'Geist', sans-serif;
  font-weight: 250;
  font-size: clamp(28px,3vw,40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-charcoal);
}

.sp-compat-text {
  margin: 0 0 clamp(40px,5vw,56px);
  max-width: 640px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.sp-compat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap: 20px;
}

.sp-compat-footnote {
  margin: clamp(32px,4vw,40px) 0 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.sp-compat-table {
  margin-top: clamp(40px,5vw,56px);
  border: 1px solid var(--surface-card-border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.sp-compat-table-head {
  padding: clamp(18px,2.4vw,22px) clamp(20px,3vw,32px);
  background: var(--text-charcoal);
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: clamp(16px,1.5vw,18px);
  letter-spacing: -0.01em;
  color: #fff;
}

.sp-compat-table-row {
  box-sizing: border-box;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(14px,1.8vw,18px) clamp(20px,3vw,32px);
  background: var(--white-pure);
}

.sp-compat-table-row + .sp-compat-table-row {
  border-top: 1px solid var(--surface-border);
}

.sp-compat-table-label {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(14px,1.2vw,15px);
  color: var(--text-secondary);
}

.sp-compat-table-value {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: clamp(14px,1.2vw,15px);
  text-align: right;
  color: var(--color-primary);
}

@media (max-width: 480px) {
  .sp-compat-table-row {
    flex-direction: column;
    gap: 4px;
  }
  .sp-compat-table-value {
    text-align: left;
  }
}

/* ---- Process (pinned scroll stack-of-cards) ---- */

.sp-process {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  background: var(--green-forest);
  padding: clamp(64px,9vw,112px) var(--gutter-x) clamp(96px,12vw,160px);
}

.sp-process-grid {
  grid-template-columns: minmax(240px,1fr) minmax(0,1.4fr);
  gap: clamp(32px,6vw,80px);
  align-items: stretch;
}

.sp-process-sticky {
  align-self: start;
}

.sp-process-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--green-leaf);
  font-family: 'Inter', sans-serif;
}

.sp-process-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-leaf);
  display: inline-block;
}

.sp-process-title {
  margin: 0 0 20px;
  font-family: 'Geist', sans-serif;
  font-weight: 250;
  font-size: clamp(36px,4.2vw,56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
}

.sp-process-text {
  margin: 0;
  max-width: 380px;
  font-family: 'Inter', sans-serif;
  font-size: clamp(15px,1.2vw,17px);
  line-height: 1.65;
  color: rgba(255,255,255,0.72);
}

.sp-process-count {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: clamp(28px,4vw,48px);
  font-family: 'Geist', sans-serif;
}

.sp-process-count-num {
  font-size: clamp(28px,2.6vw,36px);
  font-weight: 600;
  color: var(--gold-solar, #C7A34A);
}

.sp-process-count-label {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
}

.sp-stack-outer {
  box-sizing: border-box;
  position: relative;
  width: 100%;
}

.sp-stack-pin {
  box-sizing: border-box;
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-stack-frame {
  position: relative;
  width: 100%;
  height: clamp(360px,28vw,420px);
}

.sp-stack-card {
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  background: var(--surface-card);
  border: 1px solid var(--surface-card-border);
  border-radius: 32px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: box-shadow 300ms ease;
  will-change: transform, opacity;
}

.sp-stack-card--1 { z-index: 5; }

.sp-stack-card--2 { z-index: 4; }

.sp-stack-card--3 { z-index: 3; }

.sp-stack-card--4 { z-index: 2; }

.sp-stack-card--5 { z-index: 1; }

.sp-stack-card--6 { z-index: 0; }

.sp-stack-card-inner {
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  padding: clamp(40px,5vw,64px);
}

.sp-stack-card-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1;
}

.sp-stack-card-num {
  position: absolute;
  top: -22px;
  right: -18px;
  left: auto;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(120px,12vw,175px);
  line-height: 1;
  color: rgba(31,91,79,0.06);
  z-index: 0;
  user-select: none;
  pointer-events: none;
}

.sp-stack-card-body {
  position: relative;
  z-index: 1;
}

.sp-stack-step-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.sp-stack-step-bar {
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: var(--color-primary);
  display: inline-block;
}

.sp-stack-step-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.sp-stack-step-title {
  margin: 0 0 28px;
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: clamp(34px,4.6vw,60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-charcoal);
}

.sp-stack-step-text {
  margin: 0;
  max-width: 640px;
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.sp-stack-step-text strong {
  font-weight: 600;
  color: var(--text-charcoal);
}

/* ---- Engineering reviews masonry grid ---- */

.sp-masonry {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  background: var(--deco-mint);
  padding: clamp(64px,9vw,112px) var(--gutter-x);
}

.sp-masonry-grid {
  box-sizing: border-box;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(240px,1.15fr) minmax(220px,1fr) minmax(240px,1.15fr);
  gap: 20px;
}

.sp-masonry-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sp-masonry-title {
  margin: 0 0 14px;
  font-family: 'Geist', sans-serif;
  font-weight: 250;
  font-size: clamp(28px,3vw,40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-charcoal);
}

.sp-masonry-lead {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.sp-masonry-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--surface-card-border);
  border-radius: 20px;
  padding: clamp(24px,2.6vw,32px);
}

.sp-masonry-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.sp-masonry-card-number {
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-accent);
}

.sp-masonry-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--deco-mint);
  color: var(--color-primary);
}

.sp-masonry-card-icon svg {
  width: 22px;
  height: 22px;
}

.sp-masonry-card--plain .sp-masonry-card-icon {
  margin-bottom: 20px;
}

.sp-masonry-card-title {
  margin: 0 0 10px;
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-charcoal);
}

.sp-masonry-card-rule {
  display: block;
  width: 28px;
  height: 2px;
  margin-bottom: 16px;
  background: var(--surface-border);
}

.sp-masonry-card-text {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.sp-masonry-card--dark {
  background: var(--green-forest);
  border-color: var(--green-forest);
}

.sp-masonry-card--dark .sp-masonry-card-icon {
  background: rgba(255,255,255,0.14);
  color: #fff;
}

.sp-masonry-card--dark .sp-masonry-card-title {
  color: #fff;
}

.sp-masonry-card--dark .sp-masonry-card-text {
  color: rgba(255,255,255,0.75);
}

.sp-masonry-photo {
  position: relative;
  min-height: clamp(240px,22vw,320px);
  border-radius: 20px;
  overflow: hidden;
}

.sp-masonry-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1024px) {
  .sp-masonry-grid {
    grid-template-columns: repeat(2,1fr);
  }
  /* 9 cells over 2 columns leaves the last (dark) card alone on its row —
     span it full width instead of leaving an empty slot beside it. */
  .sp-masonry-grid > *:last-child {
    grid-column: 1 / -1;
  }
}

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

/* ---- Deliverables (heading + numbered row list) ---- */

.sp-deliverables {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  background: var(--surface-section-alt);
  padding: clamp(64px,9vw,112px) var(--gutter-x);
}

.sp-deliverables-grid {
  grid-template-columns: minmax(320px,1.35fr) minmax(220px,1fr);
  gap: clamp(48px,9vw,104px);
}

.sp-deliverables-title {
  margin: 0;
  font-family: 'Geist', sans-serif;
  font-weight: 250;
  font-size: clamp(28px,3vw,40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-charcoal);
}

.sp-deliverables-text {
  margin: 20px 0 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(15px,1.2vw,17px);
  line-height: 1.65;
  color: var(--text-secondary);
}

.sp-deliverables-list {
  border-top: 1px solid var(--surface-border);
}

.sp-deliverables-row {
  box-sizing: border-box;
  padding: clamp(20px,2.6vw,28px) 0;
  border-bottom: 1px solid var(--surface-border);
  text-align: right;
}

.sp-deliverables-index {
  display: block;
  margin-bottom: 8px;
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold-solar);
}

.sp-deliverables-item {
  margin: 0;
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(22px,2.8vw,32px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text-charcoal);
}

/* ---- Service at a glance (dark spec card) ---- */

.sp-glance {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  background: var(--surface-section-alt);
  padding: clamp(64px,9vw,112px) var(--gutter-x);
}

.sp-glance-card {
  box-sizing: border-box;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(24px,3vw,36px);
  background: var(--green-forest);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
}

.sp-glance-title {
  margin: 0 0 8px;
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: clamp(18px,1.8vw,20px);
  color: #fff;
}

.sp-glance-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.sp-glance-row:last-child {
  border-bottom: none;
}

.sp-glance-label {
  flex: 0 0 auto;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: rgba(255,255,255,0.6);
}

.sp-glance-value {
  margin: 0;
  text-align: right;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5;
  color: #fff;
}

/* ---- Why this is different (intro + value cards + spec card) ---- */

.sp-why {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  background: var(--surface-section-alt);
  padding: clamp(64px,9vw,112px) var(--gutter-x);
}

.sp-why-glance {
  margin-top: clamp(48px,6vw,80px);
}

/* ---- Two-phase milestone flows (one horizontal track per phase, Geist + Inter only) ----
   --steps is set inline per track. The connector runs from the first node's centre
   to the last node's centre. On phones the track turns vertical. */

.sp-flow {
  display: flex;
  flex-direction: column;
  gap: clamp(48px,6vw,72px);
}

.sp-flow-label {
  display: block;
  margin-bottom: 28px;
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold-solar);
}

.sp-flow-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--steps),minmax(0,1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-flow-track::before {
  content: '';
  position: absolute;
  top: 21px;
  left: 22px;
  right: calc(100% / var(--steps) - 22px);
  height: 2px;
  background: var(--green-forest);
}

.sp-flow-step {
  position: relative;
  padding-right: clamp(16px,2.4vw,32px);
}

.sp-flow-node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--green-forest);
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.sp-flow-title {
  margin: 20px 0 10px;
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: clamp(18px,1.8vw,22px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-charcoal);
}

.sp-flow-text {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
}

@media (max-width: 767px) {
  .sp-flow-track {
    grid-template-columns: 1fr;
  }
  .sp-flow-track::before {
    top: 22px;
    bottom: 22px;
    left: 21px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .sp-flow-step {
    padding: 0 0 32px 64px;
  }
  .sp-flow-step:last-child {
    padding-bottom: 0;
  }
  .sp-flow-node {
    position: absolute;
    top: 0;
    left: 0;
  }
  .sp-flow-title {
    margin-top: 0;
  }
}

/* ---- Closing CTA banner (parallax photo, matches About's about-cta-banner) ---- */

.sp-cta-banner {
  box-sizing: border-box;
  position: relative;
  width: min(100% - 2 * clamp(16px,2.5vw,32px), 1100px);
  margin: clamp(64px,8vw,120px) auto;
  min-height: clamp(300px,32vw,380px);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.sp-cta-banner-img {
  position: absolute;
  top: -16%;
  left: 0;
  width: 100%;
  height: 132%;
  object-fit: cover;
  display: block;
  will-change: transform;
}

/* ---- FAQ (accordion list + "still have a question" card) ---- */

/* Sticky like .sp-cta-banner above it: pins at `top` while the page keeps
   scrolling, and .site-footer (z-index: 101) scrolls up over it — same
   reveal effect as the CTA banner had with the footer. Asymmetric padding
   (small above, large below) keeps the gap after the banner tight while
   giving the sticky section a long runway before the footer catches it. */
.sp-faq {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  background: var(--white-pure);
  padding: clamp(28px,3.5vw,48px) var(--gutter-x) clamp(120px,16vw,220px);
}

/* Opt out of the sticky/reveal effect above for pages whose FAQ list is long
   enough that the section is routinely taller than the viewport — same
   problem (and same fix) responsive.css already applies to every .sp-faq at
   phone width: a sticky box taller than the viewport freezes with its lower
   portion off-screen, so the last accordion items never become reachable.
   Falling back to normal flow keeps every item scrollable; other pages keep
   the sticky effect since their shorter lists fit the viewport while pinned. */
.sp-faq--static {
  position: static;
  padding-bottom: clamp(56px,10vw,88px);
}

/* Default FAQ layout for every service page: on laptop and wider, the left
   heading/card stays pinned while the accordion scrolls past it. The section
   itself is not sticky, so a long accordion can always be scrolled to its end. */
@media (min-width: 1025px) {
  .sp-faq-grid > :first-child {
    position: sticky;
    top: clamp(96px,12vh,140px);
  }
}

.sp-faq-inner {
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
}

.sp-faq-grid {
  grid-template-columns: minmax(280px,400px) 1fr;
  gap: clamp(40px,6vw,72px);
}

.sp-faq-head {
  margin-bottom: clamp(28px,4vw,40px);
}

.sp-faq-card {
  box-sizing: border-box;
  background: var(--deco-mint);
  border: 1px solid var(--surface-card-border);
  border-radius: 20px;
  padding: clamp(28px,3.2vw,40px);
}

.sp-faq-card-title {
  margin: 0 0 12px;
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: clamp(19px,2vw,24px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-charcoal);
}

.sp-faq-card-text {
  margin: 0 0 24px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.sp-faq-list {
  border-top: 1px solid var(--surface-border);
}

.sp-faq-item {
  border-bottom: 1px solid var(--surface-border);
}

.sp-faq-question {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  margin: 0;
  padding: clamp(20px,2.6vw,26px) 2px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: clamp(16px,1.6vw,19px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-charcoal);
}

.sp-faq-icon {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--surface-border);
  color: var(--text-charcoal);
  transition: background 240ms ease, border-color 240ms ease, color 240ms ease, transform 240ms ease;
}

.sp-faq-item.is-open .sp-faq-icon {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  transform: rotate(180deg);
}

/* Answer is always in the DOM (no mount/unmount) so its open/close can
   transition instead of popping. The 0fr/1fr grid-row trick animates a
   track sized by its content's natural height — plain `height` can't
   transition to/from `auto`, and a guessed fixed max-height either clips
   long answers or makes short ones animate at the wrong speed. */
.sp-faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms cubic-bezier(0.4,0,0.2,1);
}

.sp-faq-item.is-open .sp-faq-answer-wrap {
  grid-template-rows: 1fr;
}

.sp-faq-answer {
  overflow: hidden;
  min-height: 0;
  padding-right: clamp(0px,4vw,54px);
  opacity: 0;
  transition: opacity 220ms ease;
}

.sp-faq-item.is-open .sp-faq-answer {
  opacity: 1;
  transition: opacity 280ms ease 100ms;
}

.sp-faq-answer p {
  margin: 0;
  padding-bottom: 22px;
  max-width: 62ch;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* ---- Page shell ---- */

body { margin: 0; background: var(--white-pure); }

a { color: var(--link); text-decoration: none; }

a:hover { color: var(--link-hover); }

/* ---- Service scope (title/subtitle header + cursor-follow hover list) ---- */

.sp-expect {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  background: var(--surface-section-alt);
  padding: clamp(96px,13vw,160px) var(--gutter-x) clamp(64px,9vw,112px);
}

.sp-expect-grid {
  grid-template-columns: minmax(280px,1fr) minmax(240px,420px);
  gap: clamp(24px,5vw,64px);
  margin-bottom: clamp(40px,6vw,64px);
}

.sp-expect-title {
  margin: 0;
  font-family: 'Geist', sans-serif;
  font-weight: 250;
  font-size: clamp(28px,3vw,40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-charcoal);
}

.sp-expect-text {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(16px,1.3vw,19px);
  line-height: 1.65;
  color: var(--text-secondary);
}

.sp-expect-list {
  box-sizing: border-box;
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  border-top: 1px solid var(--surface-border);
}

.sp-expect-footnote {
  max-width: 760px;
  margin: clamp(32px,5vw,48px) auto 0;
  font-family: 'Inter', sans-serif;
  font-size: clamp(15px,1.1vw,17px);
  line-height: 1.7;
  color: var(--text-secondary);
  text-align: center;
}

.sp-expect-item {
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(22px,3vw,32px) clamp(16px,2vw,24px);
  border-bottom: 1px solid var(--surface-border);
  background-color: transparent;
  transition: background-color 350ms ease;
}

.sp-expect-item:hover {
  background-color: var(--deco-frost, #F4F8F4);
}

.sp-expect-item-num {
  flex-shrink: 0;
  width: 28px;
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-primary);
}

.sp-expect-item-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sp-expect-item-badge {
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

.sp-expect-item-title {
  margin: 0;
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: clamp(19px,2.2vw,26px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-charcoal);
  transition: color 240ms ease;
}

.sp-expect-item:hover .sp-expect-item-title {
  color: var(--color-primary);
}

.sp-expect-item-caption {
  margin: 0;
  max-width: 46ch;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.sp-expect-item-arrow {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--surface-border);
  color: var(--text-charcoal);
  transition: background 240ms ease, border-color 240ms ease, color 240ms ease, transform 240ms ease;
}

.sp-expect-item:hover .sp-expect-item-arrow {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  transform: rotate(45deg);
}

/* Floating preview photo: positioned at a fixed size (same box for every
   item), JS drives its transform to chase the cursor (see setupExpectHover()
   in the component script), clamped to stay clear of the viewport edges.
   Every item's photo is stacked inside it at that same size and crossfaded
   by toggling .is-active. */

.sp-expect-preview {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: clamp(220px,18vw,260px);
  aspect-ratio: 3/2;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--surface-section-alt);
  opacity: 0;
  pointer-events: none;
  transition: transform 400ms cubic-bezier(0.2,0.8,0.2,1), opacity 200ms ease;
  will-change: transform;
}

.sp-expect-preview.is-visible {
  opacity: 1;
}

.sp-expect-preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 250ms ease;
}

.sp-expect-preview-img.is-active {
  opacity: 1;
}

/* ==========================================================================
   Tablet band (768px–1024px). Desktop rules apply above it; the mobile
   rules (max-width: 767px, in responsive.css) apply below it. Only the gap
   in between is addressed here.
   ========================================================================== */

/* Every section below is a label/content split whose label track is sized in
   absolute pixels (240-400px). That is a reasonable share of a 1400px desktop
   row, but of the ~750px a tablet actually has it leaves the content track —
   the part carrying the cards, the step stack, the deliverables list, the
   accordion — with barely 300px. The result is one card per row, three-line
   step titles, and an accordion narrower than the "still have a question"
   box next to it. Stack them the way the mobile rules already stack every
   .split-grid, so the content track gets the section's full width. The hero,
   contact and "what to expect" splits are deliberately left alone: their two
   columns are both text and still read well side by side at this width. */
@media (min-width: 768px) and (max-width: 1024px) {
  .sp-details-grid,
  .sp-process-grid,
  .sp-deliverables-grid,
  .sp-faq-grid {
    grid-template-columns: 1fr;
  }

  /* Desktop's side-by-side gaps (up to 104px) become vertical space once the
     columns stack, which would otherwise leave a hole between the intro and
     the content it introduces. */
  .sp-details-grid,
  .sp-deliverables-grid,
  .sp-faq-grid {
    gap: 32px;
  }
  .sp-process-grid {
    gap: 24px;
  }

  /* A sticky label needs a taller sibling beside it to scroll against; once
     stacked there isn't one, so it would pin over the content below it. */
  .sp-process-sticky,
  .sp-deliverables-grid > .split-grid-sticky,
  .sp-faq-grid > .split-grid-sticky {
    position: static;
    top: auto;
  }

  /* The step cards now span the section instead of a ~390px column. Their
     frame is still centred inside a 100vh pin, so grow it to match — at the
     desktop size it reads as a small card adrift in a tall empty box. */
  .sp-stack-frame {
    height: min(62vh, 460px);
  }

  /* The service-scope list's preview photo chases the cursor, which a tablet
     doesn't have — same reason the mobile rules drop it. The item title and
     caption already carry the information. */
  .sp-expect-preview {
    display: none;
  }
}

/* ---- Provider comparison table ---- */

.sp-compare {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  background: var(--white-pure);
  padding: clamp(64px,9vw,112px) var(--gutter-x);
}

.sp-compare-inner {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

.sp-compare-title {
  margin: 0 0 16px;
  font-family: 'Geist', sans-serif;
  font-weight: 250;
  font-size: clamp(28px,3.4vw,42px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-charcoal);
}

.sp-compare-table {
  border: 1px solid var(--surface-card-border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.sp-compare-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.sp-compare-row + .sp-compare-row {
  border-top: 1px solid var(--surface-border);
}

.sp-compare-cell {
  box-sizing: border-box;
  padding: 18px clamp(16px,3vw,32px);
  font-family: 'Inter', sans-serif;
  font-size: clamp(13px,1.4vw,15px);
  line-height: 1.5;
  text-align: center;
}

.sp-compare-cell--left {
  color: var(--text-secondary);
}

.sp-compare-cell--right {
  font-weight: 600;
  color: var(--color-primary);
}

.sp-compare-row--header .sp-compare-cell {
  padding: clamp(18px,2.4vw,24px) clamp(16px,3vw,32px);
  font-family: 'Geist', sans-serif;
  font-weight: 600;
}

.sp-compare-row--header .sp-compare-cell--left {
  background: var(--text-charcoal);
  color: #fff;
}

.sp-compare-row--header .sp-compare-cell--right {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--deco-cream);
}

.sp-compare-logo {
  display: block;
  height: clamp(32px,4vw,48px);
  width: auto;
}

.sp-compare-summary {
  margin: 0 0 clamp(40px,6vw,56px);
  font-family: 'Inter', sans-serif;
  font-size: clamp(15px,1.2vw,17px);
  line-height: 1.65;
  color: var(--text-secondary);
}

/* ---- Process intro link (on the dark process background) ---- */

.sp-process-link {
  color: var(--green-leaf);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sp-process-link:hover {
  color: #fff;
}