/* =========================================================
   Aura Mind — Home: logo, "What Aura Mind deals with" and the two
   big doors; location + WhatsApp (left) and reviews (right) beside them.
   ========================================================= */
body.home { background: var(--white); }
.home-stage { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 1.9vh, 28px); padding: clamp(12px, 2.2vh, 32px) 16px clamp(8px, 1.4vh, 16px); overflow: hidden; }

/* Two worlds meeting in the middle: pale blue (left) · white · cream gold (right) */
.home-bg { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(60% 70% at 18% 72%, rgba(169, 205, 227, .45), transparent 70%),
  radial-gradient(60% 70% at 82% 72%, rgba(230, 204, 122, .38), transparent 70%),
  linear-gradient(90deg, #E9F2F9 0%, #F5F9FC 40%, #FFFFFF 50%, #FEFAEE 60%, var(--spirit-cream) 100%); }
.home-bg::after { content: ""; position: absolute; inset: 0 0 0 50%; opacity: .3; background: url("../assets/brand/pattern-gold.svg") 0 0 / 96px 96px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); }

/* ── Brand block ── */
.home-brand { display: grid; justify-items: center; gap: clamp(4px, .9vh, 10px); text-align: center; }
.home-logo { width: min(400px, 80vw, 34svh); height: auto; }
.home-slogan { display: flex; align-items: center; gap: .9rem; margin: 0; font-family: var(--font-head); font-style: italic; font-weight: 600; font-size: clamp(1.15rem, 1.2vw + .8rem, 1.6rem); line-height: 1.3; color: var(--brand-navy); letter-spacing: .01em; }
.home-slogan::before, .home-slogan::after { content: ""; width: clamp(22px, 5vw, 56px); height: 1px; background: linear-gradient(90deg, transparent, var(--brand-gold)); }
.home-slogan::after { transform: scaleX(-1); }
.home-center { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2vh, 26px); }
.home-deal { display: grid; justify-items: center; gap: clamp(2px, .5vh, 6px); text-align: center; }
.home-deal-title { margin: 0; font-size: clamp(1.75rem, 1.6vw + 1.1rem, 2.6rem); line-height: 1.1; color: var(--brand-navy); }
.home-tagline { max-width: 52ch; margin: 0; font-family: var(--font-head); font-weight: 600; font-size: clamp(1.15rem, .9vw + .9rem, 1.55rem); line-height: 1.32; color: #26324A; }
.home-tagline .t-child, .home-tagline .t-spirit { white-space: nowrap; font-weight: 700; }
.home-tagline .t-open { white-space: nowrap; font-style: italic; color: var(--muted); }
.home-tagline .t-child { color: var(--brand-navy); }
.home-tagline .t-spirit { color: var(--spirit-gold-ink); }

/* ── Doors ── */
.doors { display: flex; justify-content: center; align-items: flex-end; gap: clamp(16px, 6vw, 84px); width: 100%; }
.door { --w: min(27vw, 330px, calc((96svh - 480px) * .625)); --arch-v: 31.25%; display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2vh, 18px); text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; outline: none; }
.door-frame { position: relative; width: var(--w); aspect-ratio: 5 / 8; perspective: 900px; }
.door-arch { position: absolute; inset: 0; overflow: hidden; perspective: 900px; }
.door--child .door-arch, .door--child .door-trim { border-radius: 50% 50% 0 0 / var(--arch-v) var(--arch-v) 0 0; }
.door--spirit .door-arch, .door--spirit .door-trim { clip-path: polygon(0% 100%,0% 40%,0.22% 36.62%,0.85% 33.55%,1.86% 30.76%,3.22% 28.24%,4.9% 25.95%,6.86% 23.88%,9.07% 22%,11.49% 20.28%,14.1% 18.7%,16.87% 17.24%,19.75% 15.88%,22.72% 14.58%,25.74% 13.32%,28.79% 12.08%,31.82% 10.84%,34.81% 9.57%,37.73% 8.25%,40.53% 6.85%,43.19% 5.35%,45.68% 3.73%,47.96% 1.95%,50% 0%,52.04% 1.95%,54.32% 3.73%,56.81% 5.35%,59.47% 6.85%,62.27% 8.25%,65.19% 9.57%,68.18% 10.84%,71.21% 12.08%,74.26% 13.32%,77.28% 14.58%,80.25% 15.88%,83.13% 17.24%,85.9% 18.7%,88.51% 20.28%,90.93% 22%,93.14% 23.88%,95.1% 25.95%,96.78% 28.24%,98.14% 30.76%,99.15% 33.55%,99.78% 36.62%,100% 40%,100% 100%); }
.door-trim { position: absolute; inset: -9px -9px 0 -9px; }
.door--child .door-trim { background: linear-gradient(180deg, #CFE3F1, var(--child-light) 40%, #7FA9CF); box-shadow: 0 30px 60px -20px rgba(19, 37, 79, .45); }
.door--spirit .door-trim { background: linear-gradient(180deg, #F6E7B8, var(--spirit-gold) 38%, var(--spirit-deep-gold)); }

.door-glow { position: absolute; inset: -16% -26% -6%; z-index: -1; border-radius: 50%; opacity: .6; animation: am-breathe 4.2s ease-in-out infinite alternate; }
.door--child .door-glow { background: radial-gradient(50% 48% at 50% 46%, rgba(165, 198, 228, .75), transparent 72%); }
.door--spirit .door-glow { background: radial-gradient(50% 48% at 50% 46%, rgba(230, 204, 122, .7), transparent 72%); animation-delay: -2.1s; }
.door-frame::after { content: ""; position: absolute; left: -12%; right: -12%; bottom: -14px; height: 26px; z-index: -1; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(19, 37, 79, .22), transparent 70%); }
.door--spirit .door-frame::after { background: radial-gradient(50% 50% at 50% 50%, rgba(78, 59, 18, .22), transparent 70%); }

/* ── Behind the Psychology door: a pastel world with 3D butterflies ── */
.door-inside { position: absolute; inset: 0; container-type: size; overflow: hidden; }
.door-inside--child { background: linear-gradient(170deg, #C9E2F6 0%, #D9CCF2 50%, #F7CFDC 100%); perspective: 320px; }
.orb { position: absolute; border-radius: 50%; animation: am-orb 9s ease-in-out infinite alternate; animation-play-state: paused; }
.o1 { width: 70cqw; height: 70cqw; left: -20cqw; top: 10cqh; background: radial-gradient(closest-side, rgba(169, 205, 227, .9), transparent); }
.o2 { width: 60cqw; height: 60cqw; right: -18cqw; top: 38cqh; background: radial-gradient(closest-side, rgba(242, 196, 206, .9), transparent); animation-delay: -3s; }
.o3 { width: 50cqw; height: 50cqw; left: 20cqw; bottom: -10cqh; background: radial-gradient(closest-side, rgba(205, 191, 227, .95), transparent); animation-delay: -5s; }
.o4 { width: 36cqw; height: 36cqw; left: 40cqw; top: 6cqh; background: radial-gradient(closest-side, rgba(251, 227, 166, .9), transparent); animation-delay: -7s; }
@keyframes am-orb { from { transform: translate(0, 0) scale(1); } to { transform: translate(8cqw, -6cqh) scale(1.12); } }

.bfly { --wing: linear-gradient(160deg, #3F88D6, #A98BE0); position: absolute; width: 42px; height: 36px; transform-style: preserve-3d; pointer-events: none; }
.bfly::after { content: ""; position: absolute; left: 50%; top: 24%; width: 2.5px; height: 56%; margin-left: -1.25px; border-radius: 2px; background: #3A4763; transform: translateZ(1px); }
.bfly i { position: absolute; top: 0; width: 50%; height: 100%; background: var(--wing); -webkit-mask: var(--mask) center / 100% 100% no-repeat; mask: var(--mask) center / 100% 100% no-repeat; }
.bfly .wl { left: 0; transform-origin: 100% 50%; --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 80'%3E%3Cpath d='M50 36C40 8 12-2 4 12C-2 24 12 38 50 40ZM50 42C28 44 12 54 14 68C16 80 36 76 50 46Z'/%3E%3C/svg%3E"); animation: am-flap-l .3s ease-in-out infinite alternate; }
.bfly .wr { right: 0; transform-origin: 0% 50%; --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 80'%3E%3Cpath d='M0 36C10 8 38-2 46 12C52 24 38 38 0 40ZM0 42C22 44 38 54 36 68C34 80 14 76 0 46Z'/%3E%3C/svg%3E"); animation: am-flap-r .3s ease-in-out infinite alternate; }
@keyframes am-flap-l { from { transform: rotateY(0deg); } to { transform: rotateY(72deg); } }
@keyframes am-flap-r { from { transform: rotateY(0deg); } to { transform: rotateY(-72deg); } }
.door-inside .bfly, .door-inside .bfly i { animation-play-state: paused; }
.door-inside .f1 { left: 18%; top: 62%; animation: am-fly-a 9s ease-in-out infinite; }
.door-inside .f2 { --wing: linear-gradient(160deg, #EC6F96, #F9B27D); left: 58%; top: 40%; width: 34px; height: 29px; animation: am-fly-b 11s ease-in-out -3s infinite; }
.door-inside .f3 { --wing: linear-gradient(160deg, #36B894, #5A97E0); left: 30%; top: 24%; width: 32px; height: 27px; animation: am-fly-c 10s ease-in-out -6s infinite; }
.door-inside .f4 { --wing: linear-gradient(160deg, #F2BC2A, #EC6F96); left: 64%; top: 72%; width: 38px; height: 32px; animation: am-fly-a 12s ease-in-out -7s infinite reverse; }
.door-inside .f5 { --wing: linear-gradient(160deg, #8C6BE0, #4FA3E8); left: 42%; top: 50%; width: 30px; height: 26px; animation: am-fly-b 8s ease-in-out -2s infinite reverse; }
.door-inside .f2 i, .door-inside .f5 i { animation-duration: .24s; }
.door-inside .f3 i { animation-duration: .27s; }
@keyframes am-fly-a { 0% { transform: translate(0, 0) rotateX(35deg) rotateZ(-10deg); } 25% { transform: translate(22cqw, -16cqh) rotateX(40deg) rotateZ(14deg); } 50% { transform: translate(40cqw, -4cqh) rotateX(30deg) rotateZ(-6deg); } 75% { transform: translate(16cqw, 10cqh) rotateX(42deg) rotateZ(10deg); } 100% { transform: translate(0, 0) rotateX(35deg) rotateZ(-10deg); } }
@keyframes am-fly-b { 0% { transform: translate(0, 0) rotateX(30deg) rotateZ(12deg); } 30% { transform: translate(-26cqw, 12cqh) rotateX(40deg) rotateZ(-8deg); } 60% { transform: translate(-8cqw, 26cqh) rotateX(34deg) rotateZ(10deg); } 100% { transform: translate(0, 0) rotateX(30deg) rotateZ(12deg); } }
@keyframes am-fly-c { 0% { transform: translate(0, 0) rotateX(40deg) rotateZ(0deg); } 33% { transform: translate(28cqw, 14cqh) rotateX(32deg) rotateZ(16deg); } 66% { transform: translate(8cqw, 30cqh) rotateX(44deg) rotateZ(-12deg); } 100% { transform: translate(0, 0) rotateX(40deg) rotateZ(0deg); } }

/* butterflies that fly out of the doorway on hover */
.bfly-out { position: absolute; inset: 0; z-index: 6; pointer-events: none; container-type: size; }
.bfly-out .bfly { left: 46%; top: 52%; opacity: 0; }
.bfly-out .e2 { --wing: linear-gradient(160deg, #EC6F96, #F9B27D); width: 36px; height: 31px; }
.bfly-out .e3 { --wing: linear-gradient(160deg, #36B894, #5A97E0); width: 32px; height: 27px; }
.bfly-out .bfly i { animation-play-state: paused; }
@keyframes am-escape-1 { 0% { opacity: 0; transform: translate(0, 0) scale(.7) rotateX(30deg); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(-75cqw, -78cqh) scale(1.25) rotateX(40deg) rotateZ(-20deg); } }
@keyframes am-escape-2 { 0% { opacity: 0; transform: translate(0, 0) scale(.7) rotateX(30deg); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(80cqw, -64cqh) scale(1.2) rotateX(36deg) rotateZ(18deg); } }
@keyframes am-escape-3 { 0% { opacity: 0; transform: translate(0, 0) scale(.6) rotateX(30deg); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(-20cqw, -105cqh) scale(1.15) rotateX(44deg) rotateZ(-8deg); } }

/* ── Behind the Spirituality door: noor light ── */
.door-inside--spirit { background: radial-gradient(70% 55% at 50% 40%, #FFFBEA 0%, #F8E6AE 34%, #E8C873 68%, #C9A04A 100%); }
.rays { position: absolute; left: 50%; top: 40%; width: 260cqw; height: 260cqw; margin: -130cqw 0 0 -130cqw; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .62) 0deg 5deg, rgba(255, 255, 255, 0) 5deg 15deg); -webkit-mask-image: radial-gradient(closest-side, #000 8%, transparent 70%); mask-image: radial-gradient(closest-side, #000 8%, transparent 70%); animation: am-spin 40s linear infinite; animation-play-state: paused; }
.core { position: absolute; left: 50%; top: 40%; width: 46cqw; height: 46cqw; margin: -23cqw 0 0 -23cqw; border-radius: 50%; background: radial-gradient(closest-side, #FFFFFF 0%, rgba(255, 250, 225, .9) 35%, rgba(255, 236, 170, 0) 100%); animation: am-core 2.8s ease-in-out infinite alternate; animation-play-state: paused; }
.mote { position: absolute; bottom: -4%; width: 5px; height: 5px; border-radius: 50%; background: #FFFDF2; box-shadow: 0 0 8px 2px rgba(255, 244, 200, .95); opacity: 0; animation: am-mote 5s linear infinite; animation-play-state: paused; }
.m1 { left: 20%; animation-delay: 0s; } .m2 { left: 38%; animation-delay: -1.4s; animation-duration: 6s; } .m3 { left: 54%; animation-delay: -2.6s; }
.m4 { left: 70%; animation-delay: -3.3s; animation-duration: 6.5s; } .m5 { left: 30%; animation-delay: -4.1s; width: 3px; height: 3px; } .m6 { left: 80%; animation-delay: -.8s; width: 4px; height: 4px; }
@keyframes am-spin { to { transform: rotate(360deg); } }
@keyframes am-core { from { transform: scale(.9); opacity: .85; } to { transform: scale(1.12); opacity: 1; } }
@keyframes am-mote { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 85% { opacity: .9; } 100% { opacity: 0; transform: translate(6cqw, -95cqh); } }
/* light pouring out through the opening (above the leaves) and spilling around the frame */
.door-beams { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(34% 62% at 50% 46%, rgba(255, 250, 228, .95), rgba(255, 240, 190, .35) 55%, transparent 75%); opacity: 0; transform: scaleX(.25); transition: opacity 500ms ease, transform 750ms var(--ease-out); }
.door-spill { position: absolute; inset: -38% -60% -16%; z-index: -1; border-radius: 50%; pointer-events: none; background: repeating-conic-gradient(from 0deg at 50% 46%, rgba(255, 236, 170, .55) 0deg 4deg, rgba(255, 236, 170, 0) 4deg 13deg); -webkit-mask-image: radial-gradient(closest-side at 50% 46%, #000 25%, transparent 72%); mask-image: radial-gradient(closest-side at 50% 46%, #000 25%, transparent 72%); opacity: 0; transform: scale(.85) rotate(0deg); transition: opacity 600ms ease, transform 900ms var(--ease-out); }

.door-seam { position: absolute; top: 6%; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; z-index: 3; border-radius: 3px; opacity: .75; animation: am-seam 3.2s ease-in-out infinite alternate; }
.door--child .door-seam { background: linear-gradient(180deg, transparent, #E8F3FB 20%, #fff 60%, #E8F3FB); box-shadow: 0 0 14px 3px rgba(220, 235, 245, .9); }
.door--spirit .door-seam { top: 12%; background: linear-gradient(180deg, transparent, #FFF3CF 20%, #fff 60%, #FFF3CF); box-shadow: 0 0 14px 3px rgba(255, 236, 180, .95); animation-delay: -1.6s; }

/* the two leaves */
.door-leaf { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2; backface-visibility: hidden; transition: transform 480ms var(--ease-out); will-change: transform; }
.door-leaf--l { left: 0; transform-origin: 0% 50%; }
.door-leaf--r { right: 0; transform-origin: 100% 50%; }
.door-leaf::before { content: ""; position: absolute; inset: 22% 16% 7% 16%; border-radius: 8px; }
.door-leaf::after { content: ""; position: absolute; top: 58%; width: 9px; height: 34px; border-radius: 6px; }
.door-leaf--l::after { right: 11%; } .door-leaf--r::after { left: 11%; }
.door--child .door-leaf { background: linear-gradient(165deg, var(--child-dark-2), var(--child-dark) 75%); }
.door--child .door-leaf--l { box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25); }
.door--child .door-leaf::before { border: 1.5px solid rgba(169, 205, 227, .32); box-shadow: inset 0 0 0 7px rgba(169, 205, 227, .06); }
.door--child .door-leaf::after { background: linear-gradient(180deg, #DCEBF5, var(--child-light)); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.door--spirit .door-leaf { background: url("../assets/brand/pattern-gold.svg") 0 0 / 54px 54px, linear-gradient(170deg, #F7E8BC, var(--spirit-gold) 58%, #D8B55C); }
.door--spirit .door-leaf--l { box-shadow: inset -1px 0 0 rgba(122, 92, 20, .35); }
.door--spirit .door-leaf::before { top: 30%; border: 1.5px solid rgba(122, 92, 20, .35); box-shadow: inset 0 0 0 7px rgba(255, 250, 230, .22); }
.door--spirit .door-leaf::after { background: linear-gradient(180deg, #FFF3CF, var(--spirit-deep-gold)); box-shadow: 0 2px 6px rgba(78, 59, 18, .4); }

.door-spot { position: absolute; left: 0; top: 0; z-index: 4; width: 70%; aspect-ratio: 1; margin: -35% 0 0 -35%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .34), transparent); opacity: 0; pointer-events: none; transition: opacity 300ms ease; will-change: transform; }

/* labels */
.door-label { display: grid; justify-items: center; gap: .15rem; text-align: center; }
.door-title { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.6rem, 2.1vw + .85rem, 2.6rem); line-height: 1.05; letter-spacing: -.01em; }
.door--child .door-title { color: var(--brand-navy); }
.door--spirit .door-title { color: var(--spirit-text); }
.door-sub { font-size: clamp(.8rem, .5vw + .6rem, .92rem); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.door--child .door-sub { white-space: nowrap; }
.door-sub .ds-a, .door-sub .ds-b { white-space: nowrap; }
/* phones: one line cannot fit beside the second door, so the label splits into two short lines (never clipped) */
@media (max-width: 760px) { .door--child .door-sub { white-space: normal; line-height: 1.4; letter-spacing: .04em; } .door-sub .ds-sep { display: none; } .door-sub .ds-a, .door-sub .ds-b { display: block; } }
.door-ur { font-family: var(--font-ur); font-size: clamp(1rem, .8vw + .65rem, 1.2rem); line-height: 1.9; color: var(--spirit-gold-ink); }
.door-enter { display: inline-flex; align-items: center; gap: .45rem; margin-top: .55rem; padding: .55rem 1.2rem; border-radius: var(--r-pill); font-weight: 600; font-size: 1rem; color: #fff; transition: transform 160ms var(--ease-out), box-shadow 200ms ease; }
.door--child .door-enter { background: var(--child-dark); }
.door--spirit .door-enter { background: var(--spirit-gold-ink); }
.door:active .door-enter { transform: scale(0.97); }

/* hover / focus / opening: leaves open, the world behind comes alive */
@media (hover: hover) and (pointer: fine) {
  .door:hover .door-leaf { transition: transform 750ms var(--ease-out); }
  .door:hover .door-leaf--l { transform: rotateY(58deg); }
  .door:hover .door-leaf--r { transform: rotateY(-58deg); }
  .door:hover .door-spot { opacity: 1; }
  .door:hover .door-glow { opacity: 1; }
  .door:hover .door-enter { box-shadow: 0 10px 24px rgba(19, 37, 79, .22); }
  .door:hover .door-enter .arrow { transform: translateX(4px); }
  .door:hover .orb, .door:hover .door-inside .bfly, .door:hover .door-inside .bfly i, .door:hover .rays, .door:hover .core, .door:hover .mote { animation-play-state: running; }
  .door--child:hover .bfly-out .bfly i { animation-play-state: running; }
  .door--child:hover .bfly-out .e1 { animation: am-escape-1 2.6s var(--ease-out) .35s forwards; }
  .door--child:hover .bfly-out .e2 { animation: am-escape-2 2.9s var(--ease-out) .6s forwards; }
  .door--child:hover .bfly-out .e3 { animation: am-escape-3 3.1s var(--ease-out) .9s forwards; }
  .door--spirit:hover .door-beams { opacity: 1; transform: scaleX(1); }
  .door--spirit:hover .door-spill { opacity: 1; transform: scale(1.05) rotate(12deg); }
}
.door:focus-visible .door-leaf { transition: transform 750ms var(--ease-out); }
.door:focus-visible .door-leaf--l { transform: rotateY(58deg); }
.door:focus-visible .door-leaf--r { transform: rotateY(-58deg); }
.door:focus-visible .orb, .door:focus-visible .door-inside .bfly, .door:focus-visible .door-inside .bfly i, .door:focus-visible .rays, .door:focus-visible .core, .door:focus-visible .mote { animation-play-state: running; }
.door--spirit:focus-visible .door-beams { opacity: 1; transform: scaleX(1); }
.door:focus-visible .door-frame { outline: 3px solid var(--brand-navy); outline-offset: 14px; border-radius: 12px; }
.door--spirit:focus-visible .door-frame { outline-color: var(--spirit-gold-ink); }

/* click: swing wide open, then the portal (JS) carries you through */
.door.is-opening .door-leaf { transition: transform 700ms var(--ease-in-out); }
.door.is-opening .door-leaf--l { transform: rotateY(104deg); }
.door.is-opening .door-leaf--r { transform: rotateY(-104deg); }
.door.is-opening .door-seam { opacity: 0; }
.door.is-opening .orb, .door.is-opening .door-inside .bfly, .door.is-opening .door-inside .bfly i, .door.is-opening .rays, .door.is-opening .core, .door.is-opening .mote { animation-play-state: running; }
.door--spirit.is-opening .door-beams { opacity: 1; transform: scaleX(1); }
.door--spirit.is-opening .door-spill { opacity: 1; transform: scale(1.1); }
.door-portal { position: fixed; z-index: 500; pointer-events: none; transform-origin: 50% 60%; will-change: transform, opacity; }
.portal--child { border-radius: 50% 50% 0 0 / var(--arch-v, 31.25%) var(--arch-v, 31.25%) 0 0; }
.portal--spirit { clip-path: polygon(0% 100%,0% 40%,0.22% 36.62%,0.85% 33.55%,1.86% 30.76%,3.22% 28.24%,4.9% 25.95%,6.86% 23.88%,9.07% 22%,11.49% 20.28%,14.1% 18.7%,16.87% 17.24%,19.75% 15.88%,22.72% 14.58%,25.74% 13.32%,28.79% 12.08%,31.82% 10.84%,34.81% 9.57%,37.73% 8.25%,40.53% 6.85%,43.19% 5.35%,45.68% 3.73%,47.96% 1.95%,50% 0%,52.04% 1.95%,54.32% 3.73%,56.81% 5.35%,59.47% 6.85%,62.27% 8.25%,65.19% 9.57%,68.18% 10.84%,71.21% 12.08%,74.26% 13.32%,77.28% 14.58%,80.25% 15.88%,83.13% 17.24%,85.9% 18.7%,88.51% 20.28%,90.93% 22%,93.14% 23.88%,95.1% 25.95%,96.78% 28.24%,98.14% 30.76%,99.15% 33.55%,99.78% 36.62%,100% 40%,100% 100%); }

/* scroll cue to the panels below (phones & tablets) */
.home-more { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font-size: .92rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); text-decoration: none; }
.home-more .chev { width: 18px; height: 18px; animation: am-bob 1.8s ease-in-out infinite; }
@keyframes am-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ── Side panels: location + WhatsApp, reviews ── */
.home-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; max-width: 900px; margin: 0 auto; padding: clamp(2rem, 6vw, 3.5rem) 16px clamp(2.5rem, 7vw, 4rem); }
.home-panels { background: linear-gradient(90deg, #EEF5FB, #FFFFFF 50%, #FEFAEE); max-width: none; padding-inline: max(16px, calc((100% - 900px) / 2)); }
.home-side { display: flex; flex-direction: column; gap: .8rem; padding: 1.3rem 1.3rem 1.2rem; border-radius: var(--r-lg); background: rgba(255, 255, 255, .86); border: 1px solid rgba(19, 37, 79, .08); box-shadow: 0 24px 60px -30px rgba(19, 37, 79, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.side-title { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: 1.55rem; line-height: 1.1; color: var(--brand-navy); }
.side-title svg { width: 22px; height: 22px; flex: none; color: var(--brand-navy); }
.side-rev .side-title svg { color: #F2B01E; }
.side-addr { margin: 0; font-size: .98rem; font-weight: 600; line-height: 1.45; color: #26324A; }
.side-map { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--child-pale); }
.side-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.side-dir { align-self: flex-start; }
.wa-lines { display: grid; gap: .5rem; }
.wa-line { display: flex; align-items: center; gap: .45rem; padding: .35rem .4rem .35rem .45rem; border-radius: 16px; }
.wa-line--child { background: var(--child-pale); color: var(--child-dark); }
.wa-line--spirit { background: #FAEFCB; color: var(--spirit-text); }
.wa-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem; padding: .2rem; text-decoration: none; color: inherit; }
.wa-main b { display: block; font-size: 1rem; line-height: 1.2; }
.wa-main small { display: block; font-size: .88rem; line-height: 1.3; opacity: .85; }
.wa-ic { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--wa-green); color: var(--wa-ink); }
.wa-ic svg { width: 21px; height: 21px; }
.wa-call { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid currentColor; color: inherit; opacity: .8; }
.wa-call svg { width: 17px; height: 17px; }
.wa-main:active, .wa-call:active { transform: scale(0.97); }
.side-note { display: flex; align-items: flex-start; gap: .5rem; margin: 0; font-size: .92rem; line-height: 1.4; color: var(--muted); }
.side-note svg { width: 18px; height: 18px; flex: none; margin-top: .1rem; }
.side-rev .rating { align-self: flex-start; margin: 0; padding: .35rem .85rem; font-size: .92rem; }
.side-rev .review { padding: 1.1rem 1.1rem 1rem; gap: .55rem; box-shadow: none; }
.side-rev .review p { font-size: .98rem; line-height: 1.55; }
.side-rev .stars svg { width: 16px; height: 16px; }
.side-rev .sample-tag { top: .9rem; right: .9rem; }
.side-rev .sample-line { margin: 0; font-size: .85rem; text-align: left; }
.side-review-cta { margin: 0; font-size: .92rem; color: var(--muted); }
.side-review-cta a { font-weight: 600; color: var(--brand-navy); }
.rv-dots { margin-top: .6rem; }
.btn--navy { background: var(--child-dark); color: #fff; }
.home-footer { padding: 1.6rem 16px; text-align: center; background: #FFFCF4; border-top: 1px solid rgba(19, 37, 79, .08); }
.home-footer p { margin: 0; font-size: .95rem; color: var(--muted); }

/* wide screens: the panels sit in the empty space beside the doors */
@media (min-width: 1180px) and (min-height: 660px) {
  main { position: relative; }
  .home-panels { position: absolute; inset: 0 0 auto 0; height: 100svh; max-width: none; margin: 0; padding: 0 clamp(18px, 2.4vw, 44px); background: none; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
  .home-side { width: clamp(250px, 20vw, 320px); pointer-events: auto; animation: am-rise 800ms var(--ease-out) 1400ms both; }
  .side-rev { animation-delay: 1520ms; }
  .door { --w: min(19vw, 300px, calc((96svh - 460px) * .625)); }
  .home-more { display: none; }
}
@media (min-width: 1180px) and (min-height: 660px) and (max-height: 820px) {
  .home-side { padding: 1rem 1.1rem; gap: .6rem; }
  .side-map { aspect-ratio: 2 / 1; }
  .side-title { font-size: 1.35rem; }
}

/* ── Intro choreography (first view per session; JS adds .intro-skip afterwards) ── */
.home-logo { animation: am-rise 800ms var(--ease-out) 60ms both; }
.home-slogan { animation: am-rise 800ms var(--ease-out) 450ms both; }
.home-deal { animation: am-rise 800ms var(--ease-out) 600ms both; }
.door-frame { animation: am-door-in 1000ms var(--ease-out) both; }
.door--child .door-frame { animation-delay: 750ms; }
.door--spirit .door-frame { animation-delay: 870ms; }
.door-label { animation: am-rise 700ms var(--ease-out) both; }
.door--child .door-label { animation-delay: 1150ms; }
.door--spirit .door-label { animation-delay: 1270ms; }
.home-more { animation: am-fade 600ms ease 1500ms both; }
.intro-skip .home-logo, .intro-skip .home-slogan, .intro-skip .home-deal, .intro-skip .door-frame, .intro-skip .door-label, .intro-skip .home-more, .intro-skip .home-side { animation: none; }

@keyframes am-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes am-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes am-door-in { from { opacity: 0; transform: translateY(34px); clip-path: inset(100% -40% -20% -40%); } to { opacity: 1; transform: none; clip-path: inset(-160% -160% -40% -160%); } }
@keyframes am-breathe { from { opacity: .45; transform: scale(.97); } to { opacity: .85; transform: scale(1.03); } }
@keyframes am-seam { from { opacity: .45; } to { opacity: .95; } }

/* ── Tablets & phones ── */
@media (max-width: 760px) {
  .home-panels { grid-template-columns: 1fr; max-width: 520px; }
  .side-rev { order: -1; }
}
@media (max-width: 700px) {
  .door { --w: min(40vw, 190px, max(118px, calc((100svh - 520px) * .625))); }
  .home-deal-title { font-size: 1.6rem; }
  .home-slogan::before, .home-slogan::after { display: none; }
  .home-tagline { font-size: 1.08rem; max-width: 30ch; }
  .doors { gap: 7vw; }
  .door-trim { inset: -6px -6px 0 -6px; }
  .door-leaf::after { width: 7px; height: 24px; }
  .door-leaf::before { inset: 22% 15% 7% 15%; }
  .door-sub { letter-spacing: .06em; }
  .door-enter { padding: .5rem 1rem; font-size: .95rem; }
  .home-logo { width: min(330px, 82vw); }
  .bfly { width: 30px; height: 26px; }
  .door-inside .f2, .door-inside .f3, .door-inside .f5 { width: 24px; height: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-logo, .home-slogan, .home-deal, .door-frame, .door-label, .home-more, .home-side { animation: am-fade 300ms ease both !important; }
  .door-glow, .door-seam, .orb, .bfly, .bfly i, .rays, .core, .mote, .home-more .chev { animation: none !important; }
  .bfly-out { display: none; }
  .door-leaf { transition: none !important; }
  .door:hover .door-leaf--l, .door:hover .door-leaf--r, .door:focus-visible .door-leaf--l, .door:focus-visible .door-leaf--r { transform: none; }
}