:root {
  --bloom-ink: #0a1510;
  --bloom-forest: #10271b;
  --bloom-forest-2: #173526;
  --bloom-sage: #aebd91;
  --bloom-cream: #f7f3e8;
  --bloom-petal: #c9505c;
  --bloom-gold: #e2bd72;
}

html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }

.bloom-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1200;
  min-height: 0;
  border-bottom: 1px solid rgba(247,243,232,.10);
  color: var(--bloom-cream);
  background: linear-gradient(180deg, rgba(7,18,12,.88), rgba(7,18,12,.48));
  box-shadow: none;
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}
.bloom-header::after { display: none; }
.bloom-header-glow {
  position: absolute;
  inset: auto 8% -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(174,189,145,.58), transparent);
}
.bloom-header .header-inner {
  width: min(1480px, calc(100% - 36px));
  min-height: 86px;
  padding: 9px 0;
}
.bloom-brand { width: 145px; height: 66px; display: grid; place-items: center; overflow: hidden; }
.bloom-brand img { width: 142px; height: auto; max-height: 78px; object-fit: contain; transform: translateY(2px); }
.bloom-nav { gap: 7px; }
.bloom-nav a {
  padding: 9px 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(247,243,232,.76);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.bloom-nav a:hover,
.bloom-nav a:focus-visible {
  border-color: rgba(174,189,145,.35);
  color: #fff;
  background: rgba(174,189,145,.10);
}
.bloom-menu-button span { background: var(--bloom-cream); }

.bloom-experience {
  position: relative;
  color: var(--bloom-cream);
  background: var(--bloom-ink);
  isolation: isolate;
}
.bloom-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease;
  background:
    radial-gradient(circle at 68% 42%, rgba(173,48,68,.26), transparent 28%),
    radial-gradient(circle at 26% 82%, rgba(123,150,91,.15), transparent 27%),
    linear-gradient(142deg, #07110c 0%, #10271b 52%, #090f0b 100%);
}
#bloomCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bloom-aurora {
  position: absolute;
  inset: -15%;
  pointer-events: none;
  opacity: .78;
  background:
    radial-gradient(ellipse at 65% 45%, rgba(206,68,83,.17), transparent 27%),
    radial-gradient(ellipse at 58% 55%, rgba(232,189,114,.08), transparent 18%),
    conic-gradient(from 198deg at 64% 48%, transparent, rgba(132,161,100,.07), transparent 33%);
  filter: blur(28px);
  animation: bloomAurora 12s ease-in-out infinite alternate;
}
.bloom-vignette { position:absolute; inset:0; pointer-events:none; box-shadow: inset 0 0 180px 45px rgba(0,0,0,.58); }
.bloom-grain { position:absolute; inset:0; pointer-events:none; opacity:.14; mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.33'/%3E%3C/svg%3E"); }
@keyframes bloomAurora { to { transform: translate3d(-2%,1.5%,0) scale(1.06); opacity: 1; } }

.bloom-loader {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 13px;
  padding: 28px;
  text-align: center;
  background: linear-gradient(150deg, #07120c, #153122 58%, #0b1710);
  transition: opacity .7s ease, visibility .7s ease;
}
.bloom-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.bloom-loader img { width: min(230px, 58vw); height: 125px; object-fit: contain; margin-bottom: 6px; }
.bloom-loader strong { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 400; }
.bloom-loader > span { color: rgba(247,243,232,.64); font-size: .88rem; }
.bloom-loader-mark { position: relative; width: 66px; height: 66px; margin-bottom: 8px; }
.bloom-loader-mark i { position:absolute; left:50%; bottom:7px; width:21px; height:42px; border:1px solid rgba(247,243,232,.68); border-radius: 80% 0 80% 0; transform-origin: 0 100%; background: rgba(174,189,145,.08); }
.bloom-loader-mark i:nth-child(1){transform:rotate(-48deg)}
.bloom-loader-mark i:nth-child(2){transform:translateX(-1px) rotate(-18deg)}
.bloom-loader-mark i:nth-child(3){transform:rotate(15deg)}
.bloom-loader-track { width:min(280px,68vw); height:3px; margin-top:9px; overflow:hidden; border-radius:20px; background:rgba(255,255,255,.11); }
.bloom-loader-track b { display:block; width:4%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--bloom-sage),var(--bloom-gold),#f19aa4); transition:width .2s linear; }
.bloom-model-credit { position:absolute; right:18px; bottom:14px; z-index:3; max-width:380px; margin:0; color:rgba(247,243,232,.32); font-size:.58rem; letter-spacing:.04em; text-align:right; }

.bloom-chapters { position: relative; z-index: 4; margin-top: 0; }
.bloom-chapter {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 118px clamp(24px, 6vw, 92px) 70px;
  pointer-events: none;
}
.bloom-chapter--right { justify-content: flex-end; }
.bloom-copy {
  width: min(580px, 43vw);
  padding: clamp(26px, 4vw, 48px);
  border: 1px solid rgba(247,243,232,.13);
  border-radius: 30px;
  opacity: .12;
  transform: translateY(44px) scale(.97);
  background: linear-gradient(145deg, rgba(8,25,16,.78), rgba(14,38,25,.55));
  box-shadow: 0 34px 100px rgba(0,0,0,.28);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  transition: opacity .6s ease, transform .6s ease, border-color .6s ease;
  pointer-events: auto;
}
.bloom-chapter.is-active .bloom-copy { opacity:1; transform:none; border-color:rgba(174,189,145,.28); }
.bloom-kicker { display:flex; align-items:center; gap:12px; margin:0 0 18px; color:#c7d5ad; font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
.bloom-kicker::before { width:36px; height:1px; content:""; background:currentColor; }
.bloom-copy h1,
.bloom-copy h2,
.bloom-final-card h2 { margin:0; color:var(--bloom-cream); font-family:'Playfair Display',serif; font-weight:400; letter-spacing:-.035em; line-height:1.02; }
.bloom-copy h1 { font-size:clamp(3.5rem,6.6vw,7.2rem); }
.bloom-copy h2 { font-size:clamp(3rem,5.5vw,5.8rem); }
.bloom-copy h1 em,
.bloom-copy h2 em { color:#e8929a; font-weight:400; }
.bloom-copy > p:not(.bloom-kicker) { max-width:540px; margin:25px 0 0; color:rgba(247,243,232,.72); font-size:clamp(1rem,1.35vw,1.18rem); line-height:1.75; }
.bloom-scroll-cue { display:inline-flex; align-items:center; gap:14px; margin-top:32px; color:rgba(247,243,232,.74); font-size:.77rem; font-weight:600; letter-spacing:.11em; text-decoration:none; text-transform:uppercase; }
.bloom-scroll-cue i { position:relative; width:32px; height:49px; border:1px solid rgba(247,243,232,.35); border-radius:20px; }
.bloom-scroll-cue i::after { position:absolute; top:9px; left:50%; width:4px; height:9px; border-radius:10px; content:""; background:var(--bloom-sage); transform:translateX(-50%); animation:bloomScroll 1.6s ease-in-out infinite; }
@keyframes bloomScroll { 70%,100% { opacity:0; transform:translate(-50%,19px); } }

.bloom-chapter--final { min-height:112svh; justify-content:center; align-items:flex-end; padding-bottom:9svh; }
.bloom-final-card { width:min(1120px,calc(100vw - 42px)); padding:clamp(34px,5vw,68px); border:1px solid rgba(247,243,232,.16); border-radius:34px; text-align:center; opacity:.15; transform:translateY(42px); background:linear-gradient(145deg,rgba(8,24,15,.91),rgba(22,51,33,.78)); box-shadow:0 36px 110px rgba(0,0,0,.38); backdrop-filter:blur(20px); transition:.65s ease; pointer-events:auto; }
.bloom-chapter--final.is-active .bloom-final-card { opacity:1; transform:none; }
.bloom-final-card .bloom-kicker { justify-content:center; }
.bloom-final-card h2 { max-width:850px; margin:auto; font-size:clamp(3rem,6vw,6.2rem); }
.bloom-final-card > p:not(.bloom-kicker) { max-width:720px; margin:24px auto 0; color:rgba(247,243,232,.7); font-size:1.08rem; line-height:1.72; }
.bloom-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:30px; }
.bloom-actions a,.bloom-actions button { min-height:52px; padding:14px 24px; border:1px solid rgba(247,243,232,.2); border-radius:999px; font:600 .82rem 'DM Sans',sans-serif; letter-spacing:.055em; cursor:pointer; text-decoration:none; text-transform:uppercase; }
.bloom-actions a { color:#10271b; background:var(--bloom-cream); }
.bloom-actions button { color:var(--bloom-cream); background:rgba(174,189,145,.11); }
.bloom-paths { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; margin-top:38px; }
.bloom-paths a { min-height:82px; display:flex; flex-direction:column; justify-content:center; gap:5px; padding:13px; border:1px solid rgba(247,243,232,.11); border-radius:17px; color:rgba(247,243,232,.83); background:rgba(247,243,232,.035); font-size:.78rem; font-weight:600; letter-spacing:.04em; text-decoration:none; text-transform:uppercase; transition:.25s ease; }
.bloom-paths a:hover { border-color:rgba(174,189,145,.42); background:rgba(174,189,145,.10); transform:translateY(-3px); }
.bloom-paths span { color:#d6aeb0; font-family:'Playfair Display',serif; font-size:.9rem; font-style:italic; }

/* Let the existing homepage emerge naturally from the dark experience. */
.bloom-experience + .art-intro { position:relative; z-index:5; margin-top:0; }

@media (max-width: 940px) {
  .bloom-header .header-inner { min-height:74px; }
  .bloom-brand { width:116px; height:56px; }
  .bloom-brand img { width:116px; }
  .bloom-menu-button { display:flex; }
  .bloom-header .main-nav { top:74px; color:var(--bloom-cream); background:rgba(8,24,15,.97); }
  .bloom-header .main-nav a { color:rgba(247,243,232,.84); }
  .bloom-copy { width:min(520px,70vw); }
  .bloom-chapter--left { align-items:flex-end; }
  .bloom-chapter--right { align-items:flex-end; }
}

@media (max-width: 700px) {
  .bloom-stage { min-height:560px; }
  .bloom-chapter { min-height:100svh; align-items:flex-end; padding:90px 16px 7svh; }
  .bloom-chapter--right { justify-content:flex-start; }
  .bloom-copy { width:100%; padding:25px 23px; border-radius:24px; background:linear-gradient(145deg,rgba(6,20,12,.84),rgba(13,36,22,.72)); }
  .bloom-copy h1 { font-size:clamp(2.65rem,12vw,4.6rem); }
  .bloom-copy h2 { font-size:clamp(2.45rem,11vw,4.15rem); }
  .bloom-copy > p:not(.bloom-kicker) { margin-top:18px; font-size:.96rem; line-height:1.63; }
  .bloom-scroll-cue { margin-top:20px; }
  .bloom-model-credit { display:none; }
  .bloom-chapter--final { padding:86px 12px 5svh; }
  .bloom-final-card { width:100%; padding:30px 20px; border-radius:25px; }
  .bloom-final-card h2 { font-size:clamp(2.6rem,12vw,4.6rem); }
  .bloom-paths { grid-template-columns:repeat(2,1fr); }
  .bloom-paths a:last-child { grid-column:1/-1; }
  .bloom-loader img { height:100px; }
}

@media (prefers-reduced-motion: reduce) {
  .bloom-aurora,.bloom-scroll-cue i::after { animation:none!important; }
  .bloom-copy,.bloom-final-card { transition:none; }
}

/* ============================================================
   V5 — continuous flower journey
   ============================================================ */
#bloomCanvas {
  z-index: 2;
  opacity: 1;
  filter: saturate(1.18) contrast(1.08) brightness(1.08);
}
.bloom-aurora { z-index: 1; opacity: .54; }
.bloom-vignette { z-index: 3; box-shadow: inset 0 0 130px 22px rgba(0,0,0,.44); }
.bloom-grain { z-index: 4; opacity: .09; }
.bloom-loader { z-index: 30; }
.bloom-model-credit { z-index: 6; }
.bloom-chapters { z-index: 8; }

@media (min-width: 941px) {
  .bloom-copy {
    width: min(520px, 37vw);
    padding: clamp(25px, 3.35vw, 43px);
    background: linear-gradient(145deg, rgba(7,23,14,.80), rgba(13,36,22,.59));
    box-shadow: 0 30px 90px rgba(0,0,0,.25);
  }
  .bloom-chapter {
    padding-left: clamp(28px, 5vw, 76px);
    padding-right: clamp(28px, 5vw, 76px);
  }
  .bloom-chapter--left .bloom-copy { margin-right: auto; }
  .bloom-chapter--right .bloom-copy { margin-left: auto; }
  .bloom-chapter--final {
    min-height: 118svh;
    padding-bottom: 5svh;
  }
  .bloom-final-card {
    width: min(1050px, calc(100vw - 54px));
    background: linear-gradient(145deg, rgba(8,24,15,.88), rgba(22,51,33,.74));
  }
}

@media (max-width: 700px) {
  #bloomCanvas { filter: saturate(1.14) contrast(1.06) brightness(1.08); }
  .bloom-chapter { padding-bottom: 5svh; }
  .bloom-copy { background: linear-gradient(145deg,rgba(6,20,12,.88),rgba(13,36,22,.77)); }
}


/* ============================================================
   V6 — fixed viewport journey (Safari-safe)
   ============================================================ */
.bloom-experience {
  overflow: visible !important;
}
.bloom-experience.is-bloom-active .bloom-stage {
  opacity: 1;
  visibility: visible;
}
.bloom-experience.is-bloom-leaving .bloom-stage {
  opacity: 0;
}
@supports not (overflow: clip) {
  html, body { overflow-x: visible !important; }
}

/* ============================================================
   V13 — instant mobile menu and lightweight bloom fallback
   ============================================================ */
@media (max-width: 940px) {
  .bloom-header {
    display: block !important;
    z-index: 10000 !important;
  }

  .bloom-header .header-inner {
    min-height: 74px !important;
  }

  .bloom-menu-button {
    position: relative;
    z-index: 10002;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 44px;
    margin-left: auto;
    padding: 9px 10px;
    border-radius: 10px;
    background: rgba(247, 243, 232, .07);
  }

  .bloom-menu-button span:not(.sr-only) {
    width: 100%;
    height: 2px;
    margin: 4px 0;
    background: #fff !important;
  }

  .bloom-header .main-nav {
    z-index: 10001;
    inset: 74px 0 auto !important;
    max-height: calc(100svh - 74px);
    overflow-y: auto;
    padding: 12px 20px 22px;
    transform: translateY(-120%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: rgba(7, 24, 14, .985) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
    transition: transform .24s ease, opacity .24s ease, visibility .24s ease;
  }

  .bloom-header .main-nav.open {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .bloom-header .main-nav a {
    padding: 14px 9px;
    border-bottom: 1px solid rgba(247, 243, 232, .10);
  }
}

/*
 * Phones do not download Three.js or the 14 MB GLB. A 161 KB floristry image
 * provides a polished fixed backdrop while the story remains fully readable.
 */
.mobile-lite .bloom-stage,
.bloom-fallback .bloom-stage {
  opacity: 0;
  visibility: hidden;
  background:
    linear-gradient(180deg, rgba(4, 18, 10, .42), rgba(4, 18, 10, .70)),
    radial-gradient(circle at 72% 28%, rgba(227, 190, 128, .18), transparent 34%),
    url("/assets/images/hero-floristry.jpg") center 46% / cover no-repeat,
    #0a1710;
}

.mobile-lite .bloom-experience.is-bloom-active .bloom-stage,
.bloom-fallback .bloom-experience.is-bloom-active .bloom-stage {
  opacity: 1;
  visibility: visible;
}

.mobile-lite .bloom-experience.is-bloom-leaving .bloom-stage,
.bloom-fallback .bloom-experience.is-bloom-leaving .bloom-stage {
  opacity: 0;
}

.mobile-lite #bloomCanvas,
.mobile-lite .bloom-loader,
.mobile-lite .bloom-model-credit,
.bloom-fallback #bloomCanvas,
.bloom-fallback .bloom-loader {
  display: none !important;
}

.mobile-lite .bloom-aurora,
.mobile-lite .bloom-grain {
  animation: none !important;
}

@media (max-width: 700px) {
  .mobile-lite .bloom-stage {
    min-height: 100svh;
    background-position: 58% center;
  }

  .mobile-lite .bloom-copy {
    opacity: 1;
    transform: none;
    border-color: rgba(174, 189, 145, .25);
  }
}

/* ============================================================
   V15 — readable final Cultivate card in mobile fallback mode
   ============================================================ */
@media (max-width: 700px) {
  /*
   * In mobile-lite mode the Three.js chapter controller is intentionally not
   * loaded. The final card therefore needs its visible state set directly.
   */
  .mobile-lite .bloom-final-card,
  .bloom-fallback .bloom-final-card {
    opacity: 1 !important;
    transform: none !important;
    border-color: rgba(247, 243, 232, .34) !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(174, 189, 145, .13), transparent 44%),
      linear-gradient(145deg, rgba(3, 15, 8, .98), rgba(9, 34, 20, .96)) !important;
    box-shadow: 0 26px 70px rgba(0, 0, 0, .52) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .mobile-lite .bloom-final-card h2,
  .bloom-fallback .bloom-final-card h2 {
    color: #fffdf5 !important;
    text-shadow: 0 3px 22px rgba(0, 0, 0, .62);
  }

  .mobile-lite .bloom-final-card > p:not(.bloom-kicker),
  .bloom-fallback .bloom-final-card > p:not(.bloom-kicker) {
    color: rgba(255, 253, 245, .90) !important;
  }

  .mobile-lite .bloom-final-card .bloom-kicker,
  .bloom-fallback .bloom-final-card .bloom-kicker {
    color: #dce7c3 !important;
  }

  .mobile-lite .bloom-paths a,
  .bloom-fallback .bloom-paths a {
    color: rgba(255, 253, 245, .94) !important;
    border-color: rgba(247, 243, 232, .20) !important;
    background: rgba(247, 243, 232, .075) !important;
  }

  .mobile-lite .bloom-actions button,
  .bloom-fallback .bloom-actions button {
    color: #fffdf5 !important;
    border-color: rgba(247, 243, 232, .30) !important;
    background: rgba(174, 189, 145, .17) !important;
  }

  .mobile-lite .bloom-chapter--final,
  .bloom-fallback .bloom-chapter--final {
    min-height: 108svh;
    padding-bottom: 7svh;
  }
}

/* ============================================================
   V16 — stable Safari mobile menu
   ============================================================ */
@media (max-width: 940px) {
  /*
   * Safari clips fixed descendants when an ancestor combines overflow:hidden
   * and backdrop-filter. The old menu therefore appeared briefly and vanished.
   */
  .bloom-header {
    overflow: visible !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(7, 18, 12, .98) !important;
  }

  .bloom-menu-button {
    position: relative !important;
    z-index: 10004 !important;
    display: flex !important;
    touch-action: manipulation;
  }

  .bloom-header .main-nav {
    position: fixed !important;
    z-index: 10003 !important;
    inset: 74px 0 0 !important;
    width: 100% !important;
    height: calc(100dvh - 74px) !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 18px 24px 34px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    display: none !important;
    align-content: start;
    gap: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    border: 0 !important;
    background:
      radial-gradient(circle at 78% 14%, rgba(174, 189, 145, .12), transparent 28%),
      linear-gradient(180deg, #07180e 0%, #0b2316 100%) !important;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .45) !important;
    transition: none !important;
  }

  .bloom-header .main-nav.open {
    display: grid !important;
  }

  .bloom-header .main-nav a {
    display: flex !important;
    align-items: center;
    min-height: 54px;
    padding: 14px 10px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(247, 243, 232, .12) !important;
    border-radius: 0 !important;
    color: rgba(255, 253, 245, .94) !important;
    background: transparent !important;
    font-size: .9rem !important;
    letter-spacing: .075em !important;
  }

  .bloom-header .main-nav a:last-child {
    border-bottom: 0 !important;
  }

  .bloom-header .main-nav a:active,
  .bloom-header .main-nav a:focus-visible {
    color: #fff !important;
    background: rgba(174, 189, 145, .12) !important;
  }

  body.mobile-menu-open {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
  }

  body.mobile-menu-open .bloom-menu-button {
    touch-action: manipulation;
  }
}