/* ============================================================
   ATA DALA PRODUCTION — «ANAMORPHOT» (dark, red accent)
   pages/contact.css — styles for ONE page: contact.html.
   Load AFTER layout.css.
   No raw #hex, no px type sizes, no numeric durations — tokens only.
   Mechanics ported from the anamorphot reference (contacts.css):
   left-hugged dark hero, a form with live validation that cuts to a
   success frame, and a stylised cinemascope location frame (no
   external map — a real Almaty photo with graphic overlay + letterbox).
   ============================================================ */

/* ============================================================
   1. HERO — dark screen, everything hugged left
   ============================================================ */

.ct-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  /* Header floats over the hero — start below it */
  padding-block: calc(var(--sp-12) + var(--sp-8)) var(--sp-10);
}

/* Anamorphic flare: an anamorphic lens always streaks horizontally.
   Static decor, nothing animates. */
.ct-hero__flare {
  position: absolute;
  left: calc(var(--sp-12) * -1);
  top: 44%;
  width: min(150%, 92rem);
  height: var(--sp-10);
  pointer-events: none;
  z-index: var(--z-base);
  background:
    linear-gradient(90deg,
      transparent,
      color-mix(in srgb, var(--c-accent) 16%, transparent) 34%,
      color-mix(in srgb, var(--c-accent) 26%, transparent) 50%,
      color-mix(in srgb, var(--c-accent) 16%, transparent) 66%,
      transparent);
  filter: blur(var(--sp-8));
  opacity: 0.55;
}

.ct-hero__in {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
}

.ct-hero__kicker { color: var(--c-muted); }

/* The CTA headline — large, in text colour (body copy is never red) */
.ct-hero__h {
  margin-top: var(--sp-6);
  max-width: 16ch;
}

/* The wrap is the sizing container for the address below: the column has
   its own width (≈655px at 2560), so a viewport-based font-size overshoots
   it and the address wraps mid-token ("…mail.r / u"). */
.ct-hero__mail-wrap { container-type: inline-size; }

/* The single element set large in the accent: the email line.
   "arslanfilm13@gmail.com" measures 11.55em wide, so 8.2cqw keeps it on one line
   inside its own column at every width, and the address is never broken. */
.ct-mail {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin-top: var(--sp-8);
  font-size: min(var(--fs-mail), 8.2cqw);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-display);
  color: var(--c-accent);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* Underline — a left-to-right splice, not a slide-in */
.ct-mail::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0.06em;
  width: 100%;
  height: var(--bw);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-cut) var(--e-cut);
}

.ct-mail:hover::after,
.ct-mail:focus-visible::after { transform: scaleX(1); }

.ct-tels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-9);
  margin-top: var(--sp-6);
  list-style: none;
}

.ct-tel {
  display: inline-block;
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-h1);
  line-height: var(--lh-h1);
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color var(--d-fast) var(--e-ease);
}

.ct-tel:hover,
.ct-tel:focus-visible { color: var(--c-accent); }

.ct-hero__lead {
  margin-top: var(--sp-7);
  color: var(--c-muted);
  max-width: var(--measure);
}

.ct-hero__rule { margin-top: var(--sp-10); }

/* --- Facts grid 4×1 ------------------------------------- */

.ct-facts {
  margin-top: var(--sp-7);
  list-style: none;
}

.ct-fact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: var(--border);
  transition: border-color var(--d-fast) var(--e-ease);
}

.ct-fact:hover { border-top-color: var(--c-line-strong); }

.ct-fact__key { color: var(--c-muted); }

.ct-fact__val {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-h3);
  line-height: var(--lh-h3);
  color: var(--c-text);
  max-width: 100%;
}

.ct-fact__sub {
  color: var(--c-muted);
  line-height: 1.5;
  text-transform: none;
  letter-spacing: var(--tr-body);
}

@media (max-width: 900px) {
  .ct-hero { padding-block: calc(var(--sp-11) + var(--sp-6)) var(--sp-9); }
}

/* Phone numbers are unbreakable: on 360 the size, not wrapping, holds them */
@media (max-width: 560px) {
  .ct-tel { font-size: var(--fs-h2); letter-spacing: var(--tr-h2); }
}

/* ============================================================
   2. FORM
   ============================================================ */

.ct-form-sec__in {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 44rem);
  gap: var(--sp-10) var(--sp-11);
  align-items: start;
}

.ct-form-sec__aside h2 { color: var(--c-muted); }

.ct-form-sec__note {
  margin-top: var(--sp-5);
  font-size: var(--fs-small);
  line-height: 1.6;
}

.ct-steps {
  margin-top: var(--sp-7);
  list-style: none;
  border-top: var(--border);
}

.ct-step {
  display: grid;
  grid-template-columns: var(--sp-7) 1fr;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  border-bottom: var(--border);
  font-size: var(--fs-small);
  color: var(--c-muted);
  line-height: 1.5;
}

.ct-step b {
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-label);
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}

/* --- Fields --------------------------------------------- */

.ct-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7) var(--sp-5);
}

.ct-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}

.ct-field--wide { grid-column: 1 / -1; }

.ct-field__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
}

.ct-field__label {
  color: var(--c-muted);
  transition: color var(--d-fast) var(--e-ease);
}

.ct-field:focus-within .ct-field__label { color: var(--c-accent); }
.ct-field.is-bad .ct-field__label { color: var(--c-text); }

.ct-counter {
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

/* A field is a lined surface, not a rounded chip. */
.ct-input {
  width: 100%;
  min-height: 44px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--r-0);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-h3);
  line-height: var(--lh-h3);
  transition: border-color var(--d-fast) var(--e-ease),
              background var(--d-fast) var(--e-ease);
}

.ct-input::placeholder {
  color: var(--c-muted);
  font-size: var(--fs-body);
  letter-spacing: var(--tr-body);
  opacity: 1;
}

.ct-input:hover { border-color: var(--c-line-strong); }

.ct-input:focus-visible {
  outline: none;
  background: var(--c-surface-2);
  border-color: var(--c-accent);
  box-shadow: inset 0 0 0 1px var(--c-accent);
}

/* Error — not a red plate, but a text-coloured border + label */
.ct-field.is-bad .ct-input { border-color: var(--c-text); }
.ct-field.is-ok .ct-input  { border-color: var(--c-accent-dim); }

.ct-input--area {
  min-height: 10rem;
  resize: vertical;
  line-height: 1.45;
}

/* Select: our own marker, system arrow removed */
.ct-select { position: relative; }

.ct-input--select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--sp-9);
  cursor: pointer;
}

.ct-input--select option {
  background: var(--c-surface-2);
  color: var(--c-text);
}

/* Marker — two converging strokes, a letterbox in miniature */
.ct-select__mark {
  position: absolute;
  right: var(--sp-4);
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -6px;
  pointer-events: none;
  border-right: var(--bw) solid var(--c-muted);
  border-bottom: var(--bw) solid var(--c-muted);
  transform: rotate(45deg);
  transition: border-color var(--d-fast) var(--e-ease);
}

.ct-select:focus-within .ct-select__mark { border-color: var(--c-accent); }

.ct-field__err {
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--c-text);
  display: none;
}

.ct-field.is-bad .ct-field__err { display: block; }

.ct-field__err::before {
  content: '';
  display: inline-block;
  width: var(--sp-3);
  height: var(--bw);
  margin-right: var(--sp-2);
  vertical-align: middle;
  background: var(--c-accent);
}

/* --- Checkbox ------------------------------------------- */

.ct-check {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--sp-4);
  cursor: pointer;
}

.ct-check__box {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ct-check__mark {
  position: relative;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  flex: 0 0 auto;
  background: var(--c-surface);
  border: var(--border-strong);
  border-radius: var(--r-0);
  transition: border-color var(--d-fast) var(--e-ease),
              background var(--d-fast) var(--e-ease);
}

/* Tick — a frame within a frame: the fill splices from the centre */
.ct-check__mark::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: var(--c-accent);
  clip-path: inset(50%);
  transition: clip-path var(--d-cut) var(--e-cut);
}

.ct-check:hover .ct-check__mark { border-color: var(--c-accent); }

.ct-check__box:checked + .ct-check__mark { border-color: var(--c-accent); }
.ct-check__box:checked + .ct-check__mark::after { clip-path: inset(0); }

.ct-check__box:focus-visible + .ct-check__mark {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

.ct-check__text {
  font-size: var(--fs-small);
  color: var(--c-muted);
  line-height: 1.6;
  max-width: 56ch;
}

.ct-field.is-bad .ct-check__mark { border-color: var(--c-text); }

.ct-form__foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-5);
  padding-top: var(--sp-3);
}

.ct-form__status {
  color: var(--c-muted);
  text-transform: none;
  letter-spacing: var(--tr-body);
  font-size: var(--fs-small);
}

/* --- Success -------------------------------------------- */

.ct-form-wrap { position: relative; min-width: 0; }

.ct-done {
  padding: var(--sp-9) var(--sp-8);
  background: var(--c-surface);
  border: var(--border);
  border-left: 2px solid var(--c-accent);
}

/* Cuts in from below — like the next frame in an edit */
@media not (prefers-reduced-motion: reduce) {
  .js .ct-done {
    clip-path: inset(100% 0 0 0);
    transition: clip-path var(--d-cut) var(--e-cut);
  }
  .js .ct-done.is-in { clip-path: inset(0); }
}

.ct-done__kicker { color: var(--c-accent); }

.ct-done__title {
  margin-top: var(--sp-4);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-h2);
  line-height: var(--lh-h2);
  color: var(--c-text);
}

.ct-done__text {
  margin-top: var(--sp-5);
  color: var(--c-muted);
  max-width: 52ch;
}

.ct-done__mail {
  color: var(--c-text);
  overflow-wrap: anywhere;
}

/* Four film perforations — a quiet signature under the success */
.ct-done__marks {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-7);
}

.ct-done__marks span {
  width: var(--sp-6);
  height: var(--sp-3);
  background: var(--c-letterbox);
  border: var(--border);
}

.ct-done__again { margin-top: var(--sp-7); }

@media (max-width: 1100px) {
  .ct-form-sec__in { grid-template-columns: 1fr; gap: var(--sp-9); }
}

@media (max-width: 640px) {
  .ct-form { grid-template-columns: 1fr; }
  .ct-done { padding: var(--sp-7) var(--sp-5); }
}

/* ============================================================
   3. LOCATION — a 2.39:1 cinemascope frame, not a map.
   No external maps: a real Almaty photo with graphic overlay,
   letterbox bars and registration marks laid over it in HTML,
   so type never scales with the frame.
   ============================================================ */

.ct-loc__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding-bottom: var(--sp-6);
}

.ct-loc__head h2 { color: var(--c-muted); }

.ct-loc__legend {
  font-size: var(--fs-small);
  max-width: 42ch;
}

.ct-loc__frame {
  position: relative;
  isolation: isolate;
  border-block: var(--border);
}

/* The photo is texture, not a subject: dim it to a backdrop */
.ct-loc__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.35) contrast(1.08);
  opacity: 0.62;
  z-index: var(--z-frame);
}

/* Scrim to keep the tags legible */
.ct-loc__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-scrim);
  pointer-events: none;
  background:
    radial-gradient(120% 92% at 62% 44%, transparent, var(--c-scrim) 82%);
}

/* Letterbox bars drawn inside the frame — the scope signature */
.ct-loc__bar {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--sp-6);
  z-index: var(--z-letterbox);
  background: var(--c-letterbox);
  pointer-events: none;
}

.ct-loc__bar--top    { top: 0; }
.ct-loc__bar--bottom { bottom: 0; }

/* Crosshair reticle + pin, in the accent — the "we are here" mark */
.ct-loc__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-content);
  pointer-events: none;
}

.ct-loc__reticle {
  fill: none;
  stroke: var(--c-text);
  stroke-width: 1;
  opacity: 0.5;
}

.ct-loc__pin-ring {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 1.5;
}

.ct-loc__pin-dot { fill: var(--c-accent); }

.ct-loc__pin-halo {
  fill: var(--c-accent-ghost);
  stroke: var(--c-accent-dim);
  stroke-width: 1;
}

/* --- Tags over the frame -------------------------------- */

.ct-loc__tag {
  position: absolute;
  z-index: var(--z-content);
  left: var(--x);
  top: var(--y);
  padding: var(--sp-1) var(--sp-2);
  background: color-mix(in srgb, var(--c-bg) 72%, transparent);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  line-height: 1.35;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-muted);
  pointer-events: none;
  white-space: nowrap;
}

.ct-loc__tag b {
  font-weight: var(--fw-semi);
  color: var(--c-text);
}

.ct-loc__tag.is-accent b { color: var(--c-accent); }

.ct-loc__tag--tl  { transform: translate(0, 0); }
.ct-loc__tag--tr  { transform: translate(-100%, 0); }
.ct-loc__tag--br  { transform: translate(-100%, -100%); }
.ct-loc__tag--pin { transform: translate(var(--sp-4), calc(-100% - var(--sp-2))); }

.ct-loc__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-5);
  color: var(--c-muted);
}

.ct-loc__cap-k {
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-accent-ink);
}

.ct-loc__cap-v { color: var(--c-text); }

/* --- Location facts under the frame --------------------- */

.ct-loc__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6) var(--sp-8);
  margin-top: var(--sp-9);
}

.ct-loc__fact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: var(--border);
}

.ct-loc__fact-k {
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-muted);
}

.ct-loc__fact-v {
  color: var(--c-text);
  line-height: 1.5;
  max-width: 32ch;
}

@media (max-width: 768px) {
  /* The 2.39:1 concept stays, but drop the busy secondary tag */
  .ct-loc__tag--br { display: none; }
  .ct-loc__facts { grid-template-columns: 1fr; }
}

/* ============================================================
   СОЦСЕТИ — Instagram под телефонами. Иконка нарисована inline-SVG
   (никаких внешних иконочных шрифтов), цвет наследуется от ссылки.
   ============================================================ */
.ct-social { margin-top: var(--sp-6); }

.ct-social__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  transition: color var(--d-fast) var(--e-ease);
}

.ct-social__icon { flex: 0 0 auto; }

.ct-social__link:hover,
.ct-social__link:focus-visible { color: var(--c-accent-ink); }

/* Пометка WhatsApp у третьего номера */
.ct-tels__wa {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.ct-wa-badge {
  display: inline-block;
  padding: 0.15em var(--sp-3);
  border: var(--bw) solid var(--c-accent);
  color: var(--c-accent-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  white-space: nowrap;
}