@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Syne:wght@600;700;800&display=swap');

:root { --ink:#171717; --paper:#e8e6df; --cream:#f4f1e9; --orange:#f2673a; --lime:#d5ef62; --muted:#696b64; --line:rgba(23,23,23,.18); --display:'Syne', sans-serif; --body:'DM Sans', sans-serif; --mono:'DM Mono', monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); overflow-x:hidden; cursor:none; }
a { color:inherit; text-decoration:none; }
button, input, select, textarea { font:inherit; }
button, a { cursor:none; }
.loader { position:fixed; inset:0; z-index:20; display:grid; place-items:center; background:var(--ink); color:var(--cream); overflow:hidden; transition:clip-path 1s cubic-bezier(.77,0,.18,1) .25s; clip-path:circle(150% at 50% 50%); }
.loader.is-done { clip-path:circle(0% at 50% 50%); pointer-events:none; }
.loader__pulse { position:absolute; width:22vw; height:22vw; min-width:180px; min-height:180px; border-radius:50%; background:var(--orange); filter:blur(55px); opacity:.85; animation:pulse 1.8s ease-in-out infinite; }
.loader__wordmark { position:relative; margin:0; font:800 clamp(3rem,9vw,8rem)/.8 var(--display); letter-spacing:-.09em; animation:loader-in .9s .35s both; }
.loader__wordmark span { color:var(--lime); }
.loader__caption { position:absolute; bottom:9vh; margin:0; font:11px var(--mono); text-transform:uppercase; letter-spacing:.15em; color:#a6a69f; animation:fade-in .7s .7s both; }
.cube-canvas { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.58; }
.grain { position:fixed; inset:-50%; z-index:1; pointer-events:none; opacity:.1; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); animation:grain .18s steps(2) infinite; }
.site-header, main, .site-footer { position:relative; z-index:2; }
main { perspective:1400px; perspective-origin:50% 42%; }
main > section { --scroll-depth:0; --scroll-scale:1; transform:translate3d(0, calc(var(--scroll-depth) * -16px), 0) perspective(1400px) rotateX(calc(var(--scroll-depth) * -1.2deg)) scale(var(--scroll-scale)); transform-origin:50% 0; will-change:transform; }
.site-header { position:sticky; top:0; height:86px; padding:0 4.5vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(232,230,223,.94); backdrop-filter:blur(12px); z-index:10; }
.logo { display:flex; align-items:center; gap:10px; font:800 15px var(--display); letter-spacing:-.04em; }
.logo__image { display:block; width:116px; height:auto; }
.logo__mark { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--orange); color:var(--ink); font:800 16px var(--display); }
.nav { display:flex; gap:clamp(18px,3vw,32px); margin-left:auto; margin-right:clamp(18px,4vw,58px); font:11px var(--mono); text-transform:uppercase; }
.nav a, .site-footer a { transition:color .25s; }
.nav a:hover, .site-footer a:hover { color:var(--orange); }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:36px; border:1px solid var(--ink); padding:16px 18px; font:600 11px var(--mono); text-transform:uppercase; transition:transform .25s, background .25s, color .25s; }
.button span { font-size:17px; line-height:0; }
.button:hover { transform:translateY(-3px); }
.button--small { padding:12px 14px; gap:16px; }
.button--dark { background:var(--ink); color:var(--cream); border-color:var(--ink); }
.button--dark:hover { background:var(--orange); color:var(--ink); }
.button--lime { background:var(--lime); border-color:var(--lime); }
.button--lime:hover { background:var(--orange); border-color:var(--orange); }
.button--outline { background:transparent; }
.button--outline:hover { background:var(--ink); color:var(--cream); }
.menu-toggle { display:none; background:none; border:0; padding:8px; }
.menu-toggle span { display:block; width:25px; height:1px; background:var(--ink); margin:6px 0; }
.section-pad { padding:clamp(80px,11vw,170px) 8.5vw; }
.hero { min-height:calc(100vh - 86px); display:flex; align-items:center; position:relative; padding-top:100px; padding-bottom:110px; }
.hero__copy { max-width:800px; position:relative; z-index:1; }
.hero__visual { position:absolute; right:4vw; top:50%; width:min(42vw,560px); aspect-ratio:1; transform:translateY(-50%); display:grid; place-items:center; pointer-events:none; }
.hero__visual img { position:relative; z-index:1; width:58%; transform:rotate(-8deg); filter:drop-shadow(18px 24px 0 rgba(23,23,23,.12)); }
.hero__visual-ring { position:absolute; width:84%; aspect-ratio:1; border:1px solid var(--orange); border-radius:50%; transform:rotate(24deg); }
.hero__visual-ring::after { content:''; position:absolute; inset:8%; border:1px solid var(--line); border-radius:50%; }
.eyebrow { display:flex; align-items:center; gap:11px; margin:0 0 27px; color:var(--muted); font:10px var(--mono); letter-spacing:.13em; text-transform:uppercase; }
.eyebrow__line { width:29px; height:1px; background:var(--orange); }
h1, h2, h3, p { margin-top:0; }
h1, h2 { font:800 clamp(4.3rem,10.8vw,10.5rem)/.83 var(--display); letter-spacing:-.095em; margin-bottom:36px; }
h1 em, h2 em { font-style:normal; color:var(--orange); }
.hero__intro { max-width:380px; margin-bottom:32px; color:#4f504b; font-size:16px; line-height:1.55; }
.hero__actions { display:flex; align-items:center; gap:27px; }
.text-link { font:11px var(--mono); text-transform:uppercase; border-bottom:1px solid var(--ink); padding-bottom:7px; }
.text-link span { margin-left:11px; color:var(--orange); }
.hero__note { margin-top:72px; display:flex; align-items:center; gap:9px; color:var(--muted); font:10px var(--mono); text-transform:uppercase; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 5px rgba(213,239,98,.18); }
.hero__side { position:absolute; right:8.5vw; top:17%; display:flex; gap:22px; align-items:flex-start; color:var(--muted); font:11px var(--mono); text-transform:uppercase; line-height:1.5; }
.hero__side p { margin:0; }.hero__side strong { color:var(--orange); font-weight:400; }.hero__stamp { width:57px; height:57px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; font:600 12px var(--mono); line-height:1; color:var(--orange); }.hero__stamp span { color:var(--ink); font-size:9px; }
.hero__scroll { position:absolute; bottom:43px; left:8.5vw; display:flex; gap:14px; align-items:center; color:var(--muted); font:10px var(--mono); text-transform:uppercase; }.hero__scroll i { display:block; width:50px; height:1px; background:var(--orange); }
.ticker { position:relative; z-index:2; overflow:hidden; padding:20px 0; background:var(--orange); white-space:nowrap; }.ticker__track { width:max-content; display:flex; align-items:center; gap:28px; animation:marquee 28s linear infinite; font:600 13px var(--display); text-transform:uppercase; }.ticker b { font:18px var(--body); color:var(--cream); }
.section-heading { display:grid; grid-template-columns:1fr 280px; align-items:end; margin-bottom:70px; }.section-heading h2 { font-size:clamp(3.8rem,7.6vw,7.3rem); margin-bottom:0; }.section-heading__aside { max-width:245px; margin:0 0 8px; font-size:14px; line-height:1.55; color:var(--muted); }
.service-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:14px; }.service-card { position:relative; min-height:315px; padding:29px; grid-column:span 4; overflow:hidden; transition:transform .35s cubic-bezier(.2,.7,.2,1); }.service-card:hover { transform:translateY(-8px) rotate(-.6deg); }.service-card--wide { grid-column:span 5; background:var(--ink); color:var(--cream); }.service-card--orange { background:var(--orange); grid-column:span 3; }.service-card--lime { background:var(--lime); grid-column:span 4; }.service-card--dark { background:#242d2d; color:var(--cream); grid-column:span 4; }.service-card--outline { background:transparent; border:1px solid var(--line); grid-column:span 4; }.service-card__number { position:absolute; top:29px; right:29px; font:10px var(--mono); opacity:.65; }.service-card h3 { position:absolute; left:29px; bottom:28px; font:700 clamp(1.45rem,2.5vw,2.2rem)/.9 var(--display); letter-spacing:-.07em; margin:0; }.service-card p { position:absolute; max-width:190px; left:29px; bottom:28px; font-size:12px; line-height:1.4; margin:0; opacity:.72; }.service-card h3 + p { left:auto; right:29px; }.service-card > a { position:absolute; right:27px; bottom:25px; display:grid; place-items:center; width:31px; height:31px; border:1px solid currentColor; border-radius:50%; font-size:18px; transition:background .2s, color .2s; }.service-card > a:hover { background:var(--cream); color:var(--ink); }.service-card__icon { position:absolute; top:65px; left:29px; width:68px; height:52px; }.icon-tv { border:2px solid currentColor; border-radius:3px; }.icon-tv:before { content:''; position:absolute; width:29px; height:2px; background:currentColor; left:18px; bottom:-10px; }.icon-tv:after { content:''; position:absolute; width:48px; height:2px; background:currentColor; left:9px; bottom:-15px; }.icon-tv span { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--orange); right:9px; top:9px; }.icon-stove { border:2px solid currentColor; border-radius:2px; height:60px; }.icon-stove:before { content:'•••'; position:absolute; top:-22px; left:12px; letter-spacing:12px; font-size:16px; }.icon-stove span { position:absolute; width:17px; height:17px; border:2px solid currentColor; border-radius:50%; top:18px; left:10px; box-shadow:25px 0 0 -2px var(--orange), 25px 0 0 0 currentColor; }.icon-fridge { width:40px; height:72px; border:2px solid currentColor; border-radius:3px; }.icon-fridge:before { content:''; position:absolute; top:35px; left:0; width:100%; border-top:2px solid currentColor; }.icon-fridge span { position:absolute; top:17px; right:7px; width:2px; height:9px; background:currentColor; }.icon-wind { width:75px; height:58px; border:2px solid currentColor; border-radius:50%; }.icon-wind:before, .icon-wind:after { content:''; position:absolute; width:27px; height:2px; background:currentColor; left:22px; top:20px; transform:rotate(35deg); }.icon-wind:after { top:32px; transform:rotate(-35deg); }.icon-wind span { position:absolute; width:7px; height:7px; border-radius:50%; background:var(--orange); left:32px; top:25px; }.icon-more { border:1px dashed currentColor; border-radius:50%; display:grid; place-items:center; font:40px var(--body); color:var(--orange); }
.story { background:var(--ink); color:var(--cream); display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:10vw; }.story__visual { height:450px; position:relative; display:grid; place-items:center; }.story__circle { width:min(32vw,390px); aspect-ratio:1; border-radius:50%; background:var(--orange); display:grid; place-items:center; font:800 clamp(5rem,13vw,12rem)/1 var(--display); letter-spacing:-.12em; color:var(--ink); transform:rotate(-12deg); }.story__circle:before { content:''; position:absolute; width:calc(100% + 30px); height:calc(100% + 30px); border:1px solid rgba(244,241,233,.3); border-radius:50%; }.story__label { position:absolute; right:11%; top:10%; font:10px var(--mono); text-transform:uppercase; line-height:1.5; color:var(--lime); }.story h2 { font-size:clamp(4rem,7vw,7rem); margin-bottom:30px; }.story__copy > p:not(.eyebrow) { max-width:390px; color:#a7a59b; line-height:1.65; margin-bottom:35px; font-size:15px; }.story .eyebrow { color:#a7a59b; }
.process { background:var(--cream); }.section-heading--split { grid-template-columns:1fr 1fr; }.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); }.step { min-height:260px; padding:27px 35px 20px 0; border-right:1px solid var(--line); margin-right:35px; }.step:last-child { border-right:0; margin-right:0; }.step > span { display:block; color:var(--orange); font:11px var(--mono); margin-bottom:55px; }.step h3 { font:700 clamp(1.9rem,3vw,3rem)/.92 var(--display); letter-spacing:-.07em; margin-bottom:17px; }.step p { max-width:215px; color:var(--muted); font-size:13px; line-height:1.5; margin:0; }
.booking { display:grid; grid-template-columns:1fr 1fr; gap:10vw; background:var(--orange); }.booking h2 { font-size:clamp(4.5rem,8vw,8rem); }.booking-form { display:grid; grid-template-columns:1fr 1fr; gap:23px 16px; align-content:start; }.booking-form label { display:flex; flex-direction:column; gap:9px; font:10px var(--mono); text-transform:uppercase; }.booking-form label span { color:#7b301f; font-size:9px; }.booking-form input, .booking-form select, .booking-form textarea { background:transparent; border:0; border-bottom:1px solid rgba(23,23,23,.45); border-radius:0; padding:9px 0; outline:none; color:var(--ink); resize:vertical; }.booking-form input::placeholder, .booking-form textarea::placeholder { color:#8f3d29; }.booking-form select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%); background-position:calc(100% - 5px) 15px, 100% 15px; background-size:5px 5px; background-repeat:no-repeat; }.booking-form label:nth-child(3), .booking-form label:nth-child(4) { grid-column:span 2; }.booking-form .button { grid-column:span 2; margin-top:19px; width:max-content; }.form-note, .form-success { grid-column:span 2; margin:0; font:10px var(--mono); color:#7b301f; }.form-success { color:var(--ink); font-weight:600; }
.site-footer { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; align-items:center; padding:42px 8.5vw 35px; background:var(--paper); border-top:1px solid var(--line); }.site-footer p, .site-footer small { color:var(--muted); font:10px var(--mono); text-transform:uppercase; }.site-footer > div { display:flex; flex-direction:column; gap:6px; font:11px var(--mono); }.site-footer small { grid-column:3; justify-self:end; }
.cursor { position:fixed; z-index:30; top:0; left:0; width:30px; height:30px; border:1px solid var(--orange); border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); transition:width .2s, height .2s, background .2s; mix-blend-mode:normal; opacity:1; }.cursor span { position:absolute; inset:0; display:grid; place-items:center; color:var(--orange); font:15px var(--body); }.cursor.is-hover { width:52px; height:52px; background:var(--lime); border-color:var(--ink); }.cursor.is-hover span { color:var(--ink); }
.reveal { opacity:0; transform:translateY(25px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }.reveal.is-visible { opacity:1; transform:none; }.reveal--delay { transition-delay:.14s; }
@keyframes pulse { 0%,100% { transform:scale(.8); opacity:.65; } 50% { transform:scale(1.4); opacity:1; } } @keyframes loader-in { from { opacity:0; transform:scale(.7); } to { opacity:1; transform:scale(1); } } @keyframes fade-in { from { opacity:0; } to { opacity:1; } } @keyframes grain { 0% { transform:translate(0,0); } 25% { transform:translate(2%, -1%); } 50% { transform:translate(-1%, 2%); } 75% { transform:translate(1%, 1%); } 100% { transform:translate(-2%, -1%); } } @keyframes marquee { to { transform:translateX(-50%); } }
@media (max-width:800px) { body { cursor:auto; }.cursor { display:none; }.site-header { height:70px; padding:0 6vw; }.nav, .site-header > .button { display:none; }.menu-toggle { display:block; }.nav.is-open { position:absolute; display:flex; z-index:5; left:0; right:0; top:70px; padding:25px 6vw; background:var(--cream); flex-direction:column; gap:19px; border-bottom:1px solid var(--line); }.hero { min-height:calc(100svh - 70px); padding:75px 6vw 90px; }.hero__side { display:none; }.hero__scroll { left:6vw; bottom:28px; }.section-pad { padding:85px 6vw; } h1 { font-size:clamp(4rem,17vw,7rem); }.hero__intro { font-size:14px; max-width:330px; }.hero__note { margin-top:50px; }.section-heading, .section-heading--split { display:block; margin-bottom:48px; }.section-heading h2 { font-size:clamp(3.6rem,15vw,6rem); margin-bottom:26px; }.section-heading__aside { font-size:13px; }.service-grid { grid-template-columns:1fr 1fr; }.service-card, .service-card--wide, .service-card--orange, .service-card--lime, .service-card--dark, .service-card--outline { grid-column:span 1; min-height:275px; padding:20px; }.service-card:first-child { grid-column:span 2; }.service-card h3, .service-card p { left:20px; bottom:20px; }.service-card h3 + p { right:20px; }.service-card__number { top:20px; right:20px; }.service-card__icon { top:55px; left:20px; transform:scale(.8); transform-origin:top left; }.service-card > a { right:18px; bottom:18px; }.story { display:block; }.story__visual { height:330px; }.story__circle { width:65vw; }.story__label { right:6%; top:2%; }.story__copy h2 { font-size:clamp(4rem,15vw,6rem); }.steps { display:block; }.step { min-height:auto; padding:25px 0 30px; border-right:0; border-bottom:1px solid var(--line); margin:0; display:grid; grid-template-columns:60px 1fr; column-gap:15px; }.step > span { grid-row:span 2; margin:0; }.step h3 { margin-bottom:10px; }.step p { grid-column:2; }.booking { display:block; }.booking h2 { font-size:clamp(4rem,15vw,6rem); }.booking-form { margin-top:55px; }.site-footer { grid-template-columns:1fr 1fr; padding:35px 6vw; gap:28px 10px; }.site-footer p { grid-column:span 2; order:2; }.site-footer > div { order:3; }.site-footer small { grid-column:2; order:4; align-self:end; } }
@media (max-width:430px) { .hero__actions { align-items:flex-start; flex-direction:column; gap:22px; }.service-card { min-height:245px; }.service-card h3 + p { display:none; }.service-card h3 { font-size:1.45rem; }.booking-form { display:block; }.booking-form label { margin-bottom:23px; }.booking-form .button, .form-note, .form-success { width:auto; margin-top:8px; }.site-footer { display:flex; flex-wrap:wrap; }.site-footer p { width:100%; }.site-footer small { margin-left:auto; } }
@media (max-width:900px) and (min-width:801px) { .nav, .site-header > .button { display:none; }.menu-toggle { display:block; }.nav.is-open { position:absolute; display:flex; z-index:5; left:0; right:0; top:86px; padding:25px 6vw; background:var(--cream); flex-direction:column; gap:19px; border-bottom:1px solid var(--line); } }
@media (max-width:800px) { .hero__visual { right:0; top:31%; width:72vw; opacity:.28; } }
@media (prefers-reduced-motion:reduce) { *, *:before, *:after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }