/* ===================================================================
SPORT MAN MASSAGE — GLOBAL DESIGN SYSTEM
Theme: "Deep Current" — a blue-sky palette grounded in ink navy,
built around one signature motif: the pressure ripple. Every
treatment starts at a single point of contact and moves outward —
that idea repeats as the site's one recurring visual signal.
=================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
/* --- brand blues --- */
--primary:#0EA5E9;
--primary-dark:#0369A1;
--secondary:#38BDF8;

/* --- grounding ink (new: gives the blue somewhere to rest) --- */
--ink:#071A2E;
--ink-2:#0C2846;

/* --- neutrals, blue-tinted rather than flat gray --- */
--slate:#526A82;
--slate-soft:#7C93A8;
--sky-50:#F4FAFF;
--sky-100:#E9F6FF;
--sky-200:#D3EEFF;
--white:#FFFFFF;

/* --- single warm accent, used only for ratings / small highlights --- */
--gold:#F2B341;

/* --- type scale --- */
--fs-hero: clamp(2.5rem, 5vw + 0.5rem, 4rem);
--fs-h2: clamp(1.9rem, 3vw + 0.5rem, 2.75rem);
--fs-h3: 1.3rem;
--fs-body: 1rem;

--font-display:'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif;
--font-body:'Plus Jakarta Sans', sans-serif;

/* --- shape / motion --- */
--radius-sm:14px;
--radius:22px;
--radius-lg:32px;
--ease:cubic-bezier(.22,.9,.3,1);
--dur:.4s;

--shadow-sm:0 6px 20px rgba(7,26,46,.08);
--shadow:0 20px 45px rgba(14,165,233,.16);
--shadow-lg:0 30px 70px rgba(7,26,46,.22);

--container:1200px;
}

/* ===================== RESET ===================== /
,::before,::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html,body{ width:100%; overflow-x:hidden; }
body{
font-family:var(--font-body);
background:var(--sky-50);
color:var(--ink);
line-height:1.7;
-webkit-font-smoothing:antialiased;
}
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
img{ display:block; max-width:100%; height:auto; user-select:none; -webkit-user-drag:none; }
button,input,textarea,select{ font-family:inherit; font-size:1rem; border:none; outline:none; background:none; color:inherit; }
button{ cursor:pointer; }
svg{ display:block; }
a,button{ -webkit-tap-highlight-color:transparent; }

@media (prefers-reduced-motion: reduce){
,::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

::selection{ background:var(--primary); color:#fff; }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--sky-100); }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--primary),var(--secondary)); border-radius:50px; }
::-webkit-scrollbar-thumb:hover{ background:var(--primary-dark); }

:focus-visible{ outline:2px solid var(--secondary); outline-offset:3px; border-radius:4px; }

/* ===================== TYPE ===================== */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; color:var(--ink); line-height:1.2; letter-spacing:-.01em; }
h1{ font-size:var(--fs-hero); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
p{ color:var(--slate); }
strong{ font-weight:700; color:var(--ink); }

/* ===================== LAYOUT ===================== */
.container{ width:min(var(--container),92%); margin-inline:auto; }
section{ position:relative; padding:clamp(60px,9vw,110px) 0; }

.eyebrow{
display:inline-flex; align-items:center; gap:8px;
padding:7px 18px; border-radius:50px;
background:var(--sky-100); color:var(--primary-dark);
font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
margin-bottom:16px;
}
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head p{ margin-top:14px; font-size:1.05rem; }

.grid{ display:grid; gap:28px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* ===================== BUTTONS ===================== */
.btn,.btn-outline,.btn-ghost{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
padding:16px 32px; border-radius:50px; font-weight:700; font-size:.98rem;
transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
white-space:nowrap;
}
.btn{
background:linear-gradient(135deg,var(--primary),var(--primary-dark));
color:#fff; box-shadow:var(--shadow);
}
.btn:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.btn:active{ transform:translateY(-1px); }

.btn-outline{ border:1.5px solid var(--sky-200); background:var(--white); color:var(--ink); }
.btn-outline:hover{ border-color:var(--primary); color:var(--primary-dark); transform:translateY(-4px); box-shadow:var(--shadow-sm); }

.btn-ghost{ padding:0; color:var(--primary-dark); font-weight:700; gap:8px; }
.btn-ghost i{ transition:transform var(--dur) var(--ease); }
.btn-ghost:hover i{ transform:translateX(4px); }

.btn-block{ width:100%; }

/* ===================== CARDS / TILES ===================== */
.tile{
background:var(--white); border-radius:var(--radius); border:1px solid var(--sky-100);
box-shadow:var(--shadow-sm); transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tile:hover{ transform:translateY(-8px); box-shadow:var(--shadow); border-color:var(--sky-200); }

.badge-pill{
display:inline-flex; align-items:center; gap:10px;
padding:9px 20px; border-radius:50px;
background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
backdrop-filter:blur(6px);
color:#fff; font-size:.85rem; font-weight:600;
}

/* ===================== SIGNATURE: PRESSURE-RIPPLE MOTIF =====================
The one recurring visual idea across the site: concentric rings
expanding from a single point — a massage's pressure travelling
outward into relaxation. Used large in the hero, small as an
eyebrow ornament elsewhere. */
.ripple-visual{
position:relative; width:100%; aspect-ratio:1/1; max-width:420px; margin-inline:auto;
display:flex; align-items:center; justify-content:center;
}
.ripple-visual .ring{
position:absolute; inset:0; margin:auto; border-radius:50%;
border:1.5px solid rgba(255,255,255,.5);
animation:rippleOut 3.6s var(--ease) infinite;
}
.ripple-visual .ring:nth-child(1){ width:34%; height:34%; animation-delay:0s; }
.ripple-visual .ring:nth-child(2){ width:34%; height:34%; animation-delay:.9s; }
.ripple-visual .ring:nth-child(3){ width:34%; height:34%; animation-delay:1.8s; }
.ripple-visual .ring:nth-child(4){ width:34%; height:34%; animation-delay:2.7s; }
.ripple-visual .core{
position:relative; z-index:2; width:30%; height:30%; border-radius:50%;
background:linear-gradient(150deg,#fff,var(--secondary));
display:flex; align-items:center; justify-content:center;
box-shadow:0 0 0 14px rgba(255,255,255,.08), 0 20px 50px rgba(3,105,161,.45);
}
.ripple-visual .core i{ font-size:clamp(1.6rem,4vw,2.4rem); color:var(--primary-dark); }

@keyframes rippleOut{
0%{ transform:scale(1); opacity:.9; border-color:rgba(255,255,255,.6); }
100%{ transform:scale(3.4); opacity:0; border-color:rgba(255,255,255,0); }
}

.mini-ripple{ position:relative; width:34px; height:34px; flex-shrink:0; }
.mini-ripple span{ position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--primary); animation:rippleOut 2.6s var(--ease) infinite; }
.mini-ripple span:nth-child(2){ animation-delay:.65s; }
.mini-ripple i{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--primary-dark); font-size:.85rem; }

/* ===================== MEDIA PANEL (stand-in for photography) =====================
No photography was supplied with this project, so rather than
leaving broken <img> tags, every "photo" slot is an intentional
duotone panel: a soft gradient + a light line-icon mark. Swap
any .media-panel for a real <img class="img-cover"> later. */
.media-panel{
position:relative; overflow:hidden; border-radius:var(--radius);
background:linear-gradient(155deg,var(--ink-2),var(--primary-dark) 60%,var(--primary));
display:flex; align-items:center; justify-content:center;
min-height:220px;
}
.media-panel::before{
content:''; position:absolute; inset:0;
background:
radial-gradient(circle at 20% 20%, rgba(255,255,255,.16), transparent 45%),
radial-gradient(circle at 85% 90%, rgba(255,255,255,.1), transparent 40%);
}
.media-panel i{ position:relative; z-index:1; font-size:2.6rem; color:rgba(255,255,255,.85); }
.media-panel.light{ background:linear-gradient(155deg,var(--sky-100),var(--sky-200)); }
.media-panel.light i{ color:var(--primary-dark); }
.media-panel.light::before{ background:radial-gradient(circle at 25% 25%, rgba(255,255,255,.7), transparent 50%); }

/* ===================== NAVBAR ===================== */
.navbar{
position:fixed; top:0; left:0; right:0; z-index:1000;
display:flex; align-items:center; justify-content:space-between;
padding:18px 6%;
transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.navbar.scrolled{
background:rgba(255,255,255,.85); backdrop-filter:blur(14px);
box-shadow:0 10px 30px rgba(7,26,46,.08); padding:12px 6%;
}
.logo{ display:flex; align-items:center; gap:10px; }
.logo-mark{
width:38px; height:38px; border-radius:11px; flex-shrink:0;
background:linear-gradient(140deg,var(--primary),var(--primary-dark));
display:flex; align-items:center; justify-content:center;
box-shadow:0 8px 18px rgba(14,165,233,.35);
}
.logo-mark i{ color:#fff; font-size:1rem; }
.logo h2{ font-size:1.15rem; font-weight:800; }
.navbar:not(.scrolled) .logo h2{ color:#fff; }
.navbar:not(.scrolled) .logo-mark{ box-shadow:0 8px 18px rgba(0,0,0,.25); }

.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{
display:inline-block; padding:9px 16px; border-radius:50px; font-weight:600; font-size:.94rem;
color:var(--ink); transition:background var(--dur), color var(--dur);
}
.navbar:not(.scrolled) .nav-links a{ color:rgba(255,255,255,.9); }
.nav-links a:hover{ background:var(--sky-100); color:var(--primary-dark); }
.navbar:not(.scrolled) .nav-links a:hover{ background:rgba(255,255,255,.15); color:#fff; }
.nav-links a.active{ background:var(--primary); color:#fff !important; }

.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-cta .btn{ padding:11px 24px; font-size:.9rem; }

.menu-toggle{
display:none; width:44px; height:44px; border-radius:12px;
align-items:center; justify-content:center; background:var(--sky-100); color:var(--ink);
font-size:1.15rem; flex-shrink:0;
}
.navbar:not(.scrolled) .menu-toggle{ background:rgba(255,255,255,.15); color:#fff; }

@media (max-width:960px){
.nav-links{
position:fixed; inset:0 0 0 auto; width:min(320px,80%); height:100vh;
background:var(--white); flex-direction:column; align-items:flex-start; justify-content:flex-start;
padding:100px 30px 30px; gap:4px;
transform:translateX(100%); transition:transform .45s var(--ease);
box-shadow:-20px 0 60px rgba(7,26,46,.18);
}
.nav-links.active{ transform:translateX(0); }
.nav-links a{ width:100%; color:var(--ink) !important; padding:14px 16px; font-size:1.02rem; }
.nav-cta{ display:none; }
.menu-toggle{ display:flex; }
body.menu-open{ overflow:hidden; }
}

/* ===================== PAGE HERO (inner pages) ===================== */
.page-hero{
position:relative; padding:170px 6% 90px; overflow:hidden;
background:linear-gradient(160deg,var(--primary-dark) 0%,var(--primary) 55%,var(--secondary) 130%);
color:#fff; text-align:center;
}
.page-hero::before{
content:''; position:absolute; inset:0;
background:
radial-gradient(220px 120px at 12% 20%, rgba(255,255,255,.5), transparent 70%),
radial-gradient(300px 150px at 85% 15%, rgba(255,255,255,.4), transparent 70%),
radial-gradient(180px 100px at 70% 75%, rgba(255,255,255,.28), transparent 70%);
filter:blur(2px);
animation:cloudDrift 22s ease-in-out infinite alternate;
}

@keyframes cloudDrift{
0%{ transform:translateX(0); }
100%{ transform:translateX(-3%); }
}
.page-hero .hero-content{ position:relative; max-width:680px; margin-inline:auto; }
.page-hero h1{ color:#fff; margin-block:18px 14px; }
.page-hero p{ color:rgba(255,255,255,.82); font-size:1.05rem; }

/* ===================== FOOTER ===================== */
footer{ background:var(--ink); color:rgba(255,255,255,.7); padding:80px 6% 0; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-col h2{ color:#fff; font-size:1.2rem; margin-bottom:14px; }
.footer-col h3{ color:#fff; font-size:1rem; margin-bottom:18px; }
.footer-col p{ color:rgba(255,255,255,.6); font-size:.95rem; }
.footer-col a{ display:block; color:rgba(255,255,255,.65); font-size:.94rem; padding:6px 0; transition:color var(--dur), transform var(--dur); }
.footer-col a:hover{ color:#fff; transform:translateX(4px); }
.footer-contact li{ display:flex; align-items:flex-start; gap:10px; color:rgba(255,255,255,.65); font-size:.94rem; padding:6px 0; }
.footer-contact i{ color:var(--secondary); margin-top:3px; }
.social-row{ display:flex; gap:10px; margin-top:16px; }
.social-row a{
width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.08);
display:flex; align-items:center; justify-content:center; color:#fff; padding:0 !important;
}
.social-row a:hover{ background:var(--primary); transform:translateY(-3px); }
.copyright{ text-align:center; padding:24px 0; font-size:.85rem; color:rgba(255,255,255,.45); }

@media (max-width:900px){

.footer-grid{
    grid-template-columns:1fr 1fr;
    gap:30px;
}

}

@media (max-width:560px){

footer{
    padding:55px 20px 0;
}

.footer-grid{
    grid-template-columns:1fr;
    gap:25px;
    text-align:center;
}

.footer-col{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.footer-col a{
    padding:8px 0;
}

.footer-contact{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-contact li{
    justify-content:center;
    text-align:center;
}

.social-row{
    justify-content:center;
}

.copyright{
    padding:20px 0;
    font-size:.8rem;
}

}

/* ===================== FLOATING UI ===================== */
.floating-wa{
position:fixed; right:26px; bottom:26px; z-index:999;
width:58px; height:58px; border-radius:50%;
background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
font-size:1.5rem; box-shadow:0 16px 34px rgba(37,211,102,.4);
animation:float 3s ease-in-out infinite;
}
.floating-wa:hover{ transform:scale(1.08); }

.back-to-top{
position:fixed; right:26px; bottom:96px; z-index:999;
width:48px; height:48px; border-radius:50%;
background:var(--white); color:var(--primary-dark); border:1px solid var(--sky-200);
display:flex; align-items:center; justify-content:center;
box-shadow:var(--shadow-sm);
opacity:0; visibility:hidden; transform:translateY(16px);
transition:opacity var(--dur), visibility var(--dur), transform var(--dur), background var(--dur), color var(--dur);
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--primary); color:#fff; }

@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }

/* ===================== SCROLL REVEAL ===================== */
[data-reveal]{ opacity:0; transform:translateY(36px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in{ opacity:1; transform:translateY(0); }

/* ===================== RESPONSIVE — GLOBAL ===================== */
@media (max-width:1080px){
.grid-4{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
section{ padding:56px 0; }
.grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
.footer-grid{ padding-bottom:34px; }
.floating-wa{ width:52px; height:52px; font-size:1.3rem; right:18px; bottom:18px; }
.back-to-top{ width:42px; height:42px; right:18px; bottom:82px; }
}

@media print{
.navbar,footer,.floating-wa,.back-to-top{ display:none !important; }
}

/* ===================== MEN-ONLY PERSISTENT TAG ===================== */
.mens-tag{
display:inline-flex; align-items:center; gap:5px;
font-size:.64rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
padding:4px 10px; border-radius:50px;
background:rgba(255,255,255,.2); color:#fff; white-space:nowrap;
transition:background var(--dur), color var(--dur);
}
.navbar.scrolled .mens-tag{ background:var(--sky-100); color:var(--primary-dark); }
@media (max-width:420px){ .mens-tag{ display:none; } }

/* ===================== STICKY MOBILE BOOKING BAR ===================== */
.mobile-book-bar{
display:none; position:fixed; left:0; right:0; bottom:0; z-index:998;
padding:12px 16px; background:rgba(255,255,255,.96); backdrop-filter:blur(10px);
border-top:1px solid var(--sky-200); box-shadow:0 -12px 30px rgba(7,26,46,.12);
}
.mobile-book-bar .btn{ width:100%; padding:14px; }
@media (max-width:640px){
.mobile-book-bar{ display:block; }
body{ padding-bottom:74px; }
.floating-wa{ bottom:92px; }
.back-to-top{ bottom:162px; }
}

/* ===================== TESTIMONIAL CAROUSEL ===================== */
.testimonial-carousel{ display:flex; align-items:center; gap:18px; }
.testimonial-viewport{ flex:1; overflow:hidden; }
.testimonial-track{ display:flex; transition:transform .5s var(--ease); }
.testimonial-slide{ flex:0 0 100%; padding:0 4px; }
.testimonial-slide .testimonial-card{ max-width:640px; margin-inline:auto; }
.car-nav{
width:46px; height:46px; border-radius:50%; flex-shrink:0;
background:var(--white); border:1px solid var(--sky-200); box-shadow:var(--shadow-sm);
display:flex; align-items:center; justify-content:center; color:var(--primary-dark);
}
.car-nav:hover{ background:var(--primary); color:#fff; border-color:var(--primary); }
.dots{ display:flex; justify-content:center; gap:8px; margin-top:26px; }
.dots button{ width:9px; height:9px; border-radius:50%; background:var(--sky-200); padding:0; transition:background var(--dur), transform var(--dur); }
.dots button.active{ background:var(--primary); transform:scale(1.35); }
@media (max-width:560px){ .car-nav{ width:38px; height:38px; } }

/* ===================== GALLERY FILTER TABS ===================== */
.gallery-filter{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:40px; }
.gallery-filter button{
padding:10px 22px; border-radius:50px; font-weight:600; font-size:.9rem;
background:var(--white); border:1.5px solid var(--sky-200); color:var(--slate);
transition:background var(--dur), color var(--dur), border-color var(--dur);
}
.gallery-filter button.active,.gallery-filter button:hover{ background:var(--primary); border-color:var(--primary); color:#fff; }
.gallery-card{ transition:opacity .35s ease, transform .35s ease; }
.gallery-card.hide{ display:none; }
.media-panel{
    width:100%;
    height:220px;
    overflow:hidden;
    border-radius:20px;
}

.media-panel img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.4s;
}

.treatment-card:hover .media-panel img{
    transform:scale(1.08);
}