/* ---------- reset & base ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; }
::selection{ background:#ffd23f; color:#1c1a17; }

.page{
  min-height:100vh;
  background:#faf3e6;
  color:#1c1a17;
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.accent{ color:#e8552d; }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%);
}

/* ---------- load-in / scroll-reveal resting states ----------
   Set at parse time (no flash); JS adds .in once revealed. Reduced-motion
   fallback below forces the final state without animating. */
[data-load]{ opacity:0; transform:translateY(14px); transition:opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1); }
[data-reveal]{ opacity:0; transform:translateY(20px); transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
[data-load].in, [data-reveal].in{ opacity:1; transform:none; }

/* Warp letters repaint every frame; pad each span's paint box (net-zero via
   negative margin) so bold/wide glyph states never get clipped at their edges. */
[data-l]{ display:inline-block; padding:0.12em 0.06em; margin:-0.12em -0.06em; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:1ms !important; transition-delay:0ms !important; animation-duration:1ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
  [data-load], [data-reveal]{ opacity:1 !important; transform:none !important; }
}

:focus-visible{ outline:2px solid #e8552d; outline-offset:3px; }

/* ---------- nav ---------- */
.nav{
  max-width:1180px; margin:0 auto;
  padding:22px clamp(20px,5vw,40px);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.wordmark{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:23px;
  font-variation-settings:'opsz' 16,'wght' 650,'wdth' 92;
  color:#1c1a17; text-decoration:none; letter-spacing:-0.01em;
}
.nav-links{ display:flex; align-items:center; gap:clamp(16px,3vw,28px); }
.nav-links a{
  color:#1c1a17; font:500 15px/1 'Inter',sans-serif; text-decoration:none;
  opacity:0.78; transition:opacity .2s ease;
}
.nav-links a:hover, .nav-links a:focus-visible{
  opacity:1; text-decoration:underline; text-underline-offset:4px;
}

/* ---------- hero ---------- */
.hero{
  max-width:1180px; margin:0 auto;
  padding:clamp(48px,9vw,108px) clamp(20px,5vw,40px) clamp(56px,9vw,118px);
}
.hero-inner{
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(36px,5vw,72px);
}
.hero-copy{ flex:1 1 440px; min-width:0; }

.warp-heading{
  margin:0;
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(2.95rem,8.4vw,6.7rem);
  line-height:0.95;
  letter-spacing:-0.022em;
  font-variation-settings:'opsz' 50,'wght' 480,'wdth' 90;
  max-width:13ch;
}
.warp-line{ display:block; white-space:nowrap; }
.warp-word{ display:inline-block; white-space:nowrap; }

.hero-sub{
  margin:30px 0 0; max-width:548px;
  font:400 clamp(16px,2vw,19px)/1.6 'Inter',sans-serif; color:#45403a;
}

.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:15px 27px; border-radius:999px;
  font:500 18px/1 'Inter',sans-serif; text-decoration:none;
}
.btn-primary{
  background:#e8552d; color:#1c1a17; border:1.5px solid #e8552d;
  border-radius:26px;
  box-shadow:0 1px 0 rgba(0,0,0,0.05);
  transition:transform .4s cubic-bezier(0.34,1.56,0.64,1), border-radius .4s cubic-bezier(0.34,1.56,0.64,1), box-shadow .3s ease;
}
.btn-primary:hover, .btn-primary:focus-visible{
  transform:scale(1.045); border-radius:16px; box-shadow:0 16px 30px -16px rgba(232,85,45,0.7);
  outline:none;
}

/* ---------- type toy ---------- */
.toy{
  flex:0 1 420px; min-width:290px; align-self:center;
  position:relative; aspect-ratio:1/1; cursor:pointer;
  user-select:none; -webkit-user-select:none; outline:none;
  transition:opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
.toy:focus-visible{ outline:2px solid #e8552d; outline-offset:6px; border-radius:50%; }
.toy-clip-defs{ position:absolute; }
.toy-face{
  position:absolute; inset:0; background:#1c1a17;
  clip-path:url(#home-toy-clip);
  display:flex; align-items:center; justify-content:center;
}
.toy-label{
  position:absolute; left:0; right:0; top:15%; text-align:center;
  font:400 13px/1 'Inter',sans-serif; letter-spacing:0.04em; color:#6b655c;
}
.toy-word{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(58px,7.2vw,86px); line-height:1; color:#ffd23f;
  font-variation-settings:'opsz' 40,'wght' 420;
  white-space:nowrap; will-change:opacity,transform;
}
.toy-hint{
  position:absolute; left:0; right:0; bottom:13%; text-align:center;
  font:400 11px/1 'Inter',sans-serif; letter-spacing:0.05em; color:#48443d;
}

/* ---------- work ---------- */
.work{
  max-width:1180px; margin:0 auto;
  padding:clamp(16px,4vw,36px) clamp(20px,5vw,40px) clamp(56px,9vw,104px);
  scroll-margin-top:24px;
}
.eyebrow{
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
  font:500 14px/1 'Inter',sans-serif; color:#6b6358;
}
.eyebrow-dot{ width:9px; height:9px; border-radius:50%; background:#e8552d; display:inline-block; flex-shrink:0; }

.work-heading{
  margin:0; font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(1.9rem,3.7vw,2.7rem);
  font-variation-settings:'opsz' 24,'wght' 600,'wdth' 92;
  letter-spacing:-0.015em; line-height:1.02;
}
.work-sub{
  margin:12px 0 0; font:400 16px/1.5 'Inter',sans-serif; color:#45403a; max-width:520px;
}

.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(390px,100%),1fr));
  gap:26px; margin-top:38px;
}

.card{
  background:#fffdf8; border:1px solid rgba(28,26,23,0.06); border-radius:28px;
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 1px 0 rgba(28,26,23,0.03), 0 12px 28px -22px rgba(28,26,23,0.30);
  cursor:pointer; outline:none; text-decoration:none; color:inherit;
  transition:transform .5s cubic-bezier(0.34,1.56,0.64,1), border-radius .5s cubic-bezier(0.34,1.56,0.64,1), box-shadow .4s ease, opacity .6s cubic-bezier(.22,1,.36,1);
}
.card:hover, .card:focus-visible{
  transform:translateY(-8px); border-radius:14px;
  box-shadow:0 24px 46px -24px rgba(28,26,23,0.42);
}
.card:focus-visible{ outline:2px solid #e8552d; outline-offset:3px; }

.card-media{ overflow:hidden; }
.card-media-square{ aspect-ratio:1/1; }
.card-media-4-3{ aspect-ratio:4/3; }
.card-media img{ display:block; width:100%; height:100%; object-fit:cover; }

.card-body{ display:flex; flex-direction:column; flex:1 1 auto; padding:20px 20px 22px; }
.card-body h3{
  margin:0; font-family:'Bricolage Grotesque',sans-serif; font-size:1.5rem;
  font-variation-settings:'opsz' 18,'wght' 620,'wdth' 90;
  letter-spacing:-0.01em; line-height:1.05;
}
.card-body p{ margin:8px 0 16px; font:400 15px/1.5 'Inter',sans-serif; color:#45403a; }
.card-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.card-tags span{
  font:500 12.5px/1 'Inter',sans-serif; color:#6b6358;
  background:rgba(28,26,23,0.05); border:1px solid rgba(28,26,23,0.08);
  padding:6px 11px; border-radius:999px;
}

/* ---------- footer ---------- */
.footer{
  position:relative; overflow:hidden;
  background:#1c1a17; color:#faf3e6;
  margin-top:clamp(40px,8vw,88px);
}
.footer-wave{
  position:absolute; top:-1px; left:0; right:0;
  height:clamp(34px,5vw,56px); z-index:4; pointer-events:none; line-height:0;
}
.footer-wave svg{ display:block; width:100%; height:100%; }

.playground{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.shape{ position:absolute; pointer-events:auto; cursor:grab; touch-action:none; will-change:transform; }
.shape:active{ cursor:grabbing; }
.shape svg{ width:100%; height:100%; display:block; overflow:visible; }
.shape path{ transition:d .5s cubic-bezier(0.34,1.3,0.5,1), fill .5s ease; }

.footer-inner{
  position:relative; z-index:2; pointer-events:none;
  max-width:1180px; margin:0 auto;
  padding:clamp(70px,11vw,128px) clamp(20px,5vw,40px) 44px;
}
.warp-heading-footer{
  font-size:clamp(2.6rem,7.6vw,5.8rem);
  font-variation-settings:'opsz' 50,'wght' 470,'wdth' 90;
  color:#faf3e6; max-width:12ch;
}
.footer-email{
  display:inline-block; margin-top:clamp(26px,4vw,38px);
  font:500 clamp(20px,3.4vw,32px)/1.1 'Inter',sans-serif;
  color:#faf3e6; text-decoration:none; letter-spacing:-0.01em;
  transition:color .25s ease; pointer-events:auto;
}
.footer-email:hover, .footer-email:focus-visible{ color:#e8552d; }

.footer-bottom{
  display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between;
  margin-top:clamp(48px,8vw,88px); padding-top:24px;
  border-top:1px solid rgba(250,243,230,0.14);
}
.footer-links{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-links a{
  color:rgba(250,243,230,0.82); font:500 15px/1 'Inter',sans-serif; text-decoration:none;
  transition:color .25s ease; pointer-events:auto;
}
.footer-links a:hover, .footer-links a:focus-visible{ color:#e8552d; }
.footer-copyright{ font:400 13.5px/1 'Inter',sans-serif; color:rgba(250,243,230,0.5); }