/* ============================================================
   SALTY FLUIDS IV & WELLNESS — Design System v3
   Florida-warm. Clinical-cool. Teal anchors. Coral converts.
   Built from brand artifact design tokens.
   Montserrat headlines · Open Sans body · Playfair accent
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Open+Sans:ital,wght@0,400;0,600;1,400&family=Playfair+Display:ital@0;1&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand Colors */
  --brand-teal:   #00B4BF;
  --deep-teal:    #007A82;
  --teal-dark:    #005F66;
  --coral:        #F4613A;
  --coral-warm:   #FF8060;
  --coral-dark:   #C94A28;

  /* Alias map — keeps inline styles in HTML working */
  --midnight:     #101C20;
  --abyss:        #101C20;
  --deep:         #005F66;
  --teal:         #00B4BF;
  --teal-light:   #33C9D5;
  --coral-hover:  #C94A28;
  --amber:        #D4A843;
  --steel:        #8A9BA3;
  --smoke:        #8A9BA3;
  --ice:          #E4EAEC;
  --salt:         #F7F9F9;
  --white:        #FFFFFF;
  --black:        #101C20;

  /* Typography */
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body:    'Open Sans', system-ui, sans-serif;
  --font-data:    'Montserrat', system-ui, sans-serif;
  --font-accent:  'Playfair Display', Georgia, serif;

  /* Type Scale — fluid clamp for responsiveness */
  --text-mega:    clamp(2.75rem, 7vw, 5.5rem);
  --text-hero:    clamp(2.25rem, 5vw, 4rem);
  --text-h1:      clamp(1.875rem, 3.5vw, 3rem);
  --text-h2:      clamp(1.5rem, 2.75vw, 2.25rem);
  --text-h3:      clamp(1.1rem, 1.8vw, 1.625rem);
  --text-h4:      clamp(1rem, 1.4vw, 1.25rem);
  --text-body:    1rem;
  --text-lg:      1.125rem;
  --text-sm:      0.875rem;
  --text-xs:      0.75rem;

  /* Spacing */
  --space-2xs:    0.25rem;
  --space-xs:     0.5rem;
  --space-sm:     1rem;
  --space-md:     1.5rem;
  --space-lg:     2.5rem;
  --space-xl:     4rem;
  --space-2xl:    5rem;
  --space-3xl:    6rem;
  --space-4xl:    10rem;

  /* Layout */
  --max-w:        1200px;
  --max-narrow:   800px;
  --max-wide:     1400px;
  --gutter:       clamp(1.25rem, 4vw, 2.5rem);

  /* Easing */
  --ease:         cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur:          0.25s;
  --dur-slow:     0.4s;

  /* Shadows */
  --shadow-sm:    0 1px 4px rgba(0,0,0,0.06);
  --shadow-md:    0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.14);
  --shadow-btn:   0 4px 16px rgba(0,122,130,0.25);

  /* Radius */
  --radius:       8px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-full:  999px;
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);font-size:var(--text-body);line-height:1.65;
  color:#2B3940;background:var(--white);
  -webkit-font-smoothing:antialiased;padding-bottom:42px;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--deep-teal);text-decoration:none;transition:color var(--dur) var(--ease)}
a:hover{color:var(--brand-teal)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--brand-teal);outline-offset:2px;border-radius:4px;
}
ul,ol{list-style:none}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1,h2,h3,h4,h5{
  font-family:var(--font-display);line-height:1.15;
  letter-spacing:-0.01em;color:var(--midnight);font-weight:700;
}
h1{font-size:var(--text-h1);font-weight:800}
h2{font-size:var(--text-h2);font-weight:700}
h3{font-size:var(--text-h3);font-weight:600}
h4{font-size:var(--text-h4);font-weight:600}

.text-mega{
  font-family:var(--font-display);font-size:var(--text-mega);
  font-weight:800;line-height:1.05;letter-spacing:-0.02em;
}
.text-hero{font-size:var(--text-hero);font-weight:800;letter-spacing:-0.02em;line-height:1.1}
.tag{
  font-family:var(--font-data);font-size:var(--text-xs);
  font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
}
.data{font-family:var(--font-data);font-size:0.85rem;font-weight:500}

/* ============================================================
   LAYOUT
   ============================================================ */
.contain{max-width:var(--max-w);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.contain--narrow{max-width:var(--max-narrow)}
.contain--wide{max-width:var(--max-wide)}

.sec{padding:var(--space-3xl) 0}
.sec--dark{background:var(--midnight);color:rgba(247,249,249,0.85)}
.sec--dark h1,.sec--dark h2,.sec--dark h3,.sec--dark h4{color:var(--white)}
.sec--abyss{background:var(--midnight);color:rgba(247,249,249,0.85)}
.sec--abyss h1,.sec--abyss h2,.sec--abyss h3,.sec--abyss h4{color:var(--white)}
.sec--salt{background:var(--salt)}
.sec--ice{background:var(--ice)}

/* ============================================================
   HEADER — White, clean, sticky
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(255,255,255,0.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--ice);
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
}
.header-inner{
  max-width:var(--max-wide);margin:0 auto;padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;height:84px;
}
.logo{display:flex;align-items:center;gap:0.75rem}
.logo img{height:72px;width:auto;border-radius:50%;object-fit:cover;box-shadow:0 3px 14px rgba(0,0,0,0.22)}
.logo-text{
  font-family:var(--font-display);font-weight:800;font-size:1.05rem;
  color:var(--midnight);letter-spacing:0.04em;text-transform:uppercase;line-height:1.1;
}
.logo-text span{
  display:block;font-family:var(--font-data);font-size:0.6rem;font-weight:600;
  letter-spacing:0.14em;color:var(--brand-teal);text-transform:uppercase;margin-top:2px;
}

.nav-links{display:flex;align-items:center;gap:clamp(1rem,2vw,1.75rem)}
.nav-links a{
  font-family:var(--font-display);font-weight:600;font-size:0.8rem;
  color:rgba(43,57,64,0.7);text-transform:uppercase;letter-spacing:0.05em;position:relative;
}
.nav-links a::after{
  content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;
  background:var(--brand-teal);transition:width var(--dur) var(--ease);
}
.nav-links a:hover,.nav-links a.active{color:var(--midnight)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{
  font-weight:700!important;color:var(--white)!important;background:var(--coral);
  padding:0.5rem 1.25rem;border-radius:var(--radius-full);letter-spacing:0.03em!important;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)!important;
  box-shadow:0 3px 10px rgba(244,97,58,0.3)!important;
}
.nav-cta::after{display:none!important}
.nav-cta:hover{background:var(--coral-dark)!important;color:var(--white)!important;transform:translateY(-1px);box-shadow:0 5px 16px rgba(244,97,58,0.4)!important}

.nav-social{display:none}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:0.5rem;z-index:1001}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--midnight);margin:5px 0;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);border-radius:2px}
.nav-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.nav-overlay{position:fixed;inset:0;background:rgba(16,28,32,0.5);z-index:999;opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease)}
.nav-overlay.active{opacity:1;pointer-events:auto}

/* ============================================================
   HERO — Full-bleed cinematic
   ============================================================ */
.hero{
  position:relative;min-height:100svh;min-height:100vh;
  display:flex;align-items:flex-end;overflow:hidden;background:var(--midnight);
  padding-top:84px;
}
.hero__bg{position:absolute;inset:0;z-index:1}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(
    0deg,
    rgba(16,28,32,0.92) 0%,
    rgba(16,28,32,0.55) 40%,
    rgba(16,28,32,0.2) 100%
  );
}
.hero__content{
  position:relative;z-index:2;
  max-width:var(--max-wide);margin:0 auto;width:100%;
  padding:0 var(--gutter) var(--space-3xl);
}
.hero__tag{display:inline-block;color:var(--brand-teal);margin-bottom:var(--space-sm)}
.hero h1{color:var(--white);margin-bottom:var(--space-md);max-width:14ch}
.hero__sub{font-size:var(--text-lg);color:rgba(247,249,249,0.75);max-width:42ch;margin-bottom:var(--space-lg);line-height:1.7}
.hero__tagline{font-family:var(--font-accent);font-style:italic;font-size:clamp(1.375rem,2.75vw,2rem);color:var(--brand-teal);margin:calc(-0.375rem) 0 var(--space-md);letter-spacing:0.01em;line-height:1.2}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center}

/* Page Hero (inner pages) */
.page-hero{
  position:relative;padding:calc(76px + var(--space-3xl)) 0 var(--space-2xl);
  background:var(--midnight);overflow:hidden;
}
.page-hero__bg{position:absolute;inset:0;z-index:0}
.page-hero__bg img{width:100%;height:100%;object-fit:cover;opacity:0.65}
.page-hero__bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,28,32,0.3) 0%,rgba(16,28,32,0.85) 100%);
}
.page-hero .contain{position:relative;z-index:1}
.page-hero h1{color:var(--white);margin-bottom:var(--space-xs)}
.page-hero p{color:rgba(247,249,249,0.7);font-size:var(--text-lg);max-width:50ch}

/* ============================================================
   BUTTONS — Pill shape, teal→coral hover signature
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:0.5rem;
  font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);
  padding:0.875rem 2rem;border-radius:var(--radius-full);border:none;cursor:pointer;
  text-decoration:none;transition:all var(--dur) var(--ease);
  letter-spacing:0.04em;text-transform:uppercase;line-height:1;
}
/* Primary teal → coral on hover (brand signature interaction) */
.btn--teal{background:var(--deep-teal);color:var(--white);box-shadow:var(--shadow-btn)}
.btn--teal:hover{background:var(--coral);color:var(--white);transform:translateY(-2px);box-shadow:0 6px 20px rgba(244,97,58,0.35)}
/* Coral CTA — one per viewport max */
.btn--coral{background:var(--coral);color:var(--white);box-shadow:0 4px 14px rgba(244,97,58,0.3)}
.btn--coral:hover{background:var(--coral-dark);color:var(--white);transform:translateY(-2px);box-shadow:0 6px 20px rgba(244,97,58,0.4)}
/* Ghost on dark bg */
.btn--ghost{background:transparent;color:var(--white);border:2px solid rgba(255,255,255,0.35)}
.btn--ghost:hover{color:var(--white);border-color:var(--white);background:rgba(255,255,255,0.08)}
/* Ghost on light bg */
.btn--ghost-dark{background:transparent;color:var(--midnight);border:2px solid var(--midnight)}
.btn--ghost-dark:hover{background:var(--midnight);color:var(--white)}
.btn--lg{padding:1.0625rem 2.5rem;font-size:var(--text-body)}

/* ============================================================
   EDITORIAL SPLIT — image-led two-column
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:560px}
.split--tall{min-height:680px}
.split__img{position:relative;overflow:hidden}
.split__img img:not(.split__product){width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease)}
.split:hover .split__img img:not(.split__product){transform:scale(1.03)}
.split__body{display:flex;flex-direction:column;justify-content:center;padding:var(--space-xl) clamp(2rem,5vw,4.5rem)}
.split__body .tag{color:var(--brand-teal);margin-bottom:var(--space-sm)}
.split__body h2{margin-bottom:var(--space-md)}
.split__body p{color:#2B3940;margin-bottom:var(--space-md);max-width:44ch;line-height:1.75}

/* Product overlay */
.split__product{
  position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);
  width:clamp(140px,18vw,200px);height:auto;z-index:2;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,0.4));
  transition:transform .4s var(--ease);
}
.split:hover .split__product{transform:translate(-50%,-52%)}

/* ============================================================
   FULL-BLEED IMAGE SECTION
   ============================================================ */
.full-bleed{
  position:relative;min-height:500px;display:flex;align-items:center;
  overflow:hidden;
}
.full-bleed__bg{position:absolute;inset:0}
.full-bleed__bg img{width:100%;height:100%;object-fit:cover}
.full-bleed__bg::after{content:'';position:absolute;inset:0;background:rgba(16,28,32,0.72)}
.full-bleed .contain{position:relative;z-index:1}

/* ============================================================
   PRICING
   ============================================================ */
.price-grid{display:grid;gap:var(--space-md)}
.price-row{
  display:grid;grid-template-columns:1fr auto;align-items:start;gap:var(--space-sm);
  padding:var(--space-md);border-bottom:1px solid var(--ice);
  transition:background var(--dur) var(--ease);
}
.price-row:hover{background:var(--salt)}
.price-row__name{font-family:var(--font-display);font-weight:600;font-size:var(--text-h4)}
.price-row__detail{font-size:var(--text-sm);color:var(--smoke);margin-top:0.2rem}
.price-row__badge{
  display:inline-block;font-family:var(--font-data);font-size:0.65rem;font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;background:var(--coral);color:var(--white);
  padding:0.2rem 0.6rem;border-radius:var(--radius-full);margin-left:0.5rem;vertical-align:middle;
}
.price-row__price{font-family:var(--font-display);font-weight:800;font-size:1.4rem;color:var(--deep-teal);white-space:nowrap}
.price-row__price del{font-size:var(--text-sm);color:var(--smoke);font-weight:400;font-family:var(--font-body);margin-right:0.4rem}

/* Pricing Cards */
.pricing-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-md)}
.pricing-card{
  background:var(--white);border:1px solid var(--ice);border-radius:var(--radius-lg);
  border-left:4px solid var(--brand-teal);
  padding:var(--space-lg);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
  box-shadow:var(--shadow-md);
}
.pricing-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.pricing-card--feat{border-left-color:var(--coral);position:relative}
.pricing-card--feat::before{
  content:'Most Popular';position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  font-family:var(--font-data);font-size:0.65rem;font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;background:var(--coral);color:var(--white);
  padding:0.25rem 0.85rem;border-radius:var(--radius-full);white-space:nowrap;
}
.pricing-card__title{font-family:var(--font-display);font-weight:700;font-size:var(--text-h3);margin-bottom:var(--space-xs)}
.pricing-card__price{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,4vw,2.75rem);color:var(--deep-teal);margin-bottom:var(--space-sm)}
.pricing-card__price sup{font-size:0.5em;font-weight:400;color:var(--smoke)}
.pricing-card__list{margin-bottom:var(--space-lg)}
.pricing-card__list li{
  padding:0.4rem 0 0.4rem 1.4rem;position:relative;font-size:var(--text-sm);color:#2B3940;
}
.pricing-card__list li::before{
  content:'';position:absolute;left:0;top:0.85rem;width:8px;height:8px;border-radius:50%;background:var(--brand-teal);
}

/* Add-on table */
.addon-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.addon-table thead{background:var(--midnight);color:var(--salt)}
.addon-table th{
  font-family:var(--font-data);font-size:var(--text-xs);font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;padding:0.75rem var(--space-sm);text-align:left;
}
.addon-table th:nth-child(2),.addon-table th:last-child{text-align:right}
.addon-table td{padding:0.75rem var(--space-sm);border-bottom:1px solid var(--ice)}
.addon-table td:nth-child(2),.addon-table td:last-child{text-align:right;font-family:var(--font-data);color:var(--deep-teal);font-weight:700}
.addon-table tbody tr{transition:background var(--dur) var(--ease)}
.addon-table tbody tr:hover{background:var(--salt)}

/* ============================================================
   STATS
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-lg);text-align:center}
.stat__num{font-family:var(--font-display);font-weight:800;font-size:clamp(2.5rem,5vw,3.5rem);color:var(--deep-teal);line-height:1;margin-bottom:0.25rem}
.stat__label{font-family:var(--font-data);font-size:var(--text-xs);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--smoke)}

/* ============================================================
   TESTIMONIALS — Playfair italic quotes
   ============================================================ */
.testimonial{position:relative;padding-left:var(--space-lg)}
.testimonial::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand-teal);border-radius:3px}
.testimonial blockquote{
  font-family:var(--font-accent);font-size:1.3rem;
  line-height:1.8;font-style:italic;margin-bottom:var(--space-sm);color:var(--white);
}
.testimonial cite{font-family:var(--font-data);font-size:var(--text-xs);font-style:normal;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--brand-teal)}
.sec--dark .testimonial::before,.sec--abyss .testimonial::before{background:var(--coral)}

/* ============================================================
   FAQ
   ============================================================ */
.faq-item{border-bottom:1px solid var(--ice)}
.faq-q{
  width:100%;background:none;border:none;text-align:left;font-family:var(--font-body);
  font-weight:600;font-size:var(--text-body);color:var(--midnight);padding:var(--space-md) 0;
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);
  transition:color var(--dur) var(--ease);
}
.faq-q:hover{color:var(--deep-teal)}
.sec--dark .faq-q,.sec--abyss .faq-q{color:rgba(247,249,249,0.85)}
.sec--dark .faq-q:hover,.sec--abyss .faq-q:hover{color:var(--brand-teal)}
.sec--dark .faq-item,.sec--abyss .faq-item{border-bottom-color:rgba(247,249,249,0.1)}
.sec--dark .faq-a p,.sec--abyss .faq-a p{color:rgba(247,249,249,0.6)}
.faq-q::after{content:'+';font-family:var(--font-display);font-size:1.5rem;font-weight:400;color:var(--brand-teal);transition:transform var(--dur) var(--ease);flex-shrink:0}
.faq-item.active .faq-q::after{content:'\2212'}
.faq-a{max-height:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease),padding var(--dur-slow) var(--ease)}
.faq-item.active .faq-a{max-height:500px;padding-bottom:var(--space-md)}
.faq-a p{color:var(--smoke);font-size:var(--text-sm);line-height:1.8}

/* ============================================================
   STEPS
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-lg)}
.step__num{font-family:var(--font-display);font-weight:800;font-size:clamp(3rem,5vw,4.5rem);color:rgba(0,180,191,0.15);line-height:1;margin-bottom:var(--space-sm)}
.sec--dark .step__num,.sec--abyss .step__num{color:rgba(0,180,191,0.12)}
.step h3{margin-bottom:var(--space-xs)}
.step p{font-size:var(--text-sm);color:var(--smoke)}

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline{position:relative;padding-left:var(--space-lg)}
.timeline::before{content:'';position:absolute;left:11px;top:0;bottom:0;width:2px;background:var(--ice)}
.timeline-item{position:relative;padding-bottom:var(--space-lg)}
.timeline-item:last-child{padding-bottom:0}
.timeline-item::before{
  content:'';position:absolute;left:calc(-1*var(--space-lg) + 4px);top:6px;
  width:16px;height:16px;border-radius:50%;background:var(--white);border:3px solid var(--brand-teal);
}
.timeline-item h4{margin-bottom:0.25rem}
.timeline-item p{font-size:var(--text-sm);color:var(--smoke)}
.timeline-item .data{color:var(--deep-teal);margin-top:0.25rem;font-weight:700}

/* ============================================================
   MEMBERSHIP — Deep teal gradient, Playfair accent
   ============================================================ */
.membership{
  background:linear-gradient(135deg,var(--midnight),var(--teal-dark));color:rgba(247,249,249,0.85);
  border-radius:var(--radius-lg);padding:var(--space-xl);
  display:grid;grid-template-columns:1fr auto;gap:var(--space-xl);align-items:center;
}
.membership h2,.membership h3{color:var(--white)}
.membership .tag{color:var(--brand-teal)}
.membership__price{font-family:var(--font-display);font-weight:800;font-size:clamp(2.5rem,5vw,3.5rem);color:var(--brand-teal)}
.membership__price span{font-size:0.4em;color:rgba(247,249,249,0.5);font-weight:400}

/* ============================================================
   PARTY TYPES — White cards, teal left border
   ============================================================ */
.party-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-sm)}
.party-card{
  padding:var(--space-md);background:var(--white);
  border-radius:var(--radius);border-left:4px solid var(--brand-teal);
  box-shadow:var(--shadow-md);
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.party-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.party-card h4{margin-bottom:0.35rem;color:var(--midnight)}
.party-card p{font-size:var(--text-sm);color:var(--smoke)}

/* ============================================================
   BIO
   ============================================================ */
.bio{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--space-xl);align-items:start}
.bio__img{position:relative;background:rgba(0,180,191,0.18);border-radius:var(--radius-lg);overflow:hidden}
.bio__img img{border-radius:0;width:100%;display:block}
.bio__img::after{
  content:'';position:absolute;bottom:-12px;right:-12px;width:60%;height:60%;
  border:3px solid var(--coral);border-radius:var(--radius-lg);z-index:-1;
}
/* Light teal section background for bio sections */
[data-oc="about-preview"],[data-oc="bio"]{background:rgba(0,180,191,0.08)}


/* ============================================================
   CONTACT FORM
   ============================================================ */
.contact-form{display:grid;gap:var(--space-md)}
.form-group{display:flex;flex-direction:column;gap:0.375rem}
.form-group label{font-family:var(--font-data);font-size:var(--text-xs);font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--midnight)}
.form-group input,.form-group textarea,.form-group select{
  font-family:var(--font-body);font-size:var(--text-body);padding:0.875rem var(--space-sm);
  border:1px solid var(--ice);border-radius:var(--radius);background:var(--white);color:var(--midnight);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--brand-teal);box-shadow:0 0 0 3px rgba(0,180,191,0.12)}
.form-group textarea{min-height:140px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}
.contact-two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl)}

/* ============================================================
   MAP
   ============================================================ */
.map-wrap{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--ice)}
.map-wrap iframe{display:block;width:100%;height:100%;min-height:400px;border:none}

/* ============================================================
   CONTACT INFO
   ============================================================ */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-lg)}
.info-item .tag{color:var(--brand-teal);margin-bottom:var(--space-xs);display:block}
.info-item a{color:var(--midnight);font-weight:600}
.info-item a:hover{color:var(--deep-teal)}

/* ============================================================
   NOTICE
   ============================================================ */
.notice{background:var(--salt);border-left:4px solid var(--brand-teal);padding:var(--space-md);border-radius:0 var(--radius) var(--radius) 0}
.notice p{font-size:var(--text-sm);color:var(--smoke)}
.notice strong{color:var(--midnight)}

/* HSA Badge */
.badge-hsa{
  display:inline-flex;align-items:center;gap:0.5rem;
  font-family:var(--font-data);font-size:var(--text-xs);font-weight:700;
  letter-spacing:0.06em;text-transform:uppercase;
  background:rgba(0,180,191,0.1);color:var(--deep-teal);
  padding:0.5rem 1rem;border-radius:var(--radius-full);border:1px solid rgba(0,180,191,0.25);
}

/* ============================================================
   INCLUDED LIST
   ============================================================ */
.included-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--space-sm)}
.included-item{display:flex;align-items:flex-start;gap:0.75rem;padding:var(--space-sm)}
.included-item__dot{
  width:20px;height:20px;background:var(--brand-teal);border-radius:50%;flex-shrink:0;margin-top:3px;
  position:relative;
}
.included-item__dot::after{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg);
  width:5px;height:9px;border-bottom:2px solid var(--white);border-right:2px solid var(--white);margin-top:-2px;
}
.included-item span{font-size:var(--text-sm);color:rgba(247,249,249,0.92);line-height:1.5}

/* ============================================================
   PARTNERS
   ============================================================ */
.partners{display:flex;flex-wrap:wrap;gap:var(--space-xl);align-items:center;justify-content:center}
.partners span{
  font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);
  color:var(--ice);opacity:0.5;transition:opacity var(--dur) var(--ease);
}
.partners span:hover{opacity:1}
.partners img{
  height:48px;width:auto;max-width:180px;
  filter:brightness(0) invert(1);opacity:0.55;
  mix-blend-mode:screen;
  object-fit:contain;transition:opacity var(--dur) var(--ease);
}
.partners img[src*="crunch"]{height:60px;max-width:160px}
.partners img[src*="studio-central"]{height:72px;max-width:72px}
.partners img:hover{opacity:1}

/* ============================================================
   404
   ============================================================ */
.error-page{
  min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--midnight);padding:var(--space-xl) var(--gutter);
}
.error-page__code{
  font-family:var(--font-display);font-weight:800;font-size:clamp(6rem,15vw,14rem);
  line-height:1;margin-bottom:var(--space-sm);position:relative;
  background:linear-gradient(135deg,var(--brand-teal),var(--coral));-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;opacity:0.8;
}
.error-page h1{color:var(--white);font-size:var(--text-h2);margin-bottom:var(--space-sm)}
.error-page p{color:var(--smoke);margin-bottom:var(--space-lg);max-width:40ch;margin-left:auto;margin-right:auto}

/* ============================================================
   FEATURE LIST
   ============================================================ */
.feat-list li{
  padding:0.4rem 0 0.4rem 1.4rem;position:relative;font-size:var(--text-sm);color:#2B3940;
}
.feat-list li::before{content:'';position:absolute;left:0;top:0.75rem;width:8px;height:2px;background:var(--brand-teal)}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:0.08s}.reveal-d2{transition-delay:0.16s}.reveal-d3{transition-delay:0.24s}.reveal-d4{transition-delay:0.32s}

/* ============================================================
   FOOTER — Dark near-black, teal top accent
   ============================================================ */
.site-footer{
  background:var(--midnight);color:rgba(247,249,249,0.6);
  padding:var(--space-2xl) 0 var(--space-lg);
  border-top:4px solid var(--brand-teal);
}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-xl);margin-bottom:var(--space-xl)}
.footer-brand .logo{margin-bottom:var(--space-sm)}
.footer-brand .logo-text{color:var(--white)}
.footer-brand p{font-size:var(--text-sm);max-width:30ch;line-height:1.7}
.footer-tagline{font-family:var(--font-accent);font-style:italic;color:var(--brand-teal);font-size:var(--text-sm);margin-top:var(--space-xs)}
.footer-social{display:flex;gap:var(--space-sm);margin-top:var(--space-md);align-items:center}
.footer-social a{color:rgba(247,249,249,0.45);transition:color var(--dur) var(--ease);display:flex;align-items:center;line-height:1}
.footer-social a:hover{color:var(--brand-teal)}
.footer-col h4{
  font-family:var(--font-data);font-size:var(--text-xs);font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--brand-teal);margin-bottom:var(--space-sm);
}
.footer-col a{display:block;color:rgba(247,249,249,0.6);font-size:var(--text-sm);padding:0.3rem 0;transition:color var(--dur) var(--ease)}
.footer-col a:hover{color:var(--white)}
.footer-bottom{
  border-top:1px solid rgba(0,180,191,0.12);padding-top:var(--space-md);
  display:flex;justify-content:space-between;align-items:center;font-size:var(--text-xs);
}
.footer-bottom a{color:rgba(247,249,249,0.4)}
.footer-bottom a:hover{color:var(--brand-teal)}

/* ============================================================
   SKIP LINK
   ============================================================ */
.skip-link{
  position:absolute;top:-100px;left:var(--gutter);background:var(--brand-teal);color:var(--midnight);
  padding:0.75rem 1.5rem;border-radius:var(--radius);font-weight:700;z-index:10000;
  transition:top var(--dur) var(--ease);
}
.skip-link:focus{top:var(--space-sm);color:var(--midnight)}

/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */
@media(max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .bio{grid-template-columns:1fr;gap:var(--space-lg)}
  .bio__img::after{display:none}
  .split{grid-template-columns:1fr;min-height:auto}
  .split__img{height:360px}
  .split__body{padding:var(--space-xl) var(--gutter)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .membership{grid-template-columns:1fr;text-align:center}
  .contact-two-col{grid-template-columns:1fr}
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */
@media(max-width:768px){
  .nav-links{
    position:fixed;top:0;right:-100%;width:min(85vw,360px);height:100vh;
    background:var(--midnight);flex-direction:column;align-items:flex-start;
    padding:108px var(--space-lg) var(--space-lg);gap:0;
    transition:right var(--dur) var(--ease);box-shadow:-10px 0 30px rgba(0,0,0,0.3);
  }
  .nav-links.open{right:0}
  .nav-links a{
    font-size:var(--text-body);padding:var(--space-sm) 0;width:100%;
    border-bottom:1px solid rgba(0,180,191,0.1);color:rgba(247,249,249,0.75);
  }
  .nav-links a:hover,.nav-links a.active{color:var(--teal)}
  .nav-links a::after{display:none}
  .nav-cta{margin-top:var(--space-sm);text-align:center;justify-content:center;width:100%}
  .nav-toggle{display:block}
  .nav-social{display:flex;justify-content:center;gap:1.5rem;width:100%;padding:var(--space-sm) 0 var(--space-md);border-bottom:1px solid rgba(0,180,191,0.15);margin-bottom:var(--space-xs)}
  .nav-social a{color:rgba(247,249,249,0.55);display:flex;align-items:center;transition:color var(--dur) var(--ease)}
  .nav-social a:hover{color:var(--brand-teal)}
  .hero h1{max-width:none}
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{text-align:center;justify-content:center}
  .sec{padding:var(--space-2xl) 0}
  .steps{grid-template-columns:1fr;gap:var(--space-md)}
  .price-row{grid-template-columns:1fr;gap:0.4rem}
  .price-row__price{font-size:1.2rem}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:var(--space-lg)}
  .footer-bottom{flex-direction:column;gap:var(--space-sm);text-align:center}
  .stats{grid-template-columns:repeat(2,1fr)}
  .party-grid{grid-template-columns:1fr}
  .info-grid{grid-template-columns:1fr}
  .split__product{width:100px;top:50%;left:50%;transform:translate(-50%,-50%)}
}