/* SocialTravels shared styles */
:root{
  --teal-900:#072d38;
  --teal-800:#0a4a5c;
  --teal-700:#0e6478;
  --teal-600:#13809a;
  --teal-500:#1f8aa1;
  --teal-100:#cfe3e8;
  --teal-50:#e6f1f3;
  --coral:#e8634a;
  --coral-dark:#c74a32;
  --coral-50:#fbe9e4;
  --sand:#f6f1ea;
  --sand-2:#ece5da;
  --ink:#15232a;
  --ink-2:#3a4a53;
  --mute:#7a8a92;
  --line:rgba(12,50,62,.12);
  --ok:#2e8b57;
  --warn:#d18e2c;
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(10,30,40,.06), 0 2px 6px rgba(10,30,40,.05);
  --shadow-md:0 10px 30px rgba(10,30,40,.12);
  --shadow-lg:0 30px 70px rgba(10,30,40,.22);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Manrope',system-ui,sans-serif;
  color:var(--ink);background:var(--sand);
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
.wrap{max-width:1280px;margin:0 auto;padding:0 28px}

/* ---------- TOP NAV (shared) ---------- */
.st-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.st-nav.on-hero{
  position:absolute;left:0;right:0;background:transparent;border:none;
}
.st-nav .wrap{display:flex;align-items:center;gap:32px;padding-top:18px;padding-bottom:18px}
.logo{
  font-family:'Bebas Neue',sans-serif;
  font-size:24px;letter-spacing:.14em;color:var(--teal-900);
  display:flex;align-items:center;gap:10px;font-weight:400;
}
.st-nav.on-hero .logo{color:#fff}
.logo-mark{
  width:26px;height:26px;border-radius:50%;
  background:
    radial-gradient(circle at 35% 35%, var(--coral) 0 5px, transparent 6px),
    conic-gradient(from 220deg,var(--teal-800) 0 50%, transparent 50% 100%);
  border:1.5px solid var(--teal-800);
  transform:rotate(-20deg);
}
.st-nav.on-hero .logo-mark{border-color:#fff;background:
  radial-gradient(circle at 35% 35%, var(--coral) 0 5px, transparent 6px),
  conic-gradient(from 220deg,#fff 0 50%, transparent 50% 100%);}
.nav-links{display:flex;gap:26px;margin-left:20px;font-size:13.5px;letter-spacing:.02em;color:var(--ink-2);font-weight:600}
.st-nav.on-hero .nav-links{color:rgba(255,255,255,.9)}
.nav-links a{position:relative;padding:4px 0;transition:color .2s}
.nav-links a:hover{color:var(--coral)}
.st-nav.on-hero .nav-links a:hover{color:#fff}
.nav-links a.active{color:var(--coral)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav-iconbtn{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-2);transition:background .2s,color .2s;
}
.nav-iconbtn:hover{background:var(--teal-50);color:var(--teal-800)}
.st-nav.on-hero .nav-iconbtn{border-color:rgba(255,255,255,.3);color:#fff}
.st-nav.on-hero .nav-iconbtn:hover{background:rgba(255,255,255,.14)}
.lang-switch{
  display:flex;border:1px solid var(--line);border-radius:999px;padding:3px;
  font-size:11px;letter-spacing:.18em;font-weight:700;
}
.st-nav.on-hero .lang-switch{border-color:rgba(255,255,255,.3);color:#fff}
.lang-switch button{padding:5px 10px;border-radius:999px;color:inherit}
.lang-switch button.on{background:var(--teal-800);color:#fff}
.st-nav.on-hero .lang-switch button.on{background:#fff;color:var(--teal-900)}

/* ---------- CITY SWITCHER ---------- */
.city-switch{position:relative;margin-left:8px}
.city-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 12px;border:1px solid var(--line);border-radius:999px;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--teal-900);
  background:#fff;transition:background .2s,border-color .2s;
}
.city-btn:hover{border-color:var(--teal-700)}
.st-nav.on-hero .city-btn{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff;backdrop-filter:blur(8px)}
.st-nav.on-hero .city-btn:hover{background:rgba(255,255,255,.22)}
.city-drop{
  position:absolute;top:calc(100% + 10px);left:0;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 20px 50px rgba(7,45,56,.18);
  padding:8px;min-width:260px;
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .15s,transform .15s;
  z-index:60;
}
.city-drop.on{opacity:1;transform:translateY(0);pointer-events:auto}
.city-drop a{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:10px 14px;border-radius:8px;font-size:13.5px;color:var(--teal-900);font-weight:600;
  transition:background .15s;
}
.city-drop a:hover{background:var(--teal-50)}
.city-drop a small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-700);font-weight:700}
.city-drop a.soon small{color:var(--mute)}
.city-drop .city-sep{height:1px;background:var(--line);margin:6px 4px}
.city-drop a.all{color:var(--coral);justify-content:flex-start;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.nav-cta{
  background:var(--coral);color:#fff;padding:10px 18px;border-radius:999px;
  font-size:13px;font-weight:700;letter-spacing:.04em;transition:background .2s;
}
.nav-cta:hover{background:var(--coral-dark)}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;font-weight:700;font-size:13px;letter-spacing:.08em;transition:all .2s;cursor:pointer}
.btn-coral{background:var(--coral);color:#fff;text-transform:uppercase}
.btn-coral:hover{background:var(--coral-dark)}
.btn-teal{background:var(--teal-800);color:#fff;text-transform:uppercase}
.btn-teal:hover{background:var(--teal-900)}
.btn-ghost{border:1px solid var(--line);color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:var(--teal-800);color:var(--teal-800)}
.btn-ghost-w{border:1px solid rgba(255,255,255,.4);color:#fff;text-transform:uppercase}
.btn-ghost-w:hover{background:rgba(255,255,255,.15)}

/* ---------- TYPE ---------- */
h2.display,h1.display{
  font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.02em;line-height:.95;margin:0;color:var(--teal-900);
}
.ital{font-family:'Fraunces',serif;font-style:italic;font-weight:400;color:var(--coral)}
.kicker{
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--teal-700);font-weight:700;margin-bottom:14px;
  display:inline-flex;align-items:center;gap:10px;
}
.kicker::before{content:"";width:28px;height:1.5px;background:var(--coral)}

/* ---------- FOOTER ---------- */
footer{background:var(--teal-900);color:rgba(255,255,255,.75);padding:72px 0 28px;margin-top:80px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;gap:40px}
.foot-grid h5{color:#fff;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;margin:0 0 16px;font-weight:700}
.foot-grid a{display:block;padding:5px 0;font-size:14px;transition:color .2s}
.foot-grid a:hover{color:#fff}
.foot-about p{font-size:14px;line-height:1.6;margin:14px 0 22px}
.foot-social{display:flex;gap:10px}
.foot-social a{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  display:grid;place-items:center;padding:0;
}
.foot-social a:hover{background:rgba(255,255,255,.1)}
.foot-bottom{
  margin-top:54px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;align-items:center;font-size:12.5px;
  color:rgba(255,255,255,.55);flex-wrap:wrap;gap:10px;
}
.foot-bottom .badges{display:flex;gap:18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}

/* ---------- TWEAKS PANEL ---------- */
.tweaks{
  position:fixed;right:20px;bottom:20px;z-index:200;
  background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.25);
  padding:18px;width:280px;display:none;font-size:13px;
  border:1px solid var(--line);
}
.tweaks.on{display:block}
.tweaks h6{margin:0 0 10px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal-700)}
.tweak-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.tweak-row label{color:var(--ink-2);font-size:12.5px}
.tweak-row input[type=color]{width:40px;height:28px;border:none;background:none;padding:0;cursor:pointer}
.tweak-row select{font-size:12px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:#fff}
.tweaks-divider{height:1px;background:var(--line);margin:10px 0}

svg{flex-shrink:0}

/* chips */
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:11.5px;letter-spacing:.08em;font-weight:700;text-transform:uppercase}
.chip-teal{background:var(--teal-50);color:var(--teal-800)}
.chip-coral{background:var(--coral-50);color:var(--coral-dark)}
.chip-ink{background:#fff;color:var(--teal-900);border:1px solid var(--line)}
.chip-ok{background:#e4f3ea;color:var(--ok)}

/* section */
section.sec{padding:100px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:48px}
.section-head p{max-width:440px;color:var(--ink-2);margin:0;font-size:15px}
h2.display{font-size:clamp(40px,5.2vw,72px)}

/* utility */
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;align-items:center;gap:12px}

/* card base */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}

/* responsive basics */
@media(max-width:960px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
}