/* Contact page */

/* ---------- Hero ---------- */
.hero--contact .hero__bg { left: 0; width: 1440px; }
/* Figma "Contact [375]": hero frame 747px incl. the 64px header, volume
   graphic 672x672 at -148/-193, content block flush left above a 44px gutter */
@media (max-width: 768px) {
  .hero--contact { min-height: 683px; padding: 0 0 44px; }
  /* the artwork is centred and drawn at 672/1565 of its desktop scale */
  .hero--contact .hero__bg { top: 0; left: 50%; transform: translateX(-50%); width: 618px; height: auto; }
  .hero--contact .hero__inner { align-items: flex-start; text-align: left; gap: 0; }
  .hero--contact .hero__content { display: flex; flex-direction: column; gap: 12px; width: 100%; }
  .hero--contact .hero__title { line-height: 1; }
}

/* ---------- Find the right team (audience cards) ---------- */
.audience { background: var(--color-almost-white); padding-top: var(--sp-120); padding-bottom: var(--sp-120); }
.audience .container { display: flex; flex-direction: column; gap: var(--sp-80); }
.audience__head { align-items: start; }
.audience__head .label { max-width: 338px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.audience__main h2 { font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-night); }
.audience__main p { margin-top: 32px; max-width: 383px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.audience__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.contact-card { position: relative; overflow: hidden; min-height: 316px; background: var(--color-blue-5); display: flex; flex-direction: column; justify-content: space-between; }
.contact-card__graphic { position: absolute; left: 120px; top: 117px; width: 708px; height: 708px; opacity: 0.4; pointer-events: none; }
.contact-card__body { position: relative; z-index: 1; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.contact-card__tag { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-blue-50); }
.contact-card__title { font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.28px; color: var(--color-night); }
.contact-card__desc { max-width: 293px; font-family: var(--font-body); font-size: 14px; line-height: 22px; color: var(--color-blue-50); }
.contact-card__email { position: relative; z-index: 1; border-top: 1px solid var(--color-blue-10); padding: 8px 16px; font-family: var(--font-body); font-size: 16px; color: var(--color-blue-50); }
@media (max-width: 992px) { .audience__head { grid-template-columns: 1fr; row-gap: 24px; } .audience__main h2 { font-size: 40px; } .audience__grid { grid-template-columns: 1fr; } }

/* ---------- Enquiry form ---------- */
.enquiry { background: var(--color-night); color: var(--color-almost-white); padding-top: var(--sp-120); padding-bottom: var(--sp-120); }
.enquiry__inner { align-items: start; }
.routing { display: flex; flex-direction: column; gap: 32px; padding-left: 32px; border-left: 1px solid var(--color-gray-40); }
.routing__item h4 { font-family: var(--font-heading); font-weight: 400; font-size: 20px; line-height: 1.1; letter-spacing: -0.2px; color: var(--color-almost-white); }
.routing__item p { margin-top: 4px; font-family: var(--font-body); font-size: 14px; line-height: 22px; color: var(--color-gray-40); }
.enquiry__form { display: flex; flex-direction: column; gap: 40px; }
.enquiry__intro h3 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-almost-white); }
.enquiry__intro p { margin-top: 24px; max-width: 831px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-gray-40); }
.enquiry-form { display: flex; flex-direction: column; gap: 64px; }
/* single-line 44px field, text centred, full-width underline at the bottom */
.enquiry-form .field__control { height: 44px; font-size: 16px; padding: 0 16px 0 0; border-bottom-color: var(--color-gray-40); }
.enquiry-form textarea.field__control { height: 164px; padding: 10px 0 12px 0; }
/* paired fields sit flush with a vertical divider between them */
.enquiry-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: end; }
.enquiry-form .row2 > .field:first-child { border-right: 1px solid var(--color-gray-40); }
.enquiry-form .row2 > .field:last-child .field__control { padding-left: 16px; }
/* chevron on the selects — inset from the field edge */
.enquiry-form select.field__control {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23efefec' stroke-opacity='0.7' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
}
.enquiry-form .btn { margin-top: 16px; }
.enquiry-form .consent { display: flex; gap: 12px; align-items: flex-start; }
.enquiry-form .consent input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--color-almost-white); }
.enquiry-form .consent label { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-gray-40); max-width: 570px; }
.enquiry-form .btn { align-self: flex-start; }
@media (max-width: 992px) {
  .enquiry__inner { grid-template-columns: 1fr; row-gap: 40px; }
  .routing { padding-left: 0; border-left: none; }
  .enquiry__intro h3 { font-size: 32px; }
}

/* ---------- Offices ---------- */
.offices { position: relative; overflow: hidden; background: var(--color-light-green); padding-top: var(--sp-120); padding-bottom: var(--sp-120); }
.offices__graphic { position: absolute; left: -80px; top: 0; width: 800px; height: 800px; opacity: 0.35; pointer-events: none; }
.offices__inner { position: relative; z-index: 1; align-items: start; }
.offices__label { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.offices__main h2 { font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-night); margin-bottom: 56px; }
.office-row { border-top: 1px solid var(--color-blue-10); padding: 16px 0; }
.office-row__cat { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); margin-bottom: 16px; }
.office-row__line { display: flex; align-items: baseline; gap: 32px; }
.office-row__city { width: 470px; font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-night); }
.office-row__addr { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
@media (max-width: 992px) {
  .offices__inner { grid-template-columns: 1fr; row-gap: 24px; }
  .offices__main h2 { font-size: 40px; }
  .office-row__line { flex-direction: column; gap: 4px; } .office-row__city { width: auto; }
  .offices__graphic { display: none; }
}

/* Mobile type scale — verified against Figma 375 frames */
@media (max-width: 768px) {
  .audience__main h2 { font-size: 40px; }
  .contact-card__title { font-size: 28px; }
  .enquiry__intro h3 { font-size: 24px; }
  .offices__main h2 { font-size: 40px; }
  .office-row__city { font-size: 28px; }
  /* Enquiry form: fields run edge-to-edge, text padded inside; even spacing */
  .enquiry-form { gap: 24px; margin-left: calc(-1 * var(--container-pad)); margin-right: calc(-1 * var(--container-pad)); }
  .enquiry-form .row2 { display: contents; }
  .enquiry-form .row2 > .field:first-child { border-right: none; }
  .enquiry-form .field__control { padding-left: var(--container-pad); padding-right: var(--container-pad); }
  .enquiry-form textarea.field__control { padding-left: var(--container-pad); padding-right: var(--container-pad); }
  .enquiry-form select.field__control { padding-right: 40px; background-position: right var(--container-pad) center; }
  .enquiry-form .consent { padding-left: var(--container-pad); padding-right: var(--container-pad); }
  .enquiry-form .btn { align-self: stretch; justify-content: center; margin: 8px var(--container-pad) 0; }
  /* Audience cards become an edge-to-edge horizontal slider */
  .audience__grid {
    display: flex; grid-template-columns: none;
    margin-left: calc(-1 * var(--container-pad)); margin-right: calc(-1 * var(--container-pad));
    padding: 0 var(--container-pad); gap: 16px; overflow-x: auto;
    scroll-snap-type: x proximity; scroll-padding-left: var(--container-pad); scrollbar-width: none;
  }
  .audience__grid::-webkit-scrollbar { display: none; }
  .contact-card { flex: 0 0 300px; scroll-snap-align: start; }
}