@import url('assets/fonts.css');
:root{--green:#143e2b;--gold:#a87322;--ivory:#fffdf7;--muted:#64685e}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ivory);color:var(--green);font-family:Tajawal,Arial,sans-serif;line-height:1.7}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.4}h2{font-size:clamp(25px,3vw,38px);font-weight:800}h3{font-size:22px}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #b88122;outline-offset:5px}.skip{position:absolute;top:-100px;background:white;padding:10px;z-index:50}.skip:focus{top:0}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--green);color:white;border:1px solid var(--green);border-radius:30px;padding:9px 24px;font-size:16px;font-weight:700;transition:transform .2s,box-shadow .2s}.button:hover{transform:translateY(-2px);box-shadow:0 5px 16px #143e2b20}.outline{background:transparent;border-color:var(--gold);color:var(--gold)}.hero{height:clamp(470px,45vw,680px);position:relative;isolation:isolate;overflow:hidden;background:#edf6f6}.hero-art{position:absolute;inset:0;z-index:-3}.hero-art svg{width:100%;height:100%}.hero-copy{width:47%;height:100%;margin-left:0;margin-right:2%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative}.logo{width:175px;height:150px;object-fit:contain;margin-bottom:4px}.hero h1{font-size:clamp(25px,2.8vw,43px);font-weight:800;white-space:nowrap;margin-bottom:12px}.hero p{font-size:clamp(15px,1.55vw,23px);font-weight:500}.discover{margin-top:22px;min-width:210px}.discover span{font-size:26px;line-height:1;color:#e2bc60}.motion{position:absolute;bottom:12px;left:14px;border:1px solid #d5c9a3;background:#fffdf7cf;color:#36503a;border-radius:20px;font-size:11px;padding:5px 12px}.earth-turn{transform-origin:610px 365px;animation:spin 80s linear infinite}.leaf-sway{transform-origin:500px 124px;animation:sway 8s ease-in-out infinite alternate}.daylight{position:absolute;inset:0;background:linear-gradient(115deg,#f4b57130,transparent 55%);mix-blend-mode:soft-light;pointer-events:none;animation:day 36s ease-in-out infinite;z-index:-2}.magic{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}.leaf{position:absolute;width:11px;height:20px;background:linear-gradient(45deg,#6e803b,#bdc46d);border-radius:90% 0 90% 0;animation:fall var(--duration) linear infinite;animation-delay:var(--delay);opacity:0}.spark{position:absolute;width:4px;height:4px;background:#ffdf83;box-shadow:0 0 9px #f4d575;border-radius:50%;animation:glow var(--duration) infinite alternate;animation-delay:var(--delay)}
.section{padding:42px max(4%,calc((100% - 1220px)/2))}.heading{display:flex;align-items:center;justify-content:center;text-align:center;gap:25px;margin-bottom:28px}.heading p{font-size:17px;color:var(--muted);margin-top:7px}.sprig{display:inline-block;width:65px;flex-shrink:0}.sprig svg{width:100%;height:auto;display:block}.flip{transform:scaleX(-1)}.benefits{background:linear-gradient(110deg,#fffdf7,#faf6e9)}.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}.benefit-grid article+article{border-right:1px solid #ddbd7655}.icon{width:74px;height:74px;display:inline-grid;place-items:center;color:#80570e;background:radial-gradient(circle,#fff6de,#f7e3b6);border:5px solid #fffaf0;border-radius:50%;margin-bottom:9px}.icon svg{width:38px;height:38px}.benefit-grid h3{font-size:21px}.story{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center;background:var(--ivory);padding-top:54px;padding-bottom:54px}.story-copy{max-width:500px;margin-inline:auto}.story h2{font-size:clamp(25px,2.5vw,34px);margin-bottom:20px}.story p{font-size:18px;color:var(--muted);line-height:1.95}.story h3{font-size:27px;color:var(--gold);margin:26px 0 10px}.story-art{width:100%;max-width:460px;margin:auto;mix-blend-mode:multiply}.work{background:#faf7ee}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card{background:none;border:0;color:var(--green);padding:0;text-align:center}.card img{width:100%;aspect-ratio:575/321;object-fit:cover;border-radius:7px;transition:transform .25s,box-shadow .25s}.card:hover img{transform:translateY(-3px);box-shadow:0 6px 18px #173c2522}.card h3{font-size:21px;margin-top:7px}.process{background:linear-gradient(100deg,#e9eddb,#f5f5e9)}.process ol{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;padding:0;margin:0;gap:28px}.process li{display:flex;align-items:center;gap:13px;position:relative}.process li:not(:last-child):after{content:'‹';position:absolute;left:-18px;top:17px;font-size:26px;color:var(--gold)}.process .icon{margin:0;flex-shrink:0;width:65px;height:65px}.process b{font-size:30px;font-weight:500;color:var(--gold);line-height:1.2}.process h3{font-size:17px;white-space:nowrap}.founder{display:grid;grid-template-columns:2fr 1fr;min-height:300px;background:#fffdf7}.identity{display:flex;gap:25px;align-items:center;justify-content:center;padding:36px 30px}.portrait{width:155px;position:relative;flex-shrink:0;isolation:isolate}.portrait>img{width:155px;height:180px;object-fit:cover;object-position:center 25%;border-radius:13px}.portrait-branch{position:absolute;width:100px;right:-40px;top:-12px;z-index:-1;transform:rotate(-65deg)}.identity-copy{width:290px;text-align:right;flex-shrink:0}.identity h2{font-size:26px;white-space:nowrap;font-weight:800}.founder-title{font-size:21px;font-weight:700;color:var(--gold);margin-top:4px}.profession{font-size:17px;white-space:nowrap;color:var(--muted);margin-top:3px}.contact-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}.contact-actions .button{font-size:14px;padding:7px 6px;gap:6px;white-space:nowrap}.contact-actions svg{width:21px;height:21px;display:block}.studio-wrap{position:relative;overflow:hidden;min-height:300px}.studio-wrap>img{width:100%;height:100%;position:absolute;object-fit:cover;object-position:30% center}.sun-rays{position:absolute;inset:-20%;background:linear-gradient(110deg,transparent 30%,#fff4b45c 45%,transparent 50%,#ffe0a22b 60%,transparent 75%);mix-blend-mode:soft-light;pointer-events:none;animation:rays 36s ease-in-out infinite}.closing{position:relative;isolation:isolate;overflow:hidden;background:#fff4d3;display:flex;align-items:center;justify-content:center;text-align:center;gap:60px;padding:35px 6%;min-height:185px}.waves{position:absolute;inset:0;width:100%;height:100%;z-index:-1}.closing h2{font-size:34px}.closing p{font-size:23px;margin-top:4px}.plane{width:110px;order:3;flex-shrink:0}.plane svg{display:block;width:100%;filter:drop-shadow(0 5px 6px #aa76252b)}.clapper{width:100px;order:-1;transform:rotate(12deg);color:var(--green)}.clapper svg{width:100%;height:auto;stroke-width:2.3;filter:drop-shadow(0 5px 3px #896c4322)}footer{display:flex;align-items:center;justify-content:center;gap:25px;padding:18px;background:var(--ivory)}footer img{width:135px;height:130px;object-fit:contain}footer .sprig{width:50px}dialog{width:min(900px,94vw);border:0;border-radius:15px;padding:0;background:var(--ivory);color:var(--green);max-height:90vh;box-shadow:0 20px 80px #0007}dialog::backdrop{background:#081d16dd}#close-viewer{position:absolute;left:10px;top:10px;border:0;border-radius:50%;width:40px;height:40px;background:white;font-size:27px;color:var(--green);z-index:5}#viewer-media img{width:100%;max-height:65vh;object-fit:contain}#viewer-media iframe,#viewer-media video{width:100%;aspect-ratio:16/9;border:0;display:block}.viewer-copy{padding:20px 28px}.viewer-copy h2{font-size:25px}.viewer-copy p{font-size:16px}#video-note{font-size:13px;color:var(--muted);margin-top:8px}.modal-open{overflow:hidden}[hidden]{display:none!important}.motion-off *{animation-play-state:paused!important}@keyframes spin{to{transform:rotate(360deg)}}@keyframes sway{to{transform:skewX(.15deg) translateY(1px)}}@keyframes glow{to{opacity:.15;transform:translateY(-12px)}}@keyframes fall{0%{transform:translate(0,-30px) rotate(0);opacity:0}10%,80%{opacity:.6}100%{transform:translate(-150px,740px) rotate(260deg);opacity:0}}@keyframes day{0%,100%{opacity:.75;filter:hue-rotate(-12deg)}50%{opacity:.2;filter:hue-rotate(10deg)}80%{opacity:.9;filter:hue-rotate(-20deg)}}@keyframes rays{0%,100%{transform:translateX(12%);opacity:.35}45%{transform:translateX(-10%);opacity:.75}75%{transform:translateX(-20%);opacity:.5}}
@media(min-width:1500px){.hero-copy{margin-right:4%}.founder{min-height:340px}.identity{gap:40px}.identity-copy{width:330px}.identity h2{font-size:30px}.profession{font-size:19px}.portrait,.portrait>img{width:175px}.portrait>img{height:200px}}
@media(max-width:1000px){.hero h1{font-size:26px}.hero p{font-size:16px}.logo{width:140px;height:130px}.section{padding:32px 4%}.story{gap:6%}.story p{font-size:16px}.story h3{font-size:24px}.process .icon{width:50px;height:50px}.process h3{font-size:13px}.process ol{gap:16px}.process li{gap:7px}.process li:not(:last-child):after{left:-10px}.identity{padding:24px 16px;gap:15px}.identity-copy{width:245px}.identity h2{font-size:22px}.founder-title{font-size:19px}.profession{font-size:14px}.portrait,.portrait>img{width:120px}.portrait>img{height:145px}.contact-actions .button{font-size:12px}.contact-actions{gap:5px}.closing{gap:32px}.closing h2{font-size:29px}.closing p{font-size:20px}}
@media(max-width:700px){.hero{height:650px}.hero-art{top:auto;height:370px}.hero-art svg{width:920px;max-width:none;position:absolute;left:0}.hero-copy{margin:0;padding:12px 16px 0;width:100%;height:300px;justify-content:flex-start;background:linear-gradient(#f1f8f7,#fffdf7 85%,transparent)}.logo{height:92px;width:105px;margin-bottom:0}.hero h1{font-size:26px;margin:0 0 5px}.hero p{font-size:15px}.discover{margin-top:13px;font-size:14px;padding:7px 22px}.motion{bottom:8px;font-size:10px}.section{padding:30px 5%}.heading{gap:12px;margin-bottom:22px}.heading p{font-size:14px}.sprig{width:35px}.heading h2{font-size:27px}.benefit-grid h3{font-size:16px}.icon{width:58px;height:58px}.icon svg{width:30px;height:30px}.story{grid-template-columns:1fr;gap:18px;text-align:right}.story-copy{max-width:450px}.story h2{font-size:26px;margin-bottom:13px}.story p{font-size:16px}.story h3{font-size:24px;margin-top:20px}.story-art{width:76%;max-width:300px;grid-row:2}.gallery{grid-template-columns:repeat(2,1fr);gap:18px 12px}.card h3{font-size:16px}.process ol{grid-template-columns:repeat(2,1fr);gap:24px 14px}.process h3{font-size:14px}.process li:not(:last-child):after{display:none}.founder{grid-template-columns:1fr}.identity{padding:28px 18px;gap:14px}.identity-copy{width:220px}.identity h2{font-size:20px}.founder-title{font-size:17px}.profession{font-size:13px}.portrait,.portrait>img{width:100px}.portrait>img{height:126px}.portrait-branch{right:-18px;width:65px}.contact-actions{margin-top:13px}.contact-actions svg{width:16px;height:16px}.contact-actions .button{font-size:11px;padding:7px 4px;gap:4px}.studio-wrap{min-height:215px}.studio-wrap>img{object-position:center 45%}.closing{padding:28px 12px;gap:8px;min-height:145px}.closing h2{font-size:23px}.closing p{font-size:16px}.plane,.clapper{width:40px}.closing>div{flex:1}footer{padding:10px}footer img{width:110px;height:110px}.viewer-copy{padding:18px}.viewer-copy p{font-size:14px}}
@media(max-width:360px){.identity{gap:10px;padding:24px 10px}.portrait,.portrait>img{width:80px}.portrait>img{height:104px}.identity-copy{width:205px}.profession{font-size:12px}.hero h1{font-size:23px}.closing h2{font-size:20px}.plane,.clapper{width:30px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

.story-art{mix-blend-mode:normal;background:transparent}

.story-art{height:auto;aspect-ratio:1/1;object-fit:contain}

.card img{height:auto}
/* Independent animation layers: no rotating full-frame image. */
.globe-orbit.upper{animation:orbit-upper 22s linear infinite}.globe-orbit.lower{animation:orbit-lower 27s linear infinite}
@keyframes orbit-upper{0%,100%{transform:translate(0,0)}25%{transform:translate(9px,-6px)}50%{transform:translate(0,-12px)}75%{transform:translate(-9px,-6px)}}
@keyframes orbit-lower{0%,100%{transform:translate(0,0)}25%{transform:translate(-7px,5px)}50%{transform:translate(0,10px)}75%{transform:translate(7px,5px)}}
.canopy-breeze{transform-origin:500px 124px;animation:canopy-air 9s ease-in-out infinite alternate}.cloud-breeze{animation:cloud-air 18s ease-in-out infinite alternate}
@keyframes canopy-air{from{transform:skewX(-.08deg)}to{transform:skewX(.1deg) translateY(.7px)}}@keyframes cloud-air{to{transform:translate(2px,-1px)}}
.svg-star{fill:#fff0b5;transform-box:fill-box;transform-origin:center;animation:star-light var(--t) ease-in-out infinite;animation-delay:var(--d);filter:drop-shadow(0 0 4px #ffe395)}
.dust-dot{fill:#fff0b0;animation:dust-light var(--t) ease-in-out infinite;animation-delay:var(--d)}
@keyframes star-light{0%,100%{opacity:.08;transform:scale(.65) rotate(-4deg)}45%{opacity:1;transform:scale(1.1) rotate(4deg)}70%{opacity:.2;transform:scale(.8)}}
@keyframes dust-light{0%,100%{opacity:0;transform:translate(0,0)}40%{opacity:.85}80%{opacity:.15;transform:translate(3px,-8px)}}
.story-visual{position:relative;width:100%;max-width:460px;margin:auto;isolation:isolate}.story-visual .story-art{width:100%;max-width:none}.story-stars{position:absolute;inset:0;pointer-events:none}.story-star{position:absolute;width:7px;height:7px;background:#fff6cf;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);filter:drop-shadow(0 0 4px #ffc940);animation:story-twinkle var(--t) ease-in-out infinite;animation-delay:var(--d)}
@keyframes story-twinkle{0%,15%,85%,100%{opacity:0;transform:scale(.4)}45%{opacity:1;transform:scale(1.3)}60%{opacity:.25;transform:scale(.7)}}
.studio-wrap>img{animation:studio-time 48s ease-in-out infinite}.studio-light{position:absolute;inset:0;background:radial-gradient(ellipse at 100% 15%,#ffd29b80,transparent 65%);mix-blend-mode:soft-light;animation:room-time 48s ease-in-out infinite;pointer-events:none}
.sun-rays{inset:-10% -35% -20% -45%;transform-origin:100% 12%;background:conic-gradient(from 185deg at 100% 12%,transparent 0deg,#fff2c04d 8deg,transparent 13deg,#fff8d944 20deg,transparent 27deg,#ffeab533 36deg,transparent 45deg);mix-blend-mode:screen;animation:window-rays 48s ease-in-out infinite;filter:blur(4px)}
@keyframes studio-time{0%,100%{filter:brightness(.8) saturate(.88)}40%{filter:brightness(1.05) saturate(1)}72%{filter:brightness(.96) saturate(1.13)}}
@keyframes room-time{0%,100%{opacity:.5}40%{opacity:.12}72%{opacity:.85}}
@keyframes window-rays{0%,100%{transform:rotate(-8deg);opacity:.17}40%{transform:rotate(4deg);opacity:.45}72%{transform:rotate(12deg);opacity:.28}}
@media(max-width:700px){.story-visual{width:76%;max-width:300px;grid-row:2}.story-visual .story-art{width:100%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important}.story-star,.svg-star{opacity:.35}.dust-dot{opacity:.2}}
/* Star glints: bright cores plus un-clipped light halos. */
.story-star{width:12px;height:12px;clip-path:none;background:radial-gradient(circle,#fff 0 9%,#fff4b4 15%,#ffd56488 30%,transparent 70%);filter:drop-shadow(0 0 5px #ffda70);transform:translate(-50%,-50%);animation:story-glint var(--t) ease-in-out infinite;animation-delay:var(--d)}
.story-star:before,.story-star:after{content:'';position:absolute;left:50%;top:50%;background:linear-gradient(transparent,#fffbdc,transparent);width:2px;height:140%;transform:translate(-50%,-50%)}.story-star:after{transform:translate(-50%,-50%) rotate(90deg)}
@keyframes story-glint{0%,10%,85%,100%{opacity:.02;transform:translate(-50%,-50%) scale(.5)}38%{opacity:.7;transform:translate(-50%,-50%) scale(1)}49%{opacity:1;transform:translate(-50%,-50%) scale(1.65)}64%{opacity:.22;transform:translate(-50%,-50%) scale(.8)}}
.svg-star{fill:#fffbe5;filter:drop-shadow(0 0 5px #fff4b4) drop-shadow(0 0 12px #ffcc43);animation-name:hero-glint}
@keyframes hero-glint{0%,100%{opacity:.08;transform:scale(.65) rotate(-3deg)}40%{opacity:.55;transform:scale(1)}52%{opacity:1;transform:scale(1.35) rotate(3deg)}70%{opacity:.18;transform:scale(.8)}}
.cloud-float{animation:cloud-drift 10s ease-in-out infinite}.cloud-two{animation-duration:13s;animation-delay:-4s}.cloud-three{animation-duration:12s;animation-delay:-7s}
@keyframes cloud-drift{0%,100%{transform:translate(-7px,0)}50%{transform:translate(9px,-2px)}}
.window-beams{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;pointer-events:none;overflow:hidden}.window-beam{transform-origin:600px 20px;animation:beam-sequence 10s ease-in-out infinite;animation-delay:var(--delay)}
@keyframes beam-sequence{0%,100%{opacity:.08;transform:rotate(-3deg)}30%{opacity:.55}48%{opacity:.9;transform:rotate(1deg)}70%{opacity:.35;transform:rotate(3deg)}}
@media(prefers-reduced-motion:reduce){.cloud-float,.window-beam,.story-star,.svg-star{animation:none!important}.window-beam{opacity:.2}.story-star,.svg-star{opacity:.4}}
/* Continuous breathing glow: stars never switch off. */
.story-star{animation:star-breathe var(--t) ease-in-out infinite;animation-delay:var(--d)}
@keyframes star-breathe{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.8);filter:drop-shadow(0 0 2px #ffd568)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.75);filter:drop-shadow(0 0 7px #fff0a2) drop-shadow(0 0 13px #ffd563)}}
.svg-star{animation-name:hero-star-breathe}
@keyframes hero-star-breathe{0%,100%{opacity:.3;transform:scale(.85);filter:drop-shadow(0 0 3px #ffe091)}50%{opacity:1;transform:scale(1.45);filter:drop-shadow(0 0 8px #fff4b4) drop-shadow(0 0 16px #ffce51)}}
/* The beams sweep spatially across the wall and desk, pivoting at the window. */
.window-beam{transform-box:view-box;transform-origin:100% 5%;animation:beam-sweep 14s ease-in-out infinite;animation-delay:var(--delay)}
@keyframes beam-sweep{0%,100%{transform:rotate(-11deg) skewY(-3deg);opacity:.28}50%{transform:rotate(12deg) skewY(3deg);opacity:.7}}
@media(prefers-reduced-motion:reduce){.story-star,.svg-star,.window-beam{animation:none!important;opacity:.4}}