:root { --blue: #0047b7; --deep-blue: #00285f; --sky: #dfeeff; --paper: #fff; --ink: #06224c; --line: rgba(6, 34, 76, .16); --copy: 0; --progress: 0; --white-fade: 0; --brand-fade: 0; }

* { box-sizing: border-box; }
 html { scroll-behavior: smooth; }
 body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: Manrope, Arial, sans-serif; }
 a { color: inherit; text-decoration: none; }
.wrap { width: min(1180px, calc(100% - 96px)); margin: auto; }

.site-header { position: fixed; z-index: 10; top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 25px 4.4vw; color: #fff; opacity: calc(var(--copy) * (1 - var(--white-fade))); pointer-events: none; transform: translateY(calc((1 - var(--copy)) * -18px)); transition: opacity .12s linear, transform .12s linear; }
.site-header a { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 800; letter-spacing: .15em; }
.brand-mark { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 500 12px "DM Mono", monospace; letter-spacing: -.12em; }
 nav { display: flex; gap: 27px; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.header-button { border: 1px solid rgba(255,255,255,.7); border-radius: 99px; padding: 9px 13px 9px 16px; font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.header-button span { margin-left: 8px; font-size: 14px; }


.fridge-scroll { position: relative; z-index: 2; height: 240vh; }
.fridge-stage { position: fixed; z-index: 2; inset: 0; height: 100vh; overflow: hidden; background: #080b0e; }
.door-video { width: 100%; height: 100%; display: block; object-fit: cover; }
.door-brand { position: absolute; z-index: 3; top: 48%; left: 50%; color: rgba(255,255,255,.9); font: 800 clamp(30px, 5.2vw, 72px) Manrope, Arial, sans-serif; letter-spacing: .1em; line-height: 1; pointer-events: none; text-shadow: 0 2px 14px rgba(0,0,0,.72); opacity: calc((1 - var(--brand-fade)) * (1 - var(--white-fade))); transform: translate(-50%, -50%); transition: opacity .1s linear; }
.section-label, .overline { margin: 0; font: 500 10px "DM Mono", monospace; letter-spacing: .12em; }
h2 em { font-family: Georgia, serif; font-weight: 400; }
.scroll-progress { position: absolute; z-index: 2; right: 4.4vw; bottom: 30px; display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.8); opacity: calc((1 - var(--copy)) * (1 - var(--white-fade))); transition: opacity .1s linear; }
.scroll-progress span { width: 72px; height: 1px; background: rgba(255,255,255,.35); }
.scroll-progress span::after { content: ""; display: block; width: calc(var(--progress) * 100%); height: 1px; background: #fff; }
.scroll-progress small { font: 500 9px "DM Mono", monospace; letter-spacing: .14em; }
.white-transition { position: absolute; z-index: 5; inset: 0; pointer-events: none; opacity: var(--white-fade); background: #fff; }

.build-scroll { position: relative; z-index: 1; height: 260vh; background: #fff; }
body.has-left-fridge .build-scroll { z-index: 3; }
.build-stage { position: sticky; top: 0; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); min-height: 0; padding-bottom: 36px; overflow: hidden; background: #fff; }
.build-copy { align-self: start; padding: 22vh 4vw 0 calc(max(4.4vw, calc((100vw - 1180px) / 2)) - 12px); }
.build-label { margin-bottom: 19px; }
.build-heading { margin: 0; color: #111; font-size: clamp(48px, 6.2vw, 92px); line-height: .91; letter-spacing: -.08em; }
.build-line { display: block; white-space: nowrap; }
.build-line--serif { font-family: Georgia, serif; font-weight: 400; }
.build-services { width: min(330px, 100%); margin: 31px 0 0; color: rgba(17,17,17,.72); font-size: 15px; font-weight: 500; line-height: 1.72; }
.build-highlight { color: var(--blue); }
.build-project-link { display: flex; width: fit-content; align-items: center; gap: 14px; margin: clamp(30px, 4vw, 52px) auto 0; padding: 17px 24px; color: #fff; pointer-events: none; opacity: 0; background: var(--blue); box-shadow: 0 10px 24px rgba(0,71,183,.2); font: 800 15px Manrope, Arial, sans-serif; letter-spacing: -.025em; transform: translateY(18px); transition: opacity .3s ease, background .25s ease, box-shadow .25s ease, transform .38s cubic-bezier(.2,.7,.2,1); }
.build-project-link.is-visible { pointer-events: auto; opacity: 1; transform: translateY(0); }
.build-project-link span { font-size: 19px; line-height: .6; transition: transform .25s ease; }
.build-project-link:hover { background: #003581; box-shadow: 0 15px 30px rgba(0,71,183,.3); transform: translateY(-4px); }
.build-project-link:hover span { transform: translate(3px, -3px); }
.build-project-link:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.build-word { display: inline-block; white-space: nowrap; }
.build-char { display: inline-block; opacity: 0; transform: translate3d(0, .45em, 0); transition: opacity .26s ease, transform .4s cubic-bezier(.2,.7,.2,1); }
.build-char.is-revealed { opacity: 1; transform: translate3d(0, 0, 0); }
.build-visual { position: relative; align-self: start; margin: 14vh 4.5vw 0 1vw; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px rgba(6,34,76,.05); }
.build-visual video { display: block; width: 100%; height: auto; border-radius: inherit; }
.build-visual figcaption { position: absolute; right: 17px; bottom: 15px; display: flex; align-items: center; gap: 9px; margin: 0; color: var(--ink); font: 500 9px "DM Mono", monospace; letter-spacing: .12em; }
.build-visual figcaption span { width: 38px; height: 1px; background: var(--ink); }


.section-blue { color: var(--ink); background: #fff; }
.section-white { color: var(--ink); background: var(--paper); }
.introduction { position: relative; padding: 172px 0; overflow: hidden; }
.introduction::after { content: "0°"; position: absolute; top: -16px; right: -2vw; color: rgba(180,215,255,.08); font-size: clamp(230px, 34vw, 540px); font-weight: 800; letter-spacing: -.12em; }
.intro-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 3fr 1.25fr; gap: 44px; align-items: end; }
.section-label { color: inherit; }
.overline { margin-bottom: 19px; color: var(--blue); }
.introduction h2, .section-heading h2, .process h2, .project h2 { margin: 0; font-size: clamp(42px, 5.8vw, 80px); line-height: .95; letter-spacing: -.07em; }
.body-copy { margin: 0; font-size: 13px; line-height: 1.8; color: rgba(6,34,76,.72); }

.solutions { padding: 96px 0 132px; }
.solutions, .process, .project { position: relative; z-index: 3; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 62px; }
.section-heading h2 { margin-top: 19px; }
.section-heading > p { width: 250px; margin: 0 5vw 5px 0; font-size: 13px; line-height: 1.75; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.service-card { position: relative; min-height: 505px; display: flex; flex-direction: column; overflow: hidden; border-radius: 4px; transition: transform .35s ease, box-shadow .35s ease; }
.service-card:hover { transform: translateY(-7px); box-shadow: 0 22px 35px rgba(0,40,95,.18); }
.service-card--photo { color: #fff; background: var(--deep-blue); }
.service-card:nth-child(2) { background: #08366f; }
.service-card:nth-child(3) { background: #0e447e; }
.service-card-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; opacity: .6; filter: brightness(.72) grayscale(.28); transform: scale(1.03); transition: opacity .42s ease, filter .42s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
.service-card-media::before, .service-card-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.service-card-media::before { z-index: 1; background: #00285f; opacity: .38; transition: opacity .42s ease; }
.service-card-media::after { z-index: 2; background: linear-gradient(180deg, rgba(0,25,58,.06) 0%, rgba(0,25,58,.24) 37%, rgba(0,24,55,.94) 100%); opacity: 1; transition: opacity .42s ease; }
.service-card-media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.service-card:not(.is-image-visible) .service-card-media { opacity: 0; filter: brightness(.54) grayscale(.48); transform: scale(1.06); }
.service-card:not(.is-image-visible) .service-card-media::before { opacity: .64; }
.service-card:hover .service-card-media { opacity: 1; filter: brightness(1.08) grayscale(0); transform: scale(1.01); }
.service-card:hover .service-card-media::before { opacity: .05; }
.service-card:hover .service-card-media::after { opacity: .74; }
.service-card-content { position: relative; z-index: 1; min-height: 505px; display: flex; flex-direction: column; padding: 21px; }
.card-top { display: flex; justify-content: space-between; font: 500 9px "DM Mono", monospace; letter-spacing: .1em; }
.service-card-copy { margin-top: auto; }
.service-card h3 { margin: 0; max-width: 292px; font-size: clamp(25px, 2.55vw, 34px); line-height: 1.05; letter-spacing: -.06em; }

.portfolio-scroll { position: relative; z-index: 3; height: 340vh; color: var(--ink); background: #001c40; }
.portfolio-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; isolation: isolate; background: #001c40; }
.portfolio-stage::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,28,64,.72) 0%, rgba(0,40,95,.4) 47%, rgba(0,40,95,.1) 100%); }
.portfolio-label { position: absolute; z-index: 3; top: 6.5vh; left: max(4.4vw, calc((100vw - 1180px) / 2)); margin: 0; color: #fff; font: 500 10px "DM Mono", monospace; letter-spacing: .12em; }
.portfolio-words { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.portfolio-word { position: absolute; display: block; width: max-content; max-width: min(39vw, 620px); color: #fff; font: 800 clamp(30px, calc(3.2vw + 2px), 50px) / 1.05 Manrope, Arial, sans-serif; letter-spacing: -.06em; text-shadow: 0 2px 18px rgba(0,25,58,.85); opacity: var(--portfolio-word-opacity, 0); filter: blur(var(--portfolio-word-blur, 10px)); transform: translate3d(0, var(--portfolio-word-y, 22px), 0); transition: opacity .14s linear, filter .14s linear, transform .14s linear; }
.portfolio-word:nth-child(1) { top: 10vh; left: 5vw; }
.portfolio-word:nth-child(2) { top: 25vh; left: calc(15.78vw - 7.5px); }
.portfolio-word:nth-child(3) { top: 40vh; left: calc(26.56vw - 15px); }
.portfolio-word:nth-child(4) { top: 55vh; left: calc(37.34vw - 22.5px); }
.portfolio-word:nth-child(5) { top: 70vh; left: calc(48.12vw - 30px); }
.portfolio-word:nth-child(6) { top: 85vh; right: 5vw; left: auto; }
.portfolio-video-frame { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; margin: 0; overflow: hidden; }
.portfolio-video-frame video { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }

.project { position: relative; z-index: 3; display: grid; min-height: clamp(800px, 94vh, 980px); place-items: center; padding: clamp(60px, 7vh, 82px) 0; overflow: hidden; background: #fff; }
.project-composition { position: relative; display: grid; width: min(1460px, 100%); min-height: clamp(680px, 82vh, 820px); place-items: center; isolation: isolate; }
.project-content { position: relative; z-index: 2; display: flex; width: min(940px, 100%); align-items: center; justify-content: center; text-align: center; }
.project-fans { position: absolute; z-index: 1; inset: 0; }
.project-fan-slot { position: absolute; display: grid; width: clamp(198px, calc(55% - 550px), 242px); aspect-ratio: 3 / 2; place-items: center; }
.project-fan { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; opacity: 0; filter: drop-shadow(0 8px 14px rgba(0,32,78,.14)); transform: translateY(18px) scale(.94); transition: opacity .8s ease, transform .8s ease; }
.project-fan.is-visible { pointer-events: auto; opacity: 1; transform: translateY(0) scale(1); }
.project-fan-slot--top-left, .project-fan-slot--bottom-left { right: calc(50% + 500px); }
.project-fan-slot--top-right, .project-fan-slot--bottom-right { left: calc(50% + 500px); }
.project-fan-slot--top-left, .project-fan-slot--top-right { bottom: calc(50% + clamp(75px, 8.5vw, 119px) + 35px); }
.project-fan-slot--bottom-left, .project-fan-slot--bottom-right { top: calc(50% + clamp(75px, 8.5vw, 119px) + 35px); }
.project-link { position: relative; isolation: isolate; display: inline-flex; width: min(940px, 100%); min-height: clamp(150px, 17vw, 238px); align-items: center; justify-content: center; padding: 28px 42px; overflow: visible; color: #fff; border: 1px solid rgba(255,255,255,.28); background: linear-gradient(135deg, #0066ff 0%, #0047b7 58%, #003582 100%); font-size: clamp(58px, 8.4vw, 122px); font-weight: 800; letter-spacing: -.09em; line-height: .9; text-align: center; box-shadow: 0 22px 42px rgba(0,71,183,.32), 0 0 0 9px rgba(0,71,183,.08); transition: box-shadow .3s ease, transform .3s cubic-bezier(.2,.7,.2,1), filter .3s ease; }
.project-link::before { content: ""; position: absolute; z-index: -1; inset: 18px; background: rgba(0,102,255,.58); filter: blur(32px); opacity: .65; transition: opacity .3s ease, filter .3s ease; }
.project-link:hover { box-shadow: 0 30px 58px rgba(0,71,183,.42), 0 0 0 12px rgba(0,102,255,.12); filter: brightness(1.08); transform: scale(1.06); }
.project-link:hover::before { opacity: .95; filter: blur(40px); }
.project-link:focus-visible { outline: 3px solid #001f4d; outline-offset: 6px; }
.site-footer { position: relative; z-index: 3; padding: clamp(72px, 8vw, 118px) max(4.4vw, calc((100vw - 1180px) / 2)) 28px; color: #fff; background: #080a0e; }
.footer-inner { display: grid; grid-template-columns: minmax(220px, 1.15fr) minmax(250px, 1fr) minmax(160px, .7fr); column-gap: clamp(44px, 7vw, 110px); row-gap: 38px; width: min(1180px, 100%); margin: auto; }
.footer-brand { display: inline-flex; width: min(320px, 100%); align-items: center; }
.footer-logo { display: block; width: 100%; height: auto; }
.footer-intro > p { margin: 52px 0 0; font-size: clamp(17px, 1.7vw, 24px); font-weight: 800; letter-spacing: -.04em; }
.footer-contact h2, .footer-links h2 { margin: 0 0 30px; color: #11b9ff; font-size: 14px; font-weight: 700; letter-spacing: -.04em; }
.footer-contact-group { display: grid; gap: 15px; padding: 0 0 22px; margin-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.26); font: 400 14px "DM Mono", monospace; letter-spacing: .09em; }
.footer-contact-group:last-child { padding-bottom: 0; margin-bottom: 0; border: 0; }
.footer-contact-group a { color: rgba(255,255,255,.94); }
.footer-links { display: grid; align-content: start; justify-items: start; gap: 13px; }
.footer-links h2 { margin-bottom: 17px; }
.footer-links a { color: rgba(255,255,255,.9); font: 400 14px "DM Mono", monospace; letter-spacing: .09em; }
.footer-links a::before { content: "•"; margin-right: 10px; color: #fff; }
.footer-contact-group a:hover, .footer-links a:hover { color: #11b9ff; }
.footer-copyright { grid-column: 1 / -1; margin: 24px 0 0; padding-top: 22px; color: rgba(255,255,255,.42); border-top: 1px solid rgba(255,255,255,.2); font: 400 9px "DM Mono", monospace; letter-spacing: .1em; }

@keyframes spin { to { transform: rotate(360deg); }
 }
 @keyframes float { 50% { transform: translateY(-14px) rotate(35deg); }
 }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.service-card:nth-child(2) .service-card-content { transition-delay: .1s; }
.service-card:nth-child(3) .service-card-content { transition-delay: .2s; }

@media (min-width: 781px) and (max-width: 875px) {
.portfolio-word { max-width: none; }
.portfolio-word:nth-child(2) { left: calc(23vw - 70.7px); }
.portfolio-word:nth-child(3) { left: calc(41vw - 141.4px); }
.portfolio-word:nth-child(4) { left: calc(59vw - 212.1px); }
.portfolio-word:nth-child(5) { left: calc(77vw - 282.8px); }
 }

@media (min-width: 1500px) {
.portfolio-word:nth-child(2) { left: calc(23vw - 115.8px); }
.portfolio-word:nth-child(3) { left: calc(41vw - 231.6px); }
.portfolio-word:nth-child(4) { left: calc(59vw - 347.4px); }
.portfolio-word:nth-child(5) { left: calc(77vw - 463.2px); }
 }

@media (max-width: 1080px) {
.build-stage { padding-bottom: 16px; }
.project { padding-right: 24px; padding-left: 24px; }
.project-composition { min-height: 780px; }
.project-content { width: 100%; }
.project-fan-slot { width: clamp(165px, 22vw, 209px); }
.project-fan-slot--top-left, .project-fan-slot--bottom-left { right: auto; left: 0; }
.project-fan-slot--top-right, .project-fan-slot--bottom-right { right: 0; left: auto; }
.project-fan-slot--top-left, .project-fan-slot--top-right { top: auto; bottom: calc(50% + clamp(75px, 8.5vw, 119px) + clamp(24px, 4vw, 35px)); }
.project-fan-slot--bottom-left, .project-fan-slot--bottom-right { top: calc(50% + clamp(75px, 8.5vw, 119px) + clamp(24px, 4vw, 35px)); bottom: auto; }
 }

@media (max-width: 780px) { .wrap { width: min(100% - 40px, 600px); }
.site-header { padding: 18px 20px; }
.site-header nav { display: none; }
.header-button { padding: 8px 12px; }
.fridge-scroll { height: 220vh; }
.door-video { object-position: center; }
.scroll-progress { right: 20px; bottom: 20px; }
.scroll-progress span { width: 50px; }
.build-scroll { height: 230vh; }
.build-stage { grid-template-columns: 1fr; grid-template-rows: 1fr auto; align-content: center; padding: 72px 20px 10px; }
.build-copy { padding: 0; }
.build-heading { font-size: clamp(44px, 13vw, 70px); }
.build-services { margin-top: 20px; font-size: 13px; }
.build-project-link { margin-top: 30px; }
.build-visual { width: min(100%, 560px); margin: 30px auto 0; }
.introduction, .solutions { padding: 86px 0; }
.solutions { padding-top: 64px; }
.project { min-height: auto; padding: 72px 0; }
.project-composition { min-height: 580px; }
.project-content { width: calc(100% - 40px); }
.project-fan-slot { width: min(100%, 138px); }
.project-fan-slot--top-left, .project-fan-slot--top-right { bottom: calc(50% + 83px); }
.project-fan-slot--bottom-left, .project-fan-slot--bottom-right { top: calc(50% + 83px); }
.intro-grid { grid-template-columns: 1fr; gap: 24px; }
.section-heading { display: block; margin-bottom: 39px; }
.section-heading > p { margin: 24px 0 0; }
.service-grid { grid-template-columns: 1fr; }
.service-card, .service-card-content { min-height: 430px; }
.portfolio-scroll { height: 360vh; }
.portfolio-label { top: 28px; left: 20px; }
.portfolio-word { right: 2vw; width: auto; max-width: none; }
.portfolio-word:nth-child(1) { top: 12vh; left: 5vw; }
.portfolio-word:nth-child(2) { top: 24vh; left: calc(23.6vw - 70.7px); }
.portfolio-word:nth-child(3) { top: 36vh; left: calc(42.2vw - 141.4px); }
.portfolio-word:nth-child(4) { top: 48vh; left: calc(60.8vw - 212.1px); }
.portfolio-word:nth-child(5) { top: 60vh; left: calc(79.4vw - 282.8px); }
.portfolio-word:nth-child(6) { top: 72vh; right: 2vw; left: auto; }
.portfolio-video-frame { width: 100%; height: 100%; }
.project-link { width: 100%; min-height: 118px; font-size: clamp(48px, 13vw, 72px); }
.site-footer { padding: 64px 20px 24px; }
.footer-inner { grid-template-columns: 1fr; gap: 46px; }
.footer-intro > p { margin-top: 34px; }
.footer-contact h2, .footer-links h2 { margin-bottom: 21px; }
.footer-contact-group { font-size: 12px; }
.footer-copyright { margin-top: 0; }
 }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; transition-duration: .001ms !important; }
.project-fan { pointer-events: auto; opacity: 1; transform: none; transition: none; }
}