/* Joy's Box V20 — section personalities + liquid type hover */
:root{
  --v20-gold:#d7bb6b;
  --v20-ink:#0b0b0a;
  --v20-paper:#f3efe5;
  --v20-ease:cubic-bezier(.16,1,.3,1);
  --v20-silk:cubic-bezier(.22,.78,.18,1);
}

/* --------------------------------------------------------------------------
   HERO — keep the V19 entrance, fix the right edge, add liquid text response.
   -------------------------------------------------------------------------- */
.hero-v11__title{
  position:relative;
  max-width:none!important;
  width:min(100%,1520px);
  padding-right:clamp(18px,2.2vw,38px);
  overflow:visible;
  isolation:isolate;
}
.hero-v11__line{
  overflow:visible!important;
  padding-right:.12em;
}
/* The second line was a few pixels too wide on common 1366–1512px screens. */
.hero-v11__line:nth-child(2) b{font-size:clamp(71px,10.08vw,168px)!important;letter-spacing:-.054em!important}
.hero-v11__line:nth-child(2) i{font-size:clamp(70px,9.78vw,164px)!important;letter-spacing:-.058em!important}
.js body.is-loading .hero-v11__line b,
.js body.is-loading .hero-v11__line i{
  clip-path:inset(0 0 100% 0);
}
.js body.is-ready .hero-v11__line b,
.js body.is-ready .hero-v11__line i{
  clip-path:inset(-10% -12% -16% -10%);
  transition:transform 1.02s var(--v19-ease) .38s,opacity .62s ease .38s,filter .78s ease .38s,clip-path 1.02s var(--v19-ease) .38s!important;
}
.js body.is-ready .hero-v11__line:nth-child(2) b,
.js body.is-ready .hero-v11__line:nth-child(2) i{transition-delay:.51s!important}

.hero-title-lens{
  --lens-x:50%;
  --lens-y:50%;
  position:absolute;
  z-index:5;
  inset:0;
  pointer-events:none;
  opacity:0;
  transform:scale(1.018);
  transform-origin:var(--lens-x) var(--lens-y);
  -webkit-mask-image:radial-gradient(circle 118px at var(--lens-x) var(--lens-y),#000 0 44%,rgba(0,0,0,.92) 58%,rgba(0,0,0,.22) 82%,transparent 100%);
  mask-image:radial-gradient(circle 118px at var(--lens-x) var(--lens-y),#000 0 44%,rgba(0,0,0,.92) 58%,rgba(0,0,0,.22) 82%,transparent 100%);
  filter:url(#jbTextWave) brightness(1.16) saturate(1.08);
  transition:opacity .28s ease;
  will-change:transform,mask-position,opacity;
}
.hero-v11__title.is-liquid-hover .hero-title-lens{opacity:.96}
.hero-title-lens .hero-v11__line b,
.hero-title-lens .hero-v11__line i{
  transform:none!important;
  opacity:1!important;
  filter:none!important;
  clip-path:none!important;
  transition:none!important;
}
.hero-v11__title::after{
  content:"";
  position:absolute;
  z-index:6;
  width:156px;height:156px;
  left:var(--hero-lens-px,50%);top:var(--hero-lens-py,50%);
  transform:translate(-50%,-50%) scale(.78);
  border:1px solid rgba(236,209,134,.34);
  border-radius:50%;
  opacity:0;
  pointer-events:none;
  box-shadow:0 0 55px rgba(215,187,107,.08),inset 0 0 35px rgba(255,255,255,.035);
  transition:opacity .24s ease,transform .45s var(--v20-ease);
}
.hero-v11__title.is-liquid-hover::after{opacity:.6;transform:translate(-50%,-50%) scale(1)}

/* --------------------------------------------------------------------------
   GLOBAL SECTION ATMOSPHERE
   -------------------------------------------------------------------------- */
main>section{position:relative}
.v20-vibe{--mx:50%;--my:50%}
.v20-vibe::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .5s ease;
}
.v20-vibe.v20-in::before{opacity:1}

/* 01 / INTRO — editorial reveal + quiet lens on the hero image. */
.intro{isolation:isolate}
.intro::before{
  background:radial-gradient(circle 34vw at var(--mx) var(--my),rgba(188,149,55,.10),transparent 68%);
}
.intro__copy,.intro__visual,.stat-strip{position:relative;z-index:1}
.intro__visual{clip-path:inset(7% 7% 7% 7% round 22px);transition:clip-path 1.2s var(--v20-ease)}
.intro.v20-in .intro__visual{clip-path:inset(0 round 22px)}
.intro__visual img{transform:scale(1.055);transition:transform 1.35s var(--v20-ease),filter .6s ease;transform-origin:var(--mx) var(--my)}
.intro__visual:hover img{transform:scale(1.085);filter:saturate(1.03) contrast(1.02)}
.intro .stat{overflow:hidden}
.intro .stat strong{display:block;transform-origin:left bottom;transition:transform .55s var(--v20-ease),color .35s ease}
.intro .stat:hover strong{transform:translateY(-4px) scale(1.045);color:#a67f22}
.intro .stat::before{content:"";position:absolute;left:0;right:12%;bottom:0;height:1px;background:linear-gradient(90deg,#b9943f,transparent);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--v20-ease)}
.intro .stat:hover::before{transform:scaleX(1)}

/* 02 / MANIFESTO — three cinematic windows with a local spotlight. */
.manifesto{isolation:isolate}
.manifesto::before{background:radial-gradient(circle 38vw at var(--mx) var(--my),rgba(216,187,107,.075),transparent 66%)}
.manifesto__cards{position:relative;z-index:1;perspective:1400px}
.manifest-card{--card-x:50%;--card-y:50%;transition:transform .7s var(--v20-ease),opacity .45s ease,filter .45s ease,border-color .4s ease!important;border:1px solid rgba(255,255,255,.07)}
.manifest-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle 220px at var(--card-x) var(--card-y),rgba(245,220,153,.18),transparent 68%);opacity:0;transition:opacity .35s ease}
.manifest-card:hover{transform:translateY(-12px) rotateX(.7deg);border-color:rgba(216,187,107,.32)}
.manifest-card:hover::after{opacity:1}
.manifest-card:hover img{transform:scale(1.055)!important}
.manifesto__cards:has(.manifest-card:hover) .manifest-card:not(:hover){opacity:.54;filter:saturate(.55) brightness(.72)}
.manifest-card__content{z-index:3}

/* 03 / STORY — analogue film-strip energy while the existing horizontal pin works. */
.story-v2{--story-progress:0;isolation:isolate}
.story-v2::before{background:linear-gradient(90deg,transparent,rgba(191,151,57,.08) 48%,transparent 58%);transform:translateX(calc((var(--story-progress) * 70%) - 35%));opacity:.8}
.story-frame{transform-origin:center center;transition:opacity .45s ease,filter .45s ease,box-shadow .55s ease,transform .65s var(--v20-ease)!important}
.story-frame::after{content:"";position:absolute;z-index:4;inset:0;border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 0 0 0 rgba(215,187,107,0);transition:border-color .45s ease,box-shadow .5s ease;pointer-events:none}
.story-frame.is-active{box-shadow:0 28px 90px rgba(31,24,10,.22);transform:translateY(-5px)}
.story-frame.is-active::after{border-color:rgba(224,197,123,.28);box-shadow:inset 0 0 75px rgba(215,187,107,.035)}
.story-frame__media::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 26%,rgba(255,240,200,.12) 46%,transparent 62%);transform:translateX(-120%);transition:transform 1.15s var(--v20-ease)}
.story-frame.is-active .story-frame__media::after{transform:translateX(120%)}

/* 04 / SERVICES — rows behave like illuminated stage cues. */
.services-v3{isolation:isolate}
.services-v3::before{background:radial-gradient(circle 40vw at var(--mx) var(--my),rgba(194,154,61,.09),transparent 72%)}
.service-index{position:relative;z-index:1}
.service-row{--row-x:50%;isolation:isolate}
.service-row:after{content:"";position:absolute;z-index:-1;left:var(--row-x);top:50%;width:280px;height:280px;transform:translate(-50%,-50%) scale(.4);border-radius:50%;background:radial-gradient(circle,rgba(255,244,208,.28),rgba(215,187,107,.07) 38%,transparent 70%);opacity:0;transition:opacity .28s ease,transform .45s var(--v20-ease);pointer-events:none}
.service-row:hover:after{opacity:.75;transform:translate(-50%,-50%) scale(1)}
.service-row__title h3{transition:transform .48s var(--v20-ease),letter-spacing .48s var(--v20-ease)}
.service-row:hover .service-row__title h3{transform:translateX(10px);letter-spacing:-.01em}
.service-row figure{clip-path:inset(0 0 0 0 round 10px);transition:clip-path .45s var(--v20-ease),transform .5s var(--v20-ease)}
.service-row:hover figure{clip-path:inset(7% 0 7% 0 round 42px);transform:translateX(-5px)}

/* 05 / PROCESS — three beats, each image drifts in a different direction. */
.process-triptych{isolation:isolate}
.process-triptych::before{background:radial-gradient(circle 42vw at var(--mx) var(--my),rgba(174,130,32,.08),transparent 72%)}
.process-panel{--px:50%;--py:50%;transition:transform .65s var(--v20-ease),box-shadow .55s ease;box-shadow:0 18px 55px rgba(24,19,9,.08)}
.process-panel::after{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;background:radial-gradient(circle 260px at var(--px) var(--py),rgba(255,225,149,.16),transparent 70%);opacity:0;transition:opacity .35s ease}
.process-panel:hover{transform:translateY(-9px);box-shadow:0 30px 80px rgba(31,23,7,.16)}
.process-panel:hover::after{opacity:1}
.process-panel:nth-child(1):hover img{transform:scale(1.045) translateX(1.3%)}
.process-panel:nth-child(2):hover img{transform:scale(1.045) translateY(-1.2%)}
.process-panel:nth-child(3):hover img{transform:scale(1.045) translateX(-1.3%)}
.process-triptych__rail i{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--v20-ease)}
.process-triptych.v20-in .process-triptych__rail i{transform:scaleX(1)}
.process-triptych.v20-in .process-triptych__rail i:nth-of-type(2){transition-delay:.08s}.process-triptych.v20-in .process-triptych__rail i:nth-of-type(3){transition-delay:.16s}.process-triptych.v20-in .process-triptych__rail i:nth-of-type(4){transition-delay:.24s}.process-triptych.v20-in .process-triptych__rail i:nth-of-type(5){transition-delay:.32s}

/* 06 / JOURNEY — active waypoint travels with the scroll. */
.journey{--journey-y:20%;isolation:isolate}
.journey::before{background:radial-gradient(circle 28vw at 72% var(--journey-y),rgba(214,181,101,.12),rgba(105,84,136,.055) 40%,transparent 72%)}
.journey-list li{position:relative;transition:padding .42s var(--v20-ease),opacity .4s ease,background .4s ease,color .35s ease}
.journey-list li::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:linear-gradient(90deg,var(--v20-gold),transparent);transform:scaleX(0);transform-origin:left;transition:transform .52s var(--v20-ease)}
.journey-list li.is-waypoint-active{padding-left:14px;background:linear-gradient(90deg,rgba(215,187,107,.075),transparent 68%)}
.journey-list li.is-waypoint-active::after{transform:scaleX(1)}
.journey-list li:not(.is-waypoint-active){opacity:.62}
.journey-list li.is-waypoint-active span{color:#f3dfaa}
.journey-dot{transition:opacity .3s ease,filter .3s ease}.journey-dot.is-waypoint-active{filter:drop-shadow(0 0 13px rgba(216,187,107,.65))}

/* 07 / CAPABILITIES — technical/blueprint scan. */
.capabilities{isolation:isolate;overflow:hidden}
.capabilities::before{background:linear-gradient(90deg,transparent 0,rgba(178,139,49,.07) 49.6%,rgba(178,139,49,.18) 50%,rgba(178,139,49,.07) 50.4%,transparent 100%);transform:translateX(-100%);transition:none}
.capabilities.v20-in::before{animation:v20Scan 3.8s var(--v20-ease) .2s both}
@keyframes v20Scan{0%{transform:translateX(-110%);opacity:0}22%{opacity:1}100%{transform:translateX(110%);opacity:0}}
.capability-grid>div{position:relative;overflow:hidden;transition:transform .42s var(--v20-ease),background .35s ease,color .35s ease}
.capability-grid>div::before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:var(--v20-gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--v20-ease)}
.capability-grid>div:hover{transform:translateX(7px);background:rgba(255,255,255,.42)}
.capability-grid>div:hover::before{transform:scaleX(1)}
.capability-grid>div span{transition:transform .45s var(--v20-ease),color .35s ease}.capability-grid>div:hover span{transform:rotate(-8deg) scale(1.08);color:#9d7821}

/* 08 / WORK — gallery cards gain a restrained photographic parallax. */
.work-archive{isolation:isolate}
.work-archive::before{background:radial-gradient(circle 38vw at var(--mx) var(--my),rgba(215,187,107,.065),transparent 72%)}
.archive-card{--ax:50%;--ay:50%}
.archive-card>img{transform:scale(1.025);transform-origin:var(--ax) var(--ay);transition:transform .7s var(--v20-ease),filter .45s ease!important}
.archive-card:hover>img{transform:scale(1.065)}
.archive-card::after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:radial-gradient(circle 300px at var(--ax) var(--ay),rgba(255,227,157,.11),transparent 70%);opacity:0;transition:opacity .4s ease}
.archive-card:hover::after{opacity:1}
.archive-card__bottom,.archive-card__top{z-index:3}
.archive-card__bottom h3{transition:letter-spacing .5s var(--v20-ease),transform .5s var(--v20-ease)}
.archive-card:hover .archive-card__bottom h3{letter-spacing:-.018em;transform:translateX(5px)}

/* 09 / GALLERY — zoom follows the pointer instead of scaling from center. */
.gallery{isolation:isolate}
.gallery::before{background:radial-gradient(circle 36vw at var(--mx) var(--my),rgba(190,150,55,.08),transparent 70%)}
.gallery-item{--gx:50%;--gy:50%;transition:transform .55s var(--v20-ease),box-shadow .55s ease!important}
.gallery-item img{transform-origin:var(--gx) var(--gy);transition:transform .72s var(--v20-ease),filter .45s ease!important}
.gallery-item:hover{transform:translateY(-7px);box-shadow:0 34px 85px rgba(39,29,9,.14)}
.gallery-item:hover img{transform:scale(1.085);filter:saturate(1.02) contrast(1.02)}
.gallery-item figcaption{transition:transform .45s var(--v20-ease),letter-spacing .45s ease}.gallery-item:hover figcaption{transform:translateX(5px);letter-spacing:.14em}

/* 10 / SHOWREELS — cinema aperture hover. */
.showreels-v13{isolation:isolate}
.showreels-v13::before{background:radial-gradient(circle 42vw at var(--mx) var(--my),rgba(216,187,107,.08),transparent 72%)}
.showreel-card-v13{--sx:50%;--sy:50%;transition:transform .58s var(--v20-ease),border-color .35s ease!important}
.showreel-card-v13::after{content:"";position:absolute;z-index:-1;width:10px;height:10px;left:var(--sx);top:var(--sy);transform:translate(-50%,-50%) scale(0);border-radius:50%;box-shadow:0 0 0 1px rgba(234,208,139,.2);background:rgba(216,187,107,.10);transition:transform .72s var(--v20-ease),opacity .35s ease;opacity:0;pointer-events:none}
.showreel-card-v13:hover{transform:translateY(-7px);border-color:rgba(216,187,107,.28)}
.showreel-card-v13:hover::after{transform:translate(-50%,-50%) scale(75);opacity:.8}
.showreel-card-v13__play{transition:transform .48s var(--v20-ease),background .35s ease,border-color .35s ease!important}.showreel-card-v13:hover .showreel-card-v13__play{transform:rotate(7deg) scale(1.06)}

/* 11 / MARKETS — directional panoramic drift. */
.markets{isolation:isolate}
.markets::before{background:radial-gradient(circle 40vw at var(--mx) var(--my),rgba(205,171,91,.09),transparent 72%)}
.market-card{--kx:50%;--ky:50%;transition:transform .58s var(--v20-ease),filter .45s ease!important}
.market-card::after{content:"";position:absolute;inset:0;background:radial-gradient(circle 190px at var(--kx) var(--ky),rgba(255,225,150,.16),transparent 72%);opacity:0;transition:opacity .35s ease;pointer-events:none}
.market-card:hover::after{opacity:1}.market-card:hover{transform:translateY(-9px)!important}
.market-card:nth-child(1):hover img{transform:scale(1.06) translateX(1.2%)}.market-card:nth-child(2):hover img{transform:scale(1.06) translateY(-1.2%)}.market-card:nth-child(3):hover img{transform:scale(1.06) translateX(-1.2%)}

/* 12 / CLIENTS — logo proximity wave. */
.clients{isolation:isolate}
.clients::before{background:radial-gradient(circle 32vw at var(--mx) var(--my),rgba(184,142,40,.075),transparent 72%)}
.logo-card{--prox:0;transition:transform .45s var(--v20-ease),opacity .3s ease!important;transform:translateY(calc(var(--prox) * -7px)) scale(calc(1 + var(--prox) * .025))}
.logo-grid.is-proximity .logo-card{opacity:.48}.logo-grid.is-proximity .logo-card.is-near{opacity:1}
.logo-card.is-near img{filter:grayscale(0) saturate(1)!important;opacity:1!important}

/* 13 / WHY — rows open like a score / cue sheet. */
.why{isolation:isolate}
.why::before{background:radial-gradient(circle 36vw at var(--mx) var(--my),rgba(180,137,34,.075),transparent 72%)}
.why-list article{position:relative;overflow:hidden;transition:padding .5s var(--v20-ease),background .4s ease!important}
.why-list article::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--v20-gold);transform:scaleY(0);transform-origin:top;transition:transform .55s var(--v20-ease)}
.why-list article:hover{padding-left:24px!important;padding-right:18px!important;background:rgba(255,255,255,.48)!important}
.why-list article:hover::before{transform:scaleY(1)}
.why-list article h3{transition:transform .48s var(--v20-ease),letter-spacing .48s ease}.why-list article:hover h3{transform:translateX(4px);letter-spacing:-.012em}

/* 14 / CLOSING — keep the Three.js glass, make the interface arrive as a final scene. */
.closing-v17__bar,.closing-v17__eyebrow,.closing-v17__content h2,.closing-v17__mail,.footer-v17{will-change:transform,opacity,filter}
.closing-v17:not(.v20-in) .closing-v17__bar{opacity:0;transform:translateY(-15px)}
.closing-v17:not(.v20-in) .closing-v17__eyebrow{opacity:0;transform:translateY(14px)}
.closing-v17:not(.v20-in) .closing-v17__content h2{opacity:0;transform:translateY(34px);filter:blur(8px)}
.closing-v17:not(.v20-in) .closing-v17__mail{opacity:0;transform:translateY(18px)}
.closing-v17:not(.v20-in) .footer-v17{opacity:0;transform:translateY(16px)}
.closing-v17.v20-in .closing-v17__bar{transition:opacity .65s ease,transform .85s var(--v20-ease);opacity:1;transform:none}
.closing-v17.v20-in .closing-v17__eyebrow{transition:opacity .6s ease .08s,transform .8s var(--v20-ease) .08s;opacity:1;transform:none}
.closing-v17.v20-in .closing-v17__content h2{transition:opacity .78s ease .16s,transform 1.05s var(--v20-ease) .16s,filter .9s ease .16s;opacity:1;transform:none;filter:none}
.closing-v17.v20-in .closing-v17__mail{transition:opacity .65s ease .28s,transform .85s var(--v20-ease) .28s;opacity:1;transform:none}
.closing-v17.v20-in .footer-v17{transition:opacity .65s ease .38s,transform .85s var(--v20-ease) .38s;opacity:1;transform:none}

/* Pointer spotlight variables live only on desktop. */
@media(hover:hover) and (pointer:fine){
  .v20-vibe{cursor:default}
}

@media(max-width:900px){
  .hero-v11__title{padding-right:0;width:100%}
  .hero-v11__line:nth-child(2) b,.hero-v11__line:nth-child(2) i{font-size:17vw!important}
  .hero-title-lens,.hero-v11__title::after{display:none!important}
  .manifesto__cards:has(.manifest-card:hover) .manifest-card:not(:hover){opacity:1;filter:none}
  .journey-list li:not(.is-waypoint-active){opacity:1}
  .showreel-card-v13:hover::after{display:none}
}

@media(prefers-reduced-motion:reduce){
  .hero-title-lens,.hero-v11__title::after{display:none!important}
  .v20-vibe::before,.capabilities.v20-in::before{animation:none!important;opacity:0!important}
  .manifest-card,.process-panel,.archive-card,.gallery-item,.showreel-card-v13,.market-card,.logo-card,.why-list article{transform:none!important;transition:none!important}
  .closing-v17__bar,.closing-v17__eyebrow,.closing-v17__content h2,.closing-v17__mail,.footer-v17{opacity:1!important;transform:none!important;filter:none!important}
}

/* ========================================================================== 
   JOY'S BOX V21 — POLISH / REPLAY PASS
   - remove the hero cursor ring, keep only the liquid type deformation
   - editorial metrics system
   - no-flash process reveal
   - smoother guest-journey light
   - sections can reset/replay while testing
   ========================================================================== */

/* HERO — no visible cursor circle; the liquid text lens stays. */
.hero-v11__title::after{display:none!important}

/* Give the final word a little extra optical breathing room on wide screens. */
.hero-v11__line:nth-child(2){padding-right:clamp(.14em,1.2vw,.28em)!important}
.hero-v11__line:nth-child(2) i{padding-right:.04em}

/* GLOBAL — section atmosphere should bloom, never pop. */
.v20-vibe::before{
  opacity:0;
  transform:scale(.985);
  filter:blur(18px);
  transition:opacity 1.15s cubic-bezier(.2,.72,.2,1),transform 1.4s var(--v20-ease),filter 1.25s ease!important;
}
.v20-vibe.v20-in::before{opacity:.82;transform:scale(1);filter:blur(0)}

/* INTRO METRICS — one visual system, four equally weighted beats. */
.intro .stat-strip{
  position:relative;
  z-index:2;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  margin-top:clamp(72px,7vw,112px);
  border-top:1px solid rgba(30,28,23,.2);
  border-bottom:1px solid rgba(30,28,23,.11);
}
.intro .stat{
  position:relative;
  min-height:clamp(190px,18vw,258px);
  padding:clamp(20px,2vw,30px) clamp(22px,2.8vw,42px) clamp(24px,2.5vw,38px) 0;
  display:grid;
  grid-template-rows:auto 1fr auto;
  align-items:start;
  overflow:visible;
  border-right:1px solid rgba(30,28,23,.14);
}
.intro .stat:last-child{border-right:0;padding-right:0;padding-left:clamp(22px,2vw,34px)}
.intro .stat:not(:first-child){padding-left:clamp(22px,2vw,34px)}
.intro .stat__index{
  display:block;
  margin:0 0 clamp(28px,3vw,48px);
  color:#9a7a2a;
  font:700 8px/1 var(--sans);
  letter-spacing:.2em;
}
.intro .stat strong{
  align-self:end;
  display:block;
  margin:0;
  font:600 clamp(68px,7.5vw,122px)/.72 var(--cond);
  letter-spacing:-.055em;
  font-variant-numeric:tabular-nums lining-nums;
  white-space:nowrap;
  transform-origin:left bottom;
  transition:transform .62s var(--v20-ease),color .45s ease!important;
}
.intro .stat span{
  display:block;
  min-height:2.15em;
  margin-top:clamp(24px,2.4vw,36px);
  color:#5f5b52;
  font:700 clamp(9px,.72vw,11px)/1.35 var(--sans);
  letter-spacing:.17em;
  text-transform:uppercase;
}
.intro .stat::before{
  left:0!important;
  right:auto!important;
  bottom:-1px!important;
  width:100%!important;
  height:2px!important;
  background:linear-gradient(90deg,#b9943f 0 26%,rgba(185,148,63,.16) 58%,transparent 100%)!important;
  opacity:.85;
}
.intro .stat:hover strong{transform:translateY(-5px) scale(1.025)!important;color:#9a7520!important}

/* PROCESS — replace the quick ambient flash with a slow, warm lift. */
.process-triptych::before{
  inset:8% -10% 2%!important;
  background:
    radial-gradient(ellipse 46% 36% at 50% 26%,rgba(178,137,39,.085),transparent 74%),
    linear-gradient(180deg,rgba(255,247,224,.12),transparent 28%)!important;
  opacity:0!important;
  filter:blur(34px)!important;
  transform:translateY(22px) scale(.96)!important;
  transition:opacity 1.65s ease,filter 1.8s ease,transform 1.85s var(--v20-ease)!important;
}
.process-triptych.v20-in::before{
  opacity:.72!important;
  filter:blur(12px)!important;
  transform:translateY(0) scale(1)!important;
}
.process-triptych__intro .section-kicker,
.process-triptych__intro h2,
.process-triptych__intro>p{will-change:transform,opacity,filter}
.process-triptych__intro h2 i{display:inline-block;will-change:transform,opacity,filter}

/* Make card illumination follow the pointer like a dimmer, not a switch. */
.process-panel::after{
  background:radial-gradient(circle 300px at var(--px) var(--py),rgba(255,226,153,.12),rgba(210,167,65,.035) 44%,transparent 72%)!important;
  filter:blur(7px);
  opacity:0;
  transform:scale(.9);
  transition:opacity .78s ease,transform .95s var(--v20-ease),filter .95s ease!important;
}
.process-panel:hover::after{opacity:.82!important;transform:scale(1);filter:blur(2px)}

/* JOURNEY — continuous ambient glow + softer active-waypoint transitions. */
.journey{
  --journey-y:20%;
  --journey-glow:0;
}
.journey::before{
  inset:-4% -6%!important;
  background:
    radial-gradient(ellipse 36vw 30vw at 72% var(--journey-y),rgba(213,181,103,.115),rgba(117,91,145,.045) 43%,transparent 73%)!important;
  opacity:0!important;
  filter:blur(30px)!important;
  transform:scale(.985);
  transition:opacity 1.45s ease,filter 1.55s ease,transform 1.6s var(--v20-ease)!important;
}
.journey.v20-in::before{opacity:.9!important;filter:blur(10px)!important;transform:scale(1)}
.journey-list li{
  transition:padding .72s var(--v20-ease),opacity .72s ease,background .82s ease,color .65s ease!important;
}
.journey-list li::after{transition:transform .82s var(--v20-ease),opacity .7s ease!important;opacity:.74}
.journey-list li.is-waypoint-active{background:linear-gradient(90deg,rgba(215,187,107,.06),rgba(215,187,107,.018) 44%,transparent 76%)!important}
.journey-dot{transition:opacity .72s ease,filter .85s ease,transform .85s var(--v20-ease)!important}
.journey-dot.is-waypoint-active{filter:drop-shadow(0 0 17px rgba(216,187,107,.48))!important;transform:scale(1.045)}

/* Replay test mode: when a scene leaves the viewport it returns to a calm base. */
.v20-vibe:not(.v20-in) .process-triptych__rail i{transform:scaleX(0)}

@media(max-width:900px){
  .intro .stat-strip{grid-template-columns:1fr 1fr}
  .intro .stat{min-height:168px;padding:20px 18px 24px!important;border-bottom:1px solid rgba(30,28,23,.12)}
  .intro .stat:nth-child(2){border-right:0}
  .intro .stat__index{margin-bottom:24px}
  .intro .stat strong{font-size:clamp(60px,17vw,92px)}
  .intro .stat span{margin-top:20px}
}

@media(prefers-reduced-motion:reduce){
  .v20-vibe::before,.process-triptych::before,.journey::before{filter:none!important;transform:none!important;transition:none!important}
}