/* Contact: the page header, the form on the rail with the barge beside its title,
   phone and email as a quiet contact block, then the reel.
   Layout, type and spacing come from the text-page system in site.css. */

.contact-page { --error: #ff9d8f; }

/* ---------- the form: title and film on the side, intro and fields on the rail ---------- */
.ask { grid-template-rows: auto 1fr; align-items: start; }
.ask__head { grid-row: 1; }
.ask__side { grid-row: 2; position: sticky; top: var(--space-l); margin-top: var(--space-l); }
.ask__main { grid-row: 1 / span 2; }
.ask__main > .ask__intro { max-width: 40ch; }
.ask__film { aspect-ratio: 4 / 5; overflow: hidden; }
.ask__film video { object-position: 34% 50%; }

.form { display: grid; gap: var(--space-l); margin-top: var(--space-xl); }
.form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.form legend { padding: 0; }
.form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-l) var(--gutter); }

/* S9: label at body size above, help text as meta under the label, then the field. */
.field { display: grid; gap: var(--space-xs); align-content: start; }
.field__label { display: block; font-weight: 500; }
.choice > .field__label, .needs > .field__label { margin-bottom: var(--space-xs); }
.field__opt { font-weight: 400; color: var(--muted); }
.field__hint { max-width: 52ch; }
.field__input {
  width: 100%; min-height: var(--field-h); padding: 0.75rem 0.9rem;
  font-size: max(1rem, var(--step-body)); line-height: 1.4;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 0;
  transition: border-color var(--t-hover) var(--ease-out), box-shadow var(--t-hover) var(--ease-out);
}
.field__input:hover { border-color: var(--water); }
.field__input:focus { outline: none; border-color: var(--water); box-shadow: inset 0 0 0 1px var(--water); }
.field__input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.field__area { min-height: 10rem; resize: vertical; }
.field__input[aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.field__error { color: var(--error); font-weight: 500; font-size: var(--step-small); }
.field__error::before { content: "! "; }

/* The request type: two equal options, each a radio row with its description as meta. */
.choice__options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-s); }
.choice__opt {
  position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-s); align-items: start;
  padding: var(--space-s); min-height: var(--field-h);
  background: var(--surface); border: 1px solid var(--line-strong); cursor: pointer;
  scroll-margin-top: var(--space-2xl);
  transition: border-color var(--t-hover) var(--ease-out), box-shadow var(--t-hover) var(--ease-out);
}
.choice__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.choice__opt::before {
  content: ""; grid-row: 1 / span 2; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem;
  border: 1px solid var(--muted); border-radius: 50%;
  transition: border-color var(--t-hover) var(--ease-out), box-shadow var(--t-hover) var(--ease-out);
}
.choice__name { font-weight: 500; }
.choice__desc { grid-column: 2; font-size: var(--step-small); line-height: 1.45; color: var(--muted); }
.choice__opt:hover { border-color: var(--water); }
.choice__opt:has(input:checked) { border-color: var(--water); box-shadow: inset 0 0 0 1px var(--water); }
.choice__opt:has(input:checked)::before { border-color: var(--water); box-shadow: inset 0 0 0 0.3rem var(--surface), inset 0 0 0 1rem var(--water); }
.choice__opt:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; z-index: 1; }

/* What needs work: equal chips in a grid, a checkbox and a name each. */
.needs__options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: var(--space-xs); }
.needs__options label {
  display: flex; align-items: center; gap: var(--space-s); min-height: var(--field-h); padding: var(--space-xs) var(--space-s);
  background: var(--surface); border: 1px solid var(--line-strong); cursor: pointer; line-height: 1.25;
  transition: border-color var(--t-hover) var(--ease-out), box-shadow var(--t-hover) var(--ease-out);
}
.needs__options label:hover { border-color: var(--water); }
.needs__options label:has(input:checked) { border-color: var(--water); box-shadow: inset 0 0 0 1px var(--water); }
.needs__options label:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.needs__options input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--water); cursor: pointer; }
.needs__options input:focus-visible { outline: none; }

/* Send: the one yellow action, the small print under it. */
.form__send { display: grid; justify-items: start; gap: var(--space-s); margin-top: var(--space-xs); }
.form__btn { min-height: 56px; padding-inline: 1.6rem; margin-bottom: var(--space-2xs); }
.form__btn[disabled] { opacity: 0.6; cursor: progress; }
.form__send .meta { max-width: var(--measure); }

.status:has(.status__msg:empty) { display: none; }
.status { padding: var(--space-m); background: var(--surface); border-left: 3px solid var(--water); }
.status__msg { font-weight: 500; }
.status[data-state="error"] { border-left-color: var(--error); }
.status__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-m); margin-top: var(--space-s); }
.status__btn {
  min-height: 48px; padding: 0.7rem 1.1rem; font-weight: 500;
  background: var(--ink); color: var(--bg);
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) var(--ease-out);
}
.status__btn:hover { background: #ffffff; }
.status__btn:active { transform: translateY(1px) scale(0.98); }
.status__link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }

/* ---------- phone and email: two equal items on the rail, a hairline over each ---------- */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m) var(--gutter); }
.way {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--space-2xs) var(--space-s);
  min-height: 44px; padding-top: var(--space-s); border-top: 1px solid var(--line-strong);
  text-decoration: none;
  transition: border-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out);
}
.way__label { grid-column: 1 / -1; }
.way__value { font-size: var(--step-lead); line-height: 1.25; font-weight: 500; overflow-wrap: anywhere; }
.way__go { color: var(--water); line-height: 1.25; font-size: var(--step-lead); transition: transform var(--t-hover) var(--ease-out); }
a.way:hover { border-top-color: var(--water); color: var(--water); }
a.way:hover .way__go { transform: translateX(6px); }

/* ---------- the reel: photos from the jobs, one strip that scrolls sideways ---------- */
.reel { padding-block: var(--space-xl); }
.reel .reel__track {
  display: flex; gap: var(--space-s);
  height: 64vh; height: 64svh; min-height: 360px; max-height: 760px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--margin);
  padding-inline: var(--margin);
  scrollbar-width: none;
}
.reel__track::-webkit-scrollbar { display: none; }
.reel__track:focus-visible { outline-offset: -3px; }
.reel__slide { flex: none; height: 100%; scroll-snap-align: start; }
.reel__slide img { height: 100%; width: auto; max-width: none; object-fit: cover; }
/* The bar sits on the rail: the count on the side, progress and arrows on the main line. */
.reel__bar { align-items: center; margin-top: var(--space-m); }
.reel__count { grid-column: 1 / span 4; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); }
.reel__count span { color: var(--ink); }
.reel__progress { grid-column: 5 / span 6; height: 2px; background: var(--line); overflow: hidden; }
.reel__progress span { display: block; height: 100%; background: var(--water); transform-origin: left; transform: scaleX(0); transition: transform 300ms var(--ease-out); }
.reel__nav { grid-column: 11 / -1; justify-self: end; display: flex; gap: var(--space-xs); }
.reel__btn {
  display: grid; place-items: center; width: 48px; height: 48px;
  border: 1px solid var(--line-strong); color: var(--ink); font-size: 1.25rem;
  transition: border-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), opacity var(--t-hover) var(--ease-out);
}
.reel__btn:hover:not(:disabled) { border-color: var(--water); color: var(--water); }
.reel__btn:disabled { opacity: 0.3; cursor: default; }
/* Without the script there is nothing to drive the bar, so it stays hidden. */
.reel:not(.is-live) .reel__bar { display: none; }

@media (max-width: 860px) {
  /* S10: one column, in reading order: title, intro, form, then the film. */
  .ask { grid-template-rows: none; }
  .ask__head, .ask__main, .ask__side { grid-row: auto; }
  .ask__side { position: relative; top: auto; margin-top: var(--space-xl); }
  .ask__film { aspect-ratio: 4 / 3; }
  .form { margin-top: var(--space-l); }
  .field__error { font-size: 16px; }
  .ways { grid-template-columns: 1fr; }
  .reel .reel__track { height: 58vh; height: 58svh; min-height: 300px; gap: var(--space-xs); }
  .reel__slide { max-width: 86vw; }
  .reel__slide img { width: 100%; }
  /* Too narrow for the rail's columns: count, progress and arrows share one row. */
  .reel__bar { display: flex; gap: var(--gutter); }
  .reel__progress { flex: 1; }
}

@media (max-width: 560px) {
  .choice__options, .form__pair { grid-template-columns: 1fr; }
  .form__btn { width: 100%; justify-self: stretch; }
  .form__send { justify-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .way, .way__go, .field__input, .choice__opt, .choice__opt::before, .needs__options label, .status__btn, .reel__btn, .reel__progress span { transition: none; }
}

/* The film's pause control sits in the frame's corner. */
.ask__film { position: relative; }