/* One Nimble-style closing contact module, shared by Home and Contact.
   Keep the content on the site rail; the map spans the page behind the form. */
.section.tw-contact { --contact-overlap: clamp(220px, 22vw, 300px); width: 100%; padding: var(--sp-8) 0 0; }
.contact-page .tw-contact { padding-top: var(--sp-6); }
/* Reuse the shared video/poster and motion behaviour with a measured Contact
   composition, rather than treating this hero as a compact utility heading. */
.contact-page .hero.contact-hero.hero-has-video { min-height: clamp(440px, 56vh, 640px); min-height: clamp(440px, 56svh, 640px); }
.contact-page .contact-hero.hero-has-video .hero-inner { padding-block: clamp(56px, 6vw, 96px); }
.tw-contact-grid { position: relative; z-index: 2; width: min(100%, var(--container-max)); margin-inline: auto; padding-inline: var(--container-padding); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; pointer-events: none; }
.tw-contact-copy, .tw-contact-form { pointer-events: auto; }
/* Reserve clear space below the details for the map, without bottom-aligning
   the form to that reservation. Both columns begin on the same top rail. */
.tw-contact-copy { align-self: start; padding: 12px 0 calc(var(--contact-overlap) + 32px); }
.tw-contact-copy h2 { max-width: 580px; margin-bottom: 20px; font-size: clamp(44px, 4.5vw, 72px); }
.tw-contact-intro { max-width: 43ch; color: var(--fg-muted); }
.tw-contact-details { margin: 28px 0 0; max-width: 500px; }
.tw-contact-details > div { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 16px; align-items: baseline; padding-block: 8px; border-top: 1px solid var(--line); }
.tw-contact-details dt { font: 12px var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--eyebrow-color); }
.tw-contact-details dd { margin: 0; min-width: 0; font-size: 16px; }
.tw-contact-details dd > a:not(.text-link) { display: inline-flex; align-items: center; min-height: 44px; font: inherit; line-height: 1.4; overflow-wrap: anywhere; }
.tw-contact-details a { color: inherit; text-decoration: none; text-decoration-color: var(--atc-red); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.tw-contact-details a:hover, .tw-contact-details a:focus-visible { text-decoration-line: underline; text-decoration-color: var(--atc-red); }
.tw-contact-details address { padding-top: 10px; font-style: normal; max-width: 32ch; line-height: 1.6; }
.tw-contact-address address a { display: inline-block; min-height: 44px; }
/* Use the existing raised-card surface and a soft shadow, not an opaque spread
   ring that paints a rectangular cutout into the map beneath the panel. */
.tw-contact-form { position: relative; z-index: 2; padding: clamp(24px, 3vw, 40px); gap: 20px; border: 1px solid var(--line-strong); border-top: 3px solid var(--atc-red); background: var(--atc-ink-2); box-shadow: 0 12px 28px rgb(0 0 0 / 20%); }
.tw-contact-form-heading h3 { font: 400 clamp(36px, 3.3vw, 48px)/1.02 var(--font-display); text-transform: uppercase; margin: 0; }
.tw-contact-form-heading .eyebrow { margin-bottom: 10px; color: var(--fg-muted); }
.tw-contact-form input, .tw-contact-form textarea { background: var(--atc-black); border-radius: 0; min-height: 50px; }
.tw-contact-form textarea { min-height: 130px; resize: vertical; }
.tw-contact-form .tw-contact-optional { font: inherit; color: var(--fg-muted); text-transform: none; letter-spacing: normal; }
.tw-contact-consents { display: grid; gap: 16px; padding-top: 2px; }
.tw-contact-form .tw-contact-consent { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 12px; font: 14px/1.55 var(--font-body); text-transform: none; letter-spacing: normal; }
.tw-contact-form .tw-contact-consent input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; padding: 0; accent-color: var(--atc-red); cursor: pointer; }
.tw-contact-consent .tw-contact-error { display: block; margin-top: 6px; }
.tw-contact-consent .tw-contact-error[hidden] { display: none; }
.tw-contact-form ::placeholder { color: var(--fg-muted); opacity: .8; }
.tw-contact-preview { padding-left: 12px; border-left: 2px solid var(--atc-red); }
.tw-contact-form .form-note { margin: 0; font-size: 13px; line-height: 1.55; }
.tw-contact .policy-inline-link { padding: 0; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.tw-contact-consent .policy-inline-link { color: var(--fg); }
.tw-contact-form > .button { width: auto; min-width: 112px; min-height: 48px; justify-self: start; justify-content: center; padding-inline: 28px; }
.tw-contact-form .tw-contact-error { font: 13px/1.5 var(--font-body); color: var(--atc-ivory); text-transform: none; letter-spacing: normal; }
.tw-contact-form [aria-invalid="true"] { border-color: var(--atc-ivory); outline: 2px solid var(--atc-red); outline-offset: 2px; }
.tw-contact-form .tw-contact-status { align-self: center; overflow-wrap: anywhere; }
.tw-contact-form .tw-contact-status:empty { display: none; }
.tw-contact-form [data-enquiry-submit]:disabled { cursor: default; opacity: .7; }
.tw-contact-map { position: relative; z-index: 1; isolation: isolate; min-height: calc(var(--contact-overlap) + 160px); margin-top: calc(-1 * var(--contact-overlap)); background: var(--atc-ink); border-block: 1px solid var(--line); }
.tw-contact-map > .tw-contact-map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 180ms ease; }
.tw-contact-map[data-mapbox-state="loaded"] .tw-contact-map-canvas { opacity: 1; }
.tw-contact-map-fallback { position: relative; min-height: inherit; display: flex; align-items: center; padding: 64px max(var(--container-padding), calc((100% - var(--container-max)) / 2 + var(--container-padding))); overflow: hidden; }
.tw-contact-map[data-mapbox-state="loaded"] .tw-contact-map-fallback { visibility: hidden; pointer-events: none; }
.tw-contact-map-mark { position: absolute; right: 8%; top: -140px; width: 570px; height: 570px; border: 45px solid rgb(255 245 224 / 3%); border-radius: 50%; pointer-events: none; }
.tw-contact-map-mark::before, .tw-contact-map-mark::after { position: absolute; inset: 65px; content: ""; border: 35px solid rgb(255 245 224 / 3%); border-radius: 50%; }
.tw-contact-map-mark::after { inset: 190px; border-width: 18px; }
.tw-contact-map-prompt { position: relative; width: min(44%, 490px); }
.tw-contact-map-title { font: 38px/1.05 var(--font-display); text-transform: uppercase; margin-block: 8px 16px; }
.tw-contact-map-prompt [data-mapbox-status] { font-size: 14px; color: var(--fg-muted); margin-bottom: 20px; max-width: 53ch; }
.tw-contact-map .mapboxgl-canvas { outline-offset: -5px; }
.tw-contact-map .mapboxgl-ctrl-group button { width: 44px; height: 44px; }
/* Mapbox owns the outer marker transform. Only the pin child is rotated. */
.tw-map-marker { width: 52px; height: 64px; }
.tw-map-marker-visual { position: absolute; top: 2px; left: 2px; width: 48px; height: 48px; display: grid; place-items: center; background: var(--atc-red); border: 2px solid var(--atc-ivory); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: -3px 4px 14px rgb(0 0 0 / 35%); }
.tw-map-marker-symbol { width: 28px; height: 28px; background: var(--atc-ivory); mask: url('/assets/brand/target-mark.svg') center / contain no-repeat; transform: rotate(45deg); }
.tw-map-marker-label { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); padding: 7px 10px; border: 1px solid var(--line-strong); background: var(--atc-black); color: var(--atc-ivory); font: 12px/1 var(--font-ui); letter-spacing: .04em; white-space: nowrap; text-transform: uppercase; }
/* Do not hide or restyle the Mapbox/OSM attribution or map logo. */
@media (max-width: 1100px) and (min-width: 901px) {
  .tw-contact-copy h2 { font-size: 56px; }
}
@media (max-width: 900px) {
  .contact-page .hero.contact-hero.hero-has-video { min-height: 420px; }
  .contact-page .contact-hero.hero-has-video .hero-inner { padding-block: var(--sp-7); }
  .tw-contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .tw-contact-copy { padding: 0; }
  .tw-contact-copy h2 { max-width: 650px; }
  .tw-contact-intro { max-width: 56ch; }
  .tw-contact-details { max-width: none; }
  .tw-contact-form { box-shadow: none; }
  .tw-contact-map { margin-top: 32px; min-height: 360px; }
  .tw-contact-map-fallback { padding-block: 40px; }
  .tw-contact-map-prompt { width: min(100%, 530px); }
}
@media (max-width: 640px) {
  .tw-contact-form { grid-template-columns: 1fr; padding: 24px 20px; }
  .tw-contact-details > div { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .tw-contact-details dd { font-size: 15px; }
  .tw-contact-map-prompt .button { font-size: 12px; padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) { .tw-contact-map-canvas { transition: none; } }