:root{
  --sun:#FFB400; --sun-2:#FF8A00; --coral:#FF5A5F; --teal:#00A6A6; --navy:#17325C; --sky:#4CC9F0; --leaf:#7BD389;
  --cream:#FFF8EA; --ink:#1F2A44; --muted:#5B6783; --white:#fff;
  --r:28px; --shadow:0 18px 45px -18px rgba(23,50,92,.35);
  --f-logo:'Lilita One',cursive; --f-head:'Fredoka',sans-serif; --f-body:'Nunito',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);color:var(--ink);background:var(--cream);line-height:1.65;overflow-x:hidden;font-size:17px}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--f-head);line-height:1.15;font-weight:600}
.wrap{width:min(1180px,92%);margin-inline:auto}
.logo-word{font-family:var(--f-logo);letter-spacing:.02em}

/* ---------- Preloader ---------- */
#preloader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,#ffd35c,#ff8a00 55%,#ff5a5f);transition:transform .9s cubic-bezier(.77,0,.18,1),opacity .6s .5s}
#preloader.done{transform:translateY(-100%);opacity:0;pointer-events:none}
.pl-inner{text-align:center;color:#fff}
.pl-name{font-family:var(--f-logo);font-size:clamp(2.6rem,9vw,5rem);display:flex;gap:.04em;justify-content:center;text-shadow:0 6px 0 rgba(23,50,92,.25)}
.pl-name span{display:inline-block;animation:bounce 1.1s infinite;animation-delay:calc(var(--i)*.08s)}
@keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-18px) rotate(-4deg)}}
.pl-sub{font-family:var(--f-head);letter-spacing:.35em;text-transform:uppercase;font-size:.8rem;margin-top:6px;opacity:.95}
.pl-bar{width:220px;height:8px;background:rgba(255,255,255,.35);border-radius:9px;margin:22px auto 0;overflow:hidden}
.pl-bar b{display:block;height:100%;width:0;background:#fff;border-radius:9px;animation:load 2s forwards ease-in-out}
@keyframes load{to{width:100%}}

/* ---------- Nav ---------- */
header.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:14px 0;transition:.35s}
header.nav.stuck{background:rgba(255,248,234,.92);backdrop-filter:blur(10px);box-shadow:0 8px 30px -14px rgba(23,50,92,.4);padding:8px 0}
.nav .wrap{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-size:1.9rem;color:var(--navy)}
.menu{display:flex;gap:6px;list-style:none;align-items:center}
.menu a{font-family:var(--f-head);font-weight:500;padding:8px 14px;border-radius:99px;transition:.25s}
.menu a:hover{background:var(--sun);color:var(--navy)}
.menu .cta{background:var(--navy);color:#fff}
.menu .cta:hover{background:var(--coral);color:#fff}
.burger{display:none;width:46px;height:46px;border:0;border-radius:50%;background:var(--sun);cursor:pointer;font-size:1.4rem}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-head);font-weight:600;padding:15px 28px;border-radius:99px;border:0;cursor:pointer;font-size:1.05rem;transition:transform .25s,box-shadow .25s,background .25s;position:relative;overflow:hidden}
.btn-primary{background:linear-gradient(135deg,var(--sun),var(--sun-2));color:var(--navy);box-shadow:0 12px 26px -10px rgba(255,138,0,.9)}
.btn-primary:hover{transform:translateY(-4px) scale(1.03)}
.btn-ghost{background:#fff;color:var(--navy);box-shadow:var(--shadow)}
.btn-ghost:hover{transform:translateY(-4px);background:var(--navy);color:#fff}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--coral);transform:translateY(-4px)}

/* ---------- Hero ---------- */
.hero{min-height:100vh;position:relative;display:flex;align-items:center;padding:130px 0 90px;background:linear-gradient(160deg,#fff3c4 0%,#ffe0a3 40%,#ffc9b8 100%);overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.75;animation:float 9s ease-in-out infinite}
.b1{width:340px;height:340px;background:var(--sky);top:-80px;right:-60px;opacity:.5}
.b2{width:200px;height:200px;background:var(--leaf);bottom:60px;left:-70px;animation-delay:-3s}
.b3{width:120px;height:120px;background:var(--coral);top:30%;left:46%;animation-delay:-5s;opacity:.45}
@keyframes float{50%{transform:translate(18px,-28px) scale(1.07)}}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;position:relative;z-index:2}
.chip{display:inline-block;background:#fff;color:var(--coral);font-family:var(--f-head);font-weight:600;padding:8px 18px;border-radius:99px;box-shadow:var(--shadow);margin-bottom:20px;font-size:.95rem}
.hero h1{font-size:clamp(2.5rem,6vw,4.6rem);color:var(--navy);margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--coral);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:10px;border-radius:9px;background:var(--sun);z-index:-1;transform-origin:left;animation:underline 1.2s 2.6s both}
@keyframes underline{from{transform:scaleX(0)}}
.hero p.lead{font-size:1.2rem;color:var(--muted);max-width:540px;margin-bottom:30px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{display:flex;gap:28px;margin-top:38px;flex-wrap:wrap}
.hero-stats div b{display:block;font-family:var(--f-head);font-size:2.2rem;color:var(--navy)}
.hero-stats div span{font-size:.9rem;color:var(--muted)}

/* wave dividers */

/* ---------- Marquee ---------- */
.marquee{background:var(--navy);color:#fff;overflow:hidden;padding:18px 0;position:relative;z-index:5}
.marquee .track{display:flex;gap:48px;width:max-content;animation:scroll 28s linear infinite;font-family:var(--f-head);font-size:1.5rem;font-weight:500}
.marquee .track span::after{content:"✦";color:var(--sun);margin-left:48px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
section{position:relative}
.sec{padding:110px 0}
.sec-head{text-align:center;max-width:720px;margin:0 auto 60px}
.eyebrow{font-family:var(--f-head);color:var(--teal);letter-spacing:.2em;text-transform:uppercase;font-size:.85rem;font-weight:600}
.sec-head h2{font-size:clamp(2rem,4.6vw,3.2rem);color:var(--navy);margin:10px 0 14px}
.sec-head p{color:var(--muted)}

/* about */
.about{background:#fff}
.about-text h2{font-size:clamp(2rem,4vw,2.9rem);color:var(--navy);margin:8px 0 18px}
.about-text p{color:var(--muted);margin-bottom:14px}
.ticks{list-style:none;margin:20px 0 28px;display:grid;gap:12px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-weight:600}
.ticks li::before{content:"✓";flex:none;width:28px;height:28px;border-radius:50%;background:var(--leaf);color:#fff;display:grid;place-items:center;font-size:.9rem}

/* services */
.services{background:var(--cream)}
.svc-list{display:grid;gap:70px}
.svc{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.svc:nth-child(even) .svc-img{order:2}
.svc-img{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3}
.svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s}
.svc:hover .svc-img img{transform:scale(1.08) rotate(1deg)}
.svc-img .num{position:absolute;top:16px;left:16px;font-family:var(--f-logo);font-size:1.4rem;background:var(--sun);color:var(--navy);width:52px;height:52px;border-radius:50%;display:grid;place-items:center}
.svc-body h3{font-size:clamp(1.6rem,3vw,2.2rem);color:var(--navy);margin-bottom:12px}
.svc-body p{color:var(--muted);margin-bottom:16px}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tags span{background:#fff;border:2px dashed var(--sun-2);padding:5px 14px;border-radius:99px;font-size:.9rem;font-weight:700;color:var(--navy)}
.svc-body .ico{font-size:2.4rem;display:inline-block;margin-bottom:6px;animation:wiggle 3s infinite}
@keyframes wiggle{0%,90%,100%{transform:rotate(0)}93%{transform:rotate(-12deg)}96%{transform:rotate(12deg)}}

/* kids benefits */
.kids{background:linear-gradient(180deg,#e9fbff,#fff);overflow:hidden}
.bubbles{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.bubble{background:#fff;border-radius:var(--r);padding:32px 24px;text-align:center;box-shadow:var(--shadow);position:relative;transition:transform .4s;border-bottom:8px solid var(--c,var(--sun))}
.bubble:hover{transform:translateY(-12px) rotate(-1.5deg)}
.bubble .em{width:84px;height:84px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;font-size:2.4rem;background:color-mix(in srgb,var(--c,var(--sun)) 25%,#fff)}
.bubble h4{font-size:1.25rem;color:var(--navy);margin-bottom:8px}
.bubble p{font-size:.95rem;color:var(--muted)}

/* entrepreneurs */
.biz{background:var(--navy);color:#fff;overflow:hidden}
.biz .eyebrow{color:var(--sun)}
.biz h2{font-size:clamp(2rem,4vw,3rem);margin:10px 0 16px}
.biz p{color:#cdd6ea;margin-bottom:22px}
.steps{display:grid;gap:14px;counter-reset:s}
.steps div{counter-increment:s;display:flex;gap:16px;align-items:center;background:rgba(255,255,255,.08);padding:14px 18px;border-radius:20px;transition:.3s}
.steps div:hover{background:rgba(255,255,255,.16);transform:translateX(10px)}
.steps div::before{content:counter(s);flex:none;font-family:var(--f-logo);width:44px;height:44px;border-radius:50%;background:var(--sun);color:var(--navy);display:grid;place-items:center;font-size:1.2rem}

/* video */
.video-sec{background:#fff}
.video-box{position:relative;border-radius:40px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/8;background:#000}
.video-box video{width:100%;height:100%;object-fit:cover}
.video-box .cap{position:absolute;left:0;right:0;bottom:0;padding:70px 32px 26px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;font-family:var(--f-head);font-size:1.2rem;pointer-events:none}

/* gallery */
.gallery{background:var(--cream)}
.more{text-align:center;margin-top:48px}

/* cta */
.cta-sec{background:linear-gradient(135deg,var(--coral),var(--sun-2));color:#fff;text-align:center;padding:100px 0;overflow:hidden}
.cta-sec h2{font-size:clamp(2rem,5vw,3.5rem);margin-bottom:14px}
.cta-sec p{max-width:600px;margin:0 auto 30px;font-size:1.15rem}
.cta-sec .btn{background:#fff;color:var(--navy)}
.cta-sec .btn:hover{background:var(--navy);color:#fff;transform:translateY(-4px)}
.contact-cards{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.contact-cards div{background:rgba(255,255,255,.18);backdrop-filter:blur(6px);padding:16px 24px;border-radius:20px;font-weight:700}

/* footer */
footer{background:#10213f;color:#cdd6ea;padding:70px 0 26px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
footer h5{font-family:var(--f-head);color:#fff;font-size:1.15rem;margin-bottom:14px}
footer ul{list-style:none;display:grid;gap:8px}
footer a:hover{color:var(--sun)}
.socials{display:flex;gap:12px;margin-top:18px}
.socials a{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;transition:.3s}
.socials a:hover{background:var(--sun);color:var(--navy);transform:translateY(-6px) rotate(8deg)}
.socials svg{width:22px;height:22px;fill:currentColor}
.f-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:22px;font-size:.88rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* whatsapp */
.wa{position:fixed;right:22px;bottom:22px;z-index:200;width:64px;height:64px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(37,211,102,.8);animation:waPulse 2.2s infinite}
.wa svg{width:34px;height:34px;fill:#fff}
.wa .tip{position:absolute;right:76px;background:#fff;color:var(--navy);font-family:var(--f-head);font-weight:600;padding:8px 14px;border-radius:14px;white-space:nowrap;box-shadow:var(--shadow);opacity:0;transform:translateX(14px);transition:.3s;pointer-events:none;font-size:.9rem}
.wa:hover .tip{opacity:1;transform:none}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}70%{box-shadow:0 0 0 24px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ---------- Reveal animations ---------- */
[data-r]{opacity:0;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
[data-r=left]{transform:translateX(-90px)}
[data-r=right]{transform:translateX(90px)}
[data-r=up]{transform:translateY(70px)}
[data-r=zoom]{transform:scale(.7)}
[data-r=rotate]{transform:rotate(-8deg) translateY(50px) scale(.9)}
[data-r].in{opacity:1;transform:none}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;background:rgba(10,20,40,.92);z-index:500;display:none;place-items:center;padding:24px}
.lb.open{display:grid;animation:fade .3s}
.lb img{max-height:86vh;max-width:92vw;border-radius:18px;box-shadow:0 30px 80px #000}
.lb button{position:absolute;border:0;background:#fff;color:var(--navy);width:50px;height:50px;border-radius:50%;font-size:1.4rem;cursor:pointer}
.lb .x{top:20px;right:20px}.lb .pv{left:20px;top:50%}.lb .nx{right:20px;top:50%}
@keyframes fade{from{opacity:0}}

/* ---------- Projects page ---------- */
.p-hero{padding:150px 0 70px;background:linear-gradient(160deg,#fff3c4,#ffc9b8);text-align:center;position:relative;overflow:hidden}
.p-hero h1{font-size:clamp(2.4rem,6vw,4.2rem);color:var(--navy);margin:14px 0}
.p-hero p{max-width:620px;margin:0 auto 28px;color:var(--muted);font-size:1.15rem}
.p-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.back-bar{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:56px}
.credits{background:#fff;padding:60px 0}
.credits h3{color:var(--navy);margin-bottom:14px}
.credits ul{columns:2 340px;list-style:none;font-size:.88rem;color:var(--muted);display:block}
.credits li{margin-bottom:6px;break-inside:avoid}
.credits a{color:var(--teal);text-decoration:underline}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  body{font-size:16px}
  .hero-grid,.svc{grid-template-columns:1fr}
  .svc{gap:26px}
  .svc:nth-child(even) .svc-img{order:0}
  .svc-list{gap:60px}
  .bubbles{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:1fr;gap:28px}
  .burger{display:block;position:relative;z-index:120}
  .menu{position:fixed;inset:0 0 0 25%;background:var(--cream);flex-direction:column;justify-content:center;gap:14px;transform:translateX(100%);transition:.45s;box-shadow:-20px 0 40px rgba(0,0,0,.2);z-index:110}
  .menu.open{transform:none}
  header.nav .menu a,header.nav.on-dark:not(.stuck) .menu.open a:not(.cta){font-size:1.3rem;color:var(--navy)}
  header.nav .menu .cta,header.nav.on-dark:not(.stuck) .menu.open .cta{color:#fff;background:var(--navy)}
  header.nav.on-dark:not(.stuck) .burger{background:#fff}
  .video-box{aspect-ratio:16/10}
  .hero{min-height:92vh}
  .hero-bg::after{background:linear-gradient(to top,#10213f 0,#10213f 7%,rgba(16,33,63,0) 28%),linear-gradient(180deg,rgba(16,33,63,.78),rgba(16,33,63,.7))}
}
@media(max-width:560px){
  body{font-size:15.5px}
  .wrap{width:90%}
  .sec{padding:70px 0}
  .sec-head{margin-bottom:40px}
  .bubbles{grid-template-columns:1fr}
  .hero{padding:110px 0 80px;min-height:auto}
  .hero p.lead{font-size:1.05rem}
  .hero-btns .btn{width:100%;justify-content:center}
  .hero-stats{gap:20px}
  .hero-stats div b{font-size:1.8rem}
  .brand{font-size:1.6rem}
  .btn{padding:13px 22px}
  .svc-img{aspect-ratio:16/11}
  .marquee .track{font-size:1.15rem;gap:32px}
  .marquee .track span::after{margin-left:32px}
  .video-box{border-radius:24px;aspect-ratio:4/3}
  .video-box .cap{font-size:.95rem;padding:50px 18px 16px}
  .cta-sec{padding:80px 0}
  .contact-cards div{width:100%}
  .about{padding:60px 0}
  .about-mini{gap:20px}
  .f-bottom{flex-direction:column}
  .wa{width:56px;height:56px;right:14px;bottom:14px}
  .wa svg{width:30px;height:30px}
  .wa .tip{display:none}
  .lb .pv,.lb .nx{top:auto;bottom:24px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-r]{opacity:1;transform:none}
}

/* =============== V2 =============== */
/* nav over dark hero */
header.nav.on-dark:not(.stuck) .brand{color:#fff}
header.nav.on-dark:not(.stuck) .menu a:not(.cta){color:#fff}
header.nav.on-dark:not(.stuck) .menu a:not(.cta):hover{color:var(--navy)}
header.nav.on-dark:not(.stuck) .menu .cta{background:var(--sun);color:var(--navy)}
.burger{color:var(--navy)}

/* hero clip background */
.hero{background:#10213f}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg .slide{position:absolute;inset:0;opacity:0;transition:opacity .55s ease}
.hero-bg .slide.on{opacity:1}
.hero-bg .slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.hero-bg .slide.on img{animation:kb 2.6s linear forwards}
@keyframes kb{to{transform:scale(1.14)}}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#10213f 0,#10213f 7%,rgba(16,33,63,0) 28%),linear-gradient(100deg,rgba(16,33,63,.88) 0%,rgba(16,33,63,.62) 45%,rgba(16,33,63,.2) 100%)}
.hero-grid{grid-template-columns:minmax(0,760px)}
.hero h1{color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.35)}
.hero h1 em{color:var(--sun)}
.hero h1 em::after{display:none}
.hero p.lead{color:#eef2fb}
.hero-stats div b{color:#fff}.hero-stats div span{color:#dce4f5}
.hero .blob{display:none}
.chip{color:var(--coral)}
.clip-dots{position:absolute;z-index:3;left:50%;bottom:26px;transform:translateX(-50%);display:flex;gap:8px}
.clip-dots i{width:34px;height:5px;border-radius:5px;background:rgba(255,255,255,.35);overflow:hidden;position:relative}
.clip-dots i.on::after{content:"";position:absolute;inset:0;background:var(--sun);transform-origin:left;animation:fillbar 2.2s linear forwards}
@keyframes fillbar{from{transform:scaleX(0)}}

/* pencil / crayon strip */
.scribble{position:relative;height:120px;background:#fff;overflow:hidden;background-image:repeating-linear-gradient(transparent 0 33px,#d7ecf7 33px 34px)}
.scribble::before{content:"";position:absolute;left:6%;top:0;bottom:0;width:2px;background:#ffb4b8}
.scribble svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transition:opacity .6s}
.scribble.fade svg{opacity:0}
.scribble .word{position:absolute;right:5%;top:50%;transform:translateY(-50%);font-family:var(--f-logo);font-size:clamp(1.2rem,3vw,2rem);color:var(--navy);opacity:.14;letter-spacing:.08em}

/* about centered & compact */
.about{padding:80px 0}
.about-text{max-width:820px;margin:0 auto;text-align:center}
.about-text .ticks{justify-items:center;text-align:left;display:inline-grid}
.about-mini{display:flex;justify-content:center;gap:34px;margin:24px 0;flex-wrap:wrap}
.about-mini div{text-align:center}
.about-mini b{display:block;font-family:var(--f-logo);font-size:2.6rem;color:var(--coral);line-height:1}
.about-mini span{font-size:.9rem;color:var(--muted)}

/* services animated background */
.services{overflow:hidden;background:linear-gradient(180deg,#fff7e0,#e8f7fb 55%,#fff0ec)}
.services::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,138,0,.22) 2px,transparent 2.5px);background-size:34px 34px;animation:dots 22s linear infinite;pointer-events:none}
@keyframes dots{to{background-position:340px 170px}}
.services .wrap{position:relative;z-index:2}
.svc{position:relative;isolation:isolate}
.svc::before{content:"";position:absolute;z-index:-1;left:-20%;top:50%;width:70%;height:62%;margin-top:-31%;border-radius:999px;background:linear-gradient(90deg,transparent,var(--sw,rgba(255,180,0,.45)),transparent);filter:blur(6px);animation:sweep 6s ease-in-out infinite alternate;animation-delay:var(--sd,0s)}
.svc:nth-child(1){--sw:rgba(255,180,0,.55)}
.svc:nth-child(2){--sw:rgba(76,201,240,.55);--sd:-1.5s}
.svc:nth-child(3){--sw:rgba(255,90,95,.4);--sd:-3s}
.svc:nth-child(4){--sw:rgba(123,211,137,.6);--sd:-4s}
.svc:nth-child(5){--sw:rgba(0,166,166,.45);--sd:-2s}
@keyframes sweep{from{transform:translateX(-5%)}to{transform:translateX(150%)}}
.svc::after{content:"";position:absolute;z-index:-1;left:0;right:0;top:50%;height:150px;margin-top:-75px;background:repeating-linear-gradient(90deg,transparent 0 40px,rgba(255,255,255,.55) 40px 80px);animation:stripes 3s linear infinite;opacity:.7}
@keyframes stripes{to{background-position:80px 0}}

/* entrepreneurs: full-bleed animated photo */
.biz{padding:140px 0;text-align:center;background:#10213f}
.biz-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.biz-bg img{width:100%;height:100%;object-fit:cover;animation:ken 18s ease-in-out infinite alternate}
@keyframes ken{from{transform:scale(1.05) translate(0,0)}to{transform:scale(1.22) translate(-3%,-2%)}}
.biz-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(16,33,63,.62),rgba(16,33,63,.9))}
.biz .wrap{position:relative;z-index:2;max-width:860px}
.biz p{max-width:620px;margin-inline:auto}
.steps{grid-template-columns:1fr 1fr;text-align:left;margin-top:12px}
.steps div:hover{transform:translateY(-6px)}

/* poloroid gallery */
.gallery{background:radial-gradient(circle at 15% 10%,#ffe9b8,transparent 40%),radial-gradient(circle at 90% 90%,#cdeffb,transparent 45%),var(--cream)}
.polas{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding-top:20px}
.pola{background:#fff;padding:12px 12px 52px;border-radius:6px;box-shadow:0 18px 35px -14px rgba(23,50,92,.45);position:relative;cursor:zoom-in;border:0;text-align:center;transition:transform .45s cubic-bezier(.2,.8,.2,1.4),box-shadow .45s;font-family:var(--f-head);color:var(--navy);font-weight:500;font-size:1.05rem}
.pola:nth-child(odd){transform:rotate(-2.5deg)}
.pola:nth-child(even){transform:rotate(2.2deg) translateY(26px)}
.pola:hover{transform:rotate(0) translateY(-10px) scale(1.04);z-index:3;box-shadow:0 30px 50px -14px rgba(23,50,92,.55)}
.pola img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px}
.pola span{position:absolute;left:0;right:0;bottom:14px}
.pola::before{content:"";position:absolute;top:-14px;left:50%;width:90px;height:28px;margin-left:-45px;background:rgba(255,180,0,.65);transform:rotate(-3deg);border-radius:3px}
.more{margin-top:70px}

/* CTA translucent photo */
.cta-sec{position:relative;background:#c63c4a}
.cta-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.cta-bg img{width:100%;height:100%;object-fit:cover;animation:ken 16s ease-in-out infinite alternate}
.cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,90,95,.82),rgba(255,138,0,.74))}
.cta-sec .wrap{position:relative;z-index:2}
.cta-sec::before,.cta-sec::after{content:"";position:absolute;z-index:1;border-radius:50%;background:rgba(255,255,255,.16);animation:float 9s ease-in-out infinite}
.cta-sec::before{width:260px;height:260px;left:-60px;top:-60px}
.cta-sec::after{width:180px;height:180px;right:6%;bottom:-40px;animation-delay:-4s}

/* projects page story rows */
.story{display:grid;gap:80px}
.row{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.row:nth-child(even){grid-template-columns:.9fr 1.1fr}
.row:nth-child(even) .ph{order:2}
.row .ph{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3;cursor:zoom-in;border:0;padding:0;background:#ddd}
.row .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s}
.row .ph:hover img{transform:scale(1.07)}
.row .ph::after{content:"";position:absolute;inset:14px;border:3px dashed rgba(255,255,255,.7);border-radius:calc(var(--r) - 10px);pointer-events:none}
.row .n{font-family:var(--f-logo);font-size:4.5rem;line-height:1;color:var(--sun);opacity:.9}
.row h3{font-size:clamp(1.6rem,3vw,2.2rem);color:var(--navy);margin:4px 0 10px}
.row p{color:var(--muted)}
.credits ul{display:block;columns:2 340px}

@media(max-width:980px){
  .polas{grid-template-columns:repeat(2,1fr)}
  .row,.row:nth-child(even){grid-template-columns:1fr}
  .row:nth-child(even) .ph{order:0}
  .steps{grid-template-columns:1fr}
  .biz{padding:100px 0}
}
@media(max-width:560px){
  .polas{grid-template-columns:1fr;max-width:320px;margin-inline:auto;gap:34px}
  .pola img{aspect-ratio:1/1}
  .row .ph{aspect-ratio:4/3}
  .story{gap:50px}
  .row .n{font-size:3.2rem}
  .p-hero{padding:120px 0 50px}
  .pola:nth-child(even){transform:rotate(2.2deg)}
  .scribble{height:100px}
}

.pl-draw{display:block;width:300px;max-width:80vw;height:70px;margin:16px auto 0;overflow:visible}

/* about wallpaper doodles */
.about{position:relative;overflow:hidden}
.about .wrap{position:relative;z-index:2}
.doodles{position:absolute;inset:0;z-index:0;pointer-events:none}
.dd{position:absolute;opacity:.13;animation:bob 9s ease-in-out infinite;animation-delay:var(--t,0s)}
.dd use{fill:currentColor}
@keyframes bob{50%{transform:translateY(-14px) rotate(var(--r2,6deg))}}
.a1{left:4%;top:8%;color:var(--coral);transform:rotate(-18deg);--r2:-10deg}
.a2{left:15%;bottom:6%;color:var(--teal);transform:rotate(-8deg);--t:-2s}
.a3{right:7%;top:6%;color:var(--navy);transform:rotate(24deg);--r2:30deg;--t:-4s}
.a4{right:18%;bottom:10%;color:var(--sun-2);--t:-1s}
.a5{left:42%;top:2%;color:var(--sun-2);transform:rotate(60deg);--r2:66deg;--t:-5s}
.a6{right:3%;bottom:30%;color:var(--sky);transform:rotate(10deg);--t:-3s}
.a7{left:2%;bottom:34%;color:var(--leaf);transform:rotate(25deg);--r2:30deg;--t:-6s}
@media(max-width:700px){.a5,.a6,.a7{display:none}.dd{opacity:.1}}

/* prevent horizontal scroll from off-screen reveal animations */
html,body{overflow-x:clip;max-width:100%}
section,.sec,.p-hero,footer{overflow-x:clip}