/* Look Serious homepage: approved concepts design, shared navigation and project hovers. */
@font-face{font-family:'LS GT Standard';src:url('/design-system/assets/fonts/GT-America-Standard-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
:root{--ink:#080908;--paper:#f2f0e6;--orange:#ff8700;--gray:#b1b3aa;--gutter:clamp(24px,4.5vw,80px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;background:var(--ink);color:var(--paper);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure{margin:0}a{color:inherit;text-decoration:none}button,textarea{font:inherit}button{cursor:pointer}img{display:block;width:100%;height:auto}
a:focus-visible,button:focus-visible,textarea:focus-visible{outline:3px solid currentColor;outline-offset:6px}
::selection{background:var(--orange);color:var(--ink)}
.skip{position:fixed;top:-100px;left:24px;z-index:100;padding:16px;background:var(--paper);color:var(--ink)}.skip:focus{top:12px}
.site-header{background:transparent;color:var(--paper);transition:background .18s ease}
/* Blend the fixed header as a group so its links see the hero video behind it. */
.site-header:not(.is-past-hero){color:#fff;mix-blend-mode:difference}
.site-header.is-past-hero{background:var(--ink);mix-blend-mode:normal}
html:root body [data-site-nav]>.wordmark,html:root body [data-site-nav]>.wordmark>span,html:root body [data-site-nav]>.wordmark strong,
html:root body #ls-mobile-menu .ls-menu-logo,html:root body #ls-mobile-menu .ls-menu-logo>span,html:root body #ls-mobile-menu .ls-menu-logo strong{font-weight:400!important;text-transform:lowercase!important}
.micro-label{font:400 11px/1.4 var(--gt-mono)!important;text-transform:lowercase;letter-spacing:.025em}
.simple-link{text-decoration:none;font-size:16px;line-height:1.5;display:inline-block;padding-block:8px}
.simple-link:is(:hover,:focus-visible){text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.concept-hero{position:relative;isolation:isolate;margin-top:0;min-height:0;height:95vh;height:95svh;display:flex;flex-direction:column;justify-content:space-between;padding:124px var(--gutter) 32px}
.concept-hero>video,.hero-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-shade{z-index:-1;background:linear-gradient(180deg,#0009,transparent 34%,#0009)}
html:root body .concept-hero h1{font:400 clamp(28px,5.7vw,78px)/1.1 var(--gt-mono)!important;letter-spacing:.015em;text-transform:uppercase;color:#ccc;max-width:none;margin:0;text-align:left}
.concept-intro{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);background:var(--ink);padding-block:60px}
.concept-intro::after{content:"";position:absolute;inset-block:106px;left:calc(58.333333% - 2px);width:4px;background:repeating-linear-gradient(to bottom,var(--gray) 0 4px,transparent 4px 12px);pointer-events:none}
.intro-paper,.intro-poster{padding:clamp(54px,5.2vw,83px) clamp(32px,4.5vw,80px);min-width:0;min-height:320px}
html:root body .concept-intro .intro-description{font-family:'LS GT Standard','Helvetica Neue',Helvetica,Arial,sans-serif!important;font-weight:400!important}
.intro-paper{color:var(--paper);display:flex;flex-direction:column}

html:root body .intro-paper h2{font:400 clamp(23px,2.65vw,36px)/1.2 var(--gt-mono)!important;letter-spacing:.015em;text-transform:uppercase;color:#ccc;text-wrap:initial;max-width:26ch}
.intro-description{color:#ccc;font-size:clamp(18px,2.1vw,25px);line-height:1.45;max-width:34ch;margin-top:26px}



.intro-poster{color:var(--orange);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
html:root body .poster-type{font:400 clamp(28px,4.7vw,62px)/1.06 var(--gt-mono)!important;letter-spacing:.012em;text-transform:uppercase;color:var(--orange);margin:0;overflow-wrap:normal}
.poster-bottom{display:flex;justify-content:flex-end;color:var(--paper)}
.concept-eye{width:clamp(68px,6vw,96px);height:auto;fill:currentColor;flex:none}
.concept-eye-open{animation:concept-open 5s steps(1,end) infinite}
.concept-eye-half{opacity:0;animation:concept-half 5s steps(1,end) infinite}
.concept-eye-closed{opacity:0;animation:concept-closed 5s steps(1,end) infinite}
@keyframes concept-open{0%,24%,32%,100%{opacity:1}25%,31%{opacity:0}}
@keyframes concept-half{0%,24%,27%,29%,32%,100%{opacity:0}25%,30%{opacity:1}}
@keyframes concept-closed{0%,26%,30%,100%{opacity:0}27%,29%{opacity:1}}
.concept-work{padding:48px 0}
.work-heading{padding-inline:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}
html:root body .work-heading h2{font-family:'LS GT Standard','Helvetica Neue',Helvetica,Arial,sans-serif!important;font-size:22px;font-weight:400!important;letter-spacing:-.02em}
.work-rows{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.concept-project{display:block}
.project-frame{position:relative;aspect-ratio:2/1;overflow:hidden;background:#111210}
.project-frame.sbdc-ai img{object-fit:contain}
.project-frame img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}


.concept-footer{display:grid;grid-template-columns:2fr 1fr 1fr;align-items:stretch;color:var(--ink)}
.footer-invitation{background:var(--orange);padding:28px clamp(24px,2vw,36px);display:flex;flex-direction:column;justify-content:flex-start;gap:0}



html:root body .footer-invitation h2{font:400 clamp(22px,2vw,32px)/1.22 var(--gt-mono)!important;letter-spacing:-.04em;max-width:none}
#invitation-title>span{display:block;white-space:nowrap}





.footer-directory{background:var(--gray);padding:28px clamp(20px,1.6vw,30px);display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:20px}
.footer-directory>div>a{display:block;width:fit-content;font:400 clamp(15px,1.25vw,21px)/1.5 var(--gt-mono);letter-spacing:-.04em;padding:3px 0}
.footer-directory>div>a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}

.footer-start{background:#171816;color:var(--paper);padding:28px clamp(20px,1.6vw,30px);display:flex;flex-direction:column}
html:root body .footer-start h2{font:400 clamp(22px,1.65vw,28px)/1.18 var(--gt-mono)!important;letter-spacing:-.04em;margin-top:0}
.footer-start>p:not(.micro-label){font-size:13px;line-height:1.5;margin-top:20px;color:#c2c3b9}
.footer-email{display:block;margin-top:24px;padding:15px 12px;background:var(--paper);color:var(--ink);font:400 12px/1.4 var(--gt-mono);text-align:left}
.footer-email:is(:hover,:focus-visible){background:var(--orange)}

@media(min-width:1700px){.intro-paper,.intro-poster{min-height:350px}}
@media(max-width:1100px){
 .concept-footer{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .footer-invitation{grid-column:auto}
 .footer-invitation h2{max-width:none!important}
 .footer-directory{display:none}
 
 
 
 
}
@media(max-width:760px){
 html{scroll-padding-top:78px}
 .concept-hero{margin-top:0;min-height:0;height:95vh;height:95svh;padding:102px 24px 24px}
 .concept-hero>video{object-position:55% center}
   html:root body .concept-hero h1{font-size:clamp(28px,6.7vw,44px)!important;white-space:normal}
 .concept-intro{grid-template-columns:1fr}
 .concept-intro::after{display:none}
 .intro-paper,.intro-poster{padding:46px 28px;min-height:0}
 
 html:root body .intro-paper h2{font-size:clamp(22px,5.5vw,30px)!important}
 .intro-description{font-size:20px;line-height:1.45;max-width:34ch;margin-top:26px}
 
 
 .intro-poster{min-height:230px;gap:32px}
 html:root body .poster-type{font-size:clamp(38px,9vw,57px)!important;margin:0}
 .concept-eye{width:76px}
 .concept-work{padding:36px 0}
 .project-frame{aspect-ratio:1/1}
 .project-frame.tfg img{object-fit:contain;padding:4%;background:#4eff00}
 .work-rows{gap:0}
 
 
  .work-heading .simple-link{font-size:14px}
 .concept-footer{grid-template-columns:1fr}
 .footer-invitation,.footer-directory,.footer-start{padding:28px 24px}
 .footer-invitation{gap:0}
 .footer-invitation .invitation-bottom{display:none}
 
 
 html:root body .footer-invitation h2{font-size:clamp(20px,4.6vw,30px)!important}
 
 
 .footer-directory{gap:24px}.footer-directory>div>a{font-size:20px}
 
 html:root body .footer-start h2{font-size:24px!important}

}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* Text stays visible if animation support is unavailable. */
.video-status{max-width:34ch;font-size:12px;line-height:1.4;margin-bottom:12px}
html:root body .snap-word{display:inline-block;font:inherit!important;letter-spacing:inherit}

/* The standard rolling pixel-arrow link, placed inside this footer study. */
html:root body .concept-footer :is(p,span,label){font-family:var(--gt-mono)!important}
.concept-footer .lsf-top{display:inline-flex;align-items:flex-end;min-height:44px;margin-top:auto;padding:90px 0 0;font:400 14px/1.5 var(--gt-mono);letter-spacing:0;text-transform:lowercase;text-decoration:none}
.concept-footer .lsf-reel{display:flex;font:inherit!important}
.concept-footer .lsf-cell{display:block;width:.64em;height:1.5em;overflow:hidden}
.concept-footer .lsf-strip{display:flex;flex-direction:column;transform:translateY(0);transition:transform .62s cubic-bezier(.3,0,.15,1);transition-delay:calc((9 - var(--i))*22ms)}
.concept-footer .lsf-strip>span{display:grid;place-items:center;flex:none;height:1.5em;font:inherit!important}
.concept-footer .lsf-strip svg{display:block;width:.57em;height:.8em;fill:currentColor}
.concept-footer .lsf-right svg{transform:rotate(90deg)}
.concept-footer .lsf-diagonal svg{transform:rotate(45deg)}
.concept-footer .lsf-top:focus-visible .lsf-strip{transform:translateY(-75%);transition-delay:calc(var(--i)*34ms)}
@media(hover:hover) and (pointer:fine){.concept-footer .lsf-top:hover .lsf-strip{transform:translateY(-75%);transition-delay:calc(var(--i)*34ms)}}
@media(prefers-reduced-motion:reduce){.concept-footer .lsf-strip{transition:none}}

.invitation-bottom{display:flex;flex-direction:column;align-items:flex-start;margin-top:auto;padding-top:90px}
.footer-invitation .invitation-cta{align-self:flex-start;font-size:16px;padding:0;margin-top:24px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.invitation-bottom .concept-copyright{font:400 14px/1.5 var(--gt-mono)!important;margin:0}
html:root body .concept-project .project-hover-label{font:400 clamp(20px,1.9vw,30px)/1.2 'LS GT Standard','Helvetica Neue',Helvetica,Arial,sans-serif!important;text-transform:none;letter-spacing:0;text-align:center}

/* Faster project wash; reveal the intro only after its scroll trigger is ready. */
.concept-project .project-hover-tile{opacity:calc(var(--card-eye-visible)*.97);transition-duration:70ms;transition-delay:calc(var(--tile-order)*4ms)}
.concept-project .project-hover-prompt{transition-duration:.1s,.16s;transition-delay:calc(var(--card-eye-visible)*70ms)}
@media(prefers-reduced-motion:no-preference){html.intro-reveal-pending .intro-description{opacity:0}}

/* The original word holds its exact place; only the decorative overlay changes. */
html:root body .intro-description .weird-word{position:relative;display:inline-block;vertical-align:baseline;white-space:nowrap;font:inherit!important;letter-spacing:inherit}
.weird-word>[data-weird-live]{position:absolute;inset:0;white-space:pre;pointer-events:none;opacity:0}
.weird-word.is-weird>[data-weird-base]{opacity:0}
.weird-word.is-weird>[data-weird-live]{opacity:1}
@media(prefers-reduced-motion:reduce){
 .weird-word.is-weird>[data-weird-base]{opacity:1}
 .weird-word.is-weird>[data-weird-live]{opacity:0}
}

/* Keep the animated words aligned like the approved mono type study. */
.intro-first-line,.intro-free-line{display:block}
.intro-free-line>span{display:inline;white-space:nowrap}