/* Service hierarchy and featured OWC presentation */
.header nav{align-self:stretch;align-items:center;gap:clamp(18px,2.5vw,39px)}
.header nav a{display:flex;align-items:center;height:100%;font-size:12px;line-height:1.4;letter-spacing:.08em}
.owc-feature{
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  grid-template-areas:
    "heading heading"
    "logo content"
    "image content";
  gap:clamp(28px,4vw,56px) clamp(50px,8vw,120px);
  align-items:start;
}
.owc-feature-heading{grid-area:heading;position:relative;z-index:2;max-width:1080px}
.owc-feature-heading .kicker{margin-bottom:22px}
.owc-feature-heading h2{
  font:500 clamp(38px,5.2vw,72px)/1.42 "Yu Mincho","Hiragino Mincho ProN",serif;
  color:#fff;
  letter-spacing:.02em;
}
.heading-line{display:block}
.owc-brand-lockup{
  grid-area:logo;
  position:relative;
  z-index:2;
  width:min(100%,540px);
}
.owc-official-logo{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}
.owc-brand-lockup>span{
  display:block;
  margin-top:10px;
  color:#fff;
  font:700 clamp(15px,1.45vw,21px)/1.4 Arial,sans-serif;
  letter-spacing:.045em;
}
.owc-feature-image{
  grid-area:image;
  position:relative;
  z-index:2;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  background:#0a203c;
  box-shadow:0 24px 55px rgba(0,0,0,.22);
}
.owc-feature-image img{display:block;width:100%;height:auto;object-fit:contain}
.device-image{position:relative;overflow:hidden;isolation:isolate}
.screen-lights{position:absolute;inset:0;pointer-events:none;z-index:1}
.screen-light{position:absolute;inset:0;opacity:0;background:linear-gradient(145deg,rgba(101,255,234,.28),rgba(16,185,176,.12) 55%,rgba(101,255,234,.23));mix-blend-mode:screen;animation:owc-screen-light 9s ease-in-out infinite}
.screen-learn{clip-path:polygon(26.2% 26.1%,39.3% 26.4%,40.3% 28%,39.3% 61.4%,38% 63.2%,24.7% 60.5%,23.8% 59%,24.9% 28%)}
.screen-create{clip-path:polygon(43.9% 26.5%,58.1% 26.8%,59.3% 28.5%,58.6% 63.4%,57.4% 65%,41.6% 62.7%,40.5% 61%,42.2% 28%);animation-delay:3s}
.screen-sell{clip-path:polygon(61.7% 26.7%,78.4% 27%,79.6% 28.5%,78.5% 35.7%,77% 40%,76.2% 65.4%,74.8% 66.9%,60.1% 64.4%,59.1% 62.7%,60.4% 28%);animation-delay:6s}
.device-motion-toggle{display:block;margin:10px 12px 0 auto;color:#bdd4df;background:transparent;border:1px solid #375465;border-radius:3px;font-size:12px;padding:6px 11px;cursor:pointer}
.device-motion-toggle:hover{color:#fff;border-color:#62dcd2}
.learning-devices figcaption{padding:12px 14px 14px}
.device-caption{margin:0 0 16px;color:#fff;font-size:clamp(17px,1.6vw,21px);font-weight:700;line-height:1.7}
.device-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.device-steps li{border-top:2px solid #10b9b0;padding:12px 4px 5px;display:flex;flex-direction:column;gap:5px;animation:device-step 9s ease-in-out infinite}
.device-steps li:nth-child(2){animation-delay:3s}.device-steps li:nth-child(3){animation-delay:6s}
.device-steps span{color:#62dcd2;font-size:12px}.device-steps strong{color:#fff;font-size:15px;white-space:nowrap}.device-steps small{color:#bdced8;font-size:11px;line-height:1.5}
.learning-devices.motion-paused .screen-light,.learning-devices.motion-paused .device-steps li{animation-play-state:paused}
@keyframes owc-screen-light{0%,33.33%,100%{opacity:0}7%,25%{opacity:1}}
@keyframes device-step{0%,33.33%,100%{background:transparent;box-shadow:none}7%,25%{background:rgba(16,185,176,.12);box-shadow:0 -3px 14px -5px #62dcd2}}
.owc-feature .owc-content{grid-area:content;margin:0;align-self:center}
.owc-feature .owc-lead{
  margin:0 0 24px;
  color:#fff;
  font:500 clamp(21px,2vw,28px)/1.72 "Yu Mincho","Hiragino Mincho ProN",serif;
}
.owc-feature .owc-lead>span{display:block;white-space:nowrap}
.header>.logo img{width:clamp(190px,16vw,225px);height:auto}
.service-kind{
  display:table;
  margin:0 0 15px;
  padding:7px 10px;
  border:1px solid #aa8b4a;
  color:#866522;
  font:700 9px/1 Arial,sans-serif;
  letter-spacing:.08em;
}
.service-kind.support{border-color:#8190a0;color:#5b6c7e}
.service-card-image{padding-top:210px;min-height:455px}
.service-card-image>img{
  position:absolute;
  inset:0 0 auto;
  width:100%;
  height:180px;
  object-fit:cover;
  object-position:center;
  border-bottom:1px solid #dedbd2;
}
.product-grid .service-card{min-height:330px}
.product-grid .service-card-image{min-height:455px}
.card-grid.three .service-card{min-height:310px;padding-bottom:72px}
.card-grid.three .service-card-image{min-height:455px;padding-top:210px}
.card-grid.three .service-card-image>img{object-position:center top}
.works-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.release-card>figcaption{
  position:absolute;
  z-index:2;
  left:24px;
  right:24px;
  bottom:22px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.release-card{margin:0}
.release-card>figcaption b{color:#fff}

@media(max-width:1000px){
  .owc-feature{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:28px 48px;
    padding-left:5vw;
    padding-right:5vw;
  }
  .owc-feature-heading h2{font-size:clamp(38px,6vw,58px)}
  .owc-feature .owc-lead{font-size:clamp(20px,2.8vw,28px)}
  .works-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:820px){
  .header nav{height:auto;align-self:auto;align-items:flex-start}
  .header nav a{height:auto}
  .hero-actions{flex-direction:column;align-items:stretch;gap:17px}
  .hero-actions .button{width:100%;min-width:0}
  .hero-actions .text-link{width:max-content;max-width:100%}
  .owc-feature{
    display:flex;
    flex-direction:column;
    gap:0;
    padding:82px 24px 90px;
  }
  .owc-feature-heading{order:1;width:100%;margin-bottom:34px}
  .header>.logo img{width:165px}
  .header .header-cta{padding:0 11px;margin-left:9px;gap:7px;font-size:9px}
  .header .header-cta span{font-size:12px}
  .owc-feature-heading h2{
    font-size:clamp(30px,8.7vw,43px);
    line-height:1.52;
    letter-spacing:0;
  }
  .owc-brand-lockup{order:2;width:min(100%,540px);margin-bottom:30px}
  .owc-feature-image{order:3;width:100%;margin-bottom:36px}
  .owc-feature .owc-content{order:4;width:100%}
  .owc-feature .owc-lead{font-size:clamp(20px,5.8vw,27px);line-height:1.65}
  .owc-feature .owc-lead>span{white-space:normal}
  .owc-feature .button{width:100%;min-width:0}
  .product-grid .service-card,
  .product-grid .service-card-image{min-height:0;padding-bottom:76px}
  .card-grid.three .service-card{min-height:290px;padding-bottom:72px}
  .service-card-image{padding-top:205px}
  .service-card-image>img{height:175px}
  .works-grid{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .screen-light,.device-steps li{animation:none}
  .device-motion-toggle{display:none}
}

@media(max-width:430px){
  .header>.logo img{width:135px}
  .header .header-cta{width:38px;padding:0;margin-left:7px;gap:0;font-size:0}
  .owc-feature-heading h2{font-size:clamp(22px,7vw,30px)}
  .owc-feature-heading .heading-line{white-space:nowrap}
  .owc-feature .owc-lead{font-size:clamp(19px,5.5vw,24px)}
  .contact h2{font-size:clamp(24px,6.6vw,28px)}
  .service-card h4{overflow-wrap:anywhere}
}