/* Give the product demonstrations more room within the existing page.
   Content remains in the native document flow; no scroll interception. */
#ai-stack {
  padding-top: 72px;
  padding-bottom: 72px;
}
#ai-stack .section-intro { margin-bottom: 25px; }
#ai-stack .section-intro .eyebrow { margin-bottom: 14px; }
#ai-stack .section-intro h2 {
  font-size: clamp(35px, 3.4vw, 50px);
  line-height: 1.25;
  letter-spacing: -.025em;
}
#ai-stack .stack-panel,
#ai-stack .stack-panel[data-mode="knowledge"] {
  grid-template-columns: minmax(220px, .65fr) minmax(0, 1.6fr);
  gap: 18px 27px;
  padding: 22px;
  border-color: #c8e0e6;
  box-shadow: 0 22px 58px -40px #174e6473, inset 0 1px 0 #fff;
}
#ai-stack .stack-panel-top { gap: 7px 16px; }
#ai-stack .stack-copy,
#ai-stack .stack-panel[data-mode="knowledge"] .stack-copy { gap: 15px; }
#ai-stack .stack-panel .stack-copy > h3,
#ai-stack .stack-panel[data-mode="knowledge"] .stack-copy > h3 {
  font-size: clamp(25px, 2.1vw, 32px);
  line-height: 1.48;
}
#ai-stack .stack-panel .stack-copy > p { font-size: 13px; line-height: 1.85; }
#ai-stack .stack-swipe-controls { padding-top: 12px; }

@media (min-width: 1101px) {
  #ai-stack { padding-top: 52px; padding-bottom: 56px; }
  #ai-stack .section-intro h2 br { display: none; }
  #ai-stack .section-intro h2 span { margin-left: .23em; }
  #ai-stack .stack-panel-top { grid-column: 1; grid-row: 1; align-items: flex-start; flex-direction: column; align-self: start; }
  #ai-stack .stack-visual { grid-column: 2; grid-row: 1 / 3; }
  #ai-stack .stack-copy, #ai-stack .stack-panel[data-mode="knowledge"] .stack-copy { grid-column: 1; grid-row: 2; align-self: center; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  #ai-stack { padding-top: 64px; padding-bottom: 64px; }
  #ai-stack .stack-panel,
  #ai-stack .stack-panel[data-mode="knowledge"] {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  #ai-stack .stack-panel-top { grid-column: 1; grid-row: 1; }
  #ai-stack .stack-visual { grid-column: 1; grid-row: 2; }
  #ai-stack .stack-copy,
  #ai-stack .stack-panel[data-mode="knowledge"] .stack-copy {
    grid-column: 1;
    grid-row: 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 10px 26px;
  }
  #ai-stack .stack-copy h3 { grid-column: 1; grid-row: 1 / 3; max-width: none; }
  #ai-stack .stack-copy > p { grid-column: 2; }
  #ai-stack .stack-tags { grid-column: 2; }
  #ai-stack .stack-swipe-controls { grid-column: 1; grid-row: 4; }
}

@media (max-width: 760px) {
  .section { padding: 48px 20px; }
  .section-intro { margin-bottom: 23px; }
  .section-intro .eyebrow { font-size: 9px; line-height: 1.65; margin-bottom: 12px; }
  .section-intro h2, .numbers h2 { font-size: clamp(30px, 8vw, 36px); line-height: 1.28; }

  /* A shorter brand interlude brings the actual business offering closer. */
  #brand-finale {
    height: clamp(390px, 54svh, 480px);
    min-height: 390px;
    max-height: 480px;
  }
  #brand-finale .finale-heading { padding: 23px 20px 0; }
  #brand-finale .finale-index { padding-bottom: 13px; font-size: 8px; }
  #brand-finale h2 { margin-top: 25px; font-size: clamp(54px, 14vw, 72px); }
  #brand-finale .finale-toolbar { left: 20px; right: 20px; bottom: 20px; }

  #about { gap: 20px; }
  #about .section-intro { margin-bottom: 0; }
  #about .section-intro h2 { font-size: clamp(27px, 7.3vw, 33px); line-height: 1.4; }
  #about .about-copy { padding: 0; }
  #about .about-copy .lead { font-size: 17px; line-height: 1.7; margin-bottom: 13px; }
  #about .about-copy p { font-size: 13px; line-height: 1.9; margin-bottom: 8px; }
  #about .arrow-link { font-size: 12px; margin-top: 6px; }

  /* Native horizontal browsing keeps all five businesses visible and reachable.
     The following card peeks into view instead of adding a tutorial control. */
  #capabilities .section-intro { margin-bottom: 23px; }
  #capabilities .cap-grid {
    display: flex;
    gap: 12px;
    margin-inline: -20px;
    padding: 2px 20px 16px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 20px;
    scrollbar-width: thin;
    scrollbar-color: #81b9c6 #d8e9ed66;
    touch-action: pan-x pan-y pinch-zoom;
  }
  #capabilities .cap-grid::-webkit-scrollbar { height: 3px; }
  #capabilities .cap-grid::-webkit-scrollbar-track { margin-inline: 20px; background: #d8e9ed66; border-radius: 3px; }
  #capabilities .cap-grid::-webkit-scrollbar-thumb { background: #81b9c6; border-radius: 3px; }
  #capabilities .cap-card,
  #capabilities .cap-card:last-child {
    flex: 0 0 84%;
    width: 84%;
    min-width: 0;
    min-height: 250px;
    height: auto;
    padding: 22px;
    scroll-snap-align: start;
    border-radius: 20px;
    transform: none;
  }
  #capabilities .cap-card h3 { font-size: 20px; line-height: 1.5; margin-bottom: 12px; }
  #capabilities .cap-card p { font-size: 13px; line-height: 1.85; margin-bottom: 20px; }
  #capabilities .cap-card a { margin-top: auto; padding-top: 6px; min-height: 44px; }
  #capabilities .cap-card:focus-visible { outline-offset: -4px; }

  #ai-stack { padding: 48px 20px; }
  #ai-stack .section-intro { margin-bottom: 20px; }
  #ai-stack .section-intro .eyebrow { margin-bottom: 12px; }
  #ai-stack .section-intro h2 { font-size: clamp(30px, 8vw, 36px); line-height: 1.3; }
  #ai-stack .stack-rail {
    margin: 0 -20px 13px;
    padding: 3px 20px 8px;
    scroll-padding-inline: 20px;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y pinch-zoom;
  }
  #ai-stack .stack-step { min-height: 44px; padding: 10px 12px; }
  #ai-stack .stack-panel,
  #ai-stack .stack-panel[data-mode="knowledge"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    padding: 0;
    gap: 20px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  #ai-stack .stack-panel-top {
    display: none;
  }
  #ai-stack .studio-demo-badge { font-size: 10px; }
  #ai-stack .stack-visual { grid-column: 1; grid-row: 1; width: 100%; margin: 0; border-radius: 12px; }
  #ai-stack .stack-copy,
  #ai-stack .stack-panel[data-mode="knowledge"] .stack-copy {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 3px 6px 0;
  }
  #ai-stack .stack-panel .stack-copy > h3,
  #ai-stack .stack-panel[data-mode="knowledge"] .stack-copy > h3 {
    font-size: clamp(20px, 5.7vw, 24px);
    line-height: 1.5;
    margin: 0;
    max-width: none;
  }
  #ai-stack .stack-panel .stack-copy > p { font-size: 12px; line-height: 1.85; margin: 0; }
  #ai-stack .stack-tags { gap: 5px; }
  #ai-stack .stack-tags span { font-size: 9px; padding: 4px 8px; }
  #ai-stack .stack-swipe-controls { grid-column: 1; grid-row: 3; padding: 12px 4px 1px; }
  #ai-stack .stack-swipe-controls button { min-width: 44px; min-height: 44px; }

  #cases {
    --poster-art-height: clamp(265px, 75vw, 320px);
    --poster-card-width: calc(var(--poster-art-height) * .7 + 12px);
    --poster-wide-width: calc(100vw - 76px);
  }
  #cases .case-controls { margin-top: 19px; }
  #cases .case-grid { margin-top: 17px; padding-bottom: 15px; gap: 12px; }
  #cases .case-card img { object-fit: contain; }
  #cases .case-overlay { min-height: 80px; }
  #cases .gallery-toolbar { min-height: 44px; }

  #numbers { gap: 24px; }
  #numbers .numbers-copy > p:not(.eyebrow) { margin-top: 15px; }
  #process .section-intro { margin-bottom: 23px; }
  #contact { padding-top: 58px; padding-bottom: 58px; }
}

@media (max-width: 350px) {
  .section, #ai-stack { padding-inline: 16px; }
  #capabilities .cap-grid { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  #capabilities .cap-card, #capabilities .cap-card:last-child { flex-basis: 86%; width: 86%; padding: 19px; }
  #capabilities .cap-card h3 { font-size: 18px; }
  #ai-stack .stack-rail { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  #ai-stack .stack-panel, #ai-stack .stack-panel[data-mode="knowledge"] { padding: 0; gap: 18px; }
  #ai-stack .stack-copy, #ai-stack .stack-panel[data-mode="knowledge"] .stack-copy { padding-inline: 5px; }
  #brand-finale .finale-heading { padding-inline: 16px; }
  #brand-finale .finale-toolbar { left: 16px; right: 16px; }
}