/* V18 — iPad / tablet optimization. Phone rules (<=600px) stay untouched. */
@media (min-width: 601px) and (max-width: 1180px) {
  html { scroll-padding-top: 78px; }
  body { overflow-x: hidden; }
  .container { width: min(calc(100% - 48px), var(--max)); }

  /* Header: compact tablet navigation via hamburger, avoiding squeezed desktop nav. */
  .header-inner { min-height: 76px; gap: 18px; }
  .brand { min-width: 0; }
  .brand-mark { width: 56px; height: 40px; flex: 0 0 56px; }
  .brand-mark img { width: 56px; height: 40px; }
  .brand-copy strong { font-size: .96rem; }
  .brand-copy span { font-size: .72rem; }
  .menu-button {
    display: grid !important;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    flex: 0 0 46px;
    border: 1px solid rgba(16,59,92,.20);
    color: var(--navy-deep);
  }
  .nav {
    display: none !important;
    position: absolute;
    left: 0;
    right: 0;
    top: 76px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 14px 24px 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    box-shadow: 0 14px 28px rgba(7,31,49,.10);
    max-height: calc(100vh - 76px);
    overflow-y: auto;
  }
  .nav.open { display: flex !important; }
  .nav a { padding: 11px 4px; border-bottom: 1px solid var(--line); font-size: .94rem; }
  .nav .cta { margin-top: 10px; text-align: center; padding: 11px 14px; }

  /* Tablet typography and vertical rhythm. */
  .hero { padding: 66px 0 60px; }
  section { padding: 64px 0; }
  .section-sm { padding: 44px 0; }
  .page-hero { padding: 54px 0 50px; }
  .hero-home h1 { font-size: clamp(2.65rem, 6.2vw, 4rem); line-height: 1.01; }
  .page-hero h1, .about-page-hero h1 { font-size: clamp(2.55rem, 5.7vw, 3.7rem); line-height: 1.03; }
  h2 { font-size: clamp(2rem, 4.7vw, 2.85rem); }
  h3 { font-size: 1.18rem; }
  .hero .lead, .page-hero .lead { font-size: 1.08rem; line-height: 1.55; }
  .lede { font-size: 1.08rem; line-height: 1.62; }
  .statement { font-size: clamp(1.7rem, 3.5vw, 2.3rem); }
  h1, h2, h3, .statement, .architecture-title {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  /* Dense modules should use tablet width instead of becoming oversized single columns. */
  .cards, .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
  .card { padding: 24px; }
  .flow-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .flow-step { padding: 22px; }
  .flow-step:nth-child(2) { border-right: 0; }
  .flow-step:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .quote-panel { padding: 30px; }
  .quote-panel p { font-size: 1.20rem; }

  /* Technical graphics. */
  .architecture-graphic { height: clamp(290px, 38vw, 380px); }
  .flow-image-panel { height: 220px; min-height: 0; }
  .flow-image-panel p { margin: 0 28px 26px; font-size: 1.05rem; }

  /* Topics and footer. */
  .topic-index { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .content-topic p { font-size: 1.02rem; }
  .cta-band { padding: 50px 0; }
}

/* Portrait tablets: preserve breathing room and useful two-column modules. */
@media (min-width: 701px) and (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; gap: 30px; }
  .cards, .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 34px; }
  .footer-grid > :first-child { grid-column: 1 / -1; }

  /* About: executive portrait remains beside headline on iPad portrait. */
  .about-page-hero { padding: 44px 0 0; overflow: hidden; }
  .about-hero-grid {
    grid-template-columns: minmax(0,1.12fr) minmax(250px,.88fr) !important;
    gap: 24px !important;
    align-items: end !important;
  }
  .about-hero-copy { padding: 0 0 34px !important; min-width: 0; }
  .about-page-hero h1 { font-size: clamp(2.35rem, 5.6vw, 3.05rem); }
  .about-page-hero .lead { font-size: 1rem; }
  .about-portrait {
    position: relative;
    min-height: 350px !important;
    height: 350px !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
    display: block !important;
  }
  .about-portrait img {
    position: absolute !important;
    right: -7% !important;
    bottom: 0 !important;
    width: 118% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
  }
  .about-mission-grid {
    grid-template-columns: minmax(0,1.05fr) minmax(280px,.95fr) !important;
    gap: 30px !important;
  }
  .about-mission-grid .quote-panel { margin-top: 58px; }
  .network-box { grid-template-columns: minmax(160px,.45fr) minmax(0,1.55fr) !important; }
}

/* Small tablets / large phones in landscape: stack About hero rather than squeezing it. */
@media (min-width: 601px) and (max-width: 700px) {
  .about-hero-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .about-hero-copy { padding-bottom: 26px !important; }
  .about-portrait {
    min-height: 310px !important;
    height: 310px !important;
    border: 0 !important;
    overflow: hidden !important;
  }
  .about-portrait img {
    position: absolute !important;
    right: -4% !important;
    bottom: 0 !important;
    width: 104% !important;
    max-width: none !important;
  }
  .about-mission-grid, .network-box { grid-template-columns: 1fr !important; }
  .about-mission-grid .quote-panel { margin-top: 0; }
}

/* iPad landscape / compact laptops: keep two-column page composition but tame hero scale. */
@media (min-width: 901px) and (max-width: 1180px) {
  .hero-grid { grid-template-columns: minmax(0,1.25fr) minmax(250px,.75fr); gap: 42px; }
  .grid-2 { gap: 32px; }
  .footer-grid { gap: 34px; }
  .about-hero-grid { grid-template-columns: minmax(0,1fr) minmax(350px,.9fr); gap: 32px; }
  .about-portrait { min-height: 390px; height: 390px; }
  .about-portrait img { width: 120%; right: -9%; }
  .about-mission-grid { gap: 38px; }
}