/* Final mobile layout contract. Keep snap frames stable while their contents animate. */
@media (max-width: 700px) {
  .snap-approach:not(.snap-communicate) .approach-funnel iframe {
    height: 342px;
    pointer-events: none;
  }

  main > .hero,
  main > .choice-intro,
  main > .why-page,
  main > .snap-panel {
    min-height: 100dvh !important;
  }

  main > .hero,
  main > .choice-intro,
  main > .why-page,
  main > .snap-approach,
  main > .snap-clients,
  main > .snap-company {
    height: 100dvh !important;
  }

  /* Safari's collapsed toolbar exposes extra space below a 100svh page.
     Extend the page while keeping its reading layout at the same offset. */
  main > .why-page {
    padding-bottom: max(0px, calc(100dvh - 100svh));
  }

  .choice-intro {
    position: relative;
    display: block;
    padding: 0 var(--pad);
  }
  .choice-intro-inner,
  .choice-intro.motion-ready .choice-intro-inner,
  .choice-intro.motion-ready.is-centered .choice-intro-inner {
    position: absolute;
    top: 0;
    left: var(--pad);
    right: var(--pad);
    width: auto;
    height: 100svh;
    margin: 0;
    padding-top: clamp(100px, 18.6svh, 160px);
    padding-bottom: clamp(36px, 5svh, 52px);
    display: flex;
    flex-direction: column;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .choice-intro-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* The heading folds in place. Neither the page height nor its snap point changes. */
  .snap-approach:not(.snap-communicate),
  .snap-company {
    display: block !important;
    overflow: hidden;
    overflow-anchor: none;
  }
  /* Split Safari's changing toolbar space above and below Company content. */
  .snap-company { --company-viewport-shift: calc(50dvh - 50svh); }
  .snap-approach:not(.snap-communicate) > .chapter-divider,
  .snap-company > .chapter-divider {
    position: absolute;
    inset: 0 0 auto;
    z-index: 5;
    display: grid !important;
    align-content: end;
    width: 100%;
    height: 175px !important;
    min-height: 0 !important;
    padding: 110px var(--pad) 16px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: perspective(800px) rotateX(0deg) !important;
    transform-origin: center top;
    backface-visibility: hidden;
    transition: transform .58s cubic-bezier(.3,.02,.2,1), opacity .34s ease .18s;
  }
  .snap-approach:not(.snap-communicate) > .chapter-divider .chapter-title > span,
  .snap-company > .chapter-divider .chapter-title > span {
    opacity: 1 !important;
    visibility: visible !important;
    clip-path: none !important;
    transform: none !important;
  }
  .snap-approach:not(.snap-communicate).is-heading-receding > .chapter-divider,
  .snap-company.is-heading-receding > .chapter-divider {
    height: 175px !important;
    min-height: 0 !important;
    padding: 110px var(--pad) 16px !important;
    opacity: 0 !important;
    visibility: visible !important;
    transform: perspective(800px) rotateX(88deg) !important;
    pointer-events: none;
  }
  .snap-approach:not(.snap-communicate).is-heading-done > .chapter-divider,
  .snap-company.is-heading-done > .chapter-divider {
    visibility: hidden !important;
  }

  .snap-company > .chapter-divider,
  .snap-company.is-heading-receding > .chapter-divider {
    height: 210px !important;
    padding: 145px var(--pad) 16px !important;
  }

  .snap-approach:not(.snap-communicate) > .sequence-section {
    height: 100% !important;
    min-height: 0 !important;
    padding-top: clamp(100px, 15svh, 124px) !important;
    padding-bottom: clamp(40px, 6svh, 50px) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(70px) !important;
    transition: transform .7s cubic-bezier(.22,.72,.18,1);
  }
  .snap-approach:not(.snap-communicate).is-heading-receding > .sequence-section {
    transform: translateY(15px) !important;
  }

  .snap-company > .company,
  .snap-company:not(.heading-sequence) > .company,
  .snap-company.heading-sequence:not(.is-heading-receding) > .company {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: calc(175px + var(--company-viewport-shift)) !important;
    padding-bottom: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(45px) !important;
    transition: none !important;
  }
  .snap-company.is-heading-receding > .company {
    transform: none !important;
    transition: transform .62s cubic-bezier(.22,.72,.18,1) !important;
  }
  .snap-company .company-top .type-line > span,
  .snap-company .company .reveal {
    opacity: 1 !important;
    filter: none;
    transform: none !important;
  }
  .snap-company .company-top { margin-bottom: 12px !important; }
  .snap-company .company-values-label { margin-bottom: 8px !important; }
  .snap-company .company-value,
  .snap-company.heading-sequence:not(.is-heading-receding) .company-value {
    padding-top: clamp(18px, 2.5dvh, 21px) !important;
    padding-bottom: clamp(18px, 2.5dvh, 21px) !important;
  }
  .snap-company .company-value h3 { margin-bottom: 6px !important; }
  .snap-company .company-value p { margin-top: 6px !important; }
}

/* Keep both the company heading and the last value inside shorter phone viewports. */
@media (max-width: 700px) and (max-height: 800px) {
  .snap-company .company-value,
  .snap-company.heading-sequence:not(.is-heading-receding) .company-value {
    padding-top: clamp(9px, calc(5.5dvh - 28px), 18px) !important;
    padding-bottom: clamp(9px, calc(5.5dvh - 28px), 18px) !important;
  }
}

@media (max-width: 700px) and (max-height: 720px) {
  .snap-company > .chapter-divider,
  .snap-company.is-heading-receding > .chapter-divider {
    height: 195px !important;
    padding: 135px var(--pad) 13px !important;
  }
  .snap-company > .company,
  .snap-company:not(.heading-sequence) > .company,
  .snap-company.heading-sequence:not(.is-heading-receding) > .company {
    padding-top: calc(160px + var(--company-viewport-shift)) !important;
  }
  .snap-company .company-value,
  .snap-company.heading-sequence:not(.is-heading-receding) .company-value {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }
  .snap-company .company-value h3 { font-size: 15px !important; }
  .snap-company .company-value strong { font-size: 12px !important; }
  .snap-company .company-value p { font-size: 11.5px !important; }
}

/* Both Growth Logic headlines retain the same restrained, visible afterglow. */
@keyframes communicate-title-glow {
  0%, 100% { text-shadow: 0 0 9px rgba(105, 220, 168, .2); }
  50% { text-shadow: 0 0 20px rgba(105, 220, 168, .52), 0 0 36px rgba(105, 220, 168, .17); }
}
.snap-communicate .sequence-intro.visible h2 span {
  color: var(--continuity-ink);
  animation: communicate-title-glow 3.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .snap-communicate .sequence-intro.visible h2 span {
    animation: none;
    text-shadow: 0 0 10px rgba(105, 220, 168, .25);
  }
}

@media (max-width: 700px) and (max-height: 600px) {
  .choice-intro-inner,
  .choice-intro.motion-ready .choice-intro-inner,
  .choice-intro.motion-ready.is-centered .choice-intro-inner {
    /* Keep the title below the fixed navigation even with browser bars open. */
    padding-top: 128px;
    padding-bottom: 20px;
  }
  .choice-intro-content {
    /* Recover the space above the graphic so Priority stays at its old height. */
    transform: translateY(-18px);
  }
  .snap-approach:not(.snap-communicate) .approach-funnel {
    height: 282px !important;
    overflow: hidden;
  }
  .snap-approach:not(.snap-communicate) .approach-funnel iframe {
    width: 120% !important;
    height: 340px !important;
    transform: scale(.83);
    transform-origin: top left;
  }
  .snap-company > .company,
  .snap-company:not(.heading-sequence) > .company,
  .snap-company.heading-sequence:not(.is-heading-receding) > .company {
    padding-top: calc(136px + var(--company-viewport-shift)) !important;
    padding-bottom: 20px !important;
  }
}

/* Desktop keeps the Growth Logic chapter title above both paired visuals. */
@media (min-width: 901px) {
  .snap-communicate > .communicate-chapter {
    background: var(--continuity-bg);
    color: #f5faf6;
    border-bottom: 1px solid var(--continuity-rule);
  }
  .snap-communicate > .communicate-chapter .chapter-title {
    color: #f5faf6 !important;
    line-height: 1.22;
    padding-bottom: .12em;
    overflow: visible;
  }
  .snap-communicate > .communicate-chapter .chapter-title > span {
    color: #f5faf6 !important;
  }
}
@media (max-width: 900px) {
  .snap-communicate > .communicate-chapter { display: none !important; }
}

@media (max-width: 700px) and (max-height: 600px) {
  .snap-approach:not(.snap-communicate) .approach-funnel {
    position: relative;
    top: -14px;
    height: 255px !important;
  }
  .snap-approach:not(.snap-communicate) .approach-funnel iframe {
    width: 135% !important;
    transform: scale(.75);
  }
  .snap-company > .company,
  .snap-company:not(.heading-sequence) > .company,
  .snap-company.heading-sequence:not(.is-heading-receding) > .company {
    justify-content: flex-start;
    padding-top: calc(145px + var(--company-viewport-shift)) !important;
    padding-bottom: 0 !important;
    transform: translateY(45px) !important;
  }
  .snap-company.is-heading-receding > .company {
    transform: none !important;
    transition: transform .62s cubic-bezier(.22,.72,.18,1) !important;
  }
  .snap-company > .chapter-divider,
  .snap-company.is-heading-receding > .chapter-divider {
    height: 190px !important;
    padding: 141px var(--pad) 11px !important;
  }
  .snap-company .company-top { margin-bottom: 8px !important; }
  .snap-company .company-values-label { margin-bottom: 12px !important; }
  .snap-company .company-value,
  .snap-company.heading-sequence:not(.is-heading-receding) .company-value {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  .snap-company .company-value h3 { line-height: 1.48 !important; }
  .snap-company .company-value strong { line-height: 1.55 !important; }
  .snap-company .company-value p { line-height: 1.65 !important; }
}

@media (max-width: 360px) and (max-height: 600px) {
  .snap-company > .chapter-divider {
    height: 190px !important;
    padding: 141px var(--pad) 11px !important;
  }
  .snap-company.is-heading-receding > .chapter-divider {
    height: 190px !important;
    padding: 141px var(--pad) 11px !important;
  }
  .snap-company > .company,
  .snap-company:not(.heading-sequence) > .company,
  .snap-company.heading-sequence:not(.is-heading-receding) > .company {
    padding-top: calc(145px + var(--company-viewport-shift)) !important;
  }
  .snap-company.is-heading-receding > .company {
    transform: none !important;
  }
  .snap-company .company-top h2.type-reveal {
    font-size: 22px !important;
    line-height: 1.12 !important;
  }
  .snap-company .company-value h3 { font-size: 13px !important; }
  .snap-company .company-value strong { font-size: 11px !important; }
  .snap-company .company-value p { font-size: 10px !important; line-height: 1.25 !important; }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .snap-approach:not(.snap-communicate) > .chapter-divider,
  .snap-company > .chapter-divider { display: none !important; }
  .snap-approach:not(.snap-communicate) > .sequence-section,
  .snap-company > .company { transform: none !important; transition: none !important; }
}

/* Match the visible mobile viewport as Safari's browser bars expand or collapse. */
@media (max-width: 700px) {
  main > .hero,
  main > .choice-intro,
  main > .why-page,
  main > .snap-panel {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }

  main > .capabilities {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: clamp(300px, 48svh, 470px) !important;
  }

  /* Execution is longer than one screen. Let its cards scroll as one
     continuous reading area instead of snapping halfway through a card. */
  .capabilities .capability:not(:first-child) {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }

  /* The third card remains in the continuous reading flow. The space after it
     keeps Company from arriving before the card has been read. */
  .capabilities .capability:last-child {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }
}

/* Keep the preserved client template out of both layout and snap navigation. */
.snap-clients[hidden] { display: none !important; }

/* Keep the contact form within the visible area when a mobile keyboard opens. */
@media (max-width: 700px) {
  .contact-dialog[open] {
    position: fixed;
    top: var(--contact-viewport-top, 0px);
    left: 0;
    width: 100%;
    height: var(--contact-viewport-height, 100dvh);
    max-height: var(--contact-viewport-height, 100dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-padding-bottom: 24px;
  }
  .contact-dialog .dialog-shell {
    min-height: 100%;
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
  }
  .contact-dialog .contact-form {
    padding-bottom: 10px;
  }
  .contact-dialog .contact-form button[type="submit"] {
    position: sticky;
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 2;
  }
}