/* ──────────────────────────────────────────────── levels. — Tokens (inline, onepage.ai-safe) ──────────────────────────────────────────────── */ :root{ --c-dark:#0A0A0A; --c-gold:#C8A96A; --c-bronze:#8A7340; --c-cream:#F5F3EE; --c-text-muted:#555; --c-text-light:#888; --c-text-faint:#CCC; --c-border-l:#E8E6E0; --c-border-d:#333; --font:'Helvetica Neue', Helvetica, Arial, sans-serif; --font-serif: Georgia, 'Times New Roman', serif; } *{box-sizing:border-box;margin:0;padding:0} html,body{background:#FFF;color:var(--c-dark);font-family:var(--font);font-weight:300;-webkit-font-smoothing:antialiased} body{overflow-x:hidden} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ::selection{background:var(--c-gold);color:var(--c-dark)} /* Helpers */ .label{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;font-weight:600} .gold{color:var(--c-gold)} /* Image slot — clearly marked placeholder */ .imgslot{position:relative;background:#1A1613;overflow:hidden} .imgslot::before{ content:'';position:absolute;inset:0; background: linear-gradient(135deg, rgba(200,169,106,0.08), transparent 55%), linear-gradient(180deg, #2a2218 0%, #100c08 100%); } .imgslot::after{ content:'';position:absolute;inset:0;opacity:.18; background-image: linear-gradient(to right, rgba(200,169,106,0.18) 1px, transparent 1px), linear-gradient(to bottom, rgba(200,169,106,0.18) 1px, transparent 1px); background-size:80px 80px; } .imgslot .slot-tag{ position:absolute;top:14px;left:14px;z-index:2; border:1px solid rgba(200,169,106,0.55);color:var(--c-gold); background:rgba(10,10,10,0.55);padding:5px 8px 4px; font-size:8.5px;letter-spacing:2px;text-transform:uppercase;font-weight:600; } .imgslot .slot-spec{ position:absolute;bottom:14px;left:14px;right:14px;z-index:2; color:rgba(245,243,238,0.6); font-size:8.5px;letter-spacing:1.5px;text-transform:uppercase;font-weight:600; display:flex;justify-content:space-between;gap:8px; } .imgslot.l .slot-tag{background:rgba(245,243,238,0.85);color:var(--c-bronze);border-color:rgba(138,115,64,0.4)} .imgslot.l::before{background:linear-gradient(135deg,#EFEAE0 0%,#D9D2C0 100%)} .imgslot.l::after{background-image: linear-gradient(to right, rgba(138,115,64,0.18) 1px, transparent 1px), linear-gradient(to bottom, rgba(138,115,64,0.18) 1px, transparent 1px);} .imgslot.l .slot-spec{color:rgba(138,115,64,0.7)} /* Page-progress bar */ .progress{position:fixed;top:0;left:0;height:2px;width:0%;background:var(--c-gold);z-index:100;transition:width 60ms linear} /* Side index — quiet vertical rail, hidden until past hero */ .side-index{ position:fixed;right:18px;top:50%;transform:translateY(-50%); z-index:60;display:flex;flex-direction:column;gap:10px; mix-blend-mode:difference; opacity:0;pointer-events:none; transition:opacity 300ms ease; } .side-index.visible{opacity:1;pointer-events:auto} .side-index a{ display:flex;align-items:center;gap:10px;color:#FFF;opacity:.35; font-size:8px;letter-spacing:1.6px;text-transform:uppercase;font-weight:600; transition:opacity 200ms ease,color 200ms ease; text-decoration:none; } .side-index a .num{display:inline-block;width:14px} .side-index a .lbl{ display:inline-block;max-width:0;overflow:hidden;white-space:nowrap; transition:max-width 220ms ease,margin 220ms ease;margin-left:0; } .side-index a::after{content:'';width:14px;height:1px;background:currentColor;display:block;transition:width 200ms ease} .side-index a.on{opacity:1;color:var(--c-gold)} .side-index a.on::after{width:26px} .side-index a:hover{opacity:1} .side-index a:hover .lbl{max-width:90px;margin-left:2px} /* NAV */ .nav{ position:fixed;top:0;left:0;right:0;z-index:50; display:flex;align-items:center;justify-content:space-between; padding:24px 56px;color:#FFF; transition:background 250ms ease, padding 200ms ease; } .nav.scrolled{background:rgba(10,10,10,0.92);padding:14px 56px} .nav .brand img{height:22px} .nav .links{display:flex;gap:36px} .nav .links a{ font-size:10px;letter-spacing:2.5px;text-transform:uppercase;font-weight:600; color:#FFF;transition:color 150ms ease; } .nav .links a:hover{color:var(--c-gold)} .nav .cta{ border:1px solid rgba(255,255,255,0.4);padding:10px 16px; font-size:10px;letter-spacing:2.5px;text-transform:uppercase;font-weight:600; transition:border-color 150ms ease, background 150ms ease, color 150ms ease; } .nav .cta:hover{background:var(--c-gold);color:var(--c-dark);border-color:var(--c-gold)} /* HERO */ .hero{position:relative;height:100vh;min-height:760px;width:100%;overflow:hidden;background:#000;color:#FFF} .hero .hero-img{position:absolute;inset:-10% 0 -10% 0;height:120%;will-change:transform} .hero .hero-img .imgslot{position:absolute;inset:0} /* HERO video version */ .hero-v{background:var(--c-cream);color:var(--c-dark);height:auto;min-height:100vh;padding:0} .hero-bg{ position:absolute;inset:0;z-index:0;overflow:hidden; transform-origin:center; will-change:transform; } .hero-video{ position:absolute;inset:-5% -5%;width:110%;height:110%; object-fit:cover; transform:translate3d(0, var(--bgY,0), 0) scale(var(--bgScale,1.05)); will-change:transform; background:#0a0a0a; } .hero-bg-fallback{position:absolute;inset:0;z-index:-1} .hero-grain{ position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.18; background-image:radial-gradient(rgba(255,255,255,0.6) 1px, transparent 1px); background-size:3px 3px; } .hero-vignette{ position:absolute;inset:0;pointer-events:none; background: linear-gradient(180deg, rgba(245,243,238,0.55) 0%, rgba(245,243,238,0.05) 22%, rgba(10,10,10,0.15) 70%, rgba(10,10,10,0.55) 100%), radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(10,10,10,0.45) 100%); } .hero-v-content{ position:relative;z-index:2;min-height:100vh; padding:120px 56px 80px; display:flex;flex-direction:column;justify-content:space-between;gap:48px; color:#FFF; } .hero-v-content .top-row .label{color:var(--c-gold)} .hero-v-content .top-row .meta{color:rgba(255,255,255,0.7)} .hero-h1{ color:#FFF;font-size:clamp(56px, 9vw, 140px);letter-spacing:-3px;line-height:0.95; text-shadow:0 2px 40px rgba(0,0,0,0.35); max-width:none; transform:translate3d(0, var(--contentY,0), 0); will-change:transform; } .hero-h1 .accent{color:var(--c-gold)} .hero-v-content .bottom-row{ display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:end; border-top:1px solid rgba(255,255,255,0.25);padding-top:28px; } .hero-v-content .lede{ font-size:18px;line-height:1.55;color:rgba(255,255,255,0.92);max-width:560px;font-weight:300; } .hero-v-content .lede strong{color:#FFF;font-weight:600} .hero-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .hero-meta .item{border-top:1px solid rgba(255,255,255,0.2);padding-top:14px} .hero-meta .lbl{font-size:9px;letter-spacing:2px;text-transform:uppercase;font-weight:600;color:var(--c-gold)} .hero-meta .v{font-size:13px;color:rgba(255,255,255,0.85);margin-top:6px;line-height:1.5} @media (max-width: 900px){ .hero-v-content{padding:100px 24px 60px} .hero-v-content .bottom-row{grid-template-columns:1fr;gap:32px} .hero-meta{grid-template-columns:1fr 1fr} } .hero::after{ content:'';position:absolute;inset:0; background: linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0) 22%, rgba(10,10,10,0) 55%, rgba(10,10,10,0.85) 100%), linear-gradient(90deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0) 50%); pointer-events:none; } .hero .hero-content{position:absolute;inset:0;z-index:3;padding:120px 56px 56px;display:flex;flex-direction:column;justify-content:space-between} .hero .top-row{ display:flex;justify-content:space-between;align-items:flex-start; border-top:1px solid rgba(255,255,255,0.18);padding-top:18px; } .hero .top-row .label{color:var(--c-gold)} .hero .top-row .meta{font-size:10px;letter-spacing:2px;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,0.55)} /* ── levels. wordmark animation ──────────────── */ .levels-mark{ position:relative;width:100%;max-width:100%; margin:auto 0 0; user-select:none; overflow:visible; } .levels-mark .word{ display:flex;align-items:flex-end;gap:0; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:700; font-size:clamp(80px, 15vw, 220px); line-height:0.85; letter-spacing:-0.06em; color:#FFF; position:relative; width:fit-content; max-width:100%; padding-right:.18em; box-sizing:border-box; } /* gold glow that sweeps across the mark on reveal */ .levels-mark .word::before{ content:'';position:absolute;inset:-10% -5%;pointer-events:none; background:radial-gradient(ellipse at 50% 60%, rgba(200,169,106,0.55), transparent 60%); opacity:0;filter:blur(40px); z-index:0; } .hero.in .levels-mark .word::before{ animation:glowSweep 2200ms cubic-bezier(.2,.7,0,1) 200ms forwards; } @keyframes glowSweep{ 0%{opacity:0;transform:scale(0.4) translateX(-30%)} 50%{opacity:1;transform:scale(1.1) translateX(0)} 100%{opacity:0.18;transform:scale(1) translateX(20%)} } .levels-mark .word-mask{ display:inline-block;overflow:hidden;line-height:0.85;padding:0 0 .12em; position:relative;z-index:1; perspective:900px; } /* gold underline sliver under each letter mask */ .levels-mark .word-mask::after{ content:'';position:absolute;left:0;right:0;bottom:.08em;height:2px; background:var(--c-gold);transform:scaleX(0);transform-origin:left center; opacity:0; } .hero.in .levels-mark .word-mask::after{ animation:rule 800ms cubic-bezier(.6,0,.2,1) forwards; } @keyframes rule{ 0%{transform:scaleX(0);opacity:0} 40%{opacity:1} 100%{transform:scaleX(1);opacity:0} } .levels-mark .ltr{ display:inline-block; transform:translateY(120%) rotateX(-70deg) scale(1.4); opacity:0; filter:blur(18px); transform-origin:50% 100%; transition:transform 600ms cubic-bezier(.2,.7,0,1), color 200ms ease, filter 200ms ease; cursor:pointer; will-change:transform,opacity,filter; } .hero.in .levels-mark .ltr{ animation:reveal 1400ms cubic-bezier(.2,.7,0,1) forwards; } /* each letter gets its own flavor */ .hero.in .levels-mark .word-mask:nth-of-type(1) .ltr{animation-delay:200ms;animation-name:reveal} .hero.in .levels-mark .word-mask:nth-of-type(2) .ltr{animation-delay:300ms;animation-name:revealDrop} .hero.in .levels-mark .word-mask:nth-of-type(3) .ltr{animation-delay:400ms;animation-name:reveal} .hero.in .levels-mark .word-mask:nth-of-type(4) .ltr{animation-delay:500ms;animation-name:revealDrop} .hero.in .levels-mark .word-mask:nth-of-type(5) .ltr{animation-delay:600ms;animation-name:reveal} .hero.in .levels-mark .word-mask:nth-of-type(6) .ltr{animation-delay:700ms;animation-name:revealSpin} .hero.in .levels-mark .dot-wrap{animation:dotBurst 900ms cubic-bezier(.2,.7,0,1) 1100ms forwards} @keyframes reveal{ 0%{transform:translateY(120%) rotateX(-70deg) scale(1.4);opacity:0;filter:blur(18px)} 40%{opacity:1;filter:blur(4px)} 70%{transform:translateY(-8%) rotateX(8deg) scale(1.02);filter:blur(0)} 100%{transform:translateY(0) rotateX(0) scale(1);opacity:1;filter:blur(0)} } @keyframes revealDrop{ 0%{transform:translateY(-130%) rotateX(60deg) scale(1.4);opacity:0;filter:blur(18px)} 40%{opacity:1;filter:blur(4px)} 70%{transform:translateY(6%) rotateX(-6deg) scale(0.98);filter:blur(0)} 100%{transform:translateY(0) rotateX(0) scale(1);opacity:1;filter:blur(0)} } @keyframes revealSpin{ 0%{transform:translateY(120%) rotateY(90deg) scale(1.5);opacity:0;filter:blur(18px)} 40%{opacity:1;filter:blur(4px)} 70%{transform:translateY(-6%) rotateY(-12deg) scale(1.04);filter:blur(0)} 100%{transform:translateY(0) rotateY(0) scale(1);opacity:1;filter:blur(0)} } @keyframes dotBurst{ 0%{transform:scale(0) rotate(-180deg);opacity:0;box-shadow:0 0 0 0 rgba(200,169,106,0.8)} 40%{transform:scale(2.2) rotate(0);opacity:1;box-shadow:0 0 0 18px rgba(200,169,106,0)} 70%{transform:scale(0.8) rotate(0)} 100%{transform:scale(1) rotate(0);opacity:1;box-shadow:0 0 0 0 rgba(200,169,106,0)} } .levels-mark .ltr.gold{color:var(--c-gold)} /* dot — pulse + interactive */ .levels-mark .dot-wrap{ display:inline-block;width:.18em;height:.18em;border-radius:50%; background:var(--c-gold); margin:0 0 .08em .04em; position:relative;z-index:1; cursor:pointer; opacity:0;transform:scale(0);transform-origin:center; } .levels-mark .dot-wrap::after{ content:'';position:absolute;inset:0;border-radius:50%; background:var(--c-gold);opacity:.55; animation:dotPulse 2.4s ease-out infinite 2.2s; } @keyframes dotPulse{ 0%{transform:scale(1);opacity:.55} 80%{transform:scale(2.6);opacity:0} 100%{transform:scale(2.6);opacity:0} } .levels-mark .ltr:hover{transform:translateY(-14px) rotate(-2deg) scale(1.04);color:var(--c-gold)} .levels-mark .ltr.kick{animation:kick 700ms cubic-bezier(.2,.7,0,1)} @keyframes kick{ 0%{transform:translateY(0) rotate(0) scale(1)} 30%{transform:translateY(-32px) rotate(-6deg) scale(1.08)} 60%{transform:translateY(8px) rotate(2deg) scale(0.96)} 100%{transform:translateY(0) rotate(0) scale(1)} } /* shimmer streak that sweeps across the word once after letters land */ .levels-mark .shimmer{ position:absolute;top:0;bottom:0;left:-30%;width:30%; background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.18) 45%, rgba(200,169,106,0.35) 50%, rgba(255,255,255,0.18) 55%, transparent 100%); pointer-events:none;mix-blend-mode:screen; opacity:0;z-index:2; } .hero.in .levels-mark .shimmer{ animation:shimmer 1400ms cubic-bezier(.6,0,.2,1) 1300ms forwards; } @keyframes shimmer{ 0%{left:-30%;opacity:0} 20%{opacity:1} 80%{opacity:1} 100%{left:130%;opacity:0} } /* hint chip below mark */ .levels-hint{ margin-top:20px;display:inline-flex;align-items:center;gap:10px; font-size:10px;letter-spacing:2.5px;text-transform:uppercase;font-weight:600; color:rgba(255,255,255,0.5); } .levels-hint::before{content:'';width:24px;height:1px;background:var(--c-gold)} /* parallax layer driven by JS */ .levels-mark[data-px]{ will-change:transform; transform:translate3d(var(--px, 0px), var(--py, 0px), 0); transition:transform 200ms ease-out; } .hero .bottom-row{ margin-top:40px;display:grid;grid-template-columns:1fr auto;gap:64px;align-items:end; border-top:1px solid rgba(255,255,255,0.18);padding-top:24px; } .hero .lede{font-size:18px;line-height:1.55;color:rgba(255,255,255,0.85);max-width:540px} .hero .lede strong{color:#FFF;font-weight:600} .hero .pillars{display:flex;gap:36px;align-items:flex-start} .hero .pillar{display:flex;flex-direction:column;gap:8px} .hero .pillar .k{font-size:11px;letter-spacing:2px;font-weight:600;color:var(--c-gold);text-transform:uppercase} .hero .pillar .v{font-size:13px;color:rgba(255,255,255,0.7);font-weight:300;max-width:180px;line-height:1.5} .hero .scroll-cue{ position:absolute;bottom:24px;right:56px;z-index:3; color:rgba(255,255,255,0.6); font-size:9px;letter-spacing:2px;text-transform:uppercase;font-weight:600; display:flex;align-items:center;gap:10px; } .hero .scroll-cue::after{content:'';width:36px;height:1px;background:var(--c-gold);animation:slide 1.6s cubic-bezier(.4,0,.2,1) infinite} @keyframes slide{0%{transform:translateX(-12px) scaleX(0.4);opacity:.3}50%{transform:translateX(0) scaleX(1);opacity:1}100%{transform:translateX(12px) scaleX(0.4);opacity:.3}} /* Section scaffolding */ section.block{padding:140px 56px;position:relative} .block.dark{background:var(--c-dark);color:#FFF} .block.cream{background:var(--c-cream);color:var(--c-dark)} .section-head{ display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:40px; border-top:1px solid var(--c-border-l);padding-top:22px;margin-bottom:80px; } .dark .section-head{border-top-color:var(--c-border-d)} .section-head .eyebrow{font-size:10px;letter-spacing:3px;text-transform:uppercase;font-weight:600;color:var(--c-bronze)} .dark .section-head .eyebrow{color:var(--c-gold)} .section-head .num{font-size:10px;letter-spacing:2px;font-weight:600;color:var(--c-text-light);font-variant-numeric:tabular-nums} .section-head .num .cur{color:var(--c-gold)} .section-title{font-size:88px;font-weight:700;letter-spacing:-3.5px;line-height:0.95;max-width:1100px;text-wrap:pretty} .section-title .accent{color:var(--c-gold)} /* Word-by-word reveal for the Studio headline */ .elevate-h .ew{display:inline-block;overflow:hidden;vertical-align:bottom;line-height:0.95;padding:0 .04em .12em;margin:0 .04em 0 0} .elevate-h .ew.br{display:block;height:0;width:100%;padding:0;margin:0;overflow:visible} .elevate-h .ew-i{ display:inline-block; transform:translateY(110%) rotate(6deg); opacity:0; transition:transform 900ms cubic-bezier(.2,.7,0,1), opacity 700ms ease; } .elevate-h.on .ew-i{transform:none;opacity:1} .elevate-h.on .ew:nth-of-type(1) .ew-i{transition-delay:0ms} .elevate-h.on .ew:nth-of-type(2) .ew-i{transition-delay:90ms} .elevate-h.on .ew:nth-of-type(3) .ew-i{transition-delay:180ms} .elevate-h.on .ew:nth-of-type(5) .ew-i{transition-delay:300ms} .elevate-h.on .ew:nth-of-type(6) .ew-i{transition-delay:380ms} .elevate-h.on .ew:nth-of-type(7) .ew-i{transition-delay:460ms} .elevate-h.on .ew:nth-of-type(9) .ew-i{transition-delay:600ms} .elevate-h.on .ew:nth-of-type(10) .ew-i{transition-delay:680ms} @media (prefers-reduced-motion: reduce){ .elevate-h .ew-i{transform:none;opacity:1;transition:none} } /* Reveal */ .reveal{opacity:0;transform:translateY(20px);transition:opacity 700ms ease, transform 700ms cubic-bezier(.2,.7,0,1)} .reveal.on{opacity:1;transform:none} .reveal-stagger > *{opacity:0;transform:translateY(16px);transition:opacity 600ms ease, transform 600ms cubic-bezier(.2,.7,0,1)} .reveal-stagger.on > *{opacity:1;transform:none} .reveal-stagger.on > *:nth-child(1){transition-delay:0ms} .reveal-stagger.on > *:nth-child(2){transition-delay:80ms} .reveal-stagger.on > *:nth-child(3){transition-delay:160ms} .reveal-stagger.on > *:nth-child(4){transition-delay:240ms} .reveal-stagger.on > *:nth-child(5){transition-delay:320ms} .reveal-stagger.on > *:nth-child(6){transition-delay:400ms} /* Studio / Strategic minds */ .studio-grid{display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:start} .studio-grid .lede{font-size:24px;line-height:1.4;font-weight:300;color:var(--c-text-muted);text-wrap:pretty} .studio-grid .lede strong{color:var(--c-dark);font-weight:600} .studio-meta{margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:24px} .studio-meta .item{border-top:1px solid var(--c-border-l);padding-top:14px} .studio-meta .item .lbl{font-size:9px;letter-spacing:2px;text-transform:uppercase;font-weight:600;color:var(--c-text-light)} .studio-meta .item .v{font-size:14px;color:var(--c-dark);margin-top:6px;line-height:1.5} .studio-image{aspect-ratio:5/6;width:100%} /* Services — sticky list */ .services-sticky{display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:flex-start} .services-sticky .left{position:sticky;top:120px;align-self:flex-start} .services-sticky .left .marker{font-size:9px;letter-spacing:2px;text-transform:uppercase;font-weight:600;color:var(--c-gold)} .services-sticky .left h3{margin-top:20px;font-size:64px;font-weight:700;letter-spacing:-2.5px;line-height:0.95;text-wrap:pretty} .services-sticky .left h3 .accent{color:var(--c-gold)} .services-sticky .left p{margin-top:20px;font-size:14px;line-height:1.7;color:var(--c-text-faint);max-width:380px} .svc-list{display:flex;flex-direction:column;gap:0} .svc{ display:grid;grid-template-columns:80px 1fr;gap:24px; padding:48px 0;border-top:1px solid var(--c-border-d); } .svc:last-child{border-bottom:1px solid var(--c-border-d)} .svc .n{font-size:48px;font-weight:700;letter-spacing:-1.5px;color:var(--c-gold);line-height:1;font-variant-numeric:tabular-nums} .svc .body h4{font-size:32px;font-weight:700;letter-spacing:-1px;line-height:1.1;color:#FFF} .svc .body p{margin-top:14px;font-size:15px;line-height:1.65;color:var(--c-text-faint);max-width:620px} .svc .body .micro{ margin-top:18px;display:flex;gap:18px;flex-wrap:wrap; font-size:9px;letter-spacing:2px;text-transform:uppercase;font-weight:600;color:var(--c-text-light); } .svc .body .micro span::before{content:'— ';color:var(--c-gold)} /* Marquee Work */ .marquee-wrap{position:relative;overflow:hidden;padding:24px 0} .marquee{display:flex;gap:24px;width:max-content;animation:marq 60s linear infinite;will-change:transform} .marquee.rev{animation-direction:reverse;animation-duration:75s} .marquee-wrap:hover .marquee{animation-play-state:paused} @keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}} .work-card{position:relative;flex-shrink:0;width:480px;aspect-ratio:4/5} .work-card .imgslot{position:absolute;inset:0} .work-card .meta{ position:absolute;left:0;right:0;bottom:0;z-index:3;padding:18px 20px 16px; background:linear-gradient(to top, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0) 100%); color:#FFF;display:flex;align-items:flex-end;justify-content:space-between;gap:16px; } .work-card .meta .k{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:300} .work-card .meta .k strong{color:var(--c-gold);font-weight:600} .work-card .meta .yr{font-size:9px;letter-spacing:2px;font-weight:600;color:rgba(255,255,255,0.6)} .marquee-row + .marquee-row{margin-top:24px} /* Case studies — featured stories */ .stories{display:flex;flex-direction:column;gap:140px;margin-top:64px} .story{display:grid;grid-template-columns:6fr 6fr;gap:64px;align-items:center} .story.flip{grid-template-columns:6fr 6fr} .story.flip .story-img{order:2} .story-img{aspect-ratio:4/5;width:100%} .story .text .marker{font-size:9px;letter-spacing:2px;text-transform:uppercase;font-weight:600;color:var(--c-bronze)} .story .text h3{margin-top:18px;font-size:56px;font-weight:700;letter-spacing:-2px;line-height:0.95;text-wrap:pretty} .story .text p{margin-top:24px;font-size:16px;line-height:1.65;color:var(--c-text-muted);max-width:520px} .story .text .more{ margin-top:32px;display:inline-block; font-size:10px;letter-spacing:2.5px;text-transform:uppercase;font-weight:600; color:var(--c-dark);border-bottom:1px solid var(--c-gold);padding-bottom:6px; transition:color 150ms ease; } .story .text .more:hover{color:var(--c-bronze)} /* Logo strip */ .logo-strip{ display:flex;align-items:center;justify-content:space-between;gap:48px; border-top:1px solid var(--c-border-d);border-bottom:1px solid var(--c-border-d); padding:28px 0;margin-top:64px; } .logo-strip .lbl{font-size:9px;letter-spacing:2px;text-transform:uppercase;font-weight:600;color:var(--c-text-light);flex-shrink:0} .logo-strip .row{display:flex;gap:48px;align-items:center;flex:1;justify-content:space-around;flex-wrap:wrap} .logo-strip .logo-slot{ height:32px;min-width:120px; border:1px dashed rgba(200,169,106,0.4); display:flex;align-items:center;justify-content:center; font-size:9px;letter-spacing:2px;text-transform:uppercase;font-weight:600;color:var(--c-gold); padding:0 16px; } /* Quote */ .quote-wrap{max-width:1080px} .quote-wrap .mark{font-family:var(--font-serif);font-size:160px;color:var(--c-gold);line-height:0.6} .quote-wrap .q{font-size:56px;font-weight:600;letter-spacing:-1.6px;line-height:1.18;color:#FFF;margin-top:8px;text-wrap:pretty} .quote-wrap .author{margin-top:40px;display:flex;align-items:center;gap:16px} .quote-wrap .author .r{width:64px;height:1px;background:var(--c-gold)} .quote-wrap .author .a{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;font-weight:600;color:var(--c-text-faint)} /* Contact */ .contact{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:flex-start} .contact .intro h2{font-size:88px;font-weight:700;letter-spacing:-3px;line-height:0.95} .contact .intro h2 .accent{color:var(--c-gold)} .contact .intro .sub{margin-top:24px;font-size:16px;line-height:1.6;color:var(--c-text-muted);max-width:440px} .contact .intro .meta{margin-top:48px;display:flex;flex-direction:column;gap:24px} .contact .intro .meta .lbl{font-size:9px;letter-spacing:2px;text-transform:uppercase;font-weight:600;color:var(--c-text-light)} .contact .intro .meta .v{font-size:15px;color:var(--c-dark);margin-top:6px;font-weight:300} .form{display:flex;flex-direction:column;gap:22px;border-top:1px solid var(--c-border-l);padding-top:32px} .form label{display:flex;flex-direction:column;gap:6px} .form label span{font-size:9px;letter-spacing:2px;text-transform:uppercase;font-weight:600;color:var(--c-text-light)} .form input,.form textarea{ font-family:var(--font);font-size:15px;font-weight:300;padding:10px 0; border:0;border-bottom:1px solid var(--c-border-l);background:transparent; outline:none;color:var(--c-dark);resize:none; transition:border-color 150ms ease; } .form input:focus,.form textarea:focus{border-bottom-color:var(--c-gold)} .form textarea{min-height:110px;line-height:1.5} .chip-row{display:flex;flex-wrap:wrap;gap:8px} .chip{ border:1px solid var(--c-border-l);padding:9px 14px; font-size:10px;letter-spacing:2px;text-transform:uppercase;font-weight:600; color:var(--c-text-muted);cursor:pointer; transition:border-color 150ms ease, background 150ms ease, color 150ms ease; user-select:none; } .chip:hover{border-color:var(--c-bronze)} .chip.on{background:var(--c-dark);color:#FFF;border-color:var(--c-dark)} .form-submit{ align-self:flex-start;margin-top:8px; background:var(--c-dark);color:#FFF;font-size:10px;letter-spacing:2.5px; text-transform:uppercase;font-weight:600;padding:18px 28px; transition:opacity 150ms ease, background 150ms ease; display:flex;gap:14px;align-items:center; } .form-submit:hover{opacity:0.85} .form-submit.sent{background:var(--c-gold);color:var(--c-dark);opacity:1} /* Footer */ footer.ft{ border-top:1px solid var(--c-border-d);background:var(--c-dark);color:var(--c-text-light); padding:64px 56px 28px; } footer.ft .top{ display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px; padding-bottom:48px;border-bottom:1px solid var(--c-border-d); } footer.ft .col h5{font-size:9px;letter-spacing:2px;text-transform:uppercase;font-weight:600;color:var(--c-text-faint);margin-bottom:18px} footer.ft .col ul{list-style:none;display:flex;flex-direction:column;gap:10px} footer.ft .col ul a{font-size:13px;color:#FFF;font-weight:300;transition:color 150ms ease} footer.ft .col ul a:hover{color:var(--c-gold)} footer.ft .brand img{height:22px} footer.ft .lede{margin-top:18px;font-size:13px;color:var(--c-text-faint);line-height:1.6;max-width:300px} footer.ft .bottom{display:flex;justify-content:space-between;align-items:center;padding-top:22px;flex-wrap:wrap;gap:16px} footer.ft .bottom .meta{font-size:9px;letter-spacing:2px;text-transform:uppercase;font-weight:600} footer.ft .disclaimer{ margin-top:32px;font-size:10px;line-height:1.6;color:rgba(136,136,136,0.65); max-width:1080px;font-weight:300; } /* Responsive */ @media (max-width: 1100px){ .hero h1{font-size:84px;letter-spacing:-3px} .levels-mark .levels-hint{font-size:9px} .section-title{font-size:56px;letter-spacing:-2px} .studio-grid,.services-sticky,.contact,.story,.story.flip{grid-template-columns:1fr;gap:48px} .story.flip .story-img{order:0} .services-sticky .left{position:static} .nav,.hero .hero-content,section.block,footer.ft{padding-left:24px;padding-right:24px} .side-index{display:none} .work-card{width:280px} .hero .bottom-row{grid-template-columns:1fr;gap:32px} .hero .pillars{flex-wrap:wrap;gap:24px} .quote-wrap .q{font-size:30px;letter-spacing:-1px} .contact .intro h2{font-size:48px;letter-spacing:-1.5px} .story .text h3{font-size:40px;letter-spacing:-1.4px} .svc{grid-template-columns:1fr;gap:8px} .svc .body h4{font-size:24px} footer.ft .top{grid-template-columns:1fr 1fr;gap:32px} } Skip to content
WE ELEVATE BRANDS AND THE VISIONS BEHIND THEM.
Photorealistic AI visuals for fashion brands, e-commerce & startups.
Strategic Minds.
Future-Driven Design.
BRANDING & VISUAL IDENTITY.
CGI & KAMPAGNEN.
DEINE PROJEKTIDEEN.
COACHINGS & MASTERCLASSES.
Slide 1 of 1
Geschichten, die wir zum Leben erweckt haben.
Wir lieben es, Visionen unserer Kunden weltweit umzusetzen.
KONKANI DISTILLERY
Mit Konkani Distillery haben wir die Essenz Goas in hochwertige Spirituosen übersetzt. Dafür haben wir kraftvolle, lebendige Visuals und eine stimmige Markenidentität entwickelt – sie spiegeln Freiheit, Lebensfreude und die einzigartigen Aromen der Region wider, von reifen Mangos bis zum geselligen Lebensgefühl Goas. Das Ergebnis ist eine Markenwelt, die Eleganz und die verspielte, lebendige Seele Goas gleichermaßen einfängt.
Slide 1 of 6
Luminé Studios
Für Luminé haben wir eine visuelle Identität geschaffen, die Streetwear-Haltung mit handwerklicher Präzision verbindet. Die Marke steht für hochwertige Basics aus erstklassigen Materialien, kombiniert mit einer klaren, zeitgemäßen Ästhetik. Unser Ansatz trifft die Balance zwischen Luxus und Leichtigkeit – zurückhaltende Coolness, präzise umgesetzt, mit starker visueller Präsenz.
Slide 1 of 3
Contact
Instagram: levels.visuals
E-Mail: info@nextlevelvisuals.de
Diese Website ist nicht Teil der Facebook-Website oder von Facebook Inc. Darüber hinaus wird diese Website in keiner Weise von Facebook unterstützt. Facebook ist eine Marke von Facebook, Inc. Wir verwenden auf dieser Website Remarketing-Pixel/Cookies von Google, um erneut mit den Besuchern unserer Website zu kommunizieren und sicherzustellen, dass wir sie in Zukunft mit relevanten Nachrichten und Informationen erreichen können. Google schaltet unsere Anzeigen auf Websites Dritter im Internet, um unsere Botschaft zu kommunizieren und die richtigen Personen zu erreichen, die in der Vergangenheit Interesse an unseren Informationen gezeigt haben.