@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600&display=swap');
:root{color-scheme:dark;--bg:#090909;--fg:#f5f3ef;--muted:#aaa7a2;--line:#ffffff2b;--glass:#16151490;--accent:#ff6139;--display:'Space Grotesk',sans-serif;--body:'Inter',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 var(--body);-webkit-font-smoothing:antialiased}body.locked{overflow:hidden}::selection{background:#ef4e29;color:white}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);background:var(--glass)}a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background .25s,color .25s,transform .25s,border-color .25s,opacity .25s}a:focus-visible,button:focus-visible{outline:2px solid #ff986f;outline-offset:6px}button:hover{background:#3c302b;border-color:#ff9367}a:active,button:active{transform:scale(.97)}[hidden]{display:none!important}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:400}img,video{display:block;max-width:100%}h1,h2,.display{font-family:var(--display);font-weight:400;line-height:1.1;letter-spacing:-.025em}.shell{width:min(1440px,calc(100% - 96px));margin:auto}.eyebrow{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500}.muted{color:var(--muted)}.skip-link{position:fixed;top:-100px;left:24px;z-index:100;padding:12px;background:white;color:black}.skip-link:focus{top:12px}
.ambient{position:absolute;inset:0 0 auto;height:1100px;overflow:hidden;pointer-events:none;z-index:-1}.ambient:before,.ambient:after{content:'';position:absolute;width:78vw;height:610px;right:-20vw;top:-230px;border-radius:46% 54% 65% 35%;background:radial-gradient(ellipse,#ff953b 0%,#ed431b 24%,#bd190c 43%,transparent 68%);filter:blur(66px);opacity:.77;animation:drift 18s ease-in-out infinite alternate}.ambient:after{width:52vw;height:670px;top:150px;right:-32vw;background:radial-gradient(ellipse,#ff5a22 0%,#c7160c 28%,transparent 64%);opacity:.48;animation-delay:-7s}.site-header{position:relative;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:28px 0;gap:24px}.wordmark{font-family:var(--display);font-size:1rem;letter-spacing:.015em}.wordmark:hover{color:#ff9a75}.nav{display:flex;align-items:center;gap:6px;padding:5px;border:1px solid var(--line);border-radius:100px;background:#13111080;backdrop-filter:blur(22px)}.nav a{font-size:.875rem;padding:8px 18px;border-radius:30px}.nav a:hover{background:#ffffff21}.hero{position:relative;padding:72px 0 58px}.hero-meta{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:30px}.hero h1{font-size:clamp(3.5rem,7.6vw,7.5rem);max-width:1050px}.hero h1 span{display:block;color:#f5f3efa6}.hero-bottom{display:flex;align-items:end;justify-content:space-between;margin-top:34px;gap:32px}.hero-bottom p{max-width:390px;color:#c5beb7}.pill-link{display:inline-flex;gap:30px;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:100px;padding:13px 24px;background:#ffffff0f;backdrop-filter:blur(14px);font-size:.875rem;white-space:nowrap}.pill-link:hover{background:#eee9e2;color:#141414;transform:translateY(-3px)}.arrow{display:inline-block;transition:transform .3s}.pill-link:hover .arrow,.project-card:hover .arrow{transform:translate(3px,-3px)}.section-heading{display:flex;align-items:baseline;justify-content:space-between;border-top:1px solid var(--line);padding:25px 0 30px;gap:20px}.section-heading h2{font-size:1.5rem}.work{position:relative;padding-top:25px}.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 24px}.project-card{display:block;min-width:0}.card-image{overflow:hidden;border-radius:18px;position:relative;background:#1c1b1a;aspect-ratio:1.4;border:1px solid #ffffff12}.card-image img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.1,1),filter .5s}.project-card:hover .card-image img{transform:scale(1.045);filter:brightness(1.06)}.card-open{position:absolute;right:18px;bottom:18px;width:46px;height:46px;display:grid;place-items:center;background:#0a0a0a7a;backdrop-filter:blur(14px);border:1px solid #ffffff73;border-radius:50%;transition:background .3s,transform .3s;font-size:1.2rem}.project-card:hover .card-open{background:#f0ede7;color:#111;transform:rotate(-8deg)}.card-caption{display:flex;align-items:start;justify-content:space-between;gap:20px;padding:18px 2px 0}.card-caption h3{font-family:var(--display);font-size:1.4rem;margin-bottom:3px}.card-caption p{font-size:.875rem;color:var(--muted)}.card-number{font-size:.75rem;color:#898581;padding-top:7px}.project-card.featured{grid-column:1/-1}.project-card.featured .card-image{aspect-ratio:2.25}.work-decoration{position:absolute;top:29%;left:-180px;width:500px;height:500px;z-index:-1;opacity:.045;transform:rotate(15deg)}.about{position:relative;margin-top:130px;padding:64px 0 86px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:70px;overflow:hidden}.about h2{font-size:clamp(2.5rem,4.6vw,4.5rem);margin-top:22px}.about-copy{padding-top:34px;position:relative}.about-copy p{font-size:1.05rem;color:#c1bdb8;margin-bottom:24px;max-width:570px}.about .pill-link{margin-top:12px}.site-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:28px 0 36px;gap:20px;font-size:.75rem;color:var(--muted)}.site-footer a{padding:8px;border-radius:20px}.site-footer a:hover{color:white;background:#24201e}
.intro{position:fixed;inset:0;z-index:60;background:#080808;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;animation:introAway .6s ease 2.3s forwards}.intro:before{content:'';position:absolute;width:110vw;height:95vh;background:radial-gradient(ellipse,#ffbd73 0%,#ff6125 18%,#d9220c 35%,transparent 66%);filter:blur(55px);transform:scale(.1);opacity:0;animation:ignite 2.9s ease forwards}.intro-name{font-family:var(--display);text-align:center;font-size:clamp(2.5rem,8vw,8rem);line-height:1.1;position:relative;animation:nameIn 2.9s ease both;letter-spacing:-.02em}.intro-sub{position:relative;animation:nameIn 2.9s ease both;animation-delay:.12s}.intro button{position:absolute;right:32px;top:28px;border-radius:30px;padding:10px 18px;background:#0005;font-size:.875rem}.motion-control{position:fixed;right:20px;bottom:20px;z-index:20;padding:9px 15px;border-radius:30px;font-size:.75rem;backdrop-filter:blur(15px);box-shadow:0 4px 20px #0004}.motion-control:hover{transform:translateY(-2px)}
.case-hero{padding:45px 0 48px}.back-link{display:inline-block;color:var(--muted);font-size:.875rem;padding:5px 0;margin-bottom:48px}.back-link:hover{color:white;transform:translateX(-4px)}.case-top{display:flex;align-items:end;justify-content:space-between;gap:30px}.case-hero h1{font-size:clamp(3.2rem,7.5vw,7rem);margin-top:16px}.case-summary{display:grid;grid-template-columns:1.3fr 1fr;gap:70px;margin-top:38px}.case-summary>p{color:#c6c0ba;max-width:680px;font-size:1.05rem}.case-facts{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid var(--line);padding-top:18px;font-size:.875rem}.case-facts dt{color:var(--muted);font-size:.75rem;margin-bottom:8px}.case-facts dd{margin:0}.case-cover{border-radius:18px;overflow:hidden;background:#1c1b1a}.case-cover img{width:100%;height:auto}.case-nav{position:sticky;top:12px;z-index:15;display:flex;justify-content:center;gap:6px;width:fit-content;max-width:100%;margin:30px auto 70px;padding:6px;border:1px solid var(--line);background:#100f0ed6;backdrop-filter:blur(20px);border-radius:100px}.case-nav a{font-size:.875rem;white-space:nowrap;border-radius:50px;padding:9px 18px}.case-nav a:hover{background:#efe9df;color:#141414}.case-section{margin-top:80px;scroll-margin-top:100px}.case-section-head{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding:24px 0 30px;gap:20px}.case-section-head h2{font-size:clamp(1.6rem,3vw,2.7rem)}.case-section-head p{color:var(--muted);font-size:.875rem;max-width:420px}.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}.gallery.stories{grid-template-columns:repeat(3,minmax(0,1fr))}.gallery figure{margin:0;min-width:0;overflow:hidden;border-radius:12px;background:#171717;position:relative}.gallery .wide{grid-column:1/-1}.gallery img,.gallery video{width:100%;height:auto}.gallery .media-button{display:block;border:0;padding:0;width:100%;background:transparent;text-align:left;border-radius:inherit;overflow:hidden;cursor:zoom-in}.media-button:hover{transform:none;background:transparent}.media-button img{transition:transform .65s}.media-button:hover img{transform:scale(1.012)}.zoom-mark{position:absolute;right:12px;bottom:12px;background:#1119;backdrop-filter:blur(8px);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;opacity:0;transition:opacity .3s}.media-button:hover .zoom-mark,.media-button:focus-visible .zoom-mark{opacity:1}.video-toggle{position:absolute;right:12px;bottom:12px;background:#000a;backdrop-filter:blur(10px);border-radius:50px;padding:6px 12px;font-size:.75rem}.next-project{margin:100px 0 60px;padding:36px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px}.next-project h2{font-size:clamp(2rem,4vw,4rem);margin-top:10px}.next-project:hover{color:#ff9570}.next-project>.arrow{font-size:3rem}.lightbox{border:1px solid var(--line);border-radius:14px;background:#0b0b0b;color:white;width:min(1500px,95vw);max-height:94vh;padding:50px 12px 12px;overflow:auto}.lightbox::backdrop{background:#000d;backdrop-filter:blur(12px)}.lightbox img{margin:auto;max-width:100%;height:auto}.lightbox-close{position:fixed;right:5vw;top:5vh;border-radius:40px;padding:9px 18px;z-index:2;background:#151515}.lightbox[open]{animation:dialogIn .25s ease}.reveal{opacity:1}.js-motion .reveal.pending{opacity:0;transform:translateY(24px)}.js-motion .reveal{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
@keyframes drift{to{transform:translate(-14%,18%) rotate(16deg) scale(1.15)}}@keyframes ignite{0%{opacity:0;transform:scale(.1)}40%{opacity:.95}100%{opacity:.8;transform:scale(1.65) translateY(-15%)}}@keyframes nameIn{0%,12%{opacity:0;transform:translateY(25px);filter:blur(8px)}35%,100%{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes introAway{to{opacity:0;visibility:hidden}}@keyframes dialogIn{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}body.motion-paused *,body.motion-paused *:before,body.motion-paused *:after{animation-play-state:paused!important}.motion-paused .reveal.pending{opacity:1;transform:none}
@media(min-width:1100px){.project-card:nth-child(3),.project-card:nth-child(5){padding-top:50px}}@media(max-width:800px){.shell{width:calc(100% - 40px)}.hero{padding:48px 0}.hero h1{font-size:clamp(3rem,9vw,5rem)}.hero-meta .muted{display:none}.hero-bottom{align-items:start}.work-grid{gap:32px 16px}.card-image{border-radius:12px}.card-caption h3{font-size:1.2rem}.about{gap:32px;margin-top:80px;padding:45px 0}.case-summary{gap:30px}.case-nav{justify-content:start;overflow-x:auto;border-radius:20px}.case-nav a{padding:8px 12px}.case-section-head{display:block}.case-section-head p{margin-top:10px}.ambient:before{width:110vw;right:-40vw;opacity:.6}.gallery{gap:12px}.gallery.stories{gap:12px}}@media(max-width:540px){.site-header{gap:12px;padding:20px 0}.wordmark{font-size:.875rem;max-width:110px;line-height:1.25}.nav a{padding:7px 11px;font-size:.8125rem}.hero{padding:38px 0}.hero-meta{margin-bottom:24px}.hero h1{font-size:clamp(2.75rem,11vw,4rem);line-height:1.14}.hero-bottom{flex-direction:column;gap:24px;margin-top:26px}.hero-bottom p{font-size:.9375rem}.section-heading{padding:20px 0}.section-heading h2{font-size:1.25rem}.section-heading .eyebrow{font-size:.75rem;letter-spacing:0}.work-grid{grid-template-columns:1fr;gap:32px}.project-card.featured .card-image{aspect-ratio:1.4}.card-caption{padding-top:12px}.about{grid-template-columns:1fr;gap:12px}.about h2{font-size:2.5rem}.about-copy{padding-top:14px}.site-footer{flex-wrap:wrap;padding-bottom:76px}.case-hero{padding:24px 0 30px}.back-link{margin-bottom:24px}.case-hero h1{font-size:clamp(2.6rem,10vw,4rem);overflow-wrap:anywhere}.case-summary{grid-template-columns:1fr;gap:16px;margin-top:24px}.case-facts{margin-bottom:0}.case-nav{margin:20px 0 40px}.case-nav a{font-size:.8125rem}.case-section{margin-top:48px}.gallery{grid-template-columns:1fr}.gallery.stories{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery figure{border-radius:8px}.case-cover{border-radius:10px}.next-project{margin:64px 0 40px}.intro button{top:20px;right:20px}.zoom-mark{opacity:.8}.ambient:before{filter:blur(45px)}.lightbox-close{right:5vw;top:4vh}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.intro{display:none!important}.js-motion .reveal.pending{opacity:1;transform:none}}

body{isolation:isolate}.project-card.featured{padding-top:0}button:active{transform:scale(.97)}
@view-transition{navigation:auto}::view-transition-old(root){animation:pageOut .18s ease both}::view-transition-new(root){animation:pageIn .3s ease both}@keyframes pageOut{to{opacity:0;transform:translateY(-8px)}}@keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

.video-toggle,.motion-control{font-size:.875rem}html:has(body.motion-paused){scroll-behavior:auto}.media-button:active{transform:scale(.99)}

/* The animated cover uses the original composition without cropping its pieces. */
.project-card.featured .card-image{aspect-ratio:1400/788;background:#fff}
.card-image video{width:100%;height:100%;object-fit:contain;transition:transform .8s cubic-bezier(.2,.7,.1,1)}
.project-card:hover .card-image video{transform:scale(1.025)}
/* Preserve the composition of the covers selected by the designer. */
.card-image,.project-card.featured .card-image{aspect-ratio:var(--cover-ratio,1.4)}

/* Compact lead project and spectral typography. */
.project-card.featured{grid-column:auto}
.project-card.featured .card-image{background:#171717}
.hero{padding:48px 0 44px}
.hero h1{font-size:clamp(3rem,6.5vw,6.25rem)}
.hero h1>span{color:#eee9f2;background:linear-gradient(110deg,#f5f3ef 10%,#b7b4bc 28%,#eef0e5 40%,#d5f1a7 48%,#ffa6a0 53%,#c497ed 58%,#f5f3ef 68%);background-size:240% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:chromeSweep 9s ease-in-out infinite}
.hero h1{transition:filter .4s ease}
.hero h1:hover{filter:drop-shadow(2px 0 0 #d890f740) drop-shadow(-2px 0 0 #e4fda030)}
.card-caption h3{transition:color .3s,transform .35s,text-shadow .35s}
.project-card:hover h3,.project-card:focus-visible h3{color:#ebdfef;transform:translateX(5px);text-shadow:1px 0 #d48beb88,-1px 0 #d6f98f66}
.section-heading h2,.case-section-head h2{transition:text-shadow .4s,color .4s}
.section-heading h2:hover,.case-section-head h2:hover{color:#f7efff;text-shadow:2px 0 #b457ca66,-2px 0 #b9d17466}
@keyframes chromeSweep{0%,100%{background-position:100% 50%}50%{background-position:0% 50%}}
/* Animated organic color bands with a dark center for readable content. */
.ambient{position:fixed;inset:0;height:100vh;height:100dvh;background:#101012}
.ambient:before{width:130vmax;height:110vmax;left:-30%;top:-35%;right:auto;opacity:.55;filter:blur(20px);background:radial-gradient(ellipse at 30% 60%,#eee 0%,#9b9d9b 9%,#c4dc44 12%,#f95336 16%,#9e39ba 21%,#151419 30%,#25242a 48%,#9b5ab2 59%,#ee6654 64%,#c6db74 67%,#aab0ac 71%,#19191d 80%);animation:spectralDrift 16s ease-in-out infinite alternate}
.ambient:after{display:none}
.ambient canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ambient.flow-ready:before{display:none}
@keyframes spectralDrift{to{transform:translate(15%,8%) rotate(30deg) scale(1.1)}}
.intro:before{background:radial-gradient(ellipse,#fafafa 0%,#bacb84 9%,#ff6c48 18%,#bd60e1 28%,#28262d 45%,transparent 66%)}
@media(min-width:1100px){.project-card:nth-child(3),.project-card:nth-child(5){padding-top:0}.project-card:nth-child(even){padding-top:35px}}
@media(max-width:540px){.hero{padding:30px 0 34px}.hero h1{font-size:clamp(2.7rem,10.5vw,3.6rem)}}
@media(prefers-reduced-motion:reduce){.hero h1>span,.ambient:before{animation:none}.hero h1,.card-caption h3,.section-heading h2,.case-section-head h2{transition:none}.project-card:hover h3{transform:none}}

.ambient:not(.flow-ready) canvas{display:none}

/* Project views inside the desktop window. */
html.desktop-embedded body{background:#151515}
.desktop-embedded .ambient,.desktop-embedded .site-header,.desktop-embedded .site-footer{display:none}
.desktop-embedded .shell{width:calc(100% - 48px);max-width:1120px}
.desktop-embedded .case-hero{padding:24px 0 30px}
.desktop-embedded .case-hero h1{font-size:clamp(2.5rem,6vw,4.5rem)}
.desktop-embedded .back-link{margin-bottom:22px}
.desktop-embedded .case-summary{gap:30px;margin-top:24px}
.desktop-embedded .motion-control{right:14px;bottom:14px;background:#242424e6}
@media(max-width:540px){.desktop-embedded .shell{width:calc(100% - 28px)}.desktop-embedded .case-summary{grid-template-columns:1fr}}
/* Each project inherits a palette from its existing cover. */
body[data-project]{isolation:isolate;--muted:#d4d1d6;--tone-a:#26342c;--tone-b:#1a2430}
body[data-project="vitalfoliage"]{--tone-a:#354c37;--tone-b:#232e28}
body[data-project="benedicta"]{--tone-a:#663d2d;--tone-b:#3b3429}
body[data-project="gloxiz"]{--tone-a:#432467;--tone-b:#37402b}
body[data-project="privalia"]{--tone-a:#642750;--tone-b:#3d2e65}
body[data-project="frutaessence"]{--tone-a:#634724;--tone-b:#3c452a}
body[data-project="lapmaster"]{--tone-a:#343c39;--tone-b:#23292b}
body[data-project="greentech"]{--tone-a:#164b49;--tone-b:#343c34}
body[data-project] .ambient{display:block;position:fixed;inset:0;background:linear-gradient(145deg,var(--tone-a),#11131a 52%,var(--tone-b));height:100dvh;z-index:-1}
body[data-project] .ambient:before{inset:-10%;width:auto;height:auto;filter:none;border-radius:0;background:radial-gradient(ellipse at 80% 15%,var(--tone-b),transparent 65%);opacity:.32;animation:projectGradient 32s ease-in-out infinite alternate}
body[data-project] .ambient:after{display:none}
body[data-project] .case-summary>p{color:#e1dce0}
body[data-project] .gallery{grid-auto-flow:row}
.campaign-quad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;grid-column:1/-1}
.campaign-quad figure{aspect-ratio:1}.campaign-quad video{width:100%;height:100%;object-fit:contain}
@keyframes projectGradient{to{transform:translate3d(-3%,3%,0)}}
body.motion-paused .ambient:before{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){body[data-project] .ambient:before{animation:none}}
@media(max-width:540px){.campaign-quad{grid-template-columns:1fr;gap:12px}}