/* ============ TOKENS ============ */
:root{
  --ink:#111111;
  --paper:#ffffff;
  --soft:#f6f6f4;
  --dot:#d8d8d4;
  --font-main:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-hand:'Caveat','Comic Sans MS',cursive;
  /* the signature: hand-drawn wobble */
  --wobble:255px 15px 225px 15px / 15px 225px 15px 255px;
  --wobble2:15px 255px 15px 225px / 225px 15px 255px 15px;
  --shadow:5px 6px 0 var(--ink);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-main);
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
  line-height:1.6;
  cursor:default;
}
::selection{background:var(--ink);color:var(--paper);}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}

h1,h2,h3{font-weight:800;line-height:1.08;letter-spacing:-0.02em;}

.container{width:min(1180px,92%);margin:0 auto;}

/* dotted paper texture */
.dotted{background-image:radial-gradient(var(--dot) 1.3px, transparent 1.3px);background-size:22px 22px;}
.dark{background:var(--ink);color:var(--paper);}
.dark.dotted{background-image:radial-gradient(#3a3a3a 1.3px, transparent 1.3px);background-color:var(--ink);}

/* handwritten label */
.hand{font-family:var(--font-hand);font-size:clamp(1.4rem,2.4vw,1.8rem);font-weight:600;letter-spacing:.01em;}

/* marker box — tilted black highlight */
.marker{
  display:inline-block;background:var(--ink);color:var(--paper);
  padding:.08em .35em .12em;transform:rotate(-2deg);
  border-radius:12px 4px 14px 5px / 5px 14px 4px 12px;
}
.dark .marker{background:var(--paper);color:var(--ink);}

/* sketchy card */
.sketch{
  background:var(--paper);border:2.5px solid var(--ink);
  border-radius:var(--wobble);
}
.sketch.alt{border-radius:var(--wobble2);}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  background:var(--paper);color:var(--ink);
  border:2.5px solid var(--ink);border-radius:var(--wobble);
  padding:.85em 1.7em;font-weight:700;font-size:1rem;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease,color .18s ease;
  box-shadow:0 0 0 var(--ink);
  position:relative;
}
.btn:hover{transform:translate(-3px,-3px) rotate(-1deg);box-shadow:var(--shadow);}
.btn:active{transform:translate(0,0);box-shadow:1px 1px 0 var(--ink);}
.btn.solid{background:var(--ink);color:var(--paper);}
.btn.solid:hover{box-shadow:5px 6px 0 rgba(17,17,17,.25);}
.dark .btn{border-color:var(--paper);}
.dark .btn.ghost{background:transparent;color:var(--paper);}
.dark .btn.ghost:hover{box-shadow:5px 6px 0 var(--paper);}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px dashed var(--ink);outline-offset:4px;}
.dark :focus-visible{outline-color:var(--paper);}

/* doodle stroke defaults */
.doodle{stroke:var(--ink);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.dark .doodle{stroke:var(--paper);}
.doodle-fill{fill:var(--ink);}
.dark .doodle-fill{fill:var(--paper);}

/* wiggle on hover — the doodles come alive */
@keyframes wiggle{
  0%,100%{transform:rotate(0deg)}
  25%{transform:rotate(-6deg) translateY(-2px)}
  50%{transform:rotate(4deg)}
  75%{transform:rotate(-3deg) translateY(1px)}
}
@keyframes floaty{
  0%,100%{transform:translateY(0) rotate(var(--r,0deg))}
  50%{transform:translateY(-12px) rotate(calc(var(--r,0deg) + 4deg))}
}
@keyframes spin-slow{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.float{animation:floaty 5s ease-in-out infinite;}
.float.d1{animation-delay:.6s}.float.d2{animation-delay:1.4s}.float.d3{animation-delay:2.2s}
.wiggler{display:inline-block;transform-origin:50% 60%;}
.wiggle-hover:hover .wiggler, .wiggler:hover{animation:wiggle .5s ease-in-out;}

/* ============ CURSOR ============ */
#cursor{
  position:fixed;top:0;left:0;width:14px;height:14px;border-radius:50%;
  background:var(--ink);pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .2s,height .2s,background .2s,opacity .2s;
  mix-blend-mode:difference;background:#fff;opacity:0;
}
#cursor.on{opacity:1;}
#cursor.grow{width:52px;height:52px;}
@media (pointer:coarse){#cursor{display:none;}}

/* ============ NAV ============ */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(255,255,255,.88);backdrop-filter:blur(10px);
  border-bottom:2.5px solid var(--ink);
  transition:transform .3s ease;
}
header.hide{transform:translateY(-110%);}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0;}
.logo{display:flex;align-items:center;gap:.5rem;font-weight:800;font-size:1.15rem;letter-spacing:-.02em;}
.logo svg{width:34px;height:34px;}
.nav-links{display:flex;gap:1.6rem;list-style:none;align-items:center;}
.nav-links a{font-weight:600;font-size:.92rem;position:relative;padding:.2em 0;}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:3px;
  background:var(--ink);border-radius:99px;transition:right .25s ease;
  transform:rotate(-1deg);
}
.nav-links a:hover::after{right:0;}
.nav-cta{display:inline-flex;}
.burger{display:none;background:none;border:2.5px solid var(--ink);border-radius:10px 4px 12px 5px/5px 12px 4px 10px;padding:.45rem .6rem;}
.burger svg{width:22px;height:22px;}
@media(max-width:860px){
  .nav-links{position:fixed;inset:64px 0 auto 0;background:var(--paper);border-bottom:2.5px solid var(--ink);
    flex-direction:column;padding:1.4rem 0 1.8rem;gap:1.1rem;
    transform:translateY(-130%);transition:transform .3s ease;}
  .nav-links.open{transform:translateY(0);}
  .burger{display:block;}
  .nav-cta{display:none;}
}

/* ============ HERO ============ */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:8.5rem 0 4rem;position:relative;overflow:hidden;
}
.hero-inner{display:grid;grid-template-columns:1fr;text-align:center;position:relative;z-index:2;}
.hero .hand{display:inline-flex;align-items:center;gap:.4em;justify-content:center;margin-bottom:.6rem;}
.hero h1{font-size:clamp(2.6rem,7vw,5.4rem);margin:.1em 0 .35em;}
.hero h1 .light{font-weight:500;}
.hero p.sub{max-width:540px;margin:0 auto 2rem;font-size:clamp(1rem,1.6vw,1.15rem);color:#333;}
.hero-ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}
.hero-doodle{position:absolute;z-index:1;}
.hd-person{left:2%;bottom:6%;width:clamp(120px,17vw,230px);}
.hd-rocket{right:3%;bottom:8%;width:clamp(90px,13vw,180px);}
.hd-star1{top:16%;left:12%;width:44px;}
.hd-star2{top:22%;right:16%;width:34px;}
.hd-spring{top:12%;left:46%;width:90px;}
.hd-arrow{right:24%;top:58%;width:110px;transform:rotate(20deg);}
.hd-plane{top:30%;left:6%;width:70px;}
.hd-asterisk{bottom:20%;left:38%;width:38px;animation:spin-slow 14s linear infinite;}
@media(max-width:760px){
  .hd-person{display:none}.hd-rocket{width:90px;bottom:2%}.hd-arrow{display:none}
}
.scroll-hint{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.2rem;z-index:2;}
.scroll-hint svg{width:26px;animation:bob 1.8s ease-in-out infinite;}
.scroll-hint span{font-family:var(--font-hand);font-size:1.15rem;}

/* ============ SECTIONS ============ */
section{padding:6rem 0;position:relative;}
.sec-head{text-align:center;margin-bottom:3.5rem;position:relative;}
.sec-head h2{font-size:clamp(2rem,4.6vw,3.2rem);}
.sec-head .hand{display:block;margin-bottom:.3rem;}
.underline-doodle{width:190px;margin:0.7rem auto 0;}

/* SERVICES */
#services{border-top:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;}
@media(max-width:1020px){.svc-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr;}}
.svc{
  padding:2rem 1.5rem 1.8rem;text-align:center;
  transition:transform .22s ease,box-shadow .22s ease;position:relative;background:var(--paper);
}
.svc:hover{transform:translate(-4px,-6px) rotate(-1deg);box-shadow:var(--shadow);}
.svc:nth-child(even):hover{transform:translate(-4px,-6px) rotate(1deg);}
.svc .icon{width:64px;height:64px;margin:0 auto 1rem;}
.svc h3{font-size:1.15rem;margin-bottom:.5rem;}
.svc p{font-size:.9rem;color:#333;}
.svc .tag{position:absolute;top:-14px;right:14px;transform:rotate(6deg);font-family:var(--font-hand);font-size:1.05rem;background:var(--ink);color:var(--paper);padding:.05em .5em .15em;border-radius:10px 3px 12px 4px/4px 12px 3px 10px;}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:4rem;align-items:center;}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;gap:2.6rem;}}
.about-art{position:relative;padding:1rem;}
.frame{
  border:2.5px solid var(--ink);border-radius:var(--wobble2);
  transform:rotate(-2.5deg);background:var(--paper);
  box-shadow:8px 9px 0 var(--ink);padding:1.4rem;
  transition:transform .3s ease;
}
.frame:hover{transform:rotate(-1deg) translateY(-4px);}
.about-copy .hand{display:block;margin-bottom:.2rem;}
.about-copy h2{font-size:clamp(1.9rem,3.8vw,2.8rem);margin-bottom:1.1rem;}
.about-copy p{color:#333;margin-bottom:1rem;max-width:52ch;}
.stats{display:flex;gap:2.6rem;margin:1.8rem 0 2rem;flex-wrap:wrap;}
.stat b{display:block;font-size:clamp(2rem,4vw,2.9rem);font-weight:800;line-height:1;}
.stat span{font-family:var(--font-hand);font-size:1.25rem;}
.about-badge{position:absolute;top:-22px;right:-8px;width:92px;animation:spin-slow 18s linear infinite;}

/* MARQUEE */
.marquee-wrap{border-top:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);padding:1.15rem 0;overflow:hidden;background:var(--ink);color:var(--paper);}
.marquee{display:flex;width:max-content;animation:scrollX 26s linear infinite;}
.marquee-wrap:hover .marquee{animation-play-state:paused;}
.marquee span{display:inline-flex;align-items:center;gap:1.6rem;padding-right:1.6rem;font-weight:700;font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;}
.marquee .spark{width:20px;height:20px;flex:none;}
@keyframes scrollX{to{transform:translateX(-50%);}}

/* WORK */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}
@media(max-width:980px){.work-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.work-grid{grid-template-columns:1fr;}}
.work-card{
  border:2.5px solid var(--ink);border-radius:var(--wobble);
  background:var(--paper);overflow:hidden;position:relative;
  transition:transform .25s ease,box-shadow .25s ease;
  display:block;
}
.work-card:nth-child(3n+1){transform:rotate(-1.2deg);}
.work-card:nth-child(3n+2){transform:rotate(.8deg);}
.work-card:nth-child(3n){transform:rotate(-.6deg);}
.work-card:hover{transform:rotate(0deg) translateY(-8px);box-shadow:var(--shadow);}
.work-thumb{height:210px;display:flex;align-items:center;justify-content:center;border-bottom:2.5px solid var(--ink);background-image:radial-gradient(var(--dot) 1.3px,transparent 1.3px);background-size:20px 20px;}
.work-thumb svg{width:58%;max-height:150px;}
.work-meta{padding:1.1rem 1.3rem 1.3rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem;}
.work-meta h3{font-size:1.02rem;}
.work-meta .type{font-family:var(--font-hand);font-size:1.1rem;color:#444;display:block;}
.work-arrow{width:34px;height:34px;flex:none;border:2.5px solid var(--ink);border-radius:50% 45% 52% 48%/48% 52% 45% 50%;display:grid;place-items:center;transition:transform .2s ease,background .2s,color .2s;}
.work-card:hover .work-arrow{background:var(--ink);}
.work-card:hover .work-arrow .doodle{stroke:var(--paper);}
.work-more{text-align:center;margin-top:3rem;}

/* TESTIMONIAL */
.quote-card{
  max-width:760px;margin:0 auto;padding:3.2rem 2.6rem 2.4rem;text-align:center;
  transform:rotate(-1.2deg);box-shadow:8px 9px 0 var(--ink);position:relative;
}
.quote-card .qmark{width:54px;margin:0 auto 1rem;}
.quote-card blockquote{font-size:clamp(1.15rem,2.2vw,1.5rem);font-weight:600;line-height:1.5;}
.quote-card cite{display:block;margin-top:1.4rem;font-style:normal;font-family:var(--font-hand);font-size:1.3rem;}
.quote-smile{position:absolute;top:16px;left:22px;width:44px;transform:rotate(-8deg);}

/* WHY — dark scattered cards */
#why{overflow:hidden;}
.why-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:3rem;align-items:center;}
@media(max-width:900px){.why-grid{grid-template-columns:1fr;}}
.why-copy h2{font-size:clamp(2rem,4.5vw,3.1rem);}
.why-copy .light{font-weight:500;}
.why-copy .hand{display:block;margin-top:1rem;opacity:.9;}
.why-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem;}
@media(max-width:520px){.why-cards{grid-template-columns:1fr;}}
.why-card{
  border:2.5px solid var(--paper);border-radius:var(--wobble);
  padding:1.6rem 1.4rem 1.4rem;position:relative;background:var(--ink);
  transition:transform .22s ease,box-shadow .22s ease;
}
.why-card:nth-child(1){transform:rotate(-2deg);}
.why-card:nth-child(2){transform:rotate(1.6deg) translateY(14px);}
.why-card:nth-child(3){transform:rotate(1deg);}
.why-card:nth-child(4){transform:rotate(-1.4deg) translateY(14px);}
.why-card:hover{transform:rotate(0) translateY(0);box-shadow:5px 6px 0 var(--paper);}
.why-card .num{
  position:absolute;top:-16px;left:16px;background:var(--paper);color:var(--ink);
  font-weight:800;font-size:.85rem;padding:.2em .55em;
  border-radius:8px 3px 10px 4px/4px 10px 3px 8px;transform:rotate(-3deg);
}
.why-card h3{font-size:1.05rem;margin-bottom:.4rem;}
.why-card p{font-size:.88rem;opacity:.85;}

/* TEAM (all Yohannes) */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;max-width:900px;margin:0 auto;}
@media(max-width:820px){.team-grid{grid-template-columns:1fr;max-width:380px;}}
.team-card{padding:2rem 1.4rem 1.6rem;text-align:center;transition:transform .22s ease,box-shadow .22s ease;background:var(--paper);}
.team-card:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:var(--shadow);}
.team-card:nth-child(2):hover{transform:translateY(-6px) rotate(1deg);}
.team-card .avatar{width:110px;height:110px;margin:0 auto 1rem;border:2.5px solid var(--ink);border-radius:48% 52% 50% 50%/52% 48% 52% 48%;display:grid;place-items:center;background:var(--soft);}
.team-card .avatar svg{width:70%;}
.team-card h3{font-size:1.05rem;}
.team-card span{font-family:var(--font-hand);font-size:1.2rem;color:#444;}
.team-note{text-align:center;margin-top:2.2rem;font-family:var(--font-hand);font-size:1.35rem;}

/* CTA BANNER */
.cta-banner{
  background:var(--ink);color:var(--paper);
  border-radius:28px 10px 32px 12px/12px 32px 10px 28px;
  padding:3.6rem 3rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;
  position:relative;overflow:hidden;
  background-image:radial-gradient(#3a3a3a 1.3px,transparent 1.3px);background-size:22px 22px;
}
@media(max-width:760px){.cta-banner{flex-direction:column;text-align:center;padding:2.8rem 1.6rem;}}
.cta-banner h2{font-size:clamp(1.7rem,3.6vw,2.6rem);}
.cta-banner .light{font-weight:500;}
.cta-banner .doodle-swash{position:absolute;top:14px;right:26%;width:80px;}
.cta-contact{display:flex;flex-direction:column;align-items:flex-end;gap:.8rem;}
@media(max-width:760px){.cta-contact{align-items:center;}}
.cta-contact .mini{font-family:var(--font-hand);font-size:1.2rem;opacity:.9;}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:1.3fr .8fr;gap:3.4rem;align-items:start;}
@media(max-width:900px){.faq-grid{grid-template-columns:1fr;}}
.faq-item{border-bottom:2.5px solid var(--ink);}
.faq-q{
  width:100%;background:none;border:none;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem .2rem;font-weight:700;font-size:1.02rem;color:var(--ink);
}
.faq-q .plus{width:30px;height:30px;flex:none;border:2.5px solid var(--ink);border-radius:50% 45% 52% 48%/48% 52% 45% 50%;display:grid;place-items:center;transition:transform .25s ease,background .2s;}
.faq-item.open .plus{transform:rotate(45deg);background:var(--ink);}
.faq-item.open .plus .doodle{stroke:var(--paper);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-a p{padding:0 .2rem 1.2rem;color:#333;font-size:.95rem;max-width:60ch;}
.faq-art{position:sticky;top:110px;}
@media(max-width:900px){.faq-art{display:none;}}

/* FOOTER */
footer{background:var(--ink);color:var(--paper);text-align:center;padding:4rem 0 2rem;border-top:2.5px solid var(--ink);}
footer .logo{justify-content:center;font-size:1.3rem;margin-bottom:.7rem;}
footer p{opacity:.85;max-width:420px;margin:0 auto 1.6rem;font-size:.93rem;}
.socials{display:flex;gap:1rem;justify-content:center;margin-bottom:2.2rem;}
.socials a{
  width:44px;height:44px;border:2.5px solid var(--paper);
  border-radius:50% 45% 52% 48%/48% 52% 45% 50%;
  display:grid;place-items:center;transition:transform .2s ease,background .2s,color .2s;
}
.socials a:hover{transform:translateY(-4px) rotate(-6deg);background:var(--paper);color:var(--ink);}
.socials a:hover .doodle{stroke:var(--ink);}
.socials svg{width:20px;height:20px;}
.foot-note{font-family:var(--font-hand);font-size:1.2rem;opacity:.75;}

/* reveal base state */
.reveal{opacity:0;transform:translateY(36px);}
.no-js .reveal,.reduced .reveal{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;}
}