:root{
  --off-white:#efede8;
  --mustard:#e4d143;
  --dusty-blue:#749fa4;
  --caramel:#825b2d;
  --espresso:#3d2e1d;
  --black:#191715;
  --muted:#d8d0c4;
  --paper:#f7f3ea;
  --radius-xl:34px;
  --radius-lg:24px;
  --radius-sm:14px;
  --shadow: 0 24px 70px rgba(25,23,21,.16);
  --line: rgba(61,46,29,.25);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--off-white);
  color:var(--espresso);
  font-family:"Creato Display", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  overflow-x:hidden;
}
::selection{ background:var(--mustard); color:var(--black); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.site-shell{ position:relative; min-height:100vh; }
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.13;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

.nav{
  position:fixed; top:14px; left:50%; transform:translateX(-50%);
  width:min(calc(100% - 28px),1180px); z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px 10px 14px;
  background:rgba(228,209,67,.92);
  border:1.5px solid var(--espresso);
  border-radius:999px;
  box-shadow:0 8px 30px rgba(25,23,21,.12);
  backdrop-filter:blur(12px);
}
.brand-lockup{ display:flex; align-items:center; gap:10px; min-width:0; }
.logo-badge{
  width:112px; height:48px; overflow:hidden; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:var(--mustard);
  border:1px solid rgba(61,46,29,.12);
  flex:0 0 auto;
}
.logo-badge img{ width:86px; height:42px; object-fit:contain; }
.brand-word{ font-weight:900; letter-spacing:-.04em; white-space:nowrap; }
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{
  font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.02em;
  padding:10px 13px; border-radius:999px;
  transition:background .2s ease, transform .2s ease;
}
.nav-links a:hover{ background:rgba(255,255,255,.45); transform:rotate(-2deg); }
.nav-cta{ background:var(--espresso)!important; color:var(--off-white)!important; }
.menu-toggle{ display:none; border:0; background:var(--espresso); color:var(--off-white); border-radius:999px; padding:10px 13px; font-weight:900; }

.section{ position:relative; padding:110px clamp(18px,4vw,70px); }
.inner{ width:min(1180px,100%); margin:0 auto; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:.04em;
  border:1.5px solid currentColor; border-radius:999px; padding:9px 13px;
  background:rgba(255,255,255,.28);
}
.eyebrow::before{ content:""; width:10px; height:10px; background:currentColor; border-radius:50%; }
h1,h2,h3,p{ margin:0; }
h1{
  font-size:clamp(58px,12vw,165px); line-height:.78; letter-spacing:-.075em;
  font-weight:950; text-transform:uppercase;
}
h2{
  font-size:clamp(42px,8vw,110px); line-height:.83; letter-spacing:-.065em;
  font-weight:950; text-transform:uppercase;
}
h3{ font-size:clamp(26px,3.2vw,44px); line-height:.9; letter-spacing:-.05em; font-weight:950; }
p{ font-size:clamp(16px,1.55vw,19px); line-height:1.45; }
.lead{ font-size:clamp(20px,2.2vw,28px); line-height:1.1; letter-spacing:-.035em; font-weight:800; }
.small{ font-size:14px; line-height:1.45; }

.button-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:54px; padding:16px 22px;
  border:1.8px solid var(--espresso); border-radius:999px;
  font-weight:950; text-transform:uppercase; letter-spacing:.01em;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  cursor:pointer;
}
.btn:hover{ transform:translateY(-4px) rotate(-1.5deg); box-shadow:0 14px 26px rgba(25,23,21,.15); }
.btn-primary{ background:var(--espresso); color:var(--off-white); }
.btn-yellow{ background:var(--mustard); color:var(--black); }
.btn-light{ background:var(--off-white); color:var(--espresso); }
.btn-blue{ background:var(--dusty-blue); color:var(--black); }

.hero{
  min-height:100vh; display:grid; place-items:end start;
  padding-top:120px; background:var(--mustard); overflow:hidden;
  border-bottom:1.5px solid var(--espresso);
}
.hero .inner{ position:relative; z-index:2; }
.hero-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(28px,5vw,74px); align-items:end; }
.hero-copy{ padding-bottom:30px; }
.hero-logo{
  width:min(320px,74vw); margin-bottom:34px; border-radius:26px; overflow:hidden;
  mix-blend-mode:multiply;
}
.hero-logo img{ width:100%; height:auto; object-fit:contain; }
.hero-sub{ margin-top:26px; width:min(660px,100%); }
.hero-actions{ margin-top:30px; }
.hero-card{
  align-self:stretch; min-height:560px; position:relative; border:1.8px solid var(--espresso);
  border-radius:var(--radius-xl); background:var(--off-white); box-shadow:var(--shadow);
  padding:26px; overflow:hidden; transform:rotate(1.2deg);
}
.hero-card::before{
  content:""; position:absolute; width:360px; height:360px; right:-90px; top:-70px;
  background:var(--dusty-blue); border:1.8px solid var(--espresso);
  border-radius:45% 55% 63% 37% / 47% 42% 58% 53%; transform:rotate(-12deg);
}
.hero-card::after{
  content:""; position:absolute; width:230px; height:230px; left:-60px; bottom:-60px;
  background:var(--caramel); border:1.8px solid var(--espresso);
  border-radius:58% 42% 42% 58% / 40% 62% 38% 60%; transform:rotate(19deg);
}
.motto-card{
  position:relative; z-index:2; min-height:100%; display:flex; flex-direction:column; justify-content:space-between;
}
.motto-sticker{
  width:max-content; max-width:100%; background:var(--mustard); border:1.8px solid var(--espresso);
  border-radius:999px; padding:12px 18px; font-size:34px; line-height:.9; font-weight:950; letter-spacing:-.055em;
  transform:rotate(-5deg);
}
.peanut-stack{ display:grid; gap:12px; align-self:flex-end; margin-top:30px; }
.peanut-pill{
  border:1.5px solid var(--espresso); border-radius:999px; padding:12px 15px; background:var(--paper);
  display:flex; align-items:center; gap:10px; font-size:15px; font-weight:900; text-transform:uppercase;
  box-shadow:5px 5px 0 var(--espresso);
}
.peanut-pill:nth-child(2){ transform:rotate(-3deg) translateX(-28px); background:var(--dusty-blue); }
.peanut-pill:nth-child(3){ transform:rotate(3deg) translateX(15px); background:var(--mustard); }
.peanut-mark{ width:18px; height:28px; background:var(--espresso); border-radius:54% 46% 46% 54% / 44% 61% 39% 56%; display:inline-block; }
.floating-tag{
  position:absolute; z-index:3; border:1.6px solid var(--espresso); border-radius:999px; background:var(--off-white);
  padding:11px 16px; font-weight:950; text-transform:uppercase; box-shadow:5px 5px 0 var(--espresso);
  animation:float 5.6s ease-in-out infinite;
}
.tag-1{ top:10%; left:11%; transform:rotate(-8deg); }
.tag-2{ top:28%; right:7%; transform:rotate(9deg); background:var(--dusty-blue); animation-delay:.4s; }
.tag-3{ bottom:22%; left:7%; right:auto; transform:rotate(-5deg); background:var(--caramel); color:var(--off-white); animation-delay:.9s; }
@keyframes float{ 0%,100%{ translate:0 0; } 50%{ translate:0 -14px; } }

.marquee-wrap{ background:var(--espresso); color:var(--mustard); border-top:1.5px solid var(--espresso); border-bottom:1.5px solid var(--espresso); overflow:hidden; }
.marquee{ display:flex; width:max-content; animation:marquee 23s linear infinite; }
.marquee span{ font-size:clamp(38px,6vw,78px); font-weight:950; letter-spacing:-.065em; white-space:nowrap; padding:18px 24px; text-transform:uppercase; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.about{ background:var(--off-white); }
.about-layout{ display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:start; }
.about-panel{
  background:var(--espresso); color:var(--off-white); border-radius:var(--radius-xl); padding:34px; min-height:460px;
  display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; position:relative;
}
.about-panel::after{
  content:""; position:absolute; width:260px; height:260px; right:-90px; bottom:-60px; background:var(--mustard);
  border-radius:60% 40% 50% 50%; transform:rotate(22deg);
}
.about-panel p{ position:relative; z-index:1; }
.stat-bubble{
  position:relative; z-index:1; width:180px; aspect-ratio:1; background:var(--mustard); color:var(--black);
  border-radius:56% 44% 64% 36% / 44% 56% 44% 56%; display:grid; place-items:center; text-align:center;
  border:1.8px solid var(--espresso); transform:rotate(-8deg); font-weight:950; letter-spacing:-.05em; font-size:27px;
}
.about-copy{ display:grid; gap:24px; }
.about-copy .lead{ max-width:820px; }
.split-notes{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:8px; }
.note-card{
  min-height:150px; border:1.5px solid var(--espresso); border-radius:var(--radius-lg); padding:20px;
  background:var(--paper); display:flex; flex-direction:column; justify-content:space-between; transform:rotate(var(--r));
  box-shadow:6px 6px 0 rgba(61,46,29,.15);
}
.note-card strong{ font-size:24px; line-height:.92; letter-spacing:-.05em; }

.services{ background:var(--dusty-blue); border-top:1.5px solid var(--espresso); border-bottom:1.5px solid var(--espresso); }
.section-head{ display:flex; justify-content:space-between; align-items:end; gap:28px; margin-bottom:44px; }
.section-head p{ max-width:420px; }
.service-grid{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:14px; }
.service-card{
  min-height:430px; background:var(--off-white); border:1.8px solid var(--espresso); border-radius:var(--radius-lg);
  padding:20px; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.service-card:hover{ transform:translateY(-10px) rotate(-1.5deg); box-shadow:10px 10px 0 var(--espresso); background:var(--mustard); }
.service-card:nth-child(even):hover{ transform:translateY(-10px) rotate(1.5deg); }
.service-no{ font-size:12px; font-weight:950; opacity:.75; }
.service-card h3{ margin-top:18px; }
.service-card ul{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px; }
.service-card li{ font-size:15px; line-height:1.15; font-weight:780; border-top:1px solid rgba(61,46,29,.18); padding-top:10px; }
.service-blob{ position:absolute; width:120px; height:120px; right:-40px; bottom:-32px; background:var(--caramel); opacity:.18; border-radius:58% 42% 51% 49%; }

.work{ background:var(--off-white); }
.work-grid{ display:grid; grid-template-columns:1.3fr .7fr; gap:18px; align-items:stretch; }
.work-main, .work-tile{
  border:1.7px solid var(--espresso); border-radius:var(--radius-xl); overflow:hidden; background:var(--paper);
  position:relative; box-shadow:var(--shadow);
}
.work-main img, .work-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.work-main:hover img, .work-tile:hover img{ transform:scale(1.04); }
.work-main{ min-height:530px; }
.work-side{ display:grid; gap:18px; }
.work-tile{ min-height:256px; }
.work-caption{
  position:absolute; left:18px; bottom:18px; right:18px; z-index:2; display:flex; justify-content:space-between; gap:12px; align-items:center;
  background:rgba(239,237,232,.88); border:1.5px solid var(--espresso); border-radius:999px; padding:12px 14px 12px 18px;
  backdrop-filter:blur(10px); font-weight:950; text-transform:uppercase;
}
.work-caption small{ opacity:.75; font-weight:900; }
.micro-case-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px; }
.micro-case{
  border:1.7px solid var(--espresso); border-radius:var(--radius-lg); overflow:hidden; min-height:280px; background:var(--paper); position:relative;
}
.micro-case img{ width:100%; height:100%; object-fit:cover; }

.packages{ background:var(--espresso); color:var(--off-white); overflow:hidden; }
.package-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.package-card{
  min-height:570px; border:1.8px solid var(--off-white); color:var(--espresso); padding:28px;
  display:flex; flex-direction:column; justify-content:space-between; border-radius:38px;
  background:var(--off-white); position:relative; transform:rotate(var(--r)); box-shadow:9px 9px 0 rgba(239,237,232,.24);
}
.package-card.featured{ background:var(--mustard); color:var(--black); transform:rotate(-1deg) translateY(-16px); }
.package-card.soft{ background:#ded9c8; }
.pkg-top{ display:grid; gap:18px; }
.pkg-label{ width:max-content; padding:8px 12px; border:1.5px solid currentColor; border-radius:999px; font-weight:950; text-transform:uppercase; }
.price{ font-size:clamp(52px,6vw,86px); font-weight:950; letter-spacing:-.08em; line-height:.85; }
.price span{ display:block; font-size:14px; letter-spacing:.02em; text-transform:uppercase; margin-bottom:6px; opacity:.78; }
.package-card ul{ padding-left:18px; margin:20px 0 0; display:grid; gap:10px; }
.package-card li{ font-size:16px; line-height:1.16; font-weight:800; }
.pkg-foot{ margin-top:24px; border-top:1.3px solid rgba(61,46,29,.25); padding-top:16px; font-size:13px; font-weight:850; text-transform:uppercase; }

.process{ background:var(--mustard); border-top:1.5px solid var(--espresso); border-bottom:1.5px solid var(--espresso); }
.process-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:38px; }
.step{
  background:var(--off-white); border:1.7px solid var(--espresso); border-radius:var(--radius-lg); padding:20px; min-height:230px;
  display:flex; flex-direction:column; justify-content:space-between; transition:transform .2s ease;
}
.step:hover{ transform:translateY(-8px) rotate(2deg); }
.step-number{ width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:var(--espresso); color:var(--off-white); font-weight:950; }
.step h3{ font-size:32px; }
.step p{ font-size:15px; }

.cta{ background:var(--off-white); }
.cta-panel{
  background:var(--black); color:var(--off-white); border-radius:48px; padding:clamp(28px,6vw,68px);
  min-height:560px; display:grid; align-items:end; position:relative; overflow:hidden; border:1.8px solid var(--espresso);
}
.cta-panel::before{
  content:""; position:absolute; width:520px; height:520px; right:-150px; top:-140px; background:var(--dusty-blue);
  border-radius:52% 48% 64% 36% / 46% 55% 45% 54%; opacity:.9;
}
.cta-panel::after{
  content:""; position:absolute; width:340px; height:340px; left:-120px; bottom:-100px; background:var(--mustard);
  border-radius:47% 53% 41% 59% / 50% 45% 55% 50%;
}
.cta-content{ position:relative; z-index:2; max-width:900px; }
.cta-content p{ margin-top:22px; max-width:600px; }
.cta .button-row{ margin-top:30px; }
.footer{
  padding:24px clamp(18px,4vw,70px) 38px; background:var(--black); color:var(--off-white);
  border-top:1.5px solid rgba(239,237,232,.25);
}
.footer-inner{ width:min(1180px,100%); margin:0 auto; display:flex; justify-content:space-between; gap:24px; align-items:center; flex-wrap:wrap; }
.footer a{ opacity:.85; font-weight:800; }
.footer a:hover{ opacity:1; }
.footer-logo{ width:120px; height:56px; overflow:hidden; border-radius:999px; background:var(--mustard); display:grid; place-items:center; }
.footer-logo img{ width:96px; height:50px; object-fit:contain; }

.reveal{ opacity:0; transform:translateY(28px); transition:opacity .65s ease, transform .65s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

@media (max-width: 1050px){
  .hero-grid, .about-layout, .work-grid{ grid-template-columns:1fr; }
  .hero-card{ min-height:420px; }
  .service-grid{ grid-template-columns:repeat(2,1fr); }
  .service-card{ min-height:340px; }
  .package-grid{ grid-template-columns:1fr; }
  .package-card,.package-card.featured{ transform:none; min-height:auto; }
  .process-row{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .nav{ top:10px; align-items:center; }
  .brand-word{ display:none; }
  .nav-links{
    position:absolute; top:66px; left:0; right:0; display:none; flex-direction:column; align-items:stretch;
    background:var(--mustard); border:1.5px solid var(--espresso); border-radius:24px; padding:10px; box-shadow:var(--shadow);
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:14px 16px; }
  .menu-toggle{ display:block; }
  .section{ padding:82px 18px; }
  .hero{ padding-top:115px; }
  h1{ font-size:clamp(58px,19vw,100px); }
  h2{ font-size:clamp(44px,15vw,80px); }
  .hero-logo{ width:230px; margin-bottom:22px; }
  .floating-tag{ display:none; }
  .about-panel::after{ display:none; }
  .split-notes, .micro-case-grid{ grid-template-columns:1fr; }
  .service-grid{ grid-template-columns:1fr; }
  .section-head{ display:grid; }
  .work-main{ min-height:360px; }
  .work-side{ grid-template-columns:1fr; }
  .process-row{ grid-template-columns:1fr; }
  .cta-panel{ min-height:520px; border-radius:32px; }
  .footer-inner{ align-items:flex-start; }
}