/* contact.css: the Contact page. The header: a salon owner at her counter sending her question (a real photo that
   moves: the kit's sequence over the counter) beside the words and the form's card; then the quicker way, the chat,
   over a woodworker between jobs. Only the tokens of system.css. */

/* ---------- hero: the photo on the left; the words and the form's card on the right ---------- */
.contact-hero { padding-block: clamp(36px, 4vw, 52px) clamp(64px, 7vw, 96px); background: var(--c-paper-alt); }
.contact-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); grid-template-areas: "pic copy" "pic form"; grid-template-rows: auto 1fr; column-gap: clamp(40px, 4.5vw, 64px); row-gap: 26px; align-items: start; }
.contact-hero__copy { grid-area: copy; display: grid; gap: 14px; }
.contact-hero__title { margin: 0; font: 700 var(--fs-h1)/var(--lh-tight) var(--font-display); letter-spacing: var(--track-display); color: var(--c-ink); text-wrap: balance; }
.contact-hero__lead { margin: 0; max-width: 46ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--c-ink-soft); }
.contact-hero__ways { display: flex; flex-wrap: wrap; gap: 4px 26px; margin: 2px 0 0; padding: 0; list-style: none; }
.contact-hero__ways a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 700 var(--fs-ui)/1.2 var(--font-ui); color: var(--c-ink); text-decoration: none; }
.contact-hero__ways svg { flex: none; color: var(--c-brand); }
.contact-hero__ways a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.contact-hero__ways a:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; border-radius: 4px; }

/* the photo: the landscaper typing to us, her face upper middle, her phone at her chest; the messages land low on the
   truck bed at her left, well under her hands */
.contact-hero__pic { grid-area: pic; position: relative; align-self: start; height: clamp(560px, calc(100svh - var(--header-h) - 96px), 760px); overflow: hidden; border-radius: var(--radius-l); background: var(--c-ink); box-shadow: var(--shadow-l); }
.contact-hero__media { position: absolute; inset: 0; }
.contact-hero__media img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: 60% 50%; }
/* the thread over the trees at the top left: her face, her phone and her hands stay right of it and below its foot
   at every height of the photo (560 to 760 px) */
.contact-hero__seq { position: absolute; z-index: 1; left: 20px; top: 20px; display: grid; justify-items: start; gap: 10px; width: min(330px, calc(100% - 40px)); }
.contact-hero__seq [data-kit-at] { opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 12px)); }
.contact-msg { box-sizing: border-box; width: 100%; padding: 14px 18px 16px; border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-paper); box-shadow: var(--shadow-l); color: var(--c-ink); }
.contact-msg__to { display: block; margin-bottom: 6px; font: 600 13px/1.3 var(--font-ui); color: var(--c-ink-soft); }
.contact-msg__text { margin: 0; font: 600 1.0625rem/1.4 var(--font-display); letter-spacing: -0.01em; }
.contact-msg__row { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-msg__sent, .contact-msg__read { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font: 700 14px/1.25 var(--font-ui); box-shadow: var(--shadow-m); }
.contact-msg__sent { background: var(--c-paper); color: var(--c-brand-text); }
.contact-msg__read { background: var(--c-ink); color: var(--c-on-ink); }
.contact-msg__read svg { flex: none; color: var(--c-accent); }
/* the reply: the team answers, under its logo mark */
.contact-msg--us { border-color: color-mix(in srgb, var(--c-brand) 28%, var(--c-line)); background: color-mix(in srgb, var(--c-brand) 7%, var(--c-paper)); }
.contact-msg--us .contact-msg__to { display: flex; align-items: center; gap: 8px; color: var(--c-brand-text); }
.contact-msg--us .contact-msg__to img { flex: none; width: 20px; height: 20px; }
.contact-hero__stop { position: absolute; z-index: 2; top: 14px; right: 14px; }

/* ---------- the form's card: its two steps marked on top, the choices shown as cards ---------- */
.contact-form { grid-area: form; padding: clamp(22px, 2.4vw, 30px); border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-paper); box-shadow: var(--shadow-l); scroll-margin-top: calc(var(--header-h) + 16px); }
.contact-form__marks { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 20px; padding: 0 0 16px; border-bottom: 1px solid var(--c-line); list-style: none; font: 600 var(--fs-small)/1.3 var(--font-ui); color: var(--c-ink-soft); }
.contact-form__marks li { display: inline-flex; align-items: center; gap: 10px; }
.contact-form__marks b { position: relative; isolation: isolate; display: grid; place-items: center; width: 28px; height: 28px; font: 700 13px/1 var(--font-ui); color: var(--c-ink); }
.contact-form__marks b::before { content: ""; position: absolute; inset: 5px; z-index: -1; border: 1.5px solid var(--c-line); border-radius: 3px; background: var(--c-paper); transform: rotate(45deg); }
.contact-form__marks li[aria-current="step"] { color: var(--c-ink); }
.contact-form__marks li:is([aria-current="step"], [data-kit-past]) b::before { border-color: var(--c-accent); background: var(--c-accent); }
.cf-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.cf-legend { margin: 0 0 16px; padding: 0; font: 700 var(--fs-h3)/1.25 var(--font-display); letter-spacing: var(--track-display); color: var(--c-ink); }
.cf-choices { display: grid; gap: 10px; }
.cf-choice { box-sizing: border-box; display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 12px 16px; border: 1.5px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-paper); font: 600 var(--fs-ui)/1.3 var(--font-ui); color: var(--c-ink); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.cf-choice:hover { border-color: var(--c-brand); }
/* the radio as the site's diamond: an outline, filled orange once chosen */
.cf-choice input { flex: none; appearance: none; width: 16px; height: 16px; margin: 0 2px; border: 2px solid var(--c-ink-soft); border-radius: 3px; background: var(--c-paper); transform: rotate(45deg); cursor: pointer; }
.cf-choice input:checked { border-color: var(--c-accent); background: var(--c-accent); }
.cf-choice[data-kit-on] { border-color: var(--c-brand); background: color-mix(in srgb, var(--c-brand) 6%, var(--c-paper)); }
.cf-choice:has(input:focus-visible) { outline: 3px solid var(--c-brand); outline-offset: 2px; }
/* each choice names where it leads, under it */
.cf-choice > span { display: grid; gap: 3px; }
.cf-choice b { font: 600 var(--fs-ui)/1.3 var(--font-ui); color: var(--c-ink); }
.cf-choice small { font: 400 0.875rem/1.35 var(--font-ui); color: var(--c-ink-soft); }
.cf-field { display: grid; gap: 6px; margin-top: 14px; }
.cf-choices.cf-field { margin-top: 0; }
.cf-field label { font: 600 var(--fs-small)/1.3 var(--font-ui); color: var(--c-ink); }
.cf-opt { font-weight: 500; color: var(--c-ink-soft); }
.cf-field :is(input:not([type="radio"]), textarea) { box-sizing: border-box; width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-paper); color: var(--c-ink); font: 500 var(--fs-ui)/1.4 var(--font-ui); }
.cf-field textarea { min-height: 112px; resize: vertical; }
.cf-field :is(input:not([type="radio"]), textarea):focus { border-color: var(--c-brand); outline: 3px solid color-mix(in srgb, var(--c-brand) 22%, transparent); outline-offset: 0; }
.cf-field[data-kit-invalid] :is(input, textarea) { border-color: var(--c-accent); }
.cf-error { margin: 2px 0 0; font: 600 var(--fs-small)/1.35 var(--font-ui); color: var(--c-accent-text); }
.cf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; align-items: start; }
.cf-next { margin-top: 20px; }
.cf-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.cf-back { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--c-brand-text); font: 700 var(--fs-ui)/1 var(--font-ui); cursor: pointer; }
.cf-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.cf-back:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; border-radius: 4px; }
.cf[data-kit-sending] .cf-send { opacity: 0.7; pointer-events: none; }

/* ---------- skip: the quicker way, over the woodworker; the words and your part and ours on the shaded left ---------- */
.contact-skip { position: relative; overflow: hidden; isolation: isolate; background: var(--c-ink); color: var(--c-on-ink); }
.contact-skip__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* him on the right, mirrored so he faces the words: the photo enlarged 1.2 times from its bottom left corner puts his
   head and his hands right of the card and its stop (past 56% of the width) at every width from 1100 px, his whole
   figure inside the band */
.contact-skip__media img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: 50% 50%; transform: scale(1.2) translateX(100%) scaleX(-1); transform-origin: 0 100%; }
.contact-skip__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 94%, transparent) 0%, color-mix(in srgb, var(--c-ink) 90%, transparent) 40%, color-mix(in srgb, var(--c-ink) 40%, transparent) 52%, color-mix(in srgb, var(--c-ink) 8%, transparent) 62%, transparent 80%); }
.contact-skip__in { display: grid; justify-items: start; gap: 40px; padding-block: clamp(80px, 8vw, 112px); }
.contact-skip__copy { display: grid; justify-items: start; gap: 16px; max-width: 560px; }
.contact-skip__copy .section-title { margin: 0; color: var(--c-on-ink); }
.contact-skip__copy .section-line { margin: 0 0 8px; color: var(--c-on-ink-soft); }
.contact-skip__pic { position: relative; width: min(100%, 620px); }
.contact-skip__pic .contact-skip__scene { width: 100%; overflow: visible; }
/* "every day" breathes in the site's own diamond, not a dot */
.contact-skip__pic .contact-skip__scene .yp-live { border-radius: 1px; transform: rotate(45deg); }
.contact-skip__stop { position: absolute; z-index: 2; top: -50px; right: 0; }

/* ---------- narrower ---------- */
@media (max-width: 1099.98px) {
  .contact-hero__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "pic" "form"; grid-template-rows: none; max-width: 720px; }
  .contact-hero__pic { align-self: auto; height: auto; aspect-ratio: 4 / 3; }
  /* the band as tall as the photo needs: the words over his shoulders at the top, his hands and phone clear in the
     middle, your part and ours over the bench at the foot (the photo fills the band's height, so it maps the same at
     every width) */
  .contact-skip__in { min-height: 1180px; box-sizing: border-box; align-content: space-between; padding-block: 36px 40px; }
  .contact-skip__media img { transform: none; object-position: 32% 50%; }
  .contact-skip__shade { background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 90%, transparent) 0%, color-mix(in srgb, var(--c-ink) 80%, transparent) 26%, color-mix(in srgb, var(--c-ink) 10%, transparent) 34%, transparent 52%, color-mix(in srgb, var(--c-ink) 40%, transparent) 66%, color-mix(in srgb, var(--c-ink) 70%, transparent) 100%); }
}
@media (max-width: 699.98px) {
  .contact-hero__pic { aspect-ratio: 2 / 3; }
  .contact-hero__seq { top: auto; left: 12px; bottom: 12px; width: calc(100% - 24px); }
  /* a phone's narrower photo keeps her hands clear: one card under them, her message and then, in its place, the
     team's reply (the chips left out) */
  .contact-hero__media img { object-position: 75% 50%; }
  .contact-msg__row { display: none; }
  .contact-msg--us { position: absolute; left: 0; right: 0; bottom: 0; }
  .contact-msg__text { font-size: 1rem; }
  .cf-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-form { padding: 20px 16px; }
}