/* Page-only additions; shared header, typography, FAQ, process and contact stay intact. */
.construction-page { --construction-gap: clamp(20px, 2vw, 36px); }
/* The opening image inherits the shared Services hero. */
.construction-page .secondary-opening-hero { isolation: isolate; }
.construction-page .landing-intro h2 { font-size: var(--landing-section-title); font-weight: 600; line-height: 1.2; }
.construction-page .landing-intro > p { max-width: var(--reading-width); }
.construction-page .construction-services,
.construction-page .construction-management,
.construction-page .construction-start { margin-top: var(--section-spacing); }
.construction-services > p, .construction-start > p, .construction-management > p { margin-top: 12px; font-size: max(calc(20 * var(--layout-unit)), 1rem); line-height: 1.5; }
.construction-service-grid, .construction-start-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--construction-gap); margin-top: 32px; }
.construction-service-grid img { display: block; width: 100%; height: auto; aspect-ratio: 900 / 620; object-fit: cover; }
.construction-service-grid h3 { font-size: clamp(1.3125rem, 1.7vw, 2rem); margin-top: 24px; }
.construction-service-grid p { margin-top: 16px; font-size: 18px; line-height: 1.55; }
.start-card { position: relative; border: 2px solid #929697; border-radius: 6px; padding: 28px 24px; min-width: 0; transition: transform 220ms var(--motion-easing); }
.start-toggle { display: flex; width: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 18px; border: 0; background: none; color: inherit; padding: 12px 0; font: inherit; text-align: center; }
.start-toggle span { font-size: clamp(1.125rem, 1.5vw, 1.5rem); font-weight: 600; line-height: 1.3; }
.start-toggle svg { flex: 0 0 auto; }
.start-answer p { font-size: 16px; line-height: 1.55; }
.start-card.is-enhanced { min-height: 340px; }
.start-card.is-enhanced .start-toggle { min-height: 132px; transform: translateY(70px); transition: transform var(--motion-duration) var(--motion-easing); }
.start-card.is-enhanced .start-answer { margin-top: 12px; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity var(--motion-duration) var(--motion-easing), transform var(--motion-duration) var(--motion-easing), visibility var(--motion-duration); }
.start-card.is-open .start-toggle { transform: translateY(0); }
.start-card.is-open .start-answer { opacity: 1; visibility: visible; transform: none; }
/* The card click also covers its response; the native button owns keyboard focus. */
.start-card:has(.start-toggle:focus-visible) { outline: 2px solid #f2f2f2; outline-offset: 5px; }
.start-card .start-toggle:focus-visible { outline: none; }
.start-card.is-enhanced { cursor: pointer; }
.construction-project-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--construction-gap); margin-top: 40px; }
.construction-project { min-width: 0; margin: 0; }
.construction-project img { display: block; width: 100%; height: auto; aspect-ratio: 7 / 9; object-fit: cover; }
.construction-project a { display: block; overflow: hidden; }
.construction-project a img { transition: transform 220ms var(--motion-easing); }
.construction-form-note { margin-top: 20px; font-size: 14px; line-height: 1.5; }
.construction-page .contact-main { min-width: 0; }
.construction-page .services-faq summary .faq-question { flex: 1 1 0; min-width: 0; font-size: inherit; line-height: 1.45; transform: none; }
.construction-page .services-faq details[open] summary .faq-question { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .start-card.is-enhanced:hover { transform: scale(1.025); }
  .construction-project a:hover img { transform: scale(1.025); }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .start-card { padding-inline: 18px; }
  .start-card.is-enhanced { min-height: 420px; }
  .start-card.is-enhanced .start-toggle { transform: translateY(100px); }
  .start-card.is-open .start-toggle { transform: none; }
}
@media (max-width: 760px) {
  .construction-page .landing-hero > p { font-size: 18px; }
  .construction-page .landing-hero-action { font-size: 18px; max-width: 100%; }
  .construction-service-grid, .construction-start-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .construction-service-grid h3 { margin-top: 18px; }
  .construction-service-grid p { margin-top: 10px; font-size: 16px; }
  .start-card.is-enhanced { min-height: 310px; padding: 24px; }
  .start-card.is-enhanced .start-toggle { transform: translateY(60px); }
  .start-card.is-open .start-toggle { transform: none; }
  .construction-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .start-card, .start-card.is-enhanced .start-toggle, .start-card.is-enhanced .start-answer, .construction-project a img { transition: none; }
  .start-card.is-enhanced:hover, .construction-project a:hover img { transform: none; }
}
@media (max-width: 360px) {
  .construction-page .site-header { padding-inline: 10px; }
  .construction-page .site-header nav { gap: 6px; font-size: 10px; }
  .construction-page .header-logo { width: 36px; }
}

/* Match the homepage service action without changing shared styles. */
.construction-page :is(.construction-start, .construction-management) .center-link .pill { font-size: max(calc(28 * var(--layout-unit)), 1.125rem); line-height: 1.2; }
.start-card .start-toggle:focus:not(:focus-visible) { outline: none; }
@media (max-width: 760px) {
  .construction-page :is(.construction-start, .construction-management) .center-link .pill { font-size: 1.125rem; }
}

/* Shift expanded card content down 20px while preserving total padding. */
.construction-page .start-card.is-open { padding-top: 48px; padding-bottom: 8px; }
@media (max-width: 760px) {
  .construction-page .start-card.is-open { padding-top: 44px; padding-bottom: 4px; }
}

/* Smooth navigation to the construction contact form. */
html:has(body.construction-page) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html:has(body.construction-page) { scroll-behavior: auto; }
}

/* Keep external terrain icons aligned with the project SVG icons. */
.start-toggle > img { display: block; width: 56px; height: 56px; flex: 0 0 auto; object-fit: contain; }

/* VETAC signature belongs only to the Construction hero. */
.construction-page .landing-hero > .construction-vetac-logo { display: block; width: clamp(240px, 30vw, 390px); max-width: 100%; height: auto; margin: -22px auto 18px; }

.construction-page .landing-hero > .construction-vetac-logo + .landing-intro { margin-top: 0; }

/* Reuse the homepage team grid, with three benefits on wide screens. */
@media (min-width: 1201px) {
  .construction-management-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .construction-management-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .construction-management-grid > article { padding-inline: 0; text-align: left; }
  .construction-management-grid > article + article { border-inline-start: 0; border-block-start: var(--separator-width) solid #777; padding-block-start: 32px; }
  .construction-management-grid p { line-height: 1.65; }
}
/* Decorative plus marks mirror the reference; the benefits remain static. */
.construction-management-grid h3 { display: flex; align-items: flex-start; gap: calc(var(--space-related) + 30px); }
.construction-management-grid .management-plus {
  position: relative;
  flex: 0 0 1.2em;
  height: 1.2em;
  margin-block-start: .075em;
}
.construction-management-grid .management-plus::before,
.construction-management-grid .management-plus::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.construction-management-grid .management-plus::before { width: 100%; height: 2px; }
.construction-management-grid .management-plus::after { width: 2px; height: 100%; }