:root{
  --ink:#1B1B1F;
  --cream:#FFFBF2;
  --coral:#FF5A5F;
  --purple:#6C4AB6;
  --yellow:#FFC93C;
  --teal:#00A896;
  --purple-tint:#F1EBFB;
  --coral-tint:#FFECE6;
  --teal-tint:#E1F5F1;
  --max:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Plus Jakarta Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{
  font-family:'Fredoka', sans-serif;
  margin:0;
  line-height:1.05;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}

.eyebrow{
  font-family:'Space Mono', monospace;
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:"";
  width:8px;height:8px;
  border-radius:50%;
  background:currentColor;
  display:inline-block;
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid var(--teal);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
  html{scroll-behavior:auto;}
}

/* ---------- NAV ---------- */
header.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,251,242,0.9);
  backdrop-filter:blur(6px);
  border-bottom:2px solid var(--ink);
}
.nav-inner{
  max-width:var(--max); margin:0 auto; padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{
  font-family:'Fredoka', sans-serif;
  font-size:1.35rem;
  font-weight:700;
  display:flex; align-items:center; gap:8px;
}
.logo .dot{color:var(--coral);}
nav.links{display:flex; align-items:center; gap:32px;}
nav.links a{
  font-weight:600;
  font-size:0.95rem;
  position:relative;
}
nav.links a:not(.btn)::after{
  content:"";
  position:absolute; left:0; bottom:-4px;
  width:0; height:3px; background:var(--coral);
  transition:width 0.2s ease;
}
nav.links a:not(.btn):hover::after{width:100%;}
.btn{
  font-family:'Fredoka', sans-serif;
  font-weight:600;
  background:var(--coral);
  color:var(--cream);
  padding:10px 22px;
  border-radius:100px;
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  display:inline-block;
  cursor:pointer;
  font-size:0.95rem;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover{transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink);}
.btn:active{transform:translate(0,0); box-shadow:1px 1px 0 var(--ink);}

.menu-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px;}
.menu-toggle span{display:block; width:26px; height:3px; background:var(--ink); margin:5px 0; border-radius:2px;}

/* ---------- HERO ---------- */
.hero{
  padding:88px 0 64px;
  position:relative;
}
.hero-inner{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:48px;
  align-items:center;
}
.hero h1{
  font-size:clamp(2.6rem, 5vw, 4rem);
  margin:18px 0 22px;
}
.hero h1 .hl{color:var(--coral);}
.hero p.lede{
  font-size:1.15rem;
  max-width:46ch;
  color:#3a3a40;
  margin-bottom:32px;
}
.hero .eyebrow{color:var(--purple);}
.hero-ctas{display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
.hero-ctas .secondary{font-weight:600; border-bottom:2px solid var(--ink);}

.hero-art{position:relative; display:flex; align-items:center; justify-content:center; min-height:340px;}
.sign-card{
  background:var(--purple);
  color:var(--cream);
  border:3px solid var(--ink);
  border-radius:28px;
  padding:38px 34px;
  width:100%;
  max-width:360px;
  box-shadow:8px 8px 0 var(--ink);
  transform:rotate(-3deg);
  position:relative;
}
.sign-card .greet{
  font-family:'Fredoka', sans-serif;
  font-size:2.2rem;
  font-weight:700;
}
.sign-card p{
  font-size:0.95rem;
  opacity:0.9;
  margin-top:10px;
}
.sticker{
  position:absolute;
  background:var(--yellow);
  color:var(--ink);
  border:3px solid var(--ink);
  border-radius:50%;
  width:118px; height:118px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  font-family:'Fredoka', sans-serif;
  font-weight:700;
  line-height:1.05;
  transform:rotate(11deg);
  box-shadow:5px 5px 0 var(--ink);
  top:-28px; right:-18px;
}
.sticker .num{font-size:1.9rem;}
.sticker .lbl{font-family:'Space Mono', monospace; font-size:0.58rem; letter-spacing:0.06em; text-transform:uppercase; font-weight:700; margin-top:2px;}

/* ---------- SCALLOP DIVIDERS (signature element) ---------- */
.scallop{
  height:34px;
  width:100%;
  -webkit-mask-image: radial-gradient(circle at 22px 0px, transparent 21px, black 21.5px);
  mask-image: radial-gradient(circle at 22px 0px, transparent 21px, black 21.5px);
  -webkit-mask-size:44px 100%;
  mask-size:44px 100%;
  -webkit-mask-repeat:repeat-x;
  mask-repeat:repeat-x;
}
.scallop.to-purple{background:var(--purple-tint);}
.scallop.to-teal{background:var(--teal-tint);}
.scallop.to-coral{background:var(--coral-tint);}
.scallop.to-cream{background:var(--cream);}
.scallop.to-ink{background:var(--ink);}

/* ---------- SERVICES ---------- */
.services{background:var(--purple-tint); padding:70px 0 90px;}
.services .eyebrow{color:var(--purple);}
.services h2{font-size:clamp(1.9rem,3.4vw,2.6rem); margin:16px 0 40px; max-width:22ch;}

.service-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}
.service-card{
  background:var(--cream);
  border:3px solid var(--ink);
  border-radius:22px;
  padding:26px 22px 24px;
  box-shadow:6px 6px 0 var(--ink);
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.service-card:hover{transform:translateY(-6px); box-shadow:8px 10px 0 var(--ink);}
.service-card:nth-child(1){transform:rotate(-1.4deg);}
.service-card:nth-child(2){transform:rotate(1deg);}
.service-card:nth-child(3){transform:rotate(-0.8deg);}
.service-card:nth-child(4){transform:rotate(1.6deg);}
.service-card:hover{transform:translateY(-6px) rotate(0deg);}
.service-icon{
  width:48px; height:48px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem;
  margin-bottom:16px;
  border:2px solid var(--ink);
}
.service-card:nth-child(1) .service-icon{background:var(--coral);}
.service-card:nth-child(2) .service-icon{background:var(--yellow);}
.service-card:nth-child(3) .service-icon{background:var(--teal); color:var(--cream);}
.service-card:nth-child(4) .service-icon{background:var(--purple); color:var(--cream);}
.service-card h3{font-size:1.15rem; margin-bottom:10px;}
.service-card p{font-size:0.92rem; color:#3a3a40; margin:0;}

/* ---------- BIO ---------- */
.bio{background:var(--cream); padding:80px 0 90px;}
.bio .eyebrow{color:var(--teal);}
.bio-inner{
  display:grid;
  grid-template-columns:0.75fr 1.25fr;
  gap:56px;
  align-items:start;
  margin-top:30px;
}
.badge-frame{
  background:var(--cream);
  border:3px solid var(--ink);
  border-radius:24px;
  padding:20px;
  box-shadow:7px 7px 0 var(--ink);
  transform:rotate(-2deg);
}
.avatar{
  width:100%;
  aspect-ratio:1/1;
  border-radius:16px;
  background:linear-gradient(135deg, var(--coral), var(--yellow));
  display:flex; align-items:center; justify-content:center;
  font-family:'Fredoka', sans-serif;
  font-size:3.4rem;
  font-weight:700;
  color:var(--cream);
  border:2px solid var(--ink);
}
.badge-frame .name{
  font-family:'Fredoka', sans-serif;
  font-size:1.3rem;
  font-weight:700;
  margin-top:16px;
}
.badge-frame .role{
  font-family:'Space Mono', monospace;
  font-size:0.8rem;
  color:var(--purple);
  margin-top:4px;
}

.bio-text h2{font-size:clamp(1.8rem,3vw,2.3rem); margin-bottom:20px;}
.bio-text p{
  font-size:1.05rem;
  color:#333338;
  margin:0 0 18px;
  max-width:62ch;
}
.bio-text p:first-of-type{
  font-size:1.18rem;
  color:var(--ink);
}
.tag-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}
.tag{
  font-family:'Space Mono', monospace;
  font-size:0.78rem;
  font-weight:700;
  padding:8px 14px;
  border-radius:100px;
  border:2px solid var(--ink);
  background:var(--teal-tint);
}
.tag:nth-child(2){background:var(--coral-tint);}
.tag:nth-child(3){background:var(--purple-tint);}
.tag:nth-child(4){background:#FFF3CE;}

/* ---------- CONTACT ---------- */
.contact{background:var(--ink); color:var(--cream); padding:80px 0 70px;}
.contact .eyebrow{color:var(--yellow);}
.contact-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  margin-top:24px;
}
.contact h2{font-size:clamp(2rem,3.6vw,2.8rem); margin-bottom:18px; max-width:14ch;}
.contact p.lede{color:#cfcfd6; max-width:38ch; font-size:1.05rem; margin-bottom:28px;}
.contact-detail{display:flex; align-items:center; gap:12px; margin-bottom:14px; font-weight:600;}
.contact-detail .ic{
  width:34px; height:34px; border-radius:50%;
  background:var(--teal); display:flex; align-items:center; justify-content:center;
  font-size:0.95rem; flex-shrink:0;
}
.contact-detail a { border-bottom: 1px solid rgba(255, 255, 255, .5);
  padding-bottom: 2px; }
.contact-detail a:hover { border-bottom-color: transparent; }

form.contact-form{
  background:var(--cream);
  color:var(--ink);
  border:3px solid var(--cream);
  border-radius:24px;
  padding:30px;
  box-shadow:8px 8px 0 var(--coral);
}
.field{margin-bottom:18px;}
.field label{
  display:block;
  font-family:'Space Mono', monospace;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-weight:700;
  margin-bottom:6px;
}
.field input, .field textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:2px solid var(--ink);
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:0.95rem;
  background:var(--cream);
  color:var(--ink);
  resize:vertical;
}
.field textarea{min-height:90px;}
form.contact-form .btn{width:100%; text-align:center; border-color:var(--ink);}
.form-note{
  font-family:'Space Mono', monospace;
  font-size:0.74rem;
  margin-top:14px;
  color:#4a4a4a;
  text-align:center;
  min-height:1.2em;
}

footer{
  background:var(--ink);
  color:#8f8f97;
  text-align:center;
  padding:0 0 34px;
  font-size:0.85rem;
}
footer p{margin:0;}
footer strong{color:var(--cream);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:880px){
  nav.links{
    position:fixed; top:64px; left:0; right:0;
    background:var(--cream);
    flex-direction:column;
    align-items:flex-start;
    padding:24px 28px 30px;
    gap:20px;
    border-bottom:2px solid var(--ink);
    transform:translateY(-140%);
    transition:transform 0.25s ease;
  }
  nav.links.open{transform:translateY(0);}
  .menu-toggle{display:block;}
  .hero-inner{grid-template-columns:1fr; gap:56px;}
  .hero-art{order:-1;}
  .service-grid{grid-template-columns:repeat(2,1fr);}
  .bio-inner{grid-template-columns:1fr;}
  .badge-frame{max-width:260px;}
  .contact-inner{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .service-grid{grid-template-columns:1fr;}
  .sticker{width:96px; height:96px; top:-20px; right:-10px;}
}