/* ====================================================================
   CONTACT PAGE STYLES — assets/css/contact.css   v2 · 2026-07
   --------------------------------------------------------------------
   Page-specific components for contact.html ONLY. Loads AFTER
   assets/css/styles.css; brand tokens only (read that header first).
   Components:

     .ct-hero    compact page hero — kept short so the form enters the
                 first viewport (conversion page: the page IS the CTA)
     .ct-quick   contact chips under the hero (WhatsApp / email / cities)
     .ct-grid    the conversion split: pitch left · form card right
     .ct-steps   "what happens next" numbered rail (01/02/03)
     .ct-alt     the WhatsApp-first alternative card
     .ct-card    white form card (sticky on desktop)
     .bc-*       AI booking chat, on the brand system. SAME ids/classes
                 so the /chat wiring in contact.html is untouched.

   Everything degrades gracefully: nothing depends on JS to be visible,
   sticky falls back to static, decorative motion is motion-safe only.
   ==================================================================== */

/* ---------- 1 · PAGE HERO (compact — form must peek into viewport 1) */
.ct-hero{padding-block:calc(72px + clamp(48px,7vw,80px)) clamp(30px,5vw,48px)}
.ct-hero h1{max-width:20ch}

/* contact chips: every channel visible before anyone scrolls */
.ct-quick{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ct-chip{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--card);color:var(--body);font-size:.88rem;font-weight:500;
  transition:border-color .2s,color .2s}
a.ct-chip:hover{border-color:var(--input);color:var(--ink)}
.ct-chip svg{width:16px;height:16px;color:var(--current-dark);flex:0 0 auto}
.ct-chip.is-wa svg{color:var(--wa)}

/* ---------- 2 · CONVERSION SPLIT (pitch · form) ---------- */
.ct-main{padding-block:clamp(28px,4vw,56px) var(--sp-section);scroll-margin-top:86px}
.ct-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,72px);align-items:start}
.ct-pitch h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-top:14px}
.ct-sub{color:var(--slate);margin-top:16px;font-size:1.03rem;max-width:52ch}

/* what-happens-next rail: 01/02/03 mono numbers, hairline rows */
.ct-steps{list-style:none;counter-reset:ct;margin-top:32px}
.ct-step{display:grid;grid-template-columns:46px 1fr;gap:16px;align-items:start;
  padding:20px 0;border-top:1px solid var(--line)}
.ct-step:last-child{border-bottom:1px solid var(--line)}
.ct-step::before{counter-increment:ct;content:"0" counter(ct);
  font-family:var(--font-m);font-size:.92rem;font-weight:600;line-height:1.7;color:var(--current-dark)}
.ct-step h3{font-size:1.1rem}
.ct-step p{color:var(--slate);font-size:.92rem;margin-top:6px;max-width:48ch}

/* WhatsApp-first alternative (this market books on WhatsApp) */
.ct-alt{margin-top:32px;padding:24px 26px;border-radius:var(--r);
  border:1px solid var(--mint-brd);background:var(--mint)}
.ct-alt h3{font-size:1.08rem}
.ct-alt>p{color:var(--body);font-size:.92rem;margin-top:6px}
.ct-alt .btn{margin-top:16px}
.ct-alt .note{margin-top:14px;color:var(--slate)}
.ct-pitch .note a,.ct-card .note a{color:var(--ink);border-bottom:1px solid var(--input)}
.ct-privacy{margin-top:22px;max-width:52ch}

/* ---------- 3 · FORM CARD ---------- */
.ct-card{padding:clamp(26px,4vw,40px);position:sticky;top:96px}
.ct-card h2{font-size:clamp(1.45rem,2.6vw,1.85rem)}
.ct-card .sub{color:var(--slate);margin-top:8px;font-size:.94rem}
.ct-card .form{max-width:none;margin-top:26px}
.ct-card .form .btn{justify-self:stretch;width:100%}
.form-status{font-size:.92rem}
.ct-form-alt{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft);
  color:var(--slate);font-size:.9rem}

/* ---------- 4 · AI BOOKING CHAT (brand restyle — same ids, same wiring) */
.ct-chat-sec .sec-head{margin-inline:auto;text-align:center}
.ct-chat{max-width:720px;margin:0 auto;overflow:hidden}
.bc-top{display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--ink);color:var(--paper)}
.bc-av{width:40px;height:40px;border-radius:50%;background:var(--current);flex:0 0 auto;
  display:grid;place-items:center;color:var(--ink);font-weight:700;font-family:var(--font-d)}
.bc-top b{font-family:var(--font-d);font-size:1rem;display:block;line-height:1.25}
.bc-top small{display:block;color:var(--fog);font-size:.78rem}
.bc-dot{width:8px;height:8px;border-radius:50%;background:var(--current);margin-left:auto;flex:0 0 auto}
.bc-msgs{height:340px;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:10px;background:var(--paper)}
.bc-b{max-width:82%;padding:11px 14px;border-radius:14px;font-size:.92rem;line-height:1.5;white-space:pre-wrap}
.bc-in{background:var(--card);border:1px solid var(--line);border-top-left-radius:4px;align-self:flex-start;color:var(--body)}
.bc-out{background:#D5F2E8;border:1px solid var(--mint-brd);color:var(--ink);
  border-top-right-radius:4px;align-self:flex-end}
/* booked confirmation bubble (added by JS on {booked:true}) */
.bc-booked{border-color:var(--mint-brd);background:var(--mint);color:var(--deep)}
.bc-booked::before{content:"";display:inline-block;width:14px;height:14px;margin-right:8px;
  vertical-align:-2px;background:var(--current-dark);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/14px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/14px no-repeat}
.bc-typing{align-self:flex-start;display:inline-flex;gap:4px;background:var(--card);
  border:1px solid var(--line);padding:12px 14px;border-radius:14px;border-top-left-radius:4px}
.bc-typing i{width:7px;height:7px;border-radius:50%;background:var(--faded);opacity:.6}
.bc-form{display:flex;gap:10px;padding:14px;border-top:1px solid var(--line);background:var(--card)}
.bc-form input{flex:1;background:var(--card);border:1.5px solid var(--input);border-radius:var(--r-pill);
  padding:12px 18px;color:var(--ink);font:inherit;font-size:.95rem;outline:none;transition:border-color .2s}
.bc-form input::placeholder{color:var(--faded)}
.bc-form input:focus{border-color:var(--ink)}
.bc-form input:focus-visible{outline:2px solid var(--current);outline-offset:0}
.bc-send{width:46px;height:46px;border:0;border-radius:50%;background:var(--ink);color:var(--paper);
  cursor:pointer;display:grid;place-items:center;flex:0 0 auto;transition:background .2s}
.bc-send:hover{background:var(--harbour)}
.bc-send:disabled{opacity:.5;cursor:default}
.bc-send svg{width:18px;height:18px}
.ct-chat-note{text-align:center;margin-top:16px}

/* ---------- 5 · MOTION (opt-in only) ---------- */
@media(prefers-reduced-motion:no-preference){
  .bc-dot{animation:bcp 2s infinite}
  @keyframes bcp{0%,100%{opacity:1}50%{opacity:.35}}
  .bc-typing i{animation:bcb 1.2s infinite}
  .bc-typing i:nth-child(2){animation-delay:.2s}
  .bc-typing i:nth-child(3){animation-delay:.4s}
  @keyframes bcb{0%,60%,100%{opacity:.3}30%{opacity:1}}
  .bc-b{animation:bcIn .3s var(--ease)}
  @keyframes bcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* ---------- 6 · RESPONSIVE ---------- */
@media(max-width:940px){
  .ct-grid{grid-template-columns:1fr}
  .ct-card{position:static}
}
@media(max-width:700px){
  .ct-chip{padding:9px 13px;font-size:.82rem}
  .bc-msgs{height:300px}
}

/* ---------- 7 · REDUCED MOTION ---------- */
@media(prefers-reduced-motion:reduce){
  .ct-chip,.bc-send{transition:none}
}