/* v0.4.0 — tablet + Android phone responsive layout corrections. */
/* Protect content grids against min-content width growth. */
img, svg { max-width: 100%; }
header .navwrap { min-width: 0; }
header .brand { min-width: 0; }
header .brand .mark { flex-shrink: 0; }
header .brand .brandtext { min-width: 0; }
header .menu-toggle { flex-shrink: 0; }
.hero-grid > *, .about-hero .hero-grid > *, .contact-hero-grid > *,
.port-grid > *, .service-grid > *, .model-grid > *, .research-grid > *,
.enquiry-grid > *, .story-grid > *, .coi-grid > *, .theory-grid > * { min-width: 0; }
.port-card h3, .port-card p, .service-card h3, .service-card p, .model h3,
.hero h1, .about-hero h1, .contact-hero h1 { overflow-wrap: break-word; }

/* Portrait/text columns and supporting panels need to stack on narrow tablets. */
@media (max-width: 900px) {
  .about-hero .hero-grid,
  .contact-hero .contact-hero-grid,
  .hero .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
  .about-hero .hero-grid { padding-top: 64px; padding-bottom: 70px; }
  .about-hero .about-portrait-card { width: min(100%, 520px); margin: 0 auto; }
  .contact-hero .contact-hero-grid { padding-top: 68px; padding-bottom: 74px; }
  .hero .hero-grid { padding-top: 64px; padding-bottom: 72px; }
  .model-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* Prevent multi-column consulting cards being squeezed beyond the viewport. */
@media (max-width: 700px) {
  .model-grid { grid-template-columns: minmax(0,1fr); }
  .model { padding: 25px; }
  .services .service-grid { grid-template-columns: minmax(0, 1fr); }
  .services .service-card,
  .services .service-card:nth-child(4),
  .services .service-card:nth-child(5) { grid-column: auto; }
}
/* Keep the logo and menu together even on 320–390 px Android devices. */
@media (max-width: 440px) {
  .wrap { padding-left: 17px; padding-right: 17px; }
  header .navwrap { gap: 8px; }
  header .brand { flex: 1 1 auto; gap: 8px; white-space: normal; }
  header .brand .mark { width: 38px; height: 38px; flex-basis: 38px; font-size: 19px; }
  header .brand .brandtext { font-size: 13px; letter-spacing: 0; line-height: 1.12; }
  header .brand .brandtext small { font-size: 8px; letter-spacing: .45px; line-height: 1.3; }
  header .menu-toggle { padding: 7px 9px; font-size: 21px; line-height: 1.2; }
  header nav#mainnav { left: 10px; right: 10px; max-width: calc(100% - 20px); }
  .top-strip .top-inner { min-width: 0; }
  .top-strip .top-inner span:first-child { overflow-wrap: break-word; }
}
@media (max-width: 360px) {
  header .navwrap { gap: 6px; }
  header .brand { gap: 6px; }
  header .brand .mark { width: 35px; height: 35px; flex-basis: 35px; }
  header .brand .brandtext { font-size: 12px; }
  header .brand .brandtext small { font-size: 7.5px; letter-spacing: .2px; }
}