:root{--ink:#4b251c;--cream:#f7ecdd;--pink:#efc7cf;--pink-strong:#ef4b37;--orange:#f09b62;--lime:#d7eb86;--blue:#9fd4e5;--purple:#ccb8df;--paper:#faf7f2;--paper-2:#f3ece4;--lavender:#ded7e7;--line:2.5px solid rgba(75,37,28,.96)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:'Bricolage Grotesque',Arial,Helvetica,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}.grain{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.12;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E")}.site-nav{height:90px;position:absolute;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;font-weight:800;text-transform:uppercase}.site-nav nav a{font-size:.82rem;letter-spacing:.08em}.brand{line-height:.78;font-size:1.25rem;letter-spacing:-.06em}.nav-pill{border:var(--line);border-radius:999px;padding:.75rem 1.15rem;background:var(--lime);box-shadow:3px 3px 0 var(--ink);transition:transform .2s ease,box-shadow .2s ease}.nav-pill:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}.hero-section{min-height:100svh;background:radial-gradient(circle at 22% 18%,#fbe9d0 0,#fbe9d0 20%,transparent 21%),linear-gradient(180deg,#f4d8b9 0%,#f2d3b4 100%);border-bottom:var(--line);position:relative}.hero-section::after{content:"";position:absolute;inset:auto auto 9% 6%;width:260px;height:120px;border:2px dashed rgba(75,37,28,.18);border-radius:60% 40% 50% 50%;transform:rotate(-8deg)}.hero-section .container-fluid{min-height:100svh}.hero-copy{position:absolute;left:clamp(1rem,4vw,4rem);top:16vh;z-index:3;width:min(900px,90vw)}.eyebrow,.section-kicker,.process-tag,.process-caption{font-family:'Kalam',cursive}.eyebrow,.section-kicker{margin:0 0 1rem;font-size:.92rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.hero-copy h1,.services-copy h2,.process-top h2,.footer-copy h2{margin:0;font-weight:800;line-height:.82;letter-spacing:-.07em;text-transform:uppercase}.hero-copy h1{font-size:clamp(4.2rem,10vw,10rem);max-width:1120px}.hero-copy h1 span{color:var(--paper);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}.hero-sub{max-width:460px;font-weight:600;margin-top:1.6rem;font-size:clamp(1rem,1.45vw,1.2rem)}.hero-stage{position:absolute;right:clamp(-6rem,1vw,1rem);bottom:-2rem;width:min(58vw,760px);z-index:2}.hero-cat{width:100%;overflow:visible}.yarn-group{transform-origin:142px 468px}.teaser-wrap{position:absolute;right:5%;top:2%;width:18px;height:370px;transform-origin:50% 0%}.teaser-string{width:5px;height:300px;background:var(--ink);margin:0 auto;border-radius:999px}.teaser-feather{width:72px;height:26px;border:3px solid var(--ink);border-radius:100% 10% 100% 10%;position:absolute;bottom:35px;left:-25px;transform-origin:left center}.feather-a{background:#f6a6b9;transform:rotate(10deg)}.feather-b{background:#b1dded;transform:rotate(42deg)}.feather-c{background:#d7eb86;transform:rotate(73deg)}.hero-sticker{position:absolute;z-index:4;display:grid;place-items:center;text-align:center;font-weight:800;line-height:.9;border:var(--line);box-shadow:5px 5px 0 rgba(75,37,28,.88);background-image:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,0))}.sticker-one{width:120px;aspect-ratio:1;border-radius:50%;background:#f3e7eb;right:4vw;top:18vh;transform:rotate(8deg)}.sticker-two{padding:1.1rem 1.3rem;background:#bee2d8;left:42vw;bottom:6vh;transform:rotate(-7deg)}.scroll-note{position:absolute;left:4vw;bottom:2rem;font-size:.78rem;font-weight:800;letter-spacing:.06em}.section-pad{padding:clamp(5rem,10vw,9rem) 0}.services-section{background:var(--paper);border-bottom:var(--line)}.services-copy{padding:1.5rem 0 3rem}.services-copy h2{font-size:clamp(3.2rem,6.8vw,7.5rem)}.services-copy p{max-width:480px;margin-top:2rem;font-weight:600;font-size:1.05rem}.service-display{min-height:680px;border:var(--line);background:linear-gradient(180deg,#eadff0,#ddd2eb);position:relative;overflow:hidden;box-shadow:8px 8px 0 rgba(75,37,28,.88);border-radius:18px}.service-display::after{content:"";position:absolute;right:24px;top:24px;width:130px;height:56px;border:2px dashed rgba(75,37,28,.18);border-radius:60% 40% 40% 60%}.service-visual{position:absolute;inset:0;opacity:0;visibility:hidden;display:flex;flex-direction:column}.service-visual.active{opacity:1;visibility:visible}.scene{flex:1;position:relative;overflow:hidden}.scene::after{content:"";position:absolute;inset:auto 8% 10% auto;width:140px;height:80px;border:2px dashed rgba(75,37,28,.15);border-radius:50%}.service-caption{border-top:var(--line);background:linear-gradient(180deg,#f9f2eb,#f4ebdf);padding:1.25rem;display:flex;justify-content:space-between;gap:1rem;align-items:end}.service-caption span{font-family:'Kalam',cursive;font-size:.95rem;font-weight:700;letter-spacing:.02em}.service-caption strong{font-size:clamp(1.4rem,2vw,2rem);line-height:.95;text-align:right}.scene-play{background:#ddd1eb}.scene-snack{background:#f1d4c6}.scene-nap{background:#cfe6eb}.scene-ball{position:absolute;width:170px;aspect-ratio:1;border:var(--line);border-radius:50%;left:10%;bottom:12%}.ball-pink{background:#f08ea9;box-shadow:inset -18px -18px 0 rgba(0,0,0,.05)}.mini-cat{position:absolute;width:280px;height:330px;border:var(--line);border-radius:48% 48% 38% 38%;bottom:8%;right:12%}.mini-cat::before,.mini-cat::after{content:"";position:absolute;top:-58px;width:90px;height:100px;border:var(--line);z-index:-1}.mini-cat::before{left:20px;transform:rotate(-18deg)}.mini-cat::after{right:20px;transform:rotate(18deg)}.cat-orange{background:var(--orange)}.cat-black{background:var(--ink);right:8%;bottom:0;height:380px}.cat-black::before,.cat-black::after{background:var(--ink)}.scene-spark{position:absolute;font-size:5rem;font-weight:800}.spark-one{left:12%;top:14%;color:var(--lime);transform:rotate(16deg)}.spark-two{right:12%;top:18%;color:var(--paper);transform:rotate(-12deg)}.spark-three{left:14%;top:12%;color:#e38ca5;font-size:7rem}.bowl{position:absolute;left:10%;bottom:12%;width:260px;height:130px;border:var(--line);border-radius:18px 18px 70px 70px;background:var(--lime);display:grid;place-items:center;font-size:2rem;font-weight:800}.cushion{position:absolute;left:10%;right:10%;bottom:13%;height:170px;background:#bea4d6;border:var(--line);border-radius:50%}.sleep-cat{position:absolute;width:340px;height:220px;background:var(--orange);border:var(--line);border-radius:55% 55% 48% 48%;left:24%;bottom:20%;transform:rotate(-6deg)}.sleep-cat span{position:absolute;font-weight:800;font-size:2rem}.sleep-cat span:nth-child(1){right:-25%;top:-10%}.sleep-cat span:nth-child(2){right:-38%;top:-28%;font-size:2.8rem}.sleep-cat span:nth-child(3){right:-52%;top:-48%;font-size:3.7rem}.service-orbs{display:flex;gap:1rem;flex-wrap:wrap;align-items:end}.service-orb{width:clamp(120px,12vw,180px);aspect-ratio:1;border-radius:50%;border:var(--line);box-shadow:5px 5px 0 rgba(75,37,28,.88);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .25s ease,box-shadow .25s ease}.service-orb span{font-family:'Kalam',cursive;font-size:.95rem;font-weight:700}.service-orb b{font-size:1.4rem;line-height:1}.orb-pink{background:#f5d3da}.orb-lime{background:#deefaa}.orb-blue{background:#cee6ef}.service-orb:hover{transform:translateY(-8px) rotate(-3deg)}.service-orb.active{transform:translateY(-12px) rotate(4deg);box-shadow:9px 9px 0 rgba(75,37,28,.88)}.process-section{background:radial-gradient(circle at 50% 55%,rgba(255,255,255,.16) 0 40%,transparent 41%),var(--pink);border-bottom:var(--line);position:relative;padding-top:clamp(4.5rem,8vw,6rem)}.process-top h2{font-size:clamp(3.3rem,7vw,7.4rem)}.process-intro{max-width:480px;font-weight:600}.process-stage-wrap{position:relative;height:148vh;margin-top:clamp(2rem,4vw,3.2rem)}.process-stage{position:sticky;top:88px;height:calc(100vh - 108px);min-height:700px;overflow:hidden}.process-bg-title{position:absolute;inset:34% 0 auto 0;text-align:center;font-size:clamp(4rem,8vw,7.4rem);line-height:.88;letter-spacing:-.08em;font-weight:800;color:var(--pink-strong);z-index:1;pointer-events:none}.process-caption{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);font-size:clamp(.88rem,1vw,1rem);text-align:center;font-weight:700;color:var(--pink-strong);z-index:1}.process-card{--r:0deg;position:absolute;width:min(25vw,350px);min-width:280px;min-height:500px;background:rgba(251,249,245,.96);border:var(--line);border-radius:8px;padding:1.15rem 1.1rem 0;box-shadow:0 10px 0 rgba(255,255,255,.35),0 0 0 2px rgba(255,255,255,.18);transform:rotate(var(--r));transform-origin:center center;z-index:2}.process-card::before{content:"";position:absolute;left:1.05rem;top:-10px;width:86px;height:18px;border-radius:8px 8px 0 0;background:var(--paper);border:var(--line);border-bottom:none}.process-card-1{left:1.2%;top:9%;--r:-2.8deg;z-index:2}.process-card-2{left:23.8%;top:13%;--r:1.6deg;z-index:3}.process-card-3{left:46.2%;top:16%;--r:-4deg;z-index:4}.process-card-4{right:1.4%;top:19%;--r:3.2deg;z-index:5}.step-dot{position:absolute;top:34px;right:26px;width:38px;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:#f9e84f;color:var(--pink-strong);font-weight:800;z-index:2}.process-tag{display:inline-block;font-size:.95rem;font-weight:700;color:#ab6f53;margin-bottom:.4rem}.process-card h3{margin:.1rem 0 .9rem;font-size:clamp(2.35rem,3.5vw,3.7rem);line-height:.86;letter-spacing:-.08em;font-weight:800;text-transform:uppercase}.process-num{font-size:clamp(2.8rem,4.7vw,4.4rem);line-height:.9;font-weight:800;margin-bottom:.5rem}.process-card p{margin-bottom:.9rem;font-size:.92rem;line-height:1.02;font-weight:600;max-width:94%}.process-art{position:relative;margin-top:auto;min-height:200px;background:var(--lavender);border-radius:4px 4px 0 0;overflow:hidden}.process-art .doodle,.process-art .blob{position:absolute;border:2px solid rgba(75,37,28,.15);border-radius:50%}.blob-a{width:118px;height:118px;left:20px;bottom:16px;background:rgba(255,255,255,.35);border:none}.blob-c{width:132px;height:132px;right:18px;bottom:12px;background:rgba(255,255,255,.28);border:none}.doodle-a{width:60px;height:60px;right:18px;top:18px}.doodle-b{width:160px;height:80px;left:18px;top:44px}.doodle-c{width:88px;height:48px;left:24px;top:30px}.doodle-d{width:170px;height:90px;right:20px;top:16px}.art-form .person-head{position:absolute;width:74px;height:74px;background:#fffaf5;border-radius:46% 54% 46% 54%;left:104px;top:32px}.art-form .person-head::before{content:"";position:absolute;width:86px;height:68px;background:#2e2321;border-radius:55% 45% 40% 50%;left:-10px;top:-12px}.art-form .person-body{position:absolute;width:170px;height:110px;background:#79b8e7;border-radius:50% 50% 40% 40%;left:70px;bottom:-6px}.art-form .clipboard{position:absolute;width:72px;height:90px;right:48px;bottom:18px;background:#8f857d;border-radius:8px;transform:rotate(-8deg)}.art-form .clipboard::before{content:"";position:absolute;inset:8px;border:2px dashed rgba(255,255,255,.45);border-radius:4px}.art-contact .phone{position:absolute;width:102px;height:168px;bottom:16px;border-radius:16px;background:#f7f3ef;border:var(--line)}.art-contact .phone-left{left:62px;transform:rotate(-10deg)}.art-contact .phone-right{right:62px;transform:rotate(8deg)}.art-contact .phone::before{content:"";position:absolute;inset:14px 12px 20px;background:linear-gradient(180deg,#87bfe0,#f2fbff);border-radius:12px}.art-contact .phone::after{content:"";position:absolute;width:22px;height:22px;border-radius:50%;background:#ef4b37;bottom:30px;left:50%;transform:translateX(-50%)}.art-meet .meet-person{position:absolute;width:156px;height:132px;left:68px;bottom:8px;background:#7ab4e4;border-radius:46% 46% 38% 38%}.art-meet .meet-person::before{content:"";position:absolute;width:94px;height:94px;left:32px;top:-54px;background:#fffaf5;border-radius:46% 54% 50% 50%;box-shadow:inset 0 16px 0 #3f2c28}.art-meet .meet-cat{position:absolute;width:86px;height:60px;right:58px;bottom:24px;background:#9a6a45;border-radius:48% 48% 40% 40%}.art-meet .meet-cat::before,.art-meet .meet-cat::after{content:"";position:absolute;top:-18px;width:24px;height:28px;background:#9a6a45}.art-meet .meet-cat::before{left:10px;transform:rotate(-20deg);clip-path:polygon(50% 0,0 100%,100% 100%)}.art-meet .meet-cat::after{right:10px;transform:rotate(20deg);clip-path:polygon(50% 0,0 100%,100% 100%)}.art-care .care-cat{position:absolute;width:180px;height:112px;left:82px;bottom:24px;background:#995d31;border-radius:50% 40% 42% 42%;transform:rotate(-10deg)}.art-care .care-cat::before,.art-care .care-cat::after{content:"";position:absolute;width:30px;height:42px;background:#995d31;top:68px;border-radius:0 0 16px 16px}.art-care .care-cat::before{left:26px}.art-care .care-cat::after{right:34px}.art-care .tail-line{position:absolute;width:98px;height:98px;border:10px solid #995d31;border-color:#995d31 transparent transparent transparent;border-radius:50%;left:12px;bottom:78px;transform:rotate(52deg)}.art-care .wand-line{position:absolute;width:150px;height:2px;background:#ef6586;right:44px;bottom:118px;transform:rotate(-52deg)}.footer-section{background:linear-gradient(180deg,#f7e4e7 0%,#f2d6dd 100%);min-height:760px;padding:clamp(5rem,9vw,8rem) 0 2rem;position:relative}.footer-copy{position:relative;z-index:2}.footer-copy h2{font-size:clamp(4rem,9vw,9rem);max-width:1100px}.footer-copy h2 span{color:#f8f4ef}.footer-cta{display:inline-block;margin-top:2rem;font-weight:800;font-size:clamp(1.2rem,2vw,2rem);border-bottom:3px solid var(--ink)}.tail-art{position:absolute;width:min(70vw,960px);right:-10vw;bottom:40px;overflow:visible;z-index:1;transform-origin:70% 60%}.tail-path{filter:drop-shadow(8px 10px 0 rgba(255,255,255,.2))}.footer-bottom{position:absolute;left:1rem;right:1rem;bottom:0;border-top:var(--line);padding-top:1rem;font-size:.72rem;font-weight:800;letter-spacing:.08em;z-index:3}@media (max-width:1199.98px){.process-stage-wrap{height:138vh}.process-card{min-width:236px;width:min(27vw,305px);min-height:470px}.process-card-1{left:1.5%;top:11%}.process-card-2{left:25.2%;top:15%}.process-card-3{left:48.4%;top:18%}.process-card-4{right:1.2%;top:21%}}@media (max-width:991.98px){.site-nav{height:74px}.hero-section,.hero-section .container-fluid{min-height:880px}.hero-copy{top:130px}.hero-stage{width:min(92vw,680px);right:-6vw;bottom:-1rem}.hero-sticker.sticker-one{top:46%;right:2vw}.sticker-two{left:5vw;bottom:4vh}.service-display{min-height:560px}.service-orbs{margin-top:2rem}.process-stage-wrap{height:auto;margin-top:2rem}.process-stage{position:relative;top:auto;height:auto;min-height:0;display:grid;gap:1.2rem;padding:1rem 0 3rem}.process-bg-title{position:relative;inset:auto;margin-bottom:1rem;text-align:left;font-size:clamp(3.4rem,12vw,6rem)}.process-caption{position:relative;left:auto;bottom:auto;transform:none;text-align:left;margin-bottom:.5rem}.process-card{position:relative;width:100%;min-width:0;min-height:0;top:auto;left:auto;right:auto;transform:rotate(0deg)!important}.process-card::before{display:none}.footer-section{min-height:700px}.tail-art{width:100vw;right:-30vw;bottom:70px;opacity:.95}}@media (max-width:575.98px){.nav-pill{font-size:.72rem;padding:.6rem .8rem}.brand{font-size:1rem}.hero-section,.hero-section .container-fluid{min-height:820px}.hero-copy h1{font-size:clamp(4.1rem,20vw,6rem)}.hero-copy h1 span{-webkit-text-stroke-width:2px}.hero-sub{max-width:84vw;font-size:.95rem}.hero-stage{width:116vw;right:-24vw;bottom:-1rem}.teaser-wrap{right:8%;top:3%;transform:scale(.85)}.hero-sticker{font-size:.78rem}.sticker-one{width:88px}.sticker-two{padding:.75rem .85rem}.scroll-note{display:none}.service-display{min-height:500px;box-shadow:5px 5px 0 rgba(75,37,28,.88)}.mini-cat{width:200px;height:260px;right:5%}.scene-ball{width:110px}.bowl{width:170px;height:95px;font-size:1.2rem}.sleep-cat{width:260px;height:170px;left:12%}.service-caption{align-items:flex-start;flex-direction:column}.service-caption strong{text-align:left}.service-orb{width:31%;min-width:96px}.service-orb b{font-size:1rem}.process-card h3{font-size:2.35rem}.process-art{min-height:190px}.art-contact .phone-left{left:34px}.art-contact .phone-right{right:34px}.art-care .care-cat{left:54px;width:160px}.footer-section{min-height:720px}.footer-copy h2{font-size:clamp(3.5rem,18vw,6rem)}.tail-art{width:160vw;right:-65vw;bottom:58px}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* =========================================================
   v4 / HOW IT WORKS — tighter editorial stack
   Keeps the existing GSAP scroll reveal, only changes layout.
   ========================================================= */
@media (min-width: 992px) {
  .process-section {
    padding-top: 0;
  }

  .process-top {
    height: 0;
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .process-top h2 {
    font-family: 'Anton', Impact, sans-serif;
    font-weight: 400;
    letter-spacing: -.035em;
    line-height: .9;
  }

  .process-stage-wrap {
    height: 192vh;
    margin-top: 0;
  }

  .process-stage {
    top: 76px;
    height: calc(100vh - 92px);
    min-height: 720px;
    overflow: hidden;
  }

  .process-bg-title {
    inset: 1.2% auto auto 50%;
    width: max-content;
    transform: translateX(-50%);
    font-family: 'Anton', Impact, sans-serif;
    font-size: clamp(8.4rem, 15.2vw, 15.6rem);
    font-weight: 400;
    line-height: .76;
    letter-spacing: -.04em;
    color: #ef432f;
    text-align: center;
    opacity: .9;
    z-index: 1;
    white-space: nowrap;
    mix-blend-mode: multiply;
  }

  .process-caption {
    left: 50%;
    bottom: 3.5%;
    z-index: 8;
    font-size: .92rem;
  }

  .process-card {
    width: min(40vw, 590px);
    min-width: 430px;
    min-height: 510px;
    padding: 1.1rem 1.35rem 0;
    border: 1.45px solid rgba(75, 37, 28, .68);
    border-radius: 5px;
    background: rgba(251, 248, 244, .82);
    color: rgba(75, 37, 28, .88);
    backdrop-filter: blur(1px);
    box-shadow:
      7px 10px 0 rgba(255, 255, 255, .25),
      0 22px 42px rgba(102, 54, 60, .06);
  }

  .process-card::before {
    left: 1.05rem;
    top: -11px;
    width: 76px;
    height: 19px;
    border: 1.45px solid rgba(75, 37, 28, .68);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: rgba(251, 248, 244, .78);
  }

  .process-card-1 {
    left: -12.8%;
    top: -10.5%;
    --r: -3.8deg;
    z-index: 2;
  }

  .process-card-2 {
    left: 16.8%;
    top: -1%;
    --r: 1.4deg;
    z-index: 3;
  }

  .process-card-3 {
    left: 43.5%;
    top: 17%;
    --r: -2deg;
    z-index: 4;
  }

  .process-card-4 {
    right: -15.5%;
    top: 34%;
    --r: 2.2deg;
    z-index: 5;
  }

  .process-card-3,
  .process-card-4 {
    background: rgba(251, 248, 244, .58);
    border-color: rgba(75, 37, 28, .42);
    color: rgba(75, 37, 28, .62);
  }

  .process-card-4 {
    background: rgba(251, 248, 244, .36);
    border-color: rgba(75, 37, 28, .28);
    color: rgba(75, 37, 28, .42);
  }

  .process-card-3 .process-art {
    opacity: .74;
  }

  .process-card-4 .process-art {
    opacity: .52;
  }

  .process-card h3 {
    margin: .12rem 0 .7rem;
    font-family: 'Anton', Impact, sans-serif;
    font-size: clamp(3rem, 4.45vw, 4.95rem);
    font-weight: 400;
    line-height: .86;
    letter-spacing: -.035em;
  }

  .process-num {
    margin-bottom: .42rem;
    font-family: 'Anton', Impact, sans-serif;
    font-size: clamp(3.5rem, 5.5vw, 5.6rem);
    font-weight: 400;
    line-height: .88;
    letter-spacing: -.025em;
  }

  .process-card p {
    margin-bottom: .75rem;
    max-width: 96%;
    font-size: .95rem;
    line-height: 1.02;
    font-weight: 700;
  }

  .process-tag {
    font-size: .88rem;
  }

  .step-dot {
    top: 28px;
    right: 22px;
    width: 36px;
    background: #fae552;
    color: #ee5848;
  }

  .process-art {
    min-height: 186px;
    background: rgba(222, 215, 231, .82);
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .process-stage-wrap {
    height: 184vh;
  }

  .process-card {
    width: min(38vw, 430px);
    min-width: 330px;
    min-height: 470px;
  }

  .process-bg-title {
    font-size: clamp(6.8rem, 13vw, 10rem);
  }

  .process-card-1 { left: -12%; top: -8%; }
  .process-card-2 { left: 16%; top: 0; }
  .process-card-3 { left: 43%; top: 17%; }
  .process-card-4 { right: -15%; top: 34%; }

  .process-card h3 {
    font-size: clamp(2.45rem, 3.9vw, 3.55rem);
  }

  .process-card p {
    font-size: .82rem;
  }

  .process-art {
    min-height: 170px;
  }
}

@media (max-width: 991.98px) {
  .process-bg-title,
  .process-card h3,
  .process-num,
  .process-top h2 {
    font-family: 'Anton', Impact, sans-serif;
    font-weight: 400;
  }

  .process-card h3 {
    letter-spacing: -.025em;
    line-height: .92;
  }
}

/* =========================================================
   Adoption direction + integrated blind-box section
   ========================================================= */
.hero-cat { display: none; }
.hero-dog-frame {
  width: min(86%, 650px);
  aspect-ratio: 1 / .92;
  margin: 2rem 0 0 auto;
  overflow: hidden;
  border: var(--line);
  border-radius: 48% 52% 43% 57% / 42% 45% 55% 58%;
  background: var(--paper);
  box-shadow: 12px 14px 0 rgba(75, 37, 28, .88);
  transform: rotate(2.5deg);
}
.hero-dog-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.service-photo-scene { background: #ddd1eb; }
.service-dog-photo { width: 100%; height: 100%; object-fit: cover; }
.service-box-scene { display: flex; align-items: end; background: #f3f0de; }
.service-box-photo { width: 100%; height: auto; min-height: 48%; object-fit: cover; object-position: center bottom; }

.adoption-machine-scroll {
  --adoption-cream: #f3f0de;
  --adoption-ink: #191919;
  --adoption-orange: #f25523;
  --adoption-pink: #e9338b;
  height: 270vh;
  border-bottom: var(--line);
  background: var(--adoption-cream);
}
.adoption-machine-stage {
  --adoption-grab-center: 57%;
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  color: var(--adoption-ink);
  background: var(--adoption-cream);
  font-family: Arial, 'Noto Sans TC', sans-serif;
}
.adoption-stage-heading { position: absolute; z-index: 1; top: clamp(30px, 5vw, 70px); left: clamp(22px, 5vw, 76px); }
.adoption-stage-heading h2 { max-width: 500px; margin: 0; font-family: Georgia, serif; font-size: clamp(38px, 5vw, 72px); font-weight: 400; font-style: italic; line-height: .95; }
.adoption-stage-heading > p:last-child { max-width: 360px; margin: 18px 0 0; font-weight: 700; }
.adoption-eyebrow { margin: 0 0 18px; font-size: 11px; font-weight: 800; letter-spacing: .22em; }
.adoption-claw-rig {
  position: absolute;
  z-index: 4;
  top: 0;
  left: var(--adoption-grab-center);
  width: auto;
  height: min(108svh, 950px);
  aspect-ratio: 290 / 1087;
  transform: translateX(-50%);
  transform-origin: 50% 0;
  will-change: transform;
  pointer-events: none;
}
.adoption-claw-rig img { display: block; width: 100%; height: 100%; object-fit: contain; }
.adoption-box-pile {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: -4%;
  width: 100%;
  height: clamp(260px, 30vw, 430px);
  overflow: hidden;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
.adoption-box-pile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.adoption-selected-box {
  position: absolute;
  z-index: 5;
  left: var(--adoption-grab-center);
  top: 52%;
  width: clamp(270px, 28.5vw, 435px);
  transform: translateX(-50%);
  transform-origin: 50% 20%;
  will-change: transform, opacity;
}
.adoption-selected-box img { display: block; width: 100%; height: auto; }
.adoption-modal-backdrop { position: absolute; z-index: 7; inset: 0; background: rgba(25, 25, 25, .16); opacity: 0; visibility: hidden; pointer-events: none; }
.adoption-dog-card {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  width: min(900px, calc(100vw - 48px));
  max-height: 88svh;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  overflow: auto;
  color: var(--adoption-ink);
  background: #fbfaf3;
  border: 2px solid var(--adoption-ink);
  box-shadow: 14px 14px 0 var(--adoption-card-accent, var(--adoption-orange));
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.adoption-modal-close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0 0 3px;
  color: var(--adoption-ink);
  background: var(--adoption-cream);
  border: 1.5px solid var(--adoption-ink);
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}
.adoption-modal-close:hover, .adoption-modal-close:focus-visible { color: #fff; background: var(--adoption-ink); transform: rotate(5deg); }
.adoption-modal-close:focus-visible { outline: 3px solid var(--adoption-pink); outline-offset: 3px; }
.adoption-dog-photo-wrap { position: relative; min-height: 430px; overflow: hidden; }
.adoption-dog-photo { width: 100%; height: 100%; object-fit: cover; }
.adoption-dog-number { position: absolute; top: 14px; left: 14px; padding: 6px 9px; background: var(--adoption-cream); border: 1.5px solid var(--adoption-ink); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.adoption-dog-copy { padding: clamp(26px, 3.5vw, 48px); }
.adoption-dog-label { margin: 0 0 8px; font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.adoption-dog-copy h3 { margin: 0 0 16px; font-size: clamp(38px, 4.6vw, 58px); font-weight: 900; letter-spacing: -.055em; }
.adoption-dog-copy h3 em { font-family: Georgia, serif; font-weight: 400; }
.adoption-dog-copy > p:not(.adoption-dog-label) { margin: 0 0 8px; font-size: 14px; line-height: 1.65; }
.adoption-dog-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 18px; }
.adoption-dog-meta div { padding: 9px 8px; border: 1px solid rgba(25, 25, 25, .24); }
.adoption-dog-meta dt { margin-bottom: 3px; font-size: 10px; color: rgba(25, 25, 25, .58); }
.adoption-dog-meta dd { margin: 0; font-size: 13px; font-weight: 800; }
.adoption-dog-actions { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.adoption-match-button { padding: 13px 18px; color: #fff; background: var(--adoption-ink); border-radius: 999px; }
.adoption-draw-again { padding: 9px 2px; color: var(--adoption-ink); background: transparent; border: 0; border-bottom: 1.5px solid var(--adoption-ink); cursor: pointer; font-size: 13px; font-weight: 700; }
.adoption-stage-progress { position: absolute; z-index: 10; top: 50%; right: clamp(18px, 3vw, 46px); display: flex; align-items: center; gap: 12px; transform: translateY(-50%); }
.adoption-progress-label { font-size: 9px; font-weight: 800; letter-spacing: .18em; writing-mode: vertical-rl; transform: rotate(180deg); }
.adoption-progress-track { display: block; width: 2px; height: 130px; background: rgba(25, 25, 25, .18); }
.adoption-progress-fill { display: block; width: 100%; height: 100%; background: var(--adoption-ink); }

@media (max-width: 767.98px) {
  .hero-stage { right: -16vw; width: 112vw; }
  .hero-dog-frame { width: 78%; margin-right: 3%; box-shadow: 8px 9px 0 rgba(75, 37, 28, .88); }
  .adoption-machine-scroll { height: 220vh; }
  .adoption-machine-stage { --adoption-grab-center: 60%; }
  .adoption-stage-heading { z-index: 6; }
  .adoption-stage-heading h2 { max-width: 270px; font-size: 40px; }
  .adoption-stage-heading > p:last-child { max-width: 240px; font-size: 14px; }
  .adoption-claw-rig { height: 108svh; }
  .adoption-selected-box { top: 53%; width: 270px; }
  .adoption-box-pile { bottom: -1%; height: 270px; }
  .adoption-dog-card { width: calc(100vw - 32px); max-height: 82svh; grid-template-columns: 1fr; }
  .adoption-dog-photo-wrap { min-height: 0; height: 29svh; }
  .adoption-dog-copy { padding: 20px; }
  .adoption-dog-copy h3 { margin-bottom: 12px; font-size: 36px; }
  .adoption-dog-copy > p:not(.adoption-dog-label) { font-size: 13px; line-height: 1.55; }
  .adoption-dog-meta { grid-template-columns: repeat(2, 1fr); margin-bottom: 14px; }
  .adoption-dog-actions { flex-wrap: wrap; gap: 12px; }
  .adoption-modal-close { top: 10px; right: 10px; }
  .adoption-stage-progress { right: 10px; }
  .adoption-progress-label { display: none; }
}

/* =========================================================
   v5 / HOW IT WORKS — match dontboardme card reveal
   ========================================================= */
@media (min-width: 992px) {
  .process-section {
    min-height: auto;
    scroll-margin-top: 0;
    overflow: visible !important;
    background:
      radial-gradient(circle at 50% 53%, rgba(255, 255, 255, .13) 0 34%, transparent 34.4%),
      radial-gradient(circle at 50% 57%, rgba(230, 112, 134, .16) 0 71%, transparent 71.4%),
      var(--pink);
    padding-top: 0;
  }

  .process-stage-wrap {
    height: 335vh;
    margin-top: 0;
  }

  .process-stage {
    top: 0;
    height: 100vh;
    min-height: 720px;
    overflow: hidden;
  }

  .process-bg-title {
    inset: 35% 0 auto 0;
    width: auto;
    transform: none;
    font-family: 'Anton', Impact, sans-serif;
    font-size: clamp(4.3rem, 6.7vw, 6.6rem);
    line-height: .86;
    letter-spacing: -.025em;
    color: #ef332b;
    opacity: 1;
    z-index: 2;
    mix-blend-mode: normal;
  }

  .process-caption {
    bottom: 8.4%;
    width: min(430px, 70vw);
    font-family: 'Anton', Impact, sans-serif;
    font-size: clamp(.82rem, .86vw, .98rem);
    line-height: 1;
    letter-spacing: 0;
    color: #ef332b;
    z-index: 4;
  }

  .process-map-dot,
  .step-dot {
    position: absolute;
    width: 34px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(248, 244, 237, .88);
    color: #ef332b;
    font-family: 'Bricolage Grotesque', Arial, sans-serif;
    font-size: .88rem;
    font-weight: 800;
    z-index: 3;
  }

  .process-map-dot-1 { left: 10.6%; top: 73.5%; }
  .process-map-dot-2 { left: 27.2%; top: 12.8%; }
  .process-map-dot-3 { left: 66.2%; top: 32%; }
  .process-map-dot-4 { right: 3.4%; top: 26.4%; }

  .process-card {
    width: min(31.8vw, 455px);
    min-width: 410px;
    min-height: 540px;
    padding: 1.08rem 1.15rem 0;
    border: 1.35px solid rgba(75, 37, 28, .26);
    border-radius: 4px;
    background: rgba(250, 248, 244, .94);
    color: var(--ink);
    box-shadow: none;
    backdrop-filter: none;
    opacity: 0;
    visibility: hidden;
    z-index: 5;
  }

  .process-card::before {
    left: 42%;
    top: -18px;
    width: 88px;
    height: 22px;
    border: 1.35px solid rgba(75, 37, 28, .26);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: rgba(250, 248, 244, .96);
  }

  .process-card-1 {
    left: 1.8%;
    top: 20%;
    --r: -2deg;
    z-index: 5;
  }

  .process-card-2 {
    left: 23.5%;
    top: 29%;
    --r: .8deg;
    z-index: 6;
  }

  .process-card-3 {
    left: 46%;
    top: 38%;
    --r: -1.4deg;
    z-index: 7;
  }

  .process-card-4 {
    right: 2%;
    top: 47%;
    --r: 1.4deg;
    z-index: 8;
  }

  .process-card h3 {
    margin: .2rem 0 1.1rem;
    font-family: 'Anton', Impact, sans-serif;
    font-size: clamp(2.55rem, 4.1vw, 4.35rem);
    font-weight: 400;
    line-height: .84;
    letter-spacing: -.02em;
  }

  .process-num {
    margin: 0 0 1rem;
    font-family: 'Anton', Impact, sans-serif;
    font-size: clamp(3.2rem, 5vw, 5.1rem);
    font-weight: 400;
    line-height: .85;
  }

  .process-card p {
    max-width: 100%;
    margin-bottom: 1rem;
    font-size: .8rem;
    line-height: 1.08;
    font-weight: 800;
    text-transform: uppercase;
  }

  .process-card .step-dot {
    left: 28%;
    top: -26px;
    right: auto;
    width: 34px;
    background: #fff200;
    color: #ef332b;
    z-index: 10;
  }

  .process-card-2 .step-dot,
  .process-card-3 .step-dot,
  .process-card-4 .step-dot {
    background: rgba(248, 244, 237, .9);
  }

  .process-tag {
    position: relative;
    z-index: 1;
    display: block;
    width: max-content;
    margin: -.2rem auto .55rem;
    font-size: .78rem;
    font-weight: 800;
    color: rgba(75, 37, 28, .72);
    text-transform: uppercase;
  }

  .process-art {
    min-height: 230px;
    margin-left: -1.15rem;
    margin-right: -1.15rem;
    background: rgba(222, 215, 231, .72);
    border-radius: 0;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .process-bg-title {
    font-size: clamp(3.9rem, 6.3vw, 5rem);
  }

  .process-card {
    width: min(33vw, 370px);
    min-width: 320px;
    min-height: 500px;
  }

  .process-card-1 { left: 1%; top: 22%; }
  .process-card-2 { left: 24%; top: 31%; }
  .process-card-3 { left: 47%; top: 40%; }
  .process-card-4 { right: 1%; top: 49%; }

  .process-card h3 {
    font-size: clamp(2.1rem, 3.5vw, 3rem);
  }

  .process-card p {
    font-size: .72rem;
  }
}

/* =========================================================
   v2 / Mobile scroll-parallax restoration
   ========================================================= */
@supports (overflow: clip) {
  body { overflow-x: clip; }
}

@media (max-width: 991.98px) {
  .process-section {
    min-height: auto;
    padding-top: clamp(3.5rem, 10vw, 5rem);
    overflow: visible !important;
  }

  .process-stage-wrap {
    height: 430svh;
    margin-top: 1.5rem;
  }

  .process-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    min-height: 0;
    display: block;
    overflow: hidden;
    padding: 0;
  }

  .process-bg-title {
    position: absolute;
    inset: 7svh 16px auto;
    margin: 0;
    color: var(--pink-strong);
    font-size: clamp(3.35rem, 13vw, 6rem);
    line-height: .88;
    text-align: center;
    z-index: 1;
  }

  .process-caption {
    position: absolute;
    left: 50%;
    bottom: 3.5svh;
    width: min(84vw, 430px);
    margin: 0;
    transform: translateX(-50%);
    text-align: center;
    z-index: 2;
  }

  .process-map-dot { display: none; }

  .process-card {
    position: absolute;
    left: 50%;
    right: auto;
    top: clamp(145px, 21svh, 190px);
    width: min(82vw, 520px);
    min-width: 0;
    min-height: 0;
    max-height: 69svh;
    overflow: hidden;
    transform: translate(-50%, var(--process-y, 0px)) rotate(var(--r)) !important;
    transform-origin: center;
    opacity: 0;
    visibility: hidden;
  }

  .process-card-1 { --r: -2.2deg; z-index: 5; }
  .process-card-2 { --r: 1.4deg; z-index: 6; }
  .process-card-3 { --r: -1.5deg; z-index: 7; }
  .process-card-4 { --r: 1.8deg; z-index: 8; }

  .process-card h3 { font-size: clamp(2.1rem, 8.8vw, 3.6rem); }
  .process-card p { font-size: clamp(.72rem, 2.4vw, .9rem); line-height: 1.15; }
  .process-num { font-size: clamp(2.8rem, 11vw, 4.3rem); }
  .process-art { min-height: clamp(140px, 22svh, 205px); }
}

@media (max-width: 575.98px) {
  .process-stage-wrap { height: 390svh; }
  .process-card { width: calc(100vw - 34px); top: clamp(130px, 19svh, 165px); max-height: 72svh; }
  .process-card h3 { margin-bottom: .55rem; }
  .process-num { margin-bottom: .35rem; }
  .process-card p { margin-bottom: .55rem; }
  .process-art { min-height: clamp(125px, 20svh, 175px); }

  .adoption-machine-scroll { height: 245svh; }
  .adoption-machine-stage { height: 100vh; height: 100svh; min-height: 100vh; min-height: 100svh; }
}

@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .process-stage-wrap { height: auto; }
  .process-stage { position: relative; height: auto; display: grid; gap: 1rem; overflow: visible; padding: 1rem 0 3rem; }
  .process-bg-title, .process-caption { position: relative; inset: auto; left: auto; bottom: auto; transform: none; }
  .process-card {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-height: none;
    opacity: 1;
    visibility: visible;
    transform: rotate(0deg) !important;
  }
}