/* CONTACT CTAs — shared by index.html and media.html (built by assets/cta.js).
   One label everywhere: "Book a Call". Palette: #4FC3F7 / #7C5CFC / #E040FB, WhatsApp #25D366. */

/* desktop: Book a Call in the nav, appears once the hero buttons scroll away */
.nav-cta { margin-left:2rem; height:40px; padding:0 1.4rem; display:inline-flex; align-items:center;
  font:700 0.75rem/1 var(--font, 'Outfit', sans-serif); letter-spacing:0.15em; text-transform:uppercase; color:#fff; text-decoration:none;
  background:linear-gradient(90deg,#4FC3F7,#7C5CFC,#E040FB); opacity:0; pointer-events:none; transition:opacity .25s, filter .25s; }
.nav-cta:not(.show) { visibility:hidden; transition:opacity .25s, visibility 0s .25s; }
.nav-cta.show { opacity:1; pointer-events:auto; visibility:visible; }
.nav-cta:hover { filter:brightness(1.12); }

/* phones: floating bar with WhatsApp + Book a Call */
.cta-bar { position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:1100;
  display:none; grid-template-columns:1fr 1fr; gap:8px; transform:translateY(140%); transition:transform .3s ease; }
.cta-bar:not(.show) { visibility:hidden; transition:transform .3s ease, visibility 0s .3s; }
.cta-bar.show { transform:none; visibility:visible; }
.cta-bar a { height:52px; display:flex; align-items:center; justify-content:center; gap:0.55rem; border-radius:10px; color:#fff; text-decoration:none;
  font:700 0.78rem/1 var(--font, 'Outfit', sans-serif); letter-spacing:0.12em; text-transform:uppercase; }
.cta-bar .cb-wa { background:rgba(10,10,16,0.92); border:1px solid rgba(37,211,102,0.65); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.cta-bar .cb-wa svg { width:20px; height:20px; fill:#25D366; }
.cta-bar .cb-book { background:linear-gradient(90deg,#4FC3F7,#7C5CFC,#E040FB); }

@media (max-width:900px) {
  .nav-cta { display:none; }
  .cta-bar { display:grid; }
  footer { padding-bottom:84px !important; }
}

/* contact section: one primary action, WhatsApp second, socials as small icons */
.cta-btn.cta-primary { height:64px; justify-content:center; font-size:0.95rem; color:#fff; border:0;
  background:linear-gradient(90deg,#4FC3F7,#7C5CFC,#E040FB); }
.cta-btn.cta-primary svg { opacity:1; }
.cta-btn.cta-primary:hover { transform:none; filter:brightness(1.12); background:linear-gradient(90deg,#4FC3F7,#7C5CFC,#E040FB); }
.cta-note { font-size:0.85rem; color:rgba(255,255,255,0.75); margin:-0.5rem 0 0.5rem; text-align:center; }
.cta-btn.cta-btn-whatsapp { height:56px; justify-content:center; border-color:rgba(37,211,102,0.65); }
.cta-btn.cta-btn-whatsapp svg { color:#25D366; opacity:1; }
.cta-socials { display:flex; gap:0.75rem; justify-content:center; margin-top:0.5rem; }
.cta-socials a { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.8);
  border:1px solid rgba(255,255,255,0.22); transition:background .25s, border-color .25s, color .25s; }
.cta-socials a:hover { background:#7C5CFC; border-color:#7C5CFC; color:#fff; }
.cta-socials svg { width:19px; height:19px; fill:currentColor; }
@media (hover:none) { .cta-btn:hover { transform:none; } }

/* contact strip (after the work grid, and on the media page) */
.cta-strip { margin-top:4rem; padding:2.2rem 2.4rem; border-radius:16px; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(79,195,247,0.1),rgba(124,92,252,0.14) 50%,rgba(224,64,251,0.1)); box-shadow:0 0 0 1px rgba(124,92,252,0.6); }
.cta-strip-title { font-size:clamp(1.3rem,2.4vw,1.9rem); font-weight:900; text-transform:uppercase; letter-spacing:0.01em; line-height:1.15; color:#fff; }
.cta-strip-sub { font-size:0.95rem; color:rgba(255,255,255,0.75); margin-top:0.4rem; }
.cta-strip-actions { display:flex; gap:0.8rem; flex-wrap:wrap; }
.cta-strip-actions a { height:50px; padding:0 1.6rem; display:inline-flex; align-items:center; gap:0.5rem; color:#fff; text-decoration:none;
  font:700 0.75rem/1 var(--font, 'Outfit', sans-serif); letter-spacing:0.15em; text-transform:uppercase; }
.cta-strip-actions .cs-book { background:linear-gradient(90deg,#4FC3F7,#7C5CFC,#E040FB); }
.cta-strip-actions .cs-wa { border:1px solid rgba(37,211,102,0.65); }
.cta-strip-actions .cs-wa svg { width:18px; height:18px; fill:#25D366; }
@media (max-width:640px) { .cta-strip { padding:1.6rem 1.3rem; } .cta-strip-actions, .cta-strip-actions a { width:100%; justify-content:center; } }

/* footer contacts */
.footer-contact { display:flex; gap:1.6rem; flex-wrap:wrap; align-items:center; }
.footer-contact a { font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.8); text-decoration:none; }
.footer-contact a:hover { color:#fff; }

/* desktop: round WhatsApp button that follows the screen */
.wa-float { position:fixed; right:24px; bottom:24px; z-index:1100; width:58px; height:58px; border-radius:50%; display:none;
  align-items:center; justify-content:center; background:#25D366; box-shadow:0 8px 24px rgba(0,0,0,0.45);
  transform:scale(.6); opacity:0; visibility:hidden; transition:transform .25s, opacity .25s, visibility 0s .25s; }
.wa-float.show { transform:none; opacity:1; visibility:visible; transition:transform .25s, opacity .25s; }
.wa-float svg { width:30px; height:30px; fill:#fff; }
.wa-float:hover { transform:scale(1.07); }
@media (min-width:901px) { .wa-float { display:flex; } }

/* phone: in Contact the main button comes right after the heading */
@media (max-width:1024px) {
  .contact-grid > div:first-child { display:contents; }
  .contact-heading { order:1; } .contact-grid > div:last-child { order:2; } .contact-sub { order:3; } .contact-links { order:4; }
}
/* phone footer: stacked, readable email */
@media (max-width:640px) {
  footer { flex-direction:column; align-items:flex-start; gap:1rem; }
  .footer-contact { flex-direction:column; align-items:flex-start; gap:0.8rem; }
  .footer-contact a[href^="mailto"] { text-transform:none; letter-spacing:0.02em; }
}
/* the nav gets tight just above the 900px menu switch */
@media (min-width:901px) and (max-width:1180px) { .nav-links { gap:1.3rem; } .nav-cta { margin-left:1.2rem; padding:0 1rem; } }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* people who turned motion off get a still page */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto !important; }
  .carousel-track, .scroll-arrow { animation:none !important; }
  .reveal.animate { opacity:1 !important; transform:none !important; transition:none !important; }
  .wa-float, .cta-bar, .nav-cta { transition:none !important; }
}