/* Responsive layer.
 *
 * The pages are laid out with inline styles inside a fixed 1240px container —
 * the only width the design was drawn for. Rather than rewrite all of that into
 * classes and risk the desktop rendering, each layout element carries a class
 * purely as a hook, and this sheet overrides the handful of properties that have
 * to change on narrow screens.
 *
 * Everything that changes layout sits inside a media query, so at >=1100px the
 * pages render exactly as they did before. The one unconditional rule is the
 * container width, which was an outright bug: width:1240px gave a horizontal
 * scrollbar to every window narrower than that, laptops included.
 *
 * Overrides need !important throughout — an inline style beats any selector.
 */

/* ---------------------------------------------------------------- global -- */

.page {
  width: 100% !important;
  max-width: 1240px;
}

html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

img, svg, image-slot { max-width: 100%; }

/* -------------------------------------------------------------- <1100px -- */
/* Just pull the 56px gutters in. Layout still holds at two columns here. */

@media (max-width: 1100px) {
  .nav,
  .band,
  .foot { padding-left: 36px !important; padding-right: 36px !important; }

  .cta {
    margin-left: 36px !important;
    margin-right: 36px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

/* --------------------------------------------------------------- <960px -- */
/* Two-column layouts stop working around here: the narrow column gets too
   tight for a diagram or a paragraph, so side-by-side becomes stacked. */

@media (max-width: 960px) {
  .split,
  .split-narrow { grid-template-columns: 1fr !important; gap: 34px !important; }

  .cards-4 { grid-template-columns: 1fr 1fr !important; }
  .cards-3 { grid-template-columns: 1fr 1fr !important; }

  .headrow {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  /* Diagram cards are pinned to 330px/400px so they line up with the text
     beside them. Once stacked there is nothing to line up with, and a fixed
     height just clips the contents. */
  .panel { height: auto !important; }
  .portrait { min-height: 420px !important; }

  .band-v { padding-top: 56px !important; padding-bottom: 56px !important; }
  .band-vb { padding-bottom: 56px !important; }

  .page h1 { font-size: clamp(30px, 6.4vw, 46px) !important; }
  .page h2 { font-size: clamp(25px, 4.6vw, 34px) !important; }
  .page h3 { font-size: clamp(19px, 2.4vw, 22px) !important; }
}

/* --------------------------------------------------------------- <680px -- */
/* Phones. Everything goes to one column and the gutters go to 20px. */

@media (max-width: 680px) {
  .nav,
  .band,
  .foot { padding-left: 20px !important; padding-right: 20px !important; }

  .band-v { padding-top: 44px !important; padding-bottom: 44px !important; }
  .band-vb { padding-bottom: 44px !important; }

  .cards-2,
  .cards-3,
  .cards-4,
  .duo { grid-template-columns: 1fr !important; }

  .split,
  .split-narrow { gap: 28px !important; }

  /* Nav: four links plus a logo will not sit on one 375px line. Wrap the
     brand onto its own centred row and let the links flow beneath it. No
     hamburger, because that would mean shipping JavaScript for it. */
  .nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 20px !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
  .brand {
    flex: 1 0 100%;
    justify-content: center;
    margin-right: 0 !important;
  }
  .nav > a {
    display: flex;
    align-items: center;
    min-height: 44px;   /* comfortable tap target */
  }

  /* Paired call-to-action buttons stack to full width rather than squeezing
     two long labels onto one line. */
  .btnrow { flex-wrap: wrap; }
  .btnrow > a {
    flex: 1 1 100%;
    text-align: center;
  }

  .statrow { flex-direction: column !important; }

  .cta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
    padding: 40px 24px !important;
  }
  .cta > a { width: 100%; text-align: center; box-sizing: border-box; }

  .foot {
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    text-align: center;
  }
  .foot-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px !important;
  }

  /* index — "Your front door": narrow the label column, but not below the
     widest of the request bars it has to hold (60px), or they spill into the
     panel beside them. */
  .diagram-door { grid-template-columns: 66px 1fr !important; gap: 12px !important; }

  /* index — the air-gap diagram is two boxes either side of a vertical
     dashed break. Stacked, that break has to run horizontally instead. */
  .gapgrid { grid-template-columns: 1fr !important; }
  .gapdivider {
    flex-direction: row !important;
    min-height: 56px;
  }
  .gapdivider > div:first-child,
  .gapdivider > div:last-child {
    width: auto !important;
    height: 0 !important;
    border-left: none !important;
    border-top: 2px dashed oklch(0.78 0.014 215) !important;
  }

  /* capabilities — the four-stage flow. The connecting bars only make sense
     in a single row, so they go, and the four stages become an even 2x2
     rather than wrapping to a lopsided 3 + 1. */
  .stageflow {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    justify-items: center;
    align-content: center;
    gap: 24px !important;
  }
  .stage-link { display: none !important; }

  /* architecture — each stack row is icon + name + description on one line.
     Let the description drop to its own line instead of crushing the name. */
  .stackrow { flex-wrap: wrap; }
  .stackrow > span:last-child { flex: 1 0 100%; }

  /* consultation — reclaim the form card's generous desktop padding. */
  .formcard { padding: 22px 20px !important; }
  .submitrow { flex-wrap: wrap; gap: 14px !important; }
  .submitrow > button { width: 100%; }
}