/* ===========================================================================
   Responsive — every breakpoint override, in one place and in descending
   order so the cascade reads top-to-bottom as the viewport narrows.

   Fluid clamp() tokens do most of the work; this file only handles the points
   where a *layout* has to change, not where a size has to shrink.

   1200 · 1024 · 900 · 760 · 620 · 480 · 380
   =========================================================================== */

/* ============================================================ ≥ 1400px === */
/* Wide displays have room the caps were not using: headings were wrapping to
   two lines with several hundred px of empty space beside them.

   Headings are uncapped here so they sit on one line wherever the wording
   allows. Body copy is NOT — the longest lead needs 2508px on a single line,
   which is ~240 characters and unreadable. It gets a wider measure (80ch)
   rather than no measure at all. */

@media (min-width: 1400px) {
  .page-hero__inner > *,
  .page-hero--art .page-hero__inner > * {
    max-width: none;
  }

  .page-hero__lead {
    max-width: 80ch;
  }

  .section-head {
    max-width: 1100px;
  }

  /* Centred heads stay narrower — a wide centred measure is hard to track
     back to the start of the next line. */
  .section-head--center {
    max-width: 980px;
  }

  .section-lead {
    max-width: 80ch;
  }

  .section-head--center .section-lead {
    max-width: 72ch;
  }
}

/* ============================================================ ≤ 1330px === */
/* The flow diagram's stage narrows with the viewport but its labels can only
   shrink so far, so below roughly 530px of stage the three distributor cards
   stop clearing each other. They shrink with the stage from here and the outer
   two run to its edges. */

@media (max-width: 1330px) {
  .hero-flow {
    font-size: clamp(0.7rem, 0.55vw + 0.42rem, 0.8rem);
  }
}

/* ============================================================ ≤ 1200px === */

@media (max-width: 1200px) {
  .nav__link {
    padding-inline: 0.6rem;
  }

  .site-header__inner {
    gap: var(--sp-4);
  }

}

/* ============================================================ ≤ 1024px === */
/* Desktop nav gives way to the drawer, and every two-column composition
   stacks. This is the single biggest structural shift on the site. */

@media (max-width: 1024px) {
  :root {
    --header-h: 76px;
  }

  .nav,
  .header-actions .btn--outline {
    display: none;
  }

  .nav-toggle {
    display: grid;
  }

  /* --- hero ------------------------------------------------------------ */

  /* --- two-column sections --------------------------------------------- */
  .eco,
  .audience__grid,
  .showcase,
  .reach,
  .contact,
  .split,
  .split--wide {
    grid-template-columns: minmax(0, 1fr);
  }

  /* When a split stacks, the art must not lead — copy first reads better. */
  .split--flip .split__art {
    order: 0;
  }

  .showcase__device {
    order: -1;
  }

  .showcase__device img {
    width: min(76%, 300px);
  }

  .audience__art img {
    aspect-ratio: 16 / 10;
  }

  /* --- card grids: 3 → 2 ----------------------------------------------- */
  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* --- bento: 6-col → 4-col ------------------------------------------- */
  .bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .bento__lead {
    grid-column: span 4;
    grid-row: span 1;
    min-height: 0;
  }

  .bento__sm,
  .bento__mid {
    grid-column: span 2;
  }

  .bento__wide {
    grid-column: span 4;
  }

  /* --- steps: 5 across → 2 up ------------------------------------------ */
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.75rem, 4vw, 2.5rem);
    text-align: left;
  }

  .steps__rail {
    display: none;
  }

  .step {
    text-align: left;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--sp-4);
    align-items: center;
  }

  .step__marker {
    grid-row: span 2;
    margin-inline: 0;
    width: 46px;
    height: 46px;
    /* the rail is gone, so the "active" state can't wait for it */
    border-color: var(--brand-teal);
    background: linear-gradient(var(--bg-brand-subtle), var(--bg-brand-subtle)),
      var(--band-bg, var(--bg-page));
    color: var(--color-primary);
    transition-delay: 0ms;
  }

  .steps .step:last-child .step__marker {
    border-color: var(--brand-gold);
    background: linear-gradient(var(--bg-gold-subtle), var(--bg-gold-subtle)),
      var(--band-bg, var(--bg-page));
    color: var(--color-accent-text);
  }

  .step__title {
    margin-top: 0;
    align-self: end;
  }

  .step__text {
    margin-inline: 0;
    max-width: none;
    align-self: start;
  }

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

  .footer-brand {
    grid-column: span 2;
  }
}

/* ============================================================= ≤ 900px === */

@media (max-width: 900px) {
  /* The flow diagram stops being a column beside the copy: below this width
     it stacks under it, still full width but capped so it never dwarfs the
     text it illustrates. */
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 5vw, 3rem);
  }

  .hero-flow {
    width: min(100%, 400px);
  }

  /* Stacked, the hero is far taller than it is wide, and cover would blow the
     artwork up to a two-metre-wide crop of one arch. It becomes a band along
     the base instead, at its own aspect. */
  .hero__skyline {
    inset: auto 0 0;
    height: auto;
    object-fit: contain;
    opacity: 0.26;
  }
}

/* ============================================================= ≤ 760px === */

@media (max-width: 760px) {
  :root {
    --section-py: clamp(2.25rem, 6vw, 3.25rem);
    --section-py-lg: clamp(2.75rem, 7.5vw, 4rem);
  }

  /* --- bento: 4-col → 2-col ------------------------------------------- */
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bento__lead,
  .bento__wide {
    grid-column: span 2;
  }

  .bento__sm,
  .bento__mid {
    grid-column: span 1;
  }

  /* --- pillars become a single stacked column with a left rule --------- */
  .pillars {
    grid-template-columns: minmax(0, 1fr);
  }

  /* --- journey: the rail only works while all five sit in one row ------- */
  .journey {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.75rem, 4vw, 2.5rem);
  }

  .journey::before {
    display: none;
  }

  /* --- flow: the connector chevrons only make sense in a row ----------- */
  .flow__stage:not(:last-child)::after {
    display: none;
  }

  /* --- ecosystem: the info panel goes under the ladder ------------------ */
  .eco__panel {
    border-radius: var(--radius-lg);
  }

  /* --- contact ---------------------------------------------------------- */
  .contact__form-wrap {
    padding: var(--sp-5);
  }

  /* --- footer ----------------------------------------------------------- */
  .footer-bottom {
    justify-content: flex-start;
  }

  .site-footer__scene {
    opacity: 0.1;
  }
}

/* ============================================================= ≤ 620px === */

@media (max-width: 620px) {
  /* --- hero: dedicated mobile composition ------------------------------ */
  /* Not a shrunken desktop hero — the decoration is stripped back so badge →
     headline → copy → CTA → network visual reads as one clean column. */
  .hero {
    padding-top: calc(var(--header-h) + 1.75rem);
    text-align: left;
  }

  .hero__skyline {
    opacity: 0.22;
  }

  .hero__actions .btn {
    flex: 1 1 100%;
  }

  .hero__trust {
    gap: var(--sp-2);
  }



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

  /* --- card grids go single file --------------------------------------- */
  .grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* --- steps + bento go single file ------------------------------------ */
  .steps {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
  }

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

  .bento__lead,
  .bento__wide,
  .bento__sm,
  .bento__mid {
    grid-column: span 1;
  }

  /* --- tabs scroll rather than wrap ------------------------------------- */
  .tabs {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: flex-start;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .tabs__btn {
    padding-inline: 1rem;
    flex: 1 0 auto;
  }

  /* --- footer ----------------------------------------------------------- */
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
  }

  .footer-brand {
    grid-column: span 1;
  }

  /* --- CTA -------------------------------------------------------------- */
  .cta__inner {
    border-radius: var(--radius-xl);
  }

  .cta__actions .btn {
    flex: 1 1 100%;
  }
}

/* ============================================================= ≤ 480px === */

@media (max-width: 480px) {
  :root {
    --gutter: 1.125rem;
    --header-h: 68px;
  }

  .brand img {
    height: 40px;
  }

  .drawer {
    width: 100vw;
    border-left: 0;
  }

  .drawer__link {
    font-size: 1.25rem;
    padding-block: var(--sp-3);
  }







  .card {
    padding: var(--sp-5);
  }

  .logo-strip {
    gap: var(--sp-6) var(--sp-8);
  }

  .cred__item {
    padding-block: var(--sp-4);
  }

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

/* ============================================================= ≤ 380px === */
/* 320–380: the floor. Nothing may overflow here. */

@media (max-width: 380px) {

  /* At this width the three distributor nodes would collide, so the outer
     two tuck under the centre one and the spine reads vertically. */



  .hero__title {
    font-size: clamp(2rem, 11vw, 2.75rem);
  }

  .btn {
    --btn-px: 1.1rem;
  }

  .btn--lg {
    --btn-px: 1.35rem;
    font-size: var(--fs-sm);
  }

  .footer-apps img {
    height: 36px;
  }
}

/* ==================================================== pointer / hover ==== */
/* Touch devices get no hover-only affordances and no pointer parallax. */

@media (hover: none), (pointer: coarse) {

  .card--interactive:hover,
  .bento > *:hover,
  .flow__stage:hover,
  .contact__item:hover {
    transform: none;
  }

  .marquee:hover .marquee__track {
    animation-play-state: running;
  }

  /* Map pin labels can't be hovered, so show them all. */
  .reach__pin span {
    opacity: 1;
  }
}

/* ============================================================== print ==== */

@media print {
  .site-header,
  .drawer,
  .drawer-scrim,
  .nav-toggle,
  .ambient,
  .dot-field,
  .hero__skyline,
  .marquee,
  .cta {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}