/* ======================================================================
   Contact Us page (pages/contact.html). Loaded after style.css and only on this page.
   Uses the same parts as the offering pages (cs-hero, cs-col, cs-label, cs-h2, buttons) so fonts, sizes,
   spacing and hovers match them. Colours follow the PulseWave theme.
   ====================================================================== */
[data-page="contact"] { --font-head: var(--font-nav); --font-body: var(--font-nav); }
[data-page="contact"] main { font-family: var(--font-nav); color: var(--nav-ink); background: #fff; }

/* ---------- hero: same hero as the offering pages, with the existing team photo ---------- */
.contact-hero .cs-hero__art { background-image: url("../img/photos/team.jpg"); background-position: 60% 35%; }
.contact-hero .cs-hero__sub { max-width: 560px; margin-bottom: 0; }

/* ---------- contact finder: a light bar under the hero, label in the section-label style ---------- */
.contact-finder { background: #f5f5f5; border-bottom: 0.8px solid #d7dde0; }
.contact-finder__row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 24px 0; }
.contact-finder label { font: 400 12px/24px var(--font-nav); letter-spacing: 2.88px; text-transform: uppercase; color: var(--nav-ink); }
.contact-finder .contact-select { width: 320px; }

/* select with the same chevron as the rest of the site */
.contact-select { position: relative; }
.contact-select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px; pointer-events: none;
  border-right: 1.6px solid var(--nav-ink); border-bottom: 1.6px solid var(--nav-ink); transform: rotate(45deg); transition: border-color .2s; }
.contact-select:hover::after, .contact-select:focus-within::after { border-color: var(--accent); }
[data-page="contact"] .contact-select select { -webkit-appearance: none; appearance: none; width: 100%; height: 47px; padding: 0 44px 0 16px; cursor: pointer;
  border: 0.8px solid #d7dde0; border-radius: 0; background: #fff; font: 300 16.2px/25.92px var(--font-nav); letter-spacing: 0.648px; color: var(--nav-ink);
  transition: border-color .2s, box-shadow .2s; }
[data-page="contact"] .contact-select select:hover { border-color: var(--nav-ink); }

/* ---------- headquarters, topic panel and contacts list: three columns on the 1070px column ---------- */
.contact-hq { padding: 96px 0; }
.contact-hq__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 300px; gap: 60px; align-items: start; }
.contact-h3 { margin: 0 0 16px; font: 300 28px/36px var(--font-nav); letter-spacing: -0.56px; color: var(--nav-ink); }
.cs-col .contact-hq__col p { margin: 0 0 16px; font: 300 16.2px/25.92px var(--font-nav); letter-spacing: 0.648px; color: var(--nav-ink); }
.contact-hq__col strong { font-weight: 500; }
.contact-hq__col p a { color: var(--accent); transition: color .2s; }
.contact-hq__col p a:hover { color: var(--accent-2); }

/* text links: the "LEARN MORE ->" style of the cards */
.contact-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font: 500 14.4px/16px var(--font-nav); letter-spacing: 1.728px;
  text-transform: uppercase; color: var(--nav-ink); transition: color .2s; }
.contact-cta .icon { font-size: 16px; stroke-width: 2.2; transition: transform .2s; }
.contact-cta:hover, .contact-cta:focus-visible { color: var(--accent); }
.contact-cta:hover .icon, .contact-cta:focus-visible .icon { transform: translateX(5px); }

/* contacts list: card with the same border and gradient-border hover as the offering cards */
.contact-links { padding: 32px 33px 20px; background: #fff; border: 0.8px solid #d7dde0; }
.contact-links:hover { border: 0.8px solid transparent; border-image: linear-gradient(240.64deg, var(--accent-2) 0%, var(--accent) 100%) 1; }
.contact-links h2 { margin: 0 0 8px; font: 500 18px/25.2px var(--font-nav); color: var(--nav-ink); }
.contact-links li { border-bottom: 0.8px solid #d7dde0; }
.contact-links li:last-child { border-bottom: 0; }
.contact-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0;
  font: 300 16.2px/25.92px var(--font-nav); letter-spacing: 0.648px; color: var(--nav-ink); transition: color .2s; }
.contact-links a .icon { flex: none; font-size: 16px; opacity: .55; transition: transform .2s, opacity .2s; }
.contact-links a:hover, .contact-links a:focus-visible { color: var(--accent); }
.contact-links a:hover .icon, .contact-links a:focus-visible .icon { opacity: 1; transform: translateX(5px); }

/* ---------- enquiry: grey band, intro on the left, form card on the right ---------- */
.contact-enquiry { padding: 96px 0; }
.contact-enquiry__grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 60px; align-items: start; }
.contact-ticks { margin: 24px 0 0; display: grid; gap: 14px; }
.contact-ticks li { display: flex; gap: 14px; align-items: baseline; font: 300 16.2px/25.92px var(--font-nav); letter-spacing: 0.648px; color: var(--nav-ink); }
.contact-ticks li::before { content: ""; flex: 0 0 13px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg) translateY(-3px); }

.contact-form { padding: 40px 40px 44px; background: #fff; border: 0.8px solid #d7dde0; }
.cs-col .contact-form__note { margin: 0 0 24px; font: 300 14.4px/23px var(--font-nav); letter-spacing: 0.576px; color: #707070; }
.contact-form__note span, [data-page="contact"] .field label span { color: var(--accent-2); }
[data-page="contact"] .form { gap: 24px 24px; }
[data-page="contact"] .field { gap: 8px; }
[data-page="contact"] .field label { font: 400 14.4px/20px var(--font-nav); letter-spacing: 0.576px; color: var(--nav-ink); }
[data-page="contact"] .field input, [data-page="contact"] .field textarea { height: 47px; padding: 0 16px; border: 0.8px solid #d7dde0; border-radius: 0; background: #fff;
  font: 300 16.2px/25.92px var(--font-nav); letter-spacing: 0.648px; color: var(--nav-ink); }
[data-page="contact"] .field textarea { height: 150px; padding: 12px 16px; }
[data-page="contact"] .field input:hover, [data-page="contact"] .field textarea:hover { border-color: var(--nav-ink); }
[data-page="contact"] .field input:focus, [data-page="contact"] .field textarea:focus, [data-page="contact"] .contact-select select:focus {
  outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
[data-page="contact"] .field.is-invalid select { border-color: #dc2626; }
[data-page="contact"] .field .err { font: 400 13px/18px var(--font-nav); }
[data-page="contact"] .consent { gap: 12px; font: 300 14.4px/23px var(--font-nav); letter-spacing: 0.576px; color: #707070; }
[data-page="contact"] .consent input { margin-top: 3px; accent-color: var(--accent); }
[data-page="contact"] .form-success { border-radius: 0; font: 400 16.2px/25.92px var(--font-nav); }

/* buttons: same size and type as the hero buttons on the offering pages; theme gradient-shift hover */
[data-page="contact"] main .btn { min-width: 220px; height: 46.64px; padding: 12px 30px 10px; justify-content: center;
  font: 500 14.4px/23.04px var(--font-nav); letter-spacing: 1.728px; text-transform: uppercase; }
.contact-submit { margin-top: 8px; }

/* ---------- a great place to work: one card, image left ---------- */
.contact-place { padding: 96px 0 112px; }
.contact-place__box { display: grid; grid-template-columns: 337px minmax(0, 1fr); gap: 56px; align-items: center; padding: 24px 56px 24px 24px;
  border: 0.8px solid #d7dde0; background: #fff; transition: border-color .2s; }
.contact-place__img { aspect-ratio: 4 / 3; background-size: cover; background-position: center; }
.contact-place .cs-h2 { margin: 0 0 12px; }
.contact-place p { margin-bottom: 32px; }
.contact-place__btns { display: flex; flex-wrap: wrap; gap: 20px 35px; }
/* "Our Culture": the stacked-button hover used for "View all" on the offering pages */
[data-page="contact"] .contact-place .btn--stack { background: #fff; color: var(--nav-ink); border: 1px solid var(--nav-ink);
  box-shadow: 4px 4px 0 -1px #fff, 4px 4px 0 0 var(--nav-ink); transition: box-shadow .25s; }
[data-page="contact"] .contact-place .btn--stack:hover, [data-page="contact"] .contact-place .btn--stack:focus-visible {
  background: #fff; color: var(--nav-ink); box-shadow: 5px 5px 0 0 var(--nav-ink); }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .contact-hq__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .contact-links { grid-column: 1 / -1; }
  .contact-enquiry__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 760px) {
  .contact-hq, .contact-enquiry { padding: 56px 0; }
  .contact-place { padding: 56px 0 72px; }
  .contact-hq__grid, .contact-place__box { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .contact-place__box { padding: 20px 20px 28px; }
  .contact-finder .contact-select { width: 100%; }
  .contact-form { padding: 28px 20px 32px; }
  [data-page="contact"] main .btn { min-width: 0; }
}