/* ============================================================
   Sweet Blooms by Abi — shared styles
   Editorial design inspired by Joyeux Repas
   Theme: Poppins + Great Vibes / warm cream + hot pink
   ============================================================ */

:root{
  --cream:#FFF9F0;        /* warm cream page background */
  --cream-2:#FBF1E4;      /* alt section background */
  --blush:#FBE3DE;        /* blush pink */
  --blush-soft:#F7D3D3;
  --rose:#D98A8A;         /* dusty rose */
  --rose-deep:#E8436B;    /* hot pink / magenta accent */
  --rose-dark:#C2254F;    /* deep magenta */
  --wine:#7A1F3D;         /* deep wine */
  --leaf:#A8BFA0;         /* sage — used very sparingly */
  --ink:#2B2118;          /* near-black warm text */
  --ink-soft:#7A6A63;     /* muted text */
  --amber:#E8A33D;        /* stars */
  --white:#FFFFFF;
  --line:rgba(43,33,24,0.12);
  --shadow:0 18px 44px rgba(43,33,24,0.10);
  --radius-btn:100vw;
  --radius-card:1.5em;
  --radius-feature:2em;
  --font-head:'Poppins', sans-serif;
  --font-body:'Poppins', sans-serif;
  --font-script:'Great Vibes', cursive;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:700;
  color:var(--ink);
  letter-spacing:-0.02em;
  line-height:1.05;
  text-transform:uppercase;
}

a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }

.wrap{
  max-width:1440px;
  margin:0 auto;
  padding:0 clamp(1.25rem, 5vw, 4rem);
}

a:focus-visible, button:focus-visible{
  outline:3px solid var(--rose-deep);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Typography scale (fluid) ---------- */
.title-xl{ font-size:clamp(2.2rem, 6vw, 4.75rem); }
.title-l{ font-size:clamp(1.8rem, 4.5vw, 3.25rem); }
.title-m{ font-size:clamp(1.5rem, 3.5vw, 2.5rem); }
.title-s{ font-size:clamp(1.2rem, 2.5vw, 1.8rem); }
.title-xs{ font-size:clamp(1.05rem, 2vw, 1.4rem); }
.txt-size-l{ font-size:clamp(1rem, 1.6vw, 1.25rem); line-height:1.4; }
.txt-size-s{ font-size:clamp(0.8rem, 1.1vw, 0.9rem); }
.txt-caps{ text-transform:uppercase; letter-spacing:0.04em; }
.txt-align-center{ text-align:center; }
.txt-color-primary{ color:var(--rose-deep); }
.txt-color-secondary{ color:var(--cream); }

.script{
  font-family:var(--font-script);
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
}

/* ---------- Hand-drawn scribble underline ---------- */
.scribble{
  position:relative;
  display:inline-block;
}
.scribble svg{
  position:absolute;
  left:-4%;
  bottom:-0.16em;
  width:108%;
  height:0.42em;
  overflow:visible;
  pointer-events:none;
}
.scribble svg path{
  fill:none;
  stroke:var(--rose-deep);
  stroke-width:2.4;
  stroke-linecap:round;
  opacity:.8;
}

/* ---------- Stamp badge (recurring motif) ---------- */
.stamp{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:2px dashed var(--rose-dark);
  border-radius:50%;
  padding:0.7em 1.1em;
  transform:rotate(-8deg);
  font-size:clamp(0.58rem, 0.9vw, 0.7rem);
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--rose-dark);
  background:rgba(255,249,240,0.9);
  white-space:nowrap;
  box-shadow:0 8px 20px rgba(43,33,24,0.12);
}
.stamp svg{ width:15px; height:15px; flex-shrink:0; }
.stamp._alt{
  border-color:var(--blush-soft);
  color:var(--blush-soft);
  background:transparent;
  box-shadow:none;
}

/* ---------- Eyebrow & section head ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-size:clamp(0.65rem, 1vw, 0.75rem);
  font-weight:600;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--rose-deep);
}
.eyebrow::before,
.eyebrow::after{
  content:"";
  width:34px;
  height:1px;
  background:var(--rose-deep);
  opacity:0.5;
}

.section-head{
  text-align:center;
  max-width:640px;
  margin:0 auto clamp(2.5rem, 5vw, 4rem);
}
.section-head .eyebrow{ margin-bottom:16px; }
.section-head h2{
  font-size:clamp(1.9rem, 4.5vw, 3rem);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.02em;
  margin-bottom:14px;
}
.section-head p{
  color:var(--ink-soft);
  font-size:clamp(0.9rem, 1.3vw, 1rem);
}

/* ---------- Buttons (pill + color inversion on hover) ---------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:2px solid var(--rose-deep);
  border-radius:var(--radius-btn);
  padding:clamp(0.7em, 1.2vw, 1em) clamp(1.4em, 2.5vw, 2em);
  font-family:var(--font-head);
  font-size:clamp(0.7rem, 1vw, 0.8rem);
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--rose-deep);
  background:transparent;
  cursor:pointer;
  transition:background-color .35s ease, color .35s ease, border-color .35s ease;
  white-space:nowrap;
}
.btn:hover{
  background:var(--rose-deep);
  color:var(--cream);
}
.btn:focus-visible{
  outline:2px solid var(--rose-dark);
  outline-offset:3px;
}
.btn svg{ width:16px; height:16px; }

.btn-solid{
  background:var(--rose-deep);
  color:var(--cream);
}
.btn-solid:hover{
  background:var(--rose-dark);
  color:var(--cream);
}

.btn-dark{
  border-color:var(--ink);
  color:var(--ink);
}
.btn-dark:hover{
  background:var(--ink);
  color:var(--cream);
}

.btn-light{
  border-color:var(--cream);
  color:var(--cream);
}
.btn-light:hover{
  background:var(--cream);
  color:var(--rose-deep);
}

.btn-outline{
  border-color:var(--rose-deep);
  color:var(--rose-deep);
}

/* ---------- Header / fixed nav ---------- */
.menu{
  position:fixed;
  top:0; left:0; right:0;
  z-index:90;
  background:rgba(255,249,240,0.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.menu_wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:clamp(0.6rem, 1.2vw, 0.9rem) clamp(1.25rem, 5vw, 4rem);
}
.menu_links{
  display:flex;
  align-items:center;
  gap:clamp(1rem, 2.5vw, 2.2rem);
}
.nav_link{
  font-size:clamp(0.65rem, 0.9vw, 0.75rem);
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink);
  position:relative;
  padding:4px 0;
}
.nav_link::after{
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  width:0%; height:1px;
  background:var(--rose-deep);
  transition:width .25s ease;
}
.nav_link:hover::after{ width:100%; }
.nav_link.active{ color:var(--rose-deep); }

.menu_logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(0.9rem, 1.4vw, 1.15rem);
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink);
  flex-shrink:0;
}
.menu_logo img{
  width:clamp(34px, 4vw, 42px);
  height:clamp(34px, 4vw, 42px);
  border-radius:50%;
  object-fit:cover;
}
.menu_logo .script{
  font-size:clamp(0.9rem, 1.3vw, 1.05rem);
  color:var(--rose-deep);
}

.menu_actions{
  display:flex;
  align-items:center;
  gap:12px;
}
.menu_actions .btn{ padding:0.6em 1.4em; }

.menu_trigger{
  display:none;
  align-items:center;
  gap:10px;
  background:var(--rose-deep);
  color:var(--cream);
  border:none;
  border-radius:var(--radius-btn);
  padding:0.55em 1em 0.55em 1.2em;
  font-family:var(--font-head);
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  cursor:pointer;
}
.menu_burger{ display:flex; flex-direction:column; gap:4px; }
.menu_burger-line{
  width:18px; height:2px;
  background:var(--cream);
  border-radius:2px;
  transition:transform .3s ease, opacity .3s ease;
}
.menu_trigger.open .menu_burger-line:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu_trigger.open .menu_burger-line:nth-child(2){ opacity:0; }
.menu_trigger.open .menu_burger-line:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.menu_opened-wrap{
  display:none;
  flex-direction:column;
  gap:1.2rem;
  padding:1.2rem clamp(1.25rem, 5vw, 4rem) 1.8rem;
  border-top:1px solid var(--line);
  background:var(--cream);
}
.menu_opened-wrap.open{ display:flex; }
.menu_opened-wrap .nav_link{ font-size:0.85rem; padding:6px 0; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--cream);
  overflow:hidden;
  padding:clamp(6rem, 12vh, 8rem) 1.25rem clamp(3rem, 8vh, 5rem);
}
.hero_bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero_bg img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  animation:heroSwap 16s infinite;
}
.hero_bg img:nth-child(1){ animation-delay:0s; }
.hero_bg img:nth-child(2){ animation-delay:4s; }
.hero_bg img:nth-child(3){ animation-delay:8s; }
.hero_bg img:nth-child(4){ animation-delay:12s; }
/* Fallback: first image visible when animations are disabled */
.hero_bg img:first-child{ opacity:1; }
/* Instant cross-swap — no fade, hard cut every 4s */
@keyframes heroSwap{
  0%,24.9%{ opacity:1; }
  25%,100%{ opacity:0; }
}
.hero_overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(43,33,24,0.55) 0%, rgba(122,31,61,0.45) 100%);
}
.hero_content{
  position:relative;
  z-index:2;
  max-width:900px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(1.5rem, 3vw, 2.5rem);
}

.hero_eyebrow{
  color:var(--cream);
  opacity:0.9;
  letter-spacing:0.4em;
  font-size:clamp(0.6rem, 1vw, 0.75rem);
  font-weight:600;
  text-transform:uppercase;
}
.hero_title{
  font-size:clamp(2.4rem, 7.5vw, 5.5rem);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:1.02;
  color:var(--cream);
  text-shadow:0 4px 30px rgba(0,0,0,0.35);
}
.hero_title .accent{
  color:var(--blush-soft);
  font-family:var(--font-script);
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  font-size:1.15em;
}
.hero_tag{
  max-width:560px;
  font-size:clamp(0.9rem, 1.5vw, 1.1rem);
  color:rgba(255,249,240,0.92);
  line-height:1.6;
}
.hero_ctas{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}

/* ---------- Intro (big statement + floating tags) ---------- */
.intro{
  padding:clamp(4rem, 10vw, 8rem) 0;
  position:relative;
}
.intro_text-wrap{
  position:relative;
  max-width:1100px;
  margin:0 auto;
  text-align:center;
  padding:clamp(2rem, 6vw, 4rem) 0;
}
.intro_text-container .title-xl{
  max-width:900px;
  margin:0 auto;
  line-height:1.15;
}
.intro-tag{
  position:absolute;
  border:1px solid var(--rose-deep);
  background:var(--cream);
  color:var(--rose-deep);
  border-radius:100vw;
  padding:0.4em 0.9em;
  font-size:clamp(0.75rem, 1.4vw, 1rem);
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  white-space:nowrap;
}
.intro-tag._1{ top:0; left:6%; }
.intro-tag._2{ top:8%; right:8%; }
.intro-tag._3{ bottom:6%; left:14%; }
.intro-tag._4{ bottom:0; right:16%; }
.intro-btn-wrap{
  margin-top:clamp(2rem, 4vw, 3rem);
  display:flex;
  justify-content:center;
}

/* ---------- Marquee ---------- */
.marquee{
  overflow:hidden;
  padding:0 0 clamp(2rem, 5vw, 3.5rem);
}
.marquee_wrap{
  display:flex;
  gap:1.5rem;
  width:max-content;
  animation:marquee 30s linear infinite;
}
.marquee:hover .marquee_wrap{ animation-play-state:paused; }
.marquee_img{
  width:clamp(160px, 22vw, 280px);
  aspect-ratio:3/4;
  border-radius:0.75em;
  overflow:hidden;
  flex-shrink:0;
}
.marquee_img img{ width:100%; height:100%; object-fit:cover; }
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- Services ---------- */
.services{
  padding:clamp(4rem, 10vw, 8rem) 0;
  background:var(--cream);
}
.services_cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(1.2rem, 3vw, 2rem);
  margin-top:clamp(2rem, 4vw, 3rem);
}
.service_card{
  border:1.5px solid #E23A6E;
  border-radius:28px;
  padding:clamp(2rem, 4vw, 3rem) clamp(1.4rem, 2.5vw, 2.2rem);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:var(--cream);
  min-height:clamp(300px, 40vw, 420px);
  transition:transform .3s ease, box-shadow .3s ease;
}
.service_card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}
.service_card-img{
  width:100%;
  height:clamp(150px, 20vw, 210px);
  object-fit:cover;
  border-radius:20px;
  margin-bottom:clamp(1rem, 2vw, 1.5rem);
}
.service_card h3{
  font-size:clamp(1.15rem, 2.2vw, 1.6rem);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--rose-deep);
  margin-top:0;
}
.service_card-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:clamp(36px, 4vw, 42px);
  height:clamp(36px, 4vw, 42px);
  border-radius:100vw;
  border:none;
  background:#E23A6E;
  color:#fff;
  cursor:pointer;
  margin-top:clamp(0.9rem, 1.6vw, 1.3rem);
  transition:background-color .3s ease;
}
.service_card-toggle:hover{ background:var(--rose-dark); }
.service_card-toggle .plus{
  width:16px;
  height:16px;
  transition:transform .3s ease;
}
.service_card.open .service_card-toggle .plus{ transform:rotate(45deg); }

/* Revealed content — icon, description, tags, order (fade/slide in) */
.service_card-more{
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .3s ease, opacity .3s ease;
}
.service_card.open .service_card-more{
  max-height:460px;
  opacity:1;
}
.service_card-more > *{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .35s ease, transform .4s ease;
}
.service_card.open .service_card-more > *{
  opacity:1;
  transform:none;
}
.service_card.open .service_card-more > *:nth-child(1){ transition-delay:.08s; }
.service_card.open .service_card-more > *:nth-child(2){ transition-delay:.16s; }
.service_card.open .service_card-more > *:nth-child(3){ transition-delay:.24s; }
.service_card-more p{
  color:var(--ink-soft);
  font-size:clamp(0.85rem, 1.2vw, 0.95rem);
  line-height:1.6;
  margin-top:1rem;
}
.service_card-tags{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:1rem;
}
.service_card-tags span{
  border:1px solid var(--rose-deep);
  background:var(--rose-deep);
  color:var(--cream);
  border-radius:100vw;
  padding:0.3em 0.8em;
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.service_card-more .btn{ margin-top:1.1rem; }

/* ---------- Works / featured ---------- */
.works{
  padding:clamp(4rem, 10vw, 8rem) 0;
}
.works_inner{
  display:grid;
  grid-template-columns:minmax(240px, 0.75fr) 2.25fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:start;
}
.works_side{
  position:sticky;
  top:clamp(84px, 12vh, 110px);
}
.works_side .section-head{
  text-align:left;
  max-width:340px;
  margin:0 0 clamp(1.5rem, 3vw, 2rem);
}
.works_side .section-head .eyebrow{ margin-bottom:16px; }
.works_side .section-head h2{ font-size:clamp(1.9rem, 3.5vw, 2.8rem); }
.works_side .section-head p{ margin-top:14px; }
.works_grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(1.2rem, 3vw, 2rem);
}
.work_card{ cursor:pointer; }
.work_card-img-wrap{
  border-radius:0.75em;
  aspect-ratio:4/5;
  overflow:hidden;
  position:relative;
}
.work_card-img-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(0.19,1,0.22,1);
}
.work-card:hover .work_card-img-wrap img{ transform:scale(1.06); }
.work_card-content{ margin-top:0.9em; }
.work_card-categories{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:0.5em;
}
.work_card-categories span{
  border:1px solid var(--rose-deep);
  border-radius:100vw;
  padding:0.25em 0.8em;
  font-size:0.65rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--rose-deep);
}
.work_card-content h3{ font-size:clamp(1rem, 1.8vw, 1.35rem); }
.work_card-content p{ color:var(--ink-soft); font-size:clamp(0.8rem, 1.1vw, 0.9rem); }

/* Cursor-follow "VIEW" badge (custom cursor, reference video) */
.work_cursor{
  position:fixed;
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--cream);
  color:var(--rose-deep);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-50%) scale(0.5);
  transition:opacity .25s ease, transform .25s ease;
  z-index:120;
  box-shadow:0 10px 26px rgba(43,33,24,0.2);
}
.work_cursor.show{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

/* ---------- Callout ---------- */
.callout{
  padding:clamp(4rem, 10vw, 8rem) 0;
  background:var(--wine);
  color:var(--cream);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.callout .title-display{
  font-size:clamp(2.6rem, 9vw, 7rem);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-0.02em;
  line-height:1;
  color:var(--cream);
}
.callout .title-display .script{
  color:var(--blush-soft);
  font-size:1.2em;
}
.callout p{
  max-width:520px;
  margin:1.5rem auto 2rem;
  color:rgba(255,249,240,0.85);
  font-size:clamp(0.9rem, 1.4vw, 1.05rem);
}

/* ---------- About / story ---------- */
.about{
  padding:clamp(4rem, 10vw, 8rem) 0;
}
.about_inner{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:center;
}
.about_content p{
  color:var(--ink-soft);
  font-size:clamp(0.9rem, 1.3vw, 1.05rem);
  line-height:1.7;
  margin-top:1.2rem;
}
.about_content .story-sign{
  font-family:var(--font-script);
  font-size:clamp(1.8rem, 3.5vw, 2.6rem);
  color:var(--rose-deep);
  margin-top:1.5rem;
}
.about_img-wrap{
  border-radius:0.75em;
  aspect-ratio:4/5;
  overflow:hidden;
  position:relative;
}
.about_img-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ---------- Testimonials ---------- */
.testimonials{
  padding:clamp(4rem, 10vw, 8rem) 0;
  background:var(--cream);
}
.t-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(1.2rem, 3vw, 2rem);
}
.t-card{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius-feature);
  padding:clamp(1.5rem, 3vw, 2.2rem);
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.t-card .stars{ color:var(--amber); letter-spacing:0.2em; }
.t-card p{ font-size:clamp(0.85rem, 1.2vw, 0.95rem); line-height:1.6; }
.t-who{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.t-avatar{
  width:42px; height:42px;
  border-radius:50%;
  background:var(--rose-deep);
  color:var(--cream);
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
}
.t-who strong{ display:block; font-size:0.9rem; }
.t-who span{ font-size:0.78rem; color:var(--ink-soft); }

/* ---------- Contact ---------- */
.contact{
  padding:clamp(4rem, 10vw, 8rem) 0;
}
.contact_inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.2rem, 3vw, 2rem);
}
.contact-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-feature);
  padding:clamp(1.5rem, 3vw, 2.5rem);
  min-width:0;
}
.contact-card h3{
  font-size:clamp(1rem, 1.8vw, 1.3rem);
  margin-bottom:1.2rem;
}
.info-row{
  display:flex; align-items:center; gap:14px;
  padding:13px 0;
  border-bottom:1px solid var(--line);
}
.info-row:last-child{ border-bottom:none; }
.info-row .icon{
  width:42px; height:42px;
  border-radius:50%;
  border:1px solid rgba(232,67,107,0.35);
  background:var(--blush-soft);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.info-row .icon svg{ width:20px; height:20px; color:var(--rose-deep); }
.info-row strong{ display:block; font-weight:600; font-size:0.95rem; }
.info-row span{ font-size:0.86rem; color:var(--ink-soft); }
.contact-card.cta{
  background:linear-gradient(160deg, var(--rose-deep), var(--rose-dark));
  border:none;
  color:var(--cream);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:16px;
}
.contact-card.cta h3{ color:var(--cream); }
.contact-card.cta p{ color:rgba(255,249,240,0.92); font-size:0.96rem; }
.contact-card.cta .btn{ white-space:normal; text-align:center; }

/* ---------- Order form ---------- */
.order-form{
  padding:clamp(4rem, 10vw, 8rem) 0;
  background:var(--cream);
}
.order-form-card{
  max-width:820px;
  margin:0 auto;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-feature);
  padding:clamp(1.5rem, 4vw, 3rem);
  box-shadow:var(--shadow);
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(0.8rem, 2vw, 1.25rem);
}
.form-field{ margin-bottom:clamp(0.9rem, 2vw, 1.25rem); }
.form-field label{
  display:block;
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:8px;
}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  padding:clamp(0.7rem, 1.5vw, 0.85rem) clamp(0.8rem, 1.5vw, 1rem);
  font-family:var(--font-body);
  font-size:0.95rem;
  color:var(--ink);
  background:var(--cream-2);
  border:1px solid var(--line);
  border-radius:0.75em;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color:var(--rose-deep);
  box-shadow:0 0 0 3px rgba(232,67,107,0.15);
  background:var(--white);
}
.form-field textarea{ resize:vertical; }
.form-submit{
  width:100%;
  margin-top:6px;
}
.form-submit svg{ width:20px; height:20px; }
.form-note{
  text-align:center;
  font-size:0.8rem;
  color:var(--ink-soft);
  margin-top:1rem;
}
.upload-box{
  border:1.5px dashed var(--rose-deep);
  border-radius:1em;
  padding:clamp(1rem, 2.5vw, 1.5rem);
  text-align:center;
  background:var(--cream-2);
  transition:border-color .2s ease, background .2s ease;
}
.upload-box:hover{ border-color:var(--rose-dark); background:var(--blush-soft); }
.upload-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--rose-deep);
  color:var(--cream);
  border:none;
  border-radius:var(--radius-btn);
  padding:0.6em 1.4em;
  font-family:var(--font-head);
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s ease;
}
.upload-btn:hover{ background:var(--rose-dark); }
.upload-btn svg{ width:18px; height:18px; }
.upload-hint{
  display:block;
  margin-top:10px;
  font-size:0.8rem;
  color:var(--ink-soft);
}
.upload-preview{
  position:relative;
  display:inline-block;
  margin-top:14px;
}
.upload-preview img{
  max-width:180px;
  max-height:180px;
  border-radius:12px;
  border:1px solid var(--line);
  object-fit:cover;
}
.upload-remove{
  position:absolute;
  top:-8px; right:-8px;
  width:26px; height:26px;
  border-radius:50%;
  border:none;
  background:var(--rose-dark);
  color:var(--cream);
  font-size:0.8rem;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px rgba(0,0,0,0.2);
}

/* ---------- Footer ---------- */
.footer{
  background:var(--wine);
  color:var(--cream);
  padding:clamp(3rem, 8vw, 6rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  margin-top:0;
}
/* Newsletter signup */
.footer-news{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.2rem;
  padding-bottom:clamp(2rem, 4vw, 3rem);
  border-bottom:1px solid rgba(255,249,240,0.18);
  margin-bottom:clamp(2rem, 4vw, 3rem);
}
.footer-news h4{
  color:var(--cream);
  font-size:clamp(1rem, 1.8vw, 1.3rem);
  letter-spacing:0.04em;
  margin-bottom:0.4rem;
}
.footer-news p{
  color:rgba(255,249,240,0.7);
  font-size:0.85rem;
}
.footer-news-form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.footer-news-form input{
  padding:0.75em 1.1em;
  font-family:var(--font-body);
  font-size:0.9rem;
  color:var(--cream);
  background:rgba(255,249,240,0.08);
  border:1px solid rgba(255,249,240,0.35);
  border-radius:100vw;
  outline:none;
  min-width:180px;
  transition:border-color .2s ease, background .2s ease;
}
.footer-news-form input::placeholder{ color:rgba(255,249,240,0.55); }
.footer-news-form input:focus{
  border-color:var(--blush-soft);
  background:rgba(255,249,240,0.14);
}
.footer-news-form button{
  width:46px;
  height:46px;
  border-radius:50%;
  border:none;
  background:var(--rose-deep);
  color:var(--cream);
  font-size:1.1rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease, transform .2s ease;
}
.footer-news-form button:hover{ background:var(--rose-dark); transform:translateY(-2px); }
.footer-news-form button svg{ width:18px; height:18px; }

.footer_inner{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:clamp(2rem, 5vw, 4rem);
  padding-bottom:clamp(2rem, 4vw, 3rem);
  border-bottom:1px solid rgba(255,249,240,0.2);
}
.footer .logo{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(0.95rem, 1.5vw, 1.2rem);
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--cream);
}
.footer .logo img{
  width:clamp(38px, 4vw, 46px);
  height:clamp(38px, 4vw, 46px);
  border-radius:50%;
  object-fit:cover;
}
.footer .logo .script{
  font-size:clamp(0.95rem, 1.4vw, 1.1rem);
  color:var(--blush-soft);
}
.footer-tagline{
  display:block;
  margin-top:1rem;
  color:rgba(255,249,240,0.75);
  font-size:clamp(0.85rem, 1.2vw, 0.95rem);
}
.footer h4{
  color:var(--cream);
  font-size:0.75rem;
  letter-spacing:0.2em;
  margin-bottom:1.2rem;
}
.footer-links{
  display:flex;
  flex-direction:column;
  gap:0.8rem;
}
.footer-links a{
  color:rgba(255,249,240,0.85);
  font-size:0.9rem;
  transition:color .2s ease;
}
.footer-links a:hover{ color:var(--blush-soft); }
.footer-contact p{
  color:rgba(255,249,240,0.85);
  font-size:0.9rem;
  line-height:1.8;
}
.footer-social{
  display:flex;
  gap:12px;
  margin-top:1.2rem;
}
.footer-social a{
  width:42px; height:42px;
  border-radius:50%;
  border:1px solid rgba(255,249,240,0.4);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, border-color .2s ease;
}
.footer-social a:hover{ background:var(--rose-deep); border-color:var(--rose-deep); }
.footer-social svg{ width:18px; height:18px; fill:var(--cream); }
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:0.8rem;
  padding-top:1.5rem;
  font-size:0.8rem;
  color:rgba(255,249,240,0.6);
}

/* ---------- Floating WhatsApp ---------- */
.float-wa{
  position:fixed;
  bottom:22px; right:22px;
  background:#25D366;
  width:clamp(50px, 6vw, 58px);
  height:clamp(50px, 6vw, 58px);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(37,211,102,0.4);
  z-index:60;
  transition:transform .2s ease;
}
.float-wa:hover{ transform:scale(1.08); }
.float-wa svg{ width:28px; height:28px; }

/* ---------- Hero entrance (triggered by body.loaded) ---------- */

/* ---------- Menu page ---------- */
.menu-hero{
  padding:clamp(7rem, 14vh, 9.5rem) 0 clamp(2rem, 4vw, 3rem);
  text-align:center;
  background:
    radial-gradient(900px 420px at 50% -10%, var(--blush-soft) 0%, rgba(247,211,211,0) 70%);
}
.menu-hero .title-xl{ line-height:1.12; font-size:clamp(1.7rem, 3.4vw, 2.5rem); }
.menu-hero .txt-size-l{ color:var(--ink-soft); font-size:clamp(0.95rem, 1.2vw, 1.05rem); }

.cat-nav{
  padding:0 0 clamp(2rem, 4vw, 3rem);
}
@media (min-width:641px){
  .cat-nav{
    position:sticky;
    top:clamp(56px, 8vh, 68px);
    z-index:50;
    background:rgba(255,249,240,0.94);
    backdrop-filter:blur(8px);
    padding:0.9rem 0;
    border-bottom:1px solid var(--line);
    margin-bottom:clamp(1.5rem, 3vw, 2rem);
  }
}
.cat-nav ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}
.cat-nav a{
  display:inline-block;
  border:1px solid var(--rose-deep);
  border-radius:100vw;
  padding:0.5em 1.2em;
  font-size:clamp(0.65rem, 0.9vw, 0.72rem);
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--rose-deep);
  transition:background .25s ease, color .25s ease;
}
.cat-nav a:hover{
  background:var(--rose-deep);
  color:var(--cream);
}

.menu-section{
  padding:clamp(3rem, 7vw, 5.5rem) 0;
}
.menu-section-head{
  display:flex;
  align-items:center;
  gap:clamp(1rem, 2.5vw, 1.8rem);
  margin-bottom:clamp(1.8rem, 4vw, 2.8rem);
}
.menu-section-head .eyebrow{ flex-shrink:0; }
.menu-section-head .title-l{ flex-shrink:0; font-size:clamp(1.3rem, 2.4vw, 1.8rem); }
.menu-section-head .rule{
  flex:1;
  height:1px;
  background:var(--line);
}

.menu-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(1.2rem, 3vw, 2rem);
}
.m-item{
  border:1px solid var(--line);
  border-radius:var(--radius-feature);
  overflow:hidden;
  background:var(--white);
  display:flex;
  flex-direction:column;
  transition:transform .5s cubic-bezier(0.19,1,0.22,1), box-shadow .5s ease;
}
.m-item:hover{
  transform:translateY(-0.4em);
  box-shadow:var(--shadow);
}
.m-item img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}
.m-body{
  padding:clamp(1.2rem, 2.5vw, 1.8rem);
  display:flex;
  flex-direction:column;
  gap:0.7rem;
  flex:1;
}
.m-body h3{ font-size:clamp(0.95rem, 1.4vw, 1.1rem); }
.m-body p{
  color:var(--ink-soft);
  font-size:clamp(0.8rem, 1vw, 0.88rem);
  line-height:1.6;
  flex:1;
}
.m-body .btn{ align-self:flex-start; margin-top:0.4rem; }

/* ============================================================
   Motion system — from the Joyeux Repas reference video
   (staggered hero entrance, floating logo, scroll reveals,
    drifting pills, auto-scrolling filmstrip, parallax)
   ============================================================ */

/* ---------- Hero entrance (triggered by body.loaded) ---------- */
html.js .hero_eyebrow,
html.js .hero_title,
html.js .hero_tag,
html.js .hero_ctas{
  opacity:0;
}
body.loaded .hero_eyebrow{ animation:heroIn .9s cubic-bezier(0.22,1,0.36,1) .3s forwards; }
body.loaded .hero_title{ animation:heroIn .9s cubic-bezier(0.22,1,0.36,1) .45s forwards; }
body.loaded .hero_tag{ animation:heroIn .9s cubic-bezier(0.22,1,0.36,1) .6s forwards; }
body.loaded .hero_ctas{ animation:heroIn .9s cubic-bezier(0.22,1,0.36,1) .75s forwards; }

@keyframes heroIn{
  from{ opacity:0; transform:translateY(26px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes floatY{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-12px); }
}

/* ---------- Scroll reveal (html.js gates initial hidden state) ---------- */
html.js .reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .8s ease, transform .8s cubic-bezier(0.19,1,0.22,1);
  transition-delay:var(--d, 0s);
  will-change:opacity, transform;
}
html.js .reveal.in-view{
  opacity:1;
  transform:none;
}
/* Safety net: force visibility even if transitions are throttled/frozen */
html.js .reveal.reveal-force{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}
body.hero-done .hero_eyebrow,
body.hero-done .hero_title,
body.hero-done .hero_tag,
body.hero-done .hero_ctas{
  opacity:1 !important;
}

/* ---------- Floating pills (intro tags + menu hero tags) ---------- */
.intro-tag{ animation:floatY 4s ease-in-out infinite; }
.intro-tag._1{ animation-duration:3.6s; }
.intro-tag._2{ animation-duration:4.4s; animation-delay:.5s; }
.intro-tag._3{ animation-duration:3.9s; animation-delay:1s; }
.intro-tag._4{ animation-duration:4.7s; animation-delay:.3s; }

/* ---------- Callout ribbon (looping text band) ---------- */
.callout-ribbon{
  overflow:hidden;
  margin-bottom:clamp(1.5rem, 4vw, 3rem);
  opacity:.35;
  user-select:none;
  pointer-events:none;
}
.callout-ribbon-track{
  display:flex;
  gap:2.5rem;
  width:max-content;
  animation:marquee 28s linear infinite;
}
.callout-ribbon-track span{
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(1rem, 2vw, 1.4rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--cream);
  white-space:nowrap;
}

/* ---------- Menu hero floating tags ---------- */
.menu-hero{ position:relative; }
.menu-hero-tags{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
}
.menu-hero-tag{
  position:absolute;
  border:1px solid var(--rose-deep);
  background:var(--cream);
  color:var(--rose-deep);
  border-radius:100vw;
  padding:.45em 1em;
  font-size:clamp(.7rem, 1.2vw, .85rem);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:auto;
  animation:floatY 4s ease-in-out infinite;
  transition:background .25s ease, color .25s ease;
}
.menu-hero-tag:hover{ background:var(--rose-deep); color:var(--cream); }
.menu-hero-tag._1{ top:10%; left:3%; animation-duration:3.8s; }
.menu-hero-tag._2{ top:20%; right:4%; animation-duration:4.6s; animation-delay:.6s; }
.menu-hero-tag._3{ bottom:8%; left:12%; animation-duration:4.2s; animation-delay:1.1s; }
.menu-hero-tag._4{ bottom:18%; right:12%; animation-duration:5s; animation-delay:.3s; }

/* ---------- Parallax photo ---------- */
.about_img-wrap{ overflow:hidden; }
.about_img-wrap img{ will-change:transform; }

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .menu-grid{ grid-template-columns:1fr 1fr; }
  .services_cards{ grid-template-columns:1fr 1fr; }
  .works_grid{ grid-template-columns:1fr 1fr; }
  .works_inner{ grid-template-columns:1fr; }
  .works_side{ position:static; }
  .works_side .section-head{ text-align:center; margin:0 auto clamp(2rem, 4vw, 3rem); }
  .t-grid{ grid-template-columns:1fr 1fr; }
  .about_inner{ grid-template-columns:1fr; }
  .about_img-wrap{ max-width:520px; }
  .footer_inner{ grid-template-columns:1fr 1fr; }
}

@media (max-width:900px){
  .menu_links{ display:none; }
  .menu_trigger{ display:flex; }
  .menu_actions .btn{ display:none; }
  .contact_inner{ grid-template-columns:1fr; }
  .intro-tag._1{ left:2%; }
  .intro-tag._2{ right:2%; }
  .intro-tag._3{ left:6%; }
  .intro-tag._4{ right:6%; }
}

@media (max-width:640px){
  .services_cards{ grid-template-columns:1fr; }
  .works_grid{ grid-template-columns:1fr; }
  .t-grid{ grid-template-columns:1fr; }
  .menu-grid{ grid-template-columns:1fr; }
  .menu-section-head{ flex-wrap:wrap; }
  .menu-section-head .rule{ display:none; }
  .menu-hero-tags{
    position:static;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin-top:1.5rem;
    pointer-events:auto;
  }
  .menu-hero-tag{
    position:static;
    display:inline-block;
    animation:none;
  }
  .footer_inner{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .hero_ctas{ flex-direction:column; align-items:stretch; }
  .hero_ctas .btn{ width:100%; }
  .intro-tag{ position:static; display:inline-block; margin:0.4rem; }
  .intro-text-wrap{ display:flex; flex-wrap:wrap; justify-content:center; }
  .intro-text-wrap .title-xl{ width:100%; }
  .intro-btn-wrap{ width:100%; }
  .footer-bottom{ flex-direction:column; text-align:center; justify-content:center; }
  .menu_logo .script{ display:none; }
  .footer-news-form input{ min-width:0; flex:1 1 100%; }
  .footer-news-form{ width:100%; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  /* keep everything visible when animations are disabled */
  html.js .hero_eyebrow,
  html.js .hero_title,
  html.js .hero_tag,
  html.js .hero_ctas,
  html.js .reveal,
  .menu-hero-tag{
    opacity:1 !important;
    transform:none !important;
  }
  .callout-ribbon-track,
  .marquee_wrap{ animation:none !important; }
}

/* ---------- Menu: show 3 + "More" ---------- */
.m-item-more{ display:none; }
.menu-section.is-open .m-item-more{ display:flex; }
.menu-more-btn{
  display:flex;
  margin:clamp(1.5rem, 3vw, 2rem) auto 0;
}

/* ---------- Menu cart ---------- */
.cart-fab{
  position:fixed;
  right:22px;
  bottom:96px;
  z-index:61;
  width:clamp(50px, 6vw, 58px);
  height:clamp(50px, 6vw, 58px);
  border-radius:50%;
  border:none;
  background:var(--rose-deep);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(232,67,107,0.4);
  transition:transform .2s ease;
}
.cart-fab:hover{ transform:scale(1.08); }
.cart-fab svg{ width:26px; height:26px; }
.cart-count{
  position:absolute;
  top:-4px;
  right:-4px;
  min-width:22px;
  height:22px;
  padding:0 5px;
  border-radius:999px;
  background:var(--wine);
  color:#fff;
  font-size:12px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--cream);
}
.cart-panel{
  position:fixed;
  top:0; right:0; bottom:0;
  width:min(26rem, 96vw);
  background:var(--cream);
  z-index:71;
  transform:translateX(105%);
  transition:transform .45s cubic-bezier(0.19,1,0.22,1);
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow);
}
.cart-panel.open{ transform:translateX(0); }
.cart-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.9rem 1.2rem;
  border-bottom:1px solid var(--line);
}
.cart-panel-head h3{ font-size:1rem; }
.cart-close{
  background:none;
  border:none;
  font-size:1rem;
  line-height:1;
  cursor:pointer;
  color:var(--ink);
  padding:.25rem;
}
.cart-view{
  display:flex;
  flex-direction:column;
  flex:1;
  overflow:hidden;
}
.cart-items{
  flex:1;
  overflow-y:auto;
  padding:.8rem 1.2rem;
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.cart-item{
  display:flex;
  align-items:center;
  gap:.45rem;
  border:1px solid var(--line);
  border-radius:.8em;
  padding:.35rem .55rem;
  background:var(--white);
}
.cart-item-name{
  flex:1;
  min-width:0;
  font-weight:600;
  font-size:.76rem;
  line-height:1.28;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.cart-qty{ display:flex; align-items:center; gap:.25rem; flex-shrink:0; }
.cart-qty button{
  width:1.25rem;
  height:1.25rem;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--white);
  color:var(--ink);
  cursor:pointer;
  font-weight:700;
  font-size:.7rem;
  line-height:1;
  padding:0;
}
.cart-qty span{ min-width:1rem; text-align:center; font-weight:600; font-size:.78rem; }
.cart-item-remove{
  background:none;
  border:none;
  color:var(--rose-deep);
  cursor:pointer;
  font-size:.8rem;
  line-height:1;
  padding:.2rem;
  flex-shrink:0;
}
.cart-empty{ padding:.8rem 1.2rem; color:var(--ink-soft); font-size:.82rem; }
.cart-foot{
  padding:.8rem 1.2rem;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.cart-total{ font-weight:600; font-size:.85rem; }
.cart-checkout{
  padding:.9rem 1.2rem;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.cart-checkout-intro{ color:var(--ink-soft); font-size:.82rem; }
.cart-field{ display:flex; flex-direction:column; gap:.25rem; font-size:.8rem; font-weight:600; }
.cart-field input,
.cart-field textarea{
  border:1px solid var(--line);
  border-radius:.8em;
  padding:.5em .8em;
  font-family:inherit;
  font-size:.85rem;
  font-weight:400;
  background:var(--white);
  color:var(--ink);
}
.cart-field input:focus,
.cart-field textarea:focus{ outline:2px solid var(--rose-deep); outline-offset:1px; }
.cart-checkout-actions{ display:flex; gap:.6rem; margin-top:.4rem; }
.cart-checkout-actions .btn{ flex:1; }
.cart-overlay{
  position:fixed;
  inset:0;
  background:rgba(43,33,24,0.4);
  z-index:70;
}
.cart-toast{
  position:fixed;
  left:50%;
  bottom:1.6rem;
  transform:translateX(-50%);
  background:var(--wine);
  color:#fff;
  padding:.7em 1.3em;
  border-radius:999px;
  font-size:.85rem;
  z-index:80;
  box-shadow:var(--shadow);
  max-width:90vw;
  text-align:center;
}

/* Keep hidden cart elements truly hidden — display:flex rules would otherwise
   override the hidden attribute and leak the FAB / checkout form into view */
.cart-fab[hidden],
.cart-overlay[hidden],
.cart-checkout[hidden],
.cart-toast[hidden]{ display:none !important; }

/* ============================================================
   Modern home redesign (scoped to body.home — menu page untouched)
   ============================================================ */

/* ---------- Hero: split layout with image collage ---------- */
body.home .hero{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  overflow:hidden;
  text-align:left;
  color:var(--ink);
  padding:clamp(5.5rem, 8vw, 7rem) 0 clamp(2.5rem, 5vw, 4rem);
  background:
    radial-gradient(60% 80% at 88% 8%, rgba(232,67,107,0.10), transparent 62%),
    radial-gradient(55% 75% at 6% 92%, rgba(247,211,211,0.55), transparent 62%),
    linear-gradient(180deg, #FFF6EC 0%, var(--cream) 100%);
}
body.home .hero-inner{
  max-width:1440px;
  margin:0 auto;
  padding:0 clamp(1.25rem, 5vw, 4rem);
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:center;
  position:relative;
  z-index:1;
}
body.home .hero-copy{ max-width:34rem; position:relative; }
body.home .hero_eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:var(--blush-soft);
  color:var(--rose-dark);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:.55rem 1.15rem;
  border-radius:100vw;
  opacity:1;
}
body.home .hero_title{
  font-size:clamp(2.5rem, 6.2vw, 4.4rem);
  text-transform:none;
  letter-spacing:-0.03em;
  line-height:1.05;
  color:var(--ink);
  text-shadow:none;
  margin:1.4rem 0 1.2rem;
}
body.home .hero_title .accent{
  color:var(--rose-deep);
  font-family:var(--font-script);
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  font-size:1.15em;
}
body.home .hero_tag{
  max-width:30rem;
  font-size:clamp(1rem, 1.5vw, 1.15rem);
  color:var(--ink-soft);
  line-height:1.65;
}
body.home .hero_ctas{
  justify-content:flex-start;
  gap:.9rem;
  margin-top:2.2rem;
}
body.home .hero-trust{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.5rem;
  margin-top:2.4rem;
}
body.home .hero-trust-item{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.85rem;
  font-weight:500;
  color:var(--ink-soft);
}
body.home .hero-trust-item::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--rose-deep);
  flex:none;
}

/* Hero visual — main photo + floating cards + badge */
body.home .hero-visual{
  position:relative;
  min-height:clamp(340px, 42vw, 520px);
}
body.home .hero-img-main{
  position:absolute;
  inset:0;
  border-radius:2rem;
  overflow:hidden;
  box-shadow:0 30px 60px rgba(43,33,24,0.18);
}
body.home .hero-img-main img{
  width:100%;
  height:100%;
  object-fit:cover;
}
body.home .hero-img-float{
  position:absolute;
  width:clamp(110px, 15vw, 160px);
  aspect-ratio:1;
  border-radius:1.4rem;
  overflow:hidden;
  border:4px solid #fff;
  box-shadow:0 18px 40px rgba(43,33,24,0.22);
}
body.home .hero-img-float img{
  width:100%;
  height:100%;
  object-fit:cover;
}
body.home .hero-img-float._1{ bottom:5%; left:-7%; }
body.home .hero-img-float._2{ top:3%; right:-5%; }
body.home .hero-badge{
  position:absolute;
  top:7%;
  left:6%;
  background:var(--rose-deep);
  color:#fff;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.06em;
  padding:.55rem 1.05rem;
  border-radius:100vw;
  box-shadow:0 12px 24px rgba(232,67,107,0.35);
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}

/* Hero visual entrance (staggered after the copy) */
html.js body.home .hero-visual{ opacity:0; transform:translateY(24px); }
body.home.loaded .hero-visual{ animation:heroIn .9s cubic-bezier(0.22,1,0.36,1) .35s forwards; }
body.home.hero-done .hero-visual{ opacity:1 !important; transform:none !important; }

/* ---------- Trust strip ---------- */
body.home .trust-strip{ padding:0 0 clamp(2.5rem, 6vw, 4.5rem); }
body.home .trust-strip-inner{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1rem;
  background:#fff;
  border:1px solid var(--line);
  border-radius:1.5rem;
  padding:1.4rem clamp(1rem, 3vw, 2rem);
  box-shadow:0 14px 34px rgba(43,33,24,0.06);
}
body.home .trust-item{
  display:flex;
  align-items:center;
  gap:.7rem;
  font-size:.9rem;
  font-weight:500;
  color:var(--ink);
}
body.home .trust-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--rose-deep);
  flex:none;
}

/* ---------- Services: modern cards ---------- */
body.home .service_card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:1.5rem;
  padding:0;
  align-items:stretch;
  justify-content:flex-start;
  text-align:left;
  min-height:0;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(43,33,24,0.06);
}
body.home .service_card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 50px rgba(43,33,24,0.12);
}
body.home .service_card-img{
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  border-radius:0;
  margin:0;
}
body.home .service_card h3{
  text-transform:none;
  letter-spacing:0;
  color:var(--ink);
  font-size:clamp(1.15rem, 2vw, 1.45rem);
  padding:1.2rem 1.4rem 0;
  text-align:left;
}
body.home .service_card-toggle{
  position:absolute;
  top:1rem;
  right:1rem;
  width:2.6rem;
  height:2.6rem;
  margin:0;
  background:rgba(255,255,255,0.94);
  color:var(--rose-deep);
  box-shadow:0 8px 20px rgba(43,33,24,0.18);
  z-index:2;
}
body.home .service_card-toggle:hover{ background:#fff; }
body.home .service_card-more{ padding:0 1.4rem 1.4rem; text-align:left; }
body.home .service_card-more p{ margin-top:.9rem; }
body.home .service_card-tags{ justify-content:flex-start; margin-top:.9rem; }
body.home .service_card-tags span{
  border:1px solid var(--blush-soft);
  background:var(--blush-soft);
  color:var(--rose-dark);
}
body.home .service_card-more .btn{ margin-top:1.1rem; }

/* ---------- Works: modern cards ---------- */
body.home .work_card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:1.25rem;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(43,33,24,0.06);
  transition:transform .3s ease, box-shadow .3s ease;
}
body.home .work_card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 50px rgba(43,33,24,0.12);
}
body.home .work_card-img-wrap{ border-radius:0; aspect-ratio:4/3; }
body.home .work_card-content{ margin-top:0; padding:1.1rem 1.3rem 1.3rem; }
body.home .work_card-categories span{
  border:1px solid var(--blush-soft);
  background:var(--blush-soft);
  color:var(--rose-dark);
}

/* ---------- Callout: softer gradient ---------- */
body.home .callout{
  background:
    radial-gradient(60% 90% at 85% 0%, rgba(247,211,211,0.18), transparent 60%),
    linear-gradient(160deg, var(--rose-deep), var(--wine));
}

/* ---------- About: framed photo + badge ---------- */
body.home .about_img-wrap{
  border-radius:1.5rem;
  box-shadow:0 24px 50px rgba(43,33,24,0.14);
}
body.home .about-badge{
  position:absolute;
  left:1.2rem;
  bottom:1.2rem;
  background:#fff;
  color:var(--rose-deep);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.6rem 1.1rem;
  border-radius:100vw;
  box-shadow:0 12px 24px rgba(43,33,24,0.18);
}

/* ---------- Testimonials: white cards ---------- */
body.home .t-card{
  background:#fff;
  border-radius:1.25rem;
  box-shadow:0 14px 34px rgba(43,33,24,0.06);
}

/* ---------- Contact: soft shadow ---------- */
body.home .contact-card{ box-shadow:0 14px 34px rgba(43,33,24,0.06); }

/* ---------- Modern home responsive ---------- */
@media (max-width:1020px){
  body.home .hero-inner{ grid-template-columns:1fr; }
  body.home .hero{ text-align:center; justify-content:flex-start; }
  body.home .hero-copy{ margin:0 auto; }
  body.home .hero_ctas{ justify-content:center; }
  body.home .hero-trust{ justify-content:center; }
  body.home .hero-visual{
    width:100%;
    max-width:560px;
    margin:0 auto;
    min-height:clamp(300px, 60vw, 420px);
  }
  body.home .trust-strip-inner{ grid-template-columns:1fr 1fr; }
}

@media (max-width:640px){
  body.home .trust-strip-inner{ grid-template-columns:1fr; }
  body.home .hero-visual{ min-height:clamp(260px, 78vw, 340px); }
  body.home .hero-img-float{ width:clamp(90px, 26vw, 120px); }
  body.home .hero-img-float._1{ left:-4%; }
  body.home .hero-img-float._2{ right:-4%; }
}

@media (prefers-reduced-motion: reduce){
  body.home .hero-visual{ opacity:1 !important; transform:none !important; }
}

/* =====================================================================
   Hero motion pack — pink-palette glitch entrance, ambient glow,
   dot-grain texture, collage scale-in + float, micro-interactions.
   Scoped to body.home — menu page untouched. Every glow, shadow and
   accent uses only the existing pink theme (--rose-deep / --blush-soft /
   --rose-dark) plus white/cream. Entrance plays once on load, not on scroll.
   ===================================================================== */

/* ---- Dot-grain texture over the hero background ---- */
body.home .hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(232,67,107,0.07) 1px, transparent 1.2px);
  background-size:12px 12px;
  pointer-events:none;
  z-index:0;
}

/* ---- Ambient pink glow drifting behind the headline ---- */
body.home .hero-glow{
  position:absolute;
  top:50%;
  left:50%;
  width:clamp(300px, 38vw, 480px);
  height:clamp(300px, 38vw, 480px);
  border-radius:50%;
  background-image:radial-gradient(rgba(232,67,107,0.55) 1px, transparent 1.3px);
  background-size:9px 9px;
  -webkit-mask-image:radial-gradient(circle, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.45) 45%, transparent 72%);
  mask-image:radial-gradient(circle, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.45) 45%, transparent 72%);
  pointer-events:none;
  z-index:0;
  animation:glowDrift 10s ease-in-out infinite;
}
body.home .hero-copy > :not(.hero-glow){ position:relative; z-index:1; }
@keyframes glowDrift{
  0%,100%{ transform:translate(-50%,-50%) translate(0,0); }
  25%{ transform:translate(-50%,-50%) translate(28px,-18px); }
  50%{ transform:translate(-50%,-50%) translate(-8px,-36px); }
  75%{ transform:translate(-50%,-50%) translate(-26px,12px); }
}

/* ---- Headline: duo-tone pink glitch reveal, word by word ---- */
body.home .hero_title{
  opacity:1;
  animation:none;
}
body.home .hero_title .w{
  display:inline-block;
  opacity:0;
  transform:translateY(20px);
  animation:wordGlitch .55s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:calc(var(--wi, 0) * 90ms + 300ms);
}
@keyframes wordGlitch{
  0%{ opacity:0; transform:translateY(20px); text-shadow:3px 0 rgba(232,67,107,.9), -3px 0 rgba(247,211,211,.9); }
  25%{ opacity:1; transform:translateY(0); text-shadow:3px 0 rgba(232,67,107,.9), -3px 0 rgba(247,211,211,.9); }
  55%{ opacity:1; transform:translateY(0); text-shadow:2px 0 rgba(232,67,107,.6), -2px 0 rgba(247,211,211,.6); }
  80%{ opacity:1; transform:translateY(0); text-shadow:1px 0 rgba(232,67,107,.3), -1px 0 rgba(247,211,211,.3); }
  100%{ opacity:1; transform:translateY(0); text-shadow:none; }
}

/* ---- Sequenced fade-up (pill → headline → tag → CTA → stats) ---- */
body.home.loaded .hero_eyebrow{ animation-delay:.1s; }
body.home.loaded .hero_tag{ animation-delay:.7s; }
body.home.loaded .hero_ctas{ animation-delay:.85s; }
html.js body.home .hero-trust{ opacity:0; }
body.home.loaded .hero-trust{ animation:heroIn .9s cubic-bezier(.22,1,.36,1) 1s forwards; }
body.home.hero-done .hero-trust{ opacity:1 !important; transform:none !important; }

/* ---- Collage: scale-up + fade, staggered; soft pink glow; float loop ---- */
html.js body.home .hero-visual{ opacity:0; transform:scale(.95); }
body.home.loaded .hero-visual{ animation:heroScaleIn .9s cubic-bezier(.22,1,.36,1) .9s forwards; }
body.home .hero-img-float{
  box-shadow:0 18px 40px rgba(232,67,107,0.25), 0 0 30px rgba(232,67,107,0.15);
}
body.home .hero-img-float._1{
  animation:heroScaleIn .9s cubic-bezier(.22,1,.36,1) 1.05s forwards,
             floatSoft 4.5s ease-in-out 2.1s infinite;
}
body.home .hero-img-float._2{
  animation:heroScaleIn .9s cubic-bezier(.22,1,.36,1) 1.15s forwards,
             floatSoft 5s ease-in-out 2.2s infinite;
}
@keyframes heroScaleIn{
  from{ opacity:0; transform:scale(.95); }
  to{ opacity:1; transform:scale(1); }
}
@keyframes floatSoft{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

/* ---- Micro-interactions ---- */
body.home .hero_ctas .btn-solid{
  transition:background-color .35s ease, color .35s ease, border-color .35s ease, transform .15s ease, box-shadow .15s ease;
}
body.home .hero_ctas .btn-solid:hover{
  transform:scale(1.03);
  box-shadow:0 12px 28px rgba(232,67,107,0.35);
}
body.home .hero-badge{
  animation:badgePulse 3s ease-in-out 2s infinite;
}
@keyframes badgePulse{
  0%,100%{ transform:scale(1); box-shadow:0 12px 24px rgba(232,67,107,0.35); }
  50%{ transform:scale(1.05); box-shadow:0 12px 24px rgba(232,67,107,0.45), 0 0 0 8px rgba(232,67,107,0.10); }
}

/* ---- Reduced motion: everything visible, no loops ---- */
@media (prefers-reduced-motion: reduce){
  body.home .hero-glow,
  body.home .hero-badge,
  body.home .hero-img-float{ animation:none !important; }
  body.home .hero_title .w{ opacity:1 !important; transform:none !important; text-shadow:none !important; }
  body.home .hero-trust{ opacity:1 !important; transform:none !important; }
  body.home .hero-visual{ opacity:1 !important; transform:none !important; }
}

/* ---- Hero secondary CTA: visible pink outline on the cream hero ----
   (.btn-light is cream-on-transparent, meant for dark sections like the
   callout band — on the cream hero it was invisible) */
body.home .hero_ctas .btn-light{
  border-color:var(--rose-deep);
  color:var(--rose-deep);
  background:#fff;
}
body.home .hero_ctas .btn-light:hover{
  background:var(--rose-deep);
  color:var(--cream);
}