@font-face{font-family:Bubble;src:url('assets/fonts/Bubble-Regular.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:TTNorms;src:url('assets/fonts/TTNorms-Regular.otf') format('opentype');font-weight:400;font-display:swap}@font-face{font-family:TTNorms;src:url('assets/fonts/TTNorms-Medium.otf') format('opentype');font-weight:500 900;font-display:swap}@font-face{font-family:Ligne44;src:url('assets/fonts/Ligne44-Regular.woff2') format('woff2');font-display:swap}
:root{--blue:#3a37e0;--ink:#282643;--paper:#fff;--pale:#eeedfc;--line:#d6d5ed;--gutter:6vw;--content:1440px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--paper);color:var(--blue);font-family:TTNorms,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,video:focus-visible{outline:3px solid var(--blue);outline-offset:6px}::selection{background:var(--blue);color:#fff}h1,h2,h3,p,figure{margin:0}img,video{display:block;max-width:100%}img{height:auto}video{background:var(--pale)}.site-header,main,.next-discipline{width:min(calc(100% - var(--gutter)*2),var(--content));margin-inline:auto}.site-header{display:flex;align-items:center;gap:36px;height:112px;position:relative;z-index:10}.wordmark{font-family:Bubble,sans-serif;font-size:38px;line-height:.8;display:flex;align-items:baseline;gap:8px}.wordmark span{font-family:TTNorms,sans-serif;font-size:13px;letter-spacing:-.04em}.header-note{font-size:11px;line-height:1.4;max-width:175px}.main-nav{display:flex;gap:24px;align-items:center;margin-left:auto;font-size:13px}.main-nav a{position:relative;white-space:nowrap}.main-nav a:not(.nav-contact):after{content:"";height:1px;position:absolute;left:0;right:100%;bottom:-5px;background:currentColor;transition:right .25s}.main-nav a:hover:after,.main-nav a[aria-current=page]:after{right:0}.nav-contact{border:1px solid var(--blue);border-radius:50px;padding:13px 20px}.nav-contact:hover{color:white;background:var(--blue)}.menu-toggle{display:none}.skip-link{position:fixed;left:20px;top:-100px;background:var(--blue);color:white;padding:15px;z-index:99}.skip-link:focus{top:10px}.eyebrow,.section-overline{font-size:12px;letter-spacing:.065em;font-weight:500}.handwriting{font-family:Ligne44,cursive;font-size:25px;font-weight:400;line-height:1.2}.hero{position:relative;min-height:660px;margin-top:12px}.hero-kicker{padding-top:12px;font-size:23px;line-height:1.22;width:49%;letter-spacing:-.03em}.hero-edition{display:none}.hero-title{position:absolute;left:-.015em;top:131px;width:53%;font-family:Bubble,sans-serif;font-weight:400;line-height:.88;letter-spacing:-.04em;z-index:1}.hero-title>span{display:block;font-size:clamp(105px,12.4vw,190px)}.hero-title>span+span{font-size:clamp(85px,9.7vw,151px);margin-top:17px;letter-spacing:-.055em}.hero-film{position:absolute;width:19%;max-width:280px;z-index:2}.hero-film video{aspect-ratio:9/16;object-fit:cover;width:100%;border-radius:5px}.hero-film-one{left:55%;top:16px;transform:rotate(-4deg)}.hero-film-two{right:0;top:112px;transform:rotate(4deg)}.film-label{display:block;font-size:9px;letter-spacing:.08em;margin-top:10px}.hero-film-two .film-label{text-align:right}.hero-bottom{position:absolute;left:0;right:0;bottom:38px;display:flex;align-items:center;gap:34px}.big-cta{display:flex;align-items:center;justify-content:space-between;gap:44px;background:var(--blue);color:white;border:2px solid var(--blue);border-radius:60px;padding:21px 32px;font-size:28px;font-weight:500;letter-spacing:-.035em;transition:color .25s,background .25s,transform .25s}.big-cta span{font-size:44px;line-height:.75}.big-cta:hover{background:white;color:var(--blue);transform:rotate(-2deg)}.hero-hand{transform:rotate(-7deg);font-size:23px;max-width:240px}.motion-toggle{margin-left:auto;align-self:flex-end;background:none;border:0;border-bottom:1px solid var(--line);padding:8px 0;font-size:11px;white-space:nowrap}.motion-toggle span{margin-left:10px}.brands{margin-top:35px;border-top:1px solid var(--line);padding-top:18px}.section-overline{display:flex;justify-content:space-between}.section-overline span+span{font-size:11px;letter-spacing:0;font-weight:400}.brand-window{overflow:hidden;margin-top:16px;padding:21px 0 30px}.brand-track{display:flex;width:max-content;animation:marquee 40s linear infinite}.brand-set{display:flex;align-items:center;gap:65px;padding-right:65px}.brand-logo{display:flex;align-items:center;justify-content:center;width:132px;height:64px}.brand-logo img{width:auto;max-width:132px;max-height:52px;object-fit:contain;filter:brightness(0);opacity:.72}.text-logo{font-weight:700;font-size:18px;letter-spacing:-.075em;color:#161616;flex-direction:column}.text-logo span{font-size:7px;letter-spacing:.11em;margin-top:4px}.brand-window:hover .brand-track{animation-play-state:paused}.work-section{padding-top:122px;padding-bottom:132px}.work-intro{position:relative;margin-bottom:68px;display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:end}.work-intro .eyebrow{grid-column:1/-1}.work-intro h2{font-size:clamp(48px,6.5vw,100px);font-weight:500;letter-spacing:-.065em;line-height:.95}.work-intro h2 span{font-family:Bubble,sans-serif;font-weight:400;letter-spacing:-.04em}.work-intro>p{font-size:20px;line-height:1.25;justify-self:end;padding-right:3vw;padding-bottom:8px}.doors{display:grid;grid-template-columns:1.08fr 1fr;gap:70px 6vw;align-items:start}.door{display:block;position:relative;min-width:0;transition:transform .35s}.door:hover{transform:translateY(-7px)}.door-top{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:10px;letter-spacing:.045em;font-weight:500}.door-arrow{font-size:35px;font-weight:400;line-height:1}.door-performance{background:var(--blue);color:white;min-height:548px;padding:27px 30px;display:flex;flex-direction:column}.door-performance h3{font-size:clamp(52px,6.2vw,94px);line-height:.9;letter-spacing:-.055em;font-weight:500;margin-top:48px}.outline-word{color:transparent;-webkit-text-stroke:1px white;font-size:.72em;letter-spacing:-.07em;display:inline-block;margin-top:12px}.door-bottom{display:flex;align-items:end;justify-content:space-between;gap:20px;font-size:11px;margin-top:auto;padding-top:30px}.door-bottom .handwriting{max-width:140px;font-size:23px;transform:rotate(-9deg)}.door-websites{padding-top:0;margin-top:138px;border-top:1px solid var(--blue)}.door-websites .door-top{padding-top:16px}.website-type{font-size:clamp(55px,6.6vw,104px);line-height:.9;letter-spacing:-.065em;font-weight:500;margin-top:42px}.website-type>span{display:block}.website-type>span:last-child{margin-top:6px}.word-world{font-family:Bubble,sans-serif;font-weight:400;position:relative;letter-spacing:-.05em;font-size:.87em}.asterisk{position:absolute;right:0;top:-18px;font-family:TTNorms;font-size:.85em;transform:rotate(-14deg)}.door-caption{font-size:16px;margin-top:36px}.door-art{padding-top:18px;border-top:1px solid var(--blue);margin-top:18px}.oakley-composition{position:relative;margin-top:27px;padding-right:35px;padding-bottom:46px}.oakley-composition img{width:100%;aspect-ratio:1.08;object-fit:cover}.oakley-composition h3{position:absolute;bottom:0;right:0;font-size:clamp(50px,5.6vw,84px);font-weight:500;letter-spacing:-.075em;line-height:.88;background:white;padding:12px 0 0 19px}.door-art .door-bottom{padding-top:18px}.door-art .door-bottom>span{font-size:8px;text-align:right;max-width:100px}.door-motion{margin-top:150px;background:var(--pale);padding:26px 29px 35px;min-height:495px;overflow:hidden}.motion-type{font-family:Bubble,sans-serif;font-size:clamp(68px,6.5vw,105px);line-height:.84;margin-top:48px;letter-spacing:-.06em}.motion-type>span{display:block}.motion-middle{display:flex!important;align-items:center;gap:33px}.motion-middle i{display:inline-block;font-family:TTNorms,sans-serif;font-size:.75em;font-style:normal;transition:transform .4s;line-height:1}.door-motion:hover .motion-middle i{transform:translateX(20px)}.contact{background:var(--blue);color:white;padding:54px max(var(--gutter),calc((100vw - var(--content))/2)) 28px}.contact-top{display:flex;justify-content:space-between;align-items:center}.contact-top .handwriting{transform:rotate(-7deg);font-size:26px;margin-right:20px}.contact-title{display:flex;justify-content:space-between;align-items:center;font-size:clamp(64px,12.3vw,184px);font-weight:500;letter-spacing:-.065em;line-height:1.25;padding:25px 0 27px;white-space:nowrap}.contact-title>span{font-size:.85em;font-weight:400;transition:transform .3s}.contact-title:hover>span{transform:translate(8px,-8px)}.contact-bottom{border-top:1px solid #ffffff60;padding-top:24px;display:flex;align-items:center;gap:28px;font-size:12px}.contact-bottom>a{font-size:15px}.contact-bottom>span{margin-left:auto;font-size:10px}.social-links{display:flex;gap:19px}.contact a:focus-visible{outline-color:white}.social-links a:hover,.contact-bottom>a:hover{text-decoration:underline;text-underline-offset:4px}.next-discipline{display:block;padding:52px 0 65px;border-top:1px solid var(--line)}.next-discipline>span{font-size:12px}.next-discipline strong{font-size:clamp(35px,5vw,72px);font-weight:500;letter-spacing:-.045em;display:flex;justify-content:space-between;gap:20px;margin-top:12px;line-height:1.08}.next-discipline:hover strong>span{transform:translate(5px,-5px)}.next-discipline strong>span{transition:transform .2s}
/* Inner pages: the same voice, more space for the work. */
.page-intro{padding:35px 0 90px}.back-link{display:inline-block;font-size:13px;border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:66px}.page-intro-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:33px}.page-intro-top .handwriting{transform:rotate(-7deg);margin-right:5vw;font-size:29px}.page-intro h1{font-family:Bubble,sans-serif;font-weight:400;font-size:clamp(68px,10vw,148px);letter-spacing:-.045em;line-height:.88;max-width:100%;overflow-wrap:normal}.page-intro-copy{font-size:23px;line-height:1.3;max-width:420px;margin-left:51%;margin-top:30px;letter-spacing:-.025em}.gallery-section{padding-bottom:115px}.gallery-heading{display:grid;grid-template-columns:1fr 1fr;gap:15px 6vw;align-items:end;border-top:1px solid var(--line);padding-top:22px;margin-bottom:40px}.gallery-heading>.eyebrow{grid-column:1/-1;margin-bottom:14px}.gallery-heading h2{font-size:clamp(38px,5vw,72px);line-height:.97;letter-spacing:-.05em;font-weight:500}.gallery-heading p{font-size:17px;line-height:1.4;color:var(--ink);max-width:400px;padding-bottom:3px}.ugc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:65px 30px}.ugc-grid video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:5px}.media-card figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-top:16px}.media-card h3{font-size:23px;letter-spacing:-.035em;font-weight:500}.media-card figcaption span{font-size:11px;color:var(--ink);text-align:right}.ugc-grid .media-card:nth-child(3n+2){margin-top:55px}.static-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px 24px;align-items:start}.static-card img{width:100%;height:auto}.static-card figcaption{margin-top:12px;font-size:10px;letter-spacing:.04em}.website-projects{padding-bottom:80px}.website-project{display:grid;grid-template-columns:28% 1fr;gap:6vw;border-top:1px solid var(--line);padding-top:28px;margin-bottom:95px}.project-meta h2{font-size:42px;letter-spacing:-.05em;font-weight:500;line-height:1;margin-top:29px}.project-meta p{font-size:17px;color:var(--ink);margin-top:19px;line-height:1.4}.project-meta .eyebrow{font-size:10px}.text-link{display:inline-block;border-bottom:1px solid var(--blue);font-size:15px;padding-bottom:6px;margin-top:30px}.website-media{background:var(--pale);padding:24px}.website-media>img,.website-media>video{width:100%;max-height:650px;object-fit:contain;object-position:top}.website-media>img{max-height:650px;object-fit:cover;object-position:top}.website-project:nth-child(even){grid-template-columns:1fr 28%}.website-project:nth-child(even) .project-meta{order:2}.website-project:nth-child(even) .website-media{order:1}.editorial-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:start}.editorial-card img{width:100%;height:auto}.editorial-card:first-child{grid-column:1/-1;width:74%}.editorial-card:nth-child(3){margin-top:150px}.editorial-card:nth-child(4){margin-top:-65px}.editorial-films{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin-top:65px}.editorial-films video{width:100%;aspect-ratio:1;object-fit:contain}.editorial-films figcaption{font-size:11px}.product-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px 30px}.product-card:first-child{grid-column:1/-1}.product-card:first-child img{width:100%;max-height:760px;object-fit:contain;background:#f6f6f4}.product-card img{width:100%;aspect-ratio:1.2;object-fit:contain;background:#f6f6f4}.product-card figcaption,.lifestyle-card figcaption{display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.025em;margin-top:13px}.lifestyle-grid{display:grid;gap:55px}.lifestyle-card img{width:100%}.motion-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px 40px;align-items:start}.motion-card:first-child{grid-column:1/-1}.motion-card video{width:100%;height:auto;max-height:760px;aspect-ratio:16/9;object-fit:contain}.motion-card:last-child{max-width:80%;margin-left:auto;grid-column:2}.motion-card:last-child video{aspect-ratio:1}.motion-card figcaption{display:flex;justify-content:space-between;gap:20px;align-items:baseline;margin-top:17px}.motion-card h2{font-size:28px;line-height:1;letter-spacing:-.035em;font-weight:500}.motion-card figcaption span{font-size:10px;max-width:135px;text-align:right}.js-ready .reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease}.js-ready .reveal.is-visible{opacity:1;transform:translateY(0)}.js-ready .door.is-visible:hover{transform:translateY(-7px)}.motion-paused .brand-track{animation-play-state:paused}.hero-title{animation:arrive .75s both}.hero-film-one{animation:arrive-film-one 1s .15s both}.hero-film-two{animation:arrive-film-two 1s .3s both}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes arrive{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes arrive-film-one{from{opacity:0;transform:translateY(25px) rotate(0)}to{opacity:1;transform:translateY(0) rotate(-4deg)}}@keyframes arrive-film-two{from{opacity:0;transform:translateY(25px) rotate(0)}to{opacity:1;transform:translateY(0) rotate(4deg)}}
@media(min-width:1750px){.hero{min-height:760px}.hero-title{top:160px}.hero-title>span{font-size:225px}.hero-title>span+span{font-size:177px}.hero-film{width:20%}.hero-film-two{top:140px}.hero-kicker{font-size:27px}.hero-bottom{bottom:50px}}
@media(max-width:1150px){.header-note{display:none}.main-nav{gap:18px}.hero{min-height:610px}.hero-title{top:120px}.hero-title>span{font-size:13.5vw}.hero-title>span+span{font-size:10.5vw}.hero-film{width:20%}.hero-film-one{left:54%;top:36px}.hero-film-two{top:120px}.hero-bottom{gap:22px}.hero-hand{max-width:190px;font-size:21px}.hero-kicker{font-size:21px}.big-cta{font-size:24px;padding:18px 26px;gap:24px}.doors{gap:50px 4vw}.door-performance{min-height:470px;padding:23px}.door-motion{min-height:440px;padding:23px}.door-top{font-size:9px}.door-performance h3{margin-top:40px}.contact-bottom{flex-wrap:wrap}.contact-bottom>span{margin-left:0}.social-links{margin-left:auto}.contact-title{font-size:12vw}.ugc-grid{gap:45px 22px}.media-card figcaption{display:block}.media-card figcaption span{display:block;margin-top:5px;text-align:left}.project-meta h2{font-size:34px}}
@media(max-width:800px){:root{--gutter:5vw}.site-header{height:90px}.wordmark{font-size:33px}.menu-toggle{display:flex;margin-left:auto;align-items:center;gap:30px;background:none;border:1px solid var(--blue);border-radius:30px;padding:11px 16px;font-size:13px}.menu-toggle span{font-size:20px;line-height:1}.main-nav{display:none;position:absolute;top:78px;left:0;right:0;background:var(--blue);color:white;padding:25px;align-items:stretch;gap:0;box-shadow:0 12px 20px #0001}.main-nav.is-open{display:flex;flex-direction:column}.main-nav a{font-size:22px;padding:15px 0;white-space:normal}.main-nav a:not(:last-child){border-bottom:1px solid #ffffff50}.main-nav .nav-contact{border:0;border-radius:0}.main-nav a:focus-visible{outline-color:white}.hero{min-height:530px;margin-top:10px}.hero-kicker{font-size:18px}.hero-title{top:110px}.hero-title>span{font-size:13.8vw}.hero-title>span+span{font-size:10.7vw;margin-top:15px}.hero-film-one{top:30px}.hero-film-two{top:100px}.hero-bottom{bottom:45px;flex-wrap:wrap;gap:20px}.hero-hand{font-size:20px;max-width:155px}.motion-toggle{margin-left:auto}.big-cta{font-size:22px;padding:16px 20px;gap:23px}.big-cta span{font-size:34px}.brands{margin-top:0}.work-section{padding-top:80px;padding-bottom:90px}.work-intro{margin-bottom:45px;gap:20px}.work-intro>p{font-size:16px}.doors{gap:38px 4vw}.door-top{font-size:8px;letter-spacing:0}.door-arrow{font-size:27px}.door-performance{min-height:365px;padding:18px}.door-performance h3{font-size:6.6vw;margin-top:40px}.door-bottom{display:block;font-size:10px;padding-top:22px}.door-bottom .handwriting{display:none}.door-websites{margin-top:100px}.website-type{font-size:7vw;margin-top:36px}.door-caption{font-size:13px;line-height:1.3;margin-top:28px}.door-art{margin-top:0}.oakley-composition{padding-right:20px;padding-bottom:27px;margin-top:20px}.oakley-composition h3{font-size:5.8vw;padding:9px 0 0 11px}.door-art .door-bottom>span{display:block;text-align:left;max-width:none;margin-top:8px}.door-motion{padding:18px;margin-top:90px;min-height:350px}.motion-type{font-size:8vw;margin-top:38px}.contact{padding-top:36px}.contact-top .handwriting{font-size:20px;margin-right:0}.contact-top .eyebrow{font-size:9px}.contact-title{font-size:12.3vw;padding:25px 0}.contact-bottom{gap:22px 20px}.contact-bottom>a{font-size:14px}.social-links{margin-left:0;gap:17px;flex-wrap:wrap}.page-intro{padding:20px 0 60px}.back-link{margin-bottom:45px}.page-intro-top .handwriting{font-size:23px;margin-right:0}.page-intro h1{font-size:10.5vw}.page-intro-copy{font-size:20px;margin-left:35%;margin-top:30px}.gallery-heading{gap:15px 35px}.gallery-heading h2{font-size:43px}.gallery-heading p{font-size:15px}.gallery-section{padding-bottom:80px}.ugc-grid{gap:40px 18px}.media-card h3{font-size:20px}.static-grid{gap:25px 15px}.website-project{grid-template-columns:1fr;gap:25px;margin-bottom:65px}.website-project:nth-child(even){grid-template-columns:1fr}.website-project:nth-child(even) .project-meta,.website-project:nth-child(even) .website-media{order:initial}.project-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px 25px}.project-meta .eyebrow{grid-column:1/-1}.project-meta h2{margin-top:7px;font-size:35px}.project-meta p{margin-top:7px;font-size:15px}.project-meta .text-link{margin-top:0;justify-self:start}.website-media{padding:16px}.editorial-card:first-child{width:90%}.editorial-grid{gap:22px}.editorial-card:nth-child(3){margin-top:80px}.editorial-card:nth-child(4){margin-top:-35px}.editorial-films{gap:22px;margin-top:40px}.motion-grid{gap:40px 25px}.motion-card h2{font-size:23px}.motion-card figcaption{display:block}.motion-card figcaption span{display:block;margin-top:7px;text-align:left;max-width:none}.motion-card:last-child{max-width:100%}}
@media(max-width:540px){:root{--gutter:24px}.site-header{height:86px}.wordmark{font-size:31px}.hero{min-height:760px;margin-top:6px}.hero-kicker{font-size:17px;width:100%;padding-top:0}.hero-title{position:relative;left:0;top:auto;width:100%;margin-top:27px;line-height:.9}.hero-title>span{font-size:23vw}.hero-title>span+span{font-size:17.6vw;margin-top:9px;letter-spacing:-.055em}.hero-film{width:40%;max-width:none;top:305px}.hero-film-one{left:5%;top:292px}.hero-film-two{right:4%;top:333px}.hero-film video{border-radius:4px}.film-label{font-size:7px;letter-spacing:.02em;margin-top:7px}.hero-bottom{bottom:0;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}.big-cta{font-size:22px;padding:17px 22px;gap:23px;justify-self:start;grid-column:1}.hero-hand{position:absolute;top:-40px;right:1px;font-size:20px;max-width:135px;transform:rotate(-7deg)}.motion-toggle{grid-column:2;font-size:9px;align-self:center;margin:0}.motion-toggle span{margin-left:3px}.brands{margin-top:49px;padding-top:15px}.section-overline{font-size:9px}.section-overline span+span{font-size:9px}.brand-window{padding-top:16px;padding-bottom:16px;margin-top:8px}.brand-set{gap:35px;padding-right:35px}.brand-logo{width:105px;height:48px}.brand-logo img{max-width:105px;max-height:40px}.text-logo{font-size:15px}.text-logo span{font-size:6px}.work-section{padding-top:64px;padding-bottom:65px}.work-intro{display:block;margin-bottom:35px}.work-intro .eyebrow{display:block;font-size:9px;margin-bottom:22px}.work-intro h2{font-size:48px;line-height:1}.work-intro>p{font-size:15px;line-height:1.3;margin-left:48%;margin-top:22px;padding:0}.doors{display:block}.door{margin-top:0;margin-bottom:46px}.door-top{font-size:9px}.door-performance{padding:23px;min-height:403px}.door-performance h3{font-size:66px;margin-top:36px;line-height:.89}.outline-word{font-size:.68em}.door-bottom{font-size:10px}.door-performance .door-bottom{display:flex;align-items:end}.door-bottom .handwriting{display:block;font-size:20px;max-width:110px}.door-websites{margin-left:10%;padding-bottom:10px}.website-type{font-size:69px;margin-top:32px}.asterisk{font-size:.7em;right:2px;top:-15px}.door-caption{font-size:15px;margin-top:25px;max-width:230px}.door-art{padding-top:15px}.oakley-composition{padding-right:26px;padding-bottom:35px}.oakley-composition h3{font-size:60px;padding:12px 0 0 15px}.door-art .door-bottom{padding-top:13px}.door-art .door-bottom>span{font-size:8px}.door-motion{padding:23px;min-height:393px;margin-left:8%;margin-bottom:0}.motion-type{font-size:80px;margin-top:36px;line-height:.83}.motion-middle{gap:40px}.contact{padding-top:28px;padding-bottom:25px}.contact-top{display:block}.contact-top .handwriting{font-size:22px;margin-top:15px;text-align:right}.contact-title{font-size:12vw;padding:23px 0 28px;line-height:1.1;letter-spacing:-.065em;gap:5px}.contact-title>span{font-size:.8em}.contact-bottom{display:block;padding-top:20px}.contact-bottom>a{font-size:16px}.social-links{gap:17px;margin-top:20px;font-size:11px;line-height:1.6}.contact-bottom>span{display:block;font-size:9px;margin-top:25px}.next-discipline{padding:35px 0 45px}.next-discipline>span{font-size:11px}.next-discipline strong{font-size:36px}.page-intro{padding:14px 0 50px}.back-link{font-size:12px;margin-bottom:35px}.page-intro-top{display:block;margin-bottom:26px}.page-intro-top .eyebrow{font-size:9px}.page-intro-top .handwriting{display:block;text-align:right;font-size:23px;margin-top:21px}.page-intro h1{font-size:14vw;line-height:.93;letter-spacing:-.045em}.page-intro-copy{font-size:19px;margin-left:16%;margin-top:25px}.gallery-heading{display:block;padding-top:16px;margin-bottom:28px}.gallery-heading>.eyebrow{display:block;font-size:9px;margin-bottom:21px}.gallery-heading h2{font-size:42px}.gallery-heading p{margin-top:22px;font-size:15px;max-width:100%}.gallery-section{padding-bottom:65px}.ugc-grid{grid-template-columns:1fr 1fr;gap:32px 15px}.ugc-grid .media-card:nth-child(3n+2){margin-top:0}.ugc-grid .media-card:nth-child(even){margin-top:37px}.media-card h3{font-size:19px;line-height:1.05}.media-card figcaption{margin-top:12px}.media-card figcaption span{font-size:9px;margin-top:7px;line-height:1.3}.static-grid{grid-template-columns:1fr 1fr;gap:26px 15px}.static-card figcaption{font-size:8px;margin-top:9px}.project-meta{display:block}.project-meta .eyebrow{font-size:9px}.project-meta h2{font-size:34px;margin-top:20px}.project-meta p{font-size:15px;margin-top:13px}.project-meta .text-link{margin-top:20px;font-size:13px}.website-project{gap:25px;margin-bottom:45px;padding-top:18px}.website-media{padding:12px}.website-projects{padding-bottom:20px}.editorial-grid{gap:16px}.editorial-card:first-child{width:100%}.editorial-card:nth-child(3){margin-top:36px}.editorial-card:nth-child(4){margin-top:-20px}.editorial-films{gap:16px;margin-top:28px}.editorial-films figcaption{font-size:8px}.product-grid{gap:30px 16px}.product-card figcaption,.lifestyle-card figcaption{font-size:8px;gap:10px;line-height:1.3}.lifestyle-grid{gap:30px}.motion-grid{display:block}.motion-card{margin-bottom:38px}.motion-card:last-child{max-width:85%;margin-bottom:0}.motion-card h2{font-size:25px}.motion-card figcaption span{font-size:9px}.motion-card video{aspect-ratio:auto;max-height:none}.brand-track{animation-duration:45s}}
@media(max-width:360px){.hero{min-height:715px}.hero-film-one{top:270px}.hero-film-two{top:305px}.hero-hand{font-size:17px;max-width:110px}.big-cta{font-size:19px;padding:15px 18px}.door-performance h3{font-size:58px}.website-type{font-size:60px}.page-intro h1{font-size:13.5vw}.contact-title{font-size:11.7vw}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js-ready .reveal{opacity:1;transform:none}.hero-film-one{transform:rotate(-4deg)}.hero-film-two{transform:rotate(4deg)}}

/* V1 review: smaller portraits frame the central wordmark. */
.lyra-y{display:inline-block;margin-left:-.105em}
@media(min-width:541px){
.hero{min-height:610px}
.hero-kicker{width:56%;margin-inline:auto;text-align:center;font-size:20px;padding-top:6px}
.hero-title{left:21%;top:142px;width:58%;text-align:center}
.hero-title>span{font-size:clamp(92px,10.3vw,158px)}
.hero-title>span+span{font-size:clamp(74px,8.15vw,125px);margin-top:16px}
.hero-film{width:15%;max-width:208px}
.hero-film-one{left:1%;top:145px}
.hero-film-two{right:1%;top:75px}
.hero-bottom{left:22%;right:0;bottom:48px;gap:27px}
.hero-hand{max-width:200px;font-size:21px}
}
@media(min-width:1750px){.hero{min-height:650px}.hero-title{top:155px}.hero-film-one{top:160px}.hero-film-two{top:88px}}
@media(min-width:541px) and (max-width:900px){
.hero{min-height:505px}.hero-kicker{font-size:17px}
.hero-title{top:144px}.hero-title>span{font-size:11vw}.hero-title>span+span{font-size:8.6vw}
.hero-film{width:17%}.hero-film-one{left:0;top:137px}.hero-film-two{right:0;top:90px}
.hero-bottom{left:16%;bottom:38px;gap:18px}.hero-hand{font-size:18px;max-width:145px}.motion-toggle{font-size:9px}
}
@media(max-width:540px){
.hero-title{text-align:center}.hero-film{width:33%}.hero-film-one{left:7%;top:292px}.hero-film-two{right:7%;top:322px}.hero{min-height:690px}
}

/* Review: blue/white rhythm and an actual UGC film behind the creative door. */
.brands{background:var(--blue);color:white;border-top:0;padding:24px 28px 4px}
.brand-logo img{filter:brightness(0) invert(1);opacity:1}
.brands .text-logo{color:white}
.door-performance{isolation:isolate;overflow:hidden;background:#172240}
.door-performance .door-background{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 32%;z-index:-2;border-radius:0}
.door-performance:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,17,39,.48),rgba(10,17,39,.2) 35%,rgba(10,17,39,.62))}
.door-performance h3{text-shadow:0 2px 18px #0003}
.door-performance .outline-word{color:white;-webkit-text-stroke:0}
.door-motion{background:var(--blue);color:white}
.door-performance:focus-visible,.door-motion:focus-visible{outline-offset:7px}
@media(max-width:540px){.brands{padding:19px 16px 0}.brands .section-overline{gap:14px}.brands .section-overline>span{font-size:9px}}

/* Client strip: full-bleed ribbon, matching the POLZO reference. */
.brands{position:relative;width:100vw;left:50%;margin-left:-50vw;padding:0;background:var(--blue);border:0}
.brands .section-overline{display:none}
.brands .brand-window{margin:0;padding:0}
.brands .brand-track{align-items:center}
.brands .brand-set{gap:64px;padding-right:64px}
.brands .brand-logo{width:140px;height:72px;flex:none}
.brands .brand-logo img{max-width:124px;max-height:31px;filter:brightness(0) invert(1);opacity:1}
.brands .text-logo{color:white;font-size:18px;letter-spacing:-.045em}
.brands .text-logo span{display:none}
@media(max-width:540px){
.brands .brand-set{gap:36px;padding-right:36px}
.brands .brand-logo{width:110px;height:58px}
.brands .brand-logo img{max-width:100px;max-height:25px}
.brands .text-logo{font-size:15px}
}

/* Clear discipline titles with small, curated media previews. */
.door-websites,.door-motion{display:flex;flex-direction:column}
.competence-layout{position:relative;padding-top:45px;min-height:300px;display:flex;align-items:flex-start;gap:18px}
.competence-layout h3{font-family:TTNorms,sans-serif;font-weight:500;font-size:clamp(30px,3.7vw,58px);line-height:.98;letter-spacing:-.065em;position:relative;z-index:1}
.competence-layout h3>span{font-weight:400}
.door-preview{width:34%;margin-left:auto;flex:none;transform:rotate(5deg);margin-top:75px}
.door-preview img,.door-preview video{width:100%;height:auto;border:0;border-radius:0}
.website-preview{transform:rotate(-5deg);margin-top:115px;position:absolute;right:0;width:36%}
.door-preview figcaption{font-size:8px;letter-spacing:.03em;margin-top:8px;text-align:right}
.door-action{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-top:auto;padding-top:28px;font-size:10px;letter-spacing:.02em}
.door-action .handwriting{font-size:23px;max-width:150px;transform:rotate(-7deg)}
.door-action>span:last-child{border-bottom:1px solid currentColor;padding-bottom:6px}
.door-motion .competence-layout{min-height:325px;display:block}
.motion-preview{position:absolute;right:0;top:115px;margin:0;width:39%;transform:rotate(5deg)}
.door-preview{transition:transform .35s ease}
.door:hover .door-preview{transform:rotate(0) translateY(-5px)}
/* Gallery thumbnails, with native controls only inside the viewing overlay. */
.film-thumb{display:block;position:relative;width:100%;padding:0;border:0;background:var(--pale);overflow:hidden;text-align:left}
.film-thumb img{display:block;width:100%;height:auto;transition:transform .6s ease,filter .4s ease}
.film-thumb:hover img{transform:scale(1.025);filter:brightness(.92)}
.film-watch{position:absolute;bottom:16px;right:16px;display:flex;align-items:center;gap:20px;padding:11px 14px;background:white;color:var(--blue);font-size:10px;letter-spacing:.06em;border-radius:30px}
.film-watch>span{font-size:19px;line-height:1}
.ugc-grid .film-thumb img{aspect-ratio:9/16;object-fit:cover}
.editorial-films .film-thumb img{aspect-ratio:1;object-fit:cover}
.website-media .film-thumb img{max-height:620px;object-fit:contain;object-position:top}
.motion-grid{grid-template-columns:1fr 1fr;gap:70px 6vw}
.motion-card:first-child{grid-column:auto}
.motion-card:nth-child(even){margin-top:110px}
.motion-card:last-child{max-width:85%;grid-column:auto}
.film-dialog{width:min(1100px,94vw);max-height:94dvh;border:0;padding:48px 12px 12px;background:#141327;color:white;overflow:hidden}
.film-dialog::backdrop{background:rgba(15,14,35,.88);backdrop-filter:blur(8px)}
.film-dialog video{display:block;width:100%;height:auto;max-height:calc(90dvh - 60px);object-fit:contain;background:#141327}
.film-close{position:absolute;right:18px;top:13px;border:0;background:none;color:white;font-size:13px;padding:5px}
@media(max-width:800px) and (min-width:541px){.competence-layout h3{font-size:30px}.competence-layout{min-height:280px}.door-action{display:block}.door-action>span{display:block;margin-top:20px}.door-motion .competence-layout{min-height:260px}.motion-preview{top:145px}}
@media(max-width:540px){.competence-layout{padding-top:32px;min-height:280px}.competence-layout h3{font-size:38px}.website-preview{margin-top:130px;width:40%}.door-action{font-size:9px;gap:14px}.door-action .handwriting{font-size:21px}.door-motion .competence-layout{min-height:290px}.motion-preview{top:142px;width:46%}.motion-grid{display:block}.motion-card:nth-child(even){margin-top:0}.film-watch{right:10px;bottom:10px;padding:8px 10px;font-size:8px;gap:12px}}
@media(prefers-reduced-motion:reduce){.film-thumb:hover img{transform:none}.door:hover .door-preview{transform:none}}

.oakley-composition>video{width:100%;aspect-ratio:1.08;object-fit:cover}

/* Keep the original Motion lettering and play symbol; add only the thumbnail. */
.door-motion .motion-preview{top:132px;right:27px;width:29%;margin:0}
.door-motion .motion-type{position:relative;z-index:1}
.door-motion .door-caption{margin-top:32px}
@media(max-width:800px){.door-motion .motion-preview{top:118px;right:18px;width:28%}}
@media(max-width:540px){.door-motion .motion-preview{top:123px;right:18px;width:29%}}

/* Preserve the original three-font contrast when changing card wording. */
.door-websites .competence-layout h3{font-family:Bubble,sans-serif;font-weight:400;font-size:clamp(30px,3.45vw,53px);letter-spacing:-.055em;line-height:1.06}
.door-websites .competence-layout h3>span{font-family:TTNorms,sans-serif;font-size:.95em;font-weight:500;line-height:.98;display:inline-block;margin-top:10px}
.door-performance .outline-word{color:transparent;-webkit-text-stroke:1.3px white;text-shadow:none}
@media(max-width:800px) and (min-width:541px){.door-websites .competence-layout h3{font-size:28px}}
@media(max-width:540px){.door-websites .competence-layout h3{font-size:35px}}

/* Explicit handwritten calls to action across all four disciplines. */
.card-cta{display:flex;align-items:center;justify-content:center;gap:24px;align-self:flex-end;width:fit-content;min-width:166px;margin:28px 0 0 auto;padding:13px 23px 15px;border:2px solid var(--blue);border-radius:48px;background:var(--blue);color:white;font-family:Ligne44,cursive;font-size:27px;line-height:1;letter-spacing:0;transform:rotate(-3deg);transition:transform .25s ease,background .25s ease,color .25s ease}
.card-cta>span{font-family:TTNorms,sans-serif;font-size:30px;line-height:1}
.door-performance .card-cta,.door-motion .card-cta{background:white;color:var(--blue);border-color:white}
.door:hover .card-cta,.door:focus-visible .card-cta{transform:rotate(0) translateY(-3px)}
.door-websites .door-action{padding-top:22px}.door-websites .door-action>span{border:0}
@media(max-width:540px){.card-cta{font-size:24px;padding:11px 20px 13px;min-width:150px;margin-top:24px}}
@media(prefers-reduced-motion:reduce){.door:hover .card-cta,.door:focus-visible .card-cta{transform:none}}

/* Smaller handwritten CTA pills. */
.card-cta{min-width:0;gap:13px;padding:9px 17px 11px;font-size:21px;border-width:1px;margin-top:22px;transform:rotate(-2deg)}
.card-cta>span{font-size:22px}
@media(max-width:540px){.card-cta{min-width:0;font-size:19px;gap:11px;padding:8px 15px 10px;margin-top:20px}.card-cta>span{font-size:20px}}

/* Give the website preview more presence in the composition. */
.door-websites .website-preview{width:49%;margin-top:132px}
.door-websites .competence-layout{min-height:350px}
@media(max-width:800px) and (min-width:541px){.door-websites .website-preview{width:51%;margin-top:140px}.door-websites .competence-layout{min-height:315px}}
@media(max-width:540px){.door-websites .website-preview{width:55%;margin-top:148px}.door-websites .competence-layout{min-height:335px}}

/* A quieter title leaves the UGC portrait room to breathe. */
.door-performance h3{font-size:clamp(34px,3.7vw,56px);line-height:1.04;letter-spacing:-.045em;margin-top:34px}
.door-performance .outline-word{font-size:1em;letter-spacing:-.045em;margin-top:5px;-webkit-text-stroke:1px white}
@media(max-width:800px) and (min-width:541px){.door-performance h3{font-size:3.8vw;margin-top:28px}}
@media(max-width:540px){.door-performance h3{font-size:36px;margin-top:30px}}

/* Anchor the Olipop film to the upper-right edge of the composition. */
.door-motion{overflow:visible}
.door-motion .motion-preview{width:38%;top:100px;right:-12px;transform:rotate(4deg);z-index:2}
.door-motion .motion-preview figcaption{padding-right:12px}
@media(max-width:800px) and (min-width:541px){.door-motion .motion-preview{width:36%;top:86px;right:-8px}}
@media(max-width:540px){.door-motion .motion-preview{width:38%;top:96px;right:-8px}}

/* Hand-placed film, contained within the blue panel. */
.door-motion .motion-type{font-size:clamp(61px,5.85vw,94px)}
.door-motion .motion-preview{right:28px;top:111px;width:36%;transform:rotate(-6deg)}
.door-motion:hover .motion-preview{transform:rotate(-4deg) translateY(-3px)}
@media(max-width:800px) and (min-width:541px){.door-motion .motion-type{font-size:7.2vw}.door-motion .motion-preview{right:20px;top:105px;width:34%}}
@media(max-width:540px){.door-motion .motion-type{font-size:72px}.door-motion .motion-preview{right:19px;top:111px;width:35%}}
@media(prefers-reduced-motion:reduce){.door-motion:hover .motion-preview{transform:rotate(-6deg)}}

/* Motion thumbnail: clockwise tilt, right edge lower than left. */
.door-motion .motion-preview{transform:rotate(6deg)}
.door-motion:hover .motion-preview{transform:rotate(4deg) translateY(-3px)}
@media(prefers-reduced-motion:reduce){.door-motion:hover .motion-preview{transform:rotate(6deg)}}

/* A distinct blue editorial beat between the hero and the work. */
.work-section{padding-top:64px}
.work-intro{width:100vw;position:relative;left:50%;margin-left:-50vw;background:var(--blue);color:white;display:block;padding:48px max(var(--gutter),calc((100vw - var(--content))/2)) 44px;margin-bottom:82px}
.work-intro .eyebrow{display:block;font-size:11px;letter-spacing:.09em}
.work-intro h2{width:85%;margin:36px 0 20px 9%;font-size:clamp(54px,6.3vw,100px);line-height:1.04;font-weight:400}
.work-intro h2>br{display:none}
.work-intro h2>span{display:block;white-space:nowrap;margin-left:19%;margin-top:5px;font-size:.96em}
.work-intro>p{font-family:Ligne44,cursive;font-size:23px;line-height:1.2;width:235px;margin:22px 0 0 2%;padding:0;transform:rotate(-5deg)}
@media(max-width:800px){.work-section{padding-top:45px}.work-intro{padding-top:34px;padding-bottom:36px;margin-bottom:52px}.work-intro h2{font-size:7.6vw;margin-left:3%;width:94%;margin-top:30px}.work-intro h2>span{margin-left:10%}.work-intro>p{font-size:20px;margin-top:25px;margin-left:0;width:210px}}
@media(max-width:540px){.work-section{padding-top:36px}.work-intro{padding-top:29px;padding-bottom:30px;margin-bottom:42px}.work-intro .eyebrow{font-size:9px;margin-bottom:0}.work-intro h2{font-size:9.3vw;width:100%;margin:29px 0 23px;line-height:1.15}.work-intro h2>span{margin-left:7%;font-size:.93em}.work-intro>p{font-size:18px;margin:18px 0 0 0;width:190px}}

/* Keep collaborations and introduction in one continuous blue field. */
.work-section{padding-top:0}
.work-intro{padding-top:64px}
@media(max-width:800px){.work-section{padding-top:0}.work-intro{padding-top:44px}}
@media(max-width:540px){.work-section{padding-top:0}.work-intro{padding-top:34px}}

/* Let the blue introduction meet the first film edge. */
.work-intro{margin-bottom:0;padding-bottom:126px}
@media(max-width:800px){.work-intro{margin-bottom:0;padding-bottom:88px}}
@media(max-width:540px){.work-intro{margin-bottom:0;padding-bottom:72px}}

/* White collaboration ribbon bridges the blue introduction and films. */
.work-intro{padding-bottom:60px}
.work-section>.brands{margin-top:0;margin-bottom:0;background:white;color:var(--blue);padding:12px 0}
.work-section>.brands .brand-logo img{filter:brightness(0) saturate(100%) invert(24%) sepia(97%) saturate(3100%) hue-rotate(239deg) brightness(88%) contrast(98%)}
.work-section>.brands .text-logo{color:var(--blue)}
@media(max-width:800px){.work-intro{padding-bottom:44px}}
@media(max-width:540px){.work-intro{padding-bottom:34px}.work-section>.brands{padding:8px 0}}

/* Gentle waves only on the boundaries between blue and white sections. */
.home .work-intro::before,.home .work-intro::after,.home .contact::before{content:"";position:absolute;left:0;width:100%;height:22px;pointer-events:none;background-repeat:no-repeat;background-size:100% 100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 24' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 0H1440V12C1200 24 1040 0 800 12S320 24 0 12Z'/%3E%3C/svg%3E")}
.home .work-intro::before{top:-1px}
.home .work-intro::after{bottom:-1px;transform:rotate(180deg)}
.home .contact{position:relative}
.home .contact::before{top:-1px}
@media(max-width:540px){.home .work-intro::before,.home .work-intro::after,.home .contact::before{height:12px}}

/* Center the second title line under YOUR WORLD. */
.page-intro h1.website-page-title{display:table;width:max-content;max-width:100%;text-align:center}
.website-page-title>span{display:block}