.hero { position:relative; height:720px; overflow:hidden; color:#fff; background:var(--b900); }
.slides, .slide { position:absolute; inset:0; }
.slide { opacity:0; background-position:center; background-size:cover; transition:opacity 1s ease; }
.slide.active { opacity:1; }
.slide::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,20,44,.86) 0%,rgba(7,20,44,.55) 38%,rgba(7,20,44,.08) 75%); }
.hero-content { position:relative; z-index:3; display:flex; align-items:center; height:100%; }
.hero-copy { width:min(680px,70%); padding-top:75px; }
.hero-copy .eyebrow { color:#cbdcff; }
.hero h1 { margin:16px 0 22px; font-size:clamp(50px,6vw,88px); line-height:.95; letter-spacing:-.055em; }
.hero p { max-width:620px; color:#e9f0fb; font-size:18px; line-height:1.65; }
.cta { display:inline-flex; align-items:center; gap:14px; margin-top:26px; padding:16px 20px; border:1px solid #ffffff60; font:700 12px Montserrat,Arial,sans-serif; letter-spacing:.08em; transition:.25s; }
.cta:hover { background:var(--brand); border-color:var(--brand); }
.cert { position:absolute; z-index:5; right:42px; bottom:35px; display:flex; gap:20px; }
.cert img { width:auto; height:62px; }
.hero-controls { position:absolute; z-index:6; bottom:30px; left:50%; display:flex; gap:10px; transform:translateX(-50%); }
.dot { width:28px; height:3px; padding:0; background:#ffffff66; border:0; cursor:pointer; }
.dot.active { width:52px; background:#fff; }
.arrow { position:absolute; z-index:7; top:50%; width:48px; height:48px; color:#fff; background:#07142c55; border:1px solid #ffffff45; font-size:22px; cursor:pointer; }
.prev { left:24px; }
.next { right:24px; }
.intro { display:grid; grid-template-columns:1.15fr .85fr; min-height:540px; }
.video-panel { display:flex; align-items:center; justify-content:center; padding:48px; background:#eef3fa; }
.video-frame { position:relative; width:100%; }
.video-frame video { display:block; width:100%; height:auto; object-fit:contain; background:#000; }
.video-label { position:absolute; bottom:20px; left:20px; padding:10px 13px; color:#fff; background:#07142ccc; font:600 11px Montserrat,Arial,sans-serif; letter-spacing:.12em; }
.intro-copy { display:flex; flex-direction:column; justify-content:center; padding:70px max(7vw,55px); background:linear-gradient(145deg,var(--ice),#fff); }
.intro-copy h2 { margin:12px 0 25px; color:var(--b700); font-size:39px; line-height:1.08; }
.intro-copy p { color:#53627a; font-size:16px; line-height:1.72; }
.sectors { padding:85px 0; color:#fff; background:linear-gradient(135deg,var(--b900),var(--b700)); }
.sector-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:36px; }
.sector-head h2 { font-size:44px; }
.sector-head .eyebrow { color:#bcd3ff; }
.tabs { display:flex; gap:8px; }
.tab { padding:13px 22px; color:#fff; background:transparent; border:1px solid #ffffff30; font:700 12px Montserrat,Arial,sans-serif; cursor:pointer; }
.tab.active { background:var(--brand); border-color:var(--brand); }
.sector-stage { display:grid; grid-template-columns:.8fr 1.2fr; min-height:560px; overflow:hidden; color:var(--ink); background:#fff; }
.sector-copy { display:flex; flex-direction:column; justify-content:center; padding:62px; }
.sector-copy h3 { margin:10px 0 15px; color:var(--b700); font-size:42px; }
.sector-copy .claim { color:var(--brand); font-size:18px; font-weight:500; }
.sector-copy p { color:var(--muted); font-size:16px; line-height:1.7; }
.product { max-width:80%; max-height:180px; margin:24px auto 0; object-fit:contain; }
.sector-photo img { width:100%; height:100%; object-fit:cover; }
.made { position:relative; display:flex; align-items:center; height:430px; color:#fff; background:url('https://www.hph-irc.com/img/bkg-new1.png') center bottom / cover no-repeat fixed; text-align:center; }
.made::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#07142cb5,#285aa570); }
.made .wrap { z-index:2; }
.made img { width:145px; margin:0 auto 18px; }
.made h2 { margin-top:8px; font-size:60px; }
.quality { padding:85px 0; background:#f3f7fd; }
.quality h2 { margin-bottom:42px; color:var(--b700); font-size:42px; text-align:center; }
.quality-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #d7e1ef; border-left:1px solid #d7e1ef; }
.q { min-height:185px; padding:34px 26px; background:#fff; border-right:1px solid #d7e1ef; border-bottom:1px solid #d7e1ef; transition:.25s; }
.q:hover { color:#fff; background:var(--brand); transform:translateY(-5px); }
.q i { color:var(--brand); font-size:30px; }
.q:hover i { color:#fff; }
.q p { margin:22px 0 0; font:600 14px/1.5 Montserrat,Arial,sans-serif; }
.chapters { background:#fff; }
.chapter { display:grid; grid-template-columns:1fr 1fr; min-height:520px; }
.chapter:nth-child(even) .chapter-img { order:2; }
.chapter-copy { display:flex; flex-direction:column; justify-content:center; padding:70px max(7vw,55px); color:#fff; background:linear-gradient(135deg,var(--b800),var(--b600)); }
.chapter:nth-child(even) .chapter-copy { background:linear-gradient(135deg,var(--b600),var(--b900)); }
.chapter-copy .eyebrow { color:#c8d9fa; }
.chapter-copy h2 { margin:10px 0 18px; font-size:45px; }
.chapter-copy p { color:#e7eefb; font-size:16px; line-height:1.7; }
.chapter-copy a { margin-top:24px; color:#fff; font:700 12px Montserrat,Arial,sans-serif; letter-spacing:.1em; }
.chapter-img { min-height:440px; background-position:center; background-size:cover; }
@media (max-width:900px) {
    .hero { height:650px; }
    .hero-copy { width:90%; }
    .hero h1 { font-size:54px; }
    .cert, .arrow { display:none; }
    .intro, .sector-stage, .chapter { grid-template-columns:1fr; }
    .video-panel { padding:24px; }
    .intro-copy { padding:50px 30px; }
    .sector-copy { padding:40px 28px; }
    .sector-photo { height:350px; }
    .quality-grid { grid-template-columns:1fr 1fr; }
    .chapter:nth-child(even) .chapter-img { order:0; }
    .chapter-copy { padding:50px 30px; }
}
@media (max-width:520px) {
    .hero-copy p { font-size:16px; }
    .sector-head { align-items:flex-start; flex-direction:column; gap:24px; }
    .tabs { width:100%; overflow:auto; }
    .quality-grid { grid-template-columns:1fr; }
    .made h2 { font-size:44px; }
}
