/* Each chapter fills a viewport; taller chapters keep their content reachable. */
html {
  scroll-snap-type: y mandatory;
}

main > .hero,
main > .choice-intro,
main > .why-page,
main > .snap-panel,
main > .capabilities,
body > .site-footer {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

main > .snap-panel,
main > .capabilities {
  min-height: 100svh;
}

main > .snap-panel {
  display: flex;
  flex-direction: column;
}

main > .why-page,
main > .snap-panel,
main > .capabilities,
main > .choice-intro {
  position: relative;
}

/* One quiet cue stays in place while chapters change beneath it. */
.identity-scroll {
  --arrow-idle: rgba(157, 178, 164, .17);
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: 24px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  color: var(--arrow-idle);
}
.identity-scroll svg { width: 24px; height: 17px; }
.identity-scroll path { stroke-width: 4; }
.identity-scroll[data-tone="light"] { --arrow-idle: rgba(30, 48, 39, .16); }
.identity-scroll:hover { color: rgba(157, 178, 164, .43); }
.identity-scroll[data-tone="light"]:hover { color: rgba(30, 48, 39, .4); }
.identity-scroll.is-page-pulse { animation: page-arrow-pulse .85s ease-out; }
@keyframes page-arrow-pulse {
  0%, 100% { color: var(--arrow-idle); filter: drop-shadow(0 0 0 transparent); }
  35% { color: #69dca8; filter: drop-shadow(0 0 7px rgba(105, 220, 168, .68)); }
}
.identity-scroll[hidden] { display: none !important; }

.snap-tail {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.snap-tall > .snap-tail {
  scroll-snap-align: end;
  scroll-snap-stop: normal;
}

.snap-interior {
  position: absolute;
  right: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

main > .snap-panel > section {
  flex: 1 0 auto;
}

main > .capabilities { padding-top: 132px; }

/* The fixed navigation must not cover a chapter title at a snap boundary. */
.why-page > .chapter-divider,
.snap-panel > .chapter-divider {
  min-height: 220px;
  padding-top: 110px;
  padding-bottom: 20px;
  align-items: center;
}

/* The chapter title is part of its page, not a separate snap stop. */
#why-choied,
#approach,
#clients,
#company {
  scroll-margin-top: 0;
}

body > .site-footer {
  scroll-snap-align: end;
}

@media (max-width: 700px) {
  .why-page > .chapter-divider,
  .snap-panel > .chapter-divider {
    min-height: 185px;
    padding-top: 110px;
    padding-bottom: 12px;
  }

  main > .capabilities { padding-top: 125px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
  .identity-scroll.is-page-pulse { animation: none; }
}

/* Keep desktop chapters on the same quieter scale as the opening visual. */
@media (min-width: 901px) {
  :root {
    --pad: max(32px, calc((100vw - 1000px) / 2));
    --type-chapter: clamp(50px, 4.2vw, 60px);
    --type-headline: clamp(44px, 3.8vw, 54px);
    --type-body: 16px;
    --type-item: clamp(21px, 1.7vw, 24px);
  }
  .agency-perspective h3 { font-size: clamp(23px, 1.9vw, 27px); }
  .agency-perspective p { font-size: 16px; }
  .sequence-intro h2 { font-size: var(--type-headline); }
  .approach-funnel iframe { height: 438px; }
  .clients { padding-top: 64px; padding-bottom: 64px; }
  .clients-heading { margin-bottom: 28px; }
  .client-roster .client-logo { height: 66px; }
  .company-grid p { font-size: clamp(19px, 1.6vw, 23px); }
}

/* Match the diagram's first-paint height so later chapters do not shift on load. */
@media (min-width: 561px) and (max-width: 900px) {
  .approach-funnel iframe { height: 438px; }
}
@media (max-width: 560px) {
  .approach-funnel iframe { height: 419px; }
}

/* One page frame for every chapter. Content-heavy pages may grow instead of clipping. */
:root {
  --page-chapter-height: 220px;
  --page-content-inset: clamp(32px, 4.5svh, 54px);
  --page-heading-gap: clamp(24px, 3.5svh, 40px);
}

main > .why-page,
main > .snap-panel,
main > .capabilities { min-height: 100svh; }

.why-page > .chapter-divider,
.snap-panel > .chapter-divider {
  height: var(--page-chapter-height);
  min-height: var(--page-chapter-height);
}

/* Let Priority use the same viewport center as Capability; keep its chapter title above. */
.why-page:not(.why-page-capability) > .chapter-divider {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
}
.why-page:not(.why-page-capability) > .agency-section {
  min-height: 100svh;
}

.why-page > .agency-section,
.snap-approach > .sequence-section,
.snap-clients > .clients,
.snap-company > .company,
.snap-contact > .contact-section {
  padding: var(--page-content-inset) var(--pad);
}

.snap-approach > .sequence-section { align-items: start; }
.clients-heading,
.section-heading,
.company-top h2 { margin-bottom: var(--page-heading-gap); }

main > .capabilities {
  padding: calc(100px + var(--page-content-inset)) var(--pad) var(--page-content-inset);
}

@media (max-width: 700px) {
  :root {
    --page-chapter-height: 185px;
    --page-content-inset: clamp(24px, 3svh, 32px);
  }
  .why-page:not(.why-page-capability) > .chapter-divider {
    height: 150px;
    min-height: 150px;
    padding-top: 108px;
    padding-bottom: 0;
  }
  .why-page:not(.why-page-capability) .chapter-title {
    font-size: clamp(28px, 7.4vw, 32px);
    line-height: 1;
  }
  .why-page:not(.why-page-capability) .agency-perspective { padding-top: 20px; }
  .snap-approach > .sequence-section { gap: var(--page-heading-gap); }
  main > .capabilities {
    padding-top: calc(104px + var(--page-content-inset));
  }
}

@media (max-width: 700px) and (max-height: 620px) {
  .why-page:not(.why-page-capability) > .chapter-divider { position: relative; }
  .why-page:not(.why-page-capability) > .agency-section { min-height: calc(100svh - 150px); }
}

/* The proof points use one divider and a clear editorial type hierarchy. */
.why-page .agency-perspective h3 > span {
  font-size: clamp(70px, 5.5vw, 80px);
  line-height: 1.03;
  letter-spacing: -.055em;
}
.why-page .agency-perspective {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  column-gap: clamp(54px, 6vw, 96px);
  border-top: 0;
  padding-top: 0;
}
.why-page .agency-perspective h3 {
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.why-page .agency-perspective h3 small {
  color: #087f54;
  font-size: clamp(24px, 2.2vw, 28px);
  font-weight: 650;
  line-height: 1.38;
  letter-spacing: -.045em;
}
.why-page .agency-perspective p {
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.8;
}
.why-page .agency-perspective p + p {
  margin-top: 20px;
}
.why-page .agency-perspective.motion-ready h3 > span,
.why-page .agency-perspective.motion-ready h3 small {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  filter: blur(5px);
  transition: opacity .58s ease, transform .78s cubic-bezier(.18,.75,.16,1), filter .72s ease;
}
.why-page .agency-perspective.motion-ready h3 small {
  transform: translate3d(0, 12px, 0);
  transition-delay: .16s;
}
.why-page .agency-perspective.motion-ready.is-visible h3 > span,
.why-page .agency-perspective.motion-ready.is-visible h3 small {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* Clients reads as one gallery page, not a headline plus a long list. */
.snap-clients > .clients {
  display: flex;
  align-items: center;
  justify-content: center;
}
.snap-clients .client-roster {
  width: 100%;
  max-width: 1000px;
}

@media (min-width: 901px) {
  .snap-clients > .clients {
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: clamp(48px, 7svh, 72px);
  }
}

@media (max-width: 700px) {
  .why-page .agency-perspective h3 > span {
    font-size: clamp(62px, 15.5vw, 72px);
  }
  .why-page .agency-perspective h3 {
    gap: 12px;
    margin-bottom: 30px;
  }
  .why-page .agency-perspective h3 small {
    font-size: clamp(21px, 5.4vw, 24px);
  }
  .why-page .agency-perspective p {
    font-size: 15px;
    line-height: 1.72;
  }
  .why-page .agency-perspective p + p {
    margin-top: 16px;
  }
  .why-page .agency-perspective {
    padding-top: 0;
  }
  .snap-clients {
    height: 100svh;
    overflow: hidden;
  }
  .snap-clients > .chapter-divider {
    height: 176px;
    min-height: 176px;
    padding-top: 118px;
    padding-bottom: 10px;
  }
  .snap-clients .chapter-title {
    font-size: clamp(42px, 11vw, 50px);
  }
  .snap-clients > .clients {
    flex: 1 1 0;
    min-height: 0;
    padding-top: 12px;
    padding-bottom: 65px;
  }
  .snap-clients .client-roster {
    height: 100%;
    max-height: 420px;
    grid-template-rows: repeat(5, minmax(0, 1fr));
  }
  .snap-clients .client-row {
    min-height: 0;
  }
  .snap-clients .client-roster .client-logo {
    height: 100%;
    min-height: 0;
  }
}

@media (max-width: 700px) and (max-height: 520px) {
  .snap-clients { height: auto; min-height: 100svh; overflow: visible; }
  .snap-clients .client-roster .client-logo { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .why-page .agency-perspective.motion-ready h3 > span,
  .why-page .agency-perspective.motion-ready h3 small { opacity: 1; transform: none; filter: none; transition: none; }
}

/* Both Growth Logic pages share one grid; the second visual stays empty for later content. */
.snap-approach .sequence-intro h2 {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(42px, 3.7vw, 50px);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -.055em;
}
.snap-approach .sequence-intro h2 span { display: inline-block; }
.snap-approach .sequence-intro.visible h2 span {
  animation: sequence-title-light .9s ease-out .12s both;
}
@keyframes sequence-title-light {
  0% { color: #aebfb3; text-shadow: 0 0 0 rgba(105, 220, 168, 0); }
  48% { color: #a7edc5; text-shadow: 0 0 16px rgba(105, 220, 168, .5); }
  100% { color: var(--continuity-ink); text-shadow: 0 0 0 rgba(105, 220, 168, 0); }
}

.snap-communicate .communicate-visual-slot {
  min-height: 438px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Continue Growth Logic without repeating its light chapter band. */
.snap-communicate {
  background: var(--continuity-bg);
  border-top: 1px solid var(--continuity-rule);
}
.snap-communicate > .sequence-section {
  padding-top: calc(var(--page-chapter-height) + var(--page-content-inset));
}

@media (min-width: 901px) {
  .snap-approach > .sequence-section {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(42px, 4.4vw, 60px);
  }
  .snap-approach .sequence-intro {
    position: relative;
    top: clamp(50px, calc(28svh - 152px), 100px);
  }
}

@media (max-width: 700px) {
  .snap-approach:not(.snap-communicate) > .chapter-divider {
    height: 150px;
    min-height: 150px;
    padding-top: 108px;
    padding-bottom: 0;
  }
  .snap-approach:not(.snap-communicate) .chapter-title {
    font-size: clamp(28px, 7.4vw, 32px);
    line-height: 1;
  }
  .snap-approach .sequence-intro h2 {
    font-size: clamp(25px, 6.8vw, 30px);
    margin-bottom: 14px;
  }
  .snap-approach:not(.snap-communicate) > .sequence-section {
    gap: 8px;
  }
  .snap-communicate > .sequence-section {
    padding-top: calc(150px + var(--page-content-inset));
  }
}

@media (max-width: 560px) {
  .snap-communicate .communicate-visual-slot { min-height: 419px; }
}

@media (prefers-reduced-motion: reduce) {
  .snap-approach .sequence-intro.visible h2 span { animation: none; }
}

/* Mobile chapter titles introduce the page, then yield the viewport to its content. */
@media (max-width: 700px) {
  .why-page:not(.why-page-capability) > .chapter-divider,
  .snap-approach:not(.snap-communicate) > .chapter-divider {
    position: absolute;
    inset: 0 0 auto;
    z-index: 3;
    height: 150px;
    min-height: 150px;
    border-bottom-color: transparent;
    pointer-events: none;
  }
  .snap-approach:not(.snap-communicate) > .chapter-divider { background: var(--continuity-bg); }
  .why-page:not(.why-page-capability) > .chapter-divider { background: #f5f7f2; }
  .snap-approach:not(.snap-communicate) > .sequence-section {
    min-height: 100svh;
    padding-top: 118px;
    align-content: center;
  }
  .why-page:not(.why-page-capability) > .agency-section { min-height: 100svh; }
  .why-page.heading-sequence:not(.is-heading-receding) > .agency-section,
  .snap-approach.heading-sequence:not(.is-heading-receding) > .sequence-section {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  .why-page.heading-sequence > .agency-section,
  .snap-approach.heading-sequence > .sequence-section {
    transition: opacity .62s ease, transform .75s cubic-bezier(.2,.8,.2,1);
  }
  .why-page.heading-sequence.is-heading-receding > .agency-section,
  .snap-approach.heading-sequence.is-heading-receding > .sequence-section {
    opacity: 1;
    transform: none;
  }
  .why-page.heading-sequence > .chapter-divider,
  .snap-approach.heading-sequence > .chapter-divider {
    animation: chapter-title-arrive .52s cubic-bezier(.2,.8,.2,1) both;
  }
  .why-page.heading-sequence > .chapter-divider .chapter-title > span,
  .snap-approach.heading-sequence > .chapter-divider .chapter-title > span {
    opacity: 1;
    clip-path: none;
    filter: none;
    transform: none;
    transition: none;
  }
  .why-page.heading-sequence.is-heading-receding > .chapter-divider,
  .snap-approach.heading-sequence.is-heading-receding > .chapter-divider {
    animation: none;
    opacity: 0;
    transform: translate3d(0, -18px, 0);
  }
  .why-page.heading-sequence > .chapter-divider,
  .snap-approach.heading-sequence > .chapter-divider {
    transition: opacity .48s ease, transform .52s cubic-bezier(.2,.8,.2,1);
  }
}

@keyframes chapter-title-arrive {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 700px) and (max-height: 620px) {
  .snap-approach:not(.snap-communicate) > .sequence-section {
    padding-top: 114px;
    padding-bottom: 12px;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 700px) {
  .why-page:not(.why-page-capability) > .chapter-divider,
  .snap-approach:not(.snap-communicate) > .chapter-divider { display: none; }
  .why-page.heading-sequence > .agency-section,
  .why-page.heading-sequence:not(.is-heading-receding) > .agency-section,
  .snap-approach.heading-sequence > .sequence-section,
  .snap-approach.heading-sequence:not(.is-heading-receding) > .sequence-section {
    opacity: 1;
    transform: none;
    transition: none;
  }
}