/* Script font: Waterfall (closest free match to The Belle lettering), stored with the site */
@font-face{
  font-family:'Waterfall';
  src:url('fonts/waterfall-latin-400.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
/* =========================================================
   THE BELLE  |  Design tokens
   Mobile-first: base styles are for phones,
   @media (min-width:981px) adds the desktop layout.
   ========================================================= */
:root{
  --ink:#000000;          /* logo black */
  --graphite:#2E2A2B;     /* soft black for body text */
  --mist:#A7A2A3;         /* logo silhouette grey */
  --porcelain:#FFF8FA;    /* light sections, pink-white (from poster) */
  --petal:#F9D3DF;        /* soft poster pink */
  --blush:#F3BCD0;        /* light accent */
  --blush-deep:#D94A7E;   /* poster rose pink: brand name, script lines */
  --rose:#C2386A;         /* deeper rose for buttons and bands */

  --font-display:'Italiana', 'Didot', 'Bodoni MT', serif;
  --font-body:'Jost', 'Segoe UI', system-ui, sans-serif;
  --font-script:'Waterfall', 'Brush Script MT', cursive;

  --ease:cubic-bezier(.2,.7,.2,1);
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  font-weight:300;
  font-size:16px;
  color:var(--graphite);
  background:var(--porcelain);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
:focus-visible{outline:2px solid var(--blush);outline-offset:3px;border-radius:4px}

/* =========================================================
   SECTION 1  |  HEADER  (phone first)
   ========================================================= */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:50;
  padding-top:var(--safe-top);          /* keeps clear of the phone notch */
  color:var(--ink);
  transition:background-color .5s var(--ease), box-shadow .5s var(--ease), color .4s var(--ease);
}
.site-header::before{
  content:"";
  position:absolute;
  inset:0 0 -24px 0;
  background:linear-gradient(to bottom, rgba(255,248,250,.85), rgba(255,248,250,0));
  pointer-events:none;
  z-index:-1;
  transition:opacity .5s var(--ease);
}

.bar{
  height:72px;
  padding:0 12px 0 16px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  transition:height .45s var(--ease);
}

/* ---- Logo badge ---- */
.brand{justify-self:start;display:inline-flex;align-items:center;border-radius:50%}
.badge{
  position:relative;
  display:grid;
  place-items:center;
  width:58px;height:58px;
  padding:3px;                           /* keeps the whole logo ring visible */
  border-radius:50%;
  background:#fff;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(217,74,126,.22), 0 6px 22px rgba(243,188,208,.45);
  transition:width .45s var(--ease), height .45s var(--ease), box-shadow .45s var(--ease);
}
.badge img{width:100%;height:100%;object-fit:contain;display:block}

/* ---- Desktop menu: hidden on phones ---- */
.primary{display:none}

/* ---- Icons on the right ---- */
.actions{justify-self:end;display:flex;align-items:center;gap:6px}
.icon-btn{
  width:48px;height:48px;                /* thumb-sized tap target */
  display:grid;place-items:center;
  border-radius:50%;
  transition:background-color .3s var(--ease), color .3s var(--ease), transform .2s var(--ease);
}
.icon-btn svg{width:22px;height:22px}
.icon-btn:active{transform:scale(.92)}
.ig-desktop{display:none}

/* WhatsApp stands out on phones: blush circle */
.actions .js-whatsapp{width:42px;height:42px;background:var(--blush-deep);color:#fff}
.actions .js-whatsapp svg{width:21px;height:21px}

/* ---- Menu button ---- */
.menu-toggle{display:grid;width:48px;height:48px;place-items:center;border-radius:50%}
.menu-toggle .lines{position:relative;width:24px;height:12px}
.menu-toggle .lines span{
  position:absolute;left:0;
  width:100%;height:1.5px;
  background:currentColor;
  transition:transform .45s var(--ease), top .45s var(--ease), width .45s var(--ease);
}
.menu-toggle .lines span:first-child{top:0}
.menu-toggle .lines span:last-child{top:10px;width:65%;left:auto;right:0}

/* ---- Scrolled state: frosted glass ---- */
.site-header.is-scrolled{
  color:var(--ink);
  background:rgba(255,248,250,.78);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.site-header.is-scrolled::before{opacity:0}
.site-header.is-scrolled .bar{height:56px}
.site-header.is-scrolled .badge{width:48px;height:48px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}

/* ---- Phone full-screen menu ---- */
.mobile-menu{
  position:fixed;
  inset:0;
  z-index:40;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:calc(96px + var(--safe-top)) 24px calc(28px + var(--safe-bottom));
  color:var(--ink);
  background:
    radial-gradient(circle at 85% 6%, rgba(243,188,208,.55), rgba(243,188,208,0) 50%),
    radial-gradient(circle at 5% 100%, rgba(243,188,208,.35), rgba(243,188,208,0) 45%),
    var(--porcelain);
  clip-path:circle(0px at calc(100% - 36px) calc(36px + var(--safe-top)));
  transition:clip-path .7s cubic-bezier(.7,0,.2,1);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.m-links{list-style:none;display:flex;flex-direction:column}
.m-links > li{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.m-links > li > a,
.m-links > li > button{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  min-height:56px;
  font-family:var(--font-display);
  font-size:clamp(2rem, 9vw, 2.8rem);
  line-height:1.1;
  text-align:left;
  transition:color .3s var(--ease);
}
.m-links > li > a:active,
.m-links > li > button:active{color:var(--blush-deep)}
.m-links .chev{width:16px;height:16px;transition:transform .35s var(--ease)}
.m-coll.open > button{color:var(--blush-deep)}
.m-coll.open .chev{transform:rotate(180deg)}

.m-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.m-coll.open .m-sub{grid-template-rows:1fr}
.m-sub > div{overflow:hidden}
.m-sub a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding-left:4px;
  font-size:1.15rem;
  font-weight:300;
  letter-spacing:.04em;
  color:var(--blush-deep);
}
.m-sub a:last-child{margin-bottom:8px}

.m-foot{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:32px;
  padding-top:20px;
  border-top:1px solid rgba(46,42,43,.1);
  opacity:0;
  transition:opacity .5s var(--ease);
}
.m-tagline{font-family:var(--font-script);font-size:2.2rem;line-height:1.2;color:var(--blush-deep)}
.m-foot .icons{display:flex;gap:10px;margin-left:-8px}

/* Menu open */
body.menu-open{overflow:hidden}
body.menu-open .mobile-menu{clip-path:circle(160% at calc(100% - 36px) calc(36px + var(--safe-top)))}
body.menu-open .m-links > li{opacity:1;transform:none;transition-delay:calc(.26s + var(--i) * .06s)}
body.menu-open .m-foot{opacity:1;transition-delay:.65s}
body.menu-open .site-header{color:var(--ink);background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
body.menu-open .site-header::before{opacity:0}
body.menu-open .site-header .bar{height:72px}
body.menu-open .site-header .badge{width:58px;height:58px}
body.menu-open .menu-toggle .lines span:first-child{top:5px;transform:rotate(45deg)}
body.menu-open .menu-toggle .lines span:last-child{top:5px;width:100%;transform:rotate(-45deg)}

/* =========================================================
   TABLETS (600px and wider)
   ========================================================= */
@media (min-width:600px){
  .bar{height:76px;padding:0 24px}
  .badge{width:64px;height:64px}
  .mobile-menu{padding-left:48px;padding-right:48px}
}

/* =========================================================
   DESKTOP (981px and wider)
   ========================================================= */
@media (min-width:981px){
  .bar{
    max-width:1320px;
    height:96px;
    margin:0 auto;
    padding:0 clamp(24px, 4vw, 48px);
    grid-template-columns:1fr auto 1fr;
  }
  .badge{width:78px;height:78px}
  .site-header.is-scrolled .bar{height:72px}
  .site-header.is-scrolled .badge{width:58px;height:58px}

  .mobile-menu,
  .menu-toggle{display:none}
  .ig-desktop{display:grid}
  .icon-btn{width:44px;height:44px}
  .actions{gap:4px}
  .actions .js-whatsapp{width:44px;height:44px;background:transparent;color:inherit}
  .actions .js-whatsapp svg{width:22px;height:22px}

  .primary{display:block}
  .primary ul{display:flex;align-items:center;gap:clamp(22px, 2.8vw, 42px);list-style:none}
  .primary a,
  .primary .drop-toggle{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:12px 0;
    font-size:.95rem;
    font-weight:400;
    letter-spacing:.04em;
    white-space:nowrap;
  }
  .primary a::after,
  .primary .drop-toggle::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:4px;
    height:1.5px;
    background:var(--blush-deep);
    transform:scaleX(0);
    transition:transform .4s var(--ease);
  }
  .primary a[aria-current="page"]::after,
  .primary a:focus-visible::after,
  .has-drop.open .drop-toggle::after{transform:scaleX(1)}
  .site-header.is-scrolled .primary a::after,
  .site-header.is-scrolled .primary .drop-toggle::after{background:var(--blush-deep)}

  .chev{width:10px;height:10px;transition:transform .35s var(--ease)}
  .has-drop.open .chev{transform:rotate(180deg)}

  .has-drop{position:relative}
  .drop{
    position:absolute;
    top:100%;
    left:50%;
    min-width:210px;
    padding:10px;
    border-radius:16px;
    background:rgba(255,248,250,.9);
    border:1px solid rgba(46,42,43,.06);
    box-shadow:0 18px 40px rgba(46,42,43,.12);
    backdrop-filter:blur(18px) saturate(1.3);
    -webkit-backdrop-filter:blur(18px) saturate(1.3);
    opacity:0;
    visibility:hidden;
    transform:translate(-50%, 10px);
    transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  }
  .drop::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
  .has-drop.open .drop{opacity:1;visibility:visible;transform:translate(-50%, 4px)}
  .drop a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;transition:background-color .3s var(--ease)}
  .drop a::after{display:none}
  .drop a::before{
    content:"";
    width:6px;height:6px;border-radius:50%;
    background:var(--blush);
    transform:scale(.4);
    opacity:.5;
    transition:transform .3s var(--ease), opacity .3s var(--ease);
  }
}

/* Hover effects only on devices with a mouse, so taps on phones never "stick" */
@media (min-width:981px) and (hover:hover){
  .primary a:hover::after,
  .primary .drop-toggle:hover::after{transform:scaleX(1)}
  .has-drop:hover .drop{opacity:1;visibility:visible;transform:translate(-50%, 4px)}
  .has-drop:hover .chev{transform:rotate(180deg)}
  .drop a:hover{background:rgba(243,188,208,.3)}
  .drop a:hover::before{transform:scale(1);opacity:1}
  .icon-btn:hover{background:rgba(243,188,208,.3);color:var(--blush-deep)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation:none !important;scroll-behavior:auto !important}
}

/* =========================================================
   SECTION 2  |  HERO  (boutique arch window, phone first)
   ========================================================= */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:28px;
  padding:calc(84px + var(--safe-top)) 24px 40px;
  text-align:center;
  overflow:hidden;
  /* poster look: pink wash with large soft white circles */
  background:
    radial-gradient(circle at 120% -10%, rgba(255,255,255,.92) 0 44%, rgba(255,255,255,0) 44.3%),
    radial-gradient(circle at -30% 105%, rgba(255,255,255,.8) 0 38%, rgba(255,255,255,0) 38.3%),
    linear-gradient(165deg, #FFF8FA 5%, var(--petal) 55%, #FBE4EC 100%);
}

/* ---- The arch ---- */
.arch{
  position:relative;
  width:min(72vw, 340px, calc((100svh - 330px) / 1.4));
  min-width:220px;
  aspect-ratio:100 / 140;
}
/* soft light behind the window */
.arch::before{
  content:"";
  position:absolute;
  inset:8% -18% -6%;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(243,188,208,.7), rgba(243,188,208,0));
  filter:blur(8px);
  z-index:0;
}
/* thin doorway outline */
.arch-outline{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  overflow:visible;
  z-index:1;
  pointer-events:none;
}
.arch-outline path{
  fill:none;
  stroke:var(--blush-deep);
  stroke-opacity:.6;
  stroke-width:.4;
  stroke-dasharray:1;
  stroke-dashoffset:1;
}
/* the window that holds the photos */
.arch-window{
  position:absolute;
  inset:12px 12px 0;
  border-radius:100vw 100vw 16px 16px;
  overflow:hidden;
  background:#EFE3E4;
  box-shadow:0 30px 60px -20px rgba(217,74,126,.45);
  z-index:2;
  touch-action:pan-y;              /* lets the page scroll, we handle side swipes */
  opacity:0;
  transform:translateY(24px) scale(.96);
}

/* ---- Slides ---- */
.slide{
  position:absolute;
  inset:0;
  visibility:hidden;
}
.slide img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.slide.is-prev{visibility:visible;z-index:1}
.slide.is-active{visibility:visible;z-index:2}
.slide.is-active.is-entering{animation:archReveal 1.15s cubic-bezier(.7,0,.2,1) both}
.slide.is-active img{animation:slowZoom 6.5s cubic-bezier(.2,.6,.2,1) both}

@keyframes archReveal{
  from{clip-path:inset(0 100% 0 0)}
  to{clip-path:inset(0 0 0 0)}
}
@keyframes slowZoom{
  from{transform:scale(1.14)}
  to{transform:scale(1.02)}
}

/* placeholder while real photos are not in the images folder */
.ph-label{display:none}
.slide.ph img{display:none}
.slide.ph{display:grid;place-items:center}
.slide.ph .ph-label{
  display:block;
  font-size:.85rem;
  letter-spacing:.04em;
  color:var(--graphite);
  opacity:.6;
}
.slide.ph:nth-child(1){background:linear-gradient(170deg, #FBE1EA, #EDB3C7)}
.slide.ph:nth-child(2){background:linear-gradient(170deg, #F6E9EE, #DDBFCB)}
.slide.ph:nth-child(3){background:linear-gradient(170deg, #FADCE6, #E596B2)}
.slide.ph:nth-child(4){background:linear-gradient(170deg, #F3E4E9, #D7AFBE)}

/* ---- Progress lines inside the arch ---- */
.progress{
  position:absolute;
  left:18px;right:36%;bottom:16px;
  display:flex;
  gap:6px;
  z-index:3;
}
.progress button{
  position:relative;
  flex:1;
  height:24px;                     /* big tap area, thin visible line */
  padding:0;
}
.progress button::before,
.progress button::after{
  content:"";
  position:absolute;
  left:0;right:0;top:50%;
  height:2px;
  margin-top:-1px;
  border-radius:2px;
}
.progress button::before{background:rgba(255,255,255,.45)}
.progress button::after{background:#fff;transform:scaleX(0);transform-origin:left}
.progress button.done::after{transform:scaleX(1)}
.progress button.current::after{animation:fillLine var(--slide-time, 5s) linear both}
.hero.paused .progress button.current::after{animation-play-state:paused}
@keyframes fillLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- Text and button ---- */
.hero-text{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  opacity:0;
  transform:translateY(16px);
}
/* circle frame showing the next outfit (like the poster) */
.arch-circle{
  position:absolute;
  right:-16%;
  bottom:-8%;
  width:44%;
  aspect-ratio:1;
  padding:6px;
  border-radius:50%;
  z-index:4;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(217,74,126,.5);
  box-shadow:0 18px 36px -16px rgba(194,56,106,.5);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  transform:scale(.8);
}
.circle-img{
  display:block;
  width:100%;height:100%;
  border-radius:50%;
  background:#F4CFDB center 20% / cover no-repeat;
  transition:opacity .45s var(--ease);
}
.circle-img.ph{background-image:linear-gradient(165deg, #F7D3DF, #E3A2BA)}
.arch-circle:active{transform:scale(.94)}

.wordmark{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:.3em;
  color:var(--blush-deep);
  font-weight:400;
  line-height:1;
}
.wm-the{
  font-family:var(--font-display);
  font-size:clamp(2rem, 9vw, 2.6rem);
  letter-spacing:.2em;
}
.wm-belle{
  font-family:var(--font-script);
  font-size:clamp(4rem, 18vw, 5.2rem);
  line-height:.7;
  padding-right:.1em;
}
.hero-tagline{
  font-family:var(--font-script);
  font-size:clamp(1.9rem, 8vw, 2.3rem);
  line-height:1;
  color:var(--blush-deep);
  margin:-4px 0 14px;
}
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 34px;
  border-radius:100px;
  background:var(--rose);
  color:#fff;
  font-size:1rem;
  font-weight:400;
  letter-spacing:.06em;
  transition:transform .2s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
  box-shadow:0 14px 28px -12px rgba(194,56,106,.6);
}
.btn-primary:active{transform:scale(.96)}

/* ---- Opening moment: outline draws, window rises, text follows ---- */
.hero.is-ready .arch-outline path{transition:stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1);stroke-dashoffset:0}
.hero.is-ready .arch-window{transition:opacity 1s var(--ease) .25s, transform 1.2s var(--ease) .25s;opacity:1;transform:none}
.hero.is-ready .arch-circle{transition:opacity .9s var(--ease) .9s, transform 1s var(--ease) .9s;opacity:1;transform:none}
.hero.is-ready .hero-text{transition:opacity .9s var(--ease) .75s, transform .9s var(--ease) .75s;opacity:1;transform:none}

/* ---- Tablet ---- */
@media (min-width:600px){
  .hero{gap:36px}
  .arch{width:min(52vw, 380px, calc((100svh - 360px) / 1.4))}
}

/* ---- Desktop: text left, arch right ---- */
@media (min-width:981px){
  .hero{
    flex-direction:row;
    justify-content:center;
    gap:clamp(60px, 9vw, 140px);
    padding:120px clamp(40px, 6vw, 96px) 60px;
    text-align:left;
  }
  .arch{width:min(42vw, 560px, calc((100vh - 170px) / 1.4))}
  .hero-text{align-items:flex-start;gap:12px}
  .wordmark{justify-content:flex-start}
  .wm-the{font-size:3.4rem}
  .wm-belle{font-size:7rem}
  .hero-tagline{font-size:3rem;margin:0 0 24px}
}
@media (hover:hover){
  .btn-primary:hover{background:var(--blush-deep);box-shadow:0 16px 30px -12px rgba(217,74,126,.7)}
}

@media (prefers-reduced-motion:reduce){
  .arch-outline path{stroke-dashoffset:0}
  .arch-window,.hero-text,.arch-circle{opacity:1;transform:none}
  .slide.is-active img{animation:none;transform:none}
}

/* =========================================================
   SECTION 3  |  COLLECTIONS  (scroll-stacking cards, phone first)
   ========================================================= */
.collections{
  position:relative;
  padding:56px 16px 72px;
  background:var(--porcelain);
}
.section-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2rem, 8vw, 2.4rem);
  line-height:1.15;
  color:var(--ink);
  text-align:center;
  margin-bottom:28px;
}

.stack{
  position:relative;
  max-width:1120px;
  margin:0 auto;
}
.coll-card{
  --top:calc(72px + var(--safe-top) + var(--i) * 12px);
  position:sticky;
  top:var(--top);
  display:block;
  height:clamp(360px, 58svh, 470px);   /* shorter on phones: less scrolling */
  margin-top:6svh;
  border-radius:26px;
  color:#fff;
}
.coll-card:first-child{margin-top:0}

.coll-inner{
  position:relative;
  height:100%;
  border-radius:inherit;
  overflow:hidden;
  background:#D9C9C6;
  box-shadow:0 -10px 40px -18px rgba(46,42,43,.35), 0 26px 50px -24px rgba(46,42,43,.4);
  transform-origin:50% 0;
  will-change:transform;
}
.coll-inner img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 25%;          /* keeps faces in view when cropped */
}
/* soft shade at the bottom so the text reads on any photo */
.coll-inner::after{
  content:"";
  position:absolute;
  inset:40% 0 0 0;
  background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0));
  pointer-events:none;
}
/* darkens a card as the next one covers it */
.coll-dim{
  position:absolute;
  inset:0;
  background:#000;
  opacity:0;
  z-index:3;
  pointer-events:none;
}

/* frosted glass label */
.coll-glass{
  position:absolute;
  left:12px;right:12px;bottom:12px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 14px 16px 20px;
  border-radius:18px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.32);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
}
.coll-name{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(2rem, 9vw, 2.6rem);
  line-height:1.05;
}
.coll-words{
  display:block;
  margin-top:6px;
  font-size:.92rem;
  font-weight:400;
  letter-spacing:.03em;
  opacity:.92;
}
.coll-go{
  flex:none;
  width:48px;height:48px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#fff;
  color:var(--ink);
  transition:transform .3s var(--ease);
}
.coll-go svg{width:18px;height:18px}
.coll-card:active .coll-go{transform:scale(.9)}

/* placeholders until real photos are added */
.coll-inner .ph-label{
  display:none;
  position:absolute;
  top:24px;left:0;right:0;
  text-align:center;
  font-size:.85rem;
  letter-spacing:.04em;
  color:rgba(255,255,255,.75);
}
.coll-inner.ph img{display:none}
.coll-inner.ph .ph-label{display:block}
.coll-card:nth-child(1) .coll-inner.ph{background:linear-gradient(165deg, #F0A9C1, #B4365F)}
.coll-card:nth-child(2) .coll-inner.ph{background:linear-gradient(165deg, #E4C3CF, #94607A)}
.coll-card:nth-child(3) .coll-inner.ph{background:linear-gradient(165deg, #9E3E63, #3B1426)}

/* ---- Tablet ---- */
@media (min-width:600px){
  .collections{padding:80px 32px 96px}
  .section-title{font-size:2.8rem;margin-bottom:40px}
  .coll-card{--top:calc(92px + var(--i) * 14px);height:clamp(420px, 60vh, 560px)}
  .coll-glass{left:20px;right:20px;bottom:20px;padding:22px 20px 22px 28px}
}

/* ---- Desktop ---- */
@media (min-width:981px){
  .collections{padding:110px 48px 120px}
  .section-title{font-size:3.4rem;margin-bottom:56px}
  /* no stacking on wide screens: one row of three portrait cards */
  .stack{display:grid;grid-template-columns:repeat(3, 1fr);gap:22px;align-items:start}
  .coll-card{
    position:static;
    height:auto;
    margin-top:0;
    border-radius:26px;
    aspect-ratio:3 / 4;
  }
  .coll-inner{transform:none !important}
  .coll-dim{display:none}
  .coll-glass{left:14px;right:14px;bottom:14px;width:auto;padding:18px 16px}
  .coll-name{font-size:2rem}
  .coll-words{font-size:.92rem}
}
@media (hover:hover){
  .coll-card:hover .coll-go{transform:translateX(4px)}
}

/* =========================================================
   SECTION 4  |  NEW ARRIVALS  (3D spotlight, phone first)
   ========================================================= */
.arrivals{
  position:relative;
  padding:64px 0 72px;
  overflow:hidden;
  overflow:clip;                    /* stops the browser shifting the row sideways */
  background:
    radial-gradient(ellipse 60% 22% at 50% 78%, rgba(243,188,208,.45), rgba(243,188,208,0) 70%),
    #fff;
}
.arrivals .section-title{margin-bottom:28px;padding:0 16px}

.spot-stage{
  position:relative;
  height:560px;                     /* set exactly by script */
  perspective:1100px;
  perspective-origin:50% 40%;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
}
.p-card{
  --w:min(74vw, 290px);
  position:absolute;
  top:0;
  left:50%;
  width:var(--w);
  margin-left:calc(var(--w) / -2);
  padding:10px;
  border-radius:24px;
  background:#fff;
  box-shadow:0 30px 60px -28px rgba(46,42,43,.45), 0 0 0 1px rgba(46,42,43,.05);
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.2,.8,.2,1), opacity .5s var(--ease);
  will-change:transform;
}
.spot-stage.dragging .p-card{transition:none}
.p-shade{
  position:absolute;inset:0;
  border-radius:inherit;
  background:#fff;
  opacity:0;
  pointer-events:none;
  z-index:5;
  transition:opacity .5s var(--ease);
}
.spot-stage.dragging .p-shade{transition:none}

.p-photo{
  position:relative;
  aspect-ratio:4 / 5;
  border-radius:18px;
  overflow:hidden;
  background:#EFE3E4;
}
.p-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block;pointer-events:none}
.p-photo .ph-label{
  display:none;
  position:absolute;inset:0;
  place-items:center;
  font-size:.8rem;
  letter-spacing:.04em;
  color:rgba(46,42,43,.55);
}
.p-photo.ph img{display:none}
.p-photo.ph .ph-label{display:grid}
.p-card:nth-child(3n+1) .p-photo.ph{background:linear-gradient(165deg, #FBE1EA, #EDB3C7)}
.p-card:nth-child(3n+2) .p-photo.ph{background:linear-gradient(165deg, #F6E9EE, #DDBFCB)}
.p-card:nth-child(3n+3) .p-photo.ph{background:linear-gradient(165deg, #FADCE6, #E596B2)}

.p-info{padding:14px 6px 4px}
.p-name{
  font-family:var(--font-display);
  font-weight:400;
  font-size:1.35rem;
  line-height:1.2;
  color:var(--ink);
}
.p-code{display:block;margin-top:2px;font-size:.8rem;letter-spacing:.05em;color:var(--mist)}

.p-sizes{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:6px;
  margin:14px 0 12px;
}
.p-sizes button{
  height:38px;
  border-radius:10px;
  border:1px solid rgba(46,42,43,.16);
  font-size:.82rem;
  font-weight:500;
  color:var(--graphite);
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .15s var(--ease);
}
.p-sizes button:active{transform:scale(.92)}
.p-sizes button.custom{grid-column:span 2}
.p-sizes button[aria-pressed="true"]{background:var(--rose);border-color:var(--rose);color:#fff}
.p-sizes.nudge{animation:nudge .45s var(--ease)}
@keyframes nudge{
  20%{transform:translateX(-6px)} 40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)} 80%{transform:translateX(3px)}
}

.p-order{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:48px;
  border-radius:100px;
  font-size:.95rem;
  font-weight:400;
  letter-spacing:.03em;
  background:var(--porcelain);
  color:var(--graphite);
  border:1px solid rgba(46,42,43,.1);
  transition:background-color .35s var(--ease), color .35s var(--ease), transform .15s var(--ease);
}
.p-order svg{width:20px;height:20px;flex:none}
.p-order.ready{background:var(--rose);border-color:var(--rose);color:#fff}
.p-order:active{transform:scale(.97)}

/* controls under the stage */
.spot-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-top:26px;
}
.spot-arrow{
  width:48px;height:48px;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid rgba(46,42,43,.14);
  color:var(--ink);
  background:#fff;
  transition:transform .15s var(--ease), opacity .3s var(--ease);
}
.spot-arrow svg{width:18px;height:18px}
.spot-arrow:active{transform:scale(.9)}
.spot-arrow:disabled{opacity:.3}
.spot-count{min-width:64px;text-align:center;font-size:.9rem;letter-spacing:.06em;color:var(--graphite)}

.view-all{
  display:table;
  margin:22px auto 0;
  padding:10px 4px;
  font-size:.95rem;
  letter-spacing:.04em;
  color:var(--ink);
  border-bottom:1px solid var(--blush-deep);
}

/* ---- Tablet & desktop ---- */
@media (min-width:600px){
  .arrivals{padding:88px 0 96px}
  .p-card{--w:300px}
}
@media (min-width:981px){
  .arrivals{padding:110px 0 120px}
  .arrivals .section-title{margin-bottom:48px}
  .p-card{--w:320px}
}
@media (hover:hover){
  .p-sizes button:hover{border-color:var(--ink)}
  .p-order.ready:hover{background:var(--blush-deep)}
  .spot-arrow:hover:not(:disabled){border-color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  .p-card,.p-shade{transition:none}
}

/* =========================================================
   SECTION 5  |  THE BELLE PROMISE  (moving ribbon)
   ========================================================= */
.promise{
  position:relative;
  overflow:hidden;
  overflow:clip;
  background:var(--rose);
  color:#fff;
}
.ribbon{
  display:flex;
  width:max-content;
  animation:ribbon 42s linear infinite;
}
.ribbon-group{
  display:flex;
  align-items:center;
  flex:none;
}
.ribbon-item{
  display:flex;
  align-items:center;
  gap:22px;
  padding:0 22px 0 0;
  height:64px;
  font-family:var(--font-display);
  font-size:1.45rem;
  white-space:nowrap;
}
.ribbon-item svg{width:14px;height:14px;color:var(--petal);flex:none}
@keyframes ribbon{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.promise:hover .ribbon{animation-play-state:paused}

@media (min-width:600px){
  .ribbon-item{height:76px;font-size:1.8rem;gap:30px;padding-right:30px}
  .ribbon-item svg{width:16px;height:16px}
}
@media (min-width:981px){
  .ribbon-item{height:88px;font-size:2.1rem;gap:40px;padding-right:40px}
  .ribbon{animation-duration:55s}
}
/* people who switch off motion see the promises standing still */
@media (prefers-reduced-motion:reduce){
  .ribbon{animation:none;width:auto;justify-content:center}
  .ribbon-group[aria-hidden="true"]{display:none}
  .ribbon-group{flex-wrap:wrap;justify-content:center;padding:12px 16px}
  .ribbon-item{height:52px}
}

/* =========================================================
   SECTION 7  |  FOOTER  (phone first)
   ========================================================= */
.site-footer{
  position:relative;
  overflow:hidden;
  padding:64px 20px calc(28px + var(--safe-bottom));
  text-align:center;
  background:
    radial-gradient(circle at 50% -35%, rgba(255,255,255,.95) 0 42%, rgba(255,255,255,0) 42.3%),
    linear-gradient(180deg, #FFF8FA 0%, var(--petal) 65%, #F6C4D5 100%);
}
.foot-inner{
  max-width:760px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.foot-logo{
  width:110px;height:110px;
  padding:4px;
  border-radius:50%;
  background:#fff;
  object-fit:contain;
  box-shadow:0 0 0 1px rgba(217,74,126,.2), 0 14px 30px -14px rgba(194,56,106,.45);
  margin-bottom:26px;
}
.foot-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.8rem, 7.6vw, 2.5rem);
  line-height:1.2;
  color:var(--ink);
  max-width:15ch;
}
.foot-script{
  font-family:var(--font-script);
  font-size:clamp(2rem, 8.6vw, 2.6rem);
  line-height:1.1;
  color:var(--blush-deep);
  margin:6px 0 24px;
}
.btn-primary svg{width:20px;height:20px;margin-right:10px}

.foot-contact{
  list-style:none;
  width:100%;
  max-width:440px;
  margin:10px 0 30px;
  padding:10px 18px;
  border-radius:22px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(217,74,126,.18);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  text-align:left;
}
.foot-contact li{
  display:flex;
  align-items:center;
  gap:14px;
  padding:8px 0;
}
.foot-contact li + li{border-top:1px solid rgba(217,74,126,.12)}
.ic{
  flex:none;
  width:40px;height:40px;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid rgba(217,74,126,.45);
  color:var(--blush-deep);
}
.ic svg{width:18px;height:18px}
.foot-contact a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  font-size:.95rem;
  font-weight:400;
  color:var(--graphite);
  overflow-wrap:anywhere;
}
.foot-contact .sep{margin:0 8px;color:var(--mist)}
.foot-contact address{font-style:normal}
.foot-contact .addr{font-size:.88rem;line-height:1.55;padding:6px 0}

.foot-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0 22px;
}
.foot-links a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:.95rem;
  color:var(--ink);
}
.foot-legal{
  margin-top:22px;
  font-size:.8rem;
  letter-spacing:.04em;
  color:#8A6F79;
}

@media (min-width:981px){
  .site-footer{padding:110px 48px 36px}
  .foot-title{font-size:3rem;max-width:none}
  .foot-script{font-size:3rem}
  .foot-contact{
    max-width:760px;
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:36px;
    padding:14px 28px;
  }
  .foot-contact li + li{border-top:0}
  .foot-contact li.wide{grid-column:span 2;border-top:1px solid rgba(217,74,126,.12)}
}
@media (hover:hover){
  .foot-contact a:hover,.foot-links a:hover{color:var(--blush-deep)}
}

/* =========================================================
   THE UNVEILING  |  opening moment, once per visit
   ========================================================= */
.intro{display:none}
html.intro-on body{overflow:hidden}
html.intro-on .intro{display:block}

.intro{
  position:fixed;
  inset:0;
  z-index:200;
  cursor:pointer;
}
.curtain{
  position:absolute;
  top:0;bottom:0;
  width:50.5%;
  transition:transform 1.05s cubic-bezier(.7,0,.25,1);
  /* soft fabric folds on a poster-pink wash */
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 22px, rgba(255,255,255,.35) 30px, rgba(255,255,255,0) 38px, rgba(194,56,106,.05) 46px, rgba(255,255,255,0) 54px),
    linear-gradient(170deg, #FFF8FA 0%, #F9D3DF 60%, #F4BFD1 100%);
}
.curtain.left{left:0;transform-origin:0 50%;box-shadow:inset -18px 0 30px -18px rgba(194,56,106,.35)}
.curtain.right{right:0;transform-origin:100% 50%;box-shadow:inset 18px 0 30px -18px rgba(194,56,106,.35)}

.intro-center{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.intro-logo{
  position:relative;
  width:min(46vw, 190px);
  aspect-ratio:1;
  opacity:0;
  transform:scale(.82);
  animation:introLogoIn .8s cubic-bezier(.2,.7,.2,1) .1s forwards;
}
.intro-logo img{
  position:absolute;
  inset:7%;
  width:86%;height:86%;
  border-radius:50%;
  background:#fff;
  padding:4px;
  object-fit:contain;
  box-shadow:0 20px 50px -20px rgba(194,56,106,.5);
}
.intro-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.intro-ring circle{
  fill:none;
  stroke:var(--blush-deep);
  stroke-width:1;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:introRing 1s cubic-bezier(.6,0,.2,1) .15s forwards;
}
@keyframes introLogoIn{to{opacity:1;transform:scale(1)}}
@keyframes introRing{to{stroke-dashoffset:0}}

/* opening */
.intro.open .curtain.left{transform:translateX(-100%) scaleX(.55)}
.intro.open .curtain.right{transform:translateX(100%) scaleX(.55)}
.intro.open .intro-logo{animation:none;opacity:0;transform:scale(1.18);transition:opacity .55s var(--ease), transform .7s var(--ease)}
.intro.open{pointer-events:none}

/* falling petals */
.petals{
  position:fixed;
  inset:0;
  z-index:210;
  pointer-events:none;
  overflow:hidden;
}
.petal{
  position:absolute;
  top:-40px;
  width:var(--s);
  height:var(--s);
  opacity:0;
  animation:petalFall var(--d) cubic-bezier(.3,.1,.5,1) var(--delay) forwards;
}
.petal i{
  display:block;
  width:100%;height:100%;
  animation:petalSway calc(var(--d) / 2.2) ease-in-out var(--delay) infinite alternate;
}
.petal svg{width:100%;height:100%;display:block}
@keyframes petalFall{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(0deg)}
  10%{opacity:.95}
  80%{opacity:.85}
  100%{opacity:0;transform:translate3d(var(--x), 105vh, 0) rotate(var(--r))}
}
@keyframes petalSway{
  from{transform:translateX(-14px) rotateY(0deg)}
  to{transform:translateX(14px) rotateY(60deg)}
}

/* =========================================================
   HERO  |  "Opening soon" pill
   ========================================================= */
.hero-location{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  padding:0 18px 0 14px;
  margin:-4px 0 12px;
  border-radius:100px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(217,74,126,.3);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:clamp(.76rem, 3.5vw, .88rem);
  font-weight:400;
  letter-spacing:0;
  white-space:nowrap;
  color:var(--rose);
  box-shadow:0 10px 24px -14px rgba(194,56,106,.45);
}
.live-dot{
  position:relative;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--blush-deep);
  flex:none;
}
.live-dot::after{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:50%;
  border:1.5px solid var(--blush-deep);
  animation:livePulse 2s ease-out infinite;
}
@keyframes livePulse{
  from{transform:scale(.4);opacity:.9}
  to{transform:scale(1.6);opacity:0}
}
@media (min-width:981px){
  .hero-location{font-size:.95rem;margin:0 0 26px}
}

/* =========================================================
   SECTION 6  |  VISIT US  "Opening soon at"  (phone first)
   ========================================================= */
.visit{
  position:relative;
  padding:64px 16px 72px;
  background:
    radial-gradient(circle at -20% 10%, rgba(249,211,223,.8) 0 30%, rgba(249,211,223,0) 30.3%),
    #fff;
  overflow:hidden;
}
.visit-card{
  max-width:980px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.visit-kicker{
  font-family:var(--font-script);
  font-size:clamp(2.6rem, 12vw, 3.4rem);
  line-height:1;
  color:var(--blush-deep);
}
.visit-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.9rem, 8vw, 2.4rem);
  line-height:1.15;
  color:var(--ink);
  margin:4px 0 26px;
}

/* arch-shaped map illustration */
.visit-map{
  position:relative;
  width:min(100%, 360px);
  aspect-ratio:10 / 9;
  border-radius:100vw 100vw 22px 22px;
  overflow:hidden;
  background:#FCEAF0;
  border:1px solid rgba(217,74,126,.25);
  box-shadow:0 30px 60px -30px rgba(194,56,106,.5);
}
.visit-map > svg{position:absolute;inset:0;width:100%;height:100%}
.map-pin{
  position:absolute;
  left:50%;top:54%;
  width:54px;height:54px;
  margin:-54px 0 0 -27px;
  color:#fff;
  filter:drop-shadow(0 10px 12px rgba(194,56,106,.45));
  animation:pinDrop .9s cubic-bezier(.3,1.5,.5,1) both;
  animation-play-state:paused;
}
.visit.in-view .map-pin{animation-play-state:running}
.map-pin svg{width:100%;height:100%;display:block}
.map-pulse{
  position:absolute;
  left:50%;top:54%;
  width:70px;height:26px;
  margin:-13px 0 0 -35px;
  border-radius:50%;
  border:2px solid var(--blush-deep);
  opacity:0;
  animation:mapPulse 2.2s ease-out 1s infinite;
}
@keyframes pinDrop{
  from{transform:translateY(-60px);opacity:0}
  to{transform:none;opacity:1}
}
@keyframes mapPulse{
  from{transform:scale(.3);opacity:.9}
  to{transform:scale(1.5);opacity:0}
}
.map-tag{
  position:absolute;
  left:50%;top:calc(54% + 20px);
  transform:translateX(-50%);
  padding:6px 14px;
  border-radius:100px;
  background:#fff;
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.03em;
  color:var(--rose);
  white-space:nowrap;
  box-shadow:0 8px 18px -10px rgba(194,56,106,.5);
}

.visit-address{
  font-style:normal;
  margin:28px 0 8px;
  font-size:1.05rem;
  line-height:1.6;
  color:var(--graphite);
}
.visit-address strong{
  display:block;
  font-family:var(--font-display);
  font-weight:400;
  font-size:1.6rem;
  line-height:1.3;
  color:var(--ink);
}

.visit-actions{
  width:100%;
  max-width:380px;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:22px;
}
.visit-actions .btn-primary{width:100%;min-height:56px;font-size:1.02rem}
.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:56px;
  border-radius:100px;
  border:1.5px solid var(--rose);
  color:var(--rose);
  background:#fff;
  font-size:1.02rem;
  font-weight:400;
  letter-spacing:.05em;
  transition:transform .2s var(--ease), background-color .3s var(--ease);
}
.btn-outline svg{width:20px;height:20px}
.btn-outline:active{transform:scale(.97)}
.visit-note{
  margin-top:16px;
  font-size:.92rem;
  color:var(--graphite);
}
.visit-note a{color:var(--rose);font-weight:500;white-space:nowrap}

@media (min-width:981px){
  .visit{padding:110px 48px 120px}
  .visit-card{
    display:grid;
    grid-template-columns:minmax(0, 400px) minmax(0, 1fr);
    grid-template-rows:auto auto auto auto auto;
    column-gap:80px;
    align-items:start;
    text-align:left;
  }
  .visit-map{grid-column:1;grid-row:1 / span 5;width:100%}
  .visit-kicker,.visit-title,.visit-address,.visit-actions,.visit-note{grid-column:2}
  .visit-kicker{font-size:4rem;margin-top:30px}
  .visit-title{font-size:3rem}
  .visit-address{margin-top:0}
  .visit-actions{flex-direction:row;max-width:none}
  .visit-actions > *{flex:1}
}
@media (hover:hover){
  .btn-outline:hover{background:#FDEFF4}
}
@media (prefers-reduced-motion:reduce){
  .map-pin{animation:none}
  .map-pulse,.live-dot::after{animation:none;opacity:0}
}

/* =========================================================
   SHOP PAGE  |  title, collection chips, bento grid (phone first)
   ========================================================= */
html.reels-on, html.reels-on body,
html.pv-on, html.pv-on body{overflow:hidden}

.shop-top{
  padding:calc(96px + var(--safe-top)) 16px 18px;
  text-align:center;
  background:
    radial-gradient(circle at 118% -30%, rgba(255,255,255,.95) 0 42%, rgba(255,255,255,0) 42.3%),
    linear-gradient(180deg, var(--petal) 0%, var(--porcelain) 90%);
}
.shop-kicker{font-family:var(--font-script);font-size:2.6rem;line-height:1;color:var(--blush-deep)}
.shop-title{font-family:var(--font-display);font-weight:400;font-size:clamp(2.3rem, 10vw, 3.2rem);line-height:1.1;color:var(--ink)}
.shop-count{margin-top:6px;font-size:.88rem;letter-spacing:.04em;color:#8A6F79}

.shop-bar{
  position:sticky;
  top:calc(56px + var(--safe-top));
  z-index:30;
  padding:10px 0;
  background:rgba(255,248,250,.84);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(217,74,126,.1);
}
.chips{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:0 16px;
  scrollbar-width:none;
}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;
  min-height:40px;
  padding:0 18px;
  border-radius:100px;
  border:1px solid rgba(217,74,126,.28);
  background:#fff;
  font-size:.9rem;
  color:var(--graphite);
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .15s var(--ease);
}
.chip:active{transform:scale(.95)}
.chip[aria-pressed="true"]{background:var(--rose);border-color:var(--rose);color:#fff}

.bento-wrap{padding:14px 12px calc(120px + var(--safe-bottom));background:var(--porcelain)}
.bento-box{max-width:1240px;margin:0 auto;container-type:inline-size}
.bento{
  --cols:2;
  --gap:10px;
  display:grid;
  grid-template-columns:repeat(var(--cols), 1fr);
  grid-auto-flow:dense;
  grid-auto-rows:calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols) * .68 - var(--gap) / 2);
  gap:var(--gap);
  transition:opacity .2s var(--ease), transform .25s var(--ease);
}
.bento.swap{opacity:0;transform:translateY(10px)}

.tile{
  position:relative;
  grid-row:span 2;
  border-radius:20px;
  overflow:hidden;
  background:#F4D8E1;
  opacity:0;
  transform:translateY(26px) scale(.97);
  transition:opacity .6s var(--ease), transform .7s var(--ease);
}
.tile.in{opacity:1;transform:none}
.tile--feat{grid-column:span 2;grid-row:span 3;border-radius:26px}
.tile-hit{position:absolute;inset:0;display:block;width:100%;text-align:left;color:#fff}
.tile-hit::after{
  content:"";
  position:absolute;
  inset:45% 0 0;
  background:linear-gradient(to top, rgba(45,10,25,.6), rgba(45,10,25,0));
  pointer-events:none;
}
.tile-photo{position:absolute;inset:0;display:block;background:#F4D8E1}
.tile-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block;transition:transform .8s var(--ease)}
.tile-photo.ph img{display:none}
.tile:nth-child(4n+1) .tile-photo.ph{background:linear-gradient(165deg, #F5BFD1, #C94F79)}
.tile:nth-child(4n+2) .tile-photo.ph{background:linear-gradient(165deg, #EBCBD6, #9C6A7D)}
.tile:nth-child(4n+3) .tile-photo.ph{background:linear-gradient(165deg, #F2B3C8, #A33D63)}
.tile:nth-child(4n+4) .tile-photo.ph{background:linear-gradient(165deg, #E9C6D2, #7E4760)}
.tile-hit:active .tile-photo img{transform:scale(1.04)}
.tile-label{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;display:block}
.tile-name{display:block;font-family:var(--font-display);font-size:1.08rem;line-height:1.2}
.tile-meta{display:block;margin-top:3px;font-size:.72rem;letter-spacing:.06em;opacity:.9}
.tile--feat .tile-label{left:18px;right:18px;bottom:18px}
.tile--feat .tile-name{font-size:1.8rem}
.tile--feat .tile-meta{font-size:.82rem}
.tile-new{
  position:absolute;
  top:10px;left:10px;
  z-index:1;
  padding:4px 10px;
  border-radius:100px;
  font-size:.7rem;
  letter-spacing:.06em;
  color:#fff;
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.5);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* small brand tiles mixed into the grid */
.tile--brand{
  grid-row:span 1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  padding:12px 14px;
}
.b-icon{width:22px;height:22px;margin-bottom:4px}
.b-icon svg{width:100%;height:100%;display:block}
.b-title{font-family:var(--font-display);font-size:1.12rem;line-height:1.15}
.b-text{font-size:.74rem;letter-spacing:.02em;opacity:.85}
.tile--brand.rose{background:var(--rose);color:#fff}
.tile--brand.wa{background:#fff;color:var(--rose);box-shadow:inset 0 0 0 1px rgba(217,74,126,.28)}
.tile--brand.petal{background:var(--petal);color:var(--rose)}
.tile--brand.wine{background:#5A1F3A;color:#fff}

/* floating Grid / Reels switch */
.view-switch{
  position:fixed;
  left:50%;
  bottom:calc(18px + var(--safe-bottom));
  z-index:65;
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:5px;
  border-radius:100px;
  transform:translateX(-50%);
  background:rgba(255,255,255,.76);
  border:1px solid rgba(217,74,126,.25);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 16px 36px -16px rgba(194,56,106,.55);
  transition:background-color .4s var(--ease), border-color .4s var(--ease);
}
.view-switch .knob{
  position:absolute;
  top:5px;bottom:5px;left:5px;
  width:calc(50% - 5px);
  border-radius:100px;
  background:var(--rose);
  transition:transform .45s var(--ease);
}
.view-switch.is-reels .knob{transform:translateX(100%)}
.view-switch button{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:0 20px;
  border-radius:100px;
  font-size:.9rem;
  color:var(--graphite);
  transition:color .35s var(--ease);
}
.view-switch button svg{width:18px;height:18px}
.view-switch button[aria-pressed="true"]{color:#fff}
html.reels-on .view-switch{background:rgba(25,8,16,.45);border-color:rgba(255,255,255,.22)}
html.reels-on .view-switch button{color:#fff}
html.pv-on .view-switch{opacity:0;pointer-events:none}

/* =========================================================
   SHOP  |  REELS VIEW
   ========================================================= */
.reels{position:fixed;inset:0;z-index:60;background:#140A0F}
.reels[hidden]{display:none !important}
.reels-track{
  height:100%;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  overscroll-behavior:contain;
  scrollbar-width:none;
}
.reels-track::-webkit-scrollbar{display:none}
.reel{
  position:relative;
  height:100vh;
  height:100dvh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  overflow:hidden;
}
.reel-ph{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity .45s var(--ease);
  background:linear-gradient(165deg, #E7A3BA, #7A2E4B);
}
.reel-ph.on{opacity:1}
.reel-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.reel-ph.ph img{display:none}
.reel::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.38), rgba(0,0,0,0) 24%, rgba(0,0,0,0) 48%, rgba(0,0,0,.55));
  pointer-events:none;
  z-index:1;
}
.reel-bars{
  position:absolute;
  left:16px;right:16px;
  top:calc(70px + var(--safe-top));
  z-index:3;
  display:flex;
  gap:4px;
}
.reel-bars span{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.4);transition:background-color .3s}
.reel-bars span.on{background:#fff}
.reel-tap{position:absolute;top:0;bottom:48%;width:40%;z-index:2}
.reel-tap.left{left:0}
.reel-tap.right{right:0}
.reel-panel{
  position:absolute;
  left:10px;right:10px;
  bottom:calc(82px + var(--safe-bottom));
  z-index:3;
  padding:16px;
  border-radius:22px;
  color:#fff;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
}
.reel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.reel-name{font-family:var(--font-display);font-weight:400;font-size:1.6rem;line-height:1.15}
.reel-meta{margin-top:3px;font-size:.8rem;letter-spacing:.05em;opacity:.88}
.glass-btn{
  flex:none;
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:50%;
  color:#fff;
  background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.glass-btn svg{width:20px;height:20px}
.glass-btn:active{transform:scale(.92)}
.reel .p-sizes{
  display:flex;
  gap:6px;
  overflow-x:auto;
  margin:14px -16px 12px;
  padding:0 16px;
  scrollbar-width:none;
}
.reel .p-sizes::-webkit-scrollbar{display:none}
.reel .p-sizes button{
  flex:none;
  min-width:48px;
  height:40px;
  padding:0 12px;
  color:#fff;
  border-color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.08);
}
.reel .p-sizes button[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--rose)}
.reel .p-order{background:rgba(255,255,255,.92);border-color:transparent;color:var(--rose)}
.reel .p-order.ready{background:var(--rose);color:#fff}
.reels-top{position:absolute;top:0;left:0;right:0;z-index:4;padding:calc(14px + var(--safe-top)) 0 10px}
.reels-top .chip{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.38);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.reels-top .chip[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--rose)}
.reels-hint{
  position:absolute;
  left:50%;top:44%;
  z-index:4;
  display:flex;align-items:center;gap:8px;
  padding:10px 18px;
  border-radius:100px;
  font-size:.9rem;
  color:#fff;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  pointer-events:none;
  opacity:0;
  transform:translate(-50%, 0);
  animation:reelHint 2.8s var(--ease) .4s forwards;
}
.reels-hint svg{width:18px;height:18px}
@keyframes reelHint{
  0%{opacity:0;transform:translate(-50%, 16px)}
  15%{opacity:1;transform:translate(-50%, 0)}
  70%{opacity:1;transform:translate(-50%, -18px)}
  100%{opacity:0;transform:translate(-50%, -30px)}
}

/* =========================================================
   SHOP  |  PRODUCT VIEW (tile expands into it)
   ========================================================= */
.pv{
  position:fixed;inset:0;
  z-index:80;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--porcelain);
  opacity:0;
  transition:opacity .35s var(--ease);
}
.pv[hidden]{display:none !important}
.pv.opening,.pv.in{opacity:1}
.pv.fading{opacity:0}
.pv-gallery{position:relative;height:64svh;min-height:380px;background:#F4D8E1;visibility:hidden}
.pv.in .pv-gallery{visibility:visible}
.pv-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.pv-track::-webkit-scrollbar{display:none}
.pv-photo{position:relative;flex:0 0 100%;height:100%;scroll-snap-align:start;background:#F4D8E1}
.pv-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.pv-photo.ph{background:linear-gradient(165deg, #F5BFD1, #C94F79)}
.pv-photo.ph img{display:none}
.pv-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:4px}
.pv-dots button{position:relative;width:30px;height:24px}
.pv-dots button::before{content:"";position:absolute;left:4px;right:4px;top:11px;height:2px;border-radius:2px;background:rgba(255,255,255,.5)}
.pv-dots button.on::before{background:#fff}
.pv-gallery .glass-btn{position:absolute;top:calc(14px + var(--safe-top));z-index:2;background:rgba(255,255,255,.75);border-color:rgba(255,255,255,.9);color:var(--ink)}
.pv-close{left:14px}
.pv-share{right:14px}

.pv-body{
  max-width:600px;
  padding:22px 20px calc(110px + var(--safe-bottom));
  opacity:0;
  transform:translateY(22px);
  transition:opacity .5s var(--ease) .1s, transform .6s var(--ease) .1s;
}
.pv.in .pv-body{opacity:1;transform:none}
.pv-tags{display:flex;gap:6px;margin-bottom:10px}
.pv-tag{padding:4px 12px;border-radius:100px;font-size:.75rem;letter-spacing:.05em;background:var(--petal);color:var(--rose)}
.pv-name{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem, 8.6vw, 2.8rem);line-height:1.1;color:var(--ink)}
.pv-code{margin-top:4px;font-size:.85rem;letter-spacing:.05em;color:#8A6F79}
.pv-details{margin-top:14px;font-size:1rem;line-height:1.6;color:var(--graphite)}
.pv-size-head{display:flex;align-items:center;justify-content:space-between;margin-top:20px;font-size:.92rem;font-weight:400;color:var(--ink)}
.pv-size-head a{display:inline-flex;align-items:center;min-height:44px;color:var(--rose);text-decoration:underline;text-underline-offset:4px}
.pv .p-sizes{margin:4px 0 18px}
.pv .p-sizes button{height:44px;font-size:.8rem}
.pv-perks{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.pv-perks li{padding:8px 14px;border-radius:100px;background:#fff;border:1px solid rgba(217,74,126,.16);font-size:.8rem;color:var(--graphite)}
.pv-bar{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:85;
  padding:12px 16px calc(12px + var(--safe-bottom));
  background:rgba(255,248,250,.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(217,74,126,.12);
  transform:translateY(100%);
  transition:transform .5s var(--ease) .15s;
}
.pv.in .pv-bar{transform:none}
.pv-bar .p-order{max-width:560px;min-height:54px;margin:0 auto}

.morph{position:fixed;z-index:90;overflow:hidden;pointer-events:none;background:#F4D8E1}
.morph img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}

/* ---- Shop: tablet & desktop ---- */
@media (min-width:600px){
  .bento{--cols:3;--gap:14px}
  .chips{justify-content:center}
  .bento-wrap{padding-left:24px;padding-right:24px}
}
@media (min-width:981px){
  .shop-top{padding-top:140px}
  .shop-bar{top:72px}
  .bento{--cols:4;--gap:18px}
  .tile--feat .tile-name{font-size:2.2rem}
  .reels-track{max-width:480px;margin:0 auto}
  .reel .reel-panel{left:14px;right:14px}
  .pv{display:grid;grid-template-columns:55% 45%;align-items:start}
  .pv-gallery{position:sticky;top:0;height:100vh}
  .pv-body{padding:90px 56px 150px}
  .pv-bar{left:55%;padding-left:56px;padding-right:56px}
  .pv-bar .p-order{margin:0}
}
@media (hover:hover){
  .tile-hit:hover .tile-photo img{transform:scale(1.05)}
  .chip:hover{border-color:var(--rose)}
}
@media (prefers-reduced-motion:reduce){
  .tile{opacity:1;transform:none}
  .reels-hint{display:none}
}

/* =========================================================
   SIZE GUIDE PAGE  (phone first)
   ========================================================= */
.sg-top{padding-bottom:30px}
.unit-toggle{
  position:relative;
  display:inline-grid;
  grid-template-columns:1fr 1fr;
  margin-top:20px;
  padding:4px;
  border-radius:100px;
  background:#fff;
  border:1px solid rgba(217,74,126,.25);
  box-shadow:0 12px 26px -16px rgba(194,56,106,.45);
}
.unit-toggle .knob{
  position:absolute;
  top:4px;bottom:4px;left:4px;
  width:calc(50% - 4px);
  border-radius:100px;
  background:var(--rose);
  transition:transform .45s var(--ease);
}
.unit-toggle.is-cm .knob{transform:translateX(100%)}
.unit-toggle button{position:relative;z-index:1;min-height:42px;min-width:92px;padding:0 18px;border-radius:100px;font-size:.92rem;color:var(--graphite);transition:color .35s var(--ease)}
.unit-toggle button[aria-pressed="true"]{color:#fff}

.sg-section{padding:0 12px 20px;background:var(--porcelain)}
.sg-last{padding-bottom:64px}
.sg-card{
  max-width:720px;
  margin:0 auto;
  padding:26px 18px 24px;
  border-radius:28px;
  background:#fff;
  border:1px solid rgba(217,74,126,.12);
  box-shadow:0 30px 60px -44px rgba(194,56,106,.5);
}
.sg-title{font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem, 8vw, 2.4rem);line-height:1.1;color:var(--ink)}
.sg-sub{margin-top:6px;font-size:.95rem;line-height:1.5;color:#7A6870}

/* ---- finder ---- */
.finder-result{
  display:flex;
  align-items:center;
  gap:16px;
  margin:20px 0 10px;
  padding:14px;
  border-radius:22px;
  background:linear-gradient(135deg, #FFF3F7, #FADDE7);
}
.result-badge{
  position:relative;
  flex:none;
  width:92px;height:92px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#fff;
  font-family:var(--font-display);
  font-size:2.3rem;
  line-height:1;
  color:var(--rose);
  box-shadow:0 14px 30px -14px rgba(194,56,106,.55);
}
.result-badge::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:1px dashed rgba(217,74,126,.55);
  animation:ringSpin 18s linear infinite;
}
.result-badge.small{font-size:1.25rem}
.result-badge.pop{animation:badgePop .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes badgePop{0%{transform:scale(.7)}100%{transform:scale(1)}}
@keyframes ringSpin{to{transform:rotate(360deg)}}
.result-label{display:block;font-size:.78rem;letter-spacing:.08em;color:var(--rose)}
.result-note{margin:4px 0 6px;font-size:.86rem;line-height:1.45;color:var(--graphite)}
.result-shop{display:inline-flex;align-items:center;min-height:36px;font-size:.9rem;font-weight:500;color:var(--rose);text-decoration:underline;text-underline-offset:4px}

.finder-row{padding:12px 0 4px;border-top:1px solid rgba(217,74,126,.1)}
.finder-row:first-of-type{border-top:0}
.f-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.f-head label{font-size:1rem;color:var(--ink)}
.f-read{display:flex;align-items:center;gap:6px}
.f-num{min-width:74px;text-align:center;font-family:var(--font-display);font-size:1.5rem;color:var(--ink)}
.f-num .js-unit{font-family:var(--font-body);font-size:.8rem;color:#8A6F79}
.step{
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid rgba(217,74,126,.3);
  color:var(--rose);
  background:#fff;
}
.step svg{width:18px;height:18px}
.step:active{transform:scale(.9)}

.finder-row input[type=range]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:36px;
  background:transparent;
  --p:50%;
}
.finder-row input[type=range]::-webkit-slider-runnable-track{
  height:6px;
  border-radius:6px;
  background:linear-gradient(to right, var(--rose) var(--p), #F4D5E0 var(--p));
}
.finder-row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:30px;height:30px;
  margin-top:-12px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--rose);
  box-shadow:0 6px 14px rgba(194,56,106,.35);
}
.finder-row input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:#F4D5E0}
.finder-row input[type=range]::-moz-range-progress{height:6px;border-radius:6px;background:var(--rose)}
.finder-row input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--rose)}

/* ---- how to measure ---- */
.form-stage{
  position:relative;
  width:min(100%, 320px);
  aspect-ratio:3 / 4;
  margin:20px auto 16px;
  border-radius:100vw 100vw 26px 26px;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #FFF3F7, #FADDE7);
  overflow:hidden;
}
.form-stage svg{position:absolute;inset:0;width:100%;height:100%}
.m-line{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:opacity .2s}
.m-line.on{opacity:1;animation:drawLine .7s cubic-bezier(.6,0,.2,1) forwards}
@keyframes drawLine{to{stroke-dashoffset:0}}
.m-point{
  position:absolute;
  width:44px;height:44px;
  margin:-22px 0 0 -22px;
  border-radius:50%;
}
.m-point::before{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:14px;height:14px;
  margin:-7px 0 0 -7px;
  border-radius:50%;
  background:var(--blush-deep);
  box-shadow:0 0 0 4px rgba(255,255,255,.9), 0 4px 10px rgba(194,56,106,.5);
  transition:transform .3s var(--ease), background-color .3s var(--ease);
}
.m-point::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:14px;height:14px;
  margin:-7px 0 0 -7px;
  border-radius:50%;
  border:2px solid var(--blush-deep);
  animation:pointGlow 2s ease-out infinite;
}
.m-point[aria-pressed="true"]::before{transform:scale(1.35);background:var(--rose)}
@keyframes pointGlow{from{transform:scale(1);opacity:.8}to{transform:scale(2.6);opacity:0}}

.tip-card{
  padding:16px 18px;
  border-radius:20px;
  background:linear-gradient(135deg, #FFF3F7, #FDE7EE);
  border:1px solid rgba(217,74,126,.15);
}
.tip-name{font-family:var(--font-display);font-weight:400;font-size:1.5rem;color:var(--rose)}
.tip-text{margin-top:4px;font-size:.95rem;line-height:1.55;color:var(--graphite)}
.tip-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tip-chips li{padding:8px 14px;border-radius:100px;background:var(--porcelain);border:1px solid rgba(217,74,126,.15);font-size:.8rem;color:var(--graphite)}

/* ---- chart ---- */
.chart-wrap{margin-top:16px;overflow-x:auto}
.chart{width:100%;border-collapse:separate;border-spacing:0 6px;text-align:center}
.chart th{padding:4px 6px;font-size:.8rem;font-weight:400;letter-spacing:.05em;color:#8A6F79}
.chart td{padding:13px 6px;font-size:.98rem;color:var(--graphite);background:#FFF6F9;transition:background-color .3s var(--ease), color .3s var(--ease)}
.chart td:first-child{border-radius:14px 0 0 14px;font-family:var(--font-display);font-size:1.15rem;color:var(--ink)}
.chart td:last-child{border-radius:0 14px 14px 0}
.chart tbody tr{cursor:pointer}
.chart tr.hl td{background:var(--rose);color:#fff}

/* ---- custom fit form ---- */
.cf-card{background:linear-gradient(180deg, #fff 0%, #FFF4F8 100%)}
.cf-kicker{font-family:var(--font-script);font-size:2rem;line-height:1;color:var(--blush-deep);margin-bottom:4px}
.cf-fill{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin:16px 0 8px;
  font-size:.9rem;
  color:var(--rose);
  text-decoration:underline;
  text-underline-offset:4px;
  text-align:left;
}
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field.full{grid-column:span 2}
.field label{display:block;margin-bottom:6px;font-size:.85rem;color:var(--ink)}
.req{color:var(--rose)}
.input-wrap{position:relative}
.input-wrap input{
  width:100%;
  height:52px;
  padding:0 44px 0 14px;
  border-radius:14px;
  border:1px solid rgba(217,74,126,.25);
  background:#fff;
  font:inherit;
  font-size:16px;
  color:var(--ink);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.input-wrap input[type=text]{padding-right:14px}
.input-wrap input:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 3px rgba(217,74,126,.18)}
.input-wrap .suffix{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:.8rem;color:#8A6F79;pointer-events:none}
.field.error input{border-color:#B3261E;box-shadow:0 0 0 3px rgba(179,38,30,.12)}
.cf-msg{min-height:22px;margin:12px 0 4px;font-size:.88rem;color:#B3261E}
.cf-send{width:100%;min-height:56px}
.cf-note{margin-top:10px;font-size:.8rem;line-height:1.5;color:#8A6F79;text-align:center}

@media (min-width:600px){
  .sg-section{padding:0 24px 28px}
  .sg-card{padding:34px 34px 30px}
  .cf-grid{grid-template-columns:repeat(3, 1fr)}
  .field.full{grid-column:span 3}
}
@media (min-width:981px){
  .measure-card{display:grid;grid-template-columns:1fr 1fr;column-gap:36px;align-items:center}
  .measure-card .sg-title,.measure-card .sg-sub{grid-column:1 / -1}
  .measure-card .form-stage{grid-row:span 2;margin:24px 0 0}
}
@media (prefers-reduced-motion:reduce){
  .result-badge::before,.m-point::after{animation:none}
  .m-line.on{animation:none;stroke-dashoffset:0}
}

/* =========================================================
   OUR STORY PAGE  |  the stitching thread (phone first)
   ========================================================= */
.story-top{padding-bottom:26px}
.story-top .shop-count{font-family:var(--font-script);font-size:2rem;letter-spacing:0;color:var(--blush-deep);margin-top:2px}

.story{
  position:relative;
  max-width:1120px;
  margin:0 auto;
  padding:26px 18px 72px 64px;
}
.thread{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:0}
.thread-base{stroke:rgba(217,74,126,.2);stroke-width:2;stroke-dasharray:9 7;stroke-linecap:round}
.thread-sewn{stroke:var(--rose);stroke-width:2.4;stroke-dasharray:9 7;stroke-linecap:round}
.needle{transition:opacity .3s var(--ease)}

.stop{position:relative;z-index:1;padding-bottom:70px}
.stop-dot{
  position:absolute;
  left:-46px;
  top:14px;
  width:22px;height:22px;
  border-radius:50%;
  background:#fff;
  border:2px solid rgba(217,74,126,.35);
  transition:background-color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.stop-dot.on{background:var(--rose);border-color:var(--rose);box-shadow:0 0 0 6px rgba(217,74,126,.16);transform:scale(1.1)}
.stop-dot.end{width:28px;height:28px;left:-49px}

.stop-media{
  position:relative;
  width:100%;
  overflow:hidden;
  background:linear-gradient(165deg, #F7D3DF, #E3A2BA);
  box-shadow:0 30px 60px -34px rgba(194,56,106,.55);
  opacity:0;
  transform:translateY(34px) scale(.97);
  transition:opacity .8s var(--ease), transform .9s var(--ease);
}
.stop-media.frame-arch{aspect-ratio:4 / 5;border-radius:100vw 100vw 24px 24px}
.stop-media.frame-circle{aspect-ratio:1;border-radius:50%;border:8px solid #fff;outline:1px solid rgba(217,74,126,.35)}
.stop-media img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
.stop-media .ph-label{display:none;position:absolute;inset:0;place-items:center;padding:20px;text-align:center;font-size:.85rem;letter-spacing:.03em;color:rgba(255,255,255,.9)}
.stop-media.ph img{display:none}
.stop-media.ph .ph-label{display:grid}

.stop-text{
  margin-top:20px;
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s var(--ease) .1s, transform .9s var(--ease) .1s;
}
.stop-media.in,.stop-text.in{opacity:1;transform:none}
.stop-kicker{font-family:var(--font-script);font-size:2.1rem;line-height:1;color:var(--blush-deep)}
.stop-title{font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem, 8vw, 2.5rem);line-height:1.15;color:var(--ink);margin-top:2px}
.stop-line{margin-top:10px;max-width:36ch;font-size:1.02rem;line-height:1.65;color:var(--graphite)}

.stop-end{padding-bottom:0}
.story-actions{display:flex;flex-direction:column;gap:12px;margin-top:22px;max-width:380px}
.story-actions .btn-primary{min-height:56px}

@media (min-width:600px){
  .story{padding-left:90px;padding-right:32px}
  .stop-dot{left:-64px}
  .stop-dot.end{left:-67px}
  .stop-media{max-width:440px}
}
@media (min-width:981px){
  .story{padding:60px 40px 120px}
  .stop{
    display:grid;
    grid-template-columns:1fr 140px 1fr;
    align-items:center;
    padding-bottom:120px;
  }
  .stop-dot,.stop-dot.end{position:relative;left:auto;top:auto;grid-column:2;grid-row:1;justify-self:center}
  .stop-media{grid-row:1;max-width:430px}
  .stop-text{grid-row:1;margin-top:0}
  .stop.odd .stop-media{grid-column:1;justify-self:end}
  .stop.odd .stop-text{grid-column:3}
  .stop.even .stop-media{grid-column:3;justify-self:start}
  .stop.even .stop-text{grid-column:1;justify-self:end;text-align:right}
  .stop.even .stop-line{margin-left:auto}
  .stop-kicker{font-size:2.6rem}
  .stop-title{font-size:3rem}
  .stop-end{grid-template-rows:auto auto;row-gap:26px}
  .stop-end .stop-text{grid-column:1 / -1;grid-row:2;text-align:center}
  .stop-end .stop-line{margin-left:auto;margin-right:auto}
  .stop-end .story-actions{flex-direction:row;justify-content:center;max-width:none}
  .stop-end .story-actions > *{flex:0 0 260px}
}
@media (prefers-reduced-motion:reduce){
  .stop-media,.stop-text{opacity:1;transform:none}
}

/* =========================================================
   CONTACT PAGE  (phone first)
   ========================================================= */
.ct-top{padding-bottom:26px}
.ct{padding:0 12px 64px;background:var(--porcelain)}
.ct-layout{max-width:1160px;margin:0 auto;display:grid;gap:20px}

.ct-bento{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ct-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:18px 16px;
  border-radius:24px;
  background:#fff;
  border:1px solid rgba(217,74,126,.14);
  box-shadow:0 24px 50px -40px rgba(194,56,106,.55);
  color:var(--ink);
  transition:transform .2s var(--ease);
}
a.ct-tile:active{transform:scale(.98)}
.ct-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;margin-bottom:8px;background:var(--petal);color:var(--rose)}
.ct-icon svg{width:22px;height:22px}
.ct-title{font-family:var(--font-display);font-size:1.35rem;line-height:1.15}
.ct-text{font-size:.9rem;color:#7A6870;overflow-wrap:anywhere}

.ct-wa{grid-column:span 2;flex-direction:row;align-items:center;gap:14px;padding:20px 18px;background:var(--rose);border-color:var(--rose);color:#fff}
.ct-wa .ct-icon{margin:0;background:rgba(255,255,255,.2);color:#fff;width:52px;height:52px}
.ct-wa .ct-body{flex:1;display:flex;flex-direction:column;gap:2px}
.ct-wa .ct-title{font-size:1.7rem}
.ct-wa .ct-text{color:rgba(255,255,255,.9)}
.ct-go{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--rose)}
.ct-go svg{width:18px;height:18px}

.ct-call a{display:inline-flex;align-items:center;min-height:36px;font-size:.98rem;color:var(--rose);font-weight:500}
.ct-mail{grid-column:span 2;flex-direction:row;align-items:center;gap:14px}
.ct-mail .ct-icon{margin:0}
.ct-mail .ct-body{display:flex;flex-direction:column;gap:2px;min-width:0}

.ct-visit{grid-column:span 2;padding:10px 10px 18px;gap:0}
.ct-map.visit-map{width:100%;aspect-ratio:16 / 10;border-radius:18px;box-shadow:none}
.ct-map .map-pin{animation-play-state:running}
.ct-visit-info{padding:16px 8px 0}
.ct-soon{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 14px 6px 12px;
  border-radius:100px;
  background:var(--petal);
  font-size:.85rem;
  color:var(--rose);
}
.ct-address{font-style:normal;margin:12px 0 16px;font-size:.98rem;line-height:1.6;color:var(--graphite)}
.ct-address strong{display:block;font-family:var(--font-display);font-weight:400;font-size:1.45rem;color:var(--ink)}

/* enquiry form */
.unit-toggle.is-right .knob{transform:translateX(100%)}
.ct-via{margin:18px 0 6px}
.ct-grid{margin-top:12px}
.topics{border:0;margin:18px 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.topics legend{width:100%;margin-bottom:8px;font-size:.85rem;color:var(--ink)}
.topic{position:relative}
.topic input{position:absolute;opacity:0;width:1px;height:1px}
.topic span{
  display:inline-flex;align-items:center;
  min-height:42px;padding:0 16px;
  border-radius:100px;
  border:1px solid rgba(217,74,126,.28);
  background:#fff;
  font-size:.9rem;
  color:var(--graphite);
  cursor:pointer;
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.topic input:checked + span{background:var(--rose);border-color:var(--rose);color:#fff}
.topic input:focus-visible + span{outline:2px solid var(--blush);outline-offset:3px}
.field textarea{
  width:100%;
  min-height:120px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(217,74,126,.25);
  background:#fff;
  font:inherit;
  font-size:16px;
  color:var(--ink);
  resize:vertical;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 3px rgba(217,74,126,.18)}
.field.error textarea{border-color:#B3261E;box-shadow:0 0 0 3px rgba(179,38,30,.12)}
.ct-send .send-ic{display:inline-flex}
.ct-send .send-ic svg{margin-right:10px}
.ct-send .mail-ic,.ct-send.by-email .wa-ic{display:none}
.ct-send.by-email .mail-ic{display:inline-flex}

@media (min-width:600px){
  .ct{padding:0 24px 80px}
  .ct-bento{gap:14px}
}
@media (min-width:981px){
  .ct{padding-bottom:120px}
  .ct-layout{grid-template-columns:1.05fr 1fr;gap:28px;align-items:start}
  .ct-form-card{position:sticky;top:96px;margin:0;max-width:none}
  .ct-map.visit-map{aspect-ratio:16 / 9}
}
@media (hover:hover){
  a.ct-tile:hover{transform:translateY(-3px)}
  .topic span:hover{border-color:var(--rose)}
}

/* =========================================================
   BRAND LETTERING  |  "The Belle" and "New Era of Elegance"
   traced from The Belle poster (exact lettering)
   ========================================================= */
.lettering{display:block;height:auto;fill:currentColor}
.wordmark{display:block;line-height:0;color:var(--blush-deep)}
.wordmark .lettering{width:min(80vw, 340px);margin:0 auto}
.hero-tagline{line-height:0;color:var(--blush-deep);margin:8px 0 18px}
.hero-tagline .lettering{width:min(58vw, 250px);margin:0 auto}
.m-tagline{line-height:0}
.m-tagline .lettering{width:230px}
.story-tagline{line-height:0;margin-top:10px}
.story-tagline .lettering{width:min(60vw, 250px);margin:0 auto}
@media (min-width:981px){
  .wordmark .lettering{width:560px;margin:0}
  .hero-tagline{margin:10px 0 30px}
  .hero-tagline .lettering{width:400px;margin:0}
}

/* Waterfall runs smaller than the old script font: sizes scaled up to match */
.shop-kicker{font-size:3.4rem}
.visit-kicker{font-size:clamp(3.2rem, 14vw, 4.2rem)}
.stop-kicker{font-size:2.8rem}
.cf-kicker{font-size:2.7rem}
.foot-script{font-size:clamp(2.7rem, 11vw, 3.4rem)}
@media (min-width:981px){
  .visit-kicker{font-size:5rem}
  .stop-kicker{font-size:3.4rem}
  .foot-script{font-size:3.9rem}
}

/* =========================================================
   PRICES AND SOLD OUT  (controlled from the admin page)
   ========================================================= */
.p-price{display:block;margin-top:4px;font-size:1.05rem;font-weight:500;color:var(--rose)}
.tile-price{display:inline-block;margin-top:6px;padding:3px 10px;border-radius:100px;font-size:.78rem;font-weight:500;color:var(--rose);background:rgba(255,255,255,.92)}
.tile--feat .tile-price{font-size:.9rem}
.tile--sold .tile-photo img{filter:grayscale(.55) brightness(.92)}
.tile-sold-pill{background:rgba(40,10,25,.55);border-color:rgba(255,255,255,.4)}
.pv-price{margin-top:10px;font-size:1.5rem;font-weight:500;color:var(--rose)}
.pv-tag.sold{background:#3B1426;color:#fff}
.pv-sold-note{margin-top:18px;padding:14px 16px;border-radius:16px;background:#FFF1F5;border:1px solid rgba(217,74,126,.2);font-size:.95rem;line-height:1.55;color:var(--graphite)}
.p-order.sold{background:#3B1426 !important;border-color:#3B1426 !important;color:#fff !important}
.reel-price{margin-left:6px;padding:2px 8px;border-radius:100px;background:rgba(255,255,255,.9);color:var(--rose);font-weight:500;letter-spacing:0}
.reel-sold{margin-left:6px;padding:2px 8px;border-radius:100px;background:rgba(40,10,25,.6);color:#fff;letter-spacing:0}
.reel .p-order.sold{margin-top:14px}
.shop-empty{grid-column:1 / -1;padding:60px 20px;text-align:center;font-family:var(--font-display);font-size:1.6rem;color:#8A6F79}
.reels-empty{color:#fff;padding-top:40vh}


/* =========================================================
   DESIGN CODE on each photo
   ========================================================= */
.code-chip{
  position:absolute;
  top:10px;right:10px;
  z-index:3;
  padding:3px 9px;
  border-radius:100px;
  background:rgba(255,255,255,.88);
  color:var(--rose);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.08em;
  pointer-events:none;
}
.tile--feat .code-chip{font-size:.74rem;top:14px;right:14px}
.pv-code-chip{top:calc(20px + var(--safe-top));right:70px}
.reel-code-chip{top:calc(86px + var(--safe-top));right:16px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35);color:#fff}
@media (min-width:981px){
  .pv-code-chip{right:74px}
}

/* "Opening soon" pill: full address, wraps neatly on small screens */
.hero-location{white-space:normal;text-align:left;max-width:92vw;padding:10px 18px 10px 14px;border-radius:20px;line-height:1.3}
@media (min-width:600px){
  .hero-location{white-space:nowrap;max-width:none;padding:0 18px 0 14px;border-radius:100px}
}
/* hero arch: large on desktop, but always fully inside the screen */
@media (min-width:981px){
  .arch{width:min(40vw, 520px, calc((100vh - 250px) / 1.4))}
}

/* optional opening hours line (set in the admin Contact tab) */
.hours-line{margin:-2px 0 6px;font-size:.95rem;font-weight:500;color:var(--rose)}
.hours-line[hidden]{display:none}
[data-c-opt][hidden]{display:none !important}