/* GoSibu — styles. Values mirror the approved Claude Design file (GoSibu.dc.html). */

/* Self-hosted Google Fonts (SIL Open Font License). */
/* Anton 400 latin-ext */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/anton-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Anton 400 latin */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/anton-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans 400 latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/dm-sans-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans 400 latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/dm-sans-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans 500 latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/dm-sans-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans 500 latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/dm-sans-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans 700 latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/dm-sans-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans 700 latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/dm-sans-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Noto Sans Devanagari 800 devanagari */
@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto-sans-devanagari-devanagari-800.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
/* Noto Sans Devanagari 800 latin-ext */
@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto-sans-devanagari-latin-ext-800.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Noto Sans Devanagari 800 latin */
@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto-sans-devanagari-latin-800.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --plum: #3A0E2E;
  --plum-soft: #5C2A4B;
  --plum-text: #4B1E3C;
  --cream: #FFF6E3;
  --yellow: #FFD95E;
  --lemon: #FFEFA8;
  --peach: #FFC9A3;
  --orange: #FF6A3D;
  --blue: #2F4BFF;
  --lilac: #C9D6FF;
  --red: #D4401A;
  --pink-text: #F2DDE8;
  --display: 'Anton', sans-serif;
  --body: 'DM Sans', sans-serif;
  --deva: 'Noto Sans Devanagari', sans-serif;
  --burst12: polygon(100.0% 50.0%,88.6% 60.4%,93.3% 75.0%,78.3% 78.3%,75.0% 93.3%,60.4% 88.6%,50.0% 100.0%,39.6% 88.6%,25.0% 93.3%,21.7% 78.3%,6.7% 75.0%,11.4% 60.4%,0.0% 50.0%,11.4% 39.6%,6.7% 25.0%,21.7% 21.7%,25.0% 6.7%,39.6% 11.4%,50.0% 0.0%,60.4% 11.4%,75.0% 6.7%,78.3% 21.7%,93.3% 25.0%,88.6% 39.6%);
  --burst20: polygon(100.0% 50.0%,91.5% 56.6%,97.6% 65.5%,87.4% 69.1%,90.5% 79.4%,79.7% 79.7%,79.4% 90.5%,69.1% 87.4%,65.5% 97.6%,56.6% 91.5%,50.0% 100.0%,43.4% 91.5%,34.5% 97.6%,30.9% 87.4%,20.6% 90.5%,20.3% 79.7%,9.5% 79.4%,12.6% 69.1%,2.4% 65.5%,8.5% 56.6%,0.0% 50.0%,8.5% 43.4%,2.4% 34.5%,12.6% 30.9%,9.5% 20.6%,20.3% 20.3%,20.6% 9.5%,30.9% 12.6%,34.5% 2.4%,43.4% 8.5%,50.0% 0.0%,56.6% 8.5%,65.5% 2.4%,69.1% 12.6%,79.4% 9.5%,79.7% 20.3%,90.5% 20.6%,87.4% 30.9%,97.6% 34.5%,91.5% 43.4%);
  --blob: 58% 42% 55% 45% / 48% 56% 44% 52%;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth }
body { margin: 0; background: var(--cream); color: var(--plum); font-family: var(--body); -webkit-font-smoothing: antialiased }
a { color: var(--plum); text-decoration: none }
a:hover { color: var(--red) }
*, *::before, *::after { box-sizing: border-box }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--plum); outline-offset: 3px; box-shadow: 0 0 0 6px var(--yellow) !important }
a, button { transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .2s, background .2s }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0 }
.f-display { font-family: var(--display) }
.f-deva { font-family: var(--deva); font-weight: 800 }
.burst12 { clip-path: var(--burst12) }
.burst20 { clip-path: var(--burst20) }
.blob { border-radius: var(--blob) }
.center-flex { display: flex; align-items: center; justify-content: center }

/* ---------- Motion ---------- */
@keyframes wob { 0%,100% { rotate: -4deg } 50% { rotate: 4deg } }
@keyframes mq { to { transform: translateX(-50%) } }
@keyframes accIn { from { opacity: 0; translate: 0 -8px } to { opacity: 1; translate: 0 0 } }
.wob { animation: wob 4s ease-in-out infinite }
.wob2 { animation: wob 5.2s ease-in-out infinite reverse }
.mq { animation: mq 38s linear infinite }
.mqw:hover .mq, .mq.stop, .mqw:focus-within .mq { animation-play-state: paused }
.acc { animation: accIn .35s cubic-bezier(.16,1,.3,1) }
.rv { opacity: 0; translate: 0 28px; scale: .98; transition: opacity .6s ease, translate .8s cubic-bezier(.16,1,.3,1), scale .8s cubic-bezier(.16,1,.3,1) }
.rv.pop { translate: 0 0; scale: .2; transition: opacity .4s ease, translate .7s cubic-bezier(.34,1.56,.64,1), scale .7s cubic-bezier(.34,1.56,.64,1) }
.rv.in { opacity: 1; translate: 0 0; scale: 1 }

/* Cursor star that follows the mouse */
#wmc { position: fixed; left: 0; top: 0; width: 54px; height: 54px; margin: -27px 0 0 -27px; pointer-events: none; background: var(--yellow); clip-path: polygon(50% 0,60% 20%,80% 7%,80% 30%,100% 30%,88% 50%,100% 70%,80% 70%,80% 93%,60% 80%,50% 100%,40% 80%,20% 93%,20% 70%,0 70%,12% 50%,0 30%,20% 30%,20% 7%,40% 20%); display: flex; align-items: center; justify-content: center; font: 400 17px/1 var(--display); color: var(--plum); font-style: normal; opacity: 0; scale: .3; transition: opacity .2s, scale .3s cubic-bezier(.34,1.56,.64,1); z-index: 999 }
#wmc.on { opacity: 1; scale: 1 }
#wmc.dn { scale: .8 }
@media (hover: none) { #wmc { display: none } }

/* ---------- Shared pieces ---------- */
.btn { display: inline-block; border: 2px solid var(--plum); border-radius: 999px; font-family: var(--display); color: var(--plum) }
.btn:hover { color: var(--plum) }
.btn-lg { box-shadow: 0 6px 0 var(--plum); padding: 15px 32px; font-size: 24px }
.btn-lg:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--plum) }
.btn-lg:active, .btn-press:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--plum) }
.bg-yellow { background: var(--yellow) }
.bg-cream { background: var(--cream) }
.bg-lemon { background: var(--lemon) }
.bg-peach { background: var(--peach) }
.bg-lilac { background: var(--lilac) }
.bg-white { background: #fff }

.sec { position: relative; padding: 130px 20px 110px }
.scallop { position: absolute; top: 0; left: 0; right: 0; height: 30px; background: radial-gradient(circle at 30px 0, var(--sc) 29px, transparent 30.5px) 0 0 / 60px 30px repeat-x }
.h2 { font-family: var(--display); font-weight: 400; font-size: clamp(46px,8vw,112px); line-height: .95; margin: 0 }
.sp2 { grid-column: span 2 }
@media (max-width: 640px) { .sp2 { grid-column: 1 / -1 } }

.seat-dot { border-radius: 50%; border: 2px solid var(--plum); background: var(--plum); display: inline-block }
.seat-dot.open { background: var(--yellow) }

/* ---------- Skip link ---------- */
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--yellow); border: 2px solid var(--plum); border-radius: 999px; padding: 12px 22px; font-family: var(--display); font-size: 20px; color: var(--plum) }
.skip:focus { top: 12px }

/* ---------- Nav ---------- */
.nav { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); width: min(1200px, calc(100% - 24px)); z-index: 50 }
.nav-bar { display: flex; align-items: center; justify-content: space-between; background: var(--cream); border: 2px solid var(--plum); box-shadow: 0 5px 0 var(--plum); border-radius: 999px; padding: 7px 8px 7px 24px }
.logo { font-family: var(--display); font-size: 28px; line-height: 1; color: var(--plum) }
.logo span { color: var(--red) }
.nl { display: flex; gap: 4px; font-family: var(--display); font-size: 19px; margin: 0; padding: 0; list-style: none }
.nl a { display: block; padding: 11px 16px; border-radius: 999px }
.nl a:hover { background: var(--plum); color: var(--cream) }
.ncta { background: var(--yellow); border: 2px solid var(--plum); box-shadow: 0 3px 0 var(--plum); border-radius: 999px; padding: 8px 20px; font-family: var(--display); font-size: 19px; color: var(--plum) }
.ncta:hover { transform: translateY(-2px); color: var(--plum) }
.hb { display: none; width: 46px; height: 46px; border-radius: 50%; background: var(--yellow); border: 2px solid var(--plum); align-items: center; justify-content: center; cursor: pointer; font-size: 22px; color: var(--plum); padding: 0 }
.mmenu { margin-top: 12px; background: var(--cream); border: 2px solid var(--plum); box-shadow: 0 5px 0 var(--plum); border-radius: 28px; padding: 12px; display: flex; flex-direction: column; font-family: var(--display); font-size: 26px }
.mmenu[hidden] { display: none }
.mmenu a { padding: 10px 16px }
.mmenu .mcta { margin-top: 6px; text-align: center; background: var(--yellow); border: 2px solid var(--plum); border-radius: 999px; padding: 12px }
@media (max-width: 900px) { .nl, .ncta { display: none !important } .hb { display: flex !important } }

/* ---------- 01 Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--cream) radial-gradient(rgba(58,14,46,.12) 1.5px, transparent 1.8px) 0 0 / 18px 18px; padding: 170px 20px 100px; text-align: center }
.hero-in { position: relative; max-width: 1240px; margin: 0 auto }
.wm-wrap { position: relative }
#wm { position: relative; font-family: var(--display); font-size: clamp(96px,22vw,300px); line-height: .86; letter-spacing: .03em; padding-top: clamp(90px,13vw,170px) }
#wm span { display: inline-block; transform-origin: 50% 100%; cursor: default; transition: transform .35s cubic-bezier(.34,1.56,.64,1), color .15s }
#wm span:hover { color: var(--red); transform: translateY(-7%) scaleY(1.12) }
.st-fast { position: absolute; left: 4%; top: 0; width: clamp(60px,9vw,115px); height: clamp(60px,9vw,115px); background: var(--yellow); font-family: var(--display); font-size: clamp(20px,3vw,36px); transform: rotate(-12deg) }
.st-namaste { position: absolute; left: 50%; margin-left: clamp(-80px,-7vw,-60px); top: 0; width: clamp(110px,15vw,190px); height: clamp(66px,9vw,115px); background: var(--peach); font-size: clamp(22px,3.4vw,44px); transform: rotate(-6deg) }
.st-premium { position: absolute; right: 4%; top: 0; width: clamp(66px,10vw,130px); height: clamp(66px,10vw,130px); background: var(--blue); color: var(--cream); font-family: var(--display); font-size: clamp(14px,2.2vw,30px); transform: rotate(10deg) }
.hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(42px,7.6vw,100px); line-height: .95; margin: clamp(8px,2vw,24px) auto 0; max-width: 1100px }
.hero h1 span { color: var(--red); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: .08em; text-underline-offset: .1em }
.hero-lead { font-size: clamp(17px,1.6vw,21px); line-height: 1.55; max-width: 620px; margin: 24px auto 0; color: var(--plum-soft) }
.hero-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 34px }
.seat-pill { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; font-weight: 700; font-size: 15px; background: var(--cream); border: 2px solid var(--plum); border-radius: 999px; padding: 8px 18px 8px 12px }
.seat-pill .seat-dots { display: flex; gap: 5px }
.seat-pill .seat-dot { width: 20px; height: 20px }

/* ---------- 02 Marquee ---------- */
.marquee { position: relative; background: var(--orange); border-top: 2px solid var(--plum); border-bottom: 2px solid var(--plum); padding: 30px 0; overflow: hidden }
.mq { display: flex; gap: 18px; width: max-content; font-family: var(--display); font-size: 30px; white-space: nowrap }
.mq span { border: 2px solid var(--plum); box-shadow: 0 4px 0 var(--plum); border-radius: 999px; padding: 9px 28px; display: inline-block }
.mq-btn { position: absolute; right: 14px; top: 50%; margin-top: -24px; width: 48px; height: 48px; border-radius: 50%; background: var(--cream); border: 2px solid var(--plum); box-shadow: 0 3px 0 var(--plum); cursor: pointer; font: 400 15px var(--display); color: var(--plum); padding: 0; z-index: 2 }

/* ---------- 03 Promises ---------- */
.promises { background: var(--blue) radial-gradient(rgba(255,246,227,.22) 1.5px, transparent 1.8px) 0 0 / 14px 14px; --sc: var(--orange) }
.wrap-col { margin: 0 auto; display: flex; flex-direction: column }
.promises .wrap-col { max-width: 1200px; gap: 56px }
.sec-head { text-align: center; position: relative }
.tag-goodstuff { position: absolute; left: clamp(0px,6vw,90px); top: -34px; background: var(--yellow); padding: 14px 26px; font-family: var(--display); font-size: 22px; transform: rotate(-8deg) }
.promises .h2 { color: var(--cream) }
.p-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,270px),1fr)); gap: 22px; align-items: stretch }
.card { border: 2px solid var(--plum); box-shadow: 0 7px 0 var(--plum); border-radius: 36px }
.p-big { min-width: min(100%,270px); background: var(--lilac); padding: 32px; display: flex; gap: 24px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; min-height: 260px; transform: rotate(-.6deg) }
.p-big > div:first-child { max-width: 420px }
.p-big h3 { font-family: var(--display); font-weight: 400; font-size: clamp(34px,4vw,50px); line-height: 1; margin: 0 }
.p-big p { font-size: 17px; line-height: 1.55; margin: 10px 0 0 }
.p-burst { width: 110px; height: 110px; background: var(--cream) }
.icon-tile { border-radius: 16px; background: var(--cream); border: 2px solid var(--plum); box-shadow: 0 4px 0 var(--plum) }
.p-burst .icon-tile { width: 62px; height: 62px; border-radius: 18px; transform: rotate(-6deg) }
.p-small { padding: 28px; display: flex; flex-direction: column; gap: 10px }
.p-small.r1 { transform: rotate(.8deg) }
.p-small.r2 { transform: rotate(-.8deg) }
.p-small .icon-tile { width: 56px; height: 56px }
.p-small h3 { font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1; margin: 0 }
.p-small p { font-size: 16px; line-height: 1.55; margin: 0 }
.p-four { grid-column: 1 / -1; background: var(--lemon); border: 2px solid var(--plum); box-shadow: 0 4px 0 var(--plum); border-radius: 36px; padding: 24px 32px; display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap }
.p-four h3 { font-family: var(--display); font-weight: 400; font-size: clamp(30px,3.6vw,44px); line-height: 1; margin: 0 }
.p-four p { font-size: 16px; margin: 6px 0 0 }
.p-four .seat-dots { display: flex; gap: 10px; align-items: center }
.p-four .seat-dot { width: 38px; height: 38px }

/* ---------- 04 Services ---------- */
.services { background: var(--cream); --sc: var(--blue) }
.services .wrap-col { max-width: 1000px; gap: 48px }
.tag-services { position: absolute; right: clamp(0px,4vw,60px); top: -36px; background: var(--peach); padding: 12px 26px; font-family: var(--display); font-size: 22px; transform: rotate(-10deg) }
.h2.left { text-align: left }
.acc-list { display: flex; flex-direction: column; gap: 18px }
.svc { border: 2px solid var(--plum); box-shadow: 0 4px 0 var(--plum); border-radius: 32px; overflow: hidden }
.svc h3, .faq-item h3 { margin: 0; font: inherit }
.svc-btn { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; gap: 20px; align-items: center; padding: 24px 28px }
.svc-btn:hover { background: rgba(255,255,255,.4) }
.svc-num { font-family: var(--display); font-size: 30px; opacity: .55; min-width: 44px }
.svc-txt { flex: 1; display: flex; flex-direction: column; gap: 2px }
.svc-title { font-family: var(--display); font-size: clamp(28px,4.4vw,54px); line-height: 1 }
.svc-sub { font-size: 16px; color: var(--plum-soft) }
.pm { border-radius: 50%; border: 2px solid var(--plum); background: var(--cream); display: flex; align-items: center; justify-content: center; line-height: 1; flex: none }
[aria-expanded="true"] .pm { background: var(--yellow) }
.svc .pm { width: 52px; height: 52px; font-size: 28px }
.svc-panel { border-top: 2px solid rgba(58,14,46,.25); padding: 26px 28px 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,280px),1fr)); gap: 24px 40px }
.svc-panel[hidden], .faq-panel[hidden] { display: none }
.svc-panel p { margin: 0; font-size: 17px; line-height: 1.65 }
.svc-side { display: flex; flex-direction: column; gap: 18px; align-items: flex-start }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none }
.tags li { background: var(--cream); border: 2px solid rgba(58,14,46,.35); border-radius: 999px; padding: 6px 16px; font-size: 15px }
.ask { font-family: var(--display); font-size: 22px; border-bottom: 3px solid var(--plum); color: var(--plum) }

/* ---------- 05 Work ---------- */
.work { background: var(--plum); color: var(--cream); padding: 130px 20px 120px; --sc: var(--cream) }
.work .wrap-col { max-width: 1200px; gap: 56px }
.work-head { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; position: relative }
.tag-work { background: var(--yellow); color: var(--plum); width: 118px; height: 118px; font-family: var(--display); font-size: 24px; transform: rotate(-8deg) }
.work .h2 { max-width: 900px }
.work-lead { font-size: 18px; line-height: 1.6; max-width: 620px; margin: 0; color: var(--pink-text) }
.w-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,320px),1fr)); gap: 28px; align-items: start }
.w-feat { grid-row: span 2; transform: rotate(-1.2deg) }
.w-r1 { transform: rotate(1.3deg) }
.w-r2 { transform: rotate(-1deg) }
.browser { background: var(--cream); color: var(--plum); border: 2px solid var(--cream); border-radius: 28px; overflow: hidden; box-shadow: 0 8px 0 var(--shadow) }
.b-bar { display: flex; gap: 6px; align-items: center; padding: 10px 14px; border-bottom: 2px solid var(--plum) }
.b-bar i { width: 10px; height: 10px; border-radius: 50%; display: block }
.w-feat .b-bar { padding: 12px 16px; background: var(--cream) }
.w-feat .b-bar i { width: 12px; height: 12px }
.b-bar i:nth-child(1) { background: var(--orange) }
.b-bar i:nth-child(2) { background: var(--yellow) }
.b-bar i:nth-child(3) { background: var(--lemon) }
.b-url { margin-left: 12px; font-size: 12px; border: 2px solid var(--plum); border-radius: 999px; padding: 1px 14px; flex: 1; max-width: 240px }
.chiya { background: var(--lemon); padding: 28px; min-height: 330px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px }
.chiya-top { display: flex; justify-content: space-between; font-family: var(--display); font-size: 18px }
.chiya-big { font-family: var(--display); font-size: clamp(44px,6vw,76px); line-height: .92 }
.chiya-ctas { display: flex; gap: 10px }
.chiya-ctas span, .mini-cta { border: 2px solid var(--plum); border-radius: 999px; padding: 6px 18px; font-family: var(--display) }
.chiya-ctas span:first-child { background: var(--yellow) }
.mini { padding: 22px; min-height: 190px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px }
.mini-big { font-family: var(--display); font-size: 46px; line-height: .95 }
.mini-cta { align-self: flex-start; padding: 5px 16px }
.mini-cta.dark { background: var(--plum); color: var(--cream); border: 0 }
.mini-cta.light { background: var(--cream) }
.w-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; gap: 12px; flex-wrap: wrap }
.w-meta h3 { font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1; margin: 0 }
.w-meta2 { margin-top: 18px }
.w-meta2 h3 { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1.15; margin: 0 }
.w-kind { color: var(--pink-text); font-size: 15px }
.badge-concept { background: var(--peach); color: var(--plum); border-radius: 999px; padding: 5px 16px; font-family: var(--display); font-size: 18px; transform: rotate(4deg) }
.w-claim { background: var(--lemon); color: var(--plum); border: 2px solid var(--cream); border-radius: 28px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-height: 170px; transform: rotate(1deg) }
.w-claim:hover { transform: rotate(0deg) translateY(-4px); color: var(--plum) }
.w-claim .big { font-family: var(--display); font-size: 44px; line-height: .95 }
.w-claim .small { font-family: var(--display); font-size: 22px }

/* ---------- 06 Why ---------- */
.why { background: var(--cream); --sc: var(--plum) }
.why .wrap-col { max-width: 1100px; gap: 48px }
.why .h2 { text-align: center }
.why .h2 span { color: var(--red) }
.vs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,320px),1fr)); gap: 24px }
.vs { border: 2px solid var(--plum); box-shadow: 0 7px 0 var(--plum); border-radius: 32px; padding: 32px; display: flex; flex-direction: column; gap: 16px }
.vs h3 { font-family: var(--display); font-weight: 400; font-size: 36px; margin: 0; line-height: normal }
.vs.them h3 { color: var(--plum-soft) }
.vs.us { transform: rotate(.8deg) }
.vs ul { list-style: none; margin: 0; padding: 0; display: contents }
.vs li { display: flex; gap: 14px; align-items: center; font-size: 18px }
.vs.us li { font-weight: 500 }
.vs li span { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--plum); display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none }
.vs.them li span { background: var(--peach) }
.vs.us li span { background: var(--yellow) }

/* ---------- 07 Process ---------- */
.process { background: var(--lemon); --sc: var(--cream) }
.process .wrap-col { max-width: 1100px; gap: 52px }
.tag-process { position: absolute; right: clamp(0px,8vw,120px); top: -36px; background: var(--peach); width: 104px; height: 104px; font-family: var(--display); font-size: 20px; transform: rotate(-10deg) }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,320px),1fr)); gap: 28px; align-items: start }
.steps { display: flex; flex-direction: column; gap: 12px }
.step { all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: 16px; align-items: center; padding: 14px 18px; border-radius: 26px; border: 2px solid transparent; background: transparent; position: relative; overflow: hidden; transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .2s, background .2s }
.step:hover { transform: translateX(5px) }
.step.on { border-color: var(--plum); background: var(--cream); box-shadow: 0 5px 0 var(--plum) }
.step-n { width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--plum); background: var(--cream); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 24px; flex: none }
.step.on .step-n { background: var(--yellow) }
.step-t { display: flex; flex-direction: column }
.step-t b { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.1 }
.step-t small { font-size: 14px; color: var(--plum-soft) }
.stage { border: 2px solid var(--plum); box-shadow: 0 8px 0 var(--plum); border-radius: 36px; padding: 34px; min-height: 340px; display: flex; flex-direction: column; gap: 14px; justify-content: space-between; background: var(--peach) }
.stage-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px }
.stage-count { font-weight: 700; font-size: 15px; color: var(--plum-soft) }
.play { all: unset; cursor: pointer; border: 2px solid var(--plum); border-radius: 999px; padding: 10px 18px; font-size: 14px; font-weight: 700 }
.play:hover { background: var(--cream) }
.stage-title { font-family: var(--display); font-weight: 400; font-size: clamp(44px,5.4vw,70px); line-height: .95; margin: 6px 0 14px }
.stage p { font-size: 18px; line-height: 1.6; margin: 0; max-width: 440px }
.bars { display: flex; gap: 8px }
.bars span { height: 10px; flex: 1; border-radius: 999px; border: 2px solid var(--plum); background: transparent }
.bars span.on { background: var(--plum) }

/* ---------- 08 Seats ---------- */
.seats { background: var(--peach); text-align: center; --sc: var(--lemon) }
.seats .wrap-col { max-width: 1000px; gap: 40px; align-items: center }
.seat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,180px),1fr)); gap: 18px; width: 100%; margin: 0; padding: 0; list-style: none }
.seat-card { height: 150px; border-radius: 32px; background: var(--plum); color: var(--cream); border: 2px solid var(--plum); box-shadow: 0 4px 0 var(--plum); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px }
.seat-card.open { background: var(--yellow); color: var(--plum) }
.seat-card .n { font-family: var(--display); font-size: 56px; line-height: 1 }
.seat-card .l { font-family: var(--display); font-size: 22px }
.seat-card:nth-child(1) { transform: rotate(-2deg) }
.seat-card:nth-child(2) { transform: rotate(1.5deg) }
.seat-card:nth-child(3) { transform: rotate(-1deg) }
.seat-card:nth-child(4) { transform: rotate(2deg) }
.seats-copy { font-size: 19px; line-height: 1.6; max-width: 640px; margin: 0 }
.btn-claim { background: var(--yellow); box-shadow: 0 6px 0 var(--plum); padding: 15px 34px; font-size: 26px }
.btn-claim:hover { transform: translateY(-2px) }

/* ---------- 09 FAQ ---------- */
.faq { background: var(--cream); --sc: var(--peach) }
.two-col { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,340px),1fr)); gap: 48px; align-items: start }
.faq-side { display: flex; flex-direction: column; gap: 28px; position: relative }
.tag-faq { width: 100px; height: 100px; background: var(--lilac); font-family: var(--display); font-size: 22px; transform: rotate(-10deg) }
.h2-xl { font-size: clamp(60px,9vw,128px); line-height: .88 }
.faq-help { background: var(--yellow); border: 2px solid var(--plum); box-shadow: 0 7px 0 var(--plum); border-radius: 32px; padding: 26px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start }
.faq-help h3 { font-family: var(--display); font-weight: 400; font-size: 32px; line-height: 1; margin: 0 }
.faq-help p { margin: 0; font-size: 16px; line-height: 1.55 }
.btn-sm { background: var(--cream); box-shadow: 0 4px 0 var(--plum); padding: 10px 24px; font-size: 20px }
.faq-list { display: flex; flex-direction: column; gap: 16px }
.faq-item { border: 2px solid var(--plum); box-shadow: 0 5px 0 var(--plum); border-radius: 28px; overflow: hidden; background: var(--cream) }
.faq-item:nth-child(even) { background: #fff }
.faq-btn { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 18px 22px }
.faq-btn:hover { background: rgba(255,217,94,.35) }
.faq-q { font-family: var(--display); font-size: clamp(22px,2.4vw,28px); line-height: 1.1 }
.faq-item .pm { width: 42px; height: 42px; font-size: 24px }
.faq-panel { padding: 0 22px 22px; font-size: 17px; line-height: 1.65; color: var(--plum-text) }
.faq-panel p { margin: 0 }

/* ---------- 10 Contact ---------- */
.contact { background: var(--lilac); --sc: var(--cream) }
.contact .two-col { gap: 40px }
.c-side { display: flex; flex-direction: column; gap: 26px }
.tag-namaste2 { width: 112px; height: 92px; background: var(--cream); font-size: 26px; transform: rotate(-8deg) }
.contact .h2 { font-size: clamp(56px,8vw,112px); line-height: .9 }
.c-lead { font-size: 19px; line-height: 1.6; margin: 0; max-width: 480px }
.c-checks { display: flex; flex-direction: column; gap: 12px; font-size: 18px; font-weight: 500; margin: 0; padding: 0; list-style: none }
.c-checks li { display: flex; gap: 12px; align-items: center }
.c-checks span { width: 32px; height: 32px; border-radius: 50%; background: var(--plum); color: var(--lilac); display: flex; align-items: center; justify-content: center; font-size: 16px; flex: none }
.btn-wa2 { align-self: flex-start; background: var(--lemon); box-shadow: 0 6px 0 var(--plum); padding: 14px 30px; font-size: 24px }
.btn-wa2:hover { transform: translateY(-2px) }
.form-card { background: var(--cream); border: 2px solid var(--plum); box-shadow: 0 8px 0 var(--plum); border-radius: 36px; padding: clamp(22px,3vw,36px) }
.form { display: flex; flex-direction: column; gap: 18px }
.form[hidden], .sent[hidden] { display: none }
.f-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,200px),1fr)); gap: 16px }
.fld { display: flex; flex-direction: column; gap: 6px; font-family: var(--display); font-size: 20px }
.fld input, .fld textarea { font: 500 16px var(--body); padding: 14px 20px; border: 2px solid var(--plum); border-radius: 999px; background: #fff; color: var(--plum); outline: none; width: 100% }
.fld textarea { padding: 16px 20px; border-radius: 26px; resize: vertical }
.fld input:focus, .fld textarea:focus { box-shadow: 0 0 0 4px var(--yellow) }
.fld input[aria-invalid="true"], .fld textarea[aria-invalid="true"] { border-color: var(--red) }
.fld-err { font: 500 14px var(--body); color: var(--red) }
.fld-err:empty { display: none }
.need { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.need legend { font-family: var(--display); font-size: 20px; padding: 0; margin-bottom: 8px }
.chips { display: flex; flex-wrap: wrap; gap: 8px }
.chip { all: unset; cursor: pointer; border: 2px solid var(--plum); border-radius: 999px; padding: 12px 20px; font-size: 15px; font-weight: 500; background: #fff; transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .2s, background .2s }
.chip:hover { transform: translateY(-2px); box-shadow: 0 3px 0 var(--plum) }
.chip[aria-pressed="true"] { background: var(--yellow) }
.f-foot { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap }
.f-seats { display: flex; gap: 6px; align-items: center; font-size: 14px; font-weight: 700 }
.f-seats .seat-dot { width: 18px; height: 18px }
.submit { all: unset; cursor: pointer; background: var(--yellow); border: 2px solid var(--plum); box-shadow: 0 6px 0 var(--plum); border-radius: 999px; padding: 14px 34px; font-family: var(--display); font-size: 24px; transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .2s, background .2s }
.submit:hover { transform: translateY(-2px) }
.submit:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--plum) }
.submit[disabled] { cursor: progress; opacity: .7 }
.f-note { font-size: 13px; color: var(--plum-soft) }
.f-alert { background: var(--peach); border: 2px solid var(--plum); border-radius: 22px; padding: 14px 18px; font-size: 15px; line-height: 1.55 }
.f-alert[hidden] { display: none }
.f-alert a { font-weight: 700; text-decoration: underline }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.sent { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; min-height: 320px; justify-content: center }
.sent-burst { width: 96px; height: 96px; background: var(--lemon); font-family: var(--display); font-size: 36px }
.sent h3 { font-family: var(--display); font-weight: 400; font-size: 48px; line-height: 1; margin: 0 }
.sent p { margin: 0; font-size: 17px; line-height: 1.6 }
.sent .btn-wa3 { background: var(--yellow); box-shadow: 0 5px 0 var(--plum); padding: 12px 26px; font-size: 22px }
.again { all: unset; cursor: pointer; border: 2px solid var(--plum); border-radius: 999px; padding: 8px 22px; font-family: var(--display); font-size: 20px }

/* ---------- Footer ---------- */
.foot { position: relative; background: var(--plum); color: var(--cream); padding: 130px 20px 40px; --sc: var(--lilac) }
.foot-in { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 64px }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,260px),1fr)); gap: 40px }
.foot-cta { display: flex; flex-direction: column; gap: 20px; min-width: min(100%,260px) }
.foot-big { font-family: var(--display); font-size: clamp(60px,9vw,128px); line-height: .88 }
.btn-foot { align-self: flex-start; background: var(--yellow); border-radius: 999px; box-shadow: 0 5px 0 #C9A22E; padding: 13px 30px; font-family: var(--display); font-size: 22px; color: var(--plum) }
.btn-foot:hover { transform: translateY(-2px); color: var(--plum) }
.foot-col { display: flex; flex-direction: column; gap: 14px; font-size: 17px }
.foot-col.ex { gap: 10px }
.foot-col h2 { font-family: var(--display); font-weight: 400; font-size: 26px; color: var(--yellow); margin: 0 }
.foot-col a { color: var(--cream) }
.foot-col a:hover { color: var(--yellow) }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: contents }
.foot-base { border-top: 1px solid rgba(255,246,227,.25); padding-top: 22px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; color: #E6CFDC }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #wmc { display: none }
  .acc { animation: none }
  .rv { opacity: 1 !important; translate: none !important; scale: 1 !important; transition: none }
  .wob, .wob2, .mq { animation: none }
  html { scroll-behavior: auto }
}