/* Every page, loaded first: fonts, colours, header, footer and shared components.
   Sound Bridge website. Edit this file, not the pages. */

:root{--sb-navy:#0b3c5d;--sb-blue:#176b91;--sb-sky:#eaf6fb;--sb-ink:#183247;--sb-green:#167c5a}
*{box-sizing:border-box;scroll-behavior:smooth}
body{margin:0;font-family:Poppins,Arial,sans-serif;background:#f4f8fb;color:var(--sb-ink)}

/* ---- Header ---- */
header{background:#0b3c5d;padding:15px 40px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:1000;box-shadow:0 4px 18px rgba(5,35,55,.16);gap:18px}
.logo{display:flex;align-items:center;gap:12px}
.logo img{width:55px;height:55px;border-radius:50%;object-fit:cover;background:#fff}
.logo h2{color:#fff;font-size:24px;margin:0;letter-spacing:.06em}
nav a{color:#fff;text-decoration:none;margin-left:18px;font-weight:500;transition:color .18s ease,opacity .18s ease}
nav a:hover{color:#9fd3ff}
/* Menu never breaks words; header stacks before it gets crowded */
.logo{flex-shrink:0}
.logo h2{white-space:nowrap}
header nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px 14px}
header nav a{margin-left:0;white-space:nowrap}
@media(min-width:769px){header nav a{font-size:15px}}
@media(max-width:1180px){header{flex-direction:column;gap:10px;padding:14px 20px}header nav{justify-content:center}}

/* ---- Footer ---- */
footer{background:#0b3c5d;color:#fff;text-align:center;padding:25px}

@media(max-width:768px){header{flex-direction:column;padding:18px}nav{margin-top:12px;text-align:center}nav a{display:inline-block;margin:5px 7px}}

/* ---- Shared components: hero, buttons, cards, location strip, trust grid, CTA panel, floating WhatsApp ---- */
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 85% 15%,#d6eff8 0,transparent 32%),linear-gradient(125deg,#eef8fc 0%,#fff 62%,#f0f8fb 100%);border-bottom:1px solid #dcebf2}
.hero h1{letter-spacing:-.035em;line-height:1.15;max-width:900px;margin-left:auto;margin-right:auto}
.btn{box-shadow:0 6px 14px rgba(11,60,93,.13);transition:transform .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(11,60,93,.2)}
.card{border:1px solid #e4edf2;transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(11,60,93,.11)}
.sb-location-strip{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:10px 16px;background:#f0f8fb;border-bottom:1px solid #d9eaf1;color:#24495e;font-size:13px;font-weight:600;text-align:center}
.sb-location-strip span{display:inline-flex;align-items:center;gap:6px}
.sb-location-strip .dot{width:5px;height:5px;border-radius:50%;background:#18a079;display:inline-block}
.sb-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;background:#dff2f8;color:#0b5476;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-bottom:18px}
.sb-hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:25px auto 0}
.sb-btn-secondary{display:inline-block;padding:13px 24px;border:1px solid #0b3c5d;color:#0b3c5d;background:#fff;border-radius:9px;text-decoration:none;font-weight:700}
.sb-trust-grid{max-width:1100px;margin:-22px auto 0;padding:0 18px;position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sb-trust-item{background:#fff;border:1px solid #e1edf2;border-radius:14px;padding:18px;text-align:center;box-shadow:0 8px 22px rgba(11,60,93,.08)}
.sb-trust-item strong{display:block;color:#0b3c5d;font-size:15px;margin-bottom:4px}
.sb-trust-item span{font-size:13px;color:#617583}
.sb-cta-panel{max-width:1080px;margin:42px auto;padding:30px 24px;border-radius:20px;background:linear-gradient(120deg,#0b3c5d,#176b91);color:white;text-align:center;box-shadow:0 12px 28px rgba(11,60,93,.17)}
.sb-cta-panel h2{color:white!important;margin:0 0 10px!important}
.sb-cta-panel p{max-width:720px;margin:0 auto 18px;color:#eaf7fc}
.sb-cta-panel .sb-btn-secondary{border-color:#fff;color:#0b3c5d}
.sb-floating-contact{position:fixed;right:18px;bottom:18px;z-index:1200;display:inline-flex;align-items:center;gap:8px;padding:13px 18px;border-radius:999px;background:#16865c;color:#fff;text-decoration:none;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.sb-floating-contact:hover{background:#116e4b}
@media(max-width:760px){header{padding:14px 16px!important}nav{line-height:1.7}.hero{padding:54px 18px!important}.hero h1{font-size:clamp(30px,8vw,42px)!important}.hero p{font-size:16px!important}.sb-trust-grid{grid-template-columns:1fr;margin:18px auto 0}.sb-trust-item{padding:14px}.sb-floating-contact{right:12px;bottom:12px;padding:12px 15px;font-size:14px}.section{padding:54px 16px!important}.sb-cta-panel{margin:30px 14px;padding:25px 18px}}

/* Phones: the bottom action bar already has WhatsApp, so hide the floating button;
   lift the homepage back-to-top arrow above the bar */
@media(max-width:760px){.sb-floating-contact{display:none}#back-to-top{bottom:92px!important}}

/* WhatsApp logo in the floating button and action bar */
.sb-wa-icon{display:block;flex:0 0 auto}
.sb-mobile-action-bar .sb-action-wa span{display:flex;align-items:center;justify-content:center;height:17px}