/* B2.2: readable phone and tablet copy; desktop (>=1024px) is unchanged.
   Keep layout responsive instead of shrinking the entire page or disabling zoom. */
@media screen and (max-width: 1023px) {
  body { font-size:17px; line-height:1.65; }
  .utility { font-size:11px; height:auto; min-height:28px; letter-spacing:.06em; }
  .utility .wrap { min-height:28px; padding-block:6px; line-height:1.45; }
  .utility .wrap>span:last-child { display:none; }
  .header-button { display:none; }
  .header-inner { min-height:71px; height:auto; padding-block:12px; gap:12px; }
  .menu-toggle { display:flex; align-items:center; gap:7px; padding:10px 0 10px 10px; font-size:14px; min-height:44px; flex-shrink:0; }
  .menu-toggle .icon { height:22px; width:22px; }
  .navigation { display:none; position:absolute; left:0; right:0; top:100%; padding:16px 23px 24px; background:var(--navy); color:#fff; border-top:2px solid var(--gold); box-shadow:0 12px 30px #03142b33; max-height:calc(100dvh - 90px); overflow:auto; }
  .header.menu-open .navigation { display:flex; flex-direction:column; align-items:stretch; gap:0; }
  .navigation>a { font-size:17px; padding:15px 0; border-bottom:1px solid #72829444; white-space:normal; }
  .navigation>a:after { bottom:0; }
  .eyebrow, .hero .eyebrow, .mep-feature .eyebrow, .code-copy>.eyebrow,
  .project-caption .eyebrow, .closing .eyebrow { font-size:12px; line-height:1.55; letter-spacing:.08em; }
  .hero-summary { font-size:18px; line-height:1.65; }
  .hero-sub { font-size:16px; line-height:1.65; }
  .hero-photo-caption, .media-type { font-size:12px; line-height:1.45; letter-spacing:.025em; max-width:calc(100% - 32px); }
  .button, .hero-actions .button, .mep-intro .button, .code-copy>.button,
  .section-heading .button, .production-copy .button, .closing-actions .button,
  .two-col .button, .audience-section .button, .form-panel .button, .map-holder .button {
    font-size:14px; line-height:1.5; min-height:48px; padding:13px 17px; gap:14px; max-width:100%; letter-spacing:.015em;
  }
  .button { text-align:left; }
  .text-action, .call-inline { font-size:16px; line-height:1.55; }
  .service-shortcuts span { font-size:14px; line-height:1.5; }
  .service-shortcuts a { gap:12px; min-width:0; }
  .service-shortcuts a>.icon { flex-shrink:0; }
  .mep-intro>p:not(.eyebrow), .discipline-description p,
  .code-copy>p:not(.eyebrow):not(.lead-small):not(.fine),
  .section-heading>p, .section-heading>div>p:not(.eyebrow),
  .production-copy>p:not(.eyebrow):not(.fine), .delivery-grid>div>p:not(.eyebrow),
  .closing p:not(.eyebrow), .two-col>div>p:not(.eyebrow):not(.fine),
  .discipline-card-grid p, .role-grid p:not(.eyebrow), .resolution-detail-grid p,
  .audience-section article>p:not(.eyebrow), .legal-copy>p {
    font-size:17px; line-height:1.65;
  }
  .discipline-tabs button span { font-size:15px; line-height:1.5; }
  .discipline-description { min-height:0; padding-bottom:24px; }
  .discipline-description h3, .discipline-card-grid h4 { font-size:20px; line-height:1.4; }
  .partner-signature { gap:20px; flex-wrap:wrap; }
  .partner-signature>span, .partner-card>span { font-size:12px; line-height:1.55; max-width:155px; }
  .mep-visual>p, .mep-visual p { font-size:13px; line-height:1.65; }
  .drawing-open { font-size:14px; line-height:1.5; padding:12px 14px; }
  .mep-responsibilities p, .mep-responsibilities b { font-size:15px; line-height:1.65; }
  .mep-responsibilities p b { display:block; margin:0 0 4px; }
  .code-copy>.lead-small { font-size:19px; line-height:1.5; }
  .code-steps h3, .resolution-process .code-steps h3 { font-size:19px; line-height:1.4; }
  .code-steps p, .resolution-process .code-steps p { font-size:16px; line-height:1.6; max-width:none; }
  .step-number, .resolution-process .step-number { width:36px; height:36px; font-size:18px; }
  .code-types h3 { font-size:14px; line-height:1.5; }
  .code-types li { font-size:16px; line-height:1.55; }
  .notice-figure figcaption { font-size:13px; line-height:1.5; }
  .fine, .code-copy>.fine, .production-copy>.fine, .contact-info>.fine,
  .service-detail .two-col .fine, .fine.project-note, .project-overview .fine, .role-note,
  form>.fine, .map-holder .fine { font-size:14px; line-height:1.65; }
  .project-caption p:not(.eyebrow), .delivery-options>a>p, .closing-actions>a:not(.button),
  .partner-card p, .check-list li, .faq details>p, .form-panel>p, .contact-info>p,
  .map-holder p { font-size:16px; line-height:1.65; }
  .project-caption { padding:21px; }
  .production-services span { font-size:15px; line-height:1.5; }
  .production-services>div { min-width:0; align-items:flex-start; }
  .doc-toolbar { flex-wrap:wrap; gap:8px 16px; }
  .doc-toolbar>span { font-size:12px; line-height:1.5; letter-spacing:.025em; }
  .doc-toolbar .text-action, .doc-toolbar>.text-action { font-size:14px; min-height:40px; }
  .doc-tabs button { font-size:14px; line-height:1.45; min-height:48px; padding:12px 10px; min-width:0; }
  .doc-caption { font-size:13px; line-height:1.55; flex-wrap:wrap; gap:6px 12px; }
  .doc-caption>span:last-child { white-space:normal; text-align:left; }
  .footer-main>div>h2 { font-size:14px; }
  .footer-main>div>a:not(.brand), .footer-main>div>p { font-size:16px; line-height:1.6; overflow-wrap:anywhere; }
  .footer-main>div>small { font-size:13px; line-height:1.6; }
  .footer-professional>p, .footer-bottom>.wrap { font-size:13px; line-height:1.65; }
  .footer-bottom nav { flex-wrap:wrap; gap:8px 18px; }
  .footer-bottom nav>a { font-size:14px; min-height:40px; display:inline-flex; align-items:center; }
  .page-hero .lead { font-size:18px; line-height:1.65; }
  .breadcrumb { font-size:13px; flex-wrap:wrap; gap:7px 10px; }
  .faq summary { font-size:17px; line-height:1.5; }
  .filter-bar button { font-size:15px; min-height:48px; padding:11px 15px; }
  .filter-bar>span { font-size:14px; line-height:1.5; }
  dt { font-size:12px; line-height:1.5; letter-spacing:.07em; }
  dd { font-size:16px; line-height:1.6; }
  .gallery-tile figcaption { font-size:15px; line-height:1.55; flex-wrap:wrap; gap:4px 14px; }
  .gallery-tile figcaption>span, .about-image figcaption { font-size:13px; line-height:1.6; }
  .service-jump a { font-size:15px; min-height:44px; }
  .contact-direct>a, .contact-direct>div { font-size:17px; overflow-wrap:anywhere; }
  .contact-direct small { font-size:12px; line-height:1.5; }
  form label { font-size:15px; line-height:1.6; }
  input, select, textarea, #draft-text { font-size:17px; line-height:1.5; min-height:48px; }
  .checkbox { font-size:14px; line-height:1.6; }
  .checkbox input { min-height:0; }
  .legal-nav>a { font-size:15px; min-height:40px; }
  .legal-copy>.legal-date { font-size:14px!important; }
  .dialog-top .eyebrow { font-size:12px; }
  .dialog-top h2 { font-size:20px; }
  .gallery-controls { flex-wrap:wrap; gap:10px; }
  .gallery-controls>div { gap:7px; }
  .gallery-controls .icon-button { width:44px; height:44px; min-width:44px; }
  .zoom-reset, #gallery-count { font-size:14px; min-height:44px; }
  #gallery-count { display:grid; place-items:center; }
  #gallery-caption { font-size:16px; }
  #gallery-note { font-size:13px; line-height:1.6; }
}
@media screen and (max-width: 600px) {
  /* A vertical process keeps useful explanations readable on narrow screens. */
  .code-steps, .resolution-process .code-steps { grid-template-columns:1fr; gap:0; margin:28px 0; padding-bottom:0; }
  .code-steps li, .resolution-process .code-steps li { display:grid; grid-template-columns:38px minmax(0,1fr); column-gap:16px; padding:0 0 22px; margin:0 0 22px; border-bottom:1px solid var(--line); }
  .code-steps li:last-child { border-bottom:0; padding-bottom:0; margin-bottom:0; }
  .code-steps li:not(:last-child):after { display:none; }
  .code-steps .step-number { grid-column:1; grid-row:1 / span 2; margin:2px 0 0; }
  .code-steps h3, .code-steps p { grid-column:2; }
  .code-types ul { grid-template-columns:1fr; gap:14px; }
  .production-services { grid-template-columns:1fr; gap:18px; }
  .footer-main { grid-template-columns:1fr; gap:27px; }
  .footer-main>div:first-child { grid-column:auto; }
  .footer-main>div>a:not(.brand) { min-height:36px; display:flex; }
}
@media screen and (max-width: 480px) {
  .hero-actions { display:grid; grid-template-columns:1fr; gap:12px; }
  .hero-actions .button { width:100%; justify-content:space-between; }
  .service-shortcuts a { padding:16px 10px!important; gap:10px; align-items:flex-start; }
  .service-shortcuts span { font-size:13px; }
  .project-overview dl { grid-template-columns:1fr; }
}