/* ==========================================================================
   Bloomit by Baisakhi · launch page (enquiries)
   Same tokens as romit-design-system/design-system/bloomit.css.
   Positioning: Seasonal Studio ("what's good this week").
   Grounds: hero (light panel + photo) → first season (light) → values (the ONE
   clay band) → Floral Muse (light) → enquiry (light) → footer (laterite-dark).
   Shared by the preview (index.html) and the Shopify section (bloomit-launch.liquid).
   ========================================================================== */

@font-face{ font-family:"EB Garamond"; src:url("fonts/EBGaramond-VariableFont_wght.ttf") format("truetype"); font-weight:400 800; font-style:normal; font-display:swap; }
@font-face{ font-family:"EB Garamond"; src:url("fonts/EBGaramond-Italic-VariableFont_wght.ttf") format("truetype"); font-weight:400 800; font-style:italic; font-display:swap; }
@font-face{ font-family:"Google Sans Flex"; src:url("fonts/GoogleSansFlex-Variable.ttf") format("truetype"); font-weight:100 1000; font-style:normal; font-display:swap; }

.bl{
  --laterite:#8B3520; --laterite-deep:#6E2818; --laterite-dark:#4E1C10;
  --wheat:#B07A52; --wheat-light:#E3C9AE; --wheat-pale:#E6D9C4;
  --patina:#8C5A3C; --bone:#EDE7D8; --bone-light:#F6F2E9;
  --ink:#2A201A; --ink-soft:#5A4A3F; --line:#D9CDBA;
  --serif:"EB Garamond", Georgia, serif;
  --sans:"Google Sans Flex", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r:2px; --wrap:1240px; --gut:clamp(16px,4vw,48px);
  --s-sec:clamp(72px,10vw,128px);
  background:var(--bone); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
:where(.bl) *,:where(.bl) *::before,:where(.bl) *::after{ box-sizing:border-box; }
:where(.bl) img{ display:block; max-width:100%; }
:where(.bl) a{ color:inherit; }
:where(.bl) :is(h1,h2,h3){ font-family:var(--serif); font-weight:400; line-height:1.08; margin:0; letter-spacing:-.01em; }
:where(.bl) p{ margin:0; }
.bl-wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }
.bl-eyebrow{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--patina); font-weight:500; }

/* ---- buttons (Bloomit library 1-1e) ---- */
.bl-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 28px;
  border-radius:var(--r); border:1px solid var(--laterite); font:500 15px/1 var(--sans); letter-spacing:.02em;
  text-decoration:none; cursor:pointer; transition:background .2s, color .2s, border-color .2s; }
.bl-btn--primary{ background:var(--laterite); color:var(--bone-light); }
.bl-btn--primary:hover{ background:var(--laterite-deep); border-color:var(--laterite-deep); }
.bl-btn--primary:active{ background:var(--laterite-dark); }
.bl-btn--secondary{ background:transparent; color:var(--laterite); }
.bl-btn--secondary:hover{ background:var(--laterite); color:var(--bone-light); }
.bl-btn:focus-visible,.bl-chip input:focus-visible + span,.bl-field input:focus-visible,.bl-field textarea:focus-visible{ outline:2px solid var(--laterite); outline-offset:3px; }
.bl-btn[disabled]{ background:#DDD3C4; border-color:#DDD3C4; color:#8F8072; cursor:not-allowed; }

/* ---- top bar ---- */
.bl-bar{ position:sticky; top:0; z-index:20; background:rgba(237,231,216,.92); backdrop-filter:blur(8px); border-bottom:1px solid transparent; transition:border-color .2s; }
.bl-bar.is-scrolled{ border-bottom-color:var(--line); }
.bl-bar__in{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.bl-bar__logo img{ height:34px; width:auto; }
.bl-bar__right{ display:flex; align-items:center; gap:24px; }
.bl-bar__soon{ font-size:13px; color:var(--ink-soft); }
.bl-bar .bl-btn{ min-height:42px; padding:0 20px; font-size:14px; }

/* ---- hero: split, light text panel left, photo right ---- */
.bl-hero{ display:grid; grid-template-columns:1fr 1fr; min-height:min(720px, calc(100vh - 72px)); }
.bl-hero__text{ display:flex; flex-direction:column; justify-content:center; padding:64px var(--gut) 64px max(var(--gut), calc((100vw - var(--wrap))/2 + var(--gut))); }
.bl-hero__text .bl-eyebrow{ margin-bottom:24px; }
.bl-hero h1{ font-size:clamp(44px,6vw,84px); color:var(--laterite); max-width:11ch; }
.bl-hero__sub{ margin-top:24px; font-size:18px; color:var(--ink-soft); max-width:30ch; }
.bl-hero__ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:40px; }
.bl-hero__proof{ margin-top:48px; display:flex; align-items:center; gap:12px; font-size:14px; color:var(--ink-soft); }
.bl-hero__proof img{ width:22px; height:auto; }
.bl-hero__photo{ position:relative; overflow:hidden; background:var(--wheat-pale); }
.bl-hero__photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.bl-hero__tag{ position:absolute; left:24px; bottom:24px; background:var(--bone-light); padding:10px 14px; border-radius:var(--r); font-size:13px; }
.bl-hero__tag b{ font-family:var(--serif); font-weight:400; font-style:italic; font-size:16px; }

/* ---- section heads ---- */
.bl-sec{ padding:var(--s-sec) 0; }
.bl-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:48px; }
.bl-head h2{ font-size:clamp(34px,4vw,52px); max-width:16ch; margin-top:14px; }
.bl-head p{ max-width:36ch; color:var(--ink-soft); }

/* ---- first season: 4 named bouquets, no price, no CTA on card ---- */
.bl-season{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.bl-card__img{ aspect-ratio:4/5; overflow:hidden; background:var(--wheat-pale); border-radius:var(--r); }
.bl-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.bl-card:hover .bl-card__img img{ transform:scale(1.03); }
.bl-card h3{ font-size:22px; margin-top:16px; }
.bl-card p{ margin-top:6px; font-size:14px; color:var(--ink-soft); }
.bl-card__soon{ display:inline-block; margin-top:6px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--patina); }

/* ---- values: the one clay band ---- */
.bl-values{ background:var(--laterite); color:var(--bone-light); text-align:center; }
.bl-values blockquote{ margin:0 auto; font-family:var(--serif); font-style:italic; font-size:clamp(30px,4vw,48px); line-height:1.2; max-width:22ch; }
.bl-values__sprig{ width:34px; margin:0 auto 28px; }
.bl-values__row{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:72px; }
.bl-values__item{ padding:0 24px; position:relative; }
.bl-values__item + .bl-values__item::before{ content:""; position:absolute; left:0; top:50%; width:1px; height:44px; transform:translateY(-50%); background:rgba(246,242,233,.35); }
.bl-values__item h3{ font-size:24px; }
.bl-values__item p{ margin-top:8px; font-size:14px; color:var(--wheat-light); }

/* ---- Floral Muse ---- */
.bl-muse{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,96px); align-items:center; }
.bl-muse__photo{ aspect-ratio:4/5; overflow:hidden; border-radius:var(--r); background:var(--wheat-pale); }
.bl-muse__photo img{ width:100%; height:100%; object-fit:cover; }
.bl-muse h2{ font-size:clamp(34px,4vw,52px); margin-top:14px; }
.bl-muse__lead{ margin-top:20px; font-size:18px; color:var(--ink-soft); max-width:34ch; }
.bl-muse__list{ list-style:none; padding:0; margin:32px 0 40px; border-top:1px solid var(--line); }
.bl-muse__list li{ display:flex; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); font-size:15px; }
.bl-muse__list span:last-child{ color:var(--ink-soft); text-align:right; }

/* ---- enquiry ---- */
.bl-enq{ background:var(--bone-light); }
.bl-enq__grid{ display:grid; grid-template-columns:5fr 7fr; gap:clamp(32px,6vw,96px); }
.bl-enq h2{ font-size:clamp(38px,4.6vw,60px); margin-top:14px; color:var(--laterite); }
.bl-enq__lead{ margin-top:20px; font-size:18px; color:var(--ink-soft); max-width:30ch; }
.bl-enq__note{ margin-top:32px; font-size:14px; color:var(--ink-soft); max-width:34ch; }
.bl-form{ display:grid; grid-template-columns:1fr 1fr; gap:20px 20px; }
.bl-field{ display:flex; flex-direction:column; gap:8px; }
.bl-field--full{ grid-column:1 / -1; }
.bl-field label,.bl-legend{ font-size:13px; font-weight:500; color:var(--ink); }
.bl-field label i,.bl-legend i{ font-style:normal; font-weight:400; color:var(--ink-soft); }
.bl-field input,.bl-field textarea{ width:100%; min-height:52px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r);
  background:#fff; font:16px/1.4 var(--sans); color:var(--ink); transition:border-color .2s; }
.bl-field textarea{ min-height:104px; resize:vertical; }
.bl-field input:hover,.bl-field textarea:hover{ border-color:var(--wheat); }
.bl-field.is-bad input{ border-color:#B3261E; }
.bl-field__err{ display:none; font-size:13px; color:#B3261E; }
.bl-field.is-bad .bl-field__err{ display:block; }
.bl-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; border:0; padding:0; }
.bl-chip{ position:relative; }
.bl-chip input{ position:absolute; opacity:0; pointer-events:none; }
.bl-chip span{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border:1px solid var(--line); border-radius:var(--r);
  background:#fff; font-size:14px; cursor:pointer; transition:all .2s; }
.bl-chip span::before{ content:""; width:14px; height:14px; border:1px solid var(--wheat); border-radius:var(--r); background:#fff; }
.bl-chip input:checked + span{ border-color:var(--laterite); background:var(--laterite); color:var(--bone-light); }
.bl-chip input:checked + span::before{ border-color:var(--bone-light); background:var(--bone-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.2l2.6 2.6L11 4.4' fill='none' stroke='%238B3520' stroke-width='1.8'/%3E%3C/svg%3E") center/12px no-repeat; }
.bl-form__foot{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:8px; }
.bl-form__fine{ font-size:13px; color:var(--ink-soft); max-width:38ch; }
.bl-done{ display:none; padding:40px; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.bl-done img{ width:30px; margin-bottom:20px; }
.bl-done h3{ font-size:32px; color:var(--laterite); }
.bl-done p{ margin-top:12px; color:var(--ink-soft); }
.bl-enq.is-done .bl-form{ display:none; }
.bl-enq.is-done .bl-done{ display:block; }
.bl-form__error{ grid-column:1/-1; padding:14px 16px; border:1px solid #B3261E; border-radius:var(--r); color:#B3261E; font-size:14px; background:#fff; }

/* ---- footer ---- */
.bl-foot{ background:var(--laterite-dark); color:var(--wheat-light); padding:64px 0 40px; font-size:14px; }
.bl-foot__in{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; }
.bl-foot img{ height:40px; width:auto; }
.bl-foot__line{ margin-top:16px; }
.bl-foot__small{ margin-top:40px; padding-top:20px; border-top:1px solid rgba(227,201,174,.2); font-size:12px; color:rgba(227,201,174,.7); }

/* ==== v2 · launch the whole brand (28 Oct) ==== */
.bl-sec--light{ background:var(--bone-light); }

/* hero carousel: split, text + photo change together. 6.5s, pause on hover, square arrows + line dots */
.bl-car{ position:relative; }
.bl-car__slide{ display:none; }
.bl-car__slide.is-on{ display:grid; }
.bl-car__slide.is-on .bl-hero__text > *{ animation:bl-up .7s ease both; }
.bl-car__slide.is-on .bl-hero__text > *:nth-child(2){ animation-delay:.06s; }
.bl-car__slide.is-on .bl-hero__text > *:nth-child(3){ animation-delay:.12s; }
.bl-car__slide.is-on .bl-hero__text > *:nth-child(4){ animation-delay:.18s; }
.bl-car__slide.is-on .bl-hero__photo img{ animation:bl-fade .9s ease both; }
@keyframes bl-up{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes bl-fade{ from{ opacity:0; transform:scale(1.02); } to{ opacity:1; transform:none; } }
.bl-car__nav{ position:absolute; left:max(var(--gut), calc((100vw - var(--wrap))/2 + var(--gut))); bottom:40px; display:flex; align-items:center; gap:20px; z-index:2; }
.bl-car__arrow{ width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line); border-radius:var(--r); background:transparent; color:var(--laterite); cursor:pointer; transition:all .2s; }
.bl-car__arrow:hover{ border-color:var(--laterite); background:var(--laterite); color:var(--bone-light); }
.bl-car__dots{ display:flex; gap:8px; }
.bl-car__dot{ width:28px; height:3px; padding:0; border:0; background:var(--line); cursor:pointer; position:relative; overflow:hidden; }
.bl-car__dot::after{ content:""; position:absolute; inset:0; background:var(--laterite); transform:scaleX(0); transform-origin:left; }
.bl-car__dot.is-on::after{ transform:scaleX(1); }
.bl-hero__count{ align-self:flex-start; display:inline-flex; align-items:center; gap:10px; margin-bottom:24px; padding:8px 14px; border:1px solid var(--line); border-radius:var(--r); font-size:13px; color:var(--ink-soft); }
.bl-hero__count b{ color:var(--laterite); font-weight:600; }
.bl-hero__count::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--laterite); }

/* story */
.bl-story{ display:grid; grid-template-columns:5fr 6fr; gap:clamp(32px,7vw,112px); align-items:center; }
.bl-story__photo{ aspect-ratio:4/5; overflow:hidden; border-radius:var(--r); background:var(--wheat-pale); }
.bl-story__photo img{ width:100%; height:100%; object-fit:cover; }
.bl-story h2{ font-size:clamp(34px,4vw,52px); margin-top:14px; max-width:18ch; }
.bl-story__body{ margin-top:24px; font-family:var(--serif); font-size:clamp(19px,1.6vw,22px); line-height:1.55; color:var(--ink); max-width:36ch; }
.bl-story__body + .bl-story__body{ margin-top:16px; }
.bl-story__text{ margin-top:24px; }
.bl-story__text p{ font-family:var(--serif); font-size:clamp(19px,1.6vw,22px); line-height:1.55; color:var(--ink); max-width:36ch; }
.bl-story__text p + p{ margin-top:16px; }
.bl-story__facts{ display:flex; gap:40px; margin-top:40px; padding-top:28px; border-top:1px solid var(--line); flex-wrap:wrap; }
.bl-story__facts b{ display:block; font-family:var(--serif); font-weight:400; font-size:30px; color:var(--laterite); line-height:1.1; }
.bl-story__facts span{ font-size:13px; color:var(--ink-soft); }

/* services: 2 wide + 3 */
.bl-svc{ display:grid; grid-template-columns:repeat(6,1fr); gap:24px; }
.bl-svc__card{ grid-column:span 2; display:flex; flex-direction:column; text-decoration:none; }
.bl-svc__card--wide{ grid-column:span 3; }
.bl-svc__img{ aspect-ratio:4/5; overflow:hidden; border-radius:var(--r); background:var(--wheat-pale); }
.bl-svc__card--wide .bl-svc__img{ aspect-ratio:3/2; }
.bl-svc__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.bl-svc__card:hover .bl-svc__img img{ transform:scale(1.03); }
.bl-svc__num{ margin-top:18px; font-size:12px; letter-spacing:.14em; color:var(--patina); }
.bl-svc__card h3{ font-size:26px; margin-top:6px; }
.bl-svc__card p{ margin-top:6px; font-size:15px; color:var(--ink-soft); max-width:40ch; }
.bl-svc__go{ margin-top:12px; font-size:14px; font-weight:500; color:var(--laterite); display:inline-flex; gap:8px; align-items:center; }
.bl-svc__go::after{ content:"→"; transition:transform .2s; }
.bl-svc__card:hover .bl-svc__go::after{ transform:translateX(4px); }

/* club + founding offer */
.bl-club{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,96px); align-items:start; }
.bl-club h2{ font-size:clamp(38px,4.6vw,60px); margin-top:14px; color:var(--laterite); }
.bl-club__lead{ margin-top:20px; font-size:18px; color:var(--ink-soft); max-width:36ch; }
.bl-club__how{ list-style:none; padding:0; margin:32px 0 0; counter-reset:how; }
.bl-club__how li{ counter-increment:how; display:grid; grid-template-columns:36px 1fr; gap:8px; padding:14px 0; border-top:1px solid var(--line); font-size:15px; }
.bl-club__how li::before{ content:counter(how, decimal-leading-zero); font-size:12px; letter-spacing:.1em; color:var(--patina); padding-top:3px; }
.bl-club__how b{ font-weight:500; }
.bl-offer{ background:#fff; border-radius:var(--r); box-shadow:0 1px 2px rgba(42,32,26,.06), 0 18px 40px -18px rgba(42,32,26,.25); overflow:hidden; }
.bl-offer__img{ aspect-ratio:16/10; overflow:hidden; }
.bl-offer__img img{ width:100%; height:100%; object-fit:cover; object-position:50% 60%; }
.bl-offer__body{ padding:32px; }
.bl-offer__badge{ display:inline-block; padding:6px 10px; border:1px solid var(--laterite); border-radius:var(--r); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--laterite); }
.bl-offer h3{ font-size:32px; margin-top:16px; }
.bl-offer__sub{ margin-top:6px; color:var(--ink-soft); font-size:15px; }
.bl-offer ul{ list-style:none; padding:0; margin:24px 0 28px; }
.bl-offer li{ display:grid; grid-template-columns:22px 1fr; gap:10px; padding:10px 0; font-size:15px; border-bottom:1px solid #EFE8DC; }
.bl-offer li::before{ content:""; width:14px; height:14px; margin-top:4px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4l3 3L11.5 4' fill='none' stroke='%238B3520' stroke-width='1.6'/%3E%3C/svg%3E") center/14px no-repeat; }
.bl-offer .bl-btn{ width:100%; }
.bl-offer__fine{ margin-top:12px; font-size:12px; color:var(--ink-soft); text-align:center; }

/* how we're opening: dated steps */
.bl-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); }
.bl-step{ padding:28px 24px 0 0; position:relative; }
.bl-step::before{ content:""; position:absolute; top:-5px; left:0; width:9px; height:9px; border-radius:50%; background:var(--bone); border:1px solid var(--laterite); }
.bl-step.is-key::before{ background:var(--laterite); }
.bl-step__date{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--patina); }
.bl-step h3{ font-size:24px; margin-top:8px; }
.bl-step p{ margin-top:8px; font-size:14px; color:var(--ink-soft); max-width:28ch; }

/* conditional enquiry fields */
.bl-more{ grid-column:1/-1; display:none; grid-template-columns:1fr 1fr; gap:20px; padding:20px; border:1px solid var(--line); border-radius:var(--r); background:var(--bone); }
.bl-more.is-on{ display:grid; }
.bl-more__title{ grid-column:1/-1; font-size:13px; font-weight:500; }

@media (max-width:960px){
  .bl-svc{ grid-template-columns:repeat(2,1fr); }
  .bl-svc__card,.bl-svc__card--wide{ grid-column:span 1; }
  .bl-svc__card--wide .bl-svc__img{ aspect-ratio:4/5; }
  .bl-club,.bl-story{ grid-template-columns:1fr; }
  .bl-steps{ grid-template-columns:repeat(2,1fr); row-gap:32px; }
}
@media (max-width:760px){
  .bl-car__nav{ position:static; padding:0 var(--gut) 40px; }
  .bl-car__slide .bl-hero__text{ padding-bottom:24px; }
  .bl-svc{ grid-template-columns:1fr; }
  .bl-steps{ grid-template-columns:1fr; border-top:0; border-left:1px solid var(--line); margin-left:4px; }
  .bl-step{ padding:0 0 28px 24px; }
  .bl-step::before{ top:4px; left:-5px; }
  .bl-more{ grid-template-columns:1fr; }
  .bl-story__facts{ gap:24px; }
}
@media (prefers-reduced-motion:reduce){ .bl-car__slide.is-on .bl-hero__text > *, .bl-car__slide.is-on .bl-hero__photo img{ animation:none; } }

/* ---- motion ---- */
.bl-rise{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
.bl-rise.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .bl-rise{ opacity:1; transform:none; transition:none; } .bl-card__img img{ transition:none; } }

/* ---- tablet / phone ---- */
@media (max-width:960px){
  .bl-season{ grid-template-columns:repeat(2,1fr); }
  .bl-values__row{ grid-template-columns:repeat(2,1fr); gap:40px 0; }
  .bl-values__item:nth-child(3)::before{ display:none; }
  .bl-enq__grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .bl-bar__soon{ display:none; }
  .bl-bar__logo img{ height:28px; }
  .bl-hero{ grid-template-columns:1fr; min-height:0; }
  .bl-hero__photo{ order:-1; aspect-ratio:4/4; }
  .bl-hero__text{ padding:40px var(--gut) 56px; }
  .bl-hero__ctas .bl-btn{ flex:1 1 100%; }
  .bl-head{ flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:32px; }
  .bl-season{ gap:16px; }
  .bl-card h3{ font-size:19px; }
  .bl-values__row{ grid-template-columns:1fr; gap:28px; }
  .bl-values__item::before{ display:none; }
  .bl-muse{ grid-template-columns:1fr; }
  .bl-form{ grid-template-columns:1fr; }
  .bl-form__foot .bl-btn{ width:100%; }
}
