/* site\assets\css\pages\contact.css: the Contact page, as plan.md writes it. Only system.css's tokens. Parts: hero (the
   words centred on warm white, a wide framed photo with the owner's note and a person's reply landing over the van's
   plain door), form (the kit's form in a white card, its choices as cards with a gold node; the chat as the quicker road
   in navy beside it), skip (the counter framed, yourpart in glass over its shelves, the words and the main button). */

/* hero */
.ct-hero { overflow: hidden; padding-block: clamp(40px, 5vw, 72px) clamp(56px, 6vw, 96px); background: radial-gradient(44% 40% at 50% 100%, color-mix(in srgb, var(--c-gold) 10%, transparent), transparent 72%), var(--c-paper-alt); }
.ct-hero__copy { max-width: 900px; margin: 0 auto; text-align: center; }
.ct-hero__title { font-size: var(--fs-h1); color: var(--c-ink); }
.ct-hero__line { max-width: 34em; margin: 16px auto 26px; font-size: 1.1875rem; line-height: 1.55; color: var(--c-ink-soft); }
.ct-hero__pic { position: relative; max-width: 1100px; margin: clamp(40px, 4.4vw, 60px) auto 0; }
.ct-hero__frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius-l); background: var(--c-sand); box-shadow: var(--shadow-l); }
.ct-hero__photo { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: 50% 40%; }
/* the thread, in glass over the van's plain door: his note held, then a person typing, then the reply in its place */
.ct-chat { position: absolute; z-index: 2; left: 13%; top: 15%; display: grid; gap: 12px; width: min(360px, 40%); padding: 16px; box-sizing: border-box; border-radius: var(--radius-l); background: color-mix(in srgb, var(--c-ink) 66%, transparent); border: 1px solid var(--c-glass-line); color: var(--c-paper); box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--c-black) 80%, transparent); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.ct-chat [data-kit-at] { opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 10px)); }
.ct-chat__me { justify-self: end; display: grid; justify-items: end; gap: 5px; max-width: 88%; }
.ct-chat__me p { margin: 0; padding: 11px 14px; border-radius: 16px 16px 4px 16px; background: var(--c-azure); color: var(--c-ink); font: 600 .9375rem/1.35 var(--font-ui); }
.ct-chat__sent { display: inline-flex; align-items: center; gap: 5px; font: 600 .8125rem/1 var(--font-ui); color: color-mix(in srgb, var(--c-paper) 78%, transparent); }
.ct-chat__sent svg { width: 18px; height: 13px; fill: none; stroke: var(--c-teal); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ct-chat__last { display: grid; }
.ct-chat__last > * { grid-area: 1 / 1; }
.ct-chat__typing { justify-self: start; align-self: start; display: inline-flex; gap: 5px; margin: 0; padding: 13px 14px; border-radius: 16px 16px 16px 4px; background: color-mix(in srgb, var(--c-paper) 14%, transparent); }
.ct-chat__typing i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--c-paper) 74%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .ct-chat__typing i { animation: ct-dot 1s var(--ease-in-out) infinite; }
  .ct-chat__typing i:nth-child(2) { animation-delay: .15s; }
  .ct-chat__typing i:nth-child(3) { animation-delay: .3s; }
}
@keyframes ct-dot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }
.ct-chat:has(.ct-chat__reply[data-kit-on]) .ct-chat__typing { visibility: hidden; }
.ct-chat__reply { max-width: 92%; padding: 11px 14px 13px; border-radius: 16px 16px 16px 4px; background: var(--c-paper); color: var(--c-ink); }
.ct-chat__reply small { display: block; margin-bottom: 4px; font: 700 .8125rem/1 var(--font-ui); color: var(--c-brand-text); }
.ct-chat__reply p { margin: 0; font: 600 .9375rem/1.35 var(--font-ui); }
.ct-hero__stop { position: absolute; z-index: 3; top: calc(15% - 56px); left: 13%; }

/* form: the white card with the steps, the quicker road in navy beside it */
.ct-form__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.ct-form__main h2 { color: var(--c-ink); }
.ct-form__line { margin: 14px 0 28px; font-size: 1.1875rem; line-height: 1.55; color: var(--c-ink-soft); }
.ct-card { padding: clamp(22px, 3vw, 40px); border-radius: var(--radius-l); background: var(--c-paper); border: 1px solid var(--c-line); box-shadow: var(--shadow-l); }
.ct-steps { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 26px; padding: 0 0 18px; border-bottom: 1px solid var(--c-line); list-style: none; font: 700 .9375rem/1.2 var(--font-ui); color: var(--c-ink-soft); }
.ct-steps li { display: inline-flex; align-items: center; gap: 9px; }
.ct-steps span { display: grid; place-items: center; width: 26px; height: 26px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--c-line); font-size: .8125rem; color: var(--c-ink-soft); transition: background-color var(--dur-fast), border-color var(--dur-fast); }
.ct-steps li[aria-current="step"] { color: var(--c-ink); }
.ct-steps li[aria-current="step"] span { border-color: var(--c-gold); color: var(--c-ink); }
.ct-steps li[data-kit-past] span { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-ink); }
.ct-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.ct-legend { margin: 0 0 18px; padding: 0; font: 800 var(--fs-h3)/1.2 var(--font-display); color: var(--c-ink); }
.ct-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ct-choice { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 18px 18px 18px 16px; border-radius: var(--radius-m); border: 1.5px solid var(--c-line); background: var(--c-paper); cursor: pointer; transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background-color var(--dur-fast); }
.ct-choice:hover { border-color: color-mix(in srgb, var(--c-gold) 70%, var(--c-line)); }
.ct-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ct-choice:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-gold) 60%, transparent); }
.ct-choice[data-kit-on] { border-color: var(--c-gold); background: color-mix(in srgb, var(--c-gold-soft) 36%, var(--c-paper)); }
/* the gold node: a ring that fills when its card is chosen */
.ct-choice__node { flex: none; width: 20px; height: 20px; margin-top: 2px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--c-gold); background: radial-gradient(circle, var(--c-gold) 0 4.5px, transparent 5px) 50% 50% / 0 0 no-repeat; transition: background-size var(--dur-fast) var(--ease-out); }
.ct-choice[data-kit-on] .ct-choice__node { background-size: 100% 100%; }
.ct-choice__text { display: grid; gap: 3px; }
.ct-choice__text b { font: 700 1.0625rem/1.25 var(--font-ui); color: var(--c-ink); }
.ct-choice__text span { font-size: .9375rem; line-height: 1.35; color: var(--c-ink-soft); }
.ct-field { display: grid; gap: 8px; margin-top: 18px; }
.ct-choices + .ct-field { margin-top: 20px; }
.ct-field label { font: 700 1rem/1.3 var(--font-ui); color: var(--c-ink); }
.ct-field label span { font-weight: 500; color: var(--c-ink-soft); }
.ct-field input, .ct-field textarea { width: 100%; min-height: 54px; padding: 13px 16px; box-sizing: border-box; border-radius: var(--radius-s); border: 1.5px solid var(--c-line); background: var(--c-paper); font: 500 1.0625rem/1.4 var(--font-ui); color: var(--c-ink); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.ct-field textarea { min-height: 120px; resize: vertical; }
.ct-field input::placeholder { color: color-mix(in srgb, var(--c-ink-soft) 80%, transparent); }
.ct-field input:focus, .ct-field textarea:focus { outline: none; border-color: var(--c-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-gold) 45%, transparent); }
.ct-field [data-kit-invalid], .ct-field [aria-invalid="true"] { border-color: #B42318; }
.ct-error { margin: 0; font: 600 .9375rem/1.35 var(--font-ui); color: #B42318; }
.ct-choices .ct-error { grid-column: 1 / -1; }
.ct-nav { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 26px; }
.ct-back { min-height: 48px; padding: 0 16px; border: 0; background: transparent; font: 700 1rem/1 var(--font-ui); color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-gold); text-decoration-thickness: 2px; text-underline-offset: 5px; cursor: pointer; }
.ct-card[data-kit-sending] button[type="submit"] { opacity: .7; pointer-events: none; }
.ct-quick { position: sticky; top: 112px; margin-top: 128px; padding: 30px 28px 28px; border-radius: var(--radius-l); background: var(--c-ink); color: var(--c-paper); box-shadow: var(--shadow-l); }
.ct-quick__nodes { width: 132px; height: 16px; margin-bottom: 16px; }
.ct-quick h3 { margin: 0; font-size: var(--fs-h3); color: var(--c-paper); }
.ct-quick p { margin: 12px 0 22px; font-size: 1.0625rem; line-height: 1.5; color: color-mix(in srgb, var(--c-paper) 86%, transparent); }
.ct-quick .btn { width: 100%; }

/* skip: the counter framed at the left, yourpart in glass over its shelves (his face at the right), the words at the right */
.ct-skip { overflow: hidden; }
.ct-skip__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.ct-skip__pic { position: relative; }
.ct-skip__frame { position: relative; overflow: hidden; height: 600px; border-radius: var(--radius-l); background: var(--c-navy-2); box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--c-black) 80%, transparent); }
.ct-skip__photo { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: 66% 40%; }
.ct-skip__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 42%, transparent) 0%, transparent 56%); }
.ct-skip__panel { position: absolute; z-index: 2; left: 24px; top: 50%; width: min(400px, 56%); transform: translateY(-50%); }
.ct-skip__scene { display: block; width: 100%; }
.ct-skip__stop { position: absolute; z-index: 3; top: 16px; left: 16px; }
.ct-skip__copy h2 { color: var(--c-paper); }
.ct-skip__copy p { max-width: 32ch; margin: 18px 0 30px; font-size: 1.1875rem; line-height: 1.55; color: color-mix(in srgb, var(--c-paper) 86%, transparent); }
.ct-skip__cta { display: flex; flex-direction: column; align-items: flex-start; }

@media (max-width: 1100px) {
  .ct-form__in { grid-template-columns: minmax(0, 1fr); }
  .ct-quick { position: static; margin-top: 0; }
  .ct-skip__in { grid-template-columns: minmax(0, 1fr); }
  .ct-skip__copy { order: -1; }
}

/* the phone: the words, the photo with his face in its top half, the thread over its lower part */
@media (max-width: 700px) {
  .ct-hero__pic { container-type: inline-size; }
  .ct-hero__frame { aspect-ratio: 4 / 5; }
  .ct-hero__photo { object-position: 92% 30%; }
  .ct-chat { position: relative; left: auto; top: auto; width: calc(100% - 24px); margin: -150px auto 0; }
  .ct-hero__stop { top: calc(125cqi - 206px); left: 12px; } /* just over the thread's top corner, under his face */
  .ct-choices { grid-template-columns: minmax(0, 1fr); }
  .ct-nav { justify-content: space-between; }
  .ct-skip__frame { height: 520px; }
  .ct-skip__photo { object-position: 91% 40%; }
  .ct-skip__frame::after { background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--c-ink) 50%, transparent) 100%); }
  .ct-skip__panel { position: relative; left: auto; top: auto; width: calc(100% - 24px); margin: -250px auto 0; transform: none; }
  .ct-skip__stop { top: 214px; left: 12px; } /* just over the panel's top corner, clear of his face */
}