/* ==========================================================================
   PBNC — responsive.css
   Breakpoint overrides only. Base layout lives in style.css.
   ========================================================================== */

/* ---------- ≤ 1180px : tighten the mosaic ---------- */
@media (max-width: 1180px) {
  .solutions__mosaic { grid-template-columns: repeat(4, 1fr); }
  .solutions__mosaic .sol:nth-child(1) { grid-column: span 4; }
  .solutions__mosaic .sol:nth-child(2),
  .solutions__mosaic .sol:nth-child(3) { grid-column: span 2; }
  .solutions__mosaic .sol:nth-child(4) { grid-column: span 4; }
  .solutions__mosaic .sol:nth-child(5),
  .solutions__mosaic .sol:nth-child(6) { grid-column: span 2; }
  .dash__body { grid-template-columns: 1.2fr 1fr; }
  .dash__block--rec { grid-column: 1 / -1; }
  .recs { grid-template-columns: repeat(3, 1fr); display: grid; }
}

/* ---------- ≤ 1024px : stack the big compositions ---------- */
@media (max-width: 1024px) {
  :root { --section-y: clamp(72px, 9vw, 110px); }

  .section-head--split { grid-template-columns: 1fr; align-items: start; }

  /* hero */
  .hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .hero__copy { max-width: 640px; }
  .hero__visual { max-width: 560px; margin-inline: auto; width: 100%; }
  .hero__tags { margin-top: 34px; }

  /* vision */
  .vision__scroller { height: 220vh; }

  /* shift */
  .shift__grid { grid-template-columns: 1fr; }

  /* AI-GOS: no pinning on smaller screens — the story reads as a stacked sequence */
  .aigos__scroller { height: auto; }
  .aigos__pin { position: static; height: auto; display: block; }
  .aigos__pin-inner { grid-template-columns: 1fr; gap: 44px; }
  .aigos__canvas { order: -1; max-width: 560px; }
  .aigos__rail { gap: 10px; }
  .aigos__step { opacity: 1; border-left-color: var(--border); }
  .aigos__step p { max-height: none; opacity: 1; }

  /* quiz + philosophy + careers */
  .quiz__grid { grid-template-columns: 1fr; }
  .philo__grid { grid-template-columns: 1fr; }
  .philo__mark { order: -1; }
  .philo__mark img { width: min(280px, 70%); }
  .careers__grid { grid-template-columns: 1fr; }

  /* footer */
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

/* ---------- ≤ 980px : mobile navigation ---------- */
@media (max-width: 980px) {
  /* the theme control moves into the overlay menu so only one is ever visible */
  .nav, .site-header__cta, .site-header .theme-toggle { display: none; }
  .nav-toggle { display: grid; margin-left: auto; }
  .site-header__inner { height: 74px; }
  .site-header.is-stuck .site-header__inner { height: 64px; }
  .brand { margin-right: 0; }
}

/* ---------- ≤ 860px : single-column narrative ---------- */
@media (max-width: 860px) {
  .dash__body { grid-template-columns: 1fr; }
  .dash__block--rec { grid-column: auto; }
  .recs { grid-template-columns: 1fr; }
  .philo__meaning { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .leaders__grid { gap: 20px; }

  /* lifelong journey becomes a vertical path */
  .life__path { padding-left: 4px; }
  .life__rail { left: 21px; right: auto; top: 12px; bottom: 12px; width: 2px; height: auto; }
  .life__rail-fill { inset: 0 0 auto 0; width: 100%; height: calc(var(--p, 0) * 100%); }
  .life__marker { top: calc(var(--p, 0) * 100%); left: 50%; width: 34px; height: 34px; }
  .life__marker svg { width: 17px; height: 17px; }
  .life__stops { grid-template-columns: 1fr; gap: 6px; }
  .life__stop { text-align: left; padding: 14px 0 14px 56px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .life__dot { top: 50%; left: 22px; }
  .life__icon { width: 22px; height: 22px; margin: 0; }
  .life__stop h3 { flex: 1 1 100%; margin-top: 2px; font-size: 18px; }
}

/* ---------- ≤ 640px : phone ---------- */
@media (max-width: 640px) {
  :root { --section-y: clamp(60px, 13vw, 92px); }

  body { font-size: 16px; }

  .hero { padding-block: 120px 80px; }
  .hero__title { margin: 20px 0 18px; }
  .hero__actions { gap: 10px; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .hero__tags { gap: 10px 18px; }
  .hero__tags li { font-size: 11.5px; }
  .hero::after { height: 140px; }

  /* the hero graph simplifies: outer labels drop, the system stays readable */
  .graph__label { display: none; }
  .hero__visual { max-width: 420px; }

  /* shorter transitions on small screens so the ramps stay proportional */
  :root { --ramp: clamp(96px, 26vw, 150px); --band-edge: clamp(48px, 12vw, 80px); }

  .vision__scroller { height: 200vh; }
  .vision__steps { gap: 8px 16px; }
  .vision__steps li { font-size: 11.5px; }

  .shift__panel { padding: 24px 20px; }
  .loop { width: 100%; max-width: 290px; --r: 104px; }
  .loop__node { font-size: 11px; padding: 6px 11px; }
  .loop__core { width: 60px; height: 60px; }
  .loop__core svg { width: 24px; height: 24px; }

  /* the nth-child span rules must be reset at matching specificity */
  .solutions__mosaic { grid-template-columns: 1fr; }
  .solutions__mosaic .sol:nth-child(1),
  .solutions__mosaic .sol:nth-child(2),
  .solutions__mosaic .sol:nth-child(3),
  .solutions__mosaic .sol:nth-child(4),
  .solutions__mosaic .sol:nth-child(5),
  .solutions__mosaic .sol:nth-child(6) { grid-column: auto; }
  .sol__go { opacity: 1; transform: none; }

  /* SVG text is in viewBox units — scale it up so it stays legible once
     the 640-unit canvas is rendered at ~335 CSS px */
  .aigos__canvas { max-width: 100%; }
  .agx__sig text { font-size: 19px; }
  .agx__sig .agx__sig-v { display: none; }
  .agx__card-title { font-size: 16px; }
  .agx__card-row { font-size: 21px; }
  .agx__flag { font-size: 19px; }
  .agx__loop-text { font-size: 18px; }
  .agx__core-text { font-size: 19px; }
  .graph__core-text { font-size: 19px; }

  .dash__head { flex-direction: column; align-items: flex-start; gap: 8px; }

  .quiz__card { padding: 22px 18px; }
  .quiz__opt { padding: 13px 14px; gap: 10px; font-size: 14.5px; }
  .quiz__link { padding: 18px; gap: 14px; }
  .quiz__foot { gap: 14px; }

  .philo__meaning { grid-template-columns: 1fr; gap: 22px; }
  .ambition__panel { padding: 30px 22px; border-radius: var(--r-lg); }
  .stats { grid-template-columns: 1fr; }

  .leaders__grid { grid-template-columns: 1fr; max-width: 420px; }

  .role a { grid-template-columns: auto 1fr; gap: 14px; padding: 20px 2px; }
  .role a:hover { padding-left: 8px; }
  .role__arrow { display: none; }

  .contact__links { flex-direction: column; align-items: stretch; }
  .contact__link { justify-content: flex-start; padding: 16px 22px; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__legal { flex-direction: column; gap: 8px; }
}

/* ---------- ≤ 400px : small phones ---------- */
@media (max-width: 400px) {
  :root { --gutter: 18px; }
  .hero__title { font-size: 40px; letter-spacing: -.035em; }
  .vision__morph { font-size: 46px; }
  .brand__word { font-size: 18px; letter-spacing: .16em; }
  .brand__mark { width: 36px; height: 36px; }
  .mobile-menu__list a { font-size: 26px; gap: 12px; }
  .footer__grid { grid-template-columns: 1fr; }
}

/* ---------- pointer: coarse — hover affordances stay visible ---------- */
@media (hover: none) {
  .sol__go { opacity: 1; transform: none; }
  .role__arrow { opacity: 1; transform: none; }
}

/* ---------- very short viewports: never pin taller than the screen ---------- */
@media (max-height: 620px) and (min-width: 1025px) {
  .aigos__pin, .vision__pin { height: auto; padding-block: 60px; position: static; }
  .aigos__scroller, .vision__scroller { height: auto; }
  .aigos__step { opacity: 1; }
  .aigos__step p { max-height: none; opacity: 1; }
}

/* ---------- print ---------- */
@media print {
  .site-header, .mobile-menu, .hero__bg, .aigos__ambient, .contact__ambient { display: none !important; }
  .section, .hero { padding-block: 24px; }
  .aigos__scroller, .vision__scroller { height: auto; }
  .aigos__pin, .vision__pin { position: static; height: auto; }
  body { background: #fff; color: #000; }
}