/* The three editorial heroes share the existing brand palette and typography. */
.cinematic-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:#fff;margin:22px clamp(12px,2vw,32px) 0;border-radius:24px;}
.cinematic-hero .cinematic-backdrop{position:absolute;inset:0;z-index:-2;margin:0;height:auto;border-radius:0;pointer-events:none;}
.cinematic-hero .cinematic-backdrop img{width:100%;height:100%;object-fit:cover;object-position:center;animation:cinematic-settle 16s ease-out both;}
.cinematic-hero::before,.cinematic-why-stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(12,18,19,.87),rgba(12,18,19,.74) 67%,rgba(12,18,19,.08) 100%),linear-gradient(0deg,rgba(12,18,19,.56),transparent 70%);}
.cinematic-hero p,.cinematic-hero .eyebrow{color:#fff;}
.cinematic-hero em{color:var(--orange);}
.cinematic-hero .eyebrow{letter-spacing:.13em;}
body[data-page=index] .home-hero.cinematic-hero{display:block;min-height:570px;padding:clamp(48px,5vw,78px);}
.home-hero.cinematic-hero .hero-copy{padding:0;max-width:930px;position:relative;z-index:1;}
body[data-page=index] .cinematic-hero .hero-copy h1{font-size:clamp(28px,3.2vw,48px);line-height:1.14;letter-spacing:-.045em;text-wrap:wrap;max-width:none;}
body[data-page=index] .cinematic-hero .hero-line-accent{font-size:clamp(68px,8.6vw,132px);font-weight:700;line-height:1;letter-spacing:-.065em;margin-top:14px;}
.home-hero.cinematic-hero .hero-subtitle{max-width:510px;font-size:18px;line-height:1.75;margin-top:34px;text-shadow:0 1px 14px #0004;}
.cinematic-hero .hero-media,.cinematic-why-stage>.video-media{position:absolute;right:clamp(32px,4.2vw,66px);bottom:38px;width:clamp(270px,25vw,360px);margin:0;padding:0;z-index:2;}
.cinematic-hero .youtube-frame{aspect-ratio:16/9;border-radius:14px;box-shadow:0 16px 44px #0005;border:1px solid #ffffff80;}
.cinematic-hero .video-play{width:58px;height:58px;box-shadow:0 0 0 8px #ffffff20;}
.cinematic-hero .video-play svg{width:25px;height:25px;}
.cinematic-hero .video-fallback{color:#fff;font-size:13px;line-height:1.5;margin-top:14px;max-width:100%;white-space:normal;}
body[data-page=about-us] .page-hero.cinematic-hero{display:flex;align-items:center;min-height:590px;padding:clamp(48px,5vw,78px);}
body[data-page=about-us] .cinematic-hero>div{padding:0;width:100%;max-width:610px;}
body[data-page=about-us] .cinematic-hero h1{font-size:clamp(48px,5.15vw,76px);font-weight:700;line-height:1.08;letter-spacing:-.035em;max-width:610px;text-align:left;text-wrap:wrap;margin:0;}
body[data-page=about-us] .cinematic-hero h1>span{display:block;}
body[data-page=about-us] .cinematic-hero h1>em{display:block;font-size:.78em;font-weight:700;line-height:1.13;letter-spacing:-.035em;margin-top:.3em;}
html[data-language=en] body[data-page=about-us] .cinematic-hero h1>span,
html[data-language=en] body[data-page=about-us] .cinematic-hero h1>em{white-space:nowrap;}
html[data-language] body[data-page=about-us] .cinematic-hero .lead{max-width:44ch;font-size:17px;line-height:1.75;margin:28px 0 0;word-spacing:normal;letter-spacing:normal;text-wrap:pretty;overflow-wrap:normal;}
body[data-page=about-us] .cinematic-backdrop img{object-position:70% center;}
body[data-page=about-us] .cinematic-hero>.cinematic-backdrop{inset:0;width:100%;height:100%;}
body[data-page=about-us] .cinematic-hero>.cinematic-backdrop img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;}
.why-hero.cinematic-hero{display:block;padding:0;background:var(--paper);color:var(--ink);}
.why-hero.cinematic-hero::before{display:none;}
.why-hero.cinematic-hero>.cinematic-why-stage{position:relative;isolation:isolate;min-height:500px;padding:58px clamp(36px,5vw,76px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink);}
.cinematic-why-stage .why-hero-heading{padding:0;position:relative;z-index:1;max-width:calc(100% - 365px);}
.cinematic-why-stage .eyebrow{margin-bottom:22px;}
.cinematic-why-stage .why-title-prefix{font-size:clamp(18px,1.8vw,26px);line-height:1.45;margin:0 0 16px;max-width:650px;color:#fff;}
.why-hero.cinematic-hero .why-hero-heading h1{font-size:clamp(38px,4.6vw,70px);line-height:1.12;max-width:none;text-align:left;text-wrap:balance;}
.why-hero.cinematic-hero>.why-hero-copy{padding:42px clamp(36px,5vw,76px) 48px;display:grid;grid-template-columns:1fr 1fr;gap:22px 42px;}
.why-hero.cinematic-hero .why-hero-copy>p{color:var(--ink);font-size:17px;line-height:1.8;max-width:none;margin:0;}
.why-hero.cinematic-hero .why-hero-copy>p:first-child{grid-column:1/-1;}
/* Translation lengths get real space instead of being cropped or reduced to tiny type. */
html[data-language]:not([data-language=en]) .home-hero.cinematic-hero .hero-copy{max-width:900px;}
html[data-language]:not([data-language=en]) .home-hero.cinematic-hero .hero-line-primary{white-space:normal;}
html[data-language]:not([data-language=en]) .home-hero.cinematic-hero .hero-line-accent{font-size:clamp(52px,6.6vw,100px);white-space:normal;overflow-wrap:break-word;}
html[data-language]:is([data-language=ms],[data-language=id]) .home-hero.cinematic-hero .hero-line-accent{font-size:clamp(48px,5.8vw,86px);}
@media(min-width:981px){
 .home-hero.cinematic-hero .hero-copy{padding-bottom:145px;}
 .home-hero.cinematic-hero .hero-subtitle{position:absolute;left:0;bottom:0;}
}
@media(min-width:1700px){.cinematic-hero{margin-inline:max(32px,calc((100vw - 1560px)/2));}}
@media(max-width:1100px){
 body[data-page=index] .home-hero.cinematic-hero{min-height:560px;}
 .cinematic-hero .hero-media,.cinematic-why-stage>.video-media{width:270px;right:36px;}
 .home-hero.cinematic-hero .hero-subtitle{max-width:450px;}
 .cinematic-why-stage .why-hero-heading{max-width:calc(100% - 290px);}
}
@media(max-width:980px){
 .cinematic-hero{margin-top:16px;border-radius:20px;}
 body[data-page=index] .home-hero.cinematic-hero{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:150px 42px 34px;min-height:650px;}
 .home-hero.cinematic-hero::before{background:linear-gradient(0deg,rgba(12,18,19,.94),rgba(12,18,19,.6) 65%,rgba(12,18,19,.08));}
 .home-hero.cinematic-hero .hero-copy{max-width:100%;}
 body[data-page=index] .cinematic-hero .hero-copy h1{font-size:clamp(26px,4.7vw,38px);}
 body[data-page=index] .cinematic-hero .hero-line-accent{font-size:clamp(66px,9.6vw,94px);}
 .home-hero.cinematic-hero .hero-subtitle{max-width:560px;position:static;margin-top:26px;font-size:17px;}
 .cinematic-hero .hero-media{position:relative;right:auto;bottom:auto;align-self:flex-end;width:300px;max-width:100%;margin-top:28px;}
 body[data-page=about-us] .page-hero.cinematic-hero{padding:70px 42px;min-height:560px;}
 body[data-page=about-us] .cinematic-hero h1{font-size:clamp(48px,7.6vw,66px);}
 .why-hero.cinematic-hero>.cinematic-why-stage{display:block;padding:60px 42px 34px;min-height:560px;}
 .cinematic-why-stage .why-hero-heading{max-width:100%;}
 .why-hero.cinematic-hero .why-hero-heading h1{font-size:clamp(38px,6.5vw,56px);max-width:20ch;}
 .cinematic-why-stage>.video-media{position:relative;right:auto;bottom:auto;width:300px;max-width:100%;margin:34px 0 0 auto;}
 .why-hero.cinematic-hero>.why-hero-copy{padding:36px 42px 42px;gap:22px 30px;}
}
@media(max-width:700px){
 .cinematic-hero{margin:12px 12px 0;border-radius:16px;}
 body[data-page=index] .home-hero.cinematic-hero{padding:170px 24px 26px;min-height:0;}
 body[data-page=index] .cinematic-hero .hero-copy h1{font-size:clamp(18px,5.3vw,32px);line-height:1.2;letter-spacing:-.035em;}
 body[data-page=index] .cinematic-hero .hero-line-accent{font-size:clamp(39px,10.6vw,70px);letter-spacing:-.065em;margin-top:10px;}
 .home-hero.cinematic-hero .cinematic-backdrop img{object-position:42% top;}
 .home-hero.cinematic-hero .hero-subtitle{font-size:16px;line-height:1.7;margin-top:24px;}
 .cinematic-hero .hero-media{width:215px;margin-top:24px;}
 .cinematic-hero .video-play{width:48px;height:48px;}
 .cinematic-hero .video-fallback{font-size:12px;margin-top:11px;}
 body[data-page=about-us] .page-hero.cinematic-hero{padding:110px 24px 36px;min-height:0;align-items:flex-end;}
 body[data-page=about-us] .cinematic-hero::before{background:linear-gradient(0deg,rgba(12,18,19,.96),rgba(12,18,19,.65) 68%,rgba(12,18,19,.08));}
 body[data-page=about-us] .cinematic-hero h1{font-size:clamp(32px,10.8vw,48px);line-height:1.1;}
 html[data-language] body[data-page=about-us] .cinematic-hero .lead{font-size:16px;line-height:1.7;margin-top:24px;}
 .why-hero.cinematic-hero>.cinematic-why-stage{padding:135px 24px 26px;min-height:0;}
 .cinematic-why-stage::before{background:linear-gradient(0deg,rgba(12,18,19,.96),rgba(12,18,19,.7) 68%,rgba(12,18,19,.08));}
 .cinematic-why-stage .why-title-prefix{font-size:17px;line-height:1.5;}
 .cinematic-why-stage .eyebrow{font-size:10px;margin-bottom:18px;}
 .why-hero.cinematic-hero .why-hero-heading h1{font-size:clamp(32px,8.8vw,48px);line-height:1.15;}
 .cinematic-why-stage>.video-media{width:215px;margin-top:26px;}
 .why-hero.cinematic-hero>.why-hero-copy{padding:30px 24px 34px;display:block;}
 .why-hero.cinematic-hero .why-hero-copy>p{font-size:16px;line-height:1.75;}
 .why-hero.cinematic-hero .why-hero-copy>p+p{margin-top:22px;}
 html[data-language]:not([data-language=en]) .home-hero.cinematic-hero .hero-line-accent{font-size:clamp(32px,8.8vw,59px);}
 html[data-language]:is([data-language=ms],[data-language=id]) .home-hero.cinematic-hero .hero-line-accent{font-size:clamp(30px,8vw,55px);}
}
@keyframes cinematic-settle{from{transform:scale(1.07)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.cinematic-hero .cinematic-backdrop img{animation:none;}}

/* Video fills each complete hero surface, including narrower responsive layouts. */
.has-background-video>.cinematic-backdrop{inset:0;width:100%;height:100%;aspect-ratio:auto;}
.has-background-video .hero-background-video{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
body[data-page=index] .home-hero.has-background-video{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;aspect-ratio:auto;width:auto;height:clamp(520px,calc(100svh - 156px),780px);min-height:0;max-height:none;padding:clamp(42px,5vw,78px);}
.home-hero.has-background-video::before{background:linear-gradient(90deg,rgba(7,15,16,.79),rgba(7,15,16,.57) 56%,rgba(7,15,16,.08)),linear-gradient(0deg,rgba(7,15,16,.5),transparent 75%);}
.home-hero.has-background-video .hero-copy{padding:0;margin-top:-50px;max-width:930px;}
body[data-page=index] .has-background-video .hero-line-accent{font-size:clamp(52px,6.4vw,94px);color:var(--orange-dark);}
html[data-language]:not([data-language=en]) .home-hero.has-background-video .hero-line-accent{font-size:clamp(44px,5.6vw,82px);}
html[data-language]:is([data-language=ms],[data-language=id]) .home-hero.has-background-video .hero-line-accent{font-size:clamp(40px,4.9vw,72px);}
.home-hero.has-background-video .hero-subtitle{position:static;max-width:520px;margin-top:28px;}
.home-hero.has-background-video .hero-media{bottom:42px;}
.hero-background-toggle{position:absolute;left:clamp(42px,5vw,78px);bottom:24px;z-index:3;display:grid;place-items:center;width:38px;height:38px;padding:9px;border:1px solid #ffffff80;border-radius:50%;background:#10191b70;color:#fff;cursor:pointer;}
.hero-background-toggle[hidden]{display:none;}
.hero-background-toggle svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.2;fill:none;}
.hero-background-toggle .background-play{display:none;fill:currentColor;stroke:none;}
.hero-background-toggle[data-state=paused] .background-pause{display:none;}
.hero-background-toggle[data-state=paused] .background-play{display:block;}
.hero-background-toggle:focus-visible{outline:3px solid var(--orange);outline-offset:4px;}
@media(max-width:980px){
 body[data-page=index] .home-hero.has-background-video{aspect-ratio:auto;height:auto;min-height:0;max-height:none;padding:220px 42px 34px;justify-content:flex-end;}
 .home-hero.has-background-video::before{background:linear-gradient(0deg,rgba(7,15,16,.87),rgba(7,15,16,.63) 62%,rgba(7,15,16,.12));}
 .home-hero.has-background-video .hero-copy{margin-top:0;max-width:100%;}
 body[data-page=index] .has-background-video .hero-line-accent{font-size:clamp(48px,7.1vw,70px);}
 .home-hero.has-background-video .hero-media{bottom:auto;}
 .hero-background-toggle{left:auto;right:20px;top:20px;bottom:auto;}
}
@media(max-width:700px){
 body[data-page=index] .home-hero.has-background-video{padding:165px 24px 26px;}
 body[data-page=index] .has-background-video .hero-line-accent{font-size:clamp(32px,8.6vw,54px);}
 html[data-language]:not([data-language=en]) .home-hero.has-background-video .hero-line-accent{font-size:clamp(28px,7.8vw,48px);}
 html[data-language]:is([data-language=ms],[data-language=id]) .home-hero.has-background-video .hero-line-accent{font-size:clamp(26px,7.2vw,46px);}
 .home-hero.has-background-video .hero-subtitle{font-size:16px;line-height:1.7;margin-top:24px;}
 .home-hero.has-background-video::before{background:linear-gradient(0deg,rgba(7,15,16,.89),rgba(7,15,16,.67) 62%,rgba(7,15,16,.12));}
 .hero-background-toggle{right:16px;top:16px;width:34px;height:34px;padding:7px;}
}
