/* ========================================================================== 
   JOY'S BOX V22 — CONTRAST / FLOW / EDITORIAL REBUILD
   ========================================================================== */
:root{
  --v22-ink:#0b0b0a;
  --v22-paper:#f3efe5;
  --v22-gold:#b9953f;
  --v22-gold-soft:#d6b96e;
  --v22-line:rgba(22,20,16,.16);
  --v22-ease:cubic-bezier(.16,1,.3,1);
}

/* --------------------------------------------------------------------------
   HEADLINES — never let the reveal state turn cream-section titles grey.
   Motion is handled with position/masks, not low opacity.
   -------------------------------------------------------------------------- */
.cream .headline,
.story .headline,
.intro-v22 .headline,
.gallery-v22 .headline,
.clients .headline,
.why .headline{
  color:var(--v22-ink)!important;
  opacity:1!important;
}
.section-dark .headline,
.headline.light{color:#f8f4e9!important;opacity:1!important}
.headline{will-change:transform}

/* --------------------------------------------------------------------------
   AT A GLANCE — editorial lead + one cinematic stage.
   -------------------------------------------------------------------------- */
.intro-v22{
  padding:clamp(92px,8vw,138px) var(--pad) clamp(88px,8vw,130px)!important;
  overflow:hidden;
  background:var(--v22-paper);
  isolation:isolate;
}
.intro-v22::before{
  opacity:.44!important;
  filter:none!important;
  transform:none!important;
  background:radial-gradient(circle 38vw at 82% 18%,rgba(185,149,63,.065),transparent 70%)!important;
}
.intro-v22__head{position:relative;z-index:2}
.intro-v22__headline-row{
  display:grid;
  grid-template-columns:minmax(0,1.48fr) minmax(300px,.52fr);
  gap:clamp(42px,6vw,105px);
  align-items:end;
}
.intro-v22__headline{
  font-size:clamp(64px,8.1vw,132px)!important;
  line-height:.82!important;
  letter-spacing:-.048em!important;
  max-width:1180px;
  overflow:visible;
}
.intro-v22__line{display:block;overflow:hidden;padding:.03em .05em .08em 0}
.intro-v22__line b,.intro-v22__line i{display:inline-block}
.intro-v22__line b{font-weight:600}
.intro-v22__line i{
  font:400 1.02em/.84 var(--cond);
  font-style:normal;
  color:var(--v22-gold);
  letter-spacing:-.05em;
}
.intro-v22__side{
  padding-bottom:.35em;
  max-width:430px;
  justify-self:end;
}
.intro-v22__side p{
  margin:0 0 16px;
  color:#4f4b44;
  font:500 clamp(13px,1vw,15px)/1.72 var(--sans);
}
.intro-v22__side .text-link{margin-top:14px}

.intro-v22__stage{
  position:relative;
  z-index:2;
  margin-top:clamp(56px,6.6vw,104px);
  height:clamp(580px,70vw,850px);
  min-height:68vh;
  border-radius:clamp(18px,1.8vw,28px);
  overflow:hidden;
  background:#181714;
  box-shadow:0 38px 100px rgba(36,28,11,.13);
  transform:translateZ(0);
}
.intro-v22__media{position:absolute;inset:0;overflow:hidden}
.intro-v22__media img{
  width:100%;height:100%;object-fit:cover;object-position:center 47%;
  transform:scale(1.015);
  transition:transform 1.4s var(--v22-ease);
}
.intro-v22__stage:hover .intro-v22__media img{transform:scale(1.032)}
.intro-v22__media-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(5,5,4,.07) 0%,rgba(5,5,4,.12) 42%,rgba(5,5,4,.72) 100%),
    linear-gradient(90deg,rgba(5,5,4,.28),transparent 42%);
  pointer-events:none;
}
.intro-v22__caption{
  position:absolute;left:clamp(20px,2.4vw,36px);right:clamp(20px,2.4vw,36px);top:clamp(20px,2.4vw,34px);
  display:flex;justify-content:space-between;gap:20px;
  color:rgba(255,255,255,.82);
  font:700 8px/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;
}
.intro-v22__metrics{
  position:absolute;z-index:3;left:0;right:0;bottom:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg,rgba(9,9,7,.02),rgba(9,9,7,.43));
  backdrop-filter:blur(9px);
}
.intro-v22__metric{
  min-height:clamp(145px,13vw,198px);
  padding:clamp(18px,1.8vw,28px) clamp(18px,2vw,32px) clamp(20px,2vw,30px);
  border-right:1px solid rgba(255,255,255,.15);
  color:#fff;
  display:grid;grid-template-rows:auto 1fr auto;
  align-items:start;
  position:relative;
  overflow:hidden;
}
.intro-v22__metric:last-child{border-right:0}
.intro-v22__metric::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--v22-gold-soft),transparent 72%);
  transform:scaleX(0);transform-origin:left;
  transition:transform .65s var(--v22-ease);
}
.intro-v22__metric:hover::after{transform:scaleX(1)}
.intro-v22__metric small{
  color:var(--v22-gold-soft);
  font:700 8px/1 var(--sans);letter-spacing:.18em;
}
.intro-v22__metric strong{
  align-self:end;
  font:600 clamp(58px,6.2vw,104px)/.72 var(--cond);
  letter-spacing:-.052em;
  font-variant-numeric:tabular-nums lining-nums;
  transition:transform .55s var(--v22-ease),color .35s ease;
}
.intro-v22__metric span{
  margin-top:clamp(18px,1.8vw,28px);
  color:rgba(255,255,255,.74);
  font:700 clamp(8px,.72vw,10px)/1.25 var(--sans);letter-spacing:.16em;
}
.intro-v22__metric:hover strong{transform:translateY(-4px);color:#f6e3ae}

/* --------------------------------------------------------------------------
   DETAILS — horizontal editorial film-strip instead of a generic image mosaic.
   -------------------------------------------------------------------------- */
.gallery-v22{
  padding:clamp(100px,8vw,142px) 0 0!important;
  overflow:hidden;
  background:var(--v22-paper);
}
.gallery-v22::before{
  opacity:.5!important;filter:none!important;transform:none!important;
  background:radial-gradient(circle 36vw at 18% 18%,rgba(185,149,63,.055),transparent 72%)!important;
}
.gallery-v22__head{
  position:relative;z-index:3;
  padding:0 var(--pad) clamp(56px,6vw,92px);
}
.gallery-v22__head-grid{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.46fr);
  gap:clamp(46px,7vw,120px);align-items:end;
}
.gallery-v22__head .headline{
  font-size:clamp(72px,9.8vw,156px)!important;
  line-height:.76!important;
  letter-spacing:-.055em!important;
}
.gallery-v22__head .headline i{font-style:normal;color:var(--v22-gold)}
.gallery-v22__head p{
  max-width:420px;margin:0 0 6px;justify-self:end;
  color:#555047;font:500 clamp(13px,1vw,15px)/1.72 var(--sans);
}
.gallery-v22__pin{
  position:relative;
  height:100vh;
  min-height:680px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-top:1px solid var(--v22-line);
  border-bottom:1px solid var(--v22-line);
}
.gallery-v22__track{
  display:flex;
  align-items:center;
  gap:clamp(14px,1.3vw,22px);
  width:max-content;
  padding:clamp(34px,4.2vw,68px) var(--pad) clamp(76px,7vw,110px);
  will-change:transform;
}
.gallery-v22 .detail-card-v22{
  position:relative;
  flex:0 0 clamp(460px,58vw,980px);
  height:min(68vh,720px);
  margin:0;
  overflow:hidden;
  border-radius:clamp(16px,1.5vw,24px);
  background:#141310;
  box-shadow:0 26px 78px rgba(36,27,8,.11);
  cursor:zoom-in;
  transform:none!important;
}
.gallery-v22 .detail-card-v22:nth-child(2n){flex-basis:clamp(400px,48vw,820px);height:min(61vh,650px)}
.gallery-v22 .detail-card-v22 img{
  position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;
  transform:scale(1)!important;
  filter:saturate(.9) contrast(1.02)!important;
  transition:transform .9s var(--v22-ease),filter .55s ease!important;
}
.gallery-v22 .detail-card-v22::before{
  content:"";position:absolute;z-index:2;inset:0;
  background:linear-gradient(180deg,transparent 46%,rgba(5,5,4,.78) 100%);
  pointer-events:none;
}
.gallery-v22 .detail-card-v22::after{
  content:"VIEW";position:absolute;z-index:4;right:22px;top:22px;
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:rgba(10,10,8,.48);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(8px);
  color:#fff;font:700 8px/1 var(--sans);letter-spacing:.13em;
  opacity:0;transform:scale(.82);transition:opacity .3s ease,transform .5s var(--v22-ease);
}
.gallery-v22 .detail-card-v22:hover::after{opacity:1;transform:scale(1)}
.gallery-v22 .detail-card-v22:hover img{transform:scale(1.045)!important;filter:saturate(1) contrast(1.025)!important}
.gallery-v22 .detail-card-v22 figcaption{
  position:absolute;z-index:3;left:clamp(20px,2.2vw,34px);right:clamp(20px,2.2vw,34px);bottom:clamp(18px,2vw,30px);
  display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:end;
  color:#fff;
  background:none!important;border-radius:0!important;padding:0!important;
  transform:none!important;
  letter-spacing:normal!important;
}
.gallery-v22 .detail-card-v22 figcaption span{
  color:var(--v22-gold-soft);font:700 9px/1 var(--sans);letter-spacing:.16em;
}
.gallery-v22 .detail-card-v22 figcaption b{
  font:600 clamp(36px,4vw,68px)/.78 var(--cond);letter-spacing:-.03em;
}
.gallery-v22 .detail-card-v22 figcaption small{
  font:700 8px/1.2 var(--sans);letter-spacing:.15em;color:rgba(255,255,255,.68);text-align:right;
}
.gallery-v22__progress{
  position:absolute;z-index:4;left:var(--pad);right:var(--pad);bottom:22px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  color:#5c574e;font:700 8px/1 var(--sans);letter-spacing:.15em;
}
.gallery-v22__progress>i{height:1px;background:rgba(22,20,16,.16);overflow:hidden}
.gallery-v22__progress>i b{display:block;width:100%;height:100%;background:var(--v22-gold);transform:scaleX(.1667);transform-origin:left}
.gallery-v22__progress em{font-style:normal;color:var(--v22-gold);font-size:10px}

/* --------------------------------------------------------------------------
   PERFORMANCE / TRANSITION POLISH
   -------------------------------------------------------------------------- */
.intro-v22__stage,.gallery-v22 .detail-card-v22{backface-visibility:hidden}

/* Avoid oversized real-time blur layers in the first section. */
.intro-v22.v20-vibe::before{transition:opacity .9s ease!important}
.intro-v22 .v20-vibe::before{filter:none!important}

@media(max-width:1050px){
  .intro-v22__headline-row,.gallery-v22__head-grid{grid-template-columns:1fr;gap:30px}
  .intro-v22__side,.gallery-v22__head p{justify-self:start;max-width:620px}
  .intro-v22__stage{height:72svh;min-height:620px}
  .intro-v22__metrics{grid-template-columns:1fr 1fr;background:rgba(9,9,7,.48)}
  .intro-v22__metric{min-height:120px}
  .intro-v22__metric:nth-child(2){border-right:0}
  .intro-v22__metric:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.14)}
  .intro-v22__metric strong{font-size:clamp(52px,9vw,84px)}
}

@media(max-width:900px){
  .intro-v22{padding-left:18px!important;padding-right:18px!important}
  .intro-v22__headline{font-size:clamp(54px,15vw,86px)!important}
  .intro-v22__stage{height:82svh;min-height:660px;border-radius:18px}
  .intro-v22__caption{font-size:7px}
  .intro-v22__caption span:last-child{display:none}
  .intro-v22__metrics{backdrop-filter:blur(5px)}
  .intro-v22__metric{padding:16px;min-height:126px}
  .intro-v22__metric strong{font-size:clamp(48px,15vw,74px)}
  .intro-v22__metric span{font-size:7px;letter-spacing:.12em}

  .gallery-v22{padding-top:92px!important}
  .gallery-v22__head{padding-left:18px;padding-right:18px;padding-bottom:42px}
  .gallery-v22__head .headline{font-size:clamp(66px,18vw,98px)!important}
  .gallery-v22__pin{height:auto;min-height:0;display:block;overflow:visible;border-bottom:0}
  .gallery-v22__track{display:grid;width:auto;padding:18px;gap:14px;transform:none!important}
  .gallery-v22 .detail-card-v22,.gallery-v22 .detail-card-v22:nth-child(2n){
    width:100%;height:64svh;min-height:500px;flex:none;border-radius:18px;
  }
  .gallery-v22 .detail-card-v22 figcaption{grid-template-columns:auto 1fr;gap:12px}
  .gallery-v22 .detail-card-v22 figcaption small{grid-column:2;text-align:left}
  .gallery-v22__progress{display:none}
}

@media(prefers-reduced-motion:reduce){
  .intro-v22__media img,.gallery-v22 .detail-card-v22 img{transition:none!important;transform:none!important}
  .gallery-v22__track{transform:none!important}
}