/* Contact page — built on the shared Home visual system */
.contact-page { background: var(--bg-primary); color: var(--ink); }
.contact-page main > section { padding: 0; }
.contact-page h1, .contact-page h2, .contact-page h3, .contact-page h4, .contact-page p { margin: 0; }
.contact-page address { font-style: normal; }

.contact-hero { position: relative; display: grid; min-height: min(650px, calc(100svh - 118px)); align-items: center; overflow: hidden; color: #fff; isolation: isolate; }
.contact-hero__image { position: absolute; z-index: -2; inset: 0; background: url('../assets/images/contact-hero-engineering-team.jpg') center/cover no-repeat; transform: scale(1.02); }
.contact-hero__overlay { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(4, 20, 33, .96), rgba(5, 24, 40, .77) 48%, rgba(7, 23, 36, .3)); }
.contact-hero__content { padding: 96px 0 146px; }
.contact-hero h1 { max-width: 730px; margin-top: 22px; color: #fff; font: 800 clamp(2.7rem, 5.25vw, 5rem) / 1.08 var(--sans-display); letter-spacing: -.055em; }
.contact-hero__lede { max-width: 610px; margin-top: 26px; color: rgba(255, 255, 255, .84); font-size: 1.07rem; line-height: 1.75; }
.contact-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 29px; margin-top: 35px; }
.contact-hero__actions .text-link { color: #fff; }
.contact-hero__actions .text-link:hover { color: #d9f0ff; }
.contact-hero__panel { position: absolute; right: max(24px, calc((100vw - 1240px) / 2)); bottom: 0; width: min(405px, 34vw); padding: 28px 30px; background: var(--blue); }
.contact-hero__panel span { display: block; color: #c9e4f6; font: 800 .64rem / 1.25 var(--sans-display); letter-spacing: .12em; text-transform: uppercase; }
.contact-hero__panel strong { display: block; margin-top: 10px; color: #fff; font: 700 1.02rem / 1.45 var(--sans-display); }
.contact-hero__panel a { display: inline-flex; gap: 8px; margin-top: 16px; color: #fff; font-size: .76rem; font-weight: 700; text-decoration: none; }
.contact-hero__panel a:hover { color: #d2efff; }

.contact-emergency { background: var(--signal); color: #fff; }
.contact-emergency__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; padding: 33px 0; }
.contact-emergency__inner h2 { color: #fff; font: 800 clamp(1.35rem, 2.35vw, 1.8rem) / 1.18 var(--sans-display); letter-spacing: -.035em; }
.contact-emergency__inner p { margin-top: 7px; color: rgba(255, 255, 255, .82); font-size: .92rem; }
.contact-emergency__numbers { display: flex; flex-wrap: wrap; gap: 12px; }
.contact-emergency__numbers a { display: inline-flex; align-items: center; min-height: 45px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .42); color: #fff; font: 700 .86rem var(--sans-body); text-decoration: none; transition: background .2s ease, color .2s ease; }
.contact-emergency__numbers a:hover { background: #fff; color: var(--signal); }

.contact-offices { padding: clamp(100px, 10.5vw, 150px) 0; background: var(--bg-primary); }
.contact-section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .47fr); gap: 38px 80px; align-items: end; margin-bottom: 56px; }
.contact-section-heading h2 { margin-top: 18px; color: var(--ink); font: 800 clamp(2.1rem, 3.6vw, 3.3rem) / 1.15 var(--sans-display); letter-spacing: -.05em; }
.contact-section-heading > p { color: var(--ink-soft); font-size: 1rem; line-height: 1.75; }
.office-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.office-card { min-height: 365px; padding: 31px 30px; background: var(--bg-primary); transition: background .25s ease, color .25s ease; }
.office-card:hover { background: var(--navy); color: #fff; }
.office-card__number { color: #89a0b5; font: 700 .67rem / 1 var(--sans-display); letter-spacing: .1em; }
.office-card__icon { display: grid; width: 44px; height: 44px; margin-top: 27px; place-items: center; color: var(--blue); }
.office-card__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.office-card h3 { margin-top: 21px; color: var(--ink); font: 700 1.2rem / 1.3 var(--sans-display); letter-spacing: -.025em; transition: color .25s ease; }
.office-card address, .office-card p { margin-top: 12px; color: var(--ink-soft); font-size: .89rem; line-height: 1.7; transition: color .25s ease; }
.office-card p { margin-top: 15px; }
.office-card p strong { color: var(--ink); font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; transition: color .25s ease; }
.office-card a { color: var(--blue); font-weight: 700; text-decoration: none; transition: color .25s ease; }
.office-card a:hover { color: var(--signal); }
.office-card:hover h3, .office-card:hover p strong { color: #fff; }
.office-card:hover address, .office-card:hover p { color: rgba(255, 255, 255, .7); }
.office-card:hover a { color: #a9ddff; }

.contact-connect { padding: clamp(100px, 10.5vw, 150px) 0; background: var(--surface); }
.contact-connect__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .83fr); gap: clamp(46px, 8vw, 110px); align-items: start; }
.contact-connect__heading h2, .contact-visit h2 { margin-top: 18px; color: var(--ink); font: 800 clamp(2.1rem, 3.35vw, 3.15rem) / 1.15 var(--sans-display); letter-spacing: -.05em; }
.contact-connect__heading > p { max-width: 560px; margin-top: 19px; color: var(--ink-soft); line-height: 1.75; }
.contact-form { display: grid; gap: 18px; margin-top: 36px; }
.contact-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.contact-form__field { display: grid; gap: 8px; }
.contact-form label { color: var(--ink); font: 700 .72rem / 1.3 var(--sans-display); letter-spacing: .06em; text-transform: uppercase; }
.contact-form input, .contact-form textarea, .contact-form select { width: 100%; min-height: 53px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 0; outline: 0; background: var(--bg-primary); color: var(--ink); font: 400 .94rem / 1.45 var(--sans-body); transition: border-color .2s ease, box-shadow .2s ease; }
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #7b8b9a; }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23, 105, 170, .12); }
.contact-form .button { width: 100%; margin-top: 7px; cursor: pointer; }
.contact-form__status { margin-top: 19px; padding: 14px 16px; border-left: 3px solid #2f9a69; background: rgba(47, 154, 105, .1); color: var(--ink); font-size: .88rem; line-height: 1.55; }
.contact-visit { padding: 0; }
.contact-map { position: relative; height: 390px; margin-top: 35px; overflow: hidden; border: 1px solid var(--line); background: var(--blue-light); }
.contact-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.contact-hours { margin-top: 31px; padding-top: 25px; border-top: 1px solid var(--line); }
.contact-hours h3 { color: var(--ink); font: 800 .7rem / 1.2 var(--sans-display); letter-spacing: .12em; text-transform: uppercase; }
.contact-hours dl { display: grid; grid-template-columns: max-content 1fr; gap: 9px 24px; margin-top: 16px; color: var(--ink-soft); font-size: .88rem; line-height: 1.55; }
.contact-hours dt { color: var(--ink); font-weight: 700; }

.contact-routes { padding: clamp(100px, 10.5vw, 150px) 0; background: var(--bg-primary); }
.contact-routes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.contact-route { min-height: 276px; padding: 30px; background: var(--bg-primary); }
.contact-route__label { color: var(--signal); font: 800 .67rem / 1 var(--sans-display); letter-spacing: .12em; text-transform: uppercase; }
.contact-route h3 { margin-top: 28px; color: var(--ink); font: 700 1.2rem / 1.3 var(--sans-display); letter-spacing: -.025em; }
.contact-route p { margin-top: 12px; color: var(--ink-soft); font-size: .89rem; line-height: 1.7; }
.contact-route a { color: var(--blue); font-weight: 700; text-decoration: none; }
.contact-route a:hover { color: var(--signal); }
.contact-route .button { margin-top: 20px; cursor: pointer; }
.contact-chat-message { margin-top: 13px !important; color: var(--ink-soft); font-size: .8rem !important; }

.contact-faq { padding: clamp(100px, 10.5vw, 150px) 0; background: var(--surface); }
.contact-faq__list { max-width: 920px; }
.contact-faq details { border-top: 1px solid var(--line); }
.contact-faq details:last-child { border-bottom: 1px solid var(--line); }
.contact-faq summary { position: relative; padding: 24px 44px 24px 0; color: var(--ink); font: 700 clamp(1rem, 1.7vw, 1.15rem) / 1.4 var(--sans-display); cursor: pointer; list-style: none; }
.contact-faq summary::-webkit-details-marker { display: none; }
.contact-faq summary::after { position: absolute; top: 50%; right: 4px; color: var(--signal); content: '+'; font: 400 1.65rem / 1 var(--sans-body); transform: translateY(-50%); }
.contact-faq details[open] summary::after { content: '−'; }
.contact-faq details p { max-width: 780px; padding: 0 0 25px; color: var(--ink-soft); font-size: .94rem; line-height: 1.75; }

@media (max-width: 900px) {
  .contact-connect__grid { grid-template-columns: 1fr; gap: 60px; }
  .contact-visit { max-width: 680px; }
  .contact-section-heading { grid-template-columns: 1fr; gap: 21px; }
  .office-grid, .contact-routes__grid { grid-template-columns: repeat(2, 1fr); }
  .office-card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .contact-hero { min-height: 590px; }
  .contact-hero__content { padding: 82px 0 170px; }
  .contact-hero__panel { right: 18px; width: min(450px, calc(100% - 36px)); }
  .contact-emergency__inner { grid-template-columns: 1fr; gap: 21px; }
}

@media (max-width: 620px) {
  .contact-hero { min-height: 570px; }
  .contact-hero__content { padding: 69px 0 148px; }
  .contact-hero h1 { font-size: clamp(2.45rem, 12vw, 3.2rem); }
  .contact-hero__lede { font-size: .96rem; }
  .contact-hero__actions { align-items: flex-start; flex-direction: column; gap: 20px; }
  .contact-hero__panel { padding: 21px 22px; }
  .contact-offices, .contact-connect, .contact-routes, .contact-faq { padding: 96px 0; }
  .contact-section-heading { margin-bottom: 37px; }
  .contact-section-heading h2, .contact-connect__heading h2, .contact-visit h2 { font-size: 2rem; }
  .office-grid, .contact-routes__grid, .contact-form__row { grid-template-columns: 1fr; }
  .office-card, .office-card:last-child { grid-column: auto; min-height: auto; padding: 28px 24px; }
  .contact-route { min-height: auto; padding: 28px 24px; }
  .contact-map { height: 330px; }
  .contact-hours dl { grid-template-columns: 1fr; gap: 3px; }
  .contact-hours dd { margin-bottom: 10px; }
}