/* ==========================================================================
   Casa de Bloom — Maya Bethke Founder Page
   Embed-safe static styles. NO vh/svh/dvh for structural heights (see guide §3):
   the page renders as a tall, non-scrolling document inside the Squarespace iframe.
   ========================================================================== */

:root {
  /* palette */
  --cream:#FAF6EF;
  --ink:#2A2622;
  --body:#6B6256;

  --pink:#f53f82;
  --pink-deep:#bf5b80;
  --pink-soft:#FBF1F5;
  --pink-tint:#FCE4ED;

  --green:#99cc02;
  --green-deep:#7da600;
  --green-dark:#3a4d00;
  --green-soft:#F0F6DE;

  --gold:#E7C77E;
  --gold-dark:#B08948;
  --gold-deep:#a8761e;
  --amber:#d98a2b;
  --tan:#FBEFD8;

  /* hero text */
  --hero-ink:#FFFDF8;
  --hero-eyebrow:#FBD9C4;
  --hero-tagline:#FCF4E3;
  --cta-subline:#FBD4E2;

  /* fonts */
  --display:'Jost',sans-serif;
  --bodyfont:'Hanken Grotesk',sans-serif;

  /* shape */
  --pad:clamp(20px,5vw,64px);
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  background:var(--cream);
  color:var(--ink);
  font-family:var(--bodyfont);
  line-height:1.6;
  overflow-x:hidden;
}
img { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; }
::selection { background:var(--pink); color:#fff; }

/* ---- CSS load-in (no scroll observers; content visible by default) ---- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
  .fade { animation:fadeUp .8s both; }
}

/* ---- shared ---- */
.label {
  font-size:11px; letter-spacing:0.3em; text-transform:uppercase;
}
.h2 {
  font-family:var(--display); font-weight:200; line-height:1.04;
  color:var(--ink); margin:0;
}
.chip {
  font-size:clamp(14px,1.6vw,17px); border-radius:40px; padding:12px 24px;
  display:inline-block;
}
.btn {
  display:inline-block; text-transform:uppercase; border-radius:2px;
}

/* ==========================================================================
   1. HERO — split editorial (blush text panel + full-bleed photo)
   ========================================================================== */
.hero {
  display:flex; flex-wrap:wrap;
  /* embed-safe: was 96vh -> width-based clamp so it never balloons in the iframe */
  min-height:clamp(540px,80vw,820px);
}
.hero__text {
  flex:1 1 440px;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(48px,6vw,104px) clamp(24px,5vw,80px);
  background:var(--pink-soft);
}
.hero__eyebrow {
  display:flex; align-items:center; gap:14px; margin-bottom:clamp(24px,3vw,38px);
}
.hero__eyebrow .diamond { width:9px; height:9px; transform:rotate(45deg); background:var(--gold); display:inline-block; }
.hero__eyebrow .label { color:var(--pink-deep); letter-spacing:0.26em; }
.hero__title {
  font-family:var(--display); font-weight:200;
  font-size:clamp(48px,7.6vw,108px); line-height:0.96; letter-spacing:0.02em;
  color:var(--gold-dark); margin:0;
}
.hero__lead {
  font-family:var(--display); font-weight:300; font-size:clamp(17px,1.9vw,24px);
  line-height:1.5; color:#5a5247; max-width:460px;
  margin:clamp(26px,3vw,38px) 0 clamp(30px,3.5vw,42px); text-wrap:pretty;
}
.hero__cta {
  align-self:flex-start;
  font-size:12px; letter-spacing:0.16em; color:#fff; background:var(--pink);
  padding:16px 32px; transition:transform .2s ease, box-shadow .2s ease;
}
.hero__cta:hover { transform:translateY(-2px); box-shadow:0 16px 40px -14px rgba(245,63,130,0.55); }
.hero__photo {
  flex:1.2 1 440px; position:relative; overflow:hidden;
  /* embed-safe: was 52vh; governs height mainly when stacked on mobile */
  min-height:clamp(420px,95vw,560px);
}
.hero__photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 18%; }
/* mobile: when the row wraps, lift the photo above the text */
@media (max-width:880px) {
  .hero__photo { order:-1; }
}

/* ==========================================================================
   2. PORTRAIT MARQUEE  (CSS-only, no JS)
   ========================================================================== */
.marquee { padding:clamp(40px,6vw,90px) 0; overflow:hidden; position:relative; }
.marquee__track {
  display:flex; width:max-content; gap:14px;
  /* 12 unique images (double the original track) at 80s => ~25% faster pixel speed than the old 6-image/50s loop */
  animation:cdbMarquee 80s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state:paused; }
.marquee__track img {
  flex:none; height:clamp(280px,30vw,400px); object-fit:cover; border-radius:4px;
}
.marquee__track img.narrow { width:clamp(220px,24vw,320px); }
.marquee__track img.wide   { width:clamp(300px,34vw,460px); }
@keyframes cdbMarquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation:none; }
}

/* ==========================================================================
   3. WATCH THE VISION
   ========================================================================== */
.vision { padding:clamp(50px,7vw,110px) var(--pad) clamp(70px,9vw,140px); text-align:center; }
.vision__inner { max-width:1120px; margin:0 auto; }
.vision .label { color:var(--pink); margin-bottom:16px; }
.vision .h2 { font-size:clamp(30px,4.8vw,60px); margin:0 0 clamp(36px,5vw,56px); }
.vision__video {
  position:relative; border-radius:5px; overflow:hidden;
  box-shadow:0 30px 70px rgba(191,91,128,0.2);
}
.vision__video iframe {
  width:100%; aspect-ratio:16/9; display:block; border:0; background:#000;
}
/* secondary 3-up video row */
.vision__more {
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px);
  margin-top:clamp(28px,4vw,48px);
}
.vmore {
  position:relative; border-radius:5px; overflow:hidden; background:#000;
  box-shadow:0 16px 40px -18px rgba(191,91,128,0.3);
}
.vmore video, .vmore iframe { width:100%; aspect-ratio:16/9; display:block; border:0; background:#000; }
@media (max-width:860px) {
  .vision__more { grid-template-columns:1fr; gap:16px; }
}

/* ==========================================================================
   4. EXPERIENCE (mosaic)
   ========================================================================== */
.experience {
  padding:clamp(70px,9vw,140px) var(--pad);
  background:linear-gradient(180deg,#FBF1F5 0%,#FBF4E6 100%);
}
.experience__inner { max-width:1280px; margin:0 auto; }
.experience__head { text-align:center; margin-bottom:clamp(44px,6vw,72px); }
.experience .label { color:var(--pink-deep); margin-bottom:16px; }
.experience .h2 { font-size:clamp(30px,4.8vw,60px); }
.mosaic { display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(12px,1.4vw,18px); }
.cell { position:relative; border-radius:6px; overflow:hidden; }
.cell img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cell__scrim { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(30,18,10,0.66)); }
.cell__label {
  position:absolute; color:#fff; font-family:var(--display); font-weight:300;
}
.cell--wide   { grid-column:span 3; aspect-ratio:16/10; }
.cell--square { grid-column:span 2; aspect-ratio:1/1; }
.cell--banner { grid-column:span 6; aspect-ratio:32/9; }
.cell--banner .cell__scrim { background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(30,18,10,0.6)); }
.cell--wide .cell__label   { left:24px; bottom:20px; font-size:clamp(22px,2.4vw,30px); letter-spacing:0.06em; }
.cell--square .cell__label { left:20px; bottom:18px; right:16px; font-size:clamp(18px,1.9vw,24px); letter-spacing:0.04em; }
.cell--banner .cell__label { left:28px; bottom:22px; font-size:clamp(22px,2.6vw,32px); letter-spacing:0.06em; }

@media (max-width:760px) {
  .mosaic { grid-template-columns:1fr 1fr; }
  .cell--wide, .cell--square, .cell--banner { grid-column:span 1; aspect-ratio:4/3; }
}
@media (max-width:460px) {
  .mosaic { grid-template-columns:1fr; }
}

/* ==========================================================================
   5. WHY I BUILT THIS  +  6. GIVE BACK   (shared two-column layout)
   ========================================================================== */
.split {
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(36px,6vw,84px); align-items:center;
}
.why { padding:clamp(70px,10vw,150px) var(--pad); }
.why__images { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.why__images img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:3px; }
.why__images img:first-child { margin-top:28px; }
.why .label { color:var(--gold-deep); margin-bottom:20px; }
.why .h2 { font-size:clamp(28px,4vw,50px); line-height:1.08; margin:0 0 28px; }
.why p { font-size:16.5px; line-height:1.85; color:var(--body); margin:0 0 18px; }
.why p:last-child { margin:0; }

.give {
  padding:clamp(70px,9vw,140px) var(--pad);
  background:linear-gradient(165deg,#F4FAEA 0%,#FBF4E6 60%,#FBF1F5 100%);
}
.give__photo { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:3px; box-shadow:0 22px 54px rgba(125,166,0,0.18); }
.give .label { color:var(--green-deep); margin-bottom:18px; }
.give .h2 { font-size:clamp(34px,5vw,64px); line-height:1.0; margin:0 0 12px; }
.give p { font-size:16px; line-height:1.8; color:var(--body); margin:0 0 30px; max-width:460px; }
.give__chips { display:flex; flex-wrap:wrap; gap:10px; }
.give__chips .chip {
  font-size:14px; color:var(--green-dark); background:#fff; padding:11px 20px;
  box-shadow:0 4px 14px rgba(125,166,0,0.12);
}

/* ==========================================================================
   7. A MESSAGE FROM MAYA
   ========================================================================== */
.message { padding:clamp(80px,11vw,170px) var(--pad); text-align:center; }
.message__inner { max-width:920px; margin:0 auto; }
.message__mark {
  width:12px; height:12px; transform:rotate(45deg); background:var(--gold);
  margin:0 auto clamp(26px,3.4vw,40px); box-shadow:0 0 18px rgba(231,199,126,0.55);
}
.message .label { color:var(--pink); margin-bottom:clamp(28px,4vw,44px); }
.message__lines {
  font-family:var(--display); font-weight:200; font-size:clamp(24px,3.6vw,46px);
  line-height:1.32; color:var(--ink);
  display:flex; flex-direction:column; gap:clamp(12px,1.6vw,20px);
}
.message__lines .pink  { color:var(--pink); }
.message__lines .amber { color:var(--amber); }
.message__quote {
  font-family:var(--display); font-weight:400; font-style:italic;
  font-size:clamp(17px,2vw,24px); color:var(--green-deep);
  margin:clamp(34px,4vw,52px) 0 0; text-wrap:balance;
}

/* ==========================================================================
   8. WHY PEOPLE JOIN
   ========================================================================== */
.join-reasons { padding:clamp(70px,9vw,140px) var(--pad); background:var(--pink-soft); text-align:center; }
.join-reasons__inner { max-width:1000px; margin:0 auto; }
.join-reasons .label { color:var(--pink-deep); margin-bottom:16px; }
.join-reasons .h2 { font-size:clamp(30px,4.6vw,58px); margin:0 0 clamp(40px,5vw,60px); }
.join-reasons__chips { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.join-reasons__chips .chip { color:var(--ink); background:#fff; box-shadow:0 4px 14px rgba(191,91,128,0.1); }
.chip--pink-tint  { background:var(--pink-tint) !important; box-shadow:none !important; }
.chip--green-soft { background:var(--green-soft) !important; box-shadow:none !important; }
.chip--tan        { background:var(--tan) !important; box-shadow:none !important; }
.chip--green      { background:var(--green) !important; color:var(--green-dark) !important; box-shadow:none !important; }
.chip--pink       { background:var(--pink) !important; color:#fff !important; box-shadow:none !important; }

/* ==========================================================================
   9. FINAL CTA
   ========================================================================== */
.final {
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-align:center;
  /* embed-safe: was 92vh */
  min-height:clamp(520px,80vw,760px);
}
.final__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.final__scrim { position:absolute; inset:0; background:linear-gradient(180deg,rgba(30,16,10,0.5),rgba(30,16,10,0.66)); }
.final__inner { position:relative; z-index:2; padding:0 clamp(24px,6vw,40px); max-width:920px; }
.final__head {
  font-family:var(--display); font-weight:200; font-size:clamp(28px,5vw,68px);
  line-height:1.1; color:var(--hero-ink); margin:0 0 8px;
}
.final__sub {
  font-family:var(--display); font-weight:300; font-style:italic;
  font-size:clamp(19px,2.6vw,30px); color:var(--cta-subline); margin:0 0 clamp(34px,4vw,48px);
}
.final__cta {
  font-size:13px; letter-spacing:0.2em; color:var(--ink); background:var(--cream);
  padding:19px 48px; transition:transform .2s ease, box-shadow .2s ease;
}
.final__cta:hover { transform:translateY(-2px); box-shadow:0 16px 40px -14px rgba(0,0,0,0.4); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background:var(--cream); text-align:center;
  padding:clamp(48px,7vw,90px) var(--pad) clamp(34px,5vw,52px);
}
.footer__mark {
  display:block; width:10px; height:10px; transform:rotate(45deg); background:var(--gold);
  margin:0 auto clamp(28px,4vw,40px); box-shadow:0 0 14px rgba(231,199,126,0.5);
}
.footer__brands { display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(32px,6vw,80px); }
.footer__brand {
  font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:var(--pink-deep);
  margin-bottom:16px;
}
.footer__social { display:flex; justify-content:center; gap:16px; }
.footer__social a {
  color:var(--ink); display:inline-flex; transition:color .2s ease, transform .2s ease;
}
.footer__social a:hover { color:var(--pink); transform:translateY(-2px); }
.footer__social svg { width:20px; height:20px; display:block; }
.footer__legal {
  margin-top:clamp(38px,5vw,58px); font-size:12px; color:var(--body); letter-spacing:0.04em;
}