/* ---------- Base / Typography ---------- */
:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#6b6b6b;
  --container:1200px;

  --black:#000;
  --white:#fff;
  --taupe:#e3ddd6;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
}

h1,h2,h3{
  font-family:'Playfair Display', Georgia, serif;
  font-weight:300;
  letter-spacing:-0.4px;
  margin:0;
}

.container{max-width:var(--container); margin-inline:auto; padding-inline:20px}

/* ---------- Header / Nav ---------- */
.nav-wrap{display:flex; align-items:center; justify-content:space-between}
.brand{
  text-decoration:none; color:var(--white);
  font-family:'Playfair Display', serif; font-size:1.4rem; font-weight:700;
}
.main-nav ul{display:flex; gap:30px; list-style:none; margin:0; padding:0}
.main-nav a{
  color:var(--white); text-decoration:none; font-weight:600;
}
.main-nav a:hover{opacity:.75}

/* ---------- Hero (image) ---------- */
.hero{
  position:relative; height:100vh; min-height:560px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  overflow:hidden; color:var(--white);
}

.hero-media{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.02); /* tiny zoom for luxe feel */
}

.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.58), rgba(0,0,0,.42));
}

.hero-inner{position:relative; z-index:1; padding:0 24px; max-width:1100px}

.display{
  font-size:clamp(2.2rem, 5.5vw + .5rem, 5.2rem);
  font-weight:700; line-height:1.1; letter-spacing:-.5px;
}
.display em{font-style:italic}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; text-decoration:none; font-weight:700;
  padding:16px 28px; border-radius:6px; transition:.25s ease;
}
.btn-pill{border-radius:999px; padding:16px 32px}
.btn-dark{background:var(--black); color:var(--white); border:1px solid var(--black)}
.btn-dark:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.18)}

/* CTA Row */
.hero-ctas{margin-top:28px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap}

/* ---------- Intro ---------- */
.intro{padding:88px 20px 64px; text-align:center}
.intro h2{font-size:clamp(1.6rem, 2.5vw + .5rem, 2.4rem); margin-bottom:12px}
.intro p{max-width:780px; margin:0 auto; color:var(--muted)}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid #eee; padding:34px 0; color:#777; text-align:center}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 820px){
  .main-nav ul{gap:18px}
  .brand{font-size:1.25rem}
}

footer {
  background-color: #000;       /* black background */
  color: #fff;                  /* white text */
  font-family: 'Helvetica Neue', Arial, sans-serif; /* clean sans serif */
  font-size: 11px;              /* slightly smaller text */
  font-weight: 400;             /* semi-bold */
  text-transform: uppercase;    /* all caps */
  letter-spacing: 1px;          /* adds spacing between letters */
  text-align: center;           /* center align */
  padding: 20px 0;              /* space above and below */
}

.hero h1 {
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);  /* bigger: ~35–48px */
  line-height: 1.2;
  font-weight: 300;  /* lighter, like Shaep */
}

.hero h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);  /* slightly bigger: ~22–32px */
  line-height: 1.3;
  font-weight: 300;  /* softer secondary line */
}

.hero .btn {
  font-size: 0.75rem;  
  font-weight: 500;    
  padding: 0.75rem 1.5rem; /* balanced pill button */
  border-radius: 9999px;
}

/* === Hero type & button overrides (place at very end) === */
.hero h1{
  font-size: clamp(2.4rem, 4.2vw, 3.2rem);  /* bigger */
  line-height: 1.2;
  font-weight: 400;                          /* thinner */
}

.hero h2{
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);   /* bigger but secondary */
  line-height: 1.3;
  font-weight: 300;
}

/* Your HTML uses .btn-dark / .btn-pill — target those, not .btn */
.hero .btn-dark,
.hero .btn-pill,
.hero .btn-dark.btn-pill{
  font-size: 0.9rem;               /* smaller label */
  font-weight: 400 !important;     /* un-bold the text */
  letter-spacing: 0.3px;
  text-transform: none;            /* remove all-caps if inherited */
  line-height: 1;
  padding: 12px 24px;              /* slightly smaller pill */
  border-radius: 9999px;
}


/* Brand name top-right */
.brand-text {
  white-space: nowrap;          /* keeps 'yoga with lisa' on one line */
}

/* Hero heading */
.display {
  text-wrap: balance;           /* evens out line breaks */
  word-break: keep-all;         /* don’t break inside words */
  overflow-wrap: normal;
  line-height: 1.15;
  max-width: 16ch;              /* ~16 characters per line feels elegant */
  margin: 0 auto;               /* centers within hero */
}

/* Keep specific words together */
.nowrap {
  white-space: nowrap;
}

/* Mobile tweaks */
@media (max-width: 430px) {
  .display {
    font-size: clamp(1.8rem, 7vw, 2.6rem);
    max-width: 18ch;           /* allow a bit more width on small screens */
    letter-spacing: -0.3px;
  }
}

/* Brand name top-right */
.brand-text {
  white-space: nowrap;          /* keeps 'yoga with lisa' on one line */
}

/* Hero heading */
.display {
  text-wrap: balance;           /* evens out line breaks */
  word-break: keep-all;         /* don’t break inside words */
  overflow-wrap: normal;
  line-height: 1.15;
  max-width: 16ch;              /* tighter column width for desktop */
  margin: 0 auto;
}

/* Keep specific phrases together */
.nowrap { white-space: nowrap; }

/* ——— Mobile headline comfort ——— */
@media (max-width: 430px){
  .hero .display,
  .display {
    font-size: clamp(1.8rem, 7.2vw, 2.4rem);
    max-width: 90vw;        /* use most of the viewport */
    padding-inline: 16px;   /* breathing room from edges */
    text-wrap: balance;
  }
}

/* Larger desktop screens: extra editorial feel */
@media (min-width: 1200px) {
  .display {
    max-width: 14ch;           /* narrow for elegant line breaks */
    font-size: clamp(2.8rem, 4vw, 4.2rem);
    line-height: 1.1;
  }
}
.brand {
  font-family: "amandine", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
  color: #ffffff;        /* adjust if you want a softer gray/white */
  letter-spacing: .02em;
  font-size: 3rem;

}

/* Login Button in Header */
.login-btn {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 200; /* Thin */
  border: 1px solid #000;   /* black outline */
  background: transparent;  /* see-through background */
  color: #000;              /* black text */
  padding: 6px 18px;
  border-radius: 20px;      /* pill style */
  text-decoration: none;
  transition: all 0.3s ease;
}

.login-btn:hover {
  background: #000;   /* black fill on hover */
  color: #fff;        /* invert to white text */
}

/* CTA Button (Hero Section) */
.btn {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 200; /* Thin */
  border-radius: 25px;
  padding: 12px 28px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
}

.btn-dark {
  background: #000;
  color: #fff;
  border: 1px solid #000;
}

.btn-dark:hover {
  background: #fff;
  color: #000;
}

.login-btn {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 200; /* Thin */
  border: 1px solid #000;   /* Black outline */
  background: transparent;  
  color: #000;
  padding: 6px 16px;
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-left: 12px;
}

.login-btn:hover {
  background: #000;
  color: #fff;
}

/* LOGIN button (force over nav link styles) */
.main-nav a.login-btn{
  display:inline-block;         /* needed so padding + border form a pill */
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:150;
  border:1px solid #000;
  background:000;
  color:#fff !important;        /* override white nav link color */
  padding:6px 16px;
  border-radius:20px;
  text-decoration:none;
  letter-spacing:.5px;
  transition:all .25s ease;
  margin-left:12px;             /* little gap from last nav link */
}
.main-nav a.login-btn:hover{
  background:#fff;
  color:#000 !important;
  border-color:#000;
}

/* Hero headline */
.display{
  text-wrap: balance;       /* balances lines nicely */
  word-break: keep-all;
  overflow-wrap: normal;
  line-height:1.15;
  max-width:24ch;           /* wider column -> 2 lines on desktop */
  margin:0 auto;
}

/* Mobile: allow a touch more width so it doesn't stack */
@media (max-width:430px){
  .display{
    font-size:clamp(1.9rem, 7vw, 2.6rem);
    max-width:26ch;         /* still likely 2 lines on small phones */
    letter-spacing:-0.2px;
  }
}

/* Large desktop: slightly tighter */
@media (min-width:1200px){
  .display{
    max-width:22ch;
    font-size:clamp(2.8rem, 4vw, 4.2rem);
    line-height:1.12;
  }
}

/* LOGIN button in header */
.main-nav a.login-btn {
  display: inline-block;         
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  background: #000;              /* black fill */
  color: #fff !important;        /* white text */
  padding: 10px 22px;            /* a bit more padding for balance */
  border-radius: 9999px;         /* full pill */
  text-decoration: none;
  letter-spacing: .5px;
  transition: all .25s ease;
  margin-left: 12px;             /* small gap */
}
.main-nav a.login-btn:hover {
  background: #fff;              /* invert on hover */
  color: #000 !important;        /* black text */
  border: 1px solid #000;
}

/* Force LOGIN to look like CTA button */
.main-nav .login-btn {
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #000;
  padding: 10px 22px;
  border-radius: 9999px;
}
.main-nav .login-btn:hover {
  background: #fff !important;
  color: #000 !important;
}

.main-nav .login-btn{
  background:#000 !important;
  color:#fff !important;
  border:1px solid #000 !important;
  border-radius:9999px !important;
  padding:10px 22px !important;
  display:inline-block !important;
}
.main-nav .login-btn:hover{
  background:#fff !important;
  color:#000 !important;
}

/* ===== LOGIN button – must be at the very end to win specificity ===== */
.site-header .main-nav a.login-btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 9999px;
  border: 1px solid #000;
  background: #000;              /* solid black like the hero CTA */
  color: #fff !important;        /* defeat .main-nav a { color: white } */
  font-weight: 700;
  font-size: 0.85rem;   /* or try 14px */
  letter-spacing: .2px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.site-header .main-nav a.login-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* ===== Mobile header & LOGIN pill ===== */
@media (max-width: 820px){
  .nav-wrap{ gap:12px; }
  .brand{ font-size:1.6rem; }           /* smaller logo text */
  .main-nav ul{
    gap:16px;
    align-items:center;
    flex-wrap:nowrap;                    /* keep on one line */
  }
  .main-nav a{ font-size:.9rem; }        /* smaller link text */

  /* Make the LOGIN pill smaller so it fits */
  .site-header .main-nav a.login-btn{
    padding:8px 16px;                    /* was 12px 24px */
    border-radius:9999px;
    font-weight:600;
  }
}

/* Extra-tight phones */
@media (max-width: 430px){
  .brand{ font-size:1.35rem; }
  .main-nav ul{ gap:12px; }
  .site-header .main-nav a.login-btn{
    padding:7px 14px;
    letter-spacing:.1px;
  }
}

/* Prevent any sideways scroll caused by transforms etc. */
html, body { overflow-x: hidden; }

@media (max-width: 430px){
  .display{
    max-width: 24ch;         /* a touch wider so it breaks into 2–3 lines nicely */
  }
  .hero .btn-dark.btn-pill{
    padding: 12px 22px;
  }
}

/* --- Nav alignment fixes (place at the very end) --- */
.site-header .main-nav ul{
  display:flex;           /* already flex, but ensure */
  align-items:center;     /* vertically center all items */
  gap:30px;
}

.site-header .main-nav a{
  display:inline-flex;    /* centers text inside links */
  align-items:center;
  line-height:1;          /* prevents baseline wobble */
}

/* Match LOGIN pill height to neighbors a bit tighter */
.site-header .main-nav a.login-btn{
  padding:10px 18px;      /* slightly shorter so it aligns */
  font-weight:400;        
}

/* ==== Sticky taupe header — final, authoritative ==== */

/* Base header: fixed and transparent over the hero */
.site-header{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  padding: 22px 0;
  background: transparent !important;     /* start transparent */
  z-index: 2000;                           /* above hero overlay */
  transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}

/* Scrolled state: taupe bar + subtle depth */
.site-header.scrolled{
  background: var(--taupe) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  backdrop-filter: saturate(110%) blur(6px);
}

/* Link colors: white on transparent, dark on taupe */
.site-header .brand,
.site-header .main-nav a{ color:#fff !important; }

.site-header.scrolled .brand,
.site-header.scrolled .main-nav a{ color:#111 !important; opacity:.9; }
.site-header.scrolled .main-nav a:hover{ opacity:1; }

/* Ensure the hero sits under the header */
.hero, .hero-media, .hero-overlay { z-index: 0; }
.hero-inner { z-index: 1; }

/* Keep LOGIN text white always */
.site-header .main-nav a.login-btn {
  color: #fff !important;
}

.site-header.scrolled .main-nav a.login-btn {
  color: #fff !important;   /* force white even when scrolled */
  border-color: #000;       /* keep the black pill outline */
  background: #000;         /* solid black fill (if you want) */
}

.site-header.scrolled .main-nav a.login-btn:hover {
  background: #fff;         /* invert on hover */
  color: #000 !important;   /* black text only on hover */
}

/* --- Mobile hero fixes (center + reflow) --- */
@media (max-width: 430px){
  /* Let the first line wrap normally on small screens */
  .nowrap { white-space: normal; }

  /* Give the headline a full-width, centered box with padding */
  .hero .display,
  .display{
    max-width: calc(100vw - 32px);   /* ~16px side padding */
    padding-inline: 16px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    text-wrap: balance;               /* nicer line breaks */
    overflow-wrap: anywhere;          /* never clip off-screen */
    font-size: clamp(1.75rem, 6.8vw, 2.35rem);  /* a touch smaller */
    line-height: 1.18;
  }

  /* iOS safe-area nicety (notch edges) */
  .hero .display{
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}
/* Keep LOGIN white in scrolled (taupe) state */
.site-header.scrolled .main-nav a.login-btn{
  color:#fff !important;
  background:#000;
  border-color:#000;
}

.hero .display {
  font-family: 'Playfair Display', Georgia, serif !important; /* or remove line per Option A */
  font-weight: 500 !important;           /* thinner Playfair that you have loaded */
  font-size: clamp(1.8rem, 4.5vw, 2.6rem) !important;
  line-height: 1.2 !important;
  /* keep your other lines as-is */
}

/* ===== Utilities ===== */
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden}

/* ===== Cards / Carousel ===== */
.cards{padding:48px 0}
.cards-row{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(240px, 320px);
  gap:16px;
  overflow-x:auto;
  padding-bottom:6px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.cards-row::-webkit-scrollbar{height:8px}
.cards-row::-webkit-scrollbar-thumb{background:#ddd;border-radius:8px}

.card{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  scroll-snap-align:start;
  background:#f7f7f7;
}
.card-link{display:block; position:relative}
.card-img{
  display:block; width:100%; height:100%;
  object-fit:cover; aspect-ratio: 4 / 5;
  transition:opacity .35s ease, transform .35s ease;
  backface-visibility:hidden;
}
.img-hover{position:absolute; inset:0; opacity:0; transform:scale(1.02)}
.card-tag{
  position:absolute; top:12px; right:12px;
  background:#111; color:#fff; font-size:.7rem; letter-spacing:.06em;
  padding:6px 10px; border-radius:999px
}
.card-cta{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  background:rgba(255,255,255,.92);
  color:#111; border:1px solid #111;
  padding:10px 18px; border-radius:999px; font-weight:700; font-size:.82rem;
  opacity:0; transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.card-cta span{white-space:nowrap}

/* Hover states for devices with fine pointer */
@media (hover:hover){
  .card:hover .img-hover{opacity:1; transform:scale(1)}
  .card:hover .img-default{opacity:0}
  .card:hover .card-cta{opacity:1; transform:translateX(-50%) translateY(-2px)}
}

/* Touch: show pill CTA always (can tweak to taste) */
@media (hover:none){
  .card-cta{opacity:1}
}

/* ===== Mission Banner ===== */
.mission{position:relative; border-radius:20px; overflow:hidden; margin:48px 20px}
.mission-media{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.02);
}
.mission-overlay{
  position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.40), rgba(0,0,0,.30));
}
.mission-inner{
  position:relative; z-index:1; text-align:center; color:#fff;
  padding:96px 20px;
}
.mission h2{
  font-family:'Playfair Display', Georgia, serif; font-weight:700;
  font-size:clamp(1.8rem, 4vw, 3rem); letter-spacing:-.3px; margin:0 0 12px;
}
.mission p{
  max-width:800px; margin:0 auto 22px; color:#f1f1f1; line-height:1.7;
}

/* Button variant used on mission */
.btn-outline{
  background:transparent; color:#fff; border:1.5px solid #fff;
}
.btn-outline:hover{
  background:#fff; color:#000; transform:translateY(-1px);
}

/* Mobile niceties */
@media (max-width: 480px){
  .cards-row{grid-auto-columns:78%}
  .mission{margin:32px 0; border-radius:0}
  .mission-inner{padding:72px 18px}
}

/* ===== Image banners: Membership + Founder ===== */
.membership,
.founder{
  position: relative;
  min-height: 420px;                 /* gives the section a visible height */
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
}

/* background image layer */
.membership-media,
.founder-media{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);            /* subtle luxe zoom */
  z-index: 0;
}

/* darken so text is readable */
.membership-overlay,
.founder-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.42), rgba(0,0,0,.28));
  z-index: 0;
}

/* content */
.membership-inner,
.founder-inner{
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin-inline: auto;
  padding: 64px 20px;                /* vertical breathing room */
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

.membership h2,
.founder h2{ 
  color:#fff; 
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  margin: 0 0 12px;
}

.membership p,
.founder p{
  max-width: 900px;
  margin: 10px 0;
  color: rgba(255,255,255,.92);
  font-weight: 400;
}

/* Button looks good on dark photos */
.membership .btn-outline,
.founder .btn-outline{
  border-color:#fff;
  color:#fff;
}
.membership .btn-outline:hover,
.founder .btn-outline:hover{
  background:#fff;
  color:#000;
}

/* Mobile */
@media (max-width: 600px){
  .membership, .founder{ min-height: 360px; }
  .membership-inner, .founder-inner{ padding: 40px 16px; }
}