/* HÔM’S — an architectural material study in light, glass and motion. */
.desktop-nav{gap:24px}.site-header{gap:23px}.header-contact{margin-left:10px}.hero-content h1{animation:hero-title-in 1.25s cubic-bezier(.16,1,.3,1) both}.hero-content>.eyebrow{animation:hero-title-in 1s .08s both}.hero-description,.hero-actions{animation:hero-title-in 1.1s .18s both}.hero-image{transform:scale(1.07) translateY(var(--hero-y,0px));will-change:transform}.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 20%,#fff0 38%,#fff2 48%,#fff0 58%,transparent 70%);background-size:100% 100%;animation:light-passing 1.8s .15s both;mix-blend-mode:soft-light}.hero-content{z-index:2}.hero-bottom{z-index:2}.hero-corner{z-index:2}
@keyframes hero-title-in{from{transform:translateY(18px)}to{transform:translateY(0)}}
@keyframes light-passing{from{transform:translateX(-100%);opacity:0}30%{opacity:1}to{transform:translateX(100%);opacity:0}}
.glass-experience{height:225svh;margin:0 12px 120px;border-radius:32px;background:#172017;color:#f0f1e7;position:relative}.glass-stage{position:sticky;top:0;height:100svh;min-height:700px;max-height:1200px;overflow:hidden;border-radius:32px;background:radial-gradient(ellipse at 75% 47%,#43503977,transparent 55%),linear-gradient(135deg,#1b231a,#121912)}.glass-stage::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,#17201780,transparent 45%),linear-gradient(0deg,#12191288,transparent 22%);z-index:1}.glass-canvas{position:absolute;inset:0;z-index:1}.glass-canvas canvas{height:100%;width:100%;display:block;opacity:0;transition:opacity 1.2s}.glass-canvas[data-ready=true] canvas{opacity:1}.glass-scene-copy{position:absolute;left:max(52px,calc((100vw - 1312px)/2 - 12px));top:50%;transform:translateY(-50%);z-index:2;pointer-events:none}.glass-scene-copy .eyebrow{font-size:9px;letter-spacing:1.5px;color:#c7d0bc}.glass-scene-copy h2{font-size:clamp(70px,7.3vw,118px);letter-spacing:-5.5px;line-height:1.02;margin:31px 0 25px;font-weight:400}.glass-scene-copy h2 span{font-weight:300;color:#b9c9a7}.glass-scene-description{font-size:13px;line-height:1.9;color:#bac7ad}.glass-materials{display:flex;gap:7px;margin-top:32px;pointer-events:auto}.glass-materials button{display:flex;gap:8px;align-items:center;padding:10px 13px;border:1px solid #91a18444;border-radius:100px;background:#c7d7b507;color:#c5d0b9;font-size:10px;transition:background .25s,border-color .25s}.glass-materials button[aria-pressed=true]{color:#fff;background:#dae8c71b;border-color:#d3e5bd94;box-shadow:inset 0 1px 0 #ffffff55}.glass-materials button>span{height:15px;width:15px;border-radius:50%;display:block;border:1px solid #e6eadab0;background:linear-gradient(115deg,#ffffff05,#fff7,#fff1)}.glass-materials button>.sample-fluted{background:repeating-linear-gradient(90deg,#fff1 0px,#fff8 2px,#fff1 4px)}.glass-materials button>.sample-bronze{background:linear-gradient(110deg,#c9a77b33,#f6d3aeb5,#8a622b77);border-color:#cead79}.glass-material-note{font-size:9px;color:#8f9e80;margin-top:15px;letter-spacing:.1px}.glass-scene-bottom{position:absolute;bottom:30px;left:52px;right:52px;z-index:3;display:flex;align-items:center;gap:20px;color:#a4b296}.glass-scene-bottom>p{font-size:9px;letter-spacing:.4px}.glass-progress{width:64px;height:2px;background:#d2e8b92e;position:relative}.glass-progress>span{display:block;height:2px;background:#d3e1bc;width:var(--progress,0%);box-shadow:0 0 8px #d7eab266}.glass-scene-bottom button{border:1px solid #c6d9b22e;color:#b6c5a9;background:#8b9c780a;border-radius:100px;font-size:9px;padding:8px 13px;margin-left:auto}.glass-scene-signature{font-size:7px;letter-spacing:1.3px}.glass-scene-backdrop{position:absolute;inset:0;opacity:.6;transition:opacity 1s;overflow:hidden;pointer-events:none}.glass-scene-backdrop span{position:absolute;top:24%;bottom:24%;width:15%;left:55%;border-radius:18px;border:1px solid #e1efd68c;transform:perspective(800px) rotateY(-30deg) rotateZ(-4deg);background:linear-gradient(110deg,#fff1,#cde5ac33,#fff1);box-shadow:inset 3px 0 8px #fff2,20px 20px 40px #0003;backdrop-filter:blur(12px)}.glass-scene-backdrop span:nth-child(2){left:65%;top:19%;bottom:19%;transform:perspective(800px) rotateY(20deg) rotateZ(2deg)}.glass-scene-backdrop span:nth-child(3){left:76%;transform:perspective(800px) rotateY(-15deg) rotateZ(8deg)}.glass-stage:has(.glass-canvas[data-ready=true]) .glass-scene-backdrop{opacity:0}.glass-stage:has(.glass-canvas[data-renderer=fallback]) .glass-scene-backdrop{opacity:.8}.glass-canvas[data-renderer=fallback] canvas{display:none}.glass-experience[data-material=bronze] .glass-scene-backdrop span{background:linear-gradient(120deg,#d9b09066,#c6934c33,#efc58b77)}.glass-experience[data-material=fluted] .glass-scene-backdrop span{background:repeating-linear-gradient(90deg,#e2f0c90a 0,#c2d9ad55 3px,#e2f0c90a 6px)}
.films{padding-bottom:110px}.film-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}.film-card{padding:0;background:transparent;text-align:left;min-width:0;transform:translateY(0);transition:transform .5s cubic-bezier(.2,.65,.2,1)}.film-card:nth-child(2){padding-top:60px}.film-card:nth-child(3){padding-top:120px}.film-card:hover{transform:translateY(-7px)}.film-visual{position:relative;height:560px;overflow:hidden;border-radius:24px;background:#c3c8b9;isolation:isolate}.film-visual video{width:100%;height:100%;object-fit:cover;transition:transform 1s}.film-card:hover video{transform:scale(1.035)}.film-visual::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#111b10dc,transparent 65%);z-index:0}.film-category{position:absolute;top:18px;left:18px;padding:9px 13px;border-radius:100px;color:#fff;background-color:#24321a26;font-size:9px}.film-play{position:absolute;right:18px;top:18px;display:grid;place-items:center;width:39px;height:39px;border-radius:50%;color:#fff;background-color:#24321a26;font-size:11px;padding-left:2px;transition:transform .3s}.film-card:hover .film-play{transform:scale(1.1)}.film-overlay{position:absolute;bottom:27px;left:26px;right:20px;z-index:1;color:#fff}.film-overlay>span:first-child{font-size:8px;letter-spacing:1.6px;color:#d2debf}.film-overlay h3{font-size:27px;letter-spacing:-1px;font-weight:400;line-height:1.2;margin:14px 0 23px}.film-watch{font-size:10px;color:#e0e9d5}.film-caption{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:10px;color:#717965;margin-top:17px;line-height:1.6}.film-caption>span{font-size:9px;flex-shrink:0}.films-note{font-size:10px;color:#929987;margin-top:24px}.project-card.reveal{transition:opacity .7s,translate .7s cubic-bezier(.16,1,.3,1);transition-delay:var(--reveal-delay,0s)}.project-card.reveal.awaiting{translate:0 34px;transform:none}.project-card.reveal:not(.awaiting){translate:0 0}.project-open{transition:background .2s,transform .4s}.project-image::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 25%,#ffffff0e,transparent 65%);opacity:0;transition:opacity .4s}.project-card:hover .project-image::after{opacity:1}
@media(max-width:1150px){.desktop-nav{gap:22px}.glass-scene-copy{left:40px}.glass-scene-copy h2{font-size:85px}.glass-experience{margin-bottom:90px}.film-visual{height:490px}.film-overlay{left:20px}.film-overlay h3{font-size:23px}.film-grid{gap:20px}}
@media(max-width:800px){.desktop-nav{gap:17px}.glass-experience{margin:0 8px 80px;height:200svh}.glass-stage{border-radius:26px}.glass-scene-copy{left:28px}.glass-scene-copy h2{font-size:72px;letter-spacing:-4px}.glass-scene-copy .eyebrow{font-size:7px;letter-spacing:1px}.glass-scene-description{font-size:11px}.glass-materials{gap:5px}.glass-materials button{font-size:8px;padding:9px 10px;gap:6px}.glass-scene-bottom{left:28px;right:28px;bottom:25px;gap:12px}.glass-scene-signature{display:none}.glass-scene-bottom p{font-size:8px}.films{padding-bottom:85px}.film-grid{gap:16px}.film-visual{height:400px;border-radius:21px}.film-overlay{left:16px;bottom:22px;right:12px}.film-overlay h3{font-size:20px;letter-spacing:-.7px;margin:11px 0 18px}.film-overlay>span:first-child{font-size:6px;letter-spacing:1px}.film-watch{font-size:8px}.film-caption{font-size:8px;gap:8px}.film-caption>span{font-size:8px}.film-category{top:13px;left:13px;font-size:7px;padding:8px 10px}.film-play{right:12px;top:12px;height:30px;width:30px;font-size:9px}.film-card:nth-child(2){padding-top:45px}.film-card:nth-child(3){padding-top:90px}}
@media(max-width:600px){.site-header{gap:8px}.hero-image{transform:scale(1.2) translateY(var(--hero-y,0px));transform-origin:50% 65%}.glass-experience{margin:0 6px 65px;height:180svh;border-radius:26px}.glass-stage{height:100svh;min-height:740px;max-height:1000px}.glass-scene-copy{left:22px;right:22px;top:112px;transform:none}.glass-scene-copy .eyebrow{font-size:7px;letter-spacing:1px}.glass-scene-copy h2{font-size:58px;letter-spacing:-3px;line-height:1.02;margin:21px 0 16px}.glass-scene-copy h2 br:nth-child(2){display:none}.glass-scene-copy h2 span{margin-left:9px}.glass-scene-description{font-size:11px;line-height:1.8}.glass-materials{margin-top:23px;gap:6px}.glass-materials button{padding:8px 12px;font-size:9px;gap:7px}.glass-material-note{font-size:8px;margin-top:12px}.glass-scene-bottom{left:22px;right:22px;bottom:22px;gap:12px;flex-wrap:wrap}.glass-scene-bottom>p{font-size:8px}.glass-progress{width:30px}.glass-scene-bottom button{font-size:7px;padding:8px 10px}.glass-scene-backdrop span{left:19%;width:29%;top:56%;bottom:16%;border-radius:10px}.glass-scene-backdrop span:nth-child(2){left:37%;top:52%;bottom:13%}.glass-scene-backdrop span:nth-child(3){left:57%;top:56%;bottom:16%}.films{padding-bottom:65px}.films h2{font-size:36px;letter-spacing:-1.7px}.film-grid{display:flex;gap:15px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -22px;padding:0 22px 12px;scroll-padding-left:22px;scrollbar-width:thin;scrollbar-color:#a9b29e transparent}.film-card{width:82%;min-width:82%;scroll-snap-align:start}.film-card:nth-child(2),.film-card:nth-child(3){padding-top:0}.film-visual{height:470px;border-radius:22px}.film-overlay{left:23px;bottom:25px;right:18px}.film-overlay h3{font-size:27px;letter-spacing:-1px;margin:15px 0 24px}.film-overlay>span:first-child{font-size:8px;letter-spacing:1.4px}.film-watch{font-size:10px}.film-category{font-size:8px;left:16px;top:16px;padding:9px 13px}.film-play{width:37px;height:37px;right:16px;top:16px;font-size:10px}.film-caption{font-size:9px;gap:12px;margin-top:15px}.film-caption>span{font-size:8px}.films-note{font-size:9px;margin-top:17px;line-height:1.7}.film-card:hover{transform:none}}
@media(max-width:370px){.glass-scene-copy h2{font-size:49px}.glass-materials button{font-size:8px;padding:8px 10px}.glass-scene-copy .eyebrow{font-size:6px}.glass-scene-bottom{gap:9px}.glass-scene-bottom>p{font-size:7px}.glass-scene-bottom button{font-size:6px}.film-visual{height:430px}.film-overlay h3{font-size:23px}}
@media(prefers-reduced-motion:reduce){.hero-image{will-change:auto}.hero::after{display:none}.hero-content h1,.hero-content>.eyebrow,.hero-description,.hero-actions{animation:none}.glass-experience{height:auto}.glass-stage{position:relative}.project-card.reveal.awaiting{translate:0}.film-card:hover,.film-card:hover video{transform:none}}

@media(max-width:600px){.glass-scene-copy h2{font-size:clamp(39px,12vw,60px);letter-spacing:-2px;word-spacing:3px}.glass-scene-copy h2 span{margin-left:0}.glass-stage::after{background:linear-gradient(180deg,#172017 0%,#172017f5 24%,#172017b3 43%,transparent 65%)}}

@media(prefers-reduced-motion:reduce){#motion-toggle{display:none}}

/* Static content remains readable before optional motion starts. */
.service-panel[hidden],[hidden]#motion-toggle{display:none}.film-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.film-visual.is-playing .film-poster{visibility:hidden}.section-kicker>span,.service-tab>span,.portfolio-toolbar>p,.films-note{color:#626b56}.transformation-copy>.dark-eyebrow,.transformation-copy>p,.transformation-copy .compare-instruction{color:#4d5842}.footer-top>p,.footer-bottom span{color:#606953}

.transformation-copy>p:not(.eyebrow){color:#4d5842}