/* JOY'S BOX V27 — cinematic at-a-glance stage */
:root{
  --v27-ink:#17140f;
  --v27-muted:#6d665e;
  --v27-line:rgba(23,20,15,.14);
  --v27-gold:#a9852b;
  --v27-ease:cubic-bezier(.16,1,.3,1);
}

.intro-v27{position:relative;padding:clamp(100px,9vw,150px) var(--pad) clamp(110px,10vw,170px);overflow:hidden;background:#f1ede4;color:var(--v27-ink);isolation:isolate}
.intro-v27>.section-kicker{position:relative;z-index:2}
.intro-v27__head{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.58fr);gap:clamp(48px,7vw,120px);align-items:end;margin-top:clamp(28px,3vw,44px)}
.intro-v27__head h2{margin:0;max-width:980px;font:500 clamp(58px,6.8vw,112px)/.84 var(--cond);letter-spacing:-.045em;text-transform:uppercase;color:var(--v27-ink)}
.intro-v27__copy{max-width:470px;padding-bottom:8px}
.intro-v27__copy p{margin:0 0 14px;color:var(--v27-muted);font:500 13px/1.72 var(--sans)}
.intro-v27__copy .text-link{margin-top:15px}

.intro-v27__stage{--mx:50%;--my:50%;position:relative;min-height:clamp(690px,72vw,930px);margin-top:clamp(68px,7vw,110px);border-top:1px solid var(--v27-line);border-bottom:1px solid var(--v27-line);isolation:isolate}
.intro-v27__stage::before,.intro-v27__stage::after{content:"";position:absolute;z-index:0;pointer-events:none;background:var(--v27-line)}
.intro-v27__stage::before{top:0;bottom:0;left:50%;width:1px;transform:translateX(-.5px);opacity:.55}
.intro-v27__stage::after{left:0;right:0;top:50%;height:1px;transform:translateY(-.5px);opacity:.55}
.intro-v27__wash{position:absolute;z-index:0;inset:0;pointer-events:none;background:radial-gradient(circle 28vw at var(--mx) var(--my),rgba(181,142,48,.09),transparent 72%);transition:opacity .35s ease}
.intro-v27__frame{position:absolute;z-index:1;left:50%;top:50%;width:min(46vw,650px);height:min(72vw,790px);margin:0;transform:translate(-50%,-50%);overflow:visible}
.intro-v27__media{position:absolute;inset:0;overflow:hidden;border-radius:2px;background:#1a1712;box-shadow:0 36px 70px rgba(35,27,15,.17);transform:translateZ(0);transition:transform .8s var(--v27-ease),box-shadow .5s ease}
.intro-v27__media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transform:scale(1.035);transition:transform 1s var(--v27-ease),filter .6s ease;will-change:transform}
.intro-v27__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02) 30%,rgba(0,0,0,.46) 100%),radial-gradient(circle at 50% 46%,transparent 45%,rgba(0,0,0,.18) 100%);pointer-events:none}
.intro-v27__media figcaption{position:absolute;left:22px;right:22px;bottom:20px;display:flex;justify-content:space-between;gap:18px;align-items:end;padding-top:14px;border-top:1px solid rgba(255,255,255,.3);color:#fff}
.intro-v27__media figcaption span{font:700 7px/1 var(--sans);letter-spacing:.17em;color:#ddc780}
.intro-v27__media figcaption b{font:600 9px/1 var(--sans);letter-spacing:.14em}

.intro-v27__metric{position:absolute;z-index:3;width:min(28vw,370px);display:flex;flex-direction:column;gap:8px;cursor:default;transition:transform .5s var(--v27-ease)}
.intro-v27__metric::before{content:"";display:block;width:100%;height:1px;margin-bottom:11px;background:linear-gradient(90deg,rgba(23,20,15,.36),rgba(23,20,15,.08));transform-origin:left center;transition:transform .55s var(--v27-ease),background .35s ease}
.intro-v27__metric strong{font:600 clamp(76px,8.5vw,144px)/.72 var(--cond);letter-spacing:-.055em;color:var(--v27-ink);font-variant-numeric:tabular-nums lining-nums;transition:color .35s ease,transform .5s var(--v27-ease)}
.intro-v27__metric span{font:700 clamp(8px,.65vw,9px)/1.1 var(--sans);letter-spacing:.2em;color:#6b6258;transition:color .35s ease,transform .5s var(--v27-ease)}
.intro-v27__metric--tl{left:0;top:11%;align-items:flex-start;text-align:left}
.intro-v27__metric--tr{right:0;top:11%;align-items:flex-end;text-align:right}
.intro-v27__metric--bl{left:0;bottom:10%;align-items:flex-start;text-align:left}
.intro-v27__metric--br{right:0;bottom:10%;align-items:flex-end;text-align:right}
.intro-v27__metric--tr::before,.intro-v27__metric--br::before{background:linear-gradient(270deg,rgba(23,20,15,.36),rgba(23,20,15,.08));transform-origin:right center}
.intro-v27__metric:hover{transform:translateY(-5px)}
.intro-v27__metric:hover::before{transform:scaleX(.72);background:linear-gradient(90deg,var(--v27-gold),rgba(169,133,43,.12))}
.intro-v27__metric--tr:hover::before,.intro-v27__metric--br:hover::before{background:linear-gradient(270deg,var(--v27-gold),rgba(169,133,43,.12))}
.intro-v27__metric:hover strong{color:#8b681b;transform:translateY(-2px)}
.intro-v27__metric:hover span{color:#4d463e;transform:translateY(-1px)}
.intro-v27__stage.is-hovering .intro-v27__media{box-shadow:0 42px 82px rgba(35,27,15,.21)}
.intro-v27__stage.is-hovering .intro-v27__media img{transform:scale(1.055)}

@media (max-width:1100px){
  .intro-v27__head{grid-template-columns:1fr;gap:28px}
  .intro-v27__copy{max-width:650px}
  .intro-v27__stage{min-height:760px}
  .intro-v27__frame{width:min(56vw,600px);height:690px}
  .intro-v27__metric{width:25vw}
  .intro-v27__metric strong{font-size:9.2vw}
}
@media (max-width:760px){
  .intro-v27{padding:90px 18px 100px}
  .intro-v27__head h2{font-size:15vw;line-height:.82}
  .intro-v27__stage{min-height:auto;margin-top:50px;padding-top:0;border-top:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .intro-v27__stage::before,.intro-v27__stage::after,.intro-v27__wash{display:none}
  .intro-v27__frame{position:relative;left:auto;top:auto;grid-column:1/-1;width:100%;height:auto;aspect-ratio:4/5;margin:0 0 6px;transform:none}
  .intro-v27__metric{position:relative;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:auto;min-height:126px;padding:14px 0 16px;justify-content:flex-end;align-items:flex-start!important;text-align:left!important}
  .intro-v27__metric strong{font-size:52px}
  .intro-v27__metric span{font-size:7px;letter-spacing:.15em}
  .intro-v27__metric::before,.intro-v27__metric--tr::before,.intro-v27__metric--br::before{background:rgba(23,20,15,.2);transform-origin:left center}
}
@media (prefers-reduced-motion:reduce){
  .intro-v27__media,.intro-v27__media img,.intro-v27__metric,.intro-v27__metric strong,.intro-v27__metric span,.intro-v27__metric::before{transition:none!important}
}