/* ============================================================
   Casa de Bloom — "Garden" homepage (Version A2)
   Design tokens + section styles. Faithful to the design source
   (Casa de Bloom - A2 Garden.dc.html); the only deltas are the
   two hero vh->vw swaps for iframe-embed safety.
   ============================================================ */

:root {
  /* palette */
  --cream:#FAF6EF;  --ink:#2A2622;  --muted:#6B6256;  --muted-2:#8a8276;
  --pink:#f53f82;   --pink-deep:#bf5b80; --pink-link:#b3325f;
  --green:#99cc02;  --green-deep:#7da600; --green-link:#5f7a00; --green-text:#3a4d00;
  --gold:#E7C77E;   --gold-deep:#B08948; --gold-link:#a8761e;
  --amber:#d98a2b;
  --blush:#FBF1F5;  --card-blush:#FCE9F0; --card-mint:#F0F6DE; --card-gold:#FBEFD8;
  --chip-blush:#FCE4ED;

  --maxw:1240px;
  --font-display:"Jost", sans-serif;
  --font-body:"Hanken Grotesk", sans-serif;

  --shadow-feature:0 22px 54px rgba(191,91,128,.2);
  --shadow-card:0 6px 18px rgba(191,91,128,.08);
  --shadow-chip:0 4px 14px rgba(176,137,72,.1);
}

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

.page { background:var(--cream); color:var(--ink); overflow-x:hidden; }

/* ---------- load-in animation (no scroll triggers — embed safe) ---------- */
@keyframes fadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
.fade-up { animation:fadeUp .8s cubic-bezier(.2,.6,.2,1) both; }
.d1 { animation-delay:.05s; } .d2 { animation-delay:.15s; }
.d3 { animation-delay:.25s; } .d4 { animation-delay:.35s; }

/* ---------- shared bits ---------- */
.wrap { max-width:var(--maxw); margin:0 auto; }
.center { text-align:center; }

.eyebrow {
  font-size:clamp(20px,2.3vw,22px); letter-spacing:.14em; line-height:1.2;
  text-transform:uppercase; margin-bottom:20px;
}
.eyebrow--pink  { color:var(--pink); }
.eyebrow--pinkd { color:var(--pink-deep); }
.eyebrow--green { color:var(--green-deep); }
.eyebrow--gold  { color:var(--gold-deep); }

.h2 {
  font-family:var(--font-display); font-weight:200; line-height:1.05; margin:0; color:var(--ink);
  font-size:clamp(38px,5.8vw,72px);
}

/* sharp-luxe buttons (radius 2px) */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  padding:16px 32px; border-radius:2px;
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:hover { transform:translateY(-2px); }
.btn-pink  { color:#fff; background:var(--pink); }
.btn-light { color:var(--ink); background:rgba(255,253,248,.94); }
.btn-sm { padding:15px 30px; font-size:11.5px; }

/* golden glowing button (hero) — white text, soft pulsing gold glow */
.btn-gold {
  color:#fff;
  font-weight:600;
  background:linear-gradient(135deg, #E6AF55 0%, #C8852F 38%, #9A5A1C 72%, #7A4513 100%);
  text-shadow:0 1px 2px rgba(60,32,4,.6);
  animation:goldGlow 3.6s ease-in-out infinite alternate;
}
.btn-gold:hover {
  animation:none;
  box-shadow:
    inset 0 1px 0 rgba(255,236,200,.45),
    0 12px 30px rgba(122,69,19,.55),
    0 0 38px rgba(196,127,46,.8);
}
@keyframes goldGlow {
  from { box-shadow:
    inset 0 1px 0 rgba(255,236,200,.4),
    0 6px 18px rgba(122,69,19,.42),
    0 0 14px rgba(176,113,40,.4); }
  to   { box-shadow:
    inset 0 1px 0 rgba(255,236,200,.5),
    0 10px 26px rgba(122,69,19,.55),
    0 0 32px rgba(196,127,46,.72); }
}

.ulink {
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  padding-bottom:5px; align-self:flex-start;
  border-bottom:1px solid var(--pink); transition:border-bottom-width .2s ease;
}
.ulink:hover { border-bottom-width:2px; }
.ulink--pink  { color:var(--pink-link);  border-bottom-color:var(--pink); }
.ulink--green { color:var(--green-link); border-bottom-color:var(--green); }
.ulink--amber { color:var(--gold-link);  border-bottom-color:var(--amber); }

/* ============================================================
   1. HERO  (full-bleed)
   ============================================================ */
.hero {
  position:relative;
  /* EMBED-SAFE: was min-height:98vh — vh balloons in the expanded iframe. */
  min-height:clamp(640px, 92vw, 900px);
  display:flex; flex-direction:column; align-items:center;
  text-align:center; overflow:hidden;
  /* EMBED-SAFE: was clamp(60px,12vh,150px) — 12vh balloons; use 12vw. */
  padding:clamp(60px,12vw,150px) clamp(20px,5vw,40px) 0;
}
.hero__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 20%; }
.hero__scrim {
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(34,24,12,.6) 0%, rgba(34,24,12,.3) 24%, rgba(34,24,12,0) 46%,
    rgba(34,24,12,0) 62%, rgba(250,246,239,.72) 88%, #FAF6EF 100%);
}
.hero__inner { position:relative; z-index:3; max-width:1040px; }
.hero__mark {
  width:12px; height:12px; transform:rotate(45deg); background:var(--gold);
  margin:0 auto clamp(18px,2.4vw,26px); box-shadow:0 0 18px rgba(231,199,126,.7);
}
.hero__title {
  font-family:var(--font-display); font-weight:200;
  font-size:clamp(44px,8.5vw,124px); line-height:.98; letter-spacing:.04em;
  color:#FFFDF8; margin:0; text-shadow:0 2px 30px rgba(20,12,4,.35);
}
.hero__eyebrow {
  font-size:clamp(10px,1.3vw,13px); letter-spacing:.38em; text-transform:uppercase;
  color:#F4E4C4; margin-top:clamp(16px,2vw,24px);
}
.hero__divider { display:flex; align-items:center; justify-content:center; gap:14px; margin:clamp(20px,2.6vw,30px) auto; }
.hero__divider span:first-child, .hero__divider span:last-child {
  width:clamp(40px,8vw,96px); height:1px; background:rgba(242,230,201,.6);
}
.hero__divider .gem { width:7px; height:7px; transform:rotate(45deg); background:var(--gold); }
.hero__tagline {
  font-family:var(--font-display); font-weight:300; font-style:italic;
  font-size:clamp(18px,2.6vw,34px); color:#FCF4E3; margin:0; text-shadow:0 2px 20px rgba(20,12,4,.35);
}
.hero__cta { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:clamp(30px,4vw,46px); }

/* ============================================================
   2. WHAT IS  (blush, two-column)
   ============================================================ */
.whatis { padding:clamp(70px,10vw,150px) clamp(20px,5vw,64px); background:var(--blush); }
.whatis__grid {
  max-width:var(--maxw); margin:0 auto; display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  gap:clamp(36px,6vw,84px); align-items:center;
}
.whatis__statement {
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(22px,2.6vw,34px); line-height:1.4; color:var(--ink);
  margin:0 0 28px; text-wrap:pretty;
}
.whatis__pull {
  font-family:var(--font-display); font-weight:400; font-style:italic;
  font-size:clamp(18px,2vw,24px); color:var(--pink); margin:0;
}
.whatis__media { display:flex; flex-direction:column; gap:clamp(16px,2vw,24px); }
.whatis__media img {
  width:100%; object-fit:cover; border-radius:3px; box-shadow:var(--shadow-feature);
}
.whatis__media img:first-child { height:clamp(340px,44vw,480px); }
.whatis__media-2 { height:clamp(200px,26vw,300px); }

/* ============================================================
   3. ATMOSPHERE VIDEO
   ============================================================ */
.atmos { padding:clamp(70px,10vw,140px) clamp(20px,5vw,64px); }
.atmos__frame { position:relative; max-width:var(--maxw); margin:0 auto; border-radius:3px; overflow:hidden; }
.atmos__frame video { width:100%; height:clamp(320px,46vw,620px); object-fit:cover; }
.atmos__scrim { position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(30,22,10,.5) 100%); }
.atmos__caption {
  position:absolute; left:clamp(22px,4vw,48px); bottom:clamp(22px,4vw,44px); color:#FFFDF8;
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(20px,2.4vw,32px); letter-spacing:.02em;
}

/* ============================================================
   4. STEP INSIDE — auto-scrolling carousel
   ============================================================ */
.house { padding:clamp(60px,8vw,120px) 0; overflow:hidden; }
.house__head { text-align:center; margin-bottom:clamp(40px,5vw,60px); padding:0 clamp(20px,5vw,64px); }
.marquee { position:relative; }
.marquee__track {
  display:flex; width:max-content; gap:clamp(14px,1.6vw,22px);
  animation:cdbMarquee 75s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state:paused; }
.marquee__track img {
  flex:none; width:clamp(300px,34vw,460px); height:clamp(280px,32vw,420px);
  object-fit:cover; border-radius:4px;
}
@keyframes cdbMarquee { from { transform:translateX(-50%); } to { transform:translateX(0); } }
@keyframes cdbMarqueeRev { from { transform:translateX(0); } to { transform:translateX(-50%); } }
/* reverse-direction variant (used for the house carousel under the Ecosystem) */
.marquee--rev .marquee__track { animation-name:cdbMarqueeRev; }
.eco__marquee { margin-top:clamp(48px,7vw,90px); }

/* ============================================================
   5. CHOOSE YOUR JOURNEY  (mint->gold gradient, 3-up cards)
   ============================================================ */
.journey {
  padding:clamp(70px,9vw,130px) clamp(20px,5vw,64px);
  background:linear-gradient(180deg,#F4FAEA 0%,#FBF4E6 100%);
}
.journey__head { text-align:center; margin-bottom:clamp(44px,6vw,76px); }
.journey__grid {
  max-width:var(--maxw); margin:0 auto; display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:clamp(20px,2.4vw,34px);
}
.jcard { border-radius:6px; overflow:hidden; display:flex; flex-direction:column; }
.jcard--blush { background:var(--card-blush); }
.jcard--mint  { background:var(--card-mint); }
.jcard--gold  { background:var(--card-gold); }
.jcard > img { width:100%; height:280px; object-fit:cover; transition:transform .4s ease; }
.jcard:hover > img { transform:scale(1.03); }
.jcard__body { padding:clamp(26px,2.4vw,38px); display:flex; flex-direction:column; flex:1; }
.jcard__title {
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(22px,2.2vw,30px); letter-spacing:.12em; color:var(--ink); margin-bottom:16px;
}
.jcard__body p { font-size:15px; line-height:1.65; color:var(--muted); margin:0 0 26px; flex:1; }

/* ============================================================
   6. THE ECOSYSTEM  (cream, centered)
   ============================================================ */
.eco { padding:clamp(80px,11vw,160px) clamp(20px,5vw,64px); text-align:center; background:var(--cream); }
.eco__wrap { max-width:880px; margin:0 auto; }
.eco__label { margin-bottom:clamp(30px,4vw,50px); }
.eco__lines {
  display:flex; flex-direction:column; gap:clamp(14px,1.8vw,22px);
  font-family:var(--font-display); font-weight:200;
  font-size:clamp(26px,4.5vw,52px); line-height:1.08; color:var(--ink);
}
.eco .k-pink  { color:var(--pink); }
.eco .k-amber { color:var(--amber); }
.eco .k-green { color:var(--green-deep); }
.eco .k-pink-i { color:var(--pink); font-style:italic; }
.eco__chips {
  margin:clamp(48px,6vw,80px) auto 0; max-width:780px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
}
.chip {
  font-size:13px; letter-spacing:.04em; color:var(--ink);
  background:#fff; border-radius:40px; padding:11px 22px;
}
.chip--shadow { box-shadow:var(--shadow-chip); }
.chip--blush { background:var(--chip-blush); }
.chip--mint  { background:var(--card-mint); }
.chip--gold  { background:var(--card-gold); }
.chip--green { background:var(--green); color:var(--green-text); }
.chip--pink  { background:var(--pink); color:#fff; }

/* ============================================================
   7. TRADE & CREDITS  (blush->cream->mint gradient)
   ============================================================ */
.trade {
  padding:clamp(70px,9vw,140px) clamp(20px,5vw,64px);
  background:linear-gradient(165deg,#FDEFF4 0%,#FBF4E6 56%,#F4FAEA 100%);
}
.trade__inner { max-width:1100px; margin:0 auto; }
.trade__head { text-align:center; margin-bottom:clamp(44px,6vw,72px); }
.trade__grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  gap:clamp(40px,6vw,80px); align-items:center;
}
.flow { display:flex; flex-direction:column; align-items:center; text-align:center; }
.flow__label { font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-link); }
.flow__bring {
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(20px,2.4vw,28px); color:var(--ink); margin-top:10px;
}
.flow__line { width:1px; height:46px; background:linear-gradient(var(--gold), transparent); margin:18px 0; }
.flow__gem { width:11px; height:11px; transform:rotate(45deg); background:var(--gold); margin-bottom:18px; }
.flow__credits {
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(24px,3vw,38px); letter-spacing:.04em; color:#fff;
  background:var(--pink); padding:16px 38px; border-radius:50px;
}
.flow__spend { font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-link); }
.endpoints { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.endpoint { background:#fff; border-radius:6px; box-shadow:var(--shadow-card); overflow:hidden; }
.endpoint img { width:100%; height:clamp(110px,16vw,150px); object-fit:cover; display:block; }
.endpoint__body { padding:16px 18px; }
.endpoint__title { font-family:var(--font-display); font-size:17px; color:var(--ink); margin-bottom:4px; }
.endpoint__sub { font-size:12px; color:var(--muted-2); }
.trade__caption { text-align:center; max-width:680px; margin:clamp(44px,6vw,68px) auto 0;
  font-size:15px; line-height:1.75; color:var(--muted); }
.trade__feature { margin:clamp(36px,5vw,60px) auto 0; max-width:1000px; border-radius:6px;
  overflow:hidden; box-shadow:var(--shadow-feature); }
.trade__feature img { width:100%; display:block; }

/* full-bleed cinematic band (image or video) — px heights, embed-safe */
.band { position:relative; width:100%; margin-top:clamp(48px,7vw,90px); overflow:hidden; }
.band img, .band video { width:100%; height:clamp(300px,46vw,560px); object-fit:cover; display:block; }
.band__fade { position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(250,246,239,.65) 0%, rgba(250,246,239,0) 9%,
            rgba(250,246,239,0) 88%, var(--cream) 100%); }

/* ============================================================
   8. MOMENTS gallery  (cream, 4-up)
   ============================================================ */
.moments { padding:clamp(70px,9vw,130px) clamp(20px,5vw,64px) clamp(20px,3vw,40px); }
.moments__inner { max-width:var(--maxw); margin:0 auto; }
.moments__head { text-align:center; margin-bottom:clamp(40px,5vw,60px); }
.moments__grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:clamp(14px,1.6vw,22px);
}
.moments__grid img, .moments__grid video { width:100%; height:clamp(280px,30vw,400px); object-fit:cover; border-radius:4px; }

/* ============================================================
   9. MEET THE VISION  (blush, two-column; final)
   ============================================================ */
.vision { padding:clamp(70px,10vw,150px) clamp(20px,5vw,64px); background:var(--blush); }
.vision__grid {
  max-width:var(--maxw); margin:0 auto; display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:clamp(36px,6vw,84px); align-items:center;
}
.vision__grid > img {
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 16%;
  border-radius:3px; box-shadow:var(--shadow-feature);
}
.vision__body h2 {
  font-family:var(--font-display); font-weight:200;
  font-size:clamp(36px,5.4vw,66px); line-height:1.05; margin:0 0 26px; color:var(--ink);
}
.vision__body p { font-size:16px; line-height:1.8; color:var(--muted); margin:0 0 18px; }
.vision__body p + p { margin-bottom:32px; }

/* ---------- sponsor credit (Kiwi Spa) — subtle but visible ---------- */
.sponsor { display:flex; flex-direction:column; align-items:center; gap:11px; text-align:center; }
.sponsor__label {
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted-2); font-weight:500;
}
.sponsor img { width:clamp(124px,15vw,164px); height:auto; opacity:.9; }
.trade .sponsor { margin-top:clamp(40px,6vw,68px); }
.whatis .sponsor { margin-top:clamp(28px,4vw,44px); align-items:flex-start; text-align:left; }

/* ---------- mobile: CTAs side-by-side, anchored low in the seating/fade zone ---------- */
@media (max-width:600px) {
  .hero { min-height:clamp(680px, 128vw, 760px); }
  /* let the inner block fill the hero so the CTA can sit at the bottom
     (align-items:stretch keeps the headline full-width -> stays on one line) */
  .hero__inner { display:flex; flex-direction:column; align-items:stretch; flex:1 1 auto; width:100%; }
  .hero__cta {
    margin-top:auto;                       /* push to the bottom of the hero */
    margin-bottom:clamp(70px, 19vw, 130px); /* lift up into the seating area, above the cream */
    flex-wrap:nowrap;                       /* keep them on one row */
    align-items:stretch;                    /* equal height even if one label wraps */
    gap:10px;
    width:100%;
    padding:0 2px;
  }
  .hero__cta .btn {
    flex:1 1 0; min-width:0;                 /* equal widths, allowed to shrink */
    padding:13px 12px;
    font-size:14.5px;                        /* larger, readable */
    font-weight:600;                         /* bolder */
    letter-spacing:.05em;
    line-height:1.25;
    white-space:normal;                      /* let a long label wrap instead of shrinking */
    text-align:center;
  }
  /* keep the headline on one line and stop the wide eyebrow from clipping */
  .hero__title { font-size:clamp(40px, 9vw, 124px); }
  .hero__eyebrow { letter-spacing:.22em; }

  /* shorter full-bleed bands so they don't dominate the small screen */
  .band img, .band video { height:clamp(230px, 62vw, 320px); }
  /* endpoint cards: keep 2-up but trim the image headers */
  .endpoint img { height:clamp(96px, 26vw, 130px); }
  /* moments: comfortable 2-up, slightly shorter tiles */
  .moments__grid { grid-template-columns:repeat(2, 1fr); }
  .moments__grid img, .moments__grid video { height:clamp(180px, 42vw, 260px); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fade-up { animation:none; }
  .marquee__track { animation:none; transform:translateX(-50%); } /* show a static row */
  .btn-gold {
    animation:none;
    box-shadow:
      inset 0 1px 0 rgba(255,236,200,.45),
      0 8px 22px rgba(122,69,19,.5),
      0 0 22px rgba(196,127,46,.55);
  }
}