/* ============ Shared components ============ */
.mobile-only { display: none; }
@media (max-width: 1120px) { .nav.open .mobile-only { display: block; } }

/* ---- Before / After slider ---- */
.ba { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--sand); user-select: none; --pos: 50%; }
.ba > img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: var(--ar, 16/10); }
.ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-before img { width: 100%; height: 100%; object-fit: cover; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--white); pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,.04); }
.ba-handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 54px; height: 54px; border-radius: 50%; background: var(--white); display: grid; place-items: center; color: var(--leaf-deep); font-size: 1.3rem; box-shadow: var(--shadow-sm); animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge { 0%,60%,100% { transform: translate(-50%,-50%); } 70% { transform: translate(-62%,-50%); } 85% { transform: translate(-38%,-50%); } }
.ba:hover .ba-handle span { animation: none; }
.ba input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba-label { position: absolute; top: 16px; padding: 6px 14px; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; pointer-events: none; }
.ba-label.l { left: 16px; background: rgba(255,255,255,.92); color: var(--ink); }
.ba-label.r { right: 16px; background: var(--leaf-deep); color: var(--cream); }

/* ---- Quotes ---- */
.quote-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.quote { background: var(--white); border-radius: var(--r-md); padding: 40px 32px 30px; border: 1px solid var(--line); position: relative; display: flex; flex-direction: column; gap: 24px; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.quote:nth-child(2) { background: var(--blush); transform: translateY(24px); }
.quote:nth-child(3) { background: var(--sage-soft); }
.quote:hover { transform: translateY(-8px) rotate(-.6deg); box-shadow: var(--shadow); }
.q-mark { position: absolute; top: -26px; left: 26px; font-family: var(--serif); font-size: 6.5rem; line-height: 1; color: var(--lime); }
.quote blockquote { font-family: var(--serif); font-size: 1.5rem; line-height: 1.3; font-weight: 500; flex: 1; }
.quote figcaption { display: flex; align-items: center; gap: 12px; font-size: .95rem; }
.quote figcaption small { display: block; color: var(--muted); font-size: .84rem; }
.avatar { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--c, var(--leaf)); color: var(--white); display: grid; place-items: center; font-family: var(--serif); font-size: 1.4rem; font-weight: 600; }
@media (max-width: 900px) { .quote-row { grid-template-columns: 1fr; } .quote:nth-child(2) { transform: none; } }

/* ---- Inner-page hero ---- */
.page-hero {
  background:
    radial-gradient(55% 60% at 92% 0%, rgba(255,210,186,.9), transparent 70%),
    radial-gradient(40% 55% at 0% 100%, rgba(214,240,196,.8), transparent 70%),
    var(--cream);
}
.page-hero .lede { animation: fadeUp 1s var(--ease) .35s both; }
.page-hero .eyebrow { animation: fadeUp 1s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.page-hero .deco { position: absolute; pointer-events: none; }

/* ---- Forms ---- */
.form { display: grid; gap: 18px; }
.field label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: 8px; color: var(--leaf-deep); letter-spacing: .02em; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; padding: 15px 18px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--cream);
  transition: border-color .3s, box-shadow .3s, background .3s; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--lime); background: var(--white); box-shadow: 0 0 0 5px rgba(255,165,122,.22); }
.field textarea { min-height: 120px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

/* ---- FAQ ---- */
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 4px 28px; transition: box-shadow .4s, background .4s; }
.faq details[open] { box-shadow: var(--shadow-sm); background: var(--blush); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 0; font-family: var(--serif); font-size: 1.5rem; font-weight: 600; line-height: 1.2; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); font-weight: 400; width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--sage-soft); color: var(--leaf-deep); transition: transform .4s var(--ease), background .3s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--lime); }
.faq details p { padding: 0 0 24px; color: var(--muted); }

/* ---- Chips (filters / choices) ---- */
.chip { padding: 12px 22px; border-radius: 999px; background: var(--white); border: 1.5px solid var(--line); font-weight: 500; font-size: .96rem; transition: all .35s var(--ease); }
.chip:hover { border-color: var(--lime); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.chip[aria-pressed="true"] { background: var(--leaf-deep); color: var(--cream); border-color: var(--leaf-deep); transform: scale(1.04); }

/* ============ Smoothie jar scroll meter ============ */
.jar {
  position: fixed; right: 18px; top: 50%; z-index: 60; width: 58px; transform: translateY(-50%);
  cursor: pointer; filter: drop-shadow(0 0 1.5px rgba(255,255,255,.95)) drop-shadow(0 12px 18px rgba(80,60,45,.2)); transition: transform .5s var(--ease);
}
.jar:hover { transform: translateY(-50%) scale(1.07) rotate(-3deg); }
.jar svg { width: 100%; height: auto; overflow: visible; display: block; }
.jar * { transform-box: fill-box; }
.jar .j-wave { animation: jarWave 2.6s linear infinite; }
@keyframes jarWave { from { transform: translateX(0); } to { transform: translateX(-40px); } }
.jar .j-bubble { animation: bubble 3s ease-in infinite; opacity: 0; }
.jar .j-bubble:nth-of-type(2) { animation-delay: -1s; }
.jar .j-bubble:nth-of-type(3) { animation-delay: -2s; }
@keyframes bubble { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: .8; } 100% { transform: translateY(-60px); opacity: 0; } }
.jar .j-straw { transform-origin: 50% 100%; transition: transform .6s var(--ease); }
.jar.full .j-straw { animation: strawWiggle 1.2s var(--ease) 2; }
@keyframes strawWiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(6deg); } }
.jar-tip {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translate(8px, -50%); opacity: 0; pointer-events: none;
  background: var(--leaf-deep); color: var(--cream); font-size: .8rem; font-weight: 600; white-space: nowrap; padding: 8px 14px; border-radius: 999px;
  transition: opacity .3s, transform .4s var(--ease);
}
.jar-tip::after { content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; background: inherit; transform: translateY(-50%) rotate(45deg); border-radius: 2px; }
.jar:hover .jar-tip, .jar.full .jar-tip { opacity: 1; transform: translate(0, -50%); }
.jar-hearts { position: absolute; left: 50%; top: 0; pointer-events: none; }
.jar-hearts i { position: absolute; font-style: normal; font-size: 14px; animation: heartUp 1.6s var(--ease) forwards; }
@keyframes heartUp { from { transform: translate(0, 0) scale(.4); opacity: 1; } to { transform: translate(var(--dx), -70px) scale(1.1); opacity: 0; } }
@media (max-width: 900px), (pointer: coarse) {
  .jar { width: 38px; top: auto; bottom: 16px; right: 12px; transform: none; }
  .jar:hover { transform: none; }
  .jar-tip { display: none; }
}

/* ---- Before/after box with Front / Side switch ---- */
.ba-box { width: 100%; max-width: 480px; justify-self: center; }
.ba-views { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.ba-view { padding: 9px 18px; border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--muted); transition: background .3s, color .3s; }
.ba-view[aria-pressed="true"] { background: var(--leaf-deep); color: var(--cream); }
.ba-box .ba > img, .ba-box .ba-before img { transition: opacity .35s; }
.ba-box.swapping .ba > img, .ba-box.swapping .ba-before img { opacity: 0; }
.ba-hint { margin-top: 14px; text-align: center; font-family: var(--hand); font-size: 1.35rem; color: var(--rose); }
.ba-label { font-size: .8rem; padding: 7px 16px; }
.ba-label.l::before { content: "← "; }
.ba-label.r::after { content: " →"; }

/* ---- Before → After duo (two photos, same person) ---- */
.duo { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; max-width: 540px; width: 100%; justify-self: center; }
.duo-card { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 9/16; background: var(--sand); box-shadow: var(--shadow); border: 6px solid var(--white); transition: transform .7s var(--ease); }
.duo-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transition: transform 1.2s var(--ease); }
.duo-card.before { transform: rotate(-3deg) translateY(14px); }
.duo-card.after { transform: rotate(2.5deg); }
.duo:hover .duo-card.before { transform: rotate(-1deg) translateY(8px); }
.duo:hover .duo-card.after { transform: rotate(0) scale(1.03); }
.duo-card:hover img { transform: scale(1.05); }
.duo-card figcaption { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 7px 18px; border-radius: 999px; font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; background: rgba(255,255,255,.94); color: var(--ink); white-space: nowrap; }
.duo-card.after figcaption { background: var(--leaf-deep); color: var(--cream); }
.duo-arrow { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--white); font-size: 1.4rem; font-weight: 700; box-shadow: var(--shadow-sm); z-index: 2; animation: nudgeR 2.4s var(--ease) infinite; }
@keyframes nudgeR { 0%,60%,100% { transform: translateX(0); } 75% { transform: translateX(6px); } }
.duo-note { grid-column: 1 / -1; text-align: center; font-family: var(--hand); font-size: 1.3rem; color: var(--rose); margin-top: 10px; }
@media (max-width: 520px) { .duo { gap: 8px; } .duo-arrow { width: 40px; height: 40px; font-size: 1.1rem; } }