/* ============================================================
   REBUILD OVERRIDES — Logo, Hero, How It Works, Journey
   Loads after styles.css so these rules win.
   ============================================================ */

/* ------------ Brand logo ------------ */
.brand-logo{ display:block; width:auto; height:auto; }
.brand-logo__bubbles circle{ fill:#7CDCCC; }
.brand-logo__title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.04em;
  fill: #6BD3C2;
}
.brand-logo__title--sm{ font-size: 16px; letter-spacing: .14em; }
.brand-logo__wave{ stroke: #6BD3C2; fill:none; }
.brand-logo__drop{ fill: #6BD3C2; }
.brand-logo__tag{
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 5.4px;
  letter-spacing: .26em;
  fill: #6BD3C2;
}
.brand-logo--nav{ height: 58px; }
.brand-logo--lg{ width: 240px; height: auto; }
.brand-logo--footer{ width: 200px; }
.nav__logo{ padding: 0; display:inline-flex; }
.footer__brand .brand-logo--footer{ margin-bottom: 10px; }

/* ============================================================
   HERO — premium, full-width, 3D canvas behind centered copy
   ============================================================ */
.hero{
  min-height: 100vh;
  padding: 130px 0 60px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #FBFAF6 0%, #F1F7F6 60%, #EAF1F4 100%);
}
.hero__canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:1;
  pointer-events:none;
}
.hero__aura{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.aura{
  position:absolute; border-radius:50%; filter: blur(110px); opacity:.55;
  will-change: transform;
}
.aura--a{ width:55vw; height:55vw; top:-15vw; left:-10vw; background:radial-gradient(circle,#B7EDE3,transparent 65%); animation: auraFloat 22s ease-in-out infinite;}
.aura--b{ width:50vw; height:50vw; top:10vh; right:-15vw; background:radial-gradient(circle,#C8DEFB,transparent 65%); animation: auraFloat 28s ease-in-out infinite reverse;}
.aura--c{ width:40vw; height:40vw; bottom:-10vw; left:30vw; background:radial-gradient(circle,#FDE3EE,transparent 65%); animation: auraFloat 30s ease-in-out infinite;}
@keyframes auraFloat{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(5%,-5%) scale(1.1); }
}

.hero__inner{
  position: relative; z-index: 3;
  width: min(1320px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: calc(100vh - 200px);
  gap: 20px;
}
.hero__top{
  display:flex; justify-content:space-between; align-items:center; gap:24px;
}
.hero__meta em{
  font-style: italic;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink-2);
}
.hero__center{
  align-self:center;
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.hero__title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 7.6vw, 130px);
  line-height: .96;
  letter-spacing: -0.04em;
  margin: 0 0 30px;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{ display:inline-block; transform: translateY(110%); }
.hero.is-ready .hero__title .line > span{ transform: translateY(0); transition: transform 1.1s var(--ease);}
.hero.is-ready .hero__title .line:nth-child(2) > span{ transition-delay: .12s;}
.hero.is-ready .hero__title .line:nth-child(3) > span{ transition-delay: .24s;}
.hero__sub{
  font-size: clamp(16px, 1.2vw, 19px);
  color: var(--muted);
  max-width: 58ch;
  margin: 0 auto 36px;
}
.hero__ctas{
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
}
.hero__bottom{
  display:flex; flex-direction:column; gap: 18px;
  align-items:center;
}
.hero__steps{
  list-style:none; margin:0; padding: 14px 18px;
  display:flex; align-items:center; gap: 0;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 99px;
  box-shadow: 0 24px 60px -30px rgba(11,23,51,.25);
  font-size: 14px;
}
.hero__steps li{
  display:flex; align-items:center; gap: 8px;
  padding: 6px 18px;
  border-right: 1px solid rgba(11,23,51,.08);
  white-space: nowrap;
}
.hero__steps li:last-child{ border-right:none; }
.hero__steps li span{
  font-family: var(--font-display); font-weight:600;
  width: 28px; height: 28px;
  display:grid; place-items:center;
  border-radius:50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff; font-size: 12px;
  flex-shrink: 0;
}
.hero__steps li strong{ font-weight:600; }
.hero__steps li em{ font-style:normal; color: var(--muted); font-size: 12.5px; }
.hero__trust{
  display:flex; align-items:center; gap: 12px;
  color: var(--muted); font-size: 14px;
}
.hero__scroll{
  position:absolute; left:50%; bottom: 18px;
  transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap: 8px;
  z-index: 4;
}
.hero__scroll em{
  font-style: normal;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__scroll span{
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, transparent, var(--ink), transparent);
}

/* Hide old hero artifacts if still present */
.hero__scene, .hero__marquee, .floater{ display:none !important; }

/* ============================================================
   HOW IT WORKS — pinned scroll, scene crossfade
   ============================================================ */
.how{
  position: relative;
  padding: 0;
  background: linear-gradient(180deg, transparent 0%, #F1F4F7 20%, #F1F4F7 80%, transparent 100%);
}
.how .container{ width: min(1320px, 92vw); }
.how__pin{
  position: relative;
  height: 600vh; /* drives scroll length */
}
.how__grid{
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 60px;
  align-items: center;
  padding: 100px 0;
  margin: 0 auto;
}
.how__copy{
  display:flex; flex-direction:column; gap: 16px;
  position: relative;
  min-height: 520px;
}
.how__title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 12px 0 4px;
}
.how__title em{ font-style:italic; color: var(--brand-2); font-weight:400; }
.how__lede{ color: var(--muted); max-width: 50ch; margin: 0 0 20px; }
.how__steps{
  position: relative;
  height: 220px;
  margin-top: 20px;
}
.how__step{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events: none;
}
.how__step.is-active{
  opacity: 1; transform: none; pointer-events: auto;
}
.how__num{
  display:inline-flex; align-items:baseline; gap: 6px;
  font-family: var(--font-display);
  font-size: 14px; color: var(--muted);
  letter-spacing: .18em;
}
.how__num i{ font-style:normal; }
.how__num i:first-child{ color: var(--ink); font-weight: 600; font-size: 22px; }
.how__step h3{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05; letter-spacing: -0.02em;
  margin: 0;
}
.how__step p{
  color: var(--muted); max-width: 46ch; margin: 0;
  font-size: 17px;
}

.how__progress{
  margin-top: 22px; height: 2px; width: 100%;
  background: rgba(11,23,51,.08); border-radius:99px;
  overflow:hidden;
}
.how__progress-bar{
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  border-radius: 99px;
  transition: width .2s linear;
}

/* ---- Stage on the right ---- */
.how__stage{
  position: relative;
  aspect-ratio: 1/1.05;
  max-height: 78vh;
  border-radius: 36px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 60px 120px -50px rgba(11,23,51,.4), 0 30px 60px -40px rgba(11,23,51,.2);
}
.how__chip{
  position: absolute; top: 22px; left: 22px;
  z-index: 5;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  border-radius: 99px;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.8);
  font-size: 13px; font-weight: 600;
  box-shadow: 0 14px 30px -16px rgba(11,23,51,.25);
}
.how__chip span{ width:8px; height:8px; border-radius:50%; background: var(--brand-2); box-shadow: 0 0 0 4px rgba(90,169,240,.18); }

.how__scene{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .7s var(--ease), transform .9s var(--ease);
  pointer-events: none;
}
.how__scene.is-active{
  opacity: 1; transform: none; pointer-events: auto;
}

.scene__bg{ position:absolute; inset:0; }
.scene__bg--mint{ background: linear-gradient(160deg, #E6F8F4 0%, #C7ECE3 100%); }
.scene__bg--sky { background: linear-gradient(180deg, #DCEEFB 0%, #ECF6FF 80%); }
.scene__bg--rose{ background: linear-gradient(160deg, #FBE9F0 0%, #F6DAE8 100%); }
.scene__bg--cream{background: linear-gradient(160deg, #FFF4DE 0%, #F8E7C3 100%); }

.scene__obj{ position: relative; z-index: 2; }

.scene__sparkle{
  position: absolute; width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 22px rgba(255,255,255,.9);
  animation: sparkle 3s ease-in-out infinite;
  z-index: 3;
}
.scene__sparkle.s1{ top: 18%; left: 12%; }
.scene__sparkle.s2{ top: 70%; left: 78%; width: 6px; height: 6px; animation-delay: .8s;}
.scene__sparkle.s3{ top: 35%; right: 12%; width: 10px; height: 10px; animation-delay: 1.6s;}
@keyframes sparkle{
  0%,100%{ transform: scale(.6); opacity: .4; }
  50%{ transform: scale(1.2); opacity: 1; }
}

/* Scene 1 — book */
.scene__phone{
  width: 220px; height: 400px;
  background: #fff; border-radius: 38px;
  border: 6px solid #0B1733;
  padding: 18px 14px;
  box-shadow: 0 50px 90px -40px rgba(11,23,51,.4);
  transform: perspective(900px) rotateY(-12deg) rotateX(6deg);
  position: relative;
}
.scene__phone-inner{
  display:flex; flex-direction:column; gap: 12px; height: 100%;
  position: relative;
}
.scene__phone-bar{
  width: 60px; height: 6px; border-radius: 3px; background: #E7EEF6; margin: 0 auto 6px;
}
.scene__phone-card{
  background: linear-gradient(135deg, #5DD3C5, #5AA9F0);
  padding: 12px 14px; border-radius: 14px;
  color: #fff;
  display: flex; flex-direction: column; gap: 2px;
}
.scene__phone-card em{ font-style: normal; font-size: 11px; opacity: .85; }
.scene__phone-card strong{ font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.scene__phone-row{ height: 18px; border-radius: 6px; background: #F1F5F9; }
.scene__phone-row + .scene__phone-row{ background: #FCE6EE; width: 70%; }
.scene__phone-btn{
  margin-top: auto;
  padding: 12px;
  background: #0B1733; color: #fff;
  font-size: 11px; text-align: center;
  border-radius: 10px; font-weight: 600;
}
.scene__phone-tap{
  position: absolute; right: 28px; bottom: 28px;
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #fff;
  animation: tap 1.6s ease-out infinite;
}
@keyframes tap{
  0%{ transform: scale(.6); opacity: 1;}
  100%{ transform: scale(2.4); opacity: 0;}
}

/* Scene 2 — van */
.scene__road{
  position:absolute; left: -10%; right:-10%; bottom: 18%;
  height: 4px; background: rgba(11,23,51,.18);
  border-radius: 99px;
  z-index: 1;
}
.scene__road::after{
  content:''; position:absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(11,23,51,.4) 12px 22px);
  height: 2px; top: 50%; transform: translateY(-50%);
  border-radius: 99px;
}
.scene__house{
  position: absolute; right: 8%; bottom: 22%;
  width: 90px; height: 80px;
  background: #fff;
  clip-path: polygon(0 38%, 50% 0, 100% 38%, 100% 100%, 0 100%);
  z-index: 1;
  box-shadow: inset 0 0 0 3px #0B1733;
}
.scene__house::before{
  content:''; position:absolute; left:0; right:0; top:0;
  height: 38%;
  background: linear-gradient(180deg, #F5C9DA, #F5C9DA);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.scene__house::after{
  content:''; position: absolute; left: 50%; bottom: 0;
  width: 22px; height: 30px;
  background: #A8E8E0;
  transform: translateX(-50%);
}
.scene__cloud{
  position: absolute;
  width: 80px; height: 24px; border-radius: 99px;
  background: rgba(255,255,255,.85);
  z-index: 1;
}
.scene__cloud::before, .scene__cloud::after{
  content:''; position:absolute; bottom: 0;
  width: 28px; height: 28px; border-radius: 50%; background: inherit;
}
.scene__cloud::before{ left: 12px; }
.scene__cloud::after{ right: 14px; width: 36px; height: 36px; }
.scene__cloud.c1{ top: 14%; left: 12%; animation: cloudDrift 14s linear infinite; }
.scene__cloud.c2{ top: 26%; left: 40%; opacity: .7; animation: cloudDrift 18s linear infinite reverse; }
@keyframes cloudDrift{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(40px); }
}
.scene__van{
  position: absolute;
  left: -30%; bottom: 14%;
  width: 240px;
  z-index: 2;
  filter: drop-shadow(0 24px 30px rgba(11,23,51,.25));
  animation: vanDrive 6s ease-in-out infinite;
}
@keyframes vanDrive{
  0%   { transform: translateX(0); }
  60%  { transform: translateX(170%); }
  100% { transform: translateX(170%); }
}
.scene__puff{
  position:absolute; bottom: 22%; left: -10%;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,.9);
  animation: puffOut 2.2s ease-in-out infinite;
  z-index: 2;
}
.scene__puff.p1{ animation-delay: 0s; }
.scene__puff.p2{ animation-delay: .4s; bottom: 26%; width: 12px; height: 12px; }
.scene__puff.p3{ animation-delay: .8s; bottom: 20%; width: 10px; height: 10px; }
@keyframes puffOut{
  0%{ transform: translateX(0) scale(.6); opacity: .8; }
  100%{ transform: translateX(-80px) scale(1.4); opacity: 0; }
}

/* Scene 3 — washer */
.scene__washer{ position: relative; z-index:2; }
.washer-shell{
  width: 240px; height: 320px;
  background: #fff;
  border: 8px solid #0B1733;
  border-radius: 24px;
  padding: 16px;
  display:flex; flex-direction:column; gap: 14px;
  box-shadow: 0 50px 80px -40px rgba(11,23,51,.4);
}
.washer-controls{ display:flex; gap: 8px; padding: 6px 0; }
.washer-controls i{ width: 16px; height: 16px; border-radius:50%; background:#E7EEF6; display:block; }
.washer-controls i:first-child{ background: var(--brand); }
.washer-controls i:nth-child(2){ background: var(--brand-2); }
.washer-door{
  flex: 1; background: #F4E2EB;
  border-radius: 16px;
  display:grid; place-items:center;
  position: relative; overflow: hidden;
}
.washer-drum{
  width: 75%; aspect-ratio: 1;
  border-radius: 50%;
  background: #0B1733;
  display:grid; place-items:center;
  position: relative; overflow:hidden;
}
.washer-spin{
  width: 88%; height: 88%; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #FBE2EE 0%, #F5C9DA 50%, #B6E7DF 100%);
  position: relative;
  animation: washerSpin 3.2s linear infinite;
}
.washer-spin i{
  position:absolute; width: 22px; height: 10px; background: #fff; opacity: .85;
  border-radius: 6px;
  display:block;
}
.washer-spin i:nth-child(1){ top:18%; left:18%; transform: rotate(-26deg);}
.washer-spin i:nth-child(2){ top:62%; left:50%; transform: rotate(40deg); background: #C8DEFB;}
.washer-spin i:nth-child(3){ top:32%; left:58%; transform: rotate(18deg);}
.washer-spin i:nth-child(4){ top:60%; left:18%; transform: rotate(-50deg); background:#FBE2EE;}
.washer-spin i:nth-child(5){ top:18%; left:55%; transform: rotate(10deg); background:#FFF4DE;}
@keyframes washerSpin{ to{ transform: rotate(360deg);} }
.bub{
  position: absolute; bottom: 8%;
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(255,255,255,.95);
  animation: bubRise 2.6s ease-in infinite;
  display:block;
}
.bub.b1{ left: 18%; }
.bub.b2{ left: 40%; width: 10px; height: 10px; animation-delay: .5s; }
.bub.b3{ left: 62%; width: 8px;  height: 8px;  animation-delay: 1s; }
.bub.b4{ left: 78%; width: 12px; height: 12px; animation-delay: 1.4s; }
@keyframes bubRise{
  0%{ transform: translateY(0) scale(.5); opacity: 0; }
  20%{ opacity: 1; }
  100%{ transform: translateY(-160px) scale(1.4); opacity: 0; }
}
.scene__steam{
  position:absolute; top: 10%;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.6); filter: blur(2px);
  animation: steamUp 4s ease-in-out infinite;
  z-index: 1;
}
.scene__steam.st1{ left: 22%; }
.scene__steam.st2{ left: 50%; animation-delay: .8s; }
.scene__steam.st3{ left: 76%; animation-delay: 1.6s; }
@keyframes steamUp{
  0%{ transform: translateY(0) scale(.5); opacity: 0; }
  20%{ opacity: .9; }
  100%{ transform: translateY(-90px) scale(1.4); opacity: 0; }
}

/* Scene 4 — pack */
.scene__pack{ position: relative; display: grid; place-items: center; z-index:2; }
.pack-stack{
  position: relative;
  width: 220px; height: 200px;
  margin-bottom: 16px;
}
.pack-fold{
  position: absolute; left: 50%; transform: translateX(-50%);
  height: 26px; border-radius: 5px;
  box-shadow: 0 14px 30px -18px rgba(11,23,51,.3);
  animation: foldIn .6s var(--ease) backwards;
}
.pack-fold.f1{ bottom: 0;   width: 210px; background: linear-gradient(135deg, #C8DEFB, #5AA9F0); }
.pack-fold.f2{ bottom: 32px; width: 188px; background: linear-gradient(135deg, #FBE2EE, #F2A8C5); animation-delay: .15s;}
.pack-fold.f3{ bottom: 64px; width: 170px; background: linear-gradient(135deg, #B6E7DF, #6FE0D6); animation-delay: .3s;}
.pack-fold.f4{ bottom: 96px; width: 150px; background: linear-gradient(135deg, #FFE7B5, #FFC97A); animation-delay: .45s;}
@keyframes foldIn{
  from{ opacity: 0; transform: translate(-50%, -20px); }
  to{ opacity: 1; transform: translate(-50%, 0); }
}
.pack-bag{
  width: 130px; display:flex; flex-direction:column; align-items:center;
  filter: drop-shadow(0 30px 30px rgba(11,23,51,.18));
}
.pack-handle{
  width: 60px; height: 28px; border: 5px solid #0B1733; border-bottom: none;
  border-radius: 40px 40px 0 0;
}
.pack-body{
  width: 130px; height: 110px; border-radius: 18px;
  background: linear-gradient(160deg, #fff, #E6F5F2);
  border: 4px solid #0B1733;
  display: grid; place-items: center;
  color: #0B1733;
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
}
.pack-tape{
  position: absolute; right: -10px; top: -10px;
  background: #fff; padding: 6px 12px; border-radius: 99px;
  font-family: var(--font-display); font-style: italic; font-size: 12px;
  box-shadow: var(--shadow);
}

/* Scene 5 — deliver */
.scene__deliver{
  position: relative;
  width: 320px; height: 360px;
  display: grid; place-items: end center;
  z-index:2;
}
.door-frame{
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 200px; height: 320px;
  background: linear-gradient(180deg, #F4E2EB 0%, #F4E2EB 30%, #fff 30%);
  border: 5px solid #0B1733;
  border-radius: 100px 100px 6px 6px;
  display:flex; align-items:flex-end; justify-content:center;
}
.door-leaf{
  position: relative;
  width: 80%; height: 92%;
  background: #fff;
  border: 4px solid #0B1733;
  border-bottom: none;
  border-radius: 80px 80px 0 0;
  margin-bottom: -4px;
  transform-origin: left center;
  animation: doorOpen 4s ease-in-out infinite;
}
@keyframes doorOpen{
  0%, 100%{ transform: perspective(800px) rotateY(0); }
  40%, 60%{ transform: perspective(800px) rotateY(-35deg); }
}
.door-knob{
  position:absolute; right: 14px; top: 50%;
  width: 8px; height: 8px; border-radius: 50%; background: #0B1733;
}
.door-panel{
  position:absolute; left: 50%; top: 30%;
  width: 60%; height: 18%;
  border: 2px solid #0B1733;
  transform: translateX(-50%);
  border-radius: 4px;
}
.door-panel--b{ top: 55%; height: 30%; }
.door-bag{
  position: absolute; right: 30px; bottom: 20px;
  width: 80px;
  filter: drop-shadow(0 24px 30px rgba(11,23,51,.25));
  animation: bagBounce 1.6s ease-in-out infinite;
  z-index: 3;
}
.door-bag__handle{
  width: 36px; height: 20px;
  border: 4px solid #0B1733; border-bottom: none;
  border-radius: 30px 30px 0 0;
  margin: 0 auto;
}
.door-bag__body{
  width: 80px; height: 100px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  display:grid; place-items:center;
  color:#fff; font-family: var(--font-display); font-weight: 700; font-size: 16px;
}
.door-ding{
  position: absolute; top: 30px; right: 36px;
  width: 44px; height: 44px;
  background: #fff; border: 3px solid #0B1733;
  border-radius: 50%;
  display:grid; place-items:center;
  animation: ding 1.4s ease-in-out infinite;
  z-index: 3;
}
.door-ding svg{ width: 22px; height: 22px; stroke: #0B1733; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* dots */
.how__dots{
  position: absolute; right: 22px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px;
  z-index: 5;
}
.how__dots span{
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(11,23,51,.18);
  transition: background .3s, transform .3s;
  display:block;
}
.how__dots span.is-active{ background: var(--ink); transform: scale(1.4); }

/* ============================================================
   JOURNEY — animated path + parallax + 3D stops
   ============================================================ */
.journey{ padding: 140px 0 120px; position: relative; }
.journey__stage{
  position: relative;
  width: min(1400px, 96vw);
  margin: 50px auto 0;
  height: 540px;
  background: linear-gradient(180deg, #F1F7F9 0%, #E5EFF3 100%);
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 60px 120px -50px rgba(11,23,51,.4);
}
.journey__bg{ position: absolute; inset: 0; }
.parallax-layer{ position:absolute; inset:0; will-change: transform; }
.parallax-layer--sky{
  background:
    radial-gradient(60% 50% at 20% 30%, rgba(168,232,224,.35), transparent 70%),
    radial-gradient(50% 50% at 80% 40%, rgba(200,222,251,.4), transparent 70%);
}
.parallax-layer--hills{
  bottom: 0; top: auto; height: 30%;
  background:
    radial-gradient(120% 100% at 30% 100%, #C8E5DF 0%, #C8E5DF 60%, transparent 60%),
    radial-gradient(140% 110% at 80% 100%, #D6E8F6 0%, #D6E8F6 55%, transparent 55%);
  opacity: .8;
}
.parallax-layer--dots{
  background-image: radial-gradient(rgba(11,23,51,.08) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .5;
  mask-image: linear-gradient(180deg, transparent, black 30%, black 70%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, black 30%, black 70%, transparent);
}
.parallax-layer--floats{ pointer-events: none; }
.float-cloth{
  position: absolute; width: 50px; height: 32px;
  border-radius: 8px;
  box-shadow: 0 16px 30px -16px rgba(11,23,51,.25);
}
.float-cloth.fc1{ top: 14%; left: 14%; background: linear-gradient(135deg, #C8DEFB, #5AA9F0); transform: rotate(-8deg);}
.float-cloth.fc2{ top: 22%; right: 18%; background: linear-gradient(135deg, #FBE2EE, #F2A8C5); transform: rotate(10deg);}
.float-cloth.fc3{ bottom: 24%; left: 30%; background: linear-gradient(135deg, #B6E7DF, #6FE0D6); transform: rotate(4deg);}
.float-cloth.fc4{ bottom: 18%; right: 30%; background: linear-gradient(135deg, #FFE7B5, #FFC97A); transform: rotate(-6deg);}
.float-bubble{
  position:absolute; border-radius: 50%;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 6px 10px rgba(255,255,255,.6), 0 6px 12px rgba(168,232,224,.4);
}
.float-bubble.fb1{ top: 12%; left: 32%; width: 22px; height: 22px; }
.float-bubble.fb2{ top: 28%; left: 60%; width: 14px; height: 14px; }
.float-bubble.fb3{ bottom: 30%; left: 50%; width: 18px; height: 18px; }
.float-bubble.fb4{ top: 18%; right: 36%; width: 10px; height: 10px; }

.journey__path-svg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
}
.journey__stops{
  position: absolute; inset: 0;
  z-index: 3;
}
.jstop{
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: 0;
  transform: translateY(20px) scale(.9);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: transform, opacity;
}
.jstop.is-in{ opacity: 1; transform: none; }
.jstop__art{
  width: 84px; height: 84px;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 30px 50px -20px rgba(11,23,51,.3);
  display: grid; place-items: center;
  padding: 10px;
  transition: transform .6s var(--ease);
}
.jstop:hover .jstop__art{ transform: translateY(-6px) scale(1.04); }
.jstop__art svg{ width: 100%; height: 100%; }
.jstop__label{
  text-align: center;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.85);
  padding: 10px 14px;
  border-radius: 14px;
  min-width: 130px;
  box-shadow: 0 14px 30px -18px rgba(11,23,51,.2);
}
.jstop__label span{ display:block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.jstop__label strong{ display:block; font-family: var(--font-display); font-weight: 600; font-size: 16px; margin: 2px 0; }
.jstop__label em{ display:block; font-style: normal; font-size: 12px; color: var(--muted); }
.jstop--1{ left: 4%;  bottom: 16%; }
.jstop--2{ left: 30%; top: 16%; }
.jstop--3{ left: 56%; bottom: 18%; }
.jstop--4{ right: 4%; top: 18%; }

.journey__van{
  position: absolute; left: 0; top: 0;
  width: 120px;
  z-index: 4;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 14px 18px rgba(11,23,51,.3));
  pointer-events: none;
}
.journey__van-shadow{
  position: absolute; left: 50%; bottom: -12px;
  width: 80%; height: 10px;
  background: radial-gradient(ellipse, rgba(11,23,51,.25) 0%, transparent 70%);
  transform: translateX(-50%);
}

.journey__meter{
  position: absolute; left: 50%; bottom: 24px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.9);
  padding: 12px 18px;
  border-radius: 99px;
  box-shadow: 0 20px 40px -22px rgba(11,23,51,.3);
  z-index: 5;
}
.journey__meter-bar{
  width: 220px; height: 4px;
  background: rgba(11,23,51,.1);
  border-radius: 99px; overflow: hidden;
  display: block;
}
.journey__meter-bar span{
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  border-radius: 99px;
  transition: width .2s linear;
}
.journey__meter em{ font-style: normal; font-size: 13px; color: var(--ink-2); min-width: 160px; }

/* ============================================================
   RESPONSIVE OVERRIDES for new sections
   ============================================================ */
@media (max-width: 1100px){
  .how__grid{ grid-template-columns: 1fr; gap: 30px; padding: 60px 0; }
  .how__copy{ min-height: auto; }
  .how__steps{ height: 200px; }
  .how__stage{ aspect-ratio: 1; max-height: 70vh; order: -1; }
  .hero__steps{ flex-wrap: wrap; border-radius: 24px; padding: 14px; gap: 6px; }
  .hero__steps li{ border-right: none; border-bottom: 1px solid rgba(11,23,51,.08); padding: 8px 12px; }
  .hero__steps li:nth-last-child(-n+2){ border-bottom: none; }
}
@media (max-width: 900px){
  .hero{ padding: 110px 0 90px; }
  .hero__top{ display:none; }
  .hero__title{ font-size: clamp(40px, 11vw, 64px); }
  .hero__sub{ font-size: 16px; }
  .hero__steps{ font-size: 12px; }
  .hero__steps li{ flex: 1 1 45%; }
  .hero__scroll{ display: none; }
  .how__pin{ height: 500vh; }
  .how__stage{ max-height: 60vh; aspect-ratio: 1.05/1; }
  .journey__stage{ height: 460px; border-radius: 28px; }
  .jstop__art{ width: 60px; height: 60px; padding: 8px; }
  .jstop__label{ min-width: 96px; padding: 8px 10px; }
  .jstop__label strong{ font-size: 13px; }
  .jstop__label em{ font-size: 11px; }
  .journey__van{ width: 80px; }
  .journey__meter{ left: 16px; right: 16px; transform: none; flex-direction: column; gap: 6px; padding: 10px 16px; }
  .journey__meter-bar{ width: 100%; }
  .journey__meter em{ min-width: 0; font-size: 12px; }
}
@media (max-width: 600px){
  .brand-logo--nav{ height: 42px; }
  .nav__logo{ max-width: 160px; }
}