/* ==========================================================================
   VyroPlus — contact page (DESIGN.md §7.4, §5.12, §5.5 compact reg-block).
   Extends shared classes from css/style.css; never redefines them.
   Text colours: --text-* tokens only.
   ========================================================================== */

/* ---------- Layout: form card + aside (1.1fr .9fr, 1 col ≤ 900) ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--gap);align-items:start}
.form-card{max-width:var(--w-form)}
.contact-aside{display:grid;gap:var(--gap);align-content:start;min-width:0}
@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr}
  .form-card{max-width:none}
}

/* ---------- Hero: the self-drawing mark (§6.2) sits in the band's otherwise empty right column ---------- */
@media (min-width:981px){
  .hero--contact .hero-grid{grid-template-columns:1fr}
  /* ~215 x 293px at most: the band holds only eyebrow/h1/lead, so a taller mark ran up behind the header CTA and was
     sliced by the band's bottom edge. This size clears both from 1024 to 1920. */
  .hero--contact .hero-mark{width:min(17%,215px);right:4%}
}

/* ---------- Form card head ---------- */
.form-head{margin-bottom:clamp(20px,3vw,32px)}
.form-head[hidden]{display:none} /* hidden by contact.js once the success state replaces the form */
.form-head h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-top:.55rem;max-width:none}
.form-intro{margin-top:.6rem;font-size:var(--fs-small);color:var(--text-2);max-width:52ch}

/* ---------- Fields ---------- */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--gap);align-items:start} /* start: a hint under one field must not stretch the other's input */
.field label{display:inline-block}
.field .field-error{margin:0}
.form-submit{min-width:200px}
.form-submit .btn-label{line-height:1}
.form-note{margin-top:1rem;font-size:var(--fs-small);color:var(--text-2);background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--g1);border-radius:var(--r-sm);padding:.9rem 1rem}
@media (max-width:560px){
  .form-row{grid-template-columns:1fr}
  .form-submit{min-width:0}
}

/* ---------- Success state (§5.12) ---------- */
.form-success p{color:var(--text-2);max-width:44ch}
.form-success h2{max-width:22ch;outline-offset:6px}
.form-success .btn{margin-top:.25rem}

/* ---------- Aside: addresses + "What happens next" ---------- */
.aside-cell{display:grid;gap:1.25rem}
.aside-h{max-width:none;text-wrap:auto}
.addr-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.addr{display:grid;gap:.55rem;align-content:start}
.addr .ico{width:44px;height:44px;border-radius:var(--r-sm);border-top-right-radius:var(--r-drop);background:var(--tint);color:var(--text-green);display:grid;place-items:center;margin-bottom:.2rem}
.addr .ico svg{width:22px;height:22px}
.addr address,.addr-hours{font-size:.95rem;line-height:1.6;color:var(--text-2);margin:0}
/* phones, e-mail and hours (added 18 Sep 2026) */
.addr-list{list-style:none;margin:0;padding:0;display:grid;font-size:.95rem;color:var(--text-2)}
.addr-list li{display:flex;align-items:center;gap:.5rem;min-height:44px;margin:-.35rem 0}
.addr-list .k{color:var(--text-3);min-width:3.4rem}
.addr-list a{color:var(--text);font-weight:600;text-decoration:underline;text-decoration-color:var(--g1);text-decoration-thickness:2px;text-underline-offset:3px;overflow-wrap:anywhere}
.addr-list a:hover{color:var(--text-green)}
.aside-cell > .caption{margin-top:-.25rem}
.next ol{list-style:none;counter-reset:step;margin:.15rem 0 0;padding:0;display:grid;gap:.55rem}
.next li{counter-increment:step;display:flex;gap:.7rem;align-items:flex-start;font-size:var(--fs-small);line-height:1.5;color:var(--text-2)}
.next li::before{content:counter(step,decimal-leading-zero);flex:none;font-size:var(--fs-tag);font-weight:800;letter-spacing:.08em;color:var(--text-green);line-height:1;padding:.32rem .45rem;border-radius:var(--r-xs);background:var(--tint)}
@media (max-width:480px){.addr-grid{grid-template-columns:1fr}}

/* ---------- Regulatory block, compact variant (§5.5) ---------- */
.reg-block--compact{gap:1.1rem}
.reg-block--compact .reg-rows{grid-template-columns:1fr;gap:.9rem}
.reg-block--compact .reg-rows > div + div{padding-top:.9rem;border-top:1px solid var(--line-on-dark)}
.reg-block--compact .reg-v{font-size:clamp(1.55rem,2.4vw,2.05rem);margin-top:.4rem}
.reg-block--compact .reg-line{padding-top:1rem;border-top:1px solid var(--line-on-dark)}
.reg-block--compact .wm{right:-10%;bottom:-14%;width:240px}