/* Home page: hero (style 2) + services (style 3) */
.hero2{position:relative;background:#fff;overflow:hidden;padding:0 0 70px}
.hero2-strip{position:absolute;left:0;top:0;width:24%;bottom:70px;background:#111 center/cover no-repeat}
.hero2-strip::after{content:"";position:absolute;inset:0;background:rgba(10,10,11,.7)}
.hero2 .hero-slides{position:absolute;inset:0 0 70px calc(24% + 10px);overflow:hidden}
.hero2 .hero-slides::after{background:linear-gradient(90deg,rgba(15,15,16,.35),rgba(15,15,16,0) 60%)}
.hero2 .wrap{position:relative;z-index:2;min-height:0;display:block;padding-top:110px;padding-bottom:0}
.hero2-card{position:relative;background:#fff;max-width:770px;padding:70px 120px 70px 80px;clip-path:polygon(0 0,calc(100% - 72px) 0,100% 72px,100% 100%,0 100%);box-shadow:0 30px 60px -30px rgba(0,0,0,.4)}
.hero2-card h1{color:var(--head);font-size:clamp(2.2rem,4.4vw,3.9rem);line-height:1.1;text-transform:none;letter-spacing:-.01em}
.hero2-card h1 .ol{color:transparent;-webkit-text-stroke:2px var(--red);display:inline-block;position:relative;padding-bottom:4px;text-transform:uppercase}
.hero2-card h1 .ol::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--red)}
.hero2-card p{font-size:1.08rem;max-width:520px;color:var(--text)}
.hero2-card .tag::after{background:#fff}
.hero2-pager{position:absolute;left:auto;right:0;bottom:12px;display:flex;flex-direction:column;gap:12px;padding-right:30px}
.hero2-pager::after{content:"";position:absolute;right:0;top:-12px;bottom:-12px;width:30px;background:var(--dark)}
.hero2-pager button{width:42px;height:42px;border:0;background:var(--grey);color:var(--head);font-family:var(--font-h);font-weight:700;font-size:1.05rem;cursor:pointer;transition:.25s;outline:0}
.hero2-pager button.on,.hero2-pager button:hover{background:var(--red);color:#fff}
.hero2-badge{position:absolute;right:0;bottom:0;z-index:3;width:min(520px,44vw);background:#fff;padding:10px 0 0 10px;display:grid;grid-template-columns:170px 1fr}
.hero2-badge img{width:100%;height:100%;object-fit:cover;min-height:180px}
.hero2-badge .bx{background:var(--dark);color:#d8d8dc;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr}
.hero2-badge .big{background:var(--red);padding:12px 18px;font-family:var(--font-h);font-weight:800;font-size:2.6rem;line-height:1.1;color:transparent;-webkit-text-stroke:1.5px #fff;display:flex;align-items:center}
.hero2-badge .tt{padding:14px 20px;font-family:var(--font-h);font-weight:700;color:#fff;font-size:1.1rem;line-height:1.25;text-transform:uppercase;display:flex;align-items:center}
.hero2-badge .ds{grid-column:1/-1;padding:12px 20px 16px;font-size:.92rem;line-height:1.55;border-top:1px solid #2c2c2f;margin:0 10px}
.hero2-badge .ds a{color:#fff;text-decoration:underline}

/* services style 3 */
.svc3-sec{position:relative;padding:120px 0 110px;background:#fff}
.svc3-sec::before{content:"";position:absolute;left:0;right:0;top:0;height:560px;background:linear-gradient(rgba(20,20,22,.9),rgba(20,20,22,.9)),var(--bg) center/cover no-repeat}
.svc3-sec .tri{position:absolute;top:0;width:220px;height:220px;background:var(--red);z-index:1}
.svc3-sec .tri.l{left:0;clip-path:polygon(0 0,100% 0,0 100%)}
.svc3-sec .tri.r{right:0;clip-path:polygon(0 0,100% 0,100% 100%)}
.svc3-sec .wrap{position:relative;z-index:2}
.svc3-head{text-align:center;max-width:720px;margin:0 auto 54px}
.svc3-head h2{color:#fff}
.svc3-head p{color:#c4c4c9;margin:0}
.svc3-head .tag{justify-content:center}
.svc3-head .tag::after{background:transparent}
.svc3-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.svc3{background:#e2e2e5;padding:1px;clip-path:polygon(0 0,100% 0,100% calc(100% - 58px),calc(100% - 58px) 100%,0 100%);transition:.3s}
.svc3-in{background:#fff;height:100%;display:flex;flex-direction:column;clip-path:polygon(0 0,100% 0,100% calc(100% - 58px),calc(100% - 58px) 100%,0 100%)}
.svc3 .im{position:relative;margin:10px 10px 0;overflow:hidden;aspect-ratio:4/3.1}
.svc3 .im img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.svc3 .ic{position:absolute;top:0;right:0;width:80px;height:80px;background:var(--dark);color:#fff;display:grid;place-items:center;clip-path:polygon(0 0,100% 0,100% 100%,22px 100%,0 calc(100% - 22px));transition:.3s}
.svc3 .ic::before{content:"";position:absolute;top:0;right:12px;width:46px;height:4px;background:var(--red)}
.svc3 .ic svg{width:40px;height:40px}
.svc3 .bd{padding:30px 26px 40px;flex:1;display:flex;flex-direction:column}
.svc3 h3{font-size:1.4rem;margin-bottom:10px}
.svc3 h3 a{color:var(--head)}
.svc3 p{font-size:.98rem;line-height:1.65;margin-bottom:14px;flex:1}
.svc3 .more{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-h);font-weight:600;color:var(--head);text-transform:uppercase;font-size:.98rem}
.svc3 .more svg{width:16px;height:16px;color:var(--red);transition:.3s}
.svc3:hover{background:var(--red)}
.svc3:hover .im img{transform:scale(1.07)}
.svc3:hover .ic{background:var(--red)}
.svc3:hover h3 a,.svc3:hover .more{color:var(--red)}
.svc3:hover .more svg{transform:rotate(45deg)}
.svc3-foot{text-align:center;margin-top:46px}

@media (max-width:1024px){
  .hero2-card{padding:64px 90px 60px 50px}
  .hero2-badge{display:none}
  .hero2{padding-bottom:40px}
  .hero2 .hero-slides,.hero2-strip{bottom:40px}
  .svc3-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .hero2-strip{display:none}
  .hero2 .hero-slides{left:0;bottom:0}
  .hero2{padding-bottom:30px}
  .hero2 .wrap{padding-top:150px}
  .hero2-card{padding:40px 24px 36px 24px;clip-path:polygon(0 0,calc(100% - 40px) 0,100% 40px,100% 100%,0 100%)}
  .hero2-card .tag{font-size:.78rem;letter-spacing:.1em}
  .hero2-pager{display:none}
  .hero2-card .hero-btns .btn{font-size:.85rem}
  .svc3-sec{padding:80px 0}
  .svc3-sec .tri{width:110px;height:110px}
  .svc3-grid{grid-template-columns:1fr}
}