/* Shakhboota v2 */
/* Exact branded heading lettering is taken from Sarah's font-outlined SVG, so it does not depend on local font installation. */
/* Shakhboota — Sarah's 1920px Illustrator homepage, adapted into a responsive, accessible frontend. */
:root{--bg:#fcf8f0;--ink:#080707;--yellow:#f7d260;--pink:#f2a6a1;--green:#a9c09c;--blue:#90c2d6;--purple:#c4aede;--muted:#4f4a45;--display:'Chaloops Bold','Chaloops',system-ui,sans-serif;--round:'Chaloops Medium','Chaloops','Chalkboard SE','Comic Sans MS',system-ui,sans-serif;--arabic:'Gumela Arabic','GumelaArabic',Tahoma,'Segoe UI',sans-serif;--body:'Chalkboard SE','Chalkboard','Comic Sans MS','Segoe Print',system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:98px}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;overflow-x:hidden;-webkit-font-smoothing:antialiased}img,svg{max-width:100%}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}button:disabled,input:disabled{cursor:not-allowed}[hidden]{display:none!important}p{line-height:1.46}h1,h2{margin:0;line-height:1.11;font-weight:700;letter-spacing:-.02em}h1,h2{font-family:var(--display);font-weight:700;letter-spacing:-.02em}h2 em{font-style:normal}.page-width{width:min(1510px,calc(100% - 112px));margin:0 auto}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.skip-link{position:absolute;z-index:500;top:-100px;left:14px;background:#111;color:#fff;padding:12px}.skip-link:focus{top:10px}#main{isolation:isolate}
/* Site header */
.header{background:rgba(252,248,240,.97);border-bottom:1px solid rgba(2,2,2,.14);position:sticky;top:0;z-index:80;backdrop-filter:blur(10px)}.nav-inner{min-height:98px;display:flex;align-items:center;gap:26px;justify-content:space-between}.brand{width:225px;display:block;flex:0 0 auto;line-height:0}.brand img{width:225px;height:auto;max-height:80px;object-fit:contain}.primary-nav{display:flex;align-items:center;justify-content:center;gap:clamp(18px,2.25vw,43px);margin:auto}.primary-nav a{font-size:16px;white-space:nowrap;transition:opacity .2s}.primary-nav a:hover{opacity:.55}.nav-actions{display:flex;align-items:center;gap:10px}.lang-toggle{border:1.6px solid #111;background:transparent;padding:10px 17px;border-radius:40px;font-size:16px;min-width:82px}.lang-toggle:hover{background:#fff}.menu-button{display:none;appearance:none;background:none;border:0;padding:10px;width:44px}.menu-button span{display:block;width:25px;height:2px;background:#111;margin:5px auto}.mobile-menu{border-top:1px solid #ddd;padding:15px 28px 22px;display:flex;flex-direction:column;gap:17px;background:var(--bg)}.mobile-menu a{font-size:18px}
/* Branded soft corner shapes */
.canvas-section{position:relative;overflow:hidden;background:var(--bg)}.blob{position:absolute;display:block;pointer-events:none;z-index:0}.hero-green{width:320px;height:310px;left:-225px;top:-30px;background:var(--green);border-radius:41% 59% 58% 42% / 54% 48% 52% 46%;transform:rotate(-7deg)}.hero-coral{width:290px;height:330px;right:-210px;bottom:-105px;background:var(--pink);border-radius:47% 54% 36% 59% / 47% 47% 56% 58%;transform:rotate(14deg)}.story-blue{width:280px;height:410px;left:-215px;bottom:-60px;background:var(--blue);border-radius:48% 52% 62% 38% / 46% 46% 54% 54%;transform:rotate(-10deg)}.story-peach{width:245px;height:380px;right:-175px;top:70px;background:var(--pink);border-radius:40% 55% 51% 49%/54% 48% 52% 46%}.how-blue{width:300px;height:300px;left:-236px;top:30px;background:var(--blue);border-radius:50%}.worlds-yellow{width:280px;height:300px;right:-230px;bottom:-55px;background:var(--yellow);border-radius:45% 55% 44% 57%;transform:rotate(32deg)}.events-purple{width:250px;height:300px;left:-174px;top:-130px;background:var(--purple);border-radius:55% 45% 49% 55%;transform:rotate(25deg)}.events-green{width:280px;height:320px;right:-200px;bottom:-140px;background:var(--green);border-radius:60% 40% 45% 55%}.join-green{width:340px;height:350px;right:-200px;top:-115px;background:var(--green);border-radius:55% 45% 45% 55% / 50% 45% 55% 50%;transform:rotate(-16deg)}
/* Hero matches Sarah's layout: typography left, flower activity oval right */
.hero{min-height:665px;display:flex;align-items:center}.hero-layout{display:grid;grid-template-columns:45% 55%;align-items:center;gap:2%;padding:80px 0 85px;z-index:1;position:relative}.hero-copy{padding-left:3%;max-width:650px}.hero h1{font-size:clamp(3.2rem,4.5vw,5.6rem);line-height:1.15;font-weight:700;letter-spacing:-.025em}.hero-arabic{display:inline-block;width:min(82%,440px);max-width:100%;margin-inline-start:14%;margin-top:12px;vertical-align:middle}.hero-arabic img{display:block;width:100%;height:auto;object-fit:contain}.hero-copy p{font-size:clamp(15px,1.3vw,19px);line-height:1.3;max-width:440px;margin:35px 0 26px}.scroll-cue{display:inline-flex;gap:12px;align-items:center;font-size:13px;letter-spacing:.01em}.scroll-cue span:last-child{font-size:21px}.hero-art{height:530px;position:relative;display:grid;place-items:center}.hero-splash{position:absolute;inset:53px 40px 55px 40px;background:var(--purple);border-radius:55% 45% 58% 42% / 48% 60% 40% 52%;transform:rotate(-12deg)}.hero-photo{position:absolute;width:81%;height:85%;top:8%;left:11%;border:3px solid var(--ink);border-radius:54% 46% 50% 50% / 46% 56% 44% 54%;transform:rotate(-7deg);overflow:hidden;background:#e0cabb;box-shadow:0 0 0 11px rgba(252,248,240,.22)}.hero-photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.12) rotate(7deg)}.hero-sticker{position:absolute;left:-4%;top:6%;width:140px;height:130px;z-index:3;display:flex;align-items:center;justify-content:center;line-height:1.25;text-align:center;background:var(--yellow);border:1.6px solid #111;border-radius:44% 56% 51% 49%;font-family:var(--round);font-size:20px;transform:rotate(-10deg);box-shadow:8px 7px 0 rgba(0,0,0,.17)}.hero-mascots{width:220px;position:absolute;right:4%;bottom:0;z-index:4;filter:drop-shadow(0 5px 0 rgba(252,248,240,.65))}.hero-spark{width:56px;height:56px;position:absolute;top:0;right:0;z-index:3}
/* Founders are a central hero section in Sarah's reference */
.story-section{min-height:530px;display:flex;align-items:center}.story-layout{display:grid;grid-template-columns:46% 54%;gap:2%;position:relative;z-index:1;align-items:center;padding:54px 0 70px}.founder-portraits{position:relative;width:100%;height:405px}.founder-image{position:absolute;max-width:210px;aspect-ratio:1;isolation:isolate}.founder-image img{width:100%;height:100%;object-fit:cover;object-position:center 21%;border-radius:50%;border:3px solid #111;display:block}.founder-image span{font-family:var(--round);font-weight:700;background:var(--green);border-radius:12px;padding:5px 13px;position:absolute;white-space:nowrap;font-size:18px;top:47%;left:78%;z-index:2}.founder-sarah{top:0;left:14%;width:195px}.founder-raneem{width:205px;left:37%;bottom:0}.founder-raneem span{background:var(--pink);left:auto;right:68%;top:28%}.story-copy{max-width:680px}.story-copy h2{font-size:clamp(2.5rem,4.3vw,4.7rem);line-height:1.09;margin-bottom:30px;max-width:600px}.story-copy p{max-width:590px;font-size:17px;line-height:1.45;margin:17px 0}
/* More than colouring */
.how-section{min-height:490px;display:flex;align-items:center}.how-layout{position:relative;z-index:1;display:grid;grid-template-columns:53% 47%;align-items:center;gap:20px;padding:75px 0 80px}.how-copy h2{font-size:clamp(2.6rem,4.4vw,5.05rem);margin-bottom:28px}.handwritten-values{margin:0;padding:0 0 0 28px;list-style:none;font-family:var(--round);font-weight:800;font-size:clamp(17px,1.65vw,24px);line-height:1.7}.handwritten-values li{position:relative}.handwritten-values li::before{content:'–';position:absolute;left:-26px;font-family:var(--body);font-weight:400}.how-photo-wrap{height:380px;max-width:640px;position:relative;display:grid;place-items:center}.how-yellow{position:absolute;inset:11% 5% -3% 6%;background:var(--yellow);border-radius:55% 45% 55% 45%;transform:rotate(14deg)}.how-photo-wrap img{position:relative;width:92%;height:90%;object-fit:cover;border:2.5px solid #111;border-radius:50% 50% 46% 54% / 46% 52% 48% 54%;transform:rotate(-7deg)}
/* Three box mockups and original Arabic product names */
.worlds-section{padding:52px 0 98px}.section-center{text-align:center;font-size:clamp(3rem,4.9vw,5.5rem);margin:0 auto 45px}.kit-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}.kit-card{min-width:0}.world-cta{display:flex;flex-direction:column;align-items:center;justify-content:start;text-align:center;width:100%;border:0;background:transparent;color:var(--ink);padding:0;transition:transform .25s}.world-cta:focus-visible{border-radius:16px}.world-cta > img{width:100%;aspect-ratio:1.09;object-fit:cover;border-radius:28px;display:block}.world-cta strong{margin-top:14px;font-size:clamp(27px,2.75vw,48px);font-family:var(--arabic);font-weight:900;line-height:1.12;letter-spacing:-.03em}.world-cta span{font-family:var(--round);font-size:13px;color:var(--muted);margin-top:7px;text-decoration:underline;text-underline-offset:3px}.small-disclosure{font-size:13px;color:#5e5853;margin:20px 0 0;text-align:center}
.eyebrow{font-family:var(--round);font-size:13px;font-weight:700}.button{border-radius:35px;padding:12px 24px;border:1.5px solid #111;display:inline-flex;justify-content:center;align-items:center;gap:5px}.button-dark{background:#111;color:#fff}.button-yellow{background:var(--yellow);color:#111}.button:hover{filter:brightness(.94)}
/* Lavender interactive play studio */
.play-section{position:relative;background:var(--purple);padding:82px 0 94px;overflow:hidden}.play-layout{display:grid;grid-template-columns:minmax(0,37fr) minmax(0,63fr);gap:5%;align-items:center;position:relative;z-index:1}.play-intro h2{font-size:clamp(3.8rem,5.4vw,6.4rem);line-height:1.03;max-width:500px}.play-intro p{max-width:410px;font-size:17px;margin:24px 0 15px}.play-intro .play-note{font-size:14px;max-width:310px;margin-top:34px}.play-mascots{width:200px;margin-top:25px;display:block}.studio{background:#fff;border:3px solid #080707;border-radius:28px;box-shadow:9px 9px 0 #111;overflow:hidden;max-width:800px;min-width:0}.studio-top{min-height:57px;padding:11px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px}.studio-top>span{font-size:15px;font-family:var(--round)}.studio-top-actions{display:flex;align-items:center;gap:7px}.studio-top-actions button{border:0;background:#f4f1ec;border-radius:9px;padding:7px 13px;min-height:34px;font-size:16px}.studio-top-actions .download-art{background:var(--yellow);border:1px solid #111;border-radius:21px;font-size:13px;padding:7px 13px}.canvas-wrap{position:relative;aspect-ratio:700/520;background:white;overflow:hidden;border-top:1px solid #ddd;border-bottom:1px solid #ddd;touch-action:none}.canvas-wrap canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.canvas-wrap #outline-layer{pointer-events:none}.studio-bottom{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 15px}.templates,.paint-swatches{display:flex;align-items:center;gap:6px}.templates button{padding:5px;border:1px solid #aaa;background:#fff;border-radius:7px;width:51px;height:51px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto;line-height:0}.templates button.active{background:var(--yellow);border-color:#111}.templates button img{display:block;flex:0 0 auto;width:100%;height:100%;max-width:100%;max-height:100%;min-width:0;min-height:0;object-fit:contain;object-position:center}.paint-swatches button{border:1px solid #bbb;width:23px;height:23px;border-radius:50%;background:var(--sw)}.paint-swatches button.active{outline:2px solid #111;outline-offset:2px}
/* Events shows two activation photos from Sarah's original artboard */
.events-section{padding:85px 0 97px}.events-inner{position:relative;z-index:1}.events-title{text-align:center;font-size:clamp(2.6rem,4.4vw,5rem);margin:0 auto 35px}.events-collage{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:2%;margin:0 auto 30px;max-width:1300px}.events-image{height:520px;overflow:hidden;border-radius:29% 24% 14% 19% / 15% 16% 15% 15%;background:#eee2da;box-shadow:0 1px 1px rgba(0,0,0,.08)}.events-image.a{transform:rotate(-4deg);max-width:530px;margin:0 auto}.events-image.b{transform:rotate(4deg);max-width:660px;margin:0 auto;height:435px}.events-image img{width:100%;height:100%;object-fit:cover}.events-inner>p{font-size:16px;max-width:900px;margin:5px 0}.events-inner>.small-disclosure{font-size:12px;max-width:900px;text-align:left;color:#777;margin-top:18px}.text-cta{font-size:clamp(23px,2.5vw,35px);background:transparent;padding:3px 0;border:0;text-decoration:underline;text-underline-offset:7px;margin-top:12px;text-align:left}.text-cta:hover{opacity:.65}
/* Lemon yellow launch announcement; email intake intentionally disabled until backend */
.join-section{background:var(--yellow);min-height:540px;position:relative;display:flex;align-items:center;overflow:hidden}.join-inner{position:relative;z-index:1;padding:78px 0 88px}.join-inner h2{font-size:clamp(3.5rem,5.6vw,6.8rem);line-height:1.06}.join-inner>p{max-width:580px;font-size:17px;line-height:1.38}.waitlist-form{display:flex;gap:14px;margin-top:31px;max-width:720px}.waitlist-form input[type=email]{border:2px solid #111;border-radius:40px;background:#fff;padding:15px 23px;min-width:0;flex:1}.waitlist-form .button{padding:12px 26px;white-space:nowrap}.waitlist-form input:disabled{opacity:1}.waitlist-form button:disabled{opacity:1}.consent{display:flex;align-items:flex-start;gap:8px;max-width:700px;font-size:13px;margin-top:15px}.consent input{margin-top:4px}.form-result{font-weight:600;font-size:13px}.join-inner .join-note{font-size:12px;margin-top:18px}.honeypot{display:none!important}
/* Footer */
.footer{background:var(--bg);padding:64px 0 25px}.footer-inner{display:flex;justify-content:space-between;gap:35px;align-items:start}.footer-brand{width:290px}.footer-brand img{width:215px;height:auto}.footer-brand p{font-family:var(--round);font-size:27px;font-weight:700;max-width:235px;line-height:1.16;margin:24px 0}.footer-links{display:grid;grid-template-columns:repeat(2,minmax(0,150px));gap:17px 26px;font-size:14px}.footer-links a:hover{text-decoration:underline}.footer-bottom{border-top:1px solid #ded7cd;display:flex;gap:16px;align-items:center;justify-content:space-between;margin-top:37px;padding-top:20px;font-size:12px;color:#666}.text-action{border:0;background:none;text-decoration:underline;color:inherit;font-size:12px}
.close-btn{border:0;background:transparent;font-size:32px;line-height:1;cursor:pointer}.dialog-layer{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px}.dialog-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.52)}.dialog{position:relative;z-index:1;width:min(100%,520px);background:#fffdf7;border:2px solid #111;border-radius:28px;padding:37px;box-shadow:10px 10px 0 var(--yellow)}.dialog h2{font-size:35px;line-height:1.14}.dialog .dialog-close{position:absolute;right:14px;top:12px}.dialog p{font-size:15px}.dialog .disclosure{background:#fff2c1;padding:13px;border-radius:12px;font-size:14px}
/* Reveal and motion */
.reveal.in-view{opacity:1;transform:translateY(0)}
/* RTL: content mirrors, while original logos, illustration and product order remain intentional */
[dir=rtl] body{font-family:var(--arabic)}[dir=rtl] .primary-nav a,[dir=rtl] .mobile-menu a{font-family:var(--arabic)}[dir=rtl] .hero-copy{padding-left:0;padding-right:3%}[dir=rtl] .hero-arabic{margin-inline-start:0}[dir=rtl] .founder-image span{font-family:var(--arabic)}[dir=rtl] .handwritten-values{padding-left:0;padding-right:28px}[dir=rtl] .handwritten-values li::before{left:auto;right:-26px}[dir=rtl] .events-inner>.small-disclosure,[dir=rtl] .text-cta{text-align:right}[dir=rtl] .drawer{right:auto;left:0;box-shadow:15px 0 60px rgba(0,0,0,.12)}[dir=rtl] .footer-brand p{font-family:var(--arabic)}[dir=rtl] .story-copy p{line-height:1.8}[dir=rtl] .hero-copy p{line-height:1.85}[dir=rtl] .hero h1{letter-spacing:0}[dir=rtl] .hero-sticker{font-family:var(--arabic)}[dir=rtl] .how-copy h2,[dir=rtl] .story-copy h2,[dir=rtl] .section-center,[dir=rtl] .play-intro h2,[dir=rtl] .join-inner h2{letter-spacing:0}
/* Tablets */
@media(max-width:1050px){.page-width{width:min(100% - 64px,950px)}.brand,.brand img{width:175px}.primary-nav{gap:14px}.primary-nav a{font-size:13px}.nav-inner{min-height:80px}.hero{min-height:600px}.hero-layout{padding:60px 0}.hero-art{height:420px}.hero-sticker{width:116px;height:108px;font-size:17px}.hero-mascots{width:180px}.founder-image{max-width:175px}.founder-sarah{left:4%;width:170px}.founder-raneem{left:34%;width:180px}.how-photo-wrap{height:300px}.play-layout{grid-template-columns:35% 65%;gap:3%}.play-intro h2{font-size:4.4rem}.events-image{height:400px}.events-image.b{height:340px}}
@media(max-width:760px){.page-width{width:calc(100% - 38px)}.header{position:sticky}.nav-inner{min-height:70px;gap:8px}.brand,.brand img{width:150px}.primary-nav{display:none}.menu-button{display:block}.nav-actions{gap:6px}.lang-toggle{font-size:13px;padding:8px 11px;min-width:62px}.mobile-menu{display:flex}.hero{min-height:0}.hero-layout{grid-template-columns:1fr;gap:20px;padding:60px 0 37px}.hero-copy{padding:0 4%;max-width:none}.hero h1{font-size:clamp(42px,8vw,68px)}.hero-arabic{margin-inline-start:19%}.hero-copy p{max-width:520px;font-size:16px;margin:23px 0 18px}.hero-art{height:420px;max-width:590px;width:100%;margin:0 auto}.hero-photo{width:78%;height:81%;left:11%;top:10%}.hero-sticker{top:4%;left:1%;font-size:16px}.hero-mascots{bottom:0;right:0;width:165px}.hero-spark{right:1%}.story-layout{grid-template-columns:1fr;gap:15px;padding:25px 0 65px}.founder-portraits{height:315px;max-width:500px;order:1}.story-copy{order:2}.founder-sarah{top:2%;left:12%;width:175px}.founder-raneem{bottom:0;left:42%;width:175px}.story-copy h2{font-size:clamp(37px,7.3vw,57px);margin-bottom:18px}.story-copy p{font-size:15px}.how-layout{grid-template-columns:1fr;gap:35px;padding:55px 0 70px}.how-copy h2{font-size:clamp(38px,7vw,58px)}.handwritten-values{font-size:20px}.how-photo-wrap{margin:0 auto;height:320px;width:min(100%,540px)}.worlds-section{padding:35px 0 70px}.section-center{font-size:clamp(38px,7vw,55px);margin-bottom:30px}.kit-cards{gap:15px}.world-cta > img{border-radius:18px}.world-cta strong{font-size:clamp(23px,4.5vw,32px)}.world-cta span{font-size:11px}.play-section{padding:65px 0 75px}.play-layout{grid-template-columns:1fr;gap:25px}.play-intro h2{font-size:clamp(55px,10vw,82px)}.play-intro p{max-width:520px;font-size:16px;margin:13px 0}.play-intro .play-note{margin-top:15px}.play-mascots{width:150px;margin:5px 0}.studio{max-width:650px;width:100%;margin:auto}.events-section{padding:57px 0 75px}.events-title{font-size:clamp(37px,7vw,58px)}.events-image{height:330px}.events-image.b{height:290px}.join-section{min-height:480px}.join-inner{padding:65px 0}.join-inner h2{font-size:clamp(53px,9vw,80px)}.footer{padding-top:42px}}
@media(max-width:480px){.brand,.brand img{width:128px}.nav-actions{gap:4px}.nav-inner{min-height:64px}.lang-toggle{padding:7px 9px}.hero-layout{padding:45px 0 20px;gap:3px}.hero h1{font-size:clamp(35px,9vw,49px)}.hero-arabic{width:min(84%,320px);margin-inline-start:12%}.hero-copy p{font-size:14px;margin-top:17px}.hero-art{height:295px}.hero-photo{height:83%;width:80%;left:10%;top:8%}.hero-sticker{width:80px;height:77px;font-size:11px;left:-1%;top:1%}.hero-mascots{width:120px;right:1%;bottom:0}.hero-spark{width:35px}.hero-green{left:-270px}.story-layout{padding-top:30px}.founder-portraits{height:260px}.founder-sarah{width:145px;left:8%}.founder-raneem{width:145px;left:43%}.founder-image span{font-size:12px;padding:4px 7px}.story-copy h2{font-size:40px}.how-layout{padding:47px 0 53px}.how-copy h2{font-size:39px}.handwritten-values{font-size:17px;line-height:1.75}.how-photo-wrap{height:235px}.worlds-section{padding:33px 0 57px}.section-center{font-size:34px}.kit-cards{gap:9px}.world-cta > img{border-radius:13px;aspect-ratio:.9;object-fit:cover}.world-cta strong{font-size:23px}.world-cta span{font-size:9px;line-height:1.2}.small-disclosure{font-size:11px}.play-section{padding:49px 0 60px}.play-intro h2{font-size:55px}.play-mascots{width:145px;margin:0}.studio{border-width:2px;border-radius:17px;box-shadow:5px 5px 0 #111}.studio-top{padding:7px 9px;min-height:45px}.studio-top>span{font-size:12px}.studio-top-actions{gap:3px}.studio-top-actions button{padding:4px 8px;min-height:29px}.studio-top-actions .download-art{font-size:10px;padding:5px 7px}.studio-bottom{padding:8px 7px;gap:8px;flex-wrap:wrap}.templates button{width:35px;height:35px}.paint-swatches button{width:18px;height:18px}.events-section{padding:56px 0}.events-title{font-size:36px;margin-bottom:20px}.events-collage{gap:5%;margin-bottom:25px}.events-image{height:210px;border-radius:25px}.events-image.b{height:195px}.events-inner>p{font-size:13px}.text-cta{font-size:26px}.join-section{min-height:0}.join-inner{padding:60px 0 65px}.join-inner h2{font-size:50px}.join-inner>p{font-size:14px}.waitlist-form{gap:8px;margin-top:20px;flex-direction:column;max-width:330px}.waitlist-form input[type=email]{padding:13px 17px}.waitlist-form .button{padding:12px 17px}.footer-inner{flex-direction:column;gap:20px}.footer-brand p{font-size:25px;margin-top:12px}.footer-links{grid-template-columns:repeat(2,minmax(0,130px))}.footer-bottom{align-items:start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.world-cta{transition:none}}


.world-cta:hover{transform:translateY(-4px)}
.coming-art{display:flex;justify-content:center;align-items:center;min-height:120px;margin-top:-10px}
.coming-art img{max-width:155px;max-height:120px;object-fit:contain}
.coming-label{display:inline-block;background:var(--pink);border-radius:18px;padding:5px 17px;margin:5px 0 16px;font-family:var(--arabic);font-size:19px;font-weight:bold}
.coming-action{margin-top:15px;text-decoration:none;font-family:var(--round);font-size:16px}
.dialog p{line-height:1.55}
[dir=rtl] .coming-action{direction:rtl}
[dir=rtl] .hero-arabic{margin-inline-start:12%}
@media(max-width:480px){.hero-arabic{width:min(86%,300px);margin-top:9px}.dialog{padding:26px 22px}.coming-art{min-height:93px}.coming-art img{height:90px}}

/* Studio: template controls are true square buttons with contained, vertically centered artwork. */
.templates button img{vertical-align:middle}

.primary-nav a,.lang-toggle,.mobile-menu a,.button,.hero-sticker,.eyebrow,.text-cta,.coming-action,.coming-label,.studio-top>span,.studio-top-actions button,.templates button,.close-btn{font-family:var(--round)}

/* 2026-11-06: exact lettering faithfully extracted from supplied outlined Illustrator SVG */
.outline-heading{display:block;width:100%;height:auto;object-fit:contain}
.hero .outline-heading{max-width:630px;margin:0}
.hero .hero-arabic{display:block;width:min(84%,470px);margin:10px 0 0 19%}
.hero .hero-arabic img{width:100%}
.story-copy h2 .outline-heading{max-width:655px}
.how-copy h2 .outline-heading{max-width:900px}
.section-center .outline-heading{max-width:1000px;margin-inline:auto}
.play-intro h2 .outline-heading{max-width:450px}
.events-title .outline-heading{max-width:1200px;margin-inline:auto}
.join-inner h2 .outline-heading{max-width:920px}
.kit-outline-label img{width:auto;height:auto;max-height:55px;max-width:100%;display:block;margin:0 auto}
.kit-outline-label{display:flex;justify-content:center;align-items:center;min-height:56px;margin-top:11px!important}
/* Body copy keeps text selectable and accessible; title artwork stays crisp. */
body{font-family:var(--body)}
.hero-copy p,.story-copy p,.play-intro p,.events-inner>p,.join-inner>p,.small-disclosure{font-family:var(--body)}
.hero h1{font-size:0;line-height:1.0}
.hero .hero-arabic{line-height:1}
.how-layout{grid-template-columns:minmax(0,60fr) minmax(0,40fr)}
.events-title{line-height:1}
.studio-bottom .templates button{display:grid;place-items:center}
@media(max-width:1050px){.how-layout{grid-template-columns:58% 42%}}
@media(max-width:760px){.how-layout{grid-template-columns:1fr}.hero .outline-heading{width:100%}.hero .hero-arabic{max-width:360px;width:78%}.join-inner h2 .outline-heading{max-width:100%}}
@media(max-width:480px){.hero .hero-arabic{max-width:300px;width:74%;margin:6px 0 0 20%}.kit-outline-label img{max-height:44px}.kit-outline-label{min-height:47px}.join-inner h2 .outline-heading{max-width:100%}}
[dir=rtl] .hero h1{font-size:clamp(35px,6vw,70px);line-height:1.16}
[dir=rtl] .hero .hero-arabic{margin-inline-start:0}

/* Exact SVG-outlined navbar lettering, regular text for the Arabic-language mode. */
.primary-nav .nav-outline-img{display:block;height:clamp(17px,1.6vw,26px);width:auto;max-width:none}
.primary-nav .nav-readable{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}
[dir=rtl] .primary-nav .nav-outline-img{display:none}
[dir=rtl] .primary-nav .nav-readable{position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip:auto!important;white-space:normal!important}

/* FIX: the generic card-image aspect ratio was also styling the nested Arabic lettering PNGs,
   forcing their natural wide letterforms into a ~1:1 clipped viewport. Scope photo rules
   to the direct product image; preserve the Arabic labels' intrinsic aspect ratios. */
.world-cta > img:first-child{width:100%;aspect-ratio:1.09;object-fit:cover;border-radius:28px;display:block}
.world-cta .kit-outline-label > img{width:auto;height:auto;aspect-ratio:auto;object-fit:contain;object-position:center;border-radius:0;max-width:100%;max-height:55px;display:block;margin:0 auto}
@media(max-width:760px){.world-cta > img:first-child{border-radius:18px}}
@media(max-width:480px){.world-cta > img:first-child{border-radius:13px;aspect-ratio:.9}.world-cta .kit-outline-label > img{max-height:44px}}

/* ==========================================================================
   v2 — fixes + "alive" layer
   ========================================================================== */

/* Self-hosted Baloo Bhaijaan 2 (SIL Open Font License) — Arabic + Latin fallback so Windows never lands on Comic Sans */
@font-face{font-family:'Baloo Bhaijaan 2';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/baloo-bhaijaan-2-arabic-500-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Baloo Bhaijaan 2';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/baloo-bhaijaan-2-arabic-800-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Baloo Bhaijaan 2';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/baloo-bhaijaan-2-latin-500-normal.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}
@font-face{font-family:'Baloo Bhaijaan 2';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/baloo-bhaijaan-2-latin-800-normal.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{
 --display:'Chaloops Bold','Chaloops','Baloo Bhaijaan 2',system-ui,sans-serif;
 --round:'Chaloops Medium','Chaloops','Chalkboard SE','Baloo Bhaijaan 2',system-ui,sans-serif;
 --arabic:'Gumela Arabic','GumelaArabic','Baloo Bhaijaan 2',Tahoma,sans-serif;
 --body:'Chalkboard SE','Chalkboard','Baloo Bhaijaan 2',system-ui,sans-serif;
 --bounce:cubic-bezier(.34,1.56,.64,1);
}
[dir=rtl] body{font-family:var(--arabic)}
[dir=rtl] h1,[dir=rtl] h2{font-family:var(--arabic);font-weight:800;letter-spacing:0;line-height:1.25}

/* Content always sits above the decorative blobs (fixes the clipped kit labels on phones) */
.page-width{position:relative;z-index:1}

/* Images keep their ratio (width/height attributes are only there to stop layout jumps) */
.world-cta > img,.founder-image img,.events-image img{height:auto}
.founder-image img,.events-image img{height:100%}
/* Nav lettering: every outlined word renders at the same letter size */
.primary-nav .nav-outline-img{height:calc(clamp(17px,1.6vw,26px) * var(--r,1))}

/* Without JavaScript nothing stays hidden */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .8s var(--bounce)}
.js .reveal.in-view{opacity:1;transform:none}

/* ---------- Headings "write themselves" in ---------- */
.js .reveal .outline-heading,.js .hero-arabic img{transition:clip-path 1.3s cubic-bezier(.65,.05,.25,1) .15s}
.js .reveal:not(.in-view) .outline-heading{clip-path:inset(-10% 100% -10% 0)}
.js .reveal.in-view .outline-heading{clip-path:inset(-10% 0 -10% 0)}
.js .hero-copy:not(.in-view) .hero-arabic img{clip-path:inset(-10% 0 -10% 100%)}
.js .hero-copy.in-view .hero-arabic img{clip-path:inset(-10% 0 -10% 0);transition-delay:1.05s;transition-duration:1.1s}
.js[dir=rtl] .reveal h1,.js[dir=rtl] .reveal h2{transition:clip-path 1.2s cubic-bezier(.65,.05,.25,1) .15s}
.js[dir=rtl] .reveal:not(.in-view) h1>span:first-child,.js[dir=rtl] .reveal:not(.in-view) h2{clip-path:inset(-20% 0 -20% 100%)}
.js[dir=rtl] .reveal.in-view h1>span:first-child,.js[dir=rtl] .reveal.in-view h2{clip-path:inset(-20% 0 -20% 0)}
.js[dir=rtl] .reveal h1>span:first-child{display:inline-block;transition:clip-path 1.2s cubic-bezier(.65,.05,.25,1) .15s}

/* ---------- Header intro ---------- */
.js .brand img{transition:transform .8s var(--bounce),opacity .5s;transform:scale(.6) rotate(-8deg);opacity:0}
.js.ready .brand img{transform:none;opacity:1}
.brand:hover img{animation:wiggle .6s ease}
.js .primary-nav a{transition:transform .6s var(--bounce),opacity .5s,translate .3s var(--bounce);transform:translateY(-14px);opacity:0}
.js.ready .primary-nav a{transform:none;opacity:1}
.js.ready .primary-nav a:nth-child(2){transition-delay:.06s}.js.ready .primary-nav a:nth-child(3){transition-delay:.12s}
.js.ready .primary-nav a:nth-child(4){transition-delay:.18s}.js.ready .primary-nav a:nth-child(5){transition-delay:.24s}
.primary-nav a:hover{opacity:1!important;translate:0 -3px}
.primary-nav a:hover .nav-outline-img{animation:wiggle .5s ease}
.lang-toggle{transition:transform .3s var(--bounce),background .2s}
.lang-toggle:hover{transform:rotate(-4deg) scale(1.06);background:var(--yellow)}

/* ---------- Hero life ---------- */
.hero-sticker{cursor:pointer;animation:stickerWobble 5s ease-in-out infinite;transition:scale .3s var(--bounce)}
.hero-sticker:hover{scale:1.1}
.hero-mascots{animation:bob 3.2s ease-in-out infinite}
.play-mascots{animation:bob 3.6s ease-in-out .4s infinite}
.hero-spark{animation:twinkle 2.6s ease-in-out infinite;color:var(--ink)}
.hero-splash{animation:morph 12s ease-in-out infinite alternate}
.hero-photo img{animation:kenburns 14s ease-in-out infinite alternate}
.scroll-cue span[aria-hidden]{display:inline-block;animation:nudge 1.6s ease-in-out infinite}
.blob{animation:morph 14s ease-in-out infinite alternate;will-change:translate}
.blob:nth-of-type(2n){animation-duration:18s;animation-direction:alternate-reverse}
.doodle-star{position:absolute;width:26px;height:26px;color:var(--ink);pointer-events:none;animation:twinkle 3s ease-in-out infinite}

/* ---------- Story ---------- */
/* Founder name badges sit OUTSIDE the portraits with a clear gap */
.founder-image span{left:calc(100% + 24px);right:auto;top:47%}
.founder-raneem span{left:auto;right:calc(100% + 24px);top:28%}
@media(max-width:760px){.founder-image span{left:calc(100% + 18px)}.founder-raneem span{left:auto;right:calc(100% + 18px)}}
@media(max-width:480px){.founder-raneem span{top:50%}}
.founder-image{animation:float 6s ease-in-out infinite}
.founder-raneem{animation-delay:-3s}
.founder-image span{transition:rotate .4s var(--bounce),scale .3s var(--bounce)}
.founder-image:hover span{rotate:-6deg;scale:1.08}
.founder-image img{transition:scale .5s var(--bounce)}
.founder-image:hover img{scale:1.04}

/* ---------- More than colouring: items pop in one by one ---------- */
.js .handwritten-values li{opacity:0;translate:-18px 0;transition:opacity .5s,translate .6s var(--bounce)}
.js[dir=rtl] .handwritten-values li{translate:18px 0}
.js .in-view .handwritten-values li{opacity:1;translate:0 0}
.js .in-view .handwritten-values li:nth-child(1){transition-delay:.35s}.js .in-view .handwritten-values li:nth-child(2){transition-delay:.5s}
.js .in-view .handwritten-values li:nth-child(3){transition-delay:.65s}.js .in-view .handwritten-values li:nth-child(4){transition-delay:.8s}
.js .in-view .handwritten-values li:nth-child(5){transition-delay:.95s}
.handwritten-values li::before{transition:rotate .3s}
.handwritten-values li:hover::before{rotate:-25deg}
.how-photo-wrap img{transition:rotate .6s var(--bounce),scale .6s var(--bounce)}
.how-photo-wrap:hover img{rotate:-2deg;scale:1.03}

/* ---------- Kits: 3D tilt, glare, bouncing labels ---------- */
.kit-card:nth-child(2){transition-delay:.12s}.kit-card:nth-child(3){transition-delay:.24s}
.world-cta{position:relative;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:transform .45s var(--bounce)}
.world-cta:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-8px)}
.world-cta.tilting{transition:transform .12s linear}
.world-cta::after{content:'';position:absolute;left:0;right:0;top:0;aspect-ratio:1.09;border-radius:28px;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.5),transparent 55%);opacity:0;transition:opacity .3s}
.world-cta.tilting::after{opacity:1}
.world-cta > img{box-shadow:0 10px 0 -2px rgba(0,0,0,.06);transition:box-shadow .3s}
.world-cta:hover > img{box-shadow:0 18px 30px -12px rgba(0,0,0,.28)}
.js .kit-outline-label img{transition:scale .7s var(--bounce),rotate .7s var(--bounce);scale:.3;rotate:-12deg}
.js .in-view .kit-outline-label img{scale:1;rotate:0deg;transition-delay:.45s}
.world-cta:hover .kit-outline-label img{animation:wiggle .6s ease}
.world-cta span{transition:letter-spacing .3s}
.world-cta:hover span{letter-spacing:.04em}

/* ---------- Play Studio ---------- */
.canvas-wrap.swap{animation:pop .45s var(--bounce)}
.paint-swatches button{transition:scale .25s var(--bounce)}
.paint-swatches button:hover{scale:1.25}
.paint-swatches button.active{scale:1.2}
.templates button{transition:transform .3s var(--bounce)}
.templates button:hover{transform:translateY(-3px) rotate(-6deg)}
.download-art{transition:transform .3s var(--bounce)}
.download-art:hover{transform:scale(1.07) rotate(-2deg)}
.studio{transition:transform .5s var(--bounce)}
.studio.in-view{animation:studioIn .9s var(--bounce)}

/* ---------- Events ---------- */
.js .events-collage:not(.in-view) .events-image.a{rotate:-14deg;translate:-40px 30px}
.js .events-collage:not(.in-view) .events-image.b{rotate:14deg;translate:40px 30px}
.events-image{transition:rotate 1s var(--bounce),translate 1s var(--bounce),scale .5s var(--bounce)}
.events-image:hover{scale:1.03;rotate:-1.5deg}
.events-image.b:hover{rotate:1.5deg}
.text-cta{display:inline-block;transition:transform .3s var(--bounce)}
.text-cta:hover{transform:rotate(-3deg) scale(1.08)}

/* ---------- Join ---------- */
.join-section .outline-heading{transform-origin:left center}
.join-inner.in-view .outline-heading{animation:jelly 1s var(--bounce) 1.3s 1 both}

/* ---------- The scroll pencil ---------- */
.sketch-layer{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:60;overflow:hidden}
.sketch-svg{position:absolute;left:0;top:0;overflow:visible}
.sketch-line{fill:none;stroke:#2b2622;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;opacity:.88}
.sketch-shadow{fill:none;stroke:#2b2622;stroke-width:1.1;stroke-linecap:round;opacity:.28;transform:translate(1.6px,1.2px)}
.sketch-heart{fill:var(--pink);opacity:0;transition:opacity .8s;stroke:none}
.sketch-layer.done .sketch-heart{opacity:.9;animation:heartbeat 1.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.sketch-pencil{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}
.sketch-pencil-inner{position:absolute;left:-122px;top:-15px;width:132px;height:30px;transform-origin:122px 15px;rotate:calc(132deg + var(--tilt,0deg));transition:rotate .25s ease-out;filter:drop-shadow(3px 5px 0 rgba(0,0,0,.14))}
.sketch-pencil-inner svg{display:block;transition:transform .45s var(--bounce);transform-origin:62.5px 15px}
.sketch-layer.erasing .sketch-pencil-inner svg{transform:rotate(180deg)}
.sketch-layer:not(.moving) .sketch-pencil-inner{animation:pencilIdle 2.4s ease-in-out infinite}
.sketch-layer.moving .sketch-pencil-inner{animation:scribble .18s linear infinite}
.sketch-layer.done .sketch-pencil{opacity:0;transition:opacity .6s}
@media(max-width:760px){
 .sketch-line{stroke-width:2.4}
 .sketch-pencil-inner{scale:.62;transform-origin:122px 15px}
}

/* ---------- Confetti + cursor trail ---------- */
.confetti-bit{position:fixed;z-index:400;width:9px;height:14px;border-radius:3px;pointer-events:none;border:1.2px solid rgba(0,0,0,.55)}
.trail-dot{position:fixed;z-index:390;width:9px;height:9px;border-radius:50%;pointer-events:none;mix-blend-mode:multiply}

/* ---------- Dialog pop ---------- */
.dialog-layer:not([hidden]) .dialog{animation:pop .5s var(--bounce)}
.dialog-layer:not([hidden]) .coming-art img{animation:bob 2.4s ease-in-out infinite}

/* ---------- Keyframes ---------- */
@keyframes wiggle{0%,100%{rotate:0deg}25%{rotate:-6deg}50%{rotate:5deg}75%{rotate:-3deg}}
@keyframes stickerWobble{0%,82%,100%{rotate:0deg;scale:1}86%{rotate:-9deg;scale:1.06}90%{rotate:7deg}94%{rotate:-4deg}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes float{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -12px;rotate:1.5deg}}
@keyframes twinkle{0%,100%{scale:1;rotate:0deg;opacity:1}50%{scale:.7;rotate:45deg;opacity:.55}}
@keyframes morph{0%{border-radius:41% 59% 58% 42% / 54% 48% 52% 46%}50%{border-radius:58% 42% 45% 55% / 45% 58% 42% 55%}100%{border-radius:47% 53% 36% 64% / 60% 42% 58% 40%}}
@keyframes kenburns{from{scale:1}to{scale:1.06}}
@keyframes nudge{0%,100%{translate:0 0}50%{translate:0 6px}}
@keyframes pop{0%{scale:.92}60%{scale:1.03}100%{scale:1}}
@keyframes studioIn{0%{rotate:4deg;scale:.94}100%{rotate:0deg;scale:1}}
@keyframes jelly{0%,100%{scale:1 1}30%{scale:1.06 .94}50%{scale:.97 1.04}70%{scale:1.02 .99}}
@keyframes heartbeat{0%,100%{scale:1}15%{scale:1.15}30%{scale:1}45%{scale:1.1}}
@keyframes pencilIdle{0%,100%{translate:0 0}50%{translate:2px -5px}}
@keyframes scribble{0%,100%{translate:0 0}50%{translate:.8px -1px}}

/* ---------- Calm mode: visitors who ask their device for reduced motion ---------- */
.calm *,.calm *::before,.calm *::after{animation:none!important;transition:none!important}
.calm .sketch-pencil-inner svg{transition:transform .3s ease!important}
.calm .reveal,.calm .handwritten-values li,.calm .kit-outline-label img,.calm .brand img,.calm .primary-nav a{opacity:1!important;transform:none!important;translate:none!important;scale:none!important;rotate:none!important;clip-path:none!important}
.calm .outline-heading,.calm .hero-arabic img,.calm h1>span,.calm h2{clip-path:none!important}