/* ==========================================================================
   GLOW — Contact page
   Page head · contact channel cards · message form (pill topics, inline
   validation, success state) · info sidebar · FAQ accordion.
   Built entirely from tokens.css values — no new colours or radii.
   ========================================================================== */

.page-contact .header.is-scrolled { box-shadow: none; }

/* ---- Head --------------------------------------------------------------- */
.contact-head { padding-block: var(--sp-6) var(--sp-7); }
.contact-head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-8); }
.contact-head__title { font: 400 clamp(40px, 4.6vw, 64px)/1 var(--font-display); letter-spacing: -.02em; color: var(--c-ink); }
.contact-head__title em { font-style: italic; }
.contact-head__sub { max-width: 440px; font-size: var(--fs-base); color: var(--color-text); }

/* ---- Channels ----------------------------------------------------------- */
.channels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); }
.channel {
  display: grid; align-content: start; gap: 6px; padding: var(--sp-6); text-align: left;
  border-radius: var(--r-lg); background: var(--tint); color: var(--c-ink);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.channel:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.channel:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.channel__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--sp-5); border-radius: 50%; background: var(--c-porcelain); box-shadow: var(--shadow-xs); }
.channel__name { font: 400 var(--fs-lg)/1.15 var(--font-display); font-size: 26px; }
.channel__meta { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--color-text); }
.channel__live { width: 7px; height: 7px; border-radius: 50%; background: var(--c-success); animation: blink 1.6s infinite; }
.channel__foot { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-5); font: 600 var(--fs-2xs)/1 var(--font-body); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink); transition: gap var(--dur) var(--ease-out); }
.channel:hover .channel__foot { gap: 10px; }

/* ---- Layout ------------------------------------------------------------- */
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(28px, 5vw, 80px); align-items: start; }
.contact__main .section-head { margin-bottom: var(--sp-7); }

/* ---- Form --------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-6); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.field { display: grid; gap: 8px; min-width: 0; border: 0; padding: 0; margin: 0; }
.field label, .field legend { padding: 0; font: 600 var(--fs-xs)/1.2 var(--font-body); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink); }
.field legend { margin-bottom: 12px; }
.field__opt { margin-left: 6px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--color-muted); }
.field input[type="text"], .field input[type="email"], .field textarea {
  width: 100%; height: var(--input-h); padding: 0 18px; border-radius: var(--r-md);
  border: 1px solid var(--c-line-strong); background: #fff; color: var(--c-ink);
  font: 400 var(--fs-base)/1.4 var(--font-body);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field textarea { height: auto; padding: 14px 18px; line-height: var(--lh-body); resize: vertical; min-height: 150px; }
.field input::placeholder, .field textarea::placeholder { color: var(--c-ink-3); opacity: .8; }
.field input:hover, .field textarea:hover { border-color: var(--c-ink-3); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px var(--c-amber-soft); }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--c-danger); }
.field.is-invalid input:focus, .field.is-invalid textarea:focus { box-shadow: 0 0 0 3px rgba(162, 59, 44, .14); }
.field__err { display: none; font-size: 12.5px; color: var(--c-danger); }
.field.is-invalid .field__err { display: block; }
.field__foot { display: flex; justify-content: space-between; gap: var(--sp-4); }
.field__count { margin-left: auto; font-size: 12px; color: var(--color-muted); font-variant-numeric: tabular-nums; }

/* Topic pills — same shape language as .size-pill / quiz chips */
.topics { display: flex; flex-wrap: wrap; gap: 8px; }
.topic { position: relative; cursor: pointer; }
.topic input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.topic span {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: var(--r-pill);
  border: 1px solid var(--c-line-strong); background: #fff; font-size: var(--fs-sm); color: var(--c-ink);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.topic:hover span { border-color: var(--c-ink); }
.topic input:checked + span { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-ivory); }
.topic input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Checkbox row — mirrors .ritual__addon */
.check-row { position: relative; display: flex; align-items: center; gap: 12px; font-size: var(--fs-sm); color: var(--color-text); cursor: pointer; }
.check-row input { position: absolute; opacity: 0; }
.check-row .check { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: var(--r-xs); border: 1px solid var(--c-line-strong); background: #fff; color: transparent; transition: all var(--dur-fast); }
.check-row .check .ico { width: 13px; height: 13px; stroke-width: 2; }
.check-row input:checked + .check { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.check-row input:focus-visible + .check { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.form__submit { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-5); }
.form__fine { display: flex; align-items: center; gap: 8px; max-width: 360px; font-size: 12.5px; color: var(--color-muted); }
.form__fine a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
.form.is-sending .btn { opacity: .6; pointer-events: none; }

/* ---- Success state ------------------------------------------------------ */
.form-done { display: grid; justify-items: start; gap: var(--sp-3); padding: clamp(28px, 4vw, 48px); border-radius: var(--r-lg); background: var(--c-bone); animation: rise .5s var(--ease-out); }
.form-done:focus { outline: none; }
.form-done__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--sp-3); border-radius: 50%; background: var(--c-amber); color: #fff; }
.form-done__title { font: 400 var(--fs-xl)/1.1 var(--font-display); font-size: clamp(30px, 3vw, 40px); color: var(--c-ink); }
.form-done__title em { font-style: italic; }
.form-done p { max-width: 460px; }
.form-done p b { color: var(--c-ink); font-weight: 600; }
.form-done__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }

/* ---- Aside -------------------------------------------------------------- */
.contact__aside { display: grid; gap: var(--sp-4); position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
.info-card { padding: var(--sp-6); border-radius: var(--r-lg); background: var(--c-bone); }
.info-card .eyebrow { margin-bottom: var(--sp-4); }
.info-card address { font-style: normal; font-size: var(--fs-base); line-height: var(--lh-body); color: var(--c-ink); }
.info-card__note { display: flex; align-items: center; gap: 8px; margin-top: var(--sp-4); font-size: 12.5px; color: var(--color-muted); }
.info-card__note b { color: var(--c-ink); font-weight: 600; }
.info-card__note .ico { color: var(--c-amber); }
.info-card__lede { margin-bottom: var(--sp-4); font: 400 22px/1.2 var(--font-display); color: var(--c-ivory); }
.info-card--dark { background: var(--c-night); color: rgba(248, 245, 240, .7); }
.info-card--dark .link-arrow { color: var(--c-ivory); }
.info-card--dark .link-arrow:hover { color: var(--c-amber-soft); }
.info-card--flat { background: transparent; border: 1px solid var(--color-border); }
.info-card--flat .socials { display: flex; gap: 10px; }
.info-card--flat .socials a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--c-line-strong); color: var(--c-ink); transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.info-card--flat .socials a:hover { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-ivory); }
.hours { list-style: none; margin: 0; padding: 0; display: grid; }
.hours li { display: flex; justify-content: space-between; gap: var(--sp-4); padding: 10px 0; border-bottom: 1px solid var(--c-sand); font-size: var(--fs-sm); }
.hours li:last-child { border-bottom: 0; }
.hours b { font-weight: 500; color: var(--c-ink); }

/* ---- FAQ ---------------------------------------------------------------- */
.faq { background: var(--c-bone); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.faq__intro { display: grid; justify-items: start; gap: var(--sp-4); position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
.faq__intro .eyebrow { margin: 0; }
.faq__intro p:not(.eyebrow) { max-width: 380px; }
.faq__list details { border-color: var(--c-line-strong); }
.faq__list summary { padding-block: 20px; font: 400 22px/1.2 var(--font-display); }
.faq__list summary { gap: var(--sp-5); }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1023px) {
  .channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact__grid, .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .contact__aside, .faq__intro { position: static; }
  .contact__aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-head__row { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
}
@media (max-width: 767px) {
  .channels { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .channel { grid-template-columns: auto 1fr; column-gap: var(--sp-4); align-items: center; padding: var(--sp-5); }
  .channel__icon { grid-row: 1 / span 3; margin: 0; }
  .channel__foot { margin-top: 4px; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .contact__aside { grid-template-columns: minmax(0, 1fr); }
  .form__submit { align-items: stretch; flex-direction: column; }
  .form__submit .btn { width: 100%; }
  .form-done__ctas .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .channel, .channel__foot { transition: none; }
  .channel__live, .form-done { animation: none; }
}