/* Responsive refinements: retain the crimson architectural layout. */
.hero,
.project-grid,
.service-layout,
.systems,
.warranties,
.team-grid,
.contact-grid,
.inquiry-panel,
.form-grid {
  min-width: 0;
}
.hero > *, .project-grid > *, .service-layout > *, .systems > *,
.warranties > *, .team-grid > *, .team-grid article > *,
.contact-grid > *, .inquiry-panel > *, .form-grid > * {
  min-width: 0;
}
h1 {
  font-size: clamp(2.75rem, 5.8vw, 6rem);
  letter-spacing: -.045em;
  line-height: 1.04;
}
h1 em { white-space: nowrap; }
.hero-copy { padding: 48px 8% 26px; }
.hero .eyebrow { margin-bottom: 18px; }
.hero-bottom { font-size: .75rem; letter-spacing: .06em; flex-wrap: wrap; }
.hero-bottom span:last-child { display: none; }
.button { max-width: 100%; min-height: 48px; }
.button > span { flex-shrink: 0; }
nav a, .header-cta, .text-link, footer > a:last-child {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.header-cta { flex-shrink: 0; }
.project-data { flex-wrap: wrap; row-gap: 8px; }
.project-data > span:first-child { flex-shrink: 1; }
.project-data > span:last-child { max-width: 100%; text-align: left; }
.project-title h3, .team-grid h3 { overflow-wrap: break-word; }
.contact-info > a { min-height: 44px; display: inline-flex; align-items: center; }
.contact-info > a.email { display: flex; max-width: 100%; }
summary { min-height: 48px; flex-wrap: wrap; position: relative; padding-right: 28px; }
summary:after { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.system-kind { font-size: .875rem; }
.image-tag, .photo-label small, .section-top > span { font-size: .75rem; }

/* Tablet: keep readable columns where there is space, stack the hero sooner. */
@media (max-width: 1100px) {
  header { padding-inline: 4%; gap: 20px; }
  nav { gap: 20px; }
  .hero { min-height: 0; }
  .section { padding: 64px 5%; }
  .heading-row { gap: 28px; }
  .heading-row > h2 { flex: 1.25; }
  .heading-row > p { flex: 1; }
  .team-grid article { grid-template-columns: 1fr; align-content: start; gap: 20px; }
  .team-grid img { width: 160px; height: 210px; }
  .contact-grid { grid-template-columns: 1.15fr 1fr; gap: 32px; }
  .contact h2 { font-size: clamp(2.75rem, 5.6vw, 4.5rem); }
  .contact .button { gap: 16px; padding-inline: 18px; line-height: 1.5; }
  .warranty-years { gap: 8px; }
  .warranty-years > span { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
}
@media (max-width: 900px) {
  header { min-height: 92px; height: auto; padding-block: 8px; flex-wrap: wrap; gap: 6px 20px; }
  .brand-logo { width: 156px; height: 78px; }
  nav { gap: 18px; }
  .header-cta { font-size: .875rem; }
  .header-cta span { margin-left: 10px; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding: 38px 6% 24px; }
  h1 { font-size: clamp(3rem, 9vw, 4.75rem); margin: 0 0 24px; }
  h1 br:nth-child(2) { display: inline; }
  .intro { max-width: 540px; margin-bottom: 24px; }
  .hero-bottom { margin-top: 28px; padding-top: 16px; }
  .hero-image { height: clamp(280px, 48vw, 420px); }
  .scope { flex-wrap: wrap; justify-content: flex-start; gap: 12px 28px; font-size: .875rem; }
  .heading-row { display: block; }
  .heading-row > p { max-width: 540px; margin-top: 20px; }
  h2 { font-size: clamp(2.25rem, 5.4vw, 3rem); letter-spacing: -.035em; }
  .service-layout, .systems, .warranties { grid-template-columns: 1fr; gap: 28px; }
  .muted { max-width: 540px; }
  .warranty-years { gap: 12px; }
  .warranty-years > span { font-size: clamp(2rem, 5vw, 2.75rem); }
  .warranty-options { max-width: 600px; width: 100%; }
  .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .contact-info { padding-top: 0; }
  .contact-info > a.email { font-size: clamp(1rem, 3vw, 1.5rem); }
  .inquiry-panel { grid-template-columns: 1fr; gap: 24px; }
  footer { flex-wrap: wrap; }
}
@media (max-width: 650px) {
  header { padding-inline: 5%; gap: 0 12px; }
  nav { display: flex; order: 3; width: 100%; justify-content: space-between; border-top: 1px solid #444; font-size: .875rem; }
  .brand-logo { width: 140px; height: 70px; }
  .header-cta { font-size: .875rem; padding-block: 10px; }
  .hero-copy { padding: 30px 6% 22px; }
  .eyebrow { font-size: .75rem; letter-spacing: .08em; }
  .hero .eyebrow { margin-bottom: 16px; }
  h1 { font-size: clamp(2rem, 10.5vw, 4.25rem); letter-spacing: -.04em; }
  .intro { font-size: 1rem; line-height: 1.65; }
  .hero-image { height: clamp(260px, 70vw, 365px); }
  .photo-label { flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px; }
  .photo-label > span:first-child { font-size: .75rem; }
  .photo-label > span:last-child { font-size: 1.375rem; }
  .photo-label small { letter-spacing: .03em; }
  .scope { padding: 18px 6%; gap: 10px 18px; }
  .section { padding: 48px 6%; }
  .heading-row { margin-bottom: 28px; }
  .project-grid { gap: 36px; }
  .project-title { margin-top: 18px; }
  .project-title h3 { font-size: 1.375rem; }
  .project > p, .project-data { font-size: .875rem; }
  .project-data strong { font-size: 1.25rem; }
  .systems h2 { font-size: clamp(2.125rem, 7.6vw, 2.625rem); }
  .team-grid article { grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: start; }
  .team-grid img { width: 112px; height: 150px; }
  .team-grid h3 { font-size: 1.25rem; }
  .role { font-size: .875rem; }
  .team-grid p:last-child { font-size: 1rem; }
  .contact h2 { font-size: clamp(2.625rem, 10vw, 3.625rem); }
  .contact .button { width: 100%; font-size: .9375rem; }
  .inquiry-panel { margin-top: 36px; padding-top: 32px; }
  .form-grid { grid-template-columns: 1fr; gap: 18px; }
  .inquiry-panel input, .inquiry-panel textarea { font-size: 1rem; }
  footer { padding: 24px 6%; gap: 16px 24px; }
  footer .brand { width: auto; }
  footer p { font-size: .75rem; }
  footer > a:last-child { font-size: .875rem; }
}
@media (max-width: 380px) {
  .brand-logo { width: 120px; height: 60px; }
  .header-cta { font-size: .8125rem; }
  .team-grid article { grid-template-columns: 1fr; gap: 16px; }
  .team-grid img { width: 130px; height: 175px; }
  .warranty-years { gap: 8px; }
  .warranty-years > span { font-size: 1.75rem; }
}
@media (hover: none) {
  .button:hover { transform: none; }
  .project:hover .project-photo img { transform: none; }
}