/* /contact — chat first: an example conversation panel and one button; email and "what to include" beside it. */

.ct{padding:clamp(40px,7vw,96px) 0 clamp(56px,8vw,112px)}
.ct-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,6vw,88px);align-items:start}
.ct-main h1{max-width:14ch}
.ct-lead{font-size:1.15rem;max-width:56ch;color:var(--muted)}

.ct-chat{margin-top:clamp(24px,4vw,40px);padding:clamp(20px,3vw,32px);background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);max-width:560px}
.ct-chat__bubbles{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.ct-bubble{margin:0;max-width:85%;padding:12px 16px;border-radius:14px;font-size:1rem;line-height:1.45}
.ct-bubble--you{align-self:flex-end;background:var(--teal-deep);color:var(--text);border-bottom-right-radius:3px}
.ct-bubble--us{align-self:flex-start;background:var(--bg-2);border:1px solid var(--line);border-bottom-left-radius:3px}
.ct-open{width:100%}
.ct-small{font-size:.92rem;color:var(--muted);margin:12px 0 0}

.ct-mail{margin-top:clamp(28px,4vw,44px);max-width:56ch}
.ct-mail h2{font-size:clamp(1.3rem,2.2vw,1.7rem)}
.ct-mail a{word-break:break-word}

.ct-side{border-top:2px solid var(--gold);padding-top:22px}
.ct-side h2{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.ct-list{list-style:none;counter-reset:ct;padding:0;margin:0 0 1.4em}
.ct-list li{counter-increment:ct;position:relative;padding:14px 0 14px 46px;border-bottom:1px solid var(--line);margin:0;color:var(--muted)}
.ct-list li strong{color:var(--text)}
.ct-list li::before{content:counter(ct,decimal-leading-zero);position:absolute;left:0;top:15px;font:500 .85rem/1.4 var(--font-mono);color:var(--gold)}

@media (max-width:860px){
  .ct-grid{grid-template-columns:1fr}
}