/* Contact in the shared black, white and signal-yellow identity. */
.contact-page { --contact-yellow: #ffd400; --bg: #09090b; background: var(--bg); color: #f3f2ef; }
.contact-page a:focus-visible { outline: 2px solid var(--contact-yellow); outline-offset: 6px; }
.contact-page .nav-right a[href$="contact/index.html"],
.contact-page .mobile-menu a[href$="contact/index.html"] { color: var(--contact-yellow); }
.contact-hero { display: block; height: auto; padding-block: clamp(48px,6vw,88px) clamp(56px,7vw,100px); }
.contact-eyebrow { margin: 0 0 28px; color: #aaaab0; font-size: var(--type-label); font-weight: 600; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; }
.contact-hero-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,.8fr); align-items: end; gap: clamp(32px,6vw,88px); }
.contact-hero h1 { margin: 0; font-size: var(--type-page-title); font-weight: 700; line-height: var(--type-title-leading); letter-spacing: var(--type-title-tracking); }
.contact-hero h1 > span { position: relative; display: inline-block; isolation: isolate; color: var(--contact-yellow); }
.contact-hero h1 > span::after { content: ''; position: absolute; z-index: -1; inset: 72% -3% -12%; background: url('../images/noir-yellow-swipe.svg') center / 100% 100% no-repeat; opacity: .18; }
.contact-intro { padding-bottom: 4px; }
.contact-hero-arrow { display: block; margin-bottom: 24px; color: var(--contact-yellow); font-size: 66px; font-weight: 400; line-height: 1; }
.contact-intro p { max-width: 350px; margin: 0; color: #b6b6bd; font-size: var(--type-body); font-weight: 400; line-height: 1.65; }
.contact-cta { display: inline-flex; justify-content: space-between; align-items: center; gap: 40px; min-height: 50px; margin-top: 28px; padding: 15px 20px; border: 1px solid var(--contact-yellow); background: var(--contact-yellow); color: #09090b; font-size: var(--type-button); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; transition: background .2s, color .2s; }
.contact-cta span { font-size: var(--type-lead); line-height: 1; }
.contact-cta:hover { background: #09090b; color: var(--contact-yellow); }
.contact-details { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: clamp(32px,6vw,88px); margin-bottom: clamp(64px,8vw,112px); padding-top: 32px; border-top: 1px solid #333337; }
.contact-channels { min-width: 0; padding-top: 8px; }
.contact-channel { position: relative; display: grid; gap: 12px; padding: 26px 36px 28px 0; border-bottom: 1px solid #333337; }
.contact-channel-label { color: #aaaab0; font-size: var(--type-caption); font-weight: 400; }
.contact-channel-value { font-size: var(--type-card-title); font-weight: 500; letter-spacing: -.04em; overflow-wrap: anywhere; }
.contact-channel-arrow { position: absolute; right: 0; bottom: 27px; color: var(--contact-yellow); font-size: 26px; }
.contact-channel:hover .contact-channel-value { color: var(--contact-yellow); }
.contact-note { display: flex; align-items: flex-start; gap: 16px; margin-top: 28px; color: #aaaab0; }
.contact-note > span { color: var(--contact-yellow); font-size: var(--type-card-title); line-height: 1; }
.contact-note p { margin: 0; font-size: var(--type-small); font-weight: 400; line-height: 1.65; }
.contact-location { position: relative; overflow: hidden; isolation: isolate; padding: clamp(26px,3vw,40px); background: var(--contact-yellow); color: #101012; }
.contact-location .contact-eyebrow { color: #514600; font-size: var(--type-label); }
.contact-location h2 { margin: 0 0 28px; font-size: var(--type-section-title); font-weight: 650; line-height: 1.08; letter-spacing: -.045em; }
.contact-location address { font-size: var(--type-small); font-style: normal; font-weight: 500; line-height: 1.65; }
.contact-directions { display: inline-flex; align-items: center; gap: 32px; margin-top: 28px; padding-bottom: 6px; border-bottom: 1px solid #101012; font-size: var(--type-caption); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.contact-directions span { font-size: var(--type-lead); line-height: 1; }
.contact-directions:hover { opacity: .65; }
.contact-page .contact-location a:focus-visible { outline-color: #101012; }
.contact-postcode { position: absolute; z-index: -1; right: -4px; bottom: -35px; color: rgba(16,16,18,.07); font-size: clamp(110px,13vw,180px); font-weight: 800; line-height: 1; letter-spacing: -.08em; pointer-events: none; }
.contact-page footer { border-top: 1px solid #333337; background: #101012; }
@media (max-width:760px) {
  .contact-hero { padding-block: 40px 52px; }
  .contact-hero-grid, .contact-details { grid-template-columns: 1fr; gap: 36px; }
  .contact-hero h1 { font-size: var(--type-page-title); }
  .contact-eyebrow { margin-bottom: 24px; font-size: var(--type-label); }
  .contact-hero-arrow { display: none; }
  .contact-intro p { max-width: 440px; font-size: var(--type-body); }
  .contact-details { padding-top: 24px; margin-bottom: 56px; }
  .contact-channel { padding-block: 22px; }
  .contact-channel-value { font-size: var(--type-card-title); }
  .contact-location { padding: 28px; }
  .contact-location h2 { font-size: var(--type-section-title); }
  .contact-postcode { bottom: -26px; font-size: 150px; }
}

/* Local placement; button appearance is shared in ci-components.css. */
.contact-intro .ci-button { margin-top: 28px; }