body.home-v3{--h3-panel:#131313}

body.home-v3 .page-hero-video,
body.home-v3 .page-hero-img,
body.home-v3 .page-hero-overlay{display:none!important}

@media(min-width:821px){
  body.home-v3 .navbar .nav-inner{grid-template-columns:auto 1fr!important}
  body.home-v3 .navbar .nav-right{grid-column:2;justify-self:end}
  body.home-v3 .navbar .nav-link{
    color:#fff;font-style:normal;font-weight:700;letter-spacing:0.02em;font-size:0.82rem;
  }
  body.home-v3 .navbar .nav-link:hover,
  body.home-v3 .navbar .nav-link.active{color:var(--gold)}
  body.home-v3 .navbar .nav-links li:has(.nav-cta){display:none}
}
@media(max-width:820px){
  body.home-v3 .hamburger{
    box-sizing:border-box;width:52px;height:44px;margin:0;padding:0 13px;
    gap:6px;justify-content:center;
    border:1px solid rgba(255,255,255,0.75);border-radius:10px;
    background:rgba(20,20,20,0.35);
  }
  body.home-v3 .hamburger span{height:2px}
  body.home-v3 .hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  body.home-v3 .hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}

.h3-hero{
  position:relative;isolation:isolate;
  aspect-ratio:1138/640;min-height:560px;
  display:flex;align-items:center;justify-content:center;
  padding:90px 20px 17%;
  text-align:center;
  background:#000;
}
.h3-hero-bg{
  position:absolute;inset:0;z-index:-1;
  width:100%;height:100%;object-fit:cover;object-position:center bottom;
  pointer-events:none;
}
.h3-hero-inner{display:flex;flex-direction:column;align-items:center}
.h3-hero-title img{
  width:min(480px,38vw);height:auto;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,0.55));
  opacity:0;animation:fadeUp 0.9s 0.2s ease forwards;
}
.h3-hero-btn{
  margin-top:26px;padding:7px 32px;
  border:2px solid #fff;border-radius:100px;
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:0.74rem;
  letter-spacing:0.02em;text-transform:uppercase;color:#fff;line-height:1.5;
  background:rgba(0,0,0,0.25);
  transition:background 0.3s ease,color 0.3s ease,transform 0.3s ease;
  opacity:0;animation:fadeUp 0.9s 0.45s ease forwards;
}
.h3-hero-btn:hover{background:#fff;color:#111;transform:translateY(-2px)}

.h3-panel{
  position:relative;isolation:isolate;
  padding:60px 24px 80px;
  background:var(--h3-panel);
}
.h3-omega{
  position:absolute;z-index:2;left:50%;top:-15vw;transform:translateX(-50%);
  width:clamp(120px,13vw,230px);height:auto;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,0.6));
}

.h3-frame{
  position:relative;
  max-width:1148px;min-height:600px;margin:0 auto;
  padding:70px 70px 70px 40px;
  background:url("images/home/v3/frame-bg.jpg") center/100% 100% no-repeat;
  display:grid;
  grid-template-columns:49% 1fr;
  grid-template-rows:1fr auto auto auto 1fr;
  grid-template-areas:"media ." "media title" "media desc" "media book" "media .";
  column-gap:40px;
}
.h3-media-wrap{grid-area:media;align-self:center;justify-self:center}
.h3-media{
  position:relative;overflow:hidden;
  width:268px;aspect-ratio:268/428;
  border-radius:6px;background:#676767;
}
.h3-media-img,.h3-media-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.h3-media .circuit-placeholder{
  color:#fff;font-family:'Montserrat',sans-serif;font-size:1.05rem;font-weight:800;
  letter-spacing:0;line-height:1.1;text-align:left;
}
.h3-title{grid-area:title;margin:0 0 14px}
.h3-title img{width:min(440px,100%);height:auto}
.h3-desc{
  grid-area:desc;
  font-family:'Montserrat',sans-serif;font-size:0.95rem;font-weight:400;line-height:1.4;
  color:#fff;max-width:420px;white-space:pre-line;
}
.h3-book{grid-area:book;justify-self:start;margin-top:26px;transition:transform 0.3s ease,filter 0.3s ease}
.h3-book img{width:292px;height:auto}
.h3-book:hover{transform:translateY(-2px);filter:brightness(1.15)}

body.home-v3 .satisfied-panel{background:var(--h3-panel)}

@media(max-width:1100px){
  .h3-frame{padding:60px 50px 60px 30px;min-height:540px}
  .h3-media{width:240px}
}

@media(max-width:860px){
  .h3-hero{aspect-ratio:auto;min-height:100svh;padding:100px 16px 230px}
  .h3-hero-bg{object-position:center center}
  .h3-hero-title img{width:min(420px,70vw)}
  .h3-hero-btn{display:none}

  .h3-panel{
    --h3-curve:170px;
    margin-top:calc(-1 * var(--h3-curve));
    padding:90px 16px 70px;
    background:
      radial-gradient(ellipse 70vw var(--h3-curve) at 50% var(--h3-curve),var(--h3-panel) calc(100% - 1.5px),transparent 100%),
      linear-gradient(to bottom,transparent 0,transparent var(--h3-curve),var(--h3-panel) var(--h3-curve));
  }
  .h3-panel::after{
    content:'';position:absolute;z-index:-1;left:0;right:0;top:170px;bottom:0;
    background:url("images/home/v3/panel-bg.jpg") center 40%/auto 900px no-repeat;
    opacity:0.9;pointer-events:none;
  }
  .h3-omega{width:min(110px,24vw);top:-46px}

  .h3-frame{
    max-width:420px;min-height:0;padding:0;background:none;
    grid-template-columns:1fr;grid-template-rows:none;
    grid-template-areas:"title" "media" "book" "desc";
    justify-items:center;
  }
  .h3-title{margin:0 0 10px;text-align:center}
  .h3-title img{width:min(390px,82vw);margin:0 auto}
  .h3-media-wrap{
    padding:16px;border:1px solid rgba(255,255,255,0.45);border-radius:10px;
    background:rgba(20,20,20,0.6);
  }
  .h3-media{width:min(212px,48vw);border-radius:10px}
  .h3-book{justify-self:center;margin-top:16px}
  .h3-book img{width:min(256px,calc(48vw + 34px))}
  .h3-desc{
    margin-top:22px;width:min(340px,70vw);
    font-size:0.8rem;line-height:1.3;
  }
}