/* Content-led layouts for phones, tablets, laptops, and wide screens. */
img { max-width: 100%; }
.hero-copy, .section-shell > *, .team-card > *, .approach-step > *,
.contact-inner > *, .capability-panel > * { min-width: 0; }
h1, h2, h3, p, .team-role, .customer-name { overflow-wrap: anywhere; }
.hero-actions, .hero-proof, .site-footer > div { flex-wrap: wrap; }
.hero-actions { gap: 16px 25px; }
.hero-proof { row-gap: 20px; }
.button, .menu-toggle, .site-nav a, .text-link, .linkedin-link,
.service-card a, .site-footer a { min-height: 44px; }
.text-link, .linkedin-link, .service-card a, .site-footer a {
  display: inline-flex;
  align-items: center;
}
.service-card a { justify-content: space-between; }
.contact-form input, .contact-form textarea { font-size: 16px; }
:focus-visible { outline: 2px solid #498b77; outline-offset: 5px; }
.contact :focus-visible, .hero :focus-visible { outline-color: var(--mint); }
.commitment-tags { position: static; flex-wrap: wrap; margin-top: 28px; }
.expertise-inner {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 40px 6vw;
}
.expertise-copy { align-self: start; }
.metric { position: static; width: auto; max-width: 260px; }
.metric-one { grid-column: 1; }
.metric-two { grid-column: 2; }
.team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.team-card { grid-template-columns: 120px minmax(0, 1fr); gap: 24px; }
.team-photo, .team-placeholder { width: 120px; height: 165px; }

@media (max-width: 1100px) {
  .site-header { position: relative; height: 68px; }
  .menu-toggle { display: grid; align-content: center; gap: 5px; padding: 11px; cursor: pointer; }
  .menu-toggle span:not(.sr-only) { width: 23px; height: 1px; background: var(--ink); }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    z-index: 10; padding: 16px 5vw 24px; background: var(--cream);
    flex-direction: column; align-items: stretch; gap: 4px;
    max-height: calc(100svh - 68px); overflow-y: auto;
    box-shadow: 0 12px 20px #071b3211;
  }
  .site-nav.open { display: flex; }
  .site-nav a { display: flex; align-items: center; padding: 11px 16px; }
  .hero { min-height: calc(100svh - 68px); }
  .team-grid { grid-template-columns: 1fr; }
  .team-card { min-height: 0; grid-template-columns: 155px minmax(0, 1fr); }
  .team-photo, .team-placeholder { width: 155px; height: 205px; }
  .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  .hero h1 { font-size: clamp(40px, 7.5vw, 60px); }
  .expertise-inner { min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 80px; }
  .expertise-quote, .expertise-copy { grid-column: 1 / -1; }
  .expertise-copy > p { max-width: 600px; }
  .industries { padding-block: 85px; }
  .commitment-card { min-height: 0; }
  .hero-proof div { padding-inline: 16px; }
}

@media (max-width: 560px) {
  .hero { padding: 52px 6vw; }
  .hero h1 { font-size: clamp(34px, 9vw, 47px); }
  .hero-lead { font-size: 16px; }
  .hero-actions { align-items: flex-start; flex-direction: column; margin-top: 26px; }
  .hero-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .hero-proof div { padding: 0; border: 0; }
  .trust-bar { font-size: 9px; gap: 20px; line-height: 1.6; }
  .service-grid, .industry-grid { grid-template-columns: minmax(0, 1fr); }
  .team-card { grid-template-columns: 90px minmax(0, 1fr); padding: 20px; gap: 16px; }
  .team-photo, .team-placeholder { width: 90px; height: 125px; }
  .team-card h3 { font-size: 25px; }
  .product-card { padding: 26px; min-height: 0; }
  .product-card h3 { margin-top: 40px; }
  .approach-step { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
  .section-intro h2, .expertise h2, .approach h2, .commitment h2,
  .contact h2, .team-heading h2, .products-heading h2 { font-size: clamp(32px, 8vw, 42px); }
  .metric strong { font-size: 54px; }
  .contact-form .button { max-width: 100%; }
}

@media (max-width: 360px) {
  .team-card { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}