@font-face{font-family:'Inter';src:url('/public/fonts/InterVariable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Inter Display';src:url('/public/fonts/InterDisplay-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Inter Display';src:url('/public/fonts/InterDisplay-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter Display';src:url('/public/fonts/InterDisplay-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url('/public/fonts/Geist-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
:root{font-family:'Inter Display',Inter,Arial,sans-serif;color:#f7f6f2;background:#171717}
.hero-copy p,.experience>div:first-child,.project-info h2{color:rgba(247,246,242,.65)}
.page-title h1,.footer-title,.category-heading,.category-gallery{font-family:Inter,Arial,sans-serif}
.project-info p{font-family:Geist,Inter,sans-serif;font-weight:500;letter-spacing:-.03em}
.about-images{display:flex;align-items:end;gap:20px;margin-top:70px}.about-images img{width:48%;object-fit:cover}.about-images img:first-child{aspect-ratio:2/3}.about-images img:last-child{aspect-ratio:1.48}
.special-hero{height:100vh;min-height:500px;background-size:cover;background-position:center;position:relative}.special-hero h1{position:absolute;bottom:24px;right:20px;margin:0;font-size:clamp(60px,10vw,150px);font-weight:400;letter-spacing:-.06em;line-height:.9;text-align:right}.special-info{display:flex;justify-content:flex-end;gap:80px;padding:80px 20px}.special-info h2{font-size:12px;font-weight:400}.special-info p{font-size:18px;margin:0}@media(max-width:809px){.special-hero h1{font-size:15vw}.special-info{justify-content:start;gap:30px}}
.menu-toggle,.header .mobile-menu,.header .mobile-menu[hidden]{display:none}
.header .desktop-contact{text-align:right}
.brand-link{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin:-7px 0;position:relative}
.brand-link:focus-visible{outline:2px solid #f7f6f2;outline-offset:4px}
.brand-raven{display:block;width:32px;height:32px;transform-origin:top center;animation:raven-float 2.8s ease-in-out infinite}
.brand-shader{display:block;width:100%;height:100%;background:linear-gradient(135deg,#ffb3d9,#87ceeb,#4a90e2,#2c3e50);mask:url('/public/raven.svg') center/contain no-repeat;-webkit-mask:url('/public/raven.svg') center/contain no-repeat}
.brand-shader canvas{display:block;width:100%;height:100%}
@keyframes raven-float{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-2px) scaleY(1.08)}}
@media(prefers-reduced-motion:reduce){.brand-raven{animation:none}}
.desktop-nav a,.desktop-contact{font-family:Inter,Arial,sans-serif;letter-spacing:-.02em}
.nav-letter{position:relative;display:inline-block;overflow:hidden;vertical-align:top;line-height:1.2}
.nav-letter>span{display:block;transition:transform .3s cubic-bezier(.25,.1,.25,1);transition-delay:calc(var(--letter-index) * 40ms)}
.nav-letter-copy{position:absolute;inset:0;transform:translateY(120%)}
@media(hover:hover){.desktop-nav a:hover .nav-letter>span:first-child,.desktop-contact:hover .nav-letter>span:first-child,.footer-links a:hover .nav-letter>span:first-child{transform:translateY(-120%)}.desktop-nav a:hover .nav-letter-copy,.desktop-contact:hover .nav-letter-copy,.footer-links a:hover .nav-letter-copy{transform:translateY(0)}}
.desktop-nav a:focus-visible .nav-letter>span:first-child,.desktop-contact:focus-visible .nav-letter>span:first-child,.footer-links a:focus-visible .nav-letter>span:first-child{transform:translateY(-120%)}
.desktop-nav a:focus-visible .nav-letter-copy,.desktop-contact:focus-visible .nav-letter-copy,.footer-links a:focus-visible .nav-letter-copy{transform:translateY(0)}
.experience{font-family:'Inter Display',Inter,sans-serif;font-size:14px;font-weight:500;line-height:1.1;letter-spacing:.01em}
.experience>div{grid-template-columns:3fr 3fr 2fr;gap:20px;border-color:rgba(255,255,255,.06);padding:12px 0}
.experience>div:first-child{border-top:0;padding-top:0}
.hero h1{font-size:clamp(100px,17.17vw,400px);letter-spacing:-.06em;line-height:.8;animation:hero-title-in 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes hero-title-in{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.page-title h1{font-size:388px;letter-spacing:-.07em;line-height:.8}
.project-heading h1,.special-hero h1{font-size:128px;letter-spacing:-.04em;line-height:.95;font-weight:300}
.special-info h2,.special-info p{font-family:Inter,Arial,sans-serif;font-size:14px}
@media(min-width:810px) and (max-width:1199px){.page-title h1{font-size:280px;letter-spacing:-.05em}.project-heading h1,.special-hero h1{font-size:80px}}
@media(max-width:809px){
  .header{grid-template-columns:1fr auto;align-items:start}
  .header .desktop-nav,.header .desktop-contact{display:none}
  .menu-toggle{display:block;border:0;border-radius:3px;background:#292929;color:inherit;font:inherit;padding:5px 8px;cursor:pointer}
  .header .mobile-menu:not([hidden]){display:flex;position:absolute;top:52px;right:16px;min-width:160px;padding:16px;flex-direction:column;align-items:flex-start;gap:16px;background:#292929}
  .menu-toggle:focus-visible,.mobile-menu a:focus-visible{outline:2px solid currentColor;outline-offset:4px}
  .hero h1{font-size:34vw}
  .page-title h1{font-size:144px;letter-spacing:-.03em}
  .project-heading h1,.special-hero h1{font-size:56px;overflow-wrap:anywhere}
  .experience{font-size:14px}
  .experience>div{grid-template-columns:3fr 3fr 2fr;gap:8px}
}

/* Category landing pages and the project strip follow the Framer layouts. */
.category-heading{padding:clamp(150px,16vw,240px) 2.6% 48px}
.category-heading h1{font-size:100px;font-weight:400;line-height:.95;letter-spacing:-.045em;margin:0}
.category-gallery{display:grid;gap:36px 16px;padding:0 2.6% 180px}
.branding-page .category-gallery{grid-template-columns:1fr}
.art-direction-page .category-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
.category-project{display:block;font-size:clamp(16px,1.84vw,22px)}
.branding-page .category-project{font-size:clamp(16px,2.34vw,28px)}
.category-project img{width:100%;aspect-ratio:1.84;object-fit:cover;margin-bottom:12px;transition:filter .25s}
.category-project:hover img,.category-project:focus-visible img{filter:brightness(.75)}
.category-project:focus-visible,.category-preview-card:focus-visible,.ticker-item:focus-visible{outline:2px solid white;outline-offset:3px}
.category-row{position:relative;border-top:1px solid #ffffff20}
.category-row:last-child{border-bottom:1px solid #ffffff20}
.category-link{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;min-height:140px;padding:0 20px;font-family:Inter,Arial,sans-serif}
.category-link span:first-child{font-size:18px;color:rgba(247,246,242,.65)}
.category-link span:nth-child(2){text-align:left;font-size:40px}
.category-link span:last-child{text-align:right;font-size:24px;color:rgba(247,246,242,.65)}
.category-previews{position:absolute;z-index:8;inset:0;display:flex;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
@media(hover:hover){.category-row:hover .category-previews,.category-row:focus-within .category-previews{opacity:1;visibility:visible}.category-row:hover .category-link{visibility:hidden}}
.category-preview-card{position:relative;flex:1 1 0;min-width:0;height:100%;overflow:hidden;background:#222}
.category-preview-card img,.category-preview-card video{width:100%;height:100%;object-fit:cover}
.category-preview-card span,.ticker-item span{position:absolute;inset:0;display:grid;place-items:center;padding:12px;text-align:center;background:#000b;opacity:0;transition:opacity .2s;font-size:15px}
.category-preview-card:hover span,.category-preview-card:focus-visible span,.ticker-item:hover span,.ticker-item:focus-visible span{opacity:1}
.ticker{overflow:hidden;margin-top:60px}
.ticker-track{display:flex;width:max-content;animation:ticker-scroll 40s linear infinite}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
.ticker-group{display:flex}
.ticker-item{position:relative;display:block;width:33.333vw;height:clamp(420px,56vw,671px);overflow:hidden;background:#222}
.ticker-item img,.ticker-item video{width:100%;height:100%;object-fit:cover}
@keyframes ticker-scroll{to{transform:translateX(-50%)}}
@media(max-width:809px){
  .category-heading{padding:150px 16px 32px}
  .branding-page .category-heading h1{font-size:min(52px,12vw)}
  .art-direction-page .category-heading h1{font-size:min(45px,10vw)}
  .category-gallery{padding:0 16px 90px;gap:28px}
  .art-direction-page .category-gallery{grid-template-columns:1fr}
  .category-project{font-size:16px}
  .category-link{min-height:95px}
  .category-link span:nth-child(2){font-size:clamp(20px,4vw,32px)}
  .category-previews{display:none}
  .ticker{margin-top:35px}
  .ticker-item{width:70vw;height:117vw;max-height:600px}
}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}.ticker{overflow-x:auto}.ticker-group[aria-hidden="true"]{display:none}}

@media(min-width:810px){
  .home-works .work-card{aspect-ratio:578/671}
  .home-works .work-card:nth-child(3){grid-column:1/-1;aspect-ratio:1160/740}
}
.carousel-wrap{display:flex;align-items:center;justify-content:center;width:min(100%,850px);gap:12px}
.carousel{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;overscroll-behavior-inline:contain;padding:25px 20px;scroll-snap-type:x proximity}
.carousel::-webkit-scrollbar{display:none}
.carousel a{display:block;flex:0 0 150px;height:190px;margin:0 -18px;transform:perspective(900px) rotateY(-24deg);scroll-snap-align:center;transition:transform .25s}
.carousel a:nth-child(even){transform:perspective(900px) rotateY(24deg)}
.carousel a:hover,.carousel a:focus-visible{position:relative;z-index:2;transform:perspective(900px) rotateY(0) scale(1.08)}
.carousel a img,.carousel a img:nth-child(n){width:100%;height:100%;object-fit:cover;margin:0;transform:none;border-radius:4px}
.carousel-arrow{background:none;border:0;color:#222;font-size:20px;cursor:pointer;padding:10px}
.carousel-arrow:focus-visible,.carousel a:focus-visible{outline:2px solid #222;outline-offset:3px}
.chat{display:flex;align-items:center;gap:12px;padding:5px 16px 5px 5px}
.chat img{width:38px;height:38px;border-radius:50%;object-fit:cover}
@media(max-width:809px){.carousel-wrap{gap:0}.carousel a{flex-basis:100px;height:130px;margin:0 -12px}.carousel{padding:20px 12px}.carousel-arrow{padding:6px}}

.trail img{animation-duration:.84s;animation-timing-function:ease-in-out}
@keyframes trail{0%{transform:translate(-50%,-50%) scale(0)}50%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-50%) scale(0)}}
.coverflow{--cf-card:clamp(148px,22vw,260px);width:100%;max-width:1100px}
.coverflow-frame{overflow:hidden;padding:40px 0;cursor:grab;touch-action:pan-y;outline:none}
.coverflow-frame.dragging{cursor:grabbing}
.coverflow-frame:focus-visible{outline:2px solid #222;outline-offset:-2px}
.coverflow-stage{height:var(--cf-card);position:relative;transform-style:preserve-3d;user-select:none}
.coverflow-card{position:absolute;left:50%;top:0;width:var(--cf-card);aspect-ratio:1;overflow:hidden;border-radius:16px;background:#ddd;box-shadow:0 16px 28px #0003;will-change:transform;backface-visibility:hidden}
.coverflow-card img{width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none}
.coverflow-controls{display:flex;align-items:center;justify-content:center;gap:20px;min-height:44px;font-size:15px}
.coverflow-controls button{font:inherit;font-size:20px;background:transparent;border:0;color:inherit;padding:8px;cursor:pointer}
.coverflow-controls a:focus-visible,.coverflow-controls button:focus-visible{outline:2px solid #222;outline-offset:3px}
/* Motion project template: dimensions and ordering follow the Framer CMS layout. */
.motion-hero{position:relative;height:100vh;min-height:500px;overflow:hidden;display:flex;align-items:flex-end;padding:0 20px 40px}
.motion-hero-media{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;filter:brightness(.85)}
.motion-hero-title{position:relative;z-index:1;width:50%;margin-left:auto}
.motion-hero h1{margin:0;font-size:128px;font-weight:300;letter-spacing:-.04em;line-height:.95}
.motion-details{padding:60px 20px 80px;display:grid;gap:60px}
.motion-description{display:grid;grid-template-columns:16% 1fr;gap:20px}
.motion-details h2{font:400 14px/1.2 Inter,Arial,sans-serif;margin:0;color:rgba(255,255,255,.7)}
.motion-description h2{color:#fff}
.motion-description p{font-size:clamp(24px,2.7vw,32px);line-height:1.1;margin:0;max-width:1000px}
.motion-detail-grid{width:calc(50% - 10px);margin-left:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:60px 20px}
.motion-detail-grid p{font:500 18px/1.1 Geist,Inter,sans-serif;letter-spacing:-.03em;margin:8px 0 0}
.motion-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.motion-gallery .motion-media-wide{grid-column:span 2}
.motion-gallery .motion-gallery-item,.motion-gallery iframe{width:100%;height:auto;aspect-ratio:1.78;object-fit:contain}
.motion-gallery img.motion-gallery-item{object-fit:cover;aspect-ratio:1.57}
@media(min-width:810px) and (max-width:1199px){.motion-hero h1{font-size:80px}}
@media(max-width:809px){
 .motion-hero{padding:0 20px 40px}
 .motion-hero-title{width:100%;margin-left:0}
 .motion-hero h1{font-size:56px;overflow-wrap:anywhere}
 .motion-details{padding:60px 15px 80px 17px;gap:100px}
 .motion-description{grid-template-columns:1fr;gap:20px}
 .motion-description p{font-size:24px}
 .motion-detail-grid{width:100%;margin:0}
 .motion-gallery{padding:0 7px;gap:7px}
 .motion-gallery img.motion-gallery-item{aspect-ratio:1.33}
}

.special-categories{padding:60px 0}

/* Repeated text and dot form a seamless ticker. */
.marquee{overflow:hidden;white-space:nowrap}
.marquee-track{display:flex;width:max-content;animation:marquee-left var(--marquee-duration,30s) linear infinite}
.marquee-unit{display:flex;align-items:center;flex:none;gap:100px;padding-right:100px}
.marquee-dot{display:block;flex:none;width:58px;height:58px;border-radius:50%;background:currentColor}
.page-title h1.marquee{margin:0;line-height:.8}
.footer-title .marquee-track{line-height:.8}
@keyframes marquee-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:809px){.marquee-unit{gap:40px;padding-right:40px}.marquee-dot{width:28px;height:28px}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}.marquee-unit:nth-child(2){display:none}}