/* =====================================================
   Chirri Floral — Monte-inspired rebuild by Alaris
   ===================================================== */
:root{
  --cream:#f2f0dd;
  --cream-warm:#fff6e0;
  --pink:#eeb6d2;
  --pink-soft:#f7d4e2;
  --sage:#c5d7b1;
  --burgundy:#5d1414;
  --burgundy-deep:#3d0c0c;
  --ink:#2a1010;
  --font-display:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-soft:"Fraunces",Georgia,serif;
  --ease-out:cubic-bezier(.16,.84,.34,1);
  --r-lg:26px;
  --r-pill:999px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--font-display);font-size:16px;line-height:1.55;color:var(--burgundy);background:var(--cream);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,picture{display:block;max-width:100%;height:auto}a{color:inherit;text-underline-offset:3px}button,input,textarea,select{font:inherit}button{cursor:pointer}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:-100px;left:1rem;z-index:1000;background:var(--burgundy);color:var(--cream-warm);padding:.75rem 1rem;border-radius:12px;text-decoration:none}.skip-link:focus{top:1rem}:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:8px}

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;pointer-events:none;color:var(--burgundy);transition:color .28s var(--ease-out),filter .28s var(--ease-out)}
.site-header[data-theme="light"]{color:var(--cream-warm)}
.site-nav{height:84px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 clamp(1.25rem,3vw,3.25rem);pointer-events:none}
.nav-link,.site-mark{pointer-events:auto}.nav-link{font-size:.86rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;line-height:1;min-height:44px;display:inline-flex;align-items:center}.nav-link--left{justify-self:start}.nav-link--right{justify-self:end}.site-mark{position:relative;display:block;width:116px;height:45px;text-decoration:none}.site-mark .mark{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .25s var(--ease-out)}.mark--light{opacity:0}.site-header[data-theme="light"] .mark--dark{opacity:0}.site-header[data-theme="light"] .mark--light{opacity:1}
.menu-panel{position:fixed;top:0;left:0;right:0;z-index:90;background:color-mix(in srgb,var(--cream) 92%,white);border-bottom:1px solid color-mix(in srgb,var(--burgundy) 16%,transparent);padding:88px clamp(1.25rem,4vw,4rem) 2rem;transform:translateY(-16px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s var(--ease-out),transform .28s var(--ease-out),visibility .28s}.menu-panel.is-open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}.menu-panel[hidden]{display:block;visibility:hidden}.menu-panel__inner{display:grid;gap:.28rem;max-width:1120px;margin:auto}.menu-panel a{font-family:var(--font-soft);font-size:clamp(2rem,6vw,5.2rem);line-height:.95;text-decoration:none;color:var(--burgundy);letter-spacing:-.04em}.menu-panel a:hover{font-style:italic}

/* Shared */
.eyebrow{margin:0 0 1rem;font-size:.77rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:color-mix(in srgb,var(--burgundy) 70%,transparent)}
.section-inner{width:min(1120px,calc(100% - 2.5rem));margin:auto}.section-heading{text-align:center;max-width:770px;margin:0 auto 3rem}.section-heading h2,.showreel-copy h2,.stack-copy h2,.about__text h2{margin:0;color:var(--burgundy);font-weight:800;font-size:clamp(2rem,5.2vw,4.8rem);line-height:.95;letter-spacing:-.06em;text-transform:uppercase}.section-heading p,.showreel-copy p,.stack-copy p,.about__text p{font-size:clamp(1rem,1.35vw,1.14rem);line-height:1.55}.pill-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.85rem 2.35rem;border:2px solid currentColor;border-radius:var(--r-pill);text-transform:uppercase;letter-spacing:.16em;font-weight:800;font-size:.82rem;text-decoration:none;transition:background .22s var(--ease-out),color .22s var(--ease-out),transform .22s var(--ease-out),box-shadow .22s var(--ease-out)}.pill-btn:hover{background:var(--burgundy);color:var(--cream-warm);transform:translateY(-2px);box-shadow:0 14px 40px -20px var(--burgundy)}

/* Hero */
.hero{min-height:100svh;background:var(--hero-bg,var(--cream));position:relative;display:grid;place-items:center;padding:100px 1.25rem 92px;overflow:hidden;transition:background-color .58s var(--ease-out),background .58s var(--ease-out)}.hero::before{content:"";position:absolute;inset:auto auto -26vw -12vw;width:52vw;aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--cream-warm) 16%,transparent);filter:blur(20px);opacity:.72}.hero__centre{position:relative;display:grid;place-items:center;gap:1.05rem}.hero-flower{position:relative;width:clamp(220px,27vw,390px);aspect-ratio:1;isolation:isolate}.hero-flower__petal{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(.985) rotate(-1deg);transition:opacity .55s var(--ease-out),transform .75s var(--ease-out)}.hero-flower__petal.is-active{opacity:1;transform:scale(1) rotate(0deg)}.hero-flower__word{position:absolute;left:50%;top:50%;width:37%;height:auto;transform:translate(-50%,-50%);z-index:2;opacity:0;transition:opacity .35s var(--ease-out)}.hero-flower.word-dark .hero-flower__word--dark,.hero-flower.word-light .hero-flower__word--light,.hero-flower.word-pink .hero-flower__word--pink{opacity:1}.hero__pronunciation{display:flex;align-items:baseline;justify-content:center;gap:clamp(.7rem,2vw,1.25rem);color:var(--burgundy);transition:color .55s var(--ease-out)}.hero[data-nav="light"] .hero__pronunciation{color:var(--cream-warm)}.hero__ipa{font-size:clamp(.98rem,1.65vw,1.4rem);font-weight:800;letter-spacing:.08em;line-height:1}.hero__urdu{font-family:var(--font-soft);font-weight:650;font-size:clamp(1.65rem,3.2vw,2.65rem);line-height:1;letter-spacing:.02em}

/* Wide reel */
.showreel{background:var(--cream);position:relative}.showreel--wide{padding:0 0 clamp(5rem,9vw,9rem);margin-top:-1px}.wide-carousel{width:min(1110px,calc(100% - 8rem));margin:0 auto;position:relative;transform:translateY(-15.5vh);z-index:2}.wide-carousel__stage{position:relative;aspect-ratio:1.68;border:4px solid var(--burgundy);border-radius:31px 25px 34px 27px / 25px 34px 27px 31px;overflow:hidden;background:var(--pink-soft);box-shadow:0 30px 86px -60px var(--burgundy)}.wide-carousel__slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .45s var(--ease-out),transform .55s var(--ease-out);transform:scale(1.01)}.wide-carousel__slide.is-active{opacity:1;transform:scale(1)}.wide-carousel__slide img{width:100%;height:100%;object-fit:cover}.carousel-controls{display:flex;gap:.65rem}.carousel-controls--wide{justify-content:flex-end;margin-top:1rem}.round-btn{width:48px;height:48px;border:3px solid var(--burgundy);border-radius:50%;background:transparent;color:var(--burgundy);display:grid;place-items:center;font-size:1.35rem;line-height:1;transition:background .2s,color .2s,transform .2s}.round-btn:hover{background:var(--burgundy);color:var(--cream-warm);transform:translateY(-2px)}.showreel-copy{text-align:center;width:min(820px,calc(100% - 2.5rem));margin:-7.5vh auto 0}.showreel-copy h2{font-size:clamp(2rem,4.4vw,4rem);margin-bottom:1.7rem}.showreel-copy .eyebrow{margin-bottom:.75rem}

/* Bouquet banners */
.flower-banner{position:relative;min-height:330px;background:var(--cream);display:flex;align-items:center;overflow:hidden}.flower-banner__band{position:relative;width:100%;height:270px;overflow:hidden}.flower-banner__band::before{content:"";position:absolute;left:-8%;right:-8%;top:50%;height:118px;transform:translateY(-50%) rotate(-2.25deg);transform-origin:center;border-radius:2px 18px 4px 14px;box-shadow:0 1px 0 color-mix(in srgb,var(--burgundy) 10%,transparent)}.flower-banner--cream-border .flower-banner__band::before{background:var(--pink)}.flower-banner--pink-border{background:var(--cream)}.flower-banner--pink-border .flower-banner__band::before{background:var(--burgundy);transform:translateY(-50%) rotate(2.15deg)}.flower-banner__track{position:absolute;inset:0;display:flex;width:200%;will-change:transform}.flower-banner__track--ltr{animation:bannerMoveRight 30s linear infinite}.flower-banner__track--rtl{animation:bannerMoveLeft 30s linear infinite}.flower-banner:hover .flower-banner__track{animation-play-state:paused}.flower-banner__set{position:relative;flex:0 0 50%;height:100%;min-width:50%}.flower-banner__set img{position:absolute;top:50%;left:var(--x);width:clamp(122px,15.5vw,228px);height:auto;transform:translate(-50%,var(--y)) rotate(var(--r)) scale(var(--s));filter:drop-shadow(0 18px 24px rgba(61,12,12,.13));user-select:none}.flower-banner--pink-border .flower-banner__set img{width:clamp(122px,15.8vw,236px)}@keyframes bannerMoveLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}@keyframes bannerMoveRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* Stack reel */
.showreel--stack{padding:clamp(5rem,10vw,9rem) 0;display:grid;grid-template-columns:minmax(0,500px) minmax(300px,520px);gap:clamp(3rem,8vw,7rem);align-items:center;justify-content:center;width:100%;padding-left:clamp(1.25rem,5vw,5rem);padding-right:clamp(1.25rem,5vw,5rem)}.stack-carousel{width:min(500px,100%)}.stack-carousel__stage{position:relative;min-height:620px}.stack-carousel__slide{position:absolute;inset:0;margin:0;border:4px solid var(--burgundy);border-radius:31px 25px 34px 27px / 25px 34px 27px 31px;overflow:hidden;background:var(--pink-soft);box-shadow:0 22px 65px -50px var(--burgundy);transition:opacity .4s var(--ease-out),transform .42s var(--ease-out);opacity:.75}.stack-carousel__slide:nth-child(1){transform:translate(0,0) rotate(-.2deg);z-index:3}.stack-carousel__slide:nth-child(2){transform:translate(31px,22px) rotate(3.5deg);z-index:2}.stack-carousel__slide:nth-child(3){transform:translate(60px,45px) rotate(6.5deg);z-index:1}.stack-carousel__slide.is-active{opacity:1;z-index:5;transform:translate(0,0) rotate(-.2deg)}.stack-carousel__slide img{width:100%;height:100%;object-fit:cover}.carousel-controls--stack{justify-content:center;margin-top:1.25rem}.stack-copy{max-width:520px}.stack-copy h2{font-size:clamp(2rem,4.2vw,4.1rem);margin-bottom:1.35rem}.stack-copy p:not(.eyebrow){max-width:45ch;font-weight:700;color:color-mix(in srgb,var(--burgundy) 88%,var(--ink))}

/* About */
.about{background:var(--cream);padding:clamp(5rem,10vw,9rem) clamp(1.25rem,5vw,5rem)}.about__grid{width:min(1120px,100%);margin:auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.85fr);gap:clamp(3rem,8vw,7rem);align-items:center}.about__text h2{font-size:clamp(2.1rem,4.8vw,4.5rem);margin-bottom:1.5rem}.about__text p{font-weight:600;max-width:62ch;color:color-mix(in srgb,var(--burgundy) 86%,var(--ink));margin:0 0 1.05rem}.about__text em{font-family:var(--font-soft);font-style:italic;font-size:1.15em}.portrait-frame{aspect-ratio:.82;border:4px solid var(--burgundy);border-radius:34px 27px 38px 30px / 28px 39px 31px 34px;background:var(--cream-warm);position:relative;overflow:hidden;box-shadow:0 22px 65px -52px var(--burgundy)}.portrait-frame img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}

/* Sizes */
.sizes{background:var(--cream);padding:clamp(5rem,10vw,9rem) 0;border-top:1px solid color-mix(in srgb,var(--burgundy) 16%,transparent)}.sizes-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}.sizes-grid li{min-width:0}.size-card{width:100%;min-height:190px;border:2px solid var(--burgundy);border-radius:22px;padding:1.2rem;display:flex;flex-direction:column;justify-content:space-between;text-align:left;background:color-mix(in srgb,var(--cream) 82%,white);color:var(--burgundy);transition:transform .25s var(--ease-out),background .25s var(--ease-out),color .25s var(--ease-out),box-shadow .25s var(--ease-out)}.sizes-grid li:nth-child(1) .size-card{--hover-bg:var(--pink-soft)}.sizes-grid li:nth-child(2) .size-card{--hover-bg:var(--sage)}.sizes-grid li:nth-child(3) .size-card{--hover-bg:var(--cream-warm)}.sizes-grid li:nth-child(4) .size-card{--hover-bg:var(--pink)}.sizes-grid li:nth-child(5) .size-card{--hover-bg:color-mix(in srgb,var(--sage) 66%,var(--cream))}.size-card:hover,.size-card:focus-visible{transform:translateY(-4px);background:var(--hover-bg,var(--pink-soft));box-shadow:0 18px 42px -34px var(--burgundy)}.size-card span{text-transform:uppercase;letter-spacing:.18em;font-size:.7rem;font-weight:900}.size-card strong{font-size:clamp(2.6rem,5vw,4.6rem);line-height:.85;letter-spacing:-.09em}.size-card em{font-style:normal;font-weight:800}.size-card--feature{background:var(--burgundy);color:var(--cream-warm);--hover-bg:var(--burgundy-deep)}.size-card--feature:hover,.size-card--feature:focus-visible{background:var(--burgundy-deep);color:var(--cream-warm)}

/* Form */
.enquire{background:var(--pink);padding:clamp(5rem,10vw,9rem) 0}.enquiry-form{background:color-mix(in srgb,var(--cream) 82%,white);border:3px solid var(--burgundy);border-radius:30px;padding:clamp(1.25rem,3vw,2.5rem);box-shadow:0 24px 80px -55px var(--burgundy)}.form-group{border:0;margin:0 0 1rem;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.field{display:flex;flex-direction:column;gap:.45rem}.field--inline{grid-column:span 3;display:grid;grid-template-columns:1fr 1fr;gap:1rem}.field label{font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;font-weight:900}input,select,textarea{width:100%;min-height:50px;border:1.5px solid color-mix(in srgb,var(--burgundy) 32%,transparent);background:var(--cream-warm);color:var(--burgundy);border-radius:16px;padding:.9rem 1rem}textarea{resize:vertical;min-height:108px}.select-wrap{position:relative}.field__opt,.field__hint,.field__error{font-size:.76rem;letter-spacing:0;text-transform:none}.field__hint{margin:.1rem 0 0;opacity:.65}.field__error{margin:.1rem 0 0;color:var(--burgundy-deep);font-weight:800}.field:has(#f-size),.field:has(#f-card),.field:has(#f-message){grid-column:1/-1}.form-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1.25rem}.btn-send{min-height:52px;border:2px solid var(--burgundy);border-radius:var(--r-pill);background:var(--burgundy);color:var(--cream-warm);padding:.85rem 1.5rem;display:inline-flex;align-items:center;gap:1rem;text-transform:uppercase;letter-spacing:.14em;font-weight:900;font-size:.78rem;transition:background .2s,transform .2s}.btn-send:hover{background:var(--burgundy-deep);transform:translateY(-2px)}.btn-send:disabled{opacity:.7;cursor:not-allowed}.form-actions__note{font-size:.88rem;margin:0}.form-actions__note a{font-weight:800}.form-success{text-align:center;padding:2rem}.form-success__flower{width:86px;height:86px;object-fit:contain;margin:0 auto 1rem;animation:gentlePop .65s var(--ease-out) both}.form-success__title{font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.05;margin:0 0 .6rem;text-transform:uppercase}.form-success__body{margin:0}.form-error{margin-top:1rem;padding:1rem;border:1px solid var(--burgundy);border-radius:18px;background:var(--pink-soft)}
@keyframes gentlePop{from{transform:scale(.7) rotate(-8deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}

/* Footer kept from original */
.site-footer{background:var(--burgundy);color:var(--cream-warm);padding:6rem 1.5rem 1.5rem}.site-footer__inner{max-width:1200px;margin:0 auto;display:grid;gap:3rem}@media (min-width:768px){.site-footer__inner{grid-template-columns:1.4fr 1fr 1fr;align-items:start}}.site-footer__brand img{height:60px;width:auto;margin-bottom:.75rem}.site-footer__tag{font-family:var(--font-soft);font-style:italic;font-size:1.1rem;margin:0;opacity:.85;max-width:26ch}.site-footer__nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}.site-footer__nav a{color:var(--cream-warm);text-decoration:none;opacity:.8;transition:opacity .2s;display:inline-block;padding:.25rem 0}.site-footer__nav a:hover{opacity:1;text-decoration:underline}.site-footer__contact{font-style:normal;margin:0}.site-footer__contact p{margin:0 0 .25rem}.site-footer__contact a{color:var(--cream-warm);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--cream-warm) 40%,transparent);padding-bottom:1px;transition:border-color .2s}.site-footer__contact a:hover{border-color:var(--cream-warm)}.site-footer__loc{opacity:.7;margin-top:.75rem;font-size:.9rem}.site-footer__base{max-width:1200px;margin:4rem auto 0;padding-top:1.5rem;border-top:1px solid color-mix(in srgb,var(--cream-warm) 18%,transparent);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;font-size:.82rem;opacity:.8}.site-footer__credit a{color:var(--cream-warm);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--cream-warm) 40%,transparent)}.site-footer__credit a:hover{border-color:var(--cream-warm)}.site-footer__copy,.site-footer__credit{margin:0}

/* Motion */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .9s var(--ease-out)}.reveal.is-in{opacity:1;transform:translateY(0)}.confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:1000;overflow:hidden}.confetti-piece{position:absolute;background-size:contain;background-repeat:no-repeat;background-position:center;will-change:transform,opacity}

/* Responsive */
@media (max-width:1050px){.sizes-grid{grid-template-columns:repeat(3,1fr)}.showreel--stack{grid-template-columns:1fr}.stack-carousel{margin:auto}.stack-copy{text-align:center;margin:auto}.stack-copy p:not(.eyebrow){margin-left:auto;margin-right:auto}.about__grid{grid-template-columns:1fr}.about__portrait{max-width:520px;margin:auto}.form-group{grid-template-columns:1fr 1fr}.field:has(#f-name){grid-column:1/-1}}
@media (max-width:720px){.site-nav{height:76px;padding:0 1rem}.site-mark{width:92px;height:38px}.nav-link{font-size:.72rem;letter-spacing:.18em}.hero{min-height:88svh;padding-top:86px;padding-bottom:74px}.hero-flower{width:clamp(190px,62vw,280px)}.hero__pronunciation{gap:.7rem}.wide-carousel{width:calc(100% - 2rem);transform:translateY(-8vh)}.wide-carousel__stage{aspect-ratio:.98;border-width:3px;border-radius:24px 20px 27px 22px / 20px 28px 22px 26px}.carousel-controls--wide{justify-content:center}.showreel-copy{margin:-3vh auto 0}.flower-banner{min-height:235px}.flower-banner__band{height:220px}.flower-banner__band::before{height:92px}.flower-banner__set img{width:clamp(112px,34vw,156px)}.showreel--stack{padding-top:4.5rem;padding-bottom:4.5rem}.stack-carousel__stage{min-height:520px}.stack-carousel__slide{border-width:3px}.about,.sizes,.enquire{padding-top:4.5rem;padding-bottom:4.5rem}.portrait-frame{border-width:3px}.section-heading h2,.showreel-copy h2,.stack-copy h2,.about__text h2{letter-spacing:-.05em}.sizes-grid{grid-template-columns:1fr 1fr}.size-card{min-height:155px}.form-group,.field--inline{grid-template-columns:1fr}.field,.field--inline{grid-column:1/-1}.enquiry-form{border-radius:22px}.form-actions{align-items:flex-start;flex-direction:column}.btn-send{width:100%;justify-content:center}.menu-panel a{font-size:clamp(2.2rem,13vw,4.5rem)}}
@media (max-width:420px){.section-inner,.wide-carousel,.showreel-copy{width:calc(100% - 1.25rem)}.sizes-grid{grid-template-columns:1fr}.stack-carousel__stage{min-height:455px}.round-btn{width:44px;height:44px}.flower-banner__set img{width:118px}.hero__ipa{font-size:.86rem}.hero__urdu{font-size:1.6rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.reveal{opacity:1;transform:none}.flower-banner__track{transform:none!important}}

/* =====================================================
   Round 2 polish — banner motion, reel overlap, spacing
   ===================================================== */
:root{
  --hero-reel-peek:clamp(150px,25vh,275px);
}
.hero::before{display:none;}
.section-heading h2,
.showreel-copy h2,
.stack-copy h2,
.about__text h2{
  letter-spacing:-.028em;
  word-spacing:.035em;
  line-height:1.04;
  max-width:100%;
}
.section-heading{margin-bottom:clamp(3rem,6vw,5rem);}
.section-heading p{max-width:62ch;margin-left:auto;margin-right:auto;}
.eyebrow{letter-spacing:.28em;}

/* Let the first photo reel properly peek into the hero without crashing into the copy. */
.showreel--wide{padding-bottom:clamp(5.5rem,10vw,10rem);}
.wide-carousel{
  width:min(1180px,calc(100% - 6rem));
  transform:translateY(calc(-1 * var(--hero-reel-peek)));
}
.wide-carousel__stage{
  border-radius:34px 25px 38px 29px / 28px 39px 31px 34px;
  box-shadow:0 34px 100px -68px var(--burgundy);
}
.showreel-copy{
  margin:calc(-1 * var(--hero-reel-peek) + clamp(2.75rem,5.2vw,5.75rem)) auto 0;
}
.showreel-copy h2{max-width:880px;margin-left:auto;margin-right:auto;}
.carousel-controls--wide{margin-top:1.15rem;}

/* Wabi-sabi moving banners. Flowers sit on the centre strip and gently travel in a loop. */
.flower-banner{
  min-height:clamp(315px,29vw,440px);
  background:var(--cream);
  overflow:hidden;
}
.flower-banner__band{
  height:clamp(280px,27vw,390px);
  overflow:visible;
}
.flower-banner__band::before{
  height:clamp(116px,8.6vw,156px);
  border-radius:4px 20px 5px 16px;
  box-shadow:0 10px 34px -32px rgba(61,12,12,.45);
}
.flower-banner--cream-border .flower-banner__band::before{
  background:var(--pink);
  transform:translateY(-50%) rotate(-2.1deg);
}
.flower-banner--pink-border .flower-banner__band::before{
  background:var(--burgundy);
  transform:translateY(-50%) rotate(2.1deg);
}
.flower-banner__track{overflow:visible;}
.flower-banner__track--ltr{animation:bannerMoveRight 46s linear infinite;}
.flower-banner__track--rtl{animation:bannerMoveLeft 48s linear infinite;}
.flower-banner__set{overflow:visible;}
.flower-banner__set img{
  top:50%;
  width:clamp(178px,18.5vw,310px);
  max-width:none;
  transform:translate(-50%,calc(-50% + var(--y,0px))) rotate(var(--r,0deg)) scale(var(--s,1));
  filter:drop-shadow(0 18px 26px rgba(61,12,12,.14));
}
.flower-banner--pink-border .flower-banner__set img{width:clamp(176px,18.8vw,315px);}

/* More breathing room for the stacked vertical reel and keep the controls usable. */
.showreel--stack{
  grid-template-columns:minmax(0,540px) minmax(360px,620px);
  gap:clamp(4rem,10vw,10rem);
  padding-top:clamp(6rem,10vw,10rem);
  padding-bottom:clamp(6rem,10vw,10rem);
}
.stack-carousel{width:min(520px,100%);}
.stack-carousel__stage{
  min-height:620px;
  margin-bottom:84px;
}
.carousel-controls--stack{
  position:relative;
  z-index:12;
  margin-top:0;
}
.stack-copy{
  max-width:620px;
  transform:translateX(clamp(0rem,2vw,2.25rem));
}
.stack-copy h2{max-width:11.5ch;}
.stack-copy p:not(.eyebrow){max-width:48ch;}

/* About and sizing sections need a little more air and better readable heading rhythm. */
.about__grid{gap:clamp(4rem,9vw,8rem);}
.about__text h2{max-width:12.5ch;}
.sizes{padding-top:clamp(6rem,11vw,10rem);}
.sizes-grid{gap:clamp(1rem,1.4vw,1.35rem);}
.size-card strong{letter-spacing:-.045em;}
.sizes-grid li:nth-child(3) .size-card{--hover-bg:var(--burgundy);}
.sizes-grid li:nth-child(3) .size-card:hover,
.sizes-grid li:nth-child(3) .size-card:focus-visible{color:var(--cream-warm);}

@media (max-width:1050px){
  .showreel--stack{grid-template-columns:1fr;gap:clamp(3.5rem,7vw,5rem);}
  .stack-copy{transform:none;text-align:center;margin:auto;}
  .stack-copy h2{max-width:13ch;margin-left:auto;margin-right:auto;}
  .stack-copy p:not(.eyebrow){margin-left:auto;margin-right:auto;}
}
@media (max-width:720px){
  :root{--hero-reel-peek:clamp(78px,13vh,128px);}
  .section-heading h2,.showreel-copy h2,.stack-copy h2,.about__text h2{
    letter-spacing:-.018em;
    word-spacing:.02em;
    line-height:1.08;
  }
  .wide-carousel{width:calc(100% - 1.5rem);}
  .showreel-copy{margin:calc(-1 * var(--hero-reel-peek) + 2.6rem) auto 0;}
  .flower-banner{min-height:250px;}
  .flower-banner__band{height:235px;}
  .flower-banner__band::before{height:94px;}
  .flower-banner__set img,
  .flower-banner--pink-border .flower-banner__set img{width:clamp(128px,40vw,188px);}
  .showreel--stack{padding-top:5rem;padding-bottom:5rem;}
  .stack-carousel{width:min(470px,100%);}
  .stack-carousel__stage{min-height:520px;margin-bottom:72px;}
  .about__text h2{max-width:100%;}
}
@media (max-width:420px){
  :root{--hero-reel-peek:82px;}
  .stack-carousel__stage{min-height:455px;margin-bottom:66px;}
  .flower-banner__set img,
  .flower-banner--pink-border .flower-banner__set img{width:128px;}
}
@media (prefers-reduced-motion:reduce){
  .flower-banner__track{animation:none!important;transform:none!important;}
}

/* =====================================================
   Round 4 fixes — static hero peek, cleaner reels, proper banner marquee
   ===================================================== */
:root{
  --hero-reel-peek:clamp(150px,22vh,245px);
}

/* The first reel should physically stay peeking into the hero, not reveal-slide back down. */
.showreel--wide{
  padding-bottom:clamp(6.5rem,11vw,11rem);
}
.showreel--wide .wide-carousel,
.showreel--wide .wide-carousel.reveal,
.showreel--wide .wide-carousel.reveal.is-in{
  opacity:1!important;
  transform:translateY(calc(-1 * var(--hero-reel-peek)))!important;
  transition:none!important;
}
.showreel--wide .showreel-copy{
  margin:calc(-1 * var(--hero-reel-peek) + clamp(7.25rem,8.8vw,9.5rem)) auto 0!important;
  position:relative;
  z-index:3;
}
.showreel-copy .eyebrow{margin-bottom:1rem;}
.showreel-copy h2{margin-bottom:2rem;}
.carousel-controls--wide{
  position:relative;
  z-index:4;
  margin-top:1.35rem;
}

/* Rebuild the bouquet banners as a clean, thick, asymmetrical strip with evenly spaced flowers. */
.flower-banner{
  min-height:clamp(320px,30vw,460px)!important;
  background:var(--cream)!important;
  display:flex;
  align-items:center;
  overflow:hidden!important;
}
.flower-banner__band{
  position:relative;
  width:100%;
  height:clamp(290px,27vw,410px)!important;
  overflow:hidden!important;
}
.flower-banner__band::before{
  content:"";
  position:absolute;
  left:-7vw;
  right:-7vw;
  top:50%;
  height:clamp(138px,11vw,190px)!important;
  transform-origin:center;
  border-radius:0!important;
  clip-path:polygon(0 16%, 100% 0, 100% 84%, 0 100%);
  box-shadow:none!important;
}
.flower-banner--cream-border .flower-banner__band::before{
  background:var(--pink)!important;
  transform:translateY(-50%) rotate(-2.4deg)!important;
}
.flower-banner--pink-border .flower-banner__band::before{
  background:var(--burgundy)!important;
  transform:translateY(-50%) rotate(2.35deg)!important;
}
.flower-banner__track{
  position:absolute;
  inset:0;
  display:flex!important;
  width:200%;
  overflow:visible!important;
  will-change:transform;
  pointer-events:none;
}
.flower-banner__track--ltr{animation:bannerMoveRight 50s linear infinite!important;}
.flower-banner__track--rtl{animation:bannerMoveLeft 52s linear infinite!important;}
.flower-banner:hover .flower-banner__track,
.flower-banner:focus-within .flower-banner__track{
  animation-play-state:running!important;
}
.flower-banner__set{
  position:relative!important;
  flex:0 0 50%!important;
  min-width:50%!important;
  height:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-evenly!important;
  gap:clamp(1.5rem,3vw,4rem)!important;
  padding:0 clamp(2.4rem,4vw,5rem)!important;
  overflow:visible!important;
}
.flower-banner__set img,
.flower-banner--pink-border .flower-banner__set img{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  flex:0 0 auto!important;
  width:clamp(150px,13.8vw,255px)!important;
  height:auto!important;
  max-width:none!important;
  transform:translateY(calc(var(--y,0px) * .72)) rotate(var(--r,0deg)) scale(var(--s,1))!important;
  filter:none!important;
  user-select:none;
  pointer-events:none;
}
.flower-banner__set img:nth-child(2),
.flower-banner__set img:nth-child(4){width:clamp(142px,12.7vw,238px)!important;}
.flower-banner__set img:nth-child(3){width:clamp(160px,14.5vw,270px)!important;}

/* Give the first reel copy real breathing room under the photo. */
.showreel--wide .pill-btn{margin-top:.25rem;}

@media (max-width:1050px){
  :root{--hero-reel-peek:clamp(110px,16vh,170px);}
  .showreel--wide .showreel-copy{
    margin:calc(-1 * var(--hero-reel-peek) + clamp(5.75rem,8vw,7rem)) auto 0!important;
  }
  .flower-banner__set{
    gap:clamp(1rem,2vw,2rem)!important;
    padding:0 clamp(1rem,2vw,2.25rem)!important;
  }
  .flower-banner__set img,
  .flower-banner--pink-border .flower-banner__set img{
    width:clamp(118px,17vw,190px)!important;
  }
  .flower-banner__set img:nth-child(2),
  .flower-banner__set img:nth-child(4){width:clamp(112px,15.8vw,176px)!important;}
  .flower-banner__set img:nth-child(3){width:clamp(126px,18vw,202px)!important;}
}
@media (max-width:720px){
  :root{--hero-reel-peek:clamp(82px,12vh,118px);}
  .showreel--wide .showreel-copy{
    margin:calc(-1 * var(--hero-reel-peek) + 5.25rem) auto 0!important;
  }
  .flower-banner{min-height:255px!important;}
  .flower-banner__band{height:235px!important;}
  .flower-banner__band::before{height:100px!important;}
  .flower-banner__set{
    justify-content:space-around!important;
    padding:0 .75rem!important;
  }
  .flower-banner__set img,
  .flower-banner--pink-border .flower-banner__set img{
    width:clamp(92px,22vw,132px)!important;
    transform:translateY(calc(var(--y,0px) * .45)) rotate(var(--r,0deg)) scale(var(--s,1))!important;
  }
  .flower-banner__set img:nth-child(2),
  .flower-banner__set img:nth-child(4){width:clamp(86px,20vw,120px)!important;}
  .flower-banner__set img:nth-child(3){width:clamp(98px,23vw,138px)!important;}
}
@media (max-width:420px){
  .showreel--wide .showreel-copy{margin:4.25rem auto 0!important;}
  .flower-banner__set img,
  .flower-banner--pink-border .flower-banner__set img{width:92px!important;}
}
@media (prefers-reduced-motion:reduce){
  .flower-banner__track{animation:none!important;transform:none!important;}
}


/* =====================================================
   Round 5 final hero peek polish
   ===================================================== */
:root{
  --hero-reel-peek:clamp(56px,7.8vh,74px);
}

.hero__reel-note{
  position:absolute;
  left:50%;
  bottom:calc(var(--hero-reel-peek) + clamp(1rem,1.8vw,1.35rem));
  transform:translateX(-50%);
  z-index:6;
  width:min(520px,calc(100% - 2rem));
  margin:0;
  text-align:center;
  color:var(--burgundy);
  font-family:var(--font-mono);
  font-weight:800;
  font-size:clamp(.72rem,.78vw,.86rem);
  line-height:1.18;
  letter-spacing:.03em;
  transition:color .55s var(--ease-out);
}
.hero[data-nav="light"] .hero__reel-note{
  color:var(--cream-warm);
}
.showreel--wide .wide-carousel,
.showreel--wide .wide-carousel.reveal,
.showreel--wide .wide-carousel.reveal.is-in{
  transform:translateY(calc(-1 * var(--hero-reel-peek)))!important;
}
.showreel--wide .showreel-copy{
  margin:calc(-1 * var(--hero-reel-peek) + clamp(7.25rem,8.8vw,9.5rem)) auto 0!important;
}

@media (max-width:1050px){
  :root{--hero-reel-peek:clamp(54px,8vh,76px);}
}
@media (max-width:720px){
  :root{--hero-reel-peek:clamp(46px,7vh,62px);}
  .hero__reel-note{
    bottom:calc(var(--hero-reel-peek) + .8rem);
    font-size:.7rem;
    max-width:300px;
  }
  .showreel--wide .showreel-copy{
    margin:calc(-1 * var(--hero-reel-peek) + 5rem) auto 0!important;
  }
}
@media (max-width:420px){
  :root{--hero-reel-peek:42px;}
  .showreel--wide .showreel-copy{margin:4.5rem auto 0!important;}
}

/* =====================================================
   Round 6 — requested tweaks
   ===================================================== */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
body{
  position:relative;
}
main,
section,
.site-header,
.site-nav{
  max-width:100%;
}

/* Let the fixed header/safe area follow the hero colour on mobile instead of leaving a stuck strip. */
.site-header{
  padding-top:env(safe-area-inset-top);
  background:var(--header-bg, transparent);
  transition:background-color .42s var(--ease-out), color .28s var(--ease-out), filter .28s var(--ease-out);
}
.site-nav{
  height:calc(84px + env(safe-area-inset-top));
  align-items:end;
  padding-top:0;
  padding-bottom:0.35rem;
}

/* Flower side-drawer menu */
.menu-panel{
  inset:0;
  background:transparent;
  border:0;
  padding:0;
}
.menu-panel__backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(41, 16, 16, 0.08);
  opacity:0;
  transition:opacity .28s var(--ease-out);
}
.menu-panel.is-open .menu-panel__backdrop{
  opacity:1;
}
.menu-panel__inner{
  position:absolute;
  top:max(0.5rem, env(safe-area-inset-top));
  right:min(-9rem,-12vw);
  width:min(39rem, 90vw);
  aspect-ratio:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:clamp(4.5rem,9vw,6rem) clamp(5rem,12vw,8rem) clamp(3rem,8vw,4rem) clamp(4rem,10vw,6rem);
  background:url('/assets/logos/flower-burgundy.png') center/contain no-repeat;
  transform:translate(30%, -20%) scale(.9) rotate(2deg);
  opacity:0;
  transition:transform .38s var(--ease-out), opacity .28s var(--ease-out);
}
.menu-panel.is-open .menu-panel__inner{
  transform:translate(0, 0) scale(1) rotate(0deg);
  opacity:1;
}
.menu-panel__close{
  appearance:none;
  border:0;
  background:none;
  color:var(--cream-warm);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin:0 0 1.2rem;
  padding:0;
}
.menu-panel__nav{
  display:grid;
  gap:.2rem;
}
.menu-panel__nav a,
.menu-panel a{
  font-family:var(--font-soft);
  font-size:clamp(1.7rem,4vw,3.6rem);
  line-height:.95;
  text-decoration:none;
  color:var(--cream-warm);
  letter-spacing:-.04em;
  text-shadow:none;
}
.menu-panel__nav a:hover,
.menu-panel__nav a:focus-visible{
  color:var(--pink-soft);
  font-style:italic;
}

/* Remove the old pronunciation spacing entirely. */
.hero__pronunciation{display:none !important;}

/* Mouse-follow pause/play helper */
.hero-toggle-cursor{
  position:fixed;
  z-index:140;
  pointer-events:none;
  opacity:0;
  transform:translate3d(0,0,0);
  padding:.42rem .7rem;
  border-radius:999px;
  background:rgba(93,20,20,.92);
  color:var(--cream-warm);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
  transition:opacity .18s var(--ease-out), background-color .18s var(--ease-out), color .18s var(--ease-out);
  mix-blend-mode:normal;
}
.hero-toggle-cursor.is-visible{opacity:1;}
.hero-toggle-cursor.is-light{
  background:rgba(242,240,221,.96);
  color:var(--burgundy);
}
.hero.is-paused .hero-flower__petal,
.hero.is-paused .hero-flower__word,
.hero.is-paused,
.hero.is-paused .hero__reel-note{
  transition-duration:.18s;
}

/* Photo reel framing */
.wide-carousel__slide:first-child img{
  object-position:center 61%;
}

/* Bigger, thicker bouquet banners */
.flower-banner{
  min-height:clamp(360px,34vw,500px) !important;
}
.flower-banner__band{
  height:clamp(325px,31vw,440px) !important;
}
.flower-banner__band::before{
  height:clamp(150px,12vw,210px) !important;
}
.flower-banner__set img,
.flower-banner--pink-border .flower-banner__set img{
  width:clamp(168px,15vw,280px) !important;
}
.flower-banner__set img:nth-child(2),
.flower-banner__set img:nth-child(4){
  width:clamp(160px,14vw,260px) !important;
}
.flower-banner__set img:nth-child(3){
  width:clamp(182px,16vw,292px) !important;
}

/* Cleaner Urdu rendering in the About section */
.urdu-word{
  display:inline-block;
  margin-inline:.18rem .12rem;
  font-family:"Noto Naskh Arabic", serif;
  font-style:normal;
  font-weight:700;
  font-size:1.12em;
  line-height:1;
  vertical-align:baseline;
  direction:rtl;
  unicode-bidi:isolate;
  letter-spacing:0;
}

/* Tidy long headings/text on small screens so they stop causing sideways drag. */
.about__text,
.stack-copy,
.showreel-copy,
.section-heading,
.hero__reel-note{
  overflow-wrap:anywhere;
}
.about__text h2,
.stack-copy h2,
.showreel-copy h2,
.section-heading h2{
  text-wrap:balance;
}

@media (max-width:1050px){
  .menu-panel__inner{
    right:-8rem;
    width:min(34rem, 92vw);
    padding:4.2rem 5.2rem 3rem 4rem;
  }
}

@media (max-width:720px){
  .site-nav{
    height:calc(76px + env(safe-area-inset-top));
    padding:0 .95rem .25rem;
  }
  .menu-panel__inner{
    top:max(.2rem, env(safe-area-inset-top));
    right:-7.2rem;
    width:min(31rem, 96vw);
    padding:4rem 4.2rem 3rem 3.1rem;
    transform:translate(24%, -12%) scale(.92);
  }
  .menu-panel__nav a,
  .menu-panel a{
    font-size:clamp(1.55rem, 8vw, 2.8rem);
  }
  .wide-carousel__slide:first-child img{
    object-position:center 64%;
  }
  .flower-banner{
    min-height:285px !important;
  }
  .flower-banner__band{
    height:255px !important;
  }
  .flower-banner__band::before{
    height:108px !important;
  }
  .flower-banner__set img,
  .flower-banner--pink-border .flower-banner__set img{
    width:clamp(108px, 25vw, 146px) !important;
  }
  .flower-banner__set img:nth-child(2),
  .flower-banner__set img:nth-child(4){
    width:clamp(100px, 23vw, 136px) !important;
  }
  .flower-banner__set img:nth-child(3){
    width:clamp(116px, 27vw, 154px) !important;
  }
}

@media (max-width:420px){
  .menu-panel__inner{
    right:-6.8rem;
    width:min(28rem, 98vw);
    padding:3.75rem 3.4rem 2.75rem 2.7rem;
  }
  .menu-panel__close{
    margin-bottom:.95rem;
  }
  .menu-panel__nav a,
  .menu-panel a{
    font-size:1.85rem;
  }
  .wide-carousel__slide:first-child img{
    object-position:center 66%;
  }
}

@media (hover:none), (pointer:coarse){
  .hero-toggle-cursor{display:none !important;}
}


/* =====================================================
   Round 7 — mobile banner, Monte-style menu, hero sync fixes
   ===================================================== */

/* Keep the fixed header transparent so the hero colour shows through as one clean surface. */
.site-header,
.site-header[data-theme="light"]{
  background:transparent !important;
  transition:color .28s var(--ease-out), filter .28s var(--ease-out) !important;
}
.site-nav{background:transparent !important;}

/* Monte-style left drawer menu: clean cream rectangle sliding in from the left. */
.menu-panel{
  position:fixed !important;
  inset:0 !important;
  z-index:220 !important;
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  transform:none !important;
  opacity:1 !important;
  visibility:hidden;
  pointer-events:none;
}
.menu-panel.is-open{
  visibility:visible;
  pointer-events:auto;
}
.menu-panel__backdrop{
  position:absolute !important;
  inset:0 !important;
  background:transparent !important;
  border:0 !important;
  opacity:1 !important;
}
.menu-panel__inner{
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:auto !important;
  width:min(370px, 88vw) !important;
  height:100dvh !important;
  min-height:100svh !important;
  aspect-ratio:auto !important;
  background:var(--cream) !important;
  background-image:none !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
  padding:1rem 1rem 1.25rem !important;
  transform:translateX(-102%) !important;
  opacity:1 !important;
  box-shadow:1px 0 0 rgba(93,20,20,.22) !important;
  transition:transform .42s var(--ease-out) !important;
}
.menu-panel.is-open .menu-panel__inner{
  transform:translateX(0) !important;
}
.menu-panel__close{
  appearance:none !important;
  border:0 !important;
  background:none !important;
  color:var(--burgundy) !important;
  font-family:var(--font-display) !important;
  font-size:.72rem !important;
  font-weight:900 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  line-height:1 !important;
  margin:0 0 2.6rem !important;
  padding:0 !important;
  min-height:44px !important;
}
.menu-panel__nav{
  display:flex !important;
  flex-direction:column !important;
  gap:.15rem !important;
  width:100% !important;
}
.menu-panel__nav a,
.menu-panel a{
  font-family:var(--font-display) !important;
  font-size:clamp(1.45rem, 2.1vw, 2rem) !important;
  font-weight:800 !important;
  line-height:1.28 !important;
  letter-spacing:-.055em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  color:var(--burgundy) !important;
  text-shadow:none !important;
  padding:.04rem 0 !important;
}
.menu-panel__nav a:hover,
.menu-panel__nav a:focus-visible{
  color:var(--burgundy) !important;
  font-style:normal !important;
  text-decoration:underline !important;
  text-underline-offset:.18em !important;
}

/* Move the first wide reel image down so the bouquets sit closer to the lower-middle of the card. */
.wide-carousel__slide:first-child img{
  object-position:center center !important;
  transform:translateY(7%) scale(1.045) !important;
  transform-origin:center center !important;
}

/* Force mobile bouquet strips into an even horizontal runway instead of bunching/stacking. */
@media (max-width:720px){
  .flower-banner__track{
    width:320vw !important;
  }
  .flower-banner__set{
    flex:0 0 160vw !important;
    min-width:160vw !important;
    width:160vw !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:0 !important;
    padding:0 7vw !important;
  }
  .flower-banner__set img,
  .flower-banner--pink-border .flower-banner__set img,
  .flower-banner__set img:nth-child(2),
  .flower-banner__set img:nth-child(3),
  .flower-banner__set img:nth-child(4){
    width:clamp(86px, 25vw, 118px) !important;
    transform:translateY(calc(var(--y,0px) * .24)) rotate(calc(var(--r,0deg) * .45)) scale(var(--s,1)) !important;
  }
  .wide-carousel__slide:first-child img{
    transform:translateY(10%) scale(1.08) !important;
  }
}
@media (max-width:420px){
  .menu-panel__inner{
    width:min(338px, 88vw) !important;
    padding:.95rem .95rem 1.15rem !important;
  }
  .menu-panel__close{margin-bottom:2.35rem !important;}
  .menu-panel__nav a,
  .menu-panel a{
    font-size:1.6rem !important;
    line-height:1.3 !important;
  }
  .flower-banner__set{
    flex-basis:170vw !important;
    min-width:170vw !important;
    width:170vw !important;
    padding:0 8vw !important;
  }
  .flower-banner__track{width:340vw !important;}
  .flower-banner__set img,
  .flower-banner--pink-border .flower-banner__set img,
  .flower-banner__set img:nth-child(2),
  .flower-banner__set img:nth-child(3),
  .flower-banner__set img:nth-child(4){
    width:clamp(78px, 24vw, 98px) !important;
  }
}

/* =====================================================
   Round 9 — single paint layer for hero colour cycle
   ---------------------------------------------------
   The seam at the top of the hero was caused by multiple
   transitioning background layers (body, body::before, .hero)
   getting out of sync with each other and with the iOS Safari
   status bar (which is painted instantly from <meta theme-color>).
   Fix: collapse everything to ONE paint layer on <html>.
   With one layer there's nothing for the seam to form between.
   ===================================================== */
:root{
  --current-hero-bg:var(--cream);
}
html{
  background-color:var(--current-hero-bg, var(--cream));
  transition:background-color .58s var(--ease-out);
}
/* Everything above the fold goes transparent so html is the sole bg painter. */
body{
  background:transparent !important;
  background-color:transparent !important;
}
body::before{
  /* Kill the fixed strip that was creating the visible horizontal seam. */
  content:none !important;
  display:none !important;
  background:transparent !important;
}
main{
  position:relative;
  z-index:1;
}
.hero{
  background:transparent !important;
  background-color:transparent !important;
  /* No transition needed — there's nothing to transition. */
  transition:none !important;
}
.site-header{
  z-index:230 !important;
  background-color:var(--header-bg, transparent) !important;
  background:var(--header-bg, transparent) !important;
  transition:background-color .38s var(--ease-out), color .28s var(--ease-out), filter .28s var(--ease-out) !important;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}
.site-nav{
  background:transparent !important;
}
.site-header[data-theme="light"]{
  color:var(--cream-warm);
}

/* Monte-style mobile navbar: once you scroll past the hero, the nav
   becomes a solid burgundy rectangle with cream text + cream wordmark. */
@media (max-width:720px){
  /* Mobile hero is now a fixed RNG pick — no cycling, so no transition needed,
     which also means no chance of the iOS status bar (instant) drifting out of
     sync with the html background. */
  html{
    transition:none !important;
  }
  /* While the inline head script's pick is being applied by main JS,
     keep petals invisible so we don't flash the default petal-0. */
  html.chirri-mobile-loading .hero-flower__petal,
  html.chirri-mobile-loading .hero-flower__word{
    opacity:0 !important;
  }

  .site-header[data-at-hero="false"]{
    background:var(--burgundy) !important;
    background-color:var(--burgundy) !important;
    border-bottom:1px solid color-mix(in srgb, var(--burgundy-deep) 55%, transparent);
    box-shadow:0 1px 0 rgba(0,0,0,.04);
  }
  .site-header[data-at-hero="false"] .nav-link,
  .site-header[data-at-hero="false"] .nav-link:hover,
  .site-header[data-at-hero="false"] .nav-link:focus{
    color:var(--cream-warm) !important;
  }
  /* Force the cream wordmark when sitting on the solid burgundy bar,
     regardless of what data-theme inheritance is doing. */
  .site-header[data-at-hero="false"] .mark--dark{opacity:0 !important;}
  .site-header[data-at-hero="false"] .mark--light{opacity:1 !important;}
}

/* New first showreel image: keep both bouquets lower-centre without the old push/zoom. */
.wide-carousel__slide:first-child img{
  object-fit:cover !important;
  object-position:center 45% !important;
  transform:none !important;
}
@media (max-width:720px){
  .wide-carousel__slide:first-child img{
    object-position:center 54% !important;
    transform:none !important;
  }
}
@media (max-width:420px){
  .wide-carousel__slide:first-child img{
    object-position:center 56% !important;
    transform:none !important;
  }
}

/* Keep mobile sticker banners evenly spaced on the coloured strip. */
@media (max-width:720px){
  .flower-banner__band{overflow:hidden !important;}
  .flower-banner__track{width:320vw !important;}
  .flower-banner__set{
    flex:0 0 160vw !important;
    min-width:160vw !important;
    width:160vw !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-evenly !important;
    gap:clamp(.85rem,4vw,1.4rem) !important;
    padding:0 7vw !important;
  }
  .flower-banner__set img,
  .flower-banner--pink-border .flower-banner__set img,
  .flower-banner__set img:nth-child(2),
  .flower-banner__set img:nth-child(3),
  .flower-banner__set img:nth-child(4){
    width:clamp(82px,24vw,112px) !important;
    transform:translateY(calc(var(--y,0px) * .18)) rotate(calc(var(--r,0deg) * .35)) scale(var(--s,1)) !important;
  }
}

/* =====================================================
   Round 10 — bulk up the mobile flower banner strips
   ---------------------------------------------------
   Round 8 left the bouquet stickers at ~24vw which read as
   scrawny on a phone with tons of cream dead-space around
   them. Scale the band, the angled coloured strip, AND the
   stickers up so they carry the same visual weight on mobile
   that they do on desktop. Same layout, same marquee, same
   positioning logic — just larger.
   ===================================================== */
@media (max-width:720px){
  .flower-banner{
    min-height:340px !important;
  }
  .flower-banner__band{
    height:320px !important;
  }
  .flower-banner__band::before{
    height:140px !important;
  }
  .flower-banner__track{
    width:480vw !important;
  }
  .flower-banner__set{
    flex:0 0 240vw !important;
    min-width:240vw !important;
    width:240vw !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-evenly !important;
    gap:clamp(.85rem,4vw,1.4rem) !important;
    padding:0 7vw !important;
  }
  .flower-banner__set img,
  .flower-banner--pink-border .flower-banner__set img,
  .flower-banner__set img:nth-child(2),
  .flower-banner__set img:nth-child(3),
  .flower-banner__set img:nth-child(4){
    width:clamp(150px,38vw,205px) !important;
    transform:translateY(calc(var(--y,0px) * .26)) rotate(calc(var(--r,0deg) * .42)) scale(var(--s,1)) !important;
  }
}
@media (max-width:420px){
  .flower-banner{
    min-height:300px !important;
  }
  .flower-banner__band{
    height:285px !important;
  }
  .flower-banner__band::before{
    height:124px !important;
  }
  .flower-banner__track{
    width:500vw !important;
  }
  .flower-banner__set{
    flex-basis:250vw !important;
    min-width:250vw !important;
    width:250vw !important;
    padding:0 8vw !important;
  }
  .flower-banner__set img,
  .flower-banner--pink-border .flower-banner__set img,
  .flower-banner__set img:nth-child(2),
  .flower-banner__set img:nth-child(3),
  .flower-banner__set img:nth-child(4){
    width:clamp(132px,40vw,175px) !important;
  }
}

/* =====================================================
   Prototype ambient hand-drawn animations
   -----------------------------------------------------
   These are visual-only layers. They do not affect layout,
   forms, buttons, carousels, SEO content, or accessibility.
   ===================================================== */
.showreel--stack,
.about,
.site-footer{
  position:relative;
  isolation:isolate;
}
.showreel--stack,
.about{
  overflow:visible;
}
.flower-banner--ambient-bridge{
  position:relative;
  z-index:5;
  background:transparent !important;
}
.showreel--stack > *:not(.ambient-animation),
.about > *:not(.ambient-animation),
.site-footer > *:not(.ambient-animation){
  position:relative;
  z-index:2;
}
.ambient-animation{
  position:absolute;
  pointer-events:none;
  user-select:none;
  overflow:hidden;
  z-index:0;
  contain:paint;
}
.ambient-animation__frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:translateZ(0);
  transition:opacity .18s steps(1,end);
}
.ambient-animation__frame.is-active{
  opacity:1;
}
.ambient-animation--name{
  left:0;
  right:0;
  top:clamp(-155px,-9vw,-78px);
  bottom:clamp(-155px,-9vw,-78px);
  opacity:.075;
}
.ambient-animation--name .ambient-animation__frame{
  object-position:center center;
}
.ambient-animation--small-flowers{
  left:0;
  right:0;
  top:clamp(-170px,-10vw,-86px);
  bottom:0;
  opacity:.095;
}
.ambient-animation--small-flowers .ambient-animation__frame{
  object-position:center center;
}
.ambient-animation--big-flowers{
  left:0;
  right:0;
  top:0;
  height:72%;
  opacity:.055;
  z-index:0;
}
.ambient-animation--big-flowers .ambient-animation__frame{
  object-position:top center;
}
@media (max-width:1050px){
  .ambient-animation--name{
    top:-92px;
    bottom:-92px;
    opacity:.06;
  }
  .ambient-animation--small-flowers{
    top:-110px;
    opacity:.075;
  }
  .ambient-animation--big-flowers{
    height:64%;
    opacity:.045;
  }
}
@media (max-width:720px){
  .ambient-animation--name{
    top:-70px;
    bottom:-70px;
    opacity:.045;
  }
  .ambient-animation--small-flowers{
    top:-76px;
    opacity:.055;
  }
  .ambient-animation--big-flowers{
    height:58%;
    opacity:.035;
  }
}
@media (prefers-reduced-motion:reduce){
  .ambient-animation__frame:not(:first-child){
    display:none !important;
  }
  .ambient-animation__frame:first-child{
    opacity:1 !important;
  }
}

/* =====================================================
   Ambient animation prototype fix 01
   -----------------------------------------------------
   Restores the original cream bouquet banner background
   so the changing hero colour cannot bleed around the
   stickers. The animation is now duplicated inside the
   banner itself, sitting above the cream base but below
   the moving bouquet strip.
   ===================================================== */
.flower-banner--ambient-bridge{
  position:relative !important;
  isolation:isolate;
  background:var(--cream) !important;
  background-color:var(--cream) !important;
  overflow:hidden !important;
}
.flower-banner--ambient-bridge .flower-banner__band{
  position:relative;
  z-index:3;
}
.flower-banner--ambient-bridge .ambient-animation--banner{
  inset:0 !important;
  width:auto !important;
  height:auto !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:0 !important;
  z-index:1;
  opacity:.06;
  mix-blend-mode:multiply;
}
.flower-banner--ambient-bridge .ambient-animation--banner-name-soft{
  opacity:.028;
}
.flower-banner--ambient-bridge .ambient-animation--banner-small{
  opacity:.045;
}
.flower-banner--ambient-bridge .ambient-animation--banner .ambient-animation__frame{
  object-fit:cover;
  object-position:center center;
}

/* The footer drawing now fills the entire burgundy block, not just the top slice. */
.site-footer{
  overflow:hidden;
  background:var(--burgundy) !important;
}
.ambient-animation--big-flowers{
  inset:0 !important;
  width:auto !important;
  height:auto !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:0 !important;
  opacity:.045;
}
.ambient-animation--big-flowers .ambient-animation__frame{
  object-fit:cover;
  object-position:top center;
}

@media (max-width:720px){
  .flower-banner--ambient-bridge .ambient-animation--banner-name{
    opacity:.045;
  }
  .flower-banner--ambient-bridge .ambient-animation--banner-name-soft{
    opacity:.022;
  }
  .flower-banner--ambient-bridge .ambient-animation--banner-small{
    opacity:.038;
  }
  .ambient-animation--big-flowers{
    opacity:.032;
  }
  .ambient-animation--big-flowers .ambient-animation__frame:nth-child(1){content:url('/assets/animations/chirri-big-flowers-mobile/frame-01.png');}
  .ambient-animation--big-flowers .ambient-animation__frame:nth-child(2){content:url('/assets/animations/chirri-big-flowers-mobile/frame-02.png');}
  .ambient-animation--big-flowers .ambient-animation__frame:nth-child(3){content:url('/assets/animations/chirri-big-flowers-mobile/frame-03.png');}
  .ambient-animation--big-flowers .ambient-animation__frame:nth-child(4){content:url('/assets/animations/chirri-big-flowers-mobile/frame-04.png');}
}

/* =====================================================
   Ambient animation prototype fix 02
   -----------------------------------------------------
   Treat the solid colour strips as the boundaries.
   The hand-drawn fields now sit only in the cream zones:
   - Chirri name: below the pink strip, through reel two,
     and above the burgundy strip.
   - Small flowers: below the burgundy strip and through
     Meet Jia only.
   The coloured banner strips stay clean and solid.
   ===================================================== */
.flower-banner--ambient-boundary{
  position:relative !important;
  isolation:isolate;
  overflow:hidden !important;
  background:var(--cream) !important;
  background-color:var(--cream) !important;
}
.flower-banner--ambient-boundary .flower-banner__band{
  position:relative !important;
  z-index:2 !important;
}
.flower-banner--ambient-boundary .flower-banner__band::before{
  z-index:0;
}
.flower-banner--ambient-boundary .flower-banner__track{
  position:absolute !important;
  z-index:1 !important;
}
.flower-banner--ambient-boundary .ambient-animation--banner-field{
  left:0 !important;
  right:0 !important;
  width:auto !important;
  height:auto !important;
  z-index:0 !important;
  opacity:.065 !important;
  mix-blend-mode:multiply;
  overflow:hidden !important;
  contain:paint;
}
.flower-banner--ambient-boundary .ambient-animation--banner-field-upper{
  top:0 !important;
  bottom:50% !important;
}
.flower-banner--ambient-boundary .ambient-animation--banner-field-lower{
  top:50% !important;
  bottom:0 !important;
}
.flower-banner--ambient-boundary .ambient-animation--small-flowers.ambient-animation--banner-field{
  opacity:.082 !important;
}
.flower-banner--ambient-boundary .ambient-animation--banner-field .ambient-animation__frame{
  object-fit:cover !important;
  object-position:center center !important;
}
.flower-banner--ambient-boundary .ambient-animation--banner-field-upper .ambient-animation__frame{
  object-position:center 38% !important;
}
.flower-banner--ambient-boundary .ambient-animation--banner-field-lower .ambient-animation__frame{
  object-position:center 62% !important;
}
.showreel--stack,
.about{
  position:relative !important;
  isolation:isolate;
  overflow:hidden !important;
  background:var(--cream) !important;
}
.showreel--stack > .ambient-animation--name{
  inset:0 !important;
  width:auto !important;
  height:auto !important;
  opacity:.065 !important;
  z-index:0 !important;
  mix-blend-mode:multiply;
}
.about > .ambient-animation--small-flowers{
  inset:0 !important;
  width:auto !important;
  height:auto !important;
  opacity:.092 !important;
  z-index:0 !important;
  mix-blend-mode:multiply;
}
.showreel--stack > .ambient-animation--name .ambient-animation__frame,
.about > .ambient-animation--small-flowers .ambient-animation__frame{
  object-fit:cover !important;
  object-position:center center !important;
}
.showreel--stack > *:not(.ambient-animation),
.about > *:not(.ambient-animation){
  position:relative !important;
  z-index:2 !important;
}
@media (max-width:720px){
  .flower-banner--ambient-boundary .ambient-animation--banner-field{
    opacity:.045 !important;
  }
  .flower-banner--ambient-boundary .ambient-animation--small-flowers.ambient-animation--banner-field{
    opacity:.058 !important;
  }
  .showreel--stack > .ambient-animation--name{
    opacity:.045 !important;
  }
  .about > .ambient-animation--small-flowers{
    opacity:.064 !important;
  }
}

/* =====================================================
   Ambient animation prototype fix 03
   -----------------------------------------------------
   Cohesive section-spanning fields.
   The banner strips are treated as hard boundaries, so
   each area now uses ONE full animation layer instead of
   separate cropped pieces above/below the moving banners.
   ===================================================== */
main{
  position:relative;
}
.ambient-page-layer{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:0;
  height:0;
  width:auto !important;
  pointer-events:none;
  user-select:none;
  overflow:hidden;
  z-index:1 !important;
  opacity:0;
  mix-blend-mode:multiply;
  contain:paint;
  transition:opacity .2s steps(1,end);
}
.ambient-page-layer.is-positioned{
  opacity:.078;
}
.ambient-page-layer--name-field.is-positioned{
  opacity:.092;
}
.ambient-page-layer--small-flowers-field.is-positioned{
  opacity:.104;
}
.ambient-page-layer .ambient-animation__frame{
  object-fit:cover !important;
  object-position:center center !important;
}
.ambient-page-layer--name-field .ambient-animation__frame{
  object-position:center center !important;
}
.ambient-page-layer--small-flowers-field .ambient-animation__frame{
  object-position:center center !important;
}
.flower-banner--ambient-boundary,
.showreel--stack,
.about{
  isolation:auto !important;
}
main > section > *{
  position:relative;
  z-index:3;
}
.flower-banner--ambient-boundary .flower-banner__band{
  z-index:4 !important;
}
.showreel--stack > *,
.about > *{
  z-index:3 !important;
}
.site-header,
.site-nav{
  z-index:50;
}
@media (max-width:720px){
  .ambient-page-layer.is-positioned{
    opacity:.055;
  }
  .ambient-page-layer--name-field.is-positioned{
    opacity:.064;
  }
  .ambient-page-layer--small-flowers-field.is-positioned{
    opacity:.074;
  }
}
@media (prefers-reduced-motion:reduce){
  .ambient-page-layer .ambient-animation__frame:not(:first-child){
    display:none !important;
  }
}

/* =====================================================
   Final device QA fixes — enquiry form + reel two drawing
   -----------------------------------------------------
   Keeps the desktop look, but prevents Safari/iPad/iPhone
   form controls from overflowing their grid cells.
   ===================================================== */
.enquiry-form .field,
.enquiry-form .field > div,
.enquiry-form .select-wrap,
.enquiry-form input,
.enquiry-form select,
.enquiry-form textarea{
  min-width:0;
  max-width:100%;
}
.enquiry-form .field--inline{
  grid-column:1 / -1 !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  align-items:start;
}
.enquiry-form input[type="date"],
.enquiry-form select{
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width:1180px){
  .enquiry-form .form-group{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .enquiry-form .field:has(#f-name),
  .enquiry-form .field:has(#f-size),
  .enquiry-form .field:has(#f-card),
  .enquiry-form .field:has(#f-message),
  .enquiry-form .field--inline{
    grid-column:1 / -1 !important;
  }
}
@media (max-width:900px){
  .enquiry-form .form-group,
  .enquiry-form .field--inline{
    grid-template-columns:1fr !important;
  }
}
@media (max-width:520px){
  .enquiry-form{
    padding:1.15rem;
  }
  .enquiry-form input,
  .enquiry-form select,
  .enquiry-form textarea{
    font-size:16px;
    border-radius:14px;
    padding-inline:.95rem;
  }
}

/* =====================================================
   Cross-device form polish (iPad + mobile)
   -----------------------------------------------------
   1. Make field--inline inner divs proper flex columns
      so labels + inputs stack with consistent gap, like
      the rest of the form.
   2. Force consistent fixed height on inputs + selects
      so iOS Safari empty <input type="date"> doesn't
      render taller than the dropdown beside it (iPad).
   3. Reset webkit appearance on date input + force
      width to 100% to fix iOS Safari rendering the
      empty date field narrower than its container
      (mobile).
   ===================================================== */
.enquiry-form .field--inline > div{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  min-width:0;
}
.enquiry-form input,
.enquiry-form select{
  box-sizing:border-box;
  height:50px;
  min-height:50px;
  line-height:1.2;
}
.enquiry-form textarea{
  box-sizing:border-box;
}
.enquiry-form input[type="date"]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  min-width:100%;
  font-family:inherit;
  color:var(--burgundy);
}
.enquiry-form input[type="date"]::-webkit-date-and-time-value{
  text-align:left;
}
.enquiry-form input[type="date"]::-webkit-calendar-picker-indicator{
  cursor:pointer;
  opacity:.65;
}

/* Make the first drawing field through photo reel two easier to see. */
.ambient-page-layer--name-field.is-positioned,
.showreel--stack > .ambient-animation--name{
  opacity:.18 !important;
}
@media (max-width:720px){
  .ambient-page-layer--name-field.is-positioned,
  .showreel--stack > .ambient-animation--name{
    opacity:.16 !important;
  }
}