/* Contact page. Tokens, nav, buttons, .card, .band and the footer come from ../style.css and ../footer.css.
   Palette only: lilac glass and --accent on the sky, --card / --card-ink / --item-ink on the light form card. */

/* ---------- Layout: form left, channels right, offset so the two columns do not line up ---------- */
.contact-wrap { padding-top: clamp(24px, 4vw, 56px); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(72px, 12vw, 120px); align-items: start; --cgap: clamp(40px, 5vw, 80px); }
@media (min-width: 960px) {
  .contact-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); column-gap: var(--cgap); }
  /* The channels column starts lower: staggered, not a flat two-up. */
  .contact-online { padding-top: clamp(72px, 9vw, 136px); }
}

/* ---------- The form card ---------- */
.card.contact-card { display: block; min-height: 0; padding: clamp(26px, 4.4vw, 52px); box-shadow: 0 44px 80px -48px rgba(var(--tint-rgb), 0.95), 0 2px 10px rgba(var(--tint-rgb), 0.18); }
.cform-stage { display: grid; position: relative; }
.cform-stage > * { grid-area: 1 / 1; min-width: 0; }

.cform__title { margin: 0; font-size: clamp(1.9rem, 3.6vw, 2.75rem); font-weight: 500; line-height: 1.02; letter-spacing: var(--track-display); color: var(--card-ink); text-wrap: balance; }
.cform__intro { margin: 16px 0 0; max-width: 34rem; font-family: var(--font-body); font-size: 1rem; line-height: 1.6; letter-spacing: var(--track-body); color: var(--item-ink); text-wrap: pretty; }
.cform__nojs { margin: 20px 0 0; padding: 16px 18px; border-radius: 14px; background: var(--white); font-family: var(--font-body); font-size: 1rem; line-height: 1.55; color: var(--card-ink); box-shadow: inset 0 0 0 1px rgba(var(--tint-rgb), 0.5); }
.cform__nojs a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
/* Without JS there is nothing to submit to, so the fields stay out of the way and the WhatsApp link above is the way in. */
html:not(.js) .cform__body { display: none; }
.cform__req-note { margin: 28px 0 0; font-family: var(--font-body); font-size: 0.875rem; line-height: 1.5; color: var(--item-ink); }

/* ---------- Fields ---------- */
.field { margin-top: 22px; }
.field__label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 1rem; font-weight: 500; line-height: 1.3; letter-spacing: var(--track-body); color: var(--card-ink); }
.field__tag { flex: none; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 400; letter-spacing: var(--track-small); color: var(--item-ink); }

/* The ring is a sibling-less pseudo-element that grows outward and fades in. page.js drives --ring (0 to 1) on a
   critically damped spring; only opacity and scale change, so it stays on the compositor. */
.control { position: relative; margin-top: 8px; --ring: 0; }
.control::after { content: ''; position: absolute; inset: -5px; border-radius: 20px; border: 2px solid var(--card-ink); pointer-events: none;
  opacity: var(--ring); scale: calc(0.965 + 0.035 * var(--ring)); }
/* No JS or no press layer: the ring snaps on with focus, no spring. */
html:not(.js-press) .control:focus-within { --ring: 1; }

.input { display: block; width: 100%; min-height: 52px; padding: 14px 16px; margin: 0; border-radius: 14px; border: 1px solid rgba(var(--tint-rgb), 0.6);
  background: var(--white); color: var(--card-ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.45; letter-spacing: var(--track-body);
  -webkit-appearance: none; appearance: none; outline: none; transition: border-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease); }
.input:focus-visible { outline: none; }
.input--area { min-height: 168px; resize: vertical; line-height: 1.55; }
.input--select { padding-right: 52px; cursor: pointer; }
.control__chev { position: absolute; right: 16px; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--card-ink); }
@media (hover: hover) { .input:hover { border-color: var(--card-ink); } }

.field__hint { margin: 8px 0 0; font-family: var(--font-body); font-size: 0.875rem; line-height: 1.5; letter-spacing: var(--track-body); color: var(--item-ink); }
.field__meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.field__count { flex: none; margin: 8px 0 0; font-family: var(--font-body); font-size: 0.875rem; line-height: 1.5; font-variant-numeric: tabular-nums; color: var(--item-ink); }
.field__count.is-near { font-weight: 700; color: var(--card-ink); }

/* Errors never rely on colour alone: a heavier two-pixel border, an icon and a bold sentence. */
.field.is-invalid .input { border-color: var(--card-ink); box-shadow: inset 0 0 0 1px var(--card-ink); }
.field__error { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 700; line-height: 1.45; color: var(--card-ink); }
.field__error[hidden] { display: none; }
.field__error svg { flex: none; margin-top: 2px; }
.field__error:not([hidden]) { animation: err-in 0.28s var(--ease) both; }
@keyframes err-in { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }

/* ---------- Error summary ---------- */
.summary { margin-top: 24px; padding: 18px 20px; border-radius: 16px; background: var(--white); box-shadow: inset 4px 0 0 var(--card-ink), inset 0 0 0 1px rgba(var(--tint-rgb), 0.5); color: var(--card-ink); }
.summary[hidden] { display: none; }
.summary:focus-visible { outline: 2px solid var(--card-ink); outline-offset: 4px; border-radius: 16px; }
.summary__title { margin: 0; font-size: 1.125rem; font-weight: 500; line-height: 1.25; letter-spacing: var(--track-title); }
.summary__list { margin: 10px 0 0; padding: 0; list-style: none; }
.summary__list a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-body); font-size: 1rem; line-height: 1.4; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Submit ---------- */
.cform__submit { margin-top: 32px; }
.btn.btn--ink { background: var(--card-ink); color: var(--white); min-height: 52px; padding: 14px 26px; width: 100%; }
.btn.btn--ink svg { flex: none; }
.btn.btn--ink:disabled { opacity: 0.72; cursor: progress; }
.btn.btn--ink-outline { background: transparent; color: var(--card-ink); box-shadow: inset 0 0 0 1.5px var(--card-ink); min-height: 52px; padding: 14px 26px; }
@media (hover: hover) {
  .btn.btn--ink:not(:disabled):hover { background: var(--ink-soft); }
  .btn.btn--ink-outline:hover { background: rgba(var(--tint-rgb), 0.08); }
}
.btn.btn--ink:focus-visible, .btn.btn--ink-outline:focus-visible { outline: 2px solid var(--card-ink); outline-offset: 4px; }
@media (min-width: 560px) { .btn.btn--ink { width: auto; } }
.cform__note { margin: 14px 0 0; max-width: 32rem; font-family: var(--font-body); font-size: 0.875rem; line-height: 1.55; color: var(--item-ink); }

/* ---------- Success: materializes from the send button, returns along the same path ---------- */
.cform__done { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; min-height: 100%; opacity: 0; scale: 0.94; transform-origin: 50% 80%; }
.cform__done[hidden] { display: none; }
.done__icon { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--card-ink); color: var(--white); }
.done__title { margin: 8px 0 0; font-size: clamp(1.9rem, 3.6vw, 2.75rem); font-weight: 500; line-height: 1.02; letter-spacing: var(--track-display); color: var(--card-ink); }
.done__msg { max-width: 30rem; font-family: var(--font-body); font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.6; color: var(--card-ink); text-wrap: pretty; }
.done__again { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.5; color: var(--item-ink); }
.done__again a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--card-ink); text-decoration: underline; text-underline-offset: 3px; }
.cform__done .btn { margin-top: 4px; }

/* ---------- Find us online ---------- */
.contact-online__head { margin-bottom: clamp(28px, 4vw, 44px); }
.contact-online__title { margin: 0; font-size: clamp(2.4rem, 5.4vw, 4.5rem); font-weight: 500; line-height: 0.98; letter-spacing: var(--track-display); }
.contact-online__lead { margin: 20px 0 0; max-width: 26rem; font-size: clamp(1.15rem, 1.9vw, 1.45rem); font-weight: 500; line-height: 1.35; letter-spacing: var(--track-title); color: rgba(255, 255, 255, 0.92); }

.chan-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 2vw, 20px); list-style: none; margin: 0; padding: 0; }
@media (min-width: 440px) {
  .chan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; }
  .chan-grid__wide { grid-column: span 2; }
}

.chan { position: relative; height: 100%; min-height: 156px; display: flex; flex-direction: column; justify-content: space-between; gap: 26px;
  padding: clamp(20px, 2.6vw, 28px); border-radius: var(--radius-card); background: var(--glass); color: var(--white); isolation: isolate;
  box-shadow: var(--edge-top), var(--edge-ring), 0 26px 50px -34px rgba(var(--tint-rgb), 0.95);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); }
/* Hover depth: --hover is set by page.js on the same spring as the lift, so only opacity animates here. */
.chan::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: 0 36px 62px -28px rgba(var(--tint-rgb), 1); opacity: var(--hover, 0); }
.chan:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; border-radius: var(--radius-card); }
.chan__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.chan__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); color: var(--white); }
.chan__go { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  transition: background-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease); }
@media (hover: hover) { .chan:hover .chan__go { background: var(--white); color: var(--ink-soft); } }
.chan:focus-visible .chan__go { background: var(--white); color: var(--ink-soft); }
.chan__text { display: block; }
.chan__name { display: block; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 500; line-height: 1; letter-spacing: var(--track-title); }
.chan__handle { display: block; margin-top: 10px; font-family: var(--font-body); font-size: 1rem; letter-spacing: var(--track-body); color: rgba(255, 255, 255, 0.92); overflow-wrap: anywhere; }

/* WhatsApp is the fastest way in, so it is the solid lilac tile with the number set large. */
.chan--wa { min-height: 224px; background: var(--accent); color: var(--bg-deep); backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: var(--edge-top), 0 30px 56px -30px rgba(var(--tint-rgb), 1); }
.chan--wa .chan__icon { background: var(--bg-deep); color: var(--white); box-shadow: none; }
.chan--wa .chan__go { box-shadow: inset 0 0 0 1px rgba(var(--tint-rgb), 0.5); }
.chan--wa .chan__name { font-size: 1.125rem; letter-spacing: var(--track-body); font-weight: 600; }
.chan--wa .chan__num { display: block; margin-top: 8px; font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 500; line-height: 1.02; letter-spacing: var(--track-display); }
@media (hover: hover) { .chan--wa:hover .chan__go { background: var(--bg-deep); color: var(--white); } }
.chan--wa:focus-visible .chan__go { background: var(--bg-deep); color: var(--white); }
/* On wide screens the tile crosses the column gap and reaches 16px into the form card's right padding. That padding
   holds no form content, so the pair overlaps without touching a field. Lifted above the card with z-index. */
@media (min-width: 1100px) {
  .chan-grid > li:first-child { position: relative; z-index: 2; margin-left: calc(var(--cgap) * -1 - 16px); }
}

/* No-JS fallback: the same lift and shadow in CSS. Once main.js has run (html.js-press), page.js owns them. */
html:not(.js-press) .chan:hover, html:not(.js-press) .pmc__a:hover { transform: translateY(var(--lift-m)); }
html:not(.js-press) .chan:hover::after { opacity: 1; }

.chan-call { margin: clamp(20px, 3vw, 28px) 0 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.5; color: rgba(255, 255, 255, 0.92); }
.chan-call a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--white); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Patriji's PMC channels: a smaller row of pills ---------- */
.pmc { margin-top: clamp(36px, 5vw, 56px); }
.pmc__title { margin: 0; font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); }
.pmc__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.pmc__a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px; background: var(--glass);
  box-shadow: var(--edge-top), var(--edge-ring); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; line-height: 1.2; color: var(--white);
  transition: background-color var(--dur-hover) var(--ease); }
.pmc__a:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; border-radius: 999px; }
@media (hover: hover) { .pmc__a:hover { background: rgba(var(--tint-rgb), 0.78); } }

/* ---------- Closing band (video behind): note under the headline ---------- */
.band .btn { min-height: 48px; }
.band__note { margin: 16px 0 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.5; color: var(--white); text-shadow: 0 1px 10px rgba(var(--tint-rgb), 0.8); }
.band__note a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Links on the light card or the white error summary: the global white focus ring would vanish there, so they take
   the deep-purple ring instead. */
.summary__list a:focus-visible, .cform__nojs a:focus-visible, .done__again a:focus-visible {
  outline: 2px solid var(--card-ink); outline-offset: 3px; border-radius: 8px; }

/* ---------- Phones ---------- */
@media (max-width: 479px) {
  .field__label { flex-direction: column; align-items: flex-start; gap: 2px; }
  .field__tag { order: 2; }
}

/* ---------- Accessibility: transparency and contrast ----------
   Tiles and pills set their own background, so style.css's [data-glass] rule does not reach them. */
@media (prefers-reduced-transparency: reduce) {
  .chan:not(.chan--wa), .pmc__a { background: rgb(var(--tint-rgb)); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .chan:not(.chan--wa), .pmc__a { background: rgb(var(--tint-rgb)); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: inset 0 0 0 2px var(--white); }
  .chan--wa { box-shadow: inset 0 0 0 2px var(--bg-deep); }
  .input { border-color: var(--card-ink); border-width: 2px; }
}
@media (forced-colors: active) {
  .control::after { border-color: Highlight; }
  .chan, .pmc__a { border: 1px solid CanvasText; }
}

/* ---------- Reduced motion ----------
   No lift, no ring growth (the ring simply appears), no error slide, no success scale. page.js swaps with a short
   cross-fade, and skips the shake. */
@media (prefers-reduced-motion: reduce) {
  .field__error:not([hidden]) { animation: none; }
  .control::after { scale: 1; }
  .cform__done { scale: 1; }
  .chan__go, .input, .pmc__a { transition: none; }
}

/* ---------- Consent checkbox, honeypot, send failure (same pattern as the testimonials form) ---------- */
.field--consent { margin-top: 26px; }
.check { position: relative; display: flex; align-items: flex-start; gap: 14px; min-height: 44px; cursor: pointer; font-family: var(--font-body); font-size: 1rem; line-height: 1.5; letter-spacing: var(--track-body); color: var(--card-ink); }
.check__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.check__box { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-top: 1px; border-radius: 9px; border: 1.5px solid var(--card-ink); background: var(--white); color: var(--white);
  transition: background-color var(--dur-hover) var(--ease); }
.check__box svg { opacity: 0; scale: 0.5; transition: opacity var(--dur-hover) var(--ease), scale var(--dur-spring) var(--ease-spring); }
.check__input:checked ~ .check__box { background: var(--card-ink); }
.check__input:checked ~ .check__box svg { opacity: 1; scale: 1; }
.check__input:focus-visible ~ .check__box { outline: 2px solid var(--card-ink); outline-offset: 4px; }
.field.is-invalid .check__box { box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--card-ink); }
@media (hover: hover) { .check:hover .check__box { background: rgba(var(--tint-rgb), 0.08); } .check:hover .check__input:checked ~ .check__box { background: var(--ink-soft); } }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.cform__failure { margin: 24px 0 0; padding: 14px 16px; border-radius: 14px; background: var(--white); box-shadow: inset 4px 0 0 var(--card-ink), inset 0 0 0 1px rgba(var(--tint-rgb), 0.5); font-family: var(--font-body); font-size: 1rem; line-height: 1.5; color: var(--card-ink); }
.cform__failure[hidden] { display: none; }
.cform__failure a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
@media (forced-colors: active) { .check__box { border-width: 2px; border-color: CanvasText; } .check__input:checked ~ .check__box { background: Highlight; color: HighlightText; } }
@media (prefers-reduced-motion: reduce) { .check__box svg { scale: 1; transition: opacity 0.2s linear; } }