/* ============================================================
   03 · BUTTONS
   .solid (white)  .ghost (outline)  .line (light outline)  .primary (navy)
   ============================================================ */

/* align-items:center so one oversized child can never stretch its siblings */
.btns{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* outline, light — used on white sections */
.btn.line{
  display:inline-flex;align-items:center;gap:12px;
  border:1.25px solid var(--line);border-radius:100px;
  padding:16px 24px 16px 30px;font-size:15px;font-weight:600;color:var(--ink900);
  text-decoration:none;cursor:pointer;
  transition:gap .28s var(--ease),background .28s,border-color .28s,color .28s;
}
.btn.line:hover{gap:20px;background:var(--b50);border-color:var(--navy);color:var(--navy)}

/* solid white — used on dark / blue backgrounds */
.btn.solid{
  display:inline-flex;align-items:center;gap:12px;background:#fff;color:var(--navy);
  border-radius:100px;padding:16px 26px 16px 30px;font-size:15px;font-weight:600;
  text-decoration:none;cursor:pointer;
  transition:gap .28s var(--ease),background .28s,transform .28s var(--ease);
}
.btn.solid:hover{gap:20px;background:var(--b100);transform:translateY(-2px)}

/* ghost outline — on dark / blue backgrounds */
.btn.ghost{
  display:inline-flex;align-items:center;gap:12px;border:1.25px solid var(--onblue);color:#fff;
  border-radius:100px;padding:16px 26px 16px 30px;font-size:15px;font-weight:600;
  text-decoration:none;cursor:pointer;
  transition:gap .28s var(--ease),border-color .28s,transform .28s var(--ease);
}
.btn.ghost:hover{gap:20px;border-color:var(--b300);transform:translateY(-2px)}

/* navy primary — on white sections */
.btn.primary{
  display:inline-flex;align-items:center;gap:10px;background:var(--navy);color:#fff;
  border-radius:5px;padding:13px 20px;font-size:14px;font-weight:600;text-decoration:none;
  cursor:pointer;white-space:nowrap;transition:gap .28s var(--ease),background .28s;
}
.btn.primary:hover{gap:14px;background:var(--b500)}
.btn.primary .arw{width:16px;height:16px}

/* WhatsApp — brand colour. Uses WhatsApp's dark teal rather than the bright
   #25D366 so white label text clears the contrast requirement. */
.btn.wa{
  display:inline-flex;align-items:center;gap:10px;background:#075E54;color:#fff;
  border-radius:5px;padding:13px 20px;font-size:14px;font-weight:600;text-decoration:none;
  cursor:pointer;white-space:nowrap;transition:gap .28s var(--ease),background .28s,transform .28s var(--ease);
}
.btn.wa:hover{gap:14px;background:#128C7E;transform:translateY(-2px)}
.btn.wa .ico{width:17px;height:17px;flex:0 0 auto}

/* social icon links (footer / contact) */
.sociallink{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.sociallink .ico{width:16px;height:16px;flex:0 0 auto}

/* Compact, single-line rectangular variant when a button sits inside these
   blocks. .scene = homepage 3D hero, .sp-hero = service page 3D hero,
   .page-head = subpage headers. */
.scene .btn,.sp-hero .btn,.page-head .btn,.feat .btn,.cta-mid .btn,
.work-head .btn,.svc-head .btn{
  padding:13px 20px;border-radius:5px;font-size:14px;gap:10px;white-space:nowrap;
}
.scene .btn:hover,.sp-hero .btn:hover,.page-head .btn:hover,.feat .btn:hover,
.cta-mid .btn:hover,.work-head .btn:hover,.svc-head .btn:hover{gap:14px}
.scene .btn .arw,.sp-hero .btn .arw,.page-head .btn .arw,.feat .btn .arw,
.cta-mid .btn .arw,.work-head .btn .arw,.svc-head .btn .arw{width:16px;height:16px}

@media(max-width:720px){
  .btn.solid,.btn.ghost,.btn.line{width:100%;justify-content:space-between}
  /* keep the compact buttons on one line rather than stretching them */
  .scene .btn,.sp-hero .btn,.page-head .btn,.feat .btn,.cta-mid .btn,
  .work-head .btn,.svc-head .btn{width:auto;justify-content:center}
}