.contact-template-page { background: transparent; color: var(--white); }
.contact-template-page::before { display: none; }
.contact-template-page .site-header { position: absolute; }

.contact-template { position: relative; z-index: 1; }
.contact-hero {
  position: relative;
  min-height: clamp(430px, 58vw, 680px);
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  padding: 140px 4vw 80px;
  background: transparent;
  text-align: center;
}
.contact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../frames/event-details-contact-sheet.jpg") center 47% / cover no-repeat;
  filter: grayscale(1) contrast(1.15);
  opacity: .2;
}
.contact-hero::after {
  content: none;
}
.contact-hero__copy > p,
.contact-kicker,
.contact-hero nav { font: 500 .64rem "DM Mono", monospace; letter-spacing: .13em; text-transform: uppercase; }
.contact-hero__copy > p { margin: 0 0 24px; color: var(--accent); }
.contact-hero h1 { margin: 0; font-size: clamp(4.2rem, 9vw, 9rem); font-weight: 400; letter-spacing: -.07em; line-height: .86; text-transform: uppercase; }
.contact-hero nav { display: flex; justify-content: center; gap: 14px; margin-top: 34px; color: #898983; }
.contact-hero nav a { color: var(--white); }

.contact-connect {
  display: grid;
  grid-template-columns: minmax(300px, .8fr) minmax(420px, 1.2fr);
  gap: clamp(55px, 8vw, 130px);
  max-width: 1400px;
  margin-inline: auto;
  padding: clamp(90px, 11vw, 170px) 4vw;
  align-items: start;
}
.contact-form { padding: clamp(28px, 3.5vw, 52px); background: #1c1c1c; border: 1px solid rgba(255,255,255,.1); }
.contact-kicker { margin: 0 0 9px; color: #8c8c86; }
.contact-form h2,
.contact-details__intro h2 { margin: 0 0 42px; font-size: clamp(2.3rem, 4vw, 4.4rem); line-height: .95; letter-spacing: -.05em; font-weight: 400; }
.contact-form label { display: block; margin: 18px 0 8px; color: #8d8d87; font: .62rem "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.contact-form input,
.contact-form textarea { width: 100%; border: 1px solid rgba(255,255,255,.27); border-radius: 0; background: rgba(255,255,255,.045); color: var(--white); font: inherit; padding: 14px 16px; outline: none; transition: border-color .2s, background .2s; }
.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--accent); background: rgba(255,255,255,.075); }
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form button { width: 100%; display: flex; justify-content: center; gap: 16px; margin-top: 28px; padding: 15px 22px; border: 1px solid rgba(255,255,255,.65); border-radius: 999px; background: transparent; color: var(--white); cursor: pointer; font: 500 .65rem "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; transition: background .25s, color .25s, border-color .25s; }
.contact-form button:hover,
.contact-form button:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--ink); outline: none; }

.contact-details { padding-top: clamp(12px, 2vw, 35px); }
.contact-details__intro { max-width: 680px; }
.contact-details__intro h2 { margin-bottom: 26px; }
.contact-details__intro > p:last-child { max-width: 630px; margin: 0; color: #aaa9a2; font-size: clamp(1rem, 1.25vw, 1.18rem); line-height: 1.75; }
.contact-details__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(55px, 7vw, 90px); border-top: 1px solid rgba(255,255,255,.18); }
.contact-detail { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center; min-height: 130px; padding: 24px 18px 24px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.contact-detail:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.18); }
.contact-detail:nth-child(even) { padding-left: 28px; }
.contact-detail__icon { display: grid; place-items: center; width: 45px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; color: var(--accent); font-size: 1.15rem; }
.contact-detail__icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contact-detail b,
.contact-detail small { display: block; }
.contact-detail b { margin-bottom: 7px; font-size: .92rem; font-weight: 500; text-transform: uppercase; }
.contact-detail small { color: #999991; font-size: .78rem; line-height: 1.45; }
.contact-location { position: relative; display: grid; gap: 9px; margin-top: 50px; padding: 38px 70px 38px 38px; overflow: hidden; border: 1px solid rgba(255,255,255,.15); background: radial-gradient(circle at 80% 20%, rgba(142,216,255,.13), transparent 35%), #111; }
.contact-location span { color: #92928c; font: .62rem "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.contact-location strong { font-size: clamp(1.25rem, 2vw, 2rem); font-weight: 400; }
.contact-location > b { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 1.4rem; }

.contact-cta {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(460px, 55vw, 720px);
  margin: 0 4vw clamp(90px, 10vw, 150px);
  overflow: hidden;
  text-align: center;
}
.contact-cta::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("../frames/field-team-contact-sheet.jpg") center 44% / cover no-repeat; filter: grayscale(1); }
.contact-cta::after { content: none; }
.contact-cta p { margin: 0 0 20px; color: var(--accent); font: 500 .66rem "DM Mono", monospace; letter-spacing: .13em; text-transform: uppercase; }
.contact-cta h2 { margin: 0; font-size: clamp(2.8rem, 6.7vw, 7rem); font-weight: 400; letter-spacing: -.06em; line-height: .9; text-transform: uppercase; }
.contact-cta a { display: inline-flex; gap: 20px; margin-top: 42px; padding: 15px 25px; border-radius: 999px; background: var(--white); color: var(--ink); font: 500 .64rem "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }

.contact-footer { position: relative; z-index: 1; display: grid; grid-template-columns: 1.6fr .7fr 1fr; gap: 7vw; min-height: 0; padding: clamp(65px, 8vw, 110px) 4vw 35px; border-top: 1px solid rgba(255,255,255,.12); background: transparent; color: #aaa9a2; align-items: start; text-transform: none; }
.contact-footer .brand-logo { width: min(225px, 70vw); }
.contact-footer__brand > p { margin: 30px 0; line-height: 1.7; }
.contact-footer__brand > div { display: flex; gap: 26px; color: var(--white); }
.contact-footer nav,
.contact-footer__details { display: flex; flex-direction: column; gap: 14px; }
.contact-footer b { margin-bottom: 10px; color: var(--white); font-weight: 500; text-transform: uppercase; }
.contact-footer a:hover { color: var(--accent); }
.contact-footer__legal { grid-column: 1 / -1; margin: 45px 0 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); text-align: center; }

@media (max-width: 900px) {
  .contact-connect { grid-template-columns: 1fr; }
  .contact-form { width: min(100%, 650px); margin-inline: auto; }
  .contact-footer { grid-template-columns: 1.4fr 1fr; }
  .contact-footer__details { grid-column: 2; }
}

@media (max-width: 600px) {
  .contact-hero { min-height: 430px; }
  .contact-connect { padding-inline: 22px; }
  .contact-form { padding: 28px 22px; }
  .contact-details__grid { grid-template-columns: 1fr; }
  .contact-detail:nth-child(odd) { border-right: 0; }
  .contact-detail:nth-child(even) { padding-left: 0; }
  .contact-cta { margin-inline: 22px; }
  .contact-footer { grid-template-columns: 1fr; padding-inline: 22px; }
  .contact-footer__details { grid-column: 1; }
  .contact-footer__legal { margin-top: 25px; }
}