.contact-page-root {
  scroll-behavior: smooth;
}

.contact-page {
  overflow-x: hidden;
}

.contact-hero {
  border-radius: 16px;
}

.contact-hero .page-hero__image {
  object-position: 50% 47.7%;
}

.contact-hero .page-hero__overlay {
  background: rgba(0, 0, 0, 0.1);
}

.contact-hero .page-hero__title {
  width: calc(100% - (var(--content-gutter) * 2));
  max-width: 680px;
}

.contact-enquiry {
  position: relative;
  width: 1047px;
  max-width: calc(100% - (var(--page-gutter) * 2));
  margin: 30px auto 0;
  padding-top: 146px;
  padding-bottom: var(--section-space-large);
}

#contact-enquiry-title {
  /* Keep fragment navigation below the 88px fixed header with a readable gap. */
  scroll-margin-top: 112px;
}

.contact-enquiry__record {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: var(--z-base);
  width: 300px;
  height: 300px;
  transform: translateX(-50%);
}

.contact-enquiry__record-layer {
  position: absolute;
  display: block;
  max-width: none;
}

.contact-enquiry__record-layer--base {
  inset: 0;
  width: 300px;
  height: 300px;
}

.contact-enquiry__record-layer--grooves,
.contact-enquiry__record-layer--rings {
  top: 4px;
  left: 4px;
  width: 292px;
  height: 292px;
}

.contact-enquiry__record-layer--inner {
  top: 84px;
  left: 84px;
  width: 133px;
  height: 133px;
}

.contact-enquiry__record-layer--label {
  top: 99px;
  left: 99px;
  width: 102px;
  height: 102px;
}

.contact-enquiry__record-layer--center {
  top: 117px;
  left: 117px;
  width: 66px;
  height: 66px;
}

.contact-enquiry__panel {
  position: relative;
  z-index: var(--z-content);
  padding: calc(var(--section-padding-y) + 1px) 84px;
  border-radius: var(--page-radius);
  background: var(--color-secondary-cream);
  box-shadow: 0 0 13px rgba(26, 26, 26, 0.04);
}

.contact-enquiry__details {
  display: grid;
  width: 823px;
  max-width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 23px;
  margin: 80px auto 0;
  font-style: normal;
}

.contact-detail {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 16px;
  padding: 8px;
  border-radius: 8px;
  color: var(--color-secondary-cream);
  background: var(--color-secondary-ink);
  text-decoration: none;
}

.contact-detail__icon {
  display: grid;
  width: 61px;
  height: 61px;
  flex: 0 0 61px;
  place-items: center;
  border-radius: 6px;
  color: var(--color-secondary-ink);
  background: var(--color-secondary-cream);
}

.contact-detail:focus-visible {
  outline: 3px solid var(--color-primary-orange);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .contact-detail {
    transition: color 260ms ease, background-color 260ms ease;
  }

  .contact-detail:hover {
    color: var(--color-primary-lime);
  }
}

@media (max-width: 1366px) {
  #contact-enquiry-title {
    /* The header tab is 84px tall at this breakpoint. */
    scroll-margin-top: 108px;
  }
}

@media (max-width: 1166px) {
  .contact-enquiry__panel {
    padding-right: 64px;
    padding-left: 64px;
  }
}

@media (max-width: 1024px) {
  .contact-enquiry {
    padding-top: 132px;
  }

  .contact-enquiry__record {
    width: 270px;
    height: 270px;
  }

  .contact-enquiry__record-layer--base {
    width: 270px;
    height: 270px;
  }

  .contact-enquiry__record-layer--grooves,
  .contact-enquiry__record-layer--rings {
    width: 262px;
    height: 262px;
  }

  .contact-enquiry__record-layer--inner {
    top: 76px;
    left: 76px;
    width: 120px;
    height: 120px;
  }

  .contact-enquiry__record-layer--label {
    top: 89px;
    left: 89px;
    width: 92px;
    height: 92px;
  }

  .contact-enquiry__record-layer--center {
    top: 105px;
    left: 105px;
    width: 60px;
    height: 60px;
  }

  .contact-enquiry__panel {
    padding-right: 48px;
    padding-left: 48px;
  }

  .contact-enquiry__details {
    margin-top: var(--section-space-medium);
  }
}

@media (max-width: 768px) {
  #contact-enquiry-title {
    /* Clear the 76px tablet header and preserve 20px of breathing room. */
    scroll-margin-top: 96px;
  }

  .contact-enquiry {
    padding-top: 116px;
  }

  .contact-enquiry__record {
    width: 236px;
    height: 236px;
  }

  .contact-enquiry__record-layer--base {
    width: 236px;
    height: 236px;
  }

  .contact-enquiry__record-layer--grooves,
  .contact-enquiry__record-layer--rings {
    top: 3px;
    left: 3px;
    width: 230px;
    height: 230px;
  }

  .contact-enquiry__record-layer--inner {
    top: 66px;
    left: 66px;
    width: 105px;
    height: 105px;
  }

  .contact-enquiry__record-layer--label {
    top: 78px;
    left: 78px;
    width: 80px;
    height: 80px;
  }

  .contact-enquiry__record-layer--center {
    top: 92px;
    left: 92px;
    width: 52px;
    height: 52px;
  }

  .contact-enquiry__panel {
    padding-right: 28px;
    padding-left: 28px;
  }

  .contact-enquiry__details {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 480px) {
  #contact-enquiry-title {
    /* Retain a compact but safe gap below the mobile header. */
    scroll-margin-top: 92px;
  }

  .contact-enquiry {
    padding-top: 96px;
  }

  .contact-enquiry__record {
    width: 196px;
    height: 196px;
  }

  .contact-enquiry__record-layer--base {
    width: 196px;
    height: 196px;
  }

  .contact-enquiry__record-layer--grooves,
  .contact-enquiry__record-layer--rings {
    top: 3px;
    left: 3px;
    width: 190px;
    height: 190px;
  }

  .contact-enquiry__record-layer--inner {
    top: 55px;
    left: 55px;
    width: 87px;
    height: 87px;
  }

  .contact-enquiry__record-layer--label {
    top: 65px;
    left: 65px;
    width: 67px;
    height: 67px;
  }

  .contact-enquiry__record-layer--center {
    top: 77px;
    left: 77px;
    width: 43px;
    height: 43px;
  }

  .contact-enquiry__panel {
    padding-right: 18px;
    padding-left: 18px;
  }

  .contact-detail {
    gap: 12px;
    overflow-wrap: anywhere;
  }

  .contact-detail__icon {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }
}

@media (max-width: 768px) {
  .contact-hero {
    border-radius: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-page-root {
    scroll-behavior: auto;
  }
}