/* Hero with draggable stickers */
.hero{position:relative;background:var(--cream);padding:170px 0 190px;overflow:hidden;
  border-radius:0 0 clamp(40px,8vw,120px) clamp(40px,8vw,120px)}
.hero-c{position:relative;z-index:2;text-align:center;max-width:980px;margin:0 auto;pointer-events:none}
.hero-c a{pointer-events:auto}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(2.3rem,6.6vw,5.6rem);line-height:1.02;letter-spacing:-.04em;margin:0 0 26px}
.hero h1 .face{display:inline-block;width:.95em;height:.95em;border-radius:50%;background:var(--white);border:.05em solid #fff;box-shadow:0 6px 18px rgba(0,0,0,.12);vertical-align:-.12em;overflow:hidden;position:relative}
.hero h1 .face > *{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero p{max-width:40ch;margin:0 auto 34px;font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--ink-2)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--white);text-decoration:none;font-weight:700;padding:16px 28px;border-radius:18px;box-shadow:0 8px 22px rgba(0,0,0,.18);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:0 14px 30px rgba(0,0,0,.22)}
.hero-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.btn-alt{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink),0 8px 22px rgba(0,0,0,.1)}
.btn-alt:hover{box-shadow:inset 0 0 0 2px var(--ink),0 14px 30px rgba(0,0,0,.16)}
.hint{display:block;margin-top:26px;font-size:13px;font-weight:600;color:#6b5a1a}

.stickers{position:absolute;inset:0;z-index:3;pointer-events:none}
.stk{position:absolute;z-index:3;pointer-events:auto;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  font:700 clamp(.8rem,1.3vw,1.05rem)/1 var(--display);padding:14px 22px;border:1.5px solid var(--line);border-radius:999px;background:var(--white);
  box-shadow:var(--soft);transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--r,0deg));white-space:nowrap}
.stk.dragging{cursor:grabbing;box-shadow:0 18px 40px rgba(0,0,0,.18);z-index:10}
.stk.dark{background:var(--ink);color:var(--cream)}
.stk.round{width:clamp(96px,11vw,132px);height:clamp(96px,11vw,132px);border-radius:50%;padding:0;display:grid;place-items:center;text-align:center;line-height:1.15;white-space:normal}
.stk.round .spark{height:52%;width:auto;transform:translateX(-6%)}
.stk.star{border-radius:18px;padding:12px 18px}
.s1{--r:-9deg;left:8%;top:52px}
.s2{--r:7deg;right:6%;top:62px}
.s6{--r:0deg;right:30%;top:22px}
.s3{--r:-4deg;left:6%;bottom:62px}
.s5{--r:-10deg;left:32%;bottom:30px}
.s4{--r:10deg;right:8%;bottom:34px}

/* Section heads */
.sh{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(30px,4vw,50px)}
.sh h2{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,4.4vw,3.6rem);line-height:1.02;letter-spacing:-.04em;margin:0;max-width:16ch}
.sh h2 svg{height:.85em;width:auto;vertical-align:-.1em}

/* Portfolio: scattered cards */
.pf{padding:clamp(80px,10vw,130px) 0 clamp(110px,13vw,170px)}
.sh p{margin:0;font-weight:600;max-width:26ch}
.scatter{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px)}
.card{text-decoration:none;display:flex;flex-direction:column;border-radius:24px;box-shadow:var(--soft);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.card:nth-child(1){transform:rotate(-3deg)}
.card:nth-child(2){transform:rotate(2.5deg) translateY(56px)}
.card:nth-child(3){transform:rotate(-1.5deg) translateY(-14px)}
.card:nth-child(4){transform:rotate(3deg) translateY(38px)}
.card:hover,.card:focus-visible{transform:rotate(0) translateY(-6px) scale(1.02)}
.thumb{aspect-ratio:3/4;background:var(--white);border:1.5px solid var(--line);border-bottom:0;padding:10px 10px 0;border-radius:24px 24px 0 0}
.thumb .img{width:100%;height:100%;border-radius:16px 16px 0 0;background:var(--ink);color:var(--cream);display:flex;align-items:flex-end;padding:18px;font:800 clamp(1.1rem,1.7vw,1.5rem)/1.05 var(--display);letter-spacing:-.03em;object-fit:cover;background-size:cover}
.card:nth-child(2) .img,.card:nth-child(4) .img{background-color:var(--cream);color:var(--ink)}
.cap{flex:1;background:var(--white);border:1.5px solid var(--line);border-top:0;border-radius:0 0 24px 24px;padding:14px 16px 16px}
.cap small{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.cap strong{font-size:15.5px;line-height:1.3;display:block}

/* Services: bento */
.svc-sec{padding:clamp(50px,7vw,90px) 0 clamp(90px,12vw,150px)}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.8vw,22px)}
.b{border:1.5px solid var(--line);border-radius:32px;padding:clamp(24px,2.6vw,36px);background:var(--white);display:flex;flex-direction:column;gap:14px;transition:transform .25s}
.b:hover{transform:rotate(-1deg) translateY(-4px);box-shadow:var(--soft)}
.b h3{font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.2;letter-spacing:-.02em;margin:0}
.b p{margin:0;color:var(--ink-2);font-size:15px}
.b .ico{width:58px;height:58px;border-radius:18px;background:var(--cream);display:grid;place-items:center;border:1.5px solid var(--line)}
.b .ico svg{width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* 4 cards in a checkerboard: wide + narrow, then narrow + wide */
.b1,.b4{grid-column:span 4;flex-direction:row;align-items:flex-end;justify-content:space-between;min-height:260px}
.b1 .txt,.b4 .txt{max-width:44ch}
.b1 .ico,.b4 .ico{width:96px;height:96px;border-radius:50%;flex:none}
.b1 .ico svg,.b4 .ico svg{width:40px;height:40px}
.b1 h3,.b4 h3{font-size:clamp(1.3rem,2.2vw,1.9rem)}
.b1{background:var(--cream)}
.b1 .ico{background:var(--white);transform:rotate(-8deg)}
.b4{border-radius:32px 32px 32px 120px}
.b4 .ico{transform:rotate(8deg)}
.b2{grid-column:span 2;background:var(--ink);color:var(--white);border-radius:32px 32px 120px 32px}
.b2 p{color:#ddd}
.b2 .ico{background:var(--cream)}
.b3{grid-column:span 2;border-radius:120px 32px 32px 32px;background:var(--cream);padding-top:clamp(40px,4vw,56px)}
.b3 .ico{background:var(--white)}

@media (max-width:980px){
  .scatter{grid-template-columns:repeat(2,1fr);row-gap:60px}
  .b1,.b4{grid-column:span 6}
  .b2,.b3{grid-column:span 3}
}
@media (max-width:820px){
  .hero{padding:clamp(48px,10vw,80px) 0 clamp(56px,12vw,90px)}
  .stickers{position:relative;inset:auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 12px;
    margin:36px auto 0;padding:0 var(--gutter);max-width:560px}
  .stk{position:relative;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important}
  .stk.round{width:88px;height:88px}
}
@media (max-width:560px){
  .bento .b{grid-column:span 6}
  .b1,.b4{flex-direction:column-reverse;align-items:flex-start;min-height:0}
  .b4{flex-direction:column} /* icon first in its markup */
  .b1 .ico,.b4 .ico{width:72px;height:72px}
  .b4{border-radius:32px}
  .scatter{grid-template-columns:1fr;row-gap:28px}
  .card:nth-child(odd){transform:rotate(-1.5deg)}
  .card:nth-child(even){transform:rotate(1.5deg)}
  .thumb{aspect-ratio:4/3}
  .stk{padding:11px 16px}
}