/* * FURAKSA STUDIO — Main website stylesheet * Extracted from the complete website without changing selectors or visual order. * Location: assets/css/style.css */ .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}#heritage .keris-content h2{max-width:100%;overflow-wrap:anywhere}@media(max-width:640px){#heritage .keris-content h2{font-size:clamp(34px,9.3vw,53px)}} /* FURAKSA contact: viewport-safe clickable email and phone */ .mobile-bottom{flex-wrap:wrap;gap:14px 24px;} .mobile-bottom>span{display:flex;flex-wrap:wrap;gap:7px 14px;min-width:0;max-width:100%;} .mobile-bottom a{color:inherit;text-decoration:none;overflow-wrap:anywhere;} .mobile-bottom a:hover,.mobile-bottom a:focus-visible{color:#e8edf2;} .footer-grid a{overflow-wrap:anywhere;} :root{--ink:#0a0a0a;--paper:#ece9e4;--orange:#ff4d00;--line:#ece9e426;--muted:#a4a19d;--padding:clamp(22px,3.5vw,56px)} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--paper);font-family:'Space Grotesk',Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}a{color:inherit;text-decoration:none}button{font:inherit}img{display:block;width:100%;height:100%;object-fit:cover}::selection{background:var(--orange);color:var(--ink)} .font-display,h1,h2,h3{font-family:Syne,Arial,sans-serif}.mono,.eyebrow,.micro{font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:.23em}.eyebrow{font-size:11px;color:var(--orange)}.micro{font-size:10px}.muted{color:var(--muted)}.orange{color:var(--orange)}.container{padding-inline:var(--padding)}.section{padding-block:clamp(88px,10vw,164px)}.underline{position:relative}.underline::after{content:'';position:absolute;bottom:-4px;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s}.underline:hover::after{transform:scaleX(1);transform-origin:left} #site-header{position:fixed;z-index:100;top:0;left:0;right:0;pointer-events:none}#site-header nav{height:77px;display:flex;align-items:center;justify-content:space-between;gap:25px;padding:0 var(--padding);pointer-events:auto;background:linear-gradient(#0a0a0acb,#0a0a0a00)}.brand{font:800 20px Syne,Arial,sans-serif;letter-spacing:-.05em}.brand sup{font-size:10px;vertical-align:super}.nav-links{display:flex;align-items:center;gap:clamp(15px,2.5vw,44px)}.nav-links a{font-size:10px;font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:.23em}.nav-end{display:flex;align-items:center;gap:22px}.nav-clock{font-size:10px;white-space:nowrap}.menu-toggle{display:none;width:36px;height:35px;border:0;background:transparent;color:var(--paper);align-items:center;justify-content:center;flex-direction:column;gap:7px;cursor:pointer}.menu-toggle span{width:25px;height:1px;background:currentColor;display:block;transition:transform .3s}.menu-open .menu-toggle span:first-child{transform:translateY(4px) rotate(45deg)}.menu-open .menu-toggle span:last-child{transform:translateY(-4px) rotate(-45deg)}.mobile-menu{display:none} .hero{min-height:100svh;padding:clamp(110px,12vh,160px) var(--padding) 36px;display:flex;flex-direction:column;justify-content:space-between;gap:50px}.hero-label{font-size:11px;color:var(--muted)}.hero-title{margin:0;font-size:clamp(82px,15.6vw,320px);font-weight:800;line-height:.83;letter-spacing:-.09em;white-space:nowrap}.hero-title .first{display:block}.hero-title .second{display:block;color:var(--orange);font-size:.85em;letter-spacing:-.09em}.hero-title sup{font-size:.21em;vertical-align:top;line-height:1.5;letter-spacing:0}.hero-bottom{display:flex;justify-content:space-between;align-items:end;gap:28px}.hero-bottom p{max-width:480px;font-size:clamp(14px,1.1vw,17px);line-height:1.7;color:#bab7b2;margin:0}.hero-status{display:flex;gap:36px;align-items:center;color:var(--muted);font-size:11px;white-space:nowrap}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--orange);margin-right:9px;animation:pulse 1.7s infinite}@keyframes pulse{50%{opacity:.3}} .marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:22px}.marquee-inner{display:flex;gap:0;width:max-content;animation:marquee 32s linear infinite}.marquee-item{font:700 clamp(26px,3vw,52px) Syne,Arial,sans-serif;text-transform:uppercase;white-space:nowrap;letter-spacing:-.06em}.marquee-item span{color:var(--orange);padding:0 42px;font-weight:400}@keyframes marquee{to{transform:translateX(-50%)}} .manifesto{padding-block:clamp(100px,12vw,210px)}.manifesto-statement{max-width:1230px;font:600 clamp(32px,5vw,78px)/1.15 Syne,Arial,sans-serif;letter-spacing:-.05em;margin:40px 0 70px}.manifesto-statement span{opacity:.17;transition:opacity .2s}.stats{border-top:1px solid var(--line);padding-top:40px;display:grid;grid-template-columns:repeat(4,1fr);gap:25px}.stats strong{display:block;font:800 clamp(45px,5.7vw,94px)/1 Syne,Arial,sans-serif;letter-spacing:-.06em}.stats small{display:block;color:var(--muted);font-size:10px;margin-top:15px} .split-gallery{height:220vh;position:relative}.split-sticky{height:100svh;position:sticky;top:0;display:grid;grid-template-columns:1fr 1.05fr 1fr;gap:6vw;align-items:center;overflow:hidden;padding-inline:6vw}.image-column{display:flex;flex-direction:column;gap:3vh;will-change:transform}.image-column .image-tile{height:39vh;overflow:hidden}.image-tile img{transition:transform .7s}.image-tile:hover img{transform:scale(1.05)}.split-heading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center;mix-blend-mode:difference}.split-heading .mono{font-size:11px;margin-bottom:14px}.split-heading h2{font:800 clamp(70px,9vw,180px)/.85 Syne,Arial,sans-serif;text-transform:uppercase;letter-spacing:-.075em;margin:0}.split-heading h2 span{color:var(--orange)} .section-head{display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:55px}.section-head h2{font:800 clamp(50px,6vw,104px)/.95 Syne,Arial,sans-serif;letter-spacing:-.07em;text-transform:uppercase;margin:0}.section-head a,.section-head span{font-size:11px}.work-list{border-top:1px solid var(--line)}.work-row{display:grid;grid-template-columns:60px minmax(0,1fr) 210px 80px;align-items:center;gap:16px;border-bottom:1px solid var(--line);padding:36px 0;position:relative}.work-row .nr{font-size:11px;color:var(--muted)}.work-row h3{font:700 clamp(23px,3.6vw,59px)/1 Syne,Arial,sans-serif;text-transform:uppercase;letter-spacing:-.055em;margin:0;transition:transform .35s}.work-row:hover h3{transform:translateX(24px)}.work-row .category,.work-row .year{font-size:10px;color:var(--muted)}.work-row .year{text-align:right}.mobile-thumb{display:none}.float-preview{position:fixed;z-index:75;width:25vw;max-width:420px;min-width:230px;aspect-ratio:3/2;pointer-events:none;opacity:0;visibility:hidden;transform:translate(-50%,-50%) scale(.85);transition:opacity .2s,transform .2s}.float-preview.on{visibility:visible;opacity:1;transform:translate(-50%,-50%) scale(1)} .image-break{position:relative;height:90vh;min-height:520px;overflow:hidden}.image-break img{position:absolute;inset:-10%;width:120%;height:120%}.image-break::after{content:'';position:absolute;inset:0;background:#0007}.break-overlay{position:absolute;z-index:1;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}.break-overlay blockquote{font:700 clamp(31px,5vw,78px)/1.12 Syne,Arial,sans-serif;letter-spacing:-.055em;margin:28px 0}.break-overlay .mono{font-size:10px;color:#ddd} .service-list,.award-list{border-top:1px solid var(--line)}.service-row{border-bottom:1px solid var(--line);display:grid;grid-template-columns:70px 1fr 1fr;gap:20px;padding:35px 10px;align-items:center;transition:background .35s,color .35s}.service-row:hover{background:var(--paper);color:var(--ink)}.service-row h3{font:700 clamp(28px,3.5vw,57px)/1 Syne,Arial,sans-serif;letter-spacing:-.055em;text-transform:uppercase;margin:0}.service-row .description{font-size:14px;line-height:1.7;color:var(--muted);max-width:450px}.service-row:hover .description,.service-row:hover .micro{color:#555}.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.tags span{display:inline-block;padding:7px 11px;border:1px solid currentColor;font:10px 'Space Mono',monospace;letter-spacing:.08em;opacity:.65} .awards-wrap{display:grid;grid-template-columns:minmax(200px,1fr) 2fr;gap:8vw}.awards-intro h2{font:800 clamp(46px,5vw,80px)/.94 Syne,Arial,sans-serif;letter-spacing:-.055em;text-transform:uppercase;margin:22px 0}.awards-intro p:last-child{max-width:310px;color:var(--muted);font-size:14px;line-height:1.7}.award-row{display:grid;grid-template-columns:2fr 1fr 55px;align-items:center;gap:15px;padding:27px 10px;border-bottom:1px solid var(--line)}.award-row strong{font:700 clamp(18px,2vw,32px) Syne,Arial,sans-serif;letter-spacing:-.03em}.award-row .mono{font-size:10px}.award-row .year{color:var(--orange)} .journal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.journal-card .thumb{aspect-ratio:4/3;overflow:hidden;position:relative}.journal-card .thumb img,.project-card img,.article-row img{transition:transform .6s}.journal-card:hover img,.project-card:hover img,.article-row:hover img{transform:scale(1.06)}.journal-card .badge{position:absolute;top:14px;left:14px;background:#0a0a0ad9;padding:8px 11px;color:var(--paper);font-size:10px}.journal-card .date{font-size:10px;margin-top:22px}.journal-card h3{font:700 clamp(22px,2.4vw,35px)/1.2 Syne,Arial,sans-serif;letter-spacing:-.03em;margin:11px 0 14px}.journal-card .read{font-size:10px;color:var(--muted)} footer{border-top:1px solid var(--line);padding:110px var(--padding) 28px}footer .talk{display:block;font:800 clamp(95px,13vw,260px)/.86 Syne,Arial,sans-serif;letter-spacing:-.08em;text-transform:uppercase;margin-top:40px;transition:color .35s}footer .talk span{display:block;color:var(--orange);transition:color .35s}footer .talk:hover{color:var(--orange)}footer .talk:hover span{color:var(--paper)}.footer-grid{border-top:1px solid var(--line);padding-top:45px;margin-top:95px;display:grid;grid-template-columns:repeat(4,1fr);gap:30px}.footer-grid p{font-size:14px;line-height:1.6;color:var(--muted);margin-top:15px}.footer-bottom{margin-top:65px;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:10px} .subpage{padding-top:clamp(130px,12vw,185px);min-height:75vh}.page-heading{display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:60px}.page-heading h1{font:800 clamp(55px,8vw,140px)/.9 Syne,Arial,sans-serif;letter-spacing:-.075em;text-transform:uppercase;margin:22px 0 0}.page-heading .micro{color:var(--muted)}.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:80px 28px;padding-bottom:120px}.project-card:nth-child(even){margin-top:80px}.project-card .thumb{aspect-ratio:3/2;overflow:hidden;position:relative}.project-card .badge{position:absolute;top:16px;left:16px;background:#0a0a0ad9;padding:8px 12px}.project-card .card-line{display:flex;justify-content:space-between;align-items:baseline;margin-top:22px;gap:12px}.project-card h2{font:700 clamp(24px,3vw,48px) Syne,Arial,sans-serif;text-transform:uppercase;letter-spacing:-.045em;margin:0}.project-card h2 small{font:12px 'Space Mono',monospace;color:var(--orange);margin-right:14px}.project-card .year{font-size:11px;color:var(--muted)} .back-link{font:11px 'Space Mono',monospace;text-transform:uppercase;letter-spacing:.25em;color:var(--muted)}.detail-title{font:800 clamp(54px,9vw,170px)/.92 Syne,Arial,sans-serif;text-transform:uppercase;letter-spacing:-.075em;margin:40px 0 28px}.detail-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;border-top:1px solid var(--line);padding-top:25px}.detail-meta dt{font:10px 'Space Mono',monospace;text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}.detail-meta dd{margin:10px 0 0;font-size:14px}.detail-hero{margin-top:50px;aspect-ratio:16/9;overflow:hidden}.detail-brief{padding-block:95px;display:grid;grid-template-columns:1fr 2fr;gap:45px}.detail-brief .copy{max-width:860px}.detail-brief p:not(.eyebrow){font-size:clamp(17px,1.7vw,25px);line-height:1.65;color:#cbc7c2}.detail-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:25px;padding-bottom:110px}.detail-gallery .tile{aspect-ratio:3/2;overflow:hidden}.next-link{display:block;border-top:1px solid var(--line);padding:65px var(--padding) 100px}.next-link .eyebrow{color:var(--muted)}.next-link strong{display:block;font:800 clamp(45px,7vw,120px)/.95 Syne,Arial,sans-serif;text-transform:uppercase;letter-spacing:-.06em;margin-top:20px;transition:color .3s}.next-link:hover strong{color:var(--orange)} .article-list{border-top:1px solid var(--line);padding-bottom:120px}.article-row{display:grid;grid-template-columns:220px 1fr 55px;gap:40px;align-items:center;padding:42px 0;border-bottom:1px solid var(--line)}.article-row .thumb{aspect-ratio:4/3;overflow:hidden}.article-row h2{font:700 clamp(25px,3vw,44px)/1.12 Syne,Arial,sans-serif;letter-spacing:-.045em;margin:13px 0}.article-row .excerpt{color:var(--muted);max-width:700px;font-size:14px;line-height:1.7}.article-arrow{font-size:40px;color:var(--muted);transition:transform .3s,color .3s}.article-row:hover .article-arrow{transform:translateX(9px);color:var(--orange)}.article-title{font:800 clamp(40px,5.7vw,90px)/1.05 Syne,Arial,sans-serif;letter-spacing:-.06em;margin:20px 0}.article-intro{max-width:900px;margin:50px auto 0}.article-intro>p{font-size:clamp(17px,1.8vw,24px);line-height:1.6;color:var(--muted)}.article-body{max-width:850px;margin:0 auto;padding-block:90px}.article-body p{font-size:clamp(17px,1.5vw,23px);line-height:1.75;color:#c9c5c0}.article-body .dropcap:first-letter{font:800 95px/.8 Syne,Arial,sans-serif;float:left;padding:10px 12px 0 0;color:var(--orange)}.article-body blockquote{font:700 clamp(26px,3.4vw,52px)/1.2 Syne,Arial,sans-serif;letter-spacing:-.04em;border-left:2px solid var(--orange);padding-left:28px;margin:58px 0}.article-credit{margin-top:60px;padding-top:32px;border-top:1px solid var(--line);color:var(--muted)}.not-found{text-align:center;padding:160px 30px 100px}.not-found h1{font:800 45px Syne} .reveal{opacity:0;transform:translateY(35px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}.reveal.visible{opacity:1;transform:translateY(0)}.grain:after{content:'';position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.026;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.cursor{position:fixed;top:0;left:0;z-index:250;width:12px;height:12px;border-radius:50%;background:var(--orange);pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:difference;transition:width .15s,height .15s,opacity .15s}.cursor.big{width:36px;height:36px;opacity:.75} @media(max-width:900px){.nav-links{display:none}.menu-toggle{display:flex}.mobile-menu{display:flex;position:fixed;z-index:95;inset:0;background:var(--ink);padding:115px var(--padding) 42px;flex-direction:column;justify-content:space-between;opacity:0;visibility:hidden;transform:translateY(-25px);transition:.35s}.menu-open .mobile-menu{visibility:visible;opacity:1;transform:translateY(0)}.mobile-menu .menu-items{display:flex;flex-direction:column}.mobile-menu a{font:800 clamp(40px,9vw,75px) Syne,Arial,sans-serif;text-transform:uppercase;letter-spacing:-.06em;border-bottom:1px solid var(--line);padding:15px 0}.mobile-menu a span{font:11px 'Space Mono',monospace;color:var(--orange);vertical-align:middle;margin-right:20px}.mobile-bottom{display:flex;justify-content:space-between;font:10px 'Space Mono',monospace;letter-spacing:.1em;color:var(--muted)}.work-row{grid-template-columns:40px 1fr 70px}.work-row .category{display:none}.split-sticky{grid-template-columns:1fr 1fr;gap:3vh;padding:0 3vh}.split-heading h2{font-size:12vw}.service-row{grid-template-columns:50px 1fr}.service-row .service-right{grid-column:2}.awards-wrap{grid-template-columns:1fr;gap:38px}.journal-grid{gap:16px}.article-row{grid-template-columns:160px 1fr 30px;gap:18px}} @media(max-width:640px){.cursor{display:none}.hero{min-height:85svh;padding-top:110px;gap:45px}.hero-title{font-size:18.1vw}.hero-title .second{font-size:.87em}.hero-bottom{flex-direction:column;align-items:start}.hero-status{width:100%;justify-content:space-between}.hero-status .scroll-label{display:none}.stats{grid-template-columns:1fr 1fr;gap:36px 14px}.stats strong{font-size:51px}.split-gallery{height:170vh}.image-column .image-tile{height:34vh}.split-heading h2{font-size:13vw}.section-head{margin-bottom:34px}.section-head h2{font-size:45px}.section-head a,.section-head span{font-size:9px}.work-row{padding:25px 0;grid-template-columns:30px 1fr 55px;gap:8px}.work-row h3{font-size:24px}.mobile-thumb{display:block;grid-column:1/-1;aspect-ratio:3/2;margin-top:15px;overflow:hidden}.float-preview{display:none}.image-break{height:65vh;min-height:440px}.service-row{padding:26px 4px;grid-template-columns:35px 1fr;gap:12px}.service-row h3{font-size:30px}.award-row{grid-template-columns:1fr 50px}.award-row .org{display:none}.journal-grid{grid-template-columns:1fr;gap:42px}.journal-card .thumb{aspect-ratio:4/3}.footer-grid{grid-template-columns:repeat(2,1fr)}footer .talk{font-size:16vw}.project-grid{grid-template-columns:1fr;gap:48px}.project-card:nth-child(even){margin-top:0}.detail-meta{grid-template-columns:1fr 1fr}.detail-brief{grid-template-columns:1fr;padding-block:60px;gap:10px}.detail-gallery{grid-template-columns:1fr}.article-row{grid-template-columns:1fr;gap:18px}.article-row .thumb{aspect-ratio:3/2}.article-arrow{display:none}.article-intro{margin-top:40px}.article-body{padding-block:58px}.next-link{padding-block:55px 80px}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}} /* KERN — premium motion system. Native touch scrolling remains untouched. */ html{scroll-padding-top:84px;overscroll-behavior-y:none} :root{--kern-ease:cubic-bezier(.22,1,.36,1)} .hero{overflow:hidden;isolation:isolate} .hero-title .hero-line-mask{display:block;overflow:hidden;padding:.09em .03em .13em;margin:-.09em -.03em -.13em} .hero-title .hero-line-mask .first,.hero-title .hero-line-mask .second{display:block} .hero-title .hero-letter{display:inline-block;transform-origin:50% 100%;animation:kern-letter-enter 1.15s var(--kern-ease) both;animation-delay:var(--letter-delay);will-change:transform} .hero-title .hero-letter.register{font-size:.21em;vertical-align:top;line-height:1.5;letter-spacing:0} @keyframes kern-letter-enter{from{transform:translate3d(0,112%,0) rotate(4deg);opacity:.35}to{transform:translate3d(0,0,0) rotate(0);opacity:1}} .hero-label{animation:kern-caption-enter .85s .85s var(--kern-ease) both} .hero-bottom>p{animation:kern-caption-enter .95s 1.05s var(--kern-ease) both} .hero-status{animation:kern-caption-enter .95s 1.2s var(--kern-ease) both} @keyframes kern-caption-enter{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:translate3d(0,0,0)}} .text-slide{opacity:0;transform:translate3d(0,55px,0);clip-path:inset(100% 0 0 0);transition:opacity .9s var(--kern-ease),transform 1s var(--kern-ease),clip-path 1s var(--kern-ease);will-change:transform,clip-path} .text-slide.visible{opacity:1;transform:translate3d(0,0,0);clip-path:inset(0 0 0 0)} .reveal{transition-duration:.95s;transition-timing-function:var(--kern-ease);transition-delay:var(--reveal-delay,0s)} .stats>div,.footer-grid>div{opacity:0;transform:translate3d(0,28px,0);transition:opacity .8s var(--kern-ease),transform .8s var(--kern-ease);transition-delay:var(--reveal-delay,0s)} .stats>div.visible,.footer-grid>div.visible{opacity:1;transform:translate3d(0,0,0)} .image-tile{clip-path:inset(0 0 14% 0);opacity:.55;transition:clip-path 1.2s var(--kern-ease),opacity 1.2s var(--kern-ease);transition-delay:var(--reveal-delay,0s)} .image-tile.visible{clip-path:inset(0 0 0 0);opacity:1} .image-tile img{transform:scale(1.09);transition:transform 1.3s var(--kern-ease)} .image-tile.visible img{transform:scale(1)} .image-tile:hover img{transform:scale(1.05)} #site-header nav{transition:background .45s ease} body.is-scrolled #site-header nav{background:linear-gradient(#0a0a0af4,#0a0a0aa9)} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.hero-letter,.hero-label,.hero-bottom>p,.hero-status{animation:none!important;opacity:1!important;transform:none!important}.text-slide,.stats>div,.footer-grid>div,.image-tile{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}.image-tile img{transform:none!important;transition:none!important}} /* ======================================================= FURAKSA / NEO-NUSANTARA INDUSTRIAL BRAND IDENTITY Core palette: #090A0C / #343A40 / #9299A2 / #D9DDE2 / #F3F4F5 Logo artwork is isolated from the user-provided brand reference. ======================================================= */ :root{--ink:#090A0C;--paper:#F3F4F5;--orange:#D9DDE2;--line:#d9dde22b;--muted:#9299A2;--brand-secondary:#343A40} html{scroll-behavior:smooth}body{background:var(--ink);color:var(--paper)} #site-header nav{background:linear-gradient(180deg,#090a0cf5,#090a0c00)} body.is-scrolled #site-header nav{background:linear-gradient(180deg,#090a0cf9,#090a0ce6)} .brand{display:flex;align-items:center;justify-content:center;width:clamp(117px,11vw,155px);height:42px;flex-shrink:0} .brand-mark{display:block;width:100%;height:auto;max-height:42px;object-fit:contain;filter:drop-shadow(0 0 1px #ffffff08)} #site-header .nav-links a:hover{color:#fff} .hero.furaksa-hero{padding-top:125px;padding-bottom:40px;position:relative;min-height:100svh;gap:28px;overflow:hidden;isolation:isolate;justify-content:space-between;background:linear-gradient(180deg,rgba(5,6,8,.34),rgba(5,6,8,.78) 46%,rgba(5,6,8,.96) 100%),radial-gradient(ellipse 46% 56% at 52% 42%,#d9dde214 0,transparent 70%),#07080a} .furaksa-hero::before{content:'';position:absolute;inset:0;z-index:-3;pointer-events:none;background-image:var(--hero-board);background-size:cover;background-position:center center;background-repeat:no-repeat;opacity:.58;filter:saturate(.8) contrast(1.08) brightness(.84)} .furaksa-hero::after{content:'';position:absolute;z-index:-2;inset:0;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,.01) 19%,rgba(235,239,244,.26) 36%,rgba(255,255,255,.05) 50%,transparent 64%),radial-gradient(ellipse 50% 28% at 50% 41%,rgba(219,223,231,.18),transparent 68%),linear-gradient(to bottom,rgba(5,6,8,.14) 0%,rgba(5,6,8,.18) 18%,rgba(5,6,8,.82) 100%)} .furaksa-hero .hero-noise{position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.12) 0 1px,transparent 2px),radial-gradient(circle at 68% 34%,rgba(255,255,255,.16) 0 1.1px,transparent 2.2px),radial-gradient(circle at 78% 20%,rgba(255,255,255,.12) 0 1px,transparent 2px),radial-gradient(circle at 30% 70%,rgba(255,255,255,.08) 0 1px,transparent 2.1px),radial-gradient(circle at 82% 78%,rgba(255,255,255,.08) 0 1px,transparent 2.1px);background-size:320px 320px,390px 390px,260px 260px,340px 340px,420px 420px;mix-blend-mode:screen;opacity:.7} .furaksa-topline{display:flex;align-items:center;justify-content:space-between;gap:18px} .hero-label{font-size:10px;letter-spacing:.20em;color:#d6dbe2} .hero-top-right{font-size:10px;color:#d9dde2;letter-spacing:.16em} .tiny-star{display:inline-block;color:#f3f5f8;margin-left:25px;font-size:14px} .furaksa-hero-stage{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr) minmax(150px,220px);gap:26px;align-items:center;flex:1;min-height:0} .furaksa-side{display:flex;flex-direction:column;gap:14px;align-self:stretch;justify-content:center;padding-bottom:18px} .furaksa-side .mono{font-size:10px;letter-spacing:.22em;color:#d3d8df} .hero-side-title{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#f4f6f8} .hero-side-list{display:grid;gap:12px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#cfd4db} .hero-side-list span{display:block} .hero-side-mark{width:1px;height:88px;background:linear-gradient(to bottom,transparent,#edf1f4,transparent);position:relative;opacity:.8;margin:4px 0 8px} .hero-side-mark::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:14px;transform:translate(-50%,-50%) rotate(45deg);border:1px solid rgba(237,241,244,.7);background:rgba(5,6,8,.2)} .hero-side-note{padding-top:10px;border-top:1px solid rgba(235,239,244,.18);line-height:1.8} .furaksa-hero-center{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;gap:clamp(12px,2.5vh,28px);padding-top:clamp(22px,4vh,54px)} .hero-overline{font-size:10px;letter-spacing:.32em;display:flex;align-items:center;justify-content:center;gap:17px;color:#e4e8ed;opacity:0;animation:furaksaCaptionEnter .9s .2s forwards;text-align:center;text-shadow:0 0 22px rgba(255,255,255,.14)} .hero-rule{display:block;width:clamp(20px,5vw,75px);height:1px;background:linear-gradient(to right,transparent,#edf1f4)} .hero-rule:last-child{transform:scaleX(-1)} .furaksa-wordmark{margin:0;width:min(100%,1450px);display:flex;align-items:center;justify-content:center;flex-shrink:0} .furaksa-logo-mask{display:block;width:100%;overflow:hidden;padding:4px 0} .furaksa-hero-logo{width:100%;max-height:min(48vh,560px);object-fit:contain;display:block;opacity:0;transform:translate3d(0,18%,0) scale(.98);filter:blur(9px) drop-shadow(0 10px 30px rgba(0,0,0,.35));animation:furaksaLogoEnter 1.45s cubic-bezier(.16,1,.3,1) .16s forwards;will-change:transform,opacity,filter} .hero-tagline{display:flex;gap:clamp(12px,3vw,40px);align-items:center;justify-content:center;font-family:'Space Mono',monospace;font-size:clamp(10px,1vw,15px);letter-spacing:.34em;text-align:center} .hero-tagline .hero-line-mask{display:block;overflow:hidden} .brand-tagline-line{display:block;opacity:0;transform:translateY(115%);animation:furaksaCaptionEnter .9s cubic-bezier(.2,1,.3,1) .78s forwards;color:#eef1f5} .brand-tagline-line.two{animation-delay:.96s;color:#dfe4ea} .hero-bottom p{font-size:clamp(13px,1.1vw,16px);max-width:520px;line-height:1.7;color:#e1e5eb;text-shadow:0 0 18px rgba(0,0,0,.28)} .hero-bottom .hero-status{color:#d6dbe1;gap:16px} .dot{background:#f5f7fa;box-shadow:0 0 12px #d9dde285} .scroll-label{letter-spacing:.09em} .hero-corner{position:absolute;width:32px;height:32px;pointer-events:none;opacity:.6} .hero-corner-a{left:var(--padding);top:calc(50% - 16px);border-left:1px solid #e3e7ec;border-top:1px solid #e3e7ec} .hero-corner-b{right:var(--padding);top:calc(50% - 16px);border-right:1px solid #e3e7ec;border-bottom:1px solid #e3e7ec} .marquee{background:#D9DDE2;color:#090A0C;border-color:#D9DDE2} .marquee-item span{color:#6f757d} .manifesto-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px} .manifesto-emblem{width:clamp(65px,11vw,125px);height:clamp(65px,11vw,125px);object-fit:contain;opacity:.85;filter:drop-shadow(0 0 18px #d9dde21b)} .split-heading h2 span{color:#D9DDE2} .concept-notice{font-size:10px;letter-spacing:.10em;color:var(--muted);margin:-32px 0 30px;line-height:1.6;max-width:850px} .image-break::after{background:linear-gradient(90deg,#090a0cdf,#10141bc2,#090a0cde)} .break-overlay blockquote{text-shadow:0 3px 28px #090a0c} .service-row:hover{background:#d9dde2;color:#090a0c} .award-row{grid-template-columns:minmax(160px,1.3fr) 1.4fr 40px} .award-row .org{font-size:9px;line-height:1.7} footer .footer-grid small{display:inline-block;font-size:11px;color:var(--muted);margin-top:11px;line-height:1.4} footer .footer-bottom{gap:12px;flex-wrap:wrap} .float-preview{border:1px solid #d9dde250;box-shadow:0 20px 60px #0009} .text-slide{clip-path:none} /* ensure scroll-triggered titles register with IntersectionObserver */ @keyframes furaksaLogoEnter{0%{opacity:0;transform:translate3d(0,18%,0) scale(.98);filter:blur(9px)}100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}} @keyframes furaksaCaptionEnter{0%{opacity:0;transform:translateY(110%)}100%{opacity:1;transform:translateY(0)}} @media(max-width:900px){.brand{width:120px}.hero.furaksa-hero{padding-top:110px}.furaksa-hero-stage{grid-template-columns:1fr;gap:18px}.furaksa-side{display:none}.furaksa-hero-center{gap:23px}.furaksa-hero-logo{max-height:40vh}.hero-tagline{font-size:10px}.hero-top-right{display:none}} @media(max-width:640px){ .brand{width:105px}.hero.furaksa-hero{padding-top:105px;min-height:100svh;gap:24px;padding-bottom:27px} .furaksa-hero-center{justify-content:center;gap:28px;padding-top:0} .furaksa-wordmark{width:calc(100% + 10px)}.furaksa-hero-logo{max-height:37vh} .hero-overline{letter-spacing:.13em;font-size:8px;gap:7px}.hero-rule{width:18px} .hero-tagline{font-size:10px;letter-spacing:.14em;line-height:1.7;flex-direction:column;gap:3px} .furaksa-hero .hero-bottom{flex-direction:column;align-items:flex-start;gap:25px} .furaksa-hero .hero-bottom p{font-size:12px;margin:0} .furaksa-hero .hero-status{font-size:9px;width:100%;justify-content:space-between} .hero-corner{width:18px;height:18px;top:40%} .manifesto-emblem{width:70px;height:70px} .concept-notice{margin:-25px 0 25px} .awards-wrap .award-row{grid-template-columns:1fr;gap:6px}.award-row .year{display:none} } @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.furaksa-hero-logo,.brand-tagline-line,.hero-overline{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}} /* FURAKSA / CINEMATIC ASSET INTEGRATION — VERSION 2.0 */ .hero.furaksa-hero.cinematic-hero{ min-height:100svh;min-height:100dvh;padding:108px var(--padding) 31px; background:#080a0d;display:flex;flex-direction:column;gap:14px; position:relative;isolation:isolate;overflow:hidden; } .hero.furaksa-hero.cinematic-hero::before{display:none} .hero.furaksa-hero.cinematic-hero::after{z-index:-1;inset:0;background:linear-gradient(180deg,rgba(6,7,10,.19) 0%,rgba(8,10,13,.10) 27%,rgba(6,7,10,.45) 73%,#090a0c 100%),radial-gradient(ellipse 52% 65% at 50% 46%,rgba(35,39,47,.08),rgba(3,4,6,.44) 96%)} .cinematic-hero .hero-noise{z-index:0;opacity:.45;mix-blend-mode:soft-light} .hero-motion-layer{position:absolute;inset:-3%;z-index:-3;overflow:hidden;pointer-events:none;transform:translate3d(calc(var(--fx-x,0px)*-.7),calc(var(--fx-y,0px)*-.7 + var(--hero-scroll,0px)),0) scale(1.035);will-change:transform} .hero-motion-layer .ambient-poster,.hero-motion-layer .atmosphere-video{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;object-position:center} .hero-motion-layer .ambient-poster{opacity:.8;filter:brightness(.64) contrast(1.1)} .hero-motion-layer .atmosphere-video{opacity:.73;filter:brightness(.65) contrast(1.17) saturate(.75)} .cinematic-hero .furaksa-topline{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:20px} .cinematic-hero .hero-label,.cinematic-hero .hero-top-right{margin:0;font-size:9px;line-height:1.6;letter-spacing:.19em;color:#d9dfe7;text-shadow:0 2px 12px rgba(0,0,0,.8)} .cinematic-hero .tiny-star{margin-left:14px} .cinematic-stage{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:0;min-height:0;padding-top:2vh} .cinematic-eyebrow{font-family:'Space Mono',monospace;font-size:clamp(8px,.77vw,11px);letter-spacing:.34em;color:#cdd4dc;text-shadow:0 1px 9px #080a0d;animation:furaksaCaptionEnter .85s .20s both} .cinematic-logo-frame{width:min(100%,min(1190px,78vw));aspect-ratio:16/9;position:relative;display:grid;place-items:center;margin:-4px 0 -23px;transform:translate3d(var(--fx-x,0px),var(--fx-y,0px),0);transition:transform .65s cubic-bezier(.16,1,.3,1)} .cinematic-logo-frame::before{content:'';position:absolute;inset:16% 4% 14%;background:radial-gradient(ellipse at center,rgba(176,188,203,.075),transparent 64%);pointer-events:none} .cinematic-logo-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:screen;opacity:0;pointer-events:none} .cinematic-logo-still{position:absolute;left:50%;top:50%;max-width:76%;max-height:82%;width:76%;height:auto;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 0 18px rgba(255,255,255,.05));opacity:0;transition:opacity .3s} .cinematic-hero.is-logo-playing .cinematic-logo-video{opacity:1} .cinematic-hero.logo-fallback .cinematic-logo-still{opacity:1;animation:furaksaLogoEnter 1.35s .1s both} .cinematic-hero.logo-fallback .cinematic-logo-video{opacity:0} .cinematic-tagline{display:block;font:400 clamp(12px,1.25vw,17px)/1.4 'Space Mono',monospace;letter-spacing:clamp(.18em,.42vw,.46em);color:#f0f2f5;margin:0 0 10px;opacity:0;animation:cinematic-tagline-reveal 1.1s 1.15s cubic-bezier(.18,1,.3,1) both;text-shadow:0 0 18px #090a0c} .cinematic-brand-promise{font:400 clamp(8px,.75vw,10px)/1.9 'Space Mono',monospace;text-transform:uppercase;letter-spacing:.20em;color:#afb7c0;margin:0 0 25px;opacity:0;animation:cinematic-tagline-reveal 1.05s 1.48s both} .hero-cta{font:600 10px/1 'Space Mono',monospace;letter-spacing:.18em;display:inline-flex;align-items:center;gap:26px;min-height:48px;padding:0 20px;color:#090a0c;background:#e7eaee;border:1px solid #e7eaee;border-radius:2px;text-transform:uppercase;opacity:0;animation:cinematic-tagline-reveal .95s 1.9s both;transition:background .32s,color .32s,transform .35s;z-index:5} .hero-cta:hover,.hero-cta:focus-visible{background:transparent;color:#f4f6fa;transform:translateY(-3px)} .hero-cta .arrow{font-size:18px;font-weight:300;transition:transform .3s} .hero-cta:hover .arrow{transform:translate(4px,-3px)} .cinematic-hero .hero-bottom{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:end;gap:18px;border-top:1px solid rgba(218,225,234,.19);padding-top:22px} .cinematic-hero .hero-bottom p{font:400 10px/1.9 'Space Mono',monospace;text-transform:uppercase;letter-spacing:.12em;color:#d2d8df;max-width:370px} .cinematic-hero .hero-status{font:400 10px/1.9 'Space Mono',monospace;letter-spacing:.12em;color:#d2d8df;text-align:right} .cinematic-hero .hero-status .scroll-label{display:inline-block} .cinematic-hero .hero-corner{display:none} @keyframes cinematic-tagline-reveal{from{opacity:0;transform:translate3d(0,28px,0);filter:blur(7px)}to{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}} /* A single focused keris chapter, before the existing Selected Work portfolio */ .keris-chapter{position:relative;min-height:clamp(570px,82vh,980px);background:#07080a;isolation:isolate;overflow:hidden;display:flex;align-items:center;padding:clamp(60px,9vw,140px) var(--padding);border-bottom:1px solid #d9dde218} .keris-chapter::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(90deg,transparent 14%,rgba(8,10,13,.05) 45%,rgba(8,10,13,.92) 78%,#080a0d 100%),linear-gradient(0deg,#080a0d 0%,transparent 22%,transparent 76%,#080a0d 100%)} .keris-chapter .keris-image-wrap{position:absolute;inset:0;z-index:-2;overflow:hidden} .keris-chapter .keris-image{display:block;position:absolute;width:100%;height:100%;inset:0;object-fit:cover;object-position:36% center;transform:scale(calc(1.12 - var(--keris-progress,0)*.07));filter:saturate(.62) contrast(1.08) brightness(.68);will-change:transform} .keris-chapter .keris-content{position:relative;margin-left:auto;width:min(35vw,510px);padding:20px 0 30px;z-index:2;text-shadow:0 2px 20px #090a0c} .keris-chapter .keris-eyebrow{font:400 10px/1.8 'Space Mono',monospace;letter-spacing:.24em;color:#bec8d4;margin:0 0 27px} .keris-chapter h2{font:700 clamp(43px,5.0vw,88px)/.92 Syne,Arial,sans-serif;letter-spacing:-.065em;text-transform:uppercase;margin:0 0 33px;color:#f0f2f5} .keris-chapter h2 em{font-style:normal;color:#aeb7c2} .keris-chapter .keris-copy{max-width:360px;font-size:clamp(14px,1.03vw,17px);line-height:1.85;color:#cbd1d8;margin:0 0 28px} .keris-chapter .keris-link{display:inline-flex;align-items:center;gap:12px;font:400 11px/1.5 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid #d9dde2a0;padding-bottom:10px;color:#f0f2f5;transition:gap .28s} .keris-chapter .keris-link:hover{gap:22px} .keris-chapter .keris-disclosure{position:absolute;bottom:24px;left:var(--padding);font:400 9px/1.6 'Space Mono',monospace;letter-spacing:.12em;color:#afb6bf;max-width:370px;z-index:2} .keris-chapter .keris-deco{position:absolute;top:55px;left:var(--padding);font:10px 'Space Mono',monospace;letter-spacing:.27em;color:#d0d6de;z-index:2} @media(max-width:900px){ .hero.furaksa-hero.cinematic-hero{padding-top:96px} .cinematic-logo-frame{width:min(100%,95vw);margin:3px 0 -15px} .cinematic-brand-promise{margin-bottom:25px} .keris-chapter .keris-content{width:min(45vw,430px)} .keris-chapter::after{background:linear-gradient(90deg,transparent 14%,rgba(8,10,13,.2) 41%,rgba(8,10,13,.94) 77%,#080a0d 100%),linear-gradient(0deg,#080a0d,transparent 22%,transparent 77%,#080a0d)} } @media(max-width:640px){ .hero.furaksa-hero.cinematic-hero{gap:0;padding-top:99px;padding-bottom:24px;min-height:100svh;min-height:100dvh} .cinematic-hero .hero-label{font-size:8px;letter-spacing:.09em} .cinematic-hero .hero-top-right{display:none} .cinematic-stage{justify-content:center;min-height:0;gap:0;padding-bottom:4vh} .cinematic-eyebrow{font-size:7px;letter-spacing:.13em} .cinematic-logo-frame{width:calc(100% + 12vw);max-width:none;flex-shrink:0;margin:5px 0 -6px;aspect-ratio:16/10} .cinematic-logo-still{max-width:76%} .cinematic-tagline{font-size:11px;letter-spacing:.19em;margin-top:12px} .cinematic-brand-promise{font-size:8px;letter-spacing:.07em;margin-top:3px;margin-bottom:27px} .hero-cta{font-size:10px;min-height:46px;padding:0 16px;gap:20px} .cinematic-hero .hero-bottom{gap:8px;align-items:end;flex-direction:row;padding-top:15px} .cinematic-hero .hero-bottom p{font-size:8px;letter-spacing:.05em;line-height:1.7;max-width:55%;margin:0} .cinematic-hero .hero-status{font-size:8px;line-height:1.6;width:auto;gap:0;max-width:42%} .cinematic-hero .hero-status .scroll-label{display:block} .keris-chapter{min-height:95svh;align-items:end;padding:55px var(--padding) 70px} .keris-chapter .keris-image{object-position:35% 19%;transform:scale(1.04);filter:saturate(.63) contrast(1.06) brightness(.64)} .keris-chapter::after{background:linear-gradient(180deg,#080a0d80 0%,transparent 20%,rgba(8,10,13,.18) 42%,rgba(8,10,13,.84) 64%,#080a0d 95%)} .keris-chapter .keris-content{margin:0;width:100%;padding:0 0 48px} .keris-chapter h2{font-size:clamp(39px,12vw,58px);margin-bottom:16px} .keris-chapter .keris-copy{font-size:13px;line-height:1.65;max-width:340px;margin-bottom:19px} .keris-chapter .keris-eyebrow{font-size:8px;margin-bottom:18px} .keris-chapter .keris-disclosure{font-size:8px;bottom:17px;max-width:calc(100% - 44px)} .keris-chapter .keris-deco{top:35px;font-size:9px} } @media(prefers-reduced-motion:reduce){ .cinematic-tagline,.cinematic-brand-promise,.cinematic-eyebrow,.hero-cta{opacity:1!important;animation:none!important;transform:none!important;filter:none!important} .cinematic-logo-video,.atmosphere-video{display:none!important} .cinematic-logo-still{opacity:1!important;animation:none!important} .hero-motion-layer,.cinematic-logo-frame,.keris-chapter .keris-image{transform:none!important;transition:none!important} } \n/* v3.1 / Restore the cinematic FURAKSA full-bleed hero. */ .cinematic-hero .cinematic-logo-frame{background:transparent!important;overflow:visible;isolation:auto} .cinematic-hero .cinematic-logo-video{mix-blend-mode:screen!important;object-fit:contain;isolation:auto} .cinematic-hero .hero-motion-layer{background:transparent!important} .cinematic-hero .cinematic-logo-still{mix-blend-mode:screen} /* Scroll-scrubbed image sequence; intentionally unframed and independent of the hero. */ #heritage.keris-scroll-section{height:460vh;min-height:460vh;display:block;overflow:visible;position:relative;padding:0;margin:0;background:#06080a;border-bottom:1px solid rgba(225,232,240,.16)} #heritage.keris-scroll-section::after{display:none} .keris-scroll-sticky{height:100vh;height:100svh;position:sticky;top:0;overflow:hidden;isolation:isolate;background:#06080a} .keris-lottie-visual{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#06080a} .keris-scroll-poster,.keris-scroll-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none} .keris-scroll-poster{object-fit:cover;object-position:center;filter:brightness(.78) contrast(1.1);opacity:.78} .keris-scroll-canvas{opacity:0;transition:opacity .22s ease;filter:brightness(.93) contrast(1.08);} .keris-scroll-sticky.is-ready .keris-scroll-canvas{opacity:1} .keris-scroll-sticky.is-ready .keris-scroll-poster{opacity:0} .keris-scroll-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(7,8,10,.05) 12%,rgba(7,8,10,.05) 52%,rgba(7,8,10,.76) 79%,rgba(7,8,10,.88) 100%),linear-gradient(0deg,rgba(7,8,10,.55),transparent 17%,transparent 80%,rgba(7,8,10,.23))} #heritage .keris-deco{position:absolute;z-index:3;top:clamp(105px,12vh,150px);left:var(--padding);font-size:10px;letter-spacing:.23em} #heritage .keris-content{position:absolute;top:50%;right:var(--padding);margin:0;width:min(34%,480px);max-width:none;transform:translateY(-50%);z-index:3;padding:0;text-shadow:0 1px 16px rgba(0,0,0,.8)} #heritage .keris-content h2{font-size:clamp(43px,5.1vw,92px);margin:0 0 24px;line-height:.95} #heritage .keris-content .keris-copy{color:#d5d9e0;font-size:clamp(14px,1.12vw,17px);max-width:375px;line-height:1.75} #heritage .keris-progress-ui{position:absolute;z-index:3;left:var(--padding);bottom:clamp(27px,5vh,58px);width:min(310px,40vw);pointer-events:none} #heritage .keris-progress-label{display:flex;justify-content:space-between;gap:14px;font:10px/1.4 'Space Mono',monospace;letter-spacing:.17em;color:#d1d5dc;margin-bottom:12px} #heritage .keris-progress-track{height:1px;background:rgba(234,240,245,.25);position:relative} #heritage .keris-progress-track::after{content:'';display:block;width:calc(var(--keris-scrub,0)*100%);height:2px;background:#f1f3f6;position:absolute;top:-.5px;left:0;transition:width .1s linear} #heritage .keris-disclosure{position:absolute;left:auto;right:var(--padding);bottom:26px;max-width:300px;text-align:right;color:#afb7c1;font-size:9px;z-index:3} @media(max-width:900px){#heritage .keris-content{width:min(43%,425px)}#heritage .keris-content h2{font-size:clamp(38px,5.4vw,66px)}} @media(max-width:640px){ #heritage.keris-scroll-section{height:410vh;min-height:410vh} .keris-scroll-shade{background:linear-gradient(180deg,rgba(6,8,10,.20) 0%,rgba(6,8,10,.02) 27%,rgba(6,8,10,.22) 45%,rgba(6,8,10,.82) 62%,rgba(6,8,10,.94) 100%)} #heritage .keris-deco{top:105px;font-size:9px} #heritage .keris-content{width:calc(100% - 2*var(--padding));right:var(--padding);left:var(--padding);top:auto;bottom:clamp(100px,15vh,155px);transform:none;padding:0;max-width:100%} #heritage .keris-content h2{font-size:clamp(38px,11vw,58px);margin:0 0 14px} #heritage .keris-content .keris-eyebrow{margin:0 0 12px;font-size:9px} #heritage .keris-content .keris-copy{max-width:340px;margin:0 0 17px;font-size:13px;line-height:1.65} #heritage .keris-progress-ui{left:var(--padding);bottom:64px;width:calc(100% - 2*var(--padding))} #heritage .keris-progress-label{font-size:9px} #heritage .keris-disclosure{left:var(--padding);right:auto;bottom:14px;max-width:calc(100% - 2*var(--padding));text-align:left;font-size:8px} } @media(prefers-reduced-motion:reduce){ .keris-scroll-canvas{display:none!important} .keris-scroll-poster{opacity:1!important} #heritage.keris-scroll-section{height:90svh;min-height:680px} .keris-scroll-sticky{position:relative;height:100%} #heritage .keris-progress-ui{display:none} } /* Desktop composition: preserve the previous spacious full-bleed proportions. */ @media(min-width:901px){.cinematic-hero .cinematic-logo-frame{width:min(100%,min(770px,56vw))!important}} /* ========================================================== FURAKSA / RESPONSIVE WIDTH SYSTEM — viewport-safe v4.0 Layout elements use the containing block, not 100vw widths inside padded parents. Decorative motion remains clipped. ========================================================== */ :root{--padding:clamp(16px,3.5vw,56px)} html{width:100%;max-width:100%;overflow-x:clip} body,#app,main{width:100%;max-width:100%;min-width:0} main,main>section,footer,.container,.subpage,.hero,.marquee,.image-break,.split-gallery,.keris-scroll-section{max-width:100%;min-width:0} /* Flexible items and grid tracks must be shrinkable. */ :where(.container,.section-head,.page-heading,.stats,.work-row,.service-row,.awards-wrap,.award-row,.footer-grid,.footer-bottom,.journal-grid,.journal-card,.article-row,.project-grid,.project-card,.detail-meta,.detail-brief,.detail-gallery,.service-right,.service-list,.tags,.hero-bottom,.hero-status,.furaksa-topline,.cinematic-stage,.cinematic-hero .hero-bottom,.manifesto,.manifesto-header,.keris-content)>*{min-width:0;max-width:100%} :where(.section-head,.page-heading,.hero-bottom,.hero-status,.footer-bottom,.manifesto-header,.furaksa-topline,.tags,.service-right){flex-wrap:wrap} :where(h1,h2,h3,p,.mono,.eyebrow,.micro,.category,.description,.footer-grid a,.footer-grid small,.work-row h3,.service-row h3,.article-row h2,.detail-meta dd){overflow-wrap:break-word;word-break:normal} /* Avoid intrinsic min-content blowouts from long titles. */ .stats{grid-template-columns:repeat(4,minmax(0,1fr))} .work-row{grid-template-columns:60px minmax(0,1fr) minmax(0,210px) 80px} .service-row{grid-template-columns:70px minmax(0,1fr) minmax(0,1fr)} .awards-wrap{grid-template-columns:minmax(0,1fr) minmax(0,2fr)} .journal-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .footer-grid{grid-template-columns:repeat(4,minmax(0,1fr))} .detail-meta{grid-template-columns:repeat(4,minmax(0,1fr))} .detail-gallery,.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .article-row{grid-template-columns:minmax(0,220px) minmax(0,1fr) 55px} .cinematic-hero .furaksa-topline{min-width:0} .cinematic-hero .hero-status{min-width:0} .cinematic-hero .cinematic-logo-frame{max-width:100%;min-width:0} .hero-cta{max-width:100%;white-space:normal;text-align:center;justify-content:center;flex-wrap:wrap;row-gap:6px;line-height:1.45} /* Permit the keris title to scale to the right-side panel, not the full viewport. */ @media(min-width:641px){ #heritage .keris-content{container-type:inline-size;max-width:calc(100% - 2*var(--padding))} #heritage .keris-content h2{font-size:clamp(33px,13cqw,68px);overflow-wrap:anywhere} } @media(max-width:900px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr))} .work-row{grid-template-columns:40px minmax(0,1fr) minmax(0,70px)} .service-row{grid-template-columns:50px minmax(0,1fr)} .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .journal-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .detail-meta{grid-template-columns:repeat(2,minmax(0,1fr))} .awards-wrap{grid-template-columns:minmax(0,1fr)} } @media(max-width:640px){ .work-row{grid-template-columns:30px minmax(0,1fr) minmax(0,55px)} .service-row{grid-template-columns:35px minmax(0,1fr)} .journal-grid,.project-grid,.detail-gallery,.article-row,.detail-brief{grid-template-columns:minmax(0,1fr)} .section-head h2{font-size:clamp(34px,9.8vw,48px);line-height:1} .detail-title{font-size:clamp(43px,12vw,76px);overflow-wrap:anywhere} .page-heading h1{font-size:clamp(43px,11vw,75px)} .cinematic-hero .cinematic-logo-frame{width:100%;max-width:100%;aspect-ratio:16/10} .cinematic-hero .hero-bottom p{max-width:100%} #heritage .keris-content h2{max-width:100%;overflow-wrap:anywhere} .footer-grid{row-gap:30px;column-gap:16px} } @media(max-width:480px){ .section-head,.page-heading{align-items:flex-start;flex-direction:column;gap:12px} .section-head h2{font-size:clamp(30px,9.4vw,43px)} .footer-grid{grid-template-columns:minmax(0,1fr);gap:23px} .footer-grid a,.footer-grid small{overflow-wrap:anywhere} .stats{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:9px} .stats strong{font-size:clamp(35px,10vw,50px)} .cinematic-hero .hero-bottom{align-items:flex-start;flex-wrap:wrap} .cinematic-hero .hero-bottom p{max-width:100%} .cinematic-hero .hero-status{max-width:100%;width:100%;justify-content:space-between;text-align:left} .cinematic-hero .cinematic-tagline{max-width:100%;overflow-wrap:normal;letter-spacing:.12em;font-size:clamp(9px,2.5vw,11px)} .cinematic-hero .cinematic-brand-promise{max-width:100%;letter-spacing:.06em} .cinematic-hero .hero-label{max-width:100%;overflow-wrap:anywhere} .cinematic-hero .hero-cta{gap:14px;padding-inline:13px} .mobile-menu .menu-items a{max-width:100%;overflow-wrap:anywhere} .work-row h3,.service-row h3{overflow-wrap:anywhere} } @media(max-width:360px){ .hero.furaksa-hero.cinematic-hero{padding-top:91px;padding-bottom:17px} .cinematic-hero .hero-bottom{padding-top:10px} .cinematic-hero .hero-bottom p,.cinematic-hero .hero-status{font-size:8px;line-height:1.5} .cinematic-hero .cinematic-brand-promise{margin-bottom:16px} #heritage .keris-content h2{font-size:clamp(33px,10.5vw,42px)} .footer-bottom{gap:9px} } /* Keris scrub: the final macro frame holds on screen before the chapter releases. */ #heritage .keris-scroll-sticky{overscroll-behavior:contain} #heritage .keris-scroll-sticky.at-end .keris-progress-track::after{width:100%} /* FURAKSA / FILMMAKING CREDENTIALS */ .credentials-section{position:relative;scroll-margin-top:95px;padding-block:clamp(88px,10vw,145px);border-top:1px solid rgba(224,229,235,.15)} .credentials-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px clamp(26px,6vw,100px);margin-bottom:clamp(35px,5vw,66px)} .credentials-head .credentials-heading{flex:1 1 430px;min-width:0} .credentials-head .credentials-heading h2{margin:17px 0 0;font:800 clamp(39px,6.2vw,100px)/.91 Syne,Arial,sans-serif;letter-spacing:-.069em;text-transform:uppercase;overflow-wrap:normal} .credentials-heading h2 span{display:block;color:#a6acb4} .credentials-summary{flex:0 1 365px;min-width:min(100%,240px)} .credentials-summary p{margin:0 0 18px;font-size:clamp(13px,1.16vw,16px);line-height:1.75;color:#c7cad0} .credentials-summary .micro{font-size:10px;line-height:1.7;color:#a5adb8} .credentials-grid{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(200px,.72fr);gap:clamp(14px,2.2vw,28px);align-items:stretch} .credentials-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,25px);min-width:0} .credential-card{min-width:0;display:flex;flex-direction:column;border:1px solid rgba(221,227,236,.19);background:linear-gradient(160deg,#15181c,#0b0c0e 72%);padding:clamp(10px,1.35vw,19px);gap:18px;transition:border-color .35s ease,transform .35s ease} .credential-card:hover{border-color:rgba(232,237,245,.53);transform:translateY(-3px)} .credential-image-button{position:relative;display:block;width:100%;min-width:0;padding:0;margin:0;aspect-ratio:3/2;background:#171c1d;border:0;cursor:zoom-in;overflow:hidden;color:#fff;text-align:left} .credential-image-button img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .7s cubic-bezier(.2,1,.2,1)} .credential-image-button:hover img,.credential-image-button:focus-visible img{transform:scale(1.035)} .credential-view{position:absolute;right:12px;bottom:12px;background:#e8edf2;color:#15171b;padding:10px 12px;font:600 9px/1.3 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase} .credential-details{display:flex;flex-direction:column;gap:14px;flex:1;min-width:0;padding:0 4px 4px} .credential-details .micro{color:#a8b0ba;font-size:9px;letter-spacing:.15em;line-height:1.6} .credential-details h3{font:700 clamp(19px,2vw,31px)/1.08 Syne,Arial,sans-serif;letter-spacing:-.04em;margin:0;text-transform:uppercase;overflow-wrap:break-word} .credential-details .credential-course{font-size:12px;line-height:1.65;color:#aeb5be;margin:0} .credential-details .credential-foot{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:space-between;border-top:1px solid rgba(221,227,236,.17);padding-top:14px;margin-top:auto;color:#c9cfd7;font:400 10px/1.6 'Space Mono',monospace;letter-spacing:.04em} .academy-motion{position:relative;overflow:hidden;border:1px solid rgba(221,227,236,.19);min-width:0;display:flex;flex-direction:column;background:#090a0d;padding:14px;gap:10px} .academy-motion .micro{font-size:9px;color:#a8b0ba;line-height:1.5} .academy-motion video{display:block;width:100%;height:410px;min-height:0;max-height:410px;flex:0 0 auto;min-width:0;object-fit:cover;background:#070809} .academy-motion .academy-clip-caption{margin:0;font:400 10px/1.6 'Space Mono',monospace;color:#aab2ba;letter-spacing:.06em} .credential-note{border-top:1px solid rgba(221,227,236,.14);margin-top:25px;padding-top:18px;color:#949ca5;font:400 10px/1.7 'Space Mono',monospace;letter-spacing:.06em;max-width:900px} .credential-dialog{border:1px solid rgba(230,236,244,.25);background:#0a0b0d;color:#eef1f5;max-width:min(95vw,1400px);max-height:94dvh;overflow:auto;padding:clamp(10px,1.5vw,24px);box-shadow:0 24px 85px rgba(0,0,0,.75)} .credential-dialog::backdrop{background:rgba(0,0,0,.88);backdrop-filter:blur(8px)} .credential-dialog-inner{display:flex;flex-direction:column;gap:12px} .credential-dialog-top{display:flex;align-items:center;justify-content:space-between;gap:20px;font:400 10px/1.4 'Space Mono',monospace;letter-spacing:.13em;text-transform:uppercase} .credential-dialog-close{border:1px solid rgba(244,246,250,.3);background:transparent;color:#f1f3f5;padding:9px 13px;cursor:pointer;font:400 10px 'Space Mono',monospace;letter-spacing:.1em} .credential-dialog img{width:100%;height:auto;max-height:calc(94dvh - 95px);object-fit:contain} @media(max-width:1050px){.credentials-grid{grid-template-columns:1fr}.academy-motion{display:grid;grid-template-columns:minmax(130px,200px) minmax(0,1fr);align-items:center;gap:20px}.academy-motion video{height:230px;min-height:0;max-height:none;grid-row:1/3}.academy-motion .academy-clip-caption{align-self:start}.academy-motion .micro{align-self:end}} @media(max-width:640px){.credentials-head{gap:16px;margin-bottom:32px}.credentials-head .credentials-heading{flex-basis:100%}.credentials-head .credentials-heading h2{font-size:clamp(35px,10.7vw,58px)}.credentials-summary{flex-basis:100%}.credentials-cards{grid-template-columns:1fr}.credential-card{padding:12px}.credential-details h3{font-size:25px}.academy-motion{grid-template-columns:minmax(0,1fr);gap:12px}.academy-motion video{grid-row:auto;max-width:240px;min-height:0;height:auto;max-height:360px;aspect-ratio:9/16;object-fit:contain;margin-inline:auto}.academy-motion .micro,.academy-motion .academy-clip-caption{text-align:center;align-self:auto}.credential-note{font-size:9px}} @media(prefers-reduced-motion:reduce){.credential-card,.credential-image-button img{transition:none!important}.credential-card:hover,.credential-image-button:hover img{transform:none!important}} /* FURAKSA / scroll interaction repair v2 — no scroll trapping */ /* Keep the chapter pinned for a compact cinematic sequence, then release naturally. A short final hold replaces the former 20% end hold at 4+ viewport heights. */ #heritage.keris-scroll-section{height:275svh;min-height:0;overflow:visible;overscroll-behavior:auto} #heritage .keris-scroll-sticky{height:100svh;min-height:0;overscroll-behavior:auto;touch-action:pan-y;} #heritage .keris-lottie-visual,#heritage .keris-scroll-canvas{touch-action:pan-y} @media (min-width:641px) and (max-width:900px){#heritage.keris-scroll-section{height:255svh}} @media (max-width:640px){#heritage.keris-scroll-section{height:235svh;min-height:0}} @media (max-width:380px){#heritage.keris-scroll-section{height:225svh;min-height:0}} @media (prefers-reduced-motion:reduce){ #heritage.keris-scroll-section{height:auto!important;min-height:75svh!important} #heritage .keris-scroll-sticky{height:75svh;min-height:0;position:relative} } /* FURAKSA / AI FILM PORTFOLIO */ .aigc-page{width:100%;max-width:100%;overflow-x:clip;background:var(--ink);color:var(--paper)} .aigc-wrap{max-width:1600px;margin-inline:auto;padding-inline:var(--padding);min-width:0} .aigc-intro{position:relative;min-height:90svh;padding-top:clamp(130px,17vh,220px);padding-bottom:clamp(50px,7vh,100px);display:grid;align-items:end;isolation:isolate;overflow:hidden;background:#08090b} .aigc-intro::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-2;background:radial-gradient(ellipse 48% 70% at 78% 45%,rgba(170,177,193,.22),transparent 68%),linear-gradient(135deg,#0d1014 0%,#070809 68%)} .aigc-intro::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(90deg,rgba(8,9,11,.86) 0%,rgba(8,9,11,.48) 47%,transparent 78%),linear-gradient(0deg,#090a0c 0%,transparent 45%)} .aigc-hero-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(36px,5vw,95px);width:100%} .aigc-kicker,.aigc-meta{font:600 10px/1.6 'Space Mono',monospace;letter-spacing:.20em;text-transform:uppercase;color:#aeb4be} .aigc-kicker{margin:0 0 clamp(24px,3vw,48px)} .aigc-hero-copy h1{font:800 clamp(66px,10.2vw,177px)/.77 Syne,Arial,sans-serif;text-transform:uppercase;letter-spacing:-.102em;margin:0 0 clamp(32px,4vw,58px);overflow-wrap:normal} .aigc-hero-copy h1 span{display:block;color:#858b95} .aigc-hero-copy p:not(.aigc-kicker){margin:0;max-width:510px;font:400 clamp(15px,1.5vw,20px)/1.75 'Space Grotesk',Arial,sans-serif;color:#c0c5cb} .aigc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:36px} .aigc-primary-link{display:inline-flex;gap:27px;align-items:center;justify-content:space-between;background:#e8ecf0;color:#111417;padding:16px 21px;text-decoration:none;font:700 11px/1.5 'Space Mono',monospace;text-transform:uppercase;letter-spacing:.1em;transition:background .25s,transform .25s;max-width:100%} .aigc-primary-link:hover{background:white;transform:translateY(-3px)} .aigc-minor-link{font:600 10px/1.6 'Space Mono',monospace;color:#d8dde3;text-decoration:none;letter-spacing:.13em;text-transform:uppercase;border-bottom:1px solid #737981;padding:8px 0} .aigc-hero-art{position:relative;width:100%;min-width:0;align-self:stretch;display:flex;align-items:center} .aigc-hero-picture{width:100%;aspect-ratio:4/5;max-height:680px;overflow:hidden;position:relative;background:#13161a;border:1px solid rgba(225,231,239,.15)} .aigc-hero-picture img{display:block;width:100%;height:100%;object-fit:cover;object-position:56% center;filter:contrast(1.07)} .aigc-hero-picture::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(5,7,8,.85) 100%);pointer-events:none} .aigc-picture-label{position:absolute;left:22px;bottom:20px;z-index:1;display:flex;flex-wrap:wrap;gap:12px;align-items:center;width:calc(100% - 44px);font:600 10px/1.5 'Space Mono',monospace;letter-spacing:.13em;color:#e9edf1;text-transform:uppercase} .aigc-picture-label span:last-child{margin-left:auto;color:#b8c0c8} .aigc-hero-side-note{position:absolute;top:12px;right:15px;color:#e7ecf0;z-index:1;font:600 10px 'Space Mono',monospace;letter-spacing:.12em} .aigc-library{padding-top:clamp(85px,10vw,165px);padding-bottom:clamp(70px,9vw,120px)} .aigc-heading{display:flex;flex-wrap:wrap;gap:18px 35px;align-items:end;justify-content:space-between;margin-bottom:40px} .aigc-heading h2{margin:0;font:800 clamp(45px,7.4vw,104px)/.95 Syne,Arial,sans-serif;letter-spacing:-.075em;text-transform:uppercase;overflow-wrap:normal} .aigc-heading p{color:#a8aeb7;font:400 13px/1.65 'Space Grotesk',sans-serif;max-width:370px;margin:0} .aigc-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;border-bottom:1px solid rgba(226,232,241,.18);padding-bottom:26px;margin-bottom:30px} .aigc-filter{padding:11px 14px;background:transparent;border:1px solid rgba(222,230,237,.24);color:#bfc5ce;font:600 10px/1.3 'Space Mono',monospace;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,border-color .2s} .aigc-filter[aria-pressed=true]{background:#e9ebee;color:#0e1115;border-color:#e9ebee} .aigc-filter:hover:not([aria-pressed=true]){border-color:#e9ebee;color:white} .aigc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(35px,5vw,88px) clamp(17px,3vw,44px);min-width:0} .aigc-film-card{min-width:0;display:flex;flex-direction:column;gap:0} .aigc-film-card[hidden]{display:none!important} .aigc-film-art{position:relative;aspect-ratio:16/10;background:#161a20;overflow:hidden;border:1px solid rgba(225,232,242,.16)} .aigc-film-art img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .65s cubic-bezier(.2,1,.3,1),filter .65s ease;filter:grayscale(.14)} .aigc-film-card:hover .aigc-film-art img{transform:scale(1.045);filter:grayscale(0)} .aigc-film-art::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 62%,rgba(4,5,7,.7))} .aigc-film-index{position:absolute;top:18px;left:20px;z-index:2;font:600 10px 'Space Mono',monospace;letter-spacing:.15em;color:#eff2f5} .aigc-watch{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;border:1px solid rgba(238,242,248,.8);background:rgba(11,13,16,.68);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:white;z-index:3;padding:16px 23px;cursor:pointer;white-space:nowrap;font:600 11px/1.4 'Space Mono',monospace;letter-spacing:.11em;text-transform:uppercase;transition:background .22s,scale .22s} .aigc-watch:hover{background:#e7ebef;color:#111318;scale:1.04} .aigc-coming{position:absolute;bottom:18px;left:20px;z-index:2;color:#e0e5ea;font:600 9px/1.4 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;background:rgba(7,8,10,.58);padding:8px 11px} .aigc-film-text{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding-top:20px;border-top:1px solid rgba(225,230,239,.12);margin-top:12px} .aigc-film-text h3{margin:10px 0;font:800 clamp(24px,3.2vw,47px)/1 Syne,Arial,sans-serif;letter-spacing:-.055em;text-transform:uppercase;overflow-wrap:break-word} .aigc-film-text p{margin:0;max-width:490px;color:#9aa3af;font-size:13px;line-height:1.65} .aigc-film-time{color:#c9d0da;font:500 10px 'Space Mono',monospace;white-space:nowrap;padding-top:3px} .aigc-approach{padding:clamp(75px,9vw,128px) var(--padding);border-top:1px solid rgba(224,231,239,.14);border-bottom:1px solid rgba(224,231,239,.14);background:linear-gradient(110deg,#12161b,#08090a 70%)} .aigc-approach-inner{max-width:1500px;margin:auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,120px);align-items:center} .aigc-approach h2{font:800 clamp(47px,7vw,102px)/.92 Syne,Arial,sans-serif;letter-spacing:-.078em;text-transform:uppercase;margin:20px 0 0} .aigc-approach h2 span{color:#949ba6} .aigc-approach-copy{min-width:0;display:grid;gap:23px} .aigc-approach-copy p{margin:0;color:#c4cad2;font-size:clamp(16px,1.65vw,21px);line-height:1.65;max-width:580px} .aigc-approach-list{border-top:1px solid rgba(223,229,236,.18);padding-top:15px;display:flex;gap:12px 19px;flex-wrap:wrap} .aigc-approach-list span{color:#99a0a9;font:600 9px/1.5 'Space Mono',monospace;text-transform:uppercase;letter-spacing:.12em} .aigc-end{padding-block:clamp(75px,9vw,120px)} .aigc-end strong{font:800 clamp(48px,8.5vw,122px)/.94 Syne,Arial,sans-serif;text-transform:uppercase;letter-spacing:-.082em;display:block;overflow-wrap:anywhere} .aigc-end strong span{color:#9ca2ab} .aigc-end p{font-size:15px;color:#a8afb8;margin:20px 0 35px;max-width:600px} .aigc-player-dialog{border:1px solid #676e78;padding:0;background:#090b0e;color:#e6e8ec;width:min(94vw,1180px);max-width:1180px;max-height:92dvh;overflow:auto} .aigc-player-dialog::backdrop{background:rgba(0,0,0,.87);backdrop-filter:blur(7px)} .aigc-dialog-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:15px;padding:18px 22px;border-bottom:1px solid #333a43} .aigc-dialog-title{font:700 13px/1.35 'Space Mono',monospace;text-transform:uppercase;letter-spacing:.1em;margin:0} .aigc-dialog-close{background:#e6e9ec;border:0;padding:9px 14px;cursor:pointer;color:#13161a;font:700 10px 'Space Mono',monospace;text-transform:uppercase} .aigc-player-stage{width:100%;aspect-ratio:16/9;background:black;display:grid;place-items:center;overflow:hidden} .aigc-player-stage iframe,.aigc-player-stage video{width:100%;height:100%;border:0;display:block;object-fit:contain} .aigc-player-note{padding:16px 22px;color:#98a2ac;font:400 11px/1.5 'Space Mono',monospace} @media(max-width:1000px){.aigc-hero-layout{grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}.aigc-hero-copy h1{font-size:clamp(57px,9vw,112px)}} @media(max-width:720px){.aigc-intro{min-height:auto;padding-block:125px 48px}.aigc-hero-layout{grid-template-columns:minmax(0,1fr);gap:40px}.aigc-hero-copy h1{font-size:clamp(59px,16vw,110px)}.aigc-hero-picture{aspect-ratio:16/10;max-height:none}.aigc-hero-picture img{object-position:center 44%}.aigc-grid{grid-template-columns:1fr}.aigc-approach-inner{grid-template-columns:1fr}.aigc-film-text h3{font-size:clamp(26px,7vw,40px)}} @media(max-width:360px){.aigc-hero-copy h1{font-size:clamp(54px,16vw,72px)}.aigc-hero-picture{aspect-ratio:4/3}.aigc-primary-link{width:100%}.aigc-film-text{grid-template-columns:1fr}.aigc-film-time{display:none}.aigc-watch{padding:13px 15px}} @media(prefers-reduced-motion:reduce){.aigc-film-art img,.aigc-watch,.aigc-primary-link{transition:none!important}}