/* ============================================================
   DJ VOCKA — contact
   Same room. On this page usability wins every tie.
   ============================================================ */
.c-main{ position:relative; z-index:2; }
.c-wrap{ display:grid; min-height:100svh; }
@media(min-width:1000px){ .c-wrap{ grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); } }

/* ── left: the form ── */
.c-form-col{ padding:calc(var(--gut) + 5.2rem) var(--gut) calc(var(--gut) + 5.4rem); }
.c-head{ max-width:40ch; }
.c-title{
  font-family:var(--f-display); font-variation-settings:'wdth' 132,'wght' 900;
  font-size:clamp(40px,5.4vw,78px); line-height:.88; text-transform:uppercase;
  letter-spacing:-.036em; margin:.8rem 0 1.1rem; max-width:15ch;
}
body.lang-km .c-title{ font-family:var(--f-khmer); font-weight:700; text-transform:none;
  letter-spacing:0; line-height:1.3; font-size:clamp(28px,4.8vw,62px); max-width:18ch; }
.c-lede{ color:var(--bone-dim); font-size:clamp(14px,1.2vw,16.5px); line-height:1.66; max-width:46ch; }
body.lang-km .c-lede{ font-family:var(--f-khmer); line-height:1.9; max-width:40ch; }

form.inquiry{ margin-top:clamp(30px,5.5vh,58px); max-width:680px; }
.f-grid{ display:grid; gap:clamp(15px,2vw,24px); grid-template-columns:minmax(0,1fr); }
@media(min-width:620px){ .f-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .f-wide{ grid-column:1/-1; } }

.field{ position:relative; display:block; }
.field > .lab{
  display:block; font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-dim); margin-bottom:.55rem;
}
body.lang-km .field > .lab{ letter-spacing:0; text-transform:none; font-size:12px; font-family:var(--f-khmer); }
.field .req{ color:var(--accent); }
.field input, .field select, .field textarea{
  width:100%; background:rgba(12,12,18,.72); color:var(--bone);
  box-shadow:inset 0 0 0 1px var(--ink-3); border:0; border-radius:0;
  padding:1rem 1.05rem; font-size:15.5px; font-family:inherit; font-weight:400;
  transition:box-shadow .3s var(--e-out), background .3s var(--e-out);
  appearance:none; -webkit-appearance:none;
}
body.lang-km .field input, body.lang-km .field select, body.lang-km .field textarea{ font-family:var(--f-khmer); }
.field textarea{ min-height:140px; resize:vertical; line-height:1.6; }
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--bone-dim) 50%),
                   linear-gradient(135deg,var(--bone-dim) 50%,transparent 50%);
  background-position:calc(100% - 21px) 50%, calc(100% - 15px) 50%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat; padding-right:2.8rem;
}
.field input:hover, .field select:hover, .field textarea:hover{
  box-shadow:inset 0 0 0 1px var(--ink-4); background:rgba(20,20,28,.8); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; box-shadow:inset 0 0 0 1px var(--accent), 0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent);
  background:rgba(20,20,28,.9); }
.field input::placeholder, .field textarea::placeholder{ color:var(--bone-mute); opacity:1; }
.field .err{ display:none; margin-top:.5rem; font-size:11.5px; color:#FF7A7A; }
.field.invalid input, .field.invalid select, .field.invalid textarea{
  box-shadow:inset 0 0 0 1px #FF7A7A; }
.field.invalid .err{ display:block; }

.f-actions{ display:flex; flex-wrap:wrap; gap:13px; align-items:center; margin-top:clamp(24px,4vh,38px); }
.f-note{ font-size:11.5px; color:var(--bone-mute); line-height:1.6; max-width:50ch; margin-top:1.2rem; }
body.lang-km .f-note{ font-family:var(--f-khmer); line-height:1.85; font-size:12.5px; }

/* ── review: no server, so be honest and useful ── */
.review{ margin-top:clamp(26px,4.5vh,44px); padding:clamp(20px,3vw,30px);
  background:rgba(12,12,18,.86); box-shadow:inset 0 0 0 1px var(--accent); }
.review[hidden]{ display:none; }
.review h2{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  margin-bottom:1rem; font-weight:700; }
body.lang-km .review h2{ letter-spacing:0; text-transform:none; font-size:13px; }
.review pre{
  font-family:var(--f-mono); font-size:12.5px; line-height:1.75; color:var(--bone-dim);
  white-space:pre-wrap; word-break:break-word; margin:0 0 1.3rem;
  max-height:240px; overflow:auto; background:rgba(6,6,10,.8); padding:1.05rem;
  box-shadow:inset 0 0 0 1px var(--ink-2);
}
.review .row{ display:flex; flex-wrap:wrap; gap:11px; align-items:center; }
.copied{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }

/* ── right: media + direct ── */
.c-side{ position:relative; display:grid; grid-template-rows:1fr auto;
  background:rgba(10,10,16,.42); box-shadow:inset 1px 0 0 rgba(244,241,235,.07); }
.c-media{ position:relative; overflow:hidden; min-height:46svh; }
.c-media video, .c-media img{ width:100%; height:100%; object-fit:cover;
  filter:saturate(1.08) contrast(1.08); }
.c-media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg,rgba(6,6,10,.34),transparent 30%,rgba(6,6,10,.84)),
    radial-gradient(80% 60% at 50% 0%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 62%);
}
.c-media figcaption{
  position:absolute; left:var(--gut); bottom:1.1rem; z-index:2; display:flex; align-items:center; gap:.5rem;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim);
}
.c-media figcaption::before{ content:''; width:5px; height:5px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 10px var(--glow); }
.c-direct{ padding:clamp(26px,4vw,46px) var(--gut) calc(var(--gut) + 5.6rem); }
.c-direct h2{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--bone-mute); font-weight:600; }
body.lang-km .c-direct h2{ letter-spacing:0; text-transform:none; font-size:12.5px; }
.c-links{ display:grid; gap:2px; margin-top:1.3rem; }
.c-link{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:1.15rem 0; border-bottom:1px solid rgba(244,241,235,.10);
  transition:padding-left .45s var(--e-out), color .3s, border-color .3s;
}
.c-link:hover{ padding-left:.8rem; color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.c-link .k{ font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--bone-mute); }
body.lang-km .c-link .k{ letter-spacing:0; text-transform:none; font-size:11.5px; }
.c-link .v{ font-family:var(--f-display); font-variation-settings:'wdth' 110,'wght' 700;
  font-size:clamp(18px,2.3vw,28px); }
.c-hours{ margin-top:1.5rem; font-size:11.5px; color:var(--bone-mute); line-height:1.7; max-width:42ch; }
body.lang-km .c-hours{ font-family:var(--f-khmer); line-height:1.9; font-size:12.5px; }

@media(max-width:1000px){
  .c-side{ grid-template-rows:auto auto; box-shadow:inset 0 1px 0 rgba(244,241,235,.07); }
  .c-media{ min-height:40svh; }
  .c-form-col{ padding-bottom:clamp(30px,6vh,60px); }
}

@media (pointer: coarse){
  .c-link{ padding-block:1.35rem; }
  .review .row .cta{ min-height:46px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Never trapped: the mark goes home, and so does this.
   ══════════════════════════════════════════════════════════════════════ */
.c-back{
  display:inline-flex; align-items:center; gap:.7rem;
  min-height:44px; padding-right:.6rem;          /* a real tap target */
  margin:0 0 clamp(14px,2.6vh,28px) 0;
  font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-mute); transition:color .3s var(--e-out), gap .35s var(--e-out);
}
.c-back svg{ width:22px; height:9px; flex:none; overflow:visible; }
.c-back:hover{ color:var(--accent); gap:1rem; }
body.lang-km .c-back{ letter-spacing:0; text-transform:none; font-size:12.5px; font-family:var(--f-khmer); }

/* ══════════════════════════════════════════════════════════════════════
   Small screens: usable first. Nothing touches an edge, fields are the
   height of a thumb rather than the height of a headline.
   ══════════════════════════════════════════════════════════════════════ */
@media(max-width:700px){
  .c-form-col{ padding:calc(var(--gut) + 4.4rem) calc(var(--gut) + 4px) clamp(34px,6vh,56px); }
  .c-title{ font-size:clamp(34px,10.4vw,50px); max-width:12ch; }
  .c-lede{ font-size:14.5px; line-height:1.7; max-width:none; }
  form.inquiry{ margin-top:clamp(22px,4vh,34px); }
  .f-grid{ gap:14px; }
  .field input, .field select, .field textarea{ padding:.86rem .95rem; font-size:16px; }
  .field textarea{ min-height:118px; }
  .field > .lab{ margin-bottom:.42rem; }
  .f-actions{ gap:10px; margin-top:26px; }
  .f-actions .cta{ width:100%; justify-content:space-between; }
  .c-direct{ padding:clamp(24px,5vw,34px) calc(var(--gut) + 4px) calc(var(--gut) + 5.6rem); }
  .c-media{ min-height:34svh; }
  .c-media figcaption{ left:calc(var(--gut) + 4px); }
  .review{ padding:16px; }
  .review pre{ font-size:11.5px; padding:.85rem; max-height:200px; }
  .review .row .cta{ width:100%; justify-content:center; }
}
@media(max-width:380px){
  .c-title{ font-size:clamp(30px,9.6vw,40px); }
  .field input, .field select, .field textarea{ font-size:15.5px; }
  .c-link .v{ font-size:17px; }
}

/* ══════════════ FINAL MICRO-POLISH — contact title ══════════════ */
/* i18n already supplies exactly two lines; never let either English line split again. */
.c-title .rv > span{ white-space:nowrap; }
@media(min-width:701px){
  .c-head{ max-width:min(52ch,100%); }
  .c-title{ max-width:none; }
}