/* ════════════════════════════════════════════
   SABEHUB — Main Stylesheet
   Brand guidelines: CLAUDE.md | Font: Poppins only
   ════════════════════════════════════════════ */

/* ── BRAND TOKENS ─────────────────────────────────────── */
:root {
  /* Palette */
  --black:      #0A0A0A;   /* headings, nav, buttons */
  --olive:      #6B6B35;   /* accents, tags, CTA band */
  --khaki:      #C4B483;   /* signature brand color */
  --khaki-bg:   #C9BC8F;   /* section backgrounds */
  --khaki-lt:   #DDD5B4;
  --khaki-xlt:  #EDE7D0;
  --khaki-pale: #F5F1E4;   /* page background */
  --burgundy:   #7A2E35;   /* sparingly — drama/contrast */
  --bluegrey:   #D0DCDA;
  --sagegrey:   #C4C4A0;   /* wellness sections */
  --white:      #FFFFFF;
  --offwhite:   #FAF8F2;

  /* ── BACKGROUND IMAGES ────────────────────────────────
     Replace each URL with real SabeHub photography.
     One variable = one image = one line to update.
  ──────────────────────────────────────────────────── */
  --img-parallax:   url('https://images.unsplash.com/photo-1497366216548-37526070297c?w=1800&q=80&auto=format&fit=crop');
  --img-foundry-bg: url('https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=1600&q=70&auto=format&fit=crop');
}

/* ── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Poppins', sans-serif;
  background: var(--khaki-pale);
  color: var(--black);
  overflow-x: hidden;
  cursor: none;
}

/* ── CURSOR ────────────────────────────────────────────── */
#cur, #cur-r {
  position: fixed; pointer-events: none; border-radius: 50%;
  transform: translate(-50%,-50%); z-index: 9999;
}
#cur { width: 9px; height: 9px; background: var(--black); }
#cur-r {
  width: 30px; height: 30px;
  border: 1.5px solid var(--black);
  z-index: 9998;
  transition: left .1s ease, top .1s ease, width .3s, height .3s, border-color .3s;
}
body:has(a:hover) #cur-r,
body:has(button:hover) #cur-r { width: 46px; height: 46px; border-color: var(--olive); }

/* ── MOBILE MENU ───────────────────────────────────────── */
.mob {
  display: none; position: fixed; inset: 0;
  background: var(--black); z-index: 999;
  flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
}
.mob.open { display: flex; }
.mob a {
  font-family: 'Poppins', sans-serif; font-size: 2.4rem; font-weight: 700;
  color: var(--khaki-bg); text-decoration: none; letter-spacing: -.01em; transition: color .3s;
}
.mob a:hover { color: var(--khaki); }
.mob-x {
  position: absolute; top: 1.5rem; right: 2.5rem;
  font-size: 1.8rem; color: var(--khaki);
  background: none; border: none; cursor: pointer;
  font-family: 'Poppins', sans-serif; font-weight: 300;
}

/* ── NAV ───────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 5%;
  transition: all .4s ease;
}
nav.scrolled {
  background: rgba(10,10,10,0.94);
  backdrop-filter: blur(16px);
  padding: .85rem 5%;
}
.logo { display: flex; align-items: center; gap: .4rem; text-decoration: none; }
.logo-icon { width: 32px; height: 32px; flex-shrink: 0; }
.logo-text { font-family: 'Poppins', sans-serif; font-size: 1.45rem; line-height: 1; color: #fff; }
.logo-text .sabe { font-weight: 700; }
.logo-text .hub  { font-weight: 400; }
nav:not(.scrolled) .logo-text    { color: var(--black); }
nav:not(.scrolled) .logo-svg-path { fill: var(--black); }
nav.scrolled .logo-text    { color: #fff; }
nav.scrolled .logo-svg-path { fill: #fff; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a {
  font-family: 'Poppins', sans-serif; font-size: .72rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(10,10,10,.7); text-decoration: none; transition: color .3s;
}
nav.scrolled .nav-links a { color: rgba(255,255,255,.65); }
.nav-links a:hover { color: var(--olive); }
nav.scrolled .nav-links a:hover { color: var(--khaki); }
.nav-cta {
  font-family: 'Poppins', sans-serif; font-size: .72rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--black); color: #fff; padding: .65rem 1.4rem;
  text-decoration: none; transition: background .3s, transform .2s;
}
.nav-cta:hover { background: var(--olive); transform: translateY(-1px); }
.ham { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
.ham span { display: block; width: 22px; height: 2px; background: var(--black); transition: all .3s; border-radius: 1px; }
nav.scrolled .ham span { background: #fff; }

/* ── BUTTON SYSTEM ─────────────────────────────────────── */
.btn-blk {
  font-family: 'Poppins', sans-serif; font-size: .75rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--black); color: #fff; padding: 1rem 2rem;
  text-decoration: none; border: 2px solid var(--black);
  display: inline-block; transition: all .3s;
}
.btn-blk:hover { background: var(--olive); border-color: var(--olive); transform: translateY(-2px); }

.btn-out {
  font-family: 'Poppins', sans-serif; font-size: .75rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  background: transparent; color: var(--black); padding: 1rem 2rem;
  border: 2px solid var(--black); text-decoration: none;
  display: inline-block; transition: all .3s;
}
.btn-out:hover { background: var(--black); color: #fff; transform: translateY(-2px); }

.btn-wht {
  font-family: 'Poppins', sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: #fff; color: var(--olive); padding: 1rem 2rem;
  text-decoration: none; text-align: center; display: block;
  transition: all .3s; border: 2px solid #fff;
}
.btn-wht:hover { background: transparent; color: #fff; transform: translateY(-2px); }

.btn-out-wht {
  font-family: 'Poppins', sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: transparent; color: #fff; padding: 1rem 2rem;
  border: 2px solid rgba(255,255,255,.5); text-decoration: none;
  text-align: center; display: block; transition: all .3s;
}
.btn-out-wht:hover { background: #fff; color: var(--olive); }

/* Khaki-filled button — used in Foundry CTA bar */
.btn-khaki {
  background: var(--khaki);
  border-color: var(--khaki);
  color: var(--black);
}
.btn-khaki:hover {
  background: var(--khaki-lt);
  border-color: var(--khaki-lt);
  color: var(--black);
}

/* ── HERO ──────────────────────────────────────────────── */
.hero {
  background: var(--khaki-bg);
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
}
.hero-wm {
  position: absolute; right: -6%; bottom: -10%;
  width: 55%; opacity: .07; pointer-events: none; z-index: 0;
}
.hero-left {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  padding: 10rem 5% 6rem 8%;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--olive); margin-bottom: 2rem;
  opacity: 0; animation: up .6s .2s both;
}
.hero-eyebrow span { display: block; width: 1.8rem; height: 1.5px; background: var(--olive); }
.hero-h1 {
  font-size: clamp(2.8rem, 5vw, 5.2rem);
  font-weight: 800; line-height: 1.05;
  color: var(--black);
  letter-spacing: -.03em;
  margin-bottom: 1.5rem;
  opacity: 0; animation: up .8s .4s both;
}
.hero-h1 .accent   { color: var(--olive); }
.hero-h1 .accent-2 { color: var(--burgundy); }
.hero-sub {
  font-size: .9rem; font-weight: 400; line-height: 1.8;
  color: rgba(10,10,10,.65);
  max-width: 430px; margin-bottom: 2.4rem;
  opacity: 0; animation: up .8s .6s both;
}
.hero-sub strong { color: var(--black); font-weight: 600; }
.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; opacity: 0; animation: up .7s .8s both; }
.hero-north {
  margin-top: 3rem; padding: 1.5rem 1.5rem 1.5rem 1.8rem;
  background: rgba(10,10,10,.07); border-left: 3px solid var(--olive);
  opacity: 0; animation: up .7s 1s both;
}
.hero-north label {
  font-size: .6rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--olive); display: block; margin-bottom: .4rem;
}
.hero-north p { font-size: .82rem; font-weight: 400; color: rgba(10,10,10,.7); line-height: 1.65; font-style: italic; }
.hero-right { position: relative; z-index: 2; overflow: hidden; }
.hero-right img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(.88) saturate(.9); animation: imgIn 1.2s .3s both;
}
@keyframes imgIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.hero-right-cap { position: absolute; bottom: 2.5rem; left: 2.5rem; background: var(--khaki-bg); padding: 1.2rem 1.5rem; }
.hero-right-cap p    { font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--olive); }
.hero-right-cap span { font-size: .82rem; font-weight: 500; color: var(--black); display: block; margin-top: .2rem; }
.hero-stats {
  position: absolute; bottom: 0; right: 0; z-index: 3;
  display: grid; grid-template-columns: repeat(4,1fr);
  opacity: 0; animation: up .7s 1.2s both;
}
.h-stat   { background: var(--black); padding: 1.2rem 1.8rem; border-left: 1px solid rgba(196,180,131,.15); }
.h-stat-n { font-size: 1.6rem; font-weight: 800; color: var(--khaki); line-height: 1; }
.h-stat-l { font-size: .56rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-top: .25rem; }
@keyframes up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ── MARQUEE ───────────────────────────────────────────── */
.marquee   { background: var(--black); overflow: hidden; padding: .85rem 0; }
.marquee-t { display: flex; animation: mq 28s linear infinite; white-space: nowrap; }
.marquee-t span { font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--khaki-bg); padding: 0 2.5rem; }
.marquee-t .dot { color: var(--olive); padding: 0 .2rem; opacity: .7; }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── PROBLEM ───────────────────────────────────────────── */
.problem   { background: var(--khaki-xlt); padding: 8rem 8%; }
.prob-inner { max-width: 1200px; margin: 0 auto; }
.prob-top  { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; margin-bottom: 5rem; }
.sec-tag {
  font-size: .65rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--olive); display: flex; align-items: center; gap: .7rem; margin-bottom: 1.2rem;
}
.sec-tag::before { content: ''; display: block; width: 1.5rem; height: 2px; background: var(--olive); }
.sec-tag--center { justify-content: center; }
h2.sec-h2 { font-size: clamp(2rem, 3.8vw, 4rem); font-weight: 800; line-height: 1.07; color: var(--black); letter-spacing: -.025em; }
h2.sec-h2 .acc  { color: var(--olive); }
h2.sec-h2 .acc2 { color: var(--burgundy); }
h2.sec-h2.sec-h2--sm { font-size: 2.4rem; }
.prob-right p        { font-size: .85rem; font-weight: 400; line-height: 1.85; color: rgba(10,10,10,.6); margin-bottom: 1rem; max-width: 460px; }
.prob-right strong   { color: var(--black); font-weight: 600; }
.prob-right .blockquote { margin-top: 1.5rem; padding: 1.2rem 1.4rem; background: var(--black); color: var(--khaki-bg); font-size: .8rem; font-weight: 400; font-style: italic; line-height: 1.6; }
.prob-grid  { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; background: rgba(10,10,10,.08); }
.prob-card  { background: var(--khaki-xlt); padding: 2.5rem 2rem; transition: background .3s, transform .3s; }
.prob-card:hover { background: var(--white); transform: translateY(-4px); }
.prob-icon  { font-size: 2rem; margin-bottom: 1.2rem; display: block; }
.prob-title { font-size: 1.05rem; font-weight: 700; color: var(--black); margin-bottom: .6rem; }
.prob-text  { font-size: .78rem; font-weight: 400; line-height: 1.72; color: rgba(10,10,10,.55); }

/* ── MISSION / VISION ──────────────────────────────────── */
.mission     { background: var(--black); padding: 8rem 8%; position: relative; overflow: hidden; }
.mission-wm  { position: absolute; right: -5%; top: 50%; transform: translateY(-50%); width: 42%; opacity: .06; pointer-events: none; }
.mission-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.mission-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; }
.mis-tag {
  font-size: .65rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--khaki); display: flex; align-items: center; gap: .7rem; margin-bottom: 1.4rem;
}
.mis-tag::before { content: ''; display: block; width: 1.5rem; height: 2px; background: var(--khaki); }
.mis-tag--eco { margin-bottom: 2rem; }
.mis-statement     { font-size: clamp(1.4rem, 2.5vw, 2.6rem); font-weight: 700; line-height: 1.2; color: #fff; margin-bottom: 1.5rem; letter-spacing: -.02em; }
.mis-statement em  { font-style: italic; font-weight: 500; color: var(--khaki); }
.mis-statement--sm { font-size: clamp(1.3rem, 2.2vw, 2.2rem); }
.mis-body          { font-size: .83rem; font-weight: 400; line-height: 1.88; color: rgba(255,255,255,.55); max-width: 460px; }
.mis-body strong   { color: rgba(255,255,255,.88); font-weight: 600; }
.mis-divider       { height: 1px; background: rgba(196,180,131,.2); margin: 2.5rem 0; }
.vision-list li {
  font-size: .82rem; font-weight: 400; color: rgba(255,255,255,.55);
  padding: .65rem 0; border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex; gap: .8rem; list-style: none;
}
.vision-list li::before { content: '→'; color: var(--khaki); flex-shrink: 0; font-weight: 600; }
.eco-pills     { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 3.5rem; }
.eco-pill      { display: flex; gap: 1.2rem; align-items: flex-start; padding: 1.5rem; border: 1px solid rgba(255,255,255,.07); transition: background .3s, border-color .3s; }
.eco-pill:hover { background: rgba(196,180,131,.06); border-color: rgba(196,180,131,.2); }
.eco-pill-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: .1rem; }
.eco-pill-name { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--khaki); margin-bottom: .25rem; }
.eco-pill-desc { font-size: .76rem; font-weight: 400; color: rgba(255,255,255,.45); line-height: 1.6; }
.eco-pill.foundry-pill           { border-color: rgba(122,46,53,.4); }
.eco-pill.foundry-pill:hover     { background: rgba(122,46,53,.1); border-color: rgba(122,46,53,.6); }
.eco-pill.foundry-pill .eco-pill-name { color: #E88090; }

/* ── THREE SPACES ──────────────────────────────────────── */
.spaces       { background: var(--khaki-bg); padding: 8rem 8%; }
.spaces-inner { max-width: 1200px; margin: 0 auto; }
.spaces-top   { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; margin-bottom: 5rem; align-items: start; }
.spaces-right p      { font-size: .85rem; font-weight: 400; line-height: 1.85; color: rgba(10,10,10,.6); max-width: 440px; margin-bottom: 1rem; }
.spaces-right strong { font-weight: 600; color: var(--black); }
.spaces-ayur  { margin-top: 1.5rem; background: var(--black); color: var(--khaki-bg); padding: 1.2rem 1.4rem; font-size: .78rem; font-style: italic; font-weight: 400; line-height: 1.6; }
.space-cards  { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: rgba(10,10,10,.12); }
.space-card   { background: var(--khaki-xlt); overflow: hidden; }
.space-card-img     { height: 220px; overflow: hidden; }
.space-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85) brightness(.9); transition: transform .8s, filter .4s; }
.space-card:hover .space-card-img img { transform: scale(1.06); filter: saturate(1) brightness(.95); }
.space-card-body  { padding: 2rem; }
.space-zone       { font-size: .58rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--olive); margin-bottom: .5rem; }
.space-title      { font-size: 1.2rem; font-weight: 700; color: var(--black); margin-bottom: .3rem; letter-spacing: -.01em; }
.space-sub        { font-size: .75rem; font-weight: 500; color: var(--olive); font-style: italic; margin-bottom: .7rem; }
.space-desc       { font-size: .77rem; font-weight: 400; line-height: 1.72; color: rgba(10,10,10,.6); }
.space-principle  { margin-top: 1rem; padding: .5rem .8rem; background: var(--black); display: inline-block; font-size: .58rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--khaki-bg); }

/* ── CLEAN FUEL CAFÉ ───────────────────────────────────── */
.cafe           { display: grid; grid-template-columns: 1fr 1fr; min-height: 680px; }
.cafe-img       { position: relative; overflow: hidden; }
.cafe-img img   { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.85) saturate(.95); transition: transform .9s; }
.cafe-img:hover img { transform: scale(1.04); }
.cafe-img-badge { position: absolute; top: 0; left: 0; right: 0; background: var(--olive); padding: 1.1rem 2rem; display: flex; align-items: center; gap: 1rem; }
.cafe-img-badge p { font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.cafe-copy      { background: var(--khaki-bg); padding: 6rem 5% 6rem 5rem; display: flex; flex-direction: column; justify-content: center; }
.cafe-h2        { font-size: clamp(1.8rem, 3vw, 3.4rem); font-weight: 800; color: var(--black); line-height: 1.07; letter-spacing: -.025em; margin-bottom: 1rem; }
.cafe-h2 .acc   { color: var(--olive); }
.cafe-def       { border-left: 4px solid var(--olive); padding-left: 1.2rem; margin: 1.8rem 0; }
.cafe-def p     { font-size: .84rem; font-weight: 400; line-height: 1.82; color: rgba(10,10,10,.65); font-style: italic; }
.cafe-def strong { font-weight: 600; color: var(--black); font-style: normal; }
.cafe-list      { list-style: none; margin-top: 1rem; }
.cafe-list li   { font-size: .8rem; font-weight: 400; padding: .6rem 0; border-bottom: 1px solid rgba(10,10,10,.1); color: rgba(10,10,10,.65); display: flex; gap: .7rem; align-items: flex-start; }
.cafe-list li::before { content: '✦'; color: var(--olive); font-size: .5rem; flex-shrink: 0; margin-top: .3rem; }
.cafe-list strong { color: var(--black); font-weight: 600; }
.cafe-slogan    { margin-top: 2rem; font-size: 1.15rem; font-weight: 700; font-style: italic; color: var(--olive); }

/* ── WELLNESS ──────────────────────────────────────────── */
.wellness    { background: var(--khaki-xlt); padding: 8rem 8%; }
.well-inner  { max-width: 1200px; margin: 0 auto; }
.well-top    { display: grid; grid-template-columns: 1.1fr 1fr; gap: 5rem; margin-bottom: 4rem; align-items: start; }
.well-right p      { font-size: .85rem; font-weight: 400; line-height: 1.85; color: rgba(10,10,10,.6); max-width: 400px; margin-bottom: 1rem; }
.well-right strong { font-weight: 600; color: var(--black); }
.well-cards  { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: rgba(10,10,10,.08); }
.well-card   { background: var(--khaki-xlt); padding: 2.5rem 2rem; transition: background .3s, transform .3s; }
.well-card:hover { background: var(--white); transform: translateY(-4px); }
.well-icon   { font-size: 2.2rem; margin-bottom: 1rem; display: block; }
.well-title  { font-size: 1.05rem; font-weight: 700; color: var(--black); margin-bottom: .6rem; }
.well-text   { font-size: .78rem; font-weight: 400; line-height: 1.72; color: rgba(10,10,10,.55); }
.well-mantra { margin-top: 3rem; background: var(--sagegrey); padding: 3rem; display: flex; align-items: center; gap: 3rem; flex-wrap: wrap; }
.well-mantra p    { font-size: 1.2rem; font-weight: 700; font-style: italic; color: var(--black); flex: 1; min-width: 260px; line-height: 1.4; }
.well-mantra span { font-size: .65rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(10,10,10,.5); }

/* ── THE FOUNDRY ───────────────────────────────────────── */
.foundry       { background: var(--black); padding: 8rem 8%; position: relative; overflow: hidden; }
.foundry-bg    {
  position: absolute; inset: 0;
  background-image: var(--img-foundry-bg);
  background-size: cover; background-position: center;
  opacity: .08; filter: saturate(.3);
}
.foundry-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.foundry-top   { display: grid; grid-template-columns: 1.1fr 1fr; gap: 5rem; margin-bottom: 5rem; }
.foundry-h2    { font-size: clamp(2.2rem, 5vw, 5.5rem); font-weight: 800; color: #fff; line-height: 1.04; letter-spacing: -.03em; }
.foundry-h2 em { font-style: italic; font-weight: 500; color: var(--khaki); }
.foundry-not   { display: block; font-size: .55em; font-weight: 400; font-style: normal; color: rgba(196,180,131,.5); margin-top: .6rem; letter-spacing: .02em; }
.foundry-right p      { font-size: .84rem; font-weight: 400; line-height: 1.88; color: rgba(255,255,255,.5); margin-bottom: 1rem; max-width: 440px; }
.foundry-right strong { color: rgba(255,255,255,.85); font-weight: 600; }
.foundry-grid  { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5px; background: rgba(255,255,255,.04); }
.foundry-card  { background: rgba(255,255,255,.02); padding: 2.5rem 2rem; border-bottom: 2.5px solid transparent; transition: all .3s; }
.foundry-card:hover { background: rgba(196,180,131,.07); border-bottom-color: var(--khaki); }
.fc-icon  { font-size: 1.4rem; margin-bottom: 1rem; display: block; }
.fc-title { font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: .5rem; }
.fc-body  { font-size: .76rem; font-weight: 400; line-height: 1.72; color: rgba(255,255,255,.45); }
.foundry-bar {
  margin-top: 4rem; border: 1px solid rgba(196,180,131,.25); padding: 2.5rem 3rem;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 2rem; background: rgba(196,180,131,.04);
}
.foundry-bar p    { font-size: 1.1rem; font-weight: 600; font-style: italic; color: #fff; max-width: 500px; line-height: 1.4; }
.foundry-bar p em { color: var(--khaki); font-style: italic; }

/* ── PARALLAX BREAK ────────────────────────────────────── */
.para-break   { height: 520px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.para-bg      {
  position: absolute; inset: 0;
  background-image: var(--img-parallax);
  background-size: cover; background-position: center 40%; background-attachment: fixed;
}
.para-ov      { position: absolute; inset: 0; background: rgba(10,10,10,.7); }
.para-content { position: relative; z-index: 2; text-align: center; padding: 0 8%; max-width: 920px; }
.para-q       { font-size: clamp(1.6rem, 3.5vw, 3.8rem); font-weight: 800; color: #fff; line-height: 1.15; margin-bottom: 1.2rem; letter-spacing: -.025em; }
.para-q em    { font-style: italic; font-weight: 500; color: var(--khaki); }
.para-attr    { font-size: .65rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--khaki); }

/* ── GALLERY ───────────────────────────────────────────── */
.gallery  { padding: 7rem 8% 0; background: var(--khaki-pale); }
.gal-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2.5rem; flex-wrap: wrap; gap: 1rem; }
.mosaic   { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 280px 280px; gap: 3px; }
.mi       { overflow: hidden; position: relative; }
.mi img   { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .85s, filter .4s; filter: brightness(.88) saturate(.85); }
.mi:hover img { transform: scale(1.07); filter: brightness(1) saturate(1); }
.mi:nth-child(1) { grid-row: 1/3; }
.mi:nth-child(4) { grid-column: 2/4; }
.mi-cap   {
  position: absolute; bottom: 0; left: 0; right: 0; padding: .8rem 1rem;
  background: linear-gradient(0deg,rgba(10,10,10,.75),transparent);
  font-size: .6rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.85); opacity: 0; transition: opacity .3s;
}
.mi:hover .mi-cap { opacity: 1; }

/* ── TESTIMONIALS ──────────────────────────────────────── */
.testi      { background: var(--khaki-bg); padding: 7rem 8%; }
.testi-head { text-align: center; margin-bottom: 4rem; }
.testi-h2   { font-size: clamp(2rem, 3.5vw, 3.4rem); font-weight: 800; color: var(--black); letter-spacing: -.025em; }
.testi-h2 .acc { color: var(--olive); }
.testi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; background: rgba(10,10,10,.1); }
.tc         { background: var(--khaki-bg); padding: 2.2rem; transition: background .3s, transform .3s; }
.tc:hover   { background: var(--white); transform: translateY(-4px); }
.stars      { color: var(--olive); font-size: .75rem; letter-spacing: 2px; margin-bottom: 1rem; }
.tc-q       { font-size: .9rem; font-weight: 400; font-style: italic; color: rgba(10,10,10,.75); line-height: 1.55; margin-bottom: 1.4rem; }
.tc-name    { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--black); }
.tc-role    { font-size: .62rem; font-weight: 400; color: rgba(10,10,10,.4); margin-top: .2rem; }

/* ── MEMBERSHIP ────────────────────────────────────────── */
.membership { padding: 8rem 8%; background: var(--khaki-pale); }
.mem-head   { text-align: center; max-width: 620px; margin: 0 auto 4rem; }
.mem-h2     { font-size: clamp(2rem, 3.5vw, 3.6rem); font-weight: 800; color: var(--black); letter-spacing: -.025em; margin-top: .5rem; }
.mem-h2 .acc { color: var(--olive); }
.mem-sub    { font-size: .82rem; font-weight: 400; color: rgba(10,10,10,.55); margin-top: .8rem; line-height: 1.65; }
.plans      { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: rgba(10,10,10,.1); }
.plan       { background: var(--khaki-pale); padding: 3rem 2.5rem; position: relative; transition: transform .3s, background .3s; }
.plan:hover { transform: translateY(-5px); background: var(--white); }
.plan.feat  { background: var(--black); }
.plan.feat:hover { background: #1a1a1a; }
.p-badge    { position: absolute; top: 1.4rem; right: 1.4rem; font-size: .56rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--olive); color: #fff; padding: .28rem .72rem; }
.p-name     { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--black); }
.plan.feat .p-name  { color: var(--khaki); }
.p-price    { font-size: 3.2rem; font-weight: 800; line-height: 1; margin: .8rem 0 .2rem; color: var(--black); letter-spacing: -.03em; }
.plan.feat .p-price { color: #fff; }
.p-per      { font-size: .66rem; font-weight: 500; color: rgba(10,10,10,.45); margin-bottom: 2rem; }
.plan.feat .p-per   { color: rgba(255,255,255,.4); }
.p-feats    { list-style: none; margin-bottom: 2.5rem; }
.p-feats li { font-size: .76rem; font-weight: 400; padding: .52rem 0; border-bottom: 1px solid rgba(10,10,10,.08); color: rgba(10,10,10,.7); display: flex; gap: .6rem; }
.plan.feat .p-feats li         { border-color: rgba(255,255,255,.07); color: rgba(255,255,255,.62); }
.p-feats li::before            { content: '✓'; color: var(--olive); font-weight: 700; font-size: .7rem; flex-shrink: 0; }
.plan.feat .p-feats li::before { color: var(--khaki); }
.p-btn      { display: block; text-align: center; font-family: 'Poppins', sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .9rem; text-decoration: none; border: 2px solid var(--black); color: var(--black); transition: all .3s; }
.p-btn:hover       { background: var(--black); color: #fff; }
.plan.feat .p-btn  { background: var(--khaki); border-color: var(--khaki); color: var(--black); }
.plan.feat .p-btn:hover { background: var(--khaki-lt); border-color: var(--khaki-lt); }

/* ── CTA BAND ──────────────────────────────────────────── */
.cta-band   { background: var(--olive); padding: 5.5rem 8%; display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.cta-text   { font-size: clamp(1.8rem, 3.2vw, 3.4rem); font-weight: 800; color: #fff; line-height: 1.12; max-width: 560px; letter-spacing: -.025em; }
.cta-text em { font-style: italic; font-weight: 500; color: var(--khaki-bg); }
.cta-actions { display: flex; flex-direction: column; gap: 1rem; min-width: 200px; }

/* ── CONTACT / HOURS ───────────────────────────────────── */
.info         { display: grid; grid-template-columns: 1fr 1fr; background: var(--khaki-xlt); }
.info-hours   { padding: 5.5rem 6%; border-right: 1px solid rgba(10,10,10,.1); }
.htbl         { width: 100%; border-collapse: collapse; margin-top: 2rem; }
.htbl tr      { border-bottom: 1px solid rgba(10,10,10,.08); }
.htbl td      { padding: .85rem 0; font-size: .8rem; font-weight: 400; color: rgba(10,10,10,.6); }
.htbl td:last-child { text-align: right; font-weight: 600; color: var(--black); }
.htbl .closed td    { opacity: .35; text-decoration: line-through; }
.htbl .today td     { color: var(--olive); }
.map-wrap     { margin-top: 1.8rem; height: 220px; overflow: hidden; border: 1px solid rgba(10,10,10,.1); }
.map-wrap iframe { width: 100%; height: 100%; border: none; display: block; }
.contact-address { font-size: .74rem; color: rgba(10,10,10,.5); margin-top: .8rem; line-height: 1.6; }
.contact-address strong { color: var(--black); display: block; margin-bottom: .2rem; }
.info-contact { padding: 5.5rem 6%; display: flex; flex-direction: column; justify-content: center; }
.contact-intro { font-size: .82rem; color: rgba(10,10,10,.6); line-height: 1.82; margin: 1rem 0; max-width: 400px; }
.c-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; }
.c-box  { background: var(--white); padding: 1.5rem; border: 1px solid rgba(10,10,10,.08); transition: border-color .3s; }
.c-box:hover { border-color: var(--olive); }
.c-label { font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--olive); margin-bottom: .3rem; }
.c-val   { font-size: .8rem; font-weight: 500; color: var(--black); text-decoration: none; display: block; line-height: 1.5; transition: color .3s; }
.c-val:hover { color: var(--olive); }

/* Standalone buttons with spacing — used in contact section */
.btn--directions { display: inline-block; margin-top: 1.2rem; font-size: .68rem; }
.btn--schedule   { display: inline-block; margin-top: 2rem;  font-size: .7rem; }

/* ── FOOTER ────────────────────────────────────────────── */
footer          { background: var(--black); padding: 5.5rem 8% 2.5rem; }
.footer-grid    { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 4rem; margin-bottom: 4rem; }
.footer-brand-logo { display: flex; align-items: center; gap: .5rem; text-decoration: none; margin-bottom: 1rem; }
.footer-brand-logo .logo-svg-path { fill: var(--khaki-bg); }
.footer-brand-logo .logo-text     { color: var(--khaki-bg); font-size: 1.5rem; }
.footer-brand .tagline { font-size: .82rem; font-style: italic; font-weight: 400; color: rgba(255,255,255,.4); margin-bottom: 1.5rem; max-width: 260px; line-height: 1.55; }
.footer-brand p        { font-size: .72rem; color: rgba(255,255,255,.32); line-height: 1.75; max-width: 270px; margin-bottom: 1.5rem; }
.socials { display: flex; gap: .7rem; }
.soc     { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: .7rem; font-weight: 600; color: rgba(255,255,255,.4); transition: all .3s; }
.soc:hover { border-color: var(--khaki); color: var(--khaki); }
.footer-col h4      { font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--khaki); margin-bottom: 1.4rem; }
.footer-col ul      { list-style: none; }
.footer-col ul li   { margin-bottom: .7rem; }
.footer-col ul li a { font-size: .74rem; font-weight: 400; color: rgba(255,255,255,.38); text-decoration: none; transition: color .3s; }
.footer-col ul li a:hover { color: var(--khaki); }
.footer-bot { padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.07); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.footer-bot p { font-size: .62rem; font-weight: 400; color: rgba(255,255,255,.22); letter-spacing: .04em; }

/* ── SCROLL REVEAL ─────────────────────────────────────── */
.rv     { opacity: 0; transform: translateY(24px);  transition: opacity .7s ease, transform .7s ease; }
.rv.lft { transform: translateX(-28px); }
.rv.rgt { transform: translateX(28px); }
.rv.in  { opacity: 1 !important; transform: none !important; }

/* ── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hero, .cafe, .info { grid-template-columns: 1fr; }
  .hero-right { height: 55vw; }
  .hero-stats { display: none; }
  .prob-top, .mission-grid, .spaces-top, .well-top, .foundry-top { grid-template-columns: 1fr; gap: 2.5rem; }
  .prob-grid, .well-cards, .foundry-grid { grid-template-columns: 1fr 1fr; }
  .plans { grid-template-columns: 1fr; }
  .space-cards { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  nav { padding: 1rem 4%; }
  nav.scrolled { padding: .8rem 4%; }
  .nav-links, .nav-cta { display: none; }
  .ham { display: flex; }
  .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 220px 220px; }
  .mi:nth-child(1) { grid-row: auto; }
  .mi:nth-child(4) { grid-column: 1/3; }
  .cafe-copy { padding: 4rem 5%; }
}

@media (max-width: 640px) {
  .prob-grid, .well-cards, .foundry-grid, .testi-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-band { flex-direction: column; text-align: center; }
  .c-grid { grid-template-columns: 1fr; }
  .mosaic { grid-template-columns: 1fr; grid-template-rows: auto; }
  .mi { height: 240px; }
  .mi:nth-child(4) { grid-column: auto; }
  .hero-h1 { font-size: 2.6rem; }
  .gallery, .testi, .membership, .problem, .spaces, .wellness, .foundry { padding-left: 5%; padding-right: 5%; }
}

/* ── TOUCH DEVICES — disable custom cursor ─────────────── */
@media (hover: none) {
  body { cursor: auto; }
  #cur, #cur-r { display: none; }
}