/* ==========================================================================
   contacts.html — page-specific rules (tokens only, no new colours / radius / shadows)
   ========================================================================== */

/* Hero: e-mail, phone and hours as hairline rows; caption in column 2, value starts in column 3 */
.contact-lines { border-top: 1px solid var(--white-20); }
.contact-line { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--white-20); }
.contact-line__label { grid-column: 1; font-size: 12px; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.04em; color: var(--white-50); }
.contact-line__value { grid-column: 2 / -1; overflow-wrap: anywhere; }
a.contact-line__value:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.contact-line__hours { font-size: 20px; line-height: 1.4; color: var(--white-60); }
.contact-line__hours b { font-weight: 500; color: var(--white); }

/* Office cards: map placeholder on top, tight address block, hours + phone in grey */
.office .ph__display { font-size: clamp(28px, 2.5vw, 36px); }
.office__lines { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; color: var(--ink); }
.office__lines b { font-weight: 700; color: var(--black); }
.office__meta { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; color: var(--ink-70); }
.office__meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
.card--hover:hover .office__lines, .card--hover:hover .office__lines b { color: var(--white); }
.card--hover:hover .office__meta { color: var(--white-60); }
.card--hover:hover .ph { border-color: var(--white); background: var(--black); }
.card--hover:hover .ph--lines::before { background: repeating-linear-gradient(135deg, var(--white-40) 0 1px, transparent 1px 14px); }
.card--hover:hover .ph__label { color: var(--white-50); }
.card--hover:hover .ph__display { -webkit-text-stroke-color: var(--white); }

/* Second white band directly after a white band: separate them with a hairline */
.contact-write { border-top: 1px solid var(--line); }

/* Contact form: two columns of fields; message and consent span both */
.contact-form .form__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
.contact-form .field--wide { grid-column: 1 / -1; }
.contact-form .checkbox { grid-column: 1 / -1; margin-top: 28px; max-width: 670px; }
.contact-form .checkbox a { text-decoration: underline; text-underline-offset: 3px; }
.contact-form .select select:invalid { color: var(--ink-70); }
.contact-form .form__note { max-width: 670px; }
.contact-form .form__success { max-width: 670px; color: var(--ink); }

/* Support channels on the dark band: a link under every feature block */
.channel__link { margin-top: 24px; }

/* <dl> keeps the browser's 1em margin (style.css resets only its children) — flush it so the first
   hairline sits on the grid row, level with the label / caption next to it */
.spec { margin: 0; }

/* Press: small caption above the big e-mail */
.press__caption { display: block; margin-bottom: 8px; font-size: 12px; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-75); }
a.press__email:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

@media (max-width: 1023px) {
  .contact-line { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); padding: 18px 0; }
  .contact-line__value { grid-column: 2; }
  .contact-line__hours { font-size: 18px; }
  .contact-form .checkbox { margin-top: 24px; }
}

@media (max-width: 639px) {
  .contact-line { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 16px 0; }
  .contact-line__value { grid-column: auto; }
  .contact-line__hours { font-size: 16px; }
  .contact-form .form__fields { grid-template-columns: minmax(0, 1fr); }
  .contact-form .checkbox { margin-top: 20px; }
  .channel__link { margin-top: 20px; }
}