/* Easy All AC Repair: conversational chat-bubble design */
:root{--cream:#FFF8EE;--ink:#1D1B2F;--coral:#FF7A59;--lilac:#DCD6F7;--sun:#FFD166;--muted:#5A5870;
  --sans:"Gabarito","Helvetica Neue",Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:400 18px/1.55 var(--sans);color:var(--ink);background:var(--cream)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2{margin:0 0 .4em;font-weight:900;line-height:1.02;letter-spacing:-.03em}
h1{font-size:clamp(2.7rem,10vw,5.2rem)}
h1 em{font-style:normal;padding:0 .12em;background:var(--sun);border-radius:.2em}
h2{font-size:clamp(1.9rem,6vw,3rem)}
:focus-visible{outline:4px solid var(--ink);outline-offset:3px}

.head{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;background:var(--cream)}
.brand{display:flex;align-items:baseline;gap:8px}
.brand b{font-size:1.8rem;font-weight:900;letter-spacing:-.04em}
.brand span{font-size:.85rem;font-weight:700;color:var(--muted)}
.call{padding:11px 18px;border-radius:99px;background:var(--ink);color:var(--cream);font-weight:700;font-size:.95rem;transition:background .2s}
.call:hover{background:var(--coral);color:var(--ink)}

.btn{display:inline-block;padding:17px 30px;border-radius:99px;background:var(--coral);color:var(--ink);font:900 1.1rem var(--sans);transition:transform .15s}
.btn:hover{transform:scale(1.04)}
.eyebrow{display:inline-block;margin-bottom:14px;padding:5px 14px;border-radius:99px;background:var(--lilac);font-size:.85rem;font-weight:700}

.hero{display:grid;gap:40px;max-width:1160px;margin:0 auto;padding:32px 20px 64px}
.lead{max-width:30rem;margin:0 0 26px;font-size:1.2rem;color:var(--muted)}
.hrs{margin-top:16px;font-size:.95rem;font-weight:700;color:var(--muted)}

.chat{max-width:460px;width:100%;margin:0 auto;border:3px solid var(--ink);border-radius:30px;background:#fff;overflow:hidden;box-shadow:8px 8px 0 var(--ink)}
.chat-bar{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--lilac);border-bottom:3px solid var(--ink)}
.chat-bar b{display:block;line-height:1.1}
.chat-bar small{font-size:.8rem;color:var(--muted)}
.avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--coral);border:3px solid var(--ink);font:900 .85rem var(--sans);font-style:normal}
.avatar.big{width:60px;height:60px;font-size:1.1rem}
.thread{display:flex;flex-direction:column;gap:10px;padding:20px 16px 24px}
.msg{max-width:84%;margin:0;padding:12px 16px;border-radius:22px;font-weight:500;animation:pop .45s both}
.me{align-self:flex-start;background:var(--lilac);border-bottom-left-radius:6px}
.us{align-self:flex-end;background:var(--coral);border-bottom-right-radius:6px}
.pic{padding:6px 6px 10px}
.pic img{border-radius:16px}
.pic figcaption{padding:8px 10px 0;font-size:.9rem;font-weight:700}
.thread .msg:nth-child(2){animation-delay:.3s}
.thread .msg:nth-child(3){animation-delay:.6s}
.thread .msg:nth-child(4){animation-delay:.9s}
.thread .msg:nth-child(5){animation-delay:1.2s}
.thread .msg:nth-child(6){animation-delay:1.5s}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.96)}}

.qa{padding:64px 20px;background:var(--sun)}
.qa h2,.pairs{max-width:1160px;margin-left:auto;margin-right:auto}
.pairs{display:grid;gap:18px;margin-top:32px}
.pair{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:26px;background:var(--cream)}
.pair .msg{animation:none;max-width:92%}

.when{display:grid;gap:16px;max-width:1160px;margin:0 auto;padding:56px 20px}
.note{padding:26px 24px;border:3px solid var(--ink);border-radius:26px;background:var(--lilac)}
.note small{display:block;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.note b{display:block;font-size:clamp(2rem,7vw,3rem);font-weight:900;line-height:1.1}
.note-hot{background:var(--coral)}
.note-hot a{display:inline-block;margin-top:10px;font-weight:700;border-bottom:3px solid var(--ink)}

.contact{display:grid;gap:28px;max-width:1160px;margin:0 auto;padding:16px 20px 72px}
.card{padding:26px 22px;border:3px solid var(--ink);border-radius:30px;background:#fff}
.who{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.who b{display:block;font-size:1.3rem;line-height:1.1}
.who small{color:var(--muted)}
.row{margin:0;padding:12px 0;border-top:2px dashed var(--lilac);overflow-wrap:anywhere}
.row small{display:block;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.phone{font-size:1.8rem;font-weight:900;letter-spacing:-.02em}
.row a:hover{color:var(--coral)}
.map{width:100%;height:300px;border:3px solid var(--ink);border-radius:30px}
.foot{padding:22px 20px;background:var(--ink);color:#CFCDE3;font-size:.85rem}
.foot p{max-width:1160px;margin:0 auto}

@media(min-width:760px){
  .pairs{grid-template-columns:1fr 1fr}
  .when{grid-template-columns:1fr 1fr}
}
@media(min-width:1000px){
  .head{padding:14px 64px}
  .hero{grid-template-columns:1fr .85fr;align-items:center;gap:72px;padding:64px 64px 96px}
  .chat{margin:0 0 0 auto}
  .qa{padding:96px 64px}
  .when{padding:80px 64px}
  .contact{grid-template-columns:.9fr 1.1fr;align-items:stretch;gap:48px;padding:16px 64px 104px}
  .contact h2{grid-column:1/-1;margin:0}
  .map{height:100%;min-height:380px}
  .foot{padding:24px 64px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.msg{animation:none}*{transition:none!important}}
