/* Happy Brand — charte officielle lumineuse */
:root{
  --hb-yellow:#ffdd59;
  --hb-yellow-soft:#fff5c9;
  --hb-ink:#242b2f;
  --hb-blue:#cfe9f5;
  --hb-blue-soft:#edf7fb;
  --hb-pink:#d00078;
  --hb-white:#fff;
  --hb-paper:#fffdf8;
  --hb-line:rgba(36,43,47,.18);
  --hb-shadow:0 12px 0 rgba(36,43,47,.16);
  --page-x:max(28px,calc((100vw - 1180px)/2));
}
html{scroll-padding-top:90px}
body{color:var(--hb-ink);background:var(--hb-paper)}
.brand-mascot{display:block;pointer-events:none;user-select:none}
@keyframes mascot-float{50%{transform:translateY(-7px) rotate(1.5deg)}}
.section-pad,
.hero,.process,.services,.happy-products,.founder,.work,.major-references,.testimonial,.faq,.contact,
.hi-hero,.hi-problem,.hi-program,.hi-method,.hi-offer,
.references-hero,.projects-section{padding-left:var(--page-x);padding-right:var(--page-x)}
.site-header,.hi-header,.references-header,footer{padding-left:var(--page-x);padding-right:var(--page-x)}
.section-heading,.products-heading,.major-references-heading,.faq,.contact,.founder,.work,.hero,
.hi-hero,.hi-problem,.hi-method,.hi-offer,.hero-layout{min-width:0}
.button,.header-button,.hi-button,.hi-header-cta{border-radius:12px;box-shadow:4px 4px 0 var(--hb-ink)}
.eyebrow,.hero-kicker,.hi-kicker{letter-spacing:1.35px}

/* Navigation alignée */
.site-header,.hi-header,.references-header{
  height:98px;
  color:var(--hb-ink);
  border-color:var(--hb-line);
  background:rgba(255,253,248,.95);
  backdrop-filter:blur(14px)
}
.site-header .brand i,.references-header .brand i,.hi-brand i{background:var(--hb-yellow)}
.desktop-nav,.references-header nav,.hi-header nav{gap:34px}
.site-header .header-cta,.references-header .header-button,.hi-header .hi-header-cta{
  color:var(--hb-ink);border-color:var(--hb-ink);background:var(--hb-yellow);box-shadow:4px 4px 0 var(--hb-ink)
}

/* Hero principal */
.hero{
  position:relative;
  min-height:720px;
  padding-top:70px;
  padding-bottom:85px;
  grid-template-columns:minmax(0,1fr) minmax(420px,.88fr);
  gap:64px;
  color:var(--hb-ink);
  background:
    radial-gradient(ellipse at 7% 82%,rgba(207,233,245,.55),transparent 22%),
    radial-gradient(ellipse at 87% 7%,rgba(255,221,89,.2),transparent 25%),
    var(--hb-white)
}
.hero::before,.hero::after{content:"";position:absolute;z-index:0;border:28px solid var(--hb-yellow-soft);border-radius:50%;opacity:.58;pointer-events:none}
.hero::before{width:240px;height:90px;left:-90px;top:160px;transform:rotate(25deg)}
.hero::after{width:310px;height:100px;right:-120px;bottom:45px;transform:rotate(-18deg)}
.hero-copy,.hero-visual{position:relative;z-index:2}
.hero h1{max-width:650px;color:var(--hb-ink);font-size:clamp(58px,6.25vw,88px);line-height:.94;letter-spacing:-5px}
.hero h1 .marker{color:var(--hb-ink);font-family:inherit;font-style:normal;font-weight:800;letter-spacing:inherit}
.hero h1 .marker::after{height:19px;bottom:3px;background:var(--hb-yellow)}
.hero .eyebrow{color:var(--hb-ink)}.hero .eyebrow i{background:var(--hb-yellow);box-shadow:0 0 0 5px rgba(255,221,89,.25)}
.hero-lead{max-width:570px;color:#5e676c}
.hero .text-link{color:var(--hb-ink)}
.hero-proof p{color:#6d7478}.hero-proof strong{color:var(--hb-ink)}
.happy-wheel-game{
  width:min(100%,520px);
  min-height:560px;
  border-color:var(--hb-ink);
  border-radius:26px;
  color:var(--hb-ink);
  background:var(--hb-yellow);
  box-shadow:10px 10px 0 var(--hb-ink)
}
.happy-wheel-game::before{background-image:linear-gradient(rgba(36,43,47,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(36,43,47,.08) 1px,transparent 1px)}
.happy-wheel-game::after{content:none}
.wheel-game-heading{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:15px}
.wheel-game-heading>div{position:relative;z-index:2}
.mascot-hero{
  width:82px;
  height:102px;
  margin:-16px -2px -35px 0;
  object-fit:contain;
  animation:mascot-float 3.8s ease-in-out infinite
}
.prize-wheel{background:conic-gradient(from -30deg,#fff 0 60deg,var(--hb-blue) 60deg 120deg,var(--hb-pink) 120deg 180deg,#fff 180deg 240deg,var(--hb-yellow) 240deg 300deg,var(--hb-blue) 300deg)}
.wheel-game-footer{background:rgba(255,255,255,.76)}
.logo-strip{color:var(--hb-ink);background:var(--hb-blue);border:0}.logo-strip p{color:rgba(36,43,47,.58)}.ticker i{background:var(--hb-pink)}

/* Titres et rythme communs */
.section-heading,.products-heading,.major-references-heading{
  grid-template-columns:minmax(0,1fr) minmax(300px,430px);
  gap:70px;
  align-items:end;
  margin-bottom:58px
}
.section-heading h2,.products-heading h2,.work h2,.contact h2,.major-references-heading h2,.faq-heading h2{
  letter-spacing:-3.5px
}
.section-heading h2 span,.products-heading h2 span,.work h2 span,.contact h2 span,.major-references-heading h2 span{color:var(--hb-pink)}

/* Méthode : retour au traitement initial, plus sobre */
.process{position:relative;color:var(--hb-white);background:var(--hb-ink)}
.process::after{
  content:"";
  position:absolute;
  right:var(--page-x);
  top:72px;
  width:180px;
  height:70px;
  border:18px solid rgba(255,221,89,.08);
  border-radius:50%;
  transform:rotate(-12deg);
  pointer-events:none
}
.process>.section-heading,.process>.steps{position:relative;z-index:1}
.process .section-heading h2 span{color:var(--hb-yellow)}
.eyebrow-light{color:rgba(255,255,255,.64)}
.process .heading-side p{color:rgba(255,255,255,.58);opacity:1}
.process .light-link{color:var(--hb-white)}
.steps{
  border:0;
  border-top:1px solid rgba(255,255,255,.16);
  background:transparent;
  gap:0
}
.step{
  min-height:330px;
  border:0;
  border-right:1px solid rgba(255,255,255,.16);
  color:var(--hb-white);
  background:transparent
}
.step:first-child{border-left:1px solid rgba(255,255,255,.16)}
.step:nth-child(2),.step:nth-child(4){background:transparent}
.step-number{color:rgba(255,255,255,.3)}
.step-icon{
  width:auto;
  height:auto;
  margin:50px 0 30px;
  display:block;
  border:0;
  border-radius:0;
  color:var(--hb-yellow);
  background:transparent;
  font-size:38px
}
.step p{color:rgba(255,255,255,.5)}

/* Services : retour à la composition claire de la première version */
.services{background:var(--hb-paper)}
.services .section-heading h2 span{color:var(--hb-yellow)}
.service-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--hb-line);
  border-radius:20px;
  background:var(--hb-white);
  gap:0
}
.service-card{
  min-height:430px;
  border:0;
  border-right:1px solid var(--hb-line);
  color:var(--hb-ink);
  background:var(--hb-white)
}
.service-card:last-child{border-right:0}
.service-card:nth-child(1){background:var(--hb-yellow)}
.service-card:nth-child(2){background:var(--hb-white)}
.service-card:nth-child(3){background:var(--hb-white)}
.service-card:nth-child(4){background:var(--hb-white)}
.service-card:hover{background:var(--hb-blue-soft)}
.service-card:nth-child(1):hover{background:var(--hb-yellow)}
.service-card h3{margin-top:70px;font-size:27px;line-height:1.1}
.service-card p,.service-top span{color:#667075}
.service-open,.service-top b{border-radius:50%}
.services-heading-side{position:relative;min-height:142px;display:flex;align-items:flex-start}
.services-heading-side .heading-description{max-width:290px;margin:0;padding-right:8px}
.mascot-services{
  width:112px;
  height:142px;
  margin:-18px 0 0 auto;
  object-fit:contain;
  transform:rotate(3deg)
}
.service-dialog,.product-dialog{border-radius:22px}
.service-dialog-visual,.product-dialog-visual{border-radius:0}
.service-detail-grid section,.mini-process,.service-outcome,.product-dialog-details section,.product-dialog-meta{border-radius:14px}

/* Produits avec la même grille et la vraie palette */
.happy-products{position:relative;overflow:hidden;color:var(--hb-ink);background:var(--hb-white)}
.happy-products::before{content:"";position:absolute;right:-120px;top:40px;width:420px;height:180px;border:35px solid var(--hb-yellow-soft);border-radius:50%;transform:rotate(20deg);pointer-events:none}
.products-heading,.products-grid{position:relative;z-index:1}
.products-heading h2{font-size:clamp(48px,5vw,72px);line-height:.96}.products-heading h2 span{color:var(--hb-pink);font-family:inherit;font-style:normal;font-weight:800}
.products-heading>p{color:#667075}
.products-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:560px;gap:22px}
.product-card{
  height:560px;min-height:0;padding:30px;
  border:2px solid var(--hb-ink);border-radius:24px;
  color:var(--hb-ink);box-shadow:7px 7px 0 var(--hb-ink)
}
.product-card:hover,.product-card:focus{transform:translate(-3px,-4px);box-shadow:11px 12px 0 var(--hb-ink)}
.product-card::before,.product-card::after{content:"";position:absolute;pointer-events:none;opacity:.14}
.product-card>.product-top,.product-card>.product-symbol,.product-card>div:last-child,.product-promo-badge{position:relative;z-index:3}
.product-card h3{max-width:68%;font-size:clamp(40px,4vw,58px);line-height:.9;letter-spacing:-3px}
.product-mascot{
  position:absolute;
  z-index:4;
  right:24px;
  top:92px;
  width:155px;
  height:196px;
  object-fit:contain;
  filter:drop-shadow(5px 7px 0 rgba(36,43,47,.12));
  transition:transform .3s
}
.product-card:hover .product-mascot,.product-card:focus .product-mascot{transform:translateY(-8px) rotate(2deg)}
.product-top b{background:rgba(255,255,255,.62)}
.product-pay-chip{border-radius:999px;background:rgba(255,255,255,.62)}
.product-theme-insta{color:var(--hb-ink);background:var(--hb-yellow)}
.product-theme-insta::before{width:230px;height:230px;right:25px;top:90px;border-radius:52px;background:linear-gradient(145deg,#ff8a35,var(--hb-pink) 56%,#8a43c5);transform:rotate(-10deg);box-shadow:12px 13px 22px rgba(36,43,47,.25)}
.product-theme-insta::after{width:115px;height:115px;right:83px;top:145px;border:14px solid white;border-radius:32px;box-shadow:inset 0 0 0 14px transparent}
.product-theme-mint{color:var(--hb-ink);background:var(--hb-blue)}
.product-theme-mint::before{width:250px;height:190px;right:15px;top:92px;background:white;border:3px solid var(--hb-ink);border-radius:48% 52% 46% 54%;box-shadow:8px 9px 0 rgba(36,43,47,.2)}
.product-theme-mint::after{content:"?";right:86px;top:113px;color:var(--hb-ink);font:800 120px/1 "Manrope"}
.product-theme-coral{color:var(--hb-ink);background:var(--hb-yellow)}
.product-theme-coral::before{content:"CANVA";left:28px;right:auto;top:95px;color:var(--hb-pink);font:800 clamp(70px,8vw,122px)/.8 "Manrope";letter-spacing:-8px;transform:rotate(-4deg)}
.product-theme-coral::after{left:28px;right:28px;top:175px;height:45px;background:white;box-shadow:7px 8px 10px rgba(36,43,47,.18);transform:rotate(-2deg)}
.product-theme-coral>div:last-child{
  padding-top:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start
}
.product-theme-coral .product-card-price{margin-top:0}
.product-theme-blue{color:var(--hb-ink);background:var(--hb-white)}
.product-theme-blue::before{width:270px;height:270px;right:10px;top:75px;border:28px solid var(--hb-yellow);border-radius:46% 54% 48% 52%;transform:rotate(12deg)}
.product-theme-blue::after{content:"1:1";right:70px;top:155px;color:var(--hb-ink);font:800 74px/1 "Manrope"}
.product-theme-yellow{background:var(--hb-yellow)}.product-theme-navy{color:var(--hb-ink);background:var(--hb-blue)}
.product-promo-badge{color:var(--hb-ink);border-color:var(--hb-ink);background:var(--hb-pink)}

/* À propos et portfolio */
.founder{background:var(--hb-blue-soft)}
.founder-portrait{border-radius:170px 24px 170px 24px;color:var(--hb-ink);background:var(--hb-yellow);box-shadow:11px 11px 0 var(--hb-ink)}
.founder-portrait::before{border-color:rgba(255,255,255,.58);border-radius:50%;background:transparent}
.founder-portrait::after{border-radius:50%;background:var(--hb-blue)}
.founder-initials{color:var(--hb-ink);-webkit-text-stroke:0}
.founder-note,.founder-stamp{border-radius:12px}
.founder-copy h2 span{color:var(--hb-pink);font-family:inherit;font-style:normal;font-weight:800}
.founder-copy h2 span::after{background:var(--hb-yellow)}
.founder-quote{border-left-color:var(--hb-pink)}
.founder{
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:80px
}
.founder-visual{padding:12px 30px 88px 0}
.founder-studio{
  min-height:640px;
  border-radius:28px;
  isolation:isolate;
  background:
    linear-gradient(rgba(36,43,47,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(36,43,47,.075) 1px,transparent 1px),
    var(--hb-yellow);
  background-size:32px 32px;
  box-shadow:11px 11px 0 var(--hb-ink)
}
.founder-studio::before{
  width:355px;
  height:355px;
  left:auto;
  right:-75px;
  top:76px;
  border:0;
  border-radius:50%;
  background:var(--hb-blue);
  opacity:1
}
.founder-studio::after{
  right:auto;
  left:-76px;
  bottom:-88px;
  width:225px;
  height:225px;
  border:28px solid rgba(255,255,255,.82);
  border-radius:50%;
  background:transparent
}
.founder-studio-kicker{
  position:absolute;
  z-index:6;
  left:28px;
  top:27px;
  padding:8px 11px;
  border:1px solid var(--hb-ink);
  border-radius:999px;
  background:rgba(255,255,255,.82);
  font-size:8px;
  font-weight:800;
  letter-spacing:1.15px;
  text-transform:uppercase
}
.founder-studio-letter{
  position:absolute;
  z-index:1;
  left:-20px;
  top:90px;
  color:rgba(255,255,255,.54);
  font:800 360px/.8 "Manrope";
  letter-spacing:-35px
}
.founder-line-portrait{
  position:absolute;
  z-index:3;
  right:-8px;
  top:75px;
  width:76%;
  max-width:390px
}
.founder-line-portrait svg{display:block;width:100%;height:auto;overflow:visible}
.portrait-fill{fill:var(--hb-white);stroke:var(--hb-ink);stroke-width:5}
.portrait-hair{fill:var(--hb-pink);stroke:var(--hb-ink);stroke-width:5;stroke-linejoin:round}
.portrait-line{fill:none;stroke:var(--hb-ink);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.portrait-smile-line{stroke-width:7}
.portrait-eye{fill:var(--hb-ink)}
.founder-studio-name{
  position:absolute;
  z-index:5;
  left:28px;
  bottom:77px
}
.founder-studio-name small{
  display:block;
  margin-bottom:7px;
  font-size:8px;
  font-weight:800;
  letter-spacing:1.25px;
  text-transform:uppercase
}
.founder-studio-name strong{
  display:block;
  font:800 clamp(45px,5vw,70px)/.78 "Manrope";
  letter-spacing:-5px
}
.founder-ideas{
  position:absolute;
  z-index:6;
  right:22px;
  bottom:23px;
  padding:9px 12px;
  display:flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--hb-ink);
  background:var(--hb-white);
  box-shadow:3px 3px 0 var(--hb-ink);
  font-size:8px;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
  transform:rotate(-2deg)
}
.founder-ideas i{width:4px;height:4px;border-radius:50%;background:var(--hb-pink)}
.founder-studio .founder-stamp{
  right:21px;
  top:24px;
  width:94px;
  height:94px;
  border-radius:50%;
  transform:rotate(7deg)
}
.founder-studio .founder-stamp b{font:800 25px/1 "Manrope"}
.founder-studio .founder-caption{left:29px;bottom:25px}
.work{
  grid-template-columns:minmax(250px,.78fr) repeat(2,minmax(0,1fr));
  gap:30px;
  color:var(--hb-ink);
  background:var(--hb-white)
}
.work-intro{padding-right:20px}
.project-two{margin-top:0}
.work .eyebrow,.project-tag{color:#697277}
.button-outline{color:var(--hb-ink);border-color:var(--hb-ink);background:transparent;box-shadow:4px 4px 0 var(--hb-ink)}
.project-art{border-radius:22px;border:2px solid var(--hb-ink);box-shadow:7px 7px 0 var(--hb-ink)}
.art-one{background:var(--hb-yellow)}.art-one::after{border-color:var(--hb-white);border-radius:50%;transform:none}
.art-two{color:var(--hb-ink);background:var(--hb-blue)}.art-two::before{content:none}
.numbers{color:var(--hb-ink);background:var(--hb-yellow)}
.number{border-color:rgba(36,43,47,.18)}.number strong{color:var(--hb-ink)}
.major-references{background:var(--hb-blue-soft)}
.major-reference{border-radius:16px;border-color:var(--hb-line);background:var(--hb-white)}
.testimonial{color:var(--hb-ink);background:var(--hb-white)}
.testimonial blockquote span{color:#aaa69c}
.faq{
  grid-template-columns:minmax(280px,.75fr) minmax(0,1.25fr);
  gap:80px;
  align-items:start;
  background:
    radial-gradient(circle at 88% 12%,rgba(207,233,245,.62),transparent 26%),
    var(--hb-white)
}
.faq-heading{
  position:sticky;
  top:28px;
  min-height:560px;
  padding:38px;
  overflow:hidden;
  border:2px solid var(--hb-ink);
  border-radius:24px;
  background:var(--hb-yellow);
  box-shadow:9px 9px 0 var(--hb-ink)
}
.faq-heading::before{
  content:"";
  position:absolute;
  right:-80px;
  top:145px;
  width:245px;
  height:245px;
  border:28px solid rgba(255,255,255,.72);
  border-radius:50%
}
.faq-heading::after{
  content:"";
  position:absolute;
  left:-68px;
  bottom:-72px;
  width:185px;
  height:185px;
  border-radius:50%;
  background:var(--hb-blue)
}
.faq-heading>*{position:relative;z-index:2}
.faq-heading h2{font-size:clamp(45px,4.5vw,64px);line-height:.95}
.faq-heading h2 span{color:var(--hb-ink)}
.faq-heading>p{max-width:365px;margin-top:25px;color:#555f64;font-size:15px}
.faq-visual{position:relative;height:120px;margin-top:28px}
.mascot-faq{
  position:absolute;
  right:-8px;
  top:-52px;
  width:142px;
  height:178px;
  object-fit:contain;
  transform:rotate(4deg)
}
.faq-visual span{
  position:absolute;
  padding:9px 12px;
  border:1px solid var(--hb-ink);
  border-radius:999px;
  background:var(--hb-white);
  box-shadow:3px 3px 0 var(--hb-ink);
  font-size:9px;
  font-weight:800;
  text-transform:uppercase
}
.faq-visual span:nth-of-type(1){left:0;top:15px;transform:rotate(-3deg)}
.faq-visual span:nth-of-type(2){left:70px;top:58px;background:var(--hb-blue);transform:rotate(2deg)}
.faq-visual span:nth-of-type(3){left:8px;top:94px;transform:rotate(-1deg)}
.faq-count{
  position:absolute;
  left:38px;
  bottom:30px;
  font-size:9px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase
}
.faq-list{
  display:flex;
  flex-direction:column;
  gap:13px;
  border:0;
  counter-reset:faq
}
.faq-list details{
  counter-increment:faq;
  overflow:hidden;
  border:1px solid var(--hb-line);
  border-radius:17px;
  background:var(--hb-white);
  box-shadow:4px 4px 0 rgba(36,43,47,.12);
  transition:transform .2s,box-shadow .2s,background .2s
}
.faq-list details:nth-child(3n+2){background:var(--hb-blue-soft)}
.faq-list details:nth-child(3n){background:var(--hb-yellow-soft)}
.faq-list details[open]{
  border-color:var(--hb-ink);
  background:var(--hb-white);
  box-shadow:6px 6px 0 var(--hb-ink);
  transform:translate(-2px,-2px)
}
.faq-list summary{
  padding:22px 22px;
  grid-template-columns:36px minmax(0,1fr) 38px;
  gap:14px;
  font-size:15px
}
.faq-list summary::before{
  content:counter(faq,decimal-leading-zero);
  color:var(--hb-pink);
  font-size:10px;
  font-weight:800;
  letter-spacing:.8px
}
.faq-list summary i{
  width:36px;
  height:36px;
  border:1px solid var(--hb-ink);
  border-radius:50%;
  background:var(--hb-yellow)
}
.faq-list details[open] summary i{color:var(--hb-white);background:var(--hb-pink)}
.faq-list details p{
  margin:-3px 74px 24px 72px;
  padding-top:17px;
  border-top:1px solid var(--hb-line);
  color:#5d676c;
  font-size:13px;
  line-height:1.75
}
.contact{
  grid-template-columns:minmax(0,1fr) minmax(360px,.8fr);
  gap:80px;
  color:white;
  background:var(--hb-ink)
}
.contact-form input,.contact-form select,.contact-form textarea{border-radius:8px}
footer{color:var(--hb-ink);background:var(--hb-yellow)}

/* Références */
.references-hero{color:var(--hb-ink);border-color:var(--hb-line);background:var(--hb-white)}
.references-hero::before{content:"";position:absolute;right:-90px;bottom:-80px;width:370px;height:220px;border:34px solid var(--hb-yellow);border-radius:50%;transform:rotate(24deg)}
.references-hero h1 span{color:var(--hb-pink);font-family:inherit;font-style:normal;font-weight:800}
.references-hero h1 span::after{background:var(--hb-yellow)}
.references-hero .hero-layout p{color:#667075}.project-count{border-radius:999px;border-color:var(--hb-line)}
.references-hero .hero-layout{
  grid-template-columns:minmax(0,1fr) minmax(300px,430px);
  gap:70px
}
.hero-doodle{border-color:rgba(207,233,245,.8)}.hero-doodle span{background:var(--hb-yellow)}
.projects-section{background:var(--hb-paper)}
.filters{background:rgba(255,253,248,.95)}.filters button{border-radius:999px}.filters button.active{background:var(--hb-yellow)}
.projects-grid{align-items:start;gap:60px 30px}
.project-card:nth-child(even){margin-top:0}
.project-visual{border-radius:22px;box-shadow:7px 7px 0 var(--hb-ink)}
.project-card:nth-child(4n+1) .project-visual:not(.has-image){color:var(--hb-ink);background:var(--hb-yellow)}
.project-card:nth-child(4n+2) .project-visual:not(.has-image){color:var(--hb-ink);background:var(--hb-blue)}
.project-card:nth-child(4n+3) .project-visual:not(.has-image){background:var(--hb-white)}
.project-card:nth-child(4n) .project-visual:not(.has-image){background:var(--hb-yellow-soft)}
.project-card:nth-child(4n+1) .art-mark,.project-card:nth-child(4n+3) .art-mark{color:var(--hb-ink);font-family:"Manrope";font-style:normal}
.view-project{border-radius:9px}.references-cta{background:var(--hb-yellow);color:var(--hb-ink)}
.references-cta>p{color:#6b7072}.references-cta h2 span{color:var(--hb-pink);font-family:inherit;font-style:normal;font-weight:800}
.references-cta>a{border-color:var(--hb-ink);box-shadow:5px 5px 0 var(--hb-ink)}

/* Happy Insta */
.hi-hero{
  min-height:700px;
  grid-template-columns:minmax(0,1fr) minmax(420px,.85fr);
  gap:64px;
  color:var(--hb-ink);
  background:var(--hb-yellow)
}
.hi-hero::before{content:"";position:absolute;left:-110px;bottom:30px;width:350px;height:130px;border:28px solid rgba(255,255,255,.38);border-radius:50%;transform:rotate(20deg)}
.hi-hero h1{color:var(--hb-ink);font-size:clamp(58px,6.5vw,88px);line-height:.91}
.hi-hero h1 span{color:var(--hb-pink);font-family:inherit;font-style:normal;font-weight:800}
.hi-hero h1 span::after{background:white;height:16px}
.hi-lead{color:#5e666a}.hi-price strong{color:var(--hb-ink);background:none;-webkit-text-fill-color:initial}.hi-price span,.hi-price del{color:#686e71}.hi-actions>a:last-child{color:var(--hb-ink)}
.hi-hero-art{border-radius:120px 25px 120px 25px;border-color:var(--hb-ink);background:var(--hb-white);box-shadow:11px 11px 0 var(--hb-ink)}
.hi-hero-art::before{inset:35px;border:1px solid var(--hb-line);border-radius:50%;background:transparent}
.mascot-hi{
  position:absolute;
  z-index:4;
  left:-52px;
  bottom:7px;
  width:145px;
  height:182px;
  object-fit:contain;
  transform:rotate(-7deg);
  filter:drop-shadow(5px 7px 0 rgba(36,43,47,.12))
}
.phone-frame{border-radius:38px;transform:none;box-shadow:8px 8px 0 rgba(36,43,47,.2)}
.insta-grid span{border-radius:10px}.floating-tip,.floating-group{border-radius:11px}
.hi-proof{color:var(--hb-ink);background:var(--hb-blue)}.hi-proof i{background:var(--hb-pink)}
.hi-problem{background:var(--hb-white)}.problem-list{gap:12px;background:transparent}.problem-list article{border:1px solid var(--hb-line);border-radius:17px;background:var(--hb-yellow-soft)}
.hi-problem{
  grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);
  gap:80px
}
.problem-list article:nth-child(2){color:var(--hb-ink);background:var(--hb-blue)}.problem-list article:nth-child(3){background:var(--hb-yellow)}.problem-list article:nth-child(4){color:var(--hb-ink);background:var(--hb-white)}
.hi-program{background:var(--hb-blue-soft)}.program-steps{gap:1px;border:1px solid var(--hb-line);border-radius:20px;background:var(--hb-line)}
.program-steps article,.program-steps article:nth-child(2),.program-steps article:nth-child(5){color:var(--hb-ink);background:var(--hb-white)}
.program-steps article:nth-child(2),.program-steps article:nth-child(5){background:var(--hb-yellow-soft)}.program-icon{border-radius:50%;color:var(--hb-ink);background:var(--hb-yellow)}
.hi-method{
  grid-template-columns:minmax(330px,.85fr) minmax(0,1.15fr);
  gap:80px;
  color:var(--hb-ink);
  background:var(--hb-yellow)
}
.method-art{border-radius:24px;border-color:var(--hb-ink);background:var(--hb-blue)}.method-art::after{content:none}
.method-copy li{border-color:rgba(36,43,47,.18)}.method-copy li span{color:#636c71}
.hi-offer{
  grid-template-columns:minmax(0,.9fr) minmax(360px,1fr);
  gap:80px;
  background:var(--hb-blue)
}
.hi-offer form{border-radius:20px;box-shadow:9px 9px 0 var(--hb-ink)}.hi-offer input,.hi-offer textarea,.hi-offer button{border-radius:9px}
.hi-offer .offer-price strong{color:var(--hb-pink);background:none;-webkit-text-fill-color:initial}
.checkout-page{background:var(--hb-yellow)}.checkout-card{border:2px solid var(--hb-ink);border-radius:22px;box-shadow:10px 10px 0 var(--hb-ink)}

@media(max-width:1000px){
  .hero,.hi-hero{grid-template-columns:1fr}
  .hero-copy,.hi-hero-copy{max-width:760px}
  .hero-visual,.hi-hero-art{width:min(100%,600px);justify-self:center}
  .section-heading,.products-heading,.major-references-heading,
  .references-hero .hero-layout{grid-template-columns:1fr;gap:25px}
  .founder,.faq,.contact,.hi-problem,.hi-method,.hi-offer{grid-template-columns:1fr;gap:60px}
  .faq-heading{position:relative;top:auto;min-height:500px}
  .work{grid-template-columns:1fr 1fr;gap:45px 30px}
  .work-intro{grid-column:1/-1;position:static;padding-right:0}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .products-grid{grid-auto-rows:540px}
}
@media(max-width:660px){
  :root{--page-x:22px}
  .site-header,.hi-header,.references-header{height:86px}
  .section-pad{padding-top:82px;padding-bottom:82px}
  .hero,.hi-hero{padding-top:54px;padding-bottom:72px;gap:40px}
  .hero h1,.hi-hero h1{font-size:49px;letter-spacing:-3.5px}
  .hero h1 .marker{letter-spacing:inherit}
  .hero-lead,.hi-lead{font-size:16px}
  .happy-wheel-game{box-shadow:7px 7px 0 var(--hb-ink)}
  .mascot-hi{left:-18px;bottom:-8px;width:112px;height:142px}
  .section-heading,.products-heading,.major-references-heading{margin-bottom:42px}
  .section-heading h2,.products-heading h2,.work h2,.contact h2,.major-references-heading h2,.faq-heading h2{font-size:43px;letter-spacing:-2.5px}
  .service-grid{grid-template-columns:1fr}
  .service-card{min-height:370px}
  .products-grid{grid-template-columns:1fr;grid-auto-rows:520px}
  .product-card{height:520px}
  .product-card h3{font-size:43px;letter-spacing:-2.5px}
  .product-mascot{right:12px;top:92px;width:125px;height:158px}
  .product-theme-coral::before{font-size:66px;letter-spacing:-5px}
  .product-theme-coral::after{top:150px}
  .product-theme-coral>div:last-child{padding-top:0}
  .product-theme-blue::before{width:200px;height:200px}
  .founder-portrait{box-shadow:7px 7px 0 var(--hb-ink)}
  .founder-visual{padding:0 8px 72px 0}
  .founder-studio{min-height:540px;border-radius:22px}
  .founder-studio::before{width:300px;height:300px;right:-100px;top:92px}
  .founder-studio-letter{top:125px;font-size:260px}
  .founder-line-portrait{width:88%;right:-42px;top:92px}
  .founder-studio-name{left:22px;bottom:74px}
  .founder-studio-name strong{font-size:50px;letter-spacing:-4px}
  .founder-studio .founder-stamp{right:15px;top:18px;width:82px;height:82px;font-size:8px}
  .founder-studio-kicker{left:19px;top:20px;max-width:190px}
  .founder-ideas{right:12px;bottom:17px}
  .founder,.faq,.contact,.hi-problem,.hi-method,.hi-offer{gap:45px}
  .faq-heading{min-height:520px;padding:28px}
  .faq-heading h2{font-size:43px}
  .mascot-faq{right:-19px;top:-25px;width:120px;height:150px}
  .faq-count{left:28px;bottom:25px}
  .faq-list summary{padding:19px 17px;grid-template-columns:29px minmax(0,1fr) 36px;gap:10px}
  .faq-list details p{margin:-2px 22px 22px 56px}
  .work{grid-template-columns:1fr;gap:50px}
  .work-intro{grid-column:auto}
  .project-two{margin-top:0}
  .projects-grid{gap:55px}
}
@media(prefers-reduced-motion:reduce){
  .mascot-hero{animation:none}
  .product-mascot{transition:none}
}