/* =========================================================
   GOL ICE CREAM — redesign
   ========================================================= */
:root {
  --cream: #FDF3EE;
  --rose: #F6B3C4;
  --rose-soft: #FCE3EA;
  --berry: #6E1633;
  --ink: #2B0A15;
  --saffron: #F2B632;
  --gold: #C9A74D;
  --pista: #B9D58E;
  --bg: var(--cream);
  --fg: var(--berry);
  --display: 'Aboreto', 'Optima', Georgia, serif;
  --sub: 'Arapey', Georgia, 'Times New Roman', serif;
  --hand: 'Caveat', 'Comic Sans MS', cursive;
  --body: 'Lato', system-ui, -apple-system, sans-serif;
  --pad: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(16px, 1.1vw, 19px);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .6s var(--ease), color .6s var(--ease);
}
body.is-loading { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { font-family: var(--body); font-weight: 400; font-size: clamp(16px, 1.1vw, 19px); line-height: 1.5; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.1; margin: 0; letter-spacing: -.35rem; }
.sub, .flavors__title em, .flavors__title, .seq__final em, .story__lead, .statement__text {
  font-family: var(--sub); font-style: italic; letter-spacing: -.05em;
}
h2 { font-size: clamp(40px, 5.4vw, 108px); }

.eyebrow { font-weight: 700; text-transform: uppercase; letter-spacing: .18em; font-size: 13px; margin: 0 0 18px; }
.hand { font-family: var(--hand); font-weight: 700; font-size: clamp(22px, 2vw, 32px); line-height: 1; color: var(--berry); }
.hand--big { font-size: clamp(36px, 4vw, 64px); }

/* split text helpers */
.split-chars .char, .split-words .word { display: inline-block; will-change: transform; }
.split-words .word, .split-chars .word { white-space: nowrap; }
.mask { /*display: inline-block;*/ overflow: hidden; vertical-align: top; padding-bottom: .04em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; padding: 0 30px; border-radius: 999px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 14px;
  border: 2px solid currentColor; position: relative; overflow: hidden; isolation: isolate;
  transition: color .4s var(--ease);
}
.btn span { position: relative; z-index: 1; }
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--gold); transform: translateY(101%); transition: transform .5s var(--ease);
}
.btn:hover::before { transform: translateY(0); }
.btn--dark { background: var(--berry); color: var(--cream); border-color: var(--berry); }
.btn--dark:hover { color: var(--berry); }
.btn--small { height: 42px; padding: 0 20px; font-size: 12px; }
.btn--small:hover { color: var(--berry); }

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 100; background: var(--cream); color: var(--berry);
  display: grid; place-items: center;
}
.loader__inner { text-align: center; }
.loader__logo { font-family: var(--display); font-size: clamp(90px, 20vw, 260px); line-height: .9; }
.loader__count { font-family: var(--hand); font-size: 32px; color: var(--gold); }

/* ---------- Header ---------- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding: 16px var(--pad);
  transition: transform .5s var(--ease), background-color .4s;
}
.header.is-hidden { transform: translateY(-110%); }
.header.is-solid { background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(10px); }
.logo { display: flex; align-items: center; gap: 8px; justify-self: center; position: relative; }
.header__social { display: flex; gap: 14px; }
.header__social a { width: 40px; height: 40px; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; transition: background .3s, color .3s, transform .3s var(--ease); }
.header__social a:hover { background: var(--berry); color: var(--cream); transform: translateY(-2px); }
.header__social svg { width: 18px; height: 18px; fill: currentColor; }
.header__end { display: flex; align-items: center; gap: 28px; justify-self: end; }
.logo img { height: 40px; width: auto; display: block; }
.logo img + .logo__word, .logo img ~ .logo__sub { display: none; }
.logo__word { font-family: var(--display); font-size: 38px; line-height: 1; }
.logo__sub { font-family: var(--hand); font-size: 22px; }
.nav { display: flex; gap: 32px; font-weight: 500; }
.nav a { position: relative; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header .btn { height: 46px; padding: 0 22px; }
.burger { display: none; width: 46px; height: 46px; border-radius: 50%; background: var(--berry); position: relative; }
.burger span { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--cream); transition: transform .4s var(--ease); }
.burger[aria-expanded="true"] { background: var(--berry); }
.burger span:first-child { top: 18px; } .burger span:last-child { top: 26px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.mobile-menu {
  position: fixed; inset: 0; z-index: 40; background: var(--rose-soft); color: var(--berry);
  display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: var(--pad);
  clip-path: circle(0 at calc(100% - 40px) 40px); transition: clip-path .7s var(--ease);
}
.mobile-menu.is-open { clip-path: circle(150% at calc(100% - 40px) 40px); }
.mobile-menu a { font-family: var(--display); font-size: 58px; text-transform: uppercase; line-height: 1.05; }

/* ---------- Hero (scroll-scrubbed video) ---------- */
.hero { background: var(--ink); }
.hero__pin { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--ink); }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__veil { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(43, 10, 21, .42) 0%, rgba(43, 10, 21, .2) 45%, rgba(43, 10, 21, 0) 100%); }
.hero__veil::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(43, 10, 21, .5) 0%, rgba(43, 10, 21, .12) 38%, transparent 60%); }
.hero__copy { position: absolute; left: var(--pad); right: var(--pad); bottom: 12vh; z-index: 2; color: var(--cream); }
.hero__panel { position: absolute; left: 0; bottom: 0; width: min(100%, 760px); display: grid; gap: 20px; justify-items: start; opacity: 0; }
.hero__panel.is-active { opacity: 1; position: relative; }
.hero__title { font-size: clamp(38px, 5.2vw, 84px); line-height: 1.06; color: var(--cream); max-width: 15ch; text-wrap: balance; text-shadow: 0 2px 30px rgba(43, 10, 21, .35); }
.hero__title .split-chars { display: block; }
.hero__lede { margin: 0; font-size: clamp(16px, 1.25vw, 20px); max-width: 46ch; font-weight: 400; text-shadow: 0 2px 16px rgba(43, 10, 21, .4); }
.btn--light { background: var(--cream); color: var(--berry); border-color: var(--cream); }
.btn--light:hover { color: var(--berry); }
.hero .scroll-cue { color: var(--cream); }
.scroll-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; z-index: 3; }
.scroll-cue i { width: 2px; height: 36px; background: currentColor; transform-origin: top; animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.media { position: relative; }
.media > img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.media > .art { position: absolute; inset: 0; }
.media > .art svg { width: 100%; height: 100%; display: block; }
.sketch { position: absolute; display: flex; align-items: flex-start; gap: 4px; }
.sketch svg { width: 110px; height: 74px; overflow: visible; }
.draw path { fill: none; stroke: var(--berry); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Marquee ---------- */
.marquee { background: var(--rose-soft); color: var(--berry); border-block: 2px solid var(--berry); overflow: hidden; padding: 18px 0; transform: rotate(-2deg); margin: -20px -10px 0; position: relative; z-index: 5; }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__track span { font-family: var(--display); font-size: clamp(30px, 4vw, 60px); text-transform: uppercase; white-space: nowrap; line-height: 1; padding-right: .3em; }

/* ---------- Statement ---------- */
.statement { background: var(--cream); padding: clamp(110px, 16vw, 220px) var(--pad); text-align: center; display: grid; justify-items: center; }
.statement__big { max-width: 14ch; }
.statement__text { max-width: 900px; font-size: clamp(22px, 2.4vw, 38px); line-height: 1.25; font-weight: 500; margin: 48px 0; }
.reveal-words .word { opacity: .15; }

/* ---------- Social reel ---------- */
.statement__cta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: center; }
.social { padding: clamp(80px, 10vw, 140px) 0 clamp(70px, 8vw, 110px); background: var(--rose-soft); overflow: hidden; }
.social__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 0 var(--pad); margin-bottom: 44px; }
.social__head h2 { font-size: clamp(48px, 5vw, 120px); }
.sketch--social { position: relative; flex-direction: row-reverse; align-items: flex-end; transform: rotate(4deg); flex: none; }
.sketch--social svg { width: 76px; transform: scaleX(-1); }
.social__viewport { overflow: hidden; cursor: grab;
  /* hand horizontal gestures to the drag handler and leave vertical
     page scrolling to the browser — without this the browser claims the
     swipe and fires pointercancel, which is why the strip wouldn't move */
  touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.social__viewport.is-dragging { cursor: grabbing; }
.social__track { display: flex; gap: 20px; width: max-content; padding-left: var(--pad); will-change: transform; }
.social-card {
  position: relative; flex: 0 0 auto; width: clamp(210px, 21vw, 290px); aspect-ratio: 9 / 16;
  border-radius: 28px; overflow: hidden; background: var(--rose); color: var(--cream);
  box-shadow: 0 24px 50px rgba(110, 22, 51, .18);
}
.social-card video, .social-card img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.social-card::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(to bottom, transparent, rgba(43, 10, 21, .78)); pointer-events: none; }
.social-card__tag {
  position: absolute; top: 16px; left: 16px; z-index: 2; background: var(--cream); color: var(--berry);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; padding: 7px 13px; border-radius: 999px;
}
.social-card p { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; margin: 0; font-weight: 700; font-size: 16px; line-height: 1.25; }
.social__foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 40px var(--pad) 0; }
.social__foot p { margin: 0; font-size: 15px; opacity: .7; max-width: 46ch; }
.social__foot code { font-size: .92em; background: rgba(110, 22, 51, .1); padding: 2px 6px; border-radius: 6px; }
.catering__events { font-size: 16px; max-width: 46ch; margin: 0 0 28px; opacity: .85; }
.catering__events b { text-transform: uppercase; letter-spacing: .1em; font-size: 13px; }

/* ---------- Tub sequence (canvas) ---------- */
.seq { background: var(--cream); color: var(--berry); }
.seq__stage { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; }
.seq__sign { position: absolute; left: var(--pad); top: 96px; z-index: 4; display: flex; align-items: flex-end; gap: 8px; }
.seq__sign .hand { color: var(--berry); }
.seq__sign .draw path { stroke: var(--berry); }
.seq__sign svg { width: 70px; height: 56px; overflow: visible; }
.seq__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.seq__lines path { fill: none; stroke: var(--rose-soft); stroke-width: 34; stroke-linecap: round; }
.seq__product { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; }
.seq__canvas { width: min(50vh, 460px); aspect-ratio: 558 / 756; height: auto; max-width: 62vw; transform-origin: 50% 90%; will-change: transform; }
.seq__cards { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.seq-card {
  position: absolute; top: 50%; width: min(30vw, 400px); margin-top: calc(min(30vw, 400px) * -0.55);
  background: var(--rose-soft); color: var(--berry); border: 2px solid var(--berry); border-radius: 32px; padding: 30px;
  display: grid; gap: 14px; box-shadow: 0 24px 50px rgba(110, 22, 51, .14); opacity: 0;
}
.seq-card--right { right: var(--pad); }
.seq-card--left { left: var(--pad); }
.seq-card h3 { font-size: clamp(44px, 3.4vw, 80px); }
.seq-card p { margin: 0; font-weight: 500; font-size: 14px; }
.seq-card__icon { font-size: 40px; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: var(--cream); }
.seq__final { position: absolute; left: 0; right: 0; bottom: 9vh; z-index: 4; text-align: center; font-size: clamp(54px, 7vw, 140px); opacity: 0; padding: 0 var(--pad);line-height: 1; }
.seq__final em { font-style: italic; color: var(--gold); font-size:66px;display: block;}
.seq__progress { position: absolute; left: var(--pad); right: var(--pad); bottom: 22px; height: 3px; background: rgba(110, 22, 51, .15); border-radius: 3px; z-index: 4; overflow: hidden; }
.seq__progress i { display: block; height: 100%; background: var(--berry); transform-origin: left; transform: scaleX(0); }
/* reduced motion: static tub, cards in a grid */
.seq--static .seq__stage { height: auto; min-height: 0; padding: 140px var(--pad) 80px; display: grid; gap: 24px; }
.seq--static .seq__product, .seq--static .seq__cards, .seq--static .seq-card, .seq--static .seq__final, .seq--static .seq__sign { position: static; opacity: 1; margin: 0; width: auto; }
.seq--static .seq__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.seq--static .seq__lines, .seq--static .seq__progress { display: none; }

/* ---------- Flavors ---------- */
.flavors { --fbg: #FCE3EA; --fink: #6E1633; background: var(--fbg); color: var(--fink); transition: background-color .7s var(--ease), color .7s var(--ease); }
.flavors__pin { height: 100vh; height: 100svh; min-height: 640px; padding: 108px var(--pad) 40px; display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; }
.flavors__title { font-size: clamp(36px, 2.6vw, 76px); max-width: 18ch; }
.flavors__title em { font-style: normal; display: block; opacity: .55; }
.flavors__stage { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 48%); align-items: end; gap: 24px; min-height: 0; }
.flavors__nav { align-self: end; padding-bottom: 6px; }
.flavors__nav { list-style: none; margin: 0; padding: 0; display: grid; gap:0; }
.flavors__nav button { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; opacity: .4; transition: opacity .3s, transform .4s var(--ease); text-align: left; padding: 0; }
.flavors__nav button.is-active { opacity: 1; transform: translateX(12px); font-size: 13px; }
.flavors__nav button.is-active::before { content: '\25cf '; }
.flavors__visual { position: absolute; right: var(--pad); top: 54%; transform: translateY(-50%); width: 46%; height: min(76vh, 660px); display: grid; place-items: center; overflow: visible; }
.flavors__ring { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(42vh, 370px); max-width: 76%; aspect-ratio: 1; border-radius: 50%; border: 2px dashed currentColor; opacity: .25; }
.flavor-img { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
.flavor-img img { width: min(90vh, 760px); max-width: 100%; aspect-ratio: 1; height: auto; object-fit: contain; filter: drop-shadow(0 24px 32px rgba(110, 22, 51, .22)); }
.flavor-img.is-faloudeh img { width: min(70vh, 560px); max-width: 92%; }
.flavor-img.is-active { opacity: 1; }

.flavors__names { display: grid; margin-top: 0; max-width: 48%; }
.flavor-name { grid-area: 1 / 1; margin: 0; opacity: 0; }
.flavor-name h3 { margin: 0; font-size: clamp(30px, 3.2vw, 52px); line-height: 1.04; text-transform: uppercase; letter-spacing: .02em; }
.flavor-name p { margin: 14px 0 0; font-family: var(--body); font-size: 14px; line-height: 1.6; max-width: 42ch; opacity: .5; }
.flavor-name.is-active { opacity: 1; }
.flavor-copy__sub { display: block; font-size: .42em; letter-spacing: .14em; opacity: .6; }

.flavors__progress { height: 3px; background: color-mix(in srgb, currentColor 20%, transparent); border-radius: 3px; overflow: hidden; }
.flavors__hint { display: none; }
.flavors__progress i { display: block; height: 100%; background: currentColor; transform-origin: left; transform: scaleX(0); }

/* ---------- Catering (full-bleed 3D scene) ---------- */
.catering {
  position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh;
  padding: clamp(96px, 12vh, 160px) var(--pad) clamp(60px, 10vh, 120px);
  display: block; color: var(--cream); background: var(--ink); overflow: hidden;
}
.catering .scene { position: absolute; inset: 0; z-index: -1; border-radius: 0; aspect-ratio: auto; box-shadow: none; }
.scene { position: relative; overflow: hidden; background: #241017; perspective: 1500px; }
.scene__stage { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
/* a fixed 16:9 frame, scaled to cover the section, so every layer keeps its place */
.scene__frame { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: max(100%, 178vh); aspect-ratio: 16 / 9; }
.scene__layer { position: absolute; height: auto; will-change: transform; }
.scene__layer.is-bg       { left: -2%; top: -2%; width: 104%; height: 104%; object-fit: cover; }
.scene__layer.is-arch     { left: 56%; top: 29%; width: 34%; }
.scene__layer.is-couple   { left: 67.5%; top: 43%; width: 12.5%; }
.scene__layer.is-lanterns { left: -2%; top: -3%; width: 104%; }
.scene__layer.is-canopy   { left: -3%; top: -4%; width: 106%; }
.scene__layer.is-cart     { left: 16%; top: 27%; width: 46%; }
.scene__scrim { position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(43, 10, 21, 0.25) 0%, rgba(43, 10, 21, .25) 30%, rgba(43, 10, 21, .1) 72%, rgba(43, 10, 21, .25) 100%),
    linear-gradient(to right, rgba(43, 10, 21, 0.88) 0%, rgba(43, 10, 21, .7) 7%, rgba(43, 10, 21, 0.2) 50%, rgba(43, 10, 21, .02) 51%, transparent 39%)
}
.catering__copy { position: relative; max-width: min(54ch, 52%); display: grid; gap: 20px; justify-items: start; text-shadow: 0 2px 20px rgba(43, 10, 21, .5); }
.catering__copy h2 { font-size: clamp(40px, 4.6vw, 92px); max-width: 16ch; }
.catering__lede { font-size: clamp(18px, 1.5vw, 23px); max-width: 48ch; margin: 0; }
.checklist { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 10px; }
.checklist li { display: flex; gap: 12px; align-items: center; font-weight: 700; font-size: 17px; }
.checklist li::before { content: '✓'; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--cream); color: var(--berry); display: grid; place-items: center; font-size: 13px; }
.catering__events { font-size: 15px; max-width: 52ch; margin: 0; opacity: .85; }
.catering__events b { text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }
.catering .link-arrow { color: var(--cream); }

/* ---------- Story (stacked clips) ---------- */
.story { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; padding: clamp(90px, 12vw, 170px) var(--pad); background: var(--rose-soft); overflow: hidden;padding-top:10em; }
.story__stack { position: relative; height: min(76vh, 680px); }
.story-clip {
  position: absolute; margin: 0; width: 46%; aspect-ratio: 9 / 16; border-radius: 6px; overflow: hidden;
  background: var(--rose); border: 12px solid var(--cream); box-shadow: 0 26px 50px rgba(110, 22, 51, .22);
}
.story-clip video { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-clip--a { left: -8%; top: 12%; transform: rotate(-7deg); z-index: 1; }
.story-clip--b { left: 20%; top: 26%; transform: rotate(4deg); z-index: 2; }
.story-clip--c { left: 46%; top: 0; transform: rotate(-2deg); z-index: 3; width: 50%; }
.mute {
  position: absolute; right: 12px; bottom: 12px; z-index: 4; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(43, 10, 21, .5); backdrop-filter: blur(6px); display: grid; place-items: center; transition: background .3s;
}
.mute:hover { background: rgba(43, 10, 21, .75); }
.mute svg { width: 20px; height: 20px; fill: #FFFDF8; stroke: #FFFDF8; stroke-width: 1.8; stroke-linecap: round; }
.mute .mute__wave, .mute .mute__slash { fill: none; }
.mute .mute__wave { opacity: 0; }
.mute[aria-pressed="true"] .mute__wave { opacity: 1; }
.mute[aria-pressed="true"] .mute__slash { opacity: 0; }
.story__copy { position: relative; display: grid; gap: 24px; justify-items: start; }
.story__lead { font-family: var(--sub); text-transform: none; font-size: clamp(26px, 2.8vw, 46px); max-width: 20ch; }
.story__copy > p { margin: 0; font-size: 18px; max-width: 44ch; }
.story__cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.sketch--story { position: relative; align-self: end; justify-self: end; transform: rotate(-4deg); margin-top: 20px; }
.sketch--story svg { width: 72px; }

/* ---------- Booking form ---------- */
.book { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 6vw, 90px); padding: clamp(90px, 12vw, 160px) var(--pad); background: var(--rose-soft); color: var(--berry); }
.book__intro h2 { font-size: clamp(50px, 5vw, 110px); margin-bottom: 22px; }
.book__lede { font-size: 19px; max-width: 34ch; margin: 0 0 24px; }
.btn--call { background: var(--berry); color: var(--cream); border-color: var(--berry); }
.btn--call:hover { color: var(--berry); }
.btn--call::before { background: var(--gold); }
.book__form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-content: start; }
.field { display: grid; gap: 7px; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; color: var(--berry); background: var(--cream);
  border: 2px solid rgba(110, 22, 51, .18); border-radius: 16px; padding: 14px 16px; width: 100%; transition: border-color .25s, box-shadow .25s;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(110, 22, 51, .4); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--berry); box-shadow: 0 0 0 4px rgba(110, 22, 51, .15); }
.field input:user-invalid { border-color: #B3213C; }
.field .error { font-size: 13px; font-weight: 700; color: #7C0B25; }
.book__actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.book__note { margin: 0; font-size: 14px; font-weight: 500; }
.book__note.is-sent { font-weight: 700; }
.book__note.is-error { font-weight: 700; color: #7C0B25; }
.book__note a { text-decoration: underline; }
.book__form button[disabled] { opacity: .6; pointer-events: none; }

/* ---------- Visit ---------- */
.visit { background: var(--cream); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: clamp(90px, 12vw, 160px) var(--pad); align-items: end; }
.visit__info { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; }
.visit__info a { font-size: 12px; font-weight: 500; line-height: 1.35; display: block; border-top: 2px solid var(--berry); padding-top: 14px; transition: color .3s; }
.visit__info a:hover { color: #C0385E; }
.visit__info small { display: block; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; opacity: .6; margin-bottom: 6px; }

/* ---------- Footer ---------- */
.footer { background: var(--berry); color: var(--rose); padding: 48px var(--pad) 24px; overflow: hidden; }
.footer__top { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-weight: 500; }
.footer__top p { margin: 0; font-family: var(--hand); font-size: 30px; color: var(--saffron); }
.footer__top nav { display: flex; gap: 24px; flex-wrap: wrap; }
.footer__word { display: flex; justify-content: center; margin: 40px 0 10px; overflow: hidden; }
.footer__word img { width: min(86vw, 900px); height: auto; display: block; }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; opacity: .85; border-top: 1px solid rgba(246, 179, 196, .3); padding-top: 18px; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .flavors__pin { height: auto; min-height: 0; padding: 88px var(--pad) 56px; gap: 20px; }
  .flavors__names { max-width: 100%; }
  .flavors__stage { grid-template-columns: 1fr; grid-template-rows: auto auto; align-items: start; gap: 18px; }
  .flavors__nav { display: flex; gap: 6px 16px; flex-wrap: wrap; align-self: auto; padding-bottom: 0; order: 2; }
  .flavors__nav button { font-size: 11px; }
  .flavors__nav button.is-active { transform: none; }
  .flavors__visual { position: relative; top: auto; right: auto; transform: none; height: auto; min-height: 0; aspect-ratio: 1 / 1; max-width: 420px; width: 100%; margin: 0 auto; order: 1; }
  .flavor-img img, .flavor-img.is-faloudeh img { width: 100%; max-width: 100%; }
  .flavors__ring { width: 74%; max-width: 74%; }
  /* horizontal gestures come to the swipe handler, vertical ones still scroll */
  .flavors__pin { touch-action: pan-y; }
  .flavors__visual { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
  .flavors__visual img { pointer-events: none; }
  .flavors__hint { display: flex; align-items: center; justify-content: center; gap: 10px; order: 2;
    margin: 2px 0 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; opacity: .45; }
  .flavors__hint span { flex: 0 0 22px; height: 1px; background: currentColor; opacity: .6; }
  .flavors__nav { order: 3; }
  .flavors__progress { display: block; order: 4; margin-top: 4px; }
  .flavors__progress i { transition: transform .5s var(--ease); }
  .flavor-name h3 { font-size: 30px; }
  .visit, .story, .book { grid-template-columns: 1fr; }
  .story__stack { height: 62vh; }
}
@media (max-width: 760px) {
  .nav, .header > .btn { display: none; }
  h2 { font-size: 50px; }
  .burger { display: block; z-index: 60; }
  .hero__copy { bottom: 9vh; }
  .hero__panel { max-width: none; gap: 16px; }
  .hero__lede { font-size: 16px; }
  .scroll-cue { display: none; }
  .header { grid-template-columns: auto 1fr auto; }
  .header__social a { width: 36px; height: 36px; }
  .header__end { display: none; }
  .logo { justify-self: center; }
  .sketch--social, .sketch--story { display: none; }
  .story__stack { height: 58vh; margin-bottom: 20px; }
  .story-clip { width: 52%; border-width: 8px; }
  .story-clip--c { width: 56%; }
  .story__lead { font-size: 26px; }
  .book__form { grid-template-columns: 1fr; }
  .social-card { width: 62vw; }
  .social__foot { padding-top: 28px; }
  .cakes__arrows { display: none; }
  .badge-spin { width: 110px; height: 110px; right: -6px; top: -26px; }
  .flavors__nav {display: none;}
  /* the full-bleed scene would zoom far too much on a phone, so it becomes a
     banner above the copy and the whole composition stays visible */
  .catering { min-height: 0; padding: 86px 0 64px; background: var(--cream); color: var(--berry); display: grid; gap: 26px; }
  .catering .scene { position: relative; inset: auto; z-index: 0; aspect-ratio: 16 / 10; }
  .scene__frame { width: 100%; left: 0; top: 0; translate: none; }
  .scene__scrim { background: linear-gradient(to bottom, rgba(43, 10, 21, .25) 0%, transparent 40%); }
  .catering__copy { text-shadow: none; max-width: none; padding: 0 var(--pad); gap: 16px; }
  .catering__copy h2 { max-width: none; font-size: 40px; }
  .catering__lede { font-size: 17px; }
  .checklist li { font-size: 15px; }
  .checklist li::before { background: var(--berry); color: var(--cream); }
  .catering .link-arrow { color: var(--berry); }
  .catering .btn--light { background: var(--berry); color: var(--cream); border-color: var(--berry); }
  .catering .btn--light:hover { color: var(--berry); }
  .catering__copy h2 { max-width: none; font-size: 40px; }
  .catering__lede { font-size: 17px; }
  .checklist li { font-size: 15px; }
  .scene__scrim { background: linear-gradient(to bottom, rgba(43, 10, 21, .78) 0%, rgba(43, 10, 21, .62) 55%, rgba(43, 10, 21, .72) 100%); }
  .badge-spin text { font-size: 15px; }
  .visit__info { grid-template-columns: 1fr; }
  .seq__sign { top: 80px; }
  .seq__sign .hand--big { font-size: 34px; }
  /* The scoops are drawn inside a frame that is 69% content and 31% transparent
     margin, and .seq__stage clips, so the canvas can run wider than the screen
     without anything visible being cut. `max-width` has to be released here —
     the base rule's 62vw was what actually capped it. Peak zoom is 1.12x, so
     120vw lands the widest frame at about 93% of the screen. */
  .seq__product {
    /* widened past the screen so the oversized canvas is still a centred grid
       item — grid "safe" alignment silently falls back to start when an item
       overflows its container, which was shunting the scoops 39px right */
    left: -12vw; right: -12vw;
    place-items: start center; padding-top: 10vh;
  }
  .seq__canvas { width: min(62vh, 120vw); max-width: none; }
  .seq-card { left: 16px; right: 16px; top: auto; bottom: 7vh; width: auto; margin: 0; padding: 22px; gap: 8px; }
  .seq-card h3 { font-size: 44px; }
  .seq-card h3 br { display: none; }
  .seq-card p { font-size: 15px; }
  .seq-card__icon { display: none; }
  .seq__final { bottom: 12vh; font-size: 50px; }
  .seq__final em { font-size: 42px; }
  .scene {display:none;}
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============ Sticky booking bar (phones / small tablets) ============
   Hidden above 1000px. It slides in once the hero is behind you and
   slides back out while the booking form itself is on screen. */
.cta-bar { display: none; }

@media (max-width: 1000px) {
  .cta-bar {
    display: flex; gap: 10px; align-items: center;
    position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
    padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--cream) 88%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid color-mix(in srgb, var(--berry) 14%, transparent);
    transform: translateY(110%); will-change: transform;
    transition: transform .45s var(--ease);
  }
  .cta-bar.is-in { transform: translateY(0); }

  .cta-bar__btn {
    flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
    height: 52px; border-radius: 999px;
    background: var(--berry); color: var(--cream);
    font-family: var(--body); font-weight: 700; font-size: 13px;
    text-transform: uppercase; letter-spacing: .12em;
  }
  .cta-bar__call {
    flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center;
    color: var(--berry); border: 1.5px solid color-mix(in srgb, var(--berry) 30%, transparent);
  }
  .cta-bar__btn:active { transform: scale(.98); }
  .cta-bar__call:active { background: color-mix(in srgb, var(--berry) 10%, transparent); }

  /* keep the bar from sitting on top of the last thing on the page */
  .footer__bottom { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
}

@media (max-width: 1000px) and (prefers-reduced-motion: reduce) {
  .cta-bar { transition: none; }
}

/* ============ Mobile headings: one size for every H2 ============
   `h2 { font-size: 50px }` in the block above was being overridden by the
   class rules each section carries (.hero__title, .social__head h2,
   .catering__copy h2, .story__lead and so on — a class beats a bare tag).
   These restate them at the same or higher specificity, last in the file,
   so every heading lands on 50px. Change the one value to retune them all. */
@media (max-width: 760px) {
  h2,
  .hero__title,                /* both hero panels, so they match as they swap */
  .social__head h2,
  .catering__copy h2,
  .book__intro h2,
  .statement__big,
  .story__lead,
  .seq__final,
  .flavors__title,              /* "What's your flavor?" — an h3, sized to match */
  .flavor-name h2,
  .flavor-name h3 {
    font-size: 50px;
  }
  .hero__title { font-size: 60px; }
}


/* ============ Header over the hero video ============
   Until the page scrolls past 40px there is no bar behind the header, so it
   sits straight on the video and the berry mark and links disappear against
   the darker frames. Everything is cream to start with, then swaps to berry
   once .is-solid puts the cream panel behind it. The two logo files are
   stacked and cross-faded, so the mark changes colour with the rest. */
.header { color: var(--cream); }
.header .nav a,
.header__social a { color: inherit; }

/* a touch of shadow so cream still reads on a pale frame of the video */
.header:not(.is-solid) .nav a,
.header:not(.is-solid) .logo__mark--light {
  filter: drop-shadow(0 1px 10px rgba(43, 10, 21, .45));
}
.header:not(.is-solid) .header__social a {
  box-shadow: 0 1px 10px rgba(43, 10, 21, .35);
}

.logo__mark { height: 40px; width: auto; display: block; transition: opacity .45s var(--ease); }
.logo__mark--dark { position: absolute; left: 0; top: 50%; translate: 0 -50%; opacity: 0; }

.header.is-solid { color: var(--berry); }
.header.is-solid .logo__mark--light { opacity: 0; }
.header.is-solid .logo__mark--dark  { opacity: 1; }

/* the burger keeps its berry pill, which reads on both states */
@media (max-width: 760px) {
  .header:not(.is-solid) .logo__mark--light { filter: drop-shadow(0 1px 12px rgba(43, 10, 21, .5)); }
}


/* the booking call button carries a phone icon instead of printed digits */
.btn--call span { display: inline-flex; align-items: center; gap: 10px; }
.btn--call svg { flex: 0 0 auto; }


/* ============ Header on phones and tablets ============
   No colour swap here. The bar carries its cream panel from the first pixel
   of scroll, so the mark and the links stay berry throughout and never have
   to fight the video behind them. The cream logo file is simply not rendered. */
@media (max-width: 1000px) {
  .header,
  .header.is-solid {
    color: var(--berry);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  /* .logo img {display:block} earlier in the file is (0,1,1) and outranks a
     bare .logo__mark--light, so these have to be scoped to beat it */
  .logo img.logo__mark--light { display: none; }
  .logo img.logo__mark--dark  { display: block; position: static; translate: none; opacity: 1; }

  /* the shadows that kept cream legible over the video are not needed now */
  .header:not(.is-solid) .nav a,
  .header:not(.is-solid) .logo__mark--light,
  .header:not(.is-solid) .logo__mark--dark { filter: none; }
  .header:not(.is-solid) .header__social a { box-shadow: none; }
}


/* ============ Header: bare social icons ============
   The circles are gone — no ring, no fill, no lift. Just the glyph, and it
   changes colour on hover. Without a background the icon has to carry its own
   legibility over a pale frame of the hero video, so the shadow that used to
   sit on the circle moves onto the glyph itself (and drops on mobile, where
   the header always has its cream panel behind it). */
.header__social { gap: 18px; }
.header__social a {
  width: auto; height: auto; padding: 4px;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  display: grid; place-items: center;
  transition: color .3s var(--ease);
}
.header__social a:hover,
.header__social a:focus-visible {
  background: none; color: var(--gold); transform: none;
}
.header__social svg { width: 22px; height: 22px; fill: currentColor; }

.header:not(.is-solid) .header__social a { box-shadow: none; }
.header:not(.is-solid) .header__social svg { filter: drop-shadow(0 1px 8px rgba(43, 10, 21, .5)); }


/* ============ Header: logo dead centre at every width ============
   Grid could not do this. `1fr` is really `minmax(auto, 1fr)`, so a side
   group wider than its share pushes the column out: at iPad portrait the nav
   plus Book button needed 291px against the social icons' 240px, and the
   middle column — and the logo in it — slid 25px left of centre. Any layout
   that sizes the logo's column from its neighbours has that problem whenever
   the neighbours differ, which is always.

   So the logo leaves the flow and pins itself to the page's centre line,
   where nothing beside it can move it. The bar becomes a simple flex row with
   the social icons at one end and the nav (or the burger) at the other, and
   they are free to be whatever width they like. */
.header { display: flex; align-items: center; justify-content: space-between; }
.logo {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  justify-self: auto; margin: 0;
}
.header__social { justify-self: auto; }
.header__end { justify-self: auto; }
.burger { justify-self: auto; }

@media (max-width: 760px) {
  .header__social a { width: auto; height: auto; }
}

/* Now that the logo holds the centre line, the nav has to get out of its way
   rather than push it aside. The desktop nav + Book button need about 400px;
   with a 128px logo pinned centre, the two only clear each other past roughly
   1100px. Below that the burger takes over — which also lines the header up
   with the rest of the site, where everything else switches at 1000px. */
@media (min-width: 761px) and (max-width: 1100px) {
  .nav, .header__end { display: none; }
  .burger { display: block; }
}

/* 320px phones: the logo at 40px tall is 128px wide, which leaves only 2px
   between it and the social icons. A couple of points shorter and it breathes. */
@media (max-width: 360px) {
  .logo__mark { height: 32px; }
  .header__social { gap: 14px; }
}