/* Contact page only.
   Builds on service-detail.css (hero, benefits strip, FAQ rows) and quote-request.css (form fields, benefits, question card).
   Spacing, title sizes, buttons and FAQ toggles come from the shared tokens/components in style.css. */

/* Hero */
.contact-hero { height: 484px; }
.contact-hero .service-hero-media { width: 66%; }
.contact-hero .service-hero-media img { object-position: 60% 30%; filter: saturate(.75) brightness(.95); }
/* M15: the lower band (benefits + statement) is darkened so their text stays >= 4.5:1 over the bright desk area. */
.contact-hero .service-hero-media::after { background: linear-gradient(0deg, rgb(0 27 40 / 82%) 0%, rgb(0 27 40 / 62%) 34%, transparent 58%), linear-gradient(90deg, #002333 0%, rgb(0 35 51 / 85%) 14%, rgb(0 31 47 / 35%) 36%, rgb(0 31 47 / 12%) 65%, rgb(0 31 47 / 30%)); }
.contact-hero .service-hero-inner { padding-top: 46px; }
.contact-hero .service-breadcrumb { margin-bottom: 30px; }
.contact-hero .service-hero-text { font-size: 20px; line-height: 1.6; max-width: 660px; margin-top: 18px; }
.contact-benefits { margin-top: 34px; gap: 46px; }
/* The three hero items share the width left of the keyword box and wrap inside it (longer EN/FR copy
   since Milestone 9); the hero keeps its approved height but may grow instead of clipping. */
@media (min-width: 1101px) {
  .contact-hero, .contact-hero .service-hero-inner { height: auto; min-height: 484px; }
  .contact-hero .service-hero-inner { padding-bottom: 40px; }
  .contact-benefits { max-width: calc(100% - 260px); }
  .contact-benefits li { flex: 1 1 0; min-width: 0; }
}
.contact-benefits .icon { width: 40px; height: 40px; }
.contact-hero-statement { position: absolute; right: var(--inner); bottom: 36px; color: white; text-transform: uppercase; letter-spacing: .15em; font-size: 18.5px; line-height: 1.66; font-weight: 550; }
.contact-hero-statement::before, .contact-hero-statement::after { content: ''; display: block; width: 52px; height: 3px; background: var(--teal); margin-block: 22px 18px; }
.contact-hero-statement::after { margin-block: 22px 0; }

/* Main: form card + contact sidebar (cards share the container edges) */
.contact-main { background: var(--surface); padding-block: var(--space-section); }
.contact-layout.service-detail-inner { padding-inline: 0; }
.contact-layout { display: grid; grid-template-columns: 770px minmax(0, 1fr); gap: 40px; align-items: start; }
.contact-form-card { margin-top: 0; padding: 30px 30px 28px; }
.contact-form-card h2 { font-size: 40px; }
.contact-form-card .quote-form { margin-top: 18px; row-gap: 15px; }
.contact-form-card .quote-upload { min-height: 84px; }
.contact-form-card .quote-consent label { font-size: 14.5px; }
.contact-sidebar { display: grid; gap: 18px; }
.contact-details-card { background: #f5fafc; border: 1px solid #e3edf2; border-radius: 12px; padding: 28px 30px 30px; }
.contact-details-card h2 { font-size: 34px; letter-spacing: -.03em; }
.contact-details { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 26px; }
.contact-details li { display: flex; gap: 26px; align-items: flex-start; }
.contact-details li > span:last-child { display: grid; gap: 6px; color: var(--muted); font-size: 18px; line-height: 1.45; }
.contact-details strong { color: var(--text); font-size: 22px; font-weight: 650; letter-spacing: -.01em; }
.contact-detail-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--cyan); color: white; }
.contact-detail-icon .icon { width: 24px; height: 24px; stroke-width: 2; }
.contact-detail-icon.is-plain { background: none; color: #0a6e82; }
.contact-detail-icon.is-plain .icon { width: 40px; height: 40px; fill: currentColor; stroke: currentColor; }
.contact-follow { color: var(--text); font-weight: 700; font-size: 18px; margin-top: 30px; padding-top: 30px; position: relative; }
.contact-follow::before { content: ''; position: absolute; top: 0; left: 0; width: 46px; height: 3px; background: var(--cyan); }
.contact-social { display: flex; gap: 20px; margin-top: 16px; }
.contact-social a { width: 52px; height: 52px; border: 2px solid var(--navy-dark); border-radius: 50%; display: grid; place-items: center; color: var(--navy-dark); font-weight: 750; font-size: 20px; line-height: 1; }
.contact-social svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.contact-question-card { padding: 30px 30px 32px; }
.contact-question-card .quote-question-head { align-items: flex-start; }
.contact-headset { width: 76px; height: 76px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #0a8ea3, #075868); color: white; }
.contact-headset .icon { width: 38px; height: 38px; stroke-width: 2; }
.contact-question-card h2 { font-size: 26px; margin-top: 6px; }
.contact-question-card .quote-question-head p { font-size: 16.5px; line-height: 1.6; margin-top: 12px; }
.contact-question-card .button { margin-top: 20px; }

/* Static map + office photo: the map starts on the container edge (same line as the form card), the photo bleeds right. */
.contact-location { display: grid; grid-template-columns: minmax(0, 765fr) minmax(0, 618fr); gap: 8px; height: 396px; padding-left: max(var(--gutter), calc((var(--vw) - var(--container-max)) / 2)); background: var(--surface); }
.contact-map { position: relative; overflow: hidden; border-radius: 8px 0 0 8px; background: #dbe6ec; }
.contact-map > img { position: absolute; width: 1500px; max-width: none; height: auto; left: -520px; top: -221px; }
.contact-map-pin { position: absolute; left: 309px; top: 118px; color: #0b6474; }
.contact-map-pin .icon { width: 48px; height: 48px; fill: currentColor; stroke: white; stroke-width: 1.4; filter: drop-shadow(0 4px 6px rgb(0 0 0 / 25%)); }
.contact-map-card { position: absolute; right: 18px; bottom: 16px; width: 338px; display: flex; gap: 18px; padding: 24px 24px 22px; background: white; border-radius: 8px; box-shadow: 0 10px 28px rgb(0 20 32 / 16%); }
.contact-map-card-pin { color: #0b6474; }
.contact-map-card-pin .icon { width: 34px; height: 34px; fill: currentColor; stroke: white; stroke-width: 1.4; }
.contact-map-label { color: var(--text); font-size: 15px; font-weight: 700; }
.contact-map-card strong { display: block; color: var(--text); font-size: 18px; margin-top: 6px; }
.contact-map-card p:not(.contact-map-label) { font-size: 14.5px; line-height: 1.45; margin-top: 6px; }
.contact-map-card .button { min-height: var(--btn-sm); padding-inline: 20px; margin-top: 16px; color: var(--teal-ink); font-size: 16px; }
.contact-map-credit { position: absolute; left: 8px; bottom: 6px; font-size: 10.5px; color: #4f6572; background: rgb(255 255 255 / 75%); padding: 1px 6px; border-radius: 3px; }
.contact-office { --defer-bg: url('../images/contact/contact-office.webp'); position: relative; background: linear-gradient(0deg, rgb(0 25 39 / 70%), transparent 55%), var(--bg-img, none) 40% center / cover; }
.contact-office > p { position: absolute; left: 60px; bottom: 44px; color: white; text-transform: uppercase; letter-spacing: .16em; font-size: 18.5px; line-height: 1.6; font-weight: 550; }

/* Reassurance strip (reuses .service-benefits) */
.contact-reassurance { border-bottom: 0; }
.contact-reassurance .icon { width: 60px; height: 60px; margin-bottom: 12px; }
.contact-reassurance h2 { font-size: 22px; }
.contact-reassurance p { font-size: 17.5px; line-height: 1.5; }

/* Quote banner (same spacing and button as the road CTA banners) */
.contact-quote-banner { --defer-bg: url('../images/contact/contact-quote-gears.webp'); padding-block: var(--space-cta); display: flex; align-items: center; color: white; background: linear-gradient(90deg, #00212f 0%, rgb(0 33 47 / 92%) 30%, rgb(0 33 47 / 35%) 60%, rgb(0 33 47 / 10%)), var(--bg-img, none) right 45% / 64% auto no-repeat; background-color: #00212f; }
.contact-quote-banner .eyebrow { color: #3fd0de; }
.contact-quote-banner h2 { font-size: var(--h2); line-height: 1.14; letter-spacing: -.025em; }
.contact-quote-banner p:not(.eyebrow) { color: #e1eaf0; font-size: 19px; line-height: 1.6; margin: 14px 0 22px; }
.contact-quote-banner .button { min-height: var(--btn-lg); min-width: 280px; }

/* FAQ + other channels: FAQ rows and the channels card share the card edges of the form above. */
.contact-help { background: var(--surface); padding-block: var(--space-section); }
.contact-help-grid.service-detail-inner { padding-inline: 0; }
.contact-help-grid { display: grid; grid-template-columns: minmax(0, 1fr) 640px; gap: 50px; align-items: start; }
.contact-faq h2 { font-size: 30px; letter-spacing: -.02em; }
.contact-faq-list { display: grid; gap: 8px; margin-top: 16px; }
.contact-faq-list .service-faq-item { background: white; border: 1px solid #e7eff4; border-radius: 6px; box-shadow: 0 4px 12px rgb(14 48 70 / 5%); padding: 16px 22px; }
.contact-faq-list .service-faq-item:last-child { border-bottom: 1px solid #e7eff4; padding-bottom: 16px; }
.contact-faq-list .service-faq-item h3 { font-size: 17.5px; }
.contact-channels { background: #f0f7fa; border: 1px solid #e3edf2; border-radius: 12px; padding: 30px 26px 26px 30px; }
.contact-channels h2 { font-size: 27px; letter-spacing: -.02em; padding-bottom: 14px; position: relative; }
.contact-channels h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 72px; height: 3px; background: var(--cyan); }
.contact-channels-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 22px; }
.contact-channel { background: white; border: 1px solid #e3edf2; border-radius: 10px; padding: 20px 24px 22px; }
.contact-channel:only-child { grid-column: 1 / -1; }
.contact-channel > .icon { width: 44px; height: 44px; color: var(--cyan); stroke-width: 2; }
.contact-channel > .icon.is-filled { color: #0a5d70; fill: currentColor; stroke: currentColor; }
.contact-channel h3 { font-size: 20px; margin-top: 10px; letter-spacing: -.02em; }
.contact-channel .button { min-height: var(--btn-sm); width: 100%; margin-top: 18px; padding-inline: 16px; font-size: 16px; gap: 16px; }

.contact-page .footer-column a[aria-current] { color: var(--cyan); text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1350px) and (min-width: 1101px) {
  .contact-layout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .contact-help-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .contact-details strong { font-size: 19px; }
  .contact-details li > span:last-child { font-size: 16px; }
  .contact-benefits { gap: 28px; }
}
@media (max-width: 1100px) {
  .contact-hero { height: auto; min-height: 520px; padding-bottom: 60px; }
  .contact-hero .service-hero-media { width: 80%; }
  .contact-hero h1 { font-size: 48px; }
  .contact-hero .service-hero-text { font-size: 17px; }
  .contact-hero .service-hero-text br { display: none; }
  .contact-hero .service-hero-copy { max-width: 620px; }
  .contact-hero-statement { font-size: 14px; }
  .contact-layout { grid-template-columns: 1fr; gap: 28px; }
  .contact-sidebar { grid-template-columns: 1fr 1fr; align-items: start; }
  .contact-details strong { font-size: 18px; }
  .contact-details li > span:last-child { font-size: 15.5px; }
  .contact-details li { gap: 16px; }
  .contact-details-card h2 { font-size: 27px; }
  .contact-question-card .quote-question-head { flex-direction: column; gap: 16px; }
  .contact-location { grid-template-columns: 1fr; height: auto; padding-left: 0; gap: 0; }
  .contact-map { height: 396px; border-radius: 0; }
  .contact-map > img { left: 50%; margin-left: -851px; }
  .contact-map-pin { left: calc(50% - 24px); }
  .contact-office { min-height: 340px; }
  .contact-reassurance .service-benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .contact-reassurance .service-benefits-grid > div:nth-child(3)::before { display: none; }
  .contact-quote-banner { background-size: cover; background-position: center; }
  .contact-quote-banner p:not(.eyebrow) { font-size: 16px; }
  .contact-quote-banner p br { display: none; }
  .contact-quote-banner .button { min-width: 230px; }
  .contact-help-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .contact-sidebar { grid-template-columns: 1fr; }
  .contact-channels-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* The inner wrapper already reserves the space for the statement (service-detail.css): no second 200px band. */
  .contact-hero { padding-bottom: 0; }
  /* Full-width photo under full-width text: the standard mobile hero overlay (service-detail.css), not the desktop one. */
  .contact-hero .service-hero-media::after { background: linear-gradient(90deg, rgb(0 27 43 / 94%), rgb(0 27 43 / 62%)); }
  .contact-hero .service-hero-media { width: 100%; }
  .contact-hero h1 { font-size: clamp(32px, 9.5vw, 44px); }
  .contact-hero .service-hero-text { font-size: 16px; }
  .contact-benefits { flex-direction: column; gap: 16px; margin-top: 26px; }
  .contact-hero-statement { font-size: 12.5px; bottom: 22px; }
  .contact-hero-statement::before, .contact-hero-statement::after { margin-block: 12px 10px; }
  .contact-form-card { padding: 26px 18px; }
  .contact-form-card h2 { font-size: 27px; line-height: 1.2; }
  .contact-form-card .quote-form-intro br { display: none; }
  .contact-details-card, .contact-question-card { padding: 24px 20px; }
  .contact-details strong { font-size: 17px; }
  .contact-social a { width: 46px; height: 46px; }
  .contact-map { height: 460px; }
  .contact-map-card { left: 12px; right: 12px; bottom: 26px; width: auto; }
  .contact-office { min-height: 280px; }
  .contact-office > p { left: 24px; bottom: 28px; font-size: 13.5px; }
  .contact-reassurance .service-benefits-grid > div { padding-inline: 6px; }
  .contact-reassurance h2 { font-size: 15.5px; }
  .contact-reassurance p { font-size: 14px; }
  .contact-reassurance .icon { width: 44px; height: 44px; }
  .contact-quote-banner .button { min-width: 0; min-height: var(--btn-sm); }
  .contact-faq h2 { font-size: 24px; }
  .contact-faq-list .service-faq-item { padding-inline: 18px; }
  .contact-faq-list .service-faq-item h3 { font-size: 15px; }
  .contact-channels { padding: 24px 18px; }
  .contact-channels h2 { font-size: 22px; }
}