/* Responsive — breakpoint overrides only. Mobile-first base lives in
   components.css. Breakpoints mirror tokens.css: tablet >=768px, desktop >=1280px. */

/* ============ Tablet: >=768px ============ */
@media (min-width: 768px) {
  .section {
    padding-block: var(--section-pad-y-tablet);
    padding-inline: var(--section-pad-x-tablet);
  }

  .container { padding-inline: 0; }

  /* Header: full horizontal nav replaces the hamburger */
  .site-header { padding-inline: var(--section-pad-x-tablet); }
  .site-header__logo img { height: 40px; }
  .site-header__brand .brand-title { font-size: var(--font-size-body-lg); }
  .site-header__nav {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    font-size: var(--font-size-body);
  }
  .site-header__nav a { color: var(--color-text-primary); }
  .site-header__nav a:hover { color: var(--color-action-primary); }
  .site-header__nav .btn--link { padding-block: 0; }
  .nav-trigger,
  .nav-sheet,
  .nav-backdrop { display: none !important; }

  .btn-group { flex-direction: row; align-items: center; }
  .btn-group .btn { width: auto; }

  /* Hero becomes 2-up */
  .hero__inner { flex-direction: row; align-items: stretch; }
  .hero__copy { flex: 1.06; padding: var(--space-10) var(--section-pad-x-tablet); }
  .hero__title { font-size: var(--font-size-display-md); }
  .hero__lead { font-size: var(--font-size-body-lg-md); }
  .hero__media { flex: 1; border-top: 0; border-left: 1px solid var(--color-border-default); }
  .hero__media .media-well { flex: 1; min-height: 280px; }

  /* Headings that are meant to scale up past their mobile size */
  .section__title,
  .contact__title,
  .legal h1 { font-size: var(--font-size-section-md); }
  .scenario-card__title,
  .legal h2 { font-size: var(--font-size-card-title-md); }

  .scenario-list {
    overflow: visible;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .scenario-card { width: auto; }
  .scroll-hint { display: none; }

  .hero__proof-points { flex-direction: row; flex-wrap: wrap; gap: var(--space-5); }

  .hub__entries { overflow: visible; display: grid; grid-template-columns: repeat(3, 1fr); }

  .steps { flex-direction: row; flex-wrap: wrap; column-gap: var(--space-6); }
  .step { flex: 1 1 calc(50% - var(--space-6) / 2); }
  .step:last-child { flex-basis: 100%; }

  .guardrail-grid { flex-direction: row; }
  .guardrail { flex: 1; }

  .gallery { display: grid; grid-template-columns: repeat(2, 1fr); }
  .gallery__item--wide { grid-column: 1 / -1; }

  .funnel__detail { flex-direction: row; align-items: flex-start; }
  .funnel__media { flex: 1; }
  .outcome-list { flex: 1; }

  .handoff-steps { flex-direction: row; }
  .handoff-steps__item { flex: 1; }

  .phase-grid { flex-direction: row; }
  .phase-card { flex: 1; }

  .funnel__list { flex-direction: row; flex-wrap: wrap; }
  .funnel__item { flex: 1 1 calc(50% - var(--space-4) / 2); }

  .form__grid { grid-template-columns: 1fr 1fr; }
  .form__submit-row { flex-direction: row; align-items: center; }
  .form__submit-row .btn { width: auto; }
  .form__input, .form__select, .form__textarea { font-size: 13px; }

  .faq-contact { flex-direction: row; align-items: flex-start; gap: var(--space-8); }
  .faq-contact__form { flex: 1.3; }
  /* Tablet-only: the 1.3fr share isn't wide enough yet for the form's own
     2-up field grid (see reasoning on .faq-contact in components.css) — the
     desktop block below re-enables it once there's more room. */
  .faq-contact .form__grid { grid-template-columns: 1fr; }

  .site-footer__inner { flex-direction: row; align-items: center; justify-content: space-between; }
  .site-footer { padding-inline: var(--section-pad-x-tablet); }
}

/* ============ Desktop: >=1280px ============ */
@media (min-width: 1280px) {
  .section {
    padding-block: var(--section-pad-y-desktop);
    padding-inline: var(--section-pad-x-desktop);
  }

  .site-header { padding-inline: var(--section-pad-x-desktop); }
  .site-header__logo img { height: 44px; }

  /* The outer 56px gutter lives on .hero (full-bleed, wider than 1440px),
     same as .section carries it for every section below — NOT on .hero__inner,
     which already carries .container's own max-width/centering. Padding
     alongside that centering would add on top of the margin instead of
     canceling into it past 1440px, throwing the hero out of alignment with
     every section below it (see the .site-header comment for the full
     explanation of why this cancellation only works one way round). The 40px
     on .hero__copy's end side is the inner gap toward the media column, a
     separate concern from the outer gutter. */
  .hero { padding-inline: var(--section-pad-x-desktop); }
  .hero__inner { display: grid; grid-template-columns: var(--hero-split-desktop); }
  .hero__copy { padding: 56px 40px 56px 0; }
  .hero__title { font-size: var(--font-size-display); }
  .hero__lead { font-size: var(--font-size-body-lg); }
  .hero__media .media-well { min-height: 344px; }

  .section__title,
  .contact__title,
  .legal h1 { font-size: var(--font-size-section); }
  .scenario-card__title,
  .legal h2 { font-size: var(--font-size-card-title); }

  .hub__entries { grid-template-columns: repeat(5, 1fr); }

  .hub-split { flex-direction: row; }
  .hub-split__diagram { flex: 1; border-right: 1px solid var(--color-border-default); }
  .hub__values { flex: 1; }

  /* 3 standard cards fit one row below the full-width featured card now
     that the Gallery is down to 4 items — a 2-column tablet-style grid
     would leave an awkward half-empty cell at this width. */
  .gallery { grid-template-columns: repeat(3, 1fr); }

  .funnel__list {
    display: grid;
    grid-template-columns: 1fr 32px 1fr 32px 1fr 32px 1fr;
    align-items: start;
  }
  .funnel__item { flex-basis: auto; }
  .funnel__connector {
    display: flex;
    justify-content: center;
    padding-top: 38px;
    color: var(--color-text-number-lg);
  }

  .steps {
    display: grid;
    grid-template-columns: 1fr 40px 1fr 40px 1fr;
    align-items: start;
  }
  .step { flex-basis: auto; }
  .step__connector {
    display: flex;
    justify-content: center;
    padding-top: 44px;
    color: var(--color-text-number-lg);
  }

  .form__grid { grid-template-columns: 1fr 1fr; }
  /* Re-enable at desktop — the 1.3fr form column is wide enough here for two
     field-columns again (see .faq-contact comment in components.css). */
  .faq-contact .form__grid { grid-template-columns: 1fr 1fr; }

  .site-header__nav { gap: var(--space-6); }
}

/* ============ Reduced motion: kill reveal transitions everywhere ============ */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}