/* contact.css: Contact (src\pages\contact.mjs). A photo header with a paper note card and the quick reply in glass;
   the form in two steps on the paper, its choices as tiles; the skip to the chat on the ink, beside plan-builder. */

/* ---------- the header: the photo, the note card on the left, the reply beside it over the laptop ---------- */
.ct-hero { display: grid; overflow: hidden; padding: 0; min-height: clamp(600px, 50vw, 720px); }
.ct-hero > * { grid-area: 1 / 1; }
.ct-hero__media { position: relative; overflow: hidden; }
/* the photo reaches 14% past the right edge, so the owner's typing hands stand right of the reply; no face in it, so the
   only face beside "Talk to a real person" is Walter's (step 13) */
.ct-hero__img { position: absolute; top: 0; left: 0; width: 114%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 35%; filter: saturate(0.9) contrast(1.03); }
.ct-hero__shade { z-index: 1; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 52%, transparent) 0%, color-mix(in srgb, var(--c-ink) 26%, transparent) 40%, transparent 60%); }
.ct-hero__in { z-index: 2; width: 100%; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 360px); gap: 28px; align-items: end; padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); }
.ct-note { padding: clamp(24px, 2.6vw, 36px); border-radius: var(--radius-l); background: var(--c-paper); color: var(--c-ink); box-shadow: var(--shadow-l); }
.ct-note__title { max-width: 11ch; font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem); }
.ct-note__line { margin-top: var(--space-3); font-size: 1.125rem; line-height: 1.5; color: var(--c-ink-soft); }
.ct-note__who { display: grid; grid-template-columns: 64px auto; align-items: center; gap: 14px; margin: var(--space-4) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--c-line); }
.ct-note__photo { display: block; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 28%; }
.ct-note__who b { display: block; font: var(--display-weight) 1.25rem/1.1 var(--font-display); font-stretch: var(--display-stretch); }
.ct-note__who span { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--c-ink-soft); }
.ct-note__ways { list-style: none; display: grid; gap: 4px; margin: var(--space-3) 0 0; padding: 0; }
.ct-note__ways a { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; color: var(--c-ink); font: 600 1.0625rem/1.2 var(--font-ui); text-decoration: none; overflow-wrap: anywhere; }
.ct-note__ways a:hover span { text-decoration: underline; }
.ct-note__ways svg { flex: none; width: 20px; height: 20px; color: var(--c-brand-text); }
.ct-note__down { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; margin-top: var(--space-2); color: var(--c-brand-text); font: 700 1rem/1 var(--font-ui); text-decoration: none; }
.ct-note__down:hover { text-decoration: underline; }
.ct-note__arrow { width: 8px; height: 8px; margin-top: -4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* the chat grows as it plays: its box keeps the height of the whole chat, so nothing around it moves */
.ct-hero__chat { position: relative; align-self: end; display: flex; flex-direction: column; justify-content: flex-end; min-height: 250px; margin-bottom: 12px; }
.ct-hero__reply { width: 100%; }
.ct-hero__stop { right: 0; top: -52px; }

/* ---------- the form: in its own box on the paper ---------- */
.ct-form__in { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.ct-form__call { margin-top: var(--space-4); font-size: 1.0625rem; }
.ct-form__call a { color: var(--c-brand-text); font-weight: 700; }
.ct-box { margin: 0; padding: clamp(22px, 3vw, 40px); border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-paper); box-shadow: var(--shadow-m); }
.ct-marks { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0 0 var(--space-4); padding: 0; font: 600 0.9375rem/1 var(--font-ui); color: var(--c-ink-soft); }
.ct-marks li { display: inline-flex; align-items: center; gap: 8px; }
.ct-marks span { display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 0.8125rem; }
.ct-marks li[aria-current="step"] { color: var(--c-ink); }
.ct-marks li[aria-current="step"] span, .ct-marks li[data-kit-past] span { border-color: var(--c-brand); background: var(--c-brand); color: var(--c-on-brand); }
.ct-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.ct-step__title { margin-bottom: var(--space-4); padding: 0; font: var(--display-weight) 1.625rem/1.15 var(--font-display); font-stretch: var(--display-stretch); letter-spacing: var(--display-track); }
.ct-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ct-tiles .ct-field__error { grid-column: 1 / -1; }
.ct-tile { position: relative; display: block; cursor: pointer; }
.ct-tile:nth-of-type(5) { grid-column: 1 / -1; }
.ct-tile input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ct-tile__in { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; min-height: 78px; padding: 14px 16px; box-sizing: border-box; border: 1.5px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-paper); transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.ct-tile__in svg { grid-row: 1 / 3; width: 40px; height: 40px; padding: 9px; box-sizing: border-box; border-radius: 10px; background: var(--c-paper-alt); color: var(--c-brand-text); }
.ct-tile__in b { align-self: end; font: 700 1.0625rem/1.2 var(--font-ui); }
.ct-tile__in small { align-self: start; font-size: 0.875rem; line-height: 1.35; color: var(--c-ink-soft); }
.ct-tile:hover .ct-tile__in { border-color: color-mix(in srgb, var(--c-ink) 40%, transparent); }
.ct-tile input:checked + .ct-tile__in { border-color: var(--c-brand); background: color-mix(in srgb, var(--c-brand) 8%, var(--c-paper)); box-shadow: inset 0 0 0 1px var(--c-brand); }
.ct-tile input:checked + .ct-tile__in svg { background: var(--c-brand); color: var(--c-on-brand); }
.ct-tile input:focus-visible + .ct-tile__in { outline: 3px solid var(--c-brand); outline-offset: 2px; }
.ct-step__go { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: var(--space-5); }
.ct-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.ct-field { display: grid; align-content: start; gap: 6px; }
.ct-field--wide { grid-column: 1 / -1; }
.ct-field label { font: 600 0.9375rem/1.3 var(--font-ui); }
.ct-field__opt { font-weight: 400; color: var(--c-ink-soft); }
.ct-field input, .ct-field textarea { box-sizing: border-box; width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--c-line); border-radius: 10px; background: var(--c-paper); color: var(--c-ink); font: 400 1.0625rem/1.4 var(--font-text); }
.ct-field textarea { min-height: 112px; resize: vertical; }
.ct-field input:focus-visible, .ct-field textarea:focus-visible { border-color: var(--c-ink); outline: 3px solid var(--c-brand); outline-offset: 1px; }
.ct-field [aria-invalid="true"] { border-color: var(--c-brand-text); }
.ct-field__hint { margin: 0; font-size: 0.875rem; color: var(--c-ink-soft); }
.ct-field__error { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--c-brand-text); }

/* ---------- the skip: the chat, today, beside the plan building ---------- */
.lattice--ct-skip { left: 0; top: 0; width: 50%; height: 80%; opacity: 0.1; -webkit-mask-image: radial-gradient(100% 100% at 0% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(100% 100% at 0% 0%, #000 0%, transparent 70%); }
.ct-skip__in { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ct-skip__cta { margin-top: var(--space-5); }
.ct-skip__scene { position: relative; }
.ct-skip__builder { height: 560px; }
.ct-skip__stop { right: 0; top: -52px; }

/* ---------- narrower ---------- */
@media (max-width: 1100px) {
  .ct-skip__in { grid-template-columns: minmax(0, 1fr); }
  .ct-skip__words { max-width: 640px; }
  .ct-skip__scene { width: 100%; max-width: 760px; margin-top: var(--space-4); }
}
@media (max-width: 900px) {
  .ct-hero__in { grid-template-columns: minmax(0, 360px) minmax(0, 320px); gap: 20px; }
  .ct-form__in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  /* the photo on top with the reply over its lower part, the note card under it */
  .ct-hero { display: block; min-height: 0; }
  .ct-hero__media { height: 440px; }
  .ct-hero__img { width: calc(100% + 2px); left: -1px; object-position: 74% 50%; }
  .ct-hero__shade { display: none; }
  .ct-hero__in { position: relative; display: flex; flex-direction: column; gap: 0; padding-top: 0; padding-bottom: var(--space-6); }
  .ct-hero__chat { order: -1; align-self: stretch; justify-content: flex-start; margin: -236px 0 0; }
  .ct-note { margin-top: var(--space-4); }
}
@media (max-width: 600px) {
  .ct-tiles, .ct-fields { grid-template-columns: minmax(0, 1fr); }
  .ct-tile:nth-of-type(5) { grid-column: auto; }
  .ct-skip__builder { height: 700px; }
  /* the plan stands taller than a phone's screen: its stop sits in its own top corner, beside its title */
  .ct-skip__stop { top: 12px; right: 12px; }
  .ct-step__go .btn { flex: 1 1 auto; }
}