@import url('styles.base.css');

:root{
  --ooh-page:#181818;
  --ooh-plate:#000;
  --ooh-control:#f5f5f7;
  --ooh-control-muted:#77777b;
  --ooh-motion:900ms cubic-bezier(.22,.61,.36,1);
}

.hero .page-no{display:none}
.nav__brand{font-size:0;width:112px;height:34px;background:url('assets/ppt/31/31-01.png') center/120px auto no-repeat;overflow:hidden}
.future-rail{align-items:flex-start}
.future-rail figure{flex:0 0 min(42vw,780px);height:auto}
.future-rail video{width:100%;height:68vh;min-height:560px;object-fit:cover;background:var(--ink)}
.future-rail figcaption{padding-top:13px;color:var(--muted);font-size:11px;letter-spacing:.15em}

#p07.ooh{background:var(--ooh-page);overflow:hidden;padding-bottom:clamp(34px,5vh,70px)}
#p07 .page-no,#p07 .kicker,#p07 .section-copy{color:#aaa}
#p07 .section-title{color:#fff}
.ooh-carousel{margin-top:clamp(28px,4vh,54px);opacity:.72;transform:translateY(26px);transition:opacity .65s ease,transform .8s cubic-bezier(.22,.61,.36,1)}
#p07.is-carousel-visible .ooh-carousel{opacity:1;transform:none}
.ooh-carousel__viewport{overflow:hidden;margin-right:calc(var(--pad)*-1);padding-right:clamp(22px,5vw,90px)}
.ooh-carousel__track{display:flex;transition:transform var(--ooh-motion);will-change:transform}
.ooh-carousel__track.no-transition{transition:none}
.ooh-card{flex:0 0 100%;min-width:0;height:clamp(520px,66vh,760px);padding-right:clamp(16px,2vw,34px)}
.ooh-card__media,.ooh-card figcaption{background:var(--ooh-plate)}
.ooh-card__media{height:calc(100% - 116px);overflow:hidden;border-radius:30px 30px 0 0}
.ooh-card__media img{width:100%;height:100%;object-fit:cover;object-position:center}
.ooh-card figcaption{height:116px;margin:0;padding:24px 34px 26px;border-radius:0 0 30px 30px;color:#fff;display:flex;justify-content:space-between;align-items:end}
.ooh-card figcaption span{font-size:clamp(22px,2vw,34px);font-weight:500;letter-spacing:.01em}
.ooh-card figcaption strong{font-size:12px;font-weight:500;letter-spacing:.17em;color:#aaa}
.ooh-carousel__controls{height:44px;margin-top:22px;display:flex;align-items:center;justify-content:center;gap:11px;opacity:0;transform:translateY(10px);transition:opacity .45s ease .25s,transform .45s ease .25s}
#p07.is-carousel-visible .ooh-carousel__controls{opacity:1;transform:none}
.ooh-carousel__controls button{appearance:none;border:0;padding:0;width:12px;height:12px;border-radius:999px;background:var(--ooh-control-muted);cursor:pointer;transition:width .42s cubic-bezier(.22,.61,.36,1),height .42s ease,background-color .3s ease;display:grid;place-items:center}
.ooh-carousel__controls button:hover{background:#a4a4a8}
.ooh-carousel__controls button:focus-visible{outline:2px solid #fff;outline-offset:5px}
.ooh-carousel__controls button.is-active{width:98px;height:28px;background:var(--ooh-control)}
.ooh-carousel__controls button>span{display:none;width:74px;align-items:center;justify-content:space-between}
.ooh-carousel__controls button.is-active>span{display:flex}
.ooh-carousel__controls i{display:block;width:3px;height:3px;border-radius:50%;background:#c7c7cb;transition:background-color .18s ease,transform .18s ease}
.ooh-carousel__controls i.is-filled{background:#1d1d1f;transform:scale(1.28)}

@media(max-width:1100px){
  .future-rail figure{flex-basis:58vw}
  .future-rail video{min-height:480px}
  .ooh-card{height:clamp(470px,62vh,650px)}
}
@media(prefers-reduced-motion:reduce){
  .future-rail video{display:block}
  .ooh-carousel,.ooh-carousel__controls{opacity:1;transform:none;transition:none}
  .ooh-carousel__track{transition:none}
}