/* ──────────────────────────────────────────────── 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