/* My Flower Heart Studio v8: hotspots, zone panels, Back pill. Everything scoped to .mfhh- / #mfh-hot.
   Owner: UI helper. Uses the page fonts (Bodoni Moda / Cormorant Garamond italic / Manrope). */
#mfh-hot, .mfhh-dots {
  --mfhh-cream: #f6eee3; --mfhh-gold: #ead0a2; --mfhh-ink: #211c19;
  --mfhh-e: cubic-bezier(.22, .8, .2, 1); --mfhh-calm: cubic-bezier(.45, .05, .2, 1);
  --mfhh-head: "Bodoni Moda", "Didot", "Bodoni Fallback", Georgia, serif;
  --mfhh-acc: "Cormorant Garamond", Georgia, serif;
  --mfhh-body: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
}
#mfh-hot { position: fixed; inset: 0; z-index: 40; pointer-events: none; font-family: var(--mfhh-body); color: var(--mfhh-cream); }
#mfh-hot * { box-sizing: border-box; }

/* ---------- hotspot dots ---------- */
.mfhh-dots { position: absolute; inset: 0; pointer-events: none; transition: opacity .7s var(--mfhh-calm), visibility 0s linear 0s; }
.mfhh-dots.is-tracked { position: fixed; z-index: 41; }
body.mfh-zoomed .mfhh-dots, body.mfh-gliding-in .mfhh-dots { opacity: 0; visibility: hidden; transition: opacity .45s var(--mfhh-calm), visibility 0s linear .45s; }
.mfhh-dot {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer; pointer-events: auto;
  display: grid; place-items: center; -webkit-tap-highlight-color: transparent; will-change: transform;
}
.mfhh-dots.is-layer .mfhh-dot { transform: scale(var(--mfhh-inv, 1)); }
.mfhh-dot__core {
  position: relative; width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #fffaf0 0, #fbe7c4 45%, #e7c58f 100%);
  /* v8.1: bigger, with a soft white glow ring + a thin dark edge so it reads on the bright room */
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .95), 0 0 0 2.5px rgba(33, 28, 25, .28), 0 0 0 7px rgba(255, 255, 255, .26), 0 0 14px 6px rgba(255, 255, 255, .45), 0 0 34px 10px rgba(255, 226, 176, .3);
  transition: transform .5s var(--mfhh-e), box-shadow .5s var(--mfhh-e);
}
.mfhh-dot__ring {
  position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .92); opacity: 0; pointer-events: none;
}
.mfhh-dots.is-hint .mfhh-dot__ring { animation: mfhhPulse 2.8s var(--mfhh-calm) infinite; }
.mfhh-dots.is-hint .mfhh-dot:nth-child(2) .mfhh-dot__ring { animation-delay: .5s; }
.mfhh-dots.is-hint .mfhh-dot:nth-child(3) .mfhh-dot__ring { animation-delay: 1s; }
.mfhh-dots.is-hint .mfhh-dot:nth-child(4) .mfhh-dot__ring { animation-delay: 1.5s; }
@keyframes mfhhPulse { 0% { transform: scale(1); opacity: .85; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
/* v8.4 polish: the breathing glow is a pre-drawn halo whose opacity + scale animate (compositor only, no repaint
   per frame, unlike the old animated box-shadow); it pauses whenever the dots are hidden */
.mfhh-dot__core::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .3), 0 0 18px 8px rgba(255, 255, 255, .3), 0 0 44px 14px rgba(255, 226, 176, .24);
  opacity: 0; animation: mfhhGlow 4.2s ease-in-out infinite; }
@keyframes mfhhGlow { 0%, 100% { opacity: 0; transform: scale(.9); } 50% { opacity: 1; transform: scale(1); } }
body.mfh-zoomed .mfhh-dot__core::after, body.mfh-gliding-in .mfhh-dot__core::after,
body.mfh-zoomed .mfhh-dot__ring, body.mfh-gliding-in .mfhh-dot__ring { animation-play-state: paused; }
.mfhh-dot:hover .mfhh-dot__core, .mfhh-dot:focus-visible .mfhh-dot__core { transform: scale(1.25); }
.mfhh-dot:focus { outline: none; }
.mfhh-dot:focus-visible::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; outline: 2px solid var(--mfhh-gold); outline-offset: 0; }
.mfhh-dot__lab {
  position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translate3d(-50%, 6px, 0); white-space: nowrap;
  padding: 7px 14px 8px; border-radius: 999px; pointer-events: none; opacity: 0;
  background: rgba(33, 28, 25, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(234, 208, 162, .42);
  font: italic 500 19px/1 var(--mfhh-acc); letter-spacing: .01em; color: var(--mfhh-cream);
  transition: opacity .35s var(--mfhh-e), transform .45s var(--mfhh-e);
}
.mfhh-dot:hover .mfhh-dot__lab, .mfhh-dot:focus-visible .mfhh-dot__lab { opacity: 1; transform: translate3d(-50%, 0, 0); }

/* edge pips: point to a zone that is off screen (icon only) */
.mfhh-edge {
  position: absolute; top: 0; width: 44px; height: 44px; margin: -22px 0 0; transform: translate3d(0, 50vh, 0); will-change: transform; padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--mfhh-cream);
  opacity: 0; visibility: hidden; pointer-events: none; -webkit-tap-highlight-color: transparent;
  transition: opacity .6s var(--mfhh-calm), visibility 0s linear .6s, transform .9s var(--mfhh-calm);
}
.mfhh-edge.is-left { left: max(6px, env(safe-area-inset-left)); }
.mfhh-edge.is-right { right: max(6px, env(safe-area-inset-right)); }
.mfhh-edge.is-on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .8s var(--mfhh-calm), visibility 0s, transform .9s var(--mfhh-calm); }
body.mfh-zoomed .mfhh-edge { opacity: 0; visibility: hidden; pointer-events: none; }
.mfhh-edge__core { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  background: rgba(33, 28, 25, .38); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(234, 208, 162, .6), 0 0 14px 3px rgba(255, 226, 176, .35); }
.mfhh-edge svg { position: relative; width: 14px; height: 14px; color: var(--mfhh-gold); }
.mfhh-edge:not(.is-on) .mfhh-dot__ring { animation: none; }
.mfhh-edge .mfhh-dot__ring { width: 30px; height: 30px; margin: -15px 0 0 -15px; animation: mfhhPulseSoft 3.4s var(--mfhh-calm) infinite; }
@keyframes mfhhPulseSoft { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.8); opacity: 0; } }
.mfhh-edge .mfhh-dot__lab { bottom: auto; top: 50%; left: auto; right: auto; transform: translate3d(0, -50%, 0); }
.mfhh-edge.is-left .mfhh-dot__lab { left: calc(100% + 4px); }
.mfhh-edge.is-right .mfhh-dot__lab { right: calc(100% + 4px); }
.mfhh-edge:hover .mfhh-dot__lab, .mfhh-edge:focus-visible .mfhh-dot__lab { opacity: 1; transform: translate3d(0, -50%, 0); }
.mfhh-edge:focus { outline: none; }
.mfhh-edge:focus-visible .mfhh-edge__core { outline: 2px solid var(--mfhh-gold); outline-offset: 2px; }

/* ---------- zone panels ---------- */
.mfhh-panel {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity .6s var(--mfhh-calm), visibility 0s linear .6s;
}
.mfhh-panel.is-on { opacity: 1; visibility: visible; transition: opacity .9s var(--mfhh-calm) .05s, visibility 0s; }
.mfhh-copy {
  position: absolute; left: clamp(26px, 6.5vw, 105px); bottom: clamp(120px, 22vh, 260px); max-width: min(560px, 44vw);
  transform: translate3d(0, 22px, 0); transition: transform 1s var(--mfhh-calm);
  text-shadow: 0 2px 22px rgba(15, 10, 8, .45);
}
.mfhh-panel.is-on .mfhh-copy { transform: translate3d(0, 0, 0); }
.mfhh-copy::before { content: ""; position: absolute; inset: -60px -80px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 72% 64% at 42% 52%, rgba(20, 16, 15, .58), rgba(20, 16, 15, .26) 56%, transparent 80%); }
.mfhh-eyebrow { font-size: clamp(10px, .95vw, 12px); text-transform: uppercase; letter-spacing: .24em; font-weight: 600; color: var(--mfhh-gold); margin: 0 0 16px; }
.mfhh-line { font-family: var(--mfhh-head); font-weight: 400; font-size: clamp(36px, 4.2vw, 68px); line-height: 1.05; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.mfhh-line.is-word { font-family: var(--mfhh-acc); font-style: italic; font-size: clamp(52px, 6vw, 96px); letter-spacing: -.01em; line-height: 1; }
/* v8.2 (Diego): stop 3's big italic word gets the same optical space under its "03 / Baskets & Boxes" label as
   stops 01/02/04 (gap in proportion to the headline size), so the label reads clearly above it, never on it */
.mfhh-line.is-word { padding-top: .16em; }   /* padding, not margin: a margin would collapse into the label's own */

/* photo stack: v8.5 gallery (helper V85-G). A fanned stack of her photos; the top card follows a finger/mouse drag
   (inline transform from hot.js, rAF only while dragging), springs on to the next photo or back. Only transform and
   opacity ever animate. */
.mfhh-stack {
  --fh: min(70vh, calc(38vw * 1.25), calc(100dvh - 200px)); --mfhh-p: 0;
  --mfhh-spring: cubic-bezier(.2, .9, .25, 1.12); --mfhh-glide: cubic-bezier(.32, .72, .2, 1);
  position: absolute; top: 0; bottom: 30px; margin: auto 0; right: clamp(40px, 6vw, 110px);
  height: var(--fh); aspect-ratio: 4 / 5; pointer-events: auto; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  transform: translate3d(0, 28px, 0) rotate(-2.4deg); opacity: 0;
  transition: transform 1.1s var(--mfhh-calm), opacity .9s var(--mfhh-calm);
}
.mfhh-panel.is-on .mfhh-stack { transform: translate3d(0, 0, 0) rotate(-1.2deg); opacity: 1; transition-delay: .12s; }
/* soft ground shadow under the whole fan (static, never animated) */
.mfhh-stack::before { content: ""; position: absolute; left: 6%; right: -2%; bottom: -16px; height: 36px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(10, 7, 6, .42), transparent); filter: blur(6px); }
.mfhh-card {
  position: absolute; inset: 0; background: #f4ece1; padding: 8px; border: 1px solid rgba(120, 96, 70, .16); overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 24px 60px -18px rgba(12, 9, 8, .55), 0 6px 18px -8px rgba(12, 9, 8, .3);
  transform-origin: 50% 88%; cursor: grab;
  transition: transform 680ms var(--mfhh-glide), opacity 560ms var(--mfhh-calm); will-change: transform, opacity;
}
.mfhh-card::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(84, 70, 55, .14); pointer-events: none; z-index: 2; }
/* the fan behind: each card a touch smaller, turned and veiled, so the top photo reads as nearest */
.mfhh-card::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: #1c1613; opacity: 0;
  transition: opacity 600ms var(--mfhh-calm); }
.mfhh-card.is-top { z-index: 5; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 1; }
.mfhh-card.is-second { z-index: 4; transform: translate3d(14px, -9px, 0) rotate(2.6deg) scale(.962); opacity: 1; }
.mfhh-card.is-second::before { opacity: .16; }
.mfhh-card.is-third { z-index: 3; transform: translate3d(26px, -17px, 0) rotate(5deg) scale(.928); opacity: .92; }
.mfhh-card.is-third::before { opacity: .3; }
.mfhh-card.is-off { z-index: 1; transform: translate3d(30px, -20px, 0) rotate(6deg) scale(.9); opacity: 0; pointer-events: none; }
/* leaving (next): the old top slides off to the left, turning a little, and fades; then it rejoins the back of the fan */
.mfhh-card.is-leave, .mfhh-card.is-leave-r { z-index: 6; opacity: 0; pointer-events: none;
  transition: transform 620ms var(--mfhh-glide), opacity 520ms var(--mfhh-calm) 60ms; }
.mfhh-card.is-leave { transform: translate3d(-62%, 4%, 0) rotate(-9deg) scale(.98); }
.mfhh-card.is-leave-r { transform: translate3d(62%, 4%, 0) rotate(9deg) scale(.98); }
/* auto-advance: a gentle short slide + crossfade instead of a fling */
.mfhh-card.is-leave.is-soft { transform: translate3d(-14%, 1%, 0) rotate(-3deg) scale(.985); transition: transform 900ms var(--mfhh-calm), opacity 760ms var(--mfhh-calm); }
.mfhh-card.is-leave-r.is-soft { transform: translate3d(14%, 1%, 0) rotate(3deg) scale(.985); transition: transform 900ms var(--mfhh-calm), opacity 760ms var(--mfhh-calm); }
/* previous: the incoming card starts at the left (set without a transition), then glides in */
.mfhh-card.is-enter { z-index: 6; transform: translate3d(-62%, 4%, 0) rotate(-9deg) scale(.98) !important; opacity: 0 !important; transition: none !important; }
/* release without a change: spring back with a small overshoot */
.mfhh-card.is-top.is-return { transition: transform 620ms var(--mfhh-spring), opacity 300ms var(--mfhh-calm); }
/* while dragging: no transition on the top card (it is the finger); the next card lifts toward the front with the drag */
.mfhh-stack.is-drag .mfhh-card.is-top { transition: none; cursor: grabbing; }
.mfhh-stack.is-drag .mfhh-card.is-peek { transition: transform 120ms linear, opacity 120ms linear;
  transform: translate3d(calc(14px * (1 - var(--mfhh-p))), calc(-9px * (1 - var(--mfhh-p))), 0) rotate(calc(2.6deg * (1 - var(--mfhh-p)))) scale(calc(.962 + .038 * var(--mfhh-p))); opacity: 1; }
.mfhh-stack.is-drag .mfhh-card.is-peek::before { opacity: calc(.16 * (1 - var(--mfhh-p))); transition: none; }
.mfhh-card img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; pointer-events: none; }
/* her caption: one quiet italic line on the photo, above the counter */
.mfhh-cap {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 4; margin: 0; padding: 46px 18px 62px; pointer-events: none;
  background: linear-gradient(0deg, rgba(18, 13, 11, .62) 0, rgba(18, 13, 11, .34) 55%, transparent);
  font: italic 500 clamp(17px, 1.45vw, 21px)/1.18 var(--mfhh-acc); letter-spacing: .005em; color: #fbf3e8; text-wrap: balance;
  text-shadow: 0 1px 10px rgba(10, 7, 6, .45);
  opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity .6s var(--mfhh-calm) .18s, transform .8s var(--mfhh-calm) .18s;
}
.mfhh-card.is-top .mfhh-cap { opacity: 1; transform: translate3d(0, 0, 0); }
.mfhh-cap::before { content: ""; display: block; width: 18px; height: 1px; margin: 0 0 9px; background: var(--mfhh-gold); opacity: .8; }
.mfhh-ui { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 12px 12px 18px; background: linear-gradient(0deg, rgba(18, 13, 11, .45), transparent); pointer-events: none; }
.mfhh-count { display: inline-flex; align-items: baseline; gap: 8px; color: #fff; font-variant-numeric: tabular-nums lining-nums; text-shadow: 0 1px 8px rgba(10, 7, 6, .4); }
.mfhh-count b { font: 400 17px/1 var(--mfhh-head); letter-spacing: .02em; }
.mfhh-count i { display: inline-block; width: 18px; height: 1px; background: rgba(234, 208, 162, .9); transform: translateY(-4px); }
.mfhh-count span { font: 600 10.5px/1 var(--mfhh-body); letter-spacing: .2em; color: rgba(255, 250, 242, .78); }
.mfhh-btns { display: flex; gap: 8px; pointer-events: auto; }
.mfhh-btn { position: relative; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  color: #fff; background: rgba(24, 19, 17, .34); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(255, 250, 242, .42), 0 6px 18px -10px rgba(8, 5, 3, .8);
  transition: background .4s var(--mfhh-e), box-shadow .4s var(--mfhh-e), transform .4s var(--mfhh-e); -webkit-tap-highlight-color: transparent; }
.mfhh-btn svg { width: 16px; height: 16px; transition: transform .45s var(--mfhh-e); }
.mfhh-btn:hover { background: rgba(24, 19, 17, .55); box-shadow: inset 0 0 0 1px var(--mfhh-gold), 0 6px 18px -10px rgba(8, 5, 3, .8); color: var(--mfhh-gold); }
.mfhh-btn.is-prev:hover svg { transform: translateX(-2px); }
.mfhh-btn.is-next:hover svg { transform: translateX(2px); }
.mfhh-btn:active { transform: scale(.94); }
.mfhh-btn:focus { outline: none; }
.mfhh-btn:focus-visible { outline: 2px solid var(--mfhh-gold); outline-offset: 3px; }

/* ---------- Back to the studio (glass pill, like the plan pill) ---------- */
.mfhh-back {
  position: absolute; left: clamp(18px, 4vw, 58px); bottom: max(clamp(22px, 4vh, 40px), env(safe-area-inset-bottom)); /* v8.1: bottom-left, clear of her name */
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px 0 18px; margin: 0;
  border: 0; border-radius: 999px; cursor: pointer; color: var(--mfhh-cream); pointer-events: auto;
  background: linear-gradient(180deg, rgba(255, 247, 232, .16), rgba(255, 247, 232, .06));
  -webkit-backdrop-filter: blur(14px) saturate(1.35); backdrop-filter: blur(14px) saturate(1.35);
  box-shadow: inset 0 0 0 1px rgba(234, 208, 162, .5), inset 0 1px 0 rgba(255, 250, 242, .28), 0 14px 34px -18px rgba(10, 4, 2, .8);
  font: italic 600 clamp(19px, 1.8vw, 22px)/1 var(--mfhh-acc); letter-spacing: .01em;
  opacity: 0; visibility: hidden; transform: translate3d(0, 8px, 0);
  transition: opacity .5s var(--mfhh-calm), transform .6s var(--mfhh-e), visibility 0s linear .5s, background .5s var(--mfhh-e);
  -webkit-tap-highlight-color: transparent;
}
.mfhh-back svg { width: 16px; height: 16px; color: var(--mfhh-gold); flex: none; }
body.mfh-zoomed .mfhh-back, body.mfh-gliding-in .mfhh-back { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0); transition: opacity .6s var(--mfhh-calm) .2s, transform .7s var(--mfhh-e) .2s, visibility 0s, background .5s var(--mfhh-e); }
body.mfh-plan-open .mfhh-back { opacity: 0; visibility: hidden; }
.mfhh-back:hover { background: linear-gradient(180deg, rgba(255, 247, 232, .22), rgba(255, 247, 232, .08)); }
.mfhh-back:focus-visible { outline: 2px solid var(--mfhh-gold); outline-offset: 4px; }

/* ---------- zone 4: the Plan your flowers pill shows only there ---------- */
body.mfh-v8 #plan-root { opacity: 0; visibility: hidden; transition: opacity .6s cubic-bezier(.45, .05, .2, 1), visibility 0s linear .6s; }
body.mfh-v8.mfh-zone-4 #plan-root { opacity: 1; visibility: visible; transition: opacity .9s cubic-bezier(.45, .05, .2, 1) .15s, visibility 0s; }

/* ---------- phone ---------- */
@media (max-width: 760px) {
  /* engine puts the zone at 40% height on phones: words above it, photos below it */
  .mfhh-stack { --fh: min(38dvh, 320px, calc((100vw - 64px) * 1.25)); top: auto; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 58px); right: 0; /* the Back pill sits under it */ left: 0; margin: 0 auto; }
  .mfhh-card { padding: 6px; }
  .mfhh-cap { left: 6px; right: 6px; bottom: 6px; padding: 34px 14px 58px; font-size: 17px; }
  .mfhh-ui { left: 6px; right: 6px; bottom: 6px; padding: 8px 8px 8px 14px; }
  .mfhh-count b { font-size: 15px; }
  .mfhh-copy { left: 22px; right: 22px; top: calc(var(--banner-h, 28px) + 128px); bottom: auto; max-width: none; }
  .mfhh-line { font-size: clamp(26px, 7.6vw, 36px); }
  .mfhh-line.is-word { font-size: clamp(44px, 12vw, 60px); }
  .mfhh-eyebrow { font-size: 10px; margin-bottom: 10px; }
  .mfhh-back { left: 16px; bottom: max(14px, env(safe-area-inset-bottom)); min-height: 44px; padding: 0 20px 0 15px; font-size: 19px; }
  .mfhh-dot__lab { font-size: 17px; }
}
@media (max-height: 640px) and (max-width: 760px) { .mfhh-stack { --fh: min(34dvh, 60vw); } .mfhh-copy { top: calc(var(--banner-h, 28px) + 110px); } .mfhh-line { font-size: 24px; } }

@media (prefers-reduced-motion: reduce) {
  .mfhh-dots.is-hint .mfhh-dot__ring, .mfhh-dot .mfhh-dot__core, .mfhh-dot__core::after, .mfhh-edge .mfhh-dot__ring { animation: none !important; }
  .mfhh-copy, .mfhh-stack, .mfhh-panel, .mfhh-back { transition-duration: .01ms !important; transition-delay: 0s !important; }
  /* v8.5 gallery: simple fades only (no slide, fling, fan movement or spring) */
  .mfhh-card, .mfhh-card.is-leave, .mfhh-card.is-leave-r, .mfhh-card.is-soft, .mfhh-card.is-return { transition: opacity .45s ease !important; }
  .mfhh-card.is-leave, .mfhh-card.is-leave-r, .mfhh-card.is-enter { transform: translate3d(0, 0, 0) !important; }
  .mfhh-cap, .mfhh-btn, .mfhh-btn svg { transition: opacity .3s ease !important; transform: none !important; }
  .mfhh-copy, .mfhh-panel.is-on .mfhh-copy { transform: none; }
}

/* ================= v8.3: dot labels + the 4-name menu (Plan your flowers = the one Plan button) ================= */
/* the old zone-4 pill stays out: plan.js still mounts it, the menu calls MFHPlan.open() straight away */
body.mfh-menu-on #plan-root, body.mfh-menu-on.mfh-zone-4 #plan-root { display: none; }

/* dot labels: laptop on hover/focus (above); phones and touch screens always */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .mfhh-dots .mfhh-dot__lab {
    opacity: 1; transform: translate3d(-50%, 0, 0); bottom: calc(100% + 4px);
    padding: 6px 12px 7px; background: rgba(28, 23, 20, .7); -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: inset 0 0 0 1px rgba(234, 208, 162, .38), 0 4px 14px -6px rgba(10, 6, 4, .55);
    font: 600 13px/1.1 var(--mfhh-body); letter-spacing: .02em; color: #fff;
  }
}

.mfhh-menu {
  --mfhh-cream: #f6eee3; --mfhh-gold: #ead0a2; --mfhh-e: cubic-bezier(.22, .8, .2, 1); --mfhh-calm: cubic-bezier(.45, .05, .2, 1);
  --mfhh-acc: "Cormorant Garamond", Georgia, serif; --mfhh-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  position: fixed; z-index: 42; pointer-events: auto; font-family: var(--mfhh-body); color: var(--mfhh-cream);
  transition: opacity .6s var(--mfhh-calm), visibility 0s;
}
.mfhh-menu__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.mfhh-menu__btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 0;
  border: 0; background: transparent; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color .4s var(--mfhh-e), background .5s var(--mfhh-e), box-shadow .5s var(--mfhh-e);
}
.mfhh-menu__btn:focus { outline: none; }
.mfhh-menu__btn:focus-visible { outline: 2px solid var(--mfhh-gold); outline-offset: 2px; border-radius: 999px; }
.mfhh-menu__btn::after { /* current stop: a short gold line under the name */
  content: ""; position: absolute; left: 50%; bottom: 7px; width: 18px; height: 1.5px; margin-left: -9px; border-radius: 2px;
  background: var(--mfhh-gold); opacity: 0; transform: scaleX(.3); transition: opacity .45s var(--mfhh-calm), transform .6s var(--mfhh-e);
}
.mfhh-menu__btn[aria-current]::after { opacity: 1; transform: scaleX(1); }
.mfhh-menu__btn[aria-current] { color: var(--mfhh-gold); }
.mfhh-menu__btn.is-plan::after { display: none; }
.mfhh-menu__btn.is-plan {
  padding: 0 20px 0 16px; border-radius: 999px; color: var(--mfhh-cream);
  background: linear-gradient(180deg, rgba(255, 247, 232, .2), rgba(255, 247, 232, .07));
  -webkit-backdrop-filter: blur(14px) saturate(1.35); backdrop-filter: blur(14px) saturate(1.35);
  box-shadow: inset 0 0 0 1px rgba(234, 208, 162, .55), inset 0 1px 0 rgba(255, 250, 242, .3), 0 14px 34px -18px rgba(10, 4, 2, .8);
  font: italic 600 19px/1 var(--mfhh-acc); letter-spacing: .01em;
}
.mfhh-menu__btn.is-plan:hover { background: linear-gradient(180deg, rgba(255, 247, 232, .28), rgba(255, 247, 232, .1)); }
.mfhh-menu__btn.is-plan[aria-current] { color: var(--mfhh-cream);
  box-shadow: inset 0 0 0 1.5px var(--mfhh-gold), inset 0 1px 0 rgba(255, 250, 242, .3), 0 0 22px 2px rgba(255, 226, 176, .28), 0 14px 34px -18px rgba(10, 4, 2, .8); }
.mfhh-menu__leaf { width: 9px; height: 14px; color: var(--mfhh-gold); flex: none; }
body.mfh-plan-open .mfhh-menu { opacity: 0; visibility: hidden; transition: opacity .3s var(--mfhh-calm), visibility 0s linear .3s; }

/* laptop: one quiet row under her name, clear of the NYC line and the photos */
@media (min-width: 761px) {
  .mfhh-menu { left: calc(clamp(24px, 5.2vw, 85px) - 10px); top: calc(var(--banner-h, 28px) + clamp(18px, 2.6vw, 34px) + clamp(26px, 2.4vw, 40px) + 8px); }
  .mfhh-menu__list { gap: 2px; }
  .mfhh-menu__btn:not(.is-plan) {
    padding: 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(253, 245, 234, .92); text-shadow: 0 1px 3px rgba(16, 14, 13, .5), 0 2px 14px rgba(16, 14, 13, .45);
  }
  .mfhh-menu__btn:not(.is-plan):hover { color: #fff; }
  .mfhh-menu__btn:not(.is-plan)[aria-current] { color: var(--mfhh-gold); }
  .mfhh-menu__item.is-plan { margin-left: 12px; }
}

/* phone: a slim bar on the bottom edge above the safe area; Back pill, photos, credit and stop 4 sit above it */
@media (max-width: 760px) {
  .mfhh-menu {
    left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom));
    height: 54px; padding: 4px; border-radius: 999px;
    background: rgba(28, 23, 20, .6); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: inset 0 0 0 1px rgba(234, 208, 162, .3), 0 10px 30px -14px rgba(8, 5, 3, .8);
  }
  .mfhh-menu__list { height: 100%; display: grid; grid-template-columns: .9fr .85fr .95fr 1.3fr; gap: 2px; }
  .mfhh-menu__item { min-width: 0; height: 100%; display: flex; }
  .mfhh-menu__btn {
    width: 100%; height: 100%; min-height: 44px; padding: 0 4px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; line-height: 1.15; letter-spacing: .01em; text-align: center; text-wrap: balance;
    color: rgba(255, 252, 246, .94);
  }
  .mfhh-menu__btn::after { bottom: 4px; }
  .mfhh-menu__btn:not(.is-plan)[aria-current] { background: rgba(255, 247, 232, .1); }
  .mfhh-menu__btn.is-plan { padding: 0 10px 0 8px; gap: 6px; font-size: 16px; line-height: 1.05; }
  .mfhh-menu__leaf { width: 8px; height: 12px; }
  .mfhh-back { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 54px + 10px); }
  .mfhh-stack { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 54px + 10px + 44px + 12px); }
  body.mfh-menu-on .footnote { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 54px + 10px); }
  body.mfh-menu-on .consult { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 54px + 10px + 44px + 22px); }
}
@media (max-height: 700px) and (max-width: 760px) { .mfhh-stack { --fh: min(30dvh, 56vw); } }

@media (prefers-reduced-motion: reduce) {
  .mfhh-menu, .mfhh-menu__btn, .mfhh-menu__btn::after { transition-duration: .01ms !important; }
}

/* ================= v8.4 polish (iPhone) ================= */
/* native feel: taps never wait for a double-tap zoom, and a finger on the fixed controls never drags the page */
.mfhh-dot, .mfhh-edge, .mfhh-back, .mfhh-btn, .mfhh-menu, .mfhh-menu__btn, .mfhh-stack { touch-action: none; }
/* the hint: one quiet line in the whole-room view, there from the first frame (no entry animation, nothing moves
   under it); fades out after the first tap and never comes back this visit (state in memory only) */
.mfhh-hint {
  position: absolute; left: 50%; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 18px); margin: 0;
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px 9px 12px; border-radius: 999px; white-space: nowrap;
  transform: translate3d(-50%, 0, 0); pointer-events: none;
  background: rgba(28, 23, 20, .58); box-shadow: inset 0 0 0 1px rgba(234, 208, 162, .34), 0 8px 24px -12px rgba(8, 5, 3, .7);
  font: 500 12.5px/1 var(--mfhh-body); letter-spacing: .06em; color: rgba(255, 250, 242, .94);
  transition: opacity .6s var(--mfhh-calm), transform .7s var(--mfhh-calm), visibility 0s;
}
.mfhh-hint__dot { width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 40% 38%, #fffaf0 0, #fbe7c4 45%, #e7c58f 100%); box-shadow: 0 0 6px 2px rgba(255, 236, 205, .55); }
.mfhh-hint.is-gone, body.mfh-zoomed .mfhh-hint, body.mfh-gliding-in .mfhh-hint, body.mfh-plan-open .mfhh-hint {
  opacity: 0; visibility: hidden; transform: translate3d(-50%, 6px, 0); transition: opacity .45s var(--mfhh-calm), transform .6s var(--mfhh-calm), visibility 0s linear .45s; }
/* phone: above the credit line, which sits above the menu bar (credit is two short lines; room for a third) */
@media (max-width: 760px) {
  .mfhh-hint { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 54px + 10px + 58px); font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .mfhh-hint { transition: none !important; } }