/*
Theme Name: Bali Shower Filter
Theme URI: https://balishowerfilter.com
Author: Bali Shower Filter
Description: Official theme for Bali Shower Filter – premium travel water filtration systems with a heart for Indonesia.
Version: 2.4.3
License: GNU General Public License v2 or later
Text Domain: bali-shower-filter
Tags: one-page, custom-colors, custom-menu, featured-images, full-width-template
*/

/* =========================================================
   GOOGLE FONTS
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

/* =========================================================
   DESIGN TOKENS (matching original Tailwind theme exactly)
   ========================================================= */
:root {
  --font-sans: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Playfair Display', serif;

  /* Brand colours */
  --color-bali-sea:   teal;          /* #008080 */
  --color-bali-sky:   #87ceeb;
  --color-bali-sand:  beige;         /* #f5f5dc */
  --color-bali-deep:  #004d4d;

  /* Slate palette */
  --color-slate-100: oklch(96.8% .007 247.896);   /* ~#f1f5f9 */
  --color-slate-400: oklch(70.4% .04 256.788);    /* ~#94a3b8 */
  --color-slate-500: oklch(55.4% .046 257.417);   /* ~#64748b */
  --color-slate-600: oklch(44.6% .043 257.281);   /* ~#475569 */
  --color-slate-900: oklch(20.8% .042 265.755);   /* ~#0f172a */
  --color-white: #fff;

  /* Shadows */
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.25);

  /* Radii */
  --radius-xl:  .75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
}

/* =========================================================
   RESET
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; line-height: 1.5; }
body {
  font-family: var(--font-sans);
  color: var(--color-slate-900);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  /* selection colour matching original */
}
body ::selection { background: rgba(0,128,128,.3); }

h1,h2,h3,h4,h5,h6 { font-family: var(--font-serif); font-weight: 700; line-height: 1.2; }
a { color: inherit; text-decoration: none; }
img,svg { display: block; max-width: 100%; height: auto; }
ul { list-style: none; }
button,input,select,textarea { font: inherit; color: inherit; background: transparent; }

/* =========================================================
   GLASS UTILITY  (used on nav, waitlist card, quote)
   ========================================================= */
.glass {
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* =========================================================
   NAV  — fixed top-0 w-full z-50 glass py-4 px-6 md:px-12
   ========================================================= */
.bsf-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Light white background visible from the very first scroll position */
  background: rgba(255,255,255,0.97);
  border-bottom: 1px solid rgba(0,128,128,.12);
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background .3s, box-shadow .3s, border-color .3s;
}
@media (min-width: 768px) { .bsf-nav { padding-left: 3rem; padding-right: 3rem; } }

/* Brand / logo */
.bsf-nav__brand { display: flex; align-items: center; gap: .5rem; }
.bsf-nav__brand-icon {
  width: 2.5rem; height: 2.5rem;         /* w-10 h-10 */
  background: var(--color-bali-sea);
  border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  color: white;
  box-shadow: var(--shadow-lg);           /* shadow-lg */
  flex-shrink: 0;
}
.bsf-nav__brand-icon svg { width: 1.5rem; height: 1.5rem; } /* size:24 */
.bsf-nav__brand-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.025em;               /* tracking-tight */
  color: var(--color-bali-deep);
}

/* Nav links — hidden md:flex gap-8 font-medium text-bali-deep/80 */
.bsf-nav__links {
  display: none;
  gap: 2rem;
  font-weight: 500;
  color: rgba(0,77,77,.8);               /* text-bali-deep/80 */
}
@media (min-width: 768px) { .bsf-nav__links { display: flex; } }
.bsf-nav__links a { transition: color .15s; }
.bsf-nav__links a:hover { color: var(--color-bali-sea); }

/* Notify Me button — bg-bali-sea text-white px-6 py-2 rounded-full font-semibold hover:bg-bali-deep shadow-md */
.bsf-nav__notify {
  background: var(--color-bali-sea);
  color: white;
  padding: .5rem 1.5rem;
  border-radius: 9999px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background .15s;
  border: none;
}
.bsf-nav__notify:hover { background: var(--color-bali-deep); }

/* =========================================================
   HERO  — min-h-screen relative overflow-hidden bg-bali-sea
   ========================================================= */
.bsf-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-bali-sea);
  /* Reserve space for the absolutely-positioned stats bar so content never overlaps it */
  padding-bottom: 10rem;
}

/* Full-bleed bg image — absolute inset-0 w-full h-full object-cover z-0 */
.bsf-hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Dark overlay — absolute inset-0 bg-black/40 z-1 */
.bsf-hero__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 1;
}

/* Gradient fade to white — absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-white/90 z-2 */
.bsf-hero__fade {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent, transparent, rgba(255,255,255,.9));
  z-index: 2;
}

/* Content block — relative z-10 text-center px-4 max-w-4xl mx-auto */
.bsf-hero__content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 1rem;
  max-width: 56rem;
  margin: 0 auto;
}

/* "Coming Soon" badge */
.bsf-hero__badge {
  display: inline-block;
  background: rgba(0,128,128,.2);
  border: 1px solid rgba(0,128,128,.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: white;
  font-weight: 700;
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .25rem 1rem;
  border-radius: 9999px;
  margin-bottom: 1.5rem;
  font-family: var(--font-sans);
}

/* Hero h1 — single clean sans-serif, maximised for legibility against the background image */
.bsf-hero__title {
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif; /* explicit — never inherits serif */
  font-size: 3rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1.5rem;
  line-height: 1.15;
  letter-spacing: 0;                   /* natural spacing — no artificial compression */
  /* text-shadow gives sharper edge contrast than filter:drop-shadow on text */
  text-shadow:
    0 2px 8px  rgba(0,0,0,.55),
    0 4px 24px rgba(0,0,0,.35);
}
@media (min-width: 768px) { .bsf-hero__title { font-size: 4.5rem; } }
@media (min-width: 1024px) { .bsf-hero__title { font-size: 6rem; } }
/* Ensure any em tags inside the title never switch font or style */
.bsf-hero__title em,
.bsf-hero__title strong {
  font-style: normal;
  font-weight: 700;
  font-family: inherit;
}

/* Hero subtitle — text-xl md:text-2xl text-white/90 mb-10 max-w-2xl mx-auto drop-shadow-md */
.bsf-hero__subtitle {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  color: rgba(255,255,255,.9);
  margin-bottom: 2.5rem;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.12));
}
@media (min-width: 768px) { .bsf-hero__subtitle { font-size: 1.5rem; } }

/* Button row — flex flex-col sm:flex-row gap-4 justify-center */
.bsf-hero__buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}
@media (min-width: 640px) { .bsf-hero__buttons { flex-direction: row; } }

/* Primary CTA — bg-white text-bali-deep px-8 py-4 rounded-full font-bold text-lg hover:bg-bali-sand shadow-xl flex items-center gap-2 */
.bsf-btn-white {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: white;
  color: var(--color-bali-deep);
  padding: 1rem 2rem;
  border-radius: 9999px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.125rem;
  box-shadow: var(--shadow-xl);
  transition: background .15s;
  text-decoration: none;
}
.bsf-btn-white:hover { background: var(--color-bali-sand); }

/* Secondary CTA — bg-bali-sea/80 backdrop-blur-md text-white px-8 py-4 rounded-full font-bold text-lg border border-white/20 shadow-xl */
.bsf-btn-glass {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(0,128,128,.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: white;
  padding: 1rem 2rem;
  border-radius: 9999px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.125rem;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: var(--shadow-xl);
  transition: background .15s;
  text-decoration: none;
}
.bsf-btn-glass:hover { background: var(--color-bali-sea); }

/* ── Hero stats bar ── */
.bsf-hero__stats {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 10;
  /* Grid: 3 equal columns always — no overflow on any screen size */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 1.25rem 1rem 1.5rem;
  /* Soft white backdrop so stats are legible against the gradient and clearly separated from next section */
  background: rgba(255,255,255,0.92);
  border-top: 1px solid rgba(0,128,128,.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@media (min-width: 768px) {
  .bsf-hero__stats {
    padding: 1.5rem 3rem 2rem;
  }
}

.bsf-hero__stat {
  text-align: center;
  padding: 0 0.5rem;
  /* Divider lines between stats */
  border-right: 1px solid rgba(0,128,128,.15);
}
.bsf-hero__stat:last-child { border-right: none; }

/* Value: smaller on mobile so "Easy 2-Min" and "99% Pure" fit comfortably */
.bsf-hero__stat-value {
  font-family: var(--font-sans);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-bali-deep);
  line-height: 1.2;
  white-space: nowrap;
}
@media (min-width: 480px) { .bsf-hero__stat-value { font-size: 1.625rem; } }
@media (min-width: 768px) { .bsf-hero__stat-value { font-size: 2.25rem; } }

.bsf-hero__stat-label {
  font-family: var(--font-sans);
  font-size: .6875rem;
  color: var(--color-slate-600);
  margin-top: .2rem;
  line-height: 1.3;
}
@media (min-width: 480px) { .bsf-hero__stat-label { font-size: .75rem; } }
@media (min-width: 768px) { .bsf-hero__stat-label { font-size: .875rem; } }

/* =========================================================
   MISSION SECTION — py-24 px-6 bg-bali-sand/30
   ========================================================= */
.bsf-mission {
  padding: 6rem 1.5rem;
  background: rgba(245,245,220,.3);     /* bg-bali-sand/30 */
}
.bsf-mission__inner {
  max-width: 80rem;
  margin: 0 auto;
  display: grid;
  gap: 4rem;
  align-items: center;
}
@media (min-width: 768px) { .bsf-mission__inner { grid-template-columns: 1fr 1fr; gap: 4rem; } }

/* h2 — text-4xl md:text-5xl font-bold text-bali-deep mb-8 */
.bsf-mission h2 {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-bali-deep);
  margin-bottom: 2rem;
}
@media (min-width: 768px) { .bsf-mission h2 { font-size: 3rem; } }
.bsf-mission h2 em { font-style: italic; }

/* text-lg text-slate-600 mb-6 leading-relaxed */
.bsf-mission__p {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  color: var(--color-slate-600);
  margin-bottom: 1.5rem;
  line-height: 1.625;
}
.bsf-mission__p--bold { font-weight: 600; margin-bottom: 2rem; }

/* Feature grid — grid grid-cols-2 gap-6 */
.bsf-mission__features { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

/* flex gap-4 items-start */
.bsf-feature { display: flex; gap: 1rem; align-items: flex-start; }
.bsf-feature__icon {
  flex-shrink: 0;
  padding: .75rem;
  background: rgba(0,128,128,.1);       /* bg-bali-sea/10 */
  border-radius: var(--radius-xl);
  color: var(--color-bali-sea);
  display: flex; align-items: center; justify-content: center;
}
.bsf-feature__title { font-family: var(--font-sans); font-weight: 700; color: var(--color-bali-deep); margin-bottom: .125rem; }
.bsf-feature__desc  { font-family: var(--font-sans); font-size: .875rem; color: var(--color-slate-500); }

/* Image side */
.bsf-mission__img-wrap { position: relative; }
.bsf-mission__img {
  aspect-ratio: 1;
  border-radius: var(--radius-3xl);
  overflow: hidden;
  box-shadow: var(--shadow-2xl);
}
.bsf-mission__img img { width: 100%; height: 100%; object-fit: cover; }

/* Floating quote — absolute -bottom-8 -left-8 glass p-8 rounded-2xl shadow-xl max-w-xs hidden lg:block */
.bsf-mission__quote {
  display: none;
  position: absolute;
  bottom: -2rem; left: -2rem;
  padding: 2rem;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  max-width: 20rem;
  /* glass */
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
@media (min-width: 1024px) { .bsf-mission__quote { display: block; } }
/* italic text-bali-deep font-serif text-lg */
.bsf-mission__quote p {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-bali-deep);
  font-size: 1.125rem;
  line-height: 1.5;
}

/* =========================================================
   TRAVEL ESSENTIALS / PRODUCTS — py-24 px-6 bg-white
   ========================================================= */
.bsf-products { padding: 6rem 1.5rem; background: var(--color-white); }
.bsf-products__inner { max-width: 80rem; margin: 0 auto; }

/* Section header — text-center mb-16 */
.bsf-section-hd { text-align: center; margin-bottom: 4rem; }
/* text-4xl md:text-5xl font-bold text-bali-deep mb-4 */
.bsf-section-hd h2 { font-size: 2.25rem; font-weight: 700; color: var(--color-bali-deep); margin-bottom: 1rem; }
@media (min-width: 768px) { .bsf-section-hd h2 { font-size: 3rem; } }
/* text-slate-500 max-w-2xl mx-auto */
.bsf-section-hd p { font-family: var(--font-sans); color: var(--color-slate-500); max-width: 42rem; margin: 0 auto; }

/* grid md:grid-cols-3 gap-8 */
.bsf-products__grid { display: grid; gap: 2rem; }
@media (min-width: 768px) { .bsf-products__grid { grid-template-columns: repeat(3,1fr); } }

/* Product card — group p-8 rounded-3xl bg-bali-sand/20 border border-bali-sea/10 hover:border-bali-sea/30 transition-all */
.bsf-card {
  padding: 2rem;
  border-radius: var(--radius-3xl);
  background: rgba(245,245,220,.2);
  border: 1px solid rgba(0,128,128,.1);
  transition: border-color .3s, transform .3s;
  position: relative;
}
.bsf-card:hover {
  border-color: rgba(0,128,128,.3);
  transform: translateY(-.625rem);      /* whileHover:{y:-10} */
}

/* Icon wrapper — aspect-square rounded-2xl bg-white mb-6 overflow-hidden flex items-center justify-content-center p-8 */
.bsf-card__icon-wrap {
  aspect-ratio: 1;
  border-radius: var(--radius-2xl);
  background: white;
  margin-bottom: 1.5rem;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
}

/* Inner relative container for icon + optional badge */
.bsf-card__icon-inner { position: relative; display: inline-flex; }

/* The icon itself — transition on hover */
.bsf-card__icon {
  color: var(--color-bali-sea);
  transition: transform .3s;
}
.bsf-card:hover .bsf-card__icon { transform: scale(1.1); }   /* group-hover:scale-110 */

/* Card 2 uses text-bali-sky */
.bsf-card__icon--sky { color: var(--color-bali-sky); }

/* Wind icon rotates 45° on hover (Breeze Pro) */
.bsf-card__icon--wind { transition: transform .5s; }           /* duration-500 */
.bsf-card:hover .bsf-card__icon--wind { transform: rotate(45deg); } /* group-hover:rotate-45 */

/* Small badge on icon — absolute -bottom-2 -right-2 bg-bali-sea text-white p-2 rounded-full */
.bsf-card__badge {
  position: absolute;
  bottom: -.5rem; right: -.5rem;
  background: var(--color-bali-sea);
  color: white;
  padding: .5rem;
  border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
}

/* text-2xl font-bold text-bali-deep mb-2 */
.bsf-card h3 { font-size: 1.5rem; font-weight: 700; color: var(--color-bali-deep); margin-bottom: .5rem; }
/* text-slate-600 mb-4 */
.bsf-card > p { font-family: var(--font-sans); color: var(--color-slate-600); margin-bottom: 1rem; line-height: 1.5; }

/* Feature list — text-sm text-slate-500 space-y-2 mb-6 */
.bsf-card__features {
  font-family: var(--font-sans);
  font-size: .875rem;
  color: var(--color-slate-500);
  display: flex; flex-direction: column; gap: .5rem;
}
/* flex items-center gap-2 */
.bsf-card__features li { display: flex; align-items: center; gap: .5rem; }
.bsf-card__features li svg { flex-shrink: 0; color: var(--color-bali-sea); }

/* =========================================================
   IMPACT — py-24 px-6 bg-bali-deep text-white relative overflow-hidden
   ========================================================= */
.bsf-impact {
  padding: 6rem 1.5rem;
  background: var(--color-bali-deep);
  color: white;
  position: relative;
  overflow: hidden;
}

/* Decorative blobs */
.bsf-impact__blob-tr {
  position: absolute; top: 0; right: 0;
  width: 24rem; height: 24rem;
  background: rgba(0,128,128,.2);
  border-radius: 9999px;
  filter: blur(64px);
  transform: translate(12rem,-12rem);   /* -mr-48 -mt-48 */
}
.bsf-impact__blob-bl {
  position: absolute; bottom: 0; left: 0;
  width: 24rem; height: 24rem;
  background: rgba(135,206,235,.1);
  border-radius: 9999px;
  filter: blur(64px);
  transform: translate(-12rem,12rem);   /* -ml-48 -mb-48 */
}

/* max-w-4xl mx-auto text-center relative z-10 */
.bsf-impact__inner {
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 10;
}

/* Heart icon — mx-auto mb-8 text-bali-sky */
.bsf-impact__icon { margin: 0 auto 2rem; color: var(--color-bali-sky); display: flex; justify-content: center; }

/* text-4xl md:text-6xl font-bold mb-8 */
.bsf-impact h2 { font-size: 2.25rem; font-weight: 700; margin-bottom: 2rem; }
@media (min-width: 768px) { .bsf-impact h2 { font-size: 3.75rem; } }

/* text-xl text-white/80 mb-12 leading-relaxed */
.bsf-impact__text {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  color: rgba(255,255,255,.8);
  margin-bottom: 3rem;
  line-height: 1.625;
}

/* inline-block px-8 py-4 rounded-2xl border border-white/20 bg-white/5 backdrop-blur-sm */
.bsf-impact__stat {
  display: inline-flex;
  align-items: center;
  padding: 1rem 2rem;
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* text-bali-sky font-bold text-2xl */
.bsf-impact__pct { color: var(--color-bali-sky); font-weight: 700; font-size: 1.5rem; font-family: var(--font-sans); }
/* ml-3 text-lg */
.bsf-impact__label { margin-left: .75rem; font-size: 1.125rem; font-family: var(--font-sans); }

/* =========================================================
   WAITLIST — py-24 px-6 bg-bali-sand/10
   ========================================================= */
.bsf-waitlist { padding: 6rem 1.5rem; background: rgba(245,245,220,.1); }

/* max-w-3xl mx-auto glass p-12 rounded-[3rem] text-center shadow-2xl */
.bsf-waitlist__card {
  max-width: 48rem;
  margin: 0 auto;
  padding: 3rem;
  border-radius: 3rem;
  text-align: center;
  box-shadow: var(--shadow-2xl);
  /* glass */
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* text-3xl md:text-4xl font-bold text-bali-deep mb-4 */
.bsf-waitlist__card h2 { font-size: 1.875rem; font-weight: 700; color: var(--color-bali-deep); margin-bottom: 1rem; }
@media (min-width: 768px) { .bsf-waitlist__card h2 { font-size: 2.25rem; } }
/* text-slate-600 mb-8 */
.bsf-waitlist__card > p { font-family: var(--font-sans); color: var(--color-slate-600); margin-bottom: 2rem; line-height: 1.5; }

/* flex flex-col sm:flex-row gap-4 */
.bsf-waitlist__form { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .bsf-waitlist__form { flex-direction: row; } }

/* flex-1 px-6 py-4 rounded-full bg-white border border-bali-sea/20 focus:outline-none focus:ring-2 focus:ring-bali-sea */
.bsf-waitlist__input {
  flex: 1;
  padding: 1rem 1.5rem;
  border-radius: 9999px;
  background: white;
  border: 1px solid rgba(0,128,128,.2);
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-slate-900);
  transition: box-shadow .15s, border-color .15s;
  outline: none;
}
.bsf-waitlist__input:focus { border-color: var(--color-bali-sea); box-shadow: 0 0 0 2px rgba(0,128,128,.25); }
.bsf-waitlist__input::placeholder { color: var(--color-slate-400); }

/* bg-bali-sea text-white px-10 py-4 rounded-full font-bold hover:bg-bali-deep shadow-lg */
.bsf-waitlist__btn {
  background: var(--color-bali-sea);
  color: white;
  padding: 1rem 2.5rem;
  border-radius: 9999px;
  font-family: var(--font-sans);
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: background .15s;
  border: none;
  white-space: nowrap;
}
.bsf-waitlist__btn:hover { background: var(--color-bali-deep); }

/* mt-6 text-xs text-slate-400 */
.bsf-waitlist__note { font-family: var(--font-sans); font-size: .75rem; color: var(--color-slate-400); margin-top: 1.5rem; display: block; }

/* Success state */
.bsf-waitlist__success {
  display: none;
  padding: 1.5rem;
  background: rgba(0,128,128,.1);
  border-radius: var(--radius-2xl);
  color: var(--color-bali-sea);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.25rem;
}
.bsf-waitlist__success.active { display: block; }
.bsf-waitlist__form.hidden, .bsf-waitlist__note.hidden { display: none; }

/* =========================================================
   FOOTER — bg-white border-t border-slate-100 py-12 px-6
   ========================================================= */
.bsf-footer {
  background: var(--color-white);
  border-top: 1px solid var(--color-slate-100);
  padding: 3rem 1.5rem;
}

/* max-w-7xl mx-auto grid md:grid-cols-4 gap-12 */
.bsf-footer__grid {
  max-width: 80rem;
  margin: 0 auto;
  display: grid;
  gap: 3rem;
}
@media (min-width: 768px) { .bsf-footer__grid { grid-template-columns: repeat(4,1fr); } }

/* Brand col spans 2 — col-span-2 */
.bsf-footer__brand-col { grid-column: span 1; }
@media (min-width: 768px) { .bsf-footer__brand-col { grid-column: span 2; } }

/* Brand row — flex items-center gap-2 mb-6 */
.bsf-footer__brand { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; }
.bsf-footer__brand-icon {
  width: 2rem; height: 2rem;            /* w-8 h-8 */
  background: var(--color-bali-sea);
  border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  color: white;
  flex-shrink: 0;
}
.bsf-footer__brand-icon svg { width: 1.125rem; height: 1.125rem; } /* size:18 */
.bsf-footer__brand-name { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; color: var(--color-bali-deep); }

/* text-slate-500 max-w-sm mb-6 */
.bsf-footer__tagline { font-family: var(--font-sans); color: var(--color-slate-500); max-width: 20rem; margin-bottom: 1.5rem; font-size: .95rem; line-height: 1.5; }

/* Social icons — flex gap-4 */
.bsf-footer__socials { display: flex; gap: 1rem; }
/* w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center text-slate-600 hover:bg-bali-sea hover:text-white transition-all */
.bsf-footer__social {
  width: 2.5rem; height: 2.5rem;
  border-radius: 9999px;
  background: var(--color-slate-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-slate-600);
  transition: background .15s, color .15s;
}
.bsf-footer__social:hover { background: var(--color-bali-sea); color: white; }

/* Column heading — font-bold text-bali-deep mb-6 uppercase tracking-widest text-sm */
.bsf-footer__col-h {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--color-bali-deep);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .875rem;
}

/* Quick links — space-y-4 text-slate-500 */
.bsf-footer__links { display: flex; flex-direction: column; gap: 1rem; }
.bsf-footer__links a { font-family: var(--font-sans); color: var(--color-slate-500); font-size: .95rem; transition: color .15s; }
.bsf-footer__links a:hover { color: var(--color-bali-sea); }

/* Contact list — space-y-4 text-slate-500 */
.bsf-footer__contact { display: flex; flex-direction: column; gap: 1rem; }
/* li — flex items-start gap-3 */
.bsf-footer__contact li { display: flex; align-items: flex-start; gap: .75rem; font-family: var(--font-sans); color: var(--color-slate-500); font-size: .95rem; line-height: 1.4; }
.bsf-footer__contact li svg { flex-shrink: 0; color: var(--color-bali-sea); margin-top: .15rem; }

/* Bottom copyright — max-w-7xl mx-auto mt-12 pt-8 border-t border-slate-100 text-center text-slate-400 text-sm */
.bsf-footer__copy {
  max-width: 80rem;
  margin: 3rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--color-slate-100);
  text-align: center;
  font-family: var(--font-sans);
  font-size: .875rem;
  color: var(--color-slate-400);        /* text-slate-400 */
}

/* =========================================================
   INSIGHTS / BLOG PAGE
   ========================================================= */
.bsf-blog {
  padding: 8rem 1.5rem 6rem;
  min-height: 100vh;
}
.bsf-blog__inner { max-width: 80rem; margin: 0 auto; }
.bsf-blog__header { text-align: center; margin-bottom: 4rem; }
.bsf-blog__header h1 { font-size: 2.25rem; font-weight: 700; color: var(--color-bali-deep); margin-bottom: 1rem; }
@media (min-width: 768px) { .bsf-blog__header h1 { font-size: 3rem; } }
.bsf-blog__header p { font-family: var(--font-sans); color: var(--color-slate-500); max-width: 40rem; margin: 0 auto; }

.bsf-posts { display: grid; gap: 2rem; }
@media (min-width: 640px) { .bsf-posts { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .bsf-posts { grid-template-columns: repeat(3,1fr); } }

.bsf-post-card {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: white;
  border: 1px solid var(--color-slate-100);
  box-shadow: var(--shadow-md);
  transition: transform .3s, box-shadow .3s;
  display: flex;
  flex-direction: column;
}
.bsf-post-card:hover { transform: translateY(-.375rem); box-shadow: var(--shadow-xl); }

.bsf-post-card__thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: rgba(0,128,128,.1);
  display: flex; align-items: center; justify-content: center;
}
.bsf-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.bsf-post-card:hover .bsf-post-card__thumb img { transform: scale(1.05); }
.bsf-post-card__thumb-placeholder { color: var(--color-bali-sea); }

.bsf-post-card__body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }

.bsf-post-card__cat {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-bali-sea);
  margin-bottom: .75rem;
}
.bsf-post-card__title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-bali-deep);
  margin-bottom: .75rem;
  line-height: 1.3;
}
.bsf-post-card__title a { text-decoration: none; transition: color .15s; }
.bsf-post-card__title a:hover { color: var(--color-bali-sea); }

.bsf-post-card__excerpt {
  font-family: var(--font-sans);
  font-size: .9375rem;
  color: var(--color-slate-600);
  line-height: 1.6;
  margin-bottom: 1.25rem;
  flex: 1;
}
.bsf-post-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: .8125rem;
  color: var(--color-slate-400);
  border-top: 1px solid var(--color-slate-100);
  padding-top: 1rem;
  margin-top: auto;
}
.bsf-post-card__read-more {
  color: var(--color-bali-sea);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  transition: gap .2s;
}
.bsf-post-card__read-more:hover { gap: .5rem; }

/* Single post */
.bsf-single { padding: 8rem 1.5rem 6rem; }
.bsf-single__inner { max-width: 48rem; margin: 0 auto; }
.bsf-single__cat { font-family: var(--font-sans); font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--color-bali-sea); margin-bottom: 1rem; display: block; }
.bsf-single h1 { font-size: 2rem; color: var(--color-bali-deep); margin-bottom: 1rem; }
@media (min-width: 768px) { .bsf-single h1 { font-size: 2.75rem; } }
.bsf-single__meta { font-family: var(--font-sans); font-size: .875rem; color: var(--color-slate-400); margin-bottom: 2rem; }
.bsf-single__thumb { border-radius: var(--radius-2xl); overflow: hidden; margin-bottom: 2.5rem; }
.bsf-single__thumb img { width: 100%; height: auto; }
.bsf-single__content { font-family: var(--font-sans); color: var(--color-slate-600); line-height: 1.8; font-size: 1.0625rem; }
.bsf-single__content h2,
.bsf-single__content h3 { color: var(--color-bali-deep); margin: 2rem 0 1rem; }
.bsf-single__content p { margin-bottom: 1.25rem; }
.bsf-single__content a { color: var(--color-bali-sea); text-decoration: underline; }
.bsf-single__back { display: inline-flex; align-items: center; gap: .5rem; color: var(--color-bali-sea); font-family: var(--font-sans); font-weight: 600; margin-bottom: 2rem; transition: gap .2s; }
.bsf-single__back:hover { gap: .75rem; }

/* No-posts state */
.bsf-no-posts { text-align: center; padding: 4rem 0; }
.bsf-no-posts p { font-family: var(--font-sans); color: var(--color-slate-500); font-size: 1.125rem; }

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.bsf-reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity .6s ease, transform .6s ease;
}
.bsf-reveal.visible { opacity: 1; transform: translateY(0); }

.bsf-reveal-scale {
  opacity: 0;
  transform: scale(.9);
  transition: opacity .6s ease, transform .6s ease;
}
.bsf-reveal-scale.visible { opacity: 1; transform: scale(1); }

/* =========================================================
   WORDPRESS ADMIN BAR OFFSET
   ========================================================= */
.admin-bar .bsf-nav { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .bsf-nav { top: 46px; } }