/* =========================================================
   contact.css: styles used ONLY on /contact
   title, WhatsApp card, details, socials and the message form
   ========================================================= */
.ct{--spring:cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden;background:linear-gradient(var(--sky) 0,#F3F7FF 420px,#fff 100%);padding:clamp(36px,5vw,64px) 20px clamp(80px,10vw,130px)}
.ct>.cloud{left:0;animation:cdrift var(--t) linear var(--dl) infinite backwards}   /* clouds always glide in from off-screen */
.i{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Title ---------- */
.hd{position:relative;z-index:2;max-width:1240px;margin:0 auto;text-align:center}
.hd h1{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:0 .2em;font:700 clamp(3.6rem,16vw,5.8rem)/.95 var(--serif);font-variation-settings:"SOFT" 100;letter-spacing:-.025em}
.m{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.06em .06em .2em;margin:-.06em -.06em -.2em}
.m>span{display:block;animation:rise .95s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(.2s + var(--i)*.14s)}
.bub{width:.95em;height:auto;margin-bottom:.1em;rotate:-6deg;overflow:visible;filter:drop-shadow(0 8px 10px rgba(42,27,69,.16));animation:pop .7s var(--spring) .9s backwards,bob 4s ease-in-out 1.6s infinite}
.hd .lead{max-width:36rem;margin:22px auto 0;font-size:clamp(1.1rem,1.6vw,1.25rem);line-height:1.6;color:var(--muted)}

/* ---------- Layout ---------- */
.grid{position:relative;z-index:2;max-width:1160px;margin:clamp(40px,6vw,72px) auto 0;display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.ct h2{font:700 clamp(1.5rem,2.6vw,2rem)/1.15 var(--serif);font-variation-settings:"SOFT" 100;letter-spacing:-.015em}

/* ---------- WhatsApp (primary) ---------- */
.wa{position:relative;overflow:hidden;padding:clamp(28px,4vw,40px);border-radius:36px;background:var(--pink);color:#fff;box-shadow:0 26px 44px -26px rgba(219,27,145,.75)}
.wa>*{position:relative}
.wa .cl{position:absolute;fill:#fff;opacity:.13;pointer-events:none}
.wa h2{font-size:clamp(1.8rem,3.2vw,2.5rem)}
.wa{text-align:center}
.wa p{margin:12px auto 0;max-width:30rem;font-size:1.1rem;line-height:1.55;color:rgba(255,255,255,.94)}
.wbtns{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:26px}
.wbtn{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;max-width:340px;padding:8px 8px 8px 28px;border-radius:999px;background:#fff;color:#B30F74;font:700 1.1rem/1 var(--sans);text-align:left;box-shadow:0 14px 26px -14px rgba(42,27,69,.55);transition:transform .3s var(--spring)}
.wbtn .ic{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--pink);color:#fff;transition:rotate .5s var(--spring),scale .5s var(--spring);animation:ping 3s ease-out 1.5s infinite}
.wbtn:nth-child(2) .ic{animation-delay:2.4s}
.wbtn:hover{transform:translateY(-3px)}
.wbtn:hover .ic{rotate:-12deg;scale:1.1}
.wbtn:active{transform:scale(.97)}

/* ---------- Details ---------- */
.info,.formcard{padding:clamp(24px,4vw,40px);background:#fff;border-radius:36px;box-shadow:0 22px 40px -26px rgba(42,27,69,.45)}
.info ul{list-style:none;padding:0;margin-top:18px;display:grid;gap:18px}
.info li{display:flex;align-items:center;gap:16px}
.bd{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--pinkt);color:var(--pink)}
.info li:nth-child(2) .bd{background:var(--sky);color:var(--blue)}
.info small{display:block;font-size:.88rem;font-weight:500;color:var(--muted)}
.info li a,.info li span.v{display:block;font-size:1.12rem;font-weight:700;line-height:1.35;overflow-wrap:anywhere;transition:color .2s}
.info li a:hover{color:var(--pink)}

/* ---------- Socials (plain links: faster and more private than embeds) ---------- */
.follow{padding:clamp(24px,4vw,36px);background:#fff;border-radius:36px;box-shadow:0 22px 40px -26px rgba(42,27,69,.45);text-align:center}
.follow p{margin-top:8px;color:var(--muted);font-size:1.05rem}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.tile{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 10px 18px;border-radius:26px;background:var(--pinkt);font-weight:700;font-size:1.05rem;transition:transform .3s var(--spring),box-shadow .3s}
.tile.fb{background:var(--sky)}
.tile span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--pink);color:#fff;transition:rotate .5s var(--spring),scale .5s var(--spring)}
.tile.fb span{background:var(--blue)}
.tile:hover{transform:translateY(-4px);box-shadow:0 16px 26px -18px rgba(42,27,69,.55)}
.tile:hover span{rotate:-12deg;scale:1.1}

/* ---------- Form ---------- */
.f2{display:grid;grid-template-columns:minmax(0,1fr);gap:0 16px}
.fld{margin-top:18px}
.fld label{display:block;margin-bottom:8px;font-weight:700;font-size:1rem}
.opt{font-weight:500;color:var(--muted)}
.fld input,.fld textarea{width:100%;padding:15px 18px;border:2px solid #C4D8FB;border-radius:18px;background:#F3F7FF;font:400 1.0625rem/1.4 var(--sans);color:var(--ink);transition:border-color .2s,background .2s,box-shadow .2s}
.fld textarea{min-height:150px;resize:vertical}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(54,119,234,.2)}
.fld [aria-invalid="true"]{border-color:var(--pink);background:#fff}
.err{margin-top:7px;font-size:.95rem;font-weight:500;color:#A8106F}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.formcard .btn{display:flex;width:fit-content;margin:26px auto 0;border:0;cursor:pointer}   /* centered */
.formcard .btn[disabled]{opacity:.7;cursor:progress}
.status{margin-top:16px;min-height:1.2em;font-weight:500;line-height:1.5;text-align:center}
.status.bad{color:#A8106F}
.thanks{text-align:center;padding:clamp(20px,4vw,48px) 0}
.thanks svg{width:56px;height:56px;margin:0 auto 14px}
.thanks p{margin-top:12px;color:var(--muted);font-size:1.1rem;line-height:1.6}
.thanks:focus{outline:none}
.sent .fields{display:none}

@keyframes rise{from{transform:translateY(115%)}}
@keyframes pop{from{scale:0;opacity:0}}
@keyframes bob{50%{translate:0 -8px}}
@keyframes cdrift{from{transform:translateX(-110%)}to{transform:translateX(100vw)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(219,27,145,.45)}70%,100%{box-shadow:0 0 0 16px rgba(219,27,145,0)}}

@media (min-width:520px){.f2{grid-template-columns:1fr 1fr}}
@media (min-width:901px){
  .hd h1{font-size:clamp(6rem,11vw,9.4rem)}
  .grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto auto 1fr;gap:28px 40px;align-items:start}
  .wa{grid-column:1;grid-row:1}
  .info{grid-column:1;grid-row:2}
  .follow{grid-column:1;grid-row:3}
  .formcard{grid-column:2;grid-row:1/4;align-self:stretch;display:flex;flex-direction:column}   /* as tall as the left column */
  .fields{flex:1;display:flex;flex-direction:column}
  .fld.grow{flex:1;display:flex;flex-direction:column}
  .fld.grow textarea{flex:1;resize:none}   /* the message box takes up the extra height */
  .thanks{margin-block:auto}
}
@media (max-width:480px){
  .wbtn{gap:12px;padding-left:22px;font-size:1rem}
  .wbtn .ic{width:46px;height:46px}
}