/* Production Sachiko Hero layout for the video and live-chat home pages. */
.sachiko-video-visual{
  display:none;
}

@media (max-width:959px){
  .hero.sachiko-video-hero{
    display:flex!important;
    flex-direction:column;
    min-height:0!important;
    padding:0 18px 28px!important;
    overflow:hidden;
    background:#0d0d0f;
  }

  .hero.sachiko-video-hero::before{
    display:none!important;
  }

  .sachiko-video-hero .hero-copy{
    order:1;
    width:100%;
    max-width:none!important;
    min-width:0;
    padding-top:26px;
  }

  .sachiko-video-hero .eyebrow{
    margin:0 0 13px!important;
    font-size:10px!important;
    line-height:1.3!important;
    letter-spacing:.24em!important;
  }

  .sachiko-video-hero h1{
    max-width:390px!important;
    margin:0 0 16px!important;
    font-size:clamp(30px,8.4vw,36px)!important;
    line-height:1.14!important;
  }

  .sachiko-video-hero .search-lead{
    margin:0 0 16px!important;
    padding:0!important;
    color:#c9c1c6!important;
    font-size:13px!important;
    line-height:1.7!important;
    letter-spacing:0!important;
    white-space:normal!important;
    word-break:normal;
    overflow-wrap:normal;
  }

  .sachiko-video-hero #search-form{
    width:100%;
    max-width:none;
  }

  .sachiko-video-hero .search-box{
    width:100%;
    min-width:0;
  }

  .sachiko-video-hero .search-box > span{
    display:none;
  }

  .sachiko-video-hero .filters{
    width:100%;
    min-width:0;
  }

  .sachiko-video-hero .muted{
    margin:14px 0 0!important;
  }

  .sachiko-video-hero .search-examples{
    width:100%;
    min-width:0;
    margin-top:18px!important;
  }

  .sachiko-video-hero #quick{
    max-width:100%;
  }

  .sachiko-video-existing-visual{
    display:none!important;
  }

  .sachiko-video-visual{
    position:relative;
    order:0;
    display:grid;
    width:calc(100% + 36px);
    min-width:0;
    margin:0 -18px;
    overflow:hidden;
    background:#0d0d0f;
  }

  .sachiko-video-visual::after{
    content:"";
    position:absolute;
    z-index:2;
    inset:auto 0 0;
    height:30%;
    pointer-events:none;
    background:linear-gradient(0deg,#0d0d0f 0%,rgba(13,13,15,.58) 34%,rgba(13,13,15,0) 100%);
  }

  .sachiko-video-media{
    position:relative;
    width:100%;
    aspect-ratio:31 / 20;
    min-width:0;
    overflow:hidden;
  }

  .sachiko-video-media img{
    width:100%;
    height:100%;
    max-width:none;
    display:block;
    object-fit:cover;
    object-position:right center;
    transform:none;
    filter:saturate(.94) contrast(1.02);
  }
}

@media (min-width:960px){
  .hero.sachiko-video-hero{
    left:50%;
    width:100vw;
    min-height:610px!important;
    margin-left:0;
    padding:52px clamp(40px,4vw,60px) 44px clamp(40px,calc((100vw - 1084px)/2 + 56px),234px)!important;
    grid-template-columns:minmax(500px,534px) minmax(0,1fr)!important;
    column-gap:24px;
    transform:translateX(-50%);
    isolation:isolate;
  }

  .hero.sachiko-video-hero::before{
    background:linear-gradient(90deg,#0d0d0f 0%,#0d0d0f 49%,rgba(13,13,15,.92) 57%,rgba(13,13,15,.28) 75%,rgba(13,13,15,0) 100%)!important;
  }

  .sachiko-video-hero .hero-copy{
    z-index:3;
    width:100%;
    min-width:0;
  }

  .sachiko-video-existing-visual{
    display:none;
  }

  .sachiko-video-visual{
    position:relative;
    z-index:0;
    grid-column:2;
    display:grid;
    min-width:0;
    align-items:start;
    justify-items:end;
    overflow:hidden;
    background:
      radial-gradient(circle at 72% 43%,rgba(233,77,147,.12),transparent 48%),
      #0d0d0f;
  }

  .sachiko-video-visual::after{
    content:"";
    position:absolute;
    z-index:2;
    inset:0 auto 0 0;
    width:23%;
    pointer-events:none;
    background:linear-gradient(90deg,#0d0d0f 0%,rgba(13,13,15,.78) 32%,rgba(13,13,15,0) 100%);
  }

  .sachiko-video-media{
    position:relative;
    width:calc(100% - 16px);
    max-width:600px;
    height:420px;
    margin-top:16px;
    display:grid;
    place-items:center;
    overflow:hidden;
  }

  .sachiko-video-media::after{
    content:"";
    position:absolute;
    z-index:1;
    inset:0;
    pointer-events:none;
    box-shadow:inset 0 0 54px 22px #0d0d0f;
  }

  .sachiko-video-media img{
    position:relative;
    width:100%;
    height:100%;
    max-width:none;
    display:block;
    object-fit:cover;
    object-position:68% center;
    transform:none;
    filter:saturate(.94) contrast(1.02);
  }
}
.sachiko-livechat-visual{
  display:none;
}

@media (max-width:959px){
  .hero.sachiko-livechat-hero{
    display:flex;
    flex-direction:column;
    min-height:0!important;
    padding:0!important;
    overflow:hidden;
    background:#0d0d0f;
  }

  .hero.sachiko-livechat-hero::before{
    display:none;
  }

  .sachiko-livechat-hero .hero-copy{
    order:1;
    width:100%!important;
    max-width:none;
    min-width:0;
    padding:25px 20px 28px!important;
    background:#0d0d0f;
  }

  .sachiko-livechat-hero .eyebrow{
    margin:0 0 12px;
    color:#d9b56f;
    font-size:10px;
    line-height:1.35;
    letter-spacing:.20em;
  }

  .sachiko-livechat-hero h1{
    margin:0;
    color:#fff;
    font-size:clamp(27px,7.7vw,33px);
    line-height:1.25;
    letter-spacing:-.025em;
    font-weight:700;
  }

  .sachiko-livechat-hero h1 .hero-pink{
    color:#f0a2bb;
    text-shadow:0 0 28px rgba(233,77,147,.18);
  }

  .sachiko-livechat-hero .intro{
    width:100%;
    max-width:none;
    margin:15px 0 0;
    color:#c9c1c6;
    font-size:13px;
    line-height:1.75;
    letter-spacing:.02em;
    white-space:normal;
    word-break:normal;
    overflow-wrap:normal;
  }

  .sachiko-livechat-hero #search,
  .sachiko-livechat-hero .popular{
    display:none!important;
  }

  .sachiko-livechat-existing-photo{
    display:none!important;
  }

  .sachiko-livechat-visual{
    position:relative;
    order:0;
    display:grid;
    width:100%;
    min-width:0;
    overflow:hidden;
    background:#0d0d0f;
  }

  .sachiko-livechat-visual::after{
    content:"";
    position:absolute;
    z-index:2;
    inset:auto 0 0;
    height:30%;
    pointer-events:none;
    background:linear-gradient(0deg,#0d0d0f 0%,rgba(13,13,15,.58) 34%,rgba(13,13,15,0) 100%);
  }

  .sachiko-livechat-media{
    position:relative;
    width:100%;
    aspect-ratio:31 / 20;
    min-width:0;
    overflow:hidden;
  }

  .sachiko-livechat-media img{
    width:100%;
    height:100%;
    max-width:none;
    display:block;
    object-fit:cover;
    object-position:right center;
    transform:none;
    filter:saturate(.94) contrast(1.02);
  }
}

@media (max-width:340px){
  .sachiko-livechat-hero h1{
    max-width:180px;
  }
}

@media (min-width:960px){
  .hero.sachiko-livechat-hero{
    position:relative;
    left:50%;
    width:100vw;
    min-height:610px!important;
    margin-left:0;
    padding:52px clamp(40px,4vw,60px) 44px clamp(40px,calc((100vw - 1084px)/2 + 56px),234px)!important;
    display:grid;
    grid-template-columns:minmax(500px,534px) minmax(0,1fr)!important;
    column-gap:24px;
    align-items:stretch;
    overflow:hidden;
    border:0;
    border-radius:0;
    background:#0d0d0f;
    transform:translateX(-50%);
    isolation:isolate;
  }

  .hero.sachiko-livechat-hero::before{
    content:"";
    position:absolute;
    z-index:1;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg,#0d0d0f 0%,#0d0d0f 49%,rgba(13,13,15,.92) 57%,rgba(13,13,15,.28) 75%,rgba(13,13,15,0) 100%);
  }

  .sachiko-livechat-hero .hero-copy{
    position:relative;
    z-index:3;
    grid-column:1;
    grid-row:1;
    width:100%!important;
    max-width:534px;
    min-width:0;
    align-self:center;
    padding:0!important;
    background:transparent;
  }

  .sachiko-livechat-hero .eyebrow{
    margin:0 0 16px;
    color:#d9b56f;
    font-size:11px;
    line-height:1.2;
    letter-spacing:.30em;
  }

  .sachiko-livechat-hero h1{
    max-width:534px;
    margin:0;
    color:#fff;
    font-size:clamp(36px,3vw,46px);
    line-height:1.13;
    letter-spacing:-.035em;
    font-weight:720;
  }

  .sachiko-livechat-hero h1 .hero-pink{
    color:#f0a2bb;
    text-shadow:0 0 28px rgba(233,77,147,.18);
  }

  .sachiko-livechat-hero .intro{
    width:calc(100% + 16px);
    max-width:550px;
    margin:16px 0 20px;
    color:#c9c1c6;
    font-size:14px;
    line-height:1.7;
    letter-spacing:-.01em;
    white-space:normal;
    word-break:normal;
    overflow-wrap:normal;
  }

  .sachiko-livechat-hero #search,
  .sachiko-livechat-hero .popular{
    display:none!important;
  }

  .sachiko-livechat-existing-photo{
    display:none;
  }

  .sachiko-livechat-visual{
    position:relative;
    z-index:0;
    grid-column:2;
    grid-row:1;
    display:grid;
    width:100%;
    height:436px;
    min-width:0;
    align-self:center;
    align-items:start;
    justify-items:end;
    overflow:hidden;
    background:radial-gradient(circle at 72% 43%,rgba(233,77,147,.12),transparent 48%),#0d0d0f;
  }

  .sachiko-livechat-visual::after{
    content:"";
    position:absolute;
    z-index:2;
    inset:0 auto 0 0;
    width:23%;
    pointer-events:none;
    background:linear-gradient(90deg,#0d0d0f 0%,rgba(13,13,15,.78) 32%,rgba(13,13,15,0) 100%);
  }

  .sachiko-livechat-media{
    position:relative;
    width:calc(100% - 16px);
    max-width:600px;
    height:420px;
    margin-top:16px;
    display:grid;
    place-items:center;
    overflow:hidden;
  }

  .sachiko-livechat-media::after{
    content:"";
    position:absolute;
    z-index:1;
    inset:0;
    pointer-events:none;
    box-shadow:inset 0 0 54px 22px #0d0d0f;
  }

  .sachiko-livechat-media img{
    position:relative;
    width:100%;
    height:100%;
    max-width:none;
    display:block;
    object-fit:cover;
    object-position:68% center;
    transform:none;
    filter:saturate(.94) contrast(1.02);
  }
}