/* Cross-device layout — phone, iOS, iPad, laptop, desktop */

:root {
  --bp-phone: 390px;
  --bp-tablet: 768px;
  --bp-laptop: 1024px;
  --bp-desktop: 1280px;
  --page-gutter: clamp(1rem, 4vw, 2rem);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img,
picture,
video,
svg {
  max-width: 100%;
  height: auto;
}

.img-fluid,
.media-cover {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

/* iOS safe areas + notch */
.site-nav .nav-inner {
  padding-left: max(1.2rem, var(--safe-left));
  padding-right: max(1.2rem, var(--safe-right));
}

section {
  padding-left: max(1.2rem, var(--safe-left));
  padding-right: max(1.2rem, var(--safe-right));
}

.floating-actions {
  right: max(12px, var(--safe-right));
  bottom: max(12px, var(--safe-bottom));
}

/* Touch-friendly controls (iOS HIG ~44px) */
.nav-toggle,
.bubble,
.pill-link,
.toggle-btn,
.growth-card-thumb,
.home-tc-nav,
.scroll-top-fab,
.social-fab {
  min-height: 44px;
  min-width: 44px;
}

.nav-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Prevent iOS zoom on form focus */
input,
select,
textarea {
  font-size: max(1rem, 16px);
}

/* Tablet portrait (iPad) */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero--editorial {
    min-height: auto;
    padding-top: clamp(2.5rem, 6vw, 4rem);
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
  }

  .hero-grid,
  .hero-grid--split {
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }

  .story-flow--shift {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 42%);
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }

  .story-flow--shift > .chapter2-media.flash-card-frame--plain {
    max-width: 100%;
  }

  .story-flow--path,
  .story-flow.story-flow--path {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 42%);
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }

  .story-flow.story-flow--path > .path-portrait {
    max-width: 100%;
  }

  .signature-program-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .growth-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .voice-flow .bubbles-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-chapter {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile & stacked layouts: heading → image → body (DOM order) */
@media (max-width: 900px) {
  .hero-grid.hero-grid--split,
  .story-flow--shift,
  .story-flow--path,
  .page-chapter {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(1.25rem, 4vw, 1.75rem);
  }

  .hero-grid--split .hero-lead,
  .hero-grid--split .hero-visual,
  .hero-grid--split .hero-body,
  .story-flow--shift .story-flow__lead,
  .story-flow--shift > .chapter2-media,
  .story-flow--shift .story-flow__body,
  .story-flow--path .story-flow__lead,
  .story-flow--path > .path-portrait,
  .story-flow--path .story-copy--path,
  .page-chapter .page-chapter-lead,
  .page-chapter > .page-chapter-media,
  .page-chapter > figure.page-chapter-media,
  .page-chapter .page-chapter-copy {
    grid-column: unset;
    grid-row: unset;
    width: 100%;
    max-width: 100%;
  }

  .hero-grid--split .hero-visual,
  .story-flow--shift > .chapter2-media,
  .story-flow--path > .path-portrait,
  .page-chapter > .page-chapter-media,
  .page-chapter > figure.page-chapter-media {
    align-self: center;
    justify-self: center;
    max-width: min(100%, 380px);
    margin-inline: auto;
    transform: none;
  }

  .story-flow--shift,
  .story-flow--shift .story-flow__lead,
  .story-flow--shift .story-flow__body,
  .story-flow--path,
  .story-flow--path .story-flow__lead,
  .story-flow--path .story-copy--path,
  .page-chapter .page-chapter-lead,
  .page-chapter .page-chapter-copy {
    text-align: center;
  }

  body[data-page="programs"] .page-chapter.page-chapter--balanced {
    display: flex;
    flex-direction: column;
  }

  body[data-page="programs"] .page-chapter.page-chapter--balanced .page-chapter-media {
    height: auto;
    max-height: none;
  }

  body[data-page="programs"] .page-chapter.page-chapter--balanced .programs-methodology-visual.flash-card-frame {
    height: auto;
    min-height: 0;
    max-height: none;
  }

  body[data-page="programs"] .page-chapter.page-chapter--balanced .programs-methodology-placeholder.flash-card-placeholder {
    flex: 0 1 auto;
    min-height: min(220px, 50vw);
    max-height: none;
    aspect-ratio: 16 / 10;
  }

  .story-flow--shift .mini-kpis--fluid,
  .story-flow--path .path-tags--below {
    justify-content: center;
  }

  .story-flow--path .path-tags--stacked {
    align-items: center;
  }

  .story-flow--path .path-tags__row {
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero-grid--split {
    text-align: center;
  }

  .hero-grid--split .hero-eyebrow {
    justify-content: center;
  }

  .hero-grid--split .hero-lede {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Large phones */
@media (max-width: 767px) {
  .brand img {
    max-width: min(200px, 52vw);
    height: auto;
  }

  /* Hero photo + badge: stack vertically, badge below photo */
  .hero-banner-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    width: min(100%, 300px);
    margin-inline: auto;
  }

  .hero-banner-photo-wrap {
    width: 100%;
    max-width: 100%;
    transform: none;
  }

  .hero-banner-photo {
    max-height: 320px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center 15%;
  }

  /* Pull badge out of absolute flow — sits below the photo */
  .profile-name-tag.hero-banner-badge,
  .hero-banner-badge,
  .about-mission-name-tag {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    border-radius: 16px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.65rem;
    row-gap: 0.2rem;
    padding: 0.65rem 0.9rem;
    align-items: center;
  }

  .profile-name-tag__logo,
  .hero-banner-badge .profile-name-tag__logo {
    grid-column: 1;
    grid-row: 1 / -1;
    width: clamp(4.25rem, 34vw, 5.25rem);
    max-height: 2.15rem;
    align-self: center;
  }

  .profile-name-tag__text {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .profile-name-tag__sub,
  .hero-banner-badge-sub {
    font-size: 0.7rem;
    white-space: normal;
    line-height: 1.4;
  }

  /* About mission: stack name tag under portrait on narrow screens */
  .about-mission-portrait-stack__plate {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding-bottom: clamp(1rem, 4vw, 1.35rem);
  }

  .about-mission-portrait-stack__ring {
    width: min(100%, 260px);
  }


  .story-flow--shift .chapter2-full-image {
    min-height: 360px;
  }

  .flash-card-placeholder--path .media-cover,
  .programs-methodology-placeholder .media-cover {
    min-height: 220px;
  }

  /* Comparison: hide table, show accordion on mobile */
  .compare-table-wrap {
    display: none;
  }

  .compare-accordion {
    display: block;
  }
}

/* Small phones */
@media (max-width: 390px) {
  .fluid-heading {
    font-size: clamp(1.35rem, 6.5vw, 1.75rem);
  }

  .hero-title {
    font-size: clamp(1.55rem, 7.5vw, 2rem);
  }

  .hero-banner-stack {
    width: 100%;
  }

  .hero-banner-photo {
    max-height: 280px;
  }

  .profile-name-tag__logo,
  .hero-banner-badge .profile-name-tag__logo {
    width: min(4.25rem, 40vw);
    max-height: 1.95rem;
  }

  .profile-name-tag__title,
  .hero-banner-badge-title {
    font-size: 0.82rem;
  }

  .about-mission-portrait-stack__ring {
    width: min(100%, 220px);
  }

  .signature-program-grid {
    grid-template-columns: 1fr;
  }

  .mini-kpis--fluid span {
    font-size: 0.8rem;
  }

  .path-tags--stacked .path-tag {
    font-size: 0.78rem;
    padding: 0.36rem 0.68rem;
  }
}

/* Laptop */
@media (min-width: 1025px) and (max-width: 1279px) {
  body[data-page="home"] .container,
  body[data-page="home"] .container.container--wide {
    max-width: 1100px;
  }

  .signature-program-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Desktop wide */
@media (min-width: 1280px) {
  .container {
    max-width: 1240px;
  }

  .container--wide {
    max-width: 1240px;
  }

  body[data-page="home"] .container,
  body[data-page="home"] .container.container--wide {
    max-width: 1240px;
  }

  .nav-inner {
    max-width: 1240px;
  }
}

/* Fix path section: keep CSS grid (overrides legacy flex) */
.story-flow.story-flow--path.story-flow1 {
  display: grid;
}

/* Inline-styled media wrappers */
.flash-card-placeholder--path,
.programs-methodology-placeholder {
  max-width: 100%;
  width: 100%;
  min-height: 200px;
  padding: 0;
  border: none;
  background: transparent;
}

.flash-card-placeholder--path .media-cover,
.programs-methodology-placeholder .media-cover {
  border-radius: 12px;
}

/* Landscape phones */
@media (max-width: 900px) and (orientation: landscape) {
  .hero--editorial {
    min-height: auto;
  }
}

/* Reduce motion: disable image scale tricks */
@media (prefers-reduced-motion: reduce) {
  .story-flow--shift .chapter2-full-image,
  .signature-program-card__media img {
    transform: none;
  }
}