/* =========================================================
   STUDIO BOUNCE — SHARED DESIGN SYSTEM
   This file is the canonical consistency layer for all pages.
   Page-specific CSS may control layout, but core components are
   intentionally identical site-wide.
   ========================================================= */

:root{
  --coral:#f14e5e;
  --coral-dark:#df3d4c;
  --coral-soft:#fff1f3;
  --paper:#fffdfa;
  --white:#fff;
  --ink:#141414;
  --muted:#656565;
  --line:#ece7e7;
  --radius-sm:14px;
  --radius:18px;
  --radius-lg:24px;
  --shadow:0 18px 48px rgba(18,18,18,.075);
  --max:1180px;
  --section-space:96px;
}

/* Typography */
html{scroll-behavior:smooth}
body{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
}
h1,h2,h3,h4,p{font-family:inherit !important}
h1,h2,h3{
  line-height:1.04;
  letter-spacing:-.035em;
}
h2{
  font-size:clamp(2.2rem,4vw,4rem);
  font-weight:760;
  margin-bottom:20px;
}
h3{font-weight:760}
.eyebrow{
  font-size:.73rem !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
  font-weight:850 !important;
  color:var(--coral) !important;
  margin:0 0 10px !important;
}
.section-head{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}
.section-head p:last-child{
  color:var(--muted);
  text-wrap:pretty;
}

/* Global container + section rhythm */
.container{
  width:min(var(--max),calc(100% - 40px)) !important;
  margin-inline:auto !important;
}
section{
  scroll-margin-top:90px;
}
.section-pad{
  padding-top:var(--section-space) !important;
  padding-bottom:var(--section-space) !important;
}

/* Buttons */
.btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  min-height:46px !important;
  padding:0 22px !important;
  border-radius:999px !important;
  border:1px solid transparent !important;
  font-size:.88rem !important;
  font-weight:800 !important;
  line-height:1 !important;
  cursor:pointer !important;
  transition:.2s ease !important;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background:var(--coral) !important;
  color:#fff !important;
  border-color:var(--coral) !important;
  box-shadow:0 10px 28px rgba(241,78,94,.22) !important;
}
.btn-primary:hover{
  background:var(--coral-dark) !important;
  border-color:var(--coral-dark) !important;
}
.btn-outline{
  background:#fff !important;
  color:var(--ink) !important;
  border-color:#e8c8cc !important;
}
.btn-outline:hover{
  color:var(--coral) !important;
  border-color:var(--coral) !important;
}
.btn-light{
  background:#fff !important;
  color:var(--ink) !important;
  border-color:#fff !important;
}

/* Header — canonical */
.site-header{
  position:sticky !important;
  top:0 !important;
  z-index:1000 !important;
  width:100% !important;
  height:84px !important;
  padding:0 !important;
  background:rgba(255,253,250,.95) !important;
  border-bottom:1px solid rgba(20,20,20,.045) !important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.header-inner{
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:24px !important;
}
.brand{
  display:flex !important;
  align-items:center !important;
}
.brand img{
  width:176px !important;
  height:auto !important;
  filter:none !important;
}
.main-nav{
  display:flex !important;
  align-items:center !important;
  gap:25px !important;
  color:var(--ink) !important;
  font-size:.86rem !important;
  font-weight:750 !important;
}
.main-nav>a:not(.btn){
  position:relative !important;
  opacity:1 !important;
  padding:0 !important;
}
.main-nav>a:not(.btn)::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:100% !important;
  bottom:-7px !important;
  height:2px !important;
  background:var(--coral) !important;
  transition:.2s ease !important;
}
.main-nav>a:not(.btn):hover::after{right:0 !important}
.nav-cta{margin-left:7px !important}
.mobile-toggle{
  display:none !important;
  width:44px !important;
  height:44px !important;
  border:0 !important;
  background:transparent !important;
  padding:8px !important;
  cursor:pointer !important;
}
.mobile-toggle span{
  display:block !important;
  height:2px !important;
  background:var(--ink) !important;
  margin:6px 0 !important;
  border-radius:4px !important;
}

/* Shared card language */
.gallery-card,
.process-card,
.review-card,
.faq-item,
.city-card,
.type-card,
.use-card,
.region-fact,
.travel-item{
  border-radius:var(--radius) !important;
}
.about-visual,
.region-intro-media,
.local-intro-media,
.story-media,
.image-card{
  border-radius:var(--radius-lg) !important;
  overflow:hidden;
}

/* Homepage + subpage USP strips use the same unframed icon language */
.info-strip{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.info-icon{
  flex:0 0 38px !important;
  width:38px !important;
  height:38px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--coral) !important;
  display:grid !important;
  place-items:center !important;
}
.info-icon svg{
  width:30px !important;
  height:30px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.55 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

/* Process cards: one component family */
.process-card{
  background:#fff !important;
  border:1px solid #f1dfe1 !important;
  box-shadow:none !important;
}
.process-icon{
  width:42px !important;
  height:42px !important;
  border-radius:50% !important;
  background:var(--coral) !important;
  color:#fff !important;
  display:grid !important;
  place-items:center !important;
  margin-bottom:17px !important;
}
.process-icon svg{
  width:22px !important;
  height:22px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.8 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
.process-icon.star{
  background:#fff !important;
  color:var(--coral) !important;
  border:2px solid var(--coral) !important;
}
.process-icon.star svg{
  fill:var(--coral) !important;
  stroke:var(--coral) !important;
}

/* Reviews: one visual family */
.review-card{
  background:#fff !important;
  border:1px solid var(--line) !important;
  box-shadow:none !important;
}
.review-card .stars,
.stars{
  color:var(--coral) !important;
}
.review-arrow{
  width:44px !important;
  height:44px !important;
  border:1px solid var(--line) !important;
  border-radius:50% !important;
  background:#fff !important;
  color:var(--ink) !important;
  box-shadow:none !important;
}
.review-arrow:hover{
  color:var(--coral) !important;
  border-color:var(--coral) !important;
}

/* FAQ: one accordion family */
.faq-item{
  background:#fff !important;
  border:1px solid #e7e3df !important;
  overflow:hidden !important;
}
.faq-item summary{
  padding:19px 22px !important;
  font-weight:800 !important;
}
.faq-item summary::after{
  color:var(--coral) !important;
}

/* CTA blocks */
.contact-card{
  border-radius:var(--radius-lg) !important;
  overflow:hidden !important;
  box-shadow:var(--shadow) !important;
}

/* Footer — canonical */
.site-footer{
  background:#111 !important;
  color:#fff !important;
  padding:58px 0 24px !important;
}
.footer-grid{
  display:grid !important;
  grid-template-columns:1.35fr repeat(5,minmax(0,1fr)) !important;
  gap:30px !important;
}
.footer-brand img{
  width:168px !important;
  margin-bottom:18px !important;
}
.footer-brand p{
  color:#aaa !important;
  max-width:270px !important;
  font-size:.83rem !important;
}
.footer-col h3{
  color:#eee !important;
  font-size:.78rem !important;
  text-transform:uppercase !important;
  letter-spacing:.12em !important;
  margin:2px 0 15px !important;
}
.footer-col a,
.footer-col span{
  display:block !important;
  color:#aaa !important;
  font-size:.8rem !important;
  margin:7px 0 !important;
}
.footer-col a:hover{color:#fff !important}
.socials{
  display:flex !important;
  gap:10px !important;
  margin-top:16px !important;
}
.socials a{
  width:30px !important;
  height:30px !important;
  margin:0 !important;
  border:1px solid #3a3a3a !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  color:#d7d7d7 !important;
  font-size:.78rem !important;
  font-weight:800 !important;
  line-height:1 !important;
}
.socials a:hover{
  color:#fff !important;
  border-color:var(--coral) !important;
}
.footer-bottom{
  border-top:1px solid #2b2b2b !important;
  margin-top:42px !important;
  padding-top:20px !important;
  display:flex !important;
  justify-content:space-between !important;
  gap:20px !important;
  color:#777 !important;
  font-size:.75rem !important;
}

/* Footer: six columns on wide screens, three-column wrap before tablet. */
@media(max-width:1080px) and (min-width:861px){
  .footer-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:34px 42px !important;
  }
  .footer-brand{grid-column:1/-1 !important}
}

/* Responsive */
@media(max-width:860px){
  :root{--section-space:76px}
  .site-header{height:76px !important}
  .brand img{width:150px !important}
  .mobile-toggle{display:block !important}
  .main-nav{
    position:absolute !important;
    top:80px !important;
    left:20px !important;
    right:20px !important;
    display:none !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:5px !important;
    padding:18px !important;
    border-radius:18px !important;
    background:#fff !important;
    box-shadow:var(--shadow) !important;
  }
  .main-nav.open{display:flex !important}
  .main-nav a{padding:10px !important}
  .nav-cta{margin-left:0 !important}
  .footer-grid{
    grid-template-columns:repeat(2,1fr) !important;
  }
  .footer-brand{grid-column:1/-1 !important}
}

@media(max-width:600px){
  :root{--section-space:68px}
  .container{width:min(var(--max),calc(100% - 26px)) !important}
  .footer-grid{grid-template-columns:1fr !important}
  .footer-brand{grid-column:auto !important}
  .footer-bottom{flex-direction:column !important}
}


/* =========================================================
   Shared footer: socials + city row
   ========================================================= */
.site-footer .socials{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:18px;
}
.site-footer .socials a{
  width:34px;
  height:34px;
  border:1px solid #3a3a3a;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#d7d7d7 !important;
  transition:border-color .18s ease,color .18s ease,background .18s ease,transform .18s ease;
}
.site-footer .socials a:hover{
  border-color:var(--coral,#e25f63);
  color:#fff !important;
  background:rgba(255,255,255,.04);
  transform:translateY(-1px);
}
.site-footer .socials svg{
  width:16px;
  height:16px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.site-footer .socials .social-fill{
  fill:currentColor;
  stroke:none;
}

.site-footer .footer-cities-col a,
.site-footer .footer-cities-col span{
  display:block;
}
.site-footer .footer-bottom{margin-top:42px}



/* Mobile-only persistent WhatsApp contact button */
.mobile-whatsapp-fab{
  display:none;
}
@media(max-width:860px){
  .mobile-whatsapp-fab{
    position:fixed;
    right:calc(16px + env(safe-area-inset-right, 0px));
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    z-index:9999;
    display:grid;
    place-items:center;
    width:58px;
    height:58px;
    padding:0;
    border:0;
    border-radius:50%;
    color:#fff;
    background:#25D366;
    box-shadow:0 8px 24px rgba(17,24,39,.24), 0 2px 7px rgba(17,24,39,.18);
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
    transition:transform .16s ease, box-shadow .16s ease;
  }
  .mobile-whatsapp-fab svg{
    display:block;
    width:34px;
    height:34px;
  }
  .mobile-whatsapp-fab:active{
    transform:scale(.94);
    box-shadow:0 5px 16px rgba(17,24,39,.22);
  }
}


/* 16-09-2026 — roomier shared mobile navigation */
@media(max-width:860px){
  .main-nav{
    gap:6px !important;
    padding:20px 18px !important;
  }
  .main-nav > a:not(.btn){
    padding:7px 10px !important;
    line-height:1.45 !important;
  }
  .main-nav > a:not(.btn)::after{
    bottom:2px !important;
  }
  .main-nav .nav-cta{
    margin-top:5px !important;
    padding-top:12px !important;
    padding-bottom:12px !important;
  }
}