/**
 * Sticky split layout — matches homepage hero framing:
 * 50/50 grid, left copy vertically centered, right stages at viewport height.
 */
:root {
  --sc-nav-float-top: 14px;
  --sc-nav-block-height: 90px;
  --sc-sticky-top: calc(var(--sc-nav-float-top) + var(--sc-nav-block-height));
  --sc-sticky-stage-gap: 20px;
  --sc-phase-gap: 18px;
  --sc-snake-panel-height: calc(100vh - var(--sc-sticky-top) - var(--sc-sticky-stage-gap));
}

@supports (height: 100dvh) {
  :root {
    --sc-snake-panel-height: calc(100dvh - var(--sc-sticky-top) - var(--sc-sticky-stage-gap));
  }
}

.sticky-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  box-sizing: border-box;
}

.sticky-pane {
  position: sticky;
  top: var(--sc-sticky-top);
  height: var(--sc-snake-panel-height);
  max-height: var(--sc-snake-panel-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px var(--sc-text-pad-x, var(--sc-chrome-pad-x, 34px));
  background: var(--bg);
  box-sizing: border-box;
  align-self: start;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.scroll-panels {
  display: flex;
  flex-direction: column;
  gap: var(--sc-phase-gap);
  padding: 0 0 var(--sc-sticky-stage-gap);
  box-sizing: border-box;
}

.scroll-panel {
  min-height: var(--sc-snake-panel-height);
  height: var(--sc-snake-panel-height);
  display: flex;
  align-items: center;
  padding: 80px var(--sc-chrome-pad-x, 34px);
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: var(--bg2, #f7f5f1);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.scroll-panel:nth-child(even) {
  background: #ece9e4;
}

/* Body copy in sticky panes — matches page subtitle scale */
.sticky-section .sp-desc,
.sticky-section .sp-panel-body,
.sticky-section .sp-panel-lead {
  font-size: 1.05rem;
}

/*
 * Heading hierarchy — display case via CSS (HTML copy stays as authored).
 * Eyebrows: ALL CAPS + 0.45em tracking (architectural labels)
 * H2 .sp-title: sentence case — text-transform: none
 * H3 .sp-panel-head: Title Case — text-transform: none (not capitalize; preserves short words & punctuation)
 * Feature bullets: sentence case; first letter capitalized via ::first-letter (HTML may be lowercase)
 */
.sticky-section .sp-tag,
.sticky-section .sp-panel-tag {
  letter-spacing: 0.45em;
  text-transform: uppercase;
}

.sticky-section .sp-title,
.sticky-section .sp-panel-head {
  text-transform: none;
}

.sticky-section .sp-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
}

.sticky-section .sp-features li {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: none;
  color: var(--text3);
  position: relative;
  padding-left: 18px;
  line-height: 1.5;
}

/* Block layout (not flex) so ::first-letter applies to bullet copy */
.sticky-section .sp-features li::first-letter {
  text-transform: uppercase;
}

.sticky-section .sp-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 8px;
  height: 8px;
  background: var(--yellow);
  border-radius: 50%;
}

.sticky-section .scroll-panel:nth-child(2) .sp-features li::before,
.sticky-section .scroll-panel:nth-child(4) .sp-features li::before {
  background: #111;
}

@media (max-width: 768px) {
  :root {
    --sc-nav-float-top: 10px;
    --sc-nav-block-height: 82px;
    --sc-snake-panel-height: min(320px, calc(100dvh - var(--sc-sticky-top) - 16px));
  }

  .sticky-section {
    grid-template-columns: 1fr;
    min-height: auto !important;
    padding-bottom: 64px;
  }

  .sticky-pane {
    position: relative;
    top: auto;
    height: auto;
    max-height: none;
    padding: 48px var(--sc-page-pad-x, 24px);
  }

  .scroll-panels {
    width: 100%;
    padding: 0 var(--sc-page-pad-x, 24px) var(--sc-sticky-stage-gap);
  }

  .scroll-panel {
    width: 100%;
    min-height: auto;
    height: auto;
    overflow: visible;
    align-items: flex-start;
    padding: 40px var(--sc-page-pad-x, 24px);
  }

  .scroll-panel .scroll-panel-content,
  .scroll-panel > div:not(.panel-num) {
    width: 100%;
    max-width: none;
  }
}