/* =========================================================
   EVERYTHING TRANSPARENT
========================================================= */



.ogv3,
.ogv3 *{
  box-sizing:border-box;
}

.ogv3{
  position:relative;

  width:100%;
  height:100%;

  min-height:100%;

  overflow:hidden;

  background:transparent !important;

  color:#11110f;
}

.ogv3__stage{
  position:absolute;

  top:0;
  left:0;

  width:100%;

  overflow:hidden;

  background:transparent !important;

  perspective:1800px;

  transform-style:preserve-3d;

  will-change:transform;
}


/* =========================================================
   HUD
========================================================= */

.ogv3__hud{
  position:absolute;

  z-index:100;

  top:28px;

  left:clamp(18px,4vw,65px);
  right:clamp(18px,4vw,65px);

  display:grid;

  grid-template-columns:
    auto 1fr auto;

  align-items:center;

  gap:35px;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:8px;

  font-weight:700;

  letter-spacing:.18em;

  color:rgba(17,17,15,.48);

  pointer-events:none;
}

.ogv3__hud-left{
  display:flex;

  align-items:center;

  gap:10px;
}

.ogv3__hud-left > span{
  width:5px;
  height:5px;

  border-radius:50%;

  background:currentColor;
}

.ogv3__hud-progress{
  height:1px;

  overflow:hidden;

  background:
    rgba(17,17,15,.10);
}

.ogv3__hud-progress i{
  display:block;

  width:100%;
  height:1px;

  background:
    rgba(17,17,15,.55);

  transform:scaleX(0);

  transform-origin:left center;
}


/* =========================================================
   INDEX
========================================================= */

.ogv3__index{
  position:absolute;

  z-index:100;

  left:24px;

  top:50%;

  transform:
    translateY(-50%);

  display:flex;

  flex-direction:column;

  gap:9px;

  pointer-events:none;
}

.ogv3__index > div{
  display:flex;

  align-items:center;

  gap:9px;

  color:
    rgba(17,17,15,.24);
}

.ogv3__index i{
  width:12px;
  height:1px;

  background:currentColor;

  transition:
    width .4s ease,
    color .4s ease;
}

.ogv3__index span{
  opacity:0;

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:700;

  letter-spacing:.14em;

  transition:
    opacity .4s ease;
}

.ogv3__index > div.is-active{
  color:
    rgba(17,17,15,.75);
}

.ogv3__index > div.is-active i{
  width:30px;
}

.ogv3__index > div.is-active span{
  opacity:1;
}


/* =========================================================
   SCENE CORE
========================================================= */

.ogv3__scene{
  position:absolute;

  inset:0;

  z-index:10;

  opacity:0;

  pointer-events:none;

  transform-style:preserve-3d;

  will-change:
    opacity,
    transform;
}

.ogv3__room-top{
  position:absolute;

  left:clamp(74px,8vw,140px);

  top:90px;

  font-family:
    Arial,
    sans-serif;

  font-size:7px;

  font-weight:700;

  letter-spacing:.18em;

  color:
    rgba(17,17,15,.40);
}

.ogv3__ghost{
  position:absolute;

  z-index:-1;

  left:7%;

  bottom:-2%;

  font-family:
    Arial,
    sans-serif;

  font-size:
    clamp(220px,33vw,580px);

  font-weight:800;

  line-height:.7;

  letter-spacing:-.1em;

  color:transparent;

  -webkit-text-stroke:
    1px rgba(17,17,15,.055);

  user-select:none;
}


/* =========================================================
   MEDIA
========================================================= */

.ogv3__media{
  position:absolute;

  margin:0;

  overflow:hidden;

  background:
    rgba(236,233,225,.65);

  border:
    1px solid rgba(17,17,15,.10);

  box-shadow:
    0 30px 85px rgba(17,17,15,.10);

  
}

.ogv3__media img,
.ogv3__media video{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
}

.ogv3__film{
  position:absolute;

  right:8px;
  bottom:8px;

  padding:4px 6px;

  background:
    rgba(255,255,255,.82);

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:700;

  letter-spacing:.14em;
}


/* =========================================================
   CARTEL
========================================================= */

.ogv3__cartel{
  position:absolute;

  z-index:40;

  width:
    clamp(165px,15vw,230px);

  opacity:0;

  font-family:
    Arial,
    sans-serif;
}

.ogv3__cartel > span{
  display:block;

  margin-bottom:12px;

  font-size:7px;

  font-weight:700;

  letter-spacing:.18em;

  color:
    rgba(17,17,15,.42);
}

.ogv3__cartel > i{
  display:block;

  width:100%;
  height:1px;

  margin-bottom:17px;

  background:
    rgba(17,17,15,.24);
}

.ogv3__cartel strong{
  display:block;

  margin-bottom:7px;

  font-size:
    clamp(15px,1.2vw,21px);

  line-height:1;

  letter-spacing:-.04em;
}

.ogv3__cartel small{
  display:block;

  margin-bottom:16px;

  font-size:7px;

  font-weight:700;

  letter-spacing:.15em;

  color:
    rgba(17,17,15,.52);
}

.ogv3__cartel p{
  margin:0;

  font-size:7px;

  line-height:1.75;

  font-weight:600;

  letter-spacing:.13em;

  color:
    rgba(17,17,15,.48);
}

.ogv3__cartel em{
  display:inline-block;

  margin-top:15px;

  padding:6px 8px;

  border:
    1px solid rgba(17,17,15,.18);

  font-size:6px;

  font-style:normal;

  font-weight:700;

  letter-spacing:.14em;
}


/* =========================================================
   ENTRANCE
========================================================= */

.ogv3__entrance{
  display:grid;

  place-items:center;

  opacity:1;

  text-align:center;
}

.ogv3__entrance-line{
  position:absolute;

  top:50%;

  width:50%;
  height:1px;

  background:
    rgba(17,17,15,.12);
}

.line-left{
  left:0;

  transform-origin:left;
}

.line-right{
  right:0;

  transform-origin:right;
}

.ogv3__entrance-copy{
  position:relative;

  z-index:10;
}

.ogv3__eyebrow{
  display:block;

  margin-bottom:35px;

  font-family:
    Arial,
    sans-serif;

  font-size:8px;

  font-weight:700;

  letter-spacing:.20em;

  color:
    rgba(17,17,15,.45);
}

.ogv3__entrance h2{
  margin:0;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    clamp(62px,8.8vw,155px);

  line-height:.83;

  font-weight:700;

  letter-spacing:-.075em;
}

.ogv3__entrance h2 em{
  font-family:
    Baskerville,
    "Iowan Old Style",
    "Times New Roman",
    serif;

  font-weight:400;

  font-style:italic;
}

.ogv3__entrance-meta{
  display:grid;

  grid-template-columns:
    auto 90px auto;

  align-items:center;

  gap:14px;

  margin-top:48px;

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:700;

  letter-spacing:.16em;

  color:
    rgba(17,17,15,.38);
}

.ogv3__entrance-meta i{
  height:1px;

  background:
    rgba(17,17,15,.18);
}

.ogv3__entrance-ghost{
  position:absolute;

  left:3%;
  bottom:-6%;

  font-family:
    Arial,
    sans-serif;

  font-size:42vw;

  font-weight:800;

  line-height:.7;

  color:transparent;

  -webkit-text-stroke:
    1px rgba(17,17,15,.025);
}


/* =========================================================
   HIRANO
========================================================= */

.ogv3__h-video{
  left:50%;
  top:50%;

  width:min(61vw,1010px);

  aspect-ratio:1.76/1;
}

.ogv3__h1{
  left:7%;
  top:18%;

  width:min(25vw,420px);

  aspect-ratio:1.76/1;
}

.ogv3__h2{
  right:7%;
  top:19%;

  width:min(24vw,400px);

  aspect-ratio:1.76/1;
}

.ogv3__h3{
  right:11%;
  bottom:10%;

  width:min(29vw,490px);

  aspect-ratio:1.76/1;
}

.ogv3__cartel-h{
  left:8%;

  bottom:10%;
}


/* =========================================================
   GOISOT
========================================================= */

.ogv3__g-video,
.ogv3__g-cover{
  left:50%;
  top:50%;

  width:min(73vw,1220px);

  aspect-ratio:1.76/1;
}

.ogv3__g-video{
  z-index:5;
}

.ogv3__g-cover{
  z-index:6;
}

.ogv3__g2{
  left:7%;
  bottom:9%;

  width:min(26vw,440px);

  aspect-ratio:1.76/1;
}

.ogv3__g3{
  right:7%;
  top:14%;

  width:min(24vw,405px);

  aspect-ratio:1.76/1;
}

.ogv3__cartel-g{
  right:8%;

  bottom:9%;
}


/* =========================================================
   MICHELIN — CONTAINED BLACK INSTALLATION
========================================================= */

.ogv3__m-panel{
  position:absolute;

  left:4%;
  right:4%;

  top:9%;
  bottom:7%;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 50% 44%,
      #282925 0%,
      #181916 55%,
      #0c0d0b 100%
    );

  border:
    1px solid rgba(17,17,15,.15);

  box-shadow:
    0 30px 90px rgba(17,17,15,.15);

  color:#f3f0e8;
}

.ogv3__m-grid{
  position:absolute;

  inset:0;

  opacity:.8;

  background-image:
    linear-gradient(
      rgba(255,255,255,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.035) 1px,
      transparent 1px
    );

  background-size:
    70px 70px;
}

.ogv3__m-ghost{
  position:absolute;

  left:7%;

  bottom:-7%;

  font-family:
    Arial,
    sans-serif;

  font-size:
    clamp(220px,31vw,540px);

  font-weight:800;

  line-height:.7;

  color:transparent;

  -webkit-text-stroke:
    1px rgba(255,255,255,.055);
}

.ogv3__m-heading{
  position:absolute;

  left:8%;
  top:14%;

  display:flex;

  flex-direction:column;

  font-family:
    Arial,
    sans-serif;

  font-size:
    clamp(68px,9vw,165px);

  line-height:.72;

  font-weight:800;

  letter-spacing:-.08em;

  color:
    rgba(255,255,255,.055);
}

.ogv3__m-video{
  left:50%;
  top:50%;

  width:min(59vw,980px);

  aspect-ratio:1.76/1;
}

.ogv3__m1{
  left:5%;
  top:18%;

  width:min(24vw,400px);

  aspect-ratio:1.76/1;
}

.ogv3__m2{
  right:5%;
  bottom:10%;

  width:min(24vw,400px);

  aspect-ratio:1.76/1;
}

.ogv3__m3{
  right:8%;
  top:13%;

  width:min(19vw,320px);

  aspect-ratio:1.76/1;
}

.ogv3__cartel-m{
  left:8%;

  bottom:8%;

  color:#fff;
}

.ogv3__cartel-m > span,
.ogv3__cartel-m small,
.ogv3__cartel-m p{
  color:
    rgba(255,255,255,.52);
}

.ogv3__cartel-m > i{
  background:
    rgba(255,255,255,.25);
}

.ogv3__cartel-m em{
  border-color:
    rgba(255,255,255,.22);
}


/* =========================================================
   CHEVROT
========================================================= */

.ogv3__c-video{
  left:50%;
  top:43%;

  width:min(64vw,1070px);

  aspect-ratio:1.76/1;
}

.ogv3__vitrine{
  position:absolute;

  left:8%;
  right:8%;

  bottom:8%;

  height:37%;

  border-top:
    1px solid rgba(17,17,15,.16);

  opacity:0;
}

.ogv3__vitrine > span{
  position:absolute;

  top:11px;
  left:0;

  font-family:
    Arial,
    sans-serif;

  font-size:7px;

  font-weight:700;

  letter-spacing:.16em;

  color:
    rgba(17,17,15,.42);
}

.ogv3__c1,
.ogv3__c2,
.ogv3__c3{
  top:44px;

  width:min(24vw,400px);

  aspect-ratio:1.76/1;
}

.ogv3__c1{
  left:2%;
}

.ogv3__c2{
  left:38%;
}

.ogv3__c3{
  right:2%;
}

.ogv3__cartel-c{
  right:8%;

  top:13%;
}


/* =========================================================
   ALIGOTEURS
========================================================= */

.ogv3__a-grid{
  position:absolute;

  inset:0;

  opacity:.32;

  background-image:
    linear-gradient(
      rgba(17,17,15,.04) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(17,17,15,.04) 1px,
      transparent 1px
    );

  background-size:
    48px 48px;
}

.ogv3__wip{
  position:absolute;

  right:7%;
  top:13%;

  padding:13px 11px;

  border:
    1px solid rgba(17,17,15,.20);

  font-family:
    Arial,
    sans-serif;

  font-size:9px;

  line-height:1.3;

  font-weight:700;

  letter-spacing:.16em;

  transform:rotate(5deg);

  opacity:0;
}

.ogv3__a-video{
  left:50%;
  top:49%;

  width:min(56vw,940px);

  aspect-ratio:1.76/1;
}

.ogv3__a1{
  left:6%;
  top:17%;

  width:min(28vw,470px);

  aspect-ratio:1.76/1;
}

.ogv3__a2{
  right:7%;
  top:27%;

  width:min(24vw,410px);

  aspect-ratio:1.76/1;
}

.ogv3__a3{
  right:18%;
  bottom:6%;

  width:min(28vw,470px);

  aspect-ratio:1.76/1;
}

.ogv3__annotation{
  position:absolute;

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:700;

  letter-spacing:.17em;

  color:
    rgba(17,17,15,.44);
}

.ogv3__annotation.a1{
  left:8%;
  bottom:17%;
}

.ogv3__annotation.a2{
  right:8%;
  bottom:22%;
}

.ogv3__cartel-a{
  left:8%;

  bottom:8%;
}


/* =========================================================
   FINAL
========================================================= */

.ogv3__final{
  display:grid;

  grid-template-columns:
    1.05fr .95fr;

  align-items:center;

  gap:6vw;

  padding:
    8% 8% 6%;

  background:transparent;
}

.ogv3__final-top{
  position:absolute;

  left:8%;
  top:11%;

  font-family:
    Arial,
    sans-serif;

  font-size:7px;

  font-weight:700;

  letter-spacing:.18em;

  color:
    rgba(17,17,15,.42);
}

.ogv3__final-wall{
  position:relative;

  width:100%;

  aspect-ratio:1.12/1;
}

.ogv3__wall{
  position:absolute;

  margin:0;

  overflow:hidden;

  border:
    1px solid rgba(17,17,15,.10);

  box-shadow:
    0 20px 55px rgba(17,17,15,.08);

  opacity:0;
}

.ogv3__wall img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
}

.ogv3__wall span{
  position:absolute;

  right:6px;
  bottom:6px;

  padding:4px 5px;

  background:
    rgba(255,255,255,.84);

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:700;
}

.ogv3__wall.w1{
  left:0;
  top:4%;

  width:43%;
}

.ogv3__wall.w2{
  right:4%;
  top:0;

  width:44%;
}

.ogv3__wall.w3{
  left:14%;
  top:44%;

  width:36%;
}

.ogv3__wall.w4{
  right:0;
  top:48%;

  width:40%;
}

.ogv3__wall.w5{
  left:39%;
  bottom:0;

  width:36%;
}

.ogv3__final-copy > span{
  display:block;

  margin-bottom:32px;

  font-family:
    Arial,
    sans-serif;

  font-size:7px;

  font-weight:700;

  letter-spacing:.18em;

  color:
    rgba(17,17,15,.42);
}

.ogv3__final-copy h2{
  margin:0;

  font-family:
    Arial,
    sans-serif;

  font-size:
    clamp(45px,5.3vw,95px);

  line-height:.88;

  font-weight:700;

  letter-spacing:-.07em;
}

.ogv3__final-copy h2 em{
  font-family:
    Baskerville,
    "Times New Roman",
    serif;

  font-weight:400;

  font-style:italic;
}

.ogv3__final-copy p{
  max-width:440px;

  margin-top:35px;

  font-family:
    Arial,
    sans-serif;

  font-size:
    clamp(13px,.9vw,16px);

  line-height:1.65;

  color:
    rgba(17,17,15,.58);
}

.ogv3__cta{
  display:inline-flex;

  align-items:center;

  justify-content:space-between;

  gap:45px;

  min-width:min(400px,100%);

  margin-top:32px;

  padding:18px 20px;

  border:
    1px solid rgba(17,17,15,.28);

  color:#11110f;

  font-family:
    Arial,
    sans-serif;

  font-size:8px;

  font-weight:700;

  letter-spacing:.14em;

  text-decoration:none;

  pointer-events:auto;

  transition:
    background .3s ease,
    color .3s ease;
}

.ogv3__cta:hover{
  color:#fff;

  background:#11110f;
}

.ogv3__cta strong{
  font-size:17px;

  font-weight:400;
}


/* =========================================================
   FOOTER
========================================================= */

.ogv3__footer{
  position:absolute;

  z-index:100;

  left:4%;
  right:4%;

  bottom:22px;

  display:flex;

  justify-content:space-between;

  font-family:
    Arial,
    sans-serif;

  font-size:6px;

  font-weight:700;

  letter-spacing:.17em;

  color:
    rgba(17,17,15,.32);

  pointer-events:none;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:760px){

  .ogv3__hud{
    left:15px;
    right:15px;

    grid-template-columns:
      auto 1fr;
  }

  .ogv3__hud-right{
    display:none;
  }

  .ogv3__index{
    display:none;
  }

  .ogv3__room-top{
    left:18px;
    top:65px;
  }

  .ogv3__ghost{
    left:5px;

    font-size:180px;
  }

  .ogv3__entrance h2{
    font-size:
      clamp(54px,16vw,78px);
  }

  .ogv3__entrance-meta{
    grid-template-columns:
      auto 35px auto;

    gap:7px;

    font-size:5px;
  }

  .ogv3__h-video,
  .ogv3__g-video,
  .ogv3__g-cover,
  .ogv3__m-video,
  .ogv3__c-video,
  .ogv3__a-video{
    width:87vw;
  }

  .ogv3__h1,
  .ogv3__h2,
  .ogv3__h3,
  .ogv3__g2,
  .ogv3__g3,
  .ogv3__m1,
  .ogv3__m2,
  .ogv3__m3,
  .ogv3__a1,
  .ogv3__a2,
  .ogv3__a3{
    width:54vw;
  }

  .ogv3__m-panel{
    left:12px;
    right:12px;

    top:65px;
    bottom:50px;
  }

  .ogv3__cartel{
    width:150px;
  }

  .ogv3__cartel-h,
  .ogv3__cartel-m,
  .ogv3__cartel-a{
    left:18px;

    bottom:60px;
  }

  .ogv3__cartel-g{
    right:18px;

    bottom:60px;
  }

  .ogv3__cartel-c{
    right:18px;

    top:82px;
  }

  .ogv3__final{
    grid-template-columns:1fr;

    gap:18px;

    padding:
      75px 20px 45px;
  }

  .ogv3__final-copy h2{
    font-size:
      clamp(42px,12.5vw,66px);
  }

}